/*
 ==================================
 SCROLLING HEADER
 ==================================
 */
 
 .scroll__section {
  /*display:table;*/
  /*width:100%;*/
 }
 
 .scroll__box {
  position:relative;
  padding-top: 0%;
 }
 
 .scroll__section .scroll__header h2 span {
  display:block; /* forcing word wrap where we want it and undoing it responsively */
 /* white-space: nowrap;*/
 }
 
 .scroll__section .scroll__header h2 {
  display:block; /* forcing word wrap where we want it and undoing it responsively */
  /*white-space: nowrap;*/
  display:block;
  text-align: left;
  padding:0 0 0 0;
}
 
 .scroll__section .scroll__header {
  position:sticky;
  left:0;
  padding-bottom:25px;
  bottom: auto;

  top: 10%; /* adjusted for page bar */
  max-width: 75%;
  transform: scale3d(1, 1, 1);
 }
 .scroll__section .scroll__header p {
 padding-bottom: 36px;
}

.scroll__section .scroll__header a {
 display: inline;/* Edge whackiness fix */
}

@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;
z-index: 200;
 }
 .scroll__section .mosaic__box::before {/* filter: drop-shadow not fully supported. This is a workaround */
  content: "";
  display:block;
  position:absolute;
  height: 100%;
  width: 100%;
  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 {
 display:block;
 position: relative;
 overflow:hidden;
 width: 49.6%; /* will get a margin of .6%. The width value is needed when calculating aspect ratio later */
 border: 2px solid transparent;
}

.scroll__section a.mosaic__element:focus {
 outline: 2px dashed black;
 border: 2px dashed white;
}

 .scroll__section .mosaic__element .c-image {
  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: .4% 0;
 }
 .scroll__section .mosaic__element:nth-child(5n+2) {
  float:left;
  margin: .4% .4% .4% 0;
 }
 .scroll__section .mosaic__element:nth-child(5n+3) {
  float:right;
  margin: .4% 0 .4% .4%;
 } 
 .scroll__section .mosaic__element:nth-child(5n+4) {
  float:right;
  margin: .4% 0 .4% .4%;
 }
 .scroll__section .mosaic__element:nth-child(5n+5) {
  float:left;
  margin: .4% .4% .4% 0;
 }
 
 .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%;
 }
 
 .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:1083px){
  .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;
   max-width: 90%;
   margin: 0 auto;
   text-align: center;
  }
  .scroll__section .scroll__header h2  {
 text-align: center;
 white-space: normal;

   }
   .scroll__section .scroll__header h2 span {
 display: inline;
   }
   
 }
 
 @media screen and (max-width:767px){
  .scroll__section .mosaic__box {
   max-width: 90%;
   margin-left: auto;
   margin-right: auto;
  }
 

  .scroll__section .scroll__header h2 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__box .mosaic__element {
   float:none;
   display:block;
   width: 100%;
   margin-top: 0px;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 1.4%;
  } 
  .scroll__section .mosaic__box .mosaic__element:last-child {
   margin-bottom: 0;
  } 
 }




 /* 
 ==================================
 END MOSAIC BOX structure
 ==================================
 */
 
 /* 
 ================================
 Mosaic content formatting.
 ================================
 */
 .scroll__section .mosaic__content {
  position:absolute;
  left: 45px;
  bottom: 40px;
  max-width: 75%;
 }
 .scroll__section .mosaic__content h3 {
  line-height: 1.15em;
 }

@media screen and (max-width:1399px){
 .scroll__section .mosaic__content {
  left: 35px;
  bottom: 30px;
 }
 .scroll__section .mosaic__content h3 {
  font-size: 30px;
 }
}
  /*
@media screen and (max-width:1083px){
 .scroll__section .mosaic__content {
  left: 38px;
  bottom: 33px;
 }
 .scroll__section .mosaic__content h3 {
  font-size: 30px;
 }
}*/
@media screen and (max-width:767px){
 .scroll__section .mosaic__content {
  left: 30px;
  bottom: 25px;
 }
 .scroll__section .mosaic__content h3 {
  font-size: 26px;
 }
}

@media screen and (max-width:540px){
 .scroll__section .mosaic__content {
  left: 25px;
  bottom: 20px;
 }
 .scroll__section .mosaic__content h3 {
  font-size: 22px; 
 }
}

 @media screen and (min-width:768px) and (max-width:1399px){
 [data-grid~="container"].scroll__section {
  padding-left: 5%;
  padding-right: 5%;
 }
 }

 .scroll__section .mosaic__content h3 {
 font-weight: 600 !important;
 padding-top: 0;
 }