/* BEGIN AREA-DETAIL CSS ----------------------------------------> */

#banner
{
	margin-bottom: 20px;
}

main
{
	padding-top: 20px;
	padding-top: max(0px, min(20px, 0px + (20 - 0) * ((100vw - 400px) / (1920 - 400)) ));
}

#content
{
	margin-top: 0;
}

#subContent #area_hierarchy ul li li
{
	margin-left: 20px;
}

.contentSpotlight
{
	position: relative;

	margin: 60px;
	margin: max(35px,
             min(60px, 35px + (60 - 35) * ((100vw - 767px) / (1920 - 767))
	));

	margin-left: 0;
	margin-right: 0;
	min-height: 200px;
	background: #000000;
}

.contentSpotlight p
{
	--min-font-size: 16;
	--max-font-size: 18;
}

.contentSpotlight img
{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.contentSpotlight::after
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: '';
	display: block;
	background: #000000;
	z-index: 0;
	opacity: .63;
}

.contentSpotlight .content
{
	position: relative;
	z-index: 1;
	padding: 60px;
	padding: max(25px,
             min(60px, 25px + (60 - 25) * ((100vw - 400px) / (1600 - 400))
	));
	color: #ffffff;
}

.contentSpotlight .content p
{
	margin-top: 0;
	--min-margin-bottom: 10;
	--max-margin-bottom: 12;
}

.contentSpotlight .content p:last-child
{
	margin-bottom: 0;
}

#quoteBlock::before
{
	position: absolute;
	bottom: -16px;
	left: 0;
	display: block;
	content: '';
	height: 16px;
	width: 100%;
	background: #C24C40;
	z-index: 1;
}

#subContent .itemSection:not(#item_bio)
{
	padding: max(20px, min(40px, 20px + (40 - 20) * ((100vw - 1280px) / (1920 - 1280)) ));
	padding-top: 0;
	padding-bottom: 0;
}

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


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

#breadCrumb li
{
	margin-right: 6px;
}

#breadCrumb li:not(:first-child) span
{
	padding-left: 2px;
}

#breadCrumb
{
	display: flex;
}

#practiceList h2 a
{
	color: inherit;
}

#practiceList ul li
{
	margin-bottom: 20px;
	list-style: none;
	line-height: 1.4;
}

#practiceList ul li.here
{
	font-weight: 600;
}

#subContent #topPractice a:not(:hover):not(:focus)
{
	color: inherit;
}


/* Experience maps ------------------------------------------------> */

#mapLink a
{
	display: flex;
	padding: 29px;

	border: 1px solid #ccc;
	border-radius: 3px;
	overflow: hidden;

	font-size: 20px;
	font-weight: 600;
	text-transform: uppercase;

	color: #008542;

	align-items: center;
}

#mapLink img
{
	width: 40%;
	height: auto;
	max-width: 168px;
	margin-right: 20px;
}

#expMap h2
{
	--min-font-size: 28;
	--max-font-size: 34;
}

#mapLegend
{
	list-style: none;
	margin: 15px 0 0;
	padding: 0;
}

#mapLegend li
{
	margin: 0;
	padding: 0;

	line-height: 1;
}

#mapLegend li:before
{
	content: '';
	display: inline-block;
	vertical-align: middle;

	width: 29px;
	height: 29px;
	margin-right: 12px;
	margin-bottom: 3px;

	border-radius: 3px;
	background: rgb(62, 99, 139);
}

#expMapPopup
{
	position: absolute;
	top: 10vh;
	left: 10vw;
	right: 10vw;
	background: white;

	border: 1px solid black;
	padding: 10px 20px;

	z-index: 10000;
}

#expMap
{
	position: relative;
	width: 100%;
}

#expMap svg
{
	display: block;
	width: 100%;
	height: 61.5vw;
	max-height: 860px;
	max-height: calc(100vh - 120px);
	margin: 40px auto;
}

@media (min-width: 1150px)
{
	#mapLink a
	{
		font-size: 2.6rem;
	}
}

@media (min-height: 980px)
{
	#expMap svg
	{
		max-height: 860px;
	}
}

#expMap path
{
	stroke-width: 1px;
	stroke: white;

	fill: #c7cfd4;

	z-index: 9;
}

#expMap a path,
#expMap .stateImage path
{
	fill: rgb(62, 99, 139);
}

#expMap .stateImage path
{
	stroke-width: 0;
}

