* {
	position: relative;
	box-sizing: border-box;
	background-clip: padding-box;
	hyphens: auto;
	scroll-behavior: smooth;
}

*, 
*::before, 
*::after { 
	margin: 0; 
	padding: 0; box-sizing: border-box; 
	max-width: 100%;
}

:root {
	--blue: 			hsl(219, 80%, 32%);
	--blue-light:	hsl(206, 100%, 75%);
	--green: 			hsl(147, 100%, 26%);
	--grey:				hsl(0, 0%, 20%); 
	--light-grey:	#eee;
}

html, body { 
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}

body {
	margin: 0; 
	padding: 0;
	background: #fff;
	font: normal 16px/1 'Segoe UI', sans-serif;
	line-height: 1.7;
	color: var(--grey);
	text-rendering: optimizeSpeed;
}

.flex { display: flex; }
.fr { flex-direction: row; }
.fc { flex-direction: column; }
.jc { justify-content: center; }
.ja { justify-content: space-around; }
.jb { justify-content: space-between; }
.je { justify-content: flex-end; }
.as { align-items: flex-start; }
.ac { align-items: center; }
.ae { align-items: flex-end; }
.astretch { align-items: stretch; }
.fw { flex-wrap: wrap; }
.fb > div { flex-basis: 0; flex-grow: 1; min-width: 300px; }
.gap1 { gap: 1rem; }
.gap2 { gap: 2rem; }
.mar20 { margin: 2rem 0; }
.pad2 { padding: 2rem; }
.pad20 { padding: 2rem 0; }
.narrow { width: 1000px; }

main {
	padding: 0 1rem;
}

.twins { 
	display: flex; 
	justify-content: center;
	flex-wrap: wrap; 
}
.twins > div {
	width: 50%; 
}

.center { text-align: center; }
.center-block { display: block; margin: 0 auto; }
.grey { background-color: var(--grey); }
.light-grey { background-color: var(--light-grey); }
.file span { color: var(--grey); }


p { 
	margin: 0 0 1.25rem; 
}	

ol {
	list-style-position: inside;
	margin-left: 32px;
}

li {
	margin-bottom: 8px;
}

.btn, 
button, 
input[type="submit"],
.priceChart + p a {
	padding: 4px 16px; 
	background-color: var(--blue);
	color: #fff; 
	text-decoration: none; 
	user-select: none;
	white-space: nowrap;
	border: 0; 
	border-radius: 8px;
	transition: all .3s linear;
	cursor: pointer;
}

.btn:hover, 
button:hover, 
input[type="submit"]:hover,
.priceChart + p a:hover {
	transform: scale(1.05); 
}

.green {
	background-color: var(--green);
}


.priceChart + p a {
	display: inline-block; 
	background-color: var(--blue);
}

.riceChart + p a:hover {
	transform: scale(1.05); 
}

/* Links with no decoration */

[href*="tel"],
nav a {
	text-decoration: none; 
}

header {
	gap: 1rem; 
	padding: 16px; 
}

header .btn {
	background-color: var(--blue);
	font-weight: bold;
}

nav {
	display: grid; 
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1rem; 
	width: 100%;
}

nav a {
	justify-self: stretch;
	padding: .25rem 1rem; 
	color: #222;
	border-radius: 8px;
}

.terms main {
	margin: 0 auto;
	padding: 2rem 1rem;
	width: 777px;
}

.wide {
	grid-column-start: 1; 
	grid-column-end: -1;
}



hgroup {
	margin: 0 0 2rem; 
	text-align: center;
}

hgroup p {
	margin: 0 auto; 
	padding: 1rem;
	width: 800px;
	background-color: var(--light-grey);
	text-align: center; 
	border-radius: 0 0 7px 7px;
}

h2 {
	font-weight: bold;
	font-size: 2rem;
}

h1 {
	padding: 2rem 4rem;
	background-color: var(--green);
	line-height: 1.2;
	color: #fff;
	text-align: center;
	border-radius: 4px;
} 

hgroup + div, hgroup + p {
	margin-top: 2rem;
}


/* HOME ------------------------------------------------------ */

.intro-map > div {
	padding: 1rem;
	width: 50%;
}

.intro-map .btn {
	margin-left: auto;
}

.map iframe {
	height: 100%; 
	width: 100%; 
}

/* UNIT PRICES ---------------------------------------------- */

.priceChart {
	margin-bottom: 40px;
	border-collapse: collapse;
}

.priceChart tr:first-of-type {
	background-color: #eee; 
	font-weight: bold; 
}

.priceChart td, .priceChart thead {
	padding: 4px 6px; 
	text-align: center;
	border: 1px solid #999; 
}

.priceChart td:first-of-type {
	text-align: left; 
}

climate td:nth-of-type(4),
climate td:nth-of-type(5),
garage td:nth-of-type(4),
garage td:nth-of-type(5),
outdoor td:nth-of-type(4) {
	padding-left: 10px;
	text-align: right;
}

