#BodyContent:focus {
    outline: none;/* defeats full-page focus outline in Chrome */
}

h3.c-heading-4 strong,
h2.c-heading-1 strong {
    font-weight: 700 !important;
}
.m-area-heading p {
    padding-top: 18px;
}
.mobile-third p,
[data-grid~="col-12"].m-area-heading p {
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    /*padding-left: 10%;
    padding-right: 10%;*/
}

.for-screenreader {
    height: 1px;
    width: 1px;
    overflow: hidden;
    text-indent: -4000px;
}
button.c-call-to-action,
a.c-call-to-action {
    text-transform: uppercase;
}
a.c-call-to-action.green-brdr {
    border: 2px solid #5dc21e;
    color: #fff !important;
    background: none !important;
}

a.c-call-to-action.f-lightweight:hover span, button.c-call-to-action.f-lightweight:hover span {
    text-decoration: none;
}

a.c-call-to-action.f-lightweight, 
button.c-call-to-action.f-lightweight,
a.c-call-to-action.f-lightweight:hover, 
button.c-call-to-action.f-lightweight:hover {
    color: #107c10;
}
.go-play a.c-call-to-action, 
.go-play button.c-call-to-action,
.go-play a.c-call-to-action:hover, 
.go-play button.c-call-to-action:hover,
.gear a.c-call-to-action.f-lightweight, 
.gear button.c-call-to-action.f-lightweight,
.gear a.c-call-to-action.f-lightweight:hover, 
.gear button.c-call-to-action.f-lightweight:hover {
    color: #107c10 !important;
}
@media screen and (max-width: 1083px) {
    .gamer-spotlight a.c-call-to-action.f-lightweight, 
    .gamer-spotlight button.c-call-to-action.f-lightweight,
    .gamer-spotlight a.c-call-to-action.f-lightweight:hover, 
    .gamer-spotlight button.c-call-to-action.f-lightweight:hover {
        color: #5dc21e;
    }
}

.events__box a.c-call-to-action.f-lightweight, 
.events__box button.c-call-to-action.f-lightweight,
.events__box a.c-call-to-action.f-lightweight:hover, 
.events__box button.c-call-to-action.f-lightweight:hover {
    color: inherit;
}


.inline-link {
    padding: 18px 0 30px 0;
}
.inline-link a {
    display:inline !important;
}

.theme-black a.c-call-to-action.f-lightweight, 
.theme-black button.c-call-to-action.f-lightweight {
    color: #5dc21e;
}


.stealth-carousel button.play__button:hover,
.stealth-carousel button.play__button:active,
.scroll__section button.play__button:hover,
.scroll__section button.play__button:active,
.triptych__poster button.play__button:hover,
.triptych__poster button.play__button:active,
.gamer-spotlight button.play__button:hover,
.gamer-spotlight button.play__button:active,
.triptych__panel:focus .play__button,
.triptych__panel:focus {
    border: 2px dashed #fff !important;
    outline: 2px dashed #000 !important;
}

.icons a:focus,
.stay-connected .zoomImg:focus,
.mixer__games-list a:focus,
.triptych__box .buttonswap__button:focus {
    outline: 2px dashed #000 !important;
}


.community__social-links a:focus {
    outline: 2px dashed #fff !important;
}
/*
.community__social-links {
    outline: 2px dashed #fff !important;
}
*/

@media screen and (min-width: 1084px) {
    .gamer-spotlight .community__social-links a:focus {
        outline: 2px dashed #000 !important;
    }
}    

.videoverlay {
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
    margin-top: 83px;
    margin-bottom: 60px;
}

.videoverlay h1{
    display:none;
}

@media screen and (min-width: 1084px) {
    .videoverlay {
        margin-top: 130px;
        margin-bottom: 130px;
    }
}

.videoverlay .m-ambient-video {
    padding:0;
    overflow:hidden;
    max-width: 1600px;
    margin-left:auto;
    margin-right: auto;
    color:#000;
}

.videoverlay h1 {
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}
.videoverlay h1 span {
    display:block;
    filter: invert(100%);
}
.videoverlay .video__box {
    position:relative;
    max-width: 1600px;
    overflow:hidden;
    margin:0 auto;
    padding: 0 0 20.5% 0; /* bottom percentage sets the aspect ratio.  */
    height: 0;
    background-color: #fff;
    /*-webkit-box-shadow: inset 0px -5px 0px 0px rgba(255,255,255,1);
    -moz-box-shadow: inset 0px -5px 0px 0px rgba(255,255,255,1);
    box-shadow: inset 0px -5px 0px 0px rgba(255,255,255,1);*/
}

.videoverlay .m-ambient-video video {
    position:absolute;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
}

.videoverlay .video__image {
    width: 100%;
    /*height: 100%;*/
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    transform: scale3d(1, 1, 1);
}

.videoverlay .video__content {
    background-color: #fff;   /* to hide a rendering glitch in Edge */
    margin-top: -2px;           /* to hide a rendering glitch in Edge */
    z-index: 3200;
    padding:30px 0 0 0;
}
.videoverlay .video__content p.c-subheading-1 {
    width: 75%;
    max-width: 1100px;
    margin:0 auto;
}
/*
==================================
HERO VIDEO BUTTONS
==================================
*/

.videoverlay .video__content .buttonswap__container {
    width: 200px;
    margin: 24px auto 0 auto;
    /*margin-top:20px;*/
}
.videoverlay .video__content .buttonswap__button {
    display:block;
    width: 200px;
}
.videoverlay .video__content .buttonswap__button.play {
    display:none;
}
.videoverlay .video__content .buttonswap__button span, 
.videoverlay .video__content .buttonswap__button.c-glyph::before { 
/* This fixes alignment issues between glyph and text in local environment. Test in production. */
    vertical-align:middle;
}
.videoverlay a.c-action-trigger.c-glyph:before { /* remove left margin from play/pause gif */
    margin-left: 0;
}
/*
==================================
END HERO VIDEO BUTTONS
==================================
*/


@media screen and (max-width:1083px){
    .m-ambient-video {
        padding-bottom: 88px;
    }
    .video__content p.c-subheading-1 {
        font-size: 24px;
        line-height: 1.25;
    }
}
@media screen and (max-width:767px){
    .m-ambient-video {
        padding-top: 48px;
    }
    .video__content p.c-subheading-1 {
        font-size: 18px;
    }
    .video__content .buttonswap__container {
        margin-top:12px;
    }

    .video__content .buttonswap__button {
        display:block;
        width: 150px;
        margin-top:8px;
    }

    a.c-action-trigger { 
        font-size: 13px;
    }
}


/*
==================================
SCROLLING HEADER
==================================
*/

