/* BEGIN BIO-DETAIL CSS -----------------------------------------> */

#bannerContent
{
	top: unset;
	bottom: 0px;
	height: 100%;
}

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

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

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

#content
{
	margin-top: 0;
}

#bioInfoWrapper
{
	position: relative;
	height: 100%;
}

#bioPhoto
{
	flex: 0;
	display: block;
	width: 100%;
	height: auto;
}

#bioPhoto picture,
#bioPhoto img
{
	display: block;
	position: relative;
	width: auto;
	height: 100%;
}

#bioInfo
{
	flex-grow: 1;
	align-self: center;
	max-width: 700px;
}

#bannerContent h1#pageTitle
{
	margin: 0 0 10px 0;
}

#bioTitle
{
	padding: 0 0 10px 0;
	font-size: 1.03rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

/*
#bioPronouns
{
	font-size: 0.8rem;
}
*/

ul#bioContact,
ul#bioContact li,
ul#bioAccessories,
ul#bioAccessories li
{
	list-style: none;
	margin: 0;
	padding: 0;
}

ul#bioContact
{
	width: 100%;
	padding: 20px 0px 10px 0;
	box-sizing: border-box;
}

ul#bioContact li
{
	margin-bottom: 3px;
}

ul#bioAccessories
{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	width: 100%;
	padding: 20px 0px 10px 0;
}


li#bioAssistant h2.expandableHeading button:after
{
	display: none;
}

li#bioAssistant h2.expandableHeading
{
	border-bottom: none;
}

li#bioAssistant h2,
li#bioDataPrivacy a
{
	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;
}

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

li#bioDataPrivacy a: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;
}

li.bioSVG > a
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	background-color: var(--deep-navy-blue);
	box-sizing: border-box;
	font-size: 0.85rem;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	line-height: 1;
	vertical-align: middle;
}

li#bioPDF > a,
li#maplink > a
{
	padding: 3px 0 0 0;
}

li#maplink > a
{
	width: auto;
	padding-left: 5px;
	padding-right: 5px;
}

li.bioSVG > a svg
{
	fill: #fff;
}

li.bioSVG > a:is(:hover,:focus)
{
	background-color: var(--light-blue);
}

li.bioOffices
{
	font-size: 1.05rem;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1;
}


.badgeList ul,
.badgeList ul li
{
	list-style: none;
	display: block;
	margin: 0;
	padding: 0;
}

.badgeList ul li
{
	display: inline-block;
	margin-right: 20px;
}

.badgeList ul li .image img,
.badgeList ul li > img
{
	display: block;
	max-width: 150px;
	max-height: 150px;
}

#bio_intro
{
    font-family: var(--font-family-ptsans);
    font-weight: 400;
    line-height: 1.6;
	font-size: 1.5rem;
	/*
    --min-font-size: 22;
    --max-font-size: 30;
	*/
}

#bio_quote
{
	margin-top: 2em;
	padding: 1em;
	background-color: var(--lime-green);
	color: #000;
	/*font-family: var(--font-family-ptserif);*/
    font-weight: 400;
	font-style: italic;
	font-size: 1.2rem;
	text-align: center;
}

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

#bio_quote cite
{
	/*margin-top: 1em;*/
	font-style: normal;
	font-size: 0.9rem;
	text-align: center;
}

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

span.breaker
{
	font-weight: 400;
	margin-left: 10px;
	margin-right: 10px;
}

#bio_education p
{
	margin-bottom: 0;
}

#bio_education p + ul > li
{
	margin-top: 0;
}

#bioAssistant .expandableContent
{
	font-size: 0.8rem;
}

@media (min-width: 501px)
{
	
}

@media (min-width: 850px)
{
	#bioInfoWrapper
	{
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	#bioInfo
	{
		order: 1;
		margin-left: 50px;
	}

	#bioPhoto
	{
		order: 2;
		width: auto;
		margin-left: 20px;
	}
}

@media (max-width: 849px)
{
	#banner
	{
		height: auto;
		margin-bottom: 2em;
		background: var(--navy-blue);
	}

	#bannerContent
	{
		position: relative;
		height: auto;
	}

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

	#bioPhoto img
	{
		height: 360px;
		margin: 0px auto;
	}
	
	svg#bannerMark
	{
		display: none;
	}

	#bioInfo
	{
		padding: 20px;
	}
}

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

/* END BIO-DETAIL CSS -------------------------------------------> */