/** en-us css Relevant styles from css-New.css **/

.legalSub {
    margin-bottom: 35px;
}

@media screen and (max-width: 1500px) {
    .legalSub {
        margin-bottom: 15px;
    }
}

.sku-chooser {
    width: 100%;
    min-height: 67.708vw;
}

@media screen and (min-width: 768px) and (max-width: 1083px) {
    .sku-chooser {
        padding-top: 48px;
    }
}

.sku-chooser .m-banner [class^="c-subheading"] {
    font-weight: 400 !important;
    /*max-width: 520px;*/
    margin-left: auto;
    margin-right: auto;
}

.sku-chooser [data-grid^="col-"] {
    /*background-color: #ccc;*/
}

.sku-chooser__grid {
    float: none;
    padding-top: 40px;
}

.sku-chooser__grid .featured {
    /*width: 369px;*/
    width: 34.8771266%
}

.sku-chooser__grid .other {
    /*width: 689px;*/
    width: 65.12287%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 100%;
}

.sku-chooser__grid .other .sku-chooser__panel {
    /*flex-basis: 46.44412%;*/
}

.sku-chooser__panel {
    /*width: 320px;*/
    background-color: #eee;
    box-sizing: border-box;
    padding: 33px 12% 70px 12%;
    text-align: center;
    /*display: flex;
       flex-direction: column;
       justify-content: space-between;*/
    color: #fff;
    position: relative;
}

.sku-chooser__panel .intro {
    padding-bottom: 0px;
}

.sku-chooser__panel .intro a.c-call-to-action {
    margin-bottom: 30px;
}

.sku-chooser__panel sup {
    font-size: .58em;
}

.sku-chooser__panel .icon {
    max-width: 100%;
    margin: 13px 0 10px 0;
}

.sku-chooser .sku-chooser__panel .price {
    padding-top: 16px;
    min-height: 110px;
    max-width: 300px;
    margin: auto;
}

.sku-chooser__panel .price .introductory {
    /* in case there's an introductory price */
    font-size: 13px;
    padding-top: 0;
}

.sku-chooser__panel .price .final,
.sku-chooser__panel .price .temp {
    /* in case there's an introductory price */
    display: inline-block;
    display: inline-block;
}

.sku-chooser__panel .price .final {
    /* in case there's an introductory price */
    padding-top: 0px;
    position: relative;
    /*margin-top: 16px;*/
    margin-right: 8px;
}

.sku-chooser__panel .price .final::after {
    /* bigger, fatter strikethrough*/
    border-bottom: 3px solid rgba(255, 255, 255, 1);
    content: "";
    position: absolute;
    left: -.15em;
    right: -.15em;
    top: .54em;
    line-height: 1em;
}

.join-now .sku-chooser__panel .price .final::after {
    /* bigger, fatter strikethrough*/
    border-bottom: 3px solid rgba(0, 0, 0, 1);
}

.sku-chooser__panel .price .c-caption-1 {
    /* if there's only one, this will apply */
    padding-top: 11px;
}

.sku-chooser__panel .c-badge.f-small.f-highlight {
    display: block;
    font-weight: 700;
    position: absolute;
    top: -9px;
    left: 50%;
    color: white;
    transform: translateX(-50%);
    background-color: #107c10;
    letter-spacing: .2em;
}

.sku-chooser__panel a.c-call-to-action.green-brdr {
    border-color: #5cd21e;
}

.sku-chooser__panel a.c-call-to-action {
    margin-bottom: 34px;
}

.sku-chooser__panel .details>h4 {
    text-align: center;
    font-weight: 700 !important;
    padding-bottom: 20px;
}

.sku-chooser__panel .details li.c-paragraph-1 {
    width: 100%;
    text-align: left;
    padding-left: 60px;
    padding-bottom: 16px;
}

.SB-hero-banner .sku-chooser__panel .details li {
    width: 100%;
    text-align: left;
    padding-left: 60px;
    padding-bottom: 8px;
}

.SB-hero-banner .sku-chooser__panel .details li:before {
    display: block;
    position: absolute;
    top: 9px;
    left: 0;
    font-family: "MWF-MDL2";
    height: 100%;
    width: 48px;
    color: #107c10;
    font-weight: bold;
}

.sku-chooser__panel .details li.no-bullet {
    background-image: none;
    padding-top: 2px;
    padding-bottom: 7px;
    font-size: .9333333em;
}

.sku-chooser__panel .details li img {
    display: block;
}

.sku-chooser__panel .details a.f-lightweight {
    margin-bottom: 5px;
}

.sku-chooser__panel.left {
    width: 100%;
    background-color: #505050;
}

