@charset "UTF-8";

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

html, body{
	height:100%;width:100%;
}

body{
	margin:0;padding:0;font-size:16px;font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight: 100;
}

h1, h2, h3, h4, h5, h6{
	font-weight: 100;
}

#wrapper{
	height:100%;width:100%; transform: translateY(75px); opacity: 0;
}
body.no-js #wrapper{
	transform: none; opacity: 1;
}
body.ready #wrapper{
	transform: translateY(0); opacity: 1;
	-webkit-transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	transition: all 1s ease-out;
}

#header{
	position:absolute;z-index:500;text-align:center;top:calc(50% - 75px);left:50%;transform:translate(-50%,-50%);width:100%;
}
#header h1{
	margin:0;font-size:5.5em;
}
#header p{
	margin:0;padding:0;font-size:1.75em;
}
#header a{
	color:#000;text-decoration:none;position:relative;display: inline-block;
}
#header a:hover{
	text-decoration:none;
}

#header a::after{
	content: '';width: 0;display: block;border-width: 0 0 1px;border-style: solid;position: absolute;left:0;bottom:-5px;
	-webkit-transition: width 0.1s linear;
	-moz-transition: width 0.1s linear;
	-o-transition: width 0.1s linear;
	transition: width 0.1s linear;
}
#header a:hover::after{
	width: 100%;
}
#header h3{
	margin-top:150px;margin-top:15vh;margin-bottom:0;font-size:1.75em;
}

#company{
	position: absolute; left:0; right: 0; top: calc(100% - 117px); min-height: 30px; padding:30px; text-align: center;
	background: #F3F3F3; border-top:5px solid #ccc;
}

#company a{
	display: inline-block; padding: 10px 15px;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: all 0.1s linear;
	-moz-transition: all 0.1s linear;
	-o-transition: all 0.1s linear;
	transition: all 0.1s linear;
}
#company a:hover{
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
	color: black;
}

#company a svg{
	height:30px; width: auto;
}

::-moz-selection { background: rgba(255,255,255,0.2); }
::selection { background: rgba(255,255,255,0.2); }

@media (max-width:1080px) {
	#header{top:calc(50% - 49px)}
	#header h1{font-size:5em}
	#header p{font-size:1.3em}
	#header h3{font-size:1.3em}
	#company{padding:20px;top: calc(100% - 87px)}
	#company a svg{height:20px}
}
@media (max-width:820px) {
	body, h1, h2, h3, h4, h5, h6{font-weight: 300}
	#header h1{font-size:3.5em}
	#header p{font-size:1em}
	#header h3{font-size:1em}
}
@media (max-width:580px) {
	#header h1{font-size:2.8em}
}
@media (max-width:480px) {
	#header h1{font-size:2em}
}
@media (max-width:380px) {
	#header h1{font-size:1.8em}
	#header p{font-size:0.8em}
	#header h3{font-size:0.8em}
}