p {
  font-family:"Helvetica Neue", sans-serif;
}
.article-header{
/*  padding:0 1.3em;*/
}

.author{
  font-size:0.9em;font-weight:400;margin-top:1em;color:#37474F;
}

.no-hover-underline{
  text-decoration-line: none;
}
.underline{
  border-bottom:1px solid #37474F;
}

.article-header>h1{
  padding: 0;
  font-weight:600;
  margin-bottom:0;
  color:#222;
  font-size:2.6em;
  font-family:"Helvetica Neue", sans-serif;
}

.section-header{
  font-size:1.4em;
  margin:0.8em 0;
  color:#546E7A;
  border-bottom:1px solid #ddd;
}

.paragraph-list{
  list-style-type:square;
  padding-left:1em;
  
}
.paragraph-list>li>p{
  margin: 0 0 0 1em;
  padding:0.5em 0 0 0;
}

.point-header{
  font-size:1.3em;
  margin: 1em 0em 0em 0.5em;
  color:#546E7A;
  }

.section-text{
  font-weight:400;
  font-size:1.1em;
  padding-top:0.8em;
  font-family:'Lora', serif;
  color:#555;
  line-height:1.7em;
}

.small-text{
  color:#555;
  font-size:0.9em;
}

.w-100{
  width:100%;
}

p.label1{
  font-size:1.3em;
  font-family:'Lato',sans-serif;
}

.mt-0{
  margin-top:0;
}

.mt-1{
  margin-top:0.5em;
}
.mt-2{
  margin-top:2em;
}

.pl-1{
  padding-left:1.25em;
}

.px-1{
  padding-left:1.25em;
  padding-right:1.25em;
}

.mx-1{
  padding-left:1.25em;
  padding-right:1.25em;
}


ul.subheader-list{
  list-style-type:square;
}

li.subheader-bullet{
  list-style-position:outside;
  padding:0.3em 0
}

/*
li::before {
  content: "• ";
  color: red;  or whatever color you prefer 
}
*/
.subheader-bullet.top-border{
/*  border-top:1px dashed #aaa;*/
}

.subheader-bullet>h4{
  color:#333;font-size:1em;font-family:'Helvetica Neue', sans-serif;
  margin:0;
/*  padding:0.5em 0;*/
/*  margin-left:1em;*/
  display:inline;
}

.subheader{
  margin-top:1.5em;
  font-size:1.5em;
  color:#546E7A;
  font-weight:600;
  border-bottom:2px solid #ccc;
  width:100%;
}


.subheader-border{
  margin-left:-20px;border-top:1px dashed #aaa;
}


h3.subheader{
  font-size:1.3em;
/*  color:#777;*/
  border-bottom:1px solid #ccc;
}

.thin-header{
  padding: 0.7em 0.2em 0.4em 0em;
  color:#53606d;
  font-size:0.9em;
}


.thin-header ul{
  list-style-type: none;
}
.thin-header h6{
  font-weight:400;
  font-size:1.2em;
  padding-top:0.5em;
  font-family:'Lora', serif;
  color:#333;
}
      .bullet-header, .additional-facts{
        padding: 0.7em 0.4em 0.4em 1.5em;
        color:#53606d;
      }
      
      .bullet-header li h6 {
        font-weight:600;
      }
      
      .bullet-header li{
        padding-top:0.7em;
      }
    
.additional-facts p{
    font-size:0.9em;
    margin-bottom:0;
}
.additional-facts h6{
  font-size:1.2em;
  color:#2f4050;
  font-weight:600;
  margin-top:1em;
}
  
  .article-gallery{
    margin-top:1.5em;
  }

