/* BEGIN AREA-DETAIL CSS ----------------------------------------> */

#header
{
	position: absolute;
}

body.scrolled #header
{
	box-shadow: unset;
}

#banner
{
	height: auto;
	min-height: unset;
	max-height: unset;
}

#bannerImage::after
{
	background: #171717;
	opacity: .36;
}


#bannerContent > div
{
	flex: 0 1 900px;
}

#bannerContent h1 
{
	--max-font-size: 60;
}


#testimonials
{
	margin: 80px 0 80px !important;
}

/*.areaGrid li .title
{
	color: var(--lightblue);
}*/

.areaGrid li a:hover .title,
.areaGrid li a:focus .title
{
	color: var(--limegreen);
}

#subContent li a
{
	color: #696969;
}

#subContent li a:hover,
#subContent li a:focus 
{
	color: var(--brightgreen);
}

@media (min-width: 920px)
{
	
	body:not(.defaultBanner) #bannerImage
	{
		position: relative;
		left: calc(50% - 50vw);
		aspect-ratio: 82/35;
		width: 100vw;
	}

	body:not(.defaultBanner) #bannerImage img
	{
		position: relative;
		display: block;
		height: auto;
	}

	body:not(.defaultBanner) #bannerContent 
	{
		position: absolute;
		bottom: max(50px, 
		             min(136px, 50px + (136 - 50) * ((100vw - 1024px) / (1500 - 1024))
		));
		left: 0;
		padding-bottom: 0;
	}
}

#subContent #area_hierarchy ul li li
{
	margin-left: 20px;
}


/* END AREA-DETAIL CSS ------------------------------------------> */