.section-emtusa {
    display        : flex;
    justify-content: center;
    width          : 100vw;
    height         : 50px;
    background     : var(--emtusa-blue);
}

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

.nav-link-button {
    background   : none;
    box-shadow   : none;
    width        : initial;
    height       : initial;
    border-radius: initial;
}

.dropdown-content {
    border-radius: 6px;
    position     : absolute;
    display      : none;
    background   : var(--emtusa-blue);
    float        : inherit;
    animation    : ease 0.5s 1 normal forwards running menuFadeIn;
}

.dropdown-content ul li {
    padding        : 0;
    margin         : 0;
    text-decoration: none;
    display        : block;
    width          : 100%;
}

.dropdown-content ul li a {
    margin: 0;
}

#consultas {
    transition: all ease 0.5s;
}

#consultas:hover .dropdown-content {
    display: block;
}

/* nav ul li:hover .dropdown-content {
    display: block;
} */

.huerfano {
    cursor: default;
}

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

.logo-emtusa {
    width    : 120px;
    max-width: var(--logo-max-size);
    height   : var(--logo-height);
}

.burguer {
    display: none;
    cursor : pointer;
}

.burguer div {
    width           : 25px;
    height          : 2px;
    background-color: rgb(225, 225, 225);
    border-radius   : 4px;
    margin          : 5px;
}

@media screen and (max-width: 900px) {

    .logo-1,
    .logo-2,
    .section-emtusa {
        z-index: 3;
    }

    .nav-links {
        padding       : 1.5rem 0 0.5rem 0 !important;
        position      : absolute;
        flex-direction: column;
        top           : 50px;
        background    : var(--emtusa-blue);
        width         : 100% !important;
        transform     : translateY(-150%);
        transition    : transform 0.5s ease-in;
        z-index       : -1;
    }

    .nav-links li {
        padding: 0.5rem 0.5rem !important;
        opacity: 0;
    }

    #consultas .dropdown-content li {
        opacity: 1;
    }

    #consultas:hover .dropdown-content {
        display: none;
    }

    .burguer {
        display: block;
        padding: 0rem 1rem;
    }
}

@media screen and (max-width: 1024px) {
    :root {
        --size-logo   : 120px;
        --padding-left: 0.5rem;
        --pading-top  : 0.75rem;
    }

    .logo-emtusa {
        padding-top : var(--padding-top);
        padding-left: var(--padding-left);
        max-width   : var(--size-logo);
        height      : auto;
    }

    .logo-ayuntamiento {
        padding-left: var(--padding-left);
        max-width   : var(--size-logo);
        height      : auto;
    }
}

.nav-active {
    transform: translateY(-10%);
}

@keyframes navLinkFade {
    from {
        opacity  : 0;
        transform: translateY(50px);
    }

    to {
        opacity  : 1;
        transform: translateY(0px);
    }
}

@keyframes menuFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes h1FadeIn {
    from {
        padding-top: 0px;
    }

    to {
        padding-top: 20rem;
    }
}

@keyframes h1FadeOut {
    from {
        padding-top: 20rem;
    }

    to {
        padding-top: 0px;
    }
}

.toggle .line1,
.toggle .line2,
.toggle .line3 {
    background: rgb(69, 69, 69);
}

.nav-links {
    -webkit-user-select: none;
    user-select        : none;
    padding            : 1rem 0rem;
    margin             : 0;
    display            : flex;
    align-items        : center;
    justify-content    : center;
    width              : 100%;
    list-style         : none;
}

.nav-links li {
    padding: 0rem 0.5rem 0rem 0.5rem;
}

.nav-links li a {
    font-size      : 12px;
    font-weight    : bold;
    display        : flex;
    align-items    : center;
    justify-content: center;
    color          : white;
    text-decoration: none;
    transition     : all ease 0.35s;
}

.nav-link {
    padding: 0.5rem 0.5rem;
}

div>a>img {
    width: 120px;
}

li>a>i {
    padding: 0rem 0.5rem;
}

li>a:hover {
    color: rgb(50, 50, 50);
}

#info-usuario {
    display        : flex;
    flex-direction : row;
    align-items    : center;
    justify-content: center;
}

.informacion-usuario {
    margin       : 0 auto;
    height       : 18px;
    border-radius: 0px 0px 14px 14px;
    background   : var(--emtusa-blue);
    text-align   : center;
    z-index      : -1;
}

span>div {
    display  : flex;
    font-size: 12px;
    color    : white;
    padding  : 0rem 1rem;
}

span>div>p {
    padding: 0rem 0.25rem;
}