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

*/
body, html {
  height: 100%;
  margin: 0;
  font: 400 18px/1.8 "Georgia", serif;
  color: #777;
}
iframe {
    min-width: 100%; min-height: 90%;
}

.byline {
  text-align: center;
  margin:auto;
  color: black;
  padding: 11px;
  font-size: 14px;
  letter-spacing: 2px;
/*  text-transform: uppercase;*/
}
.subtitle{
  text-align: center;
  margin:auto;
  color: black;
  padding: 11px;
  font-size: 15px;
/*  letter-spacing: 3px;*/
}

section {
  min-height: 400px;
  background-color: gainsboro;
  position: relative;
  padding: 30px 30px;
  display: -webkit-flex;
  display: flex;
}

.text{
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

section.text {
  position: relative;
  color: #777;
  background-color: white;
  text-align: center;
  text-align: justify;
  display: block; /* removes display: flex */;
  padding-bottom:40px;
}

.text p {
  line-height: 1.7em;
  padding: 0% 23%;
}


.cover{
  height:100%;
  width:100%;
  position:relativ10;
}

.cover img{
  width:100%;
  cursor:pointer;
}

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

#trashsorters{
  position:relative;
}

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

.sidebar h2{
  text-align: center;
  margin:auto;
  color: white;
  padding:20%;
  text-transform: uppercase;
}

#byline2{
  padding:5px;
}


 #interviews {
     height: 70%;
   }

.bigpic {
 width:65%;
 margin: auto;
}

#trashsorters{
  cursor:pointer;
}

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

.infogram img{
  width:100%;
}

.infogram .photocredit{
     line-height: 1.7em;
    font-style: italic;
    left: 0;
    bottom: -1.2em;
    font-size: .7em;
    color: #333;
}

.bigpic img {
  width:100%;
  margin:auto;
}


.bigpic .description {
/*    line-height: 1.7em;*/
    font-style: italic;
    left: 0;
/*    bottom: -1.2em;*/
/*    font-size: .9em;*/
    color: #333;
}

.bigpic .photocredit {
   line-height: 1.7em;
    font-style: italic;
    left: 0;
    bottom: -1.2em;
    font-size: .7em;
    color: #333;
}

.teaser {
  border-top: 2px solid grey; 
  border-left: 2px solid grey; 
  width: 350px;
  height: auto;
  margin: 30px;
  padding: 20px;
}

.teaser img {
  width: 100%;
  height: 1000%;
  border: 1px solid #333;
}

 #left img:hover {
   transform:scale(1.5);
   box-shadow: 2px 2px 2px 1px black;
}

#usexport{
  cursor:pointer;
}

.teaser .caption {
/*    line-height: 1.7em;*/
    font-style: italic;
    left: 0;
/*    bottom: -1.2em;
    font-size: .9em;*/
    color: #333;
}

.tright {
  float: right;
}

.tleft {
  float: left;
}

.teaser .photocredit {
   line-height: 1.7em;
    font-style: italic;
    left: 0;
    bottom: -1.2em;
    font-size: .7em;
    color: #333;
}

section.footer {
  background-color: black;
  color: blanchedalmond;
  padding: 10px 20px;
  min-height: 30px;
  text-align: left;
  font-size: 0.8em;
}

.overlay{
   background-color:rgba(0,0,0,0.7);
   width:100%;
   height:100%;
   position:fixed;
   top:0;
   left:0;
   display:none;
}


.modal {
    height: 100%;
    width: 70%;
    background-color:white;
    margin:auto;
    overflow-y: auto;
}

.modal.open {
   display: block;
}

.header{
    height: 5%;
    padding:5%;
    padding-bottom:0px;
}

.header h1 {
  text-align: center;
  margin:auto;
  color: black;
  padding: 11px;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.content{
    width: 100%;
    padding:10px;
}

#footer{
  height:100px;
}

   h3{
    text-align:center;
    font-size:24px;
   }

   #sidebarclick{
    text-align: center
   }



@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait) { 

    .tright, .tleft {
      float: none;
      width: 90%;
    }

    }

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

    section.text p {
      padding: 1% 11%;
   }
   

    .cover{
      height:60%;
    }

    .covercaption{
      height:13%;
      top:0px;
      display:none;
    }

    .covercaption p{
      font-size:15px;
    }

}


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

   .subtitle{
    font-size:12px;
    text-align: left;
    padding-left:10%;
   }

   h3{
    text-align:center;
    font-size:18px;
   }

   .text p{
    font-size:18px;
   }

    .byline{
      width:95%;
      font-size:9px;
      letter-spacing: 0px
   }

    .cover{
      height:40%;
    }

    .covercaption{
      height:25%;
      top:0px;
      display:none;
    }

    .covercaption p{
      font-size:12px;
    }

   #left img:hover {
      transform:scale(1);
    }

    section {
      display: block;
      padding: 1%;
    }


    section.text {
      padding-bottom: 14%;
    }

    section.text p {
      line-height: 1.3em;
      padding: 1% 7%;
      text-align: left;
    }


    .teaser {
      width: 77%;
      margin: 7%;

    }

    .tright, .tleft {
      float: none;

    }

    .header{
      height: 12%;
      padding:5%;
    }

    section.footer p {
      font-size: 14px;
    }

    .videos iframe{
      width:90%;
      height:270px;
    }

    .audio{
/*      margin:auto;*/
      width:100%;
    }

}