.sticky-banner {
  --banner-height: 141px;
  --banner-height-compact: 60px;
  --header-height: 122px;
  --banner-font-size: 1.25rem;
  
  min-height: 0;
  padding: 0 !important;
  transition: min-height .4s ease;
  height: 0;
  opacity: 0;
  overflow: hidden;
}

.sticky-banner .container {
  height: 0;
  display: flex;
  align-items: center;
  
}

.sticky-banner .container .row {
  max-width: 1140px;
  margin: 0 auto;
}

.sticky-banner .container h2 {
  display: flex;
  align-items: center;
}

/* sticky state */

.sticky-banner.sticky {
  height: auto;
  opacity: 1;
}

.sticky-banner.sticky .container {
  position: fixed;
  top: var(--header-height);
  left: 0;
  padding: 10px 0 !important;
  min-height: var(--banner-height-compact) !important;
  height: auto;
  z-index: 2;
  background: linear-gradient(to right, rgb(237, 0, 47), rgb(63, 0, 11));
  width: 100%;
  max-width: unset;
  transition: min-height .4s ease;

}



.sticky-banner.sticky .container h2 {
  font-size: var(--banner-font-size) !important;
}

.sticky-banner.sticky .container h2 img {
  height: 1.25em !important;
  width: 1.25em !important;
}
.sticky-banner .container a[href] {
  position: absolute;
  inset: 0;
  text-indent: -10000px;
}


@media (max-width: 991px) {
  .sticky-banner {
    --header-height: 75px;
    --banner-font-size: 1rem;
  }
  
  .sticky-banner .container h2 {
  font-size: 1.5rem !important;
}
}

@media (min-width: 992px) and (max-width: 1300px){
  .sticky-banner {
    --header-height: 135px;
  }
}