header {
  background: transparent !important;
}

header.showHeaderOnTop {
  background: var(--background-color) !important;
}

#hero {
  display: flex;
  align-items: center;
  position: relative;
  margin-top: -56px;
  padding-top: 56px;
  background: linear-gradient(
    160deg,
    rgba(40, 47, 73, 0.6) 0%,
    transparent 50%
  );
}

#hero > .container {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 56px);
}

#hero .row {
  align-items: center;
}

#hero .col-lg-4 .image {
  padding-top: 0 !important;
}

@media (max-width: 991px) {
  #hero {
    min-height: auto !important;
  }

  #hero > .container {
    min-height: auto;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  #hero .row > .col-sm-12:last-child {
    order: -1;
    margin-bottom: 1.5rem;
  }
}

@media (min-width: 992px) {
  #hero > .container {
    max-width: 1200px;
    padding-bottom: 15vh;
  }

  #hero .content.col-lg-8 {
    flex: 0 0 58%;
    max-width: 58%;
  }

  #hero .col-lg-4 {
    flex: 0 0 42%;
    max-width: 42%;
  }
}