@charset "utf-8";

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 0;
}

@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css?family=Asap&display=swap');


body {
    font-family: "poppins";
    background-color: #084b8c;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    align-self: center;
}


gif2 img {
    width: 200px;
    height: auto;
    align-self: center;
    margin-top: -1em;
}



section1 img:hover {
    text-decoration: underline;
}


ul { list-style: none; }

header,
footer {
    background-color: #F4F4F4;
}


/*
----------------
encabezado
----------------
*/

header {   
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #084B8C;
    height: 4.2em;
    border-bottom: 5px solid white;
    border-bottom-width: medium;  
    background-image: url(imagenes/socalo.jpg);
    background-size: 100%;
    
}

.flex{
    flex:1;
}


#logo {
    display: block;
    width: 3em;
    }

#canchas {
  display: flex;
}

header > ul {
    display: flex;
}

header > ul > li {
    width: 2em;
    height: 2em;
    margin-left: .25em;
    display: flex;

}

header > ul > li > a {
    width: 100%;
    height: 100%;
    background-color:#084B8C;
    color: white;
    text-decoration: none;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    }


/* menu desplegable */

header nav {
    background-color:#084B8C;
    color: white;
    
    /* para salir del "flujo de información" del fondo 
        y colocase en una capa superior fija */
    position: fixed;
    right: -69vw;
    top: 0;
    height: 100vh;
    width: 69vw;
    transition: all .6s ease;
    z-index: 999;  
}


/* cuando el módulo de navegación
   sea "destino" de un vínculo cliqueado */
header nav:target {
    right: 0;

}

.usuario {
    margin: auto;
    font-size: 75%;
    padding: 3em 1em 1em 1em;
    border-bottom: solid 1px #F4F4F4;
    font-size: 1em;
    text-align: center;
 }


header nav a {
    color: white;
    display: block;
    padding: 2em 1em;
    text-decoration: none;
    border-bottom: 5px solid white;
    border-bottom-width: medium;
    font-size: .8em;
}

header nav a:hover {
    color: white;
}

#x {
    
    position: absolute;
    right: 0;
    top: 0;
    background-color: transparent;
    color:white;
    border-bottom: 0px solid white;
    font-size: 1em;
}

#x2 {
    
    position: absolute;
    right: 0;
    top: 0;
    background-color: transparent;
    font-size:.65em;
    color:white;
    
}

/*
----------------
contenidos
----------------
*/

main {
    background-color: white;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}


.titulo {
font-size: 1em; 
box-sizing:border-box;
color: white;
padding: .3em;
font-family: "poppins", medium;
font-weight: bold;
margin-top: 1.5em;
margin-bottom: 1em;
margin-left: 1em;
}



.tituloinicio {
font-size: 1.5em; 
box-sizing:border-box;
text-align: center;
color: white;
padding: .3em;
width: 13em;
font-family: "poppins", medium;
font-weight: bold;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 1.9em;
margin-bottom: 1.5em;
}


.subtitulo {
font-size: .9em; 
box-sizing:border-box;
text-align: center;
color: #a2a2a2;
padding: 1em;
margin: auto;
margin-bottom: 1em;
margin-top: 1em;
font-family: "poppins";
font-weight: lighter;
text-align: justify center;

}

.defensores {
box-sizing: border-box;
text-align: center;
color: white;
padding: .3em;
margin: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
margin-top: 1em;
width: 13em;
font-family: "poppins", medium;
font-weight: 200;
font-size: 1em;
text-transform: uppercase;
}

.caja {
font-size: 1.2em;
box-sizing:border-box;
background-color: #F4F4F4;
text-align: left;
margin: auto;
margin-bottom: 1em;
width: 13em;
color:#084b8c;
padding: .2em;
font-family: "poppins";
border-bottom-style: solid;
border-radius: .5em;
font-weight:300;
display: block;
}

.azul {
   color: #084b8c;
}
.campos {
  font-size: 1rem;
  border: 0;
  text-decoration: none;
  background: none;
  text-align: left;
  font color: #084b8c;
}

.boton {
box-sizing:border-box;
background-color: #a2a2a2;
text-align: center;
margin-left: auto;
margin-right: auto;
width: 10em;
color:white;
padding: .5em;
font-family: "poppins";
font-weight: bold;
border: 1px solid #a2a2a2;
box-shadow: 0 0.1em 0.1em white;
text-decoration: none;
border-radius: 10px;
font-size: 1.2em;
cursor: pointer;
margin-top: 2em;
margin-bottom: 1.5em;
}

.botonleer {
box-sizing:border-box;
background-color: black;
color:white;
font-family: "poppins";
font-weight: 400;
box-shadow: 1px 1px 10px #444;
padding: .5em;
text-decoration: none;
border-radius: 0.6em;
font-size: .8em;
cursor:pointer;
margin-left: 20em;
margin-bottom: 50em;
}


