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

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


#officeList ul 
{
	display: grid;
	grid-gap: 55px;
}

#officeList li 
{
	font-size: 20px;
}

#officeList .image
{
	margin: 0 0 30px;
}

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

#officeList .title 
{
	--min-font-size: 24;
	--max-font-size: 30;
	color: var(--teal);
}

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

#officeList .title::after 
{
	content: '';
	display: block;
	width: 100px;
	height: 1px;
	margin: 12px 0 22px;
	background: var(--orange);
}

#officeList .address,
#officeList .phone
{
	font-size: 20px;
}

#officeList .mapaddress
{
	margin-top: 3px;
}

#officeList .mapaddress a
{
	font-size: 20px;
	color: #41748d;
}

#officeList .mapaddress svg 
{
	transform: translateY(3px);
	width: 15px;
	height: 21px;
	margin-right: 5px;
	fill: #25435a;
}

@media (min-width: 768px)
{
	#officeList ul
	{
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1280px)
{
	#officeList ul
	{
		grid-template-columns: repeat(3, 1fr);
	}
}

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