/* Efectos basicos /. ************************************** */

.mal_tiembla {
	transition: all 200ms ease;
	animation: mal_tiembla 125ms ease-in-out infinite alternate;
}
@keyframes mal_tiembla {
 0% {
transform:rotateZ(-5deg);
}
 50% {
transform:rotateZ( 0deg) scale(.8);
border-color: red;
}
 100% {
transform:rotateZ( 5deg);
}
}
.mal_cabeza {
	transition: all 250ms ease;
	animation: mal_cabeza 250ms ease-in-out infinite alternate;
}
@keyframes mal_cabeza {
 0% {
 margin-left:0px;
}
 50% {
 margin-left:20px;
 border-color: red;
}
 100% {
 margin-left:-20px;
}
}
.bien_cabeza {
	transition: all 250ms ease;
	animation: bien_cabeza 250ms ease-in-out infinite alternate;
}
@keyframes bien_cabeza {
 0% {
 margin-top:0px;
}
 50% {
 margin-top:20px;
 border-color: green;
}
 100% {
 margin-top:-20px;
}
}
.mal_cabeza_R {
	transition: all 250ms ease;
	animation: mal_cabeza_R 250ms ease-in-out infinite alternate;
}
@keyframes mal_cabeza_R {
 0% {
 left:0px;
}
 50% {
 left:20px;
}
 100% {
 left:-20px;
 border-color: red;
}
}
.bien_cabeza_R {
	transition: all 250ms ease;
	animation: bien_cabeza_R 250ms ease-in-out infinite alternate;
}
@keyframes bien_cabeza_R {
 0% {
 top:0px;
}
 50% {
 top:20px;
}
 100% {
 top:-20px;
 border-color: green;
}
}
/* Escala */

.sca, .sca_child>* {
	transition: all 300ms ease;
	cursor: pointer!important;
}
.sca:hover, .sca_child>*:hover {
	transform: scale(1.1);
}
.sca:active, .sca_child>*:active {
	transform: scale(0.9);
}
/* Transicion en drag revert */
.animation {
	transition: all 250ms ease;
}
/* Botonera */
  
#botonera:before {
	background-color: transparent!important;
}
#botonera div {
	border-bottom: 6px solid #89380f;
}
/* Escala infinite*/
.agranda {
	transition: all 250ms ease;
	animation: agranda 800ms ease-out infinite alternate;
	cursor: pointer;
}
 @keyframes agranda { 
 from {
 transform:scale(1);
 	-webkit-filter: drop-shadow(2px 2px 5px yellow);
} 
 to {
 transform:scale(1.15);
	-webkit-filter: drop-shadow(2px 2px 20px yellow);
}
}
.off {
	visibility: hidden;
}
.encima {
	transform: scale(1.15);
	transition: all 250ms ease;
}
img.cerrar {
    position: absolute;
    top: -49px;
    right: -40px;
}
/* ./  ************************************** */

.retro {
	
position:  absolute;
	
left: 900px;
	
top: 13px;
}

.nav_mn {
    position: absolute;
    bottom: 84px;
    left: 0px;
    width: 100%;
}

.sigui {
    position: absolute;
    left: 1121px;
    top: 13px;
}

img.pregun {
    position: absolute;
    left: 33px;
}

img.personaje {
    animation: corre 1000ms 1 forwards;
}
@keyframes corre{
	0%{ 
		transform:scale(1);
		top: 410px;
		left: 310px;
		opacity:1;
	} 
	50%{  
		opacity:0.5;
	} 
	100%{ 
		opacity:1;
		transform:scale(0.5);
		top: 440px; 
		left: 870px;
	}
}

img.person1 {
    position: absolute;
    top: 410px;
    left: 310px;
}

 .click1 {
    position: absolute;
    top: 540px;
    left: 950px;
    border: 5px solid white;
    background-color: #FDB300;
    padding: 35px 30px;
    border-radius: 65px;
    display: none;
}

img.person2 {
    position: absolute;
    top: 120px;
    left: 310px;
}

img.jarra {
    position: absolute;
    top: 294px;
    left: 640px;
    border-radius: 25px;
    transform: rotate(0deg);
}

.esce1 {
    animation: sirve 1000ms ease 1 alternate;
}

@keyframes sirve{
	from{
		top: 294px;
		left: 640px;
   		transform: rotate(0deg);
	}
	to{ 
		top: 294px;
		left: 610px;
		transform: rotate(-70deg);
	}
}

img.jugo {
    position: absolute;
    top: 407px;
    left: 577px;
    display: none;
}
 

.personint {
    position: absolute;
    top: 120px; 
    left: 310px;
    width: 345px;
    height: 600px;
    display: none;
    animation: toma 1000ms steps(4, end)  infinite alternate;
    background-image: url(../img/act1/int3.png);
    background-position: 1383px 0px;
}
@keyframes toma{
	from{ 
		background-position: 1383px 0px;
	}
	to{
		background-position: 0px 0px;
	}
}

img.person3 {
    position: absolute;
    top: 120px;
    left: 584px;
}
img.person4 {
    position: absolute;
    top: 120px;
    left: 584px;
    display: none;
    animation: abre 300ms ease-out infinite alternate;
}
@keyframes abre{
	from{ 
    	top: 120px;
    	left: 584px;
	}
	to{ 
    	top: 117px;
    	left: 580px;
	}
}

img.int_pop {
    position: absolute;
    top: 220px;
    left: 160px;
    display: none;
} 

.click3 {
    position: absolute;
    top: 570px;
    left: 520px;
    border: 5px solid white;
    background-color: #FDB300;
    padding: 35px 30px;
    border-radius: 65px;
}

.click2 {
    position: absolute;
    top: 400px;
    left: 850px;
    border: 5px solid white;
    background-color: #FDB300;
    padding: 35px 30px;
    border-radius: 65px;
}



img.llama {
    position: absolute;
    top: 499px;
    left: 436px;
    display: none;
    transform:scaleY(1);
    animation: candela 500ms ease infinite alternate;
}

@keyframes candela{
	from{  
		transform:scaleY(1);
	}
	to{  
		transform:scaleY(1.2);
	} 
}
.text_pre {
    width: 560px;
    height: 340px;
    background-color: #64B238;
    position: absolute;
    top: 210px;
    left: 670px;
    border-radius: 13px;
    color: white;
    text-align: center;
    padding: 11px;
    font-size: 26px;
    display: none;
}

.text_pre textarea {
    width: 99%;
    height: 141px;
    border-radius: 15px;
    border: 4px dashed #026633;
    color: black;
}