/*
   These styles are needed to make the module work
   its is not recommended that anything is changed 
   here. Instead, override styles in the user folder
   or add styles to _header.css. This will maximize 
   framework portability.
*/


.sg-header__desktop {display: none;}
.sg-header__mobile {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   position: relative;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
}

.sg-header__mobile .mobile-nav__container {
   position: fixed;
   right: 0;
   top: 0;
   bottom: 0;
   min-width: 100%;
   min-height: calc(100vh - 100%);
   -webkit-transition: all .2s linear;
   -o-transition: all .2s linear;
   transition: all .2s linear;
   overflow-y: auto;
   z-index: -1;
   -webkit-transform: translateX(100%);
       -ms-transform: translateX(100%);
           transform: translateX(100%);

}
.mfp-container .mfp-content {
  text-align: center;
}
/* search modal styles */
#sg-search-modal,
.sg-search-modal__input-container,
#sg-search-modal .search-floater {
    display: flex;
    text-align: center;
    position: relative;
    min-width: 210px;
    padding-left: 5px;
    justify-content: flex-end;
}
}

.sg-header__mobile.hamburger_only .mobile-nav__container {
   position: fixed;
   left: 100%;
   top: 0;
   bottom: 0;
   min-width: 100%;
   min-height: calc(100vh - 100%);
   -webkit-transition: all .2s linear;
   -o-transition: all .2s linear;
   transition: all .2s linear;
   overflow-y: auto;
}
.sg-header__mobile .mobile-nav__container.open {
   /* left: 0; */
   -webkit-transform: translateX(0);
       -ms-transform: translateX(0);
           transform: translateX(0);
}
.sg-header__mobile.hamburger-only {
   background-color: transparent;
}
.sg-header__mobile .logo-container .logo-white {
   display: none;
}
.sg-header__mobile.hamburger-only .hamburger-container {
   position: fixed;
   top: 20px;
   right: 20px;
   -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .15);
           box-shadow: 0 0 10px rgba(0, 0, 0, .15);
}
.sg-header__mobile .main-nav {
   padding-top: 5px;
}
.sg-header__mobile.hamburger_only .main-nav {
   padding-top: 50px;
}
.sg-header__mobile .hamburger-container {
   width: 50px;
   height: 50px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   -ms-flex-wrap: nowrap;
       flex-wrap: nowrap;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   border-radius: 100px;
   z-index: 1000;
   cursor: pointer;
}
.sg-header__mobile .hamburger__top,
.sg-header__mobile .hamburger__middle,
.sg-header__mobile .hamburger__bottom {
   display: block;
   width: 27px;
   height: 3px;
   border-radius: 5px;
   margin-left: 0;
   margin-right: 0;
}
.sg-header__mobile .hamburger__top,
.sg-header__mobile .hamburger__bottom {
   margin: 0;
}
.sg-header__mobile .hamburger__middle {
   margin-bottom: 4px;
   margin-top: 4px;
}
.sg-search-modal__input-container input {
  -webkit-appearance: none;
}
.sg-header__desktop .mega-exclusion {
   position: relative;
}
.sg-header__desktop .mega-exclusion .mega-inner {
   width: auto;
   min-width: 100%;
   padding-top: 10px;
}

.sg-header__desktop .mega-exclusion .ul-level-2 {
   flex-direction: column;
   padding: 0;
   flex: 1;
   gap: 7px;
   flex-wrap: nowrap;
}
.sg-header__desktop .mega-exclusion .ul-level-2 a {
   color: white; 
   font-size: 14px;
   font-weight: 400!important;
   white-space: nowrap;
}

 section.nav-container .main-nav .active-branch ul {
/*     gap: 30px; */
    font-family: "Open Sans", sans-serif;
   font-weight: 400;
  }



@media (max-width: 1030px) {
  section.nav-container .main-nav .active-branch ul {
    gap: 0px;
  }
}
@media screen and (max-width: 952px) {

  /* search modal styles */
  #sg-search-modal,
  .sg-search-modal__input-container,
  #sg-search-modal .search-floater {
    min-width: unset;
  }
}


@media screen and (min-width: 952px) {
   .sg-header__mobile {display: none;}
   .sg-header__desktop {display: block;}
   .sg-header__desktop .header-inner {
      width: 100%;
      min-width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
/*       display: flex; */
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      /* position: relative; */
   }
   .sg-header__desktop .nav-container {
      -webkit-box-flex: 1;
          -ms-flex: 1 1 80%;
              flex: 1 1 80%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-align: end;
          -ms-flex-align: end;
              align-items: flex-end;
   }
   .sg-header__desktop .logo-container {
      -webkit-box-flex: 1;
          -ms-flex: 1 1 11%;
              flex: 1 1 11%;
      position: relative;
   }
   .sg-header__desktop .logo-container a {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; 
   }
   .sg-header__desktop .nav-container {
      padding-top: 15px;
      padding-bottom: 15px;
   }
   .sg-header__desktop .nav-container a {
      text-decoration: none;
      display: block;
   }
  .sg-header__desktop .main-nav, 
  .sg-header__desktop .courtesy-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #sg-site-search {
    padding-right: 5px; 
  }
   
 
  
  .sg-header__desktop .main-nav #sg-site-search svg {
    height: 20px;
    width: 20px;
    vertical-align: middle;
  }
   .sg-header__desktop .courtesy-nav #sg-site-search svg {
    height: 16px;
    width: 18px;
  }
   .sg-header__desktop .main-nav .hs-menu-depth-1 a {
      padding: 10px 12px;
      font-weight: 600;
/*       padding-bottom: 20px; */
   }
   .sg-header__desktop .courtesy-nav ul li a {
      font-size: 12px;
      padding: 0 12px;
   }
   .sg-header__desktop .logo-container img {
      width: 100%;
      min-width: 100%;
      max-width: 240px;
      height: auto;
   }
}

input#sc-site-header__search-field {
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: .5px solid #DCDCDC;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

input#sc-site-header__search-field textarea {
    color: #4a4a4a!important;
}

/* .sg-header__mobile > a.download-catalog {
   background-color: #00a19a;
   bottom: -42px;
   color: #fff;
   font-weight: 700;
   left: 0;
   padding: 15px 0;
   position: absolute;
   text-align: center;
   text-decoration: none;
   width: 100%;
   z-index: -1;
   font-size: 10px;
} */

.hs-search-field__input {
  box-sizing: border-box;
  width: 100%;
  flex: 1; 
}

.hs-search-field__bar button svg {
    height: 27px;
    fill: white;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

article#sg-search-modal {
    height: 40px;
}

.hs-menu-wrapper ul {
  flex-wrap: nowrap!important;
}

.container-fluid.main,
.header-wrapper,
main.body-container-wrapper {
/*     max-width: 1380px!important; */
    margin: 0 auto!important;
/*     padding-left: 10px;
    padding-right: 10px; */
}

div#hs_cos_wrapper_module_16995717643132 {
    padding-left: 10px;
    padding-right: 10px;
}

input::placeholder {
  color: #4a4a4a;
}


nav.main-nav,
section.nav-container {
  font-size: 16px!important;

}