/* styles.css 
   Project: 
   Author: 
   Date: 
	
*/

/*google font*/

@import url('https://fonts.googleapis.com/css2?family=Lato&family=Montserrat&family=Open+Sans&family=Raleway&family=Roboto&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Tiny5&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Tiny5&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Tenor+Sans&family=Tiny5&display=swap')

/*div, section {
  border: 1px solid limegreen;
}*/




/*main css*/

* {
  box-sizing: border-box;
}

/*div, section {
  border: 1px solid limegreen;
}*/

img, video {
  width: 100%;
  display: block;
/*  border: 3px solid blue;*/
}

audio {
  display: block;
}

/*link style*/

a {
  text-decoration: none;
  color: orange;
}

a:visited {
  color: sandybrown;
}

a:hover, a:active {
  color: orange;
  text-decoration: underline;
} 

body, html {
  font-family: 'georgia', serif; 
}

h1, h2, h3, .pullquote {
  font-family: 'tenor sans', sans-serif;

}

header {
  width: 100%;
  height: 100%;
  position: sticky;
  top: 0;
  z-index: -1;
  background-color: black;
/*  border: 3px solid orange;*/
  /*max-height: 600px;*/
}

header img {
  /* this opacity makes the header image dark so you can read the headline text more easily. remove the opacity if you do not have your headline on top of the image.*/
  opacity: 0.6;
}

.credits {
  font-family: 'tenor sans', sans-serif;
  grid-template-columns: 1fr 1fr;
  display: grid;
}

.creditscaption {
  padding: 5%;
  text-align: left;
  margin: auto;
}

.creditscaption h3 {
  color: orange;
}

.creditspic {
  margin-bottom: 10px;
  border-radius: 55%;
  width: 250px;
  height: 250px;
  overflow: hidden;
  border: 10px solid black;
  margin: auto;
}

.title1 {
/*  background-color: rgba(0,0,0, .3);*/
  position: absolute;
  width: 100%;
  top: 30%;
  color: white;
  text-align: center;
  padding: 3%;
}

.title1 h1 {
  font-size: 6.1em;
  margin-bottom: -4px;
/*  top: 40%;*/
  text-shadow: 4px 4px 4px black;
}

.title1 h2 {
  font-size: 2em;
  letter-spacing: .1em;
  text-shadow: 4px 4px 4px black;
}

.pop {
  text-align: center;
  color: white;
}

.popimg {
  border: 4px solid red;
  width: 100%;
  height: 100%;
}

.title1 h3 {
  margin-top: 10%;
  font-size: 1.2em;
  font-style: italic;
}

.title2 {
  width: 100%;
  color: white;
  text-align: left;
  padding: 3% 0%;
}

.title2 h1 {
  font-size: 4.7em;
  margin-bottom: -4px;
}

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

.title2 h3 {
  margin-top: 10%;
  margin-bottom: 0;
  font-size: 0.9em;
  font-style: italic;
  font-weight: bolder;
/*  text-align: justify;*/
  color: #ddd;
}

.content {
  width: 100%;
  background-color: black;

}

.maintext {
  max-width: 700px;
  margin: auto;
  color: lightgrey;
  font-size: 1.2em;
  line-height: 1.7em;
  text-align: justify;
  padding: 1%;
}


/*.pullquote {
  width: 50%;
  font-size: 1.4em;
  line-height: 1.6em;
  font-style: italic;
  text-align: left;
}*/


.cbgcontainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  display: none;
/*  border: 3px solid yellow;*/

}

.nogrid {
  grid-template-columns: 1fr;
}

.cbg {
/*  max-width: 600px;*/
  padding: 75px;
  text-align: right;
  position: sticky;
  position: -webkit-sticky;
  top: 0px;
  z-index: -1;
  background-color: black;
  min-height: 100vh;
}


.cbg h1 {
  color: white;
}

.cbgpic {
  max-width: 700px;
  position: relative;
}

.climatecaption{
  color: white;
  text-align: center;
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, .8);
/*  padding-left: 10%;*/
  font-size: 12px;
}

