@font-face {
  font-family: 'National';
  src: url('./fonts/National-Light.otf');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'National';
  src: url('./fonts/National-Regular.otf');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'National';
  src: url('./fonts/National-Black.otf');
  font-weight: 900;
  font-style: normal;
}
@font-face {
      font-family: 'National';
      src: url('./fonts/National-Bold.otf');
      font-weight: 700;
      font-style: normal;
}
@font-face {
      font-family: 'National';
      src: url('./fonts/National-Thin.otf');
      font-weight: 100;
      font-style: normal;
    }
@font-face {
  font-family: 'Tiempos';
  src: url('./fonts/TiemposText-Regular.woff');
  font-weight: 300;
  font-style: normal;
}
.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
  -webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
  -moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
  -o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
  transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}

.leaflet-cluster-spider-leg {
  /* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
  -webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
  -moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
  -o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
  transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
}
body {
    font-family: 'National','Tiempos',Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #fff;
    width:100%;
}

section.main-graphics{
    width:100%;
    margin:0;
    padding:0px 0 0px 0;
}
div.masthead{
    position:relative;
    margin-top:0px;
}
.constrict {
  width:100%;
}
/* Graphic Flag */
.flag{
color:black;
background-color:#ffcf31;
font-family:'National';
font-size: 16px;
font-weight:100;
height:33px;
padding:4px 10px 0px 5px;
display:flex;
justify-content: space-between;
width:100%;
}
.flag div { 
padding:2px 5px 0 0; 
}

.flag-logo {
  min-width:200px;
  opacity: .7;
  background: url("assets/logo.png");
  background-repeat: no-repeat;
  background-size: 80%;
}
/*headline*/
.header{
    font-family: 'National';
    font-weight:700;
    font-size: 32px;
    margin-bottom:0;
    text-align: left;
    line-height: 40px;
    margin-top: 5px;
    padding:0px 12px;
}
line{
    stroke:#102039;
}
.text-tab{
    font-family: 'Tiempos';
}

/*chatter*/
.dek{
font-family: 'Tiempos';
font-size:16px;
text-align: left;
margin-top: 5px!important;
display: inline-block;
line-height: 25px;
padding:0px 15px;
margin-bottom: 8px!important;
width:95%;
}


/*sourceline*/
#sourceline {
   font-family:'National';
   font-size: 12px;
   margin-top: 2px;
   min-height: 20px!important;
}

.footnote{
    color: black;
    margin:0;
}

.source{
    color: black;
    margin:0;
    font-style: italic;
}
.mycluster {
      width: 40px;
      height: 40px;
      background-color: greenyellow;
      text-align: center;
      font-size: 24px;
    }
.credit{
    color: #3D3D3D;
    float: left!important;
    text-align: left!important;
}
#map {
  height:400px;
}

.leafmap{
  margin-top: 15px;
}
  b {
    font-family:'National';
    font-size:14px!important;
  }
.info { 
  padding: 6px 8px; 
  font-family:'National';
  font-size:14px;
  background: white; 
  background: rgba(255,255,255,0.8); 
}

/* Legend styling */
.info h4 { 
  margin: 0 0 0px; 
  color: #777; 
}
.legend {
    line-height: 17px;
    font-size:10px;
    color: #555;
}
.legend i {
    width: 12px;
    height: 12px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}
.legend span {
  margin:0 0 7px 5px;
}

/*Leaflet styles*/
.leaflet-popup-content-wrapper {
 font-family:'National';
  font-size: 14px; 
  color: black;
}

.leaflet-popup-content-wrapper .leaflet-popup-content {
  font-family:'National';
  font-size: 14px; 
  color: black;
}

.leaflet-popup-tip-container {
  font-family:'National';
  font-size: 14px; 
  color: black;
  opacity:1;
}
.marker-cluster-vwhite {
  background-color: rgba(255,234,77,0.6);
}
.marker-cluster-vwhite div {
  background-color: rgb(255,234,77);
}
.marker-cluster-white {
  background-color: rgba(226,174,109,0.6);
}
.marker-cluster-white div {
  background-color: rgb(226,174,109);
}
.marker-cluster-less {
  background-color: rgba(169,92,127,0.6);
  }
.marker-cluster-less div {
  background-color: rgb(169,92,127);
  }
.marker-cluster-black {
  background-color: rgba(102,23,147,0.6);
}
.marker-cluster-black div {
  background-color: rgb(102,23,147);
  color:white;
}
.marker-cluster-vblack {
  background-color: rgba(41,0,154,0.6);
}
.marker-cluster-vblack div {
  background-color: rgb(41,0,154);
  color:white;
}