.sku-chooser__panel.middle,
.sku-chooser__panel.right {
    width: 49.5%;
    padding-left: 8%;
    padding-right: 8%;
    background-color: #107c10;
}

@media screen and (max-width: 1083px) {
    .sku-chooser__grid {
        padding-left: 5%;
        padding-right: 5%;
    }

    .sku-chooser__grid .other,
    .sku-chooser__grid .featured {
        display: block;
        width: 100%;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }

    .sku-chooser__panel,
    .sku-chooser__panel.left,
    .sku-chooser__panel.middle,
    .sku-chooser__panel.right {
        display: block;
        width: 100%;
        padding-left: 7%;
        padding-right: 7%;
        margin-bottom: 34px;
    }

    .sku-chooser__panel .intro {
        min-height: 1px;
    }
}

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

    .sku-chooser__grid .other,
    .sku-chooser__grid .featured {
        max-width: 515px;
    }

    .sku-chooser__panel,
    .sku-chooser__panel.left,
    .sku-chooser__panel.middle,
    .sku-chooser__panel.right {
        padding-left: 9%;
        padding-right: 9%;
    }
}

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

    .sku-chooser__panel,
    .sku-chooser__panel.left,
    .sku-chooser__panel.middle,
    .sku-chooser__panel.right {
        padding-left: 10%;
        padding-right: 10%;
    }
}

.sku-chooser__panel .details li.c-paragraph-1 {
    position: relative;
}

@media screen and (max-width: 767px) {
    .join-now .banner-background .sku-chooser__panel .intro {
        padding-top: 200px;
    }

    .join-now .banner-background section.m-hero-item {
        padding-bottom: 27vw;
    }
}

.join-now .sku-chooser__panel .price .final::after {
    /* bigger, fatter strikethrough*/
    border-bottom: 3px solid rgba(0, 0, 0, 1);
}

.join-now .banner-background {
    left: 4.9vw;
    width: 89vw;
    margin: 0;
}

@media screen and (min-width: 1795px) {
    .join-now .banner-background {
        padding: 83px 0 0 0;
        margin: 0;
        --widthA: 1795px;
        --widthB: calc(100vw - var(--widthA));
        --widthC: calc(var(--widthB)/2.2);
        --widthD: calc(var(--widthC) + 4.9vw);
        left: var(--widthD);
        width: 1600px;
    }

    .bbHeight {
        height: 65rem !important;
    }
}

@media screen and (max-width: 767px) {
    .join-now .banner-background section div div.high-contrast {
        top: calc(44%);
    }
}

@media screen and (min-width: 768px) and (max-width: 880px) {
    .join-now .banner-background section {
        height: 75vw;
    }

    .join-now .banner-background section div div.high-contrast {
        max-width: 260px;
    }
}

@media screen and (min-width: 881px) and (max-width: 985px) {
    .join-now .banner-background section {
        height: 63vw;
    }
}

@media screen and (min-width: 1400px) and (max-width: 1510px) {
    .join-now .banner-background .m-hero-item:before {
        padding-bottom: 44.55%;
    }
}

@media screen and (min-width: 768px) and (max-width: 1084px) {
    .join-now .banner-background .m-hero-item:before {
        padding-bottom: 70.875%;
    }
}

.join-now .banner-background {
    padding-bottom: 104px;
    z-index: 0;
}

.join-now.SB-hero-banner .m-banner .c-image {
    max-height: 40px;
}

@media screen and (min-width: 1400px) {
    .join-now.SB-hero-banner .m-banner .c-image {
        max-height: 48px;
    }
}

.join-now .banner-background .sku-chooser__panel {
    color: black;
    text-align: left;
    background-color: inherit;
}

.join-now .banner-background .sku-chooser__panel .intro .price {
    max-width: 250px;
    padding-bottom: 20px;
}

@media screen and (max-width: 767px) {
    .join-now .banner-background .sku-chooser__panel .intro .price {
        margin-left: auto;
        margin-right: auto;
    }

    .join-now .banner-background .sku-chooser__panel {
        text-align: center;
    }

    .join-now .banner-background .sku-chooser__panel .details {
        margin-left: auto;
        margin-right: auto;
        width: 60vw;
    }

    /* */
}

@media screen and (max-width: 600px) {
    .join-now .banner-background section div div.high-contrast {
        padding-top: 60px;
    }
}

@media screen and (max-width: 374px) {
    .join-now .banner-background section div div.high-contrast {
        padding-top: 170px;
    }

    .join-now .banner-background section.m-hero-item {
        padding-bottom: 46vw;
    }
}

