/* 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;
}

.hero--image {
  overflow: visible;
}

.hero--image .hero__primary {
  padding: 170px 2rem 136px;
}

@media (min-width: 1024px) {
  .hero--image .hero__primary {
    padding: 202px 113px 463px;
  }
}

.hero--image::after {
  height: 125% !important;
}

.hero__overlay {
  display: none;
}

.hero__image {
  height: 125%;
}

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

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

@media (min-width: 1024px) {
  .hero__content * {
    font-size: 16px;
  }
}

.hero__title {
  font-weight: 700;
  font-family: Playfair Display, serif;
  font-size: 50.5px;
}

@media (min-width: 1024px) {
  .hero__title {
    font-size: 66px;
  }
}

.hero::after {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(155deg, black, transparent);
  z-index: -1;
}

.legacy #legacy-overlay-1 {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.legacy #legacy-overlay-1 div {
  height: 100%;
  background: linear-gradient(135deg, #515152, rgba(81, 81, 82, 0.97));
  transform: skewY(15deg);
  z-index: -1;
}

.legacy #legacy-overlay-2 {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.legacy #legacy-overlay-2 div {
  height: 90%;
  background: linear-gradient(135deg, rgba(242, 112, 98, 0.77), #f27062);
  transform: skewY(15deg);
  z-index: -1;
}

.legacy .overlay {
  overflow-x: hidden;
  position: absolute;
}

.legacy .overlay svg {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  height: auto;
  width: 100%;
  min-width: 1440px;
}

.legacy .overlay__wrapper {
  position: relative;
}

.legacy .timeline--2 picture {
  min-height: 400px;
}

@media (min-width: 1024px) {
  .legacy .timeline--3 .timeline__content {
    padding-left: 38px;
  }
}

.hero {
  position: relative;
}

.hero--image {
  overflow: visible;
}

.hero--image .hero__primary {
  padding: 170px 2rem 136px;
}

@media (min-width: 1024px) {
  .hero--image .hero__primary {
    padding: 202px 113px 463px;
  }
}

.hero--image::after {
  height: 125% !important;
}

.hero__overlay {
  display: none;
}

.hero__image {
  height: 125%;
}

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

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

@media (min-width: 1024px) {
  .hero__content * {
    font-size: 16px;
  }
}

.hero__title {
  font-weight: 700;
  font-family: Playfair Display, serif;
  font-size: 50.5px;
}

@media (min-width: 1024px) {
  .hero__title {
    font-size: 66px;
  }
}

.hero::after {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(155deg, black, transparent);
  z-index: -1;
}