.instruccion{
	width: 560px;
	height: auto;
	position: absolute;
	top: 140px;
	left: 20px;
	background: #FFFFFF;
	border-radius: 10px;
	font-size: 2em;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
	padding: 15px;
	color:#006633;
	animation:sombra 1.5s ease-out infinite;
	-webkit-animation:sombra 1.5s ease-out infinite;
	-moz-animation:sombra 1.5s ease-out infinite;
}
@keyframes sombra{
	0%{ box-shadow: 0 0 10px rgba(0,0,0,0.5);}
	30%{ box-shadow: 0 0 10px rgba(0,0,0,0);}
	30%{ box-shadow: 0 0 10px rgba(0,0,0,0);}
	100%{ box-shadow: 0 0 10px rgba(0,0,0,0.5);}
}
@-webkit-keyframes sombra{
	0%{ box-shadow: 0 0 10px rgba(0,0,0,0.5);}
	30%{ box-shadow: 0 0 10px rgba(0,0,0,0);}
	30%{ box-shadow: 0 0 10px rgba(0,0,0,0);}
	100%{ box-shadow: 0 0 10px rgba(0,0,0,0.5);}
}
@-moz-keyframes sombra{
	0%{ box-shadow: 0 0 10px rgba(0,0,0,0.5);}
	30%{ box-shadow: 0 0 10px rgba(0,0,0,0);}
	30%{ box-shadow: 0 0 10px rgba(0,0,0,0);}
	100%{ box-shadow: 0 0 10px rgba(0,0,0,0.5);}
}

.nom_tipo{
	width: 292px;
	height: 90px;
	background: url(../img/nom_tipo_uno.png);
	position: absolute;
	left: 530px;
	top: -5px;
}

#infoUno{
	width: 325px;
	height: 50px;
	background: url(../img/info_01.png);
	top: 450px;
	left: 1800px;
	position: absolute;
	z-index: 200;
}

.info_uno{
	animation:avansad 1s ease-out;
	animation-fill-mode: forwards;
	animation-delay: 0.5s;
	-webkit-animation:avansad 1s ease-out;
	-webkit-animation-fill-mode: forwards;
	-webkit-animation-delay: 0.5s;
	-moz-animation:avansad 1s ease-out;
	-moz-animation-fill-mode: forwards;
	-moz-animation-delay: 0.5s;
}
@keyframes avansad{
	0%{ left: 1800px;}
	100%{ left: 400px;}
}
@-webkit-keyframes avansad{
	0%{ left: 1800px;}
	100%{ left: 400px;}
}
@-moz-keyframes avansad{
	0%{ left: 1800px;}
	100%{ left: 400px;}
}

#infoDos{
	width: 259px;
	height: 50px;
	background: url(../img/info_02.png);
	top: 450px;
	left: 1800px;
	position: absolute;
	z-index: 200;
}

.info_dos{
	animation:avansae 1s ease-out;
	animation-fill-mode: forwards;
	-webkit-animation:avansae 1s ease-out;
	-webkit-animation-fill-mode: forwards;
	-moz-animation:avansae 1s ease-out;
	-moz-animation-fill-mode: forwards;
}
@keyframes avansae{
	0%{ left: 1800px;}
	100%{ left:1000px;}
}
@-webkit-keyframes avansae{
	0%{ left: 1800px;}
	100%{ left:1000px;}
}
@-moz-keyframes avansae{
	0%{ left: 1800px;}
	100%{ left:1000px;}
}
#plat_agua{
	width: 309px;
	height: 330px;
	text-align: center;
	background: url(../img/agua_02_01_01.png);
	position: absolute;
	top: 210px;
	left: 800px;
	visibility: visible;
}

.platAgua{
	animation:avansa 1s ease-out;
	-webkit-animation:avansa 1s ease-out;
	-moz-animation:avansa 1s ease-out;
}

@keyframes avansa{
	0%{ left: 1800px;}
	100%{ left: 800px;}
}
@-webkit-keyframes avansa{
	0%{ left: 1800px;}
	100%{ left: 800px;}
}
@-moz-keyframes avansa{
	0%{ left: 1800px;}
	100%{ left: 800px;}
}

                  /*AGUA*/
