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

	This is from W3Schools.com "How to create a parallax scrolling effect": 
	https://www.w3schools.com/howto/howto_css_parallax.asp

*/

header {
  background-image: url("../img/charleston.jpg");
  background-attachment: fixed;
  height: 580px;

} 

.title0 h1{
  color: dimgray;
}
}

#gallery {
  position: relative;
}


.thumb {
   position: relative;
   padding: 20px;
   background-color: whitesmoke;
   border: 4px solid red;
   float: left;
   height: 200px;
   width: 200px;
   cursor: crosshair;
   top: 330px;
   left: 100px;
   margin-right: 70px;
} 
.thumb img {
  height: 200px;
  width: 200px;
  border: 1px solid dodgerblue;
}

.caption1{ 
   position: absolute; 
   padding-left:10px;
   top: 150px; 
   left: -4px; 
   width: 234px;
   color: white;
   border: 2px solid red;
   background-color: rgba(50,107,200,0.5);
   font-weight: lighter;
   display:none;
   line-height: 1;
   
}   
.caption2{ 
   position: absolute; 
   padding-left: 10px;
   padding-right: 10px;
   top: 165px; 
   left: -3px; 
   width: 223px;
   color: white;
   border: 2px solid red;
   background-color: rgba(50,107,200,0.5);
   font-weight: lighter;
   display:none;
   line-height: 1;
   
}  
.caption3{ 
   position: absolute; 
   padding-left: 10px;
   padding-right: 10px;
   top: 165px; 
   left: -3px; 
   width: 223px;
   color: white;
   border: 2px solid red;
   background-color: rgba(50,107,200,0.5);
   font-weight: lighter;
   display:none;
   line-height: 1;
   
   
}  

.audiorollover {
  height: 600px;
  background-color: ghostwhite;
  text-align:center;
  padding-left: 120px;

}

.title h1 {
   color: dodgerblue;


}

.tleft img {
  border: 6px solid red;
  position: relative;
  cursor: crosshair;

}

.tright img {
  border: 6px solid red;
  position: relative;
  height: 450px;
  width: 300px;
}

#kylepic {
  position: relative;
}
.signing {
   background-color: rgba(50,107,200,0.5);
   position: absolute;
   top: 552px;
   width: 350px;
   height: 80px;
   display: none;
   border: 6px solid dodgerblue;

}

.hover p{
  position: relative;
  color: dodgerblue;
  top: -20px;
  margin-left:-80px;
  font-size: 13px;
  font-weight: bolder;
  margin-bottom: -15px;

}

#sign {
  position: relative;

}
.secondcaption {
   background-color: rgba(50,107,200,0.5);
   position: absolute;
   top: 476px;
   width: 300px;
   height: 70px;
   border: 6px solid dodgerblue;
   display: none;

  } 

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

   .modal {
      position:absolute;
      top:20%;
      left:40%;
      border:8px solid red;
      background-color:dodgerblue;
      width:400px;
      height:250px;
      padding: 10px;
      border-radius: 14px;
      position: fixed;

   }   

.piktochart img{
  width: 700px;
  margin-left: 300px;

}
#p1_btn { 
  padding: 5px;
  background-color: dodgerblue;
  cursor: pointer;
  border: 3px solid black;
  margin-left: 50px;
  margin-top: 50px;
}

.close {
   position:absolute;
   top:-10px;
   right:-10px;
   border:2px solid black;
   padding: 7px;
   background-color:gray;
   color:black;
   cursor: pointer;

}


.content {
   background-color:white;
   padding:10px;
   width:94%;
   height:92%;
   color: dimgray;
}



.signing h3 {
  color: white;
  font-size: small;
}

.secondcaption h3 {
  color: white;
  font-size: small;
}

.divider.bgimg2 {
      background-image: url("../img/staten.jpg"); 
      background-attachment: fixed;
      height: 550px;
    }

.divider.bgimg4 {
      background-image: url("../img/florida.jpg"); 
      height:500px;
    }


}
section.footer {
  top:00px;
}

.gallery {
  background-color: whitesmoke;
}



#hello {
  padding-left: 100px;
  font-family: "times new roman", times;
  font-weight: bold;
  color: dimgray;
}

