/**********************

ESTILOS MENU RESPONSIVE

**********************/

.logo {
    width: 90px;
    height: 90px;
    background: url('../images/logo.svg') no-repeat center left;
    background-size: contain;
    text-indent: -9000px;
}

.logo a {
    display: block;
    height: inherit;
}



/**********************

btn menu

**********************/

.btn-menu {
    display: none;
    flex-flow: column;
    justify-content: center;
    align-items: center;

    width: 48px;
    height: 48px;

    cursor: pointer;
}

.btn-menu span {
    display: block;
    width: 24px;
    border: 1px solid;
    margin: 2px 0;
    color: var(--c2);
}




/**********************
header
**********************/

.site-header {
    /* estos valores se activan y se eliminan de la media querie si se muestra a cualquier tamaño
    padding: 1rem 2.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,.15);
    background: var(--c1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    */
    display: none; 
}

.menu__list {
    display: flex;
}

.menu__item {
    margin-left: 5pt;
}

.menu__item a {
    display: flex;
    height: 48px;
    align-items: center;
    text-transform: uppercase;
}


/*. checkbox */
#trigger {
    display: none;
}



@media (max-width: 1100px) { /*por debajo de 1100 px de aplica iPad */

    .site__header {
        display: none;    
    }

    .site-header {
        padding: 1rem 2.5rem;
        box-shadow: 0 2px 4px rgba(0,0,0,.15);
        background: var(--c1);
        display: flex;
        justify-content: space-between;
        align-items: center; 
        flex-wrap: wrap;
    }

    .btn-menu {
        display: flex;
    }

    .header__menu {
        display: none;
        width: 100%;
    }

    .menu__list {
        display: block;
    }

    .menu__item {
        margin: 0;
        border-bottom: 1px solid;
    }

    .menu__item a {
        justify-content: flex-end;
        height: 25px;
    }

    /**********************
    Truco de input checkbox para el menú
    **********************/

    #trigger:checked + .site-header .header__menu {
        display: block;
    }

    /**********************
    Ajustamos heros
    **********************/


    .hero_documentos {
        margin-top: 20px;
        width: 750px;
        height: 331px;
    }

    .hero-mujeres {
        margin-top: 30px;
        width: 750px;
        height: 318px;
    }
    .hero-save-the-date {
        margin-top: 30px;
        width: 750px;
        height: 414px;
    }
    .hero-mapa-talento {
        margin-top: 30px;
        width: 750px;
        height: 414px;
    }
    .hero-ruta {
        margin-top: 30px;
        width: 750px;
        height: 371px;
    }

    .hero-la-ruta {
        margin-top: 20px;
        width: 750px;
        height: 406px;
    }

    .hero_iniciativa-mujeres-de-la-sanidad {
        margin-top: 20px;
        width: 750px;
        height: 326px;
    }

    .hero-noticias {
        margin-top: 20px;
        width: 750px;
        height: 90px;
    }

    .hero_quienes-son {
        margin-top: 20px;
        width: 750px;
        height: 90px;
    }
    .hero_quienes-son-univ-asis {
        margin-top: 20px;
        width: 750px;
        height: 90px;
    }

    .hero_partners {
        margin-top: 20px;
        width: 750px;
        height: 330px;
    }

    .hero_compromiso {
        margin-top: 20px;
        width: 750px;
        height: 330px;
    }

    .hero_foro {
        margin-top: 20px;
        width: 750px;
        height: 330px;
    }

    /**********************
    Ajustamos footer
    **********************/

    .footer__content {
        transform: scale(0.85);
    }

    /**********************
    Ajustamos fotos
    **********************/

    .fotos__container {
        grid-template-columns: auto auto auto;
    }
    
    .noticias__container {
        grid-template-columns: auto auto;
    }

    .section__content {
        width: 100%;
        float: none;
        padding: 0 15px;
    }

    .textNormal {
        padding-right: 0;
    }

    .section__content-full {
        width: 90%;
    }

    .title {
        font-size: 35pt;
        line-height: 37pt;
    }
}

@media (max-width: 400px) { /*por debajo de 400 px de aplica iPhone */

    /**********************
    Ajustamos heros
    **********************/

    .hero_documentos {
        margin-top: 20px;
        width: 350px;
        height: 154px;
    }

    .hero-mujeres {
        margin-top: 30px;
        width: 350px;
        height: 148px;
    }
    .hero-save-the-date {
        margin-top: 30px;
        width: 350px;
        height: 193px;
    }
    .hero-ruta {
        margin-top: 30px;
        width: 350px;
        height: 173px;
    }

    .hero-la-ruta {
        margin-top: 20px;
        width: 350px;
        height: 189px;
    }

    .hero_iniciativa-mujeres-de-la-sanidad {
        margin-top: 20px;
        width: 350px;
        height: 152px;
    }

    .hero-noticias {
        margin-top: 20px;
        width: 350px;
        height: 50px;
    }

    .hero_quienes-son {
        margin-top: 20px;
        width: 350px;
        height: 50px;
    }

    .hero_quienes-son-univ-asis {
        margin-top: 20px;
        width: 350px;
        height: 50px;
    }

    .hero_partners {
        margin-top: 20px;
        width: 350px;
        height: 154px;
    }

    .hero_compromiso {
        margin-top: 20px;
        width: 350px;
        height: 154px;
    }

    .hero_foro {
        margin-top: 20px;
        width: 350px;
        height: 154px;
    }
    /**********************
    Ajustamos footer
    **********************/
    .textNormal {
        padding-right: 0;
    }

    .section__content-full {
        width: 90%;
    }

    .partner__content {
        grid-template-columns: auto;

    }

    .partner__content_two {
        grid-template-columns: auto;

    }

    .partner__content_three {
        grid-template-columns: auto;

    }

    /**********************
    Ajustamos footer
    **********************/

    .footer__content {
        transform: scale(0.8);
    }

    .fotos__container {
        grid-template-columns: auto;
    }

    .noticias__container {
        grid-template-columns: auto;
    }

    .title {
        font-size: 16pt;
        line-height: 19pt;
    }

}