#plat_agua_dos{
	width: 309px;
	height: 330px;
	text-align: center;
	background: url('../img/agua_02_01_01.png'); 
	position: absolute;
	top: 210px;
	left: 800px;
	visibility: hidden;
}

.platAguaDos{
	-webkit-animation:cambioa 5s ease-out;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: forwards;
	-moz-animation:cambioa 5s ease-out;
	-moz-animation-play-state: running;
	-moz-animation-fill-mode: forwards;
	-ms-animation:cambioa 5s ease-out;
	-ms-animation-play-state: running;
	-ms-animation-fill-mode: forwards;
	animation:cambioa 5s ease-out;
	animation-play-state: running;
	animation-fill-mode: forwards;
}

@-webkit-keyframes cambioa{
	0%{background-image: url('../img/agua_02_01_01.png');}
	19%{background-image: url('../img/agua_02_01_01.png');}
	20%{background-image: url('../img/agua_02_01_02.png');}
	40%{background-image: url('../img/agua_02_01_02.png');}
	59%{background-image: url('../img/agua_02_01_02.png');}
	60%{background-image: url('../img/agua_02_01_03.png');}
	99%{background-image: url('../img/agua_02_01_03.png');}
	100%{background-image: url('../img/agua_02_01_04.png');}
}
@-moz-keyframes cambioa{
	0%{background-image: url('../img/agua_02_01_01.png');}
	19%{background-image: url('../img/agua_02_01_01.png');}
	20%{background-image: url('../img/agua_02_01_02.png');}
	40%{background-image: url('../img/agua_02_01_02.png');}
	59%{background-image: url('../img/agua_02_01_02.png');}
	60%{background-image: url('../img/agua_02_01_03.png');}
	99%{background-image: url('../img/agua_02_01_03.png');}
	100%{background-image: url('../img/agua_02_01_04.png');}
}
@-ms-keyframes cambioa{
	0%{background-image: url('../img/agua_02_01_01.png');}
	19%{background-image: url('../img/agua_02_01_01.png');}
	20%{background-image: url('../img/agua_02_01_02.png');}
	40%{background-image: url('../img/agua_02_01_02.png');}
	59%{background-image: url('../img/agua_02_01_02.png');}
	60%{background-image: url('../img/agua_02_01_03.png');}
	99%{background-image: url('../img/agua_02_01_03.png');}
	100%{background-image: url('../img/agua_02_01_04.png');}
}

@keyframes cambioa{
	0%{background-image: url('../img/agua_02_01_01.png');}
	19%{background-image: url('../img/agua_02_01_01.png');}
	20%{background-image: url('../img/agua_02_01_02.png');}
	40%{background-image: url('../img/agua_02_01_02.png');}
	59%{background-image: url('../img/agua_02_01_02.png');}
	60%{background-image: url('../img/agua_02_01_03.png');}
	99%{background-image: url('../img/agua_02_01_03.png');}
	100%{background-image: url('../img/agua_02_01_04.png');}
}

#plat_arena{
	width: 480px;
	height: 127px;
	text-align: center;
	background: url(../img/02_01_02.png);
	position: absolute;
	top: 410px;
	left: 1800px;
}
.platArena{
	animation:avansab 1s ease-out;
	animation-delay: 0.5s;
	animation-fill-mode: forwards;
	-webkit-animation:avansab 1s ease-out;
	-webkit-animation-delay: 0.5s;
	-webkit-animation-fill-mode: forwards;
	-moz-animation:avansab 1s ease-out;
	-moz-animation-delay: 0.5s;
	-moz-animation-fill-mode: forwards;
}
@keyframes avansab{
	0%{ left: 1800px;}
	100%{ left: 100px;}
}
@-webkit-keyframes avansab{
	0%{ left: 1800px;}
	100%{ left: 100px;}
}
@-moz-keyframes avansab{
	0%{ left: 1800px;}
	100%{ left: 100px;}
}
/*ESPATULA*/
#plat_espatula_uno{
	width: 380px;
	height: 50px;
	text-align: center;
	background: url('../img/02_01_03_03.png');
	position: absolute;
	top: 350px;
	left: 1800px;
	z-index: 100;
	border-radius: 10px;
	cursor: pointer;
	transform:rotate(20deg);
}

