/* Posicionamos los botones en la posicion izquierda y derecha */
.img_mapaModal{
    margin: 0 20%;
}
.mostrar{
    padding-top: 0;
    padding-bottom: 0;
}

.mostrar_ed1 {
    position: absolute;
    top:18%;
    left:47%;
}
.mostrar_ed2 {
    position: absolute;
    top:16%;
    left:63%;
}
.mostrar_ed3 {
    position: absolute;
    top:24%;
    left:44%;
}
.mostrar_ed4 {
    position: absolute;
    top:31%;
    left:37%;
}
.mostrar_ed5 {
    position: absolute;
    top:33%;
    left:65%;
}
.mostrar_ed6 {
    position: absolute;
    top:42%;
    left:55%;
}
.edificio_btn{
    color: white;
    background: rgba(20, 20, 20, .6);
}
.edificio_btn:hover{
    color: white;
    background: rgba(20, 20, 20, 1);
}
.mapa{
    max-height: 90vh;
    margin: 0 auto;
}
/*.contenedor_tableta{
    position: relative;
    height: 100%;
    max-height: 90vh;
    margin: 0px auto;
    padding: 0px 0px;
    border: solid 1px white;
    z-index: 1;

}
.contenedor_menu{
    position: absolute;
    border: solid 1px white;
    z-index: 2;
    margin: 0px 0px;
    padding: 0px 0px;
    top: 85%;
    left: 15%;


}*/
.tutorial_container{
    -webkit-transition:all linear 0.5s;
    transition:all linear 0.5s;
    position: absolute;
    height: 40vh;
    width: 100%;
    opacity:1;
    z-index: 106;
}
.tutorial_container.ng-hide{
    opacity: 0;
}
.dra_fierro{

    position: absolute;
    left: 15%;
    top: 13%;
    z-index: 106;
}
.info_tableta_dra{
    position: absolute;
    left: 36%;
    top: 13%;
    width: 48%;
    z-index: 106;
    font-size: 1.5vw;
}
.tableta{
    position: relative;
    max-height: 90vh;
    margin: 0 auto;
    z-index: 1;

}
.fondo_tutorial_tablet{
    height: 90vh;
    width: 100;
}
.pantalla_container{
    -webkit-transition:all linear 0.5s;
    transition:all linear 0.5s;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    max-height: 90vh;
    height: 89%;
    top: 5.5%;
    z-index: 104;
    opacity: 1;

}
.pantalla_container.ng-hide{
   opacity: 0;
}
.tablet_pantalla{
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    height: 100%;
    z-index: 104;

}
.btn_cerrar{
    position: absolute;
    left: 12%;
    top: 2%;
    z-index: 105;
}
.img_btn_cerrar{
    width: 80%;
}
.btn_siguiente{
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    right: 11%;
    top: 20%;
    z-index: 105;
}
.btn_regresar{
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 11%;
    top: 20%;
    z-index: 105;
}

.contenedorBotones{
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 79%;
    height: 20vh;
    width: 60vw;
    z-index: 105;
}
.menu_dock{
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 25%;
    z-index: 105;
}
.guia{
    position: absolute;
    left: 16%;
    z-index: 105;
    cursor: pointer;
}
.nota{
    position: absolute;
    left: 26%;
    z-index: 105;
    cursor: pointer;
}
.foto{
    position: absolute;
    left: 36%;
    z-index: 105;
    cursor: pointer;
}
.mini_mapa{
    position: absolute;
    left: 46%;
    z-index: 105;
    cursor: pointer;
}
.ayuda{
    position: absolute;
    left: 56%;
    z-index: 105;
    cursor: pointer;
}
.dicc{
    position: absolute;
    left: 66%;
    z-index: 105;
    cursor: pointer;
}
.contenedorGlosario{
    position: absolute;
    top: 15%;
    width: 88%;
    height: 50vh;
    z-index: 106;
    overflow: auto;
    overflow-x: hidden;

}
.buscadorGlosario{
    position: absolute;
    width: 250px;
    right: 15%;
    top: 2%;
    z-index: 107;
}
.glosarioPalabra{
    font-size: 18px;
    font-weight: bold;
}
.glosarioDefinicion{
    padding: 0px 30px;
}
.glosario{
    position: relative;
    left: 25%;
    top: 15%;
    width: 500px;
    margin: 0px;
    padding: 0px;
    z-index: 106;
    color: black;
    font-size: 16px;
    list-style: none;
}

.herr{
    position: absolute;
    left: 76%;
    z-index: 105;
    cursor: pointer;
}
.microscopio{
    position: relative;
    width: 78%;
    height: 50vh;
    z-index: 106;
    margin-left: auto;
    margin-right: auto;
    left: 5%;
}



