/* styles.css 
   Project: 
   Author: 
   Date: 
	
   Helpful links: 
   	Web colors: 
   		https://en.wikipedia.org/wiki/Web_colors#X11_color_names
	Color picker tool:
		https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool
		http://colorpicker.com

*/

body {
    font-family:'Playfair Display', serif;
    background: #b7c2c8;
}

.titlevideo {
   top: 0;
   z-index: -1;
}


.titlevideo img {
   width: 100%;
}

.headline {
   width: 100%;
   text-align: center;
   position: absolute;
   top: 0%;
   color: black;
   font-size: 2.9vw;
   font-weight: thin;
   font-family:'Playfair Display', serif;
}

.headline img {
   text-align: center;
}

.subhead {
   margin-left: auto;
}

.byline {
   font-size: 2vw;
   color: grey;
   text-align: center;
   margin-top: 40%;
}

.bigimage {
   position: -webkit-sticky;
   position: sticky;
   top: 0;
   z-index: -1;
}

.bigimage img {
   width: 100%;
}

.graybox {
   width: 70px;
   height: 4px;
   margin: auto;
   background-color: rgba(32, 32, 32, 0.7);
}


.images img {
   width: 100%;
   height: -50%;
   z-index: -3;
   position: sticky;
   top: 0;
}



.superscrolltext {
   margin-top: -140%;
   padding-bottom: 1%;
}

.superscrolltext img {
   width: 100%;
   padding-top: 2%;

}

/*.superscrolltext h3 {
   color: grey;
   font-style: italic;
}*/

.scrolltext {
   width: 50%;
   padding-left: 5%;
}

.firstsentence {
   font-size: 1.2em;
}

.part1 {
   height: 1300px;
}

.part2 {
   height: 2700px;
}

.part3 {
   height: 2100px;
}

.part4 {
   height: 1200px;
}

.infogram iframe {
   width: 100%;
   height: 110%;
/*   padding-bottom: -40%;
*/}

.transparentbox {
/*   height: 35%;*/
   width: 100%;
   background-color: rgba(245, 245, 246, 0.3);
   padding: 5%;
}

button {
   background: none;
   text-align: left;
   cursor: pointer;
   border: 1px dashed;
   background-color: rgba(0,0,0,0.2) ;
 } 

 .videooverlay {
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0;
   right: 0;
   background-color: rgba(0,0,0,0.8);
   display: none;
   cursor: pointer;
  }

.bigvideo {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   max-height: calc(100vh - 10%);
   overflow-y: auto;
}

.words{
   height: 500px;
   background-color: white;
   text-align: left;
   padding: 20px 100px;
}

.words video {
   width: 100%;
}

.footer {
   text-align: center;
   background: black;
   color: gray;
   height: 100%;
   padding-top: 5px;
}
 

@media only screen and (max-width: 800px) {
      .part1 {
         height: 1500px;
      }

      .scrolltext {
      width: 80%;
      padding-left: 5%;
}

      .part2 {
         height: 3000px;
      }

      .part3 {
         height: 2500px;
      }

      .part4 {
         height: 1500px;
}

.transparentbox {
/*   height: 35%;*/
   width: 100%;
   background-color: rgba(245, 245, 246, 0.7);
}

 .modal {
   display:none;
}


@media only screen and (max-width: 800px) {
      .part1 {
         height: 1600px;
      }

      .scrolltext {
      width: 80%;
      padding-left: 5%;
}

      .part2 {
         height: 3200px;
      }

      .part3 {
         height: 2700px;
      }

      .part4 {
         height: 1700px;
}

.transparentbox {
/*   height: 35%;*/
   width: 100%;
   background-color: rgba(245, 245, 246, 0.7);
}

 .modal {
   display:none;
}


@media only screen and (max-width: 500px) {
   .transparentbox {
   background-color: rgba(245, 245, 246, 0.0);
   }