@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 h1 {
        max-width: 330px;
    }
}

.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;
}