@font-face {
  font-family: "Questrial", sans-serif;
  src: url(../fonts/Gilroy-Bold.ttf);
}
#body{
    margin: 0;
}
#tituloSeccion{
    font-size: 3em;
    padding: 10px;
    font-weight: bolder;
}
#seccionjuegoActual{
    border: 3px solid #0789CA;
    margin: 0px 10px;
    padding: 20px;
}

#imagenJuego{
    cursor: pointer;
}

#botonesjuego{
    text-align: right;
    padding-right: 30px;
}
.botonesJuego{
    display: inline-block;
    background-color: #fff;
    color: #000;
    padding: 6px 67px;
    margin: 15px;
    border-radius: 30px;
    font-size: 2em;
    font-weight: bolder;
}
#botonAntes{
    display: inline-block;
    cursor: pointer;
}
#botonDespues{
    display: inline-block;
    cursor: pointer;
}
#contenidoPestanas2{
    margin: 10px;
}
.tabcontent2{
    display: none;
  padding: 6px 12px;
    width: 100%;
        margin-top: -5px;

    z-index: -1;
}
.tab2 {
    overflow: hidden;
    margin: -4px 0px;
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 0px;
    transition: 0.3s;
    font-size: 17px;
}
.carrusel2{
    display: inline-block;
    padding: 0px;
    width: 16%;
    vertical-align: top;
}
#pestanas2{
    border-bottom: 3px solid #532070;
    margin: 20px 10px;
    width: 100%;
}
#derecha{
    border: 3px solid #0789CA;
    margin: 80px 0px 0px 0px;
    padding: 20px;
}
#contenedorJuegos{

}
#nivel1,#nivel2,#nivel3,#nivel4{

}
#tituloNivel1, #tituloNivel2, #tituloNivel3, #tituloNivel4{
    font-size: 2em;
    font-weight: bolder;
    padding: 5px;
}
#nombrenivel1, #nombrenivel2, #nombrenivel3, #nombrenivel4{
    padding: 5px;
}
#barraprogreso{

}
#avance1, #avance2, #avance3, #avance4{
    background-color: #0788c9;
    width: 51%;
    height: 5px;
}
#progresonivel1, #progresonivel2, #progresonivel3, #progresonivel4{
    background-color: white;
    width: 100%;
    height: 5px;
}
#cantidadActividadesNivel1, #cantidadActividadesNivel2, #cantidadActividadesNivel3, #cantidadActividadesNivel4{
    padding: 5px;
}
#botonContinuarNivel1, #botonContinuarNivel2, #botonContinuarNivel3, #botonContinuarNivel4{
        background-color: white;
    color: #000;
    text-align: center;
    width: 30%;
    padding: 10px;
    margin: 5px 0px 40px 0px;
    border-radius: 21px;
    font-weight: bolder;
}
#botonContinuar{
    cursor: pointer;
    
}
#tableLogin{
    color: #fff;
    font-size: 2em;
}
#closeModal{
    opacity: inherit;
    font-size: 3em;
    color: #fff;
    text-shadow: none;
    font-weight: normal;
}
#modalHeader, #modalFooter{
    border: none;
}
#modalTitle{
    font-family: "Questrial", sans-serif !important;
    text-align: center;
    font-size: 4em;
    font-weight: bolder;
    color: #fff;
}
#modalContent{
    background-color: #00000000;
    box-shadow: none;
    border: none;
    margin: 10%;
}
#modalDialog{
    margin: 0;
    max-width: 100%;
    width: 80%;
}
#modalFooter{
    text-align: center;
}
#enviarForm{
font-size: 2em;
    font-weight: bolder;
    padding: 5px 40px;
    border-radius: 25px;
    margin: 15px;
}
#header{
    background-image: url("../img/header.jpg");
    height: 100px;
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
    border-bottom: 3px solid white;
}
#pestanas{
    margin-top: 5px;
}
#banner{
     /*   background-image: url(../img/banner.jpg);*/
    width: 101%;
   /* min-height: 446px;*/
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
}
#botonIngresar{
    background-image: url(../img/ingresar.jpg);
    width: 185px;
    background-size: contain;
    height: 60px;
    margin: 20px 70px;
    border-width: 0;
    outline: 0;
}
#botonIngresar2{
    background-image: url(../img/ingresar2.jpg);
    width: 185px;
    background-size: contain;
    height: 60px;
    margin: 20px 70px;
    border-width: 0;
    outline: 0;
}
#botonIngresar:active{
    border-width: 0;
}
#botonIngresar2:active{
    border-width: 0;
}
#botonIngresar:hover{
    border-width: 0;
}
#botonIngresar2:hover{
    border-width: 0;
}
#contenidoPestanas{
    border-bottom: 3px solid #551d7e;
        min-height: 330px;
}

