/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/
/*-------------------------------------@DEFAULT-----------------------------------*/
/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------------*/

#et-boc header {
    width:100%; 

    position:fixed;
    z-index:9;

    background-color:transparent!important;

    transition: var(--animation-transition-01);
}

#et-boc header::after {
    width:100%; 
    height:0px;

    position:absolute;
    left:0px;
    bottom:0px;

    content:'';

    background-color: var(--color-white);

    transition: var(--animation-transition-02);
}
#et-boc header.scroll-y\>0::after {
    height:100%;
}

#et-boc header > .et_builder_inner_content {
    display:flex!important;
    justify-content: center!important;

    padding:0 var(--gap-s)!important;
}

#et-boc header > .et_builder_inner_content > .et_pb_section {
    width:100%!important;

    display:flex!important;
    flex-direction: column!important;
    align-items: center!important;
}

/*--------------------------------------------------------------------------------*/
/*-----------------------------------@HEADER MAIN---------------------------------*/
/*--------------------------------------------------------------------------------*/

#et-boc header .header-main {
    width:100%!important;
    max-width:var(--layout-l)!important;

    display:flex!important;
    align-items: center!important;
}

#et-boc header .header-main .col-brand-identity {
    width:fit-content!important; 
}

#et-boc header .header-main .col-nav {
    width:unset!important; 

    display:flex!important;
    justify-content: flex-end!important;
    flex:1!important;
}

/* @COMPANY LOGOTYPE */

#et-boc header .header-main .company-logotype img {
    width:122px!important;
    height:48px!important;

    filter:brightness(0) invert(1)!important;

    transition: var(--animation-transition-01);
}
#et-boc header.scroll-y\>0 .header-main .company-logotype img {
    filter:none!important;
}

/* @BUTTON TOGGLE MENU */

#et-boc header .header-main .button__toggle-menu {
    width:32px;
    height:16px;

    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    position: relative;
}

#et-boc header .header-main .button__toggle-menu .button__toggle-menu__line {
    width:100%; 
    height:2px;

    position:absolute;

    background-color: var(--color-white);

    opacity:1;
    transform:none;

    transition: 
        transform calc(1/3*1s) var(--animation-easing-01),
        background-color calc(1/3*1s) var(--animation-easing-01),
        opacity calc(1/3*1s) var(--animation-easing-01),
        width calc(1/6*1s) var(--animation-easing-01)!important;
}
#et-boc header.scroll-y\>0 .header-main .button__toggle-menu .button__toggle-menu__line {
    background-color: var(--color-black-eerie);
}

#et-boc header .header-main .button__toggle-menu .button__toggle-menu__line:nth-child( 1 ) {
    top:0px;

    transform-origin: 0px 0px;
}
#et-boc header:has( .container__header-nav.open ) .header-main .button__toggle-menu .button__toggle-menu__line:nth-child( 1 ) {
    width:80%;

    transform: rotate(45deg);
}

#et-boc header .header-main .button__toggle-menu .button__toggle-menu__line:nth-child( 2 ) {

}
#et-boc header:has( .container__header-nav.open ) .header-main .button__toggle-menu .button__toggle-menu__line:nth-child( 2 ) {
    opacity: 0;
}

#et-boc header .header-main .button__toggle-menu .button__toggle-menu__line:nth-child( 3 ) {
    bottom:0;

    transform-origin: 5px 3.5px;
}
#et-boc header:has( .container__header-nav.open ) .header-main .button__toggle-menu .button__toggle-menu__line:nth-child( 3 ) {
    width:80%;

    transform: rotate(-45deg);
}

#et-boc header .header-main .button__toggle-menu::after {
    width:150%; 
    aspect-ratio: 1/1;

    position:absolute; 
    
    content:'';
}

/* @NAV */

#et-boc header .header-main .nav-main {
    display: flex;
    column-gap: var(--gap-m)!important;

    padding:0!important;
    margin:0!important;
}