.gallery-block img{
  height:10em;
  width:auto;
  overflow:hidden
}



      
      .sub {
        color:#777;
        font-size:0.8em;
      }
      
      .overlay {
          fill: none;
          pointer-events: all;
      }
      
      .mouse-line {
        stroke:cadetblue;
        stroke-width:2px;
        shape-rendering: crispEdges;
      }
  
      #chart-container{
        padding:0;
      }
      
      .datapoint{
        display:block;
        font-size:25px;
      }
      .interpretation.key-value, .datapoint{
        color:white;
        font-size:28px;
        font-weight:300;
        display:block;
      }
      .datapoint{
        margin-top:0;
      }
      
      .interpretation h3{
        font-size:20px;
        color:#fff;
        font-weight:400;
      } 
      .datapoint.medium{
        margin-left:0.33em;
        font-weight:300;
      }

      .interpretation h5{
        font-size:1.2rem;
        color:#fff;
        font-weight:400;
      }
      .interpretation.small{
        color:white;
        font-size:13px;
        font-weight:600;
      }

      p{
        margin-bottom:0;
      }
  
      .chart-download p{
        color:#626262;font-size:1em
      }
.chart-download img{
  height:15em;
}
.chart-download{ padding-left:2em;}
      
      .reference{
        margin-top:1em;
        padding: 0 0.33em;
        height:15vh;width:100%;
      }
      .reference p{
        color:#555;
        font-size:0.8em;
      }
      
      .chart-info{
        padding: 0.5em 1em 1em 1em;
        background-color:#009688;
        margin-top:5em;
      
}
  nav {
    background-color:#2f4050;height:3rem;
  }

  nav ul {
    margin-bottom:0;
    list-style-type:none;
  }
  nav li {
    display:inline;
  }
  nav li h3{
    float:left;
    color:white;
    font-size:1.8rem;
    padding-top:0.1rem;
    font-family:'Lato', 'sans-serif';
    position:relative;
    right:0.8em;
    bottom:0.1em;
  }

#logo-img{
  height:2.5rem; max-width:auto;float:left;margin-top:0.3em;margin-left:1em;
  
}

#right-buttons{
  float:right;
}
#page-nav-button{
  background-color:#2f4050;color:#fff;opacity: 0.9; padding:0.1em 0.4em 0.4em 0.4em;font-size:1.1em;font-weight:200;height:3rem;float:left;font-family:'Helvetica Neue', sans-serif;
  border-left:1px solid #fff;border-right:1px solid #fff;border-bottom:0;border-top:0;
}
#page-nav-button p{
  margin-bottom:0;
}
#page-nav-button:hover,#hamburger-button:hover{
  background-color:#46617a;

}
#hamburger-button{
  height:3rem;background-color:#2f4050; max-width:auto;float:left;border:0;
}


      
      
      .data-tile{ padding:0em 1em;}
      .x-axis{ font:0.75em sans-serif;}
/*      .x-axis-label{ font-size:2em 'Helvetica', sans-serif;}*/
      .y-axis{ font:0.8em sans-serif;}




.share-block { height:2.5em; width:6em; float:left;
}

