@import url(https://fonts.bunny.net/css?family=work-sans:400,700);

:root {
	--colour-text: #333;
	--colour-link: #0056A6;
	--colour-link-hover: #0071da;
	--colour-button: #0056A6;
	--colour-button-hover: #0071da;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-family: "work sans";
}

body {
	background: #fff;
	color: #333;
	line-height: 1.5;
	opacity: 0;
	position: relative;
	transition: 0.2s linear;
}

.hide {
	opacity: 0;
	transition: 0.2s linear;
}

.loaded {
	opacity: 1;
	transition: 0.2s linear;
}

h1, h2, h3, h4, h5, h6 {
	color:#333;
	font-weight: bold;
	letter-spacing: -1px;
	line-height: 1.2;
	margin: 0 0 1rem 0;
}

a, a:visited {
	color:#0082b2;
	font-weight: bold;
	text-decoration: underline;
}

button:disabled {
	background:#999;
	cursor: not-allowed;
	&:hover {
		background:#999;
		cursor: not-allowed;
	}
}

.grey {
	background: #fafafa;
}

.padded {
	padding: 30px;
}

.white {
	background: #fff;
}

.container {
	margin: 0 auto;
	max-width: 800px;
	padding: 50px;
}

#lorem.container {
	display: flex;
	flex-wrap: wrap;
}

.half {
	flex: 0 0 48%;
	margin:0 1%;
}

.goHome {
	padding: 20px;
	position: absolute;
		top: 20px;
		left: 20px;	
}

/* Buttons */

a::-moz-focus-inner,
button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

button,
.button,
.button:visited,
.btn,
.btn:visited,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	background-color: var(--colour-button);
	border: 0;
	border-radius: 0;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-family: var(--base-font-family);
	font-size: 1rem;
	font-weight: var(--bold);
	line-height: 1.2;
	overflow: visible;
	padding: 0.5rem 1rem;
	text-decoration: none;
	transition:background 0.2s linear;
	-webkit-appearance: none;
}

button:hover,
.button:hover,
.btn:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
	background-color: var(--colour-button-hover);
	color: #fff;
	transition: background 0.2s linear;
}
button:active,
.button:active,
.button:focus,
.btn:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active {
	box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
	color: #fff;
}

input[type="submit"]:disabled {
	background: #999;
	cursor: not-allowed;
}

	@media only screen and (min-width: 600px) {
		.button,
		.button:visited,
		.btn,
		.btn:visited,
		button,
		input[type="submit"],
		input[type="reset"],
		input[type="button"] {
			font-size: 1rem;
		}
	}

/* Forms */

form {
	margin-bottom: 20px;
}

form > div,
fieldset > div {
	margin-bottom: 10px;
}

fieldset {
	background: #fafafa;
	border: 1px solid #eee;
	margin-bottom: 20px;
	padding: 30px;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 2px;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
	box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
	color: #777;
	display: inline-block; 
	font-family: var(--base-font-family);
	font-size: var(--base-font-size);
	line-height: 1.2;
	margin: 0;
	padding: 0.5rem 0.75rem;
	max-width: 100%;
	width: auto;
	-webkit-appearance: none;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus {
	border: 1px solid #aaa;
		-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
	box-shadow:  0 0 3px rgba(0,0,0,.2);
	color: #444;
}

textarea {
	min-height: 60px;
}

.select-input { 
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='20' viewBox='0 0 31 20'%3E%3Cpolygon fill='%23666' fill-rule='evenodd' points='142.58 570.54 131.06 582 142.58 593.46 139.04 597 124.04 582 139.04 567' transform='matrix(0 -1 -1 0 597.31 143.31)'/%3E%3C/svg%3E");
	background-position: right 12px top 50%;
	background-repeat: no-repeat;
	background-size: 14px auto;
	border: 1px solid #ccc;
	border-radius: 2px;
	height: 2.2rem;
	min-width: 200px;
	overflow: hidden;
	position: relative;
	&:focus-within {
		outline: rgb(0, 95, 204) auto 2px;
		outline-offset: 1px;
	}
}

select { 
	-ms-appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none; 
	background: transparent;
	cursor: pointer;
	border: 0;
	display: block;
	font-family: var(--base-font-family);
	font-size: var(--base-font-size);
	font-weight: 400;
	line-height: 1.2;
	outline: 0;
	padding: 1rem 0.75rem ;
	position: absolute;
		left: 0;
		top: 50%;
	text-indent: .01px;
	text-overflow: "";
		-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 100%;
	z-index: 999;
}

select::-ms-expand {
	display: none;
}

input[type="checkbox"] {
	display: inline; 
}

	@media only screen and (min-width: 600px) {
		
		input[type="text"],
		input[type="password"],
		input[type="email"],
		input[type="tel"],
		input[type="number"],
		textarea,
		select {
			font-size: var(--base-font-size);
		}	
		
	}