/* General */
.theme-black .green-text,
.theme-dark .green-text {
    color: #9bf00b;
}

.theme-black .text-shadow,
.theme-dark .text-shadow {
    text-shadow: 0px 0px calc(.08em + 13px) #000;
}

@keyframes moveTop {
    from {
        top: 55%;
    }

    to {
        /* top: 150px; */
        /* top: 30%; */
        /* Dark header */
        top: calc(26% + 55px);
    }
}

@media screen and (min-width: 768px) {
    .animateToTop {
        animation: moveTop 1.5s ease-in-out 2.25s forwards;
        /* 2.25s delay, 1.5s duration */
    }
}

/* Video Slide Hero */

.video-slide-hero .m-hero-item>div picture {
    display: block;
}

.video-slide-hero .m-hero-item .m-ambient-video {
    max-width: none;
    width: 100%;
    margin: 0;
}

.mod-multi-hero>section {
    background-color: #000 !important;
}

@media screen and (min-width: 1400px) {
    .video-slide-hero .m-hero-item.f-transparent:before {
        padding-bottom: 71% !important;
    }
}

@media screen and (min-width: 1084px) and (max-width: 1399px) {
    .video-slide-hero .m-hero-item.f-transparent:before {
        padding-bottom: 90.8% !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 1083px) {
    .video-slide-hero .m-hero-item.f-transparent:before {
        padding-bottom: 127% !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 1083px) {
    div.video-slide-hero section.m-hero-item div.hvs-copy-section {
        top: 32px !important;
        transform: none;
    }
}

@media screen and (min-width: 1084px) {
    div.video-slide-hero section.m-hero-item div.hvs-copy-section {
        top: 72px !important;
    }
}

@media screen and (min-width: 1600px) {
    .video-slide-hero section.m-hero-item div.hvs-copy-section {
        max-width: 750px !important;
    }
}

.hvs-copy-section>section {
    padding-bottom: 0 !important;
}

.video-slide-hero section.m-hero-item>picture {
    height: 100% !important;
    width: 100% !important;
    top: -0 !important;
}

.video-slide-hero section.m-hero-item {
    height: auto !important;
}

@media screen and (min-width: 768px) {
    .video-slide-hero section.m-hero-item {
        aspect-ratio: 16/9;
    }

}

@media screen and (max-width: 767px) {
    .video-slide-hero {
        padding-bottom: 132px;
    }

    .video-slide-hero .m-ambient-video video+div {
        display: none;
    }
}

.video-slide-hero .m-ambient-video.pp-button>div {
    transform: none !important;
}

.video-slide-hero .pp-button>video+div {
    left: 0;
    top: auto !important;
    bottom: 0;
    height: 42px;
    width: 42px;
    position: absolute !important;
}

@media screen and (min-width: 768px) and (max-width: 1084px) {

    .text-spacing .video-slide-hero .m-hero-item.f-transparent:before,
    .video-slide-hero .m-hero-item.f-transparent[style]:before {
        padding-bottom: 158% !important;
    }

    .video-slide-hero .m-hero-item[style] .c-heading-1a {
        font-size: 32px;
    }
}


@media screen and (min-width: 1084px) and (max-width: 1399px) {

    .text-spacing .video-slide-hero .m-hero-item.f-transparent:before,
    .video-slide-hero .m-hero-item.f-transparent[style]:before {
        padding-bottom: 120% !important;
    }
}

@media screen and (min-width: 1400px) {

    .text-spacing .video-slide-hero .m-hero-item.f-transparent:before,
    .video-slide-hero .m-hero-item.f-transparent[style]:before {
        padding-bottom: 88% !important;
    }
}

@media screen and (min-width: 1605px) {
    .c-heading-1L {
        font-size: 200px;
        line-height: 118px;
    }

    .video-slide-hero h2.c-heading-2 {
        padding-top: 16px;
    }
}

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

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

.video-slide-hero .jump-g.jumpganimate {
    transition: 700ms all;
    right: 0;
}

.video-slide-hero .jump-g.jumpganimate.jumpgoffleft {
    opacity: 0;
}

.sliding-box.slide {
    background: #ffffff;
    width: 48%;
    height: fit-content;
    position: absolute;
    padding: 60px 26px;
    text-align: left;
    margin: 0;
}

.hero-sliding-box.slide {
    top: 90%;
    left: 50%;
    opacity: 0;
    visibility: hidden;
}

.hero-sliding-box.slide.hero-slide-final {
    top: 80%;
    opacity: 1;
    transition: 500ms all;
    visibility: visible;
}

/* End Video Slide Hero */

/* There With You */
.wideFeatured .featured-games,
.wideFeatured .featured-games-header {
    /*display: none;*/
    /* hidden until content successfully loads */
    width: 100%;
}

.wideFeatured .rotator-heading {
    text-align: center;
    max-width: 1000px;
    margin: 0 auto 42px;
    padding-left: 5%;
    padding-right: 5%;
}

.wideFeatured p.subHead {
    padding-top: 12px;
}

.wideFeatured .featured-games .m-area-heading {
    /*padding-top: 0 !important;*/
    padding-bottom: 18px;
}

@media screen and (max-width: 539px) {
    .wideFeatured .featured-games .m-area-heading {
        padding-bottom: 9px;
    }
}

.wideFeatured .featured-games a.skip-rotator {
    background-color: #333;
    color: #fff;
    position: absolute;
    top: 10%;
    left: -500%;
    transform: translateX(-50%);
    padding: 5px 15px;
    z-index: 400;
}

.wideFeatured .featured-games a.skip-rotator:focus {
    left: 50%;
}

.wideFeatured #skipped {
    width: .01px;
    height: .01px;
    opacity: 0;
}

.wideFeatured .featured-games .m-product-placement {
    max-width: calc(1353px);
    margin: 0 auto;
    float: none;
}

.wideFeatured .featured-games * {
    border: 0;
}

.wideFeatured .featured-games .c-carousel::before {
    content: "";
    position: absolute;
    bottom: -50px;
    height: 100%;
    width: 100%;
    z-index: -1;
    /*background-color: rgba(103, 114, 128, .5);*/
    /* Done this way because of a small gap than can exist inside an element.*/
    /*-webkit-filter: blur(50px);
    filter: blur(50px);*/
}

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
    .wideFeatured .featured-games .m-product-placement-item::before {
        /*box-shadow: 0px 50px 5px 0px rgba(103, 114, 128, .5); The above method doesn't work in IE */
    }

    .wideFeatured .featured-games .c-carousel::before {
        background-color: rgba(103, 114, 128, .3);
        /*box-shadow: 0px 0px 50px 0px rgba(103,114,128,0.5);*/
        width: 100%;
        height: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}


/* These containers don't scale, so setting fixed width/height */

.wideFeatured .featured-games .m-product-placement-item>a,
.wideFeatured .featured-games .m-product-placement-item.f-size-large picture,
.wideFeatured .featured-games .c-product-placement.f-size-large picture,
.wideFeatured .featured-games .m-product-placement-item.f-size-large,
.wideFeatured .featured-games .c-product-placement.f-size-large {
    box-sizing: content-box;
    padding: 0 !important;
}

@media screen and (min-width: 768px) and (max-width: 1083px) {

    .wideFeatured .featured-games.specialFeatured .m-product-placement-item>a,
    .wideFeatured .featured-games.specialFeatured .m-product-placement-item.f-size-large picture,
    .wideFeatured .featured-games.specialFeatured .c-product-placement.f-size-large picture,
    .wideFeatured .featured-games.specialFeatured .m-product-placement-item.f-size-large,
    .wideFeatured .featured-games.specialFeatured .c-product-placement.f-size-large {
        width: 520px !important;
        height: 780px !important;
    }

    .wideFeatured .gamesSection .c-carousel .m-product-placement-item a [class^="c-heading"] {
        bottom: 56px;
    }
}

@media screen and (max-width: 767px) {

    .wideFeatured .featured-games.specialFeatured .m-product-placement-item>a,
    .wideFeatured .featured-games.specialFeatured .m-product-placement-item.f-size-large picture,
    .wideFeatured .featured-games.specialFeatured .m-product-placement-item.f-size-large img,
    .wideFeatured .featured-games.specialFeatured .c-product-placement.f-size-large picture,
    .wideFeatured .featured-games.specialFeatured .m-product-placement-item.f-size-large,
    .wideFeatured .featured-games.specialFeatured .c-product-placement.f-size-large {
        width: 300px !important;
        height: 450px !important;
    }
}

.wideFeatured .featured-games.specialFeatured .m-product-placement-item>a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 1) 100%);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 1) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .2) 97%, rgba(0, 0, 0, 1) 100%);
}

