/* Header */

.main-header { padding: 20px 20px 0; }
.main-header .home-link { display: none }


#mobile-nav-toggle:checked .menu-close {
  display: block;
}

nav ul {
  padding-left: 0;
  white-space: normal;
  /* Hack for Edge to hide the list bullets in the main nav dropwdowns on Desktop */
  list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}

.main-header .hide-children ~ .nav-child { display: none !important }


/* Mobile Nav Icon */

#mobile-nav-toggler { position: absolute; top: 40px; right:20px; z-index: 16; }
#mobile-nav-toggler svg { fill: #007BC6; }
#mobile-nav-toggler rect {  transform: rotate(0) translate3d(0, 0, 0); transition: 0.5s all cubic-bezier(0.19, 1, 0.22, 1); }

#mobile-nav-toggle:checked ~ .custom .mobile-nav { transform: translateX(0) }
#mobile-nav-toggle:checked ~ #mobile-nav-toggler svg { fill: white }

#mobile-nav-toggle:checked ~ #mobile-nav-toggler .nav-toggle-rect-2 { display: none; }
#mobile-nav-toggle:checked ~ #mobile-nav-toggler .nav-toggle-rect-1 {transform: rotate(45deg) translate3d(3px, -3px, 0);}
#mobile-nav-toggle:checked ~ #mobile-nav-toggler .nav-toggle-rect-3 {transform: rotate(-45deg) translate3d(-12px, -2px, 0);}

.nav-container { position: relative; }

/* Mobile Nav */

.mobile-nav { overflow-y: scroll; overflow-x: hidden }

.mobile-nav,
.mobile-nav [id ^="mobile-section"] {
  position: fixed;
  z-index: 15;
  top: 6px;
  right: 0;
  width: calc(100vw - 20px);
  height: calc(100vh - 6px);
  padding: 20px;
  background-color: #007BC6;
  transform: translateX(100%);
  transition: 0.3s transform cubic-bezier(0.445, 0.05, 0.55, 0.95),
              0.3s width cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.mobile-nav header {
  position: relative;
  top: -10px;
  margin-bottom: 0;
  padding: 20px 0;
}

.mobile-nav__search {
  position: relative;
  width: 100%;
  margin: 25px 0 30px;
}

.mobile-nav__search input {
  width: 100%;
  font-size: 18px;
  padding: 5px 30px 50px 5px;
  border: 1px solid #41007F;
  -webkit-appearance: none;
  border-radius: 0;
  box-shadow: none;
}
.mobile-nav__search input:focus { outline: #41007F auto 2px; }
.mobile-nav__search label {
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 10px;
  line-height: 0 !important;
  }

.mobile-nav a,
.mobile-nav label {
  color: white !important;
  font-family: 'OpenSans-SemiBold', sans-serif;
  letter-spacing: 0.2px;
  font-size: 18px;
  line-height: 24px;
}

.mobile-nav .external:after {
    content: url('../../images/icons/external-light.svg');
    position: relative;
    top: 0;
    padding-left: 0.5ch;
}

.mobile-nav section li { margin-bottom: 15px; }
.mobile-nav__external-links a { letter-spacing: 0.37; font-size: 14px; line-height: 20px; font-family: 'OpenSans', sans-serif; }


/* Second Levels */
#mobile-nav-input__company:checked ~ .mobile-nav #mobile-section__company,
#mobile-nav-input__products:checked ~ .mobile-nav #mobile-section__products,
#mobile-nav-input__careers:checked ~ .mobile-nav #mobile-section__careers,
#mobile-nav-input__investors:checked ~ .mobile-nav #mobile-section__investors,
#mobile-nav-input__contact:checked ~ .mobile-nav #mobile-section__contact {
  transform: translateX(0)
}

.mobile-nav header [for^="mobile-nav-input"]:before {
  content: url("../../images/icons/arrow.svg");
  height: 10px;
  width: 5px;
  margin-left: -10px;
  padding-right: 0.5ch;
}


[for="desktop-search-toggle"] svg { fill: #41007F }
[for="desktop-search-toggle"]:hover svg { fill: #007BC6 }

.desktop-search {
  position: absolute;
  top: -10px;
  right: 20px;
  border: 0;
  width: 0;
  overflow: hidden;
  color: transparent;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s opacity ease-in-out;
}

#desktop-search-toggle:checked + input {
  width: calc(100% - 20px);
  border: 1px solid #B6B6B7;
  color: #858588;
  padding: 10px 20px;
  font-size: 15px;
  opacity: 1;
  pointer-events: all;
}

.mobile-nav .menu-item-type-custom a:after {
  content: url(/wp-content/themes/kla-wp/assets/images/icons/external-light.svg);
  position: relative;
  left: 10px;
  display: inline-block;
}


/* Media queries */

@media only screen and (min-width: 768px) {
  .pre-header > .inner { height: 36px; }

  .mobile-nav,
  .mobile-nav [id ^="mobile-section"] {
    top: 36px;
    width: 240px;
    height: calc(100vh - 36px);
    padding: 20px;
  }

  .mobile-nav [id ^="mobile-section"] {
    position: absolute;
    width: calc(100% - 240px);
    min-width: 35px;
    height: 100%;
    padding: 20px;
  }

  [id ^="mobile-nav-input"]:checked  ~ .mobile-nav { width: 480px; }

  .mobile-nav [id ^="mobile-section"] { top: 0; padding-top: 160px  }

  .mobile-nav header {
    margin: 80px 0 30px;
    top: 0;
    padding: 0;
    width: 260px;
  }
  .mobile-nav [id ^="mobile-section"] header {
    display: none;
  }
  .mobile-nav [id ^="mobile-section"] a,
  .mobile-nav [id ^="mobile-section"] label {
    font-size: 15px;
  }

  .mobile-nav .external:after {
    top: 1px;
  }

  .mobile-nav li label:after {
    content: url("../../images/icons/arrow.svg");
    display: inline-block;
    right: 20px;
    transform: scaleX(-1.5) scaleY(1.5);
    transition: 0.2s opacity;
    position: absolute;
  }

  .mobile-nav section li label, .mobile-nav section li a {
    background: transparent;
    transition: 0.3s background ease-in-out;
    width: 240px;
    display: block;
    padding: 10px 20px;
    margin: -10px -20px;
  }

  [id ^="mobile-section"] {
    background: linear-gradient(90deg, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0));
    background-size: 120px 100%;
    background-repeat: no-repeat;
  }

  [id ^="mobile-section"] ul { margin: 0; }

  .mobile-nav li > * {
    width: 130px;
    display: block;
    position: relative;
  }

  [id ^="mobile-section"] li > * {
    width: 190px;
    font-family: 'OpenSans', sans-serif;
  }

  .mobile-nav__search { width: 200px; }

}

@media only screen and (min-width: 1024px) {
  .pre-header li:last-of-type { margin-right: 0; }
  .main-header { padding: 30px 0 0; }
  .hide-children > * { display: none }
  .nav-container {
    display: flex;
    justify-content: space-between;
  }
  .mobile-nav-toggle { display: none }
}


@media only screen and (min-width: 1480px) {
  .pre-header { font-size: 15px; }
  .pre-header > .inner { height: 40px; }
}

@media only screen and (max-width: 1023px) {
  #top_menu {
    display: none;
  }
}

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

}










