:root{
    --azul: #4B729F;
    --letra: white;
    --sombreado: #58D5FF;
    --verde: #1C94B9;
    --rojo:#B4120E;
    --gris:#A0A0A0;
    --azulDash:#65D6FF;
}

body{
    color: var(--letra);
}

@font-face {
    font-family: "landingBold";
    src: url(../fonts/Silkscreen-Bold.ttf);
}

@font-face {
    font-family: "landingRegular";
    src: url(../fonts/Silkscreen-Regular.ttf);
}

@font-face {
    font-family: "dashRegular";
    src: url(../fonts/Inconsolata-Regular.ttf);
}

@font-face {
    font-family: "dashMedium";
    src: url(../fonts/Inconsolata-Medium.ttf);
}

@font-face {
    font-family: "dashBold";
    src: url(../fonts/Inconsolata-Bold.ttf);
}

canvas {
    position: absolute;
    display:block;
    z-index: -10;
    /* border: 2px solid red; */
    width: 100%;
    /* margin-left:0.5%; */
    height: 100vh;
}
#landing{
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    background-attachment: fixed;
    background-image: url('../img/landing/FondoLanding.png');
    font-family: "landingBold";
    text-shadow: 1px 1px var(--sombreado);
}
.amarillo{
    border: 2px solid yellow;
}
.renglon{
    display: flex;
    flex-direction: row;
}

.rinfoGral{
    justify-content: center;
}

.contenidoCentrado{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.derecha{
    justify-content: flex-end;
}
.mismoEspacio{
    justify-content: space-evenly;
}
.centrado{
    justify-content: center;
    align-items: center;
}

.espaciado{
    justify-content: space-between;
}

.redondeado{
    border-radius:50% !important;
}

.redondeado:checked{
    background-color: var(--verde);
    border: 2px solid var(--verde);
}

/* Index.html */

.flex{
    display: flex;
}

.logoDetective{
    width: 70%;
}

.logoEnigma img{
    width: 50%;
}

.imgDetective{
    width: 50%;
}

#detective{
    width: 20%;
    display: none;
}

#queEs{
    width: 75%;
}

.imgObjetivo{
    width: 35%;
}


#lupa{
    display: none;
    width: 30%;
}

#objetivo{
    width: 70%;
}

.imgDetective img,
.imgObjetivo img,
#logoDetective,
#landingFlujo,
.landingCompleto{
    width: 100%;
}

#landingDuracion{
    width: 80%;
    margin-left: 10%;
}

.flujo{
    width: 10%;
}

.flujo p{
    text-align: center;
    margin-top: 5%;
    font-size: 1.5vh;
}

.unTercio{
    width: calc(100%/3);
}

.distribucion{
    width: calc(100%/4);
}

.landingDistribucion{
    width: 50%;
    margin-left: 25%;
}

.distribucion p{
    margin-top: 10%;
    text-align: center;
    text-transform: uppercase;
}

.landingCompartir{
    height: 20vh;
    background-image: url('../img/landing/SVG/Cuadro_esta_experiencia.svg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.landingCompartir h1{
    font-size: 4vh;
}

.modal-content{
    background-color: var(--azul);
}

.fade{
    /* opacity: 0.5; */
    background-color: rgba(0, 0, 0, 0.9);
}

#TyC, #avisoPrivacidad{
    position: relative;
    right: 15px;
    bottom: 1px;
}

.justificado{
    text-align: justify;
}
    /* #formulario{
        display: block;
    } */

.avisos{
    text-decoration: none;
    text-shadow: 1px 1px var(--sombreado);
}

#estoyListo{
    width: 50%;
}

.puntos{
    width: 20%;
    height: 1vh;
    position: relative;
    display: flex;
    justify-content: center;
    /* border: 2px solid blue; */
    margin-top: 5%;
}

/* Programa de entrenamiento */

#fondoPE{
    width: 95%;
    margin-top: 8%;
}
.seccionRespuestas{
    position: absolute;
    bottom: 12.5%;
    right: 7%;
    width: 42%;
}
.respuesta{
    margin-top: 12.5px;
    margin-left: 20px;
    box-sizing: border-box;
    text-align: left;
}
.seccionPreguntas{
    width: 40%;
    height: 30%;
    position: absolute;
    left: 7.5%;
    top:67.5%;
    text-align: justify;
    background-image: url('../img/programaEntrenamiento/PEBackPregunta.png');
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: auto;
    display: flex;
}