.et-db #et-boc header.et-l .header-main .nav-main li {
    display:flex!important;
    align-items:center!important;

    padding:0;
    margin:0!important;
}

.et-db #et-boc header.et-l .header-main .nav-main li > a {
    padding:var(--gap-s) 0!important;
    margin:0!important;

    font-family:var(--text-family-body)!important;
    font-size:var(--text-body-m-size)!important;
    line-height:var(--text-body-m-line-height)!important;
    letter-spacing: 0em!important;
    text-transform:initial!important;
    font-weight:500!important;
    text-align:left!important;
    color:var(--color-white)!important;
    text-decoration: none!important;

    position:relative!important;

    transition:var(--animation-transition-01);
}
.et-db #et-boc header.et-l .header-main .nav-main li > a:hover {
    color:var(--color-white)!important;

    opacity:1!important;
}
.et-db #et-boc header.et-l.scroll-y\>0 .header-main .nav-main li > a {
    color:var(--color-black-eerie)!important;
}

.et-db #et-boc header.et-l .header-main .nav-main > li.menu-item--featured > a {
    height:fit-content!important; 

    padding:8px 16px!important;

    color:var(--color-black-eerie)!important;

    background-color:var(--color-white)!important;

    border-radius:4px!important;
    border:1px solid var(--color-white);
}
.et-db #et-boc header.et-l .header-main .nav-main > li.menu-item--featured > a:hover {
    background-color:var(--color-gray-smoke)!important;

    border-color:var(--color-gray-smoke);
}
.et-db #et-boc header.et-l.scroll-y\>0 .header-main .nav-main > li.menu-item--featured > a {
    color:var(--color-white)!important;
    
    background-color:var(--color-orange-06)!important;

    border:1px solid var(--color-orange-06)!important;
}
.et-db #et-boc header.et-l.scroll-y\>0 .header-main .nav-main > li.menu-item--featured > a:hover {
    background-color:rgba(247,154,70,100)!important;
    
    border-color: rgba(247,154,70,100)!important;
}

.et-db #et-boc header.et-l .header-main .nav-main > li:not( .menu-item--featured ) > a::after {
    width:0%;
    height:1px;

    position:absolute;
    top:calc( 50% + var(--text-body-m-line-height) / 2 );
    left:0;
    
    content:'';
    
    font-size:var(--text-body-m-size);

    background-color:var(--color-white);

    transition:var(--animation-transition-01);
}
.et-db #et-boc header.et-l .header-main .nav-main > li:not( .menu-item--featured ) > a:hover::after {
    width:100%; 
}
.et-db #et-boc header.et-l.scroll-y\>0 .header-main .nav-main > li:not( .menu-item--featured ) > a:hover::after {
    background-color:var(--color-gray-platinum);
}
.et-db #et-boc header.et-l.scroll-y\>0 .header-main .nav-main > li:not( .menu-item--featured ) > a:hover::after {
    background-color:var(--color-gray-platinum);
}

@media ( min-width: 1025px ) {

    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*-------------------------------------#DEFAULT-----------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/

    /* #BUTTON TOGGLE MENU */

    #et-boc header .header-main .button__toggle-menu {
        display:none;
    }

}

