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


.bien_back {
    background-color: #169A16;
    color: white;
    border-color: white;
}

.mal_back {
    background-color: #CC2C1E;
    color: white;
    border-color: white;
}

/* ./  ************************************** */

/* codigo de video en reemplazo de sg-video...etc */
.videobox {
	position: absolute;
	top: 230px;
	left: 10px;
	width: 100%;
	z-index: 100;
}
.videobox iframe {
	position: relative;
	top: 50px;
	left: 309px;
}
.cartel {
	position: absolute;
	cursor: pointer;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	text-align: center;
	min-width: 200px;
	max-width: 760px;
	z-index: 101;
}
.titcartel {
	color: rgb(255, 255, 255);
	font-size: 1em;
	padding: 10px;
	border-radius: 10px;
	box-shadow: rgb(0, 0, 0) 0px 0px 10px;
	background: rgb(19, 26, 45);
}
.titcartel h2 {
	padding: 7px 10px 11px;
	border-radius: 7px;
	border: 3px dashed rgb(243, 236, 130);
}
/* Finaliza codigo de video */


.animation{
	transition:all 250ms ease;
}
   
.btn-go {
	position: absolute;
	top: 114px;
	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;
}
 

video {
    position: absolute;
    left: 230px;
    top: -21px;
    width: 870px;
    border: 10px solid #481E09;
    border-radius: 26px;  
}


/* css para ocultar botonera*/
#botonera:before {
	background-color: transparent!important;
}
#botonera div {
	border-bottom: 6px solid #89380f;
}
/* /. */
 
.botonera {
    position: absolute;
    bottom: 20px;
    right: 30px;
}

.p_prev.off {
    display: none;
}
.p_next.off {
    display: none;
}

 
   

.inpGn {
    position: absolute;
    top: 180px;
    left: 1020px;
    width: 150px;
}

.inpGn input {
    font-size: 38px;
    width: 130px;
    margin-bottom: 4px;
    border-radius: 14px;
    border: 3px dashed black;
    position: relative;
    text-align: center;
}
textarea.tg_1 {
    position: absolute;
    top: 517px;
    left: 40px;
    width: 1262px;
    height: 140px;
    border: 4px dashed black;
    border-radius: 15px;
}

textarea.tg_2 {
    position: absolute;
    top: 307px;
    left: 52px;
    width: 1256px;
    height: 120px;
    border: 4px dashed black;
    border-radius: 15px;
}

textarea.tg_3 {
    position: absolute;
    top: 517px;
    left: 54px;
    width: 1254px;
    height: 136px;
    border: 4px dashed black;
    border-radius: 15px;
}

textarea.tg_4 {
    position: absolute;
    top: 246px;
    left: 81px;
    width: 1184px;
    height: 51px;
    border: 4px dashed black;
    border-radius: 15px;
    font-size: 45px;
}

textarea.tg_5 {
    position: absolute;
    top: 457px;
    left: 81px;
    width: 1186px;
    height: 56px;
    border: 4px dashed black;
    border-radius: 15px;
    font-size: 47px;
}

textarea.tg_6 {
    position: absolute;
    top: 587px;
    left: 79px;
    width: 1187px;
    height: 59px;
    border: 4px dashed black;
    border-radius: 15px;
    font-size: 47px;
}

.inp1 {
    position: absolute;
    top: 317px;
    left: 864px;
    width: 304px;
    border: 4px dashed black;
    border-radius: 15px;
    font-size: 50px;
    text-align: center;
}



img.lata {
    position: absolute;
    bottom: 100px;
    left: 70px;
    cursor: pointer;
    z-index: 1000;
}

.cajas {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 3010px;
}

.cajas div {
    display: inline-block;
    height: 150px;
    width: 190px;
    position: relative;
    cursor: pointer;
}

.caja1 img,.caja2 img,.caja3 img,.caja4 img,.caja5 img,.caja6 img {
    display:none;
}
.caja1 img:first-child,.caja2 img:first-child,.caja3 img:first-child,.caja4 img:first-child,.caja5 img:first-child,.caja6 img:first-child{
    position: absolute;
    top: 0px;
    display:block;
}
/* Primera */ 
.caja1 img:nth-child(2) {
    position: absolute;
    top: 82px;
    left: 48px;
    margin: auto;
    z-index: 1410;
    height: 41px;
    width: 41px;
    display:block;
}
/* Segunda */

