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

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

}

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


header video {
  width: 100%;
  /* 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;*/
}

header img {
  display: none;
}

.dronecourtesy {
  float: right;
  padding-right: 2%;
  font-size: .75em;
}
  


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

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

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

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

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

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

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

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

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

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


}
.bigphoto-alm {
  position: relative;
  height: 600px;
}

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

.photocaption-alm {
  bottom: 0px;
  width: 90%;
  font-style: italic;
  padding-left: 2%;
  color: darkslategrey;
 
}

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

.gridpic {
  position: relative;
}

.gridpic img {
  height: 100%;
}

.gridpic .photocaption {
  display: none;
}

.caph3 {
  text-align: center;
}

.cycle-slideshow {
  max-height: 800px;
  margin: auto;
}

.soundcloud {
  width: 900px;
  margin: auto;
}

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

.infographicdiv {
  margin: auto;
   max-width: 640px; 

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

.vertphoto {
  position: relative;
  height: 533px;
  width: 800px;
  margin: auto;
}

.vertphoto img {
  object-fit: cover;
  object-position: 100% 27.5%;
  height: 100%;
}

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

.flo {
  width: 40%;
  margin: auto;
}

.slide {
  padding: 25px;
  width: 65%;
  margin: auto;
}

.slide-cap{
  margin: auto;
  width: 75%;
  text-align: right;
  font-size: .75em;
  padding-bottom: 10px;
}


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



/*media query for responsive design */


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

  .pullquote {
    display: none;
  }


}


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

  header video {
  max-width: 640px;
  /* 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 {
    top: 1%;
  }

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

  .sectionhead h1 {
      line-height: 2.0em;
  }

  .title1 h2 {
    display: none;
  }

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

  .maintext {
  margin: auto;
  color: darkslategray;
  font-size: 1.2em;
  line-height: 1.6em;
  text-align: left;
  padding: 1%;
  max-width: 580px;
  margin: 0px 20px;
  }

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

  .bigphoto img {
    height: 100%;
    width: 95%;
    margin: auto;

  }

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

.bigphoto-alm {
  position: relative;
  height: 300px;
}

.bigphoto-alm img {
  object-fit: cover;
  height: 60%;
  width: 99%;
  object-position: 50% 50%;
  margin: auto;
}

.photocaption-alm {
  bottom: 0px;
  width: 100%;
  padding-left: 2%;
  font-size: .75em;
  color: darkslategrey;
  background-color:white
 
}

.soundcloud {
  width: 95%;
  margin: auto;
}

.vertphoto {
  position: relative;
  height: 50%;
  width: 90%;
  margin: auto;
}

.vertphoto img {
  object-fit: cover;
  object-position: 100% 27.5%;
  height: 100%;
}

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

.cycle-slideshow {
  max-height: 75%;
  max-width: 95%;
  margin: auto;
}

.infographicdiv {
  position: relative;
  margin: auto;
  max-width: 540px;

}

.matt {
  width: 95%;
  margin-left: 2.5%;
}

header video {
  display: none;
}

header img {
  display: block;
}

.two {
  display: none;
}

.alm .maintext {
  padding-top: 3%;
}

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

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

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

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

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