body{
    font-family: 'Orbitron', sans-serif;
    background-color: #f4aa37;

    font-size: 13px;    
}

.transicion-confirmacion {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2000px;
    z-index: 9999;
    background-repeat: no-repeat; 
    background:rgba(0, 0, 0, 0.7);
    background-position: center;
    
    color: #4e9a06;
}
.transicion-confirmacion-content{
    width: 80%;
    max-width: 400px;
    text-align: center;

    margin: 0 auto;
}
.transicion-confirmacion-img{
    margin: 110px auto 5px auto;
}
.transicion-confirmacion-text {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    
    margin: 5px 10px;
    padding: 15px 5px;
}
.transicion-confirmacion.transicion-acerto {
    color: #4e9a06;
}
.transicion-confirmacion.transicion-noacerto {
    color: #f44336;
}
.transicion-confirmacion.transicion-noeligio {
    color: #f44336;
}

.preloader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2000px;
    z-index: 9999;
    background-repeat: no-repeat; 
    background-color: #3d2657;
    background-position: center;
}
.preloader-content{
    width: 80%;
    max-width: 400px;
    text-align: center;

    margin: 0 auto;
}
.preloader-img{
    margin: 60px auto;
    width: 60%;
}
.preloader-text {
    margin: 35px 10px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    color: #fff;
}

section.main{
    max-width: 1024px;
    width: 100%;

    box-sizing: border-box;
    margin: 0 auto 0 auto;
    padding: 0px;
}
section.main .col-md-12{
    padding-left: 3px;
    padding-right: 7px;
}
section.main .row{    
    text-align: center;
    margin: auto 5px;
}
section.main h1{
    background-color: #3d2657;

    text-align: center;
    color: #f9c938;

    padding: 15px;
    margin: 0px;
}
section.main h3{
    font-size: 24px;
    font-weight: bold;
    color: #3d2657;

    padding: 5px 0px;
    margin: 15px 0 0 0;
}
section.main p.comentarios{
    color: #3d2657;
    font-size: 16px;
}

section.main .separador{
    height: 20px;
}

.header-juego{
    background-color: #3d2657;

    padding: 10px;
    margin: 0px;    
}
.header-juego a{
    color: #f9c938;
}
.header-juego .nivel{
    float: right;
    background-color: rgba(255, 255, 255, 0.3);
    font-size: 11px;
    margin: 0px;
    padding: 6px 10px;
}

.header-juego .boton{
    float: right;
    border-left: #f4aa37 solid 1px;
    background-color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    font-weight: bold;
    color: #3d2657;
    
    margin: 0px;
    padding: 6px 10px;

    cursor: pointer;
}
.header-juego .boton a{
    display: block;
    width: 100%;
    color: #3d2657;
}

.bloque-configuracion{
    display: none;
    position: absolute;
    
    width: 100%;
    max-width: 1024px;

    background:rgba(83, 49, 114, 0.9);
    padding: 10px;
    margin: 0px auto;
    
    color: #f4aa37;
    
    z-index: 99999;
}
.bloque-configuracion h4{
    font-size: 15px;
    font-weight: bold;

    text-transform: uppercase;
    border-bottom: #5a3386 solid 2px;
    padding: 5px;
}
.bloque-configuracion .par{
    border-bottom: #5a3386 dotted 1px;

    margin: 5px;
    padding: 15px 20px;
}
.bloque-configuracion .par .label{
    font-size: 14px;    

    margin: 0;
    padding: 0;
}
.bloque-configuracion .par .dato{
}
.bloque-configuracion .par .dato input,
.bloque-configuracion .par .dato select{
    border: #4c3173 solid 1px;
    background-color: #fff;
    color: #3d2657;

    width: 80%;
    max-width: 300px;

    padding: 10px;
    font-size: 16px;
    font-weight: bold;

    cursor: pointer;
}

.countdown-bar{
    display: none;
    margin: 5px 0;
}
.countdown-bar .countdown-bar-text{
    display: nonex;
    font-size: 10px;
}
.countdown-bar .countdown-bar-text.poco-tiempo{
    font-size: 11px;
    font-weight: bold;
}
.countdown-bar .countdown-bar-uno{
    display: inline-block;
    vertical-align: middle;
    
    box-sizing: border-box;
    width: 0.6%;
    
    background-color: #3d2657;
}
.countdown-bar .countdown-bar-uno.sel{
    background-color: rgba(255, 255, 255, 0.2);
}
.countdown-bar .countdown-bar-uno.consumido{
    background-color: rgba(255, 255, 255, 0.2);
}