.indicador_mapa{
    top:30%;
    padding-left:20%;
    position:absolute;
    z-index: 110;
}
@media screen and (max-height: 575px) {
    .btn_cerrar{
        right: 19.9%;
    }
    .btn_siguiente{
        right: 19.9%;
    }
    .btn_regresar{
        left: 19.9%;
    }
}
@media screen and (max-height: 500px){
    .btn_cerrar{
        right: 25%;
    }
    .btn_siguiente{
        right: 25%;
        top:65%;
    }
    .btn_regresar{
        left: 25%;
        top:65%;
    }
}
@media screen and (max-height: 410px){
    .btn_cerrar{
        right: 30%;
    }
    .btn_siguiente{
        right: 30%;
    }
    .btn_regresar{
        left: 30%;
    }
}
@media screen and (max-height: 330px){
    .btn_cerrar{
        right: 35%;
    }
    .btn_siguiente{
        right: 35%;
    }
    .btn_regresar{
        left: 35%;
    }
}

.contenedorMapa{
    position: absolute;
    height: 90vh;
    width: 100%;
    border: 1px solid white;
    overflow: hidden;
}

.contenedorImagenMapa{
    position: absolute;
    width: 100%;
}
#imagenMapa{
    position: absolute;
    left: 0;
    top: 0;
}

.mapaLRCanvas{
    /*background: url('../img/piso-cuevano-LR-fondo-comp6.png');*/
    background-repeat: no-repeat;
    background-position: 0 0;
}
.detallesLR{
    position: absolute;
    left: -2000px;
    top: -2720px;
}
#idMapaCanvas{
    position: absolute;
    left: -2000px;
    top: -2720px;
}

.contenedorNPCS{
    position: absolute;
    left: -2000px;
    top: -2720px;
}
.rio{
    position: absolute;
    left: -2000px;
    top: -2720px;
    z-index: 20;
}
.lagoContainer{
    position: absolute;
    left: -2000px;
    top: -2720px;
}
.lago{
    position: absolute;
    left: 2937px;
    top: 1133px;
    z-index: 1;
}
.entrevistable{
    background: url('../img/talk1.png');
    background-repeat: no-repeat;
    background-position: 0px 0px;
}
.entrevistable:hover{
    background: url('../img/talk2.png');
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

#idJuliaV{
    position: absolute;
    padding: 35px 10px;
    left: 1520px;
    top: 1820px;

}

#idMargaritaV{
    position: absolute;
    padding: 35px 10px;
    left: 710px;
    top: 1650px;
}
#idMaestraE{
    position: absolute;
    padding: 35px 10px;
    left: 845px;
    top: 1560px;
    z-index: 21;
}
#idJulianS{
    position: absolute;
    padding: 35px 10px;
    left: 3320px;
    top: 2630px;
}
#idJuanS{
    position: absolute;
    padding: 35px 10px;
    left: 2190px;
    top: 2850px;
}
#idIsabelJ{
    position: absolute;
    padding: 35px 10px;
    left: 4535px;
    top: 3190px;
}
#idRicardoJ{
    position: absolute;
    padding: 35px 10px;
    left: 940px;
    top: 1725px;
}
#idLuisS{
    position: absolute;
    padding: 35px 10px;
    left: 4370px;
    top: 2380px;
}
#idJoseS{
    position: absolute;
    padding: 35px 10px;
    left: 1800px;
    top: 1600px;
    z-index: 21;
}
#idMagdalenaA{
    position: absolute;
    padding: 35px 10px;
    left: 3150px;
    top: 3020px;
}
#idSalvadorJ{
    position: absolute;
    padding: 35px 10px;
    left: 2990px;
    top: 2915px;
}
#idSilverioS{
    position: absolute;
    padding: 35px 10px;
    left: 2440px;
    top: 2110px;
}
#idRosaliaS{
    position: absolute;
    padding: 35px 10px;
    left: 3900px;
    top: 2960px;
}
#idGerardoT{
    position: absolute;
    padding: 35px 10px;
    left: 2750px;
    top: 1740px;
}
#idPadreP{
    position: absolute;
    padding: 35px 10px;
    left: 2840px;
    top: 2140px;
}
#idAlejandroASDF{
    position: absolute;
    padding: 35px 10px;
    left: 1680px;
    top: 2160px;
}
#idDiegoB{
    position: absolute;
    padding: 35px 10px;
    left: 2960px;
    top: 2380px;
}
#idSamuelM{
    position: absolute;
    padding: 35px 10px;
    left: 2640px;
    top: 2715px;
}
#idMatiasC{
    position: absolute;
    padding: 35px 10px;
    left: 3400px;
    top: 2080px;
}
#idEvaA{
    position: absolute;
    padding: 35px 10px;
    left: 3150px;
    top: 1845px;
}