.wideFeatured .featured-games .m-product-placement-item>a:hover *,
.wideFeatured .featured-games .c-product-placement>a:hover * {
    border: 0;
    text-decoration: inherit;
}

.wideFeatured .featured-games .m-product-placement-item>a:focus,
.wideFeatured .featured-games .c-product-placement>a:focus {
    outline: 2px dashed #fff;
    border: 2px dashed #000 !important;
}

.wideFeatured .featured-games .m-product-placement-item>a:focus>picture,
.wideFeatured .featured-games .m-product-placement-item>a:focus>.f-default-image>picture,
.wideFeatured .featured-games .m-product-placement-item>a:hover>picture,
.wideFeatured .featured-games .m-product-placement-item>a:hover>.f-default-image>picture,
.wideFeatured .featured-games .c-product-placement>a:focus>picture,
.wideFeatured .featured-games .c-product-placement>a:focus>.f-default-image>picture,
.wideFeatured .featured-games .c-product-placement>a:hover>picture,
.wideFeatured .featured-games .c-product-placement>a:hover>.f-default-image>picture {
    border: 0;
}

.wideFeatured .featured-games .m-product-placement-item>a:hover .c-heading,
.wideFeatured .featured-games .m-product-placement-item>a:hover .c-subheading,
.wideFeatured .featured-games .c-product-placement>a:hover .c-heading,
.wideFeatured .featured-games .c-product-placement>a:hover .c-subheading,
.wideFeatured .featured-games .m-product-placement-item>a:hover .c-paragraph,
.wideFeatured .featured-games .m-product-placement-item>a:focus .c-heading,
.wideFeatured .featured-games .m-product-placement-item>a:focus .c-subheading,
.wideFeatured .featured-games .c-product-placement>a:focus .c-heading,
.wideFeatured .featured-games .c-product-placement>a:focus .c-subheading,
.wideFeatured .featured-games .m-product-placement-item>a:focus .c-paragraph {
    text-decoration: none;
}

