@charset "UTF-8";

@font-face {
    font-family: 'aileronbold';
    src: url('../fonts/aileron-bold-webfont.eot');
    src: url('../fonts/aileron-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/aileron-bold-webfont.woff2') format('woff2'),
         url('../fonts/aileron-bold-webfont.woff') format('woff'),
         url('../fonts/aileron-bold-webfont.ttf') format('truetype'),
         url('../fonts/aileron-bold-webfont.svg#aileronbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'aileronregular';
    src: url('../fonts/aileron-regular-webfont.eot');
    src: url('../fonts/aileron-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/aileron-regular-webfont.woff2') format('woff2'),
         url('../fonts/aileron-regular-webfont.woff') format('woff'),
         url('../fonts/aileron-regular-webfont.ttf') format('truetype'),
         url('../fonts/aileron-regular-webfont.svg#aileronregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body { font-family:'aileronregular',Arial,Tahoma,Verdana,Helvetica,sans-serif; }
h1 small, .text_container a { font-family:'aileronbold',Arial,Tahoma,Verdana,Helvetica,sans-serif; }

html, body {
	height:100vh;
}
html {
	font-size:24px;
}
body {
	position:relative;
	color:#000;
	-webkit-font-smoothing:antialiased;
	background-color:#fff;
	overflow-x:hidden;
}
body:before {
	position:absolute;
	bottom:50px;
	left:0;
	width:100vw;	
	height:100vh;
	content:"";
	background-color:#f2f2f2;
	-ms-transform:skewY(-6.5deg) translateZ(0); 
	transform:skewY(-6.5deg) translateZ(0); 
	-ms-transform-origin:left bottom;
	transform-origin:left bottom;
}
body:after {
	position:absolute;
	bottom:50px;
	left:0;
	width:100vw;	
	height:100vh;
	content:"";
	background-color:#fff;
	-ms-transform:skewY(6.5deg) translateZ(0); 
	transform:skewY(6.5deg) translateZ(0); 
	-ms-transform-origin:right bottom;
	transform-origin:right bottom;
}
h1, h2, h3, h4 {
	line-height:100%;
	font-weight:normal;
	margin:0;
	padding:0;
}
a:link, a:visited {
	color:#000;
}
a:hover {
	color:#009bd2;
	text-decoration:none;
}
ul {
	list-style-type:none;
	margin:0;
	padding:0;
}

/* Base-styles ............................. */

.content {
	min-height:100vh;
	overflow:hidden;
	z-index:10;
}
.content:before {
	position:absolute;
	bottom:0;
	right:0;
	width:445px;
	height:206px;
	content:"";
	background:url("../images/bg_object.svg") right bottom no-repeat;
	background-size:contain;
	opacity:0.17;
}

h1 {
	font-size:2.91rem;	
	line-height:1.2em;
}
h1 small {
	font-size:100%;
	color:inherit;
}
h2 {
	font-size:1.33rem;	
	line-height:1.2em;
}

/* Text-Container ............................................................... */

.text_container a {
	color:#009bd2;
	text-decoration:underline;
}
.text_container a:hover {
	color:#000;
	text-decoration:none;
}
.button a {
	font-size:1.5rem;
	text-decoration:none;
	background-color:#009bd2;
	border-radius:200px;
}
.button a:hover {
	background-color:#000;
}

.footer {
	font-size:0.66rem;
}
.footer a {
	color:#009bd2;
	text-decoration:underline;
}
.footer a:hover {
	color:#000;
	text-decoration:none;
}
.footer img {
	width:190px;
}

/* Effects ............................. */

a {
	-webkit-transition:all 300ms linear;
	-moz-transition:all 300ms linear;
	-o-transition:all 300ms linear;
	-ms-transition:all 300ms linear;
	transition:all 300ms linear;
}
::i-block-chrome, div {
	-webkit-transition:initial;
}

/* RESPONSIVE STRUCTURE
--------------------------------------- */

@media screen and (max-width: 1366px) {
	html { font-size:20px; }
	.content:before { width:345px; }
	.footer { font-size:0.8rem; }
	.footer img { width:160px; }

}
  
@media screen and (max-width: 1200px) {
	html { font-size:18px; }
	.content:before { width:280px; }

}
 
@media screen and (max-width: 767px) {
	body:before, body:after { bottom:100px; }
	html { font-size:16px; }
	.content:before { width:220px; }
	.footer { font-size:1rem; }
}

@media screen and (max-width: 575px) {
 	h1 { font-size:2.29rem; }
}

@media screen and (max-width: 480px) {
	h1 { font-size:1.66rem; }
	.content:before { opacity:0.07; }
 
}

@media screen and (max-width: 360px) {
	h1 { font-size:1.42rem; }

}