.caraNPC{
    margin: 0px;
    padding: 0px;
    display: inline-block;
    float: left;
}
.preguntas{
    list-style: none;
    margin:0px 30px;
    padding: 0px;
    width: 400px;
    display: inline-block;
}
.preguntas a{
    text-decoration: none;
    color: black;
}

.preguntaClass:hover{
    background-color: #FF8000;
    color: white;
}
.preguntaClass.ng-click-active{
    background-color: #D56A00;
    color: white;
}
.activeQ{
    background-color: #D56A00;
    color: white;
}



.mapaLR{
    margin: 0px;
    padding: 0px;
    top: 0;
    width: 100%;
    height: 90vh;
    overflow: hidden;

}
#idMapa{
    margin: 0px;
    padding: 0px;
    background: url('../img/piso-cuevano-LR-coll.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size:450%;
    overflow: hidden;
}

.jugador{
    height:50px;
    width:30px;
    position:absolute;
    left: 450px;
    top: 280px;
    overflow: hidden;

}

#idJugador{
    /*background-image: url('../img/sprites/Nino1.png');*/
    background-repeat: no-repeat;
/*El primer numero avanza de 30 en 30 positivo y el segundo de 50 en 50 negativo (x,y)*/
    background-position: 0 -50px;
    overflow: hidden;
}

.entrevistasTerminadas{
    -webkit-transition:all linear 0.5s;
    transition:all linear 0.5s;
    position: absolute;
    top: 5px;
    left: 5px;
    width: 250px;
    color: yellow;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    font-size: 20px;
    padding-left: 5px;
    padding-right: 5px;
    background: rgb(122,122,122);
    background: rgba(122,122,122,0.5);
    border-radius: 5px;
    text-align: justify;
    z-index: 22;
}
.entrevistasTerminadas.ng-hide{
    opacity: 0;
}
.entrevistasTerminadas2{
    -webkit-transition:all linear 0.5s;
    transition:all linear 0.5s;
    position: absolute;
    top:5%;
    text-align: justify;
    z-index: 22;
}
.entrevistasTerminadas2.ng-hide{
    opacity: 0;
}
#idMisionTerminada{
    position: absolute;
    left: 2400px;
    top: 3030px;
}
.textoGuia {
    margin-left:20%;
    margin-right:15%;
    color:white;
    position: relative;
    top: 15px;
    z-index:105;
    text-shadow: 3px 3px 2px #696;
}

.sinFH {
    top: 40%;
}

#mapFooter{
    /*position:fixed;
    bottom:12%;*/
    z-index: 120;
    top:86%;
}
.tabletDirective{
    position: relative;
    z-index: 100;
}
.tabletGuia{
    overflow-y:auto;
    /*height:337px;*/
    height: 360px;
    width:  98%;
}
#muestra_arriba_tablet{
    background: url('../img/muestra_no.png');
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 100%;
}
#muestra_segunda_antes_rio_tablet{
    background: url('../img/muestra_no.png');
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 100%;
}
#muestra_tercera_antes_rio_tablet{
    background: url('../img/muestra_no.png');
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 100%;
}

#muestra_puente_tablet{
    background: url('../img/muestra_no.png');
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 100%;
}
#muestra_terreno_entrada_tablet{
    background: url('../img/muestra_no.png');
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 100%;
}
#muestra_cerca_rio_tablet{
    background: url('../img/muestra_no.png');
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 100%;
}
#muestra_lago_tablet{
    background: url('../img/muestra_no.png');
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 100%;
}
#muestra_basura_tablet{
    background: url('../img/muestra_no.png');
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 100%;
}
#muestra_casa_tablet{
    background: url('../img/muestra_no.png');
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 100%;
}
#muestra_panteon_tablet{
    background: url('../img/muestra_no.png');
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 100%;
}
#muestra_posada_tablet{
    background: url('../img/muestra_no.png');
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 100%;
}
#muestra_armeria_tablet{
    background: url('../img/muestra_no.png');
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 100%;
}
#muestra_casas_abajo_tablet{
    background: url('../img/muestra_no.png');
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 100%;
}
#muestra_ultima_tablet{
    background: url('../img/muestra_no.png');
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 100%;
}
.muestra{
    position: relative;
    display: inline-block;
    padding: 9% 9%;
    margin: 1px 1px;
    height: 30%;
    width: 15%;
}

.muestraText{
    position: absolute;
    font-weight: bold;
    color: white;
    width: 80%;
    left: 15%;
    top: 75%;
    text-align: center;
    text-shadow: -1px -1px black;
}

#fondoBlancoCreditos{
    position: absolute;
    background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
    background-size: cover;
    background-image: url('/modules/alumnos/img/creditos_fondo.jpg');
    left: 0;
    top: 0;
}