/* BEGIN BIO-DETAIL CSS -
Coding was done with a mobile first approach----------------------------------------> */

#banner
{
	height: auto;
	padding-top: 170px;
	background: #0B1F37; 
	margin-bottom: 0;
}


#bannerContent 
{
	position: relative;
	top: auto;
	left: auto;
	margin-left: 0;
	padding-right: 0;
	width: 100%;
	max-width: 100%;
}

@keyframes slideRevealDown
{

	0%   { height: 20px; top:  0}
	50%  { height: 100%; top:  0}
	53%  { height: 100%; top:  0}
	100% { height: 20px; top:  100%}
}

#bioPhoto
{
	position: relative;
	display: block;
	max-width: 340px; 
	margin: 0 auto 40px;
}

#bioPhoto::after 
{
	position: absolute;
	bottom: -20px;
	content: '';
	width: 100%;
	height: 20px;
	background: #c24c40;
}


/*#bioPhoto::after 
{
	position: absolute;
	top: 0;
	content: '';
	width: 100%;
	height: 100%;
	background: #c24c40;
	animation: slideRevealDown 1500ms forwards;
	animation-play-state: paused;
}

#bioPhoto.startAnimation::after
{
	animation-play-state: running
}*/

#bioPhoto img 
{
	display: block;
	width: 100%;
	height: auto;
	/*opacity: 0;
	transition: opacity 10ms ease 700ms;*/
}

/*#bioPhoto.startAnimation img 
{
	opacity: 1;
}*/

#bioInfo
{
	flex-grow: 1;
	/* margin: 1rem 0 0 0; */
}

#bio-office li
{	
	list-style-type: none;
	margin-left: 0;
}

.professionals-item #pageTitle
{
	padding: 0;
	margin: 0 0 10px;
	font-size: 40px;
	font-size: max(24px, 
             min(40px, 24px + (40 - 24) * ((100vw - 767px) / (1920 - 767))
	));
	line-height: 1.2;
}

#bioTitle
{
	padding: 0 0 35px 0;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	opacity: .73;
	font-size: 17px;
}

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

ul#bioContact li
{
	padding: 0px 0 4px 0;
}

ul#bioContact li:first-child,
ul#bioContact li:last-child
{
	color: #efd2a7;
}

ul#bioContact
{
	/*padding: 0 20px 0 0;*/
	box-sizing: border-box;
	font-size: 19px;
}

#bioInfo
{
	flex-grow: 1;
	margin-top: 1rem;
	margin-top: max(0rem, 
			 min(1rem, 0rem + (1 - 0) * ((100vw - 400rem) / (1920 - 400))));
	margin-left: 137px;
	margin-left: max(16px, 
			 min(137px, 16px + (137 - 16) * ((100vw - 400px) / (1920 - 400))));
}


ul#bioAccessories
{
	position: static;
	display: flex;
	margin-top: 1rem;
	right: 49px;
	right: max(0px, 
             min(49px, 0px + (49 - 0) * ((100vw - 1280px) / (1920 - 1280))
	));
}

ul#bioAccessories li
{
	padding-right: 1rem;
}

ul#bioAccessories li a svg path
{
	fill: #ffffff;
}

ul#bioAccessories li a:hover svg path,
ul#bioAccessories li a:focus svg path
{
	fill: inherit;
}

.bioPhone
{
	color: #ffffff !important;
}

#bioOffice 
{
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	font-size: 19px;
}

#bioOffice li 
{
	margin: 0 0 4px;
	list-style: none;
}

#bioOffice li:not(:last-child)::after 
{
	content: '|';
	margin: 0 10px;
}

#bioInfo a:not(:hover):not(:focus)
{
	color: #EFD2A7;
}

#bioEmail a:hover,
#bioEmail a:focus 
{
	color: #ffffff;
}

#content
{
	margin-top: 20px;
}

main
{
	margin-right: 60px;
	margin-right: max(0px, 
             min(60px, 0px + (60 - 0) * ((100vw - 1024px) / (1920 - 1024))
	));
	padding-left: 40px;
	padding-left: max(0px, 
             min(40px, 0px + (40 - 0) * ((100vw - 1024px) / (1920 - 1024))
	));
	/* width: calc(100% - 22% - 150px) */
}

#subContent
{
	margin-bottom: 0;
}

#subContent > div
{
	border-bottom: 1px solid #ddd;
	padding: 4px 0;
}

#subContent h2
{
	margin-top: 22px;
	margin-bottom: 15px;
}

#subContent p,
#subContent #bio_bars ul,
#subContent #bio_area ul
{
	margin-bottom: 24px;
}




#subContent a
{
	color: #3E638B;
}

a#tabViewMore:hover,
a#tabViewMore:focus
{
	color: #9f0604;
	background:	none;
}

#preFooter
{
	margin-top: 190px;
	margin-top: max(160px, 
             min(190px, 160px + (190 - 160) * ((100vw - 400px) / (1920 - 400))
	));
}



@media (min-width: 768px)
{

	#bannerContent
	{
		padding-bottom: max(20px, 
	             min(40px, 20px + (40 - 20) * ((100vw - 767px) / (1920 - 767))
		));
	}

	#bioInfoWrapper
	{
		display: flex;
	}

	#bioPhoto
	{
		flex: 0 1 340px;
		margin: 0;
	}

	#bioPhoto picture
	{
		display: flex;
		height: 100%;
		align-items: flex-end;
	}

	#bioInfo
	{
		padding-top: 20px;
	} 

	.wideContentSpotlight 
	{
	    grid-column: 1/3;
	}
}


@media (min-width: 920px)
{
	#mainContent:not(:only-child)
	{	
		width: calc(100% - 22% - 150px);
		/*margin-top: 12px;*/
	}

	.professionals-item #subContent
	{
		border-top: none;
		margin-top: 0;
	}
}

@media (min-width: 1024px)
{

	#bioPhoto
	{
		position: relative;
		width: 340px;
	}

}

@media (min-width: 1280px)
{

	#banner
	{
		padding-top: 100px;
		margin-bottom: 30px;
	}

	#bioInfo
	{
		display: flex;
		align-items: flex-end;
		flex-grow: 1;
		/* margin: 1rem 0 0 8.5rem; */
		position: relative;

		padding-bottom: 30px;
		padding-bottom: max(5px, 
	             min(30px, 5px + (30 - 5) * ((100vw - 767px) / (1920 - 767))
		));
		box-sizing: border-box;
	}

	#bioPhoto
	{
		position: relative;
		bottom: -100px;
	}

	ul#bioAccessories 
	{
		position: absolute;
		/* right: 0; */
		bottom: 30px;
		bottom: max(5px, min(30px, 5px + (30 - 5) * ((100vw - 767px) / (1920 - 767)) ));
	}

	#content 
	{
		margin-top: 0;
	}
	
	
	.professionals-item #subContent
	{
		margin-top: 115px;
	}
}


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