#hello h1{
  color: dodgerblue;
  font-weight: bold;
  margin-left: 250px;

}

#hello h3 {
  width: 650px;
  margin-left: 250px;
  font-weight: normal;
  font-size: 16px;
}
#photos {
  width: 650px;
  padding: 3px;
  overflow: hidden;
}

.tnail {
  position: relative;
  float: left;
  border: 2px solid dimgray;
  background-color: red; 
  margin-bottom: 100px;
  margin-right: 5px;
  margin-left: 40px;
  padding: 2px;
  height: 150px;
  width: 150px;
}

.tnail img {
  border: 2px solid dimgray;
  height: 170px;
  width: 170px;
}

.tnail p {
  position: relative;
  text-align: center;
  font-weight: normal;
  font-family: 'times', lighter;
  font-size: 16px;
  top:-28px;
  line-height: 1;
  width: 150px;
 
}

.target {
  position: absolute;
  top: 450px;
  margin-left:685px;
  border: 6px solid dodgerblue;
  background-color:seashell;
  padding: 10px;
  width: 350px;
  height: 400px;
  line-height: 1;

}
 
.target img {
   border: 2px solid dodgerblue;
   height: 400px;
   width:350px;
}

.caption4 {
   position: absolute; 
   width: 172px;
   padding-top:15px;
   color: black;
   border: 2px solid red;
   background-color: rgba(50,107,200,0.5);
   font-weight: lighter;
   display:none;
   line-height: 1;
   height: 40px;
   top: 175px;
   padding-left:2px;
}
.caption5 {
  position: absolute; 
   width: 172px;
   padding-top:15px;
   color: black;
   border: 2px solid red;
   background-color: rgba(50,107,200,0.5);
   font-weight: lighter;
   display:none;
   line-height: 1;
   height: 55px;
   top: 175px;
   padding-left:2px;
}
.caption6 {
 position: absolute; 
   width: 172px;
   padding-top:15px;
   color: black;
   border: 2px solid red;
   background-color: rgba(50,107,200,0.5);
   font-weight: lighter;
   display:none;
   line-height: 1;
   height: 55px;
   top: 175px;
   padding-left:5px;
}
.caption7 {
   position: absolute; 
   width: 172px;
   padding-top:15px;
   color: black;
   border: 2px solid red;
   background-color: rgba(50,107,200,0.5);
   font-weight: lighter;
   display:none;
   line-height: 1;
   height: 50px;
   top: 175px;
   padding-left:5px;
}
.caption8 {
   position: absolute; 
   width: 172px;
   padding-top:15px;
   color: black;
   border: 2px solid red;
   background-color: rgba(50,107,200,0.5);
   font-weight: lighter;
   display:none;
   line-height: 1;
   height: 55px;
   top: 175px;
   padding-left:2px;
}
.caption9 {
    position: absolute; 
   width: 172px;
   padding-top:15px;
   color: black;
   border: 2px solid red;
   background-color: rgba(50,107,200,0.5);
   font-weight: lighter;
   display:none;
   line-height: 1;
   height: 55px;
   top: 175px;
   padding-left:2px;
}
.caption10 {
    position: absolute; 
   width: 172px;
   padding-top:15px;
   color: black;
   border: 2px solid red;
   background-color: rgba(50,107,200,0.5);
   font-weight: lighter;
   display:none;
   line-height: 1;
   height: 56px;
   top: 175px;
   padding-left:2px;
}
.caption11 {
 position: absolute; 
   width: 172px;
   padding-top:15px;
   color: black;
   border: 2px solid red;
   background-color: rgba(50,107,200,0.5);
   font-weight: lighter;
   display:none;
   line-height: 1;
   height: 55px;
   top: 175px;
   padding-left:2px;
}
.caption12 {
    position: absolute; 
   width: 172px;
   padding-top:15px;
   color: black;
   border: 2px solid red;
   background-color: rgba(50,107,200,0.5);
   font-weight: lighter;
   display:none;
   line-height: 1;
   height: 55px;
   top: 175px;
   padding-left:2px;
}

.infogram-embed img{
  width: 700px;
  margin-left: 300px;

 } 

 .dataviz {
  background-color: ghostwhite;
 }