/**
 * Dauphin County
 * global.css
 * Copyright (c) 2022 by Carl David Brubaker for Mindburn Solutions
 * All Rights Reserved
**/

/* ############################################################
 * Table of Contents
** ##########################################################*/
/*
1. Variables.
	 a. Colors.
	 b. Fonts.
		    i. Colors.
		   ii. Families.
		  iii. Weights.
	 c. Widgets.
		    i. Top Bar.
2. Elements.
	 a. Site Header.
	 b. Main Content.
	 c. Site Footer.
		    i. Footer Information.
3. Utility Classes.
	 a. Buttons.
4. Global Widgets.
	 a. Alerts.
	 b. BlogPosts.
		    i. Announcement Cards.
		   ii. News Home.
	 c. Breadcrumb Navigation
	 d. Events.
		    i. Slider.
		   ii. Detail.
	 e. Featured Items/Actions.
	 f. File Accordion.
	 g. Heading Image (Image Gallery).
	 h. Navigation (Main in dc-navigation.css)
		    i. Section Accordion.
		   ii. Footer Accordion.
		  iii. Detail Navigation.
	 i. Search.
		    i. Hero Search.
		   ii. Sidebar Search.
	 j. Top Bar.
5. Home Page
*/

@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap");

/* ############################################################
 * Variables
** ##########################################################*/
:root {
	/* ****************************************
	 * Colors
	** ***************************************/
	--color--dc-black: #383338;
	--color--dc-blue: #1b2956;
	--color--dc-blue--hover: #475479;
	--color--dc-blue--outlined--hover: #d1d4de;
	--color--dc-blue--bright: #063ea9;
	--color--dc-gray: #494348;
	--color--dc-gray--hover: #6e696d;
	--color--dc-gray--outlined--hover: #dbd9da;
	--color--dc-gray--medium: #6d6d6d;
	--color--dc-gray--medium-footer: #9c9c9c;
	--color--dc-gray--light: #f0f0f0;
	--color--dc-green: #007d8c;
	--color--dc-green--hover: #3397a3;
	--color--dc-green--outlined--hover: #cce5e8;
	--color--dc-yellow: #eed676;
	--color--dc-yellow--hover: #f1de91;
	--color--dc-yellow--outlined--hover: #fcf7e4;
	--color--dc-yellow--bright: #fec90a;
	--color--global-background: #ececec;
	--color--white: #fff;

	/* --- from Bootstrap --- */
	--color--red: #dc3545;
	--color--red--hover: #e7727d;

	/* ****************************************
	 * Fonts
	** ***************************************/
	/* ######## Colors ######## */
	--color--font--global: var(--color--dc-gray);
	--color--font--light: var(--color--dc-gray--light);
	--color--links: #005c66;
	--color--links--hover: var(--color--dc-green);
	--color--links--visited: var(--color--dc-blue);

	/* ######## Families ######## */
	--font-family--lora: "Lora", serif;
	--font-family--open-sans: "Open Sans", sans-serif;

	/* ######## Weights ######## */
	--bold: 700;
	--semi-bold: 600;

	/* ****************************************
	 * Widgets
	** ***************************************/
	/* ------------------------------
	 * Top Bar
	** ----------------------------*/
	--color--top-bar: rgba(13, 104, 121, 0.95);
	--color--top-bar--text: #a8f1ff;
}

/* ############################################################
 * Elements
** ##########################################################*/
body {
	background: var(--color--global-background);
	color: var(--color--font--global);
	font-family: var(--font-family--open-sans);
}

a {
	color: var(--color--links);
	text-decoration: none;
	word-break: break-word;
}

a:active,
a:focus,
a:hover {
	color: var(--color--links--hover);
}

a:visited {
	color: var(--color--font--global);
}

img.-align-left,
img.-align-right {
	margin: 0.7rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-family--lora);
	font-weight: var(--semi-bold);
}

h1 {
	font-weight: var(--bold);
}

/* ****************************************
 * Site Header
** ***************************************/
#main-header {
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 100;
}

/* ****************************************
 * Main Content
** ***************************************/
#main-content h1 {
	margin-bottom: 1.5rem;
	margin-left: -0.067em;
}

/* ****************************************
 * Site Footer
** ***************************************/
#main-footer {
	background: var(--color--dc-black);
	color: var(--color--dc-gray--medium-footer);
	padding-bottom: 7rem;
	padding-top: 5.5rem;
}

