.bb-banner {
  width: 100%;
  margin-bottom: 2rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  display: grid;
  justify-items: center;
  align-items: flex-end;
  -webkit-background-repeat: no-repeat;
  -webkit-background-position: center;
  -webkit-background-size: cover;
}

.bb-banner:not(.bb-banner--homepage) {
  height: 35vh;
  max-height: 200px;
  min-height: 150px;
}
.bb-content:not(.offset-down) .bb-banner.bb-banner--homepage {
  height: calc(100 * var(--vh));
}
.bb-content.offset-down .bb-banner.bb-banner--homepage {
  height: calc(100vh - var(--h-user-navbar) - 0.5rem);
}

.bb-banner__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.35);
  z-index: 5;
}

.bb-banner__content {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  place-items: center;
  color: white;
  z-index: 10;
  text-align: center;
}

.bb-banner:not(.bb-banner--homepage) .bb-banner__content {
  top: calc(var(--h-header) + 2rem);
}

.bb-banner.bb-banner--homepage .bb-banner__content {
  top: 0;
}

.bb-banner:not(.bb-banner--homepage) .bb-banner__title {
  color: white;
  z-index: 10;
  font-size: 2rem;
  font-weight: 200;
}
.bb-banner.bb-banner--homepage .bb-banner__title {
  font-size: 3rem;
  font-weight: 400;
  margin-bottom: 1rem;
}
.bb-banner.bb-banner--homepage .bb-banner__tagline {
  font-size: 1.6rem;
  font-weight: 200;
}

.bb-banner__down-arrow {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translate(-50%, 0);
  animation: arrow-jump 2s ease-in-out;
  animation-iteration-count: infinite;
  cursor: pointer;
}
.bb-banner__down-arrow:hover {
  opacity: 0.7;
}

@keyframes arrow-jump {
  0% { transform: translate(-50%, 0%); }
  25% { transform: translate(-50%, -20%); }
  60% { transform: translate(-50%, 20%); }
  70% { transform: translate(-50%, 00%); }
  100% { transform: translate(-50%, 0%); }
}

.bb-banner__search-input {
  transition: width 0.5s ease-in-out;
  padding: 0 0 0.25rem 0;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.75);
  padding-bottom: 0.5rem;
  border-radius: 0;
  color: white;
}
.bb-banner__search-input:focus {
  background-color: transparent;
  border-color: white;
  color: white;
}

.bb-banner__content:not(.open) .bb-banner__search-input {
  width: 0;
}
.bb-banner__content.open .bb-banner__search-input {
  width: 160px;
}

.bb-banner__home-icon {
  color: white !important;
  margin-right: 2rem !important;
}
.bb-banner__home-icon:hover {
  color: white !important;
}

.bb-banner__search-icon svg {
  transition: all 0.5s ease-in-out;
}
.bb-banner__content.open .bb-banner__search-icon svg {
  width: 16px;
  height: 16px;
}

/*  (> phone) */
@media (max-width: 480px) {
  .bb-banner.bb-banner--homepage {
    max-height: 100vh;
  }

  .bb-banner.bb-banner--homepage .bb-banner__tagline {
    max-width: 80vw;
    font-size: 1.2rem;
  }

  .bb-banner__search-input {
    margin-top: 0.5rem;
  }
}
/*  (> tablet + desktop) */
@media (min-width: 481px) {
  .bb-banner__search-input {
    margin-left: 1rem;
  }
}