/* 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


*/

/********* MAIN *********/

.headerimg{
   position: relative;
   opacity: 1;
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   height: 700px;
   background-image: url("../img/header.jpg");
   min-height: 90%;
   margin-bottom: 15px;
}

.header{
  padding-left: 20px;
}

.byline{
  color: #cc0000;
  font: 18px "Reem Kufi";
  font-weight: bold;
  letter-spacing: 3px;
  padding-left: 20px;
  text-transform: uppercase;
}

body, html {
  height: 100%;
  background-color: #181818; 
}

.content{
  padding-left: 20px;
  padding-right: 600px;
  line-height: 1.6;
  color: #F5F5F5;
  font: 100 16.5px/1.7 "Reem Kufi";
  transition: 0.5s;
}




h1, h2, h3, h4 {
  text-align: left;
  letter-spacing: 1px;
}

h1 {
  font: 525 50px "Reem Kufi"; 
  font-weight: bold;
  color: #F5F5F5; 
}

h2, h3, h4 {
  font: 525 20px "Reem Kufi"; 
    font-weight: bold;
  color: #cc0000; 
}


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

.videotext {
  color: #F5F5F5;
  font: .9em "Reem Kufi";
  width: 500px;
  padding-bottom: 20px;
}

.video{
  padding-right: 50px;
  float: right;

}


 /*perfume graphics*/

.perfumegraphics{
  width: 325px;
  height: auto;
  float: right;
  padding-right: 175px;
}

.perfumetext {
  color: #F5F5F5;
  font: .9em "Reem Kufi";
  width: 350px;
}

.trex {
  width: 100%;
}

.trex img {
  width: 80%;
  transition: transform 0.5s;
}

.trex img:hover {
transform: scale(1.15);
}

.io {
  width: 100%;
}

.io img {
  width: 80%;
  transition: transform 0.5s;
}

.io img:hover {
transform: scale(1.15);
}

.acityonfire {
  width: 100%;
}

.acityonfire img {
  width: 80%;
  transition: transform 0.5s;
}

.acityonfire img:hover {
transform: scale(1.15);
}

.perfumegallery1, .perfumegallery2, .perfumegallery3 {
  width: 325px;
  display: grid;
  flex-direction: column;
  display: none;
}

.perfume {
  position: relative;
  width: 45%;
}

.perfume img {
  width: 100%;
  height: 100%;
  transition: transform 0.5s;
}

.perfume img:hover {
transform: scale(1.3);
}

.perfumecap {
  width: 300px;
  position: absolute;
  top: 40px;
  right: -300px;
  color: #F5F5F5;
  display: none;
  font: 0.9em "Reem Kufi";
}


.space{
  height: 20px;
}

}


/* MAKING IT MOBILE FRIENDLY */

/* Turn off parallax scrolling for iPad and smaller */


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

    .parallax {
        background-attachment: scroll;
    }
}    

/* Turn off flex for iPad portrait mode  */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait) { 

    .tright, .tleft {
      float: none;
      width: 90%;
    }

    section.mainvideo {
      display: block;
    }

    section.mainvideo .videotext {
      width: 89%;
      margin: 1%;
    }

    section.vr360video {
      display: block;
    }
    
    section.vr360video .vr360videotext {
      width: 89%;
      margin: 1%;
    }

    section.gmapmain {
      display: block;
    }
    
    section.gmapmain .gmaptext {
      width: 89%;
      margin: 1%;
    }

    section.socialmedia {
      display: block;
    }
    
    section.socialmedia .twittertext {
      width: 89%;
      margin: 1%;
    }

    section.socialmedia .twitter {
      width: 95%;
      margin-bottom: 10px;
      padding: 2%;
    }

}

@media only screen and (max-width: 768px) {
    section.maintext p {
      padding: 1% 11%;
   }
   
    .parallax {
      background-attachment: scroll;
    }
}

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

    .parallax {
      background-attachment: scroll;
    }

    iframe {
      min-height: 600px;
      width: 97%;

    }

    section {
      display: block;
      padding: 1%;
    }

    section .textbox {
      width: 87%;
      margin: 1%;
    }

    section .content {
      width: 100%;
      height: 100%;
    }

    .title h1 {
      font-size: 47px;
    }

    .title h2 {
      font-size: 27px;
    }

    .title0 {
      padding: 2%;

    }

    .title0 h1 {
      font-size: 41px;
    }

    .title0 h2 {
      font-size: 21px;
    }

    .byline {
      padding: 9px;
      font-size: 12px;
      letter-spacing: 3px;
    }

    section.maintext {
      padding-bottom: 14%;
    }

    section.maintext p {
      line-height: 1.3em;
      padding: 1% 7%;
      text-align: left;
    }

    section.maintext span.readfull {
      margin: 4.7%;
    }

    section.maintext span.readfull2 {
      margin: 4.7%;
    }

    .teaser {
      width: 77%;
      margin: 7%;

    }

    .tright, .tleft {
      float: none;

    }

    .teaser blockquote {
      font-size: 1.7em;
    }

    .divider .caption {
      position: absolute;
      top: auto;
      bottom: 2%;
      width: 82%;
 
    }

    section.mainvideo .content {
      height: 400px ;
    }

    section.mainaudio .audio {
      width: 100%;
      display: block;
    }

    aside.sound {
      /* border: 3px solid #333;*/
      background-color: #aaa;
      width: 82%;
      height: 100%;
      margin: 1%;
      padding: 7%;
    }

    section.gmapmain .content {
      width: 98%;
      height: 400px;
    }

    section.knightlab .timeline {
      width: 100%;
      height: 800px;
    }

    .twitter {
      width: 95%;
      margin-bottom: 10px;
      padding: 2%;
    }

    section.footer p {
      font-size: 14px;
    }

 
}