/* == Wojo Menu == */
nav.wojo.menu {
}
.wojo.button.mobile-button {
   display: none;
}
nav.wojo.menu > ul {
   margin: 0 auto;
   list-style: none;
   padding: 0;
   display: flex;
   flex-flow: row wrap;
   position: relative;
   box-sizing: border-box;
}
nav.wojo.menu > ul > li {
   padding: 0;
   margin: 0;
   min-width: 0;
   flex: 0 0 auto;
   width: auto;
   max-width: none;
   white-space: nowrap;
   display: flex;
   align-items: center;
}
nav.wojo.menu > ul > li a,
nav.wojo.menu > ul > li.has-dropdown > a {
   text-decoration: none;
   padding: 1rem 0 1rem 2rem;
   display: inline-flex;
   color: var(--primary-color-inverted);
}
nav.wojo.menu > ul > li a {
   padding: 1rem 2rem;
}
nav.wojo.menu > ul > li > span {
   padding: 0 .5rem;
   display: inline-flex;
   color: var(--light-color);
}
nav.wojo.menu > ul > li.active,
nav.wojo.menu > ul > li:hover {
   background: var(--light-color-shadow);
   border-radius: .5rem;
}
nav.wojo.menu > ul > li:hover > a,
nav.wojo.menu > ul > li:hover > span {
   color: var(--light-color);
}
nav.wojo.menu > ul > li > ul {
   opacity: 0;
   visibility: hidden;
   display: flex;
   flex-flow: row wrap;
   background: var(--white-color);
   padding: 0;
   position: absolute;
   top: 100%;
   width: 100%;
   z-index: 99;
   left: 0;
   margin: 0;
   list-style: none;
}
nav.wojo.menu > ul > li > ul > li {
   margin: 0;
   padding-bottom: 0;
   list-style: none;
   min-width: 0;
   background: none;
}
nav.wojo.menu > ul > li > ul.cols-2 > li,
nav.wojo.menu > ul > li > ul.cols-3 > li,
nav.wojo.menu > ul > li > ul.cols-4 > li {
   position: relative
}
nav.wojo.menu > ul > li > ul.cols-2 > li::after,
nav.wojo.menu > ul > li > ul.cols-3 > li::after,
nav.wojo.menu > ul > li > ul.cols-4 > li::after {
   position: absolute;
   content: "";
   top: 50%;
   right: -.875rem;
   width: 1px;
   height: 70%;
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
   background-color: var(--primary-color-inverted);
}
nav.wojo.menu > ul > li > ul.cols-2 {
   width: 50%;
}
nav.wojo.menu > ul > li > ul.cols-3 {
   width: 75%;
}
nav.wojo.menu > ul > li > ul.cols-4 {
   width: 100%;
}
nav.wojo.menu > ul > li > ul.cols-2 > li {
   flex: 0 0 calc((100% - 1.5rem) / 2);
   max-width: calc((100% - 1.5rem) / 2);
}
nav.wojo.menu > ul > li > ul.cols-3 > li {
   flex: 0 0 calc((100% - 3rem) / 3);
   max-width: calc((100% - 3rem) / 3);
}
nav.wojo.menu > ul > li > ul.cols-4 > li {
   flex: 0 0 calc((100% - 4.5rem) / 4);
   max-width: calc((100% - 4.5rem) / 4);
}
nav.wojo.menu > ul > li > ul.cols-2 > li:last-child::after,
nav.wojo.menu > ul > li > ul.cols-3 > li:last-child::after,
nav.wojo.menu > ul > li > ul.cols-4 > li:last-child::after {
   display: none;
}
nav.wojo.menu > ul > li > ul > li:last-child {
   margin-right: 0;
}
nav.wojo.menu > ul > li > ul > li a {
   color: var(--dark-color);
   padding: 1rem;
   display: block;
   font-weight: 600;
   font-size: .750rem;
}
nav.wojo.menu > ul > li > ul > li > ul {
   display: flex;
   flex-direction: column;
   padding: 0;
   margin: 1rem;
   list-style: none;
   box-sizing: border-box;
}
nav.wojo.menu > ul > li > ul > li > ul > li {
   margin: 0;
}
nav.wojo.menu > ul > li > ul > li > ul > li a {
   border: 0;
   padding: .5rem;
   font-weight: normal;
   font-size: .875rem;
}
nav.wojo.menu > ul > li > ul > li > ul > li a:hover {
   color: var(--primary-color);
}
nav.wojo.menu > ul > li > ul.normal-sub {
   width: 300px;
   left: auto;
   padding: 1rem;
   border-radius: 1rem;
   flex-direction: column;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
   box-shadow: 0 50px 100px rgba(50, 50, 93, .1), 0 15px 35px rgba(50, 50, 93, .15), 0 5px 15px rgba(0, 0, 0, .1);
}
nav.wojo.menu > ul > li > ul.mega-sub {
   box-shadow: 0 50px 100px rgba(50, 50, 93, .1), 0 15px 35px rgba(50, 50, 93, .15), 0 5px 15px rgba(0, 0, 0, .1);
}
nav.wojo.menu > ul > li.has-dropdown:hover > ul {
   -webkit-animation-name: slideInUp;
   animation-name: slideInUp;
   -webkit-animation-duration: 0.2s;
   animation-duration: 0.2s;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
}
nav.wojo.menu > ul > li > ul.normal-sub > li {
   min-width: 0;
   flex: 0 0 100%;
   max-width: 100%;
}
nav.wojo.menu > ul > li > ul.normal-sub > li a {
   border: 0;
   padding: .750rem 1rem .750rem 1.5rem;
   font-weight: 500;
   font-size: .875rem;
   border-radius: .5rem;
   position: relative;
}
nav.wojo.menu > ul > li > ul.normal-sub > li a::before {
   position: absolute;
   z-index: 2;
   content: "";
   width: .25rem;
   height: .250rem;
   background-color: var(--grey-color);
   left: .5rem;
   top: 50%;
   border-radius: .5rem;
   transform: translate(0, -50%);
}
nav.wojo.menu > ul > li > ul.normal-sub > li a.active,
nav.wojo.menu > ul > li > ul.normal-sub > li a:hover {
   color: var(--primary-color);
   background-color: var(--grey-color-300);
}
nav.wojo.menu > ul > li > ul.normal-sub > li a:hover::before {
   background-color: var(--primary-color);
}
@media only screen and (max-width: 768px) {
   .wojo.button.mobile-button {
      display: inline-flex;
   }
   nav.wojo.menu > ul > li > span {
      cursor: pointer;
   }
   nav.wojo.menu > ul > li {
      display: flex;
      flex-flow: row wrap;
   }
   nav.wojo.menu > ul > li a {
      flex: 1 1 0;
      min-width: 0;
      padding: 1rem;
   }
   nav.wojo.menu > ul > li > ul {
      display: none;
      flex-direction: column;
      opacity: 1;
      position: relative;
      visibility: visible;
   }
   nav.wojo.menu > ul > li > ul.normal-sub {
      box-shadow: none;
      opacity: 1;
      transition: none;
      visibility: visible;
      width: 100%;
   }
   nav.wojo.menu > ul > li.has-dropdown:hover > ul {
      -webkit-animation-duration: 0s;
      -webkit-animation-name: none;
      -webkit-backface-visibility: visible;
      animation-duration: 0s;
      animation-name: none;
      backface-visibility: visible;
      opacity: 1;
      pointer-events: auto;
      visibility: visible;
   }
   nav.wojo.menu > ul > li > ul.cols-2,
   nav.wojo.menu > ul > li > ul.cols-3,
   nav.wojo.menu > ul > li > ul.cols-4 {
      width: 100%;
   }
   nav.wojo.menu > ul > li > ul > li,
   nav.wojo.menu > ul > li > ul.cols-2 li,
   nav.wojo.menu > ul > li > ul.cols-3 li,
   nav.wojo.menu > ul > li > ul.cols-4 li {
      flex: 0 0 100%;
      margin: 0;
      max-width: 100%;
      min-width: 0;
   }
   nav.wojo.menu > ul > li > ul > li:first-child {
      margin: 0;
   }
   nav.wojo.menu > ul > li > ul > li > ul {
      position: relative;
   }
   nav.wojo.menu > ul > li > ul > li > ul > li {
      float: none;
   }
   nav.wojo.menu .show-on-mobile {
      display: flex;
      flex-direction: column;
   }
   nav.wojo.menu > ul,
   nav.wojo.menu > ul > li > ul.cols-2 > li:after,
   nav.wojo.menu > ul > li > ul.cols-3 > li::after,
   nav.wojo.menu > ul > li > ul.cols-4 > li::after {
      display: none;
   }
}