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

#bannerContent
{
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	top: unset;
	bottom: 0px;
	height: 100%;
}

#bannerContentInner
{
	justify-content: center;
	max-width: 1050px;
}

#bannerContent h1
{
	margin-left: 0;
}

#bannerContent #accessories
{
	align-self: flex-start;
	margin-bottom: min(80px, 8vw);
}

@media (min-width: 1350px)
{
	#bannerContentInner
	{
		max-width: 575px;
	}

	#bannerContent #accessories
	{
		margin-bottom: min(40px, 4vw);
	}
}

a#pdfLink
{
	background: #fff;
	color: var(--deep-navy-blue);
}

svg#bannerMark
{
	left: unset;
	right: -220px;
}

#bannerContent a:is(:hover,:focus)
{
	color: var(--extra-light-blue);
}

#bannerContentInner
{	
	position: relative;
	width: 100%;
	height: 100%;
}

#bannerContentInner > p:last-of-type
{
	margin-bottom: 0;
	padding-bottom: 0;
}

#content,
#mainContent
{
	margin-top: 0;
}

#mainContent h2
{
	--min-font-size: 18;
	--max-font-size: 24;
}

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

#area_mediaspot ul.results_list > li .info,
#area_contactform ul.results_list > li .info
{
	position: relative;
}

#area_mediaspot ul.results_list > li .info .title
{
	position: absolute;
	bottom: 28px;
	left: 30px;
	color: #fff;
}

#area_mediaspot ul.results_list > li .info .title a
{
	color: #fff;
}

#area_mediaspot ul.results_list > li .photo a[class^="triggerPopupPlayer"]:not(.sp_pencil)::after
{
	/* play button */
	content: '';
	display: block;
	position: absolute;
	top: 30px;
	left: 30px;
	width: 39px;
	height: 29px;
	background-color: var(--lime-green);
    mask-image: url('../i/icon-play-button.svg'); /* data-uri */
    mask-repeat: no-repeat;
    mask-size: contain;

}

#area_mediaspot ul.results_list > li .photo a[class^="triggerPopupPlayer"]:not(.sp_pencil):is(:hover,:focus)::after
{
	background-color: var(--extra-light-blue);
}

a#areaDataPrivacy
{
	display: inline-block;
	position: relative;
	margin-right: max(8px, 1.5vw);
	padding: 12px 0 8px 0;
	border-top: 1px solid var(--magenta);
	/*color: var(--medium-gray);*/
	font-size: 0.9rem;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1;
	transition: color 250ms ease-in-out;
}

a#areaDataPrivacy:is(:hover, :focus)
{
	/*background-color: var(--magenta);*/
	color: #fff;
}

a#areaDataPrivacy:is(:hover, :focus)::before 
{
	content: "";
	position: absolute;
	z-index: -1;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 0%;
	background: var(--magenta);
	animation: fillUp 250ms ease-in-out forwards;
}

#belowContent #area_news
{
	border-top: 1px solid #BEBEBE;
}

#belowContent #area_news h2 
{
	margin: 15px 0;
	text-align: center;
	font-weight: 400;
	font-style: italic;
	color: #151515;
	--min-font-size: 20;
	--max-font-size: 24;
}

#area_areaspotlight .itemList ul.results_list
{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 24px;
	position: relative;
}

#area_areaspotlight .itemList ul.results_list > li 
{
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	background: #F5F5F5;
}

#area_areaspotlight .itemList ul.results_list > li .title
{
	padding: 0px 34px;
	font-family: var(--font-family-ptserif);
	font-size: 1.25rem;
	line-height: 1.2;
}

#area_areaspotlight .itemList ul.results_list > li .abstract
{
	padding: 0px 34px;
	margin-top: 10px;
}

#area_areaspotlight .itemList ul.results_list > li .image
{
	position: relative;
	width: 100%;
	margin-bottom: 20px;
}

#area_areaspotlight .itemList ul.results_list > li .image img
{
	display: block;
	position: relative;
	width: 100%;
	height: auto;
	object-fit: cover;
}

#formContainer
{
	display: none;
}

#formTrigger button
{
	display: block;
	width: 100%;
	padding: 10px 20px;
	background: var(--navy-blue);
	color: #fff;
	border: none;
	cursor: pointer;
}

#formTrigger button:is(:hover, :focus)
{
	background: var(--light-blue);
}

form > div > div.radio_wrapper > div
{
	flex-direction: column;
}
	
@media (max-width: 849px)
{
	#banner
	{
		height: auto;
		margin-bottom: 2em;
		background: var(--navy-blue);
	}

	#bannerContent
	{
		position: relative;
		height: auto;
		top: 60px;
	}

	#bannerContentInner
	{
		position: relative;
		height: auto;
	}
	
	#bannerImage
	{
		position: absolute;
		width: 100vw;
		height: 100%;

		/*height: calc(100% + 60px);*/
	}

	#bannerImage > picture > img 
	{
		height:100%;
	}
}

@media (max-width: 1349px)
{
	#banner,
	#bannerImage::after,
	#bannerImage > picture > img
	{
		min-height: 360px;
		
		min-height: calc(360px + 60px);
	}
}

@media (min-width: 920px)
{	
	#subContent > #area_mediaspot,
	#subContent > #area_contactform
	{
		max-width: 477px;
		margin-top: calc(min(-80px, -8vw) + 1rem);
		margin-bottom: 30px;
		padding: min(40px, 2vw);
		background: var(--lime-green);
	}

	#subContent > #area_mediaspot ul,
	#subContent > #area_mediaspot li,
	#subContent > #area_contactform ul,
	#subContent > #area_contactform li
	{
		margin-top: 0px;
		padding-top: 0px;
	}

	#area_areaspotlight .itemList ul.results_list
	{
		flex-direction: row;
	}

	#area_areaspotlight .itemList ul.results_list > li 
	{
		width: calc(50% - 12px);
	}


	/* This sizing hack done per swati rather than revamp to make it more responsive */
	#area_mediaspot ul.results_list > li .info .title
	{
		font-size: max(10px, 
             min(20px, 10px + (20 - 10) * ((100vw - 920px) / (1600 - 920))));
		padding-right: 20px;
		box-sizing: border-box;
	}

	#area_mediaspot ul.results_list > li .photo a[class^="triggerPopupPlayer"]:not(.sp_pencil)::after
	{
		top: max(10px, 
             min(30px, 10px + (30 - 10) * ((100vw - 920px) / (1600 - 920))
			));

		width: max(26px, 
             min(39px, 26px + (39 - 26) * ((100vw - 920px) / (1600 - 920))
			));
	}
}

@media (min-width: 1350px)
{	
	#bannerContent
	{
		left: 80px;
		right: 80px;
		max-width: 1646px;
		margin: auto;
	}
}

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