body {
  --menu--color--blue: #1d3061;
  --menu--font-family: "GT Walsheim", sans-serif;
  --menu--font-size--xxx-small: 16px;
  --menu--font-size--xx-small: 20px;
  --menu--font-size--small: 22px;
  --menu--font-size--medium: 24px;
  --menu--font-weight--bold: bold;
  --menu--font-weight--normal: normal;
  --menu--line-height--wide: 2;
  --menu--line-height--narrow: 1.5;
  --menu--line-height--xxx-narrow: 1.1;
  --menu--color--white: #fff;
  --menu--nav-container-width: 55rem;
  --menu--font-size--large: 24px;
  --menu--color--light-blue: #90e0f2
}

.site-header__nav-toggle {
  align-items: center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none;
  border: none;
  color: var(--menu--color--blue);
  display: inline-flex;
  font-family: var(--menu--font-family);
  font-size: var(--menu--font-size--xxx-small);
  font-weight: var(--menu--font-weight--bold);
  line-height: var(--menu--line-height--xxx-narrow);
  margin-left: 14px;
  padding: 6px;
  z-index: 4
}

@media (min-width: 901px) {
  .site-header__nav-toggle {
    margin-left: 30px
  }
}

.site-header__nav-toggle:hover {
  cursor: pointer
}

.main-navigation__is-visible .site-header__nav-toggle {
  color: var(--menu--color--white)
}

.main-navigation__is-visible .site-header__nav-toggle .label--menu, .site-header__nav-toggle .label--close {
  display: none
}

.main-navigation__is-visible .site-header__nav-toggle .label--close {
  display: inline
}

.site-header__nav-toggle-hamburger {
  margin-left: 8px
}

@media (min-width: 901px) {
  .site-header__nav-toggle-hamburger {
    margin-left: 12px
  }
}

.main-navigation__is-visible .site-header__nav-toggle-hamburger {
  display: none
}

.site-header__nav-toggle-close {
  display: none;
  margin-left: 8px
}

@media (min-width: 901px) {
  .site-header__nav-toggle-close {
    margin-left: 12px
  }
}

.main-navigation__is-visible .site-header__nav-toggle-close {
  display: block
}

.site-header__nav-toggle-close path {
  fill: var(--menu--color--white)
}

.site-header__nav {
  background: var(--menu--color--blue);
  display: none;
  height: 100vh;
  left: 0;
  padding: 100px 16px 16px;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 3
}

@media (min-width: 901px) {
  .site-header__nav {
    align-items: center;
    padding: 100px 16px
  }
}

.main-navigation__is-visible .site-header__nav {
  display: block
}

@media (min-width: 901px) {
  .main-navigation__is-visible .site-header__nav {
    display: flex
  }
}

.site-header__nav-container {
  margin-left: auto;
  margin-right: auto;
  max-height: 100%;
  overflow-y: auto;
  padding-bottom: 40px;
  width: min(100%, var(--menu--nav-container-width))
}

@media (min-width: 901px) {
  .site-header__nav-container {
    overflow: visible;
    padding-bottom: 0
  }
}

.main-menu {
  list-style: none;
  margin: 0;
  padding: 0
}

@media (min-width: 901px) {
  .main-menu {
    -moz-column-count: 2;
    column-count: 2
  }
}

.main-menu > .menu-item {
  line-height: var(--menu--line-height--xxx-narrow);
  margin-top: 32px
}

@media (min-width: 901px) {
  .main-menu > .menu-item {
    -moz-column-break-inside: avoid;
    break-inside: avoid;
    line-height: var(--menu--line-height--wide);
    margin-top: 40px
  }
}

.main-menu > .menu-item:first-child {
  margin-top: 0
}

.main-menu > .menu-item > a {
  color: var(--menu--color--white);
  font-size: var(--menu--font-size--medium);
  font-weight: var(--menu--font-weight--bold);
  padding: 8px 0;
  position: relative;
  text-decoration: none
}

.main-menu > .menu-item > a:after {
  background: var(--menu--color--white);
  bottom: 6px;
  content: "";
  display: none;
  height: 2px;
  left: 0;
  position: absolute;
  width: 100%
}

.main-menu > .menu-item > a:hover:after {
  display: block
}

@media (min-width: 901px) {
  .main-menu > .menu-item > a {
    font-size: var(--menu--font-size--large)
  }
}

.main-menu .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0
}

.main-menu .sub-menu .menu-item {
  line-height: var(--menu--line-height--xxx-narrow);
  margin-top: 18px;
  padding-bottom: 2px
}

.main-menu .sub-menu .menu-item:first-child {
  margin-top: 32px
}

@media (min-width: 901px) {
  .main-menu .sub-menu .menu-item {
    line-height: var(--menu--line-height--narrow);
    margin-top: 3px
  }

  .main-menu .sub-menu .menu-item:first-child {
    margin-top: 3px
  }
}

.main-menu .sub-menu .menu-item a {
  color: var(--menu--color--light-blue);
  font-size: var(--menu--font-size--xxx-small);
  padding: 8px 0;
  position: relative;
  text-decoration: none
}

.main-menu .sub-menu .menu-item a:after {
  background: var(--menu--color--light-blue);
  bottom: 5px;
  content: "";
  display: none;
  height: 2px;
  left: 0;
  position: absolute;
  width: 100%
}

.main-menu .sub-menu .menu-item a:hover:after {
  display: block
}

@media (min-width: 901px) {
  .main-menu .sub-menu .menu-item a {
    display: inline-block;
    font-size: var(--menu--font-size--xx-small);
    line-height: var(--menu--line-height--xxx-narrow)
  }
}