#main-footer .ada-policy {
	color: var(--color--dc-yellow);
	text-decoration: none;
}

#main-footer .ada-policy:active,
#main-footer .ada-policy:focus,
#main-footer .ada-policy:hover {
	text-decoration: underline;
}

#main-footer .footer-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0 auto;
}

#main-footer .column-1 {
	margin-bottom: 3rem;
}

#main-footer .column-2 {
	margin-left: auto;
	margin-right: auto;
	max-width: 20rem;
	width: 100%;
}

@media (min-width: 41rem) {
	#main-footer .column-2 {
		max-width: 40rem;
	}
}

@media (min-width: 1200px) {
	#main-footer .footer-wrapper {
		flex-direction: row;
	}

	#main-footer .column-1 {
		border-right: 1px solid var(--color--font--light);
		margin-right: 35px;
		padding-right: 35px;
	}

	#main-footer .column-2 {
		margin: 0;
	}
}

@media (min-width: 1400px) {
	#main-footer .column-1 {
		margin-right: 75px;
		padding-right: 75px;
	}
}

/* ------------------------------
 * Footer Information
** ----------------------------*/
#footer-info {
	margin: 0 auto;
	max-width: 15em;
	text-align: center;
}

#footer-info .footer-logo-link {
	display: block;
	margin-bottom: 2rem;
}

#footer-info dt,
#footer-info .contact {
	color: var(--color--white);
	font-family: var(--font-family--lora);
	font-size: 1.1em;
	font-weight: 400;
}

#footer-info .contact:active,
#footer-info .contact:focus,
#footer-info .contact:hover {
	color: var(--color--white);
	text-decoration: underline;
}

#footer-info .contact:visited {
	color: var(--color--white);
}

#footer-info .social-icon-row {
	display: flex;
	justify-content: space-evenly;
	margin-bottom: 1.5rem;
	margin-top: 1.5rem;
}

#footer-info .social-icon-row .social-icon {
	display: flex;
	align-content: center;
	max-height: 2rem;
	max-width: 2rem;
}

#footer-info .social-icon-row .social-icon img {
	width: 1.5rem;
}

#footer-info .nav-item {
	padding: 0.1rem;
}

#footer-info .nav-link {
	color: var(--color--font--light);
	margin: 0;
	padding: 0;
}

#footer-info .nav-link:hover {
	text-decoration: underline;
}

#credits {
	margin-top: 3rem;
}

/* ############################################################
 * Utility Classes
** ##########################################################*/
.dc-blue-overlay {
	background: rgba(5, 67, 130, 0.7);
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
}

.dc-icon {
	font-size: 2.7rem;
	margin: 0.4rem;
}

@media (min-width: 768px) {
	.dc-icon {
		font-size: 3rem;
	}
}

.dc-no-underline,
.dc-no-underline:active,
.dc-no-underline:focus,
.dc-no-underline:hover,
.dc-no-underline:visited {
	text-decoration: none;
}

.dc-hover-underline:hover {
	text-decoration: underline;
}

.dc-rounded-15 {
	border-radius: 0;
}

.dc-rounded-top {
	clip-path: ellipse(200% 100% at 50% 100%);
}

@media (min-width: 576px) {
	.dc-rounded-15 {
		border-radius: 15px;
	}

	.dc-rounded-top {
		clip-path: ellipse(175% 100% at 50% 100%);
	}
}

@media (min-width: 768px) {
	.dc-rounded-top {
		clip-path: ellipse(150% 100% at 50% 100%);
	}
}

@media (min-width: 992px) {
	.dc-rounded-top {
		clip-path: ellipse(125% 100% at 50% 100%);
	}
}

@media (min-width: 1200px) {
	.dc-rounded-top {
		clip-path: ellipse(100% 100% at 50% 100%);
	}
}

@media (min-width: 1400px) {
	.dc-rounded-top {
		clip-path: ellipse(90% 100% at 50% 100%);
	}
}

/* ****************************************
 * Buttons
** ***************************************/
.btn:visited {
	text-decoration: none;
}

.dc-btn-blue {
	background: var(--color--dc-blue);
	border: 3px solid var(--color--dc-blue);
	color: var(--color--white);
	font-family: var(--font-family--open-sans);
	font-weight: var(--bold);
	margin: 1.5rem;
	max-width: calc(100% - 1rem);
	text-transform: uppercase;
	width: 12rem;
}

