@media screen and (min-width: 768px) {
  .page-hero {
      position: relative;
      position: sticky !important;
      top: -55%;
      z-index: 0;
  }
  .page-hero.adjusted {
      top: -65%;
  }
}

@media screen and (max-width: 767px) {
  .page-hero {
      top: -75%;
  }
}

.page-hero.theme-dark {
  background-color: #1F1F22;
  padding-top: 60px;
  /* page bar height */
}

.page-hero .fade-in {
  opacity: 0;
  animation-name: fadein;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  visibility: visible !important;
  animation-delay: 5s;
  animation-fill-mode: forwards;
}

.page-hero .vidPlayPause {
  animation-name: heroplaygone;
  animation-duration: .1s;
  animation-delay: 7.5s;
  animation-fill-mode: forwards;
}

@keyframes heroplaygone {
  to {
      visibility: hidden;
  }
}

.page-hero a {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

@media screen and (min-width: 768px) {
  .page-hero a {
      margin-top: 36px !important;
      margin-bottom: 0 !important;
  }
}

@media screen and (max-width: 767px) {
  .page-hero .fade-in {
      opacity: 1;
      animation: none;
  }
}

@keyframes fadein {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}

@media screen and (min-width: 768px) {
  .page-hero .m-hero-item {
      position: relative;
      /* overflow: hidden; */
      padding: 0 5% 0 14.6%;
      width: 100%;
      height: 0;
      padding-top: 7%;
      padding-bottom: 58.1%;
      /* adds up to 65.1% ish*/
  }
  .page-hero .m-hero-item>div.m-ambient-video.video-hero::before {
      padding-bottom: 65.1%;
  }
  .page-hero.adjusted .m-hero-item {
      padding-top: 10%;
      /* combined padding is how the height is set. I know, but still. */
      padding-bottom: 62.9%;
      /* these two values add up to the aspect ratio of the video, 1400/1920 */
  }
  .page-hero.adjusted .m-hero-item>div.m-ambient-video.video-hero::before {
      padding-bottom: 72.9%;
      /* this is the total value aspect ration of the video. This method is repeated for tablet and mobile, but mobile doesn't have the split padding in .m-hero-item */
  }
}

.page-hero.adjusted:after {
  content: "";
  position: absolute;
  height: 7.12%;
  width: 100%;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(31, 31, 34, 1)100%);
}

@media screen and (min-width: 768px) and (max-width: 1083px) {
  .page-hero .m-hero-item {
      padding: 0 5% 0 10%;
      padding-top: 12%;
      padding-bottom: 79.1%;
      /* adds up to padding-bottom value below */
  }
  .page-hero .m-hero-item>div.m-ambient-video.video-hero::before {
      padding-bottom: 91.1%;
  }
  .page-hero.adjusted .m-hero-item {
      padding: 0 5% 0 10%;
      padding-top: 15%;
      padding-bottom: 76%;
  }
  .page-hero.adjusted .m-hero-item>div.m-ambient-video.video-hero::before {
      padding-bottom: 91%;
  }
  .page-hero.adjusted:after {
      height: 22.22%;
  }
}

@media screen and (max-width: 767px) {
  .page-hero .m-hero-item>div.m-ambient-video.video-hero::before {
      padding-bottom: 94.4%;
  }
  .page-hero .m-hero-item>div.m-ambient-video.video-hero::after {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      height: 5%;
      width: 100%;
      background: linear-gradient(180deg, rgba(31, 31, 34, 1) 0%, rgba(0, 0, 0, 0) 100%);
  }
  .page-hero.adjusted .m-hero-item>div.m-ambient-video.video-hero::after {
      height: 100%;
      background: linear-gradient(180deg, rgba(31, 31, 34, 1) 0%, rgba(0, 0, 0, 0) 9.2%, rgba(0, 0, 0, 0) 90.8%, rgba(31, 31, 34, 1) 100%);
  }
  .page-hero.adjusted:after {
      background: none;
  }
  /*.page-hero.adjusted .m-hero-item>div.m-ambient-video.video-hero::before {
      padding-bottom: 115.73%;
  }*/
}

@media screen and (min-width: 0px) {
  .page-hero section.f-transparent:before {
      display: none;
  }
  .page-hero .m-hero-item>div:not(.video-hero) {
      width: auto;
      height: auto;
      position: relative;
      top: 0;
      bottom: auto;
      left: 0;
      right: auto;
      z-index: 10;
      margin: 0 auto;
      overflow: visible;
  }
  .page-hero .m-hero-item>div>div {
      position: relative;
      top: 0 !important;
  }
}

