/* BEGIN MINISITE CSS -----------------------------------------------> */

#logo
{
	margin: 12px 0 8px;
}

#logo img
{
	width: auto;
	height: 103px;
}

@media (min-width: 1150px)
{
	.minisite #navToggle
	{
		display: none;
	}

	#topNav
	{
		/* body's padding minus menu item's padding */
		right: 95px;
		right: max(70px,
					 min(95px, 70px + (95 - 70) * ((100vw - 1150px) / (1920 - 1150))
		));

		top: 40px;
	}
}

/* nav adjustments */
#topNav > ul > li:first-child:nth-last-child(n + 6) > a,
#topNav > ul > li:first-child:nth-last-child(n + 6) ~ li > a
{
	padding-left: .7vw;
	padding-right: .7vw;

	letter-spacing: -1px;
}

#footerTop
{
	justify-content: space-between;
}

#footerTop > div
{
	flex: 0 1 calc(50% - 50px);
}

#footerTop a:not(:hover):not(:focus)
{
	color: #E0231A;
}

#footerTop button
{
	display: block;
	margin-left: auto;
	padding: 17px 0;
	height: auto;
	background: white;
}

#footerTop button:not(:focus):not(:hover) svg
{
 	fill: #E0231A;
}

#footerTop h2
{
	color: #d94c38;
	--min-font-size: 20;
	--max-font-size: 34;
}

/*#footerTop h2::after
{
	content: '';

	display: block;
	background: #E0231A;
	height: 2px;
	width: 60px;

	margin: 15px 0 27px;
}*/

#footerTop textarea
{
	min-height: 65px;
	box-sizing: border-box;
}

#itemInfo
{
	font-weight: 300;
}

#itemTitle
{
	text-transform: uppercase;
}

/* BEGIN AREA-LISTING CSS ---------------------------------------> */

#practiceList
{
	margin: 50px 0 80px;
}

div#listColumnWrapper
{
}

div.listColumn
{
}

div.listColumn ul,
div.listColumn ul li
{
	position: relative;
	list-style: none;
	list-style-image: none;
	margin: 0;
	padding: 0;
	line-height: normal;
}

div.listColumn > ul > li
{
	padding: 20px 40px 20px 0;
	border-bottom: 1px solid #C7CFD9;
}

div.listColumn > ul > li > a
{
	font-size: clamp(20px, 24/1024 * 100vw, 24px);
}

div.listColumn > ul > li a:not(:hover):not(:focus)
{
	color: #393939;
}

div.listColumn ul.hierList li
{
	font-weight: normal;
	margin: 0.85em 0 0 0;
}

div.listColumn li li
{
	padding-left: 1em;
	font-size: 18px;
}

/*
div.listColumn.areaToggle ul.hierList
{
	display: none;
}
*/

div.listColumn.areaToggle .areaExpand
{
	position: absolute;
	right: 5px;
	top: 15px;
	display: block;
	width: 26px;
	height: 26px;
	margin: 2px 0 0 5px;
	padding: 0px;
	border: 0px;
	background: none;
	cursor: pointer;
	text-align: center;
}

div.listColumn.areaToggle .areaExpand span
{
	position: relative;
	display: block;
	width: 20px;
	height: 20px;
	font-size: 28px;
	line-height: 1;
	font-weight: 300;
}

div.listColumn.areaToggle .areaExpand:not(.expanded) span:last-child
{
	display: none;
}

div.listColumn.areaToggle .areaExpand.expanded span:first-child
{
	display: none;
}

#practiceExpand
{
	position: relative;
	background: none;
	border: none;
	color: #E0231A;
	text-transform: uppercase;
}

#practiceExpand::before
{
	content: '|';
	margin: 0 14px;
}

@media (min-width: 1024px)
{
	#listColumnWrapper
	{
		display: flex;
		grid-gap: clamp(40px, 118/1600 * 100vw, 118px);
	}

	#listColumnWrapper > div
	{
		flex: 1 1 0;
	}
}


/* END AREA-LISTING CSS -----------------------------------------> */


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

.bioList .results_list,
.bioList .results_list li
{
	margin: 0;
	list-style: none;
}

.bioList .results_list li
{
	margin: 0 0 40px;
}

.bioList .photo img
{
	display: block;
	width: 100%;
	height: auto;
}


.bioList .title
{
	margin: 0 0 10px;
	--min-font-size: 20;
	--max-font-size: 27;
	line-height: 1.2;
}

