/* General Styles */
div.hidden {
    display: none;
}

/* ======== Video Background Hero ======== */
.videoBgShort .text-shadow {
    text-shadow: 0px 0px 40px rgba(0,0,0,0.7);
}

.videoBgShort:not(.pageHero) .m-hero-item.f-transparent:before {
    padding-bottom: 0 !important;
}

.videoBgShort:not(.pageHero) .m-hero-item.f-transparent {
    aspect-ratio: 16 / 9;
}

.videoBgShort .m-hero-item .m-ambient-video video {
    width: 100%;
}

.videoBgShort .high-contrast {
    width: 100%;
    max-width: 100%;
    margin: auto;
    overflow: visible;
    top: -24%;
}

.videoBgShort .c-group {
    text-align: center;
    display: block;
}

.videoBgShort .jumpgcontainer span.xbox-logo.c-glyph {
    font-family: 'MWF-MDL2';
    font-weight: 400;
    font-size: .75em;
}

@media screen and (min-width: 768px) and (max-width: 1399px) {
    .videoBgShort .jumpgcontainer .jump-g.jump-b {
        top: .625rem !important;
    }
}

.videoBgShort .jumpgcontainer .jump-g + h2 {
    position: relative;
    top: -50px;
}

.page-hero-lb button.vidPlayPause,
.videoBg button.vidPlayPause,
.videoBgShort button.vidPlayPause {
    bottom: 0;
    left: 0;
}

.page-hero-lb .pp-button > video + div,
.videoBgShort .pp-button > video + div,
.videoBg .pp-button > video + div {
    transform: none;
    width: auto;
    max-width: none;
    min-width: 0;
    left: 0;
    top: calc(100% - 24px) !important;
    position: absolute !important;
}

.power-creator .pp-button > video + div {
    top: auto !important;
    bottom: 21%;
}

.page-hero-lb button.vidPlayPause {
    left: 0 !important;
    bottom: 0 !important;
}

.videoBgShort.listen-lb .c-glyph.glyph-play::before,
.videoBgShort.listen-lb .c-glyph.glyph-pause::before {
    color: #000;
    border: 2px solid #000;
}

/* ======== Breakpoints ======== */

@media screen and (min-width: 1084px) {    
    .videoBgShort:not(.pageHero) .m-hero-item.f-transparent {
        aspect-ratio: 16 / 9;
    }

    .videoBgShort .high-contrast {
        width: 70%;
        max-width: 1000px;
        margin: auto;
        overflow: visible;
        top: -24%;
    }
}

@media screen and (min-width: 768px) and (max-width: 1083px) {
    .videoBgShort .m-hero-item .m-ambient-video video {
        width: 100vw;
    }

    .videoBgShort:not(.pageHero) .m-hero-item.f-transparent {
        aspect-ratio: 542 / 507;
    }

    .videoBgShort .m-hero-item > div.m-ambient-video:before {
        padding-bottom: 0;
    }

    .videoBgShort .m-hero-item > div.m-ambient-video {
        aspect-ratio: 542 / 507;
    }

    .videoBgShort .high-contrast {
        text-align: center;
        position: absolute;
        top: 24%;
    }

    /* .videoBgShort button.vidPlayPause {
        top: 24vw;
        left: -25vw;
    } */
}

@media screen and (max-width: 767px) {
    /* .videoBgShort.pageHero .m-hero-item {
        max-height: 90vh;
    } */

    .videoBgShort .m-hero-item .m-ambient-video video {
        width: 100vw;
    }

    .videoBgShort .m-hero-item .m-ambient-video .c-image {
        position: absolute;
        top: 0;
    }

    .videoBgShort .m-hero-item.f-transparent {
        aspect-ratio: 767 / 1075; /* 0.714:1 aspect ratio for mobile */
    }

    .videoBgShort:not(.pageHero) .m-hero-item.f-transparent {
        aspect-ratio: 384 / 818;
    }

    .videoBgShort .m-hero-item > div.m-ambient-video:before {
        padding-bottom: 0;
    }
    
    .videoBgShort .m-hero-item > div.m-ambient-video:before {
        aspect-ratio: 384 / 818;
    }

    .videoBgShort .high-contrast {
        text-align: center;
        position: absolute;
        top: 28%;
        width: 98%;
    }

    /* .videoBgShort button.vidPlayPause {
        bottom: 63vw;
    }

    .videoBgShort .m-ambient-video div button:focus {
        bottom: calc(63vw - 10px);
        left: -4px;
    } */
}

/* ======== Positioning Ported from XSS Instant Library ======== */
.videoBgShort .m-hero-item::after {
    background: none;
}

.videoBgShort section > div:not(.m-ambient-video) {
    position: absolute;
    top: 44%;
    transform: translateY(-50%);
}

.videoBgShort.pageHero section > div:not(.m-ambient-video) {
    /* Zoomed viewport fix */
    pointer-events: none;
}

.videoBgShort section > div:not(.m-ambient-video) p {
    padding-top: 16px;
}

.videoBgShort section > div:not(.m-ambient-video) picture {
    display: block;
}

.videoBgShort section > div:not(.m-ambient-video) img {
    margin-bottom: 24px;
}

@media screen and (max-width: 767px) {
    .videoBgShort section > div:not(.m-ambient-video) {
        top: 44%;
    }

    .videoBgShort section > div:not(.m-ambient-video) {
        top: 55%;
    }

    .videoBgShort .m-hero-item > div.m-ambient-video:before {
        display: none;
    }

    .videoBgShort .m-ambient-video .c-image {
        position: absolute;
        top: 0;
    }
}

@media screen and (min-width: 1084px) {
    .videoBgShort .m-hero-item.f-transparent {
        aspect-ratio: 16 / 9;
    }

    .videoBgShort .m-hero-item > div.m-ambient-video:before {
        padding-bottom: 0;
    }
    
    .videoBgShort .m-hero-item > div.m-ambient-video:before {
        aspect-ratio: 16 / 9;
    }

    .videoBgShort p {
        margin-top: 0;
    }
}