.nav__menu-trigger {
  display: none;
}

.nav {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  color: #000;
  z-index: 100
}

.nav .nav-main-item {
  margin: 0 1rem
}

.nav .nav-main-item .accordion__button {
  font-size: 1.5rem;
  font-weight: 600
}

@media screen and (max-width: 650px) {
  .nav .nav-main-item .accordion__button {
    font-size: 1rem;
    margin-right: 1.5rem
  }
}

.nav .nav-main-item .accordion__content {
  margin-right: .5rem
}

.nav .nav-drop-item {
  display: block;
  background: #000;
  color: #fff;
  width: 100%;
  padding: .75rem
}

.nav .nav-drop-item:hover {
  display: block;
  background: #fff;
  color: #000;
  width: 100%;
  padding: .75rem
}

.nav__inner {
  padding: 3rem 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  color: #000;
  margin-bottom: 2rem
}

.nav__logo-link {
  display: block
}

.nav__logo-link:hover svg,
.nav__logo-link:focus svg {
  fill: #b3b6fc;
  fill: var(--color-toggle-hover)
}

.nav__logo {
  display: none
}

@media(min-width: 768px) {
  .nav__logo {
    height: 54px;
    width: 240px;
    display: block
  }
}

.nav__logo--mobile {
  height: 40px;
  width: 40px
}

@media(min-width: 768px) {
  .nav__logo--mobile {
    display: none
  }
}

.js--menu-active .nav__logo--mobile {
  display: none
}

.nav__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

.nav__items .accordion__inner {
  margin: 0;
  padding-top: 20px
}

.nav__item {
  display: block
}

.nav__menu-button-text {
  font-size: 16px;
  min-height: 1px
}

.nav__item-link {
  cursor: pointer;
  font-weight: 500
}

.nav__item-link:hover,
.nav__item-link:focus {
  -webkit-box-shadow: 0 -1px inset currentColor;
  box-shadow: 0 -1px inset currentColor
}

.nav__item-link:active {
  -webkit-box-shadow: 0 -1px inset rgba(0, 0, 0, .6);
  box-shadow: 0 -1px inset rgba(0, 0, 0, .6)
}

.nav__item-link.active {
  -webkit-box-shadow: 0 -1px inset;
  box-shadow: 0 -1px inset
}

.light-nav .nav {
  color: #fff
}

.light-nav .nav__item-link {
  cursor: pointer
}

.light-nav .nav__item-link:hover,
.light-nav .nav__item-link:focus {
  -webkit-box-shadow: 0 -1px inset currentColor;
  box-shadow: 0 -1px inset currentColor
}

.light-nav .nav__item-link:active {
  -webkit-box-shadow: 0 -1px inset rgba(255, 255, 255, .6);
  box-shadow: 0 -1px inset rgba(255, 255, 255, .6)
}

@media(max-width: 767px) {
  .js--menu-active .nav {
    position: fixed;
    color: #fff
  }

  .js--menu-active .nav__logo-link {
    color: currentColor;
    cursor: pointer
  }

  .js--menu-active .nav__logo-link:hover,
  .js--menu-active .nav__logo-link:focus {
    color: #f5a5ff
  }

  .js--menu-active .nav__logo-link:active {
    color: rgba(255, 255, 255, .6)
  }
}

.nav__menu-trigger {
  color: inherit;
  cursor: pointer;
  display: block;
  padding: 0;
  position: relative
}

@media(min-width: 768px) {
  .nav__menu-trigger {
    display: none
  }
}

.nav__hamburger {
  position: absolute;
  top: 50%;
  right: 7px;
  left: 7px;
  background: currentColor;
  display: block;
  height: 2px
}

.nav__hamburger::before,
.nav__hamburger::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: currentColor;
  content: "";
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%
}

.nav__hamburger::before {
  -webkit-transform: translate3d(0, -6px, 0);
  transform: translate3d(0, -6px, 0)
}

.nav__hamburger::after {
  -webkit-transform: translate3d(0, 6px, 0);
  transform: translate3d(0, 6px, 0)
}

body:not(.js--menu-active) .nav__menu-trigger:hover .nav__hamburger::before,
body:not(.js--menu-active) .nav__menu-trigger:focus .nav__hamburger::before {
  -webkit-transform: translate3d(0, -7px, 0);
  transform: translate3d(0, -7px, 0)
}

body:not(.js--menu-active) .nav__menu-trigger:hover .nav__hamburger::after,
body:not(.js--menu-active) .nav__menu-trigger:focus .nav__hamburger::after {
  -webkit-transform: translate3d(0, 7px, 0);
  transform: translate3d(0, 7px, 0)
}

.js--menu-active .nav__menu-button-text {
  color: #fff
}

.js--menu-active .nav__menu-trigger:hover,
.js--menu-active .nav__menu-trigger:focus {
  color: #000
}

.js--menu-active .nav__hamburger {
  background: transparent;
  left: 11px;
  right: 11px
}

.js--menu-active .nav__hamburger::before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg)
}

.js--menu-active .nav__hamburger::after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg)
}

/** hack-y fix to make sure mailchimp contiues working with updated nav **/
.nav__menu-trigger {
  display: none;
}