.header-main {
  .nav-wrap {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);

    @include media-breakpoint-down(xl) {
      &:before {
        background: white;
        opacity: 0.4;
      }
    }
  }

  .nav-bar {
    @include media-breakpoint-down(xl) {
      margin-top: 100px !important;
      padding-top: 0 !important;
      height: 10000px;
      &:before {
        top: 0 !important;
      }
    }
  }

  @include media-breakpoint-down(xl) {
    .overlay-menu {
      height: 10000px;
      top: 100px !important;
      backdrop-filter: none;
    }
  }

  .btn-book {
    @include media-breakpoint-down(xl) {
      width: 40px;
      margin: 0;
      right: 5%;
      top: 50%;
      transform: translate(0px, -50%);

      a {
        padding: 9px 6px;

        span.icon img {
          height: 30px;
          width: 30px;
          max-height: 30px;
          max-width: 30px;
        }
      }
    }
  }

  .alert-wrap2 {
    @include media-breakpoint-down(xl) {

      .inner-wrap {
        p {
          margin: 0 0 0 5%;
        }

        .alert-close-button {
          right: 5%;
        }
      }
    }
  }

  .menu-btn {
    @include media-breakpoint-down(xl) {
      height: 100px;
      .menu-bar, .menu-bar::before, .menu-bar::after {
        background: $quaternary-color;
      }
    }
  }

  .weather-info {
    @include media-breakpoint-down(md) {
      width: 100%;
      float: right;
      text-align: right;
      margin: 5% -15% 0 0;

      .btn-bx {
        margin: 0 4px 10px 4px;
      }
    }
  }

  .search-box form {
    background: $quaternary-color;
    border: none;

    input[type="submit"] {
      background: url(/fileadmin/user_upload/svg_icons/LOUPE.svg) no-repeat center center;
    }
  }
}


#header-type-1 .navbar {
  .menu-btn {
    height: auto;
  }

  .container {

    .nav-link{
      text-transform: uppercase;
      max-width: 250px;
      transition: max-width 0.4s;
      @include media-breakpoint-down(xl){
        padding: 20px 0 10px 0;
        .nav-text{
          color: $black;
        }
      }

      &.show{
        max-width: 100%;
        width: 100%;
        border-bottom: 3px solid #b23416;
      }

      &:hover{
        @include media-breakpoint-up(xl){
          background: #722929;
        }

        .nav-text{
          background: none;
        }
      }
    }

    background: #{$fifth-color};
    color: $white;

    .btn-booking {
      background: $tertiary-color;

      .icon{
        position: relative;
        top: -1.5px;
      }

      .btn {
        border: none;
      }
    }

    .navbar-brand .brand-nav img {
      background: radial-gradient(ellipse, #FFFFFF 0%, #FFFFFF7A 50%, #FFFFFF00 70%);
    }
  }
}

@include media-breakpoint-down(xxl) {
  #header-type-1 .navbar .container .btn-booking {
    background: none;
    text-align: right!important;
    margin-right: 20px;

    .btn {
      background: $tertiary-color;
      border-radius: $border-radius;
    }
  }
}

header#header-type-1 .btn-booking p {
  color: $primary-color;
  font-weight: 400;

  // .icon {
  //   margin-top: -8px
  // }
}

#header-type-1 .navbar .container .brand-nav {


  @include media-breakpoint-up(xl) {
    transform: scale(1.13);
  }

  @include media-breakpoint-up(xxl) {
    transform: scale(2);
  }
}

#header-type-1{
  .menu-btn{
    .menu-bar, .menu-bar:before, .menu-bar:after{
      background: $white;
      height: 3px;
    }

    &:after{
      content: "Menu";
      color: $white;
      position: absolute;
      bottom: -8px;
      left: -2px;
      transform: translate(0px, 100%);
      text-transform: uppercase;
      font-size: $font-size-10;
      font-weight: $font-weight-light;
      transition: all 0.75s;
    }
  }

  .menu-btn.active {
    .menu-bar {
      background: none;
    }

    &:after{
      opacity: 0;
      transition: all 0.25s;
    }
  }
}

h2, h3{
  &.ce-headline-center{
    color: $secondary-color;
  }
}

@media (max-width: 1199.98px) {
    header#header-type-1.header-main .navbar-nav .nav-item.dropdown .nav-link.show .nav-text {
        background-color: transparent !important;
        color: #000000 !important;
        padding: 0 !important;
    }
}