.cbgtext {
  max-width: 600px;
  height: 200px;
  margin-top: 25%;
  margin-left: 30px;
  text-align: left;
}

.top {
  background-color: black;
}


.SHvideo {
  max-width: 1000px;
  margin: auto;
}

.SHvideo iframe {

}

.parkaudio {
   width: 70%;
   margin: auto;
   text-align: center;
}

.popvid {
  position: relative;
}

.popcaption{
  color: white;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, .8);
/*  padding-left: 10%;*/
}

.name {
  font-size: 0.7em;
  text-align: center;
  line-height: 0.1em;
  padding-bottom: 30px;
}

.left {
  float: left;
  padding-right: 20px;
  margin-left: -40px;
}

.right {
  float: right;
  padding-left: 20px;
  margin-right: -40px;
  margin-bottom: 8px;
}

.floatingpic {
  width: 60%;
}

.floatingpic audio {
  width: 100%;
  margin-top: 5px;
}

.floatingcap {
  margin-top: 0px;
  font-size:  0.8em;
  text-align: center;
}

.infogram-embed {
  margin-botttom: -50px;
  height: 100%;
}

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

.bigphoto {
  position: relative;
}

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

.sidebyside {
  display: flex;
}

.photoleft {
    flex-direction: row;
}

.photoright {
    flex-direction: row-reverse;
}

.sidephoto {
  flex: 2;
}

.sidecaption {
  flex: 1;
  background-color: black;
  color: white;
  font-size: 1.2em;
  display: grid;
  align-items: center;
  text-align: center;
  padding: 20px 40px;
}

.photogrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
}

.gridpic {
  position: relative;
}

.gridpic .photocaption {
  display: none;
}

.cycle-slideshow {
  max-width: 700px;
  margin: auto;
}
/*
.knightlab {
  max-width: 700px;
  margin: auto;
}*/

.googlemap {
  overflow: hidden;
  padding-bottom:40.25%; /* controls depth of storymaps */
  position:relative;
  height: 0;
  max-width: 1100px;
  margin: auto;
/*  border: 3px solid yellow;*/
  background-color: white;
}

.googlemap iframe {
  left:0;
  top:0;
  height:100%;
  width:100%;
  position:absolute;
}

.youtube {
  position: relative;
  max-width: 800px;
  margin: auto;
/*  border: 15px solid yellow;*/
}

.youtubetext {
  max-width: 600px;
  height: 200px;
  margin-top: 35%;
  color: white;
}

.responsivecontainer {
  position: relative; 
  padding-bottom: 56.25%; 
  padding-top: 30px; 
  height: 0; 
/*  overflow: hidden;*/
}

.responsivecontainer iframe, .responsivecontainer object, .responsivecontainer embed { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
}

/*.SH {
  max-width: 1800px;
  margin-top: 75px;
  margin-bottom: 75px;
  margin-left: 75px;
  text-align: right;
  display: grid;
  grid-template-columns: 1fr 1fr;

}*/

.SHtext {
  max-width: 600px;
  margin: auto;
  text-align: center;
  color: white;
/*  border: 2px solid pink;*/


}

.top audio {
  width: 100%;
}

.clickhere {
  font-style: italic;
  font-size: 0.7em;
  text-align: right;
  padding-right: 1%;
}

.voxpop {
  max-width: 700px;
  margin: auto;
}

.voxgrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 10px;
}

.timeline {
  max-width: 900px;
  margin: auto;
}

.timelineimg {
}

.person {
  border-radius: 5px;
  box-shadow: 2px 3px 3px lightslategrey;
  overflow: hidden;
}

.person audio {
  width: 100%;
  display: block;
}

.headshot {
  position: relative;
  text-align: center;

}

.popup, .popup2 {
  cursor: pointer;
}

.infographic {
  max-width: 700px;
  margin: auto;
}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
    display: none;
}

.mySlides img {
    width: 100%;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.slidetext {
  color: #f2f2f2;
  font-size: 15px;
  padding: 12px;
  position: absolute;
  bottom: 0px;
  width: 100%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.7);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dots {
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  text-align: center;
}

.active, .dot:hover {
  background-color: #717171;
}

 
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}


