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

*/

/*@import url('https://fonts.googleapis.com/css2?family=Lato&family=Montserrat&family=Open+Sans&family=Roboto&display=swap');
*/
* {
  box-sizing: border-box;
}

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

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

h1, h2, h3, .pullquote {
  font-family: 'Times New Roman', sans-serif;

}

header {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: -1;
  background-color: black;
  /*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;
}

.title1 {
  position: absolute;
  width: 100%;
  top: 20%;
  color: white;
  text-align: center;
  padding: 3%;
}

.title1 h1 {
  font-size: 5.0em;
  margin-bottom: -4px;
}

/*.title1 h2 {
  font-size: 2em;
}

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

.title2 {
  width: 100%;
  color: darkslategray;
  text-align: center;
  padding: 3% 10%;
}

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

.title2 h3 {
  margin-top: 10%;
  margin-bottom: 0;
  font-size: 1.1em;
  background-color: papayawhip;
}

.content {
  width: 100%;
  background-color: seashell;
  overflow-x: hidden;
}

.maintext {
  width: 62%;
  margin: auto;
  color: darkslategray;
  font-size: 1.0em;
  line-height: 1.2em;
  text-align: justify;
/*  font-size: 1.4em;
  font-weight: 300;
  line-height: 1.8em*/;
  background-color: snow;
  padding: 3%;
  margin: auto;
  padding: 30px 50px;
  box-shadow: 2px 2px 5px silver;
  margin-top: 20px;
  margin-bottom: 20px;
}



#mapid {
   border: 2px dotted mediumaquamarine;
   width: 100%;
   height: 400px;
}

.mapcap{
   font-size: 1.0em;
  text-align: center;
  margin: auto;
  background-color: honeydew ;

}

.mapcap2{
  font-size: 0.8em;
  text-align: right;
  margin: auto;
  font-style: italic;
  color: black;
}

.static{ /*THIS IS THE AUDIO ONE*/
  background-color: lightgoldenrodyellow;
  margin-bottom: 20px;
  margin-right: 18px;
  width: 320px;
  padding: 10px;
  border: 2px dotted yellow ;
  left: 20px;
/*  position: absolute;*/
  box-shadow: 2px 2px 7px silver;
  float: left;
}

.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;
}

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

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

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

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

.photogrid2{
   width: 100%;
   margin: auto;
   background-color: mintcream;
   overflow: hidden;
   padding: 20px; /*1%*/
   margin-top: 10px;
   box-shadow: 0px 0px 10px grey;
   position: relative;
}

.photo {
   width: 31.333%;
   float: left;
   margin: 1%;
}

.cap{
  font-size: 0.6em;
  text-align: center;
  margin: auto;
  font-style:italic;
}

.caption{
  text-align: right;
  font-size: 0.5em;
}

.photogrid { /*gallery view */
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 5px;
 /* width: 80%;*/
}

.gridpic {
  position: relative;
}

.gridpic .photocaption {
  display: none;
}

/* LIANG PHOTOS */

.bigphoto{
  position: relative;
  width: 100%;
  margin-bottom: 10px;
  border: 2px solid black;
  box-shadow: 2px 2px 5px silver;
}

.caption{
  position: absolute;
  color: white;
  top: 0px;
  left: 0px;
  padding-left: 10px;
  text-align: right;
}

.thumbs{
  width:100%;
  overflow: hidden;
  width: 25%%;
}

.smallphoto{
float: left;
margin: 3.8%;
 border: 2px solid black;
}


/* END OF LIANG PHOTOS*/

/*.photogrid {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 5px;
}

.gridpic {
  position: relative;
}*/

.gridpic .photocaption {
  display: none;
}

.cycle-slideshow {
  max-width: 700px;
  margin: auto;

}



.youtube {
  max-width: 700px;
  margin: auto;
  padding-bottom: 20px;
}

.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%;
}

.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: 25% 25% 25% 25%;
  grid-gap: 5px;
}

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

.person audio {
  width: 100%;
}

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

}

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


footer {
  background-color: papayawhip;
  color: black;
  padding: 1%;
  text-align: left;
}



/*media query for responsive design */


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

  .pullquote {
    display: none;
  }


}


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

  .title1 {
    top: 1%;
  }

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

  .title1 h2 {
    display: none;
  }

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

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

  .voxgrid {
    grid-template-columns: 50% 50%;
  }

  .person audio {
    background-color: black;  
  }


}