html, body {
			height: 100%;
			margin: 0;
		}
		#map {
			width:100%; 
			height:680px;
			background: white;
		}
		
		#info {
        position: absolute;
        padding: 10px 15px;
		top: 400px;
        left: 20px;
        width: 130px;
        background: white;
        text: black;
        z-index: 999;
        border-radius: 4px;
        box-shadow: 0 2px 4px 0 hsla(0,0%,0%,0.2);
      }
		#info2 {
        position: absolute;
        padding: 10px 15px;
		top: 300px;
        left: 20px;
        width: 30px; 
        text: black;
        z-index: 999; 
      }	  

.legend {
		  line-height: 18px;
		  color: #555;
		}
		
		.legend i {
		  /* shape of legend's icon*/
		  width: 18px;
		  height: 18px;
		  float: left;
		  margin-right: 8px;
		  opacity: 0.9;
		}
		
		.info {
		  padding: 6px 8px;
		  font: 14px/20px Arial, Helvetica, sans-serif;
		  /* size legend */
		  background: white;
		  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
		  border-radius: 5px;
		}
		
		.info h4 {
		  margin: 0 0 5px;
		  color: #777;
		}