/* BEGIN BIO-LISTING CSS ----------------------------------------> */

.letterLinks
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 20px 0 20px -9px;
	font-weight: 300;
	font-size: 28px;
}

.letterLinks a:not(:hover):not(:focus)
{
	color: var(--Canary-Yellow) !important;
}

.letterLinks a,
.letterLinks span
{
	display: inline-block;
	width: calc(100% / 13);
	text-align: center;
}

.letterLinks > *:nth-child(12),
.letterLinks > *:last-child
{
	width: calc(100% / 13 - 1px);
}

.letterLinks a.viewAll
{
	width: auto;
}

@media (min-width: 1025px)
{
	.letterLinks a,
	.letterLinks span
	{
		width: calc(100% / 26);
	}

	.letterLinks > *:nth-child(12),
	.letterLinks > *:last-child
	{
		width: calc(100% / 26 - 1px);
	}

	.letterLinks
	{
		margin-top: 35px;
		margin-bottom: 50px;
	}

	.letterLinks
	{
		position: relative;
		padding-right: 60px;
	}

	.letterLinks a.viewAll
	{
		position: absolute;
		right: 0;
	}
}


.bioList
{
	margin: 30px 0 20px 0;
}

.bioList > .results-criteria-wrapper
{
	display: flex;
	justify-content: space-between;
}

.bioList > .results-criteria-wrapper > div
{
	padding: 0 20px 0 0;
}

.bioList > .results-criteria-wrapper button
{
	 align-self: flex-start;
}

.bioList .reviseButton
{
	margin-bottom: 30px;
}

.bioList > ul.results_list,
.bioList > ul.results_list > li
{
	position: relative;
	list-style: none;
	margin: 0;
}

.bioList > ul.results_list
{
	display: grid;
	grid-row-gap: 45px;
}

/*
 If you're looking to make the image a 'tile'
 and you need the entire background to click to the
 bio profile, yet you have an edit icon, email,
 phone, and office link on there, use the following
 linkmask field with psuedo css to make the link mask.

 See: 'linkmask' in lib/AttorneySearch/Local.php

.bioList > ul.results_list > li:hover > div
{
	pointer-events: none;
}

.bioList > ul.results_list > li:hover > div a
{
	pointer-events: auto;
}

.bioList > ul.results_list > li .linkmask a:after
{
	content: '';
	display: block;
	position: absolute;
	z-index: -1;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}
*/

.bioList
{
	margin: 20px 0 40px;
}

.bioList .results_list > li 
{
	padding: 30px 
			max(20px, 
					min(43px, 20px + (43 - 20) * ((100vw - 600px) / (1350 - 600))
			)) 
		40px;
	background: #f3f3f3;
}

.bioList:not(.ajaxBioList):not(.ajaxSearchResults) .results_list > li 
{
	transform: translateY(100px);
	opacity: 0;
	transition: transform 750ms ease, opacity 750ms ease;
}

.bioList:not(.ajaxBioList):not(.ajaxSearchResults) .results_list > li:nth-child(1) 
{
	transform: translateY(0);
	opacity: 1;
}

.bioList .results_list > li.transitionNow
{
	transform: translateY(0) !important;
	opacity: 1 !important;
}

.bioList .photo
{
	max-width: 212px;
	aspect-ratio: 1/1;
	margin-bottom: 20px;
	overflow: hidden;
	border-radius: 50%;
	transition: all 250ms ease;
}

.bioList .photo img 
{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bioList .results_list > li:is(:hover,:focus) .photo 
{
	transform: scale(1.08);
}

.bioList .title 
{
	--max-font-size: 30;
	font-weight: 400;
	line-height: normal /* per jessica */
}

.bioList a:not(:hover):not(:focus)
{
	color: inherit;
}

.bioList .position 
{
	margin-bottom: 13px;
	font-size: 18px;
	text-transform: uppercase;
	color: var(--SG-Blue);
	font-weight: 500;
	letter-spacing: 1.2px; /* reduced from 1.44 in mockup */
}

.bioList li > div:not(.position):not(.title)
{
	font-size: 18px;
	font-weight: 400;
}

.ajaxBioList
{
	display: none;
}

/* These break points have been reduced per Bug 58103 */
@media (min-width: 600px)
{
	.bioList > ul.results_list
	{
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap: max(30px, 
             min(55px, 30px + (55 - 30) * ((100vw - 600px) / (1350 - 600))
		));
	}

	.bioList:not(.ajaxBioList):not(.ajaxSearchResults) .results_list > li:nth-child(2) 
	{
		transform: translateY(0);
		opacity: 1;
	}
	
}

@media (min-width: 920px)
{
	.bioList > ul.results_list
	{
		grid-template-columns: repeat(3, 1fr);
	}

	.bioList:not(.ajaxBioList):not(.ajaxSearchResults) .results_list > li:nth-child(3) 
	{
		transform: translateY(0);
		opacity: 1;
	}
	
}


/* bio spotlight */

#bioSpotlight 
{
	margin: 0 auto;
	max-width: var(--narrow-width);
}

#bioSpotlight ul,
#bioSpotlight li 
{
	margin: 0;
	list-style: none;
}

#bioSpotlight li
{
	margin: 0 0 58px;
}

#bioSpotlight > div 
{
	margin-top: 38px;
}

#bioSpotlight .photo 
{
	width: 60%;
	max-width: 310px;
	margin: 0 0 40px;
	aspect-ratio: 1/1;
	border-radius: 50%;
	overflow: hidden;
	transform: scale(.65);
	transition: transform 1000ms ease;
}

#bioSpotlight li.transitionNow .photo 
{
	transform: scale(1);
}

#bioSpotlight .photo img 
{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#bioSpotlight .title 
{
	--min-font-size: 18;
	--max-font-size: 21;
	line-height: 1.68;
	font-weight: 500;
	text-transform: uppercase;
}

#bioSpotlight p 
{
	--max-font-size: 19;
	font-weight: 300;
}

#bioSpotlight .view_more 
{
	margin: 12px 0 0 0;
}

@media (min-width: 768px)
{
	#bioSpotlight li
	{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	#bioSpotlight .photo 
	{
		width: auto;
		flex: 0 1 310px;
		margin: 0 30px 30px 0;
	}

	#bioSpotlight .content 
	{
		flex: 0 1 610px;
	}

	#bioSpotlight li:nth-child(even)
	{
		flex-direction: row-reverse;
	}

	#bioSpotlight li:nth-child(even) .photo 
	{
		margin: 0 0 30px 30px;
	}

}


/* END BIO-LISTING CSS ------------------------------------------> */