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

#banner 
{
	position: relative;
	width: 100vw;
	left: calc(50% - 50vw);
	background: url('../i/bio-background.jpg') no-repeat; /* data-uri */
	background-size: cover;
	transition-duration: 0ms;
}

#banner::before {
    position: absolute;
    bottom: -1px;
    left: 0;
    content: '';
    display: block;
    width: 100%;
    height: 6vw;
    max-height: 110px;
    background: #ffffff;
    z-index: 100;
    clip-path: polygon(0 0, 72.5% 75%, 100% 0, 100% 100%, 0 100%);
}

#bannerContent
{
	display: block;
	min-height: unset;
}

#itemInfoWrapper
{
	padding: 20px;
}

@keyframes itemphoto-reveal
{

	0%
	{
		opacity: 0;
		/*clip-path: polygon(0 0, 0 72.5%, 0 100%, 0 100%, 0 0);*/

		/*clip-path: polygon(0 0, 72.5% 0, 100% 0, 100% 0, 0 0);*/


	}

	/*28.5%
	{
		clip-path: polygon(10% 0, 5% 72.5%, 10% 100%, 0 100%, 0 0);
	}*/

	/*25%
	{
		clip-path: polygon(0 0, 72.5% 10%, 100% 0, 100% 0, 0 0);
	}*/

	100%
	{
		opacity: 1;
		/*clip-path: polygon(0 100%, 72.5% 100%, 100% 100%, 100% 0, 0 0);*/
		/*clip-path: polygon(0 0, 72.5% 100%, 100% 0, 100% 0, 0 0);*/
	}

}

#itemPhoto 
{
	margin: 0 0 30px;
	aspect-ratio: 8 / 9;
	max-width: 380px;
}

#itemPhoto 
{
	/*clip-path: polygon(0 0, 0 72.5%, 0 100%, 0 100%, 0 0);*/
	/*clip-path: polygon(0 0, 72.5% 0, 100% 0, 100% 0, 0 0);*/
	/*opacity: 0;*/
	margin: 0 0 30px;
	aspect-ratio: 8 / 9;
	max-width: 380px;
	/*animation: itemphoto-reveal 1500ms forwards 100ms;*/
	/*animation: itemphoto-reveal 1500ms forwards 200ms;*/
}

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

@keyframes text-translate
{
	0%
	{
		opacity: 0;
		transform: translate(-200px, 100px);
	}

	100%
	{
		opacity: 1;
		transform: translate(0, 0);
	}
}

#pageTitle 
{
	--max-margin-bottom: 30;
}

#itemTitle 
{
	font-size: 18px;
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: 2px;
}

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

#bioContact li 
{
	display: inline;
	--min-font-size: 18;
	--max-font-size: 22;
}

#bioContact
{
	margin: 0 0 30px;
}

@media (min-width: 768px)
{
	#bioContact,
	#pageTitle,
	#itemTitle 
	{
		/*opacity: 0;
		transform: translate(-200px, 200px);
		animation: text-translate 900ms forwards 200ms;*/
	}

	#pageTitle
	{
		animation-delay: 300ms;
	}

	#bioContact
	{
		animation-delay: 400ms;
	}
}

#bioOfficeList
{
	margin-bottom: 0;
}

#itemAccessories
{
	display: flex;
}

@keyframes social-translate
{
	0%
	{
		opacity: 0;
		transform: translate(100px);
	}

	100%
	{
		opacity: 1;
		transform: translate(0);
	}
}

@media (min-width: 768px)
{
	#itemAccessories li
	{
		/*opacity: 0;
		transform: translate(100px);
		animation: social-translate 800ms forwards 200ms;*/
	}

	#itemAccessories li:nth-child(2){animation-delay: 400ms;}
	#itemAccessories li:nth-child(3){animation-delay: 600ms;}
	#itemAccessories li:nth-child(4){animation-delay: 800ms;}

}


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

#itemAccessories svg 
{
	display: block;
	width: auto;
	/*height: 31px;*/
	height: 25px;
	fill: #D9E3EB;
}

#bioTwitter svg 
{
	height: 18px;
}

#itemShare svg 
{
	height: 21px;
}

#itemAccessories #bioTwitter
{
	padding-top: 7px;
	box-sizing: border-box;
}

#itemAccessories a:hover svg,
#itemAccessories a:focus svg 
{
	fill: var(--gralue);
}

#bioEmail a:not(:hover):not(:focus)
{
	color: var(--gralue);
}

.badgeList img
{
	max-width: 100px;
}

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

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

#itemOverview
{
	/*margin: 0 0 50px;*/
	margin: 0 0 30px;
}

/*#bio_extra button.toggleExpand
{
	margin-top: 20px;
}*/

#office_map
{
	padding: 0 !important;
	margin: 40px 0;
	max-height: 383px;
	height: 50vh;
	filter: grayscale(100%);
}

#office_map iframe 
{
	height: 100%;
}

.squareSpotlights
{
	margin-top: 40px;
}

@media (min-width: 768px)
{

	#bannerContent > div
	{
		margin: 0 auto;
		max-width: 1175px;
	}

	#itemInfoWrapper
	{
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0;
	}

	#itemPhoto
	{
		flex: 0 1 413px;
		margin: 0;
	}

	#itemInfo
	{
		position: relative;
		flex: 0 1 575px;
		padding-left: 50px;
		box-sizing: border-box;
	}
}

@media (min-width: 920px)
{

	#bannerContent 
	{
		z-index: 100;
		padding-bottom: 0;
	}

	#bannerContent > div
	{
		padding-bottom: 0;
	}

	#itemInfo
	{
		padding-right: 80px;
	}

	#itemAccessories
	{
		position: absolute;
		right: 0;
		top: 25px;
		display: block;
	}

	#itemAccessories li
	{
		margin: 0 0 40px !important;
	}
}

@media (min-width: 1280px)
{
	#bannerContent > div
	{
		padding-top: 178px;
	}

	#itemInfoWrapper
	{
		left: 30px;
	}

	#itemInfo
	{
		padding-left: 0;
	}
}

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