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

#upperContent
{
	padding-top: 79px;
	margin-bottom: max(50px, 
	             min(75px, 50px + (75 - 50) * ((100vw - 768px) / (1600 - 768))
	));
}

#upperContent::before
{
	position: absolute;
	left: calc(50% - 50vw);
	top: 0;
	content: '';
	display: block;
	width: 100vw;
	height: 31px;
	background: var(--dark-cyan);
}

#mainContent 
{
	margin-top: 0;
}

#itemPhoto
{
	position: relative;
	margin-bottom: 30px;
}

#itemPhoto::after 
{
	position: absolute;
	top: -6%;
	right: -4%;
	content: '';
	display: block;
	width: 20vw;
	height: 20vw;
	max-width: 134px;
	max-height: 134px;
	background: url('../i/icon-chevron.svgz') no-repeat; /* data-uri */
	background-size: contain;
	transform: rotate(-135deg);
}

#itemPhoto img 
{
	display: block;
	width: 100%;
	height: auto;
}

#bioTitle
{
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 17px;
}


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

ul#bioOffice
{
	overflow: hidden;
}

ul#bioOffice li
{
	float: left;
}

ul#bioOffice li:not(:last-child)::after 
{
	content: ', ';
	margin-right: 8px;
}

ul#itemAccessories 
{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	padding: 31px 0;
	margin: 38px 0 0;
}

#itemAccessories::before,
#itemAccessories::after 
{
	content: '';
	position: absolute;
	display: block;
	width: 100vw;
	top: 0;
	right: 0;
	height: 1px;
	background: var(--rules);
}

#itemAccessories::after 
{
	top: auto;
	bottom: 0;
}

#itemAccessories li:not(:last-child)
{
	margin-right: 16px;
}

#itemAccessories a 
{
	display: block;
	width: 46px;
}

#itemAccessories svg 
{
	display: block;
	width: 100%;
	height: auto;
}

ul#bioContact,
#officeAddress
{
	margin-top: 40px;
}

ul#bioContact li 
{
	margin: 0 0 8px;
}

ul#bioContact a,
#area_biolink a
{
	color: inherit;
}

ul#bioContact a:is(:hover,:focus),
#area_biolink a:is(:hover,:focus)
{
	color: var(--blue-green);
}

.badgeList img
{
	max-width: 200px;
	max-height: 120px;
}

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

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

h1#pageTitle
{
	margin: 0 0 15px;
}

/*h1.areaTitle 
{
	--max-font-size: 70;
}
*/
h1.areaTitle,
body.contact-item h1#pageTitle 
{
	--max-font-size: 76;
}

#office_bio p a:not(:hover):not(:focus)
{
	color: inherit;
}

#office_bio p a 
{
	
	text-decoration: none;
}

#bio_extra p:first-child 
{
	margin-top: 0;
}

@media (min-width: 768px)
{

	#upperContent
	{
		padding-bottom: 0;
	}

	h1#pageTitle
	{
		margin-top: 20px;
	}

	#itemInfoWrapper
	{
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		flex-direction: row-reverse;
	}

	#itemPhoto 
	{
		flex: 0 1 745px;
		display: flex;
		align-items: flex-start;
		z-index: 100;
		margin-bottom: 0;
	}

	/*#itemPhoto img 
	{
		height: 100%;
		object-fit: cover;
		object-position: center top;
	}*/

	#itemPhoto::after
	{
		top: auto;
		right: auto;

		left: -40px;
		bottom: -12px;
		width: 80px;
		height: 80px;
	}

	#itemInfo 
	{
		position: relative;
		flex: 1 1 660px;
		padding-bottom: 150px;
		padding-right: 50px;
		box-sizing: border-box;
	}

	ul#itemAccessories
	{
		position: absolute;
		bottom: 0;
		width: 100%;
	}

	#itemAccessories::after
	{
		display: none;
	}
}

@media (min-width: 920px)
{
	#subContent
	{
		margin-top: 62px;
	}

	#content::before
	{
		background-position: right 400px;
	}
}

@media (min-width: 1280px)
{
	#itemPhoto::after
	{
		left: -67px;
		bottom: -20px;
		width: 134px;
		height: 134px;
	}



	h1#pageTitle.areaTitle 
	{
		margin-top: 50px;
	}
}

@media (min-width: 1600px)
{
	#itemAccessories::after
	{
		display: block;
	}
}


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