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


.encima {
    background-color: rgba(255, 255, 255, 0.49)!important;
    transform: scale(1.2);
}


img.cerrar {
    position: absolute;
    top: -40px;
    right: -40px;
}
 
.drags img {
    position: absolute;
    cursor: pointer;
    z-index: 98;
}


img.img1 {
    top: 270px;
    left: 70px;
}

img.img2 {
    top: 470px;
    left: 68px;
}
img.img3 {
    top: 470px;
    left: 447px;
}
img.img4 {
    top: 270px;
    left: 250px;
}

img.img5 {
    top: 280px;
    left: 440px;
}

img.img6 {
    top: 480px;
    left: 277px;
}

.drops {
    position: absolute;
    top: 247px;
    left: 691px;
    height: 509px;
    width: 185px;
}

.drops div {
    position: absolute;
    background-color: rgba(255, 255, 255, 0);
    transition: all 300ms ease;
    text-align: center;
}

.drops img {
    position: absolute;
}

.drop1 {
    top: 0px;
    left: 0px;
    width: 225px;
    height: 207px;
}
.drop2 {
    top: 0px;
    left: 205px;
    width: 225px;
    height: 207px;
}
.drop3 {
    top: 0px;
    left: 399px;
    width: 225px;
    height: 207px;
}
.drop4 {
    top: 204px;
    left: 0px;
    width: 225px;
    height: 207px;
}
.drop5 {
    top: 204px;
    left: 204px;
    width: 225px;
    height: 207px;
}
.drop6 {
    top: 204px;
    left: 399px;
    width: 225px;
    height: 207px;
}



.termometro {
    position: absolute;
    top: 240px;
    left: 110px;
    height: 380px;
    width: 160px;
    background-image: url(../img/act_1/termometro.png);
    background-size: cover;
    z-index: 99;
    cursor: pointer;
} 

.medicion {
    position: absolute;
    top: 171px;
    left: 56px;
    transform: rotate(-69deg);
    font-size: 21px;
}

.obj-1 {
    position: absolute;
    top: 222px;
    left: 360px;
}

.obj-2 {
    position: absolute;
    top: 222px;
    left: 730px;
}

.bien1 {
    position: absolute;
    top: 605px;
    left: 450px;
}

.bien1 p {
    float: left;
    font-size: 60px;
    position: relative;
    top: -64px;
    left: 14px;
    color: white;
}

.bien1 input {
    font-size: 42px;
    width: 90px;
    float: left;
    border-radius: 14px;
    border: 4px dashed black;
}
.bien2 {
    position: absolute;
    top: 605px;
    left: 830px;
}

.bien2 p {
    float: left;
    font-size: 60px;
    position: relative;
    top: -64px;
    left: 14px;
    color: white;
}

.bien2 input {
    font-size: 42px;
    width: 90px;
    float: left;
    border-radius: 14px;
    border: 4px dashed black;
}

.grupo {
    position: absolute;
    top: 183px;
    left: 249px;
    width: 980px;
}

.grupo div {
    float: left;
    width: 230px;
    height: 220px;
    background-color: #ff9900;
    text-align: center;
    margin-right: 50px;
    margin-top: 20px;
    border-radius: 15px;
    border: 2px solid;
    cursor: pointer;
}