 /* 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;
}
.cerrar{
	position:absolute;
	top: -14px;
	right: -14px;
}
/* ./  ************************************** */
 
 
 
textarea.tg_1 {
    position: absolute;
    top: 330px;
    left: 40px;
    width: 1103px;
    height: 120px;
    border-radius: 15px;
    border: 4px dashed black;
    font-size: 40px;
}
textarea.tg_2 {
    position: absolute;
    top: 540px;
    left: 40px;
    width: 1103px;
    height: 111px;
    border-radius: 15px;
    border: 4px dashed black;
    font-size: 40px;
}

input.preg1 {
    position: absolute;
    top: 534px;
    left: 560px;
    font-size: 42px;
    border-radius: 16px;
    border: 3px dashed black;
    text-align: center;
    width: 210px;
}
input.preg2 {
    position: absolute;
    top: 604px;
    left: 560px;
    font-size: 42px;
    border-radius: 16px;
    border: 3px dashed black;
    text-align: center;
    width: 210px;
}

img.intrucciones {
    position: absolute;
    top: 269px;
    right: 60px;
}

.herramientas {
    position: absolute;
    top: 340px;
    right: 61px;
    width: 250px;
    height: 390px;
    /* background-color: white; */
}

.lapiz {
    width: 98%;
    height: 48%;
    background-color: #FFF7EF;
    border-radius: 15px;
    border: 3px solid black;
    background-image: url(../img/act_1/btn_1.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.borrador {
    width: 98%;
    height: 48%;
    background-color: #FFF7EF;
    border-radius: 15px;
    border: 3px solid black;
    background-image: url(../img/act_1/btn_2.png);
    margin-top: 7px;
}

.cuadricula {
    position: absolute;
    top: 320px;
    left: 100px;
    width: 867px;
    height: 316px;
    background: transparent;
    border-radius: 15px;
    border: 3px solid #729CB1;
    overflow: hidden;
    /* background-image: url(../img/act_1/cuadro.png); */
    z-index: 2;
}

.cuadricula>div {
    width: 20px;
    height: 20px;
    background-color: transparent;0:1px;
    display: inline-block;
    margin: 0px;
    border: 1px solid #729CB1;
    margin-top: -4px;
}

.prueb { 
    position: absolute;
    top: 101px;
    left: 1px;
    z-index: 41;
    background-color: red;
}

.subcuadricula>div.ancho {
    position: absolute;
    left: 44%;
    top: -60px;
    width: 80px;
    height: 34px;
    background-color: white;
    border: 4px solid #729CB1;
    font-size: 27px;
    border-radius: 0 15px 15px 15px;
    text-align: center;
    overflow: hidden;
    color: #883A13;
}

.subcuadricula {
    position: absolute;
    top: 320px;
    left: 100px;
    width: 867px;
    height: 316px;
    background: transparent;
    z-index: 1;
    background-image: url(../img/act_1/cuadro.png);
    border-radius: 15px;
    pointer-events: none;
    overflow: hidden;
}

.m1 {
    position: absolute;
    top: 540px;
    left: 240px;
    width: 260px;
}

.m2 {
    position: absolute;
    top: 540px;
    left: 847px;
    width: 260px;
}