.scroll__section {
    /*display:table;*/
    /*width:100%;*/
}

.scroll__box {
    position:relative;
    padding-top: 10%;
}

.scroll__section .scroll__header span {
    display:block; /* forcing word wrap where we want it and undoing it responsively */
    white-space: nowrap;
}

.scroll__section .scroll__header {
    padding:0 0 0 0;
    display:block;
    text-align: left;
    position:relative;
    left:0;
    padding-bottom:25px;
    transform: scale3d(1, 1, 1);
    z-index: 0;
    bottom: auto;
    top:5%;
}

@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
    .scroll__section  .scroll__header {top: 60px;}
}
/* 
.scroll__section .scroll__header.clone {
    visibility:hidden;
}
.scroll__section .scroll__header.stop {
    top: auto;
    bottom: 0px; 
    visibility: visible;

}

.scroll__section .scroll__header.sticky {
    position: fixed;
    top:60px; 
    left:0;
    visibility:visible;
}*/

/*
==================================
MOSAIC BOX structure
==================================
*/

.scroll__section .mosaic__box {
    position:relative;
    /*width: 100%;
    max-width: 1068px;
    -webkit-filter: drop-shadow(0px 0px 30px rgba(0,0,0,.1));
    filter: drop-shadow(0px 0px 30px rgba(0,0,0,.1));*/
}
.scroll__section .mosaic__box::before {/* filter: drop-shadow not fully supported. This is a workaround */
    content: "";
    display:block;
    position:absolute;
    height: 100%;
    width: 100%;
    /*top:50%;
    left:50%;
    transform: translate(-50%, -50%);*/
    z-index: 0;
    background-color:rgba(0,0,0,.162); /* Done this way because of a small gap than can exist inside an element.*/
    -webkit-filter:blur(37px);
    filter:blur(37px);
}

/* Hide the drop shadow workaround in IE 9-up */
@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
    .scroll__section .mosaic__box::before {display:none;}
}

.scroll__section .mosaic__element {
    position: relative;
    overflow:hidden;
    width: 49.4%; /* will get a margin of .6%. The width value is needed when calculating aspect ratio later */
}


.scroll__section .mosaic__element .c-image {
    /*position:absolute;*/
    width: 100%;
    top: 0;
    left:0;
}

/* .mosaic__element float, width, margin, and aspect ratio are set based upon their order in the code. */
/* Fewer class names or IDs to worry about */
.scroll__section .mosaic__element:nth-child(5n+1) {
    width: 100%;
    float: left; /* floated for margin-collapse consistency despite being full-width */
    margin: .6% 0;
    /*padding-bottom: 50%;  aspect ratio calculation * % width of element */
}
.scroll__section .mosaic__element:nth-child(5n+2) {
    float:left;
    margin: .6% .6% .6% 0;
    /*padding-bottom:49.96%;  aspect ratio calculation * % width of element */
}
.scroll__section .mosaic__element:nth-child(5n+3) {
    float:right;
    margin: .6% 0 .6% .6%;
    /*padding-bottom: 29.94%;  aspect ratio calculation * % width of element */
} 
.scroll__section .mosaic__element:nth-child(5n+4) {
    float:right;
    margin: .6% 0 .6% .6%;
    /*padding-bottom:49.96%;  aspect ratio calculation * % width of element */
}
.scroll__section .mosaic__element:nth-child(5n+5) {
    float:left;
    margin: .6% .6% .6% 0;
    /*padding-bottom: 29.94%;  aspect ratio calculation * % width of element */
}

.scroll__section .mosaic__element:first-of-type {
    margin-top: 0px; 
}

.scroll__section .mosaic__image {
    position:relative;
    width:100%;
    top:0;
    left:0;
}
.scroll__section .mosaic__image::before { 
    position:absolute;
    display: block;
    content: "";
    height: 100%;
    width: 100%;


/*background: linear-gradient(to bottom, transparent 0%,transparent 63%,rgba(0,0,0,.5) 80%,#000000 100%);  W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
/* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='transparent', endColorstr='#000000',GradientType=0 );  IE6-9 */

}

.scroll__section .mosaic__image img {
    width: 100%;
}

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

    .scroll__section .scroll__header {
        font-size: 408%;/* changed from vw units because zooming page leaves font the same size */
        line-height: 1.15;
        position:sticky;
    }

}
@media screen and (max-width:1399px){
    .scroll__section {
        display:block;
    }

    .scroll__box {
        padding-top: 0;
    }
    
    .scroll__section .mosaic__box {
        margin-top:initial;

    }
    .scroll__section .scroll__header {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        padding:0 50px 29px 50px;
        /*font-size: 2.8em;*/
        margin: initial;
        text-align: center;
    }
    .scroll__section .scroll__header span {
        display: inline;
    }

}

@media screen and (max-width:1083px){
    .ambassador__details,
    .gamer-spotlight .gamer-spotlight__image,
    .gamer-spotlight .gamer-spotlight__details,
    .scroll__section .mosaic__box {
        max-width: 85.2%;
        margin-left: auto;
        margin-right: auto;
    }

    .scroll__section .scroll__header.clone {
        display:none;
    }

    .scroll__section .scroll__header span {
        display: inline;
    }

    .scroll__section .mosaic__limit {
        position:relative;
        max-width: 902px;
        margin: 0 auto;
    }
    .scroll__section .mosaic__element {
        position: relative;
        overflow:hidden;
    }
    
    /*.scroll__section .mosaic__element:nth-child(5n+1),
    .scroll__section .mosaic__element:nth-child(5n+2),
    .scroll__section .mosaic__element:nth-child(5n+3),*/
    .scroll__section .mosaic__box .mosaic__element {
        float:none;
        display:block;
        width: 100%;
        margin-top: 0px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 12px;
    } 
    .scroll__section .mosaic__box .mosaic__element:last-child {
        margin-bottom: 0;
    } 

    /*
    .scroll__section .mosaic__element:nth-child(5n+4),
    .scroll__section .mosaic__element:nth-child(5n+5) {
       display:none;
    } */


}
@media screen and (max-width:767px){
/*
    .scroll__section .mosaic__element:nth-child(5n+1),
    .scroll__section .mosaic__element:nth-child(5n+2),
    .scroll__section .mosaic__element:nth-child(5n+3) {
        padding-bottom:83.44%;  aspect ratio calculation 
    }
*/
    .scroll__section .mosaic__limit {
        max-width: 640px;
    }

}
/*
==================================
END MOSAIC BOX structure
==================================
*/

/* 
================================
Mosaic content formatting.
================================
*/
.scroll__section .mosaic__content {
    position:absolute;
    left: 40px;
    bottom: 20px;
    max-width: 80%;
}

