/* Redacted Copy */
span.redacted_copy {
    background-color: #ffffff;
    display: inline-block;
}

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

    /* Hidden Videos Ambassadors */
   
    @media screen and (min-width: 1400px) {
        .visHidden {
            visibility: hidden;
        }
    }
    
    @media screen and (max-width: 1399px) {
        .visHidden {
            display: none;
        }
    }
    
    #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__content button.play__button:hover,
    .triptych__content 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 #000 !important;
        border: 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 #fff !important;
          border: 2px dashed #000 !important;
          }
  }
  */
    
    .videoverlay {
        text-align: center;
        color: #fff;
        position: relative;
        overflow: hidden;
        margin-top: 83px;
        margin-bottom: 60px;
    }
    
    @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.49% 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 .c-subheading-1 {
        width: 75%;
        max-width: 1100px;
        margin: 0 auto;
    }
    /*
    ==================================
    HERO VIDEO BUTTONS
    ==================================
    */

    @media screen and (min-width: 769px) {
    .static-hero {
        display: none !important;
        }
    }

    @media screen and (max-width: 768px) {
        .video__box, .buttonswap__container {
            display: none !important;
            }
        }
    
    .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 .c-subheading-1 {
            font-size: 24px;
            line-height: 1.25;
        }
    }
    
    @media screen and (max-width:767px) {
        .m-ambient-video {
            padding-top: 48px;
        }
        .video__content .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
    ==================================
    */
    
    .mosaic__content a:focus {
        border-color: #fff !important;
        outline: 2px solid #000 !important;
        outline-offset: 0px;
    }
    
    .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%;
    }
    
    .extra-gradient {
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: linear-gradient(to bottom, transparent 0%, transparent 37%, rgba(0, 0, 0, 0.8) 80%, #000000 100%);
    }
    
    .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: 32px;
        bottom: 20px;
        max-width: 85%;
    }
    
    @media screen and (max-width:640px) {
        .scroll__section .mosaic__content {
            left: 32px;
            bottom: 22px;
            max-width: 87%;
        }
    }
    
    @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% - 64px);
        }
    }
    
    .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;
        padding-left: 0 !important;
    }
    
    @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__content 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__content 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
    ==================================
    */
    
    @media screen and (min-width: 1400px) {
        .triptych-parent {
            display: flex;
        }
        .triptych-parent .section-intro {
            order: 3;
        }
        .triptych-parent .the-triptych {
            order: 2;
        }
        .triptych-parent .mobile-intro {
            order: 1;
        }
    }
    
    @media screen and (max-width: 1399px) {
        .ambassador .section-intro {
            text-align: center;
        }
        .ambassador .section-intro p {
            max-width: 650px;
            margin-left: auto;
            margin-right: auto;
        }
    }
    
    .mobile-third {
        padding-left: 5%;
        padding-right: 5%;
    }
    
    .ambassador .mobile-third,
    .triptych1-section .mobile-third,
    .ambassador__details,
    .triptych1-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: #9bf00b;
    }
    
    .ambassador .mobile-third {
        padding-bottom: 33px;
        text-align: left;
    }
    
    .ambassador .mobile-third a.f-lightweight,
    .ambassador__details a.f-lightweight {
        color: #9bf00b;
        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: 13px;
        padding-bottom: 96px;
        background-image: url(https://assets.xboxservices.com/assets/f1/ca/f1caa0f3-ad53-40e4-8f46-735c11009d73.jpg?n=Community-Hub_Image-0_Ambassadors-Program-Background_767x810_03.jpg);
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: 100% auto;
    }
    
    @media screen and (min-width: 768px) {
        .ambassador {
            background-image: url(https://assets.xboxservices.com/assets/fd/29/fd298ecc-44b1-424a-ae92-8a6250177a67.jpg?n=Community-Hub_Image-768_Ambassadors-Program-Background_1083x989_03.jpg);
        }
    }
    
    @media screen and (min-width: 768px) {
        .ambassador {
            padding-top: 117px;
            padding-bottom: 0px;
            padding-bottom: 144px;
        }
    }
    
    @media only screen and (min-width:1400px) {
        .ambassador {
            background-color: #f2f2f2;
            background-image: url(https://assets.xboxservices.com/assets/59/ae/59aedbd2-07d3-44b6-b81b-934a9aa9ea51.svg?n=Community-Hub_Image-0_Xbox-Ambassadors-Logo_320x320.svg), url(https://assets.xboxservices.com/assets/19/04/1904b860-1284-499e-8fa3-8dea0a84eeef.jpg?n=Community-Hub_Image-1400_Ambassadors-Program-Background_1920x1400_03.jpg);
            background-repeat: no-repeat;
            background-position: 8% 48%, center top;
            background-size: 320px 320px, 100% 100%;
            z-index: 0;
            position: relative;
            padding-bottom: 97px;
        }
    }
    
    @media only screen and (min-width:1400px) {
        .triptych1-section__details,
        .ambassador__details {
            max-width: 80%;
            margin: 0 5% 0 15%;
            /* margins and max-width total 100% */
        }
    }
    /*
    @media only screen and (min-width:768px) and (max-width: 1083px){
        .triptych1-section__details {
            max-width: 768px;
        }
    }
    */
    
    @media only screen and (min-width:1084px) and (max-width: 1399px) {
        .triptych1-section__details {
            max-width: 1010px;
        }
    }
    
    [data-grid~="container"].gamer-spotlight .c-heading-1,
    [data-grid~="container"].ambassador .c-heading-1,
    [data-grid~="container"].triptych1-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,
        .triptych1-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"].triptych1-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: 12px;
    }
    
    @media screen and (min-width: 1400px) and (max-width: 1599px) {
        .community__social-links>li {
            margin-bottom: 8px;
        }
    }
    
    .community__social-links li>a {
        display: inline-block;
        padding-right: 5px;
        border: 2px solid transparent;
        /*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 12px 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;
    }
    /*
  .gamer-spotlight-ambassador {
      background-color: #000;
  }
  */
    
    @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-right: 12px;
            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 .dark {
            display: none;
        }
        .gamer-spotlight .community__social-icon .light {
            display: inline-block;
        }
    }
    
    @media only screen and (min-width: 1084px) and (max-width:1399px) {
        .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:767px) {
        .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 */
    }
    
    .triptych__panel--focus {
        outline: 2px dashed white;
    }
    
    .high-contrast-black-on-white .triptych__panel--focus {
        border: 2px dashed #999;
    }
    
    @media screen and (min-width: 1400px) {
        .triptych__panel.expanded {
            /*padding-bottom: 95.5%;  to control aspect ratio */
            padding-bottom: calc(84% + 66px);
        }
    }
    /*
        .triptych__content {
            background-color: #000;
        }*/
    
    .triptych__thumb {
        border: 2px solid transparent !important;
        outline: 2px solid transparent !important;
    }
    
    .triptych__thumb:before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: #000;
    }
    
    .triptych__thumb:focus {
        border: 2px dashed transparent !important;
        outline: 2px dashed transparent !important;
    }
    
    .triptych__panel.expanded .triptych__thumb:focus {
        border: 2px dashed transparent !important;
        outline: 2px dashed transparent !important;
    }
    
    .triptych__thumb img {
        opacity: .7;
    }
    
    .triptych__panel.expanded .triptych__content {
        opacity: 1;
        visibility: visible;
        background-color: #fff;
    }
    
    .triptych__panel .triptych__details {
        opacity: 0;
        visibility: hidden;
    }
    
    .triptych__panel.expanded .triptych__details {
        opacity: 1;
        visibility: visible;
    }
    
    .triptych__panel.expanded .triptych__thumb img {
        opacity: 1;
    }
    
    .triptych__panel.expanded button.play__button {
        opacity: 0;
    }
    
    .triptych__content button.play__button {
        transition: all 200ms;
    }
    
    .triptych__content {
        transition: all 200ms;
        position: absolute;
        height: 100%;
        width: 100%;
        /*overflow:hidden;*/
        cursor: pointer;
    }
    
    .triptych__poster {
        cursor: pointer;
        background-color: #000000;
        display: none;
    }
    
    .triptych__poster img {
        width: 100%;
    }
    
    .triptych1-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__panel.expanded .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: 700;
        overflow: hidden;
        padding-top: calc(3% - 6px);
    }
    
    @media only screen and (max-width:820px) {
        .ambassador__details,
        .triptych1-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__thumb {
        position: relative;
        height: 0;
        padding: 0 0 56.25% 0 !important;
    }
    
    .triptych__thumb img,
    .triptych__thumb video,
    .triptych__thumb iframe {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }
    /*
        a.triptych__thumb-image img {
            border: 2px dashed transparent;
            box-sizing: border-box;
        }
    
        a.triptych__thumb-image:focus img,
        a.triptych__thumb-image:active img {
            border-color: #000;
        }
    */
    
    .triptych__thumb.m-ambient-video {
        min-width: auto !important;
    }
    
    @media only screen and (min-width:768px) and (max-width: 1083px) {
        /*.ambassador__details,
            .triptych1-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,
        .triptych1-section__details,
        .triptych__box {
            max-width: 970px;
        }
    }
    
    @media only screen and (max-width:1040px) {
        .ambassador__details,
        .triptych1-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
    ==================================
    */
    
    .triptych1-section {
        position: relative;
        margin-top: 89px;
        z-index: 50;
    }
    
    @media only screen and (min-width:1400px) {
        .triptych1-section {
            background-image: url(https://assets.xboxservices.com/assets/95/9d/959d6f7b-6167-4615-9506-1f355368facb.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) {
        .triptych1-section {
            margin-top: 137px;
            margin-bottom: 0;
        }
    }

    
    .triptych1-section .mixer-logo {
        padding: 0;
        margin: 2px 0 -4px 0;
        line-height: 1;
        width: 240px;
        height: 70px;
    }
    
    .triptych1-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. */
        .triptych1-section {
            background-image: none;
        }
        .triptych1-section .mixer-logo {
            margin-left: auto;
            margin-right: auto;
        }
    }
    
    .triptych1-section .mixer-logo img,
    .triptych1-section .mixer-logo picture {
        vertical-align: top;
    }
    
    .triptych1-section .mobile-third a,
    .triptych1-section__details a {
        margin-top: 8px;
        margin-bottom: 32px;
    }
    
    .triptych1-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://assets.xboxservices.com/assets/14/c8/14c84024-3b64-403f-92e2-59e555fb78eb.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 {
        background-color: #000;
        background-image: url(https://assets.xboxservices.com/assets/e4/5f/e45f046c-d231-4a88-a8a4-16625defbbfa.jpg?n=Community-Hub_Image-0_Gamer-Spotlight-Background_767x1010.jpg);
        background-repeat: no-repeat;
        background-size: 100% auto;
        position: relative;
    }
    
    @media screen and (min-width: 1084px) {
        .gamer-spotlight:before {
            content: "";
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 10%;
            background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
        }
    }
    
    @media screen and (min-width: 768px) {
        .gamer-spotlight {
            background-image: url(https://assets.xboxservices.com/assets/3d/3f/3d3f67db-e563-439a-ad8d-895ae3535326.jpg?n=Community-Hub_Image-768_Gamer-Spotlight-Background_1083x1012.jpg);
        }
    }
    
    @media screen and (min-width: 1084px) {
        .gamer-spotlight {
            background-image: url(https://assets.xboxservices.com/assets/77/30/7730cef8-d57e-4464-bf70-733b015dccaf.jpg?n=Community-Hub_Image-1084_Gamer-Spotlight-Background_1920x1884.jpg);
            background-position-y: calc(-41.15vw + 370px);
        }
    }
    
    .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 18%;
        /* 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:1084px) and (max-width: 1399px) {
        .gamer-spotlight__social-header {
            font-size: 20px;
            padding: 0 0 12px 0;
        }
        .gamer-spotlight__details .no-mobile .c-heading-1 {
            font-size: 42px;
            line-height: 1.15em;
        }
        .gamer-spotlight .image-container {
            width: 25%;
        }
        .gamer-spotlight .copy-container {
            width: 41%;
        }
    }
    
    @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%;
            white-space: nowrap;
        }
        .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 (min-width:1084px) {
        .gamer-spotlight__details a.f-lightweight {
            margin: 2.4% 0 2.4% 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 {
        background-color: #f2f2f2;
    }
    
    .events * {
        position: relative;
    }
    
    .events__box {
        margin: 0 auto 3% auto;
        /* 3% matches x-margins from width %. only comes into play when stacking */
        width: 97%;
        overflow: hidden;
    }
    
    @media screen and (min-width: 1084px) {
        .events__box {
            min-height: 600px;
        }
    }

    .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__box.theme-dark {
        background-color: #4f4f4f;
    }
    
    .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;
    }
    
    .events__copy .events__headline {
        font-weight: 700 !important;
    }
    /*
    @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 */
        }
    }
    
    .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__headline .huge[style] {
  font-size: 1em;
 }
    
    .events__content {
        width: 100%;
        color: inherit;
        padding: 18.5% 12.2% 12.2% 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: 40px;
        bottom: 0;
    }
    
    @media screen and (min-width:540px) and (max-width:768px) {
        .events__headline {
            font-size: 1.25em;
        }
        .events__headline .huge {
            font-size: 3em;
        }
    }
    /*
    .events__cta > *:not(:last-child) {
        margin: 0 0 8px;
    }*/
    
    .events__details .c-heading-3 {
        font-size: 32px;
        line-height: 1.12em;
        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.f-size-medium picture img,
    .discussions .c-product-placement.f-size-medium picture img {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
    }
    
    .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;
        padding-top: 21px;
        /*text-decoration:underline;*/
    }
    
    .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;
            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) {
        .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%;
    }

 .mosaic .mosaic__item a {
  display: block;
 }


    /* 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%;
        min-width: 80px;
    }

    .iconBlade .icons a {
        min-width: 80px;
    }

    /*
    .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;
            max-width: 72px;
        }
    }
    
    @media screen and (max-width: 940px) {
        .iconBlade .icons a {
            min-width: auto;
        }
        .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: 640px) {
        .icons .icon-break {
            display: block;
        }
        .icons .icon-break:first-of-type {
            margin-bottom: 32px;
        }
        .icons a {
            margin: 0 5%;
        }
    }
    /*
    @media screen and (min-width: 768px) and (max-width: 940px){
    .icons .icon-break {
        display:block;
    }
    .icons .icon-break:first-of-type {
        margin-bottom: 32px;
    }
  
    .icons a {
        margin: 0 5%;
    }
  }*/
    
    @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
    ==================================
    */
    
    .cultural-campaign,
    .behind-scenes {
        padding-top: 22px;
        position: relative;
        z-index: 499;
    }
    
    @media screen and (min-width: 768px) {
        .cultural-campaign,
        .behind-scenes {
            padding-top: 70px;
        }
        .cultural-campaign .m-area-heading,
        .behind-scenes .m-area-heading {
            padding-bottom: 33px;
        }
    }
    
    .behind-scenes-ambassador {
        background-color: #000;
    }
    
    .behind-scenes,
    .behind-scenes>[data-grid~="container"] {
        background: #000;
    }
    /*
    ==================================
    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;
        }
        .stay-connected .c-heading-1 {
            padding-top: 19px;
        }
    }
    
    .gear__disclaimer {
        font-size: 12px;
        line-height: 1.98em;
        padding: 47px 0 28px 0;
    }
    
    .discussions .m-product-placement-item a .c-paragraph-1 {
        text-decoration: underline;
    }
    
    .discussions .m-product-placement-item a:hover .c-paragraph-1 {
        color: #054b16;
        font-weight: 700 !important;
        letter-spacing: -.02em;
    }
    /* Hiding background content to pass contrast for FP*/
    
    .stealth-carousel .stealth-sub-carousel.left-carousel .stealth-sub-carousel-panel .panel-content h3,
    .stealth-carousel .stealth-sub-carousel.left-carousel .stealth-sub-carousel-panel .panel-content p,
    .stealth-carousel .stealth-sub-carousel.left-carousel .stealth-sub-carousel-panel .panel-content a,
    .stealth-carousel .stealth-sub-carousel.right-carousel .stealth-sub-carousel-panel .panel-content h3,
    .stealth-carousel .stealth-sub-carousel.right-carousel .stealth-sub-carousel-panel .panel-content p,
    .stealth-carousel .stealth-sub-carousel.right-carousel .stealth-sub-carousel-panel .panel-content a {
        visibility: hidden !important;
    }
    /* 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);
        }
    }
    /* END Image high-contrast fix? */
    /*
  .cultural-campaign .m-area-heading {
  max-width: 625px;
  float: none;
  margin: 0 auto;
  
  }*/
    
    @media only screen and (max-width: 539px) {
        .m-product-placement .c-carousel .c-flipper {
            visibility: visible;
        }
    }
    /* GAME CLUB */
    
    .game-club {
        display: none;
    }
    
    .game-club .m-feature {
        margin-top: 24px;
    }
    
    @media only screen and (min-width: 768px) {
        .game-club .m-feature picture {
            position: relative;
        }
        .game-club picture:after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            right: 0;
            background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 100%);
        }
        .game-club .m-feature img {
            display: block;
            margin-left: auto;
        }
    }
    /*
  .high-contrast-mode.white-on-black .ambassador__social img {
  filter: grayscale(1) brightness(10);
  }*/
    
    .high-contrast-mode.black-on-white .ambassador__social img {
        filter: grayscale(1) brightness(0);
    }

    /* text spacing fixes */ 

    .text-spacing .scroll__section .mosaic__content p,
    .scroll__section .mosaic__content p[style] {
        padding-top: 0;
        margin-top: 0;
        font-size: 18px;
    }
    .text-spacing .scroll__section .mosaic__content [class^="c-heading"],
    .scroll__section .mosaic__content [class^="c-heading"][style] {
        padding-top: 0;
        margin-top: 0;
        font-size: 22px;

    }
    .text-spacing .scroll__section .mosaic__content a,
    .scroll__section .mosaic__content a[style]{
        margin-top: 0;
    }