/* ========================================== */

body {
    background-color: #000;
}


/* global styles */

.m-in-page-navigation.trans .CTAdiv button.c-call-to-action.purchButton.disabled {
    background-color: #e6e6e6 !important;
    color: #757575 !important;
    pointer-events: none;
    border: none !important;
}

div[data-grid~="container"] {
    max-width: calc(1640px + 10%);
}

div[data-grid~="container"].narrow {
    max-width: calc(1362px + 10%);
    padding-left: 5%;
    padding-right: 5%;
}

.strikethroughPrice {
    margin-right: 12px;
    text-decoration: line-through;
}

.relative {
    position: relative;
}

.m-content-placement p .c-hyperlink {
    padding: 0;
}

.tech-3up .m-content-placement p .c-hyperlink {
    display: inline;
}

@media screen and (min-width: 768px) {
    .control .m-hero-item .c-heading-4 {
        font-size: 20px;
        line-height: 24px;
    }
}

.c-badge.f-highlight.f-small.exclusive {
    margin-bottom: 18px;
}


/* per stakeholder */

@media screen and (min-width: 1400px) {
    .page-hero .c-heading-1L {
        font-size: 112px;
        line-height: 1em;
    }
}


/* END global styles */


/* Shared styles */

.estimatedXaa {
    margin-bottom: 26px;
}

.testimonial {
    max-width: 280px !important;
    min-height: 107px;
    margin-top: 24px;
    padding: 24px 0 0 16px !important;
    background-image: url(https://assets.xboxservices.com/assets/c7/56/c7562560-0c72-4ca2-b297-a5c1c50a331a.png?n=quote-bg.png);
    background-position: left top;
    background-repeat: no-repeat;
}

.testimonial span {
    display: block;
    padding-top: 24px;
    font-size: 15px;
    font-weight: 700;
}

.testimonial p {
    padding-top: 0;
    overflow: visible !important;
}

.m-ambient-video div button.vidPlayPause {
    background: transparent;
    border: 2px solid transparent !important;
    border-radius: 50%;
    padding: 0 !important;
    box-shadow: none;
}

.m-ambient-video div button:focus {
    outline: 2px dashed #000 !important;
    border: 2px dashed #fff !important;
    border-radius: 50%;
    outline-offset: 0px;
}

@media only screen and (min-width: 1084px) {
    .tech-banner .m-banner,
    .halo-banner .m-banner,
    .new-generation .m-banner {
        max-width: 1600px !important;
    }
}

.new-generation .m-banner {
    text-align: left;
}

@media only screen and (min-width: 768px) {
    .new-generation .m-banner {
        padding-top: 0;
    }
}

a.c-action-trigger.c-glyph.glyph-play:hover,
a.c-action-trigger.c-glyph.glyph-pause:hover {
    text-decoration: none;
}

a.c-action-trigger.c-glyph.glyph-play:hover span,
a.c-action-trigger.c-glyph.glyph-pause:hover span {
    text-decoration: underline;
}


/* END shared styles */


/* ========================================== */


/*fix video playing in background */

[id^="ContentBlockList_"] {
    position: relative;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}

.xboxSocial {
    background-color: #fff;
}


/* Image high-contrast fix? */

@-moz-document url-prefix() {
    .high-contrast-white-on-black .high-contrast-black-image>img,
    .high-contrast-black-on-white .high-contrast-white-image>img {
        filter: invert(1);
    }
}

@media screen and (-ms-high-contrast:white-on-black) {
    .high-contrast-black-image {
        display: inline-block;
        background-color: #fff;
        /* IE doesn't support filter:invert, so this needs to be set correctly for IE */
        filter: invert(1);
    }
    .high-contrast-black-image>img {
        filter: invert(1);
    }
    .high-contrast-white-image {
        display: inline-block;
        background-color: #000;
        /* IE doesn't support filter:invert, so this needs to be set correctly for IE */
        filter: invert(1);
    }
}

@media screen and (-ms-high-contrast:black-on-white) {
    .high-contrast-black-image {
        display: inline-block;
        background-color: #fff;
        /* IE doesn't support filter:invert, so this needs to be set correctly for IE */
    }
    .high-contrast-white-image {
        display: inline-block;
        background-color: #000;
        /* IE doesn't support filter:invert, so this needs to be set correctly for IE */
        filter: invert(1);
    }
    .high-contrast-white-image>img {
        filter: invert(1);
    }
}


/* MWF HEADER FIX */

@media only screen and (min-width: 1779px) {
    .c-uhfh.f-transparent {
        margin-top: 0px !important;
    }
}

.c-uhfh.context-uhf {
    z-index: 3200;
}

@media screen and (min-width: 860px) {
    div.trans.m-in-page-navigation:not(.standard-header) {
        top: 56px;
    }
}

div.m-ambient-video div button {
    height: 42px !important;
    width: 42px !important;
    z-index: 900;
    padding: 0 !important;
}

.m-ambient-video.pp-button {
    z-index: 1;
}

.m-ambient-video.pp-button video {
    z-index: 1;
    width: 100%;
}

@media screen and (min-width: 768px) and (max-width: 1083px) {
    .plax3Layer .m-hero-item>picture.layer1:after {
        background-color: rgba(0, 0, 0, .5);
    }
}

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

.fastestMp .text-shadow {
    text-shadow: none;
}

.text-shadow-reverse {
    text-shadow: 0px 0px calc(.08em + 13px) #fff;
}

@media screen and (min-width: 1084px) and (max-width: 1530px) {
    nav.c-in-page-navigation>p {
        display: none;
    }
    .m-in-page-navigation .c-navigation-menu {
        display: block;
    }
    .c-in-page-navigation>ul {
        display: none;
    }
}

.videoBgShort a.c-action-trigger {
    margin-top: 24px !important;
}

section.faq-mwf>a.c-call-to-action {
    margin-top: 12px;
}

.lightboxclosebutton {
    top: 80px;
}

.lightboxclosebutton:before {
    display: block;
}

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

.doubleVideo .middleVideo.m-ambient-video .c-image,
.external-storage .m-ambient-video .c-image,
.airflow-background .m-ambient-video .c-image,
.inside-out .m-ambient-video .c-image,
.slide-mosaic__panel .m-ambient-video .c-image {
    position: relative;
    top: auto;
}

.doubleVideo .middleVideo.m-ambient-video .c-image {
    margin: 0 auto;
}

.theme-dark {
    background-color: #000;
}

@media screen and (max-width: 419px) {
    .videoBgShort .c-heading-1a {
        font-size: 36px;
        line-height: 1.12em;
    }
}

.airflow-background .m-ambient-video:after {
    content: '';
    position: absolute;
    top: 0;
    width: 100%;
    height: 8%;
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%)
}