#preguntasTexto{
    width: 90%;
}

.contenedorImagenes{
    width: 80%;
    height: 45%;
    position: absolute;
    top: 21%;
    left: 9%;
}

#peTitulo{
    position: absolute;
    left: 25%;
    top: -2px;
    /* border: 2px solid red; */
    width:50%;
}

.seccionImagenes{
    width: 100%;
    height: 80%;
    top: 10%;
    /* border: 2px solid red; */
    position: absolute;
    /* top: 30%; */
    /* left: 2.5%; */
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.anchoRespuestas{
    width: 50%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url('../img/programaEntrenamiento/PE-Boton.png');
    cursor: pointer;
}

.izquierda{
    position: absolute;
    left: 16.5vw;
}

/* .imagenesPE{
    background-color: transparent;
    /* border: 2px solid red; */
    /* height: 75vh; */
    /* width: 90vw !important; */
/* } */

.imagenZoom{
    /* border: transparent; */
    background-color: transparent;
    width: 67vw;
}

.cerrar{
    background-color: white;
}

#validaInput{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 50%;
    background-image: url('../img/programaEntrenamiento/Cuadroprograma.svg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;

}
#validaInput label{
    margin-top: 0%;
}

#passPE{
    width: 50%;
    margin-left: 25%;
}

#iniciarModal{
    height: 50%;
    background-image: url('../img/programaEntrenamiento/Cuadroprograma.svg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border: 2px solid transparent;
}

#btnIniciar{
    margin-top: 10%;
}

.botonesPE{
    display: flex;
    justify-content: flex-end;
    margin-top: 2.5px;
}

#btnAtrasPE{
    margin-right: 5px;
}

#juegoTerminado{
    /* border: 2px solid red; */
    margin-top: 10%;
}

/* Notificaciones.html */
.botonesMensaje{
    position: absolute;
    bottom: 6%;
    width: 85%;
    left: 7.5%;
    display: flex;
    justify-content: flex-start;
}
#btnSiguiente{
    margin-left: 5px;
}
#btnAnterior{
    margin-right: 5px;
}
.btnRojo{
    background-color: var(--rojo);
    color: var(--letra);
}
.btnGris{
    background-color: var(--gris);
    color: var(--letra);
    font-size: smaller;
}

.btnAzul{
    background-color: var(--azulDash);
    color: rgba(1, 17, 77,0.75);
}

#btnNotificaciones{
    position: relative;
    height: 100%;
    background-image: url('../img/notificaciones/mensaje_azul.png');
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
}

/* #btnNotificaciones span{
    width: 100%;
    text-align: center;
    text-shadow: 0px 0px 50px #65D6FF,
                        0px 0px 100px #65D6FF,
                        0px 0px 150px #65D6FF,
                        0px 0px 200px #65D6FF;
    font-size: 5.5vh;
    animation: animate 1s linear 4;
} */

/* @keyframes animate {
    from{
        opacity: 0;
        filter: hue-rotate(0deg);
    }
    to{
        opacity: 1;
        filter: hue-rotate(360deg);
    }
} */

#numeroDeMensajes{
    top: -17.5px;
    left: 75%;
    position: absolute;
    background-color: var(--rojo);
    border-radius: 50%;
    padding: 0px 7px;
}
.fondoMensaje{
    background-color: transparent;
    background-image: url('../img/notificaciones/DashboardMensajes.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 90vh;

}
#contenidoDelMensaje{
    position: absolute;
    top: 10%;
    left: 7.5%;
    width: 85%;
    /* margin-left: 2.5%; */
    /* padding: 3%; */
    height: 75%;
    font-size: smaller;
}
.posicionBoton{
    position: absolute;
    right: 7.5%;
    top: 5.5%;
    z-index: 10;
}
#tituloModal{
    position: absolute;
    width: 85%;
    top: 9%;
    left: 7.5%;
}
.sinBordes{
    border: none;
}
.fechaMensaje{
    text-align: end;
}

.medioMenu{
    height: 50%;
    position:relative;
}

#rescateObras{
    width: 30%;
    margin-left: 70%;
    margin-top: 2%;
}

