/****************************
 * Sticky Header
****************************/
.site-nav--desktop {
    position:fixed; top:0; left:0; right:0; z-index:30;
    background:#fff; transition:var(--twc-transition);
}
.site-nav--row.main {--twc-container:1280px;}
@media only screen and (min-width:1920px) {
    .site-nav--row.main {
        --twc-container:1640px;
    }
}
.site-nav--row.main:before {
    content:""; display:block; pointer-events:none;
    width:100%; height:1px; background:rgba(112, 112, 112, .2);
    position:absolute; bottom:0; left:0; z-index:20;
}
.site-nav--row__inner {
    height:calc(var(--twc-header-height) - var(--twc-header-top-height));
    transition:var(--twc-transition);
}


/* Scroll middle down: hide header */
html:not(.accordion-moving) .scroll-middle.scroll-down:not(.scroll-bottom) .site-nav--desktop {opacity:0; transform:translateY(-100%);}

/* Scroll middle up: show header with separator */
.scroll-up:not(.scroll-top) .site-nav--desktop:not(.no-usp-top),
.scroll-bottom .site-nav--desktop:not(.no-usp-top) {
    transform:translateY(calc(0px - var(--twc-header-top-height)));
}
.scroll-up:not(.scroll-top) .site-nav--row__inner,
.scroll-bottom .site-nav--row__inner {height:var(--twc-header-height-sticky);}

/* Scroll middle: adjust space menu */
.scroll-up:not(.scroll-top) .desktop-menu ul.sub-menu,
.scroll-bottom .desktop-menu ul.sub-menu {top:-5px; padding-top:50px;}

/****************************
 * USP top
****************************/
.site-nav__usp-top {
    font-size:var(--twc-size-14);
    height:var(--twc-header-top-height); padding:15px var(--twc-gap-side);
    background:var(--twc-color-secondary);
}

/****************************
 * Desktop Menu
****************************/
/* LOGO */
.nav-logo-link {display:block; height:43px;}
.nav-logo-link img {height:100%; width:auto;}

/* HAMBURGER MENU */
.hamburger {margin-left:var(--twc-gap-container);}
button.nav-hamburger {padding:5px 0; background:none;}
.nav-hamburger--lines {display:block; width:20px; height:16px; position:relative;}
.nav-hamburger--lines i {
    position:absolute; right:0;
    display:block; width:100%; height:2px; background:var(--twc-color-black);
    transition:var(--twc-transition);
}
.nav-hamburger--lines i:nth-child(1) {top:0;}
.nav-hamburger--lines i:nth-child(2) {top:7px;}
.nav-hamburger--lines i:nth-child(3) {bottom:0; width:13px;}
.menu-open .nav-hamburger--lines i:nth-child(1) {transform:rotate(45deg); top:7px;}
.menu-open .nav-hamburger--lines i:nth-child(3) {transform:rotate(-45deg); bottom:7px; width:100%;}
.menu-open .nav-hamburger--lines i:nth-child(2) {width:0; left:50%;}

/* DESKTOP MENU */
.desktop-menu ul {
    --item-menu-color:var(--twc-color-black);
    --item-menu-color-hover:var(--twc-color-primary);
    --item-menu-weight:500;
    --item-menu-weight-hover:700;
    list-style:none; margin:0;
}
.desktop-menu ul > li {padding:0; position:relative;}
.desktop-menu ul > li > a {
    text-decoration:none;
    color:var(--item-menu-color);
    font-weight:var(--item-menu-weight);
}
.desktop-menu ul > li > a:hover, .desktop-menu ul > li > a:focus,
.desktop-menu ul > li[class*="current"] > a {color:var(--item-menu-color-hover);}
.desktop-menu ul > li[class*="current"] > a {font-weight:var(--item-menu-weight-hover);}
.desktop-menu ul > li > a:focus-visible {
    outline:2px solid var(--twc-color-secondary); border-radius:3px; transition:none;
}
.desktop-menu ul.sub-menu ul.sub-menu {display:none;}

/* DESKTOP MENU > Lv1 */
.desktop-menu ul.menu {display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.desktop-menu ul.menu > li {}
.desktop-menu ul.menu > li:not(:last-child) {margin-right:40px;}
.desktop-menu ul.menu > li > a {font-size:var(--twc-size-16);}
.desktop-menu ul.menu > li:hover, .desktop-menu ul.menu > li:hover a {position:relative; z-index:10;}

/* DESKTOP MENU > Lv1 has submenu */
.desktop-menu ul.menu > li[class*="has-child"] > a:after {
    content:"\e931"; font-family:var(--twc-font-icomoon); font-size:.6em;
    margin-left:10px; display:inline-block; font-weight:700;
    transition:transform .3s ease;
}
.desktop-menu ul.menu > li[class*="has-child"]:hover > a:after {transform:rotate(180deg);}

/* DESKTOP MENU > Lv2 */
.desktop-menu li:not(:hover) > ul.sub-menu {opacity:0; visibility:hidden; pointer-events:none;}
.desktop-menu ul.sub-menu {
    --item-menu-color:rgba(35, 31, 32, .5);
    --item-menu-weight:400;
    position:absolute; top:-20px; left:-20px; min-width:calc(100% + 40px);
    background:#f6f6f6; padding:90px 0 10px;
    transition:var(--twc-transition);
}
.desktop-menu ul.sub-menu > li {}
.desktop-menu ul.sub-menu > li > a {
    display:block; padding:10px 20px;
    white-space:nowrap; font-size:var(--twc-size-16);
}
.desktop-menu ul.menu > li:last-child ul.sub-menu {left:auto; right:-20px;}

/* DESKTOP MENU > submenu animation (search submenuAnimationDelay to edit stagger time) */
.desktop-menu ul.menu > li[class*="has-child"]:hover > ul.sub-menu > li {
    animation:slide-fade-in .4s ease forwards;
    opacity:0;
}
@keyframes slide-fade-in {
    0% {transform:translate(-15px); opacity:0;}
    100% {transform:translate(0); opacity:1;}
}

/* Top menu */
.site-nav-col__top {margin-bottom:6px;}
.site-nav-col__top .desktop-menu {line-height:1;}
.site-nav-col__top .desktop-menu ul {
    --item-menu-color:rgba(35, 31, 32, .5);
    --item-menu-weight:400;
}
.site-nav-col__top .desktop-menu ul > li:not(:last-child) {padding-right:35px; margin-right:35px; border-right:1px solid #dbdbdb;}
.site-nav-col__top .desktop-menu ul > li > a {font-size:var(--twc-size-15);}

/****************************
 * Desktop Menu Responsive
****************************/
@media only screen and (max-width:1439px) {
    .desktop-menu ul.menu > li:not(:last-child) {margin-right:30px;}
    .desktop-menu ul.menu > li[class*="has-child"] > a:after {margin-left:5px;}

    /* Top menu */
    .site-nav-col__top .desktop-menu ul > li:not(:last-child) {margin-right:30px; padding-right:30px;}
}
@media only screen and (max-width:1180px) {
    /* Top menu */
    .site-nav-col__top {margin-bottom:0;}
}
@media only screen and (max-width:480px) {
    /* USP Top */
    .site-nav__usp-top {
        align-items:flex-end;
    }
}