/* ----------------------------------------------------------- */
/* SITE CSS -------------------------------------------------- */
/* ----------------------------------------------------------- */

/* GOOGLE FONTS */
/*
font-family: "Montserrat", sans-serif;
font-weight: 100-900; //variable
font-style: normal;

font-family: "Open Sans", sans-serif;
font-weight: 300-800; //variable
font-style: normal;
*/

:root {
	--headlines-font: "Montserrat", sans-serif;
	--body-font: "Open Sans", sans-serif;
	
	--site-wrapper-max-width: 1921px; /* also change the max-width:value in the @media declaration at bottom of this document */
	--wrapper-max-width: 1600px;
	
	--header-bar-height: 81px;
	--mobile-header-bar-height: 59px;
	
	--black: #222222;
	--black-rgb: 35,35,35;
	--white: #fff;
	--white-rgb: 255,255,255;
	--primary-color: #189ab4;
	--primary-color-rgb: 24,154,180;
	--secondary-color: #05445e;
	--secondary-color-rgb: 5,68,94;
	--accent-color: #75e6da;
	--accent-color-rgb: 117,230,218;
	--xlight-gray: #f0f1f2;
	--xlight-gray-rgb: 240,241,242;
	--light-gray: #d5d7da;
	--light-gray-rgb: 213,215,218;
	--medium-gray: #babdc2;
	--medium-gray-rgb: 186,189,194;
	--dark-gray: #9FA3AA;
	--dark-gray-rgb: 159,163,170;
	--xdark-gray: #75787d;
	--xdark-gray-rgb: 117,120,125;
	
	--border: 2px solid var(--xlight-gray);
}

html { scroll-behavior: smooth; scroll-padding-top: var(--header-bar-height); }

body {
	font-family: var(--body-font);
	background-color: #fff;
	color: var(--black);
}

.site-wrapper {
	/* if you want to contain the entire design within a max width with a background or border.
	   sections, hero sections, etc will no longer span the entire width  */
	position: relative;
	width: 100%;
	max-width: var(--site-wrapper-max-width);
	margin: 0 auto;
	border-left: 1px solid var(--light-gray);
	border-right: 1px solid var(--light-gray);
	border-bottom: 1px solid var(--light-gray);
}

.wrapper {
	width: 90%;
	max-width: var(--wrapper-max-width);
	margin: 0 auto;
	position: relative;
}


/* ALIGNMENTS -------------------------------------------------- */

.center, .text-align-center { text-align: center !important; }
.left, .text-align-left 	{ text-align: left !important; }
.right, .text-align-right 	{ text-align: right !important; }
.zero-auto-center 			{ margin: 0 auto !important; }



/* DISPLAYS -------------------------------------------------- */

.display-none			{ display: none !important; }
.display-block			{ display: block !important; }
.display-inline-block 	{ display: inline-block !important; }
.display-inline			{ display: inline !important; }


/* POSITIONS -------------------------------------------------- */

.position-relative	{ position: relative !important; }
.position-absolute 	{ position: absolute !important; }
.position-inherit  	{ position: inherit !important; }
.position-fixed	  	{ position: fixed !important; }
.position-sticky   	{ position: sticky !important; }


/* BORDERS -------------------------------------------------- */

.b-0  	{ border: none; }
.bt-0  	{ border-top: none; }
.br-0  	{ border-right: none; }
.bb-0	{ border-bottom: none; }
.bl-0  	{ border-left: none; }

.b	{ border: var(--border); }
.bt	{ border-top: var(--border); }
.br	{ border-right: var(--border); }
.bb	{ border-bottom: var(--border); }
.bl	{ border-left: var(--border); }

.br-0		{ border-radius: 0; }
.br-1px		{ border-radius: 1px; }
.br-2px		{ border-radius: 2px; }
.br-3px		{ border-radius: 3px; }
.br-4px		{ border-radius: 4px; }
.br-5px		{ border-radius: 5px; }
.br-6px		{ border-radius: 6px; }
.br-7px		{ border-radius: 7px; }
.br-8px		{ border-radius: 8px; }
.br-9px		{ border-radius: 9px; }
.br-10px	{ border-radius: 10px; }

hr {
	-moz-appearance: none;
	-webkit-appearance: none;
	width: 100%;
	height: 0;
	border-bottom: var(--border);
}

/* MARGINS -------------------------------------------------- */

.m-0  { margin: 0; }
.mt-0 { margin-top: 0; }
.mr-0 { margin-right: 0; }
.mb-0 { margin-bottom: 0; }
.ml-0 { margin-left: 0; }

.m-1px { margin: 1px; } 
.m-2px { margin: 2px; }
.m-3px { margin: 3px; }
.m-4px { margin: 4px; }
.m-5px { margin: 5px; }
.m-6px { margin: 6px; }
.m-7px { margin: 7px; }
.m-8px { margin: 8px; }
.m-9px { margin: 9px; }
.m-10px { margin: 10px; }

.mt-1px { margin-top: 1px; }
.mt-2px { margin-top: 2px; }
.mt-3px { margin-top: 3px; }
.mt-4px { margin-top: 4px; }
.mt-5px { margin-top: 5px; }
.mt-6px { margin-top: 6px; }
.mt-7px { margin-top: 7px; }
.mt-8px { margin-top: 8px; }
.mt-9px { margin-top: 9px; }
.mt-10px { margin-top: 10px; }

.mb-1px { margin-bottom: 1px; }
.mb-2px { margin-bottom: 2px; }
.mb-3px { margin-bottom: 3px; }
.mb-4px { margin-bottom: 4px; }
.mb-5px { margin-bottom: 5px; }
.mb-6px { margin-bottom: 6px; }
.mb-7px { margin-bottom: 7px; }
.mb-8px { margin-bottom: 8px; }
.mb-9px { margin-bottom: 9px; }
.mb-10px { margin-bottom: 10px; }

.ml-1px { margin-left: 1px; }
.ml-2px { margin-left: 2px; }
.ml-3px { margin-left: 3px; }
.ml-4px { margin-left: 4px; }
.ml-5px { margin-left: 5px; }
.ml-6px { margin-left: 6px; }
.ml-7px { margin-left: 7px; }
.ml-8px { margin-left: 8px; }
.ml-9px { margin-left: 9px; }
.ml-10px { margin-left: 10px; }

.mr-1px { margin-right: 1px; }
.mr-2px { margin-right: 2px; }
.mr-3px { margin-right: 3px; }
.mr-4px { margin-right: 4px; }
.mr-5px { margin-right: 5px; }
.mr-6px { margin-right: 6px; }
.mr-7px { margin-right: 7px; }
.mr-8px { margin-right: 8px; }
.mr-9px { margin-right: 9px; }
.mr-10px { margin-right: 10px; }

.m-1pct { margin: 1%; }
.m-2pct { margin: 2%; }
.m-3pct { margin: 3%; }
.m-4pct { margin: 4%; }
.m-5pct { margin: 5%; }
.m-6pct { margin: 6%; }
.m-7pct { margin: 7%; }
.m-8pct { margin: 8%; }
.m-9pct { margin: 9%; }
.m-10pct { margin: 10%; }

.mt-1pct { margin-top: 1%; }
.mt-2pct { margin-top: 2%; }
.mt-3pct { margin-top: 3%; }
.mt-4pct { margin-top: 4%; }
.mt-5pct { margin-top: 5%; }
.mt-6pct { margin-top: 6%; }
.mt-7pct { margin-top: 7%; }
.mt-8pct { margin-top: 8%; }
.mt-9pct { margin-top: 9%; }
.mt-10pct { margin-top: 10%; }

.mb-1pct { margin-bottom: 1%; }
.mb-2pct { margin-bottom: 2%; }
.mb-3pct { margin-bottom: 3%; }
.mb-4pct { margin-bottom: 4%; }
.mb-5pct { margin-bottom: 5%; }
.mb-6pct { margin-bottom: 6%; }
.mb-7pct { margin-bottom: 7%; }
.mb-8pct { margin-bottom: 8%; }
.mb-9pct { margin-bottom: 9%; }
.mb-10pct { margin-bottom: 10%; }

.ml-1pct { margin-left: 1%; }
.ml-2pct { margin-left: 2%; }
.ml-3pct { margin-left: 3%; }
.ml-4pct { margin-left: 4%; }
.ml-5pct { margin-left: 5%; }
.ml-6pct { margin-left: 6%; }
.ml-7pct { margin-left: 7%; }
.ml-8pct { margin-left: 8%; }
.ml-9pct { margin-left: 9%; }
.ml-10pct { margin-left: 10%; }

.mr-1pct { margin-right: 1%; }
.mr-2pct { margin-right: 2%; }
.mr-3pct { margin-right: 3%; }
.mr-4pct { margin-right: 4%; }
.mr-5pct { margin-right: 5%; }
.mr-6pct { margin-right: 6%; }
.mr-7pct { margin-right: 7%; }
.mr-8pct { margin-right: 8%; }
.mr-9pct { margin-right: 9%; }
.mr-10pct { margin-right: 10%; }

.m-1em { margin: 1.0em; }
.m-2em { margin: 2.0em; }
.m-3em { margin: 3.0em; }
.m-4em { margin: 4.0em; }
.m-5em { margin: 5.0em; }

