.nav{
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    height: 120px;
    width: 100vw;
    background-color: var(--primary);
    color: var(--white);
}
.nav ul{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    list-style-type: none;
    padding: var(--padding-lg);
}

.nav li {
    color: var(--white);
    padding: var(--padding-lg);
    font-size: var(--txt-sm);
    margin: 0 2rem;
}
.nav li img{
    width: 150px;
    padding-top: 10px;
}

.nav ul li a{
    color: var(--white);
    text-decoration: none;
}
.nav ul li a.active{
    color: var(--acent);
}

.Logo-img, .nav-res2{
    display: none;
}

@media only screen and (max-width: 540px) {
    #MenuLi li:nth-child(3){
        display: none;
    }
    .nav{
        flex-direction: column;
        height: 95px;
        justify-content: flex-start;
        overflow: hidden;
        transition: 0.5s height;
    }
    .Logo-img img{
        width: 100px;
    }
    .nav-res2{
        width: 100vw;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 20px 2rem;
    }
    .Logo-img{
        display: block;
    }   
    .nav ul{
        flex-direction: column;
        padding: 0;
        background-color: var(--primary);
    }
    .nav .nav-res ul li{
        padding: 20px 0;
        text-align: left !important;
        margin: 0;
    }
    .nav .nav-res ul li a{
        text-align: left !important;
    }
    .nav .nav-res ul{
        align-items: flex-start;
    }
    .nav-res{
        width: 100vw;
        padding: 20px 2rem;
    }
    .bx-menu{
        font-size: var(--txt-lg);
    }
}

@media only screen and (min-width: 541px) and (max-width: 720px){
    #MenuLi li:nth-child(3){
        display: none;
    }
    .nav{
        flex-direction: column;
        height: 95px;
        justify-content: flex-start;
        overflow: hidden;
        transition: 0.5s height;
    }
    .Logo-img img{
        width: 120px;
    }
    .nav-res2{
        width: 100vw;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 20px 2rem;
    }
    .Logo-img{
        display: block;
    }   
    .nav ul{
        flex-direction: column;
        padding: 0;
        background-color: var(--primary);
    }
    .nav .nav-res ul li{
        padding: 20px 0;
        text-align: left !important;
        margin: 0;
    }
    .nav .nav-res ul li a{
        text-align: left !important;
    }
    .nav .nav-res ul{
        align-items: flex-start;
    }
    .nav-res{
        width: 100vw;
        padding: 20px 2rem;
    }
    .bx-menu{
        font-size: 48px;
    }
}
@media only screen and (min-width: 721px) and (max-width: 1024px){
    .nav li {
        padding: var(--padding-s);
        font-size: var(--txt-sm);
    }
    .nav li img{
        width: 150px;
        padding-top: 10px;
    }
}