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


#officeList ul,
#officeList ul li
{
	/* position: relative; */
	list-style: none;
	margin: 0;
	padding: 0;
	color: #fff;
}

#officeList
{
	position: relative;
}

#officeList ul li
{
	position: relative;
	margin: 0 0 8px;
	box-sizing: border-box;
	overflow: hidden;
}

#expandAllHeading
{
	position: absolute;
	right: 0;
	top: 15px;
	font-family: 'HelveticaNeue_cn';
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
}

#expandAllHeading:not(:hover):not(:focus)
{
	color: #808080;
}

#expandAllHeading:hover
{
	color: #e31b23;
}

/* #officeList .expandableHeading */
.xrefSection .expandableHeading
{
	padding: 0;
	margin: 0 0 8px;
	border:  none;
}

.xrefSection.internationalList .expandableHeading
{
	margin: 0;
}

/* #officeList .expandableHeading button */
.xrefSection .expandableHeading button
{
	position: relative;
	padding-top: 18px!important;
	padding-bottom: 15px !important;
	padding-right: 30px !important;
	padding-left: 40px !important;
	padding-left: max(20px, 
	             min(40px, 20px + (40 - 20) * ((100vw - 320px) / (767 - 320))
	)) !important;
	background: #F0EFED !important;
	color: #000000;
	font-weight: 300;
	box-sizing: border-box;
	transition: padding-left 250ms ease;
	font-family: 'HelveticaNeue', Arial, sans-serif;
	font-size: 20px;
}

.xrefSection h2.expandableHeading
{
	line-height: 20px;
}

.xrefSection .expandableHeading button
{
	line-height: 20px;
}

/* #officeList .expandableHeading button::after  */
.xrefSection .expandableHeading button:after
{
	color: #E31B23;
	font-size: 24px;
	line-height: 1;
}

/* #officeList .expandableHeading button:hover,
#officeList .expandableHeading button:focus  */
.xrefSection .expandableHeading button:hover,
.xrefSection .expandableHeading button:focus 
{
	padding-left: max(25px, 
	             min(45px, 25px + (45 - 25) * ((100vw - 320px) / (767 - 320))
	)) !important;
	color: #808080;
}

#officeList .content
{
	position: relative;
	padding: 40px;
	padding: max(20px, 
	             min(40px, 20px + (40 - 20) * ((100vw - 500px) / (920 - 500))
	));

	padding-top: 35px;
	padding-top: max(20px, 
	             min(35px, 20px + (35 - 20) * ((100vw - 500px) / (920 - 500))
	));

	padding-bottom: 120px;
	margin-top: 8px;

}

#officeList .content a
{
	color: inherit;
}

#officeList .content a:hover,
#officeList .content a:focus
{
	color: #cecece;
}

#officeList .content .image::before 
{
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: #000000;
	opacity: .5;
}

#officeList .content .image img 
{
	position: absolute;
	z-index: -2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#officeList .content::before
{	
	position: absolute;
	right: 0;
	top: 0;
	content: '';
	display: block;
	width: 620px;
	height: 100%;
	background: rgba(227, 27, 35, .8);
	clip-path: polygon(0% 100%, 100% calc(100% - 102px), 100% 100%);
	z-index: 0;
	
}

#officeList #officeList .expandableHeading.expanded + div.content
{
	border: none;
}

#officeList ul li .title
{
	margin: 0 0 5px;
	--max-font-size: 22;
	font-weight: 500;
}

.viewdetails
{
	position: absolute;
	bottom: 24px;
	right: 20px;
	z-index: 100;
	color: #ffffff;
}

.viewdetails a
{
	color: inherit;
	font-weight: 500;
	font-size: 18px;
}

@media (min-width: 768px)
{
	/* #officeList .content, */
	#officeList .content
	{
		padding-bottom: 45px;
		overflow: hidden;
	}

	#officeList .content::before
	{
		width: 70%;
		max-width: 620px;
	}

	#officeList .content .addressinfo
	{
		float: left;
	}

	#officeList .content .contactinfo 
	{

		margin-left: 437px;
		margin-left: max(250px, 
		             min(437px, 250px + (437 - 250) * ((100vw - 768px) / (1920 - 768))
		));
	}
}

@media (min-width: 1024px)
{
	.contactinfo
	{
		margin-top: 38px;
		margin-top: max(30px, 
		             min(38px, 30px + (38 - 30) * ((100vw - 1024px) / (1920 - 1024))
		));
	}
}

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