
.navigation-main {
  .navigation--list {
    .navigation--entry {

      line-height: 1.4;
      &.is--hovered {

        .navigation--link {
          background-color: @brand-primary;
          color: #fff;
        }
      }
    }
  }
}

.advanced-menu {
  display: none;
  .button-container {
    display: none;
  }
  .menu--container {
    overflow: hidden;
  }
  &:after {
    content: '';
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    pointer-events: none;
  }
  .box-shadow(0 10px 50px -15px rgba(0, 0, 0, .5));
  max-width: inherit;
  .item--level-0 {
    padding-bottom: 0;
  }

  .content--wrapper {
    .unitize-max-width(@contentMaxWidth, 16);
    .unitize-padding(0, 14);
    margin-left: auto;
    margin-right: auto;
  }

  .button-container {
    .unitize-padding(14, 14);
    .button--category {
      .unitize-width(@contentMaxWidth, 16);
      .unitize-max-width(@contentMaxWidth, 16);
      display: block;
      margin-left: auto;
      margin-right: auto;
      .unitize-padding(0, 0, 0, 10);
      &:hover {
        .unitize-padding(0, 0, 0, 20);
      }
      .icon--arrow-right {
        position: static;
      }
    }
    .button--close {
      position: relative;
      .unitize-padding(0, 30, 0, 0);
    }
  }

}

.advanced-menu .content--wrapper {
  &.has--gallery {
    .menu--teaser {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      align-content: flex-start;

    }
    .teaser--headline {
      font-family: @font-headline-stack;
      flex: 0 1 100%;
      @media (min-width: @tabletLandscapeViewportWidth) {
        padding-right: 60%;
      }
    }
    .teaser--text {
      flex: 0 1 40%;
      padding-right: 2em;
    }
    .teaser--gallery {
      flex: 0 1 60%;
      @media (min-width: @tabletLandscapeViewportWidth) {
        margin-top: -2em;
      }
      strong {
        display: none;
      }
    }
  }
}

.teaser--gallery {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-around;

  &.is--align-baseline {
    align-items: baseline;
  }
}

.teaser--gallery-item {
  align-self: flex-end;
  flex: 0 0 25%;
  text-align: center;
  img {
    max-height: 140px;
    max-width: 140px;
    margin: 0 auto;
  }
  &:nth-child(1n+5) {
    margin-top: 1em;
  }
}

.teaser--text a:not(.btn) {
  color: @adv-menu-text-color;
}
