/*
    Header
*/
header {
	display: block;
}

.banner {
	--banner-bg-color: var(--color-black);
	position: relative;
	overflow: hidden;

	width: 100%;
	min-height: 40vh;
}

.home .banner {
	min-height: 60vh;
}

.banner-image {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	/* opacity: 0.5; */
}

.banner-image img {
	width: 100%;
	height: 100%;
	position: relative;
}

.banner-content {
	position: absolute;
	z-index: 2;
	top: 50%;
	translate: 0 -50%;
	left: 0;
	width: 100%;
}

.banner-text {
	text-align: center;
}

.banner-text h1 {
	font-weight: 900 !important;
	text-transform: uppercase;
	letter-spacing: 1rem;
}

.menu-item a {
	font-weight: 600;
	text-decoration: none;
}

.menu-item.current-menu-item a {
	font-weight: 700;
	/* text-decoration: underline; */
	color: var(--color-secondary);
}

/* menu-item-type-custom menu-item-object-custom current-menu-item */

@media (min-width: 1024px) {

	.banner-home,
	.banner-full {
		height: calc(100svh - 25rem);
		height: calc(100vh - 25rem);
	}

	/* When admin bar is active */
	.admin-bar .banner-home,
	.admin-bar .banner-full {
		height: calc(100svh - 28.2rem);
		height: calc(100vh - 28.2rem);
	}
}

.banner-image.banner-overlay-solid::after,
.banner-image.banner-overlay-gradient::after {
	content: '';
	position: absolute;
	opacity: var(--bg-opacity);
	inset: 0;
	z-index: 1;
}

.banner-image.banner-overlay-solid::after {
	background-color: var(--banner-bg-color);
}

.banner-image.banner-overlay-gradient::after {
	background: linear-gradient(to bottom, transparent 0%, var(--banner-bg-color) 100%);
}


.banner.bg-black {
	--banner-bg-color: var(--color-black);
}

.banner.bg-white {
	--banner-bg-color: var(--color-white);
}

.banner.bg-light-grey {
	--banner-bg-color: var(--color-light-grey);
}

.banner.bg-grey {
	--banner-bg-color: var(--color-grey);
}

.banner.bg-dark-grey {
	--banner-bg-color: var(--color-dark-grey);
}

.banner.bg-primary {
	--banner-bg-color: var(--color-primary);
}

.banner.bg-secondary {
	--banner-bg-color: var(--color-secondary);
}

.banner.bg-tertiary {
	--banner-bg-color: var(--color-tertiary);
}

