*{
	margin: 0;
	padding: 0;
}

html, body{
	width: 100%;
	height: 100%;
	overflow: hidden;
	font-family: Futura, Helvetica, Arial, sans-serif;
	color: #fff;
	background-color: #000;
}

a, a:visited{
	color: inherit;
	text-decoration: none;
}

#container{
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.menu{
	list-style: none;
	position: fixed;
	width: 1146px;
	height: 38px;
	margin-left: -573px;
	left: 50%;
	top: 127px;
	z-index: 20;
}

.menu li{
	width: 11.16%;
	height: 100%;
	float: left;
	background-color: #000;
	background-size: 100% auto;
	background-position: 0 0;
	text-align: center;
	display: inline-block;
	cursor: pointer;
	margin-right: 6.608%;
	transition: background-color 0.5s, color 0.5s;
}

.menu li:last-child{
	margin-right: 0;
}

.menu li.active, .menu li:not(.disabled):hover{
	background-color: #fff;
	background-position: 0 50%;
}

.menu li.disabled{
	background-position: 0 100%;
	cursor: auto;
}

.menu li:nth-child(1){
	background-image: url('img/button_venture.png');
}

.menu li:nth-child(2){
	background-image: url('img/button_alone.png');
}

.menu li:nth-child(3){
	background-image: url('img/button_safe.png');
}

.menu li:nth-child(4){
	background-image: url('img/button_monsters.png');
}

.menu li:nth-child(5){
	background-image: url('img/button_darkheart.png');
}

.menu li:nth-child(6){
	background-image: url('img/button_wave.png');
}

.arrow{
	position: fixed;
	height: 50px;
	width: 25px;
	cursor: pointer;
	margin-top: -25px;
	top: 50%;
	z-index: 10;
	font-size: 48px;
}

.arrow.left{
	left: 25px;
	display: none;
}

.arrow.right{
	right: 25px;
}

#mute {
	cursor:pointer;
	position:fixed;
	font-size:21px;
	top: 10px;
	left: 10px;
	z-index: 10;
}

.page{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transition: margin-left 0.5s;
	overflow-x: hidden;
	text-align: center;
	background-size: 100% auto;
}

.page.offRight{
	margin-left: 100%;
}

.page.offLeft{
	margin-left: -100%;
}

.page .title{
	position: absolute;
	height: 83px;
	left: 50%;
	margin-left: -240px;
	top: 25px;
	transition: opacity 0.5s;
	z-index: 20;
}

.page.offLeft .title, .page.offRight .title{
	opacity: 0;
}

.page .content{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: scroll;
	text-align: center;
	z-index: 10;
}

.page .content > * {
	z-index: 12;
}

.page .column{
	position: absolute;
	width: 1146px;
	left: 50%;
	margin-left: -573px;
}

.page:nth-child(1){
	background-image: url('img/BG_IMAGE.png');
}

.video{
	width: 75%;
}

#video1{
	margin-left: 25%;
}

#video2 {
	margin-left: 25%;
}

#video2 img {
	max-width:100%;
}

#video4 {
	margin-left: 30%;
}

.videoPlayer{
	height: auto;
}

.videoPlayer iframe{
	width: 100%;
	height: 506px;
	overflow: hidden;
}

.share{
	position: relative;
	top: 20px;
}

.share > a{
	padding: 10px 23px;
	line-height: 1;
	text-transform: uppercase;
	font-size: 14px;
	background-color: #212121;
	margin-right: 2px;
	cursor: pointer;
	text-align: center;
	transition: color 0.5s, background-color 0.5s;
}

.share a.label{
	font-size: 12px;
}

.share a.fb{
	background-color: #46629c;
}

.share a.twit{
	background-color: #55acee;
}

.share a.dl{
	padding: 10px 12px;
}

.share > a:last-child{
	margin-left: -5px;
	background-color: #dd5f0b;
}

.share > a:hover{
	background-color: #fff;
	color: #000;
}