@media ( min-width:768px ) and ( max-width:1024px ) {

    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*-------------------------------------$DEFAULT-----------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/


    /*--------------------------------------------------------------------------------*/
    /*-----------------------------------$HEADER MAIN---------------------------------*/
    /*--------------------------------------------------------------------------------*/

    #et-boc header .header-main {
        padding:16px 0px!important;
    }

    .et-db #et-boc .et-l .et_pb_column.col-brand-identity {
        width:fit-content!important; 

        position:relative!important;
        z-index:9!important;
    }

    #et-boc header .header-main .col-nav {
        order:-1;
        justify-content: flex-start!important;
    }
    #et-boc header .header-main .col-nav,
    #et-boc header .header-main .col-nav *:not( .button__toggle-menu, .button__toggle-menu__line ) {
        position:unset!important;
    }


    /* $COMPANY LOGOTYPE */

    .et-db #et-boc header:has( .container__header-nav.open ) .et_pb_column.col-brand-identity img {
        filter:none!important;
    }

    /* $BUTTON TOGGLE MENU */

    #et-boc header .header-main .button__toggle-menu {
        display:flex;

        position:relative;
        z-index:2;
    }

    #et-boc header:has( .container__header-nav.open ) .header-main .button__toggle-menu .button__toggle-menu__line {
        background-color:var(--color-black-eerie);
    }

    /* $NAV */

    #et-boc header .header-main .container__header-nav > div:not( .button__toggle-menu )  {
        width:100vw;

        visibility: hidden;
        
        position:absolute!important;
        top:100%;
        left:calc( 0px - var(--gap-s) );
        z-index:1;
    }
    #et-boc header .header-main .container__header-nav.open > div:not( .button__toggle-menu ) {
        display:flex;

        visibility: visible;
    }

    #et-boc header .header-main .nav-main {
        width:100%!important; 

        flex-direction: column!important;
        column-gap:0px!important;
    }

    #et-boc header .header-main .container__header-nav .nav-main::after {
        width:100%; 
        height:0;

        position:absolute;
        bottom:0;
        z-index:0;

        content:'';

        background-color:var(--color-white);

        transition:var(--animation-transition-02);
    }
    #et-boc header .header-main .container__header-nav.open .nav-main::after {
        height:calc( 100% + 96px ); 
    }

    .et-db #et-boc header.et-l .header-main .nav-main li {
        display:flex!important;
        align-items:center!important;

        padding:0;
        margin:0!important;

        position:relative!important;
        right:10%!important;
        z-index:1;

        opacity:0;

        transition: var(--animation-transition-02);
        transition-delay: calc(1/6*1s);
    }
    .et-db #et-boc header.et-l:has( .container__header-nav.open ) .header-main .nav-main li {
        right:0%!important;

        opacity: 1;

        transition-delay: 0s;
    }

    .et-db #et-boc header.et-l .header-main .nav-main li > a {
        width:100%!important; 

        padding:12px var(--gap-s)!important;
        
        color:var(--color-black-eerie)!important;
    }
    .et-db #et-boc header.et-l .header-main .nav-main li > a:hover {
        color:var(--color-black-eerie)!important;
    }

    .et-db #et-boc header.et-l .header-main .nav-main > li.menu-item--featured > a {
        padding:12px var(--gap-s)!important;

        color:var(--color-white)!important;

        background-color: var(--color-orange-06)!important;

        border-radius: 0!important;
        border:0px!important;
    }
    .et-db #et-boc header.et-l .header-main .nav-main > li.menu-item--featured > a:hover {
        background-color:var(--color-orange-06)!important;

        border-color:var(--color-gray-smoke);
    }
    .et-db #et-boc header.et-l.scroll-y\>0 .header-main .nav-main > li.menu-item--featured > a {
        border:0!important;
    }
    .et-db #et-boc header.et-l:has( .container__header-nav.open ) .header-main .nav-main > li.menu-item--featured > a {
        background-color:var(--color-orange-06)!important;
    }
    .et-db #et-boc header.et-l:not( :has( .container__header-nav.open ) ) .header-main .nav-main > li.menu-item--featured > a{
        background-color:transparent!important;
    }

    .et-db #et-boc header.et-l .header-main .nav-main > li > a::after {
        content:none!important;
    }

}

