@font-face {
  font-family: 'National';
  src: url('./fonts/National-Light.woff');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'National';
  src: url('./fonts/National-LightItalic.woff');
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: 'National';
  src: url('./fonts/National-BookItalic.woff');
  font-weight: 200;
  font-style: italic;
}
@font-face {
  font-family: 'National';
  src: url('./fonts/National-Book.woff');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'National';
  src: url('./fonts/National-Regular.woff');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'National';
  src: url('./fonts/National-Black.woff');
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: 'National';
  src: url('./fonts/National-Bold.woff');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Tiempos';
  src: url('./fonts/TiemposText-Regular.woff');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Tiempos';
  src: url('./fonts/TiemposText-Thin.woff');
  font-weight: 200;
  font-style: normal;
}
body {
    font-family: 'Tiempos',Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #fff;
}
.content {
      max-width: 520px;
}
/* Graphic Flag */
.flag{
  color:black;
  background-color:#FFCF31;
  font-family:'National';
  font-size: 18px;
  font-weight:200;
  height:25px;
  padding:10px 10px 10px 0px;
  text-align:right;
  width:120px;
}
/* Header */
.hed{
    font-family: 'National';
    font-size: 22px;
    font-weight:700;
    line-height: 40px;
    text-align: right;
}

/* Description */
.dek{
    font-family: 'Tiempos';
    font-size:16px;
    text-align: left;
    margin-top: 10px!important;
    display: inline-block;
    line-height: 25px;
    padding:0 12px;
    margin-bottom: 0px!important;
    width:90%;
}
.d3-tip:after {
  display:none !important;
}
.d3-tip p {
  font-family:'National' !important;
  font-weight:300;
}
.d3-tip {
  padding:0px 20px !important; 
}
/* Chart or visualization */
#viz{
  width:100%;
  height:100%;
  padding:auto;
  margin:auto;
}

.legend {
  font-family:'National';
  font-size:12px;
}
/* Footer */
#sourceline {
   font-family:'Tiempos';
   font-size: 12px;
   margin-top: 20px;
   min-height: 100px!important;
}
.label {
  font-family:'National';
  font-size:12px;
  font-weight:700;
}
.footer{
    border-top:2px solid black;
    color: black;
    font-family:'Tiempos';
    font-size: 10px;
    margin:0 10px;
    text-align:right;
}
.axis text {
  font-weight:300;
  font-family:'National';
  text-transform:uppercase;
}
.source{
  font-style:italic;
}
.credit{
  font-style:italic;
}

@media only screen and (max-width: 500px) {
    h1 {
        position:relative !important;
        top:0px !important;
        margin:5px 0 0 0 !important;
        text-align: left !important;
        padding-left:10px;
/*        right:20px !important;*/ 
    }
    .dek {
      margin-top:0 !important;
    }
}