.dc-btn-blue:active,
.dc-btn-blue:focus,
.dc-btn-blue:hover {
	background: var(--color--dc-blue--hover);
	border-color: var(--color--dc-blue--hover);
	color: var(--color--white);
}

.dc-btn-gray {
	background: var(--color--dc-gray);
	border: 3px solid var(--color--dc-gray);
	color: var(--color--white);
	font-family: var(--font-family--open-sans);
	font-weight: var(--bold);
	margin: 1.5rem;
	max-width: calc(100% - 1rem);
	text-transform: uppercase;
	width: 12rem;
}

.dc-btn-gray:active,
.dc-btn-gray:focus,
.dc-btn-gray:hover {
	background: var(--color--dc-gray--hover);
	border-color: var(--color--dc-gray--hover);
	color: var(--color--white);
}

.dc-btn-green {
	background: var(--color--dc-green);
	border: 3px solid var(--color--dc-green);
	color: var(--color--white);
	font-family: var(--font-family--open-sans);
	font-weight: var(--bold);
	margin: 1.5rem;
	max-width: calc(100% - 1rem);
	text-transform: uppercase;
	width: 12rem;
}

.dc-btn-green:active,
.dc-btn-green:focus,
.dc-btn-green:hover {
	background: var(--color--dc-green--hover);
	border-color: var(--color--dc-green--hover);
	color: var(--color--white);
}

.dc-btn-red {
	background: var(--color--red);
	border: 3px solid var(--color--red);
	color: var(--color--white);
	font-family: var(--font-family--open-sans);
	font-weight: var(--bold);
	margin: 1.5rem;
	max-width: calc(100% - 1rem);
	text-transform: uppercase;
	width: 12rem;
}

.dc-btn-red:active,
.dc-btn-red:focus,
.dc-btn-red:hover {
	background: var(--color--red--hover);
	border-color: var(--color--red--hover);
	color: var(--color--white);
}

.dc-btn-yellow {
	background: var(--color--dc-yellow);
	border: 3px solid var(--color--dc-yellow);
	color: var(--color--dc-gray);
	font-family: var(--font-family--open-sans);
	font-weight: var(--bold);
	margin: 1.5rem;
	max-width: calc(100% - 1rem);
	text-transform: uppercase;
	width: 12rem;
}

.dc-btn-yellow:active,
.dc-btn-yellow:focus,
.dc-btn-yellow:hover {
	background: var(--color--dc-yellow--hover);
	border-color: var(--color--dc-yellow--hover);
}

.dc-btn-blue.dc-btn-outlined {
	background: transparent;
	color: var(--color--dc-blue);
}

.dc-btn-blue.dc-btn-outlined:active,
.dc-btn-blue.dc-btn-outlined:focus,
.dc-btn-blue.dc-btn-outlined:hover {
	background: var(--color--dc-blue--outlined--hover);
}

.dc-btn-gray.dc-btn-outlined {
	background: none;
	color: var(--color--dc-gray);
}

.dc-btn-gray.dc-btn-outlined:active,
.dc-btn-gray.dc-btn-outlined:focus,
.dc-btn-gray.dc-btn-outlined:hover {
	background: var(--color--dc-gray--outlined--hover);
}

.dc-btn-green.dc-btn-outlined {
	background: transparent;
	color: var(--color--dc-green);
}

.dc-btn-green.dc-btn-outlined:active,
.dc-btn-green.dc-btn-outlined:focus,
.dc-btn-green.dc-btn-outlined:hover {
	background: var(--color--dc-green--outlined--hover);
}

.dc-btn-red.dc-btn-outlined {
	background: transparent;
	color: var(--color--red);
}

.dc-btn-red.dc-btn-outlined:active,
.dc-btn-red.dc-btn-outlined:focus,
.dc-btn-red.dc-btn-outlined:hover {
	background: var(--color--red--hover);
}

.dc-btn-yellow.dc-btn-outlined {
	background: transparent;
	color: var(--color--dc-gray);
}

.dc-btn-yellow.dc-btn-outlined:active,
.dc-btn-yellow.dc-btn-outlined:focus,
.dc-btn-yellow.dc-btn-outlined:hover {
	background: var(--color--dc-yellow--outlined--hover);
}

