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


.animation{
	transition:all 250ms ease;
}
.img_1{
	border-radius: 5px;
    
	background-repeat: no-repeat!important;
    
	background-position: center left;
	position: absolute;
    
	bottom: -4px;
    left: 23px;
    width: 1325px;
    
	height: 97px;	
	background-size: 70%!important;
}

svg#cuadrado line {
	display: none;
}
.btn-go {
	position: absolute;
	top: 144px;
	right: 40px;
	z-index: 100000;
}
.btn-go div {
	font-size: 25px;
	padding: 10px 20px;
	background-color: #8BC53F;
	border-radius: 35px;
	border: 3px solid black;
}
.btn-go div.active {
	background-color: #6A1DDE;
	color: white;
}
.cuadrado {
	position: absolute;
	top: 287px;
	left: -79px;
}
.opciones {
	position: absolute;
	width: 454px;
	right: 40px;
	top: 241px;
	text-align: center;
}
.opciones img {
	width: 108px;
	cursor: pointer;
	transition: all 300ms ease;
}
.opciones img:hover {
	transform: scale(1.1);
}
.opciones img:nth-child(2) {
	margin: 0px 30px 0px 30px;
}
.opciones img:nth-child(6) {
	margin: 0px 30px 0px 30px;
}
img.cerrar {
	position: absolute;
	top: -22px;
	right: -28px;
}
img.pop {
	max-width: 1000px;
}
/* css para ocultar botonera*/
#botonera:before {
	background-color: transparent!important;
}
#botonera div {
	border-bottom: 6px solid #89380f;
}
/* /. */
 
 


.atras {
    bottom: 110px;
    right: 80px;
    width: 70px; 
 	
    /* transition:all 300ms ease; */
	cursor:pointer;
}

img.atras:hover {
	transition:none;
	transform:scale(1.2) rotate(180deg) !important;	
}
	 
.drag {
    position: absolute;
    height: auto;
    width: auto;
    cursor:pointer;
}
.dg1 {
	top: 230px;
	left: 150px;
}
.dg2 {
	top: 240px;
	left: 414px;
}
.dg3 {
	top: 240px;
	left: 740px;
}
.dg4 {
	top: 270px;
	left: 1010px;
}

.drop {
    width: 240px;
    height: 180px;
    border: 5px dashed rgba(189, 189, 189, 0.21);
    border-radius: 15px;
}

.drop div {
    margin: 0px!important;
    text-align: center;
}

.drop div img {
    max-width: 230px;
    max-height: 170px;
    margin: 0px;
    padding: 0px;
}


.elemetosdrop {
    position: absolute;
    bottom: 54px;
    left: 88px;
    min-width: 1131px;
}

.elemetosdrop div {
    float: left;
    margin-left: 37px;
    text-align: center;
}

input.valorsilla {
    font-size: 51px;
    width: 130px;
    border: 4px dashed black;
    border-radius: 27px;
    position: absolute;
    top: 233px;
    left: 931px;
    text-align: center;
}

img.frasco {
    position: absolute;
    top: 282px;
    left: 60px;
    cursor: pointer;
    z-index: 1;
}

.diminished {
    transform: scale(0.5);
    opacity:0;
}
 
.encima {
    background-color: rgba(255, 255, 255, 0.14);
    animation:llama 500ms ease 0s infinite alternate ;
}
@keyframes llama{
	from{
		transform:scale(1.0);
	}
	to {
		transform:scale(1.3);
	}
}

input.inp_gen {
    font-size: 32px;
    width: 280px;
    height: 54px;
    padding: 11px;
    border-radius: 25px;
    border: 4px dashed black;
    position: absolute;
    text-align: center;
}


input.inp1 {
    top: 560px;
    left: 850px;
}

input.inp2 {
    top: 560px;
    left: 810px;
}

.caja {
    position: absolute;
    /* background-color: white; */
    width: 441px;
    height: 123px;
    padding: 13px;
}

.psc1 {
    top: 321px;
    left: 558px;
}
.caja img {
    width: 93px;
    margin: 11px 12px 0px 0px;
}
 
.psc2 {
    top: 340px;
    left: 359px;
    width: 360px;
    height: 87px;
}

.caja.psc2 img {
    width: 72px;
    margin: 9px;
}
.psc3 {
    top: 340px;
    left: 828px;
    width: 360px;
    height: 87px;
}
.caja.psc3 img {
    width: 72px;
    margin: 9px;
}
.psc4 {
    top: 350px;
    left: 328px;
    width: 240px;
    height: 65px;
}
.caja.psc4 img {
    width: 50px;
    margin: 8px 5px;
}
.psc5 {
    top: 350px;
    left: 658px;
    width: 240px;
    height: 65px;
}
.caja.psc5 img {
    width: 50px;
    margin: 8px 5px;
}
.psc6 {
    top: 350px;
    left: 988px;
    width: 240px;
    height: 65px;
}
.caja.psc6 img {
    width: 50px;
    margin: 8px 5px;
}

.psc7,.psc8,.psc9,.psc10 {
    width: 222px;
    height: 51px;
}
.psc7 img,.psc8 img,.psc9 img,.psc10 img {
    width: 51px;
    margin: 2px;
}

.psc7 {
    top: 295px;
    left: 433px;
} 
.psc8 {
    top: 300px;
    left: 874px;
} 
.psc9 {
    top: 420px;
    left: 431px;
} 
.psc10 {
    top: 420px;
    left: 873px;
}  
.psc11,.psc12,.psc13,.psc14,.psc15,.psc16,.psc17,.psc18 {
    width: 171px;
    height: 33px;
}
.psc11 img,.psc12 img,.psc13 img,.psc14 img,.psc15 img,.psc16 img,.psc17 img,.psc18 img {
    width: 43px;
    margin: 1px;
    margin-top: -6px;
} 
.psc11 {
    top: 316px;
    left: 343px;
}
.psc12 {
    top: 316px;
    left: 585px;
}
.psc13 {
    top: 316px;
    left: 822px;
}
.psc14 {
    top: 315px;
    left: 1067px;
}
.psc15 {
    top: 414px;
    left: 343px;
}
.psc16 {
    top: 416px;
    left: 588px;
}
.psc17 {
    top: 414px;
    left: 823px;
}
.psc18 {
    top: 414px;
    left: 1067px;
}

img.frasco.frascoult.ui-draggable {
    width: 80px;
    top: 360px;
    left: 130px;
}

textarea.tg {
    position: absolute;
    width: 1042px;
    height: 100px;
    border-radius: 16px;
    border: 4px dashed black;
    font-size: 40px;
    padding: 11px;
}

.off {
    visibility: hidden;
}

.tg1 {
    top: 555px;
    left: 180px;
}

.tg3 {
    top: 295px;
    left: 60px;
    width: 1215px!important;
}

textarea.tg.tg2 {
    top: 525px;
    left: 60px;
    width: 1215px!important;
}

textarea.tg.tg4 {
    top: 525px;
    left: 42px;
    width: 1248px!important;
}

.cuadros_R {
    position: absolute;
    top: 530px;
    left: 290px;
    margin: 14px;
}

.cuadros_R input {
    width: 86px;
    height: 50px;
    text-align: center;
    font-size: 30px;
    border: 3px dashed black;
    border-radius: 15px;
    position: relative;
}

img.verifica {
    position: absolute;
    top: 640px;
    left: 1053px;
    transition: all 300ms ease;
    cursor: pointer;
    display: none;
}

img.verifica:hover {
    transform: scale(1.1);
}
img.verifica:active {
    transform: scale(0.9);
}