.body {
	padding-bottom:0;
}
.distributors-heading {
	margin:0 4%;
	margin-top:7.83%;
	display:inline-block;
}
.distributors-regions {
	font-weight:bold;
}
.distributors-title {
	font-size:36px;
}
.distributors-regions {
	margin-top:20px;
	font-size:15px;
}
.bar {
	margin:0 15px;
}

/* 
	The following stack of containers creates a map which enlarges at a fixed aspect ratio (dependant on #map-relative.padding-top) until it hits #map-container.max-height,
	at which point it continues to get wider with the viewport, but not taller.
*/
#map-padder {
	padding-top:3.47%;
}
#map-container {
	background-color:#B4D1E8; /* Same color as water, to make for smoother looking loading */
	position:relative;
	width:100%;
	height:auto;
	max-height:520px;
	overflow:hidden;
}
#map-relative {
	width:100%;
	padding-top:75%; /* 4:3 aspect ratio  */
}
#map-absolute {
	position:absolute;
	top:0; bottom:0; left:0; right:0;
	margin:auto;
}
#map-canvas {
	width:100%;
	height:100%;
}
#map-canvas img { max-width: none; }
/* END map-styling */


@media all and (max-width: 1152px) { 
	/*
	 * Width set at 1 pixel less than viewport
	 * Anyone who doesn't have a screen thats bigger than max page width of 1153px may be on a tablet and might need space either side of the map to use to scroll.
	 */
	#map-padder {
		padding-top:3.47%;
		padding:3.47% 2%;
		padding-bottom:2%;
	}
}
@media all and (max-width: 700px) {
	.bar {
		display:none;
	}
	.region-link {
		display:block;
		width:100%;
		padding:6px 0;
	}
}