#title {
  color: white;
  text-align: center;
  z-index: 1;
  position: absolute;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#map {
  position: absolute;
  top:0;
  bottom:0;
  width:100%;
  height:99vh;
  z-index: -1;
  padding: 0px;
}
#map-holder {
  height: 99%;
  padding: 0px;
  top:0;
  bottom:0;
  background-color: #35af6d;
}
a.mapboxgl-ctrl-logo {
  display: none !important;
}
.fill
{
  min-height: 100%;
  height: 100%;
  width: 100%;
  max-width: 100%;
}
html, body {
   position:fixed;
   top:0;
   bottom:0;
   left:0;
   right:0;
   height: 99vh;
   background-color: black;
}
#menu {
     background: #fff;
     position: absolute;
     z-index: 1;
     top: 10px;
     right: 10px;
     border-radius: 3px;
     width: 120px;
     border: 1px solid rgba(0,0,0,0.4);
     font-family: 'Open Sans', sans-serif;
 }
 #legend {
   padding-top: 0vh;
   top: 2vh;
   position: absolute;
   left: 40vw;
   background: #000;
   border: 1px solid white;
   color: white;
   width: 20vw;
   height: 5vh;
   font-size: 1vh;
   line-height: 5vh;
   visibility: visible;
 }
 #grad {
  display:inline-block;
  vertical-align: middle;
  height: 40%;
  width: 10vw;
  background: red; /* For browsers that do not support gradients */
  /* For Safari 5.1 to 6.0 */
  background: -webkit-linear-gradient(left,#313695,#4575b4,#74add1,#abd9e9,#e0f3f8,#ffffbf,#fee090,#fdae61,#f46d43,#d73027,#a50026);
  /* For Opera 11.1 to 12.0 */
  background: -o-linear-gradient(left,#313695,#4575b4,#74add1,#abd9e9,#e0f3f8,#ffffbf,#fee090,#fdae61,#f46d43,#d73027,#a50026);
  /* For Fx 3.6 to 15 */
  background: -moz-linear-gradient(left,#313695,#4575b4,#74add1,#abd9e9,#e0f3f8,#ffffbf,#fee090,#fdae61,#f46d43,#d73027,#a50026);
  /* Standard syntax */
  background: linear-gradient(to right,#313695,#4575b4,#74add1,#abd9e9,#e0f3f8,#ffffbf,#fee090,#fdae61,#f46d43,#d73027,#a50026);
}
#gradbuf {
 display:inline-block;
 height: 40%;
 width: 1vw;
 }
 #menu a {
     font-size: 13px;
     color: #404040;
     display: block;
     margin: 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: #36AF6D;
     color: #ffffff;
 }

 #menu a.active:hover {
     background: #3c8e0e;
 }
 #mly {
   position: absolute;
   bottom: 3vh;
   right: .5vw;
   background-color: rgba(0, 0, 0, 0.5);
   color: white;
   width: calc(270px + 10vw);
   height: calc(180px + 10vh);
   border: .5vh solid grey;
   z-index: 1;
 }