.dc-btn-small {
	border-width: 2px;
	font-size: 0.8rem;
	padding-bottom: 0.275rem;
	padding-top: 0.25rem !important;
	width: fit-content;
}

/* ############################################################
 * Widgets
** ##########################################################*/
/* ****************************************
 * Alerts
** ***************************************/
#alerts.has-alert {
	padding: 0.5rem;
}

#alerts a {
	display: block;
	font-weight: var(--semi-bold);
	text-align: center;
	text-decoration: none;
}

#alerts a:active,
#alerts a:focus,
#alerts a:hover {
	color: currentColor;
	opacity: 0.9;
}

#alerts.alert-green {
	background: var(--color--dc-green);
}

#alerts.alert-green a {
	color: var(--color--white);
}

#alerts.alert-red {
	background: var(--color--red);
}

#alerts.alert-red a {
	color: var(--color--white);
}

#alerts.alert-yellow {
	background: var(--color--dc-yellow);
}

#alerts.alert-yellow a {
	color: var(--color--font--global);
}

/* ****************************************
 * BlogPosts
** ***************************************/
/* ------------------------------
 * Announcement Cards
** ----------------------------*/
.announcement-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
	margin-top: 1rem;
}

.announcement-grid a:focus,
.announcement-grid a:hover {
	text-decoration: none;
}

@media (min-width: 768px) {
	.announcement-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 992px) {
	.announcement-grid {
		gap: 1.5rem;
		grid-template-columns: 1fr 1fr 1fr;
	}
}

/* ------------------------------
 * News Home
** ----------------------------*/
@media (min-width: 992px) {
	.two-cols {
		columns: 2;
	}

	.two-cols li {
		break-inside: avoid;
	}
}

.news-date {
	background: var(--color--dc-yellow);
	color: var(--color--dc-gray);
	font-family: var(--font-family--lora);
	font-weight: var(--semi-bold);
}

.news-date:hover {
	text-decoration: none;
}

/* ****************************************
 * Breadcrumb Navigation
** ***************************************/
#breadcrumb {
	margin-bottom: 0.9rem;
}

#breadcrumb-nav a,
#breadcrumb-nav a:hover,
#breadcrumb-nav a:visited,
#breadcrumb-nav li {
	color: var(--color--links);
	font-weight: var(--bold);
}

#breadcrumb-nav li + li::before {
	color: var(--color--font--global);
	content: ">";
	margin: 0 0.5em;
}

#breadcrumb-nav li:last-of-type::after {
	color: var(--color--font--global);
	content: ":";
	margin: 0 0.5em;
}

#breadcrumb-nav .breadcrumb {
	flex-direction: column;
	margin-bottom: 3rem;
}

@media (min-width: 768px) {
	#breadcrumb-nav .breadcrumb {
		flex-direction: row;
	}
}

/* ****************************************
 * Events
** ***************************************/
/* ------------------------------
 * Slider
** ----------------------------*/
.carousel-indicators {
	bottom: unset;
	justify-content: end;
	margin-right: 15px;
	top: 15px;
}

.carousel-indicators [data-bs-target] {
	border: 0;
	border-radius: 50%;
	box-shadow: 0 0 5px var(--color--dc-blue);
	flex: 0 0 auto;
	height: 15px;
	margin-left: 7px;
	margin-right: 7px;
	opacity: 1;
	transition: background-color 0.6s ease;
	width: 15px;
}

.carousel-indicators .active {
	background-color: var(--color--dc-yellow);
}

.carousel-caption {
	position: static;
	color: var(--color--dc-black);
	text-align: left;
	padding-left: 0.2rem;
	padding-right: 0.2rem;
}

.carousel-caption h5 {
	font-family: var(--font-family--open-sans);
	font-weight: var(--semi-bold);
}

.carousel-caption time {
	text-transform: uppercase;
}

/* ------------------------------
 * Detail
** ----------------------------*/
#event-detail time {
	color: var(--color--dc-green);
}

.address-contact-grid {
	display: grid;
	grid-template-columns: 1fr;
}

@media (min-width: 576px) {
	.address-contact-grid {
		grid-template-columns: max-content 1fr;
	}
}

.address-contact-grid .label {
	font-weight: var(--bold);
}

.address-contact-grid .info {
	padding-left: 0.5em;
}

.address-contact-grid .event-contact-name {
	color: var(--color--dc-green);
}

