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

/* The Modal (background) */
.modal{
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
    /*background: url("../img/600x600bf.jpg") no-repeat center center fixed;*/
    /*how the bloody hell do I put an image at the top of my modal!?!?!?!*/
    background: white;
    margin: 3% auto;/* 15% from the top and centered */
    padding: 10px;
    border: 1px solid #fff;
    width: 80%; /* Could be more or less, depending on screen size */
    background-size: cover;
    overflow-y: auto;
    height: 80%;
}

.modal-content img{
  margin-top: 15px;
  margin-bottom: 20px;
  margin-right: 10px;
  margin-left: 10px;
  width: 40%;
  margin: center;
  float: left;
 /* border: 1px solid black;*/
}

.modal-content h3{
  margin-left;
  color: black;
}

.modal-content p{
  color: black;
  text-decoration; outline;
}

/*size of box that holds image*/
.imagewithcaption {
  margin: auto;
  position: relative;
  width: 80%;
}

.imagewithcaption img{
  width: 100%;
}


.modal02{
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content02 img{
  margin-top: 10px;
  margin-bottom: 20px;
  width: 40%;
  margin: center;
  float: left;
  /*border: 1px solid black;*/
}

.sptwo img{
  margin-top: 10px;
  margin-bottom: 20px;
  width: 40%;
  margin: center;
  float: right;
}
.spfour{
  margin: auto;
  width: 50%;
}
.spfour img{
  width: 110%;
}
/*.spfour p{
  width: 100%;
}*/
.smpsidebartwo img{
  float: right;
  padding-right: 10px;
}

.modal-content02 p {
  color: black;
  text-decoration; outline;
}

/* The Modal (background) */
.modal03{
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content03 {
    /*background: url("../img/600x600bf.jpg") no-repeat center center fixed;*/
    /*how the bloody hell do I put an image at the top of my modal!?!?!?!*/
    background: white;
    margin: 3% auto;/* 15% from the top and centered */
    padding: 10px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    background-size: cover;
    overflow-y: auto;
    height: 80%;
}

.modal-content03 img{
  margin-top: 15px;
  margin-bottom: 20px;
  width: 40%;
  margin: center;
  float: left;
 /* border: 1px solid black;*/
}



.modal-content03 h3{
  margin-left;
  color: black;
}

.modal-content03 p{
  color: black;
  text-decoration; outline;
}

.videosizer{
  margin: auto;
  position: relative;
  width: 70%;

  /*font-style: italic;*/
}

.videosizer video{
  width: 100%;
}
.videosizer p{
  margin-top: -15px;
  color: black;
}

.videosizer02{
  margin: auto;
  padding-left: 10px;
/*  float: right;*/
  position: relative;
  width: 50%;
}

.videosizer02 video{
  width: 100%;
}
.videosizer02 p{
  margin-top: -15px;
  color: black;
}

.modalcaption{
  float: left;
  padding-top: 10px;
  color: black;
}
.modalcaption p{
  float: left;
  margin: auto;
}


/*#caption02:hover{
  text-decoration: underline;
  background-color: #dbdbdb;
}*/

.bigquote p{
  font-family: Georgia;
  text-transform: uppercase;
  font-size: 2.1em;
  line-height: 1.2;
  color: #7f7f7f;

  text-align: center;
  font-style: bold;
}

/*Jacked code that overlays the cool effect on the image when you hover over it! (applies to modal 1)*/
#hovereffect {
  cursor:pointer;
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}

#hovereffect .overlay {
  cursor:pointer;
  position: absolute;
  overflow: hidden;
  width: 80%;
  height: 80%;
  left: 10%;
  top: 10%;
  border-bottom: 1px solid #FFF;
  border-top: 1px solid #FFF;
  transition: opacity 0.35s, transform 0.35s;
  transform: scale(0,1);
}

#hovereffect/*:hover*/ .overlay {
  cursor:pointer;
  opacity: 1;
  filter: alpha(opacity=100);
  transform: scale(1);
}

#hovereffect img {
  cursor:pointer;
  display: block;
  position: relative;
  transition: all 0.25s;
}

#hovereffect:hover img {
  cursor:pointer;
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.6" /><feFuncG type="linear" slope="0.6" /><feFuncB type="linear" slope="0.6" /></feComponentTransfer></filter></svg>#filter');
  filter: brightness(0.6);
}

#hovereffect h2 {
  cursor:pointer;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  font-size: 17px;
  background-color: transparent;
  color: #FFF;
  padding: 1em 0;
  opacity: 0;
  filter: alpha(opacity=0);
  transition: opacity 0.25s, transform 0.25s;
  transform: translate3d(0,-100%,0);
}

/*#hovereffect a, #hovereffect p {
  color: #FFF;
  padding: 1em 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,100%,0);
  transform: translate3d(0,100%,0);
}*/

