/* Site Theme Colors
---------------------------------------------- */
:root {
	/* Site Colors are HSL values */
	--siteColor1: 5, 86%, 19%; 	 /* #5C0F07 - Blood Red */
	--siteColor2: 61, 67%, 55%;  /* #D8DB41 - Green Yellow */
	--siteColor3: 26, 81%, 90%;  /* #FAE4D3 - Champagne */
	--siteColor4: 287, 51%, 87%; /* #E9D0F0 - Lavendar */
	--siteColor5: 45, 22%, 93%;  /* #F2F0EB - Ivory */
  --siteColor6: 13, 78%, 64%;  /* #EB7B5C - Terra Cotta */
  --siteColor7: 171, 17%, 68%; /* #A1BCB9 - Opal */
  --siteColor8: 40, 17%, 37%;  /* #70664F - Brown */

	/* Other Colors */
	--bodyBackgroundColor: var(--siteColor5);
	--bodyFontColor: var(--gray30);

  /* White / Grays / Black */
	--white: 0, 100%, 100%;				/* #ffffff - White - overwrites Bootstrap White */
	--gray10: 0, 0%, 10%;					/* #1a1a1a - Gray 90% Black - */
	--gray20: 0, 0%, 20%;					/* #333333 - Gray 80% Black - */
	--gray30: 0, 0%, 30%;					/* #4d4d4d - Gray 70% Black - */
	--gray40: 0, 0%, 40%;					/* #666666 - Gray 60% Black - */
	--gray50: 0, 0%, 50%;					/* #808080 - Gray 50% Black - */
	--gray60: 0, 0%, 60%;					/* #999999 - Gray 40% Black - */
	--gray70: 0, 0%, 70%;					/* #b3b3b3 - Gray 30% Black - */
	--gray80: 0, 0%, 80%;					/* #cccccc - Gray 20% Black - */
	--gray90: 0, 0%, 90%;					/* #e6e6e6 - Gray 10% Black - */
	--lightGray: var(--gray80);		/* #cccccc - Light Gray - */
	--gray: var(--gray50);				/* #808080 - Gray - */
	--darkGray: var(--gray20);		/* #333333 - Dark Gray - */
	--black: 0, 0%, 0%;						/* #000000 - Black - overwrites Bootstrap Black */

	--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-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; }
.site-color-7,
.site-color-7-hover:hover { color: hsl(var(--siteColor7)) !important; }
.site-color-7-bg,
.site-color-7-bg-hover:hover { background-color: hsl(var(--siteColor7)) !important; }
.site-color-8,
.site-color-8-hover:hover { color: hsl(var(--siteColor8)) !important; }
.site-color-8-bg,
.site-color-8-bg-hover:hover { background-color: hsl(var(--siteColor8)) !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; }
