/* From https://codeburst.io/how-to-create-a-simple-css-loading-spinner-make-it-accessible-e5c83c2e464c
   Credit Stuart Nelson - https://codeburst.io/@stuartjnelson
*/

/* Converted Tailwind Config to scss */

.hero {
  position: relative;
  z-index: 10;
}

.hero--image {
  overflow: hidden;
}

.hero__image {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  height: 65vh;
  width: 100%;
}

@media (min-width: 768px) {
  .hero__image {
    height: 80vh;
  }
}

@media (min-width: 1024px) {
  .hero__image {
    height: 80vh;
  }
}

@media (min-width: 1280px) {
  .hero__image {
    height: 90vh;
  }
}

.hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero--image .hero__image::after {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(81, 81, 82, 0) 40%);
}

.hero__overlay {
  width: 100%;
  position: absolute;
  z-index: -1;
}

.hero--image .hero__overlay {
  top: 40vh;
}

@media (min-width: 1024px) {
  .hero--image .hero__overlay {
    top: 30vh;
  }
}

.hero__overlay svg {
  min-width: 1440px;
  width: 100%;
  height: auto;
}

.hero__primary {
  padding: 203px 2rem 54px;
}

@media (min-width: 1024px) {
  .hero__primary {
    padding: 256px 140px 152px;
  }
}

.hero--image .hero__primary {
  padding-top: 55vh;
}

@media (min-width: 1024px) {
  .hero--image .hero__primary {
    padding-top: 45vh;
  }
}

.hero__title {
  margin-bottom: 9px;
}

.hero--left .hero__title {
  text-align: left;
  max-width: 535px;
}

.hero--center .hero__title {
  text-align: center;
}

.hero hr {
  border-color: #009bdf;
  max-width: 128px;
}

.hero__content {
  margin-bottom: 36px;
}

.hero__content * {
  font-size: 21.3px;
}

.hero__content *:first-child {
  margin-top: 0;
}

.hero__content *:last-child {
  margin-bottom: 0;
}

.hero--dark .hero__content * {
  color: #FEFFFF;
}

.hero--light .hero__content * {
  color: #808184;
}

.hero--left .hero__content {
  max-width: 458px;
}

.hero--left .hero__content * {
  text-align: left;
}

.hero--center .hero__content {
  max-width: 510px;
  margin: auto;
}

.hero--center .hero__content * {
  text-align: center;
}

.hero--small {
  margin-bottom: 50px;
}

@media (min-width: 768px) {
  .hero__primary.small {
    padding-top: 35vh !important;
  }
}

.hero__primary.small .hero__content p {
  color: white;
}

.hero__overlay.small {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 45%, rgba(0, 0, 0, 0.1) 100%);
}

.hero__overlay.small svg {
  display: none;
}