.climate tr:first-of-type td:nth-of-type(5),
.garage tr:first-of-type td:nth-of-type(5) {
	padding-left: 10px; 
	background-color: #900;
	color: #fff;
	text-align: center; 
}

.priceChart + p {
	text-align: right;
}

.directions {
	margin: 4rem 0;
}
	

.directions h2 {
	margin-bottom: 16px;
	padding: 8px; 
	width: 100%;
	background-color: var(--green); 
	color: #fff;
	text-align: center;
	border-radius: 4px;
}

.directions iframe {
	height: 300px;
	width: 100%; 
}

.directions > div > div {
	padding: 0;
}

.directions > div {
	width: 300px;
	border: 1px solid #ccc;

	@media (max-width: 650px) {
		width: 100%;
	}
}

.directions b {
	display: block; 
	padding: .5rem 1rem;
	background-color: var(--blue);
	color: #fff;
}

.directions ul {
	margin-left: 2rem;
	padding: 1rem; 
}



/* FAQ  ----------------------------------------------------------------- */

.faq-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
  align-items: stretch; 
	margin: 0 auto 4rem;
	width: 1000px;
	list-style-type: none;
}

.faq-list li {
	padding: 1rem; 
	border: 1px solid #ccc;
}

.faq-list img {
	display: block;
	margin: 0 auto;
	height: 114px;
	width: auto;
}

/* CONTACT US ---------------------------------------------------------  */

label {
	display: block;
	font-size: .75rem;
	color: #777;
	text-transform: uppercase;
}

input, textarea {
	margin-bottom: 1rem;
	padding: 4px 8px;
	width: 100%; 
	font-size: 1rem;
	border: 1px solid var(--light-grey); 
	border-radius: 3px;
}

textarea {
	height: 150px; 
}

input[type="submit"] {
	padding: .5rem 1rem; 
	width: fit-content;
	line-height: 1;
	text-transform: uppercase;
}

.price-boxes {
    display: grid;
		grid-template-columns: repeat(auto-fit, minmax(49%, 1fr));
		justify-content: center;
		gap: 1rem;
		margin: 0 auto 4rem;
		width: 1000px;
}

.price-boxes > div {
	display: flex; 
	flex-direction: column;
	padding: 1rem;
	border: 1px solid #ccc;
}

.price-boxes h3 {
	font-weight: bold;
	font-size: 1.25rem;
	color: var(--blue);
}

.price-boxes > div > p {
	margin: 0; 
	line-height: 1.3;
}

.price-boxes > div > div {
    display: flex;
    justify-content: space-between;
		margin-top: auto;
}

.price {
	margin-top: auto;
	font-weight: bold;
	font-size: 1.125rem;
	text-align: right;
}

.price p {
	margin: 0 0 .5rem;
	color: var(--blue);
}

.price a {
	padding: .375rem 1rem;
	background-color: var(--blue);
	color: #fff; 
	text-decoration: none;
	border-radius: 7px;
}

/* INSURANCE --------------------------------------------------------------- */

.ins-rates {
	margin: 1rem auto;
	width: 500px; max-width: 100%;
	border-collapse: collapse;
}

.ins-rates tr td:nth-child(2) { 
	text-align: right;
}

td { padding: .25rem 2rem; border: 1px solid; }

tr:nth-child(even) { background-color: #eee; }

thead { font-weight: bold; background-color: #ddd; }


/* PAY ONLINE -------------------------------------------------------------- */

.payonline { 
	text-align: center; 
}

.payonline .btn {
	font-size: 1.5rem;
}


footer {
	margin-top: auto; 
	padding: 1rem 1rem 4rem;
	background-color: var(--blue);
	font-size: .7rem;
	color: #fff;
	text-align: center;
}

footer .twins {
	justify-content: space-between; 
	gap: 2rem 0;
	margin: 2rem auto;
	width: 50%; 
	font-size: 1.25rem;
	line-height: 1.5;	
	text-align: left;
}

footer .twins > div {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	width: fit-content;
	font-size: 1rem;
}

footer address {
	font-style: normal;
}

footer dt {
	font-weight: bold;
	font-size: 2rem;
}

footer dd {
	white-space: nowrap;
}

footer dl span {
	display: inline-block; 
	margin-right: 1rem;
	width: 100px;
}

footer p {
	margin: 0; 
}

footer a {
	color: #fff;
	text-decoration: none; 
}

footer a.btn.green {
	padding: .5rem 1rem;
	background-color: var(--green);
	font-weight: bold; 
	font-size: 1.5rem;
	letter-spacing: -.5px;
	text-align: center;
}

.copy {
	text-transform: uppercase; 
}

.foot-end a {
	color: #fff;
	text-decoration: none; 
	text-transform: uppercase;
}

.foot-end {
	width: 100%; 
}