#personajes>div{float: left; position: relative; }
#personajes{display: table; margin: auto;}
#personajes>div[data-href]{cursor: pointer;}
h2{color:#FFF;}
#Recomendados h2{display: none;}
#videos h2{margin-bottom: 20px;}


#videos>div>img{display: block; margin: 0px; width: 100%;}
#videos>div{float: left;}
#videos{display: table; margin: auto; margin-top: 50px;}
.videos2 video{width: 100%;}

.videos2 .botonPlay{width: 50px; height: 50px;}
.videos2 .botonPlay img{ height: 25px; margin: 12px auto; }       

@media screen and (min-width:1000px){    
    #personajes>div, #personajes>div img{ width: 160px; height: 160px; }
    #personajes>div:hover img{ position: absolute; width: 180px; height: 180px; margin-left: -10px; margin-top: -10px;  }
    section h2{font-size: 37px; }
    #videos{width: 88%;}
    #videos>div{width: 24.25%;  }    
    #videos>div + div{margin-left: 1%;}        
}

@media screen and (max-width:1000px){
    #videos>div{width: 300px; }      
}

@media screen and (max-width:1000px) and (min-width: 650px){    
    #videos{width: 620px;}    
    #videos>div:nth-of-type(2), #videos>div:nth-of-type(4){margin-left: 20px;}
    #videos>div:nth-of-type(1), #videos>div:nth-of-type(2){margin-bottom: 20px;}
}

@media screen and (max-width:649px){    
    #videos{width: 300px;}    
    #videos>div + div{margin-top: 20px;}
}

#videosRecomendados, #videosRecomendados div{display: table; margin: auto;}
#videosRecomendados{margin-top: 50px;}
#videosRecomendados h2{margin-bottom: 20px;}
@media screen and (min-width:1000px){    
    #videosRecomendados{width: 88%;}    
    #encuentranos, #suscribete{ width: 200px; bottom: 100px; }
    #encuentranos{left: 10px;}
    #suscribete{right: 10px;}
}
@media screen and (max-width:999px){   
    #personajes>div, #personajes>div img{ width: 80px; height: 80px; }
    #personajes>div:hover img{ position: absolute; width: 90px; height: 90px; margin-left: -5px; margin-top: -5px;  }
    #videosRecomendados{width: 95%;}    
    #encuentranos, #suscribete{ width: 100px; bottom: 50px;}
    #suscribete{right: 0px;}
}
#videosRecomendados video{float: left; width: 25%;}

#ventanaFlotante .descripcion{text-align: center; margin: 30px 0px;}
#ventanaFlotante .descripcion + img, #ventanaFlotante video{width: 100%;}
#ventanaFlotante video{margin-top: 30px;}
.ventana-flotante{max-width: 600px;}
.ventana-flotante.encuentranos{ width:90%; max-width: 600px;}

#encuentranos, #suscribete{position: fixed;  cursor: pointer; z-index: 500; }
#ventanaFlotante.suscribir{ 
    background: rgb(255,85,254); border-radius: 20px; 
    background: radial-gradient(circle, rgba(255,85,254,1) 30%, rgba(198,62,250,1) 100%);   
}
#ventanaFlotante .tituloVF>div:first-child{display: none;}

#ventanaFlotante.suscribir{margin: 50px auto}
#ventanaFlotante.suscribir .teclado span{ background: #FFF; text-align: center; color: rgb(194,56,253); 
display: block; cursor: pointer; overflow: hidden; }
#ventanaFlotante.suscribir .entradas input{ background: none; border: none; border-bottom: 2px solid #FFF; text-align: center;
color: #FFF;}

#ventanaFlotante.suscribir .entradas>div>div{padding: 10px;}
#ventanaFlotante.suscribir .teclado>div>div + div{padding-left: 10px;}
#ventanaFlotante.suscribir .teclado{margin-top: 8px;}    
#ventanaFlotante.suscribir .teclado>div{margin: 0px auto 10px auto;}
#ventanaFlotante.suscribir .infoVF{padding-top: 25px;}

