#mapid { height: 800px; }

body {
	margin: 0;
}

p {
	font-family: PT Sans, Arial;
	font-size: 14px;
}

h1 {
	font-family: PT Sans Narrow, Arial;
	font-weight: normal;
	margin-bottom: 0;
}

.leaflet-popup-content-wrapper {
	background-color:rgba(255,0,0,0.8);
}

.leaflet-popup-content-wrapper .leaflet-popup-content h1 {
	font-size: 21px;
	margin-bottom: 5px;
}

.leaflet-popup-content-wrapper .leaflet-popup-content {
	font-family: PT Sans, Arial;
	font-size: 13px;
}

/* cluster now changes opacity on hover but not the marker itself */

.leaflet-marker-icon:hover {
	opacity: 0.75;
}

#Key-2 {
position: absolute;
top: 725px;
left: 10px;
z-index: 9000;
height: 68px;
width: 322px;
background-image:url(Key-2.png);
background-repeat: no-repeat;
border-radius: 5px;
-webkit-box-shadow: 6px 10px 23px 5px rgba(102,102,102,0.2);
-moz-box-shadow: 6px 10px 23px 5px rgba(102,102,102,0.2);
box-shadow: 6px 10px 23px 5px rgba(102,102,102,0.2);
}

#Key-1 {
position: absolute;
top: 725px;
left: 340px;
z-index: 9000;
height: 68px;
width: 312px;
background-image:url(Key-1.png);
background-repeat: no-repeat;
border-radius: 5px;
-webkit-box-shadow: 6px 10px 23px 5px rgba(102,102,102,0.2);
-moz-box-shadow: 6px 10px 23px 5px rgba(102,102,102,0.2);
box-shadow: 6px 10px 23px 5px rgba(102,102,102,0.2);
}

#logo {
		position: absolute;
	    	top: 752px;
	    	right: 7px;
	    	z-index: 9000;
		height: 30px;
		width: 30px;
		background-image:url(logo.png);
		background-repeat: no-repeat;
}

@media (max-width: 700px) {
	#Key-1 {
		display: none;
	}

	#Key-2 {
		display: none;
	}
	#mapid { height: 650px; }

	/* reduce size of popup content */

	.leaflet-popup-content-wrapper .leaflet-popup-content h1 {
		font-size: 18px;
		margin-top: 0px
	}
	.leaflet-popup-content-wrapper .leaflet-popup-content {
		font-size: 12.5px;
		margin: 12px;
	}

	.leaflet-popup-content-wrapper {
		max-width: 280px;
	}

	#logo {
		top: 600px;
	}

}

@media (max-width: 450px) {
	#mapid { height: 500px; }

	#logo {
		top: 435px;
	}
}