/* 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
      ==================================
      */
    
    .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%;
        /*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: 32px;
        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% - 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://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: 117px;
            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) {
        .triptych1-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){
          .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: 16px;
    }
    
    .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 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 .dark {
            display: none;
        }
        .gamer-spotlight .community__social-icon .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__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 #fff !important;
        outline: 2px dashed #000 !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://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) {
        .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;
          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;
      }
      */
    
    .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://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: 600px;
        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 */
        }
    }
    
    .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;
    }
    
    @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 {
        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%;
    }
    /* 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;
            max-width: 72px;
        }
    }
    
    @media screen and (max-width: 940px) {
        .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;
        }
        .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;
    }
    
    .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;
}
}