/* 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

*/

* {
   box-sizing: border-box;
}

img {
   width: 100%;
   display: block;
}

body {
   font-family: 'Lato', sans-serif;
   /*font-family: 'Montserrat', sans-serif;*/
}

.header {
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0px;
   left: 0px;
   z-index: -2;
}

.header img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.title {
   width: 100%;
   position: relative; 
   color: darkgrey;
   text-align: center;
   padding: 30px;
}

.title h1 {
  font-size: 4.5em;
  margin-bottom: -2px;
}

.title h2 {
  font-size: 2em;
}

.title h3 {
   width: 200px;
   margin: auto;
   font-size: 1.1em;
   background-color: seashell;
   padding: 10px;
   text-align: center;
   letter-spacing: 3px;
}

.content {
   background-color: white;
   width: 100%;
   margin-top: 90vh;
   overflow-x: hidden;
}

.contentmargin {
  margin-top: 0px;
}

.textbox {
   max-width: 800px;
   margin: auto;
   font-size: 1.2em;
   line-height: 1.7em;
   text-align: justify;
   color: darkgrey;
}

.sectionhead {
  text-align: center;
  color: dodgerblue;
}


.video {
   width: 80%;
   margin: auto;
}

.video video {
   width: 100%;
}


.sidephoto {
  width: 50%;
}

.left {
  float: left;
  margin-right: 20px;
  margin-left: -100px;
  position: relative;
}

.right {
  float: right;
  margin-left: 20px;
  margin-right: -100px;
  position: relative;
}

.caption {
  width: 100%;
  font-style: italic;
  text-align: left;
  background-color: rgba(0,0,0,0.5);
  padding-top: 0px;
  padding-left: 10px;
  padding-bottom: 0px;
  position: absolute;
  bottom: 0px;
  left: 0px;
  color: white;
  display: none;
}

.bigphoto {
  position: relative;
  height: 530px;
}

.bigphoto img {
  object-fit: cover;
  height: 100%;
}

.photocaption {
  position: absolute;
  bottom: 0px;
  width: 100%;
  padding-right: 1%;
  text-align: right;
  color: white;
  background-color: rgba(0,0,0,0.4);
}

.audio {
   width: 100%;
   display: flex;
   padding: 30px;
}

.audiotextbox {
   width: 25%;
   box-shadow: 0px 0px 5px darkgrey;
   background-color: mintcream;
   padding: 10px;
}

.audiocontent {
   padding: 10px;
   width: 75%;
   box-shadow: 0px 0px 5px darkgrey;
   background-color: lightblue;
}

.audiocontent img {
   margin-bottom: 10px;
}

.audiocontent audio {
   width: 100%;
}

.infographic1 {
  margin: auto;
  float: right;
  padding-left: 20px;
  margin-right: -100px;
}

.graph1 {
  width: 300px;
}

.big {
  width: 600px;
  animation: 0.5s grow;
}

@keyframes grow {
    0% {
      width: 300px;
    }

    100% {
      width: 600px;
    }
  }


.infographic2 {
  width: 600px;
  margin: auto;
  float: left;
  padding-right: 20px;
  margin-left: -200px;
}

.clickon {
  position: relative;
  float: right;
  width: 100px;
  font-size: 0.85em;
  margin-top: 5px;
}

.gallery {
  display: flex;
  flex-direction: row-reverse;
  width: 60%;
  margin: auto;
}

.bigphotobox {
  width: 50%;
}

.bigphotobox img {
   width: 100%;
}

.infobox {
  width: 50%;
  margin: auto;
}

.infophoto {
   float: left;
   width: 33.33%;
   position: relative;
   cursor: pointer;
}

.infophoto img {
   width: 100%;
   padding: 1px;
}
.audiotextbox h2 {
   color: royalblue;
   font-style: bold;
}

.audiotextbox h3 {
   color: silver;
   letter-spacing: 3.5px;
   padding: 2px;
}

.Mattaudio {
  margin-top: 5px;
}

.sidephoto audio {
  width: 100%;
}

footer {
  background-color: black;
  color: white;
  padding: 1%;
  text-align: right;
}



/*media query for responsive design */

@media only screen and (max-width: 640px) {
  .infographic2 {
    float: none;
    padding-right: 0px;
    margin-left: 0px;
    width: 100%;
  }

  .infographic1 {
    float: none;
    width: 100%;
  }

  .textbox {
    padding: 20px;
  }

  .sidephoto {
    float: none;
    padding: 20PX;
    width: 100%;
    padding-right: 0px;
    margin-left: 0px
  }

  .audio {
    display: block;
  }

  .audiotextbox {
    width: 100%;
    font-size: 10px;
    margin-bottom: 5px;
  }

  .audiocontent {
    width: 100%;
  }

}