.spacer{
        height:500px;
      }
      
      body{ 
        color:transparent;
      }
      
      i {
        font-weight:400;
      }
      
      .article-header{
        padding: 0.5em 0.5em 0 0.5em;
        font-weight:600;
        margin-bottom:0;
        color:#2f4050;
      }
      
h1.article-header{
  font-size:2.2em;
}

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

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

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

.subheader{
/*  padding: 0 1em 0 2em;*/
  margin-top:1.5em;
  font-size:1.5em;
  color:#546E7A;
  font-weight:600;
  border-bottom:2px solid #ccc;
  width:100%;
}
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.7em;
      }
      
      .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.2rem; max-width:auto;float:left;margin-top:0.46em;margin-left:1em;
  
}

#right-buttons{
  float:right;
}
#page-nav-button{
  color:white;padding:0.37em 0.4em 0.4em 0.4em;font-size:1.1em;font-weight:200;border-left:1px solid #888;border-right:1px solid #888;height:3rem;float:left;
}
#page-nav-button p{
  margin-bottom:0;
}
#page-nav-button:hover,#hamburger-button:hover{
  background-color:#46617a;

}
#hamburger-button{
  height:3rem; max-width:auto;float:left;padding:0.4em 0.4em 0.4em 0.4em;
}


      
      
      .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 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;
/*    padding: 12px 16px;*/
    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;
}
.dropdown-content h6{
  color:white;padding:0.5em;margin-bottom:0;border-bottom:1px solid #fff;font-size:1.2em;font-weight:200;
}
.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:2rem;margin-top:0.6rem;margin-left:0.25em;
        }
        
        .chart-info{
          margin-top:0;
        }
        .datapoint{
          font-weight:400;
          font-size:1.1rem;
        }
        .data-tile{
          width:98%;
        }
        

      }