/* ------------------------------------------------ */
/* Shared & Global Animations                       */
/* ------------------------------------------------ */
@keyframes progress-animation {
	0% { width: 0%; }
	100% { width: 100%; }
}

/* ------------------------------------------------ */
/* Refactored & Class-Ordered Styles                */
/* ------------------------------------------------ */

/* --- .caption-text --- */
.caption-text {
	width: 75%;
	background-color: var(--bg-nav-0) !important;
	background-image: none !important;
	text-align: center;
	line-height: 1.5;
	display: block;
	color: var(--bg-wht);
	font-weight: bold;
	font-family: "Oswald", sans-serif, var(--bs-body-font-family), sans-serif;
	margin: 0.5rem auto;
	padding: 0.5rem 0;
	text-shadow: 2px 1px 2px rgba(0,0,0,0.6);
	font-size: 3vw;
	letter-spacing: 1px;
	transition: all 0.15s ease-in-out;
}
.caption-text > a {
	box-shadow: inset 0px 0px 0px 0px var(--bg-cc-90) !important;
	color: var(--bg-cc);
}
.caption-text > a:hover {
	box-shadow: inset 0px -150px 0px 0px var(--bg-cc) !important;
	color: var(--bg-nav);
}
.caption-text .fs-4, 
.caption-text .fs-5, 
.caption-text .fs-6, 
.caption-text .homesloganline3 {
	text-transform: none;
	letter-spacing: 1px;
	font-weight: normal;
	text-shadow: 0 0px 5px var(--bg-blk-25);
}
.caption-text span.fs-3,
.caption-text span.fs-6 {
	color: var(--bg-ylw);
	letter-spacing: 1px !important;
}

/* --- .card-anchor --- */
a.card-anchor, 
.card-anchor, 
.cardanchor {
	position: absolute; 
	top: -3rem;
}

/* --- .card-body --- */
.card-body, 
.card-footer:last-child {
	font-size: 1.1rem; 
	border: none;
}
.card-body .card-title {
	display: block; 
	font-size: 1.35rem; 
	margin-bottom: 0rem; 
	font-weight: bold;
}
.card-body h3.card-title i, 
.card-body h4.card-title i, 
.card-body h5.card-title i {
	text-shadow: 
		1px 0px 1px var(--bg-cc-nav-5), 0px 1px 1px var(--bg-cc-nav-5), 1px 1px 1px var(--bg-cc-nav-5), -1px -1px 1px var(--bg-cc-nav-5), 2px 2px 1px var(--bg-cc-nav-5), -2px -2px 1px var(--bg-cc-nav-5), -2px 2px 1px var(--bg-cc-nav-5), 2px -2px 1px var(--bg-cc-nav-5),
		1px 0px 2px var(--bg-cc-nav-5), 0px 1px 2px var(--bg-cc-nav-5), 1px 1px 2px var(--bg-cc-nav-5), -1px -1px 2px var(--bg-cc-nav-5), 2px 2px 2px var(--bg-cc-nav-5), -2px -2px 2px var(--bg-cc-nav-5), -2px 2px 2px var(--bg-cc-nav-5), 2px -2px 2px var(--bg-cc-nav-5);
}

/* --- .card-cover --- */
.card-cover {
	border-radius: 0;
	background-size: cover;
	transform: scale(1);
	transition: all 0.15s ease-in-out;
}
.card-cover:hover {
	box-shadow: none;
	transform: scale(1.5);
	transition: all 0.20s ease-in-out;
}
.card-cover > div:first-child {
	transition: all 0.15s ease-in-out;
}
.card-cover a {
	width: 100%;
	height: 100%;
	padding: 0;
	align-content: flex-end;
	align-items: center;
	box-shadow: none !important;
	border: none;
	font-family: "Roboto Condensed", sans-serif;
	font-weight: bold;
	line-height: 1;
	text-transform: uppercase;
	text-align: center;
	color: var(--bg-nav);
	letter-spacing: 1px;
	transition: all 0.15s ease-in-out;
}
.card-cover a .learnmore {
	font-weight: bolder;
	font-size: 26px;
	letter-spacing: 2px;
	padding: 1rem 0 1rem 0;
	text-shadow: 1px 1px 1px var(--bg-blk-50);
	box-shadow: inset 0px 0px 0px var(--bg-blu);
	transition: all 0.15s ease-in-out;
}
.card-cover a .card-title,
.card-cover:hover a .card-title {
	text-transform: uppercase;
	text-align: center;
	color: var(--bg-nav);
	letter-spacing: 1px;
	transition: all 0.15s ease-in-out;
}
.card-cover a .card-title {
	font-size: calc(2.25rem + 2.25vw);
	text-shadow: 2px 1px 2px var(--bg-blk-75);
}
.card-cover:hover a .learnmore {
	padding: 1rem 0 1rem 0;
	text-shadow: 1px 1px 1px var(--bg-blk);
	box-shadow: inset 0px -70px 0px var(--bg-blu-75);
	transition: all 0.2s ease-in-out;
}
.card-cover:hover a .card-title {
	text-shadow: 2px 2px 2px var(--bg-blk), 1px 1px 0 var(--bg-gry), 1px -1px 0 var(--bg-gry), -1px 1px 0 var(--bg-gry), -1px -1px 0 var(--bg-gry), 1px 0px 0 var(--bg-gry), 0px 1px 0 var(--bg-gry), -1px 0px 0 var(--bg-gry), 0px -1px 0 var(--bg-gry);
}
.card-cover:hover a {
	transition: all 0.2s ease-in-out;
}

