/* FONTS */

@font-face {
	font-family: 'Sawton Circular';
	src: url('./fonts/sawtoncircular-thin-webfont.eot');
	src: url('./fonts/sawtoncircular-thin-webfont.eot?#iefix') format('embedded-opentype'),
		 url('./fonts/sawtoncircular-thin-webfont.woff2') format('woff2'),
		 url('./fonts/sawtoncircular-thin-webfont.woff') format('woff'),
		 url('./sawtoncircular-thin-webfont.ttf') format('truetype');
	font-weight: 200;
	font-style: normal;
}
@font-face {
	font-family: 'Sawton Circular';
	src: url('./fonts/sawtoncircular-light-webfont.eot');
	src: url('./fonts/sawtoncircular-light-webfont.eot?#iefix') format('embedded-opentype'),
		 url('./fonts/sawtoncircular-light-webfont.woff2') format('woff2'),
		 url('./fonts/sawtoncircular-light-webfont.woff') format('woff'),
		 url('./fonts/sawtoncircular-light-webfont.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: 'Sawton Circular';
	src: url('./fonts/sawtoncircular-regular-webfont.eot');
	src: url('./fonts/sawtoncircular-regular-webfont.eot?#iefix') format('embedded-opentype'),
		 url('./fonts/sawtoncircular-regular-webfont.woff2') format('woff2'),
		 url('./fonts/sawtoncircular-regular-webfont.woff') format('woff'),
		 url('./fonts/sawtoncircular-regular-webfont.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'Sawton Circular';
	src: url('./fonts/sawtoncircular-medium-webfont.eot');
	src: url('./fonts/sawtoncircular-medium-webfont.eot?#iefix') format('embedded-opentype'),
		 url('./fonts/sawtoncircular-medium-webfont.woff2') format('woff2'),
		 url('./fonts/sawtoncircular-medium-webfont.woff') format('woff'),
		 url('./fonts/sawtoncircular-medium-webfont.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: 'Sawton Circular';
	src: url('./fonts/sawtoncircular-bold-webfont.eot');
	src: url('./fonts/sawtoncircular-bold-webfont.eot?#iefix') format('embedded-opentype'),
		 url('./fonts/sawtoncircular-bold-webfont.woff2') format('woff2'),
		 url('./fonts/sawtoncircular-bold-webfont.woff') format('woff'),
		 url('./fonts/sawtoncircular-bold-webfont.ttf') format('truetype');
	font-weight: 800;
	font-style: normal;
}

/* GENERAL STYLES */

html {
	font: 200 14pt/1.5 "Sawton Circular", Helvetica, Arial, sans-serif;
	background-color: #0f2f5c;
	color: #14202e;}
html * {
	transition: all .25s ease-in-out;
	box-sizing: border-box;}
html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	padding: 0;
	overscroll-behavior-y: none;}

a {
	color: #c2412d;
	text-decoration: none;}
a:hover {
	color: #1d4e89;}

ul {
	padding: 0 0 0 1em;}
ul li, ol li {
	margin: 0.25em 0 0;}

section {
	width: 100%;
	padding: 4rem 10%;
	background-color: #f4f7fB;
	border-bottom: 1px solid #0f2f5c;}
section:last-child {
	border-bottom: 0;}

h1, h2 {
	font-weight: 700;
	line-height: 1.2;
	margin: 0;}
h1 {
	color: #fff;
	font-size: 2rem;}
h2 {
	font-size: 1.5rem;}
h4.tagline {
	font-weight: 400;
	color: #9DBBE0;
	font-size: 1.5rem;
	line-height: 1.2;
	margin-top: .5rem;
	font-style: italic;}

strong {
	font-weight: 700;}

/* SECTIONS */
section.highlight {
	background-color: #0f2f5c;
	background-image: url("./grid.svg");
	background-repeat: repeat;
	color: #eaf1fa;}
section#hero img {
	width: 100%;}
section.highlight a {
	color: #f2715d;}
section.highlight a:hover {
	color: #c2412d;}
section.highlight a.button {
	display: inline-block;
	margin: 2rem auto 1rem;
	padding: .5rem 1rem;
	border-radius: .25rem;
	background-color: #c2412d;
	color: #fff;
	text-align: center;}
section.highlight a.button:hover {
	color: #1d4e89;
	background-color: #9dbbe0;}
section#footer {
	padding: 2rem 10%;
	background-image: url("./grid.svg");
	background-repeat: repeat;}

@media all and (max-width: 40rem) {
	html {
		font-size: 12pt;}

	section {
		padding: 2.5vb;}
}