.invisible-label,

.invisible-checkbox {position: fixed; opacity: 0; left: 0;top: 0;pointer-events: none}



/*

menu

*/

:root{

  --topbar-h: 96px;

}

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

  :root{

    --topbar-h: 85px;

  }

}

.site-header  {

  --menu-bg-color: var(--bg);

  --menu-color: var(--text);

  --menu-color-active: var(--primary);

  --menu-font: var(--font-title);

  --menu-weight: 500;

  --menu-width: auto;

  --submenu-bg : #fff;

  padding-block:1rem;padding-inline: var(--s-pad-inline);

  display: flex;align-items: center;justify-content: flex-start;

  background-color: var(--menu-bg-color);

}



@media screen and (max-width:767px) {

  .header-fixed-mobile .site-header {position: fixed;top: 0;left: 0;right: 0 ;z-index: 10;}

  .logo-wrap .brand-image{width: auto; height: 60px;display: block }

}

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

  .site-header {padding-block: 0;/*overflow: auto hidden;*/}

}

@media screen and (min-width:1080px) {

  .site-header {overflow: initial;}

}





.invisible-checkbox {position: fixed; opacity: 0; left: 0;top: 0;}

.show-mobile,

.show-desktop {display: none;}

@media screen and (max-width:767px) {

  .show-mobile {display: block;}

}

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

  .show-desktop {display: block;}

}



/* menu icon */

.menu-icon-wrap {display: block;width: 64px;height: 64px;border-radius: 50%;padding: 26px 16px;background: var(--primary);}