.high-contrast-mode.black-on-white .stagger-panel .high-contrast-white-image {
    display: inline-block;
    background-color: #fff;
    filter: invert(0);
}

.high-contrast-mode.black-on-white .stagger-panel .high-contrast-white-image img {
    filter: grayscale(1) brightness(0) invert(0);
}


/* ====  addng ERP-related overrides here ==== */

.erp.buyBox .buyBoxPurchases {
    padding-top: 0;
}

.erp.buyBox .purchBoxes {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.erp.buyBox .purchBox {
    /*width: 49.4%;*/
    min-height: auto;
    margin: 0;
    margin-top: 16px;
    max-width: none;
}

.erp.buyBox .purchBox:first-of-type {
    margin-right: 1.2%;
}

.erp.buyBox .purchBoxes .intro {
    /* min-height: 224px; */
    padding-bottom: 24px;
}

.erp.buyBox .intro li {
    left: 0;
}

.erp.buyBox .intro ul {
    padding-left: 18px;
}

.erp.buyBox .purchase:not(.retailer) {
    padding-top: 48px;
}

.erp.buyBox .purchase-intro {
    min-height: 78px;
}

.erp.buyBox .buy-group {
    position: relative;
    bottom: auto;
    min-height: auto;
}

.erp.buyBox hr {
    margin: 0 auto;
}

.erp.buyBox p.pbDesc {
    padding-top: 0;
    margin: 0 !important;
    padding-bottom: 10px;
}

@media screen and (max-width: 767px) {
    .erp.buyBox .purchBoxes {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .erp.buyBox .purchBoxes .intro {
        min-height: auto;
    }
    .erp.buyBox .purchBox:first-of-type {
        margin-right: 0;
    }
}

@media screen and (min-width: 768px) and (max-width: 1083px) {
    .erp.buyBox .buyBoxPurchases {
        display: block;
        width: 100%;
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (max-width: 767px) {
    .erp.buyBox .buyBoxPurchases {
        display: block;
        width: 100%;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }
    .erp.buyBox .buyBoxPurchases .purchBox {
        width: 100%;
        max-width: none;
    }
}


/*
@media screen and (min-width: 1261px) {
    .erp.buyBox .buyBoxPurchases {
        padding-right: 5%;
    }
}
*/

.erp.buyBox .purchBoxes.noXaa {
    display: block;
}

.erp.buyBox .purchase.retailer a.buffer {
    margin-top: 24px;
}

.purchButton.disabled {
    background-color: #e6e6e6 !important;
    color: #757575 !important;
    pointer-events: none;
}

@media screen and (max-width: 767px) {
    .m-ambient-video video+div button,
    .m-ambient-video video+div {
        display: none;
    }
}

.buyBox .c-carousel.theme-dark {
    background-color: transparent;
}


/* Icon List Hero */

.icon-list-hero .m-hero-item>div picture {
    display: block;
}

.icon-list-hero .m-hero-item .c-heading-1a {
    padding-bottom: 0;
}

.icon-list-hero h3 {
    text-transform: uppercase;
}

.icon-list-hero p.c-heading-4 {
    padding-top: 18px;
    padding-bottom: 8px;
}

.icon-list-hero a.c-call-to-action.f-lightweight {
    margin-bottom: -7px;
}

@media screen and (min-width: 768px) and (max-width: 1083px) {
    .icon-list-hero .m-hero-item .c-heading-1a {
        font-size: 48px;
        line-height: .96em;
    }
    .icon-list-hero .m-hero-item .pwd-copy-section>p {
        font-size: 22px;
        line-height: 26px;
        padding-top: 24px;
    }
}

@media screen and (max-width: 481px) {
    .icon-list-hero .m-hero-item .c-heading-1a {
        font-size: 34px;
        line-height: 1;
    }
}

.icon-list-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) {
    .icon-list-hero .m-hero-item.f-transparent:before {
        padding-bottom: 71% !important;
    }
}

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

@media screen and (min-width: 768px) and (max-width: 1083px) {
    .icon-list-hero .m-hero-item.f-transparent:before {
        padding-bottom: 127% !important;
    }
    .pwd-copy-section .c-heading-1 {
        font-size: 46px !important;
        line-height: 56px !important;
    }
}

@media screen and (min-width: 768px) {
    .page-hero.theme-series-s {
        color: #FFFFFF;
    }
}

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

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

@media screen and (min-width: 1084px) and (max-width: 1279px) {
    .c-heading-1a {
        font-size: 56px;
        line-height: 54px;
    }
}
/*
@media screen and (min-width: 1084px) and (max-width: 1604px) {
    .c-heading-1a {
        max-width: 400px;
    }
}
@media screen and (min-width: 1605px) {
    .c-heading-1a {
        max-width: 500px;
    }
}
*/
@media screen and (min-width: 1600px) {
    .icon-list-hero section.m-hero-item div.pwd-copy-section {
        max-width: 750px !important;
    }
    .icon-list-hero .icons {
        max-width: 540px !important;
    }
}

.pwd-copy-section>section,
.icon-list-hero .icons {
    padding-bottom: 0 !important;
}

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

.icon-list-hero section.m-hero-item {
    height: auto !important;
}

.icon-list-hero div[class^="icon-list-svg"],
.icon-list-hero div[class^="icon-list-svg"] img {
    width: 100% !important;
    max-width: 100px !important;
}

@media screen and (max-width: 767px) {
    .icon-list-hero div[class^="icon-list-svg"],
    .icon-list-hero div[class^="icon-list-svg"] img {
        width: 100% !important;
        max-width: 155px !important;
    }
    .icon-list-hero {
        padding-bottom: 132px;
    }
    .icon-list-hero .m-ambient-video video+div {
        display: none;
    }
}

@media screen and (min-width: 768px) {
    .icon-list-hero .icons [data-grid^="col-"]:nth-child(odd) {
        /*max-width: 136px !important;*/
        clear: both !important;
    }
    .icon-list-hero div[class^="icon-list-svg"] {
        width: auto !important;
        /*max-width: calc(112px + 5%) !important;*/
        margin-right: auto !important;
        margin-left: 0 !important;
        padding: 5px 15% 5px 0 !important;
    }
}

.icon-list-hero .icons [class^="c-paragraph"] {
    padding-top: .5em !important;
}

.icons [data-grid^="col-"] {
    padding-bottom: 0;
}

@media screen and (max-width: 767px) {
    div.icon-list-hero section.m-hero-item div.pwd-copy-section .icons>div:nth-child(even) {
        margin-top: 16px !important;
    }
    div.icon-list-hero section.m-hero-item div.pwd-copy-section .icons>div:nth-child(odd) {
        margin-top: 48px !important;
    }
    .esrbblade [data-grid*=col-] {
        padding-top: 0;
    }
}

@media screen and (max-width: 540px) {
    .icon-list-svg-1,
    .icon-list-svg-2,
    .icon-list-svg-3 {
        margin: 0 auto !important;
    }
}

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


/* Removing 2/20/24
@media only screen and (min-width: 768px) {
    .high-contrast-mode.black-on-white .icon-list-hero .icons img {
        filter: brightness(0);
    }
} */

@media screen and (min-width: 768px) and (max-width: 1084px) {
    .text-spacing .icon-list-hero .m-hero-item.f-transparent:before,
    .icon-list-hero .m-hero-item.f-transparent[style]:before {
        padding-bottom: 158% !important;
    }
    .text-spacing .icon-list-hero .m-hero-item .c-heading-1a,
    .icon-list-hero .m-hero-item[style] .c-heading-1a {
        font-size: 32px;
    }
}

@media screen and (min-width: 1084px) and (max-width: 1399px) {
    .text-spacing .icon-list-hero .m-hero-item.f-transparent:before,
    .icon-list-hero .m-hero-item.f-transparent[style]:before {
        padding-bottom: 120% !important;
    }
    .text-spacing .icon-list-hero .m-hero-item .c-heading-1a,
    .icon-list-hero .m-hero-item[style] .c-heading-1a {
        font-size: 36px;
    }
}

@media screen and (min-width: 1400px) {
    .text-spacing .icon-list-hero .m-hero-item.f-transparent:before,
    .icon-list-hero .m-hero-item.f-transparent[style]:before {
        padding-bottom: 88% !important;
    }
    .text-spacing .icon-list-hero .m-hero-item .c-heading-1a,
    .icon-list-hero .m-hero-item[style] .c-heading-1a {
        font-size: 44px;
    }
}


/* End Icon List Hero */


/* override to make hero flow at mobile */

@media only screen and (max-width: 767px) {
    .custom-hero .m-hero-item:before {
        /* This is what defines the aspect ratio of the hero */
        display: none;
    }
    .custom-hero .m-hero-item>div,
    .custom-hero .m-hero-item>div>div,
    .custom-hero .m-hero-item>picture img,
    .custom-hero .m-hero-item>img,
    .custom-hero .m-hero-item>picture {
        /* Some of these styles are redundant for some of these elements, but it doesn't hurt to pile them up in one place */
        position: relative;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        overflow: visible;
        height: auto;
    }
    .custom-hero .m-hero-item>div>div {
        padding-bottom: 48px;
    }
}

@media screen and (max-width: 767px) {
    .m-ambient-video.pp-button>video+div {
        display: none !important;
    }
}


/* 
===================
CONTENT PLACEMENT, DRAWERS
===================
*/

.custom-drawer {
    max-width: 1920px !important;
    padding-bottom: 96px;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

.custom-drawer .c-drawer {
    text-align: center;
    /* to align drawer toggle center */
}

.custom-drawer .c-drawer>div {
    /* to correct everything inside */
    text-align: left;
}

.controller .custom-drawer .c-drawer>div {
    padding-top: 96px;
}

@media screen and (max-width: 767px) {
    .controller .custom-drawer .c-drawer>div {
        padding-top: 0;
    }
}

.airflow-tech .custom-drawer .c-drawer>div {
    padding-top: 68px;
}

.custom-drawer .c-drawer>div {
    /* to correct everything inside */
    text-align: left;
}

.custom-drawer .c-drawer .c-drawer-toggle.c-action-trigger {
    padding: 5px 20px 5px 0px;
    font-size: 15px;
    line-height: 18.5px;
    font-weight: 900;
    background: transparent;
    color: #107c10;
    border-color: #107c10;
    outline: 1px solid transparent;
    display: inline-block;
    width: auto;
    margin: 0 auto;
}

@media screen and (max-width: 321px) {
    .custom-drawer .c-drawer .c-drawer-toggle.c-action-trigger.textwrap {
        text-wrap: balance;
        text-align: center;
    }
}

.theme-black .custom-drawer .c-drawer .c-drawer-toggle.c-action-trigger,
.theme-dark .custom-drawer .c-drawer .c-drawer-toggle.c-action-trigger {
    color: #9bf00b;
    border-color: #9bf00b;
}

.custom-drawer .c-drawer .c-drawer-toggle.c-action-trigger:focus {
    color: #107c10;
    border: 2px solid #107c10;
    outline: 1px dashed #000;
    outline-offset: 0;
}

@media screen and (max-width: 767px) {
    .custom-drawer .c-drawer .c-drawer-toggle.c-action-trigger.textwrap:focus {
        margin: 10px;
    }
}

.theme-black .custom-drawer .c-drawer .c-drawer-toggle.c-action-trigger:focus,
.theme-dark .custom-drawer .c-drawer .c-drawer-toggle.c-action-trigger:focus {
    color: #9bf00b;
    border: 2px solid #9bf00b;
    outline: 1px dashed #fff;
}

.custom-drawer .c-drawer .c-drawer-toggle:before {
    position: relative;
    top: 0;
    transform: none;
    left: 0;
}

.custom-drawer .c-drawer,
.custom-drawer .c-drawer .c-drawer-toggle {
    background: transparent;
    padding: 0;
}

.easy-upgrade {
    padding-top: 28px;
}

.custom-drawer.upgrade {
    padding-top: 24px;
    padding-bottom: 124px;
}

.easy-upgrade .m-content-placement-item>picture {
    padding-bottom: 76.25%;
}

.easy-upgrade p[class^="c-subheading"] {
    max-width: 950px;
    margin: 0 auto;
}


/* Text spacing fixes */

.text-spacing .jump-g,
.text-spacing .jump-b,
.jump-g[style],
.jump-b[style] {
    display: none;
}

.text-spacing .m-ambient-video div button,
.m-ambient-video div button[style] {
    margin-left: 0;
}

@media screen and (max-width: 1083px) {
    .text-spacing .c-heading-1a:not(.purchBox .c-heading-1a),
    .c-heading-1a:not(.purchBox .c-heading-1a)[style] {
        font-size: 32px !important;
    }
    .text-spacing .c-heading-1L,
    .c-heading-1L[style] {
        font-size: 36px !important;
    }
    .text-spacing .c-heading-2,
    .text-spacing .c-heading-3,
    .c-heading-2[style],
    .c-heading-3[style] {
        font-size: 24px !important;
    }
    .text-spacing .c-heading-4,
    .c-heading-4[style] {
        font-size: 20px !important;
    }
}

@media screen and (min-width: 1084px) and (max-width: 1399px) {
    .text-spacing .c-heading-1a:not(.purchBox .c-heading-1a),
    .c-heading-1a:not(.purchBox .c-heading-1a)[style] {
        font-size: 40px !important;
    }
    .text-spacing .c-heading-1L,
    .c-heading-1L[style] {
        font-size: 44px !important;
    }
    .text-spacing .c-heading-2,
    .text-spacing .c-heading-3,
    .c-heading-2[style],
    .c-heading-3[style] {
        font-size: 28px !important;
    }
    .text-spacing .videoBgShort.instantLib p,
    .videoBgShort.instantLib p[style] {
        font-size: 20px;
    }
}

@media screen and (min-width: 1400px) {
    .text-spacing .c-heading-1a:not(.purchBox .c-heading-1a, .noStep),
    .c-heading-1a:not(.purchBox .c-heading-1a, .noStep)[style] {
        font-size: 42px !important;
    }
    .text-spacing .c-heading-1L,
    .c-heading-1L[style] {
        font-size: 48px !important;
    }
    .text-spacing .c-heading-2,
    .text-spacing .c-heading-3,
    .c-heading-2[style],
    .c-heading-3[style] {
        font-size: 30px !important;
    }
}


/* END Text spacing fixes */

a.c-action-trigger.c-glyph.glyph-play:before {
    position: relative;
    display: inline-block;
    top: 0;
    left: 0;
    transform: none;
}


/* keep glyph in line with long text strings */

.buyBox .purchBox .c-call-to-action span {
    display: inline;
}