/* ****************************************
 * Featured Items/Actions
** ***************************************/
.featured-item {
	display: grid;
	grid-template-columns: 3.7rem 1fr;
	grid-template-areas:
		"featured-item-icon   featured-item-heading"
		"featured-item-icon   featured-item-subheading";
	margin: 0.6rem auto;
}

.featured-item.heading-only {
	grid-template-areas: "featured-item-icon   featured-item-heading";
}

.featured-item .dc-icon {
	grid-area: featured-item-icon;
	padding-right: 0.3rem;
}

.featured-item .heading {
	color: var(--color--links);
	grid-area: featured-item-heading;
	font-family: var(--font-family--lora);
	font-size: 1.1rem;
	font-style: italic;
	font-weight: var(--semi-bold);
	margin-top: 0.3rem;
	text-decoration: none;
}

.featured-item.heading-only .heading {
	align-self: center;
	display: flex;
	margin-bottom: 0.4rem;
	margin-top: 0.4rem;
}

.featured-item .subheading {
	grid-area: featured-item-subheading;
	font-size: 0.9rem;
}

.featured-item.heading-only .subheading {
	display: none;
}

@media (min-width: 768px) {
	.featured-item .heading {
		font-size: 1.2rem;
	}

	.featured-item .subheading {
		font-size: 1rem;
	}
}

/* ****************************************
 * File Accordion
** ***************************************/
.accordion .accordion-button.accordion-button:not(.collapsed) {
	background: transparent;
	color: currentColor;
}

/* ****************************************
 * Heading Image (not home page)
** ***************************************/
#page-header-image {
	background-position: top center;
	background-size: cover;
	height: 65vh;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: -1;
}

.spacer {
	height: 20vh;
}

/* ######## Change view in admin ######## */
.rdTable #page-header-image {
	position: static;
	height: 20vh;
}

.rdTable .spacer {
	display: none;
}

/* ****************************************
 * Navigation (not main)
** ***************************************/
/* ------------------------------
 * Section Accordion
** ----------------------------*/
.accordion.accordion-nav .accordion-button:not(.collapsed) {
	box-shadow: none;
}

.accordion-nav .accordion-item {
	background: transparent;
	border: none;
	max-width: 100%;
}

.accordion-nav .accordion-item .accordion-body {
	padding: 0 0 1.5rem;
}

.accordion-nav .accordion-item .accordion-header {
	display: flex;
	justify-content: space-between;
}

.accordion-nav .accordion-button:focus {
	box-shadow: none;
}

.accordion-nav .accordion-item .accordion-header .accordion-button.dropdown-toggle-dc {
	background: none;
	border: none;
	border-radius: 0;
	display: block;
	margin: 0;
	padding: 0.4em;
	width: 2rem;
}

.accordion-nav
	.accordion-item
	.accordion-header
	.accordion-button.dropdown-toggle-dc
	.dropdown-symbol-dc {
	background: none;
	border-style: solid;
	border-width: 0 1.5px 1.5px 0;
	color: var(--color--dc-gray);
	display: block;
	height: var(--primary-menu--dropdown-symbol-width);
	transform: rotate(45deg) translateX(-25%) translateY(-50%);
	width: var(--primary-menu--dropdown-symbol-width);
}

.accordion-nav .accordion-item .accordion-button::after {
	display: none;
}

#section-page-menu {
	background: var(--color--dc-gray--light);
	border-bottom-right-radius: 15px;
	padding: 2.3rem 0;
}

#section-page-menu h4 {
	color: var(--color--dc-gray--medium);
	font-family: var(--font-family--open-sans);
	font-size: 0.9em;
	font-weight: var(--semi-bold);
	padding-left: 2.5rem;
	text-transform: uppercase;
}

#section-page-menu h4 a,
#section-page-menu h4 a:focus,
#section-page-menu h4 a:hover,
#section-page-menu h4 a:visited,
#section-page-menu h5 a,
#section-page-menu h5 a:focus,
#section-page-menu h5 a:hover,
#section-page-menu h5 a:visited {
	color: currentColor;
}
.section-menu {
	margin-top: 0.9rem;
}

.section-menu .section-menu-header {
	color: var(--color--dc-gray);
	font-size: 1.3em;
	padding: 1.2rem 1rem 0 2.5rem;
	text-transform: uppercase;
}

.section-menu .accordion-button {
	color: var(--color--dc-gray);
}