/* Menu General Styles */


/* Level 1 */

.main-header .nav.menu > li > a {
  margin-right: 30px;
  font-family: 'OpenSans-SemiBold', sans-serif;
}



.nav.menu.button.dropdown {
  margin-left: 30px;
}

.nav.menu.button.dropdown>div:not(.dropdown-container) {
  position: relative;
  z-index: 11;
}

.nav.menu.button.dropdown .dropdown-container {
  position: absolute;
  top: 95%;
  z-index: 10;
  width: 110%;
  left: -5%;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid #eeeeee;
  opacity: 0;
  transition: opacity .25s ease-in-out, visibility .25s;
  visibility: hidden;
}

.nav.menu.button.dropdown:hover .dropdown-container {
  opacity: 1;
  visibility: visible;
}

.nav.menu.button.dropdown .dropdown-container li {
  padding: 0;
  width: 100%;
  text-align: left;
  background: #ffffff;
  border-top: 1px solid #eee;
}

.nav.menu.button.dropdown .dropdown-container li:hover {
  background: #f5f5f5;
}

.nav.menu.button.dropdown .dropdown-container li:first-of-type {
  border-top-width: 1px;
}

.nav.menu.button.dropdown .dropdown-container li a {
  display: block;
  width: 100%;
  padding: 10px 20px 35px;
}

.nav.menu.button.dropdown .dropdown-container li.external a:after {
  display: inline-block;
  content: "";
  width: 14px;
  height: 14px;
  background: url(../../images/icons/external-dark.svg) no-repeat 0 0;
  align-self: center;
  margin-left: 15px;
  opacity: 0.3;
  position: absolute;
  right: 20px;
}