@charset "utf-8";

/* ----------- reglas generales y módulos ----------- */

* {
    box-sizing: border-box;
}

body {
    background: url("../imagenes/diagonal.png") repeat;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: space-between;
}

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

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

ul {
    list-style: none;
}


.material-icons {
    padding-right: .25em;
}

#buscador2 {
    width: calc( 100% - 1.76rem );
    position: absolute;
}

.iconos {
    padding-right: .35em;
    width: 1.8em;
    height: 1.4em;
}

.avatar {
    width: 2.8em;
    height: 2.4em;
    margin-right: 1.1em;
    margin-left: -.64em;
}

#llamamenu .material-icons,
#ocultamenu .material-icons {
    padding-right: 0;
}

main > section {
    margin: .0em auto;
    max-width: 50rem;
    width: calc( 100% - 1.5rem );
    border: none;
}

main > aside {
    margin: .0em auto;
    max-width: 50rem;
    width: calc( 100% - 1.5rem );
    border: none;
}

main {
    margin: .0em auto;
    width: calc( 100%);
    border: none;
    min-height: 75vh;
    font-family: 'PT Serif', serif;
}

main h1, main h2, main h3, main h4, main h5, main h6{
    font-family: 'Reem Kufi', sans-serif;
}
    
#buscarresultados {
  display: flex:
  margin: .7em auto;
  margin-top: 1em;
  margin-bottom: 2.4em;
  min-height: 80vh;
  -webkit-border-radius: 8px/7px; 
  -moz-border-radius: 8px/7px; 
  border-radius: 8px/7px; 
  background-color: #fdfdfd; 
  -webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.31); 
  -moz-box-shadow: 1px 2px 5px rgba(0,0,0,.31); 
  box-shadow: 1px 2px 5px rgba(0,0,0,.31); 
  border: solid 1px #cbc9c9;
 }

.footer,
footer > section {
    max-width: 50rem;
    margin: 0 auto;
    padding: 1rem;
    font-size: 0.7em;
    font-family: 'Ubuntu Condensed', sans-serif;
    text-transform: uppercase;
    color: white;
}

/* ----------- Menú Superior ----------- */

.contenedor {
    margin: 0 auto;
    max-width: 50rem;
    padding: 0.9em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Reem Kufi', sans-serif;
    height: 5em;
}

#logoclub {
    display: block;
    width: 6em;
    min-width: 6em;
    position: relative;
}

#micuenta {
    background: #141414;
    margin-top: -.3em;
    margin-bottom: 1em;
    padding: .4em 0;
    padding-top: .9em;
    padding-left: 1.9em;
    text-transform: uppercase;
    position: relative;
    z-index: 998;
}

#logginsignupp {
    background: #141414;
    margin-top: -.3em;
    margin-bottom: 1em;
    padding: .4em 0;
    padding-top: .9em;
    padding-left: 1.9em;
    position: relative;
    z-index: 998;
}

#logginsignupp h3 {
    font-size: 1em;
    padding: .3em 0;
}

#asociarse {
    margin: 1em 0;
    padding-left: 1.9em;
    border-top: 1px solid #F34747;
    border-bottom: 1px solid #F34747;
}

#sesion {
    width: 300px;
    margin-right: 1.4em;
    margin-left: 0em;
}

#sesion a {
    display: flex;
    flex-wrap: nowrap;
    background: none;
    position: absolute;
    text-decoration: none;
    color: white;
    width: auto;
}

.enlacelogo {
    margin-left: -4.3em;
}

#micuenta2 {
    margin-top: -2.5em;
}

#micuenta2 a{
    margin-left: 4em;
}

#micuenta2 img {
    height: 3em;
}

#micuenta2 img:hover {
    height: 2.9em;
    margin-top: .05em;
    margin-left: .05em;
}

#asociarse2 {
    font-size: .9em;
    margin-left: -.4em;
}

#asociarse2 a {
margin-top: -.2em;
}

#asociarse2 img{
    width: 1.8em;
    margin-top: -.2em;
    margin-left: .3em;
}

#asociarse2 img:hover{
    width: 2em;
    margin-top: -.3em;
    margin-left: .2em;
    transition: all .2s ease;
}

#cerrarsesion2 {
    font-size: .9em;
    margin-left: 1.4em;
}

#cerrarsesion2 a {
    margin-top: 2.3em;
    margin-left: 5.8em;
}

#cerrarsesion2 img {
    height: 1.6em;
    margin-top: -.2em;
    margin-right: .3em;
}

#cerrarsesion2 onmouseover {
    height: 3em;
}

header nav {
    background-color: none;
    color: white;
    padding: 0em;
}

header nav ul {
    background-color: rgba(47, 47, 47, 0.96);
    color: white;
    padding: 0em;
    padding-left: 0em;
    position: fixed;
    right: 100%;
    top: 0;
    height: 100vh;
    width: 18em;
    z-index: 9990;
    padding-top: .4em;
    margin: 0;
}

    header nav a:hover {
    color: black;
    background: white;
}

header nav a,
header nav label {
    color: white;
    padding: .8em 1em;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 9999;
    cursor: pointer;
}

header nav ul label,
header nav ul label:hover{
    background: none;
    position: relative;
    z-index: 999;
    width: 2.6em;
    margin-bottom: -4.1em;
    margin-left: 13.2em;
    margin-top: .67em;
}

