/* 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/p01.jpg");
    height: 500px;
}

.title h1 {
  /* color: blanchedalmond;*/
  margin-top: 50px;
  margin-bottom: 80px;
}

.title h2 {
  /*  color: navajowhite;*/
     margin-top: -4%;
}

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

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

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

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

section.mainvideo {
 
}

    .divider.bgimg2 {
       background-image: url("../img/p02.JPG");
    }

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

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

    .divider.bgimg4 {
      background-image: url("../img/p13.JPG"); 
    }

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

    .divider.bgimg5 {
      /* background-image: url("../img/beach.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"); */
}

h4 {
  text-align: center;
  text-decoration: underline;
}


.survey {
  margin-left: 30%;

}





#problem1.teaser {
  height: 30px; /* leave in template */
  float: right;
}

#p1_btn { /* leave in template */
  padding: 5px;
  background-color: peachpuff;
  margin-top: 400px;
  margin-left: 400px;
  margin-right: -200px;
}




#problem6 {
   overflow: hidden;
}

#problem6 .thumb {
   float: left;
   width: 200px;
   padding: 10px;
   margin-left: 10px;
  
}

#problem6 img {
   width: 80%;
   height: 80%;
 

}

#problem6 .words {
   position: absolute;
   top: 260px;
   border-top: 2px solid olive;
   background-color: rgba(128,128,128,0.8);
   color: blanchedalmond;
   padding: 20px;
   width: 125px;
   height: 110px;
   display: none;
   margin-left: 18px;
   text-align: left;
   font-size: 15px;


}



.thumb img {
   width: 200px;
   border: 10px solid peachpuff;
   margin: 10px;

}

.words p{
   margin-top: -22px;
   margin-right: -10px;
   margin-left: -10px;

}

.thumb caption{
   text-align: center;
   border-left: 10px;
}


.thumb i {
   font-size: 50px;
   color: rgba(169,11,11,1);
   position: absolute;
   margin-top: 40px;
   margin-left: 22px;
}

#navbar {
  width: 100%;
  height: 30px;
  background-color: slategray;
  position: fixed;
  top: 0;
  left:0;
  z-index: 2;
  text-align: center;
  box-shadow: 0px 2px rgba(0,0,0,0.8);

}

#navbar a, #navbar a:visited, #navbar a:hover {
  text-decoration: none;
  color: white;
  background-color: transparent;
  text-shadow: black 0.1em 0.1em 0.2em

}

.title {
  width: 100%;
  padding-left: 10%;
  padding-right: 10%;
}

ul.answers {
  text-align: left;
  margin: auto;
}

.centerquiz1 {
  width: 450px;
  margin: auto;
}

.centerquiz2 {
  width: 450px;
  margin: auto;
}