@media screen and (min-width: 375px) and (max-width: 499px) {
    .join-now .banner-background section div div.high-contrast {
        padding-top: 150px;
    }

    .join-now .banner-background section.m-hero-item {
        padding-bottom: 66vw;
    }
}

@media screen and (max-width: 370px) {
    .join-now .banner-background section.m-hero-item {
        padding-bottom: 72vw;
    }
}

@media screen and (min-width: 1084px) and (max-width: 1399px) {
    .join-now .banner-background {
        height: 56vw;
    }

    .join-now .banner-background section {
        height: 45vw;
    }

    .join-now .banner-background section div {
        margin-right: .5vw;
        transform: translateY(0%);
        max-width: 500px;
    }

    .join-now .banner-background section div.bbWidth {
        transform: translateY(-47%);
    }

    .join-now .banner-background section div div.high-contrast {
        padding-left: 5vw;
    }
}

@media screen and (min-width: 768px) and (max-width: 1083px) {
    .join-now .banner-background section div {
        transform: translateY(0%);
    }
    .join-now .banner-background section div.bbWidth {
        transform: translateY(-40%);
    }

}

@media screen and (min-width: 1250px) and (max-width: 1399px) {
    .join-now .banner-background {
        height: 65vw;
    }

    .join-now .banner-background section {
        height: 58vw;
    }
}

@media screen and (min-width: 1400px) and (max-width: 1600px) {
    .join-now .banner-background section div {
        margin-right: 0vw;
    }
}

@media screen and (min-width: 1400px) and (max-width: 1794px) {
    /*.join-now .banner-background .m-hero-item>picture img {
        left: -4vw;
        width: 115%;
    }*/
}

@media screen and (min-width: 1150px) and (max-width: 1399px) {
    .join-now .banner-background .m-hero-item>picture img {
        left: 0vw;
        width: 100%;
        top: 40%;
    }
}

@media screen and (min-width: 1084px) and (max-width: 1149px) {
    .join-now .banner-background .m-hero-item>picture img {
        left: -4.5vw;
        width: 110%;
        top: 44%;
    }
}

@media screen and (min-width: 768px) and (max-width: 1083px) {
    .join-now .banner-background .m-hero-item>picture img {
        top: 52%;
    }
}

@media screen and (min-width: 768px) and (max-width: 880px) {
    .join-now .banner-background .m-hero-item>picture img {
        width: 112%;
    }
}

@media screen and (max-width: 320px) {
    .join-now .banner-background .sku-chooser__panel .intro {
        padding-top: 220px;
    }

    .sku-chooser__panel .price {
        min-height: 0;
    }

    .join-now .banner-background section.m-hero-item {
        padding-bottom: 88vw;
    }
}

@media screen and (min-width: 1921px) {
    .sku-chooser {
        min-height: 1300px !important;
    }
}

.sku-chooser .no-check {
    background-image: none !important;
    padding-left: 0px !important;
    padding-bottom: 0px !important;
}

.sku-chooser ul {
    text-align: left;
}

.sku-chooser .m-banner img {
    max-height: 48px;
}

.sku-chooser .price .price-number {
    font-size: 24px;
    line-height: 28px;
    font-weight: 700;
}

.sku-chooser h3 {
    font-weight: 700 !important;
}

.sku-chooser li.c-paragraph-1 {
    padding-top: 0px !important;
}

.sku-chooser ul .c-badge {
    padding: 0 6px;
    font-weight: 500;
    margin-left: 60px;
}

.sku-chooser .details img {
    max-height: 20px;
}


/* SKU image contrast fix */

.high-contrast-mode.black-on-white .sku-chooser__panel img {
    filter: grayscale(1) brightness(0);
}


/** END Relevant styles from css-New.css **/

.bbPad {
    padding-bottom: 0px !important;
    padding-left: 0px;
}

@media screen and (max-width: 1083px) and (min-width: 768px) {
    .bbHeight {
        height: 102vw;
    }
}

@media screen and (min-width: 1084px) and (min-width: 1399px) {
    .bbHeight {
        height: 82vw;
    }
}

@media screen and (min-width: 1400px) {
    .bbCopy {
        min-height: 705px;
    }

    .bbHeight {
        height: 58vw;
    }
}

@media screen and (max-width: 1399px) {
    .bbCopy {
        height: 767px;
    }
}

@media screen and (max-width: 1084px) {
    .bbCopy {
        height: 800px;
    }

    .m-hero-item.f-y-bottom>div>div,
    .c-hero.f-y-bottom>div>div {
        bottom: 19%;
    }
}

@media screen and (max-width: 880px) {
    .bbCopy {
        height: 825px;
    }
}

