@charset "UTF-8";



body {

	background: #000000;
	height: 100%;
	width:100%;
	overflow:hidden;	
}

a, img {outline:none;}
map > area,
map > area:active,
map > area:focus {outline: none; border:0; }

#infolayer{
	width: 2093px;
	height: 1500px;
	position: absolute;
	margin-left: -250px;
	margin-top: -30px;
	display: visible;
	z-index: 8;
	top: -20px;
	left: -214px;
}

#buttonlayer {
	width: 1200px;
	height: 1000px;
	text-align: center;
	position: absolute;
	left: 600px;
	margin-left: -600px;
	margin-top: -500px;
	top: 500px;
	z-index: 4;
}


#centerfold{
	width: 1200px;
	height: 1000px;
	text-align: center;
	position: absolute;
	left: 50%;
	margin-left: -600px;
	margin-top: -500px;
	top: 50%;
	z-index:3;
	display: none;
	}
	
	#centerfolder{
	width: 1200px;
	height: 1000px;
	text-align: center;
	position: absolute;
	left: 50%;
	margin-left: -600px;
	margin-top: -500px;
	top: 50%;
	z-index:-2;
	display: none;
	
	}
	
	#cover {
	width: 100%;
	height: 100%;
	z-index:0;
	}
	
	#black {
		
	position:absolute;
	left:0px;
	top:0px;
	width:2560px;
	height:1440px;
	z-index:0;
}
	
	#container{
	transform: scale(0.65,0.65);
	-ms-transform: scale(0.65,0.65); /* IE 9 */
	-webkit-transform: scale(0.65,0.65); /* Safari and Chrome */
	width: 1200px;
	height: 1000px;
	text-align: center;
	position: absolute;
	left: 50%;
	margin-left: -600px;
	margin-top: -500px;
	top: 50%;
	z-index:2;
	}

#introcontainer{
	transform: scale(0.65,0.65);
	-ms-transform: scale(0.65,0.65); /* IE 9 */
	-webkit-transform: scale(0.65,0.65); /* Safari and Chrome */
	width: 1200px;
	height: 1000px;
	text-align: center;
	position: absolute;
	left: 50%;
	margin-left: -600px;
	margin-top: -500px;
	top: 50%;
	z-index:-1;
	
	}
	
#center{
	
	width: 1200px;
	height: 1000px;
	text-align: center;
	position: absolute;
	left: 50%;
	margin-left: -600px;
	margin-top: -500px;
	top: 50%;
	z-index:-1;
	}
	
	#intro{
	transform: scale(0.65,0.65);
	-ms-transform: scale(0.65,0.65); /* IE 9 */
	-webkit-transform: scale(0.65,0.65); /* Safari and Chrome */
	width: 2000px;
	height: 866px;
	text-align: center;
	position: absolute;
	left: 50%;
	margin-left: -1000px;
	margin-top: -433px;
	top: 50%;
	z-index:1;
	}
	
	#intropop{
		transform: scale(0.65,0.65);
	-ms-transform: scale(0.65,0.65); /* IE 9 */
	-webkit-transform: scale(0.65,0.65); /* Safari and Chrome */
	width: 2000px;
	height: 866px;
	text-align: center;
	position: absolute;
	left: 50%;
	margin-left: -1000px;
	margin-top: -433px;
	top: 50%;
	z-index:10;
	display:none;
	
	}
	
	#introroll{
		transform: scale(0.65,0.65);
	-ms-transform: scale(0.65,0.65); /* IE 9 */
	-webkit-transform: scale(0.65,0.65); /* Safari and Chrome */
	width: 2000px;
	height: 85px;
	text-align: center;
	position: absolute;
	left: 50%;
	margin-left: -1000px;
	bottom: 0px;
	z-index:0;
	
	}
	
	#intrologo {
		transform: scale(0.65,0.65);
	-ms-transform: scale(0.65,0.65); /* IE 9 */
	-webkit-transform: scale(0.65,0.65); /* Safari and Chrome */
	position:absolute;
	text-align: center;
	width:1000px;
	height:150px;
	left:50%;
	top: 50%;
	margin-left: -500px;
	margin-top: -75px;
	z-index:1;
}
	
	#help {
	width: 100%;
	height: 100%;
	z-index:7;
	
}