.mt-1em { margin-top: 1.0em; }
.mt-2em { margin-top: 2.0em; }
.mt-3em { margin-top: 3.0em; }
.mt-4em { margin-top: 4.0em; }
.mt-5em { margin-top: 5.0em; }

.mb-1em { margin-bottom: 1.0em; }
.mb-2em { margin-bottom: 2.0em; }
.mb-3em { margin-bottom: 3.0em; }
.mb-4em { margin-bottom: 4.0em; }
.mb-5em { margin-bottom: 5.0em; }

.ml-1em { margin-left: 1.0em; }
.ml-2em { margin-left: 2.0em; }
.ml-3em { margin-left: 3.0em; }
.ml-4em { margin-left: 4.0em; }
.ml-5em { margin-left: 5.0em; }

.mr-1em { margin-right: 1.0em; }
.mr-2em { margin-right: 2.0em; }
.mr-3em { margin-right: 3.0em; }
.mr-4em { margin-right: 4.0em; }
.mr-5em { margin-right: 5.0em; }


/* PADDING -------------------------------------------------- */

.p-0  { padding: 0; }
.pt-0 { padding-top: 0; }
.pr-0 { padding-right: 0; }
.pb-0 { padding-bottom: 0; }
.pl-0 { padding-left: 0; }

.p-1px { padding: 1px; } 
.p-2px { padding: 2px; }
.p-3px { padding: 3px; }
.p-4px { padding: 4px; }
.p-5px { padding: 5px; }
.p-6px { padding: 6px; }
.p-7px { padding: 7px; }
.p-8px { padding: 8px; }
.p-9px { padding: 9px; }
.p-10px { padding: 10px; }

.pt-1px { padding-top: 1px; }
.pt-2px { padding-top: 2px; }
.pt-3px { padding-top: 3px; }
.pt-4px { padding-top: 4px; }
.pt-5px { padding-top: 5px; }
.pt-6px { padding-top: 6px; }
.pt-7px { padding-top: 7px; }
.pt-8px { padding-top: 8px; }
.pt-9px { padding-top: 9px; }
.pt-10px { padding-top: 10px; }

.pb-1px { padding-bottom: 1px; }
.pb-2px { padding-bottom: 2px; }
.pb-3px { padding-bottom: 3px; }
.pb-4px { padding-bottom: 4px; }
.pb-5px { padding-bottom: 5px; }
.pb-6px { padding-bottom: 6px; }
.pb-7px { padding-bottom: 7px; }
.pb-8px { padding-bottom: 8px; }
.pb-9px { padding-bottom: 9px; }
.pb-10px { padding-bottom: 10px; }

.pl-1px { padding-left: 1px; }
.pl-2px { padding-left: 2px; }
.pl-3px { padding-left: 3px; }
.pl-4px { padding-left: 4px; }
.pl-5px { padding-left: 5px; }
.pl-6px { padding-left: 6px; }
.pl-7px { padding-left: 7px; }
.pl-8px { padding-left: 8px; }
.pl-9px { padding-left: 9px; }
.pl-10px { padding-left: 10px; }

.pr-1px { padding-right: 1px; }
.pr-2px { padding-right: 2px; }
.pr-3px { padding-right: 3px; }
.pr-4px { padding-right: 4px; }
.pr-5px { padding-right: 5px; }
.pr-6px { padding-right: 6px; }
.pr-7px { padding-right: 7px; }
.pr-8px { padding-right: 8px; }
.pr-9px { padding-right: 9px; }
.pr-10px { padding-right: 10px; }

.p-1pct { padding: 1%; }
.p-2pct { padding: 2%; }
.p-3pct { padding: 3%; }
.p-4pct { padding: 4%; }
.p-5pct { padding: 5%; }
.p-6pct { padding: 6%; }
.p-7pct { padding: 7%; }
.p-8pct { padding: 8%; }
.p-9pct { padding: 9%; }
.p-10pct { padding: 10%; }

.pt-1pct { padding-top: 1%; }
.pt-2pct { padding-top: 2%; }
.pt-3pct { padding-top: 3%; }
.pt-4pct { padding-top: 4%; }
.pt-5pct { padding-top: 5%; }
.pt-6pct { padding-top: 6%; }
.pt-7pct { padding-top: 7%; }
.pt-8pct { padding-top: 8%; }
.pt-9pct { padding-top: 9%; }
.pt-10pct { padding-top: 10%; }

.pb-1pct { padding-bottom: 1%; }
.pb-2pct { padding-bottom: 2%; }
.pb-3pct { padding-bottom: 3%; }
.pb-4pct { padding-bottom: 4%; }
.pb-5pct { padding-bottom: 5%; }
.pb-6pct { padding-bottom: 6%; }
.pb-7pct { padding-bottom: 7%; }
.pb-8pct { padding-bottom: 8%; }
.pb-9pct { padding-bottom: 9%; }
.pb-10pct { padding-bottom: 10%; }

.pl-1pct { padding-left: 1%; }
.pl-2pct { padding-left: 2%; }
.pl-3pct { padding-left: 3%; }
.pl-4pct { padding-left: 4%; }
.pl-5pct { padding-left: 5%; }
.pl-6pct { padding-left: 6%; }
.pl-7pct { padding-left: 7%; }
.pl-8pct { padding-left: 8%; }
.pl-9pct { padding-left: 9%; }
.pl-10pct { padding-left: 10%; }

.pr-1pct { padding-right: 1%; }
.pr-2pct { padding-right: 2%; }
.pr-3pct { padding-right: 3%; }
.pr-4pct { padding-right: 4%; }
.pr-5pct { padding-right: 5%; }
.pr-6pct { padding-right: 6%; }
.pr-7pct { padding-right: 7%; }
.pr-8pct { padding-right: 8%; }
.pr-9pct { padding-right: 9%; }
.pr-10pct { padding-right: 10%; }

.p-1em { padding: 1.0em; }
.p-2em { padding: 2.0em; }
.p-3em { padding: 3.0em; }
.p-4em { padding: 4.0em; }
.p-5em { padding: 5.0em; }

.pt-1em { padding-top: 1.0em; }
.pt-2em { padding-top: 2.0em; }
.pt-3em { padding-top: 3.0em; }
.pt-4em { padding-top: 4.0em; }
.pt-5em { padding-top: 5.0em; }

.pb-1em { padding-bottom: 1.0em; }
.pb-2em { padding-bottom: 2.0em; }
.pb-3em { padding-bottom: 3.0em; }
.pb-4em { padding-bottom: 4.0em; }
.pb-5em { padding-bottom: 5.0em; }

.pl-1em { padding-left: 1.0em; }
.pl-2em { padding-left: 2.0em; }
.pl-3em { padding-left: 3.0em; }
.pl-4em { padding-left: 4.0em; }
.pl-5em { padding-left: 5.0em; }

.pr-1em { padding-right: 1.0em; }
.pr-2em { padding-right: 2.0em; }
.pr-3em { padding-right: 3.0em; }
.pr-4em { padding-right: 4.0em; }
.pr-5em { padding-right: 5.0em; }


/* DARKEN LIGHTEN OVERLAY ------------------------------------------- */

.darken-5, .darken-10, .darken-15, .darken-20, .darken-25, .darken-30, .darken-35, .darken-40, .darken-45, .darken-50, .darken-55, .darken-60, .darken-65, .darken-70, .darken-75, .darken-80, .darken-85, .darken-90, .darken-95, .lighten-5, .lighten-10, .lighten-15, .lighten-20, .lighten-25, .lighten-30, .lighten-35, .lighten-40, .lighten-45, .lighten-50, .lighten-55, .lighten-60, .lighten-65, .lighten-70, .lighten-75, .lighten-80, .lighten-85, .lighten-90, .lighten-95 {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0  !important;
}
.darken-5  { background-color: rgba(0,0,0,0.05); }
.darken-10 { background-color: rgba(0,0,0,0.10); }
.darken-15 { background-color: rgba(0,0,0,0.15); }
.darken-20 { background-color: rgba(0,0,0,0.20); }
.darken-25 { background-color: rgba(0,0,0,0.25); }
.darken-30 { background-color: rgba(0,0,0,0.30); }
.darken-35 { background-color: rgba(0,0,0,0.35); }
.darken-40 { background-color: rgba(0,0,0,0.40); }
.darken-45 { background-color: rgba(0,0,0,0.45); }
.darken-50 { background-color: rgba(0,0,0,0.50); }
.darken-55 { background-color: rgba(0,0,0,0.55); }
.darken-60 { background-color: rgba(0,0,0,0.60); }
.darken-65 { background-color: rgba(0,0,0,0.65); }
.darken-70 { background-color: rgba(0,0,0,0.70); }
.darken-75 { background-color: rgba(0,0,0,0.75); }
.darken-80 { background-color: rgba(0,0,0,0.80); }
.darken-85 { background-color: rgba(0,0,0,0.85); }
.darken-90 { background-color: rgba(0,0,0,0.90); }
.darken-95 { background-color: rgba(0,0,0,0.95); }