/*

.feedImg a{
	position: absolute;
	right: 0;
	top: 0;
	opacity: 0;
	text-align: right;
	width: 100px;
	height: 100px;
	text-shadow: 2px 1px 0px black;
	padding: 10px;
	z-index: 40;
	pointer-events: visible;
	font-size: 12px;
	transform: opacity 0.5s;
	background: -moz-linear-gradient(45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.65) 100%);
	background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(50%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65)));
	background: -webkit-linear-gradient(45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.65) 100%);
	background: -o-linear-gradient(45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.65) 100%);
	background: -ms-linear-gradient(45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.65) 100%);
	background: linear-gradient(45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.65) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=1 );
}

.feedImg:hover a{
	opacity: 1;
}

*/


/* Modal */

#modal1, #modal2, #modal3, #modal4, #modal5, #modalAlone, #modalSafe{
	position: fixed;
	width: 100%;
	height: 100%;
	display: none;
	z-index: 100;
}

.modalBg{
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.6);
}

.modal{
	color: black;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 550px;
	margin-left: -300px;
	margin-top: -175px;
	background-color: white;
	z-index: 200;
	padding: 25px;
}

.modal p{
	font-weight: bold;
}

.modal input, .modal textarea{
	display: block;
	width: 550px;
	font-family: Futura, Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 16px;
	line-height: 24px;
	margin: 25px 0;
	padding: 10px;
}

.modal input{
	height: 44px;
}

.modal textarea{
	height: 212px;
}

.show-on-mobile{
	display: none;
}

.squareGif{
	height: auto;
}

.controls{
	position: absolute;
	left: 50%;
	top: 229px;
	width: 155px;
	height: 173px;
	margin-left: -78px;
	z-index: 11;
}

.controls .button{
	padding-top: 28px;
	width: 100%;
	height: 116px;
	background-color: #212121;
	cursor: pointer;
	transition: background-color 0.5s, color 0.5s;
}

.controls .button:hover{
	background-color: white;
	color: #212121;
}

.controls .share{
	width: 100%;
}

.share.icon{
	top: 10px;
}

.share.icon > a:last-child{
	margin-left: 0;
}

.share.icon a{
	margin-right: 1px;
	width: 18.76%;
	padding: 8px 8px;
	height: 30px;
	font-size: 12px;
}

.controls .icon-play, .controls .icon-pause{
	font-size: 56px;
	margin-bottom: 21px;
}

.controls .icon-pause{
	display: none;
}

.controls .label{
	letter-spacing: 8px;
	width: 100%;
	height: 45px;
	font-size: 18px;
}

.legal{
	text-align: left;
	font-size: 10px;
}

.legal a{
	pointer-events: visible;
}

@media screen and (max-width: 1200px){
	
	.menu{
		width: 900px;
		margin-left: -450px;
	}
	
	.menu li{
		width: 14.22%;
		margin-right: 2.936%;
	}
	
	.page .column{
		width: 900px;
		margin-left: -450px;
	}
	
	.video{
		width: 100%;
	}
	
	#video1, #video2{
		margin-left: 0;
	}
	
}

@media (max-width: 480px) {

	html, body, #container{
		overflow: auto;
	}
	
	.squareGif {
		width:100%;
	}
	 
	.squareGif img{
		max-width:100%;
	}
	
	.show-on-mobile{
		display: inline;
	}

	.hide-on-mobile{
		display: none;
	}
	
	.page .content{
		overflow: auto;
	}
	
	.page .column{
		width: 100%;
		margin-left: 0;
		left: 0;
	}
	
	.controls{
		top: 65px;
	}
	
	.controls .button{
		text-align: center;
	}
	
	
	/* ———————— */

	.open {
	  font-size:28px;
	  position:fixed;
	  top:0px;
	  left:0px;
	  background: black;
	  padding: 5px 20px 10px 10px;
	  color:white;
	  z-index:99999;
	}

	.moMenu {
	  position:fixed;
	  z-index:99998;
	  width:100%;
	  height:100%;
	  overflow: scroll;
	  background:black;
	  opacity:0;
	  transition: all .5s;
	  display:none;
	}

	.moMenu li {
	  list-style:none;
	  text-align:center;
	  border-bottom:1px solid white;
	} 

	.moMenu a {
	  text-decoration:none;
	  color:white;
	}
	
	.videoPlayer iframe{
		height: 180px;
	}
	
	.moButton {
	  height:56px;
	  background-position: center -7px !important;
	  background-repeat: no-repeat !important;
	}
	
	.moTitle{
		position: fixed;
		height: 56px;
		top: 0;
		width: 100%;
		z-index: 9999;
		background-color: black;
		background-position: center -7px !important;
		background-repeat: no-repeat !important;
	}
	
	.moButton.fade {
	  background-position: center 93% !important;
	  opacity: 0.8;
	}

	.active {
	  opacity:1;
	  display:inline;
	}

	.moVideo {
		width:90%;
		margin-left: 5%;
		padding-top:100px;
		position: relative;
		z-index:2;
	}

	.moVideo:last-child {
		padding-bottom:100px; 
	}

	.moContainer #video1, .moContainer #video2 {
		height:200px;
	}

	.share > a:last-child{
		margin-left: 0px;
	}	

	.moContainer {
		width: 100%;
		height: 100%;
	}
}