#ventanaFlotante{position: relative;}
.ventana-flotante .tituloVF>#cerrarVentana{position: absolute; right: 0px; display: block;  }

@media screen and (min-width:750px){    
    #ventanaFlotante.suscribir{ width: 700px; min-height: 400px; }    
    #ventanaFlotante.suscribir #cerrarVentana{ margin-left: 670px; }
    #ventanaFlotante.suscribir .txt{ font-size: 22px; }
    #ventanaFlotante.suscribir .frm{width: 320px; }
    #ventanaFlotante.suscribir .logo{width: 235px;}
    #ventanaFlotante.suscribir .teclado{margin-top: 18px;}
    #ventanaFlotante.suscribir .teclado span{width: 45px; height: 45px; line-height: 45px; font-size: 22px; border-radius: 15px; }
    
    #ventanaFlotante.suscribir .teclado span + span{margin-left: 22px;}
    #ventanaFlotante.suscribir .infoVF{width: 535px; margin: auto;}
    #ventanaFlotante.suscribir .entradas input{width: 45px; height: 45px; font-size: 22px; }
    #ventanaFlotante.suscribir .entradas>div{width: 210px; margin: 10px auto;}
    #ventanaFlotante.suscribir .logo{width: 235px; margin: 30px auto 0px auto;}
    .teclado .borrar img{height: 25px; margin: 10px auto; }
    .caja.alias_b3, .caja.alias_c3, .caja.alias_d3, .caja.alias_e3{width: calc(50% - 25px);}
    .caja.alias_b3, .caja.alias_d3{float: left;}
    .caja.alias_c3, .caja.alias_e3{float: right;}
}

#ventanaFlotante.suscribir .txt{text-align: center;color: #FFF;}

@media screen and (max-width:749px){    
    #ventanaFlotante.suscribir{ width: 300px; }    
    #ventanaFlotante.suscribir #cerrarVentana{ margin-left: 270px; }
    #ventanaFlotante.suscribir .txt{ font-size: 18px; }
    #ventanaFlotante.suscribir .frm{width: 380px;}
    #ventanaFlotante.suscribir .logo{width: 200px;}
    #ventanaFlotante.suscribir .teclado span{width: 35px; height: 35px;  line-height: 35px;font-size: 19px; border-radius: 10px; }
    #ventanaFlotante.suscribir .teclado span + span{margin-left: 10px;}
    #ventanaFlotante.suscribir .infoVF{width: 290px; margin: auto;}
    #ventanaFlotante.suscribir .entradas input{width: 35px; height: 35px; font-size: 19px; }
    #ventanaFlotante.suscribir .entradas>div{width: 190px; margin: 10px auto;}
    #ventanaFlotante.suscribir .logo{width: 200px; margin: 30px auto;}
    .teclado .borrar img{height: 20px; margin: 7px auto; }
    .formularioSistema{width: 90%;}
    #validarEdad .logo img{display: none;}
    #btnSuscribir{ width: 200px; }
}

#ventanaFlotante.suscribir *{ font-family: 'the_bold_fontbold'; }

.formularioSistema label{color: #FFF;}
.formularioSistema input{border: none !important; border-radius: 9px; }
#formulario{ padding-top: 50px; background: url(../img/descubre.png) no-repeat; background-size: auto 80px; }
.txtChk{line-height: 12px;}
.caja.campochk.alias_f3 label.campochk{display: none;}
div.campochk span{font-family: 'caviar_dreamsbold' !important; font-size: 11px; color: #FFF;}
.formularioSistema select, .formularioSistema textarea{border: none; }

#btnSuscribir{margin: 30px auto; display: block; cursor: pointer;}

#ventanaFlotante.suscribir #formulario{display: none;}

#resumenCnt{margin-top: 30px;}
#resumenCnt h2{margin: auto; }

@media screen and (min-width:1300px){  
    #resumenCnt h2{width: 1225px;}
}

@media screen and (max-width:1299px) and (min-width:800px){ 
    #resumenCnt h2{ width: 87.5%; }    
}

@media screen and (max-width:799px){ 
    #resumenCnt h2{ width: 90%; }    
}