/* 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;
}
img.cerrar {
    position: absolute;
    top: -40px;
    right: -40px;
}
 
.con_pop{
	position: absolute;
	top: 0px;
	left: -1080px;
	width: 260%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.28);
	z-index: 1001;
}
.oculta{
	display:none;
}
.muestra{
	display:block;
}
.popup{
	position: absolute;
	left: 0px;
	right: 0px;
	top: 100px;
	margin: auto;
	max-width: 990px;
	z-index: 1002;
	border-radius:35px;
	animation-name: muestra;
	animation-duration: 1s;
	animation-iteration-count: 1;
	-webkit-animation-name: muestra;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;	
}
 @-webkit-keyframes muestra {
 from {
	top:-400px;
	opacity:0;
}
 to {
	top:100px;
	opacity:1;
}
}
@keyframes muestra {
 from {
	top:-400px;
	opacity:0;
}
 to {
	top:100px;
	opacity:1;
}
} 
.popup iframe {
  position: absolute;
  left: 110px;
  top: 40px;
} 
/* ./  ************************************** */
 
.encima{
	    background-color: rgba(255, 255, 255, .5)!important;

}
.drags {
    position: absolute;
    top: 80px;
    right: 130px;
    width: 130px;
    text-align: center;
}

.drags>img {
    cursor: pointer;
}

.botones {
    position: absolute;
    bottom: 12px;
    left: 44%;
}

.botones img {
    cursor: pointer;
}

.drop {
    position: absolute;
    background-color: rgba(255, 255, 255, 0);
    height: 110px;
    width: 220px;
    text-align: center;
}

.psc1 {
    top: 160px;
    left: 180px;
}

.psc2 {
    top: 285px;
    left: 100px;
    width: 410px;
}
.psc3 {
    top: 425px;
    left: 100px;
    width: 132px;
    padding-top: 30px;
}
.psc4 {
    top: 425px;
    left: 370px;
    width: 180px;
    padding-top: 39px;
}