.header--content {
  &.type--2 {
    position: relative;
    z-index: 499;

    .hc--top {
      // PageIMAGE
    }

    .hc--middle {
      position: absolute;
      top: 0;
      width: 100%;
      text-align: center;

      img {
        max-height: rfs-value(200px);
        width: auto;
      }
    }

    .hc--bottom {
      position: absolute;
      top: rfs-value(258px);
      width: 100%;
      z-index: 1000;
      text-align: right;
      background-color: rgba($primary-rgb, 0.85);
      box-shadow: $box-shadow;

      @include media-breakpoint-up(md) {
        bottom: 2.5rem;
        top: auto;
      }

      &.is--scrolling {
        position: fixed;
        top: 0;
        bottom: auto;
        z-index: 15;

        #mainNav ul.level_1 > li > a,
        #mainNav ul.level_1 > li > span {
          padding: 0.75rem 0 0.5rem 0;
        }
      }

      #mainNav {
        text-align: left;

        ul {
          > li {
            > a,
            > span,
            > strong {
              color: var(--bs-body-color-inverse);
              display: block;
              border-bottom: 5px solid transparent;

              &:hover,
              &.active,
              &.trail {
                border-bottom-color: var(--bs-secondary);
              }
            }
          }

          &.level_1 {
            list-style-type: none;
            padding: 0px;
            margin: 0px;
            display: flex;
            justify-content: center;

            > li {
              display: inline-block;
              padding: 0 1.5rem 0 1.25rem;

              > a,
              > strong, > span {
                display: inline-block;
                @include font-size(14px);
                padding: 1.5rem 0 1rem 0;
                text-decoration: none;
                white-space: nowrap;

                @include media-breakpoint-up(md) {
                  @include font-size(14px);
                }

                @include media-breakpoint-up(lg) {
                  @include font-size(15px);
                }

                @include media-breakpoint-up(xl) {
                  @include font-size(16px);
                }

                @include media-breakpoint-up(xxl) {
                  @include font-size(18px);
                }

                &:hover,
                &.active,
                &.trail {
                  border-bottom-color: var(--bs-secondary);
                }
              }

              &:hover {
                > ul.level_2 {
                  max-height: rfs-fluid-value(200px);
                }
              }
            }
          }

          &.level_2 {
            transition: all 0.3s ease;
            background-color: rgba(var(--bs-primary-rgb), 0.85);
            list-style-type: none;
            padding: 0px;
            margin: 0px 0px 0px -1.5rem;
            max-height: 0px;
            overflow: hidden;
            position: absolute;
            min-width: rfs-value(200px);

            > li {
              display: block;
              padding: 0 1.5rem;

              > a,
              > span,
              > strong {
                padding: 0.75rem 0rem;
                text-decoration: none;

                &:hover,
                &.active,
                &.trail {
                }
              }
            }
          }
        }
      }

      .navActivator {
        background-color: var(--bs-white);
        padding: 0.75rem;
      }
    }
  }
}