.lighten-5  { background-color: rgba(255,255,255,0.05); }
.lighten-10 { background-color: rgba(255,255,255,0.10); }
.lighten-15 { background-color: rgba(255,255,255,0.15); }
.lighten-20 { background-color: rgba(255,255,255,0.20); }
.lighten-25 { background-color: rgba(255,255,255,0.25); }
.lighten-30 { background-color: rgba(255,255,255,0.30); }
.lighten-35 { background-color: rgba(255,255,255,0.35); }
.lighten-40 { background-color: rgba(255,255,255,0.40); }
.lighten-45 { background-color: rgba(255,255,255,0.45); }
.lighten-50 { background-color: rgba(255,255,255,0.50); }
.lighten-55 { background-color: rgba(255,255,255,0.55); }
.lighten-60 { background-color: rgba(255,255,255,0.60); }
.lighten-65 { background-color: rgba(255,255,255,0.65); }
.lighten-70 { background-color: rgba(255,255,255,0.70); }
.lighten-75 { background-color: rgba(255,255,255,0.75); }
.lighten-80 { background-color: rgba(255,255,255,0.80); }
.lighten-85 { background-color: rgba(255,255,255,0.85); }
.lighten-90 { background-color: rgba(255,255,255,0.90); }
.lighten-95 { background-color: rgba(255,255,255,0.95); }


/* FLEXBOX -------------------------------------------------- */

.flexbox-row {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: flex-start;
	align-items: flex-start;
}
.flexbox-row-vertical-center 			{ align-items: center; align-content: center; }
.flexbox-justify-content-center 		{ justify-content: center; }
.flexbox-justify-content-space-between	{ justify-content: space-between; }
.flexbox-justify-content-space-around 	{ justify-content: space-around; }
.flexbox-justify-content-space-evenly 	{ justify-content: space-evenly; }
.flexbox-justify-content-flex-start 	{ justify-content: flex-start; }
.flexbox-stretch 						{ align-items: stretch; }
.flexbox-row-reverse 					{ flex-direction: row-reverse; }
.flexbox-column-reverse 				{ flex-direction: column-reverse; }
.flex-grow 								{ flex-grow: 1; }


/* CONTAINERS -------------------------------------------------- */

.container-1pct { width: 1%; } .container-2pct { width: 2%; } .container-3pct { width: 3%; } .container-4pct { width: 4%; } .container-5pct { width: 5%; } .container-6pct { width: 6%; } .container-7pct { width: 7%; } .container-8pct { width: 8%; } .container-9pct { width: 9%; } .container-10pct { width: 10%; } .container-11pct { width: 11%; } .container-12pct { width: 12%; } .container-13pct { width: 13%; } .container-14pct { width: 14%; } .container-15pct { width: 15%; } .container-16pct { width: 16%; } .container-17pct { width: 17%; } .container-18pct { width: 18%; } .container-19pct { width: 19%; } .container-20pct { width: 20%; } .container-21pct { width: 21%; } .container-22pct { width: 22%; } .container-23pct { width: 23%; } .container-24pct { width: 24%; } .container-25pct { width: 25%; } .container-26pct { width: 26%; } .container-27pct { width: 27%; } .container-28pct { width: 28%; } .container-29pct { width: 29%; } .container-30pct { width: 30%; } .container-31pct { width: 31%; } .container-32pct { width: 32%; } .container-33pct { width: 33%; } .container-34pct { width: 34%; } .container-35pct { width: 35%; } .container-36pct { width: 36%; } .container-37pct { width: 37%; } .container-38pct { width: 38%; } .container-39pct { width: 39%; } .container-40pct { width: 40%; } .container-41pct { width: 41%; } .container-42pct { width: 42%; } .container-43pct { width: 43%; } .container-44pct { width: 44%; } .container-45pct { width: 45%; } .container-46pct { width: 46%; } .container-47pct { width: 47%; } .container-48pct { width: 48%; } .container-49pct { width: 49%; } .container-50pct { width: 50%; } .container-51pct { width: 51%; } .container-52pct { width: 52%; } .container-53pct { width: 53%; } .container-54pct { width: 54%; } .container-55pct { width: 55%; } .container-56pct { width: 56%; } .container-57pct { width: 57%; } .container-58pct { width: 58%; } .container-59pct { width: 59%; } .container-60pct { width: 60%; } .container-61pct { width: 61%; } .container-62pct { width: 62%; } .container-63pct { width: 63%; } .container-64pct { width: 64%; } .container-65pct { width: 65%; } .container-66pct { width: 66%; } .container-67pct { width: 67%; } .container-68pct { width: 68%; } .container-69pct { width: 69%; } .container-70pct { width: 70%; } .container-71pct { width: 71%; } .container-72pct { width: 72%; } .container-73pct { width: 73%; } .container-74pct { width: 74%; } .container-75pct { width: 75%; } .container-76pct { width: 76%; } .container-77pct { width: 77%; } .container-78pct { width: 78%; } .container-79pct { width: 79%; } .container-80pct { width: 80%; } .container-81pct { width: 81%; } .container-82pct { width: 82%; } .container-83pct { width: 83%; } .container-84pct { width: 84%; } .container-85pct { width: 85%; } .container-86pct { width: 86%; } .container-87pct { width: 87%; } .container-88pct { width: 88%; } .container-89pct { width: 89%; } .container-90pct { width: 90%; } .container-91pct { width: 91%; } .container-92pct { width: 92%; } .container-93pct { width: 93%; } .container-94pct { width: 94%; } .container-95pct { width: 95%; } .container-96pct { width: 96%; } .container-97pct { width: 97%; } .container-98pct { width: 98%; } .container-99pct { width: 99%; } .container-100pct { width: 100%; }



/* SECTIONS ------------------------------------------- */

.section 			{ position: relative; padding: 4.5em 0; }

.section-white 		{ background-color: var(--white); }
.section-black 		{ background-color: var(--black); }
.section-primary 	{ background-color: var(--primary-color); }
.section-secondary 	{ background-color: var(--secondary-color); }
.section-accent 	{ background-color: var(--accent-color); }
.section-xlight-gray{ background-color: var(--xlight-gray); }
.section-light-gray { background-color: var(--light-gray); }
.section-medium-gray{ background-color: var(--medium-gray); }
.section-dark-gray 	{ background-color: var(--dark-gray); }
.section-xdark-gray { background-color: var(--xdark-gray); }

.section-hero {
	padding: 4.0em 0;
	position: relative;
	width: 100%;
	min-height: calc(100vh - var(--header-bar-height));
	z-index: 9900;
	display: flex;
	justify-content: center; /* horizontally center content */
	align-items: center; /* vertically center content */
}
.transparent-header .section-hero {
	padding: 6.5em 0;
	min-height: 100vh;
}
.section-hero-small { min-height: 50vh; }
.transparent-header .section-hero-small { min-height: 57vh; }

.section-hero-tiny  { min-height: 25vh; }
.transparent-header .section-hero-tiny  { min-height: 32vh; }

.section-hero-content { 
	width: 90%; 
	max-width: var(--wrapper-max-width); 
	margin: 0 auto; 
	z-index: 500;
}


/* TYPOGRAPHY ------------------------------------------- */

.color-black 		{ color: var(--black) !important; }
.color-white 		{ color: var(--white) !important; }
.color-primary 		{ color: var(--primary-color) !important; }
.color-secondary 	{ color: var(--secondary-color) !important; }
.color-accent 		{ color: var(--accent-color) !important; }
.color-xlight-gray 	{ color: var(--xlight-gray) !important; }
.color-light-gray 	{ color: var(--light-gray) !important; }
.color-medium-gray 	{ color: var(--medium-gray) !important; }
.color-dark-gray 	{ color: var(--dark-gray) !important; }
.color-xdark-gray 	{ color: var(--xdark-gray) !important; }

.font-weight-normal	{ font-weight: normal !important; }
.font-weight-100 	{ font-weight: 100 !important; }
.font-weight-200 	{ font-weight: 200 !important; }
.font-weight-300 	{ font-weight: 300 !important; }
.font-weight-400 	{ font-weight: 400 !important; }
.font-weight-500 	{ font-weight: 500 !important; }
.font-weight-600 	{ font-weight: 600 !important; }
.font-weight-700 	{ font-weight: 700 !important; }
.font-weight-800 	{ font-weight: 800 !important; }
.font-weight-900 	{ font-weight: 900 !important; }

.text-transform-lowercase 	{ text-transform: lowercase; }
.text-transform-uppercase 	{ text-transform: uppercase; letter-spacing: 0.02em; }
.text-transform-capitalize 	{ text-transform: capitalize; }
.text-transform-none 		{ text-transform: none; }

h1,h2,h3,h4,h5,h6 {
	font-family: var(--headlines-font);
	font-weight: 550;
	line-height: 1.15em;
	margin: 0 0 0.6em 0;
	color: var(--black);
}

h1 { font-size: 2.2em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.15em; }
h5 { font-size: 1.0em; }
h6 { font-size: 0.85em; }

span.sub-heading {
	display: block;
	font-family: var(--body-font);
	text-transform: uppercase;
	font-size: 0.45em;
	line-height: 1.6em;
	font-weight: 400;
	letter-spacing: 0.05em;
	color: rbga(var(--black-rgb),0.6);
	margin: 0.25em 0;
}