/* --- .card-title --- */
.card-title .sitelink a .card-body {
	display: block; 
	font-size: 1.35rem; 
	margin-bottom: 0rem;
}

/* --- .carousel --- */
.carousel figure {
	max-height: 225px;
	padding: 10px;
	border: 1px var(--txt-drk) solid;
	background-color: var(--bg-wht);
}
.carousel button:hover {
	background: transparent;
}
.carousel .slidescss {
	background-size: cover !important;
	width: 100%;
	background-repeat: no-repeat !important;
	background-attachment: fixed !important;
	background-position: bottom !important;
	transition: all 0.15s ease-in-out;
}

/* --- .carousel-caption --- */
.carousel-caption {
	width: 75% !important;
	background-color: var(--bg-envgrn-75);
	background-image: none !important;
	font-family: "Oswald", sans-serif, var(--bs-body-font-family), sans-serif;
	font-weight: 400;
	text-align: center;
	padding: 0vw 2vw;
	color: var(--bg-wht);
	border: 1px solid var(--bg-wht);
	line-height: 1.25 !important;
	position: absolute;
	top: 50% !important;
	right: auto;
	bottom: auto;
	left: 50% !important;
	transform: translate(-50%,-50%) !important;
	opacity: 1;
	transition: all 0s ease-in-out;
	z-index: 10;
}
.carousel-caption:hover {
	background-color: var(--bg-wht-90);
	border: 1px solid var(--bg-envgrn);
	opacity: 1;
	transition: all 0.15s ease-in-out;
}
a .carousel-caption:hover .caption-text, a .carousel-caption:hover .caption-text .homesloganline1,
a .carousel-caption:hover .caption-text .homesloganline3 {
	color: var(--bg-envgrn);
	text-shadow: none !important;
}

/* --- .carousel-control --- */
.carousel-control-next,
.carousel-control-prev {
	background-image: none !important; 
	z-index: 100;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
	position: absolute;
	padding: 1em;
	background-color: var(--bg-grn-25);
	background-image: none;
	color: var(--bg-wht);
	box-shadow: 0px 0px 0px 3px var(--bg-wht), 0px 0px 0px 3px var(--bg-grn-50);
	transition: all 0.15s ease-in-out !important;
}
.carousel-control-next-icon::after,
.carousel-control-prev-icon::after {
	font-size: calc(1.5rem + 1vh);
	font-weight: bold;
	position: absolute;
	transform: translate(-50%,-50%);
	top: 50%;
	left: 50%;
	justify-content: flex-end;
	font-family: "bootstrap-icons";
}
.carousel-control-next-icon::after { content: "\F138"; }
.carousel-control-prev-icon::after { content: "\F12F"; }

.carousel-control-next-icon:hover,
.carousel-control-prev-icon:hover {
	background-color: var(--bg-grn);
	color: var(--bg-wht);
	box-shadow: 0px 0px 0px 3px var(--bg-wht), 0px 0px 0px 6px var(--bg-grn-75);
	transition: all 0.2s ease-in-out !important;
}