.section-menu .accordion-body {
	font-family: var(--font-family--lora);
	margin: 0;
	padding: 0;
}

.section-menu ul {
	margin: 0;
	padding: 0;
}

.section-menu a.nav-link {
	color: var(--color--font--global);
	font-style: italic;
	padding-left: 2.5rem;
}

/* ------------------------------
 * Footer Accordion
** ----------------------------*/
#footer-nav-menu .footer-nav-columns {
	display: flex;
	flex-direction: column;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#footer-nav-menu .footer-nav-column {
	width: 100%;
}

@media (min-width: 41rem) {
	#footer-nav-menu .footer-nav-column {
		width: calc(50% - 0.5rem);
	}
}

#footer-nav-menu .accordion-nav {
	flex-direction: column;
	flex-wrap: nowrap;
}

#footer-nav-menu .accordion-item .accordion-header a {
	color: var(--color--dc-yellow);
	font-family: var(--font-family--open-sans);
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
}

#footer-nav-menu
	.accordion-item
	.accordion-header
	.accordion-button.dropdown-toggle-dc
	.dropdown-symbol-dc {
	color: var(--color--dc-yellow);
	font-size: 1rem;
}

#footer-nav-menu .accordion-item .accordion-item .accordion-header a {
	color: var(--color--white);
	font-family: var(--font-family--lora);
	font-size: 0.9rem;
	font-weight: 400;
	text-transform: none;
}

#footer-nav-menu
	.accordion-item
	.accordion-item
	.accordion-header
	.accordion-button.dropdown-toggle-dc
	.dropdown-symbol-dc {
	color: var(--color--white);
	font-size: 0.9rem;
}

#footer-nav-menu .accordion-item .accordion-item .accordion-body {
	list-style-type: disc;
	margin-left: 1.5em;
}

#footer-nav-menu .accordion-item .accordion-item .accordion-body a {
	color: var(--color--dc-gray--medium-footer);
	font-size: 0.8rem;
	font-style: italic;
	padding-left: 0.1rem;
}

@media (min-width: 41rem) {
	#footer-nav-menu .footer-nav-columns {
		flex-direction: row;
		gap: 1rem;
	}
}

/* ------------------------------
 * Detail Navigation
** ----------------------------*/
#detail-page-menu {
	background: var(--color--dc-green);
	margin-bottom: 1rem;
	padding: 2.3rem 0;
}

#detail-page-menu .nav-link {
	color: var(--color--white);
	font-family: var(--font-family--lora);
	font-size: 1.2em;
	font-style: italic;
	padding-left: 2.5rem;
}

#detail-page-menu .icon {
	display: none;
	padding-right: 1.5rem;
	padding-top: 0.5rem;
}

#detail-page-menu .icon svg {
	width: 1rem;
}

#detail-page-menu .nav-link.detail-heading {
	color: var(--color--top-bar--text);
	font-family: var(--font-family--open-sans);
	font-size: 1em;
	font-style: normal;
	font-weight: var(--semi-bold);
	text-decoration: none;
	text-transform: uppercase;
}

/* Display triangle when page is selected */
#detail-page-menu .nav-item.active-child {
	display: flex;
}

#detail-page-menu .nav-item.active-child .icon {
	display: inline;
}

#detail-page-menu .nav-item.active-child a {
	padding-left: 0;
}

/* ****************************************
 * Search
** ***************************************/
/* ------------------------------
 * Hero Search
** ----------------------------*/
#HomePageSearch {
	top: 50vh;
	position: absolute;
	width: 100%;
}

#HomePageSearch .shadow-wrapper {
	background: rgba(0, 0, 0, 0.4);
	border-radius: 0.4rem;
	margin-left: auto;
	margin-right: auto;
	max-width: 30rem;
	width: calc(100% - 1rem);
	padding: 0.7rem;
	position: relative;
	top: 0;
}

#HomePageSearch .inner-wrapper {
	background: var(--color--white);
	border-radius: 0.4rem;
	display: flex;
	flex-direction: row;
	gap: 0.5rem;
	padding: 0.5rem;
}

#HomePageSearch .inner-wrapper input {
	font-style: italic;
	min-width: 0;
	width: 100%;
}

#HomePageSearch .inner-wrapper button {
	background: var(--color--dc-yellow);
	border: none;
	color: var(--color--dc-gray);
}