@media screen and (max-width:640px){
    .scroll__section .mosaic__content {
        left: 32px;
        bottom: 22px;
        max-width: 85%;
    }
}
@media screen and (max-width:540px){
    .scroll__section .mosaic__content {
        position: relative;
        max-width: 100%;
        width: 100%;
        left: auto;
        bottom: auto;
        padding: 18px 16px 10px 16px;
        margin: 0;
        color: white;
    }
    .scroll__section .mosaic__element {
        background-color: #333;
    }
    .scroll__section .mosaic__element:not(:last-child){
        margin-bottom: 12px;
    } 

    
}
@media screen and (min-width:1083px) and (max-width:1400px){
    .scroll__section .mosaic__content {
        /*left: 28px;
        bottom: 20px;*/
        max-width: calc(100% - 50px);
    }
}

.scroll__section .mosaic__content .c-paragraph-1{
    padding-top: 11px;
}
.scroll__section .mosaic__content h3 {
    padding-top: 0;
}
.scroll__section .mosaic__content .c-call-to-action {
    outline:none;/* NECESSARY to prevent bug in box shadow hack in MS browsers */
    margin-top: 10px;
    color: inherit;
}

@media screen and (min-width:1083px) and (max-width:1280px){
    .scroll__section .mosaic__content .c-paragraph-1{
        padding-top: 6px;
    }
    .scroll__section .mosaic__content .c-call-to-action {
        outline:none;/* NECESSARY to prevent bug in box shadow hack in MS browsers */
        /*margin-top: 0px;*/
    }
}

/*
.scroll__section button.play__button {

}*/
.stealth-carousel button.play__button,
.scroll__section button.play__button,
.triptych__poster button.play__button,
.gamer-spotlight button.play__button {
    display:block;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 48px !important;
    margin:0 !important;
    padding:0 !important;
    line-height: 1;
    overflow:visible;
    height: 70px;
    width: 70px;
    cursor: pointer;
    background: transparent;
    min-width: auto;
    width: 70px;
}

.stealth-carousel button.play__button.c-glyph::before,
.scroll__section button.play__button.c-glyph::before,
.triptych__poster button.play__button.c-glyph::before,
.gamer-spotlight button.play__button.c-glyph::before {
    position: relative;
    top: auto;
    width: auto;
    height: auto;
    margin-left: 0;
    margin-right: 0;
    line-height: 1.2;
    content: "";/* glitch fix */
}



/*
==================================
MIXER, GAMER SPOTLIGHT and AMBASSADOR boxes
==================================
*/
.mobile-third {
    padding-left: 5%;
    padding-right: 5%;

}
.ambassador .mobile-third,
.mixer-section .mobile-third,
.ambassador__details,
.mixer-section__details {
    /*max-width: 75%;
    background-color:#999;*//* for testing */
    margin: 0 auto;
}
.ambassador__details .c-heading-1 {
    padding-top: 0;
    margin-top: -13px;
}

.ambassador__social-header {
    font-size: 22px;
    font-weight: 700;
    padding:0 0 25px 0;
    color: #5dc21e;
}

.ambassador .mobile-third {
    padding-bottom: 33px;
}
.ambassador .mobile-third a.f-lightweight,
.ambassador__details a.f-lightweight {
    color: #5dc21e;
    margin-top: 18px;
}
.ambassador .mobile-third a.f-lightweight {
    margin-bottom: 0;
}

