/* 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: 'Montserrat', sans-serif; 
}

h1 {
  font-family: 'Abril Fatface', sans-serif; /* change to Oswald? */

}

h2 {
  font-family:  'Oswald', 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.8;
}

h1, h2, h3 {
  text-align: center;
  text-transform: uppercase;
}

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

.title1 h1 {
  font-size: 8em;
  margin-bottom: -40px;
  color: white;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 0 2px #000000, 0 0 5px #000000;
}

.title1 h2 {
  font-size: 2em;
  text-transform: uppercase;
  color: white;
  text-shadow: 0 0 2px #000000, 0 0 5px #000000;
}

.title1 h3 {
  margin-top: 10%;
  font-family: sans-serif;
  font-size: 1.0em;
  text-transform: uppercase;
}

.title2 {
  width: 100%;
  color: #2b4a6b;
  text-align: center;
  padding: 1.5% 3%;
}

/* make mobile friendly */
.byline {
  max-width: 850px;
  margin: auto;
  background-color: #7ba3d3;
  border-radius: 100px;
  border-style: solid;
  border-width: 1px;
  border-color: #adadad;
  color: white;
  padding: 3px;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

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

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

.title2 h3 {
  margin-top: -2.5%;
  margin-bottom: 0;
  font-size: 1.1em;
  color: ##3A3937;
  text-transform: uppercase;
  font-size: 14px;
}

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

.maintext {
  max-width: 700px;
  margin: auto;
  color: black;
  font-size: 1.1em;
  line-height: 1.5em;
  text-align: justify;
/*  font-size: 1.4em;
  font-weight: 300;
  line-height: 1.8em*/;
  padding: 0%;
}

.pullquote {
  width: 50%;
  font-size: 1.4em;
  line-height: 1.6em;
  font-style: italic;
  text-align: 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: black;
  text-transform: uppercase;
  font-family: 'Oswald', sans-serif;
}

.bigphoto {
  margin: auto;
  position: relative;
  top: 40%;
  height: 560px;
}

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

.photocaption {
  position: absolute;
  bottom: 0px;
  width: 100%;
  padding:  5px;
  color: white;
  text-transform: uppercase;
  background-color: #609ce1;
}

.audiophotocaption {
  position: static;
}

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

.googlemap {
  overflow:hidden;
  padding-bottom:20%;
  position:relative;
  height:350px;
  max-width: 700px;
  margin: auto;
  margin-bottom: 20px;
}

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

.youtube {
  max-width: 100%;
  margin: auto;
}

.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.8em;
  text-align: right;
  padding-right: 1%;
  padding-top: 0.2%;
}

.voxpop {
  max-width: 1300px;
  background-color: white;
  color: #7ba3d3;
 /* padding-right:  20px;*/
  margin: auto;
}

.voxgrid {
  margin: auto;
  display: grid;
  grid-template-columns: 33.333333% 33.333333% 33.333333%;
}

.person {
  overflow: hidden;
  padding: 20px;
  width: 100%;
  background-color: white;
}

.person audio {
  width: 100%;
}

.persondesc {
  text-align: center;
  width: 100%;
  color: black;
  background-color: white;
}

.headshot {
  position: relative;
  text-align: center;
  width: 100%;
}

.headshot img {
  width: 100%;
}


/*footer*/
section.footer {
  background-color: white;
  color: #7ba3d3;
  padding: 10px 20px;
  min-height: 30px;
  text-align: center;
  font-size: 0.9em;
  text-transform: uppercase;
}

/*audio*/
section.audio {
  background-color: #7ba3d3;
  color: white;
  padding: 5px 20px;
  width: 100%;
  min-height: 30px;
  text-align: center;
  font-size: 1em;
  padding-bottom: 40px;
}

.audiotext {
  max-width: 700px;
  margin: auto;
  color: white;
  font-size: 1.1em;
  line-height: 1.5em;
  text-align: justify;
/*  font-size: 1.4em;
  font-weight: 300;
  line-height: 1.8em*/;
}

/*sources*/
section.sources {
  background-color: #7ba3d3;
  color: white;
  padding: 5px;
  width: 100%;
  min-height: 30px;
  text-align: center;
  font-size: 1em;
  margin-top: -50px;
  padding-bottom: 10px;
}

.sourcestext {
  max-width: 700px;
  margin: auto;
  color: white;
  font-size: 1.1em;
  line-height: 1.5em;
  text-align: justify;
/*  font-size: 1.4em;
  font-weight: 300;
  line-height: 1.8em*/;
}

.column {
  float: left;
  width: 33.33%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.slideything {
  max-width: 1000px;
  margin: auto;
  display: grid;
  grid-template-columns: 50% 50%;
}

.box{
  width: 100%;
  padding: 10px;

}

/*ground-size: cover;
}

.divider.bgimg2 {
      background-image: url("../img/centralheader.png");
  }*/

.playlist {
    width: 45%;
}

.infographics {
  width: 45%;
}

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

  .title1 {
    top: 10%;
  }

  .title1 h1 {
    font-size: 5em;

  }

  .title1 h2 {
    font-size: 2em;

  }
}

/* Responsive layout - when the screen is less than 600px wide, make the three columns stack on top of each other instead of next to each other */
@media only screen and (max-width:  640px) {
  .column {
    width: 100%;
  }

  .title1 {
    top: 0%;
  }

  .title1 h1 {
    font-size: 3.5em;

  }

  .title1 h2 {
    font-size: 1.2em;
    padding: 4%;
  }

.maintext {
  font-size: 1em;
  width: 90%;
}

  .slideything {
    grid-template-columns: 100%;
  }

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

  .playlist {
    max-width: 100%;
    margin: auto;
    width: 100%;
  }



}



/*
.box{
    float:left;
    margin-right:20px;
}
.clear{
    clear:both;
} */

/* HYPERLINKS */
/* unvisited link */
a:link {
  color: #75a0d8;
  text-decoration: none;
}

/* visited link */
a:visited {
  color: #347cdb;
  text-decoration: none;
}

/* mouse over link */
a:hover {
  color: blue;
  text-decoration: underline;
}

/* selected link */
a:active {
  color: blue;
}

/*juxtapose*/
section.slider {
  background-color: #7ba3d3;
  color: white;
  padding: 10px 20px;
  min-height: 30px;
  text-align: center;
  font-size: 1em;
}