#HomePageSearch .search-placeholder {
	display: flex;
	flex-direction: column;
	padding: 0.2em 0 0.2em 0.2em;
	position: absolute;
	top: 0;
	left: 1.5em;
	height: 100%;
	justify-content: center;
}

#HomePageSearch .search-placeholder .suggested-label {
	color: rgba(0, 0, 0, 0.25);
	display: flex;
	font-size: 0.65em;
	text-transform: uppercase;
	height: fit-content;
}

#HomePageSearch .search-placeholder .suggested-text {
	display: block;
	font-style: italic;
	height: fit-content;
}

#search-image {
	height: 100vh;
	position: relative;
}

@media screen and (min-width: 768px) {
	#HomePageSearch {
		top: 35vh;
	}

	#HomePageSearch .search-placeholder {
		flex-direction: row;
		gap: 0.5rem;
	}

	#HomePageSearch .search-placeholder .suggested-label,
	#HomePageSearch .search-placeholder .suggested-text {
		align-self: center;
	}

	#search-image {
		height: 70vh;
	}
}

#HomePageSearch .search-placeholder.hide {
	display: none;
}

#HomePageSearch input {
	/*    border: .7em solid rgba(0, 0, 0, 0.4);*/
	border-radius: 0.3em;
	border: none;
}

/* ------------------------------
 * Sidebar Search
** ----------------------------*/
#sidebar-search {
	margin-bottom: 1rem;
}

#sidebar-search .shadow-wrapper {
	background: #e0e0e0;
	border-radius: 12px;
	padding: 12px;
}

#sidebar-search .inner-wrapper {
	background: var(--color--white);
	border-radius: 8px;
	display: flex;
	flex-direction: row;
	gap: 0.5rem;
	padding: 0.5rem;
}

#sidebar-search .inner-wrapper input {
	border: none;
	font-size: 1.2em;
	font-style: italic;
	min-width: 0;
	width: 100%;
}

#sidebar-search .inner-wrapper button {
	background: var(--color--dc-yellow);
	border: none;
	border-radius: 6px;
	color: var(--color--dc-gray);
}

#sidebar-search .inner-wrapper button svg {
	height: 1.4em;
	width: 1.4em;
}

/* ****************************************
 * Top Bar
** ***************************************/
#top-bar {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"commissioners-text"
		"commissioners-names";
	position: relative;
	z-index: 20;
}

#top-bar .commissioners-image {
	grid-area: commissioners-image;
	display: none;
}

#top-bar .commissioners-names {
	grid-area: commissioners-names;
	background: var(--color--top-bar);
	padding: 0.4rem 0.5rem;
	text-align: center;
}

#top-bar .commissioners-names a,
#top-bar .commissioners-names a:focus,
#top-bar .commissioners-names a:hover,
#top-bar .commissioners-names a:visited {
	color: var(--color--top-bar--text);
}

#top-bar .commissioners-text {
	grid-area: commissioners-text;
	background: rgba(13, 104, 121, 0.6);
	padding: 0.4rem 0.5rem;
	text-align: center;
	width: 100%;
}

#top-bar .commissioners-text a,
#top-bar .commissioners-text a:focus,
#top-bar .commissioners-text a:hover,
#top-bar .commissioners-text a:visited {
	color: var(--color--white);
	font-style: italic;
	font-weight: var(--bold);
}

#top-bar .commissioners-text .short {
	display: none;
	color: var(--color--top-bar--text);
}

#top-bar .dc-banner-logo-wrapper {
	display: none;
}

#top-bar .site-languages {
	grid-area: site-languages;
	color: var(--color--white);
	display: none;
}

/* ***** Home page styling ***** */
#top-bar.home {
	grid-template-areas:
		"commissioners-text"
		"commissioners-names"
		"dc-banner-logo";
}

#top-bar.home .dc-banner-logo-wrapper {
	grid-area: dc-banner-logo;
	display: block;
	position: relative;
}

#top-bar.home .dc-banner-logo {
	position: absolute;
	top: 5%;
	height: 8rem;
}

