.navigation__close {
  font-size: 0;
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  height: 0;
  width: 100%;
  background: rgba($green, 0.9);
  opacity: 0;
  transition: height 0s 1s, opacity 1s;
  overflow: hidden;
  z-index: 940;
  .header__button {
    transform: translateX(100%);
    transition: transform 1s $easeInOutQuart;
    color: $white;
    svg {
      fill: $white;
    }
    @media screen and (max-width: $medium_breakpoint) {
      font-size: 0;
      padding-left: 0;
      right: auto;
      left: 0;
      transform: translateX(em(640px));
    }
  }
  body.navigation_open & {
    opacity: 1;
    height: 100vh;
    transition: height 0s, opacity 1s;
    .header__button {
      transform: translateX(em(-640px));
      @media screen and (max-width: $medium_breakpoint) {
        transform: none;
      }
    }
  }
}

#navigation {
  position: fixed;
  z-index: 950;
  top: 0;
  left: 100%;
  width: em(640px);
  height: 100%;
  transform: none;
  transition: transform 1s $easeInOutQuart;
  body.navigation_open & {
    transform: translateX(-100%);
  }
  @media screen and (max-width: $medium_breakpoint) {
    width: calc(100% - #{em(64px)});
  }
}

.navigation {
  width: 100%;
  min-height: 100vh;
  background: $white;
  padding: em(80px);
  .social_media {
    display: inline-block;
    vertical-align: top;
    width: auto;
  }
  .social_media__item {
    background: $green;
    color: $white;
  }
  @media screen and (max-width: $medium_breakpoint) {
    padding: em(60px);
  }
  @media screen and (max-width: $small_breakpoint) {
    padding: em(30px);
  }
}

.navigation__lists {
  padding: em(80px) 0;
  margin-bottom: em(70px);
  position: relative;
  @media screen and (max-width: $small_breakpoint) {
    padding: 0;
    margin: em(10px) 0 em(50px) 0;
  }
}

.navigation__list__main {
  > li {
    margin-top: em(30px);
    > a {
      text-decoration: none;
      text-transform: uppercase;
      font-size: em(40px);
      line-height: 1.3;
      letter-spacing: 0.02em;
      font-weight: 500;
      color: $green;
      @media screen and (max-width: $small_breakpoint) {
        font-size: em(30px);
      }
    }
    ul {
      li {
        margin-top: em(8px);
        a {
          display: inline-block;
          padding: em(5px) 0;
          color: $dark_gray;
          text-transform: uppercase;
          letter-spacing: 0.05em;
          font-size: em(20px);
          text-decoration: none;
          line-height: 1.3;
          font-weight: 300;
          @media screen and (max-width: $small_breakpoint) {
            font-size: em(18px);
          }
        }
      }
    }
    &:first-child {
      margin-top: 0;
    }
  }
}

.navigation__list__meta {
  position: absolute;
  left: 0;
  li {
    margin-left: em(20px);
    display: inline-block;
    a {
      color: $dark_gray;
      text-decoration: none;
      font-size: em(15px);
      line-height: 1.3;
    }
    &:first-child {
      margin-left: 0;
    }
  }
  @media screen and (max-width: $small_breakpoint) {
    position: relative;
    margin-top: em(50px);
    li {
      margin: 0;
      display: block;
      a {
        display: inline-block;
        padding: em(5px) 0;
      }
    }
  }
}

.navigation__list__meta--top {
  top: 0;
}

.navigation__list__meta--bottom {
  bottom: 0;
}

.navigation__languages {
  vertical-align: top;
  display: inline-block;
  margin-right: em(30px);
  margin-bottom: em(20px);
  li {
    display: inline-block;
    height: em(34px);
    margin-left: em(9px);
    padding: em(6px) 0;
    &:first-child {
      margin-left: 0;
      padding-left: 0;
      a {
        border-left: none;
        padding-left: 0;
      }
    }
    a {
      color: $dark_gray;
      text-decoration: none;
      font-size: em(15px);
      text-transform: uppercase;
      display: block;
      border-left: 1px solid $light_gray;
      padding-left: em(10px);
      line-height: em(20px);
    }
    &.active {
      font-weight: bold;
    }
  }
}