/* BEGIN AREA-LISTING CSS ---------------------------------------> */
#mainContent
{
	width: 100% !important;
	max-width: 1120px;
	margin: 0 auto !important;
	float: none !important;
}

.search_form form > div > div.hasFocus > label
{
    top: -16px;
    background-color: #eee;
}


button[type=submit]::after
{
	display: block;
    content: '';
    background: url(../i/expander-arrow-filled.svgz) no-repeat;
    height: 30px;
    width: 30px;
    z-index: 3;
	top: calc(50% - 15px);
	right: -35px;
    position: absolute;
    transform: rotate(-90deg)
}


div#listColumnWrapper
{
	display: flex;
	position: relative;
	justify-content: space-between;
	flex-wrap: wrap;
	font-family: 'merriweather';
}

div.listColumn
{
	position: relative;
	width: 46%;
}

div.listColumn ul
{
	list-style: none;
	list-style-image: none;
	margin: 0;
	padding-left: 25px;
}

div.listColumn ul li
{
	position: relative;
	margin: 0;
	margin-bottom: 45px;
	margin-bottom: max(20px,
             min(45px, 20px + (45 - 20) * ((100vw - 400px) / (1920 - 400))
	));
	/* padding-inline: 25px;
    padding-inline: max(0px, min(25px, 0px + (25 - 0) * ((100vw - 400px) / (1920 - 400)) )); */
	padding-left: 25px;
	/* padding-left: min(50px,
             max(25px, 50px + (25 - 50) * ((100vw - 767px) / (1920 - 767))
	)); */
	font-size: 20px;
	font-size: max(16px,
             min(20px, 16px + (20 - 16) * ((100vw - 400px) / (1920 - 400))
	));
	font-weight: 500;
	Line-height: 1.5;
	/* Line-height: max(1.5px,
             min(2.9px, 1.5px + (2.9 - 1.5) * ((100vw - 400px) / (1920 - 400))
	)); */
}

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

/*div.listColumn ul li a:hover,
div.listColumn ul li a:focus
{
	color: #3E638B;
}*/

div.listColumn ul.hierList
{


}

div.listColumn ul.hierList,
div.listColumn ul.hierList li
{
	padding-inline: 0;
}

div.listColumn ul.hierList li:last-child
{
	padding-bottom: 0;
}


div.listColumn ul.hierList li
{
	font-weight: normal;

	margin-top: 22px;
	margin-top: max(22px,
             min(22px, 10px + (22 - 10) * ((100vw - 400px) / (1920 - 400))
	));

	margin-bottom: 0;
	font-weight: 500;
}

div.listColumn li li
{
	padding-left: 1em;
}

div.listColumn.areaToggle ul.hierList
{
	display: none;
	padding-left: 25px;
}

div.listColumn.areaToggle .areaExpand
{
	position: absolute;
	left:	-26px;
	top: 0;
	display: inline-block;
	width: 20px;
	height: 20px;
	margin: 2px 0 0 5px;
	padding: 0px;
	border: 0px;
	background: none;
	cursor: pointer;
	text-align: center;
	vertical-align: top;
	transition: transform 250ms ease;
}

div.listColumn.areaToggle .areaExpand::before
{
	display: block;
    content: '';
    background: url(../i/expander-arrow.svgz) no-repeat;
    /*background: url(../i/expander-arrow-filled.svgz) no-repeat;*/ /*this keeps getting changed depending on who is checking the site :/ */
    height: 30px;
    width: 30px;
    z-index: 3;
	top: -4px;
	top: min(0px,
             max(-4px, 0px + (-4 - 0) * ((100vw - 400) / (1920 - 400))
	));
	right: -9px;
	right: max(-4px,
             min(-9px, -4px + (-9 - -4) * ((100vw - 400px) / (1920 - 400))
	));
    position: absolute;
    transform: rotate(-90deg)
}

div.listColumn.areaToggle .areaExpand:hover::before,
div.listColumn.areaToggle .areaExpand:focus::before
{
	background: url(../i/expander-arrow-filled.svgz) no-repeat;
}

/* div.listColumn.areaToggle .areaExpand::before .expanded
{
	transform: rotate(0deg)
} */

div.listColumn.areaToggle .areaExpand span
{
	display: none;
	position: relative;
	/* display: block; */
	width: 20px;
	height: 20px;
	font-size: 18px;
	line-height: 1;
}

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

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

div.listColumn.areaToggle .areaExpand.expanded
{
	transform: rotate(90deg);
}

@media (min-width: 768px)
{

	div.listColumn:nth-child(2) > ul
	{
		padding-left: 57px;
		padding-left: max(10px,
	             min(57px, 10px + (57 - 10) * ((100vw - 400px) / (1920 - 400))
		));
	}
}

@media (max-width: 767px)
{
	#listColumnWrapper
	{
		display: block;
	}

	div.listColumn
	{
		width: 100%;
	}
}

#practiceSearch
{
	display: flex;
	flex-wrap: wrap;
	/* margin-bottom: 40px; */
	position: relative;
	margin-bottom: 94px;
	margin-bottom: max(50px,
             min(94px, 50px + (94 - 50) * ((100vw - 767px) / (1920 - 767))
	));
}

#practiceSearch form
{
	position: relative;
	flex: 1 1 800px;
	margin-bottom: 0;
}

#practiceSearch form > div > div
{
	width: 100%;
}

#practiceSearch form  > div
{
	display: block;
}

#practiceSearch form button
{
	position: absolute;
	right: 60px;
	top: 0px;
	height: 46px;
	padding: 0 5px 0 0;
	margin: 0;
	background: none;
	border: none;
	color: #c24c40;
	font-weight: 500;
	font-size: 16px;
}

#practiceSearch form button:hover,
#practiceSearch form button:focus,
form label
{
	color: #9f0604;
	cursor: pointer
}

/*input#practicestext
{
	height: 76px;
}

.search_form form > div > div > label
{
	padding: 0;
	margin: 24px 0 24px 40px;
	margin-left: 40px;
	margin-left: max(20px,
             min(40px, 20px + (40 - 20) * ((100vw - 400px) / (1920 - 400))
	));
}
*/


#practiceSearch form button svg
{
	position: absolute;
	right: 0;
	top: 7px;
	width: 18px;
	height: 18px;
}

#practiceSearch form button svg path
{
	fill: #3874a8;
}

#practiceSearch form input[type=text]::-ms-clear
{
	margin-right: 120px;
}

@media (max-width: 767px)
{
	#practiceSearch form button
	{
		top: 0px;
		right: 60px;
		padding: 0;
		height: 45px;
		width: 37px;
		float: right;
		background-size: 18px;
		text-indent: -9999em;
	}

	#practiceSearch form label
	{
		/* top: 16px; */
		font-size: 14px;
	}

	/* input[type=text]
	{
		height: 76px;
	} */

	#practiceSearch form input[type=text]::-ms-clear
	{
		margin-right: 20px;

	}


}


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