/* CSS Document */
 /* 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 #026633;
}
/* 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;
}
/* ./  ************************************** */
video.video {
    position:absolute;
    top: 179px;
    left:289px;
    width: 810px;
    border-radius:15px;
    border:6px solid black;
}  
 

img.aviso1 {
    position: absolute;
    bottom: 387px;
    left: 300px;
    display: none;
}
 
img.aviso2 {
    position: absolute;
    bottom: 387px;
    left: 410px;
    display: none;
}

img.llama {
    position: absolute;
    top: 351px;
    left: 1081px;
    animation: llama 300ms ease infinite alternate;
}
@keyframes llama{
	from{
		transform:scaleY(1);
	}
	to{
		transform:scaleY(1.2);
	}
}

img.tubo1 {
    position: absolute;
    top: 372px;
    left: 444px;
    background-color: #860E1D;
    border-radius: 22px;
    border: 5px solid #860F1C;
}

img.tubo2 {
    position: absolute;
    top: 372px;
    left: 547px;
    background-color: #860E1D;
    border-radius: 22px;
    border: 5px solid #0E5486;
    z-index: 1;
}

.caja.ui-droppable {
    position: absolute;
    top: 121px;
    left: 1030px;
    width: 120px;
    height: 225px;
    /* background-color: white; */
    border-radius: 15px;
    border: 2px dashed #A6A4A4;
}

.contando {
    border-color: #EC0C0C;
    animation: scala 300ms ease infinite alternate;
}
@keyframes scala{
	from{
		transform:scale(1);
	}
	to{
		transform:scale(1.1);
	}
}

.caja { position: absolute;top: 123px;left: 1019px;width: 140px;height: 221px;/* background-color: white; */border-radius: 15px;border: 3px dashed gray;}

img.cerrar {
    position: absolute;
    top: -26px;
    right: -29px;
}