/* Color Variables */
:root {

	/* Site Colors are HSL values */
	--siteColor1: 171, 29%, 23%; 	/* #2A4D48 - Coral Tree Evergreen */
	--siteColor2: 40, 30%, 96%; 	/* #F8F6F2 - Coral Tree Sand Pale */
	--siteColor3: 40, 40%, 94%; 	/* #F6F2EA - Coral Tree Sand light */
	--siteColor4: 47, 45%, 60%; 	/* #C7B46D - Coral Tree Gold */
	--siteColor5: 48, 33%, 53%; 	/* #AE9E60 - Coral Tree Gold Darker */
	--siteColor6: 38, 20%, 89%; 	/* #E9E5DE - Coral Tree Sand */
	--siteColor7: 353, 83.2%, 58%;   /* #ED3B4F - Coral Tree Coral /*

	/* Other Colors */
	--bodyFontColor: 0, 0%, 27%; 	/* #444444 - Gray */

	--white: 0, 100%, 100%;				/* #ffffff - White - overwrites Bootstrap White */
	--lightGray: 0, 0%, 47%;			/* #777777 - Light Gray - */
	--gray: 0, 0%, 86%;						/* #555555 - Gray - */
	--darkGray: 0, 0%, 20%;				/* #333333 - Dark Gray - */
	--black: 0, 0%, 0%;					/* #000000 - Black - overwrites Bootstrap Black */
	--mediumGray: 0, 0%, 86%;			/* #DBDBDB - Medium Gray */

	--trueRed: 0, 100%, 50%; 			/* #FF0000 - True Red */
	--googleBlue: 216, 92%, 65%;	/* #5595F8 - Google Blue */

	--pulseColor: 0, 0%, 0%;      /* #000000 - Black Default */

	--placeholderBG: hsla(var(--black), 5%);

}

/* Site Theme Color Classes */
.site-color-1,
.site-color-1-hover:hover { color: hsl(var(--siteColor1)) !important; }
.site-color-1-bg,
.site-color-1-bg-hover:hover { background-color: hsl(var(--siteColor1)) !important; }
.site-color-1-lighten-bg-hover:hover {background: hsla(var(--siteColor1), .8) !important; }
.site-color-2,
.site-color-2-hover:hover { color: hsl(var(--siteColor2)) !important; }
.site-color-2-bg,
.site-color-2-bg-hover:hover { background-color: hsl(var(--siteColor2)) !important; }
.site-color-3,
.site-color-3-hover:hover { color: hsl(var(--siteColor3)) !important; }
.site-color-3-bg,
.site-color-3-bg-hover:hover { background-color: hsl(var(--siteColor3)) !important; }
.site-color-4,
.site-color-4-hover:hover { color: hsl(var(--siteColor4)) !important; }
.site-color-4-bg,
.site-color-4-bg-hover:hover { background-color: hsl(var(--siteColor4)) !important; }
.site-color-5,
.site-color-5-hover:hover { color: hsl(var(--siteColor5)) !important; }
.site-color-5-bg,
.site-color-5-bg-hover:hover { background-color: hsl(var(--siteColor5)) !important; }
.site-color-6,
.site-color-6-hover:hover { color: hsl(var(--siteColor6)) !important; }
.site-color-6-bg,
.site-color-6-bg-hover:hover { background-color: hsl(var(--siteColor6)) !important; }

/* Other Color Classes */
.body-font-color,
.body-font-color:hover { color: hsl(var(--bodyFontColor)) !important; }
.white,
.white-hover:hover { color: hsl(var(--white)) !important; }
.white-bg,
.white-bg-hover:hover { background-color: hsl(var(--white)) !important; }
.black,
.black-hover:hover { color: hsl(var(--black)) !important; }
.black-bg,
.black-bg-hover:hover { background-color: hsl(var(--black)) !important; }
.true-red,
.true-red-hover:hover { color: hsl(var(--trueRed)) !important; }
.true-red-bg,
.true-red-bg-hover:hover { background-color: hsl(var(--trueRed)) !important; }
.google-blue,
.google-blue-hover:hover { color: hsl(var(--googleBlue)) !important; }
.google-blue-bg,
.google-blue-bg-hover:hover { background-color: hsl(var(--googleBlue)) !important; }
.site-color-1-bg-lighter { background: hsla(var(--siteColor1), .8); }
.site-color-5-bg-lighter { background: hsla(var(--siteColor5), .8); }