/* 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: 90%;*/
}

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

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

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

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

.subquote {
  font-style: italic;
  color: #5a3002;
/*  font-family: 'Libre Caslon Text', serif;
  font-family: 'Merriweather', serif;
  font-family: 'Libre Baskerville', serif;
  font-family: 'DM Serif Text', serif;*/
  font-family: 'DM Serif Display', serif;
  letter-spacing: 1px;
}

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

    .divider.bgimg1 {
      /* 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"); */
}

.rollover {
  border: 2px solid lightgray;
}

.youtube video {
  width: 100%;
  display: block;
}

.mainvideo {
  min-height: 200px;
}

/* This is for the counter. */

#greeting p {
    font-size: 25px;
    font-family: 'Lato', san-serif;
    font-style: bold;
    letter-spacing: .5px
    text-align: center;
    color: #73574a;
  }

#greeting {
    background-color: #FDF9F7;
    width: 80%;
    /*margin-left: 12.5%;*/
    border-top: 5px solid rosybrown;
    border-bottom: 5px solid rosybrown;
    padding-right: 10%;
    padding-left: 10%;
  }

.overlay {
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0;
   right: 0;
   background-color: #16161D;
   display: none;
   overflow-y: scroll;
}

.modal {
   width: 60%;
   margin: auto;
   padding-top: 6%;
   display: none;
}

.content {
   background-color: black;
   min-height: 400px;
   padding: 40px;
   position: relative;
}

.content img {
   width: 100%;
   display: block;
}


.close {
   width: 4em;
   position: absolute;
   top: -40px;
   right: -40px;
   cursor: pointer;
   border-radius: 50%;
   border: 5px solid black;
   background-color: black;
}

.close img {
   width: 100%;
   display: block;
}

.close:hover {
   border: 5px solid rosybrown;
   transform: rotate(360deg);
   transition: all 2s;
}

.clickme {
  cursor:pointer;
}