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

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

@media (min-width: 920px)
{
	main
	{
		padding-left: 112px;
		padding-left: max(0px, 
					 min(112px, 0px + (112 - 0) * ((100vw - 400px) / (1920 - 400))
			));
		margin-right: 83px;
		margin-right: max(0px, min(83px, 0px + (83 - 0) * ((100vw - 400px) / (1920 - 400))));
		/*margin-bottom: 100px;
		margin-bottom: max(20px, 
				 min(100px, 20px + (100 - 20) * ((100vw - 400px) / (1920 - 400))
		));*/
	}
}

#officeList::after
{
	/* make div stretch to height of content */
	display: block;
	clear: both;
	content: '';
}

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

#officeList ul
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
	gap: 45px;
	gap: max(20px, min(45px, 20px + (45 - 20) * ((100vw - 400px) / (1920 - 400)) ));
}


#officeList li 
{
	/* margin: 0 0 40px; */
	background: #eaeaea;
}

.image
{
	height: 108px;
	overflow: hidden;/*for image zoom on hover*/
}

@media (min-width: 920px)
{
	.image
	{
		height: 178px;
	}
}

.image a:hover img{
	transform: scale(1.1);
}

img
{
	width: 100%;
	height: 178px;
	object-fit: cover;
	transition: transform .5s ease
}

.content
{
	padding: 38px;
	padding: max(20px, 
			 min(38px, 20px + (38 - 20) * ((100vw - 400px) / (1920 - 400))
	));
}

.title
{
	margin-bottom: 3px;
}

.title a
{
	color: #c24c40;
	font-size: 24px;
	font-size: max(19px, 
			 min(24px, 19px + (24 - 19) * ((100vw - 400px) / (1920 - 400))
	));
	font-weight: 500;
}

.title a:hover,
.title a:focus
 {
	color: #9f0604;
   
}

.phone {
	font-weight: 500;
	font-size: 19px;
	font-size: max(16px, 
			 min(19px, 16px + (19 - 16) * ((100vw - 400px) / (1920 - 400))
	));
	margin-bottom: 15px;
	margin-bottom: max(5px, 
			 min(15px, 5px + (15 - 5) * ((100vw - 400px) / (1920 - 400))
	));
}

.address {
	font-size: 19px;
	font-size: max(16px, 
			 min(19px, 16px + (19 - 16) * ((100vw - 400px) / (1920 - 400))
	));
}

#subNav
{
	margin-top: 20px;
}

#subContent a
{
	color: #c24c40;
}

#subContent a:hover,
#subContent a:focus
{
	color: #9f0604;
}

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