@media ( max-width:767px ) {

    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*-------------------------------------%DEFAULT-----------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    /*--------------------------------------------------------------------------------*/
    
    /*--------------------------------------------------------------------------------*/
    /*-----------------------------------%HEADER MAIN---------------------------------*/
    /*--------------------------------------------------------------------------------*/

    #et-boc header .header-main {
        padding:24px 0px!important;
    }

    .et-db #et-boc .et-l .et_pb_column.col-brand-identity {
        width:fit-content!important; 

        position:relative!important;
        z-index:9!important;
    }

    #et-boc header .header-main .col-nav {
        order:-1;
        justify-content: flex-start!important;
    }
    #et-boc header .header-main .col-nav,
    #et-boc header .header-main .col-nav *:not( .button__toggle-menu, .button__toggle-menu__line ) {
        position:unset!important;
    }


    /* %COMPANY LOGOTYPE */

    .et-db #et-boc header:has( .container__header-nav.open ) .et_pb_column.col-brand-identity img {
        filter:none!important;
    }

    /* %BUTTON TOGGLE MENU */

    #et-boc header .header-main .button__toggle-menu {
        display:flex;

        position:relative;
        z-index:2;
    }

    #et-boc header:has( .container__header-nav.open ) .header-main .button__toggle-menu .button__toggle-menu__line {
        background-color:var(--color-black-eerie);
    }

    /* %NAV */

    #et-boc header .header-main .container__header-nav > div:not( .button__toggle-menu )  {
        width:100vw;

        visibility: hidden;
        
        position:absolute!important;
        top:100%;
        left:calc( 0px - var(--gap-s) );
        z-index:1;
    }
    #et-boc header .header-main .container__header-nav.open > div:not( .button__toggle-menu ) {
        display:flex;

        visibility: visible;
    }

    #et-boc header .header-main .nav-main {
        width:100%!important; 

        flex-direction: column!important;
        column-gap:0px!important;
    }

    #et-boc header .header-main .container__header-nav .nav-main::after {
        width:100%; 
        height:0;

        position:absolute;
        bottom:0;
        z-index:0;

        content:'';

        background-color:var(--color-white);

        transition:var(--animation-transition-02);
    }
    #et-boc header .header-main .container__header-nav.open .nav-main::after {
        height:calc( 100% + 96px ); 
    }

    .et-db #et-boc header.et-l .header-main .nav-main li {
        display:flex!important;
        align-items:center!important;

        padding:0;
        margin:0!important;

        position:relative!important;
        right:10%!important;
        z-index:1;

        opacity:0;

        transition: var(--animation-transition-02);
        transition-delay: calc(1/6*1s);
    }
    .et-db #et-boc header.et-l:has( .container__header-nav.open ) .header-main .nav-main li {
        right:0%!important;

        opacity: 1;

        transition-delay: 0s;
    }

    .et-db #et-boc header.et-l .header-main .nav-main li > a {
        width:100%!important; 

        padding:12px var(--gap-s)!important;
        
        color:var(--color-black-eerie)!important;
    }
    .et-db #et-boc header.et-l .header-main .nav-main li > a:hover {
        color:var(--color-black-eerie)!important;
    }

    .et-db #et-boc header.et-l .header-main .nav-main > li.menu-item--featured > a {
        padding:12px var(--gap-s)!important;

        color:var(--color-white)!important;

        background-color: var(--color-orange-06)!important;

        border-radius: 0!important;
        border:0px!important;
    }
    .et-db #et-boc header.et-l .header-main .nav-main > li.menu-item--featured > a:hover {
        background-color:var(--color-orange-06)!important;

        border-color:var(--color-gray-smoke);
    }
    .et-db #et-boc header.et-l.scroll-y\>0 .header-main .nav-main > li.menu-item--featured > a {
        border:0!important;
    }
    .et-db #et-boc header.et-l:has( .container__header-nav.open ) .header-main .nav-main > li.menu-item--featured > a {
        background-color:var(--color-orange-06)!important;
    }
    .et-db #et-boc header.et-l:not( :has( .container__header-nav.open ) ) .header-main .nav-main > li.menu-item--featured > a{
        background-color:transparent!important;
    }

    .et-db #et-boc header.et-l .header-main .nav-main > li > a::after {
        content:none!important;
    }

}