@media screen and (max-width: 767px) {
    .bbCopy {
        height: 1260px;
    }
}

@media screen and (max-width: 767px) {
    .bbCopy {
        height: 775px;
    }
}

@media screen and (max-width: 479px) {
    .bbCopy {
        height: 1006px;
    }
}

@media screen and (max-width: 767px) {
    .join-now .banner-background section.m-hero-item {
        padding-bottom: 39vw !important;
    }

    .join-now .banner-background .sku-chooser__panel .intro .price {
        margin: auto !important;
    }
}

@media screen and (max-width: 550px) {
    .join-now .banner-background section.m-hero-item {
        padding-bottom: 74vw !important;
    }
}

@media screen and (min-width: 1084px) and (max-width: 1399px) {
    .join-now .banner-background {
        height: 88vw;
    }
}

@media screen and (min-width: 768px) and (max-width: 880px) {
    .join-now .banner-background section {
        height: 109vw;
    }
}

@media screen and (min-width: 1084px) and (max-width: 1399px) {
    .join-now .banner-background section {
        height: 82vw;
    }
}

@media screen and (min-width: 881px) and (max-width: 985px) {
    .join-now .banner-background section {
        height: 104vw;
    }
}

@media screen and (max-width: 1399px) {
    .bbImage {
        height: 101.85vw !important;
    }
}

@media screen and (max-width: 985px) {
    .bbImage {
        height: 103.85vw !important;
    }
}

@media screen and (max-width: 880px) {
    .bbImage {
        height: 108.85vw !important;
    }
}

@media screen and (max-width: 462px) {
    .join-now .banner-background section.m-hero-item {
        padding-bottom: 111vw !important;
    }
}

@media screen and (max-width: 435px) {
    .join-now .banner-background section.m-hero-item {
        padding-bottom: 106vw !important;
    }
}

@media screen and (max-width: 435px) {
    .join-now .banner-background section.m-hero-item {
        padding-bottom: 128vw !important;
    }
}

.join-now .c-image.xgp-logo {
    width: 315px;
    max-width: 100%;
}

@media screen and (max-width: 767px) {
    .join-now .c-image.xgp-logo {
    width: 190px;
    max-width: 100%;
}
.custContPlacement .m-content-placement{
    padding-bottom: 36px;
}
}

.SB-hero-banner .m-content-placement-item .c-heading,
.SB-hero-banner .m-content-placement-item .c-paragraph,
.SB-hero-banner .c-content-placement .c-heading,
.SB-hero-banner .c-content-placement .c-paragraph {
    padding-right: 0px;
}

@media screen and (min-width: 768px) and (max-width: 880px) {
    .SB-hero-banner.join-now .banner-background section div div.high-contrast {
        max-width: 281px;
    }
}

/*.SB-hero-banner .xgp-logo {
    width: 433px;
    margin: auto !important;
}*/

@media screen and (min-width: 1400px) {
    .bbBanner {
        margin-bottom: 0px !important;
    }
}

@media screen and (min-width: 1084px) {
    .bbBanner {
        margin-bottom: 0px !important;
    }
}

@media screen and (min-width: 0px) {
    .bbBanner {
        margin-bottom: 0px !important;
    }
}

@media screen and (max-width: 479px) {
    .SB-hero-banner.join-now .banner-background .sku-chooser__panel .intro {
        padding-top: 272px;
    }
}

@media only screen and (max-width: 419px) {
    .SB-hero-banner.join-now .banner-background .sku-chooser__panel .details {
        width: 100%;
    }
}

.SB-hero-banner .sku-chooser__panel .details li {
    padding-left: 56px;
}

@media only screen and (max-width: 767px) {
    .SB-hero-banner .sku-chooser__panel .details li {
        padding-left: 34px;
        background-position: 0px 3px;
        background-size: 20px;
    }
}

@media only screen and (min-width: 767px) and (max-width: 1083px) {
    .bbWidth {
        max-width: 400px !important;
    }
}

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

    .SB-hero-banner .m-hero-item .c-group>.c-call-to-action+.c-call-to-action,
    .c-hero .c-group>.c-call-to-action+.c-call-to-action {
        color: #107c10 !important;
    }
}

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

    .SB-hero-banner .m-hero-item .c-group>.c-call-to-action+.c-call-to-action,
    .c-hero .c-group>.c-call-to-action+.c-call-to-action {
        color: #9bf00b !important;
    }

    .banner-background.bbPad {
        background-color: #FFFFFF;
    }
}

.SB-hero-banner button.green-brdr:focus {
    outline: 4px dashed #9bf00b !important;
}