.wideFeatured .featured-games .m-product-placement-item.f-size-large div.slide-content {
    position: absolute;
    bottom: 3px;
    left: 2px;
    right: 0;
    color: white;
    z-index: 100;
    padding: 32px 27px 30px 30px;
    white-space: normal;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .5) 12px, rgba(0, 0, 0, .1) 27%);
}

.wideFeatured .featured-games .m-product-placement-item.f-size-large div.slide-content .c-badge.f-small {
    font-size: 11px;
    height: 16px;
    color: #fff;
    background-color: #107c10;
}

.wideFeatured .featured-games .m-product-placement-item .slide-content .availability {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.wideFeatured .featured-games .m-product-placement-item .slide-content .availability>div {
    bottom: 0;
    right: 0;
    background-color: #fff;
    display: inline-block;
    transform: translateX(-15px) skewX(32deg);
    /* counter this in child element */
}

.wideFeatured .featured-games .m-product-placement-item .slide-content .availability p {
    height: 32px;
    line-height: 30px;
    padding: 0 22px 0 47px;
    /* padding compensated for skew and parent margin to maintain 32px */
    color: #000;
    display: inline-block;
    text-align: top;
    transform: skewX(-32deg);
    /* counters parent element */
}

@media screen and (max-width: 767px) {
    .wideFeatured .featured-games .m-product-placement-item .slide-content .availability p {
        padding-left: 30px;
        padding-right: 26px;
    }
}

.wideFeatured .featured-games .m-product-placement-item .slide-content .availability p span {
    font-family: "MWF-MDL2";
    display: inline-block;
    font-weight: 400;
    font-size: 1.2em;
    vertical-align: middle;
}

.wideFeatured .featured-games .m-product-placement-item .slide-content .availability p span.false {
    display: none;
}

.wideFeatured .featured-games .m-product-placement-item .slide-content .availability p span:first-of-type {
    padding-left: 8px;
}

.wideFeatured .featured-games .m-product-placement-item .slide-content .availability p span:nth-child(2) {
    padding-left: 12px;
}

@media screen and (max-width: 767px) {
    .wideFeatured .featured-games .m-product-placement-item .slide-content .availability p span:nth-child(2) {
        padding-left: 11px;
    }
}

.wideFeatured .featured-games .availability {
    display: none;
}

.wideFeatured .featured-games .m-product-placement-item .c-paragraph,
.wideFeatured .featured-games .c-product-placement .c-paragraph {
    color: #fff;
}

.wideFeatured .featured-games .m-product-placement-item .slide-content .availability .m-product-placement-item .c-paragraph,
.wideFeatured .featured-games .c-product-placement .c-paragraph {
    color: #fff;
}

.wideFeatured .featured-games .m-product-placement-item .f-default-image,
.wideFeatured .featured-games .c-product-placement .f-default-image {
    padding-right: 0 !important;
}

.wideFeatured .featured-games .m-product-placement-item picture .c-image,
.wideFeatured .featured-games .c-product-placement picture .c-image {
    top: 0 !important;
    left: 0 !important;
    transform: translate(0, 0) !important;
}

.wideFeatured .featured-games .m-product-placement-item>a>picture,
.wideFeatured .featured-games .m-product-placement-item>a>.f-default-image>picture,
.wideFeatured .featured-games .c-product-placement>a>picture,
.wideFeatured .featured-games .c-product-placement>a>.f-default-image>picture {
    border: 0;
}

.wideFeatured .featured-games .m-product-placement .c-carousel .c-group {
    padding: 4px 8px 8px 8px;
}

.wideFeatured .featured-games .m-product-placement-item>a {
    margin: 0 6px 0 4px;
}

@media (max-width:767px) {
    .wideFeatured .gamesSection .c-carousel .m-product-placement-item {
        margin: 0px 24px 12px 0px;
    }

    .wideFeatured .gamesSection .c-carousel .m-product-placement-item a [class^="c-heading"] {
        min-height: 4.5em;
        bottom: 80px;
    }

    .wideFeatured .gamesSection .specialFeatured .c-carousel .m-product-placement-item a [class^="c-heading"] {
        min-height: 1em;
    }

    .wideFeatured button.c-flipper {
        top: 45% !important;
    }

    .wideFeatured .featured-games .rotator-heading h2,
    .wideFeatured .featured-games .rotator-heading p {
        text-align: center;
    }

    .wideFeatured .featured-games.specialFeatured .m-product-placement-item.f-size-large div.slide-content {
        padding: 32px 12px 0px 16px;
    }
}

.wideFeatured .specialFeatured .m-product-placement-item.f-size-large {
    width: 520px;
}

.wideFeatured .gamesSection .specialFeatured .c-carousel .m-product-placement-item.f-size-large picture {
    height: 780px;
    width: 520px;
}

.wideFeatured .specialFeatured img.c-image {
    width: 520px;
    max-width: 520px;
    height: 780px;
}

.wideFeatured .featured-games.specialFeatured .m-product-placement-item.f-size-large div.slide-content .c-badge.f-small {
    color: #505050;
    background: #e6e6e6;
    height: 15px;
    font-size: 12px;
    margin-bottom: 12px;
}

.wideFeatured .featured-games.specialFeatured .m-product-placement-item>a {
    margin: 0;
}

.wideFeatured .c-carousel .c-flipper+div {
    overflow: visible;
}

.wideFeatured {
    overflow-x: hidden;
    width: 100%;
    overflow-y: hidden;
}

/* End There With You */

/* Best Studios */
.logo-groups .m-banner {
    max-width: 1067px !important;
}

.logo-groups .m-banner p {
    padding-top: 10px;
}

.logo-groups .logoSlider {
    opacity: 0;
    transition: opacity 1000ms;
    transition-delay: 1700ms;
}

.logo-groups .logoSlider.fade-in {
    opacity: 1;
}

.logo-groups .logoSlider {
    margin: auto;
    overflow: hidden;
    position: relative;
}

.logo-groups .slide picture {
    height: inherit;
}

.logo-groups .logoSlider .m-product-placement-item.f-clean>picture:hover {
    border: 1px solid rgba(0, 0, 0, 0) !important;
}

.logo-groups .slide-track {
    display: flex;
}

.logo-groups .logoImages {
    margin-top: 8px;
}

.logo-groups .logoImages .slide-track {
    animation: logosscroll 44.4444s linear infinite; /*reduce seconds to speed up, increase to slow down scroll speed based on number of logos */
}

.logo-groups .logoImages2 .slide-track {
    animation: logosscroll2 50s linear infinite;
    animation-delay: 2.7s;
}
@keyframes logosscroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-450px * 8)); /* times number of logos in row, could move this to js to automate */
    }
}
@keyframes logosscroll2 {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-450px * 9));
    }
}
.bestStudiosPaddingTop {
    margin-top: 78px;
}
@media (max-width: 767px) {
    .bestStudiosPaddingTop {
        margin-top: 84px;
    }
}
.bestStudiosPaddingBottom {
    margin-top: 96px;
}