/* --- .carousel-indicators --- */
.carousel-indicators [data-bs-target] {
	width: auto;
	height: auto;
	border: 2px var(--bg-wht) solid;
	background-color: var(--bg-ylw-90);
	margin: 0rem 0.25rem;
	padding: 0.25rem !important;
	opacity: .75;
	border-radius: 20rem !important;
	box-shadow: 0 0px 1px 1px var(--bg-blk-50);
	transition: all 0.15s linear;
}
.carousel-indicators [data-bs-target]:hover {
	border: 2px var(--bg-wht) solid;
	background-color: var(--bg-ylw);
	box-shadow: 0 0px 5px 2px var(--bg-gry-90), 0 0px 5px 1px var(--bg-blk-90) !important;
	opacity: 1;
	transition: all 0.15s linear;
}
.carousel-indicators [data-bs-target].active {
	color: var(--bg-cc) !important;
	border: 2px var(--bg-ylw) solid;
	background-color: var(--bg-grn);
	box-shadow: 0 0px 1px 1px var(--bg-ylw), 0 0px 0px 2px var(--bg-grn) !important;
	pointer-events: none;
	opacity: 1;
	transition: all 0.15s linear;
}
.carousel-indicators .text[data-bs-target] {
	width: auto;
	color: var(--bg-cc);
	padding: .25rem;
	text-indent: 0;
	line-height: initial;
}

/* Shared target logic for .carousel-progress-slide */
.carousel-indicators [data-bs-target].carousel-progress-slide.active,
.carousel-indicators [data-bs-target].carousel-progress-slide:hover,
.carousel-indicators [data-bs-target].carousel-progress-slide:focus {
	color: var(--bg-cc) !important;
	border: 1px var(--bg-ylw) solid;
	background-color: var(--bg-wht);
	box-shadow: 0 0px 1px 1px var(--bg-ylw), 0 0px 0px 2px var(--bg-grn) !important;
	opacity: 1;
}
.carousel-indicators [data-bs-target].carousel-progress-slide.active {
	pointer-events: none;
	transition: all 0.15s linear;
}
.carousel-indicators [data-bs-target].carousel-progress-slide:hover,
.carousel-indicators [data-bs-target].carousel-progress-slide:focus {
	outline: 0;
}
.carousel-indicators [data-bs-target].carousel-progress-slide {
	max-width: 25px;
	width: 100%;
	height: 8px;
	margin: 0rem 0.35rem;
	padding: 0 !important;
	background-color: var(--bg-ylw-90);
	color: var(--bg-cc) !important;
	text-indent: 0;
	border: 1px var(--bg-wht) solid;
	overflow: hidden;
	opacity: .75;
	cursor: pointer;
	border-radius: 20rem !important;
	box-shadow: 0 0px 1px 1px var(--bg-ylw), 0 0px 0px 2px var(--bg-gry);
	transition: all 0.15s linear;
}
.carousel-indicators.countycarousel {
	height: 25px; 
	top: 0.5rem; 
	margin: 0 auto;
}

/* --- .carousel-item --- */
.carousel-fade .active.carousel-item-left, 
.carousel-fade .active.carousel-item-prev, 
.carousel-fade .carousel-item-next, 
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active, 
.carousel-item.active, 
.carousel-item {
	color: var(--bg-cc-nav);
	border-radius: var(--rounded-2);
	-webkit-transform: none;
	transform: none;
}
.carousel-item a:focus, 
.carousel-item a:focus-visible {
	width: 100%;
	height: 100%;
	outline: 3px solid var(--bg-grn) !important;
	outline-offset: -20px !important;
	color: var(--bg-cc) !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: inset 0px 0px 0px 4px var(--bg-ylw-hl), inset 0px 0px 0px 9px var(--bg-grn), inset 0px 0px 0px 13px var(--bg-ylw-hl) !important;
	border-radius: 0rem !important;
	border-color: var(--bg-grn);
	position: absolute;
	top: 0%;
	right: 0%;
	transition: all 0.15s ease-in-out;
	z-index: 10;
}
.carousel-item .card a {
	height: 100%; 
	padding: 2px 5px;
}
.carousel-item .caption-text .fs-2 {
	width: 100% !important;
	font-size: calc(1.5rem + 1.5vw) !important;
	text-shadow: 2px 1px 2px rgba(0,0,0,0.6);
	letter-spacing: 1px !important;
	line-height: 1 !important;
	transition: all 0.15s ease-in-out;
}
.carousel-item .caption-text .fs-6, 
.carousel-item .caption-text .fs-5, 
.carousel-item .caption-text .fs-4, 
.carousel-item .caption-text .fs-3 {
	width: 100% !important;
	font-size: calc(1rem + 1vw) !important;
	text-shadow: 2px 1px 2px rgba(0,0,0,0.6);
	letter-spacing: 1px !important;
	line-height: 0.8 !important;
	transition: all 0.15s ease-in-out;
}
.carousel-item:hover .caption-text .fs-6, 
.carousel-item:hover .caption-text .fs-5, 
.carousel-item:hover .caption-text .fs-4, 
.carousel-item:hover .caption-text .fs-3 {
	transition: all 0.15s ease-in-out;
}
.carousel-item img {
	border-radius: 0 !important; 
	border: none !important; 
	aspect-ratio: 3 / 0 !important;
}
.carousel-item .overlaywht {
	backdrop-filter: blur(0pt);
	transition: all 0.2s linear;
}
.carousel-item:hover .overlaywht {
	backdrop-filter: blur(0.25rem);
	transition: all 0.25s linear;
}
.carousel-item > a {
	padding: 0px !important;
}
.carousel-item.active .carousel-caption .caption-top {
	margin-top: 0px;
}