.page-hero h1 span.pre-heading {
  font-size: 18px;
  line-height: 1.12em;
  display: block;
  padding-bottom: 20px;
  letter-spacing: 0em;
}

.page-hero .m-hero-item>div>div>div {
  margin: 0;
  padding: 0;
}

.page-hero section.f-transparent::after {
  /* clearfix */
  content: "";
  clear: both;
  display: table;
}

.c-glyph.glyph-play::before,
.c-glyph.glyph-pause::before {
  color: #9bf00b;
  font-size: 20px;
  text-align: center;
  line-height: 41px !important;
  height: 41px !important;
  width: 41px !important;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 50%;
  padding: 1px 0 0 1px;
  margin-left: 0px !important;
}

.c-action-trigger.c-glyph.glyph-play,
.c-action-trigger.c-glyph.glyph-pause {
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
}

.page-hero .testimonial {
  margin-top: 56px;
}

@media screen and (min-width: 0px) and (max-width: 767px) {
  .page-hero .m-hero-item {
      display: flex;
      flex-direction: column;
      position: relative;
      /* overflow: hidden; */
      padding: 96px 0% 0 0%;
      width: 100%;
      height: auto;
      max-width: 768px;
      margin-left: auto;
      margin-right: auto;
  }
  .page-hero .m-hero-item>div:not(.video-hero) {
      text-align: left;
      margin-left: 0;
      margin-right: 0;
      padding-left: 5%;
      padding-right: 5%;
  }
  /*
      .page-hero .m-hero-item>div:first-of-type {
          padding-top: 56px;
      }
  .page-hero .m-hero-item>div:last-of-type {
      order: 3;
  }*/
  .page-hero .m-hero-item>.video-hero,
  .page-hero .m-hero-item>picture {
      order: 2;
      position: relative;
      bottom: auto;
      overflow: visible;
      /*padding-top: 9.7%;
          padding-bottom: 9.7%;*/
  }
  .page-hero .m-hero-item>picture img,
  .page-hero .m-hero-item[class*="f-x"][class*="f-y"]>div>div {
      position: relative;
      margin: 0;
      left: 0;
      top: 0;
      -ms-transform: translateY(0%);
      transform: translateY(0%);
      max-width: 100%;
  }
}

.page-hero .video-hero.m-ambient-video video {
  max-width: 100% !important;
  min-height: auto !important;
}

.page-hero .m-ambient-video div button {
  background-color: transparent;
}

.page-hero-marker {
  position: absolute;
  bottom: auto;
}

.page-hero-marker.reset {
  top: 20%;
}

.page-hero-marker.toggle {
  bottom: 0;
}

@media screen and (min-width: 768px) {
  .page-hero.unstick {
      position: relative !important;
      top: auto;
  }
}
/* AQA 11/2
@media screen and (max-width: 767px) {
  .m-in-page-navigation .c-call-to-action,
  .m-in-page-navigation .price-callout {
      display: none;
  }
}
*/
.page-hero a.c-call-to-action {
  top: -3px;
  margin-right: 17px;
}

.CTAdiv button span, .page-hero .fade-in .heroPrice, .page-hero .fade-in [href='#purchase'], .buy-group {
visibility: hidden;
}
.hatchDialog button.c-glyph.glyph-cancel {
right: 20px !important;
}

@media screen and (min-width: 1084px) {
  .page-hero .pp-button > video + div {
      position: absolute;
      left: 0;
      top: 67% !important;
      height: 42px;
      width: 42px;
      /* border: 1px solid red; */
      position: absolute !important;
  }

  .page-hero .m-ambient-video div button {
      bottom: auto;
  }
}

.page-hero .m-hero-item>picture {
  display:none;
}
@media screen and (max-width: 767px) {

    .page-hero .m-hero-item>.video-hero {
      display:none;
    }

    .page-hero .m-hero-item>picture {
      display:block;
    }
}
.high-contrast-mode .page-hero .high-contrast {
    background-color: #fff;
}
.high-contrast-mode .page-hero .high-contrast a:focus {
    border-style: dashed;
}
.high-contrast-mode .page-hero .testimonial {
    background-image: none;
}