body { 
    margin:0;
    padding:0; 
    font-family: Averta-Regular;
}
b { 
    font-family: Averta-Bold;
}

#map { position:absolute; top:0; bottom:0; width:100%; }


body {
  margin:0;
  padding:0;
}


.one-word-per-line {
    word-spacing: 100vw;
} 

h4 {
    font-family: Averta-Regular;
}

h1 {
  font-family: Averta-Bold;
  font-size: 1.3em;
  font-weight: bold;
  line-height: 98%;
   -webkit-text-stroke: 0.2px #60564b;
  color: #a59482; 
}

svg {
  fill: currentColor;
}

div#blur {
  -webkit-filter: blur(10px); /* Chrome, Opera, etc. */
  filter: url('blur.svg#blur'); /* Older FF and others - http://jordanhollinger.com/media/blur.svg */
  filter: blur(10px); /* Firefox 35+, eventually all */
}

#map { position:absolute; top:0; bottom:0; width:100%; }
.map-overlay {
  position: absolute;
  padding: 10px;
  height: 0px;
}

.map-overlay .map-overlay-inner {
  background-color: #191a1a; 
  box-shadow:0 1px 2px rgba(0, 0, 0, 0.20);
  border-radius: 3px;
  padding: 10px;
  margin-bottom: 10px;
}

.map-overlay label {
  display: block;
  margin: 0 0 10px;
}

.map-overlay input {
  background-color: transparent;
  display: inline-block;
  width: 100%;
  position: relative;
  margin: 0;
  cursor: ew-resize;
}

.mapboxgl-popup {
  max-width: 150px;
  font: 18px 'Averta-Bold', 'Century Gothic Regular', Helvetica, sans-serif;
  opacity: 0.9;
}

.legend {
  background-color: #191a1a;
  color: #a59482;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.10);
  font: 12px/20px 'Averta-Regular', 'Century Gothic Regular', Helvetica, sans-serif;
  padding: 10px;
  position: absolute;
  z-index: 1;
}

.legend h4 {
  margin: 0 0 10px;
}

.legend div span {
  display: inline-block;
  margin-right: 5px;
  width: 12px;
}

.legend div span.circle {
  border-radius: 50%;
  height: 10px;
  width: 10px;
}

.right { right: 5px; }
.top { top: 10px; }
.left { left: 5px; }
.bottom { bottom: 10px; }

#menu2 {
  z-index: 1;
  position: absolute;
  top: 10px;
  right: 10px;
}

#menu {
  background: #fff;
  position: absolute;
  z-index: 1;
  bottom: 10px;
  right: 10px;
  border-radius: 3px;
  width: 120px;
  border: 1px solid rgba(0,0,0,0.4);
  font-family: 'Open Sans', sans-serif;
}

#menu a {
  font-size: 13px;
  color: #404040;
  display: block;
  margin: 0;
  padding: 0;
  padding: 10px;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,0.25);
  text-align: center;
}

#menu a:last-child {
  border: none;
}

#menu a:hover {
  background-color: #f8f8f8;
  color: #404040;
}

#menu a.active {
  background-color: #3887be;
  color: #ffffff;
}

#menu a.active:hover {
  background: #3074a4;
}

/*
 * Fix for tooltips making buttons appear ugly.
 * https://github.com/twbs/bootstrap/issues/5687#issuecomment-14917403
*/

.slider.slider-horizontal {
    width: 100px;
}

.tooltip.top .tooltip-arrow {
    border-top-color: #191a1a;
}

.tooltip.left .tooltip-arrow {
    border-left-color: #191a1a;
}

.tooltip-inner {
  background-color: #191a1a;
}

#logo {
  position: absolute;
  bottom: 30px;
  right: 10px;
  width: 100px;
}