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

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

}

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

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: 5em;
  margin-bottom: -4px;
}

.title1 h2, h3{
  font-style: italic;
}

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

.maintext {
  max-width: 640px;
  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: 50%;
  font-size: 1em;
  line-height: 1em;
  font-style: italic;
  text-align: left;
}

.names {
  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: #FFC478;
}

.sectionhead2 {
  text-align: center;
  color: #616A6B; 
}

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

.bigphoto1 {
  position: relative; 
  height: 100%; 
}

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

.bigphoto1 video {
  object-fit: cover; 
  width: 100%; 
}

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

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

.gridpic {
  position: relative;
}

.gridpic .photocaption {
  display: none;
}

.insta {
  padding-left: 140px; 
}

/*slideshow section*/

.slideshowtext {
  width: 20%;
}

.slideshowtext.textbox {
  background: coral; 
}

.slideshowtext.textbox p {
  text-align: left; 
  padding: 0px;
  padding-left: 15px; 
}

.slideshowcontent {
  width: 77%; 
  height: 100%;
  background-color: white;
}

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

.cycle-slideshow img{
  height: auto;
  width: 100%;
}

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

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

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

.youtube {
  max-width: 700px;
  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.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 {
  float: left;
  padding-right: 20px;
  margin-left: -40px;
  text-align: left; 
  width: 70%
}

/*audio rollover and stories styling*/

.artistsvo, .photocascade {
   color: white; 
   width: 70%;
   margin: 20px auto;
}

.rowone, .rowtwo {
   display: flex; 
}

.artist, .piece {
   width: 33%;
   position: relative;
}

.piece {
  flex: 33%;
  max-width: 33%;
}

.piece3 {
  width: 50%;
  position: relative;
  flex: 33%;
  max-width: 50%; 
}

.artist img, .piece img, .piece3 img {
   width: 100%; 
   border: 2px solid white;
}

.piece img, .piece3 img{
  vertical-align: middle;
}

.name {
  position: absolute;
  bottom: 1px; 
  left: 2px; 
  width: 100%; 
  height: 20%; 
  padding: 0px; 
  background-color: rgba(0,0,0,0.6);
  text-align: center; 
  padding-top: 10px; 
  font-style: italic;
  font-size: 1.3em;
  display: none; 
}

.name p {
   padding: 0px 5px 0px 5px; 
}

.creditaud {
  text-align: center;
  font-size: 0.6em;
}
/*gallery of work extra details*/

.piece audio, .piece2 audio, .piece3 audio {
  width: 100%;
}

.begins {
   display: flex; 
   flex-wrap: wrap;
   height: 20%;
}

.last {
  display: flex;
  flex-wrap: wrap; 
  height: 40%;
}

.piece2 {
  height: 20%; 
}

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

.headsup {
  width: 25%;
  margin-top: 2.5%;
  border-radius: 12px;
  padding:  2%;
  position: absolute;
  background-color: rgba(255,51,0,0.8);
  left: 120%;
  color: snow;
  font-size: 120%;
  line-height: 140%; 
  }

.overlay {
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0;
   right: 0;
   background-color: rgba(255, 196, 120, 0.6);
   display: none;
}

.close {
   width: 4em;
   position: absolute;
   top: -40px;
   right: -40px;
   cursor: pointer;
   border-radius: 50%;
   border: 5px solid black;
   background-color: black;
}

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

.close:hover {
   border: 5px solid firebrick;
   transform: rotate(3deg);
}  

.modal {
   width: 70%;
   margin: auto;
   padding-top: 6%;
   display: none;
 }

.info {
   background-color: snow;
   min-height: 400px;
   padding: 20px;
   position: relative;
}

/*media query for responsive design */

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

  .name {
    height: 100%; 
  }

  .name p {
   padding: 50px 5px 50px 5px; 
  }

}

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

  .piece {
    flex: 50%; 
    max-width: 50%;
  }

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

  .title h2, h3 {
    font-size: 1em; 
  }

}

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

  .pullquote {
    display: none;
  }

  .piece, .piece3 {
    flex: 100%; 
    max-width: 100%;
  }

}

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

  .title1 {
    top: 1%;
  }

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

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

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

  .name  {
    height: 100%;
  }

  .name p {
    padding: 0px 5px 0px 5px;
  }

  .insta {
    padding-left: 10px; 
    width: 100%; 
  }

  .infographic {
    width: 100%; 
    padding-left: 10px; 
  }


}