#expMap a:hover path,
#expMap a:focus path
{
	fill: rgb(27, 60, 92);
}

#expMap > div
{
	display: flex;

	position: absolute;
	top: 150px;
	left: 0;
	right: 4px;

	height: calc(100% - 150px);
	box-sizing: border-box;
	padding: 52px;

	box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.13);
	background: white;

	z-index: 99;
}

#expMap h3
{
	--min-font-size: 24;
	--max-font-size: 30;


	line-height: 1.1;

	margin: 0 0 15px 0;
}

#expMap .info
{
	display: flex;
	flex-direction: column;

	width: 34%;
	box-sizing: border-box;

	padding-right: 20px;
	border-right: 1px solid #ccc;
}

#expMap .stateImage
{
	flex-grow: 1;

	position: relative;
}

#expMap .stateImage svg
{
	flex-grow: 1;
	margin: 0;
	padding: 0;

	position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
}

.return
{
	/*display: flex;*/
	color: white;

	flex-wrap: wrap;

	margin-top: 30px;
}

.return img
{
	display: block;
	width: 75px;
	height: auto;
}

.return span
{
	position: relative;
	background:  rgb(194, 76, 64);
	padding: 20px 60px 20px 27px;
	margin-top: 20px;
	margin-left: 0;

	display: inline-block;

	/*border-radius: 8px;*/

	font-size: 18px;
	line-height: 1;
	font-family: 'merriweather';
	border: 1px solid rgb(194, 76, 64);
}

.return span::after
{
	content: '';
    position: absolute;
    top: calc(50% - 15px);
    right: 10px;
    display: block;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    transform: rotate(-90deg);
    background: url(../i/expander-arrow.svgz) no-repeat, #EAEAEA;
}

a.return:hover span::after,
a.return:focus span::after
{
	color: #ffffff;
	background: url(../i/expander-arrow-filled.svgz) no-repeat, #EAEAEA;
}

a.return:hover span,
a.return:focus span
{
	background: #ffffff;
}

#expMap .cases
{
	overflow: hidden;
	width: 66%;

	display: flex;
	flex-direction: column;

	padding-left: 20px;
	box-sizing: border-box;
}

#expMap h4
{
	font-size: 22px;
	text-transform: none;
	font-weight: bold;

	border-bottom: 1px solid #ccc;
	margin-bottom: 22px;
}

#expMap h5
{
	color: rgb(62, 99, 139);
	font-size: 22px;
	font-weight: 500;
	text-transform: none;
}

#expMap h5 button
{
	width: auto !important;
	display: inline;
}

#expMap h5 button::after
{
	content: none;
}

#expMap h5 button::before
{
	content: '+';
	width: 24px;
	display: inline-block;

	font-weight: bold;
}

#expMap h5.expanded
{
	color: inherit;
}

#expMap h5.expanded button
{
	text-decoration: underline;
}

#expMap h5.expanded button::before
{
	content: '\2212'; /* minus sign, NOT hyphen or dash */
	text-decoration: none !important;
}

#expMap .results
{
	overflow: auto;
	font-size: 20px;
	padding-right: 20px;
}

#expMap .results_list
{
	padding-left: 64px;
}

#expMap .results_list li
{
	margin: .8em 0;
	padding: 0;
}

#expMap .results_list .title
{
	font-weight: bold;
}

#expMap .results_list .title a
{
	color: inherit;
}

#expMap .results_list .abstract
{
	padding-left: 20px;
}

@media (max-width: 980px)
{
	#expMap > div
	{
		padding: 15px 25px 25px;

		flex-direction: column;
	}

	#expMap .stateImage
	{
		display: none;
	}

	#expMap .info
	{
		width: 100%;
		flex-direction: row;
		align-items: center;
		border: 0;
	}

	#expMap .info h3
	{
		padding-right: 10px;
		flex-grow: 1;

		margin: 0;
	}

	.return img
	{
		display: none;
	}

	.return
	{
		margin :0;
	}

	.return span
	{
		margin: 0;
		padding: 10px 14px 12px;
	}

	#expMap .cases
	{
		width: auto;
		padding: 0;
	}
}




@media (min-width: 768px)
{

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

	#quoteBlock::before
	{
		position: absolute;
		bottom: 0;
		left: 0;
		display: block;
		content: '';
		height: 100%;
		width: 16px;
		background: #C24C40;
		z-index: 1;
	}

}

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


/* END AREA-DETAIL CSS ------------------------------------------> */