@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');
/* Reglas Generales */

h1 {
    font-family: 'Roboto Condensed', sans-serif;
    color: white;
}

h2 {
    font-family: 'Roboto Condensed', sans-serif;
    color: white;
}

h3 {
    font-family: 'Roboto Condensed', sans-serif;
    color: white;
}


a {
    font-family: 'Roboto Condensed', sans-serif;
    color: white;
    text-decoration: none;
    font-size: 1.3em;
}

p {
    font-family: 'Montserrat', sans-serif;
    color: white;
}


/* 1ra parte de css para celulares, mobile first */

.fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}

.fullscreen-bg__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (min-aspect-ratio: 9/16) {
    .fullscreen-bg__video {
        width: 100%;
        height: auto;
    }
}

@media (max-aspect-ratio: 9/16) {
    .fullscreen-bg__video {
        width: auto;
        height: 100%;
    }
}

html {
    height: -webkit-fill-available;
}

body {
    min-height: 100vh;
    display: flex;
    align-content: center;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

.ayuda {
    display: flex;
    justify-content: center;
    list-style-position: none;
    margin-left: 1em;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    flex-direction: column;
}

.logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

header ul {
    text-decoration: none;
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    list-style-position: none
}

header ul li a {
    text-decoration: none;
    align-items: center;
    text-align: center;
    box-shadow: 1px 2px 4px grey;
    background: rgba(2, 2, 2, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-weight: 600;
    margin-bottom: 0.5em;
    width: 13em;
    height: 2.2em;
    margin-right: 1em;
    list-style-position: none;
}

.volver {
    align-items: center;
    text-align: center;
    list-style-type: none;
    box-shadow: 1px 2px 4px grey;
    background: rgba(2, 2, 2, 0.2);
    min-width: 90%;
    font-size: 1em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 1em;
    margin-bottom: 0.5em;
    height: 2.2em;
}

main {
    box-shadow: 1px 2px 4px grey;
    background: rgba(2, 2, 2, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 1.5em;
    padding: 2em;
}

.iframe-container {
    overflow: hidden;
    padding-top: 56.25%;
    /* 16:9*/
    position: relative;
    margin: 0;
}

.iframe-container iframe {
    border: 0;
    width: 100%;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    min-width: 80%;
}

footer {
    margin: 3em;
    text-align: center;
    font-size: 10px;
}

footer p {
    color: black;
    margin-bottom: 80px;
    font-size: 10px;
}

.parrafo_transportes {
    display: block;
    float: left;
    margin: 0.5em;
}

.iconos_transporte {
    max-height: 3em;
    margin-right: 0.5em;
    vertical-align: middle;
}

.parrafo_transportes p {
    display: inline-block;
    align-content: center;
    margin: 0.5em;
    font-size: 12px;
}

ul {
    text-decoration: none;
    list-style: none; 
}

/* items JUEGOS */

.FONDOBLANCO {
    background: rgba(255, 255, 255, 0.8);
    margin-top: 1em;
    margin-left: 15px;
    margin-right: 15px;
    padding: 1em;
}

.FONDOBLANCOJUGAR {
box-shadow: 1px 2px 4px grey;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 1em;
}


#Jugar {
    font-family: 'Roboto Condensed', sans-serif;
    border: none;
    color: white;
    padding: 10px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    background-color: darkcyan;
    border-radius: 30px;
    margin: 2em;
    width: 7em;
}

.VIDEO {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}

.VIDEO video {
max-width: 100%;
margin-top: 3em;
}

.bodypregunta {
     background-image: url(../imagenes/bannersparapantallas/banner_a.jpg);
    background-size: cover;
    background-position: center;
    display: flex;
    object-position: top;
    justify-content: normal;
}

.historia {
    color: #DC143C;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    font-size: 40px;
}

.pregunta_texto {
    display: flex;
    color: dimgrey;
    text-align: center;
    margin-top: 0;
    padding: 1em;
}

.navegador_respuestas {
    display: inline-block;
    align-content: center;
}

.navegador_respuestas a {
    display: flex;
    flex-direction: column;
    margin-bottom: 1em;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    width: 8em;
    border-radius: 60px;
    background: rgba(1, 1, 1, 0.6);
}

/*PANTALLA CORRECTO-INCORRECTO*/

.bodyrespuestas {
    background-image: url(../imagenes/bannersparapantallas/banner_d.jpg);
    background-size: cover;
    background-position: center;
    display: flex;
    object-position: top;
}

.headerrespuestas {
    background: rgba(2, 2, 2, 0.5);
    flex-direction: column;
    justify-content: center;
    margin-left: 1em;
    margin-right: 1em;
    margin-top: 1em;
    height: 5em;
 }

.mainrespuestas {
    background: rgba(255, 255, 255, 0.7);
    min-height: auto;
    justify-content: center;
    position: relative;
    align-content: center;
    margin-top: 15px;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 15px;
}


.mainrespuestascorrecto {
background: rgba(255, 255, 255, 0.7);
    min-height: auto;
    justify-content: center;
    position: relative;
    align-content: center;
    margin-top: 15px;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 15px;
    padding-top: 0.5em;
 }

.correcto {
display: flex;
align-content: center;
justify-content: center;
margin: 1em;
margin-top: initial;
padding: 1em;
margin-left: 2em;
}

.correcto img {
    max-width: 14em;
}

.incorrecto {
display: flex;
align-content: center;
justify-content: center;
margin: 1em;
padding-left: 1em;
}

.incorrecto img {
    max-width: 7em;
}

.SALADEROS {
display: flex;
align-content: center;
align-items: center;
justify-content: center;
}

.SALADEROS img {
max-width: 90%;
}

.respuesta {
padding-bottom: 1em;
padding-left: 1em;
padding-right: 1em;
}

.respuesta p {
    color: #5D5D5D;
}

.puntos {
    color: #5D5D5D;
}


/*PANTALLA VOTAR*/
.bodysobre {background: url(../imagenes/bannersparapantallas/banner_c.jpg) no-repeat center center fixed;
    background-size: cover;
    display: flex;
    object-position: top;
}

.bodyayuda {background: url(../imagenes/bannersparapantallas/banner_a.jpg) no-repeat center center fixed;
    background-size: cover;
    display: flex;
    object-position: top;
}

.bodyvotar {background: url(../imagenes/bannersparapantallas/banner_b.jpg) no-repeat center center fixed;
    background-size: cover;
    display: flex;
    object-position: top;
}

.navvotar {
    font-size: 10px;
    justify-content: center;
    text-align: center;
}

.headervotar {
    background: rgba(2, 2, 2, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 3em;
    margin-left: 3em;
    margin-right: 3em;
}

.sectionvotar {
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 1px 2px 4px grey;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.sectionvotar h1 {
    color: rgba(2, 2, 2, 0.8);
    text-align: center;
    font-size: 30px;
}

.h2votar {
    color: rgba(2, 2, 2, 0.8);
    text-align: center;
    margin-bottom: 20px;
    font-size: 25px;
}

.Listo {
background: rgba(255, 255, 255, 0.7);
    box-shadow: 1px 2px 4px grey;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.Listo h1 {
color: rgba(2, 2, 2, 0.8);
    text-align: center;
    font-size: 30px;
}

.Listo p {
color: dimgrey;
}


.fotovotar {
    border-radius: 100%;
}

.link {
    text-align: center;
    text-decoration: none;
    background: rgba(2, 2, 2, 0.5);
    box-shadow: 1px 2px 4px grey;
    border-radius: 20px;
    margin-top: 10px;
    margin-bottom: 50px;
    font-size: 20px;
}

.iraljuego {
font-family: 'Roboto Condensed', sans-serif;
border: none;
color: white;
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
border-radius: 30px;
background: rgba(2, 2, 2, 0.5);
box-shadow: 1px 2px 4px grey;


}


.pantallaLISTO {
background: rgba(255, 255, 255, 0.7);
min-height: auto;
justify-content: center;
position: relative;
align-content: center;
margin-top: 15px;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;

}

.pantallaLISTO div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/*PANTALLA AYUDA*/

#FORMULARIO {
max-width: inherit;
}