header {
  width: 100%;
  z-index: 10000;
}

#header-part-1 {
  background-color: $ls-color-3;

  .inside {
    @include ls_contentWrapper;
    height: 5rem;

    @include display-grid;
    @include grid-template-columns(1fr grid-repeat(23, 0.5rem 1fr));
    @include grid-template-rows(1fr);
    @include align-items(center);
  }

  #header-slogan {
    @include grid-column(1, 28);
    @include grid-row(1, 2);
    @include grid-justify-self(start);
    font-size: 1.3rem;
  }

  #header-navigation-3 {
    @include grid-column(29, 48);
    @include grid-row(1, 2);
    @include grid-justify-self(end);
    font-size: 1.3rem;
  }

  @include media-breakpoint-down(5, $grid-breakpoints-ls) {
    #header-slogan {
      display: none;
    }

    #header-navigation-3 {
      @include grid-column(7, 48);
    }
  }
}

#header-part-2 {
  background-color: $ls-color-white;
  padding-top: 2rem;
  padding-bottom: 2rem;

  .inside {
    @include ls_contentWrapper;
    height: 20rem;
    min-height: 14rem;
    max-height: 15vh;

    @include display-grid;
    @include grid-template-columns(1fr grid-repeat(23, 0.5rem 1fr));
    @include grid-template-rows(1fr grid-repeat(5, 0.5rem 1fr));
    @include align-items(center);
  }

  #mainNavigation {
    @include grid-column(1, 48);
    @include grid-row(9, 12);
    @include justify-content(center);
    @include grid-align-self(end);
  }

  #logo {
    @include grid-column(17, 32);
    @include grid-row(1, 6);
    @include grid-align-self(stretch);
    @include grid-justify-self(stretch);
  }

  #special-shop-navigation {
    @include grid-column(33, 48);
    @include grid-row(1, 6);
    @include grid-align-self(start);
  }

  #header-navigation-2 {
    @include grid-column(1, 16);
    @include grid-row(1, 6);
    @include grid-align-self(start);
    @include grid-justify-self(start);
  }

  @include media-breakpoint-down(10, $grid-breakpoints-ls) {
    .inside {
      height: 13rem;
      min-height: 8rem;
    }

    #logo {
      @include grid-column(1, 24);
    }

    #special-shop-navigation {
      @include grid-column(25, 48);
      @include grid-align-self(center);
    }

    #header-navigation-2 {
      display: none;
    }
  }

  @include media-breakpoint-down(7, $grid-breakpoints-ls) {
    .inside {
      height: 6rem;
      min-height: 4rem;
    }

    #logo {
      @include grid-row(1, 12);
    }

    #special-shop-navigation {
      @include grid-row(1, 12);
    }

    #mainNavigation {
      display: none;
    }
  }

  @include media-breakpoint-down(3, $grid-breakpoints-ls)  {
    #logo {
      @include grid-column(1, 20);
    }
  }
}



#mainNavigation {
  display: flex;

  > ul > li {
    font-size: $ls-font-size-h5;

    > a,
    > span,
    > strong {
      padding-top: 1rem;
      padding-bottom: 1rem;
    }
  }
}

#logo {
  a {
    display: flex;
    height: 100%;
    width: 100%;

    img {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      margin: auto;
    }
  }
}

@include media-breakpoint-down(10, $grid-breakpoints-ls) {
  #logo a img {
    margin: auto 0;
  }
}

@include media-breakpoint-down(5, $grid-breakpoints-ls) {
  #header-part-2 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}


body.sticky {
  header {
    #header-part-1 {
      display: none;
    }

    #header-part-2 {
      padding-bottom: 0;
      padding-top: 0;

      .inside {
        height: 5rem;
        min-height: 1rem;

        #logo {
          @include grid-column(1, 6);
          @include grid-row(1, 12);
          @include grid-align-self(stretch);
          @include grid-justify-self(end);

          a {
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
            img {
              margin-left: 0;
              margin-right: auto;
            }
          }
        }

        #special-shop-navigation {
          @include grid-column(39, 48);
          @include grid-row(1, 12);
          @include grid-align-self(center);

          .navigation-item > a > label {
            display: none;
          }
        }

        #header-navigation-2 {
          display: none;
        }

        #mainNavigation {
          @include grid-column(7, 38);
          @include grid-row(1, 12);
          @include justify-content(center);
          @include grid-justify-self(stretch);
          @include grid-align-self(center);
        }

        @include media-breakpoint-down(11, $grid-breakpoints-ls) {
          #logo {
            @include grid-column(1, 22);
          }

          #special-shop-navigation {
            @include grid-column(23, 48);
          }

          #mainNavigation {
            display: none;
          }
        }

        @include media-breakpoint-down(5, $grid-breakpoints-ls) {
          #logo {
            @include grid-column(4, 22);
          }
        }
      }
    }
  }
}