#helptrans {
	position:absolute;
	right:0px;
	bottom: 0px;
	width:91px;
	height:100px;
	z-index:7;
}
	
	#qm {
		transform: scale(0.65,0.65);
	-ms-transform: scale(0.65,0.65); /* IE 9 */
	-webkit-transform: scale(0.65,0.65); /* Safari and Chrome */
	position:absolute;
	right:0px;
	bottom: 0px;
	width:91px;
	height:100px;
	z-index:6;
}
	
#btnlayer {
	width: 1200px;
	height: 1000px;
	text-align: center;
	position: absolute;
	left: 600px;
	margin-left: -600px;
	margin-top: -500px;
	top: 500px;
	z-index: 4;


}

#transparent {
	width: 1200px;
	height: 1000px;
	text-align: center;
	position: absolute;
	left: 600px;
	margin-left: -600px;
	margin-top: -500px;
	top: 500px;
	pointer-events: none;
	z-index: 4;
}

 #slicelayer {
	width: 1200px;
	height: 1000px;
	text-align: center;
	position: absolute;
	left: 600px;
	margin-left: -600px;
	margin-top: -500px;
	top: 500px;
	pointer-events: none;
	z-index: 3;
}



#logobtn {
	width: 1200px;
	height: 1000px;
	text-align: center;
	position: absolute;
	left: 50%;
	margin-left: -600px;
	margin-top: -500px;
	top: 50%;
	pointer-events: none;
	z-index: 2;
}

#social {
	width: 100%;
	height: 100%;
	z-index:10;
}

#introsocial {
	width: 100%;
	height: 100%;
	z-index:10;
	visibility:hidden;
}

#twitter {
	position:absolute;
	left: 0px;
	top: 0px;
	width:146px;
	height:60px;
	z-index:10;
	transform: scale(0.75,0.75);
	-ms-transform: scale(0.75,0.75); /* IE 9 */
	-webkit-transform: scale(0.75,0.75); /* Safari and Chrome */
}

#youtube {
	position:absolute;
	right:0px;
	top: 0px;
	width:146px;
	height:60px;
	z-index:10;
	transform: scale(0.75,0.75);
	-ms-transform: scale(0.75,0.75); /* IE 9 */
	-webkit-transform: scale(0.75,0.75); /* Safari and Chrome */
}

#fb {
	position:absolute;
	left:0px;
	bottom: 0px;
	width:146px;
	height:60px;
	z-index:10;
	transform: scale(0.75,0.75);
	-ms-transform: scale(0.75,0.75); /* IE 9 */
	-webkit-transform: scale(0.75,0.75); /* Safari and Chrome */
}

#spotify {
	position:absolute;
	right:0px;
	bottom: 0px;
	width:146px;
	height:60px;
	z-index:10;
	transform: scale(0.75,0.75);
	-ms-transform: scale(0.75,0.75); /* IE 9 */
	-webkit-transform: scale(0.75,0.75); /* Safari and Chrome */
}

#musicians {
	width: 1800px;
	height: 1100px;
	text-align: center;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -550px;
	margin-left: -900px;
	z-index: 7;
	display:none;
	}
	
#db {
	width: 1800px;
	height: 1100px;
	text-align: center;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -550px;
	margin-left: -900px;
	z-index: 7;
	display:none;
}

#close{
	position:absolute;
	left:1899px;
	top:130px;
	width:87px;
	height:87px;
	z-index:6;
	display:none;
}	


#txtlayer {
	width: 1200px;
	height: 1000px;
	text-align: center;
	position: absolute;
	left: 50%;
	margin-left: -600px;
	margin-top: -500px;
	top: 50%;
	z-index:1;
	}
	
	#form {
	position:absolute;
	left:287px;
	top:585px;
	width:564px;
	height:344px;
	z-index:2;
}

#play{
	width: 1200px;
	height: 1000px;
	text-align: center;
	position: absolute;
	left: 50%;
	margin-left: -600px;
	margin-top: -500px;
	top: 50%;
	z-index:0;
	}
	
	#fader{
	width: 1200px;
	height: 1000px;
	text-align: center;
	position: absolute;
	left: 50%;
	margin-left: -600px;
	margin-top: -500px;
	top: 50%;
	z-index:0;
	}
	
	

/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 
.fade-in {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in 0;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeIn ease-in 0;
    animation:fadeIn ease-in 0;
 
    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
 
    -webkit-animation-duration:2s;
    -moz-animation-duration:2s;
    animation-duration:2s;
}
 
.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}