.section-hero h1 { font-size: 2.7em; text-shadow: 0 0 10px rgba(0,0,0,0.6); margin: 0 0 0.5em 0; }

p {
	font-family: var(--body-font);
	color: var(--black);
	font-size: 1.0em;
	line-height: 1.55em;
	margin: 0 0 1.0em 0;
	font-weight: 400;
}

.lead-in { font-size: 1.25em; font-weight: 370; line-height: 1.6em; }
.section-hero .lead-in { font-size: 1.4em; font-weight: 340; text-shadow: 0 0 10px rgba(0,0,0,0.6); }

.footer p {
	font-size: 0.95em;
}

.leaflet-popup-content * {
	margin: 0 !important;
}

.fine-print {
	font-size: 0.85em;
	color: var(--dark-gray);
}
.form-label-description {
	margin: 0 0 0.6em 0;
	font-size: 0.85em;
	line-height: 1.5em;
	color: var(--dark-gray);
}
.temp-data-message {
	position: relative;
	padding: 0.8em 3.0em 0.8em 1.0em;
	background-color: #9cf9e1;
	color: var(--xdark-gray);
	border-radius: 3px;
	margin-bottom: 2.0em;
}
.temp-data-error {
	position: relative;
	padding: 0.8em 3.0em 0.8em 1.0em;
	background-color: red;
	color: #fff;
	border-radius: 3px;
	margin-bottom: 2.0em;
}

.font-size-large { font-size: 1.1em; }
.font-size-small { font-size: 0.95em; }
.font-size-tiny  { font-size: 0.85em; }

ul, ol { margin: 0 0 1.0em 1.2em; }
ul { list-style: disc; }
ol { list-style: decimal; }

ul.no-bullet, ol.no-bullet { list-style: none; margin: 0 0 1.0em 0; }

li {
	font-family: var(--body-font);
	color: var(--black);
	font-size: 1.0em;
	line-height: 1.45em;
	margin: 0 0 0.4em 0;
	font-weight: 400;
}
.footer li {
	font-size: 0.95em;
}
.site-cms li, .site-cms-admin li {
	line-height: 1.35em;
	margin: 0 0 0.3em 0;
}


li::marker { color: inherit; }
.site-cms li::marker, .site-cms-admin li::marker { color: var(--dark-gray); }


.errors ul {
	margin-bottom: 2.1em;
}
.errors li {
	color: red;
	font-size: 0.95em;
}

span.project-listing-title {
	display: block;
	font-family: var(--headlines-font);
	font-weight: 550;
	font-size: 1.0em;
	line-height: 1.15em;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin: 0 0 2px 0;
	color: var(--black);
}
span.project-listing-meta {
	font-family: var(--body-font);
	color: var(--black);
	font-size: 0.95em;
	line-height: 1.35em;
	margin: 0 0 5px 0;
	font-weight: 400;
}


h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong { font-weight: 700; }
p strong { font-weight: 700; }
li strong { font-weight: 700; }


/* FONT AWESOME ICONS --------------------------------------------------- */

.fa-solid, .fa-regular, .fa-light, .fa-duotone, .fa-thin { margin: 0; }

li span.fa-li {
	color: var(--medium-gray);
	font-size: 1.0em;
	left: -2.5em; /* this is an override of the font-awesome attribute to give a little more space between the bullet and the text */
}
.breadcrumb-bar i { padding: 0 0.25em; }
.footer a i {
	font-size: 1.2em;
	vertical-align: middle;
	padding-right: 0.4em;
}
.temp-data-message-error-close {
	cursor: pointer;
	padding: 0.5em;
	position: absolute;
	top: 50%;
	right: 1.0em;
	transform: translateY(-50%);
}
i.project-listing-construction-status-badge {
	position: absolute;
	top: 1.4em;
	left: 1.5em;
	background-color: rgba(255,255,255,0.8);
	color: var(--xdark-gray);
	font-size: 1.0em;
	padding: 6px;
	border-radius: 3px;
}
i.project-page-construction-badge {
	display: inline-block;
	background-color: rgba(255,255,255,0.8);
	color: var(--xdark-gray);
	font-size: 1.2em;
	padding: 9px;
	border-radius: 3px;
	text-shadow: none;
	margin-bottom: 0.7em;
}



/* FORMS ---------------------------------------------------------------- */

input:focus, select:focus, textarea:focus, button:focus { outline: none; }
input::placeholder { color: var(--light-gray); }

fieldset {
	margin: 0;
	position: relative;
}
fieldset + fieldset {
	margin: 2.0em 0 0 0;
}

label {
	display: block;
	position: relative;
	font-family: var(--headlines-font);
	font-weight: 560;
	font-size: 1.1em;
	margin: 0 0 0.2em 0;
}
label.required::before {
	content: "*";
	font-weight: 700;
	position: absolute;
	top: 0.18em;
	left: -0.8em;
}
label.radio-label {
	font-family: var(--body-font);
	background-color: #f9f9f9;
	padding: 0.7em 1.0em 0.8em 0.6em;
	margin: 0 3px 3px 0;
	border-radius: 3px;
	font-weight: 400;
	font-size: 1.0em;
	transition: all 160ms;
}
label.radio-label:hover {
	background-color: var(--xlight-gray);
}

input[type=text], input[type=url] {
	-webkit-appearance: none;
	-moz-appearance: none;
	outline: none;
	border: 1px solid var(--medium-gray);
	border-radius: 4px;
	font-family: var(--body-font);
	font-weight: 400;
	font-size: 1.0em;
	padding: 0.6em;
	width: 100%;
}
input[type=text]:focus, input[type=url]:focus {
	border: 1px solid var(--primary-color);
	box-shadow: 0 0 3px rgba(var(--secondary-color-rgb),0.5);
}

input[type=text].cms-project-filter-input {
	flex-grow: 1;
	width: auto;
}

textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	outline: none;
	border: 1px solid var(--medium-gray);
	border-radius: 4px;
	font-family: var(--body-font);
	font-weight: 400;
	font-size: 1.0em;
	padding: 0.6em;
	width: 100%;
	height: 12em;
}
textarea:focus {
	border: 2px solid var(--primary-color);
}

button {
	-moz-appearance: none;
	-webkit-appearance: none;
	border: none;
	cursor: pointer;
	display: inline-block;
	text-align: center;
	font-family: var(--headlines-font);
	text-transform: uppercase;
	letter-spacing: normal;
	font-weight: 600;
	font-size: 0.95em;
	letter-spacing: 0.025em;
	line-height: 1.1em;
	padding: 1.05em 1.2em;
	border-radius: 3px;
	color: #fff;
	background-color: var(--primary-color);
	transition: all 250ms ease-in-out
}
button:hover {
	color: #fff;
	background-color: var(--secondary-color);
}

.project-filter-select {
	width: 220px;
	height: 36px;
	padding: 0 0.5em;
	font-size: 0.9em;
	margin: 0 5px;
	background-color: #f0f0f0;
	border: 2px solid #ccc;
	border-radius: 4px;
	font-family: var(--headlines-font);
}

/* TABLES ---------------------------------------------------------------- */

table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	text-align: left;
}
th, td {
	padding: 0.6em 0.4em;
	border-top: 1px dotted rgba(var(--light-gray-rgb),0.75);
}
td span.specification-label {
	display: inline-block;
	min-width: 13ch;
	font-weight: 600;
	color: var(--dark-gray);
}
td span.specification-data {
	display: block;
}
td span.specification-data strong {
	font-weight: 650;
}

.residential-specs-table tr:hover {
	background-color: rgba(var(--light-gray-rgb),0.15);
}

table.cms-table {
	max-width: 100%;
}
.cms-table th, .cms-table td {
	padding: 0.7em;
}
.cms-table th:first-of-type, .cms-table td:first-of-type {
	padding-left: 0.2em;
}
.cms-table th:last-of-type, .cms-table td:last-of-type {
	padding-right: 0;
}
.cms-table tr {
	background-color: transparent;
}
.cms-table tr:hover {
	background-color: rgba(var(--light-gray-rgb), 0.12);
}

.cms-table tr.table-row-private {
	background-color: rgba(255,0,0,0.07);
}
.cms-table tr.table-row-closed {
	background-color: rgba(255,0,0,0.14);
}
.cms-table thead tr {
	border-top: none;
}
.cms-table th {
	font-family: var(--headlines-font);
	font-weight: 700;
	font-size: 0.95em;
}
.cms-table td {
	font-family: var(--body-font);
	font-size: 0.95em;
	font-weight: 400;
}

/* IMAGES, VIDEOS, MAPS ------------------------------------------------- */

img {
	display: inline-block;
	max-width: 100%;
}

.fancybox__container { z-index: 9999; }
.fancybox__backdrop { background: rgba(var(--black-rgb), 0.93); }
.fancybox__caption { color: var(--dark-gray); }
.fancybox__nav { 
	--f-button-color: var(--primary-color); 
	--f-button-hover-color: var(--white);
	--f-button-hover-bg: rgba(var(--white-rgb), 0.15);
	--f-button-active-bg: rgba(var(--white-rgb), 0.3);
}