.bioList .title a
{
	display: block;
	padding: 15px 28px;
	background: #074F71;
	color: #F0E6D8;
}

.bioList .position,
.bioList .contact
{
	--min-font-size: 16;
	--max-font-size: 24;
	padding: 0 28px;
}

.bioList .position
{
	margin-bottom: 5px;
	color: #001f39;
	text-transform: uppercase;
	font-family: var(--worksans);
	font-weight: 600;
}

.bioList .contact
{
	display: flex;
	flex-wrap: wrap;
}

.bioList .contact div + div::before
{
	content: '|';
	margin: 0 10px;
}

.bioList .phone
{
	color: #000000;
}

@media (min-width: 600px)
{
	.bioList .results_list
	{
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		grid-gap: 30px;
	}
}

@media (min-width: 1280px)
{
	.bioList .results_list
	{	
		/* THIS WENT FROM 2 IN A ROW TO 3 AND NOW BACK TO 2 ?? */
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 50px;
	}
}

@media (max-width: 1024px)
{
	.letterLinks a,
	.letterLinks span
	{
		width: calc(100% / 13);
	}

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

@media (min-width: 1450px)
{
	.letterLinks
	{
		display: flex;
		justify-content: center;

		margin-left: 0;
	}

	.letterLinks > a,
	.letterLinks > span
	{
		display: block;
		float: none;
		width: auto !important;
		margin-left: 34px;
	}

	.letterLinks > a:first-child,
	.letterLinks > span:first-child
	{
		margin-left: 0;
	}
}

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

/* BEGIN OFFICE-LISTING CSS -------------------------------------> */

.minisite #mainContent
{
	margin-top: 48px;
}

.minisite #pageTools
{
	top: 8px;
}

.minisite #innerMain
{
	padding-top: 1.5em;
}

.minisite #innerMain > :first-child,
.minisite #innerMain > #pageTools + *
{
	margin-top: 0;
	padding-top: 0;
}

.minisite #subNav ~ #mainContent
{
	margin-top: 0;
}

.minisite #officeList
{
	margin-top: 40px !important;
}

.minisite #subNav ~ #mainContent #officeList
{
	margin-top: -20px !important;
}

#officeList
{
	padding-top: 50px;
}

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

#officeList li
{
	position: relative;
	margin: 0 0 19px;
	border: 1px solid #C5CFDA;
	background: #ffffff;
}

#officeList .image img
{
	display: block;
	width: 100%;
	height: auto;
}

#officeList .content
{
	padding: 20px;
}

#officeList .title
{
	--min-margin-top: 0;
	--max-margin-top: 0;
	--min-margin-bottom: 35;
	--max-margin-bottom: 65;
	color: #001f39;
	text-transform: uppercase;

	letter-spacing: 1px;
}

#officeList .title,
#officeList .address,
#officeList .phone
{
	--min-font-size: 16;
	--max-font-size: 19;
}

#officeList .phone a:not(:hover):not(:focus)
{
	color: #CE392A !important;
}

#officeList .title a:not(:hover):not(:focus)
{
	color: #001f39;
}

#officeList .hoverinfo
{
	display: none;
}

#officeList .standardButton
{
	position: absolute;
	bottom: 20px;
	right: 20px;
}

#officeList .standardButton a
{
	width: 40px;
}

@media (min-width: 600px)
{
	#officeList ul
	{
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		grid-gap: 19px;
	}
}

@media (min-width: 1024px)
{

	#officeList .content
	{
		padding: 0;
	}

	#officeList li
	{
		padding: clamp(30px, 52/1600 * 100vw, 52px);
		box-sizing: border-box;
	}

	#officeList .standardButton
	{
		right: clamp(25px, 50/1600 * 100vw, 50px);
		bottom: clamp(25px, 47/1600 * 100vw, 47px);
	}

	#officeList .image
	{
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		width: 100%;
		height: 100%;
		z-index: -2;
		background: #001f39;
	}

	#officeList .image img
	{
		height: 100%;
		object-fit: cover;
		opacity: .6;
	}

	#officeList li:hover .image
	{
		z-index: 1;
		opacity: 1;
	}

	#officeList li .hoverinfo a
	{
		display: flex;
		align-items: center;
		width: 100%;
		height: 100%;
		padding: 20px 30px;
		box-sizing: border-box;
		color: #ffffff;
		font-size: 24px;
		text-transform: uppercase;
		letter-spacing: 1px;
	}

	#officeList li .hoverinfo a > div
	{
		width: 100%;
		text-align: center;
	}

	#officeList li .hoverinfo a span
	{
		display: block;
	}

	#officeList li .hoverinfo a span + span
	{
		font-size: 17px;
		font-weight: 500;
	}

	#officeList li .hoverinfo a span + span svg
	{
		position: relative;
		top: 7px;
		margin-right: 10px;
		fill: currentColor;
	}

	#officeList li:hover .hoverinfo
	{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		display: block;
		width: 100%;
		height: 100%;
	}

	/*#officeList li:hover .title
	{
		position: absolute;
		left: 0;
		top: calc(50% - 20px);
		z-index: 2;
		width: 100%;
		text-align: center;
	}

	#officeList li:hover .title a:not(:hover):not(:focus)
	{
		color: #ffffff;
	}*/
}

@media (min-width: 1350px)
{
	#officeList
	{
		position: relative;
		padding-top: 0;
		margin-top: -65px !important;
		z-index: 20;
	}

	#officeList ul
	{
		grid-template-columns: repeat(auto-fill, minmax(375px, 1fr));
	}
}

/* END OFFICE-LISTING CSS ---------------------------------------> */

/* BEGIN COMBINED-DETAIL CSS -----------------------------------------> */

body
{
	/*background: url(../i/home-banner-dots.svg) no-repeat, url(../i/home-banner-dots.svg) no-repeat, linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(197,207,218,.46) 100%);
	background-size: 589px, 450px;
	background-position: -380px 88%, calc(100% + 370px) 55%;*/
}

#banner
{
	position: relative;
	width: 100%;
	height: 303px;
	height: max(200px,
				 min(303px, 200px + (303 - 200) * ((100vw - 767px) / (920 - 767))
	));
}

body.minisite #bannerImage
{
	position: relative;
	width: 100vw;
	left: calc(50% - 50vw);
	height: 100%;
	overflow: hidden;
	background: #001f39;
}

body.tallBannerImage #bannerImage::after
{
	mix-blend-mode: color-burn;
}

#bannerContent #pageTitle
{
	color: #ffffff;
}

#BannerShapeInlineSVG
{
	position: absolute;

	left: -573px;
	left: max(-573px,
				 min(-450px, -450px + (-450 - -573) * ((100vw - 600px) / (1280 - 600) * -1)
	));
	top: -448px;
	top: max(-448px,
				 min(-100px, -100px + (-100 - -448) * ((100vw - 300px) / (1280 - 300) * -1)
	));
	z-index: 1;

	display: block;
	height: 1200px;
	height: max(600px,
				 min(1200px, 600px + (1200 - 600) * ((100vw - 600px) / (1280 - 600))
	));
	width: auto;
}

/*#bannerContent
{
	position: relative;
	bottom: 0;
	width: 100%;
	max-width: 100%;
}*/


body.bannerOverlay.tallBannerImage #bannerImage > picture img,
body.bannerOverlay.tallBannerImage #bannerImage
{
	height: clamp(400px, 575 / 1600* 100vw, 575px);
}

body.bannerOverlay #bannerImage > picture
{
	width: 55vw;
	left: 45vw;
}

/* bio page content misaligned per client email, trying to wrangle it here */

.people-item.minisite #mainContent
{
	margin-top: 0px;
}

/* bio page content misaligned per client email, trying to wrangle it here */

.people-item.minisite #mainContent #innerMain
{
	padding-top: 1.2rem;
}

#itemPhoto
{
	position: relative;
	display: block;
	width: 150vw;
	height: auto;
	left: -50vw;
	margin: 0 0 30px;
}

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

#itemPhoto .dotsSVG
{
	position: absolute;
	right: -370px;
	bottom: -275px;
	display: block;
	width: 500px;
	height: auto;
	z-index: 10;
}

#itemInfo,
#itemDetailInfo
{
	--min-font-size: 18;
	--max-font-size: 22;
	line-height: 1.63;
}

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

ul#itemAccessories
{
	display: flex;
	margin-top: 35px;
}

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

#itemAccessories svg
{
	fill: #B4C2D0;
	width: 29px;
	height: 29px;
}

#itemAccessories svg .svgInnards 
{
	fill: #EDF0F4;
}

#itemAccessories a:hover svg
{
	fill: #CE392A;
}

#itemIntro
{
	padding: 30px;
	margin: 0 0 30px;
	background: #ffffff;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,.12);
	text-align: center;
	color: #001f39;
}

#itemIntro p
{
	color: inherit;
	--min-font-size: 20;
	--max-font-size: 24;
}

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

#itemIntro p:last-child
{
	margin-bottom: 0;
}

/*.centeredColumn
{
	width: auto;
	max-width: 100%;
}*/

.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;
}

