/* On mouse hover, lighten state color */
path:hover {
    fill-opacity: .7;
}

/* Style for Custom Tooltip */
div.tooltip {   
     position: absolute;           
    text-align: center;           
    width: 60px;                  
    height: 28px;                 
    padding: 2px;             
    font: 12px sans-serif;        
    background: white;   
    border: 0px;      
    border-radius: 8px;           
    pointer-events: none;         
}
        
/* Legend Font Style */
body {
    font: 11px sans-serif;
    background: #114357; /* fallback for old browsers */
    background: -webkit-linear-gradient(to left, #D1E4FF, #FFD1D4); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to left, #D1E4FF, #FFD1D4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color:#2B282E;
    text-align: center;
}

h1 {
  font-size: 40px
}

a {
  transition: color .4s;
  color: #265C83;
}

.mapsection {
    padding-bottom: 50%; 
}
        
/* Legend Position Style */
.legend {
    background-color: #fcfcfc;
    border: solid 1px #51575a;
    padding: 5px;
    border-radius: 5px;
    position: relative;
}

/* Desktop */
@media screen and (min-width: 1201px) {
    .legend {
        bottom:10%;
    }

    .mapsection {
        padding-bottom: 50%; 
    }
}
/* Tablet */
@media screen and (min-width: 737px) and (max-width: 1200px) {
    .legend {
        bottom:10%;
    }

    .toggleLegendLinkContainer {
        margin-top: 25px;
    }

    .mapsection {
        padding-bottom: 50%; 
    }
}
/* Mobile */
@media screen and (max-width: 736px) {
    .legend {
        bottom:20%;
    }

    .toggleLegendLinkContainer {
        margin-top: 15px;
    }

    .mapsection {
        padding-bottom: 45%; 
    }
}

.svg-container {
    display: inline-block;
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* aspect ratio */
    vertical-align: top;
    overflow: hidden;
}
.svg-content-responsive {
    display: inline-block;
    position: absolute;
    top: 10px;
    right: 0;
}