/*-------------------------
	Simple reset
--------------------------*/
body{
	
	background-color: #000;
}


*{
	margin:0;
	padding:0;
}

.menu{
	
	background-image: url(sign-bkg.jpg);
    background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.menu img{
	
	max-width:100%;
}
#playnow{
	cursor: pointer;
}


	/* Fixed header and footer.
	* --------------------------------------- */
	#header, #footer{
		position:fixed;
		height: 25px;
		display:block;
		width: 100%;
		background: #000;
		z-index:9000;
		text-align:center;
		color: #f2f2f2;
		padding: 6px 0 0 0;
	}

	#header{
		top:0px;
	}
	#footer{
		bottom:0px;
	}
.next, .prev{
	cursor: pointer;
}


/*-------------------------
	General Styles
--------------------------*/
.menu2{
	cursor: pointer;
	position: absolute;
	display: inline-block;
	bottom: 0;
	left:0;
	width:100%;
	height:100%;
	background-image: url(oxidant2.jpg);
    background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 0;
}
.game-wrap{
	position: relative;
	width:1024px;
	height:768px;
margin-left:auto;
margin-right:auto;
}
.game{
	position: absolute;
	bottom: 0;
	left:0;
	width:1024px;
	height:768px;
	background-image: url(game.jpg);
    background-position: 0px 0px;
	background-size: 1024px 768px;
	background-repeat: no-repeat;
	z-index: -20;
}

a, a:visited {
	outline:none;
	color:#389dc1;
}

a:hover{
	text-decoration:none;
}




/*-------------------------
	The buttons
--------------------------*/


.progress-button{
	display: inline-block;
	font-size:24px;
	color:#fff !important;
	text-decoration: none !important;
	padding:200px 100px;
	line-height:1;
	overflow: hidden;
	position:relative;
	border-radius:2px;
	/*background-color: #51b7e6;*/
	-webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);

	
	
}
#controlButton{
	position:absolute;
	z-index: 5;
	top: 100px;
	right: 0;
	
}

.pedal{
	width:200px;
	height:268px;
	cursor: pointer;
	position:absolute;
	top: 500px;
	right: 0;
	z-index: 5;
    background-image: url(pedal.png);
	background-size: 200px 268px;
	background-repeat: no-repeat;
	background-position: left bottom;
}

.pedal:hover {
  transform: translateY(5px);
}

.pedal:active {
  transform: translateY(20px);
}


/*	Hide the original text of the button. Then the loading or finished
	text will be shown in the :after element above it. */

.progress-button.in-progress,
.progress-button.finished{
	color:transparent !important;
}

.progress-button.in-progress:after,
.progress-button.finished:after{
	position: absolute;
	z-index: 5;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	padding-top: inherit;
	left: 0;
}

/*	If the .in-progress class is set on the button, show the
	contents of the data-loading attribute on the butotn */

.progress-button.in-progress:after{
	content:attr(data-loading);
}

/* The same goes for the .finished class */

.progress-button.finished:after{
	content:attr(data-finished);
}

/* The colorful bar that grows depending on the progress */

.progress-button .tz-bar{
	background-image: url(needle.png);
	background-size: 200px 26px;
	background-repeat: no-repeat;
	background-position: bottom;
	height:3px;
	top:0px;
	right:0px;
	width:0px;
	position:absolute;
	z-index:10;
	border-radius:0 0 2px 2px;
	-webkit-transition: width 0.5s, height 0.5s;
	-moz-transition: width 0.5s, height 0.5s;
	transition: width 0.5s, height 0.5s;
}

/* The bar can be either horizontal, or vertical */

.progress-button .tz-bar.background-horizontal{
	height:100%;
	border-radius:2px;
}

.progress-button .tz-bar.background-vertical{
	height:0;
	bottom:0px;
	width:100%;
	border-radius:2px;
}
.box, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10 {
  mix-blend-mode: multiply;
  background-size: cover;
  position:absolute;
  top: 0;
  left: 0;
  width: 1024px;
  height: 768px;
  opacity: 0;
  visibility: hidden;
 -webkit-transition: opacity 2s, visibility 2s;
  transition: opacity 2s, visibility 2s;
}

