body {
    background-color: #ececec;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
/* CSS BANNER */
#banner {
    background-color: #142d4c;
    height: 13vh;
    margin: -8px;
}

#banner img {
    margin: 4px;
    height: 12vh;
    width: 6vw;
}

#logoUsuario {
    position: relative;
    left: 85vw;
}

/*Fin ccs banner */
/* CSS FOOTER */
footer {
    margin-top: 50px;
    background-color: #142d4c;
    color: #ececec;
    padding: 10px;
    text-align: center;
}

.footerClase {
    margin-bottom: 20px;
}
/*Fin ccs FOOTER */
/*Mostrar Pistas una a una*/
.pistas-container{
    position: absolute;
    margin-top: 10px;
    left: 500px;
    height: 500px;
    width: 800px;
    text-align: center;
}
.pista1{
    color: black;
    margin: 7px;
}
.pista{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, auto);
    grid-row-gap: 10px;
    border: solid 1px;
    background-color: #6783a5;
    margin-top: 10vh;
    margin-left: 5vw;
    margin-right: 5vw;
}
#titulo{
    text-align: center;
    grid-column: 1 / 4;
}
.contexto{
    text-align: center;
    border-radius: 5%;
    padding: 20px;
    grid-column: 1 / 4 ;
    grid-row: 2 ;
    width: 80vw;
    margin-left: 3vw;
    /* min-width: 15vw;
    max-width: 45vw;
    margin-left: 2vw;
    min-width: 35vh;
    height: 35vh; */
    max-height: 60vh;

}

.imagen{
    position: relative;
    top: 150px;
    right: 400px;
    margin-top: 15vh;
    grid-row: 3;
    margin-left: 20vw;
    padding: 50px;
}
#pensando{
    position: relative;
    top: 16vh;
    text-align: center;
    color: white;
}
.botones{
    font-size: 22px;
    height: 8vh;
    width: 10vw;
    margin: 3vh;
}
.botones:hover{
    background-color: #ececec;
}
#posicionVolver{
    grid-column: 1;
    grid-row: 4;
    margin-left: 2vw;
}
#posicionSiguiente{
    text-align: right;
    margin-right: 7vw;
    grid-column: 3;
    grid-row: 4;
}

.tabla{
    /* display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(6, 5vh   ); */
    display: flex;
    flex-direction: row;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    padding: 10px;
    
}
#pintar{
    background-color: #7b8fa8;
}
/*Filas columna 1 */
.columnas{
    display: flex;
    flex-direction: column;
    border: solid 1px;
    
}
.filas{
    display: flex;
    flex-direction: row;
    border: solid 1px; 
    box-sizing: border-box;
    padding: 10px;
    background-color: #ececec;
}   
/* Estitlos sospechosos*/
#sospechosos {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 15px;
    display: flex;
    margin-left: 13vw;
    margin-top: 4vh;
    padding: 10px;
}

.contenedorSospechosos {
    display: flex;
    flex-direction: column;
    margin: 20px;
}

.sospechososLabel {
    margin: 20px;
    position: relative;
    top: 18.3vh;
    right: 6vw;
}

.sospechososImagen {
    width: 120px;
    height: 170px;
}

.sospechososRadio {
    position: relative;
    right: 6vw;
    top: 20vh;
    flex-direction: row;
    height: 20px;
    width: 20px;
}
/* HAcer las casillas  dinamicas*/
.marcar {
    background-repeat: no-repeat;
    background-position: center center;
}
/*Boton ver sopechosos*/
.linkSospechoso {
    margin-top: 10px;
}
/*CAja de pdf*/
#SIUUU{
   position: relative;
   left: 700px;
   top:700px;
   height: 30px;
    width: 200px;
}