/* CasosSinResolver.html */

.renglonCasos > .column {
  padding: 0 8px;
}

.renglonCasos{
    display: flex;
    width: 90%;
    margin: auto;
    justify-content: center;
    flex-wrap: wrap;
}

.column {
  width: calc(100%/4);
  margin-top: 10px;
}

/* The Modal (background) */
.modalCasosSinResolver {
  display: none;
  position:fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.9);
  /* border: 2px solid gold; */
}

/* Modal Content */
.modalContentCasosSinResolver {
  position: relative;
  background-color: transparent;
  margin: auto;
  padding: 0;
  width: 100%;
  height: 80vh;
  /* border: 2px solid red; */
  max-width: 1200px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none;
}

/* Next & previous buttons */
.previo,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 1s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}
.previo{
    left: 50px;
}
/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}


.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

.column img{
    width: 90%;
    margin-left: 5%;
}

.imagenModal{
    position: absolute;
    width: 55%;
    height: 100%;
    margin-left: 22.5%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto 100%;
    /* border: 2px solid red; */
}

#casosNormales1{
    background-image: url('../img/casosSinResolver/Casos1.png');
}

#casosNormales2{
    background-image: url('../img/casosSinResolver/Casos2.png');
}

#casosNormales3{
    background-image: url('../img/casosSinResolver/Casos3.png');
}

#casosNormales4{
    background-image: url('../img/casosSinResolver/Casos4.png');
}

#casosNormales5{
    background-image: url('../img/casosSinResolver/Casos5.png');
}

.cursor{
    cursor: pointer;
}

.btnZoom{
    position: absolute;
    bottom: 0;
    right: 0;
}

.btnQuitarZoom{
    position: absolute;
    bottom: 0;
    left: 0;
}

#diploma{
    width: 50%;
}

/* Boceto.html */
.dashDetective{
    width: 90%;
    margin: auto;
    height: 100vh;
    position: relative;
    background-image: url('../img/dashDetective/fondoDash.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: rgba(1, 17, 77,0.75);
    font-family: "dashBold";
}
.absolut{
    position: absolute;
}

#seccionCasosSinResolver{
    width: 30%;
    border: 2px solid var(--azulDash);
    top: 7.5%;
    left: 12.5%;
    height: 40%;
}

#animationCasosSinResolver{
  width: 125%;
}
#seccionProgramaEntrenamiento{
  /* border: 2px solid aqua; */
    top: 24%;
    left: 45%;
    width: 30%;
    height: 35%;
}

#seccionBaseDeDatos{
    border: 2px solid var(--azulDash);
    top: 55%;
    left: 12.5%;
    width: 30%;
    height: 40%;
}

#seccionMapa{
    border: 2px solid var(--azulDash);
    top: 55%;
    left: 45%;
    width: 30%;
    height: 40%;
}

#mapaParis{
    height: 65%;
    background-image: url('../img/mapa/mapa_paris.png');
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
}

#seccionPerfilDeBusqueda{
    border: 2px solid var(--azulDash);
    top: 5%;
    left: 77.5%;
    width: 20%;
    height: 60%;
    overflow: hidden;
}

#seccionDatosEmergencia{
    border: 2px solid var(--azulDash);
    width: 20%;
    left: 77.5%;
    height: 25%;
    top: 70%;
}

.paddingSecciones{
    padding: 5px;
}

.anchoIzq{
    width: 5.5%;
    height: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
}

#logoDashDetective{
    top: 2.75%;
    left: 42.5%;
    /* border: 2px solid brown; */
    width: 10%;
    margin-left: 12.5%;
}

#iconoMensajes{
    width: 75%;
    height: 12.5%;
    margin-left: 12.5%;
    top: 15%;
    /* border: 2px solid blueviolet; */
}


#iconoVisibilidad{
    width: 75%;
    margin-left: 12.5%;
    top: 15%;
    /* border: 2px solid #B4120E; */
}

#logoIGB{
    width: 100%;
}


/* Peril de búsqueda */
#contenidoPerfilOn, #contenidoPerfilOff{
    height: 100%;
}


.transparente{
    background-color: transparent;
}

