/* student.css 
   Project: Life After Sexual Assault
   Authors: Karina Saidi
   Coder: Karina Saidi
   Date: Mar 22, 2017


/* TIMELINE EMBED */
.title-red p {
  text-align: center;
}
#caption {
  font-size: 0.8em;
  padding-top: 2%;
  margin: 0;
  font-weight: lighter;
}

/* AUDIO BOX */

.audio-box img {
  width: 100px;
  height: 100px;
}

.audio-box {
  display: block;
}

/* AUDIO BOX */


.container {
   display: block;
   width: 70%;
   margin-bottom: 50px;
}

/* GALLERY */

img {
   position: absolute;
   width: 100%;
   height: 100%;
   object-fit: fill;
}

.caption {
  padding-top: 12px;
   font: 0.7em Georgia, sans-serif;
   color: white;
   background-color: #E74C3C;
   height: 100%;
   width: 100%;
   position: absolute;
   bottom: -11px; 
   display: none;
}

.gallery {
    margin: 10px;
    cursor: pointer;
    text-align: center;
    /* width: 182px; */
    /* height: 118px; */
    position: relative;
    overflow: hidden;
    background-color: rgb(238, 238, 238);;
    border: 1px solid rgb(238, 238, 238);;
}

.gallery .entry {
  color: black;
  font-size: 0.8em;
  text-align: center;
  margin: 1% 0;
  line-height: 1.2;
  padding: 5px;
}

.gallery:hover {
  border: 1px solid #DC143C;
}

.overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(255, 255, 255, 0.75);
   display: none;
}

.modal { /* centers .content text on middle of the page */
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   border: 1px solid silver;
   display: none;
   z-index: 9;
}

.close {
   position: absolute;
   top: 10px;
   right: 10px;
   width: 25px;
   background-color: white;
   color: grey;
   border: 1px solid silver;
   padding: 0.5%;
   text-align: center;
   font-weight: bolder;
   cursor: pointer;
   font-family: "Helvetica Neue", sans-serif;
}

.close:hover {
  color: #E74C3C;
  border: 1px solid #E74C3C;
}

.content {
   background-color: rgb(238, 238, 238);
   padding: 5%;
   height: 100%;
   margin: auto;
   max-height: 700px;
   overflow: auto;
   line-height: 1.2em;
}

#name {
    font: 700 1.5em Helvetica Neue;
    color: #E74C3C;
    text-align: center;
}

#occupation {
    font: 700 1em Helvetica Neue;
    color: #E74C3C;
    text-align: center;
}

#age {
    font: 400 1em Helvetica Neue;
    color: #E74C3C;
    text-align: center;
}
/*
.content img {
    float: left;
    height: 200px;
    width: 200px;
    /*
    margin-right: 40px;
    margin-bottom: 5px;
    *
    border: 1px solid silver;
    border-image: initial;
    object-fit: cover;
}
*/


/* GALLERY END */


/* AUDIO */
  .main-audio {
    margin-top: 3%;
    width: 100%;
   }

/*
   .header-audio {
     background-color: #DC143C;
   }
*/

/* Header */

  .header {
      /*background-image: url("../img/cover-photo.jpg");*/

      background-color: grey;
      z-index: 1000;
      height: 100%;

      position: relative;
      background-position: top;

      /*
      -webkit-filter: blur(10px);
      filter: blur(10px);
      background-repeat: repeat-x;
      background-clip: url("https://www.youtube.com/embed/qhLWS3oTtgE")
      */
    }

    #scroll-down-btn {
      position: relative;
      width: 50px;
      height: 50px;
      left: 48%;
      top: 85%;
    }

    #scroll-down-btn:hover {
      background-color: #E74C3C;
      border-radius: 50px;
    }

    a .maintext {
      background-color: rgb(0);
    }

    #creativecommons {
      position: relative;
      background-color: #E74C3C;
      color: white;
      margin: auto;
      padding: .4em;
      display: none;
      width: 20%;
      top: 50px;
      font-size: 0.8em;
    }

/* Body */

    i {
      color: #E74C3C;
      text-decoration: underline;
      font-style: normal; 
    }

    a { 
       text-decoration: none;
      }

    ul {
       list-style: none;
       margin: 0;
       padding: 0;  
    }

    li {
      margin-bottom: 1em;
    }

    .container {
     margin: 0 auto;
     padding: 20px 50px;
     background: white;
    }

    #timeline {
      margin-left: auto;
    }

/* Infogram */

    .infogram-embed {
      margin-left: auto;
    }

    .infogram-embed #map {
      width: 45%;
    }

/* Template */ 

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

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

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

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

    .title0 h3 {
      padding: .5em;
    }

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

      border-top: .5em solid #E74C3C;
      position: sticky;
      top: 0px;
    }

        .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"); */
        z-index:
        }
        
    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"); */
    }

/* Text Highlight Colour */
    
      ::-moz-selection {
          color: #B03A2E;
      }

      ::selection {
          color: #B03A2E;
      }

@media only screen and (max-width: 1100px) { 

    .maintext {
      padding: 0% 10%;
  }



}

@media only screen and (max-width: 640px) { 


  .modal, .content {
    width: 70%;
  }

    .maintext {
      padding: 0% 10%;
  }

    h1 {
      padding-top: 10%;
      font-size: 150%;
        }

    .tags {
      margin: auto;
      width: 50%;
    }

    .tags li {
      list-style-type: none;
      float: left;
    }

    .tags li a {
      color: white;
      background-color: #E74C3C;
      text-align: center;
      padding: .5em;
      margin-right: .5em;
      text-decoration: none;
      border-radius: .5em;
      font-weight: 600;
      letter-spacing: .025em;
    }

    .tags li a:hover {
      background-color: #E74C3C;
      color: white;
    }

    #creativecommons {
      margin-left: 15%;
      width: 55%;
      color: white;
    }

    #creativecommons a {
      color: black;
    }

    #creativecommons a:hover {
      color: white;
      background-color: #E74C3C;
    }

    #timeline {
      margin-left: 20%;
    }

    #scroll-down-btn {
      position: relative;
      width: 10%;
      left: 42%;
      top: 75%;
    }

    .header {
      width: 100%;
    }


/* AUDIO */
  .main-audio {
    margin-top: 3%;
    width: 70%;
   }