/*
==================================
GENERAL STYLES
==================================
*/
span.redacted_copy {
    background-color: #ffffff;
    display: inline-block;
}

.high-contrast-mode span.redacted_copy {
    background-color: CanvasText;
}

/*
==================================
HERO
==================================
*/

.page-hero.theme-black .m-image {
    display:flex;
    justify-content: center;

    padding-top: 0
}

.page-hero.theme-black .m-banner {
    padding-top: 0
}

.page-hero.theme-black .m-banner .c-heading-1 {
    padding-top: 0;
}

@media screen and (max-width: 767px) {
    .page-hero.theme-black .m-banner .c-heading-1 {
        font-size: 26px;
        line-height: 32px;
    }
}

/*************************/
/**** Ways to Watch CTA ****/
/************************/
#ways-to-watch-CTA .flex-group {
  display: flex;
  justify-content: center;
}
#ways-to-watch .flex-group {
  display: flex;
  margin: auto;
  width: 200px;
 padding-bottom: 48px;
}

/*************************/
/**** Save the date 2up React module ****/
/************************/
.reactPane.theme-black .m-panes .c-call-to-action.c-glyph.white-c:hover {
text-decoration: underline;
}
.reactPane.theme-black .m-panes {
padding-top: 0px;
}

.reactPane.theme-black .m-panes section:nth-of-type(2) {
border-left: none !important;
}
.high-contrast-mode.black-on-white [class*="OptIn-module__imageFix"] img {
filter: invert(1);
}

/*************************/
/**** Save the date non email variant ****/
/************************/
.saveDateOnly .m-feature.f-align-center  {
min-height: 100px;
}
.saveDateOnly .m-feature picture {
display: flex;
justify-content: center;
}
.saveDateOnly .m-feature picture img {
max-height: 88px;
}
.saveDateOnly .c-call-to-action:focus {
  color: #9bf00b !important;
}

/*************************/
/**** custom snowbird 3up and banner ****/
/************************/


    .SB-app-3up .customThreeScootup .m-content-placement{
        margin-bottom: 0;
    }


.SB-app-3up.theme-black .theme-lighter {
background-color: #333;
}
@media screen and (min-width: 1400px) {
.SB-app-3up.theme-black .customThreeScootup.zoomOutPad {
top: -100px;
}
}
@media screen and (min-width: 1084px) and (max-width: 1399px) {
.SB-app-3up.theme-black .customThreeScootup.zoomOutPad {
top: -80px;
}
}
@media screen and (min-width: 768px) and (max-width: 1083px) {
.SB-app-3up.theme-black .customThreeScootup.zoomOutPad {
top: -80px;
}
.SB-app-3up.theme-black .theme-lighter .m-banner.customThreeup {
min-height: 250px;
}
}
@media screen and (min-width: 651px) and (max-width: 767px) {
.SB-app-3up.theme-black .customThreeScootup.zoomOutPad {
top: -75px;
}
.SB-app-3up.theme-black .theme-lighter .m-banner.customThreeup {
min-height: 250px;
}
}  
@media screen and (min-width: 501px) and (max-width: 650px) {
.SB-app-3up.theme-black .customThreeScootup.zoomOutPad {
top: -105px;
}
.SB-app-3up.theme-black .theme-lighter .m-banner.customThreeup {
min-height: 300px;
}
}  
@media screen and (min-width: 420px) and (max-width: 500px) {
.SB-app-3up.theme-black .customThreeScootup.zoomOutPad {
top: -125px;
}
.SB-app-3up.theme-black .theme-lighter .m-banner.customThreeup {
min-height: 350px;
}
}  
@media screen and (min-width: 351px) and (max-width: 419px) {
.SB-app-3up.theme-black .customThreeScootup.zoomOutPad {
top: -125px;
}
.SB-app-3up.theme-black .theme-lighter .m-banner.customThreeup {
min-height: 375px;
}
}  
@media screen and (max-width: 350px) {
.SB-app-3up.theme-black .customThreeScootup.zoomOutPad {
top: -135px;
}
.SB-app-3up.theme-black .theme-lighter .m-banner.customThreeup {
min-height: 400px;
}
}  
@media screen and (min-width: 2200px) {
#padding {
  padding-top: 48px;
}
}
/*
==================================
WHAT IS AN XBOX Blade
==================================
*/
@media screen and (max-width: 1083px) {
    .desktopPadding {
        padding-top: 48px;
    }
}
@media screen and (min-width: 1084px) and (max-width: 1920px) {
    .desktopPadding {
        padding-top: 96px;
    }
}
@media screen and (min-width: 1921px) and (max-width: 2499px) {
    .desktopPadding {
        padding-top: 96px;
    }
}
@media screen and (min-width: 2500px) {
    .desktopPadding {
        padding-top: 144px;
    }
}
/*
==================================
STAY CONNECTED
==================================
*/

.theme-black.mosaic .m-banner .c-paragraph-1 {
    max-width: 600px;
    margin:auto;
}


/* 
===================
4x bottom mosaic
===================
*/

@media (min-width: 540px) and (max-width: 767px) {
    .mosaic [data-grid~='col-3'] {
        float: left !important;
        width: 50% !important;
    }
}