.platSpatulaUno{
	animation:avansac 1s ease-out;
	animation-delay:0.5s;
	animation-fill-mode: forwards;
	-webkit-transform:rotate(20deg);
	-webkit-animation:avansac 1s ease-out;
	-webkit-animation-delay:0.5s;
	-webkit-animation-fill-mode: forwards;
	-moz-transform:rotate(20deg);
	-moz-animation:avansac 1s ease-out;
	-moz-animation-delay:0.5s;
	-moz-animation-fill-mode: forwards;
}
@keyframes avansac{
	0%{ left: 1800px;}
	100%{ left: 30px;}
}
@-webkit-keyframes avansac{
	0%{ left: 1800px;}
	100%{ left: 30px;}
}
@-moz-keyframes avansac{
	0%{ left: 1800px;}
	100%{ left: 30px;}
}
#plat_espatula_uno:hover {
	transform:scale(1.1) rotate(15deg);
	-webkit-transform:scale(1.1) rotate(15deg);
	-moz-transform:scale(1.1) rotate(15deg);
}
/*ESPATULA MOVIMIENTO*/
#plat_espatula{
	width: 380px;
	height: 50px;
	text-align: center;
	background: url('../img/02_01_03_01.png');
	position: absolute;
	top: 350px;
	visibility: hidden;
	left: 1800px;
	z-index: 100;
	transform:rotate(20deg);
	
}

.mover_spatula{
	animation:gira 2s ease-out;
	animation-iteration-count: 3;
	animation-play-state: running;
	animation-fill-mode: forwards;

	-webkit-transform:rotate(20deg);
	-webkit-animation:gira 2s ease-out;
	-webkit-animation-iteration-count: 3;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: forwards;

	-moz-transform:rotate(20deg);
	-moz-animation:gira 2s ease-out;
	-moz-animation-iteration-count: 3;
	-moz-animation-play-state: running;
	-moz-animation-fill-mode: forwards;

	-ms-transform:rotate(20deg);
	-ms-animation:gira 2s ease-out;
	-ms-animation-iteration-count: 3;
	-ms-animation-play-state: running;
	-ms-animation-fill-mode: forwards;
}
@keyframes gira{
	0%{top: 350px; left: 30px; background-image: url(../img/02_01_03_02.png);}
	40%{top:100px; left:600px; transform:rotate(40deg);background-image: url(../img/02_01_03_02.png);}
	41%{top:100px; left:600px; transform:rotate(40deg);background-image: url(../img/02_01_03_01.png);}
	70%{top:100px; left:600px; transform:rotate(40deg);background-image: url(../img/02_01_03_01.png);}
	71%{top:100px; left:600px; transform:rotate(40deg);background-image: url(../img/02_01_03_01.png);}
	100%{top: 350px; left: 30px; background-image: url(../img/02_01_03_01.png);}
}
@-webkit-keyframes gira{
	0%{top: 350px; left: 30px; background-image: url(../img/02_01_03_02.png);}
	40%{top:100px; left:600px; -webkit-transform:rotate(40deg);background-image: url(../img/02_01_03_02.png);}
	41%{top:100px; left:600px; -webkit-transform:rotate(40deg);background-image: url(../img/02_01_03_01.png);}
	70%{top:100px; left:600px; -webkit-transform:rotate(40deg);background-image: url(../img/02_01_03_01.png);}
	71%{top:100px; left:600px; -webkit-transform:rotate(40deg);background-image: url(../img/02_01_03_01.png);}
	100%{top: 350px; left: 30px; background-image: url(../img/02_01_03_01.png);}
}
@-moz-keyframes gira{
	0%{top: 350px; left: 30px; background-image: url(../img/02_01_03_02.png);}
	40%{top:100px; left:600px; -moz-transform:rotate(40deg);background-image: url(../img/02_01_03_02.png);}
	41%{top:100px; left:600px; -moz-transform:rotate(40deg);background-image: url(../img/02_01_03_01.png);}
	70%{top:100px; left:600px; -moz-transform:rotate(40deg);background-image: url(../img/02_01_03_01.png);}
	71%{top:100px; left:600px; -moz-transform:rotate(40deg);background-image: url(../img/02_01_03_01.png);}
	100%{top: 350px; left: 30px; background-image: url(../img/02_01_03_01.png);}
}