@media screen and (max-width: 50em) {

#sesion {
    width: 280px;
    margin-right: 1.4em;
    margin-left: -.5em;
}
    
.enlacelogo {
    margin-left: -4.3em;
}
}

/* cuando la ventana del navegador mida como máximo 560px de ancho */
@media (max-width: 48.0em) {
    
    
    header nav a {
    justify-content: flex-start;
    margin: .1em 0;
    margin-left: 0;
    padding: .54em 1em;
    padding-left: 1.9em;
    font-size: 0.9em;
    }
    
    header nav ul {
    padding-left: 1em;
    }
    
    .contenedor .material-icons {
    padding-right: 1em;
    }
    
    #columna1, #columna2 {
    display: none;
    }
    
    .footercolumnas li img {
    max-width: 5em;
    }
    
    #columna3{
    margin-bottom: 1em;
    background: #F34747;
    color: white;
    margin: -1.5em -1.4em;
    padding: 1em 1.5em;
    flex-wrap: nowrap;
    }
    
    #columna3 h1{
    align-items: flex-end;
    align-content: flex-end;
    float: right;
    }
    
    #columna3 ul{
    width: 100%;
    justify-content: flex-end;
    }
    
    #columna3 li{
    min-width: 4em;
    }
    
    .enlacelogo {
    width: 100%;
    margin-top: .1em;
    margin-left: 0em;
    margin-right: 3.3em;
    display: flex;
    justify-content: center;
    }
    
    .iconos {
    left: 32%;
    margin-right: 1.5em;
    }
    
    header nav a:hover {
    color: white;
    background: #F34747;
    }
    
    header nav label:hover {
    color: white;
    background: none;
    }
    
    #buscador1, #sesion {
    display: none;
    }
    
    main > section {
    margin: .7em auto;
    }
    
    #buscarresultados {
    padding: .7em;
    }
    
}


/* "botones" que muestran u ocultan el menu */

  /* se oculta la "casilla de verificación" */
[type="checkbox"]:not(:checked), [type="checkbox"]:checked {
    display: none;
}

  /* qué "botón" se muestra */
#menu-toggle:not(:checked) + #llamamenu {
    display: flex;
    margin-bottom: -.3em;
}


#menu-toggle:checked + #llamamenu + #ocultamenu {
    display: flex;
    margin-left: 11.7em;
    margin-top: -2.55em;
    position: absolute;
    display: none;
}

  /* qué "botón" se oculta */
#menu-toggle:checked + #llamamenu{
    z-index: 0;
    margin-bottom: -.3em;
}
#menu-toggle:not(:checked) + #llamamenu + #ocultamenu {
    display: none;
}

#menu-toggle:checked + #llamamenu + #ocultamenu + ul {
    /* el menu se muestra corrienndose a la izquierda */
    transform: translate(17em,0);
    -webkit-transform: translate(17em,0); /** Chrome & Safari **/
    -o-transform: translate(17em,0); /** Opera **/
    -moz-transform: translate(17em,0); /** Firefox **/
    transition: all .25s ease;
}

/* cuando la ventana del navegador mida como mínimo 560px de ancho */
@media (min-width: 48.05em) {
    
    /* se ocultan los "botones" que muestran o esconden el menu */
    #menu-toggle,
    #menu-toggle:checked + #llamamenu,
    #menu-toggle:not(:checked) + #llamamenu,
    #menu-toggle:checked + #llamamenu + #ocultamenu,
    #menu-toggle:not(checked) + #llamamenu + #ocultamenu {
        display: none;
    }
    
    /* se muestra el menu horizontal */
    #menu-toggle:not(:checked) + #llamamenu + #ocultamenu + ul,
    #menu-toggle:checked + #llamamenu + #ocultamenu + ul {
        display: flex;
        flex-wrap: wrap;
        background: none;
        position: relative;
        top: 0;
        left: 0;
        height: 2.1em;
        width: 80%;
        padding-top: 0em;
        margin-top: -1.6em;
        margin-left: 3em;
        padding-top: -1em;
        font-size: .9em;
    }
    
    header nav a,
    header nav label {
        padding: .2em 1em;
        margin-bottom: .2em;
    }
    
    #buscador2, #micuenta, #cerrarsesion, #asociarse, #ocultamenu, #logginsignupp {
    display: none;
    }
    
    
}

/* ----------- Footer ----------- */

    .footercolumnas{
        margin-bottom: 1em;
    }

    #columna1 {
        width: 28%;
        float:left;
        padding-right: 2em;
    }

    #columna2 {
        padding: 0em 2em;
        padding-bottom: 1em;
        width: 35%;
        float:left;
        border-left: 1px solid white;
        border-right: 1px solid white;
        margin-right: 2em;
    }

    #columna1 p, #columna2 p {
        padding-left: 2.7em;
    }

    #columna1 a, #columna2 a  {
        color: white;
        text-decoration: none;
    }

    #columna1 a:hover, #columna2 a:hover {
        font-style: italic; 
    }

    #columna3 {
        display: flex;
        flex-wrap: wrap;
    }

    .footercolumnas .material-icons{
        vertical-align: middle;
    }

    .footercolumnas ul {
        display: flex;
        flex-direction: row;
        margin-left: -.9em;
    }

    .footercolumnas li {
        margin-right: .5em;
    }

    .footercolumnas li img {
        width: 80%;
    }

    .footercolumnas li img:hover {
        width: 70%;
        transition: all .4s ease;
    }

