html, body, #map {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #fff;
  overflow: hidden
}

/*info panel*/
.info {
z-index: 1000;
position: absolute;
right: 5px;
top: 20px;
padding: 6px 8px;
font: 14px Arial, Helvetica, sans-serif;
text-align: right;
background: white;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
border-radius: 5px;
}

#sidebar {
  position: absolute;
  width: 480px;
  height: 200px;
  top: 1%;
  bottom: 1%;
  left: .5%;
  z-index: 1000;
  background: #343a40;
  color: white;
  opacity: .8;
  padding: 40px 15px 20px 15px;
}

#title {
  margin-bottom: 30px;
  font-size: 25px;
   font-family: 'Oswald', sans-serif;
}

#title span {
  font-size: 14px;
  float: right;
}

#sidebar a {
  color: white;
}

#sidebar a:hover {
  color: white;
  opacity: 0.3;
}

span {
  margin-right: 10px
}

.legend {
line-height: 16px;
width: 160px;
color: #333333;
font-family: 'Open Sans', sans-serif;
padding: 6px 8px;
background: white;
background: rgba(255,255,255,0.5);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
}

.legend i {
width: 16px;
height: 16px;
float: left;
margin-right: 8px;
opacity: 0.9;
}

.legend img {
width: 16px;
height: 16px;
margin-right: 3px;
float: left;
}

.legend p {
font-size: 12px;
line-height: 16px;
margin: 0;
}