.image-fill-width {
	display: inline-block;
	width: 100%;
	height: auto;
	vertical-align: middle;
	text-align: center;
}
.image-fill-height {
	display: inline-block;
	width: auto;
	height: 100%;
	vertical-align: middle;
	text-align: center;
}
.image-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.header-logo {
	display: inline-block;
	max-width: 100px;
	height: auto;
}
.header-logo-reverse {
	display: none;
}
.footer-logo {
	display: inline-block;
	width: 100%;
	max-width: 106px;
	height: auto;
	opacity: 0.86;
	margin-bottom: 1.5em;
}

.section-hero video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hero-video-poster {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.video-wrapper {
	background-color: #fff;
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 0px;
	height: 0;
	overflow: hidden;
	margin: 0 auto;
}
.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	overflow: hidden;
}

.bbb-seal {
	display: block;
	width: 106px;
	height: auto;
	margin-top: 20px;
}

.leaflet-map {
	width: 100%;
	position: relative;
}
.map-attribution {
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 0.65em 0.8em;
	font-family: var(--body-font);
	font-size: 0.8em;
	font-weight: 400;
	color: #666;
	background: rgba(255, 255, 255, 0.7);
	border-radius: 4px 0 0 0;
	z-index: 1000;
}
.contact-map {
	height: 65vh;
}
.leaflet-div-icon {
	border: none !important;
	background: none !important;
}



/* LINKS, BUTTONS, NAVIGATION, BREADCRUMBS ------------------------------------ */

a { touch-action: none; }

a:link, a:visited {
	color: var(--primary-color);
	text-decoration: none;
	outline: none;
	transition: all 200ms ease-in-out;
}
a:hover, a:focus {
	color: var(--secondary-color);
	outline: none;
}

.main-nav a:link, .main-nav a:visited {
	display: inline-block;
	font-family: var(--headlines-font);
	text-transform: uppercase;
	letter-spacing: normal;
	font-weight: 400;
	font-size: 0.93em;
	letter-spacing: 0.025em;
	padding: 0.8em 0.85em;
	text-align: center;
	color: #1d1d1d;
	background-color: transparent;
	border-radius: 3px;
}
.main-nav a:hover, .main-nav a:focus {
	color: #fff;
	background-color: rgba(255,255,255,0.15);
}
.site-home a.main-nav-home-link,
.site-about a.main-nav-about-link,
.site-residential a.main-nav-residential-link,
.site-commercial a.main-nav-commercial-link,
.site-contact a.main-nav-contact-link,
.site-cms-dashboard a.main-nav-cms-dashboard-link,
.site-cms-admin a.main-nav-cms-admin-link {
	font-weight: 700;
}

.button:link, .button:visited {
	display: inline-block;
	text-align: center;
	font-family: var(--headlines-font);
	text-transform: uppercase;
	letter-spacing: normal;
	font-weight: 600;
	font-size: 0.95em;
	letter-spacing: 0.025em;
	line-height: 1.1em;
	padding: 1.05em 1.2em;
	border-radius: 3px;
	color: #fff;
	background-color: var(--primary-color);
}
.button:hover, .button:focus {
	color: #fff;
	background-color: var(--secondary-color);
}
.button-small:link, .button-small:visited { font-size: 0.8em; padding: 0.1.0em 1.1em; }
.button-tiny:link, .button-tiny:visited { font-size: 0.7em; padding: 0.85em 0.9em; }

.button-outline:link, .button-outline:visited { background-color: transparent; color: var(--primary-color); border: 1px solid var(--primary-color); }
.button-outline:hover, .button-outline:focus { background-color: var(--primary-color); color: var(--white); border: 1px solid var(--primary-color); }
.button-white:link, .button-white:visited { background-color: var(--white); color: var(--black); }
.button-white:hover, .button-white:focus { background-color: var(--black); color: var(--white); }
.button-white-transparency:link, .button-white-transparency:visited { background-color: rgba(255,255,255,0.0); border: 1px solid rgba(255,255,255,0.6); color: #fff; text-shadow: 0 0 5px rgba(0,0,0,0.6); }
.button-white-transparency:hover, .button-white-transparency:focus { background-color: rgba(255,255,255,1.0); border: 1px solid rgba(255,255,255,1.0); color: var(--black); text-shadow: none; }
.button-black:link, .button-black:visited { background-color: var(--black); color: var(--white); }
.button-black:hover, .button-black:focus { background-color: var(--white); color: var(--black); }
.button-black-transparency:link, .button-black-transparency:visited { background-color: rgba(0,0,0,0.0); border: 1px solid rgba(0,0,0,0.6); color: var(--black); }
.button-black-transparency:hover, .button-black-transparency:focus { background-color: rgba(0,0,0,1.0); border: 1px solid rgba(0,0,0,1.0); color: var(--white); }
.button-light-gray:link, .button-light-gray:visited { background-color: var(--light-gray); color: var(--white); }
.button-light-gray:hover, .button-light-gray:focus { background-color: var(--xlight-gray); color: var(--black); }
.button-primary:link, .button-primary:visited { background-color: var(--primary-color); color: var(--white); }
.button-primary:hover, .button-primary:focus { background-color: var(--accent-color); color: var(--white); }
.button-secondary:link, .button-secondary:visited { background-color: var(--secondary-color); color: var(--white); }
.button-secondary:hover, .button-secondary:focus { background-color: var(--accent-color); color: var(--white); }
.button-accent:link, .button-accent:visited { background-color: var(--accent-color); color: var(--white); }
.button-accent:hover, .button-accent:focus { background-color: var(--primary-color); color: var(--white); }

.breadcrumb-bar a:last-of-type { color: rgba(var(--black-rgb),0.6); }

.breadcrumb-bar-sticky {
	position: sticky;
	top: var(--header-bar-height);
	z-index: 9989;
}
.scroll-to-content:link, .scroll-to-content:visited {
	position: absolute;
	bottom: 1.8%;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255,255,255,0.5);
	font-size: 1.8em;
	padding: 5px;
}
.scroll-to-content:hover {
	color: rgba(255,255,255,0.85);
	padding: 5px 5px 10px 5px;
}

.footer a:link, .footer a:visited {
	color: var(--dark-gray);
}
.footer a:hover, .footer a:focus {
	color: var(--white);
}

.project-listing {
	position: relative;
	background-color: #fff;
	border-radius: 3px;
	//border: 2px solid var(--medium-gray);
	box-shadow: 0 0px 4px rgba(0,0,0,0.1);
	overflow: hidden;
	width: 31.75%;
	margin: 0.75%;
}
.project-listing:hover {
	//border: 2px solid var(--primary-color);
	box-shadow: 0 1px 6px rgba(0,0,0,0.25);
}
.project-listing-specs {
	display: block;
	padding: 1.2em 1.5em 1.0em 1.5em;
	text-align: left;
}

.project-gallery-thumb-link {
	width: 12.5%;
	height: auto;
	padding: 2px;
}

.tab-links {
	text-align: center;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;
}
.tab-links a:link, .tab-links a:visited {
	display: inline-block;
	text-align: center;
	font-family: var(--headlines-font);
	text-transform: uppercase;
	letter-spacing: normal;
	font-weight: 600;
	font-size: 0.85em;
	letter-spacing: 0.025em;
	line-height: 1.1em;
	padding: 1.0em 1.25em 0.8em 1.25em;
	border-radius: 3px 3px 0 0;
	background-color: rgba(255,255,255,0.4);
	color: var(--white);
}
.tab-links a:hover {
	background-color: rgba(255,255,255,0.8);
	color: var(--black);
}
.tab-links a.tab-link-active { 
	background-color: rgba(255,255,255,1.0);
	color: var(--black);
}



/* HEADER BAR & MAIN NAV -------------------------------------------------------- */

.header-bar {
	width: 100%;
	padding: 18px 0;
	background-color: #fff;
	border-bottom: 1px solid var(--white);
	position: sticky;
	top: 0;
	z-index: 9990;
}

.transparent-header .header-bar { 
	background-color: rgba(255,255,255,0.0); 
	position: fixed;
	border-bottom: 1px solid transparent;
}

.transparent-header .site-wrapper .header-bar {
	max-width: var(--site-wrapper-max-width);
}

.transparent-header .transparent-header-bar-opaque-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--white); 
	display: none;
}
.transparent-header-bar-switch-reference {
	background-color: transparent;
	position: absolute;
	top: 100px;
	left: 0;
	width: 2px;
	height: 2px;
	z-index: 9999;
}

.main-nav {
	--logo-width: 100px;
	width: calc(100% - var(--logo-width) - 50px);
	max-width: 900px;
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: center;
	align-items: center;
}
.main-nav-cms {
	max-width: 500px;
}

.breadcrumb-bar {
	padding: 1.1em 0;
	border-top: 1px solid var(--xlight-gray);
	border-bottom: 1px solid var(--white);
	font-family: var(--headlines-font);
	line-height: 1.5em;
	font-size: 0.75em;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--xdark-gray);
	background-color: var(--xlight-gray);
	vertical-align: middle;
}


/* FOOTER --------------------------------------------------------------- */

.footer {
	padding: 3.0em 0 0 0;
	background-color: var(--black);
}
.copyright-bar {
	background-color: #111111;
	padding: 1.5em 0;
}


