.header {
  position: fixed;
  width: 100%;
  z-index: 100;
  display: flex;
  background-color: rgba(245, 245, 245, 0.97);
  color: $primary-color;
  box-shadow: 0px -3px 5px 2px $white-color;
  padding-bottom: 10px;
  padding-top: 30px;
  transition: all 0.25s ease;
}

.logo-dark {
  display: block;
}
.logo-light {
  display: none;
}

.header-dark {
  background-color: $primary-color;
  box-shadow: none;
  padding-bottom: 20px;
  // background: linear-gradient(rgba(56, 81, 109, 1) 82%, transparent 70%);

  .logo-dark {
    display: none;
  }
  .logo-light {
    display: block;
  }
}
.header-transparent,
.header-no-menu {
  position: absolute;
  background-color: transparent;
  box-shadow: none;
  .logo-dark {
    display: none;
  }
  .logo-light {
    display: block;
  }
}
.header-no-menu {
  background-color: #00000040;
  .hamb-button {
    display: none;
  }
}
.header-no-menu-2 {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: none;
  .logo-dark {
    display: block;
  }
  .logo-light {
    display: none;
  }
  .hamb-button {
    display: none;
  }
}
.header-lux2 {
  background-color: $lux-blue-2;
  box-shadow: none;
  .logo-dark {
    display: none;
  }
  .logo-light {
    display: block;
  }
}
.header-lux2l {
  background-color: rgba(176, 203, 225, 0.95);
  box-shadow: none;
  padding-bottom: 20px;
  .hamb-button .hamb-lines {
    background-color: unset;
  }
}

.header .logo {
  height: 100%;
  width: 100%;
  max-width: 100px;
  transition: all 0.5s ease;
  transform: scale(1);
}

.header .logo {
  img {
    width: 100%;
    max-width: 100px;
    margin-left: -2px;
    margin-top: -1px;
  }
}

@media (max-width: 880px) {
  .header .logo img {
    margin-left: -3px;
  }
  .header {
    padding-top: 22px;
    transition: all 0.55s ease;
  }
  .header-dark {
    padding-bottom: 10px;
  }
  .header-lux2,
  .header-lux2l {
    padding-bottom: 10px;
  }
  .arrow-left {
    margin-top: -2px;
  }
}