@media (min-width: 540px) and (max-width: 1084px) {
    .mosaic .mosaic__item {
        float: left !important;
        width: 50% !important;
    }
}

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

    /* Zoom images*/
    .pt12 {
        padding-top: 12px;
    }

    .mosaic .mosaic__item,
    .mosaic [data-grid~='col-3'] {
        padding-right: 12px;
    }

    .zoomImg {
        overflow: hidden;
        display: block;
    }

    .zoomImg img {
        -moz-transition: all 0.3s;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }

    .zoomImg:hover img {
        -moz-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
}

@media screen and (max-width:1083px) {
    .mosaic [data-grid~='container'] {
        padding-left: 5%;
        padding-right: 5%;
    }

    .mosaic .mosaic__item,
    .mosaic [data-grid~='col-3'] {
        padding: 6px;
    }
}

@media screen and (max-width:539px) {
    .mosaic [data-grid~='container'] {
        margin: 0 auto;
    }

    .mosaic [data-grid~='container'] {
        padding-left: 0;
        padding-right: 0;
    }

    .mosaic .mosaic__item,
    .mosaic [data-grid~='col-3'] {
        width: 50% !important;
        float: left !important;
    }
}

.mosaic .mosaic__item .zoomImg img {
    width: 100%;
}


/* 
===================
SOCIAL ICONS
===================
*/

.iconBlade {
    padding-top: 22px;
}

.dsk48 {
    padding: 42px 0 40px 0;
}

.iconBlade .c-caption-2 {
    font-weight: 700;
}

.iconBlade .icons {
    text-align: center;
}

.iconBlade .icons a {
    display: inline-block;
    margin: 0 3.2%;
}

.iconBlade .icons a:nth-child(6) {
    margin-right: 0px;
}

.iconBlade .icons a p {
    font-size: 20px;
}

.iconBlade .icons a:hover p {
    text-decoration: underline;
}

.iconBlade .icons .icon-break {
    display: inline;
}

.iconBlade .icons a:focus,
.stay-connected .zoomImg:focus {
    outline: 2px dashed #fff !important;
    padding: 8px;
}

.high-contrast-mode.black-on-white .iconBlade .icons a img {
    filter: invert(1);
}

@media screen and (min-width: 768px) {
    .iconBlade .icons a img {
        margin-bottom: 25px;
        max-width: 72px;
    }
}

@media screen and (min-width: 941px) {
    .iconBlade .icons a {
        min-width: 80px;
    }
}

@media screen and (max-width: 940px) {
    .iconBlade .icons a img {
        float: none;
        margin-right: 0;
        width: 56px;
    }

    .iconBlade .icons a p {
        display: none;
    }
}

@media screen and (max-width: 640px) {
    .iconBlade .icons .icon-break {
        display: block;
    }

    .iconBlade .icons .icon-break:first-of-type {
        margin-bottom: 32px;
    }

    .iconBlade .icons a {
        margin: 0 5%;
    }
}

@media screen and (max-width: 539px) {
    .iconBlade .icons a img {
        width: 48px;
    }
}



/* Overrides added by SM */

.m-feature.as-rich-heading {
    background-color: #107c10;
    color: #fff;
}

.m-feature .c-caption-1 {
    font-style: italic;
    padding-top: 12px;
}

@media only screen and (min-width: 768px) {
    .m-feature.as-rich-heading>div {
        padding-left: 5%;
    }

    .m-feature.as-rich-heading picture {
        width: 400px;
        max-width: 400px;
    }

    .m-feature.as-rich-heading picture img {
        display: block;
        margin-left: auto;
    }

    .m-feature.as-rich-heading [class^="c-heading"] {
        padding-top: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .custom-hero .m-hero-item {
        padding-left: 0;
        padding-right: 0;
    }

    .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.f-y-top>div>div,
    .custom-hero .m-hero-item.f-y-center>div>div,
    .custom-hero .m-hero-item.f-y-bottom>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 {
        padding-top: 24px;
    }

    .custom-hero .m-hero-item.f-y-top>div>div,
    .custom-hero .m-hero-item.f-y-center>div>div,
    .custom-hero .m-hero-item.f-y-bottom>div>div {
        max-width: 100%;
        padding-bottom: 48px;
    }

    .custom-hero .m-hero-item>div picture {
        display: none;
    }
}


/* pane border override */

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

    section.OptIn-module__mpanesFix___Z4UaL,
    .OptIn-module__theme-black___6mI88 section.OptIn-module__mpanesFix___Z4UaL,
    .OptIn-module__theme-dark___fdibM section.OptIn-module__mpanesFix___Z4UaL {
        border-left: none !important;
    }
}

@media only screen and (max-width: 860px) {
    .fanfest .c-group {
        margin-top: 0 !important;
    }

    .fanfest h2 {
        margin-top: 8px !important;
        padding-bottom: 0 !important;
    }
}

.reactPane .m-panes button:focus {
    outline: 2px dashed white !important;
    border-style: dashed !important;
}

.high-contrast-mode [class*="Modal-module__modalContent"] .c-checkbox input[type="checkbox"]+span:before {
    border: 1px solid CanvasText;
}

.high-contrast-mode [class*="Modal-module__modalContent"] .c-checkbox input[type="checkbox"]:checked+span:after {
    color: CanvasText;
}

@media only screen and (min-width: 768px) and (max-width: 1400px) {
    .page-hero picture img {
        top: 0 !important;
        transform: translateY(0) !important;
    }
}