@charset "UTF-8";

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* ------------------------------------------------------ */
/* FLEXBOX LAYOUT for SERVICE AREAS title section
/* ------------------------------------------------------ */

.county-container {
	height: 100%;
	margin-bottom: 20px;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: baseline;
}

.county-links {
	font-size: 1.5em;
	font-weight: 300;
	text-align: center;
}
@media screen and (max-width: 50em) {
	.county-links {
		font-size: 1.25em;
		font-weight: 300;
		/* TEST: color: blue; */
	}
}
@media screen and (max-width: 40em) {
	.county-links {
		font-size: 0.9375em;
		font-weight: 400;
		/* TEST: color: green; */
	}
}
@media screen and (max-width: 30em) {
	.county-links {
		font-size: 1.0625em; /* was: 1em; */
		font-weight: 400;
		/* TEST: color: red; */
	}
}

/* ------------------------------------------------------ */
/* https://www.w3schools.com/colors/colors_hex.asp
/* blue; green; red; teal; gold; 
/* ------------------------------------------------------ */

.county-links a {
	color: #BB0000;
	text-decoration: none;
}

.county-links a:visited {
	color: #BB0000;
	text-decoration: none;
}

.county-links a:hover {
	color: #BB0000;
	text-decoration: underline;
}

.county-links a:active {
	color: #BB0000;
	text-decoration: none;
}

/* ------------------------------------------------------ */

.county-sub {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-style: italic;
	font-size: 1.125em;
	font-weight: 600;
	text-align: center;
}
@media screen and (max-width: 50em) {
	.county-sub {
		font-size: 1.125em;
		font-weight: 600;
	}
}
@media screen and (max-width: 40em) {
	.county-sub {
		font-size: 1.0625em; /* was: 1em; */
		font-weight: 600;
		/* TEST: color: blue; */
	}
}
@media screen and (max-width: 30em) {
	.county-sub {
		font-size: 0.9167em; /* iPhone 6-8 portrait width: 414px */
		font-weight: 600;
		/* TEST: color: green; */
	}
}
@media screen and (max-width: 414px) {
	.county-sub {
		font-size: 0.9167em; /* was: 1em; */
		font-weight: 600;
		/* TEST: color: red; */
	}
}
@media screen and (max-width: 360px) {
	.county-sub {
		font-size: 0.875em; /* was: 0.9167em; */
		font-weight: 600;
		/* TEST: color: teal; */
	}
}

/* ------------------------------------------------------ */
/* FLEXBOX LAYOUT for SERVICE AREAS locations list section
/* ------------------------------------------------------ */

.locations-container {
	width: 90%;
	height: 100%;
	margin: 20px auto;
	margin-left: 7.8%; /* this is a HACK to fix centering of uneven list text */
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	flex-flow row wrap;
	justify-content: space-evenly;
	align-items: baseline;
	align-content: spece-evenly;
}
.locations-list {
	font-family: "open_sansregular", sans-serif;
	font-size: 1em;
	font-weight: 300;
	line-height: 2;
	text-align: left;
	padding: 0 2% 0 2%; /* T R B L */
	margin: 0 2% 0 2%;  /* T R B L */
	flex-grow: 1;
}
@media screen and (max-width: 50em) {
	.locations-list {
		font-size: 1em;
		padding: 0 1% 0 1%; /* T R B L */
		margin: 0 1% 0 1%;  /* T R B L */
	}
}
@media screen and (max-width: 40em) {
	.locations-list {
		font-size: 0.9375em;
		padding: 0 3.5% 0 3.5%; /* T R B L */
		margin: 0 3.5% 0 3.5%;  /* T R B L */
	}
}
@media screen and (max-width: 30em) {
	.locations-list {
		font-size: 0.9375em;
		padding: 0 3% 0 3%; /* T R B L */
		margin: 0 3% 0 3%;  /* T R B L */
	}
}

/* ------------------------------------------------------ */

.location-links a {
	color: #000000;
	text-decoration: none;
}

.location-links a:visited {
	color: #000000;
	text-decoration: none;
}

.location-links a:hover {
	color: #000000;
	text-decoration: underline;
}

.location-links a:active {
	color: #000000;
	text-decoration: none;
}

/* ------------------------------------------------------ */
/* Most Common Tablet Screen Resolutions in US (11/2020):
/*
/* 768x1024 (55.64%)
/* 1280x800 (5.74%)
/* 800x1280 (5.31%)
/* 601x962 (5.14%)
/* 962x601 (3.2%)
/*
/* Most Common Mobile Screen Resolutions in US (11/2020):
/*
/* 414x896 (19.44%)
/* 375x667 (13.67%)
/* 375x812 (12.3%)
/* 414x736 (8.91%)
/* 360x640 (8.21%)
/* ------------------------------------------------------ */