.tab {
    overflow: hidden;
    margin: 0;
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0px;
  transition: 0.3s;
  font-size: 17px;
}

#tabMax{
    background-image: url("../img/logoHBOMAX.jpg");
    display: inline-block;
}
#tabHBO{
    background-image: url("../img/logoHBO.jpg");
    display: inline-block;

}
#tabMax.active{
    background-image: url("../img/logoHBOMAX2.jpg");
    display: inline-block;
}
#tabHBO.active{
    background-image: url("../img/logoHBO2.jpg");
    display: inline-block;
}

.carrusel{
    display: inline-block;
    padding: 10px;
    width: 11%;
    vertical-align: top;
}
#textoIzquierdaTab{
    width: 30%;
    padding: 77px 125px;
        font-size: 20px;
}
#carrouselImg{
    width: 100%;
}
/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
    border-top: 3px solid #551d7e;
    width: 100%;
        margin-top: -5px;

    z-index: -1;
}
#pantallaCompleta{
    background-image: url("../img/siguienteLvl.jpg");
    position: absolute;
    background-size: cover;
    z-index: 10;
    display: none;
    width: 100%;
    height: 100%;
    margin: 0;
}
#nombreIz{
    background-image: url(../img/nombreIz.jpg);
    width: 30.5px;
    background-size: contain;
    height: 100%;
    margin: 13px 0px;
}
#nombreCen{
    background-image: url(../img/nombreCen.jpg);
    background-size: contain;
    font-size: 11px;
}
#nombreDer{
    background-image: url(../img/nombreDer.jpg);
    width: 36.7px;
    background-size: contain;
    margin: 1px 0px;

}
#contenedorUsuario{
    height: 30px;
    margin: 25px 0px;
    background-image: url(../img/nombreCen.jpg);
    background-size: contain;
    font-size: 11px;
    text-align: center;
    padding: 7px 0px;
    width: 100px;
    background-position-x: center;
    background-repeat: no-repeat;
}
@media screen and (max-width: 1100px) {
	#banner{
		    min-height: auto;
	}
    #botonIngresar{
            width: 98px;
            height: 30px;
    }
    #header{
        height: 64px;
    }
    #textoIzquierdaTab{
        padding: 20px;
        font-size: 12px;
    }
    #modalTitle{
        font-size: 2em;
    }
    #tableLogin{
        font-size: 1em;
        font-family: "Questrial", sans-serif !important;
    }
    #modalContent{
        margin: 0% 10%;
    }
    #enviarForm{
        font-size: 1em;
    }
    #contenedorUsuario{
            margin: 15px 30px;
    }
    #tituloSeccion{
        font-size: 2em;
    }
    #botonesjuego {
        text-align: center;
    }
    .botonesJuego{
        margin: 10px;
        padding: 0px 30px;
        font-size: 1em;
    }
    #derecha{
        margin: 60px 0px 0px 0px;
        padding: 10px;
    }
    #tituloNivel1, #tituloNivel2, #tituloNivel3, #tituloNivel4{
            font-size: 1em;
            padding: 0px;
    }
    #nombrenivel1, #nombrenivel2, #nombrenivel3, #nombrenivel4{
        padding: 0px;
    }
    #cantidadActividadesNivel1, #cantidadActividadesNivel2, #cantidadActividadesNivel3, #cantidadActividadesNivel4{
        padding: 0px;
    }
    #botonContinuarNivel1, #botonContinuarNivel2, #botonContinuarNivel3, #botonContinuarNivel4{
            width: 40%;
                padding: 3px;
                margin: 5px 0px 5px 0px;
    }
    .carrusel2{
            width: 15%;
    }
}
#ranking{
    display: none;
    background-image: url(../img/backrank.jpg);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-size: contain;
    margin-top: -24px;
    padding: 0;
    background-position-x: center;
    background-repeat: no-repeat;
}
#puntaje{   
    background-image: url("../img/puntos.jpg");
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 2;
    visibility: hidden;
    cursor: pointer;
    background-size: cover;
}
#juegoIframe{
    border-width: 0px;
    position: absolute;
    margin: 0;
    padding: 0;
}

#juego{   
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 1;
    display: block;
}

#gracias{
    background-image: url(../img/gracias.png);
    position: fixed;
    width: 100%;
    height: 100%;
    margin-top: 0px;
    padding: 0px;
    z-index: 1;
    background-size: contain;
    visibility: hidden;
    background-color: #000;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
}
#camp2{
    background-image: url(../img/camp2.png);
    position: absolute;
    width: 100%;
    height: 100%;
    margin-top: -27px;
    padding: 0px;
    z-index: 1;
    background-size: contain;
    visibility: hidden;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
}