.link {
    text-decoration: underline;
    text-align: center;
    color: white;
    padding: 1em;
    
}

.fecha {
    display: flex;
    font-size: .75em;
    margin-bottom: .75em;
    padding: 1em;
    border-bottom: 1px solid #d9d9d9;
    color: #a2a2a2;
}
    
.negro {
    color:black;
}

.inicial {
    margin-top:-2em;
    
}

.textos {
    padding: 1em;
    
    /* para limitar la cantidad de palabras por línea */
    max-width: 40em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
    font-size: 1em;
}

.fondo {
    background-color: #084b8c;
    color:white;
    text-align: center;
    padding: .5em;
}
.textos > * {
    margin-bottom: 1em;
}

div .subtitulo {
    font-size: 1.2em;
    color:black;
    text-align: center;
}
.textosnoticia {
    padding: 1em;
    
    /* para limitar la cantidad de palabras por línea */
    max-width: 40em;
    margin-left: auto;
    margin-right: auto;
    font-size: 1em;
    color: #084b8c;
    font-family: "Asap";
    text-align: left;  
    }

.left {
    text-align: left;
    margin: 1em;
      }

.right {
    display:inline-block;   
       }

.menudesplegable {
     display: flex;
    justify-content: space-between;
    align-items: center;
    width:90%;
    padding: .50em 0em 0em 1em;
    margin: 0em .1em 0em .1em;
}

sectiongif {
align-self: center;
max-width: 50%;
}

iframe {
    align-self: center;
    margin-bottom: 3em;
    min-width:96%;
}

section img {
    align-items: center;
}
    
.subir {
    text-decoration: none;
    color: #084b8c;
    font-weight: bold;
    margin-right: 50em;
   }

.subir:hover {
    text-decoration: underline;
}

a {
    text-decoration: none;
}

ul img {
    width: 30px;
}

main img {
    max-width: 100%;
    height: auto;
    }


a i {
    color:white;
    font-size:1em;
}
.noticiascaja {
    text-align: center;
    box-shadow: 0rem 0rem .7rem .1rem #d9d9d9;
    margin: 1rem;
    padding-bottom: 2em;
    background-color: white;
    border-radius: .3rem;
}

.fondodestacado {
    background-color: aliceblue;
}
.partido img {
    width: 20%;
    justify-content: space-around;
    
}

.partido {
        background-color: #F4F4F4;
    }

.partido2 {
    font-size:.7em;
   }

.partido2 img {
  
    justify-content: space-around;
    
}


.versus {
    display: flex;
    justify-content: center;
    font-size: 2em;    
}

.versus p {
    margin: 1em;
}



.fondotitulo {
    background-color: #084b8c;
    color:white;
    font-size: 1em;
    padding: .5em;
    font-size: 1.1em;
    letter-spacing: .03em;
    font-weight: 100;
    text-align: center;
      }

.linea {
     border-bottom: solid 1px #e6e6e6;
    }


div:last-child {
  border-bottom: none;
}
 
/*
----------------
pie
----------------
*/

footer {
    font-size: .85em;
    padding: 1em;
}

footer > p {
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}


/*
----------------
explorar
----------------
*/
.explorar {
    background-color: #084b8c;
    border: 1px solid #a2a2a2;
    box-shadow: 0 .1em .1em #a2a2a2;
    color: white;
    cursor: pointer;
    display: flex;
    font-size: 1.8rem;
    width: 20rem;
    height: 4rem;
    text-decoration: none;
    font-family: "poppins";
    border-radius: .5em;
      
    /* para salir del "flujo de información" del fondo 
    y colocase en una capa superior fija */
    position: fixed;
    bottom: .5rem;
    right: .5rem;
    margin-right: .2em;
}

div a {
    text-decoration: none;
    text-align: center;
    color:white;
    font-size: .7em;
    margin-left: .87em;
      }


i {
    padding: 1em;
    text-align: center;
    }


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

.canchas{
    display: flex;
    text-align: center;
    flex-direction: space-evenly;
    justify-content: center;
    padding: 1em;
}

.canchas img{
    width: 150px;
}


.oculto{
    display: none;
}


/*
cuando la ventana del navegador mida
como mínimo xxxxxxxxxxxxx de ancho
*/



@media (min-width: 40em) {
    
    .explorar {
    bottom: .5rem;
    right: 30rem;
    margin-right: .2em;
}
    
    main img {
        width: 50%;
            }
    main {
        width: 50%;
        align-content: center;
        margin-left: auto;
        margin-right: auto;
    }
    
 .usuario {
        width: 40%;
     
    }
}

.usuario img {
    width:50%;
    }
}


noticiascaja {
    width: 50%;
    }
}




/*
cuando la ventana del navegador mida
como mínimo 800px de ancho
*/
@media (min-width: 50em) {
    .textos h3 {
        padding: 1em;
    }
}