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

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

}

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

.title0 h1 {
  /*color: darkslategray;*/
    font-family: 'Kaushan Script', cursive;
}

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

#prev, #next {
    color: #fff;
    font-size: 12px;
    background-color: #707B7C;
    display: inline-block;
    padding: 1px 12px;
    margin: -5px 62px 0;
    cursor: pointer;
    position: relative;
    left: -429px;
    bottom: -315px;
    border-radius: 50px;
}


h3 {
    font-family: 'Kaushan Script', cursive;
    color: #5D6D7E;
}

/******* OLD PEOPLE *********/

#modal-div {
   margin-top:100px;
}

#popup{
   position: fixed;
   height:400px;
   width: 600px;
   background: gray;
   top:5%;
   left:0;
   right:0;
   margin:0 auto;
   z-index: 100000;
   border-radius: 30px;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
   display: none;
}

#close-popup {
   float: right;
   font-size: 30px;
   font-family: Arial, sans-serif;
   margin:10px 20px;
   cursor:pointer;
   background: white;
   border-radius: 100px;
   padding: 2px 10px;
   line-height: 30px;
}

.thumbnail {
   cursor:pointer;

}

#modal-div img{
    width: 15%;
    margin: -74px 59px 27px 17px;
    position: relative;
    right: -234px;
}


/******* OLD PEOPLE *********/

section.maintext {
  /* background-image: url("../img/Hailin tattooing.gif"); */
}

    .divider.bgimg1 {
      /* background-image: url("../img/Hailin tattooing.gif"); */
    }

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"); */
}