/* --- .carousel-playbutton --- */
.carousel-playbutton {
	position: absolute;
	display: block;
	margin: auto;
	z-index: 15;
}
div.carousel-playbutton {
	width: 70%;
	left: 50%;
	top: 55%;
	transform: translate(-50%, -50%);
	display: flex;
	-ms-flex-pack: center;
	justify-content: center;
	padding-left: 0;
	list-style: none;
	line-height: 3em;
	color: var(--bg-wht);
}
.carousel-playbutton i:hover { 
	color: #0F9D58; 
}

/* --- .carousel-progress --- */
.carousel-progress {
	display: block;
	height: 100%;
	width: 0%;
	background-color: #fff;
}

/* --- .carousel-progress-slide --- */
.carousel-progress-slide {
	width: 100px;
	height: 8px;
	background-color: rgba(255, 255, 255, 0.3);
	border: none;
	padding: 0;
	position: relative;
	overflow: hidden;
}
.carousel-progress-slide .carousel-progress {
	height: 100%;
	width: 0;
	background-color: var(--bg-grn);
}

/* --- .cc-home --- */
.cc-home .card-cover a .card-title {
	font-size: calc(2.75rem + 2.75vw);
	text-transform: uppercase;
	text-align: center;
	color: var(--bg-nav);
	letter-spacing: 1px;
	text-shadow: 2px 2px 2px var(--bg-blk-50), 1px 1px 0 var(--bg-gry), 1px -1px 0 var(--bg-gry), -1px 1px 0 var(--bg-gry), -1px -1px 0 var(--bg-gry), 1px 0px 0 var(--bg-gry), 0px 1px 0 var(--bg-gry), -1px 0px 0 var(--bg-gry), 0px -1px 0 var(--bg-gry);
	transition: all 0.15s ease-in-out;
}

/* --- .countycarousel --- */
.countycarousel .carousel-item {
	-webkit-background-attachment: fixed !important;
	-moz-background-attachment: fixed !important;
	background-attachment: fixed !important;
	transition: all 0.15s ease-in-out;
}

/* --- .overlay-wht & .overlaywht --- */
.overlay-wht,
.overlaywht {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 2;
}
.overlay-wht {
	background-color: rgb(255 255 255 / 25%);
}
.overlaywht {
	background-image: url('../images/bgs/gradient-cc-highlight.webp');
	background-position: bottom;
	background-size: cover;
	background-repeat: no-repeat;
}

/* --- .homesloganline --- */
.homesloganline1 {line-height: 1;}
.homesloganline2 {}
.homesloganline3 {margin-top: 0.75rem;}

.transform-none {transform: none !important;}
/* ------------------------------------------------ */
/* Media Queries                                    */
/* ------------------------------------------------ */
@media (max-width: 600px) {
	/* Placeholder preserved from source configuration if needed */
	.carousel-control-next-icon,
	.carousel-control-prev-icon {}
}

@media (min-width: 0px) and (max-width: 750px) {
	.carousel-caption {padding: 0 0.2rem;}
	.caption-text { font-size: 4vw !important; line-height: 1; }
	.carousel-item .caption-text span span.d-block {
		width: 90% !important;
		margin: 0 auto !important;
	}
	.carousel-item .caption-text .fs-2 { 
		font-size: calc(0.85rem + 0.85vw) !important; 
	}
	.caption-text .fs-3, 
	.caption-text .fs-6,
	.carousel-item .caption-text .fs-6, 
	.carousel-item .caption-text .fs-5, 
	.carousel-item .caption-text .fs-4, 
	.carousel-item .caption-text .fs-3 { 
		font-size: calc(0.75rem + 0.75vw) !important; 
	}
	.homesloganline3 {margin-top: 0.25rem;}
}