:root {
    --color-black: 						rgb(0, 0, 0);
    --color-white: 						rgb(255, 255, 255);
    --color-near-white: 			rgb(236, 236, 236);
    --color-blue: 						rgb(58, 103, 146);
    --color-darkblue: 				rgb(2, 37, 59);
    --color-silver: 					var(--color-near-white);
    --color-lightyellow: 			rgb(251, 255, 218);
    --color-orange: 					rgb(193, 71, 0);
    --color-brown: 						rgb(122, 77, 55);
    --color-darkgray: 				rgb(55, 65, 64);
    --color-medgray: 					rgb(76,76,76);
    --color-lightgray: 				rgb(189, 195, 199);
    --color-vlightgray: 			var(--color-near-white);
    --color-green: 						rgb(62, 107, 72);
    --color-brightgreen: 			rgb(132, 188, 73);
    --color-aqua:						rgb(70, 107, 114);
    --color-red: 						rgb(184,45,30);
}

/* HERO STYLING FOR HERO CUSTOM BLOCKS */

.jumbotron 					{ height: 400px; display: block; overflow: hidden; position: relative; }
.jumbotron img			{ width: 100%; height: auto; }
.hero-wrapper 			{ position: relative !important; }
.jumbotron-fluid 		{ padding-right: 0; padding-left: 0; border-radius: 0; }
.hero 							{ height: 300px; width: 100%; background-size: cover; display: table; position: relative; background: var(--color-darkgray) no-repeat; }
.herotext 					{ width: 50%; text-align: left; position: absolute; margin: 0; bottom: 0; left: 0; padding: 16px; }
.page-node-type-hero-page .herotext { margin: 0 auto 0 auto !important; }
.herotext p					{ color: var(--color-silver); font-size: 1.125em; }
.herotext h1,.herotext p.header1 			{ color: var(--color-silver) !important; font-family: var(--font-family-serif); font-size: 3em !important; font-weight: normal; display: inline-block; margin: 16px 0 16px 0 !important; line-height: 1 !important; }
.herotext h2 				{ color: var(--color-silver); font-size: 2.75em !important; margin: 32px 0 12px 0 !important; max-width: 58rem; }
.herotext 					{ background-color: rgba(0,0,0,.7); }
#maincontent .jumbotron p.photo-credit { color: var(--color-silver); background-color: rgb(0,0,0,.6); }
p.hero-black 							{ color: var(--color-black); }
.hero-wrapper .tagline 		{ filter: drop-shadow(3px 5px 5px rgb(0 0 0 / 0.4)); }
.jumbotron a 							{ color: #333; }
.jumbotron a:visited 		{ color: #333; }
.jumbotron a:hover 			{ color: #666; }

	.page-node-type-home .jumbotron { height: 300px; }	
	.page-node-type-home .herotext { margin: 80px auto 16px auto !important; width: 60%; }
	@media only screen and (max-width: 955px) {
		.herotext 			{ margin: 112px auto 0 auto !important; }
		.herotext p     { font-size: 1rem; }
    .herotext h1 		{ font-size: 2.75rem !important; margin: 5rem auto 16px auto !important; }
		.herotext h2 		{ font-size: 1.75rem !important; margin: 0 0 12px 0 !important; }
	}
	@media only screen and (max-width: 670px) {
		.herotext h1 		{ font-size: 2.25rem !important; margin: 0 0 16px 0 !important; }
		.herotext h2 		{ font-size: 1.5rem !important; margin: 0 !important; }
	}
	@media only screen and (max-width: 480px) {
		.herotext 			{ margin: 0 !important; width: 100%; }
		.herotext h1		{ font-size: 2rem !important; margin: 0 0 16px 0!important; }
		.herotext h2 		{ font-size: 1.275rem !important; margin: 0 !important; }
	}
	@media only screen and (max-width: 321px) {
		.herotext 			{ margin: 0 1rem 0 25% !important; }
		.herotext h1 		{ font-size: 1.825rem !important; margin: 0 0 16px 0!important; }
		.herotext h2 		{ font-size: 1.125rem !important; margin: 0 !important; }
	}
	
	.page-node-type-home-page #block-homehero { margin-top: -16px; }
	
#maincontent .jumbotron p.photo-credit { position: absolute; bottom: 0; right: 0; padding: 6px 12px; margin: 0; font-size: .825rem !important; }
p.hero-white,p.hero-black { font-size: 1.125rem; line-height: 1.5; padding-bottom: 10px; font-weight: 600; }
p.hero-white { color: var(--color-silver); }
.hero-wrapper .tagline 				{ width: 180px; height: auto; position: absolute; z-index: 101; left: 120px; bottom: -24px; }
	@media only screen and (max-width: 1250px) {
	.jumbotron { height: 320px}
	.page-node-type-home .jumbotron { height: 300px !important; }
	}
	@media only screen and (max-width: 955px) {
	.jumbotron { height: 320px !important; }
		.hero-wrapper .tagline { width: 90px; left: 20px; bottom: -20px; }
	}
	@media only screen and (max-width: 670px) {
	.jumbotron { height: 230px !important; }
	}
	@media (min-width: 576px) {
	.hero-wrapper .tagline { width: 90px; left: 20px; bottom: -20px; }
}