#resultadoBusqueda{
    width: 50%;
    margin-left: 12.5%;
    margin-bottom: 7.5% !important;
    /* height: 60%; */
    /*background-image: url('../img/perfilDeBusqueda/perfil.png');*/
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto 100%;
    display:block;
    margin:auto;
}

#imagenModalPerfilBusqueda{
    width: 55%;
}

#datoDeBusqueda, #coordenadasMapa{
    border: 2px solid var(--azulDash);
}

.form-control{
    border-radius: 0%;
    background-color: transparent;
    color: white;
    text-align: center;
}

.form-control:focus{
    background-color: transparent;
    color: white;
}

.btn{
    border-radius: 0%;
}

.anchoIP{
    width: 40%;
    margin-right: 5%;
    margin-left: 5%;
    border: 2px solid var(--azulDash);
}

/* Vistas ocultas */
#vistaOcultaCasosD, #vistaOcultaCasosP{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.transparente{
    background-color: transparent;
}

.accesoCasos{
    width: 80%;
    height: 100%;
}

.alturaCasos{
    height: 90vh;
}

/* Mapa de geolocalización */

.botonesTabs{
    display: flex;
    justify-content: space-evenly;
}

.botonesTabs li{
    font-size: 1.5vh;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff;
  background-color: #999;
}

.nav-link{
    color: #fff;
}
.nav-link:hover, .nav-link:focus {
    color: #999;
}

/* .ajustado{
    height: 10vh;
    overflow: auto;
} */

.renglonModalGeo{
    display: flex;
    position: relative;
    height: 100vh;
    background-color: rgba(1, 17, 77,0.5);
}

#mapaGeoParis{
    overflow: hidden;
}

.posicionIzq{
    width: 25%;
    position: absolute;
    left: 2.5%;
    height: 99%;
    /*background-color: var(--azul);*/
    border: 2px solid #6ed8fa;
    background-image: url("../img/Subfondo.png");
    /* border-radius: 12.5%; */
}
.posicionDer{
    width: 70%;
    position: absolute;
    left: 27.5%;
    height: 99%;
    border: 2px solid rebeccapurple;
}

.alturaTab{
    height: 87.5vh;
    background-image: url("../img/Subfondo.png");
}

.alturaTab img{
    width: 100%;
    height: 100%;
}

/* barcode container */
.anim-box{
  transition: transform .6s ease-out;
}

/* animated laser beam */
.scanner {
  width: 100%;
  height: 3px;
  background-color: red;
  opacity: 0.7;
  position:relative;
  box-shadow: 0px 0px 8px 10px rgba(170, 11, 23, 0.49);
  top:50%;
  animation-name: scan;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  /*animation-play-state: paused;*/
  animation-play-state: running;
}

@keyframes scan {
  0% {
    box-shadow: 0px 0px 8px 10px rgba(170, 11, 23, 0.49);
    top: 50%;
  }
  25% {
    box-shadow: 0px 6px 8px 10px rgba(170, 11, 23, 0.49);
    top: 5px;
  }
  75% {
    box-shadow: 0px -6px 8px 10px rgba(170, 11, 23, 0.49);
    top: 98%;
  }
}


/* Mapa de hackeo */
#puntoCoordenadas{
    position: relative;
    top: 15px;
    font-weight: bolder;
    font-size: larger;
}
.item1Hack{
    width: 100%;
}

.item2Hack{
    width: 10%;
}

.azul{
    border: 2px solid var(--azulDash);
}

/* Envío de datos */
.tamLetra{
    font-size: smaller;
}

/* Enigma.html */
#enigma{
    position: absolute;
    width: 90%;
    margin-left: 5%;
    height: 100%;
    /* border: 2px solid red; */
}

#partePrincipal{
    position: absolute;
    width: 50%;
    margin-left: 25%;
    height: 100%;
}

#partePrincipal img{
    width: 80%;
    margin-left: 10%;
}

#boton1Enigma img, #boton2Enigma img{
    width: 100%;
    /* height: 100%; */
}
#boton1Enigma{
    position: absolute;
    width: 25%;
    top: 60%;
    height: 40%;
}

#boton2Enigma{
    position: absolute;
    width: 25%;
    height: 40%;
    top: 60%;
    right: 0%;
}

/* Manual de pistas */

