/* 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: 'EB Garamond', serif;
  overflow-x: hidden; 
}

h1, .pullquote{
  font-family: 'Special Elite', cursive;
}

h2, h3, .pullquote {
  font-family: 'Raleway', 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.9;
}

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

.title1 h1 {
  font-size: 5.1em;
  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 h1 {
  font-size: 4.7em;
  margin-bottom: -4px;
}

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

.title2 h3 {
  margin-top: 10%;
  margin-bottom: 0;
  font-size: 1.1em;
  font-style: italic;
}

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

.maintext {
  max-width: 780px;
  margin: auto;
  color: darkslategray;
  font-size: 1.2em;
  line-height: 1.7em;
  text-align: justify;
/*  font-size: 1.4em;
  font-weight: 300;
  line-height: 1.8em*/;
  padding: 1%;
}

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

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

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

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

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

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

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


/*THIS IS THE PHOTOGRID STYLING*/


#lightslide li {
  background-color: red;
}

.photoslide {
  position: relative;
}

.slidecaption {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  background-color: rgba(0,0,0,0.7);
  color: white;
  padding: 5px;
  padding-left: 20px;
  padding-right: 20px;
}


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

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

.threesixty {
  max-width: 960px;
  margin: auto;
}


.googlemap {
  overflow:hidden;
  padding-bottom:35%;
  position:relative;
  height:0;
  width: 50%;
  margin: auto;
}

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

.mapcaption{
  max-width: 830px;
  margin: auto;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 10px;
}

.videocaption{
  padding-left: 7px;
  padding-right: 7px;
}

.threecaption{
   padding-left: 25px;
  padding-right: 20px;
}

.youtube {
  max-width: 853px;
  margin: auto;
  padding: 15px;
}

.youtube video{
  width: 100%;
}

.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 {
  width: 500px;
  margin: 20px;
  display: block;
}

.audiovoxpop {
  max-width: 760px;
  margin: auto;
  padding-left: 25px;
  padding-right: 25px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.audiovoxpop audio {
  width: 100%;
}

.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: black;
  color: white;
  padding: 1%;
  text-align: right;
  padding-right: 20px;
}



/*media query for responsive design */

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

.googlemap {
    width: 100%;
    padding-bottom: 100%;
  }
}

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

  .title1 {
    top: 10%;
  }

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

.title1 h2 {
  font-size: 1.6em;
}

.title1 h3 {
  margin-top: 10%;
  margin-bottom: 0;
  font-size: 1.1em;
  font-style: italic;
}
.googlemap {
    width: 100%;
    padding-bottom: 100%;
  }
}

@media only screen and (max-width: 1096px) and (min-width: 1076px) {
  .googlemap {
      width: 100%;
      padding-bottom: 100%;
    }
}

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


  .title1 {
    top: 5%;
  }

  .title1 h1 {
  font-size: 3.7em;
  /*margin-bottom: -4px;*/
}

.title1 h2 {
  font-size: 1.4em;
}

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

.slidecaption{
  display: none;
}
.googlemap {
    width: 100%;
    padding-bottom: 100%;
  }
}



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

  .pullquote {
    display: none;
  }
.googlemap {
    width: 100%;
    padding-bottom: 100%;
  }

  .title1 {
    top: 0%;
  }

  .title1 h1 {
    font-size: 3em;
    /*margin-bottom: -4px;*/
  }

  .title1 h3 {
    margin-top:5%;
    margin-bottom: 0;
    font-size: 1.0em;
    font-style: italic;
  }
}


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

  .title1 {
    top: 1%;
  }

  .title1 h1 {
    margin-top: 12%;
    font-size: 2.4em;
  }

  .title1 h2 {
    display: none;
  }

  .title1 h3 {
    margin-top: 3%;
    font-size: 0.7em;
  }

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

  .googlemap {
    width: 100%;
    padding-bottom: 100%;
  }

  .iframe {
      max-width: 640px;
  }
/*
  .maintext {
  font-size: 0.9em;
  max-width: 640px;
  margin: auto; */

  .photocaption{
    padding-left: 3%;
  }
}


@media only screen and (max-width: 375px) {
.title1 h1 {
    margin-top: 5%;
    font-size: 2.4em;
  }

  .googlemap {
    width: 100%;
    padding-bottom: 100%;
  }
}

@media only screen and (max-width: 556px) and (min-width: 259px){

  .googlemap {
    width: 100%;
    padding-bottom: 100%;
  }
}