@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;
}

	
	#cover {
	width: 100%;
	height: 100%;
	z-index:0;
	}
	
	#black {
	position:absolute;
	left:0px;
	top:0px;
	width:2560px;
	height:1440px;
	z-index:0;
}

#introcenter{
	width: 1200px;
	height: 1000px;
	text-align: center;
	position: absolute;
	left: 50%;
	margin-left: -600px;
	margin-top: -500px;
	top: 50%;
	z-index:0;
	
	}
	
	
	
	#introbtnlayer {
	width: 1200px;
	height: 1000px;
	text-align: center;
	position: absolute;
	left: 50%;
	margin-left: -600px;
	margin-top: -500px;
	top: 50%;
	z-index: 7;
	display:none;
}

#introslicelayer {
	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;
}

	
	#introtext{
	width: 1200px;
	height: 1000px;
	text-align: center;
	position: absolute;
	left: 50%;
	margin-left: -600px;
	margin-top: -500px;
	top: 50%;
	z-index:5;
	
	}
	
     #introtext {
		  
		  opacity:1;
		  
 -webkit-transition:  2s ease;
 -moz-transition:  2s ease;
 -ms-transition:  2s ease;
 -o-transition:  2s ease;
 transition:  2s ease;
  
}



#introtext:target {

	  opacity:0.0;
     -webkit-transition:  2s ease;
  -moz-transition:  2s ease;
  -ms-transition:  2s ease;
  -o-transition:  2s ease;
  transition:  2s ease;
  }
  
  #introblank{
	width: 1200px;
	height: 175px;
	text-align: center;
	position: absolute;
	left: 50%;
	margin-left: -600px;
	margin-top: -87,5px;
	top: 50%;
	z-index:6;
	
	}
	
	#intropop{
	width: 1200px;
	height: 1000px;
	text-align: center;
	position: absolute;
	left: 50%;
	margin-left: -600px;
	margin-top: -500px;
	top: 50%;
	z-index:11;
	display:none;
	
}
	
	
	#container{

	width: 1200px;
	height: 1000px;
	text-align: center;
	position: absolute;
	left: 50%;
	margin-left: -600px;
	margin-top: -500px;
	top: 50%;
	z-index:2;
	}
	
	
#center{
	width: 1200px;
	height: 1000px;
	text-align: center;
	position: absolute;
	left: 50%;
	margin-left: -600px;
	margin-top: -500px;
	top: 50%;
	z-index:-1;
	
	}
	
	
	
	#help {
	width: 100%;
	height: 100%;
	z-index:10;
	}
#helptrans {
	position:absolute;
	right:0px;
	bottom: 0px;
	width:91px;
	height:100px;
	z-index:10;
}
	
	#qm {
	position:absolute;
	right:0px;
	bottom: 0px;
	width:91px;
	height:100px;
	z-index:9;
}
	
#btnlayer {
	width: 1200px;
	height: 1000px;
	text-align: center;
	position: absolute;
	left: 50%;
	margin-left: -600px;
	margin-top: -500px;
	top: 50%;
	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: 50%;
	margin-left: -600px;
	margin-top: -500px;
	top: 50%;
	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;
	
}

#youtube {
	position:absolute;
	right:0px;
	top: 0px;
	width:146px;
	height:60px;
	z-index:10;
}

#fb {
	position:absolute;
	left:0px;
	bottom: 0px;
	width:146px;
	height:60px;
	z-index:10;
}

#spotify {
	position:absolute;
	right:0px;
	bottom: 0px;
	width:146px;
	height:60px;
	z-index:10;
}


#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;
}


#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;
	
	}
#introcontainer{

	width: 1200px;
	height: 1000px;
	text-align: center;
	position: absolute;
	left: 50%;
	margin-left: -600px;
	margin-top: -500px;
	top: 50%;
	z-index:-1;

	}

	
	#intro{
	width: 2000px;
	height: 866px;
	text-align: center;
	position: absolute;
	left: 50%;
	margin-left: -1000px;
	margin-top: -433px;
	top: 50%;
	z-index:1;
	}
	
	
	
	#introroll{
	width: 2000px;
	height: 85px;
	text-align: center;
	position: absolute;
	left: 50%;
	margin-left: -1000px;
	bottom: 0px;
	z-index:0;
	
	}
	
	#intrologo {
	position:absolute;
	text-align: center;
	width:1000px;
	height:150px;
	left:50%;
	top: 50%;
	margin-left: -500px;
	margin-top: -75px;
	z-index:1;
	outline:none;
}