/*footer */

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

/*popup modal*/

.overlay, .overlay2 {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  overflow-y: scroll;
  display: none;
  z-index:  10;
}

.modal {
  width: 70%;
  margin: 2% auto;
}

.closer {
  position: absolute;
  right: 1vh;
  top:  1vh;
  width: 10%;
  cursor: pointer;
}

/*media query for responsive design */

@media only screen and (max-width: 900px) {

  .title1 {
    top: 15%;
  }

  .title1 h1 {
    font-size: 3.5em;
  }

  .title1 h2 {
    font-size: 1.5em
  }

  .title1 h3 {
    font-size: 1.1em;
  }

  .cbgcontainer {
    grid-template-columns: 1fr;
  }

  .cbgtext {
    margin-top: 0%;
  }

  .parkaudio {
    width: 45%;
  }

}


@media only screen and (max-width: 800px) {

  
  .title1 {
    top: 10%;
  }

  .pullquote {
    width: 100%;
    margin: 0px;
    padding: 0px;
    text-align: center;
    display: none; /* remove this line if you want the pullquotes to display on mobile*/ 
  }

  .left, .right {
    margin: 0px;
    padding: 10px;
  }

  .floatingpic {
    width:  100%;
    margin: 0px;
    padding:  0px;
  }

  .popup {
    margin-bottom: 15px;
  }

  .popup .floatingcap {
    display: none;
  }  

  .parkaudio {
    width: 50%;
  }

}


@media only screen and (max-width: 640px) {


  header {
    height: 100vh;
  }

  header video {
    height: 100%;
    object-fit: cover;
    object-position: 80% 50%;

/*    delete if group doesn't like*/

  }


  .title1 {
    top: 40%;
    width: 90%;
  }

  .title1 h1 {
    font-size: 2.5em;
  }

  .title1 h2 {
/*    display: none;*/
    font-size: 0.88em;
  }

  .title1 h3 {
    font-size: 0.9em;
  }

  .title2 h1 {
    font-size: 2em;
  }

  .title2 h2 {
    font-size: 1.3em;
  }

  .title2 h3 {
    font-size: 1em;
  }

  .maintext {
    font-size: 1.4em;
    line-height: 1.6em;
    text-align: justify;
    margin: 0px 15px;
  }

  .parkaudio {
    width: 100%;
  }

  .voxgrid {
    grid-template-columns: 1fr 1fr;
  }

  .person audio {
    background-color: black;  
  }

  .modal {
    width: 97%;
    margin: 10% auto;
  }

  .sidebyside {
    display: block;
  }

  .sidecaption {
    font-size: 1em;
    padding: 10px 20px;
  }

  .googlemap {
    width: 80%;
    height: 700px;
  }

  .popvid{
   max-height: 200px;
   border: 1px solid black;
  }

  .popcaption {
    font-size: 12px;
  }

  .cbg {
/*    border: 2px solid blue;*/
    padding: 0px;
  } 

  .cbgtext {
    font-size: 12.9px;
    text-align: center;
    margin-left: -1px;
  }

  .cbgcontainer {
/*    border: 2px solid white;*/
    width: 100%;
  }

  .cbgpic {
    width: 100%;
  }
  .cbgtext {
/*    border: 3px solid red;*/
  }

  .dog  {
    margin-bottom: 100%;
  }

  .youtube {
    position: relative;
  }

  .SHtext {
    font-size: 12.9px;
    text-align: center;
    height: 10px;
    position: absolute;
    bottom: 0;
    margin-left: 10%;
  }

  .experiment {
    margin-top: -30vh;
  }

  .pop {
    font-size: 12.9px;
    text-align: center;
  }

  .sectionhead {
    font-size: 12.9px;
    text-align: center;
  }

  .creditspic {
    width: 180px;
    height: 180px;
  }

  .creditscaption {
    font-size: 14px;
    margin-top: 45px;
    margin: auto;
  }

  .creditscaption h3 {
    margin-bottom: -15px;
  }

}