/* template.css 
   Project: Template for USC Annenberg MS and UG programs
   Author: Prof. Peggy Bustamante
   Date: July 2017

   Repurposing: Karina Saidi, MS Journalism Graduate Student, USC;
   Date: Aug 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 tablets and phones */

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

    .cycle-overlay {
      font-size: 0.8em;
      padding: 5%;
    }

    .cycle-caption {
      font-size: 0.8em;
      padding: 5%;
    }

    .title0 {
      margin-bottom: 5%;
    }

    .maintext .title-red h3 {
      margin-top: 5%;
    }

    .maintext .title0 h1{
      margin-bottom: 5%;
    }

    .maintext .title0 h3{
      margin-bottom: 5%;
    }

    .mainvideo .youtube p {
    margin-bottom: 5%;
    }

    .parallax {
    background-attachment: scroll;
    }

    .maintext .title0 h2 {
    font-size: .8em;
    }

    .maintext .title0 p {
      margin-top: 5%;
    }

    section {
      display: block;
    }

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

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

    .title h1 {
      font-size: 200%;
    }

    .title h2 {
      font-size: 125%;
    }

    .title0 {
      padding: 2%;
    }

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

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

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

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

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

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

    section.sidebar {
      padding-bottom: 14%;
    }
  
    section.sidebar h3 {
      padding: 0% 15%;
    }

    section.sidebar p {
      line-height: 1.3em;
      padding: 0% 15%;
      text-align: left;
    }

    .sidebarpic {
      width: 90%;
      padding-bottom: 0px;
    }

    .sidebarpic img {
      width: 100%;
    }

    .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;*/
      width: 82%;
      height: 100%;
      margin: 1%;
      padding: 7%;
    }

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

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

    .twitter {
      width: 85%;
      margin-bottom: 10px;
      padding: 5%;
    }

    section.footer p {
      font-size: 1em;
    }

}


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

    section.footer {
    width: 50%;
    }

    section.footer p{
    width: 140%;
    font-size: .8em;
    margin-left: -20%;
    }

    section.socialmedia {
    /*background-image: url("../img/beach.jpg");*/
    /* -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;*/
    width: 80%;
    margin: auto;
    }

   .body {
    width: 80%;
    p {
      font-size: 1em;
    }
    }

    .tags {
      margin-bottom: 5%;
      width: 100%;
      font-size: .8em;

    }

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

    #sticky-social a {
       background: #333;
       color: #fff;
       display: block;
       height: 50px;
       font: 16px "Avenir Next", sans-serif;
       line-height: 50px;
       position: relative;
       text-align: center;
       width: 50px;
       font-weight: bold;
    }

    .title {
      width: 80%;
    }
  
    .title0 h1 {
      font-size: 1.5em;
      width: 80%;
      letter-spacing: 2.5%;
      padding: 0% 15%;
    }

    .title0 h2 {
      font-size: 1em;
      width: 80%;
      padding-top: 1em;
      text-align: left;
      letter-spacing: 2.5%;
      padding: 0% 15%;
    }

    .title0 h3 {
      font-size: 1em;
      width: 80%;
      text-align: left;
      letter-spacing: 2.5%;
      padding: 0% 15%;
    }

    .title-red h3 {
      font-size: 1em;
      width: 80%;
      text-align: left;
      letter-spacing: 2.5%;
      padding: 0% 15%;
    }

    .title-red p {
      width: 80%;
    }

    hr {
      width: 100%;
      margin-left: 5%;
    }

    .cycle-slideshow { 
      width: 75%; margin: 0px auto; 
    }

    section.maintext p {
      line-height: 150%;
      font-size: .9em;
      width: 80%;
      padding: 0% 15%;
    }

    section.maintext {
      padding-bottom: 5%;
      width: 80%;
      margin: 0;
    }

    section.maintext li {
      line-height: 150%;
      font-weight: bold;
    }

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

    .rollover {
    margin-top: 0;
    margin-left: 0;
    }

    .sound .rollover p {
      width: 100%;
    }

    .audio .sound {
      padding: 0;
    }

    .audio .sound .rollover {
      background-color: white;
      margin: 0;
    }

    .audio aside {
      margin: 0;
    }

    aside.sound {
      /* border: 3px solid #333;*/
      width: 80%;
      margin: 0%;
      padding: 5%;
    }

    #id {
      margin: 0;
    }

    .teaser blockquote {
      width: 80%;
      font-size: 1.1em;
    }


    .twitter {
      margin-top: 0%;
    }

    .infogram-embed {
    width: 100%;
    margin: auto;
  }