/* 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/coverphoto1.jpg");
  /*height: 90%;*/
}






.title h1 {
  /* color: blanchedalmond;*/
}

.title h2 {
  /*  color: navajowhite;*/
}

.title0 h1 {
  /*color: darkslategray;*/
}

.title0 h2 {
  /*color: darkslategray; */
}

section.maintext {
  /* background-image: url("../img/griffith.jpg"); */
}

    .divider.bgimg1 {
       background-image: url("../img/ad2.jpg"); 
    }

section.mainvideo {
  /* background-image: url("../img/griffith.jpg");*/
}

    .divider.bgimg2 {
      background-image: url("../img/abcbaby copy.jpg"); 
    }

section.mainaudio {
  /* background-image: url("../img/griffith.jpg");*/
}

    .divider.bgimg3 {
    /*  background-image: url("../img/coverphoto.jpg"); */
    }
    
section.sidebar {
  /* background-image: url("../img/griffith.jpg");*/
}

    .divider.bgimg4 {
      /*  background-image: url("../img/griffith.jpg"); */
    }

section.vr360video {
  /* background-image: url("../img/griffith.jpg"); */
}

    .divider.bgimg5 {
      background-image: url("../img/abcbaby2.jpg"); 
    }

section.slideshow {
  /* background-image: url("../img/griffith.jpg"); */
}

    .divider.bgimg6 {
      /*  background-image: url("../img/coverphoto.jpg"); */
    }

section.gmapmain {
  /* background-image: url("../img/griffith.jpg"); */
}

    .divider.bgimg7 {
      /*  background-image: url("../img/griffith.jpg"); */
    }

section.knightlab {
  /* background-image: url("../img/griffith.jpg"); */
}

    .divider.bgimg8 {
      /*  background-image: url("../img/beach.jpg"); */
    }

section.socialmedia {
  /* background-image: url("../img/griffith.jpg"); */
}

    .divider.bgimg9 {
      /*  background-image: url("../img/coverphoto.jpg"); */
    }

section.dataviz {
  /* background-image: url("../img/griffith.jpg"); */
}

section.footer {
  /* background-image: url("../img/griffith.jpg"); */
}

.gallery{
   width:430px;
   border:1px #F1948A ;
   overflow:hidden;
   padding:13px;
   margin:0px auto;

}

.gallery img{
   width:100%;




}
.audio{
  float:left;
  position:relative;
  border:10px solid white;
  margin-left:auto;
  margin-right:auto;
}

.words{
  padding:10px;
  color:white;
  background: rgba(50,100,94,0.5);
  width:390px;
  height:94px;
  bottom:9px;
  left:0px;
  position: absolute;
  display:none;


}

.audio img{
  border:solid 10px orange;
}



.text{
  color:#ddd;
  background-color: rgba(24,57,32,0.75);
  padding: 10px;
  width: 331px;
  height: 180px;
  top: -208px;
  left: 0px;
  position: relative;

  display: none;
}

.abc img{
  width: 1300px;
  height: 800px;
  border:10px solid pink;
}

.abc{
   width: 70%;
   padding:30px;
}

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

.popup{
   position: absolute;
   top: 30%;
   left: 30%;
   width: 400px;
   height:244px;
   border: 6px solid pink;
   background-color: lightsalmon;
   padding: 20px;
}

.content{
  margin: 0 auto;
  padding: 20px;
}