/* Parra */

.parra {
    height: 2500px;
   	top: 200px;
   	position: absolute;
   	width: 100%;
   	pointer-events: none;
}

.parra > * {
	position: relative;
	pointer-events: visible;
}

.parra a:hover {
    background: none !important;
}
.one, .two, .three, .four {
    position: absolute;
    pointer-events: none;
}
.one {
    margin-top: 0px;
    left:45%;
    width: 35%;
    height: 4500px;
    z-index: 10;
}
.one img, .two img, .three img, .four img {
    height: auto;
    width: 100%;
    pointer-events: visible;
    }
.one ul li:nth-child(odd) {
    margin-bottom: 550px;
}
.one ul li:nth-child(even) {
    margin-bottom: 400px;
}
.one ul li:last-child {
    margin-bottom: 0;
}
.two {
    margin-top: 400px;
    left: 8%;
    width: 20%;
    height: 3000px;
    z-index: 20;
}

.two ul li {
    margin-bottom: 450px;
}
.two ul li:last-child {
    margin-bottom: 0;
}
.three {
    margin-top: 100px;
    left: 24%;
    width: 18%;
    height: 6000px;
    z-index: 30;
}
.three img {
    height: auto;
    width: 100%}
.three ul li:nth-child(odd) {
    margin-bottom: 300px;
}
.three ul li:nth-child(even) {
    margin-bottom: 500px;
}
.three ul li:last-child {
    margin-bottom: 0;
}
.four {
    margin-top: 1100px;
    left: 78%;
    width: 12%;
    height: 4800px;
    z-index: 30;
}
.four img {
    height: auto;
    width: 100%}
.four ul li:nth-child(odd) {
    margin-bottom: 400px;
}
.four ul li:nth-child(even) {
    margin-bottom: 450px;
}
.four ul li:last-child {
    margin-bottom: 0;
}

.easter {
	position: absolute;
	bottom: -1500px;
	left: 3%;
	width: 10%;
	z-index: 9999;
}

.easter img{
	max-width: 100%;
}

ul {
	list-style: none;	
}


/* IcoMoon */

@font-face {
	font-family: 'icomoon';
	src:url('fonts/icomoon.eot?-lhe42c');
	src:url('fonts/icomoon.eot?#iefix-lhe42c') format('embedded-opentype'),
		url('fonts/icomoon.woff?-lhe42c') format('woff'),
		url('fonts/icomoon.ttf?-lhe42c') format('truetype'),
		url('fonts/icomoon.svg?-lhe42c#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-link:before {
	content: "\e607";
}
.icon-uniE600:before {
	content: "\e600";
}
.icon-music:before {
	content: "\e601";
}
.icon-play:before {
	content: "\e602";
}
.icon-pause:before {
	content: "\e603";
}
.icon-embed:before {
	content: "\e604";
}
.icon-facebook:before {
	content: "\e605";
}
.icon-twitter:before {
	content: "\e606";
}
.icon-bag:before {
	content: "\e608";
}