/* 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;
	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;
}
/* ./  ************************************** */
 .inpts{
    position: absolute;
    width: 100px;
}

.inpts>input {
    width: 80px;
    height: 63px;
    border-radius: 15px;
    border: 4px dashed black;
    font-size: 52px;
    margin-bottom: 14px;
    text-align: center;
}

.inpts.ps1 {
    top: 321px;
    left: 585px;
}
.inpts.ps2 {
    top: 510px;
    left: 585px;
}
.inpts.ps3 {
    top: 454px;
    left: 225px;
}
.inpts.ps4 {
    top: 454px;
    left: 426px;
}
.inpts.ps5 {
    top: 487px;
    left: 342px;
}
.inpts.ps6 {
    top: 261px;
    left: 67px;
}
.inpts.ps7 {
    top: 260px;
    left: 309px;
}
.inpts.ps8 {
    top: 260px;
    left: 557px;
}
.inpts.ps9 {
    top: 418px;
    left: 183px;
}
.inpts.ps10 {
    top: 417px;
    left: 434px;
} 
.inpts.ps11 {
    top: 257px;
    left: 586px;
} 
.inpts.ps12 {
    top: 449px;
    left: 587px;
}
.inpts.ps13 {
    top: 446px;
    left: 354px;
}









































select.color {
    width: 88px;
    font-size: 28px;
    border: 4px solid;
}

.blanco {
    background-color: white;
}

option.rojo {
    background-color: red;
}

option.naranja { 
    background-color: orange; 
}

option.morado {
    background-color: purple;
}

option.azul {
    background-color: blue; 
}
 
option.verde {
    background-color: green;
}

textarea.textG {
    position: absolute; 
    resize: none;
    border-radius: 15px;
    border: 3px dashed black;
    font-size: 32px;
}

.txt1 {
    top: 281px;
    left: 91px;
    width: 440px;
    height: 90px;
}

.txt2 {
    top: 311px;
    left: 162px;
    width: 440px;
    height: 58px;
}
.txt3 {
    top: 381px;
    left: 82px;
    width: 440px;
    height: 86px;
}