.box-change {
  visibility: visible;
  opacity: 1;
}

.meter{
	position:absolute;
	width:200px;
	height:768px; 
	background-image: url(meter.png);  
	right:0;
	top:0;
    background-position: right 0px;
	background-size: 200px 768px;
	background-repeat: no-repeat;
}

.note1{
	position:absolute;
	width:1024px;
	height:768px; 
	background-image: url(note1.png);  
	left:0;
	top:0;
    background-position: left 0px;
	background-size: 1024px 768px;
	background-repeat: no-repeat;
	opacity: 0;
  visibility: hidden;
 -webkit-transition: opacity 1s, visibility 1s;
  transition: opacity 1s, visibility 1s;
}
.note2{
	position:absolute;
	width:1024px;
	height:768px; 
	background-image: url(note2.png);  
	left:0;
	top:0;
    background-position: left 0px;
	background-size: 1024px 768px;
	background-repeat: no-repeat;
	opacity: 0;
  visibility: hidden;
 -webkit-transition: opacity 1s, visibility 1s;
  transition: opacity 1s, visibility 1s;
}


.note3{
	position:absolute;
	width:1024px;
	height:768px; 
	background-image: url(note3.png);  
	left:0;
	top:0;
    background-position: left 0px;
	background-size: 1024px 768px;
	background-repeat: no-repeat;
	opacity: 0;
  visibility: hidden;
 -webkit-transition: opacity 1s, visibility 1s;
  transition: opacity 1s, visibility 1s;
}
.note4{
	position:absolute;
	width:1024px;
	height:768px; 
	background-image: url(note4.png);  
	left:0;
	top:0;
    background-position: left 0px;
	background-size: 1024px 768px;
	background-repeat: no-repeat;
	opacity: 0;
  visibility: hidden;
 -webkit-transition: opacity 1s, visibility 1s;
  transition: opacity 1s, visibility 1s;
}

.start{
	z-index:20;
	cursor: pointer;
	visibility: visible;
    opacity: 1;
	position:absolute;
	width:1024px;
	height:768px; 
	background-image: url(start.png);  
	left:0;
	top:0;
    background-position: left 0px;
	background-size: 1024px 768px;
	background-repeat: no-repeat;
 -webkit-transition: opacity 1s, visibility 1s;
  transition: opacity 1s, visibility 1s;
}

.start-change {
  opacity: 0;
  visibility: hidden;
}

.set-to-1{
	z-index:20;
	cursor: pointer;
	position:absolute;
	width:1024px;
	height:768px; 
	background-image: url(end.png);  
	left:0;
	top:0;
    background-position: left 0px;
	background-size: 1024px 768px;
	background-repeat: no-repeat;
		opacity: 0;
  visibility: hidden;
 -webkit-transition: opacity 2s, visibility 2s;
  transition: opacity 2s, visibility 2s;
	
}
.finish-change {
 visibility: visible;
  opacity: 1;
}

.blur1{
	z-index:-13;
	opacity:0;
	position:absolute;
	width:1024px;
	height:768px; 
	background-image: url(blur1.jpg);  
	left:0;
	bottom:0;
    background-position: left 0px;
	background-size: 1024px 768px;
	background-repeat: no-repeat;
	-webkit-transition: opacity 2s linear;
  -moz-transition: opacity 1s linear;
  -o-transition: opacity 1s linear;
  transition: opacity 1s linear;
}
.blur2{
	z-index:-12;
	opacity:0;
	position:absolute;
	width:1024px;
	height:768px; 
	background-image: url(blur2.jpg);  
	left:0;
	bottom:0;
    background-position: left 0px;
	background-size: 1024px 768px;
	background-repeat: no-repeat;
	-webkit-transition: opacity 2s linear;
  -moz-transition: opacity 2s linear;
  -o-transition: opacity 2s linear;
  transition: opacity 2s linear;
}