.div-foto-pelicula{
    max-width: 400px;

    text-align: center;
    margin: 0 auto;
}
.div-foto-pelicula .div-foto-pelicula-foto{
    height: 200px;
    overflow: auto;
}
.div-foto-pelicula .div-foto-pelicula-foto .foto-pelicula{
    border: #000 solid 1px;
    width: 100%;
    max-width: 800px;

    margin: 5px auto;
}

.bloque-valorar-secuencia{
    max-width: 600px;
    padding: 5px;
    margin: 5px auto;
}
.bloque-valorar-secuencia .valoracion{
    background-color: rgba(255, 255, 255, 0.2);
    display: inline-block;
    vertical-align: middle;

    box-sizing: border-box;
    max-width: 140px;
    font-size: 11px;

    padding: 5px;
    margin: 1px 5px;
    cursor: pointer;
}
.bloque-valorar-secuencia .valoracion:active{
    opacity: 0.7;
}

.pelicula-opciones{
    max-width: 600px;
    margin: 10px auto;
}
.pelicula-opciones.mostrar{
    display: block;
}
.pelicula-opciones.nomostrar{
    display: none;
}

.pelicula-opciones .comentarios{
    background-color: rgba(255, 255, 255, 0.3);
    margin: 1px;
    padding: 5px 1px;
    font-size: 11px;    
}

.pelicula-opciones-trigger{
    border: #ccc solid 1px;
    background-color: rgba(255, 255, 255, 0.5);

    width: 95%;
    max-width: 600px;

    padding: 10px;
    margin: 0 auto;

}
.pelicula-opciones-trigger.mostrar{
    display: block;
}
.pelicula-opciones-trigger.nomostrar{
    display: none;
}
.pelicula-opciones-trigger .pelicula-opciones-trigger-titulo{
    background-color: #4c3173;
    color: #f4aa37;
    
    font-size: 14px;
    font-weight: bold;
    
    padding: 10px;
    
    cursor: pointer;
}
.pelicula-opciones-trigger .pelicula-opciones-trigger-comentario{
    font-size: 12px;
    font-weight: normal;
    color: #4c3173;
    
    margin-top: 10px;
}


.pelicula-opciones .pelicula-opcion{
    background-color: #fff;
    border: #999 solid 1px;

    padding: 12px 5px 12px 8px;
    margin: 1px;

    text-align: left;
    font-size: 12px;  
    color: #4c3173;
}
.pelicula-opciones .pelicula-opcion.seleccionable:hover,
.pelicula-opciones .pelicula-opcion.seleccionable:active{
    background-color: #5a3386;
    color: #fff;
    cursor: pointer;
}
.pelicula-opciones .pelicula-opcion .dot {
    height: 8px;
    width: 8px;
    margin-right: 4px;
    background-color: #4c3173;
    display: inline-block;
    opacity: 0.7;
}
.pelicula-opciones .pelicula-opcion.seleccionada{
    border-left: #4c3173 solid 5px;    
    transform: translate(5px, 0px);
}
.pelicula-opciones .pelicula-opcion.seleccionada .dot {
    background-color: #4c3173;
    opacity: 1;  
}
.pelicula-opciones .pelicula-opcion.correcta{
    background-color: #1ea60c;
    color: #fff;
}
.pelicula-opciones .pelicula-opcion.incorrecta{
    background-color: #ccc;
    color: #999;
}
.pelicula-opciones .pelicula-opcion.tachado{
    text-decoration: line-through!important;
    background-color: #ccc;
    color: #999;
}
.pelicula-opciones .pelicula-opcion.seleccionada.correcta{
    border: #0e6c02 solid 2px;
    border-left: #0e6c02 solid 5px;
}
.pelicula-opciones .pelicula-opcion.seleccionada.correcta .dot {
    background-color: #0e6c02;
    opacity: 1;  
}
.pelicula-opciones .pelicula-opcion.seleccionada.incorrecta{
    border: #d03600 solid 2px;
    border-left: #d03600 solid 5px;
    background-color: #f14f17;
    color: #fff;
}
.pelicula-opciones .pelicula-opcion.seleccionada.incorrecta .dot {
    background-color: #d03600;
    opacity: 1;  
}

.botonera{
    margin: 25px auto;    
    text-align: center;
}
.boton-mayor{
    padding: 16px;
    text-align: center;
    font-size: 16px;
    box-shadow: 4px 4px 0px rgba(38,18,60,0.5);
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin: 5px;

    width: 95%;

    cursor: pointer;
}
.boton-mayor.on{
    border: 3px solid #26123c;
    background-color: #3d2657;
    color: #f9c938;
}
.boton-mayor.on:active{
    background-color:#5a3386;
    box-shadow:1px 1px 0px rgba(38,18,60,0.5);
    transform: translate(2px, 2px);
}
.boton-mayor.off{
    border: #ddd solid 2px;
    background-color: #666;
    color: #ddd;

    cursor: auto;    
}
.boton-mayor.left{
    text-align: left;
}
.boton-mayor .comentario{
    font-size: 10px;
}

