/* Spacing */
/* Grid settings */
/* Row inner box */
/* Breakpoint options */
/* Calculated variables - do not edit unless you are a space cowboy */
:root {
  --col-1: 5.5833333333%;
  --col-2: 14.1666666667%;
  --col-3: 22.75%;
  --col-4: 31.3333333333%;
  --col-5: 39.9166666667%;
  --col-6: 48.5%;
  --col-7: 57.0833333333%;
  --col-8: 65.6666666667%;
  --col-9: 74.25%;
  --col-10: 82.8333333333%;
  --col-11: 91.4166666667%;
  --col-12: 100%;
}

/* Split colours - set colours when using .row.split */
/* Overlays - for modals, cookie popups */
/* Type */
/* Quotes */
/* Icons - see font-awesome.scss for more info */
/* Buttons */ /* Woocommerce */ /* Notifications */ /* Pagination */ /* Logo */ /* Header */
/* Header navigation */
/* Footer */
/* Mobile menu */ /* Cookie bar */ /* Social links */ /* Transitions */ /* Loader */ /* Modals */ /* Dots */
/* Tables */
.row.hero {
  z-index: 2;
}

.hero {
  height: auto;
  z-index: 0;
  width: 100%;
  position: relative;
}
.hero .row-inner {
  min-height: 400px;
  height: auto;
  z-index: 2;
}
@media (max-width: 1025px) {
  .hero {
    height: auto;
  }
  .hero .row-inner {
    height: auto;
  }
}

.hero__lower {
  min-height: 250px;
  background-color: orchid;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: stretch;
}
@media (max-width: 1025px) {
  .hero__lower {
    min-height: 87px;
    flex-direction: row-reverse;
  }
}

.hero .video-container {
  min-height: 250px;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  aspect-ratio: 1/1;
  --after-left: -100px;
  --after-bottom: 0;
  --mask-bottom: 0%;
}
@media (max-width: 1025px) {
  .hero .video-container {
    width: 100%;
    position: unset;
    height: auto;
  }
  .hero .video-container video {
    width: 100%;
  }
}
.hero .video-container:after {
  content: "";
  position: absolute;
  bottom: var(--after-bottom);
  left: var(--after-left);
  width: 100px;
  height: 100px;
  background-color: var(--aquamarine);
  background-image: url("../../../images/flat/asset4.svg");
  background-size: 80px;
  background-repeat: no-repeat;
  background-position: center;
  clip-path: inset(0 0 var(--mask-bottom) 0);
}

.hero__lower__square {
  background-color: var(--platelet);
  width: var(--stripe-larger-size);
  height: var(--stripe-larger-size);
  overflow: hidden;
}
.hero__lower__square video {
  width: 200%;
  height: 200%;
  -o-object-fit: cover;
     object-fit: cover;
  position: relative;
  top: -10px;
}
@media (max-width: 1025px) {
  .hero__lower__square {
    width: 53px;
    height: 53px;
  }
}

.hero__lower__stripe {
  --stripe-clip: 0%;
  height: 450px;
  background-color: aqua;
  flex-grow: 1;
  background-size: cover;
  background-position: center;
  clip-path: inset(0 0 var(--stripe-clip) 0);
  position: relative;
  z-index: 5;
}
@media (max-width: 1025px) {
  .hero__lower__stripe {
    height: 87px;
  }
}
.hero__lower__stripe img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

body.admin-bar .hero, body.admin-bar .hero .row-inner {
  min-height: calc(100vh - 52pxvar(--space-2xs)var(--space-2xs) - 0px - 32px);
}