@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, html {
    font-family: 'Tiempos',Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
}
/* 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: 32px;
    font-weight:700;
    line-height: 40px;
    margin: 5px 0px 2px 10px;
    text-align: left;
}


/* Chart or visualization */
#viz{
  width:100%;
  height:100%;
  padding:auto;
  margin:auto;
}

.axis text {
  font-family:'National';
}
.y .axis path {
  stroke-width:2;
}

.x .axis path {
  stroke-width:0;
}

.legend {
  font-family:'National';
  font-size:12px;
}
circle {
  stroke-width:1px;
  stroke:black;
}
/* Footer */
#sourceline {
   font-family:'Tiempos';
   font-size: 12px;
   margin-top: 10px;
   min-height: 100px!important;
}
.label {
  font-family:'National';
  font-size:12px;
  font-weight:700;
}
.footer{
    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;
}
.dot {
      fill: #00aeef;
      stroke: #fff;
      stroke-width:2;
  }