/* --------------- Page Banner --------------- */
header#pageBanner {
	--clip-offset-text-area: 60%;
	--clip-top-skew: 10%;
	--image-holder-size-factor: 0.75;
	--image-size: 100%;
	height: 420px;
}
header#pageBanner div.imageHolder {
	align-items: center;
	align-content: center;
	display: flex;
	height: 100%;
	left: var(--anchor-position);
	position: absolute;
	top: var(--anchor-position);
	width: calc(100% * var(--image-holder-size-factor));
}
header#pageBanner img {
	height: var(--image-size);
	object-fit: cover;
	object-position: center;
	position: absolute;
	width: var(--image-size);
}
header#pageBanner img.overlay {
	--clip-offset: calc(var(--clip-offset-text-area) / var(--image-holder-size-factor));
	clip-path: polygon(calc(var(--clip-offset) + calc(var(--clip-top-skew) / var(--image-holder-size-factor))) 0%, 100% 0%, 100% 100%, var(--clip-offset) 100%);
	filter: grayscale(100%) contrast(110%);
}
header#pageBanner div.textArea {
	background-color: var(--blue-overlay);
	clip-path: polygon(calc(var(--clip-offset-text-area) + var(--clip-top-skew)) 0%, 100% 0%, 100% 100%, var(--clip-offset-text-area) 100%);
	color: #FFFFFF;
	height: var(--image-size);
	left: var(--anchor-position);
	position: absolute;
	top: var(--anchor-position);
	width: var(--image-size);
}
header#pageBanner div.overlay {
	--clip-offset: 65%;
	align-items: center;
	background-color: var(--dark-gray);
	clip-path: polygon(calc(var(--clip-offset) + var(--clip-top-skew)) 0%, 100% 0%, 100% 100%, var(--clip-offset) 100%);
	display: flex;
	height: var(--image-size);
	left: var(--anchor-position);
	position: absolute;
	top: var(--anchor-position);
	transition: background-color 0.25s;
	width: var(--image-size);
}
header#pageBanner h1.bannerTitle {
	color: #FFFFFF;
	font-family: var(--font-circular-std);
	font-size: 48px;
	line-height: 55px;
	margin-bottom: 0px;
	margin-left: calc(var(--clip-offset) + var(--clip-top-skew));
	margin-right: var(--gap);
}

/* ------------------------------ */
@media all and (max-width: 1369px) {
/* --------------- Page Banner --------------- */
header#pageBanner {
	height: 320px;
}
header#pageBanner h1.bannerTitle {
	font-size: 36px;
	line-height: 40px;
}
}

/* ------------------------------ */
@media all and (max-width: 1079px) {
/* --------------- Page Banner --------------- */
header#pageBanner {
	--clip-offset-text-area: 50%;
}
header#pageBanner div.overlay {
	--clip-offset: 55%;
}
}

/* ------------------------------ */
@media all and (max-width: 769px) {
/* --------------- Page Banner --------------- */
header#pageBanner {
	height: 280px;
}
header#pageBanner h1.bannerTitle {
	font-size: 32px;
}
}

/* ------------------------------ */
@media all and (max-width: 419px) {
/* --------------- Page Banner --------------- */
header#pageBanner {
	--clip-offset-text-area: 25%;
	height: 220px;
}
header#pageBanner div.overlay {
	--clip-offset: 32.5%;
}
header#pageBanner h1.bannerTitle {
	margin-left: calc(var(--clip-offset) + var(--clip-top-skew) + calc(var(--gap) / 2));
	font-size: 28px;
	line-height: 35px;
}
}