#subContent .itemSection
{
	margin-bottom: 34px;
}

#office_administrator,
#office_bio_contact
{
	max-width: 303px;
}

#office_administrator .photo img,
#office_bio_contact .photo img
{
	display: block;
	width: 100%;
	height: auto;
}

#office_administrator .info,
#office_bio_contact .info
{
	padding: 28px 37px;
	line-height: 1.2;
	background: #E5E9EE;
}

#office_administrator > *,
#office_bio_contact > *
{
	--min-margin-bottom: 5;
	--max-margin-bottom: 5;
	--min-font-size: 17;
	--max-font-size: 17;
}

body.contact-item #itemInfo h1#pageTitle
{
	margin-bottom: 0;
}

#officeAddress
{
	margin-top: 15px;
}

.state
{
	text-transform: uppercase;
}

#officeAddressPhone a:not(:hover):not(:focus)
{
	color: #E0231A !important;
}

@media (min-width: 768px)
{

	/*#bannerContent,*/
	#itemInfoWrapper
	{
		height: 100%;
	}

	#itemPhoto
	{
		position: relative;
		width: 100vw;
		left: calc(50% - 50vw);
		height: 100%;
		overflow: hidden;
		background: #e0e6ee;
	}


	#itemPhoto img
	{
		position: absolute;
		right: -17vw;
		height: 100%;
		width: auto;
	}

	#itemInfo
	{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		display: flex;
		align-items: center;
		width: 50%;
		max-width: 520px;
		height: 100%;
	}

	#itemInfo h1#pageTitle
	{
		line-height: 1.1;
		--fluid-start: 1024;
		--fluid-end: 1920;
		--min-font-size: 26;
		--max-margin-bottom: 20;
	}

	ul#itemAccessories
	{
		margin-top: max(30px,
					 min(45px, 30px + (45 - 30) * ((100vw - 1024px) / (1920 - 1024))
		));
	}

	#itemIntro
	{
		position: relative;
		z-index: 10;

		margin-top: -80px !important;
		margin-top: max(-80px,
					 min(-20px, -20px + (-20 - -80) * ((100vw - 1024px) / (1600 - 1024) * -1)
		)) !important;

		padding-left: 180px;
		padding-left: max(30px,
					 min(180px, 30px + (180 - 30) * ((100vw - 768px) / (1600 - 768))
		));

		padding-right: 180px;
		padding-right: max(30px,
					 min(180px, 30px + (180 - 30) * ((100vw - 768px) / (1600 - 768))
		));

		padding-top: 75px;
		padding-top: max(30px,
					 min(75px, 30px + (75 - 30) * ((100vw - 768px) / (1600 - 768))
		));

		padding-bottom: 75px;
		padding-bottom: max(30px,
					 min(75px, 30px + (75 - 30) * ((100vw - 768px) / (1600 - 768))
		));

		margin-bottom: 0;
	}


}

@media (min-width: 920px)
{
	#bannerContent
	{
		width: 30vw;
		max-width: 630px;
	}
}

@media (min-width: 1280px)
{
	#itemPhoto img
	{
		right: -10vw;
	}

	#officeAddress
	{
		margin-top: 25px;
	}
}

@media (min-width: 1350px)
{

	#itemPhoto::after
	{
		position: absolute;
		top: 0;
		right: 800px;
		/*left: 1360px;
		left: max(300px,
					 min(1360px, 300px + (1360 - 300) * ((100vw - 1350px) / (2550 - 1350))
		));*/
		content: '';
		display: block;
		width: 250px;
		height: 100%;
		background: linear-gradient(to right, rgba(224,230,238,1) 40%,rgba(224,230,238,0) 100%);
	}
}

@media (min-width: 1600px)
{
	#itemPhoto img
	{
		right: -5vw;
	}

	#itemPhoto::after
	{
		right: 900px;
	}
}

@media (min-width: 1800px)
{
	#itemPhoto img
	{
		right: 0;
	}

	#itemPhoto::after
	{
		right: 950px;
	}
}

/* END COMBINED-DETAIL CSS -------------------------------------------> */
