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



.bien_back {
    background-color: #14AB14;
    color: white;
    border-color: white;
}

.mal_back {
    background-color: #CC2C1E;
    color: white;
    border-color: white;
}

.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;
}
.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);
}
 to {
 transform:scale(1.15);
 -webkit-box-shadow: 0px 0px 59px 0px rgba(246,255,117,1);
 -moz-box-shadow: 0px 0px 59px 0px rgba(246,255,117,1);
 box-shadow: 0px 0px 59px 0px rgba(246,255,117,1);
}
}
.off {
	visibility: hidden;
}
.encima {
	transform: scale(1.15);
	transition: all 250ms ease;
}
img.cerrar {
    position: absolute;
    top: -49px;
    right: -40px;
}
/* ./  ************************************** */
    

.mesajes {
    position: absolute;
    top: 310px;
    z-index: 3;
} 

.mesajes>img {
    position: absolute;
    z-index: 1;
    display: none;
    pointer-events: none;
}

.personajes {
    position: absolute;
    top: 438px;
    left: 0px;
    width: 100%;
    height: 309px;
    overflow: hidden;
    z-index: 1;
}

.personajes>img {
    margin-right: -28px;
    -webkit-filter: grayscale(100%);
    transition: all ease 300ms;
} 

img.p1 {top: 160px;left: 159px;}
img.p2 {top: 100px;left: 280px;}
img.p3 {top: 120px;left: 460px;}
img.p4 {top: 120px;left: 570px;}
img.p5 {top: 120px;left: 370px;}
img.p6 {top: 90px;left: 580px;}
img.p7 {top: 70px;left: 890px;}
img.p8 {top: 40px;left: 970px;}

.manzanas {
    position: absolute;
    top: 201px;
    left: 76px;
}

.manzanas>img {
    position: absolute;
}

img.apple1 { 
    top: 41px;
}
img.apple2 {
    top: 156px;
}

.moneda {
    position: absolute;
    top: 247px;
    left: 647px;
    height: 134px;
    width: 275px;
    background-color: white;
    border: 6px solid #EB7F26;
    border-radius: 15px;
    pointer-events: none;
    padding-left: 7px;
}

div#botonera {
    z-index: 1;
}

.valor {
    width: 120px;
    height: 30px;
    font-size: 20px;
    text-align: center;
    border-radius: 15px;
    border: 5px solid red;
    padding-top: 7px;
    position: absolute;
    top: 16px;
    left: 140px;
}

.pago {
    width: 120px;
    height: 30px;
    font-size: 20px;
    text-align: center;
    border-radius: 15px;
    border: 5px solid #8BC53F;
    padding-top: 7px;
    margin-top: 3px;
    position: absolute;
    top: 63px;
    left: 140px;
}

img.monei {
    border: 6px solid red;
    border-radius: 15px;
    width: 118px;
    margin-top: 6px;
}

body {}

.monedas {
    position: absolute;
    top: 590px;
    left: 90px;
    z-index: 3;
}

.monedas img {
    position: absolute;
    display: none;
    cursor: pointer;
}

img.mon1 {
    left: 1px;
}
img.mon2 {
    left: 221px;
    top: 80px;
}
img.mon3 {
    left: 358px;
    top: 76px;
}
img.mon4 {
    left: 471px;
    top: 76px;
}
img.mon5 {
    left: 611px;
    top: 47px;
}
img.mon6 {
    left: 811px;
    top: -7px;
}
img.mon7 {
    left: 985px;
    top: 36px;
}
img.mon8 {
    left: 1111px;
    top: 85px;
}

.personajes.sinscala>img {
    -webkit-filter: grayscale(0%);
}

img.drag1 {margin-left: -18px;cursor: pointer;}

.grupo1 {
    position: absolute;
    top: 268px;
    left: 129px;
    z-index: 3;
}
.grupo2 {
    position: absolute;
    top: 370px;
    left: 249px; 
    z-index: 3;
}
img.drag2 {margin-left: -18px;cursor: pointer;z-index: 3;}

img.drag3 {
    position: absolute;
    top: 380px;
    left: 150px;
    z-index: 4;
    cursor: pointer;
}

textarea.txt {
    position: absolute;
    top: 330px;
    left: 600px;
    width: 683px;
    height: 310px;
    border-radius: 15px;
    border: 4px dashed black;
}

img.audio.sca {
    position: absolute;
    bottom: 31px;
    z-index: 110;
    left: 31px;
}