#navigation {
  position: fixed;
  z-index: 905;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: table;
  transform: translateY(-100%);
  transition: transform 1s $easeInOutQuart;
  body.navigation_open & {
    transform: none;
  }
  @media screen and (max-width: $medium_breakpoint) {
    display: block;
    height: auto;
    min-height: 100%;
    background: $white;
  }
}

.navigation {
  width: 100%;
  height: 100%;
  display: table;
  background: $white;
  padding: em(50px) 0;
  .social_media {
    padding: em(10px);
  }
  @media screen and (max-width: $medium_breakpoint) {
    padding-bottom: 0;
    display: block;
    height: auto;
  }
}

.navigation__footer {
  display: none;
  .header__button {
    width: 100%;
    border: none;
    border-top: 1px solid $medium_light_gray;
    .search_open &, .navigation_open & {
      transform: none;
    }
  }
  @media screen and (max-width: $medium_breakpoint) {
    display: block;
  }
}

.navigation__meta {
  position: relative;
  z-index: 5;
  background: $light_gray;
  .header__button {
    background: none;
  }
}

.navigation__extra {
  position: relative;
  width: 100%;
  min-height: em(50px);
  .header__languages {
    position: absolute;
    top: 0;
    right: 0;
    transform: none;
    display: block;
  }
}

.navigation__main {
  height: 100%;
  width: 100%;
  display: table-cell;
  vertical-align: middle;
  @media screen and (max-width: $medium_breakpoint) {
    display: block;
    background: $white;
    height: 75vh;
    position: relative;
    transition: height 0.2s ease-in;
    &[data-active] {
      height: em(600px);
    }
  }
}

.navigation__item {
  width: 33%;
  margin-left: 0.5%;
  display: inline-block;
  vertical-align: top;
  &:first-child {
    margin-left: 0;
  }
  @media screen and (max-width: $medium_breakpoint) {
    width: 100%;
    min-height: 33% !important;
    height: 33% !important;
    display: block;
    overflow: hidden;
    position: absolute !important;
    margin: 0;
    will-change: transform;
    transition: all 0.3s ease-out !important;
    @for $i from 0 through 2 {
      &.data_id_#{$i} {
        top: 33.5% * $i;
      }
      .navigation__main[data-active="#{$i}"] & {
        top: -33.5%;
        &.data_id_#{$i} {
          height: auto !important;
          min-height: 100% !important;
          top: 0 !important;
          &:after {
            opacity: 0.7;
          }
          .navigation__item__list {
            max-height: em(800px);
            transform: none;
            opacity: 1;
          }
          .navigation__item__title {
            span {
              transform: translateY(em(20px));
            }
            svg {
              opacity: 1;
            }
          }
          & ~ .navigation__item {
            top: 100.5% !important;
          }
        }
      }
    }
  }
}

.navigation__images {
  position: absolute;
  font-size: 0;
  white-space: nowrap;
  top: 0;
  left: 0;
  z-index: 0;
  height: 100%;
  width: 100%;
  .navigation__item {
    height: 100%;
    position: relative;
    overflow: hidden;
    color: transparent;
    background: $white;
    &:before, &:after {
      content: '';
      display: block;
      position: absolute;
      top: -5%;
      left: -5%;
      right: -5%;
      bottom: -5%;
    }
    &:after {
      background-image: linear-gradient(to bottom, rgba($black, 0.65), $black);
      opacity: 0.5;
      transition: opacity 0.5s;
      z-index: 1;
    }
    &:before {
      background: $white;
      transition: transform 1s $easeOutQuart;
      transform: none;
      transform-origin: 100% 100%;
      z-index: 2;
    }
    .navigation__main[data-hover] & {
      &:after {
        opacity: 0.7;
      }
    }
    @for $i from 0 through 2 {
      &.data_id_#{$i} {
        &:before {
          transition-delay: 0.3s + (0.1s * $i);
        }
      }
      .navigation__main[data-hover="#{$i}"] &.data_id_#{$i} {
        &:after {
          opacity: 0.5 !important;
        }
      }
    }
    .navigation_open & {
      &:before {
        transform: scaleY(0);
      }
    }
  }
}