.ambassador__details a.f-lightweight {
    margin-bottom: 30px;
}
.ambassador {
    background-color: #000;
    padding-top: 38px;
    padding-bottom: 96px;
    background-image: url(https://compass-ssl.xbox.com/assets/0e/76/0e76e7d0-7a71-45cf-b388-569af9f520cd.jpg?n=Xbox_767_Community_Ambassador_BG-v2.jpg);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% auto;


}

@media screen and (min-width: 768px){
    .ambassador {
        background-image: url(https://compass-ssl.xbox.com/assets/d2/22/d222263a-e238-464e-8a71-3b3ac1caa9fd.jpg?n=Xbox_1083_Community_Ambassador_BG-v2.jpg);
    }
}

@media screen and (min-width: 768px){
    .ambassador{
        padding-top: 142px;
        padding-bottom: 0px;
        padding-bottom: 144px;
    }
}
@media only screen and (min-width:1400px) {
    .ambassador {
        background-color: #f2f2f2;
        background-image: url(https://compass-ssl.xbox.com/assets/0d/d3/0dd37322-9b9b-451b-be06-dd09c2771966.png?n=Xbox_1920_Community_Ambassador_Pirate.png), url(https://compass-ssl.xbox.com/assets/66/e5/66e5f7c4-627e-4a21-8655-2c5f7f5ee541.jpg?n=Xbox_1920_Community_Ambassador_BG-v2.jpg);
        background-repeat: no-repeat;
        background-position: -2% 80px, center top;
        background-size: auto 81%, 100% 80%;
        z-index: 0;
        position: relative;
        padding-bottom: 97px;
    }
}

@media only screen and (min-width:1400px) {
    .mixer-section__details,
    .ambassador__details {
        max-width: 70%;
        margin: 0 7% 0 23%;/* margins and max-width total 100% */
    }
}
/*
@media only screen and (min-width:768px) and (max-width: 1083px){
    .mixer-section__details {
        max-width: 768px;
    }
}
*/
@media only screen and (min-width:1084px) and (max-width: 1399px){
    .mixer-section__details {
        max-width: 1010px;
    }
}

[data-grid~="container"].gamer-spotlight .c-heading-1,
[data-grid~="container"].ambassador .c-heading-1,
[data-grid~="container"].mixer-section .c-heading-1 {
    font-weight: 700;
    line-height: 1.16;
}

.mobile-third {
    text-align: center;
}   
.mobile-third .m-banner {
    padding-top: 0px;
}
@media screen and (min-width:1400px){
    .mobile-third {
        /*visibility:hidden;*/
        display:none;
    }
    .mobile-content:not(.gamer-spotlight .mobile-content) {
        display:none;
    }
}

@media screen and (max-width:1399px){
    .ambassador .no-mobile,
    .mixer-section .no-mobile {
            display:none;
    }
    .mobile-third,
    .mobile-content {
        text-align: center;
    }
    .mobile-third .c-paragraph {
        max-width: 88%;
        margin-left: auto;
        margin-right: auto;
    }
}
/*
@media screen and (max-width:1399px){
    [data-grid~="container"].gamer-spotlight .c-heading-1,
    [data-grid~="container"].ambassador .c-heading-1,
    [data-grid~="container"].mixer-section .c-heading-1 {
        font-size: 48px;
    }
}*/
/*
==================================
SOCIAL ICON styles
==================================
*/

.community__social-links {
    /*width: 85%;*/
    margin: 0 auto 0 auto;
    display:inline-block;
}

.community__social-links > li {
    margin-bottom: 20px;
}

.community__social-links li > a {
    display:inline-block;
    padding-right: 5px;
     /*display:flex;          1 these three lines are to vertically align the icon and text within the <li> 
    flex-direction: row;   
    align-items: center;    */
}


.community__social-icon {
    width: 32px;
    height: 32px;
    /*float: left;*/
    margin: 0 16px 0 0;
    position:relative;
    flex:none;
    display:inline-block;
}
.community__social-name {
    display:inline-block;
    vertical-align: middle;
    /*height: 32px;
    padding-top: 2px;*/
}
.community__social-icon img{
    width: 100%;
    margin: 0 0 0 0;
}
.community__social-icon img.dark {
    display:inline-block;
}
.community__social-icon img.light {
    display:none;
}



@media only screen and (max-width:1083px){
    .gamer-spotlight .community__social-links {
        display: flex;
        flex-direction: row;
    }

    .gamer-spotlight .community__social-links > li {
        width: 25%;
        margin-bottom: 0;
    }
    .gamer-spotlight .community__social-links {
        float:none;
        margin-right: 10%;
    }/*
    .community__social-links img {
        filter: invert(1);
    }*/
    .gamer-spotlight .community__social-icon img.dark {
        display:none;
    }
    .gamer-spotlight .community__social-icon img.light {
        display:inline-block;
    }
}

@media only screen and (min-width: 1084px) and (max-width:1400px){
    .gamer-spotlight .community__social-links > li {
        display:inline-block;
        margin-right: 20px;
    }
    .gamer-spotlight .community__social-links li > a {
        padding: 0;
    }
    .gamer-spotlight .community__social-name {
        display:none;
    }
    .gamer-spotlight .community__social-icon {
        margin-right: 0;
    }
}
@media only screen and (max-width:1399px){
    .ambassador__social {
        width: 89.5%;
        margin:48px auto 0 auto;
    }

    .ambassador .community__social-links {
        display: flex;
        flex-direction: row;
    }

    .ambassador .community__social-links li {
        width: 25%;
        margin-bottom: 0;
    }
    .ambassador .community__social-links {
        float:none;
    }
    /*
    .community__social-links img {
        filter: invert(1);
    }*/
    .ambassador .community__social-icon img.dark {
        display:none;
    }
    .ambassador .community__social-icon img.light {
        display:block;
    }
}

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

    .ambassador .community__social-links,
    .gamer-spotlight .community__social-links {
        margin-right: 0;
    }
    .ambassador .community__social-icon,
    .gamer-spotlight .community__social-icon {
        margin: 0 5px 0 0;
    }
    .ambassador .community__social-links > li:not(:last-child),
    .gamer-spotlight .community__social-links > li:not(:last-child) {
        display:inline-block;
        width: auto;
        margin-right: 5.8%;
    }

}
@media only screen and (max-width:639px){

    .ambassador .community__social-icon,
    .gamer-spotlight .community__social-icon {
        margin: 0 5px 0 0;
    }
    .ambassador .community__social-links > li:not(:last-child),
    .gamer-spotlight .community__social-links > li:not(:last-child) {

        margin-right: 2.6%;
    }

}
@media only screen and (max-width:539px){

    .ambassador .community__social-links li,
    .gamer-spotlight .community__social-links li {
        width: auto;
        margin-right: 16px;
    }
    .ambassador  .community__social-links li,
    .gamer-spotlight .community__social-links li {
        display:inline-block;
        margin-right: 24px;
    }
    .ambassador .community__social-links li > a,
    .gamer-spotlight .community__social-links li > a {
        padding: 0;
    }
    .ambassador .community__social-name,
    .gamer-spotlight .community__social-name {
        display:none;
    }
    .ambassador .community__social-icon,
    .gamer-spotlight .community__social-icon {
        margin-right: 0;
    }
}



/* High Color Contrast */
@-moz-document url-prefix() {
    .high-contrast-mode .high-contrast .community__social-icon img {
        filter: invert(1);
    }

    .high-contrast-mode .high-contrast .community__social-icon img.dark {
        display:none;
        filter: invert(1);

    }
    .high-contrast-mode .high-contrast .community__social-icon img.light {
        display:inline-block;
    }
}
@media screen and (-ms-high-contrast:white-on-black) {
    .high-contrast-mode .high-contrast .community__social-icon img.dark {
        display:inline-block;
    }
    .high-contrast-mode .high-contrast .community__social-icon img.light {
        display:none;
    }
}

@media screen and (-ms-high-contrast:black-on-white) {
    .high-contrast-mode .high-contrast .community__social-icon img.dark {
        display:none;
    }
    .high-contrast-mode .high-contrast .community__social-icon img.light {
        display:inline-block;
        filter: invert(1);

    }

}



/*
==================================
TRIPTYCH styles
==================================
*/






    .triptych__box {
        position:relative;
        margin-left: auto;
        margin-right: auto;
        z-index:0;
    }

    .triptych__panel {
        position: relative;
        height: 0;
        margin:0px auto 2px auto;
        width: 89.5%;
        transition: all 200ms;
        padding-bottom: 50.3%; /* apect ratio accounting for  */
        box-sizing: content-box;  /* necessary so the focus border or outline doesn't interfere with aspect ratio calculations. */
        border: 2px solid transparent;
    }

    .triptych__panel::before {
        content: "";
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: -1;
        background-color:rgba(0,0,0,.2); /* Done this way because of a small gap than can exist inside an element.*/
        -webkit-filter:blur(35px);
        filter:blur(35px);
    }
    
    .triptych__panel.expanded::before {
        background-color:rgba(0,0,0,.5);
    }


/* targets IE 9-11 */
    @media screen and (min-width:0\0) and (min-resolution: +72dpi) {
        .triptych__panel::before {
            box-shadow: 0px 0px 35px 0px rgba(0,0,0,.18);/* The above method doesn't work in IE */
        }
    }

    .triptych__panel.expanded {
        padding-bottom: 83%; /* to control aspect ratio */
        width:100%;
        transform: translateX(-2px);/* compensates for border width on content-box elemeent */
    }
    @media screen and (min-width: 1400px) {
        .triptych__panel.expanded {
            /*padding-bottom: 95.5%;  to control aspect ratio */
            padding-bottom: calc(84% + 66px);
        }
    }
    
    .triptych__panel.expanded .triptych__content {
        opacity: 1;
        visibility: visible;
    }
    .triptych__panel.expanded .triptych__poster {
        opacity: 0;
    }

    .triptych__poster,
    .triptych__content {
        transition: all 200ms;
        position: absolute;
        height: 100%;
        width: 100%;
        overflow:hidden;
    }
    .triptych__poster {
        cursor: pointer;
        background-color: #000000;
    }

    .triptych__poster img {
        width: 100%;
    }
    .mixer-section .triptych__poster img {
        opacity: .5;
    }
/*
    .triptych__poster::after {
        content:"";
        display: block;
        position: absolute;
        top:0;
        left:0;
        height: 100%;
        width: 100%;
        background-color: rgba(0,0,0,.5);
    }
*/
    .triptych__content {
        opacity: 0;
        visibility: hidden;
        background-color: #fff;
    }

    .triptych__padding {
        padding: 2%; /* parent needs to be set to box-sizing:content-box to preserve aspect ratio hack when using border/outline */
    }

    .triptych__details {
        padding: 1.98% 2.4%; /* matching triptych__padding, rounded down for line height */
        position: absolute;
        width: 91%;
        height: 0;
        padding-bottom: calc(27% + 20px);
    }

    @media screen and (max-width: 1399px) {
        .triptych__details {
            padding-bottom: 20.5%; /* to control aspect ratio */
        }
    }

    .triptych__details > * {
        flex-grow: 1;
    }
    .triptych__details .mixerAvatar {
        width: 40px;
        height: 40px;
        float:left;
        margin-right: 14px;
        border-radius: 50%;
    }
    .triptych__details .username {
        float:left;
        margin-top: 6px;
        font-weight: 600;
        font-size: 18px;
    }
    .triptych__details .viewerCount {
        float:right;
        margin-top: 6px;
    }

    .triptych__details .channelName {
        clear: both;
        height: 2.8em;
        margin-bottom: .2em;
        /*font-size: calc(12px + 5 * ((100vw - 320px) / 680));*/
        font-size: calc(1.9vw - 7px);
        line-height: normal;
        font-weight: 400;
        overflow:hidden;
        padding-top: calc(3% - 6px);
    }

    @media only screen and (max-width:820px){
        .ambassador__details,
        .mixer-section__details,
        .triptych__box {
            max-width: 94%;
        }
        .triptych__details .channelName {
            font-size: calc(2vw + 10px);
            padding-top: 2%;

        }    
        .triptych__panel.expanded {
            padding-bottom: calc(72% + 91px)
        }
        .triptych__details {
            padding-bottom: calc(10% + 85px);
        }
    }
    @media only screen and (max-width:820px){
        .triptych__panel.expanded {
            /*padding-bottom: calc(72% + 98px);*/
            padding-bottom: calc(70% + 110px);
        }
        .triptych__details {
            padding-bottom: calc(10% + 90px);
        }
        .triptych__details .channelName {
            font-size: calc(2vw + 12px);
        }
    }


    @media screen and (min-width: 821px) and (max-width: 1399px) {
        .triptych__details .channelName {
            padding-top: 14px;
            font-size: 26px;
        }
        .triptych__panel.expanded {
            padding-bottom: calc(62% + 160px);
            /*padding-bottom: 78%;*/
        }
        .triptych__details {
            padding-bottom: calc(10% + 90px);
        }

    }
    @media screen and (min-width: 1400px) and (max-width: 1920px) {
        .triptych__details .channelName {
            /*font-size: calc(1.8vw - 40%);*/
            padding-top: 2.8%;
        }    
    }
    @media screen and (min-width: 1920px) {
        .triptych__details .channelName {
            font-size: 28px;
        }    
    }

    .triptych__details .streamLink {
        position:absolute;
        bottom: 0;
    }

    .triptych__details a.streamLink:link,
    .triptych__details a.streamLink:visited,
    .triptych__details a.streamLink:hover,
    .triptych__details a.streamLink:active,
    .triptych__details a.streamLink:focus {
        color:#107c10;
    }

    .triptych__video {
        position: relative;
        height: 0;
        padding:0 0 56.25% 0 !important;
        background-color: #eee;
    }

    .triptych__video img,
    .triptych__video video,
    .triptych__video iframe {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }

    a.triptych__video-image img {
        border: 2px dashed transparent;
        box-sizing: border-box;
    }

    a.triptych__video-image:focus img,
    a.triptych__video-image:active img {
        border-color: #000;
    }

    .triptych__video.m-ambient-video {
        min-width: auto !important;
    }        

    @media only screen and (min-width:768px) and (max-width: 1083px){
        /*.ambassador__details,
        .mixer-section__details,
        .triptych__box {
            max-width: 970px;
        }*/
        .triptych__panel.expanded {
            /*padding-bottom:76.73%; *//* to control aspect ratio */
        }
    }
    @media only screen and (max-width: 1399px){
        .ambassador__details,
        .mixer-section__details,
        .triptych__box {
            max-width: 970px;
        }
    }
    @media only screen and (max-width:1040px){
        .ambassador__details,
        .mixer-section__details,
        .triptych__box {
            max-width: 94%;
        }
    }
    /*
    @media only screen and (max-width:767px){
        .triptych__panel.expanded {
            padding-bottom: calc(82% + 50px); 
        }
        .triptych__details {
            padding-bottom: calc(20.5% + 50px); 
        }

    }*/

/*
==================================
MIXER specifics
==================================
*/
.mixer-section {
    position:relative;
    margin-top: 89px;
    z-index:50;

}
@media only screen and (min-width:1400px){
    .mixer-section {
        background-image: url(https://compass-ssl.xbox.com/assets/f9/41/f941abce-6035-4194-9e52-81e2c30f0957.png?n=Community-Hub_Background-Image-1400_Minecraft_831x1041.png);
        background-repeat: no-repeat;
        background-position: -6% bottom;
        background-size: auto 98%;
    }
}

@media only screen and (min-width:768px){
    .mixer-section {
        margin-top: 137px;
        margin-bottom: 0;
    }
}

.mixer-section .mixer-logo {
    padding: 0;
    margin: 2px 0 -4px 0;
    line-height: 1;
    width: 240px;
    height: 70px;
    color: transparent;
    background-image: url(https://compass-ssl.xbox.com/assets/a9/66/a966f962-3e03-4f83-aac4-e1868da5622b.svg?n=mixer-blue.svg);
    background-size: contain;
}

.mixer-section .mixer-logo span {
    display:none;

}
/* High Color Contrast */
@-moz-document url-prefix() {
    .high-contrast-mode .high-contrast.mixer-logo span {
        display:inline;
        background-image: none;
        font-weight: 700;
    }
}
@media screen and (-ms-high-contrast:white-on-black) {
    .high-contrast-mode .high-contrast.mixer-logo span {
        display:inline;
        background-image: none;
        font-weight: 700;
    }
}

@media screen and (-ms-high-contrast:black-on-white) {
    .high-contrast-mode .high-contrast.mixer-logo span {
        display:inline;
        background-image: none;
        font-weight: 700;
    }
}

@media only screen and (max-width:1399px){/* Ths is in an h2 tag for semantics, set to a fixed width to control the svg. text-align:middle doesn't apply. */
    .mixer-section {
        background-image: none;
    }
    
    .mixer-section .mixer-logo {
        margin-left: auto;
        margin-right: auto;
    }
}
.mixer-section .mixer-logo img,
.mixer-section .mixer-logo picture {
    vertical-align: top;
}

.mixer-section .mobile-third a,
.mixer-section__details a {
    margin-top: 8px;
    margin-bottom: 32px;
}
.mixer-section__details h3 {
    margin-top: 0;
    padding: 0 0 28px 0;
}

.mixer__game-icon {
    width: 60px;
    height: 60px;
    float: left;
    margin: 0 20px 0 0;
    position:relative;
    flex:none;
}
.mixer__game-icon img{
    width: 100%;
    margin: 0 20px 0 0;
}

.mixer__games-list li {
    margin-bottom: 20px;
}
.mixer__games-list a {
    display: flex;          /* 1 these three lines are to vertically align the icon and text within the <a> */
    flex-direction: row;    /* 2 */
    align-items: center;    /* 3 */
    margin: 0;
}

.mixer__game-details h4.f-lean {
    padding-bottom: 5px;
    line-height: 1;
}

.mixer__game-details {
    text-align: left;
}

.viewerCount {
    padding-left: 30px !important;
    background-image: url(https://compass-ssl.xbox.com/assets/40/71/40711af5-225f-4469-9cc9-ea11d6c6e2ec.png?n=eyecon.png);
    background-repeat: no-repeat;
    background-position: 0 2px;
    color:#107c10;
    font-weight: 600;
}

.mixer__game-details p.viewerCount {
    padding-bottom: 0px;
}

.mixer__game-details h4 strong{
    font-weight: 700;
}

@media only screen and (max-width:1399px){
    .mixer__top-games {
        width: 89.5%;
        margin: 37px auto 0 auto;
    }
    .mixer__games-list {
        display: flex;
        flex-direction: row;
        
    }
    .mixer__games-list li {
        width: 25%;
        margin-bottom: 0;
        display:block;
        padding-right: 24px;
    }
    .mixer__games-list a {
        display: block;
    }
    
    .mixer__game-icon {
        float:none;
        margin-right: 10%;
    }

    .mixer__game-details h4.f-lean {
        padding-bottom: 0px;
        line-height: normal;
        word-break: break-word;
        /*font-size: 16px;*/
    }
    .mixer__game-details > p{
        display:none;
    }
}

@media only screen and (max-width:845px){
    .mixer__game-details h4.f-lean {
        font-size: 13px;
    }
}

/* =================================================================================================== TESTING ON PREVIEW ========== */
/* TESTING ON PREVIEW */
/* ================================================================================================================================= */
@media only screen and (max-width: 767px){
    .mixer__top-games h3 {
        font-size: 26px;
        text-align: center;
    }
    .mixer__games-list {
        display: block;
        text-align: center;
    }
    .mixer__games-list li {
        width: 46%; /* (100 - rightmargin)/2 */
        margin: 0 8% 4.25% 0;
        max-width: 200px;
        display: inline-block;
        padding-right: 0px;
        vertical-align: top;
    }
    .mixer__games-list li:nth-child(even) {
        margin-right: 0;
    }
    .mixer__games-list li:nth-child(odd) {
        clear:both;
    }
    .mixer__game-icon {
        width: auto;
        height: auto;
        margin: 0;
    }
    .mixer__game-details h4.f-lean {
        font-size: 15px;
    }

}
/* =================================================================================================== END TESTING ON PREVIEW ========== */
/* END TESTING ON PREVIEW */
/* ================================================================================================================================= */


@media only screen and (max-width:479px){
    .mixer__game-details h4.f-lean {
        font-size: 12px;
    }
}

@media only screen and (max-width:539px){
    .mixer__game-details h4.c-paragraph-3 {
        font-size: 12px;
    }
}

/*
.mixer__game-details {
    height: 60px;
    vertical-align: middle;
}*/

/*
==================================
GAMER SPOTLIGHT specifics
==================================
*/
/* gamer-events background image styles are in the markup, along with the buffer that appears when the Gamer section doesn't exist. */



.gamer-spotlight {
    padding-bottom: 90px;
    padding-top: 6px;
}
.gamer-spotlight__image .m-image {
    position:relative;
    padding-top: 0;
    margin-top: 48px;
}

.gamer-spotlight__details {
    max-width: 77%;
    margin: 0 0 0 23%;/* margins and max-width total 100% */
}
.gamer-spotlight__details a.f-lightweight {
    margin: 18px 0 30px 0;
}

.gamer-spotlight__social-header {
    font-size: 22px;
    font-weight: 700;
    padding:0 0 25px 0;
    color: #5dc21e;
}
@media screen and (min-width:768px){
    .gamer-spotlight {
        padding-bottom: 123px;
        padding-top: 91px;
    }

}
@media screen and (min-width:1084px){
    .gamer-spotlight .mobile-content {
        display:none;
    }

    .gamer-spotlight {
        padding-bottom: 144px;
        padding-top: 91px;
        /*background-color: #fff;*/
    }

    .gamer-spotlight__details .c-heading-1 {
        padding-top: 31px;
        padding-bottom: 6.34%;
    }

    .gamer-spotlight__details .c-paragraph-1 {
        padding-top: 5.85%;
    }

    .gamer-spotlight__social-header {
        color: #107c10;
        padding:0 0 7.8% 0;

    }
    .gamer-spotlight__details a.f-lightweight {
        margin: 4.39% 0 7.32% 0;
    }
    
    
}

@media screen and (max-width:1083px){
    .gamer-spotlight {
        padding-top: 48.5%;
    }
    .gamer-spotlight__details {
        color: #fff;
    }
    .gamer-spotlight__details a.f-lightweight {
        color: #5dc21e;
    }

    .gamer-spotlight .no-mobile {
        display:none;
    }
    .gamer-spotlight .m-image {
        margin-top: 32px;
        margin-bottom: 40px;
    }
    .gamer-spotlight .mobile-content .c-heading-1 {
        text-align: left;
        padding-top: 0;
    }
}

.mixer-events-buffer .top {
    height: 91px;
    background-color: #fff;
}
.mixer-events-buffer .bottom {
    height: 79px;
    background-color: #000;
}
@media screen and (min-width:768px){
    .mixer-events-buffer .top {
        height: 140px;
    }
    .mixer-events-buffer .bottom {
        height: 144px;
    }
}

/*
==================================
EVENTS boxes
==================================
*/


.events *{
    position:relative;
}

.events__box {
    height:650px;
    margin: 0 auto 3% auto; /* 3% matches x-margins from width %. only comes into play when stacking */
    width: 97%;
    overflow:hidden;
}

.events__headercontainer .events__header {
    width: 100%;
    /*color: #fff;*/
    padding: 18.5% 10% 0 0;
    text-align: left;
}
@media screen and (min-width: 1400px){
    .events__headercontainer .events__header {
        padding-left: 10%;
    }
}
.events__header-cta {
    margin-top: 18px;
}
@media screen and (min-width: 540px){
    .events__headercontainer .c-call-to-action.green-brdr {
        margin-right:36px;
    }
}
@media screen and (max-width: 539px){
    .events__headercontainer .c-call-to-action.green-brdr {
        margin: 0 36px;
    }
}

/*
@media screen and (min-width: 1084px){
    .events__headercontainer .c-call-to-action {
        display:inline-block;
    }
}
*/
.events__box {
    background-color:#f2f2f2;
    color: #515151;
    position:relative;
    /*transition: all 200ms;*/
    display: flex;
}

.events__headline {
    color: #6d6d6d;
    height: 3.1em;
    font-size:2.2em;
    padding:0;
    margin:-.5em 0 14% 0;/* top margin for pinpoint pixel-perfect precision */
    line-height: 1em;
    z-index: 40;
}
/*
@media screen and (min-width: 540px){
    .events__headline {
        height: 3.1em;
        font-size:2.6em;
    }
}
@media screen and (min-width: 768px){
    .events__headline {
        height: 3.1em;
        font-size:3.2em;
    }
}*/


@media screen and (min-width: 1084px){
    .events__headline {
        font-size:3.2em;
        z-index: 48; /* to prevent overlap in HC mode */
    }
}

@media screen and (min-width:540px) and (max-width:640px){
    .events__headline {
        font-size:2em;
    }
}

.events__headline .huge {
    display:block;
    font-size:2.68em;
    line-height: unset;
    padding:0;
    margin:.27em 0 0 0;
    text-indent: -.05em;
    letter-spacing: -.05em;
    z-index: -1;
}
.events__content {
    width:100%;
    color:inherit;
    padding: 18.5% 12.2% 14.8% 12.2%;
    display: flex;
    flex-direction:column; 
    justify-content:space-between;
}

.events__copy .c-heading {
    font-size: 1.8em;
    font-weight: 400;
    line-height: 1.18;
}

.events__cta {
    height:85px;
    bottom:0;
}
/*
.events__cta > *:not(:last-child) {
    margin: 0 0 8px;
}*/
.events__details .c-heading-3 {
    padding-bottom: 9px;
    font-weight: 400;
}

.events__details .c-paragraph-4 {
    padding-top: 4px;
    font-weight: 400;
}
.events__details .c-paragraph-4.url {
    word-break: break-all;/* URLs can be lengthy and don't always include an obvious break point */
}
.events__details strong {
    font-weight: 700;
}

@media screen and (max-width:1399px){
    .events > [data-grid~="container"] > section {
        float:none;
        max-width:793px;
        margin:0 auto;
    }
}


@media screen and (max-width:1200px){
    .events > [data-grid~="container"] > section {
        max-width:80%;
    }
}

@media screen and (max-width:1399px){
    .events > [data-grid~="container"] > section {
        float:none;
        max-width:714px;
        margin:0 auto;
    }
}

@media screen and (max-width:1083px){
    .events__cta {
        /*height: auto;*/
        margin-top:24px;
    }
    .events__headercontainer {
        width:100% !important;
        max-width: 650px;
        /*padding-left: 5%;
        padding-right: 5%;*/
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .events__headercontainer .events__header {
        width: 100%;
        padding:0 0 48px;
        text-align: center;

    }
    .events__box {
        height: auto;
        display: block;
        width:100%;
        margin-bottom: 12px;
    }
}

@media screen and (min-width:540px) and (max-width:1083px){
    .events__content {
        padding: 24px 32px 32px 32px;
        display:block;
    }


    .events__box::after,
    .events__content::after,
    .events__copy::after{
        content:"";
        display:table;
        clear:both;
    }

    .events__headline {
        width: 20.52%;
        float: left;
        margin:2px 0 0 0;
    }
    

    .events__cta,
    .events__details {
        width: 79.48%;
        float:right;

    }

}

@media screen and (max-width:767px){
    .events > [data-grid~="container"] > section {
        max-width: 85.2%;
    }
    .events__box {
        width: 100%;
    }
}

@media screen and (max-width:539px){
    .events__headline {
        margin-bottom: 10%;
    }
    .events__content,
    .events__headline,
    .events__copy{
        display:block !important;
        float:none !important;
        width:100%;
    }

}



/*
==================================
DISCUSSIONS
==================================
*/
.discussions {
    position: relative;
    background-color: #f2f2f2;
    padding-top: 82px;
    padding-bottom: 63px;
}

.discussions::after {
    content: " ";
    display:block;
    clear:both;
}

.discussions .c-carousel .c-flipper+div {

    text-align: center;
}

.discussions .m-product-placement-item.f-size-medium picture, 
.discussions .c-product-placement.f-size-medium picture {
    width: 64px;
    height: 64px;
    margin: 0 auto;
}
.discussions .m-product-placement-item .c-paragraph-1 {
    padding-top: 21px;
}

.discussions .c-carousel.f-single-slide li {
    font-size: 20px;
    /*text-align: center;
    line-height: 20px;
    display: inline-block;
    vertical-align: top;*/
}

.m-product-placement-item.f-size-medium, 
.c-product-placement.f-size-medium {
    width: 144px;
}

.discussions .m-product-placement-item {
    margin-left: 10px;
    margin-right: 10px;
}

.discussions .m-product-placement-item .c-paragraph-1 {
    font-size: 20px;
    font-weight: 700;
    color: #107c10;
}
.discussions .m-product-placement-item a{
    overflow: visible;
    white-space: normal;
}

.discussions .m-product-placement-item a picture {
    border: none;
}

.discussions .m-area-heading {
    float:none;
}
@media only screen and (max-width: 767px) {
    .discussions {
        padding-top: 41px;
    }
}
@media only screen and (min-width: 1400px) {
    
    .discussions {
        padding-top: 0px;
        padding-bottom: 100px;
    }
    .discussions nav.c-link-navigation li {
        width: 12%;
    }

}

/* 
===================
GEAR
===================

*/
.gear {
    background-color: #f2f2f2;
}
.gear .m-feature {
    float:none;
}

.gear > [data-grid~='container'] {
    /*padding-left: 0;
    padding-right: 0;
    max-width: 1600px;*/
}

@media (min-width: 540px) and (max-width: 767px) {
    .gear .c-heading-1 {
        padding: 37px 0 3px;
    }
}
@media (max-width: 1083px) {
    .gear .c-heading-1 {
        padding: 37px 0 3px;
    }
}
@media (min-width: 1084px) {
    .gear picture.gear__image img {
        max-width: 90%;
    }
}
/* 
===================
4x bottom mosaic
===================

*/
.mosaic {
    background-color: #f2f2f2;
}

/* mosaic */
.c-dialog.f-flow [role="dialog"] {
   overflow-y: hidden !important;
}
.c-dialog > [role='presentation'] {
    background: rgba(255,255,255,1); 
}

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

    .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) {
    .gear > [data-grid~='container'],
    .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:680px) {
.c-dialog [role='dialog'] [role='document'] .m-feature > div {
    width: 80%;
}
}
@media screen and (max-width:539px) {
    .mosaic [data-grid~='container']{
        /*.max-width: 314px; */
        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%;
}

/* lightbox */
.c-dialog.f-flow [role='dialog'] {
    max-width: 1600px !important;
    height: 100%;
}

    .c-dialog.f-flow [role='dialog'] > .c-glyph, .c-dialog.f-lightbox [role='dialog'] > .c-glyph {
        width: 48px !important;
        height: 48px !important;
        color: #107c10 !important;
        font-weight: 700 !important;
        font-size: 24px;
    }

@media only screen and (min-width:768px) {
    .c-dialog section {
        height: 49vw;
        overflow: hidden;
    }

    .c-dialog .m-feature picture {
        position: absolute;
        top: calc(50%);
        transform: translateY(-50%);
    }
}

.c-dialog [role='dialog'] {
    border: none !important;
}

.iconBlade {
    background-color: #f2f2f2;
    padding-top: 22px;
    padding-bottom: 60px;
}

.dsk48 {
    padding: 42px 0 40px 0;
}
/*
@media screen and (max-width: 1083px) {
    .dsk48 {
        padding-top: 0px;
    }
}
*/

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

.icons {
    text-align: center;
    /*margin: 38px 0 48px 0;*/
}


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


/*
.icons a:focus {
    outline: 2px dashed;
}
*/
.icons a:nth-child(6) {
    margin-right: 0px;
}

.icons a p {
    color: #107c10;
    font-size: 20px;
}

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

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

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

    .icons a img {
        float:none;
        margin-right: 0;
        width: 56px;
    }
    .icons a p {
        /*float:left;
        transform: translateY(30%);*/
        display:none;
    }
    
}


@media screen and (max-width: 539px) {
    .icons a img {
        /*margin-right: 10px;*/
        width: 48px;
    }


}

/*
==================================
TRIPTYCH VIDEO CONTROL BUTTONS
==================================
*/

.triptych__box .buttonswap__container {
 position: absolute; /* Position needs to be defined because child elements are absolute */
 bottom: 16px;
 left: 12px;
 width: 26px;
 /* height and line-height are closely related for vertical centering purposes. 
 It's a bit of a hack, but it was the best option in this instance.
 In this case, line-height ~ (height - (border || outline)) ish */
 height: 26px;
    line-height: 26px; 
    z-index: 3200;
}
@media screen and (max-width: 767px) {
    .triptych__box .buttonswap__container {
        bottom: 6%;
     left:3%;
    }
}

.triptych__box .buttonswap__button {
 font-weight: inherit;
 display:block;
 position: absolute;
 width:100%;
 height:100%;
 text-align:center;
 transition: all 100ms;
 color: #fff;
 font-weight: bold;
 background-color: #666; /* rgba(0,0,0,.3);*/
 border: 2px solid transparent;
 outline: 2px solid transparent;
}

.triptych__box .buttonswap__button.pause {
/* Hide on page load. */
 display:none;
}
.triptych__box .buttonswap__button.play {
/* Show on page load. */
 display:block;
}
   
.triptych__box .buttonswap__button:link, 
.triptych__box .buttonswap__button:visited {
 color: #eee;
}


.triptych__box .buttonswap__button:hover, 
.triptych__box .buttonswap__button:active {
 color: black;
 background-color:white;
}

.triptych__box .buttonswap__button span, 
.triptych__box .buttonswap__button.c-glyph::before { 
/* This fixes alignment issues between glyph and text in local environment. Test in production. */
 vertical-align:top;
}

/*
==================================
SLIDER Behind the Scenes
==================================
*/
.behind-scenes {
    padding-top: 22px;
    position:relative;
    z-index: 499;
}
@media screen and (min-width: 768px){
    .behind-scenes {
        padding-top: 70px;
    }
    .behind-scenes .m-area-heading {
        padding-bottom: 58px;
    }
    
}
.behind-scenes-ambassador {
    background-color: #000;
}
.behind-scenes,
.behind-scenes > [data-grid~="container"] {
    background: #000;
}
.behind-scenes .panel-content p {
    padding-top: 10px;
}

/*
==================================
THANK YOU - GO PLAY
==================================
*/
.go-play {
    padding-top: 24px;
    padding-bottom: 36px;
}
.go-play .go-play__heading {
    font-size: 28px;
    line-height: 1.16;
    text-align: center;
    margin: 3px auto 33px auto;
    max-width: 85%;
}

@media screen and (min-width: 768px) {
    .go-play .go-play__heading {
        font-size: 30px;
    }
}
@media screen and (min-width: 768px) {
    .go-play .go-play__heading {
        font-size: 32px;
    }
}
@media screen and (min-width: 1084px) {
    .go-play .go-play__heading {
        font-size: 36px;
    }
}
/*
@media screen and (min-width: 1400px) {
    .go-play .go-play__heading {
        font-size: 46px;
        line-height: 1.22;
    }
}
*/

/*
==================================
STAY CONNECTED
==================================
*/

.stay-connected {
    padding-top: 57px;
}
.stay-connected .m-area-heading {
    padding-bottom: 52px;
}
@media screen and (max-width: 767px) {
    .stay-connected {
        padding-top: 0px;
    }
    .c-feature.f-align-left>div, .c-feature.f-align-right>div, .m-feature.f-align-left>div, .m-feature.f-align-right>div {
        padding-bottom: 0;
    }
    .stay-connected .c-heading-1 {
        padding-top: 19px;
    }
}

.gear__disclaimer {
    font-size: 12px;
    line-height: 1.98em;
    padding: 47px 0 28px 0;
}