/* STYLES FOR ABOVE THE FOLD */
/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-1856 {
    /* 200px - 300px - leaving extra space for the navigation */
    padding: clamp(12.5rem, 25.95vw, 18.75em) 1rem;
    /* prevents the topper line from causing an overflow */
    overflow: hidden;
    position: relative;
    z-index: 1;
    background-color: #272727;
    /* Hide the video initially */
    /* Show the video when it starts playing */
    /* Background video container */
  }
  #hero-1856 video::-webkit-media-controls {
    display: none !important;
  }
  #hero-1856 .video-hidden {
    visibility: hidden;
  }
  #hero-1856 .video-visible {
    visibility: visible;
  }
  #hero-1856 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 3rem;
  }
  #hero-1856 .cs-content {
    text-align: center;
    width: 100%;
    max-width: 46.875rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    animation: floatInFromLeft 1s ease-out forwards;
  }
  #hero-1856 .cs-title {
    /* 49px - 84px */
    font-size: 4rem;
    max-width: 100%;
    letter-spacing: -2px;
  }
  #hero-1856 .cs-topper {
    font-size: 1rem;
    text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000;
  }
  #hero-1856 .cs-title,
  #hero-1856 .cs-text {
    text-align: center;
    color: var(--bodyTextColorWhite);
  }
  #hero-1856 .cs-text {
    margin-bottom: 2rem;
    font-family: "Orienta", sans-serif;
    font-size: 0.95rem;
    width: 22em;
  }
  #hero-1856 .cs-button-solid {
    font-size: 1.5rem;
    font-weight: 100;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-align: center;
    text-decoration: none;
    min-width: 12.5rem;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    background-color: var(--primary);
    color: var(--bodyTextColorWhite);
    display: inline-block;
    position: relative;
    z-index: 1;
    border: solid 1px #272727;
  }
  #hero-1856 .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #560101;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #hero-1856 .cs-button-solid:hover:before {
    width: 100%;
  }
  #hero-1856 .cs-content-graphic {
    height: 135%;
    max-height: 81.25rem;
    filter: brightness(60%);
    position: absolute;
    top: 50%;
    right: auto;
    left: auto;
    z-index: -1;
    transform: translateY(-50%) translateX(3%);
  }
  #hero-1856 .cs-graphic {
    width: 100%;
    min-width: 120rem;
    height: auto;
    object-fit: cover;
    position: absolute;
    bottom: -1px;
    left: 50%;
    z-index: 2;
    transform: translateX(-50%);
  }
  #hero-1856 .cs-graphic-dark {
    display: none;
  }
  #hero-1856 .cs-video-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
  }
  #hero-1856 .cs-video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #hero-1856 .cs-video-wrapper video::-webkit-media-controls {
    display: none !important;
  }
  #hero-1856 .cs-video-wrapper .fallback-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: -2;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #hero-1856 .cs-background::before {
    content: none;
  }
  #hero-1856 .cs-container {
    transform: translateX(10%);
  }
  #hero-1856 .cs-content-graphic {
    height: 165%;
    margin-top: 0;
  }
  #hero-1856 .cs-content {
    margin-left: -10em;
  }
  #hero-1856 .cs-title {
    font-size: 5rem;
  }
  #hero-1856 .cs-text {
    width: 22em;
  }
  #hero-1856 .cs-video-wrapper {
    /* changes back to 100% at desktop */
    height: 100%;
  }
}
/* Desktop Parallax - 1300px */
@media only screen and (min-width: 81.25rem) {
  #hero-1856 .cs-background {
    background: url("");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* creates the parallax effect */
    background-attachment: fixed;
  }
  #hero-1856 .cs-background img {
    display: none;
  }
}
/* Large Desktop - 1920px */
@media only screen and (min-width: 120rem) {
  #hero-1856 {
    /* this ties the padding bottom value to the size of the screen width. The wider the image gets the taller it gets, meaning it will get closer and closer to the content. This makes the padding bottom value grow with the screen size so it accounts for the growing height of the svg graphic getting taller */
    padding-bottom: 14vw;
    height: 84em;
  }
  #hero-1856 .cs-video-wrapper {
    height: 100%;
  }
  #hero-1856 .cs-content-graphic {
    height: 200%;
    right: -14em;
    margin-top: 0;
  }
  #hero-1856 .cs-container {
    margin-top: 15em;
  }
  #hero-1856 .cs-content-graphic {
    right: -10em;
  }
}
/* Keyframes for on-load animation */
@keyframes floatInFromLeft {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/*# sourceMappingURL=critical.css.map */