#manualPistas{
    /* background-color: rgba(1, 17, 77,0.75); */
    background-image: url(../img/manual/FondoLandingAlpha.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 75%;
    height: 100vh;
    margin: auto;
    overflow: auto;
    scroll-behavior: smooth;
}

.pistasOcultas{
    display: none;
    width: 75%;
    margin-left: 12.5%;
}
.encabezadoPistas{
    text-decoration: none;
    color: white;
}
.encabezadoPistas:hover{
    cursor: pointer;
    color: #65D6FF;
}
.accordion-item,.accordion-button{
    background-color: transparent !important;
}
.accordion-collapse, .collapse, .accordion-header, .accordion-item{
    border: none !important;
}

.accordion-item{
    text-align: center;
}
.accordion-button{
    color: white;
    width: 90%;
    margin-left: 5%;
}

.anchoInicial{
    width: 90%;
    margin-left: 5%;
    text-align: justify;
}

.unTercio  .ultimaFila{
    width: 40%;
    margin-left: 30%;
}
/*
.unTercio  .ultimaFila{
    width: 40%;
    margin-left: 30%;
} */

.textoUltimaFila{
    text-align: center;
}

.renglonUltimaFila{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.renglonUltimaFila  .unTercio{
    width: calc(100%/3);
}
#compensar1{
    margin-top: 15%;
}

#compensar2{
    margin-top: 8%;
}

#compensar3{
    margin-top: 3%;
}

h5{
    font-size: 2.5vh;
}

.infoGeneral{
    margin-bottom: 2.5vh;
}
#leyendaGira{
    display: none;
}

.manualLanding{
    font-family: "landingRegular";
}

.manualDash{
    font-family: "dashRegular";
}

/* Formato del fondo de pantalla en dispositivos pequeños */
@media screen and (max-width: 800px) {
    #giraTuPantalla{
        height: 100vh;
        width: 100%;
        background-color: white;
        position: absolute;
        z-index: 2;
        background-image: url('../img/aviso.png');
        background-position: center center;
        background-repeat: no-repeat;
        position: relative;
    }
    #leyendaGira{
        color: black;
        position: absolute;
        width: 50%;
        text-align: center;
        left: 25%;
        bottom: 10px;
        display: block;
    }
    .dashDetective{
        display: none;
    }
}

@media screen and (min-width: 1367px) {
    #contenidoDelMensaje{
        font-size: medium;
    }
    #numeroDeMensajes{
        font-size: x-large;
        top: -22.5px;
    }
    #resultadoBusqueda{
        width: 70%;
        margin-bottom: 10%;
    }
    #imagenModalPerfilBusqueda{
        width: 100%;
    }
    #btnIniciar{
        margin-top: 15%;
    }
    #logoDashDetective{
        top:5%;
    }
    #rescateObras{
        width: 70%;
        margin-left: 15%;
        margin-top: 5%;
    }
    .sitios div{
        margin-top: 5%;
    }
    #validaInput label{
        margin-top: 10%;
    }
    #diploma{
        width: 60%;
    }
    #partePrincipal img{
        width: 100%;
        margin: 0;
    }
    .alturaTab{
        height: 85vh;
    }
}

/* Landing en Dispos móviles */
@media screen and (min-width:280px) and (max-width: 450px) {
    #landing{
        background-repeat: repeat-y;
    }
    .imgDetective{
        display: flex;
        flex-direction: row;
    }
    .espacioSVG{
        display: none;
    }
    #detective{
        display: block;
    }
    #queEs{
        width: 75%;
    }
    #lupa{
        display: block;
    }
    .flujo p{
        text-align: center;
        margin-top: 5%;
        font-size: 0.75vh;
    }
    .distribucion p{
        margin-top: 5%;
        text-align: center;
        text-transform: uppercase;
        font-size: 1vh;
    }
    .landingCompartir{
        height: 5vh;
    }
    .landingCompartir h1{
        font-size: 1.15vh;
    }
    .unTercio p{
        font-size: 0.75vh;
    }
    .avisos{
        font-size: 1vh;
    }
    .redondeado{
        font-size: 1vh;
    }
    #TyC, #avisoPrivacidad{
        position: relative;
        right: 5px;
    }
    .infoGeneral{
        font-size: 2vh;
        margin-bottom: 10px;
    }
}