/* non-mosaic-related overrides */
@media only screen and (min-width: 767px) {
 .page-header .c-heading-1 {
  font-size: 72px;
 }
   }
   @media only screen and (max-width: 767px) {
 .jump-in .m-hero-item > div {
 height: 200px;
 overflow: visible;
 }
 }
 .page-header .m-banner p {
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
 }
   .nineTeenTwenty {
 max-width: 1920px;
 margin: 0 auto;
 margin-top: 0px;
 margin-right: auto;
 margin-bottom: 0px;
 margin-left: auto;
 }
 /*
 ==================================
 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;}
 }
 
 /*
 ==================================
 MOSAIC BOX structure
 ==================================
 */
 
 .scroll__section .mosaic__box {
  position:relative;
  /*width: 100%;
  max-width: 1068px;
  -webkit-filter: drop-shadow(0px 0px 30px rgba(0,0,0,.1));
  filter: drop-shadow(0px 0px 30px rgba(0,0,0,.1));*/
 }
 .scroll__section .mosaic__box::before {/* filter: drop-shadow not fully supported. This is a workaround */
  content: "";
  display:block;
  position:absolute;
  height: 100%;
  width: 100%;
  /*top:50%;
  left:50%;
  transform: translate(-50%, -50%);*/
  z-index: 0;
  background-color:rgba(0,0,0,.162); /* Done this way because of a small gap than can exist inside an element.*/
  -webkit-filter:blur(37px);
  filter:blur(37px);
 }
 
 /* Hide the drop shadow workaround in IE 9-up */
 @media screen and (min-width:0\0) and (min-resolution: +72dpi) {
  .scroll__section .mosaic__box::before {display:none;}
 }
 
 .scroll__section .mosaic__element {
  position: relative;
  overflow:hidden;
  width: 49.4%; /* will get a margin of .6%. The width value is needed when calculating aspect ratio later */
 }
 
 
 .scroll__section .mosaic__element .c-image {
  /*position:absolute;*/
  width: 100%;
  top: 0;
  left:0;
 }
 
 /* .mosaic__element float, width, margin, and aspect ratio are set based upon their order in the code. */
 /* Fewer class names or IDs to worry about */
 .scroll__section .mosaic__element:nth-child(5n+1) {
  width: 100%;
  float: left; /* floated for margin-collapse consistency despite being full-width */
  margin: .6% 0;
  /*padding-bottom: 50%;  aspect ratio calculation * % width of element */
 }
 .scroll__section .mosaic__element:nth-child(5n+2) {
  float:left;
  margin: .6% .6% .6% 0;
  /*padding-bottom:49.96%;  aspect ratio calculation * % width of element */
 }
 .scroll__section .mosaic__element:nth-child(5n+3) {
  float:right;
  margin: .6% 0 .6% .6%;
  /*padding-bottom: 29.94%;  aspect ratio calculation * % width of element */
 } 
 .scroll__section .mosaic__element:nth-child(5n+4) {
  float:right;
  margin: .6% 0 .6% .6%;
  /*padding-bottom:49.96%;  aspect ratio calculation * % width of element */
 }
 .scroll__section .mosaic__element:nth-child(5n+5) {
  float:left;
  margin: .6% .6% .6% 0;
  /*padding-bottom: 29.94%;  aspect ratio calculation * % width of element */
 }
 
 .scroll__section .mosaic__element:first-of-type {
  margin-top: 0px; 
 }
 
 .scroll__section .mosaic__image {
  position:relative;
  width:100%;
  top:0;
  left:0;
 }
 .scroll__section .mosaic__image::before { 
  position:absolute;
  display: block;
  content: "";
  height: 100%;
  width: 100%;
 
 
 /*background: linear-gradient(to bottom, transparent 0%,transparent 63%,rgba(0,0,0,.5) 80%,#000000 100%);  W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 /* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='transparent', endColorstr='#000000',GradientType=0 );  IE6-9 */
 
 }
 
 .scroll__section .mosaic__image img {
  width: 100%;
 }
 
 @media screen and (min-width:1084px){
 
  .scroll__section .scroll__header {
   /* font-size: 408%; 
   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: 90%;
   margin-left: auto;
   margin-right: auto;
  }
 
  .scroll__section .scroll__header.clone {
   display:none;
  }
 
  .scroll__section .scroll__header span {
   display: inline;
  }
 
  .scroll__section .mosaic__limit {
   position:relative;
   max-width: 902px;
   margin: 0 auto;
  }
  .scroll__section .mosaic__element {
   position: relative;
   overflow:hidden;
  }
  
  /*.scroll__section .mosaic__element:nth-child(5n+1),
  .scroll__section .mosaic__element:nth-child(5n+2),
  .scroll__section .mosaic__element:nth-child(5n+3),*/
  .scroll__section .mosaic__box .mosaic__element {
   float:none;
   display:block;
   width: 100%;
   margin-top: 0px;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 12px;
  } 
  .scroll__section .mosaic__box .mosaic__element:last-child {
   margin-bottom: 0;
  } 
 
  /*
  .scroll__section .mosaic__element:nth-child(5n+4),
  .scroll__section .mosaic__element:nth-child(5n+5) {
  display:none;
  } */
 
 
 }
 @media screen and (max-width:767px){
 /*
  .scroll__section .mosaic__element:nth-child(5n+1),
  .scroll__section .mosaic__element:nth-child(5n+2),
  .scroll__section .mosaic__element:nth-child(5n+3) {
   padding-bottom:83.44%;  aspect ratio calculation 
  }
 */
  .scroll__section .mosaic__limit {
   max-width: 640px;
  }
 
 }
 /*
 ==================================
 END MOSAIC BOX structure
 ==================================
 */
 
 /* 
 ================================
 Mosaic content formatting.
 ================================
 */
 .scroll__section .mosaic__content {
  position:absolute;
  left: 40px;
  bottom: 20px;
  max-width: 80%;
 }
 
 @media screen and (max-width:640px){
  .scroll__section .mosaic__content {
   left: 32px;
   bottom: 22px;
   max-width: 85%;
  }
 }
 @media screen and (max-width:540px){
  .scroll__section .mosaic__content {
   position: relative;
   max-width: 100%;
   width: 100%;
   left: auto;
   bottom: auto;
   padding: 18px 16px 10px 16px;
   margin: 0;
   color: white;
  }
  .scroll__section .mosaic__element {
   background-color: #333;
  }
  .scroll__section .mosaic__element:not(:last-child){
   margin-bottom: 12px;
  } 
 
  
 }
 @media screen and (min-width:1083px) and (max-width:1400px){
  .scroll__section .mosaic__content {
   /*left: 28px;
   bottom: 20px;*/
   max-width: calc(100% - 50px);
  }
 }
 
 .scroll__section .mosaic__content .c-paragraph-1{
  padding-top: 11px;
 }
 .scroll__section .mosaic__content h3 {
  padding-top: 0;
 }
 .scroll__section .mosaic__content .c-call-to-action {
  outline:none;/* NECESSARY to prevent bug in box shadow hack in MS browsers */
  margin-top: 10px;
  color: inherit;
 }
 
 @media screen and (min-width:1083px) and (max-width:1280px){
  .scroll__section .mosaic__content .c-paragraph-1{
   padding-top: 6px;
  }
  .scroll__section .mosaic__content .c-call-to-action {
   outline:none;/* NECESSARY to prevent bug in box shadow hack in MS browsers */
   /*margin-top: 0px;*/
  }
 }