@charset "UTF-8";

@font-face {
	font-family: 'SimplonMonoRegular';
	font-style: normal;
	font-weight: normal;
	src: url('../fonts/simplonmono-regular-webfont.woff') format('woff'),
		 url('../fonts/simplonmono-regular-webfont.woff2') format('woff2');
}
@font-face {
	font-family: 'SimplonMonoMedium';
	font-style: normal;
	font-weight: normal;
	src: url('../fonts/simplonmono-medium-webfont.woff') format('woff'),
		 url('../fonts/simplonmono-medium-webfont.woff2') format('woff2');
}
@font-face {
	font-family: 'SimplonMonoBold';
	font-style: normal;
	font-weight: normal;
	src: url('../fonts/simplonmono-bold-webfont.woff') format('woff'),
		 url('../fonts/simplonmono-bold-webfont.woff2') format('woff2');
}
@font-face {
	font-family: 'SimplonNormLight';
	font-style: normal;
	font-weight: normal;
	src: url('../fonts/simplonnorm-light-webfont.woff') format('woff'),
		 url('../fonts/simplonnorm-light-webfont.woff2') format('woff2');
}
@font-face {
	font-family: 'SimplonNormRegular';
	font-style: normal;
	font-weight: normal;
	src: url('../fonts/simplonnorm-regular-webfont.woff') format('woff'),
		 url('../fonts/simplonnorm-regular-webfont.woff2') format('woff2');
}
@font-face {
	font-family: 'SimplonNormMedium';
	font-style: normal;
	font-weight: normal;
	src: url('../fonts/simplonnorm-medium-webfont.woff') format('woff'),
		 url('../fonts/simplonnorm-medium-webfont.woff2') format('woff2');
}
@font-face {
	font-family: 'SimplonNormBold';
	font-style: normal;
	font-weight: normal;
	src: url('../fonts/simplonnorm-bold-webfont.woff') format('woff'),
		 url('../fonts/simplonnorm-bold-webfont.woff2') format('woff2');
}

:root{
	--ss:100/1440;
	
	--black:#000000;
	--white:#ffffff;
	--dgrey:#323C3C;
	--grey:#A0A2A3;
	--lgrey:#EAE9E6;
	--orange:#E6673E;
	--cream:#EDE7DF;
	--lcream:#F2F4F2;
	--dgreen:#00322D;
	--green:#004E40;
	--lblue:#D2D8D6;
	--yellow:#F1BD48;
	
	--header-height:calc(var(--ss)*108vw);
	
	--ff:"sonar-sans", sans-serif;
	
	--h1:normal 500 calc(var(--ss)*56vw) / 1.1em 'SimplonMonoMedium';
	--h2:normal 500 calc(var(--ss)*40vw) / 1.06em 'SimplonMonoMedium';
	--h3:normal 500 calc(var(--ss)*20vw) / 1.06em 'SimplonMonoMedium';
	--p1:normal 400 calc(var(--ss)*16vw) / 1.5em 'Roboto', sans-serif;
	--key:normal 400 calc(var(--ss)*20vw) / 1.2em 'SimplonMonoRegular';
	--form:normal 400 calc(var(--ss)*18vw) / calc(var(--ss)*18vw) 'Roboto', sans-serif;
	--form2:normal 500 calc(var(--ss)*16vw) / calc(var(--ss)*16vw) 'SimplonMonoMedium';
	--link:normal 500 calc(var(--ss)*16vw) / calc(var(--ss)*16vw) 'SimplonMonoMedium';
	--btn:normal 500 calc(var(--ss)*16vw) / calc(var(--ss)*16vw) 'SimplonMonoMedium';
	--icon:normal 500 calc(var(--ss)*13vw) / 1.1em 'SimplonMonoMedium';
	--slider:normal 500 calc(var(--ss)*28vw) / 1.1em 'SimplonMonoMedium';
	--quote:normal 400 calc(var(--ss)*30vw) / 1.1em 'SimplonMonoRegular';
	
	--footer:normal 400 calc(var(--ss)*24vw) / 1.15em 'SimplonMonoRegular';
	
	--small:normal 300 calc(var(--ss)*14vw) / calc(var(--ss)*14vw) 'Roboto', sans-serif;
	
	--hpad:calc(var(--ss)*40vw);
}

@media (min-width:1700px){
	--h1:normal 500 calc(var(--ss)*50vw) / 1.1em 'SimplonMonoMedium';
	--h2:normal 500 calc(var(--ss)*36vw) / 1.06em 'SimplonMonoMedium';
	--h3:normal 500 calc(var(--ss)*18vw) / 1.06em 'SimplonMonoMedium';
	--p1:normal 400 calc(var(--ss)*14vw) / 1.5em 'Roboto', sans-serif;
	--key:normal 400 calc(var(--ss)*18vw) / 1.2em 'SimplonMonoRegular';
	--form:normal 400 calc(var(--ss)*16vw) / calc(var(--ss)*18vw) 'Roboto', sans-serif;
	--form2:normal 500 calc(var(--ss)*14vw) / calc(var(--ss)*16vw) 'SimplonMonoMedium';
	--link:normal 500 calc(var(--ss)*14vw) / calc(var(--ss)*16vw) 'SimplonMonoMedium';
	--btn:normal 500 calc(var(--ss)*14vw) / calc(var(--ss)*16vw) 'SimplonMonoMedium';
	--icon:normal 500 calc(var(--ss)*12vw) / 1.1em 'SimplonMonoMedium';
	--slider:normal 500 calc(var(--ss)*24vw) / 1.1em 'SimplonMonoMedium';
	--quote:normal 400 calc(var(--ss)*28vw) / 1.1em 'SimplonMonoRegular';
	
	--footer:normal 400 calc(var(--ss)*22vw) / 1.15em 'SimplonMonoRegular';
	
	--small:normal 300 calc(var(--ss)*12vw) / calc(var(--ss)*12vw) 'Roboto', sans-serif;
}

@media (max-width:768px){
	:root{
		--ss:100/360;
		--header-height:calc(var(--ss)*64vw);
		
		--h1:normal 500 calc(var(--ss)*36vw) / 1.1em 'SimplonMonoMedium';
		--h2:normal 500 calc(var(--ss)*24vw) / 1.06em 'SimplonMonoMedium';
		--p1:normal 400 calc(var(--ss)*16vw) / 1.5em 'Roboto', sans-serif;
		--key:normal 400 calc(var(--ss)*18vw) / 1.2em 'SimplonMonoRegular';
		--form:normal 400 calc(var(--ss)*16vw) / calc(var(--ss)*16vw) 'Roboto', sans-serif;
		--btn:normal 500 calc(var(--ss)*14vw) / calc(var(--ss)*14vw) 'SimplonMonoMedium';
		--nav:normal 500 calc(var(--ss)*18vw) / calc(var(--ss)*18vw) 'SimplonMonoMedium';
		--slider:normal 500 calc(var(--ss)*20vw) / 1.1em 'SimplonMonoMedium';
		--quote:normal 400 calc(var(--ss)*20vw) / 1.1em 'SimplonMonoRegular';
		
		--footer:var(--quote);
		
		--hpad:calc(var(--ss)*16vw);
	}
}