main-nav.scss

.main-nav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 31px;
  min-height: 80px;
  box-shadow: 0 5px 12px rgba(22, 38, 51, 0.05);
  @include media-query($small) {
    padding: 0 30px;
    min-height: 65px;
  }

  ul {
    list-style: none;
  }
}

.logo-image img {
  min-width: 163px;
}

.main-nav__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 16px;

  @include media-query($medium-down) {
    position: relative;

    a {
      width: 100%;
      display: block;
    }
  }

  @include media-query($medium-down) {
    position: absolute;
    z-index: 3;
    right: 0;
    left: 0;
    top: 81px;
    display: none;
    margin-top: 0;
    padding: 0 31px;
    flex-wrap: wrap;
    width: 100%;
    background-color: white;
    box-shadow: 0 5px 12px rgba(22, 38, 51, 0.05);
  }

  li {
    @include media-query($medium-down) {
      width: 100%;
      padding: 31px 31px 31px 0;
      border-bottom: 1px solid #E1E6EB;
    }
  }

  .main-nav__sub-nav-level2,
  .main-nav__sub-nav-level3 li {
    @include media-query($medium-down) {
      border-bottom: none;
    }
  }

  .has-subnav {
    padding-left: 16px;
    padding-right: 32px;
    @include media-query($large-up) {
      padding-bottom: 31px;
      margin-bottom: -31px;

      &:hover .main-nav__sub-nav {
        display: flex;
      }
    }


    @include media-query($medium-down) {
      position: relative;

      a {
        width: 100%;
        display: block;
      }
    }

    &::before {
      position: absolute;
      content: '';
      top: 41px;
      right: 3px;
      display: none;
      border-top: 1.5px solid rgba(0, 0, 0, 0.5);
      height: 1px;
      width: 10px;
      @include media-query($medium-down) {
        display: block;
      }
    }

    &::after {
      position: absolute;
      content: '';
      top: 41px;
      display: none;
      right: 3px;
      border-top: 1.5px solid rgba(0, 0, 0, 0.5);
      height: 1px;
      width: 10px;
      transform: rotate(90deg);
      @include media-query($medium-down) {
        display: block;
      }
    }


    a {
      position: relative;
    }

    .icon-down {
       position: absolute;
       top: 0;
       right: -22px;

      @include media-query($medium-down) {
        display: none;
      }
    }
  }

  .main-nav__sub-nav {
    position: absolute;
    z-index: 1;
    top: 80px;
    left: 31px;
    right: 31px;
    display: none;
    align-items: flex-start;
    justify-content: space-between;
    background-color: #ffffff;
    border: 2px solid #E6E9EE;
    border-radius: 0 0 2px 2px;
    padding: 31px;
    font-weight: 500;
    font-size: 14px;

    &.active {
      display: flex;
    }
    @include media-query($large-down) {
      left: 0;
      right: 0;
    }

    @include media-query($medium-down) {
      position: relative;
      display: none;
      top: 30px;
      left: 0;
      right: 0;
      padding: 0;
      flex-wrap: wrap;
      border: none;
      background: #FFFFFF;

      li {
        width: 100%;
      }
    }

    h3 {
      font-weight: 500;
      font-size: 19px;
      line-height: 24px;
      margin-top: 0;
      margin-bottom: 0;
      border-bottom: 1px solid #A6ACB3;
      max-width: 124px;
    }

    ul {
      padding-left: 0;
    }

    .main-nav__sub-nav-level3 {
      display: inline-block;

      li {
        float: left;
        padding: 10px 25px 10px 0;
      }
    }
  }

  .main-nav__level-one {
    padding-left: 16px;
    padding-right: 16px;

    &:last-of-type {
      @include media-query($medium-down) {
        border-bottom: none;
      }
    }
  }

  .main-menu__featured-img {
    position: relative;
    flex: 1 0 244px;
    padding-left: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    button {
      position: absolute;
    }
  }
}

.mobile-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
  width: calc(100% + 62px) !important;
  padding: 41px 15px !important;
  margin-left: -31px;
  margin-right: -31px;
  border: 1px solid black;
  background-color: $color-body-text;
  color: white;
  @include media-query($large-up) {
    display: none;
  }

  .mobile-footer__logos,
  .mobile-footer__links {
    display: flex;
    padding: 12px;

    li {
      padding: 0 12px;
      border-bottom: none;
      text-align: center;
    }

    li a {
      font-weight: bold;
      font-size: 14px;
      line-height: 12px;
      letter-spacing: 1.16667px;
      text-transform: uppercase;
      color: white;
    }
  }

  .border-left {
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      border-left: 1px solid white;
      width: 1px;
    }
  }
}

.overlay {
  background: #29333F;
  mix-blend-mode: normal;
  opacity: 0.49;
}