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


/* global styles */

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

.relative {
    position: relative;
}


/* per stakeholder */

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


/* END global styles */


/* Shared styles */

.testimonial {
    max-width: 280px !important;
    min-height: 107px;
    margin-top: 24px;
    padding: 24px 0 0 16px !important;
    background-image: url(https://compass-ssl.xbox.com/assets/97/d1/97d14d5e-e0f7-417d-b9a1-defc3b7b31c2.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 {
    border: none !important;
    background: transparent;
}

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

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

.c-glyph.glyph-play span,
.c-glyph.glyph-pause span {
    vertical-align: middle;
}

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

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

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

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

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

.erp.buyBox .buyBoxPurchases {
    vertical-align: top;
    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 {
    padding-top: 48px;
}

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

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

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

.erp.buyBox p.pbDesc {
    padding-top: 10px;
    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 .bcggPromo {
    margin-right: 0;
    max-width: none;
    height: auto;
    align-items: center;
    padding: 0;
    min-height: 66px;
}

.erp .bcggPromo img {
    margin-left: 4%;
    max-height: 33px;
}

.erp .bcggPromo .bcggText {
    padding: 2% 2% 2% 3.5%;
    margin-left: 3.5%;
    position: relative;
}

.erp .bcggPromo .bcggText:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 52px;
    width: 2px;
    background-color: #c6c6c6;
}

.erp .bcggPromo .c-heading-1a-pre {
    font-size: 24px !important;
    display: block;
    margin-left: 0;
    line-height: 1.12 !important;
    position: relative;
    top: 0;
    -ms-transform: none;
    transform: none;
    padding: 0;
}

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