.legend, .social {
	background: rgba(255,253,250,1);
	outline: 0;	
	border-radius: 10px;
	font-size: 15px;
	box-shadow: 0 1px 5px rgba(0,0,0,0.7);
	
}
.legend {
	padding: 6px 10px 6px 10px;
}

.social {
	padding: 10px 10px 3px 10px;
}

.leaflet-popup-content-wrapper {
	background: rgba(255,253,250,1) !important;
}

.leaflet-popup-content {
	font-size: 13px !important;
}

a {
	color: #004471 !important;
	text-decoration: none !important;
}
a:hover {
	color: #A43900 !important;
}

body {
	background: #004471 !important;
	margin: 25px !important;
}

h2, h2 a {
	color: rgba(255,248,240,1) !important;
	font-family: 'Sarina',cursive !important;
	font-weight: normal !important;
	font-size: 30px;
}


.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .9 ) 
                url('img/load-symbol.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}