/* template.css 
   Project: Template for USC Annenberg MS and UG programs
   Author: Prof. Peggy Bustamante
   Date: July 2018
  
   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


*/

body {
  background-color: black;
}

.home {
  background-color: black;
  color:white;
  height: 100%;
  padding-top: 5px;
  /*display: none;*/
}

.home h1 {
  padding-top:15px;
  font: 30px "Gloria Hallelujah", cursive;
}

.home h2 {
  padding-right: 100px;
  padding-left: 100px;
  font: 20px'Open Sans Condensed', sans-serif;
}

.gif {
  padding-left: 400px;
  padding-right: 400px;
  margin: auto;
}


.home button {
  margin-left: 45%;
  cursor: pointer;
}

#clickablemobile {
  display: none;
}

.site {
  background-color: white;
  display: none;
}


.title {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 90%;
  padding: 5%;
  text-align: center;
}


.title0 h2 {
  /*padding-bottom:50px;*/
  font: 43px "Gloria Hallelujah", cursive;
}

.title0 h1 {
  padding-right: 100px;
  padding-left: 100px;
  font: 20px 'Open Sans Condensed', sans-serif;
}

.title0 img {
  max-width: 100%;
}

/*animation*/

.spinner {
   animation: wiggle 1s linear infinite;
   position:

   }
 
   @keyframes wiggle {
   50% {
      transform: rotate(-5deg);
   }
   50%{
      transform: rotate(-5deg);
   }
}

body, html {
  height: 100%;
  margin: 0;
  font: 400 18px/1.8 "Lato", sans-serif;
  color: #777;
}
iframe {
    min-width: 73%; min-height: 100%;
}


h1, h2 {
  text-align: center;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: grey;
}

h3 {
  text-align: center;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: maroon;
  font: 29px "Gloria Hallelujah", cursive;
}

a {
  color: maroon;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  color: darkred;
  background-color: lightgrey;
}

.fishy {
  min-height: 400px;
  background-color: black;
  position: relative;
  padding: 30px 30px;
  display: -webkit-flex;
  display: flex;
}

section {
  min-height: 400px;
  background-color: gainsboro;
  position: relative;
  /*padding: 30px 30px;*/
  display: -webkit-flex;
  display: flex;
}

section .textbox {
  color: white;
  background-color: white;
  text-align: center;
  padding: 30px 30px;
  text-align: left;
  width: 23%;
}

section .textbox p {

  font-size: .9em;
  font-weight: lighter;
  font: 20px 'Open Sans Condensed', sans-serif;
  color: black;

}

section .maptext {
  background-color: gainsboro;
}

.title p {
  color: silver;
}

.title h3 {
  color: #900;
}

.parallax {
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.fishy.parallax {
  background-image: url("../img/scarybg.jpg");
  height: 90%;
}

.divider.bgimg1 {
  background-image: url("../img/spookbg.png");
  min-height: 400px;
}

.title {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 90%;
  padding: 5%;
  text-align: center;
}

.byline {
  background-color: white;
  color: maroon;
  padding-bottom: 0px;
  font-size: 25px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding-top: 5px;
}

.byline2 {
  background-color: white;
  color: maroon;
  /*padding-left: 46%;*/
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.title0 {
  background-color: white;
  text-align: center;
  margin-bottom: 37px;
}

section.article {
  background-color: white;
  color: grey;
  text-align: center;
  text-align: justify;
  display: block;
  padding-bottom:40px;
  position: relative;
} 

section.article p {
  line-height: 1.7em;
  padding: 0% 23%;
  font: 20px'Open Sans Condensed', sans-serif;
}


.rcarpet {
  width: 550px;
  height: auto;
  margin: 30px;
  padding: 20px;
}

.rcarpet .caption {
    line-height: 1.7em;
    left: 0;
    bottom: -1.2em;
    font-size: .9em;
    color: #333;
}

.one {
  float: left;
}

.two {
  float: right;
}


.rcarpet video {
  height: 100%;
  width: 100%;
  cursor: pointer;
}


aside.sound {
  padding-top: 350px;
  width: 70%; /*this controls the size of the box which the image fillS, as it has been set to width 100% below*/
  margin: auto;
}

aside.sound img {
  width: 100%;
}

.controls {
  display: none;
}

.blackandwhite { /*this is just the class that contains the colored image*/
 position: relative; 
 margin: auto;
 display: none;
 width: 70%;
}

.blackandwhite img{
  width: 100%;
  margin: auto;
  position: absolute;
  bottom: 9px;

}

section.map {
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.maptext {
  width: 27%;
}


section.map { 
  min-width: 73%; min-height: 100%; 
}


section.timeline .tl { 
  width: 100%; min-height: 100%; 
  padding-top: 0px;
}

.hideme {
  background-color: black;
  opacity: 0.0;
  /*display: none;*/
}

section.footer {
  background-color: black;
  color: white;
  padding: 10px 20px;
  min-height: 30px;
  text-align: left;
  font: 0.8em'Open Sans Condensed', sans-serif;
}

.warning {
  background-color: gainsboro;
  height: 25px;
  text-align: center;
}






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

    .site {
      max-width: 600px;
    }

    .home h1 {
      font-size: 25px;
    }

    .home h2 {
      font-size: 15px;
    }

    .gif {
      max-width: 640px;
      padding-left: 0px;
      padding-right: 00px;
      padding-top: 0px;
      padding-bottom: 0px;
    }

    .gif img {
      max-height: 290px;
    }

    #clickablemobile {
      display: block;
      margin: auto;
      margin-top: 25px;
      font-size: 12px;
    }

    #clickable {
      display: none;
    }

    .byline {
      font-size: 15px;
    }

    .byline2 {
      font-size: 10px;
    }

    section.article p {
      padding: 0% 10%;
    }

    .rcarpet {
      max-width: 290px;
      float: center;
    }

    section.map {
      max-width: 640px;
      max-height: 640px;

    }

    aside.sound {
      padding-top: 400px;
    }

    .controls {
      display: block;
      padding-left: 20px;
      padding-top: 20px;
    }

    .blackandwhite {
      margin-bottom: 20px;
    }

    .rollover {
      display: none;
    }

    .title p {
      color: white;
    }

    section.map {
      display: block;
      width: 100%;
      margin: auto;
      padding: 0px;
      height: 600px;
      max-height: 100%;
      background-color: white;

    }
    
    section.map .maptext {
      width: 81%;
      margin: 1%;
      text-align: center;
      background-color: gainsboro;

    }

    iframe {
      min-height: 600px;
      max-height: 600px;
      width: 100%;

    }

    .maptext{
      position: relative;

    }

    section.map.parallax {
      height: 3000px;
      max-height: 1175px;
      max-width: 100%;

    }



}