/**   * Basic layout, for animation examples, check demo.css  */
html, body{	margin: 0;	padding: 0;}
body{	background: #061c2d;	color: #d7e7f3;		font-family: 'Work Sans', sans-serif;	font-size: 22px;	line-height: 33px;		text-align: center;}
a{	color: #d7e7f3;	text-decoration: none;	font-weight: 500;		transition: color 0.25s ease;}
a:hover{	color: #fff;}

h1{	font-size: 4em;	font-weight: 200;	letter-spacing: 1px;	text-transform: uppercase;	line-height: normal;		-webkit-font-smoothing: subpixel-antialiased;}
h2{	font-weight: 300;	font-size: 1.3em;	line-height: 1.5em;	color: #779dba;	-webkit-font-smoothing: subpixel-antialiased;}
h3{	font-weight: 500;	font-size: 1em;	line-height: 1.5em;	color: #d7e7f3;	margin: 80px 0 0 0;		-webkit-font-smoothing: subpixel-antialiased;}

div.cssmove{	position: relative;	height: 80vh;	padding: 20vh 15vw 0 15vw;}
div.cssmove svg{	position: absolute;	bottom: 50px;	width: 30px;		animation: chevronAnimation 4s ease-in-out 0s infinite;}
div.cssmove svg path{	fill: #7e9aae;}
div.cssmove:nth-child(1n){	background: #061c2d;}
div.cssmove:nth-child(2n){ background: hsl(205, 84%, 14%);}
div.cssmove:nth-child(3n){	background: hsl(205, 90%, 22%);}


/** * Simple keyframes animation for the chevron on the first slide */

/** * Responsiveness */
@media screen and (max-width: 1024px){	
	body	{		font-size: 18px;		line-height: 27px;	}
}

@media screen and (max-width: 800px){	
h1 span	{		display: cssmove;	}
div.cssmove	{		height: 85vh;		padding: 15vh 15vw 0 15vw;	}
}

@media screen and (max-width: 420px){	
	body	{		font-size: 12px;		line-height: 18px;	}
}

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