.navigation__item__background {
  background-size: cover;
  background-position: center 30%;
  position: absolute;
  top: -5%;
  left: -5%;
  right: -5%;
  bottom: -5%;
  z-index: 0;
  transition: transform 8s;
  transform: none;
  @for $i from 0 through 2 {
    .navigation__main[data-focus="#{$i}"] .navigation__item.data_id_#{$i} & {
      transform: scale(1.1);
    }
  }
}

.navigation__list {
  position: relative;
  left: 0;
  width: 100%;
  display: inline-block;
  white-space: nowrap;
  font-size: 0;
  color: $white;
  .navigation__item {
    padding: em(150px) 0;
    transform: translateY(em(100px));
    opacity: 0;
    white-space: normal;
    transition: transform 1s $easeOutQuart, opacity 1s $easeOutQuart;
    @for $i from 0 through 2 {
      &.data_id_#{$i} {
        transition-delay: 0.1s * $i;
      }
    }
    .navigation_open & {
      opacity: 1;
      transform: none;
    }
    @for $i from 0 through 2 {
      .navigation_open &.data_id_#{$i} {
        transition-delay: 0.5s + (0.2s * $i);
      }
    }
    @media screen and (max-width: $medium_breakpoint) {
      padding: 0;
    }
  }
  @media screen and (max-width: $medium_breakpoint) {
    height: 100%;
    overflow: hidden;
  }
}

.navigation__item__title {
  font-size: em(14px);
  font-weight: 700;
  text-transform: uppercase;
  padding: 0 em(50px);
  color: inherit;
  text-decoration: none;
  position: relative;
  letter-spacing: 0.1em;
  svg {
    display: none;
  }
  @media screen and (max-width: $medium_breakpoint) {
    padding: 0 em(20px);
    display: block;
    height: 100%;
    font-size: em(24px);
    transition: height 0.2s ease-in;
    span {
      display: block;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      transition: transform 0.3s ease-out;
    }
    svg {
      fill: currentColor;
      display: inline-block;
      width: em(19px);
      height: em(19px);
      margin-right: em(10px);
      vertical-align: baseline;
      opacity: 0;
      transition: opacity 0.3s ease-out;
    }
    .navigation__main[data-active] & {
      height: em(200px);
    }
  }
}

.navigation__item__list {
  width: 100%;
  margin-top: em(20px);
  li {
    &.selected {
      color: $green;
    }
    a {
      font-size: em(28px);
      text-decoration: none;
      color: inherit;
      padding: em(10px) em(50px) em(10px) em(80px);
      display: block;
      font-weight: 700;
      transform: none;
      transition: transform 0.3s $easeOutQuart, color 0.3s;
      line-height: 1.3;
      position: relative;
      svg {
        display: inline-block;
        width: em(20px);
        height: em(20px);
        fill: currentColor;
        margin-right: em(10px);
        position: absolute;
        top: 50%;
        left: em(50px);
        transform: translateY(-50%);
      }
      &:hover {
        color: $green;
        transform: translateX(em(10px));
      }
      @media screen and (max-width: $large_breakpoint) {
        font-size: em(23px);
        padding: em(15px) em(20px) em(15px) em(50px);
        svg {
          left: em(20px);
          width: em(16px);
          height: em(16px);
        }
      }
    }
  }
  @media screen and (max-width: $medium_breakpoint) {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease-out, transform 0.3s ease-out, opacity 0.3s;
    transform: translateY(em(100px));
    opacity: 0;
    li {
      a {
        font-size: em(18px);
        border-bottom: 1px solid rgba($white, 0.3);
        padding: em(20px) em(20px) em(16px);
        svg {
          display: none;
        }
        &:first-child {
          border-top: 1px solid rgba($white, 0.3);
        }
      }
    }
  }
}