html, body
{
  	padding: 0;
  	margin: 0;
	font-family: 'Quicksand', sans-serif;
	background: #000;

}

body.intro
{
	overflow-y: hidden;
}

.intro nav.slider
{
	 overflow: auto;
	-webkit-overflow-scrolling: touch;
	 display: block;
	 white-space: nowrap;
}
.spoom
{
	position: absolute;
	bottom:50vh;
	width: 7rem;
	right:-3.5rem;
	z-index: 1000;
}

.spoom img
{
	display: block;
	width: 100%;
}

.intro nav.slider a:not(.spoom)
{
	 display: inline-block;
	 width: 100%;
	 height: 100%;
	 overflow: hidden;
	 background-repeat: no-repeat;
	 background-position: top center;
	 background-size: auto 100%;
	 color: #FFF;
	 box-sizing: border-box;
	 text-decoration: none;
	 font-weight: bold;
	 position: relative;
	 transition: background-size 1s ease 0s;
}
.intro nav.slider > div
{
	display: inline-block;
	width: 33.33%;
	min-width: 300px;
	position: relative;
	height: 100vh;
	font-size: 45px;
	 
}
.intro nav.slider a:hover
{
	background-size: auto 102%;
}

.intro nav.slider a p
{
	position: absolute;
	bottom: 10%;
	left: 10%;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
}

.intro nav.slider a small
{
	display: block;
	font-size: .5em;
	margin-top: 10%;
	transition: all 1s ease 0s;
}

.intro nav.slider a:hover small
{
	margin-top: 30%;
}

.intro .arrow
{
	position: fixed;
	top: 50%;
	width: 68px;
	height: 73px;
	margin-top: -35px;
	background-position: center center;
	background-size: cover;
	cursor: pointer;
}

.intro .arrow.left
{
	left: 0px;
	background-image: url('../images/arrow_left.png');
}

.intro .arrow.right
{
	right: 0px;
	background-image: url('../images/arrow_right.png');
}


header
{
	position: fixed;
	left: 0px;
	top: 0px;
	right: 0px;
	height: 50px;
	background: #000;
	color: #FFF;
	z-index: 1000;
}

header .logo
{
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -250px;
	width: 500px;
	height: 100px;
	background: #000 url('../images/logo.png') no-repeat center center;
	background-size: 324px;
}


.overlay
{
	position: fixed;
	z-index: 5000;
	top: 0px;
	right: 0px;
	left: 0px;
	height: 100vh;
	-webkit-transition: top 3s ease-in;
	-moz-transition: top 3s ease-in;
	-o-transition: top 3s ease-in;
	transition: top 3s ease-in;
	cursor: pointer;
	
}

.overlay.close
{
	top: -100vh;
	pointer-events: none;
}


.overlay .left
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 33.33%;
	height: 100vh;
	background: #000000;
	-webkit-transition: left 1s ease-in-out;
	-moz-transition: left 1s ease-in-out;
	-o-transition: left 1s ease-in-out;
	transition: left 1s ease-in-out;
}

.overlay.close .left
{
	left: -33.33%;
}

.overlay .center
{
	position: absolute;
	top: 0px;
	left: 33.33%;
	width: 33.33%;
	height: 100vh;
	-webkit-transition: top 1s ease-in-out;
	-moz-transition: top 1s ease-in-out;
	-o-transition: top 1s ease-in-out;
	transition: top 1s ease-in-out;
	background: #000000 url('../images/intro.png?v=1') no-repeat bottom center;
	background-size: 100%;
}

.overlay.close .center
{
	top: -100vh;
}

.overlay .right
{
	position: absolute;
	top: 0px;
	right: 0px;
	width: 33.33%;
	height: 100vh;
	background: #000000;
	-webkit-transition: right 1s ease-in-out;
	-moz-transition: right 1s ease-in-out;
	-o-transition: right 1s ease-in-out;
	transition: right 1s ease-in-out;
}

.overlay.close .right
{
	right: -33.33%;
}






@media (max-width: 1280px) 
{
	
	.intro nav.slider div
	{
		 font-size: 35px;
		
	}
	
}


@media (max-width: 1000px) 
{
	body.intro
	{
	  	overflow-y: auto;
	}
	
	.overlay .left,
	.overlay .right
	{
		display: none;
	}
	
	.overlay .center
	{
		position: absolute;
		top: 0px;
		left: 0%;
		right: 0%;
		width: 100%;
		height: 100vh;
		background-size: contain;
		
	}
	
	.intro nav.slider div
	{
		display: block;
		font-size: 25px;
		height: 300px;
		width: 100%;
	}
	
	.intro nav.slider div a:not(.spoom)
	{
		background-size: cover;
	}

 	.spoom
	 {
		 left: 3rem;
		 top:auto;
		 bottom:-5rem;
		 right:auto;
	 }

	.intro nav.slider a:hover
	{
		background-size: cover;
	}
	
	.intro .arrow
	{
		display: none;
	}
	
	header .logo
	{
		margin-left: -125px;
		width: 250px;
		height: 65px;
		background-size: 162px;
	}
		
}