.adaptive-hero-carousel, .herobanner {
    margin-bottom: 0px !important;
}

/* ==========================================================
   Nicor Gas Homepage Adaptive Hero Carousel CLS Fix
   Purpose:
   Reserve space for the above-the-fold hero carousel before
   Flexslider JavaScript initializes and before the background
   image finishes loading.
   ========================================================== */

/* Desktop/tablet default hero height */
.adaptive-hero-carousel,
.adaptive-hero-carousel .adaptive-carousel,
.adaptive-hero-carousel .flex-viewport,
.adaptive-hero-carousel .slides,
.adaptive-hero-carousel .slides > li,
.adaptive-hero-carousel .item {
  min-height: 488px;
}

/* Make sure the active slide keeps the expected height */
.adaptive-hero-carousel .slides > li.flex-active-slide,
.adaptive-hero-carousel .item.flex-active-slide {
  min-height: 488px;
}

/* The hero image is being used like a background image */
.adaptive-hero-carousel .item {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

/* Keep carousel content/copy from collapsing before JS finishes */
.adaptive-hero-carousel .wrap-copy,
.adaptive-hero-carousel .copy {
  min-height: 488px;
}

/* Make the invisible img/picture not create unexpected spacing */
.adaptive-hero-carousel picture,
.adaptive-hero-carousel img.invisible {
  display: block;
  width: 100%;
  height: 0;
  min-height: 0;
  visibility: hidden;
}

/* Mobile hero height */
@media (max-width: 767px) {
  .adaptive-hero-carousel,
  .adaptive-hero-carousel .adaptive-carousel,
  .adaptive-hero-carousel .flex-viewport,
  .adaptive-hero-carousel .slides,
  .adaptive-hero-carousel .slides > li,
  .adaptive-hero-carousel .item,
  .adaptive-hero-carousel .slides > li.flex-active-slide,
  .adaptive-hero-carousel .item.flex-active-slide,
  .adaptive-hero-carousel .wrap-copy,
  .adaptive-hero-carousel .copy {
    min-height: 360px;
  }
}

/* Smaller mobile adjustment if 360px is too tall */
@media (max-width: 480px) {
  .adaptive-hero-carousel,
  .adaptive-hero-carousel .adaptive-carousel,
  .adaptive-hero-carousel .flex-viewport,
  .adaptive-hero-carousel .slides,
  .adaptive-hero-carousel .slides > li,
  .adaptive-hero-carousel .item,
  .adaptive-hero-carousel .slides > li.flex-active-slide,
  .adaptive-hero-carousel .item.flex-active-slide,
  .adaptive-hero-carousel .wrap-copy,
  .adaptive-hero-carousel .copy {
    min-height: 320px;
  }
}