/* 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;
}
/* ./  ************************************** */
  

.botones {
    position: absolute;
    top: 115px;
    left: 278px;
}

.botones div {
    margin-right: 69px;
    float:left;
    padding: 13px 46px;
    position: relative;
    border: 6px solid #8E78FF;
    background-color: #ADADE5;
    border-radius: 75px;
    font-size: 46px;
    color: white;
    text-transform: uppercase;
    cursor: default;
    pointer-events: none;
}
.botones2 {
    position: absolute;
    top: 627px;
    left: 351px;
}

.botones2 div {
    margin-right: 61px;
    float:left;
    padding: 9px 37px;
    position: relative;
    border: 6px solid #8E78FF;
    background-color: #ADADE5;
    border-radius: 55px;
    font-size: 46px;  
    color: white;
    text-transform: uppercase;
    cursor: pointer; 
}
 
 
img.mal {
    z-index: 1;
    display: none;
}

img.bien {
    position: absolute;
    bottom: 171px;
    right: 300px;
    z-index: 1;
    display: none;
    transition: all ease 100ms;
}

img.instru {
    position: absolute;
    bottom: 40px;
    right: 50px;
}

img.chiguiro {
    position: absolute;
    top: 0px;
    left: 0px; 
    display: none;
}

svg#lineas {
    position: absolute;
    top: 162px;
    left: 272px;
}

svg#lineas>* {
    display: none;
}

img.chiguirodrag {
    position: absolute;
    top: 330px;
    left: 79px;
    cursor: pointer;
}

.highlight {border: 6px solid #4B0070!important;}

img.mal1 {
    position: absolute;
    top: 450px;
    left: 590px;
}
img.mal2 {
    position: absolute;
    top: 450px;
    left: 430px;
}
img.mal3 {
    position: absolute;
    top: 440px;
    left: 770px;
}
img.mal4 {
    position: absolute;
    top: 290px;
    left: 690px;
}
img.mal5 {
    position: absolute;
    top: 450px;
    left: 590px;
}