#hovereffect/*:hover*/ a, #hovereffect:hover p, #hovereffect/*:hover*/ h2 {
  cursor:pointer;
  text-shadow: 2px 2px 4px #000000;
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
/*End jacked code*/


/*Jacked code that overlays the cool effect on the image when you hover over it! (APPLIES TO MODAL 02)*/
#hovereffect02 {
  cursor:pointer;
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}

#hovereffect02 .overlay02 {
  position: absolute;
  overflow: hidden;
  width: 80%;
  height: 80%;
  left: 10%;
  top: 10%;
  border-bottom: 1px solid #FFF;
  border-top: 1px solid #FFF;
  transition: opacity 0.35s, transform 0.35s;
  transform: scale(0,1);
}

#hovereffect02/*:hover*/ .overlay02 {
  opacity: 1;
  filter: alpha(opacity=100);
  transform: scale(1);
}

#hovereffect02 img {
  cursor:pointer;
  display: block;
  position: relative;
  transition: all 0.25s;
}

#hovereffect02:hover img {
  cursor:pointer;
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.6" /><feFuncG type="linear" slope="0.6" /><feFuncB type="linear" slope="0.6" /></feComponentTransfer></filter></svg>#filter');
  filter: brightness(0.6);
}

#hovereffect02 h2 {
  cursor:pointer;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  font-size: 17px;
  background-color: transparent;
  color: #FFF;
  padding: 1em 0;
  opacity: 0;
  filter: alpha(opacity=0);
  transition: opacity 0.25s, transform 0.25s;
  transform: translate3d(0,-100%,0);
}

/*#hovereffect a, #hovereffect p {
  color: #FFF;
  padding: 1em 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,100%,0);
  transform: translate3d(0,100%,0);
}*/

#hovereffect02/*:hover*/ a, #hovereffect02/*:hover*/ p, #hovereffect02/*:hover*/ h2 {
  cursor:pointer;
   text-shadow: 2px 2px 4px #000000;
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
/*End jacked code*/

.modal-content02 {
    /*background: url("../img/600x600bf.jpg") no-repeat center center fixed;*/
    /*how the bloody hell do I put an image at the top of my modal!?!?!?!*/
    background: white;
    margin: 3% auto;/* 15% from the top and centered */
    padding: 10px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
    background-size: cover;
    overflow-y: auto;
    height: 80%;

}

/*Jacked code that overlays the cool effect on the image when you hover over it! (APPLIES TO MODAL 02)*/
#hovereffect03 {
  cursor:pointer;
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}

#hovereffect03 .overlay03 {
  cursor:pointer;
  position: absolute;
  overflow: hidden;
  width: 80%;
  height: 80%;
  left: 10%;
  top: 10%;
  border-bottom: 1px solid #FFF;
  border-top: 1px solid #FFF;
  transition: opacity 0.35s, transform 0.35s;
  transform: scale(0,1);
}

#hovereffect03/*:hover*/ .overlay03 {
  cursor:pointer;
  opacity: 1;
  filter: alpha(opacity=100);
  transform: scale(1);
}

#hovereffect03 img {
  cursor:pointer;
  display: block;
  position: relative;
  transition: all 0.25s;
}

#hovereffect03:hover img {
  cursor:pointer;
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="0.6" /><feFuncG type="linear" slope="0.6" /><feFuncB type="linear" slope="0.6" /></feComponentTransfer></filter></svg>#filter');
  filter: brightness(0.6);
  cursor:pointer;
}

#hovereffect03 h2 {
  cursor:pointer;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  font-size: 17px;
  background-color: transparent;
  color: #FFF;
  padding: 1em 0;
  opacity: 0;
  filter: alpha(opacity=0);
  transition: opacity 0.25s, transform 0.25s;
  transform: translate3d(0,-100%,0);
}

/*#hovereffect a, #hovereffect p {
  color: #FFF;
  padding: 1em 0;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0,100%,0);
  transform: translate3d(0,100%,0);
}*/

#hovereffect03:hover a, #hovereffect03:hover p, #hovereffect03/*:hover*/ h2 {
  cursor:pointer;
  opacity: 1;
   text-shadow: 2px 2px 4px #000000;
  filter: alpha(opacity=100);
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

/* The Close Button */
.close {

    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }

/* The Close Button */
.close02 {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close02:hover,
.close02:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }
/* The Close Button */
.close03 {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close03:hover,
.close03:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }


/*.maintext{
  background: url("../media/600x600bf.jpg") no-repeat center center fixed;
  background-size: cover;
}
*/

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

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

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

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/karthree.png"); 
    }

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

@media only screen and (max-width: 768px) {
  /* .title h2 {
      display: none;
    }*/
    header {
      height: 80%;
    }
}