.logo-groups .pausePlay {
    height: 36px !important;
    width: 36px;
    position: absolute;
    color: white;
    background-color: rgba(0, 0, 0, 0.60);
    border: 1px solid white !important;
    bottom: 24px;
    display: block;
    padding: 2px 0px 0px 0px;
    margin-left: 24px;
}

.logo-groups .logoSlider .pausePlay:focus {
    outline: 2px dotted #000 !important;
    border: 2px dotted #FFF !important;
}

.logo-groups .slide {
    list-style: none;
}

.logo-groups .logoImages .paused,
.logo-groups .logoImages2 .paused {
    animation-play-state: paused;
}

.logo-groups .m-product-placement-item.f-size-large {
    width: 432px;
}
.m-product-placement-item.f-size-large picture {
    height: 245px;
    width: 432px;
}

@media (max-width: 360px) {
    /* Text overflow fix */
    .breakable-nbsp {
        white-space: normal;
        /* Replace   with a normal space */
        &::after {
            content: " ";
        }
        /* Hide the original   */
        visibility: hidden;
    }
}

/* End Best Studios */

/* Your Play Is In Your Control */
div.yourControl div.yourControlContainer {
    max-width: 1920px;
    margin: 0 auto;
}

div.yourControl div.yourControlContainer p.c-heading-3 {
    margin: 0 auto 24px;
}

@media screen and (min-width: 768px) {
    div.yourControl div.yourControlContainer p.c-heading-3 {
        max-width: 70%;
    }

}

div.yourControl div.yourControlContainer div.c-group {
    margin-top: 24px;
}

/* end Your Play Is In Your Control */

/* Xbox is There With You */
.iconBar .custom-cp-icons img {
    max-width: 137px;
}

@media (max-width: 540px) {

    /* Override MWF mobile grid layout */
    .iconBar [data-grid="col-12 stack-3"]>div>div {
        width: 50% !important;
        float: left !important;
        box-sizing: border-box;
    }

    .iconBar .custom-cp-icons img {
        max-width: 103px;
    }
}

/* end Xbox is There With You */