/* PAGE ELEMENTS -------------------------------------------------------- */
#content { position: relative; }

#cms-content {
	min-height: calc(100vh - 200px); /* subtract header and footer */
}






/* ------------------------------------------------------------------------------------------------------- */
/* RESPONSIVE STYLES ------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------- */

@media all and (min-width: 1px) and (max-width: 1023px) /* if you change this, change in the JS file too for operating the nav bar sizing */
{
	html { scroll-padding-top: var(--mobile-header-bar-height); }


	/* MOBILE ALIGNMENTS -------------------------------------------------- */
	
	.mobile-center, .mobile-text-align-center	{ text-align: center !important; }
	.mobile-left, .mobile-text-align-left 		{ text-align: left !important; }
	.mobile-right, .mobile-text-align-right		{ text-align: right !important; }
	.mobile-zero-auto-center 					{ margin: 0 auto !important; }
	
	
	/* MOBILE DISPLAYS -------------------------------------------------- */
	
	.mobile-display-none			{ display: none !important; }
	.mobile-display-block			{ display: block !important; }
	.mobile-display-inline-block	{ display: inline-block !important; }
	.mobile-display-inline			{ display: inline !important; }
	
	
	/* MOBILE POSITIONS -------------------------------------------------- */
	
	.mobile-position-relative { position: relative !important; }
	.mobile-position-absolute { position: absolute !important; }
	.mobile-position-inherit  { position: inherit !important; }
	.mobile-position-fixed	  { position: fixed !important; }
	.mobile-position-sticky   { position: sticky !important; }
	
	
	/* MOBILE BORDERS -------------------------------------------------- */
	
	.mobile-b-0  	{ border: none; }
	.mobile-bt-0  	{ border-top: none; }
	.mobile-br-0  	{ border-right: none; }
	.mobile-bb-0	{ border-bottom: none; }
	.mobile-bl-0  	{ border-left: none; }
	
	.mobile-b	{ border: var(--border); }
	.mobile-bt	{ border-top: var(--border); }
	.mobile-br	{ border-right: var(--border); }
	.mobile-bb	{ border-bottom: var(--border); }
	.mobile-bl	{ border-left: var(--border); }
	
	.mobile-br-0		{ border-radius: 0; }
	.mobile-br-1px		{ border-radius: 1px; }
	.mobile-br-2px		{ border-radius: 2px; }
	.mobile-br-3px		{ border-radius: 3px; }
	.mobile-br-4px		{ border-radius: 4px; }
	.mobile-br-5px		{ border-radius: 5px; }
	.mobile-br-6px		{ border-radius: 6px; }
	.mobile-br-7px		{ border-radius: 7px; }
	.mobile-br-8px		{ border-radius: 8px; }
	.mobile-br-9px		{ border-radius: 9px; }
	.mobile-br-10px		{ border-radius: 10px; }
	
	
	/* MOBILE MARGINS --------------------------------------------------- */
	
	.mobile-m-0  { margin: 0; }
	.mobile-mt-0 { margin-top: 0; }
	.mobile-mr-0 { margin-right: 0; }
	.mobile-mb-0 { margin-bottom: 0; }
	.mobile-ml-0 { margin-left: 0; }
	
	.mobile-m-1px { margin: 1px; } 
	.mobile-m-2px { margin: 2px; }
	.mobile-m-3px { margin: 3px; }
	.mobile-m-4px { margin: 4px; }
	.mobile-m-5px { margin: 5px; }
	.mobile-m-6px { margin: 6px; }
	.mobile-m-7px { margin: 7px; }
	.mobile-m-8px { margin: 8px; }
	.mobile-m-9px { margin: 9px; }
	.mobile-m-10px { margin: 10px; }
	
	.mobile-mt-1px { margin-top: 1px; }
	.mobile-mt-2px { margin-top: 2px; }
	.mobile-mt-3px { margin-top: 3px; }
	.mobile-mt-4px { margin-top: 4px; }
	.mobile-mt-5px { margin-top: 5px; }
	.mobile-mt-6px { margin-top: 6px; }
	.mobile-mt-7px { margin-top: 7px; }
	.mobile-mt-8px { margin-top: 8px; }
	.mobile-mt-9px { margin-top: 9px; }
	.mobile-mt-10px { margin-top: 10px; }
	
	.mobile-mb-1px { margin-bottom: 1px; }
	.mobile-mb-2px { margin-bottom: 2px; }
	.mobile-mb-3px { margin-bottom: 3px; }
	.mobile-mb-4px { margin-bottom: 4px; }
	.mobile-mb-5px { margin-bottom: 5px; }
	.mobile-mb-6px { margin-bottom: 6px; }
	.mobile-mb-7px { margin-bottom: 7px; }
	.mobile-mb-8px { margin-bottom: 8px; }
	.mobile-mb-9px { margin-bottom: 9px; }
	.mobile-mb-10px { margin-bottom: 10px; }
	
	.mobile-ml-1px { margin-left: 1px; }
	.mobile-ml-2px { margin-left: 2px; }
	.mobile-ml-3px { margin-left: 3px; }
	.mobile-ml-4px { margin-left: 4px; }
	.mobile-ml-5px { margin-left: 5px; }
	.mobile-ml-6px { margin-left: 6px; }
	.mobile-ml-7px { margin-left: 7px; }
	.mobile-ml-8px { margin-left: 8px; }
	.mobile-ml-9px { margin-left: 9px; }
	.mobile-ml-10px { margin-left: 10px; }
	
	.mobile-mr-1px { margin-right: 1px; }
	.mobile-mr-2px { margin-right: 2px; }
	.mobile-mr-3px { margin-right: 3px; }
	.mobile-mr-4px { margin-right: 4px; }
	.mobile-mr-5px { margin-right: 5px; }
	.mobile-mr-6px { margin-right: 6px; }
	.mobile-mr-7px { margin-right: 7px; }
	.mobile-mr-8px { margin-right: 8px; }
	.mobile-mr-9px { margin-right: 9px; }
	.mobile-mr-10px { margin-right: 10px; }
	
	.mobile-m-1pct { margin: 1%; }
	.mobile-m-2pct { margin: 2%; }
	.mobile-m-3pct { margin: 3%; }
	.mobile-m-4pct { margin: 4%; }
	.mobile-m-5pct { margin: 5%; }
	.mobile-m-6pct { margin: 6%; }
	.mobile-m-7pct { margin: 7%; }
	.mobile-m-8pct { margin: 8%; }
	.mobile-m-9pct { margin: 9%; }
	.mobile-m-10pct { margin: 10%; }
	
	.mobile-mt-1pct { margin-top: 1%; }
	.mobile-mt-2pct { margin-top: 2%; }
	.mobile-mt-3pct { margin-top: 3%; }
	.mobile-mt-4pct { margin-top: 4%; }
	.mobile-mt-5pct { margin-top: 5%; }
	.mobile-mt-6pct { margin-top: 6%; }
	.mobile-mt-7pct { margin-top: 7%; }
	.mobile-mt-8pct { margin-top: 8%; }
	.mobile-mt-9pct { margin-top: 9%; }
	.mobile-mt-10pct { margin-top: 10%; }
	
	.mobile-mb-1pct { margin-bottom: 1%; }
	.mobile-mb-2pct { margin-bottom: 2%; }
	.mobile-mb-3pct { margin-bottom: 3%; }
	.mobile-mb-4pct { margin-bottom: 4%; }
	.mobile-mb-5pct { margin-bottom: 5%; }
	.mobile-mb-6pct { margin-bottom: 6%; }
	.mobile-mb-7pct { margin-bottom: 7%; }
	.mobile-mb-8pct { margin-bottom: 8%; }
	.mobile-mb-9pct { margin-bottom: 9%; }
	.mobile-mb-10pct { margin-bottom: 10%; }
	
	.mobile-ml-1pct { margin-left: 1%; }
	.mobile-ml-2pct { margin-left: 2%; }
	.mobile-ml-3pct { margin-left: 3%; }
	.mobile-ml-4pct { margin-left: 4%; }
	.mobile-ml-5pct { margin-left: 5%; }
	.mobile-ml-6pct { margin-left: 6%; }
	.mobile-ml-7pct { margin-left: 7%; }
	.mobile-ml-8pct { margin-left: 8%; }
	.mobile-ml-9pct { margin-left: 9%; }
	.mobile-ml-10pct { margin-left: 10%; }
	
	.mobile-mr-1pct { margin-right: 1%; }
	.mobile-mr-2pct { margin-right: 2%; }
	.mobile-mr-3pct { margin-right: 3%; }
	.mobile-mr-4pct { margin-right: 4%; }
	.mobile-mr-5pct { margin-right: 5%; }
	.mobile-mr-6pct { margin-right: 6%; }
	.mobile-mr-7pct { margin-right: 7%; }
	.mobile-mr-8pct { margin-right: 8%; }
	.mobile-mr-9pct { margin-right: 9%; }
	.mobile-mr-10pct { margin-right: 10%; }
	
	.mobile-m-1em { margin: 1.0em; }
	.mobile-m-2em { margin: 2.0em; }
	.mobile-m-3em { margin: 3.0em; }
	.mobile-m-4em { margin: 4.0em; }
	.mobile-m-5em { margin: 5.0em; }
	
	.mobile-mt-1em { margin-top: 1.0em; }
	.mobile-mt-2em { margin-top: 2.0em; }
	.mobile-mt-3em { margin-top: 3.0em; }
	.mobile-mt-4em { margin-top: 4.0em; }
	.mobile-mt-5em { margin-top: 5.0em; }
	
	.mobile-mb-1em { margin-bottom: 1.0em; }
	.mobile-mb-2em { margin-bottom: 2.0em; }
	.mobile-mb-3em { margin-bottom: 3.0em; }
	.mobile-mb-4em { margin-bottom: 4.0em; }
	.mobile-mb-5em { margin-bottom: 5.0em; }
	
	.mobile-ml-1em { margin-left: 1.0em; }
	.mobile-ml-2em { margin-left: 2.0em; }
	.mobile-ml-3em { margin-left: 3.0em; }
	.mobile-ml-4em { margin-left: 4.0em; }
	.mobile-ml-5em { margin-left: 5.0em; }
	
	.mobile-mr-1em { margin-right: 1.0em; }
	.mobile-mr-2em { margin-right: 2.0em; }
	.mobile-mr-3em { margin-right: 3.0em; }
	.mobile-mr-4em { margin-right: 4.0em; }
	.mobile-mr-5em { margin-right: 5.0em; }
	
	
	/* MOBILE PADDING -------------------------------------------------- */
	
	.mobile-p-0  { padding: 0; }
	.mobile-pt-0 { padding-top: 0; }
	.mobile-pr-0 { padding-right: 0; }
	.mobile-pb-0 { padding-bottom: 0; }
	.mobile-pl-0 { padding-left: 0; }
	
	.mobile-p-1px { padding: 1px; } 
	.mobile-p-2px { padding: 2px; }
	.mobile-p-3px { padding: 3px; }
	.mobile-p-4px { padding: 4px; }
	.mobile-p-5px { padding: 5px; }
	.mobile-p-6px { padding: 6px; }
	.mobile-p-7px { padding: 7px; }
	.mobile-p-8px { padding: 8px; }
	.mobile-p-9px { padding: 9px; }
	.mobile-p-10px { padding: 10px; }
	
	.mobile-pt-1px { padding-top: 1px; }
	.mobile-pt-2px { padding-top: 2px; }
	.mobile-pt-3px { padding-top: 3px; }
	.mobile-pt-4px { padding-top: 4px; }
	.mobile-pt-5px { padding-top: 5px; }
	.mobile-pt-6px { padding-top: 6px; }
	.mobile-pt-7px { padding-top: 7px; }
	.mobile-pt-8px { padding-top: 8px; }
	.mobile-pt-9px { padding-top: 9px; }
	.mobile-pt-10px { padding-top: 10px; }
	
	.mobile-pb-1px { padding-bottom: 1px; }
	.mobile-pb-2px { padding-bottom: 2px; }
	.mobile-pb-3px { padding-bottom: 3px; }
	.mobile-pb-4px { padding-bottom: 4px; }
	.mobile-pb-5px { padding-bottom: 5px; }
	.mobile-pb-6px { padding-bottom: 6px; }
	.mobile-pb-7px { padding-bottom: 7px; }
	.mobile-pb-8px { padding-bottom: 8px; }
	.mobile-pb-9px { padding-bottom: 9px; }
	.mobile-pb-10px { padding-bottom: 10px; }
	
	.mobile-pl-1px { padding-left: 1px; }
	.mobile-pl-2px { padding-left: 2px; }
	.mobile-pl-3px { padding-left: 3px; }
	.mobile-pl-4px { padding-left: 4px; }
	.mobile-pl-5px { padding-left: 5px; }
	.mobile-pl-6px { padding-left: 6px; }
	.mobile-pl-7px { padding-left: 7px; }
	.mobile-pl-8px { padding-left: 8px; }
	.mobile-pl-9px { padding-left: 9px; }
	.mobile-pl-10px { padding-left: 10px; }
	
	.mobile-pr-1px { padding-right: 1px; }
	.mobile-pr-2px { padding-right: 2px; }
	.mobile-pr-3px { padding-right: 3px; }
	.mobile-pr-4px { padding-right: 4px; }
	.mobile-pr-5px { padding-right: 5px; }
	.mobile-pr-6px { padding-right: 6px; }
	.mobile-pr-7px { padding-right: 7px; }
	.mobile-pr-8px { padding-right: 8px; }
	.mobile-pr-9px { padding-right: 9px; }
	.mobile-pr-10px { padding-right: 10px; }
	
	.mobile-p-1pct { padding: 1%; }
	.mobile-p-2pct { padding: 2%; }
	.mobile-p-3pct { padding: 3%; }
	.mobile-p-4pct { padding: 4%; }
	.mobile-p-5pct { padding: 5%; }
	.mobile-p-6pct { padding: 6%; }
	.mobile-p-7pct { padding: 7%; }
	.mobile-p-8pct { padding: 8%; }
	.mobile-p-9pct { padding: 9%; }
	.mobile-p-10pct { padding: 10%; }
	
	.mobile-pt-1pct { padding-top: 1%; }
	.mobile-pt-2pct { padding-top: 2%; }
	.mobile-pt-3pct { padding-top: 3%; }
	.mobile-pt-4pct { padding-top: 4%; }
	.mobile-pt-5pct { padding-top: 5%; }
	.mobile-pt-6pct { padding-top: 6%; }
	.mobile-pt-7pct { padding-top: 7%; }
	.mobile-pt-8pct { padding-top: 8%; }
	.mobile-pt-9pct { padding-top: 9%; }
	.mobile-pt-10pct { padding-top: 10%; }
	
	.mobile-pb-1pct { padding-bottom: 1%; }
	.mobile-pb-2pct { padding-bottom: 2%; }
	.mobile-pb-3pct { padding-bottom: 3%; }
	.mobile-pb-4pct { padding-bottom: 4%; }
	.mobile-pb-5pct { padding-bottom: 5%; }
	.mobile-pb-6pct { padding-bottom: 6%; }
	.mobile-pb-7pct { padding-bottom: 7%; }
	.mobile-pb-8pct { padding-bottom: 8%; }
	.mobile-pb-9pct { padding-bottom: 9%; }
	.mobile-pb-10pct { padding-bottom: 10%; }
	
	.mobile-pl-1pct { padding-left: 1%; }
	.mobile-pl-2pct { padding-left: 2%; }
	.mobile-pl-3pct { padding-left: 3%; }
	.mobile-pl-4pct { padding-left: 4%; }
	.mobile-pl-5pct { padding-left: 5%; }
	.mobile-pl-6pct { padding-left: 6%; }
	.mobile-pl-7pct { padding-left: 7%; }
	.mobile-pl-8pct { padding-left: 8%; }
	.mobile-pl-9pct { padding-left: 9%; }
	.mobile-pl-10pct { padding-left: 10%; }
	
	.mobile-pr-1pct { padding-right: 1%; }
	.mobile-pr-2pct { padding-right: 2%; }
	.mobile-pr-3pct { padding-right: 3%; }
	.mobile-pr-4pct { padding-right: 4%; }
	.mobile-pr-5pct { padding-right: 5%; }
	.mobile-pr-6pct { padding-right: 6%; }
	.mobile-pr-7pct { padding-right: 7%; }
	.mobile-pr-8pct { padding-right: 8%; }
	.mobile-pr-9pct { padding-right: 9%; }
	.mobile-pr-10pct { padding-right: 10%; }
	
	.mobile-p-1em { padding: 1.0em; }
	.mobile-p-2em { padding: 2.0em; }
	.mobile-p-3em { padding: 3.0em; }
	.mobile-p-4em { padding: 4.0em; }
	.mobile-p-5em { padding: 5.0em; }
	
	.mobile-pt-1em { padding-top: 1.0em; }
	.mobile-pt-2em { padding-top: 2.0em; }
	.mobile-pt-3em { padding-top: 3.0em; }
	.mobile-pt-4em { padding-top: 4.0em; }
	.mobile-pt-5em { padding-top: 5.0em; }
	
	.mobile-pb-1em { padding-bottom: 1.0em; }
	.mobile-pb-2em { padding-bottom: 2.0em; }
	.mobile-pb-3em { padding-bottom: 3.0em; }
	.mobile-pb-4em { padding-bottom: 4.0em; }
	.mobile-pb-5em { padding-bottom: 5.0em; }
	
	.mobile-pl-1em { padding-left: 1.0em; }
	.mobile-pl-2em { padding-left: 2.0em; }
	.mobile-pl-3em { padding-left: 3.0em; }
	.mobile-pl-4em { padding-left: 4.0em; }
	.mobile-pl-5em { padding-left: 5.0em; }
	
	.mobile-pr-1em { padding-right: 1.0em; }
	.mobile-pr-2em { padding-right: 2.0em; }
	.mobile-pr-3em { padding-right: 3.0em; }
	.mobile-pr-4em { padding-right: 4.0em; }
	.mobile-pr-5em { padding-right: 5.0em; }
	
	
	/* MOBILE FLEXBOX -------------------------------------------------- */
	
	.mobile-flexbox-row-reverse 	{ flex-direction: row-reverse; }
	.mobile-flexbox-column-reverse	{ flex-direction: column-reverse; }
	
	
	/* MOBILE CONTAINERS -------------------------------------------------- */
	
	.mobile-container-1pct { width: 1%; } .mobile-container-2pct { width: 2%; } .mobile-container-3pct { width: 3%; } .mobile-container-4pct { width: 4%; } .mobile-container-5pct { width: 5%; } .mobile-container-6pct { width: 6%; } .mobile-container-7pct { width: 7%; } .mobile-container-8pct { width: 8%; } .mobile-container-9pct { width: 9%; } .mobile-container-10pct { width: 10%; } .mobile-container-11pct { width: 11%; } .mobile-container-12pct { width: 12%; } .mobile-container-13pct { width: 13%; } .mobile-container-14pct { width: 14%; } .mobile-container-15pct { width: 15%; } .mobile-container-16pct { width: 16%; } .mobile-container-17pct { width: 17%; } .mobile-container-18pct { width: 18%; } .mobile-container-19pct { width: 19%; } .mobile-container-20pct { width: 20%; } .mobile-container-21pct { width: 21%; } .mobile-container-22pct { width: 22%; } .mobile-container-23pct { width: 23%; } .mobile-container-24pct { width: 24%; } .mobile-container-25pct { width: 25%; } .mobile-container-26pct { width: 26%; } .mobile-container-27pct { width: 27%; } .mobile-container-28pct { width: 28%; } .mobile-container-29pct { width: 29%; } .mobile-container-30pct { width: 30%; } .mobile-container-31pct { width: 31%; } .mobile-container-32pct { width: 32%; } .mobile-container-33pct { width: 33%; } .mobile-container-34pct { width: 34%; } .mobile-container-35pct { width: 35%; } .mobile-container-36pct { width: 36%; } .mobile-container-37pct { width: 37%; } .mobile-container-38pct { width: 38%; } .mobile-container-39pct { width: 39%; } .mobile-container-40pct { width: 40%; } .mobile-container-41pct { width: 41%; } .mobile-container-42pct { width: 42%; } .mobile-container-43pct { width: 43%; } .mobile-container-44pct { width: 44%; } .mobile-container-45pct { width: 45%; } .mobile-container-46pct { width: 46%; } .mobile-container-47pct { width: 47%; } .mobile-container-48pct { width: 48%; } .mobile-container-49pct { width: 49%; } .mobile-container-50pct { width: 50%; } .mobile-container-51pct { width: 51%; } .mobile-container-52pct { width: 52%; } .mobile-container-53pct { width: 53%; } .mobile-container-54pct { width: 54%; } .mobile-container-55pct { width: 55%; } .mobile-container-56pct { width: 56%; } .mobile-container-57pct { width: 57%; } .mobile-container-58pct { width: 58%; } .mobile-container-59pct { width: 59%; } .mobile-container-60pct { width: 60%; } .mobile-container-61pct { width: 61%; } .mobile-container-62pct { width: 62%; } .mobile-container-63pct { width: 63%; } .mobile-container-64pct { width: 64%; } .mobile-container-65pct { width: 65%; } .mobile-container-66pct { width: 66%; } .mobile-container-67pct { width: 67%; } .mobile-container-68pct { width: 68%; } .mobile-container-69pct { width: 69%; } .mobile-container-70pct { width: 70%; } .mobile-container-71pct { width: 71%; } .mobile-container-72pct { width: 72%; } .mobile-container-73pct { width: 73%; } .mobile-container-74pct { width: 74%; } .mobile-container-75pct { width: 75%; } .mobile-container-76pct { width: 76%; } .mobile-container-77pct { width: 77%; } .mobile-container-78pct { width: 78%; } .mobile-container-79pct { width: 79%; } .mobile-container-80pct { width: 80%; } .mobile-container-81pct { width: 81%; } .mobile-container-82pct { width: 82%; } .mobile-container-83pct { width: 83%; } .mobile-container-84pct { width: 84%; } .mobile-container-85pct { width: 85%; } .mobile-container-86pct { width: 86%; } .mobile-container-87pct { width: 87%; } .mobile-container-88pct { width: 88%; } .mobile-container-89pct { width: 89%; } .mobile-container-90pct { width: 90%; } .mobile-container-91pct { width: 91%; } .mobile-container-92pct { width: 92%; } .mobile-container-93pct { width: 93%; } .mobile-container-94pct { width: 94%; } .mobile-container-95pct { width: 95%; } .mobile-container-96pct { width: 96%; } .mobile-container-97pct { width: 97%; } .mobile-container-98pct { width: 98%; } .mobile-container-99pct { width: 99%; } .mobile-container-100pct { width: 100%; }
	
	
	/* MOBILE SECTIONS ------------------------------------------- */
	
	.section { position: relative; padding: 3.5em 0; }
		
	.section-hero {
		padding: 3.0em 0;
		min-height: calc(100vh - var(--mobile-header-bar-height));
	}
	
	.section-hero-small { min-height: 50vh; }
	.transparent-header .section-hero-small { min-height: 57vh; }
	
	.section-hero-tiny  { min-height: 25vh; }
	.transparent-header .section-hero-tiny  { min-height: 32vh; }
	
	
	/* MOBILE TYPOGRAPHY ------------------------------------------- */
	
	h1 { font-size: 1.9em; }
	h2 { font-size: 1.6em; }
	h3 { font-size: 1.3em; }
	h4 { font-size: 1.15em; }
	h5 { font-size: 1.0em; }
	h6 { font-size: 0.85em; }
	
	.mobile-font-size-large { font-size: 1.2em !important; }
	.mobile-font-size-small { font-size: 0.95em !important; }
	.mobile-font-size-tiny  { font-size: 0.85em !important; }
	
	.section-hero h1 { font-size: 2.1em; }
	.lead-in { font-size: 1.2em; }
	.section-hero .lead-in { font-size: 1.3em; }
	
	
	/* MOBILE IMAGES, VIDEOS, MAPS ------------------------------------------------- */
	
	.header-logo {
		max-width: 84px;
	}
	
	
	/* MOBILE FORMS ------------------------------------------------- */
	.project-filter-select {
		width: 100%;
		height: 40px;
		padding: 0 0.5em;
		font-size: 0.9em;
		margin: 2px 0;
		background-color: #f0f0f0;
		border: 2px solid #ccc;
		border-radius: 4px;
		font-family: var(--headlines-font);
	}
	
	
	/* MOBILE LINKS, BUTTONS, NAVIGATION ------------------------------------------- */
	
	.main-nav a:link, .main-nav a:visited {
		display: block;
		font-size: 0.9em;
		padding: 1.1em;
		margin: 4px 0;
		color: var(--black);
		background-color: var(--xlight-gray);
	}
	.main-nav a:hover, .main-nav a:focus {
		color: #fff;
		background-color: var(--medium-gray);
	}
	.site-home a.main-nav-home-link,
	.site-about a.main-nav-about-link,
	.site-residential a.main-nav-residential-link,
	.site-commercial a.main-nav-commercial-link,
	.site-contact a.main-nav-contact-link,
	.site-cms-dashboard a.main-nav-cms-dashboard-link,
	.site-cms-admin a.main-nav-cms-admin-link {
		background-color: var(--black);
		color: #fff !important;
	}
	
	.breadcrumb-bar-sticky {
		top: var(--mobile-header-bar-height);
	}
	.mobile-breadcrumb-bar-unsticky {
		position: relative;
		top: auto;
	}
	
	.project-listing {
		width: 48%;
		margin: 1%;
	}
	
	.tab-links {
		position: absolute;
		bottom: 0;
		left: 0;
		transform: none;
		min-width: 100%;
	}
	
	
	/* MOBILE HEADER BAR & MAIN NAV -------------------------------------------------------- */
	
	.header-bar {
		padding: 10px 0;
	}
	.main-nav {
		display: none;
		width: 100%;
		max-width: none;
		padding: 10px 0;
	}
	.mobile-nav-control:link, .mobile-nav-control:visited {
		font-size: 1.6em;
		padding: 0.1em 0 0.1em 0.2em;
		color: var(--dark-gray);
	}
	
	
	/* MOBILE PAGE ELEMENTS -------------------------------------------------------- */
	
	
	
	
} /* END MOBILE  1023px */




@media all and (min-width: 1px) and (max-width: 1921px) /* set this to the same as the max-width of .site-wrapper declared near the top of the document */
{
	.site-wrapper {
		border-left: none;
		border-right: none;
		border-bottom: none;
	}
}


@media all and (min-width: 1px) and (max-width: 719px)
{
	.project-listing {
		width: 100%;
		margin: 0 0 15px 0;
	}
	.project-gallery-thumb-link {
		width: 25%;
	}
}

@media all and (min-width: 720px) and (max-width: 1023px)
{
	.project-gallery-thumb-link {
		width: 16.6%;
	}
}

@media all and (min-width: 1024px) and (max-width: 1599px)
{
	.project-gallery-thumb-link {
		width: 12.5%;
	}
}

@media all and (min-width: 1600px)
{
	.project-listing {
		width: 24%;
		margin: 0.5%;
	}
	.project-gallery-thumb-link {
		width: 10%;
	}
}