.botonera-menor{
    margin: 10px auto;    
    text-align: center;
}
.boton-menor{
    border: #4C3173 solid 2px;
    background-color: #FFDDA6;
    color: #4C3173;

    font-weight: bold;
    font-size: 14px;

    padding: 6px 8px;  
    margin: 4px;

    cursor: pointer;
}
.boton-menor:active{
    opacity: 0.8;
}
.boton-menor .comentario{
    font-size: 11px;
    color: #666;
}

.botonera-menor-ayuda{
    margin: 10px auto;    
    text-align: center;
}
.boton-menor-ayuda{
    border: #4C3173 solid 2px;
    background-color: #FFDDA6;
    color: #4C3173;

    font-weight: bold;
    font-size: 11px;

    padding: 3px 4px;  
    margin: 2px;
}
.boton-menor-ayuda:active{
    opacity: 0.8;
    box-shadow:1px 1px 0px rgba(38,18,60,0.5);
    transform: translate(2px, 2px);
}
.boton-menor-ayuda .comentario{
    
    border: #FFDDA6 solid 2px;
    background-color: #4C3173;
    
    font-size: 12px;
    color: #999;
    
    padding: 3px 10px;
}

.div_escena_ayuda_persona{
    max-width: 600px;
    text-align: left;
    margin: 10px auto;
}
.div_escena_ayuda_persona .uno{
    display: block;
    border-bottom: #5a3386 dotted 1px;
    margin: 2px;
    padding: 2px;
    
    min-height: 25px;
}
.div_escena_ayuda_persona .uno .persona{
    display: inline-block;
    vertical-align: top;
    
    box-sizing: border-box;
    width: 12%;    
}
.div_escena_ayuda_persona .uno .persona img{
    width: 25px;
}
.div_escena_ayuda_persona .uno .persona .foto{
    float: left;
    max-height: 25px;
    overflow: hidden;
}
.div_escena_ayuda_persona .uno .persona img.hand{
    float: left;
    margin-top: -15px;
    margin-left: 10px;
}
.div_escena_ayuda_persona .uno .frase{
    display: inline-block;
    vertical-align: middle;
    
    box-sizing: border-box;
    width: 85%;    
}

.barfooter{

    position:fixed;
    left:0px;
    bottom:0px;
    height:70px;
    width:100%;
    background:rgba(83, 49, 114, 0.9);
    border-top: #3d2657 solid 2px;
    margin: 0;
    padding: 8px;
    color: #fff;

    text-align: center;

    font-size: 12px;
    z-index: 9998;  
}

.barfooter .barfooter-col{
    display: inline-block;
    vertical-align: middle;

    box-sizing: border-box;
}
.barfooter .barfooter-col.barfooter-col-1{
    width: 73%;
}
.barfooter .barfooter-col.barfooter-col-2{
    width: 25%;
}
.barfooter .barfooter-col.barfooter-col-1 .barfooter-col-puntaje{
    display: inline-block;
    vertical-align: middle;

    width: 32%;
    box-sizing: border-box;    
}
.barfooter .barfooter-col.barfooter-col-1 .barfooter-col-puntaje .mini-titulo{
    font-size: 11px;
    color: #ccc;
}
.barfooter .barfooter-col.barfooter-col-1 .barfooter-col-puntaje label{
    margin-bottom: 0!important;
    font-weight: normal;
}
.barfooter .barfooter-col.barfooter-col-1 .barfooter-col-puntaje.numero{
    font-size: 16px;
}
.barfooter .barfooter-col.barfooter-col-1 .barfooter-col-puntaje.aciertos{
    font-size: 16px;
    color: #f4aa37;
    border-left: #fff dotted 1px;
}
.barfooter .barfooter-col.barfooter-col-1 .barfooter-col-puntaje.puntaje{
    font-size: 16px;
    border-left: #fff dotted 1px;
}
.barfooter .barfooter-col.barfooter-col-2{
}
.barfooter .barfooter-col.barfooter-col-2 .boton{    
    font-weight: normal;
    font-size: 11px;

    padding: 6px 8px;  
    margin: 2px;
}
.barfooter .barfooter-col.barfooter-col-2 .boton.off{
    border: #999 solid 1px;
    background-color: #ddd;
    color: #999;

    cursor: auto;
}
.barfooter .barfooter-col.barfooter-col-2 .boton.on{
    display: none;
    
    border: #4C3173 solid 2px;
    background-color: #f4aa37;
    color: #4C3173;
    
    font-weight: bold;

    cursor: pointer;
}
.barfooter .barfooter-col.barfooter-col-2 .boton.on:active{
    opacity: 0.8;
}