.note-change {
visibility: visible;
  opacity: 1;
}
.blur-change {
  opacity: 1;
}

.meter{
z-index: 1;
}

.box{
  z-index: -1;
}

.box2{
  z-index: -2;
	
    background-position: 20% 0;
  
}

.box3{
  z-index: -3;
	
    background-position: 45% 0;
  
}

.note1{
  z-index: -4;
}
.note2{
  z-index: -5;
}
.note3{
  z-index: -4;
}
.note4{
  z-index: -5;
}


.box4{
  z-index: -6;
	

    background-position: 70% 0;
  
}

.box5{
  z-index: -7;
	
    background-position: 85% 0;
  
}

.box6{
  z-index: -8;
	
	background-position: 40% 0;
}

.box7{
  z-index: -9;
	background-position: 15% 0;
}

.box8{
  z-index: -10;
	background-position: 100% 0;
}

.box9{
  z-index: -11;
	background-position: 85% 0;
}

.box10{
  z-index: -12;
	background-position: 20% 0;
}

/*@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}
@keyframes animatedBackgroundtwo {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}*/
.box {
  background-image: url(smoke.png);
  background-position: 0px 0px;
  background-repeat: repeat-x;
  animation: animatedBackground 100s linear infinite alternate;
}
.box2 {
  background-image: url(smoke.png);
  background-position: 0px 0px;
  background-repeat: repeat-x;
  animation: animatedBackgroundtwo 800s linear infinite alternate;
}
.box3 {
  background-image: url(smoke.png);
  background-position: 0px 0px;
  background-repeat: repeat-x;
  animation: animatedBackground 60s linear infinite alternate;
}
.box4 {
  background-image: url(smoke.png);
  background-position: 0px 0px;
  background-repeat: repeat-x;
  animation: animatedBackgroundtwo 30s linear infinite alternate;
}
.box5 {
  background-image: url(smoke.png);
  background-position: 0px 0px;
  background-repeat: repeat-x;
  animation: animatedBackground 20s linear infinite alternate;
}
.box6 {
  background-image: url(smoke.png);
  background-position: 0px 0px;
  background-repeat: repeat-x;
  animation: animatedBackground 100s linear infinite alternate;
}
.box7 {
  background-image: url(smoke.png);
  background-position: 0px 0px;
  background-repeat: repeat-x;
  animation: animatedBackgroundtwo 800s linear infinite alternate;
}
.box8 {
  background-image: url(smoke.png);
  background-position: 0px 0px;
  background-repeat: repeat-x;
  animation: animatedBackground 60s linear infinite alternate;
}
.box9 {
  background-image: url(smoke.png);
  background-position: 0px 0px;
  background-repeat: repeat-x;
  animation: animatedBackgroundtwo 30s linear infinite alternate;
}
.box10 {
  background-image: url(smoke.png);
  background-position: 0px 0px;
  background-repeat: repeat-x;
  animation: animatedBackground 20s linear infinite alternate;
}

video{
width:100%;
padding:0;
margin:0;
}


#reload{
	position: absolute;
	top: 0;
	left:0;
	width:100px;
	height:60px;
	z-index: 100;
	
}
.frame{
z-index: 10;	
	
}
.top-cover{
position: absolute;
z-index: 1000;
width: 100%;
height:450px;
margin-top: 0px;
opacity: .5;
}
.left-cover{
position: absolute;
z-index: 1001;
width: 20%;
height:768px;
margin-top: 0px;
left:0px;
opacity: .5;
}
.right-cover{
position: absolute;
z-index: 1001;
width: 20%;
height:768px;
margin-top: 0px;
right:0px;
opacity: .5;
}
.bottom-cover{
position: absolute;
z-index: 1002;
width: 100%;
height:150px;
bottom:0px;
opacity: .5;
}