/**
 * Banner Styles
 * Styling for the rotating banner background
 */
.banner-container {
  position: relative;
  padding: 19em 1em 6em 1em;
  min-height: 900px;
  overflow: hidden;
}

.banner-backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.banner-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  transition: opacity 2s ease;
}

.banner-bg.active {
  opacity: 1;
}