.menu-icon { display: block; background: #fff; width: 32px; height: 2px; border-radius: 4px; box-shadow: 0 10px 0px #fff;  }



.toggle-nav a {display: block; color: var(--menu-color); font-family: var(--menu-font); font-size: 1rem; font-weight: var(--menu-weight);  }



@media screen and (max-width:767px) {

  .toggle-nav {background-color: var(--menu-bg-color); position: fixed; top: var(--topbar-h);left: 0; padding: 0; margin: 0; width: 100%;height:100%; transition: transform .5s 0s,visibility 0s 0s; transform: translateY(-100%);  z-index: 20; visibility: hidden;}

  .toggle-nav a {padding: 1rem; font-family: var(--font-base);}

  .toggle-nav .current_page_ancestor>a,

  .toggle-nav .current-menu-item>a,

  .toggle-nav a:hover {color:var(--primary); }



  .menu-item-has-children >a>.svg-icon{display: block;stroke: none;width: 1.75rem;height: 1.75rem;	}

  .menu-item-parentlink>a>.svg-icon,

  .menu-item-no-children >a>.submenu-arrow{display: none;}

  .parent-menu-link:hover>.svg-icon,

  .menu-item>a:hover>.svg-icon {fill: currentColor;stroke: none}

  .toggle-nav .menu-item-has-children>a{display: flex; justify-content: space-between; align-items: center;}





  .bg-close-menu {position: fixed;}

  #navcheck:checked ~ .toggle-nav {transform: translateY(0); visibility: visible;transition: transform .5s 0s,visibility 0s 0s;}

  #navcheck:checked ~ .bg-close-menu {background: rgba(0,0,0,.5); left: 0; right: 0; top: var(--topbar-h); height: 100vh; }

  .menu-icon-close {position: relative;width: 50px;height: 50px;display: block;transform: rotateZ(45deg ); overflow: hidden; left: -7px; top: -5px;}

  .menu-icon-close::after,

  .menu-icon-close::before {content:'';position: absolute;background: var(--primary); transform-origin: 0 2px;display: block;}

  .menu-icon-close::before {left: 0;top: calc(50% - 1px);width: 100%;height: 3px; }

  .menu-icon-close::after{left: calc(50% - 2px); top: 1px; width: 3px; height: 100%;}



  .mobile-header {margin-left: auto;}

  .mobile-header .close-menu {display: none;}

  #navcheck:checked ~ .mobile-header .close-menu {display: block;background-color: #fff;padding-block: 12px;}

  #navcheck:checked ~ .mobile-header .open-menu {display: none;}



  .no-js .sub-menu {padding-left: 1rem;}



  .js .sub-menu {

    margin-left: 0;

    visibility: hidden;

    position: absolute;

    top: 0;

    left: 100%;

    width: 100%;

    bottom: 0;

    background-color: var(--bg);

  }

  .js .menu-item:not(.closing-menu) .sub-menu {

    transition: all .2s ease-in-out;

  }

  .js .active-submenu>.sub-menu{visibility: visible;left: 0;}



  .main-navigation .menu-item {border-top: solid 1px rgba(0 0 0 / .15)}

  .main-navigation .menu-item:last-child {border-bottom: solid 1px rgba(0 0 0 / .15)}

}

/* menu desktop */

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



  .toggle-nav {display: flex;justify-content: space-between;align-items: center;margin-left: 2rem   }

  .main-navigation {position: relative;}

  .main-navigation .menu {display: flex;}

  .main-navigation>.menu>.menu-item>a {color: var(--menu-color);padding: 2rem 1rem ;border-bottom: solid 2px transparent;width: var(--menu-width);text-align: center  }



  /* menu active */

  .main-navigation>.menu>.current-menu-ancestor>a,

  .main-navigation>.menu>.current-menu-item>a,

  .main-navigation>.menu>.menu-item>a:hover{color: var(--menu-color-active)}



  .no-js .main-navigation>.menu>.current-menu-ancestor>a,

  .no-js .main-navigation>.menu>.current-menu-item>a,

  .no-js .main-navigation>.menu>.menu-item>a:hover{border-color: var(--menu-color-active);}



  .menu-item-backlink{display: none;}

  .menu-item-parentlink{display: none;}



  .menu-item-has-children:hover,

  .menu-item-has-children:hover>a{position: relative;z-index: 2;}



  /*.main-navigation>.menu>.menu-item-has-children::before {content: '';position: fixed;left: 0;top: 0;width: 100vw;height: 100vh;background: #000;opacity: 0 ;pointer-events: none; z-index: 1;transition: .3s}

  .main-navigation>.menu>.menu-item-has-children:hover::before {opacity: .5 }*/



  .menu-item>a>.submenu-arrow{display: none;}



  /* dot menu */

  .main-navigation>.menu>.menu-item>a{position: relative;}

  .main-navigation>.menu>.menu-item>a::before {

    content: "";

    width: 3px;

    height: 3px;

    background: var(--primary);

    border-radius: 100%;

    position: absolute;

    left: calc(50% - 1px);

    top: 80%;

    transform: translateY(2vw);

    opacity: 0;

    transition: 0.6s cubic-bezier(0.9, 0, 0.1, 1);

  }

  .main-navigation>.menu>.menu-item:hover>a::before,

  .main-navigation>.menu>.current-menu-ancestor>a::before,

  .main-navigation>.menu>.current-menu-item>a::before {

    transform: translateY(0);

    opacity: 1;

  }

}



/* sub menu mobile */

@media screen and (max-width:767px) {

  .main-navigation .sub-menu .image-yes>a>img{vertical-align: middle;margin-right: 1rem ;height: 32px;width: auto;}

  body.menu-is-open {

    overflow: hidden;

    height: 100vh;

  }

}

/* sub menu desktop */

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

  .toggle-nav a {padding:1rem;}

  .main-navigation .sub-menu {position: absolute;top: 100%;left: 50%;transform: translateX(-50%);opacity: 0; visibility: hidden; height: 0; overflow: hidden; transition:opacity .3s ;z-index: 99;background-color: var(--submenu-bg);border-radius: var(--radius)}



  .sub-menu:hover,

  .menu-item-has-children:hover>.sub-menu {

    opacity: 1; visibility: visible; height: auto;

    padding: 0 ;

    display: grid;

    gap: .5rem;

    min-width: 250px;}

  .main-navigation .sub-menu a {text-align: left;padding:1rem;font-family: var(--font-base);font-weight: 400  }



  .main-navigation .sub-menu a:hover,

  .main-navigation .sub-menu .current-menu-item>a {color: var(--menu-color-active)}

  /*.main-navigation .sub-menu a:hover{background-color: var(--primary);color: white}*/



  .main-navigation .sub-menu .image-yes>a {text-align: center;}

  .main-navigation .sub-menu .image-yes>a>img{display: block;margin: 0 auto 1rem;height: 60px;width: auto  }

}



/* top nav */

.top-navigation {margin-left: auto;}