.AppNavigation {
  background: #1d212b;
}

@media (max-width: 64rem) {
  .AppNavigation {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 320px;
    max-width: calc(100vw - 2rem);
    padding: 0;
    box-shadow: 0 0 32px #0000005c;
    transform: translateX(100%);
    transition: var(--animationBase);
    opacity: 0;
    overflow: auto;
    z-index: var(--layerPageZIndex);
  }
  .AppNavigation.is-opened {
    transform: translateX(0);
    opacity: 1;
  }
}

@media (max-width: 64rem) {
  .AppNavigation-frame {
    padding: 0;
  }
}

.AppNavigation-closer {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  right: 0;
  width: 2.7em;
  height: 2.7em;
  color: #ccc;
  transition: var(--animationBase);
}

.AppNavigation-closer:hover, .AppNavigation-closer:active, .AppNavigation-closer:focus {
  background: hsl(var(--colorBrand-h), calc(var(--colorBrand-s) * 1%), calc(var(--colorBrand-l) * 0.8 * 1%));
}

@media (min-width: 64.01rem) {
  .AppNavigation-closer {
    display: none;
  }
}

.AppNavigation-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.AppNavigation-list[data-nav-type]:first-of-type {
  display: none;
}

@media (max-width: 64rem) {
  .AppNavigation-list {
    flex-direction: column;
    padding: var(--spaceXl) var(--spaceLg) var(--spaceLg);
  }
  .AppNavigation-list + .AppNavigation-list {
    padding-top: var(--spaceSm);
  }
  .AppNavigation-list[data-nav-type]:first-of-type {
    display: flex;
  }
  .AppNavigation-list[data-nav-type]:before {
    margin-bottom: var(--spaceMd);
    color: #ccc;
    font-family: var(--font-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    content: attr(data-nav-type);
  }
}

/*# sourceMappingURL=navigation.min.css.map */