#alpha{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background-color: #000000;
}
.alpha-off{
	opacity: 0;
	visibility: hidden;
	transition: visibility 0.5s, opacity 0.5s;
	-webkit-transition: visibility 0.5s, opacity 0.5s;
}
.alpha-on{
	opacity: 1;
	visibility: visible;
	transition: visibility 0s, opacity 0.5s;
	-webkit-transition: visibility 0s, opacity 0.5s;
}

#camara{
	position: absolute;
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	width: 1968px;
	height: 100%;
	top: 0px;
}
.camara-init{
	left: 0px;
}
.camara-parte1{
	animation-name: animacion-parte1;
	animation-duration: 4s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	-webkit-animation-name: animacion-parte1;
	-webkit-animation-duration: 4s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-fill-mode: forwards;
}
.camara-parte1-fixed{
	left: 0px;
}
.camara-parte2{
	animation-name: animacion-parte2;
	animation-duration: 4s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	-webkit-animation-name: animacion-parte2;
	-webkit-animation-duration: 4s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-fill-mode: forwards;
}
.camara-parte2-fixed{
	left: -250px;
}
.camara-parte3{
	animation-name: animacion-parte3;
	animation-duration: 1.1s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	-webkit-animation-name: animacion-parte3;
	-webkit-animation-duration: 1.1s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-fill-mode: forwards;
}

#game-wrapper{
	transition: transform 1s ease-in, -webkit-transform 1s ease-in, -o-transform 1s ease-in;
	-webkit-transition: transform 1s ease-in, -webkit-transform 1s ease-in, -o-transform 1s ease-in;
}

#fondo-2{
	position: absolute;
	width: 1305px;
	height: 220px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(../images/fondo_2.png);
	bottom: 0px;
	
}
.fondo-2-start{
	/*animation-name: animacion-fondo-2;
	animation-duration: 20s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	-webkit-animation-name: animacion-fondo-2;
	-webkit-animation-duration: 20s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;*/
}
.fondo-2-init{
	left: 0px;
}
.fondo-2-play{
	animation-play-state: running;
	-webkit-animation-play-state: running;
}
.fondo-2-stop{
	animation-play-state: paused;
	-webkit-animation-play-state: paused;
}

@keyframes animacion-fondo-2{
	0%{
		left: 0px;
	}
	100%{
		left:-316px;
	}
}

#fondo-1{
	position: absolute;
	width: 1968px;
	height: 285px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(../images/fondo_1.png);
	bottom: 0px;
	left: -106px;
}

#personaje_recorrido,#personaje_salto,#personaje_balancea{
	position: absolute;
	box-sizing: border-box;
	margin: 0px;
	padding: 0px;
	/*background-color: rgba(255,255,255,0.3);*/
}
#personaje_balancea_img{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url(../images/salto/imagen23.png);
}

#personaje_recorrido{
	left: 318px;
	top: 0px;
}
.personaje-salto-1{
	left: 569px;
	top: 0px;
}
.personaje-salto-2{
	left: 957px;
	top: 0px;
}
#personaje_balancea{
	transform-origin: 80% 0%; 
	-webkit-transform-origin: 80% 0%;
	-o-transform-origin: 80% 0%;
	width: 241px;
	height: 412px;
	
}

.personaje-balancea-start{
	animation-name: animacion-balanceo;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	-webkit-animation-name: animacion-balanceo;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count: infinite;
}
.personaje-balancea-start #personaje_balancea_img{
	animation-name: animacion-fisica-caida;
	animation-duration: 0.6s;
	animation-iteration-count: 1;
	-webkit-animation-name: animacion-fisica-caida;
	-webkit-animation-duration: 0.6s;
	-webkit-animation-iteration-count: 1;
}

/***********ANIMACIONES**********/

@keyframes animacion-parte1{
	0%{
		left: 0px;
	}
	100%{
		left: -250px;
	}
}
@keyframes animacion-parte2{
	0%{
		left: -250px;
	}
	100%{
		left: -578px;
	}
}
@keyframes animacion-parte3{
	0%{
		left: -578px;
	}
	100%{
		left: -828px;
	}
}
@keyframes animacion-balanceo{
	0%{
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
	}
	50%{
		transform: rotate(7deg);
		-webkit-transform: rotate(7deg);
		-o-transform: rotate(7deg);
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
	}
	100%{
		transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		-webkit-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
	}
}
@keyframes animacion-fisica-caida{
	0%{
		top: 0px;
	}
	50%{
		top: -15px;
		animation-timing-function: ease-out;
		-webkit-animation-timing-function: ease-out;
	}
	75%{
		top: 0px;
		animation-timing-function: ease-in;
		-webkit-animation-timing-function: ease-in;
	}
	90%{
		top: -5px;
		animation-timing-function: ease-out;
		-webkit-animation-timing-function: ease-out;
	}
	100%{
		top: 0px;
		animation-timing-function: ease-in;
		-webkit-animation-timing-function: ease-in;
	}
}