.SB-hero-banner .m-in-page-navigation.trans .CTAdiv>button,
button.green-brdr,
button.green-brdr:hover {
    border: 0px solid #9bf00b !important;
}

@media screen and (max-width: 539px) {
    .SB-hero-banner.head1a.sb-pivot.pd-one {
        padding-top: 21% !important;
    }
}

@media screen and (max-width: 415px) {
    .SB-hero-banner.head1a.sb-pivot.pd-one {
        padding-top: 94% !important;
    }
}

.SB-hero-banner.head1a.sb-pivot.pd-one {
    margin-top: 35px;
}

.SB-hero-banner .sku-chooser__panel .price {
    padding-top: 16px;
    max-width: 300px;
    margin: 0 !important;
}

@media screen and (max-width: 767px) {
    .SB-hero-banner {
        padding-top: 170px;
    }

    .banner-background.bbPad {
        background-color: #333;
        padding-top: 0 !important;
    }

    .join-now .c-image.xgp-logo {
        display: inline-block;
    }
}


/** css-New.css overrides when #BodyContent width is set by apps.css **/

.SB-hero-banner.join-now .banner-background.bbPad {
    left: auto;
    margin-left: auto;
    margin-right: auto;
}


/* allow buybox to flow at mobile rather than nudge stuff around at multiple breakpoints */

@media screen and (max-width: 767px) {
    .join-now .banner-background .sku-chooser__panel .intro {
        padding-top: 0 !important;
    }

    .join-now .bbImage {
        height: auto !important;
        bottom: auto;
        position: relative;
    }

    .join-now .m-hero-item:before {
        display: none;
    }

    .join-now .m-hero-item>picture+div {
        position: relative;
        height: auto;
        padding-bottom: 24px;
    }

    .join-now .m-hero-item[class*="f-x"][class*="f-y"]>picture img {
        position: relative;
    }

    .join-now .bbWidth {
        top: auto !important;
        transform: none !important;
        position: relative !important;
    }

    .join-now .banner-background section.m-hero-item {
        padding-bottom: 0 !important;
    }

    .join-now .sku-chooser__panel.bbCopy {
        height: auto !important;
    }
}

.banner-background.bbPad .intro.theme-dark,
.banner-background.bbPad .details.theme-dark {
    background-color: inherit;
}

.banner-background.bbPad li.c-paragraph-2 {
    padding-top: 12px !important;
}

.banner-background.bbPad .c-heading-2 {
    padding-top: 20px;
}

.banner-background.bbPad .details ul li {
    position: relative;
}

.banner-background.bbPad .details ul li:before {
    content: "";
    position: absolute;
    top: 20px;
    font-family: "MWFMDL2-Xbox";
    font-size: 28px;
    color: #FFFFFF;
}

@media screen and (min-width: 1084px) {
    .ctaWrap .m-hero-item .m-ambient-video video {
        width: 100% !important;
    }

    .ctaWrap .m-hero-item .c-glyph.f-toggle.vidPlayPause {
        bottom: -25vw;
    }

    @media screen and (min-width: 1084px) {
        .ctaWrap .m-ambient-video:after {
            content: "";
            display: block;
            position: absolute;
            height: 8%;
            top: auto;
            bottom: 0;
            width: 100%;
            background: linear-gradient(180deg, rgba(230, 230, 230, 0) 0%, rgba(230, 230, 230, 1) 100%);
        }
    }
}

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

    .ctaWrap .m-hero-item .m-ambient-video,
    .ctaWrap .m-hero-item .c-glyph.f-toggle.vidPlayPause {
        display: none;
    }
}

@media screen and (min-width: 768px) {
    .ctaWrap .m-hero-item.f-y-center.f-transparent>div>div {
        top: 50%;
    }
}

@media screen and (min-width: 768px) and (max-width: 1083px) {
    .ctaWrap .m-hero-item>div>div {
        max-width: 350px;
    }

    .ctaWrap .c-heading-1a {
        font-size: 44px;
        line-height: 50px;
    }

    .ctaWrap .c-subheading-4 {
        font-size: 16px;
        line-height: 20px;
    }
}

@media screen and (max-width: 767px) {
    .ctaWrap [class*=f-x][class*=f-y].m-hero-item>div>div {
        top: calc(50%);
    }

    /*.ctaWrap .m-hero-item>div {
        height: 350px;
    }*/
    .streamGames .m-area-heading {
        padding-top: 0px !important;
    }

    .streamGames .m-feature-group {
        margin-top: 0px !important;
    }
}

@media screen and (min-width: 1920px) {
    .ctaWrap .vidPlayPause {
        bottom: -30rem !important;
    }
}