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

*/


#date{
 font-size: 15px;
 font-style: italic;
}

#problem1 {
  width: 600px;
  position: relative;

}

#problem1 img {
  width: 600px;
  border: 1px solid black;
}

.add {
  display: none;
  width: 580px;
  padding: 10px;
  color: white;
  text-align: left;
  line-height: 20px;
  position: absolute;
  left: 0px;
  bottom: 10px;
  background-color:rgba(47,79,79,.7);
}

#resume {
  position: relative;
  width: 250px;
  float: left;
  font-size: 2px;
}

.little {
  width: 250px;
  transition: all 2s ease; 
  border: 1px solid black;
}

.big {
   width: 500px;
   position: relative;
   z-index: 5;
}

#gallery {
  overflow: hidden;
  padding-left: 31%;
}

#gallery .audiopic {
  float: left;
  width: 200px;
  position: relative;
  margin-right: 30px;

}

.audiopic img {
  width: 200px;
  height: 200px;
  border: 1px solid black;
}


.add2 {
   font-size: 9pt;
   font-weight: bold;
   position: absolute;
   top: 130px;
   border: 2px solid rgba(107,117,120);
   background-color: rgba(107,117,120,.6);
   color: white;
   padding: 10px;
   width: 182px;
   height: 60px;
   border-left: 8px;   
   left: 0px;
   text-align: left;
   display: none;

}




#problem3 {
  width: 700px;
  overflow: hidden; 
  padding-left: 60px;
}

#problem3 .photo {
  padding: 15px;
  float: left;
  margin: 5px;
}

#problem3 .photo img {
  border: 2px solid white;
  width: 170px;
}

#bigphoto {
  border: 1px solid silver;
  background-color: white;
  padding: 20px;
  width: 543px;
  margin: 20px 0px 40px 0px;  
}

#bigphoto img {
  width: 530px;
}



header {
background-image: url("../img/header.jpg");
width: 100%;
height: 100%;

}

.title h1 {

}

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

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

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



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

}

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

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

.infogram-embed {
  width: 600px;
}

.youtube content{
  width: 300px;
}