.share-block img{
  height:2.5em;margin-left:auto;margin-right:auto;display:block;
}
.share-block.reddit{ background-color:#ff4500}
.share-block.facebook{ background-color:#3C5A99}
.share-block.twitter{ background-color:#50ABF1;}


/* Dropdown Button */
.dropbtn,.dropbutton {
/*
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
*/
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-button-text{
  margin-bottom:0;
  color:rgba(255,255,255,0.9);
  font-weight:200;
  font-size:1em;
  margin-top:0.3em;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #2f4050;
    min-width: 280px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: #fff;

    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #46617a;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: inline-block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbutton {background-color: #46617a;}

.dropdown-content{
  list-style-type:none;
}
.dropdown-content p {
  color:white;padding:0.5em;margin-bottom:0;  font-weight:200;
  font-size:1em;text-rendering:optimizeLegibility;
}
.dropdown-content h6{
  color:white;padding:0.5em;margin-bottom:0;border-bottom:1px solid #fff;font-size:1.4em;font-weight:200;margin-top:0;
}
.dropdown-content p:hover{
  background-color:#46617a;
}
.dropdown-content  p.active {
  color:white;
  padding:0.5em;
  margin-bottom:0;
  border-left:5px solid #009688;
  background-color:#46617a;
}

.infoblock{
  opacity:0.9;
}
.infoblock:hover{
  opacity:1;
}

.infoblock > h2{
  color:#fff;float:left;font-size:2.1em;padding:0.2em 0;font-weight:200;width:30%;
}

.infoblock > p{
  color:#fff;float:left;font-size:0.8em; font-weight:600;width:60%;padding-top:0.5em;
}

.graphic-instructions{
  color:#777;
  font-style: italic;
  font-size:0.9em;
  font-weight:600;
}
.graphic-instructions.light{
  font-weight:400;
}


/*Chart Labels*/
.chart-label {
  width:30%; height:5em;border-right:1px solid #B0BEC5;float:left;
}

.chart-label > p {
  color:#626262;padding-top:1.7em;padding-left:0.3em; font-weight:400;font-size:1em;
}

.chart-label > h6{
  color:#626262;padding-top:1.8em;padding-left:0.8em; font-weight:400;font-size:1.1em;
}

.chart-label.line2 > h6 {
  padding-top:0.8em;
}

.hbarchart-segment {
  background-color:#fff;width:100%;border-bottom:1px solid #E0E0E0;
}

.b-top { border-top: 1px solid #E0E0E0 }
.white {color: '#fff', opacity:0.7}



      @media screen and (max-width:1024px) {
        .chart-download img{
          height:10em;
        }
        .interpretation h5{
        font-size:1rem;
        color:#fff;
        font-weight:400;
        }
        .datapoint{
          font-weight:300;
/*          font-size:1.1rem;*/
        }
        .chart-info-container{
          padding-right:1em; 
        }
      }
      
      @media screen and (max-width:640px) {

        .thin-header{
          font-size:1em;
        }
        .chart-download img{
          height:7em;
        }
        .chart-info-container{
          padding:0;
        }
        
        #logo-img{
          height:33px;margin-top:8px;margin-left:8px;
        }
        
        .chart-info{
          margin-top:0;
        }
        .datapoint{
          font-weight:400;
          font-size:1.1rem;
        }
        .data-tile{
          width:98%;
        }
        

      }


body{
  min-width:350px;
}

.node rect {
  cursor: move;
  fill-opacity: .9;
  shape-rendering: crispEdges;
}

  
.node text {
  pointer-events: none;
}

.link {
  fill: none;
  cursor:pointer;
}

.link:hover {
  stroke-opacity: 0.6;
  stroke:#fff;
}
    
    .mySlides{
      display:none;
    }
    

    .axisWhite line{
      stroke:#fff;
    }
    .axisWhite path{
      stroke:#fff;
    }
    .axisWhite text{
      fill:#fff;
      opacity:0.8;
    }
    .axisLabel text{
      fill:steelblue;
      
    }
  
  .svg-shadow {
    /* Use -webkit- only if supporting: Chrome < 54, iOS < 9.3, Android < 4.4.4 */
    -webkit-filter: drop-shadow( -5px -5px 5px #000 ); 
            filter: drop-shadow( -5px -5px 5px #000 );
}


    .quote{
      list-style-type: none;
      font-weight:400;
      font-family:'Lora', serif;
      color:#626262;
      margin-top:1em;
      margin-bottom:1em;
      margin-left:1em;
      padding-left:0.5em;
      font-size:1em;
      border-left:5px solid steelblue;
      font-style: 
    }
.quote-attribution{
  float:right;
        font-weight:400;
      font-family:'Lora', serif;
      color:#626262;
}
    #quote{
      font-weight:300;
      margin-left:1.5em;
      padding-left:1em;
      border-left:2px solid cadetblue;
    }