* {font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
     }

html, body, #maps {
  height: 99%;
}
a {
  text-decoration: none;
  color: #92A0A9;
}
body {
  background-color: black;
}

#maps {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: center;
}

.map {
  width: 49%;
  height: 49%;
}

#map-1, #map-2 {

}

.mapboxgl-ctrl-top-left, .mapboxgl-ctrl-top-right, .mapboxgl-ctrl-bottom-left, .mapboxgl-ctrl-bottom-right, .mapboxgl-ctrl {
  backface-visibility: hidden;
}
#console1 {
  position: fixed;
  width: 50px;
  height:30px;
  margin: -8%  0 0 -5%;
  //padding: 0 20px;
  //background-color: white;
}
#console2 {
  position: fixed;
  width: 50px;
  height:30px;
  margin: -8%  0 0 5%;
  //padding: 0 20px;
  //background-color: white;
}
#console3 {
  position: fixed;
  width: 50px;
  height:30px;
  margin: 2%  0 0 -5%;
  //padding: 0 20px;
  //background-color: white;
}
#console4 {
  position: fixed;
  width: 50px;
  height:30px;
  margin: 2%  0 0 5%;
  //padding: 0 20px;
  //background-color: white;
}
.legend {
    background-color: #fff;
    border-radius: 3px;
    bottom: 30px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.10);
    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    padding: 10px;
    position: fixed;
    right: 1%;
    z-index: 1;
}

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

.legend div span {
    border-radius: 50%;
    display: inline-block;
    height: 10px;
    margin-right: 5px;
    width: 10px;
}