.caja2 img:nth-child(2) {
    position: absolute;
    top: 82px;
    left: 24px;
    margin: auto;
    z-index: 1410;
    height: 41px;
    width: 41px;
    display:block;
}
.caja2 img:nth-child(3) {
    position: absolute;
    top: 82px;
    left: 70px;
    margin: auto;
    z-index: 1410;
    height: 41px;
    width: 41px;
    display:block;
}
/* Tercera */

.caja3 img:nth-child(2) {
    position: absolute;
    top: 82px;
    left: 14px;
    margin: auto;
    z-index: 1410;
	height: 38px;
    width: 38px;
    display:block; 
}
.caja3 img:nth-child(3) {
    position: absolute;
    top: 82px;
    left: 52px;
    margin: auto;
    z-index: 1410;
	height: 38px;
    width: 38px;
    display:block;
}
.caja3 img:nth-child(4) {
    position: absolute;
    top: 82px;
    left: 90px;
    margin: auto;
    z-index: 1410;
	height: 38px;
    width: 38px;
    display:block;
}
/* Cuarta */

.caja4 img:nth-child(2) {
    position: absolute;
    top: 82px;
    left: 14px;
    margin: auto;
    z-index: 1410;
	height: 38px;
    width: 38px;
    display:block; 
}
.caja4 img:nth-child(3) {
    position: absolute;
    top: 82px;
    left: 48px;
    margin: auto;
    z-index: 1410;
	height: 38px;
    width: 38px;
    display:block;
}
.caja4 img:nth-child(4) {
    position: absolute;
    top: 82px;
    left: 82px;
    margin: auto;
    z-index: 1410;
	height: 38px;
    width: 38px;
    display:block;
}
.caja4 img:nth-child(5) {
    position: absolute;
    top: 82px;
    left: 114px;
    margin: auto;
    z-index: 1410;
	height: 38px;
    width: 38px;
    display:block;
}
/* quinta */

.caja5 img:nth-child(2) {
    position: absolute;
    top: 87px;
    left: 20px;
    margin: auto;
    z-index: 1410;
    height: auto;
    width: 28px;
    display:block;
} 
.caja5 img:nth-child(3) {
    position: absolute;
    top: 87px;
    left: 48px;
    margin: auto;
    z-index: 1410;
    height: auto;
    width: 28px;
    display:block;
} 
.caja5 img:nth-child(4) {
    position: absolute;
    top: 87px;
    left: 76px;
    margin: auto;
    z-index: 1410;
    height: auto;
    width: 28px;
    display:block;
} 
.caja5 img:nth-child(5) {
    position: absolute;
    top: 87px;
    left: 104px;
    margin: auto;
    z-index: 1410;
    height: auto;
    width: 28px;
    display:block;
} 
.caja5 img:nth-child(6) {
    position: absolute;
    top: 87px;
    left: 20px;
    margin: auto;
    z-index: 1410;
    height: auto;
    width: 28px;
    display:block;
} 
.caja5 img:nth-child(6) {
    position: absolute;
    top: 87px;
    left: 131px;
    margin: auto;
    z-index: 1410;
    height: auto;
    width: 28px;
    display:block;
} 
.caja5 img:nth-child(7) {
    position: absolute;
    top: 87px;
    left: 159px;
    margin: auto;
    z-index: 1410;
    height: auto;
    width: 28px;
    display:block;
} 

.cont_new {
    overflow: hidden;
    overflow-x: auto;
    width: 1041px;
    height: 166px;
    position: absolute;
    top: 490px;
    left: 260px; 

}

.cont_new::-webkit-scrollbar{
	height:10px;
	width:30px;
	background-color:gray;
    border-radius: 20px;
}
.cont_new::-webkit-scrollbar-thumb{
    background: white; 
    border-radius: 20px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
    transition:all 300ms ease;
} 
.cont_new::-webkit-scrollbar-thumb:hover{
    background: blueviolet; 
    border-radius: 20px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
} 


.cr_valida {
    position: absolute;
    top: 676px;
    left: 572px;
    background: rgba(255, 255, 255, 0);
    width: 72px;
    z-index: 1;
    height: 67px;
    border-radius: 5px 11px 0px 11px;
    cursor: pointer;
}

.cr_valida:active {
    background: rgba(255, 255, 255, 0.21);
}