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

*/

@import url('tpl/main.css');
@import url('tpl/dividers.css');
@import url('tpl/alltext.css');
@import url('tpl/mainvideo.css');
@import url('tpl/mainaudio.css');
@import url('tpl/vr360video.css');
@import url('tpl/slideshow.css');
@import url('tpl/gmap.css');
@import url('tpl/timeline.css');
@import url('tpl/socialmedia.css');
@import url('tpl/dataviz.css');
@import url('tpl/customcode.css');
@import url('tpl/footer.css');
@import url('student.css');



/* 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: 500px;
    }

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

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

    .nugget img {
      width: 200px;
    }

}