.menu-container {
    width: 50%;
    display: flex;
    justify-content: center;
}
.menu-principal-container {
    width: auto;
    display: flex;
    align-items: center;
}
.menu-responsive-container {
    width: auto;
    display: flex;
    align-items: center;    
} 
.menu-item {
    display: inline-block;
    margin: 0 15px;
    font-size: 1em;
    text-decoration: none;
}
.menu-btn1,
.menu-btn2,
.menu-btn3 {
    border-radius: 12px;       
    padding: 7px 10px;
    text-align: center;        
    display: inline-block;     
    transition-property: color, background-color;
    transition: background-color .3s ease; 
}  
.menu-btn1,
.menu-btn3 {
    color: var(--color-dark);
    border: solid 1px var(--color-extra-light);
}  
.menu-btn1:hover,
.menu-btn3:hover {
    border: solid 1px var(--color-light-hover);
}
.menu-btn2 {
    color: var(--color-extra-light);
    background-color: var(--color-dark); 
}  
.menu-btn2:hover {
    background-color: var(--color-light-hover); 
}
.menu-list {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
}
.menu-responsive-list {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
}
.btn-burger-container {
    width: 35px;
    height: 35px;
    cursor: pointer;
    display: none;
}
@media screen and (max-width: 975px) {
    .menu-container {
        width: 55%;
    }
}
@media screen and (max-width: 875px) {
    .menu-item {
        margin: 0 10px;
    }
}
@media screen and (max-width: 775px) {
    .menu-item {
        margin: 0 5px;
    }
}
@media screen and (max-width: 680px) {
    .overlay-menu-burger {
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0);
        display: none;
    }
    .btn-burger-container {
        display: block;
        margin-left: 10px;
    }
    .menu-principal-container {
        position: fixed;
        top: 80px;
        right: 0;
        width: auto;
        height: auto;
        padding-bottom: 10px;
        background-color: var(--color-extra-light);
        align-items: center;
        justify-content: center;
        display: none;
        border-radius: 18px 0 0 18px;
    }
    .menu-list {
        flex-direction: column;
        align-items: flex-start;
    }
    .menu-list li {
        margin-top: 10px;
    }   
    .menu-principal-container.open {
        display: block;
        transform: initial;
        animation: transformMenuOpen 300ms ease-in-out forwards;
    }
    .menu-principal-container.close {
        display: none;
    }
    @keyframes transformMenuOpen {
        0% {
            transform: translateX(100%);
        }
        100% {
            transform: initial;
        }
    }
    .btn-burger-container.open {
        content: url('../assets/images/icons/logo-svg/btn-burger-close.svg');
    }
    .btn-burger-container.close {
        content: url('../assets/images/icons/logo-svg/btn-burger-open.svg');
    }
}