#map {
	width:100%;
	height:100%;
	max-width: 100%;
	max-height: 100%;
}


#legend {
    font-family: 'Montserrat';
    border-radius: 20px;
    max-width: 20%;
    color: #002b36;
    background: #FFFFFF;
    padding: 10px;
    margin: 10px;
    margin-top: 80px;
    border: 1px solid #222222;
    text-align: left;
    display: none;
    transition: 5;

}


.legendTitle {
    text-align: left;
    font-weight: bold;
    font-size: 60%;
}
.legendEntry {
    text-align: left;
    font-size: 60%;
}


/* Breakpoint for column collapse - 400px and up)*/
@media (min-width: 400px) {
    .legendTitle {
        font-size: 70%;
    }
    .legendEntry {
        font-size: 70%;
    }
}



/* Breakpoint for column collapse - 515px and up)*/
@media (min-width: 515px) {
    .legendTitle {
        font-size: 100%;
    }
    .legendEntry {
        font-size: 100%;
    }
}