.etw-menu{
    height: 130px;
    transition: 0.4s ease;

    @media(max-width:767px){
        height: 70px;
    }
    .etw-logo{
        transition:  0.4s ease;
        width:50%!important;
        img{
            width:100%;

        }
    }
    .slogan{
        @media(max-width: 1023px){
            display:none
        }
    }
    /*Menu column*/
    .menu-wordpress-column{

        @media(max-width:767px){
            background-color: transparent!important;
            max-height: 60px;
        }
        
        /*Menu widget*/
        .menu-wordpress{
            height:68px!important;
            display:flex;
            justify-content: center;

            li{
                font-size: clamp(13px, 1vw, 17px);
                font-weight: 500;
                letter-spacing: 0.4px;
            }
            @media(min-width:767px){
                justify-content: flex-end;
            }
            
        }

        /*Menu elements*/
        li.menu-item{
            height: 68px;

            &.current-menu-item{
                background-color: var(--blanc);
            }
            &:not(:last-child).current-menu-item {
                background-color: var(--bleu-vif);
            }
            &:before{
                 content: "";
                position: absolute;
                left: 50%;
                top: 50%;
                background-color: var(--bleu-vif);
                transform: translate(-50%, -50%);
                width: 0;
                height: 0;
                opacity: 0;
               
            }
            
            &:last-child::before {
                background-color: var(--blanc);
            }
            
            &:hover{
                &:before {
                    opacity: 1;
                    animation: expandBox 0.8s ease forwards;
                }
            }
        }
        &:before {
            @media(min-width:768px){
                content: "";
                position: absolute;
                left: -10px;
                top: 50%;
                transform: translateY(-50%);
                width: 10px;
                height: 40px;
                background-color: var(--bleu-vif);
                opacity: 1;
                transition: height 0.4s ease, opacity 0.4s ease;
                transform-origin: center;
                z-index: 2;
            } 
        }
        
        &:hover{
            &:before {
                height: 10px;
                opacity: 0;
            }
        }
    }
    /****** HEADER STATES *******/
    
    /*On scrolldown*/
    
    
    /*On scrolldown and not hidden */
    &.scrolldown{
        box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
        height: 68px!important;

        .etw-logo{
            width:30%;
            transition:  0.4s ease;
            @media(max-width:1023px){
                width:100%;
            }
        }
    }
    
    /*On Hidden*/
    &.hidden{
        @media(max-width:767px){
            transform: translatey(-100%);
        }
        
        .etw-logo{
            width:30%;
        }
    }
}

@keyframes expandBox {
    0% {
        width: 100%;
        height: 20px;
    }
    100% {
        width: 100%;
        height: 100%;
    }
}