@media (min-width: 768px) {
	#top-bar {
		grid-template-columns: 1fr max-content;
		grid-template-areas:
			"commissioners-text   commissioners-image"
			"commissioners-names  commissioners-image";
	}

	#top-bar .commissioners-image {
		display: block;
		height: 5rem;
	}

	#top-bar .commissioners-names {
		padding-right: 1.5rem;
		text-align: right;
	}

	#top-bar .commissioners-text {
		padding-bottom: 0.3rem;
		padding-top: 0.5rem;
		padding-right: 1.5rem;
		text-align: right;
	}

	/* ***** Home page styling ***** */
	#top-bar.home {
		grid-template-areas:
			"commissioners-text   commissioners-image"
			"commissioners-names  commissioners-image"
			"dc-banner-logo       dc-banner-logo";
	}

	#top-bar.home .dc-banner-logo-wrapper {
		padding-left: 2rem;
	}
}

@media (min-width: 992px) {
	#top-bar {
		background: var(--color--top-bar);
		grid-template-columns: 1fr max-content max-content max-content;
		grid-template-areas: "commissioners-text  commissioners-image  commissioners-names  site-languages";
	}

	#top-bar .commissioners-image {
		height: 3rem;
	}

	#top-bar.home .commissioners-image {
		height: 5rem;
	}

	#top-bar .commissioners-names {
		align-self: center;
		background: transparent;
		padding-left: 1rem;
		padding-right: 1rem;
		text-align: left;
	}

	#top-bar .commissioners-text {
		align-self: center;
		background: transparent;
		text-align: right;
	}

	#top-bar .commissioners-text .full {
		display: none;
	}

	#top-bar .commissioners-text .short {
		display: inline;
	}

	#top-bar .site-languages {
		align-self: center;
		display: block;
		padding-right: 0.4rem;
	}

	#top-bar .site-languages > * {
		border-left: 2px solid var(--color--white);
		padding-left: 0.8rem;
		padding-right: 0.8rem;
	}

	#top-bar .site-languages a,
	#top-bar .site-languages a:focus,
	#top-bar .site-languages a:hover,
	#top-bar .site-languages a:visited {
		color: var(--color--white);
		font-family: var(--font-family--lora);
		font-style: italic;
	}

	/* ***** Home page styling ***** */
	#top-bar.home {
		background: linear-gradient(rgba(13, 104, 121, 0.6) 50%, var(--color--top-bar) 50%);
		grid-template-columns: 2fr max-content 5fr max-content;
		grid-template-areas:
			"nothing-1       commissioners-image  commissioners-text   nothing-2"
			"dc-banner-logo  commissioners-image  commissioners-names  site-languages";
	}

	#top-bar.home .commissioners-text {
		align-self: end;
		padding-bottom: 0.2rem;
		padding-left: 1rem;
		text-align: left;
	}

	#top-bar.home .commissioners-text .full {
		display: inline;
	}

	#top-bar.home .commissioners-text .short {
		display: none;
	}

	#top-bar.home .dc-banner-logo-wrapper {
		padding-left: 0;
	}
}

@media (min-width: 1200px) {
	/* ***** Home page styling ***** */
	#top-bar.home {
		grid-template-columns: 1fr max-content 2fr max-content;
	}

	#top-bar.home .dc-banner-logo-wrapper {
		padding-left: 1rem;
	}

	#top-bar.home .site-languages {
		padding-right: 3rem;
	}

	#top-bar.home .commissioners-image {
		height: 8rem;
	}
}

@media (min-width: 1400px) {
	/* ***** Home page styling ***** */
	#top-bar.home {
		grid-template-columns: 2fr max-content 3fr max-content;
	}

	#top-bar.home .dc-banner-logo-wrapper {
		padding-left: 3rem;
	}

	#top-bar .site-languages {
		padding-right: 5rem;
	}

	#top-bar.home .dc-banner-logo {
		height: 12rem;
		right: 3rem;
	}
}

/* ############################################################
 * Home Page
** ##########################################################*/

#visit {
	height: fit-content;
}

.visit-image-wrapper {
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1;
}

.visit-image {
	display: block;
	margin-left: auto;
	margin-right: auto;
	max-width: 24rem;
	width: calc(100% - 1rem);
}

.visit-image-wrapper p {
	color: var(--color--white);
	font-family: var(--font-family--lora);
	font-size: 2.5em;
	font-weight: var(--bold);
	line-height: 1.2;
	max-width: 20em;
	margin: 1.5rem 0 3rem;
	text-align: center;
}

.visit-image-wrapper .btn {
	background: var(--color--dc-yellow--bright);
	border-color: var(--color--dc-yellow--bright);
	color: var(--color--dc-blue--bright);
	font-weight: var(--bold);
}