#footImg{
		width: 40%
	}

body{
    font-family: "Questrial", sans-serif !important;
    background-repeat: no-repeat;
    background-size: cover;
	background-image: url("../img/backround.jpg");
    color: #fff !important;
    background-color: #fff;
    overflow-y: scroll; /* has to be scroll, not auto */
}
a{
    text-decoration: none;
}
#trivia{
    margin-top: 10%;
}
#titleTrivia{
    
}
#instrucciones{
    background-image: url(../img/backTerminos.jpg);
	position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background-size: contain;
    background-position-x: center;
    background-color: #000;
    background-repeat: no-repeat;
	z-index: 10;
    visibility: hidden;
}
#terminos{
    position: relative;
    width: 50%;
    height: 45%;
    overflow: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 34%;
}
#juegos{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}
td, #pregunta{
}
#correcto{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #ffffff85;
    background-image: url('../img/correcto.png');
    background-size: cover;
    top: 0;
    visibility: hidden;
}
#incorrecto{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #ffffff85;
    background-image: url('../img/incorrecto.png');
    background-size: cover;
    top: 0;
    visibility: hidden;
}
table { 
    border-spacing: 10px;
    border-collapse: separate !important;
}

#titleTrivia img{
    width: 100%;
    
}
form{
    margin: 0 auto;
    padding: 0px;
    margin-top: 0%;
    border-radius: 21px;
}

input{
    border: solid 0;
    border-radius: 3px;
}

input[type=text], input[type=email], input[type=number], input[name="empresa"], input[name="pais"], input[name="ciudad"]{
        padding: 0px;
    font-size: 1.5em;
    outline: none;
    background-color: #f3f3d300;
    color: #fff;
    text-align: center;
    border-left: 0;
    border-right: 0;
    border-bottom: solid 1px #fff;
    border-top: 0;
    margin-left: 25px;
}
input[type=checkbox]{
    box-sizing: border-box;
    width: 40px;
    margin: 9px;
}


#campo{
    background-image: url(../img/backcampos.png);
    padding: 39px 0 12px 0;
    background-size: cover;
    background-position: bottom;  
}
input[type=submit]{
    background-image: url(../img/continuarInstrucciones.png);
    width: 300px;
    height: 83px;
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0%;
    cursor: pointer;
    background-color: rgb(0,0,0,0);
}
.center{
    text-align: center;
}

.opcion{
    padding: 5px 0;
}

.barra{
    background-color:rgb(152, 196, 236);
    border-radius: 4px;
    padding: 10px;
}

.seleccionado{
    background-color: rgb(33, 90, 143);
    border-radius: 4px;
    color: white;
    padding: 10px;
}

#menu{
    background-color: #eee;
    padding: 10px;
}
#menu ul{
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
    width: 100%;
}
#menu ul li{
    display: inline;
}
#menu ul li a{
    color: #1E69E3;
    text-decoration: none;
}
#menu ul li a:hover{
    color: rgb(227, 109, 30);
    text-decoration: none;
}
.cerrar-sesion{
    float: right;
}

#aviso-movil-horizontal {
    display: none;
}
#aviso{
        display:none; 

}
#aviso img{
    width: 60%;
    top: 30%;
    position: absolute;
    left: 20%;
}
@media only screen and (orientation:landscape) {
    #aviso-movil-horizontal {
        display:none; 
    }
    #wrapper {
        display:block !important;
    }
   
}
@media only screen and (orientation:portrait) {
    
     #wrapper {
        display:none; 
    }
    #aviso-movil-horizontal {
        display:block !important; 
    }
    #v_area{
        display:none !important; 
    }
}
#v_area{
    z-index: 99;
    /*mosca*/
    
    /*endmosca*/
}
#rotar{
    background-image: url(../img/rotatedevice_0.jpg);
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0;
    position: absolute;
    background-size: contain;
    z-index: 10;
    background-position-x: center;
    background-repeat: no-repeat;
    background-color: #000;
}
#botonInstrucciones{
    background-image: url(../img/continuarInstrucciones.png);
    width: 150px;
    height: 40px;
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    margin-top: 12%;
    cursor: pointer;
}
}
#botonInstrucciones:hover{
	background-image: url(../img/continuarInstrucciones2.png);
	
}
#botonInstrucciones2{
    background-image: url(../img/nocontinuarInstrucciones.png);
    width: 150px;
    height: 40px;
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    margin-top: 12%;
    cursor: pointer;
}
}
#botonInstrucciones2:hover{
    background-image: url(../img/nocontinuarInstrucciones2.png);
    
}