/**
 * Basic layout, for animation examples, check demo.css
 */

a:hover
{
	color: #fff;
}

h1
{

	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: white;

	-webkit-font-smoothing: subpixel-antialiased;
}

h3
{
	font-weight: 500;
	font-size: 1.5em;
	line-height: 1.5em;
	color: white;
	margin: 80px 0 0 0;

	-webkit-font-smoothing: subpixel-antialiased;
}


div.block svg
{
	position: absolute;
	bottom: 50px;
	width: 30px;

	animation: chevronAnimation 4s ease-in-out 0s infinite;
}

div.block svg path
{
	fill: #7e9aae;
}



/**
 * Simple keyframes animation for the chevron on the first slide
 */
@keyframes chevronAnimation {
	0% {
		transform: translate(0,0) scale(1.0,1.0);
	}
	50% {
		transform: translate(0,5px) scale(0.8,0.8);
	}
	100% {
		transform: translate(0,0) scale(1.0,1.0);
	}
}

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

@media screen and (max-width: 800px)
{
	h1 span
	{
		display: block;
	}

	div.block
	{
		/* 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;
	}
}