.confirmacion{
    background-color: rgba(255, 255, 255, 0.2);
    width: 100%;
    max-width: 800px;
    padding: 10px;
    margin: 0 auto;
}
.confirmacion .mini-titulo{
    border-bottom: #fff solid 1px;
    font-size: 14px;
    padding: 4px;
    color: #fff;
}
.confirmacion .confirmacion-puntos{
    font-size: 50px;
    font-weight: bold;
    color: #3d2657;
}
.confirmacion .confirmacion-puntos .label-de{
    font-size: 20px;
    font-weight: normal;
    color: #3d2657;
}
.confirmacion .confirmacion-puntos .label-puntaje-ideal{
    font-size: 25px;
    font-weight: bold;
    color: #3d2657;
}
.confirmacion .confirmacion-aciertos{
    display: inline-block;
    vertical-align: top;

    box-sizing: border-box;
    width: 48%;

    font-size: 16px;    
    font-weight: bold;
    color: #3d2657;
    padding: 4px 0;
}
.confirmacion .confirmacion-nivel{
    display: inline-block;
    vertical-align: top;

    box-sizing: border-box;
    width: 48%;

    font-size: 16px;    
    font-weight: bold;
    color: #3d2657;
    padding: 4px 0;
}
.confirmacion .confirmacion-frase{
    font-size: 14px;
    font-weight: bold;
    font-style: italic; 
    color: #3d2657;

    margin-top: 20px;
}

/* Confirmacion Calificacion */
.resultado .valoracion{
    background-color: rgba(255, 255, 255, 0.2);
    width: 100%;
    max-width: 800px;
    min-height: 80px;
    padding: 10px;
    margin: 0 auto;
    
    text-align: center;
}
.resultado .valoracion .cal-mensaje{
    text-align:center;
    font-size:12px;
    color:#000;
}
.resultado .valoracion .cal-estrellas{
    width:80%;
    max-width: 300px;

    margin: 2px auto 2px auto;
    text-align: center;
}
.resultado .valoracion .cal-estrellas .recibido{    
    display:none;
}

/* Preloader */
.img_loading_min{
    padding: 10px;    
    text-align: center;
}
.img_loading_absolute{
    position: absolute;
    background-color: rgba(0, 0, 0, 0.4);
    width: 98%;
    height: 400px;
    margin: 0;
    padding: 20px;
    text-align: center;
    z-index: 999;
}
.img_loading_preloader_foto{
    position: absolute;
    background-color: rgba(83, 49, 114, 0.6);
    
    width: 98%;
    height: 200px;
    
    box-sizing: border-box;
    
    margin: 0 auto;
    padding: 50px;
    text-align: center;
    z-index: 999;
}


/* Share Button */
#share-buttons{
    margin: 15px;
}
#share-buttons img {
    width: 45px;
    border: 0;
    box-shadow: 0;
    display: inline;
}

/* Lightbox */
#lightbox-container-image{
    
}
#lightbox-container-image img{
    width: 100%;
    
}

/* Tabs Configuracion */
.configuracion-tabs{
    margin-top: 10px;
}
.configuracion-tabs ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.configuracion-tabs ul li.tab{
    display: inline-block;
    vertical-align: top;
    
    background-color: rgba(255, 255, 255, 0.2);
    box-sizing: border-box;
    width: 48%;
    
    font-size: 14px;
    height: 40px;
        
    padding: 10px;  
    cursor: pointer;
}
.configuracion-tabs ul li.tab:active{
    opacity: 0.8;
}
.configuracion-tabs ul li.tab.activo{
    background-color: rgba(255, 255, 255, 0.5);
    font-size: 15px;
    font-weight: bold;
    cursor: default;
}
.configuracion-tabs .tab_datos{
    display: none;
    background: transparent;
}
.configuracion-tabs .tab_datos.activo{
    display: block;
    background-color: rgba(255, 255, 255, 0.5);
    
    box-sizing: border-box;
    
    padding: 10px;
}

/* Rango de Anios */
.bloque_rango #txt_rango_anios{
    border: none;
    background-color: rgba(255, 255, 255, 0.5);
    
    font-size: 22px;
    font-weight: bold;
    
    text-align: center;
    margin: 0 auto;
    padding: 5px;
    width: 80%;
    
    color: #26123c;
}
.bloque_rango .ui-slider-handle{
    background-color: #3d2657!important;
    padding: 20px 10px;
    margin-top: -10px;
}
.bloque_rango .ui-widget.ui-widget-content{
    border: none;
    background-color: rgba(255, 255, 255, 0.5);
}
.ui-slider-range.ui-widget-header.ui-corner-all{
    background-color: #3d2657!important;
    
}