nav.navbar-desktop {
  /* hidden on mobile to show navbar-mobile*/
  display: none;
  & > a {
    color: #fff;
    font-weight: 600;
    padding: 1.5rem 1rem;
    transition: background-color 0.15s ease;
    width: 10rem;
    text-align: center;
  }
  & > a.navbar-logo {
    width: 28rem;
    padding: 0 2rem;
    margin: 0;
    display: flex;
    justify-content: center;
  }
  & > a.navbar-logo:hover > svg path {
    fill: #02357C !important;
    transition: fill 0.15s ease;
  }
  & > a:not(.navbar-logo):hover {
    background-color: #024baa;
    transition: background-color 0.15s ease;
  }
}
@media (min-width: 1280px) {
  nav.navbar-desktop {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.navbar-mobile-open-btn {
  position: fixed;
  top: 2rem;
  right: 2rem;
  z-index: 3;
  color: #FFF;
  padding: 2px 4px;
  background-color: #02357C;

  @media (min-width: 1280px) {
    display: none;
  }
}
.navbar-mobile{
  z-index: 4;
  position: fixed;
  top: 0;
  left: unset;
  right: 0;
  height: 100%;
  width: 90%;
  color: #fff;
  background-color: #02357C;
  transition: transform .5s ease-in-out;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  
  &:not(.is-open) {
    transform: translateX(100%);
  }

  ul.nav-list {
    font-weight: 400;
    display: flex;
    flex-direction: column;
    & > li > a {
      text-align: right;
      display: block;
      padding: 1rem 0 1rem 0;
      border-radius: 0.25rem;
      font-weight: 400;
      transition: color .15s ease-in-out;
      &.active,
      &:hover {
        color: #fff;
      }
      @media (min-width: 1024px) {
        border-radius: 0;
      }
    }
    @media (min-width: 1024px) {
      padding: 0;
    }
  }

  @media (min-width: 768px) {
    width: 50%;
  }

  @media (min-width: 1280px) {
    display: none;
  }
}
body.prevent-scroll {
  overflow: hidden;
  touch-action: none;
}