/* Goes with the GlobalOfficeRegions User Control */

section.global-office-regions { 
	margin-top: 40px;
	background-color: var(--hl-light-taupe)!important;
	padding: 40px 0;
}

section.global-office-regions h2.section-title { 
	font-family: Roobert, sans-serif;
	font-size: 35px;
	font-weight: 300;
	color: var(--hl-dark-green);
}

section.global-office-regions .global-office-region { 
	padding: 20px 0 20px 0;
	border-bottom: 1px solid var(--hl-dark-green);
}

section.global-office-regions .global-office-region:last-child { 
	border-bottom-width: 2px;
}

section.global-office-regions .btn-global-office-region-expander {
	font-family: Roobert, sans-serif;
	font-size: 28px;
	font-weight: 500;
	color: var(--hl-dark-green);
	background-color: transparent;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	text-align: left;
	gap: 40px;
}

section.global-office-regions .btn-global-office-region-expander .indicator {
	display: inline-block;
	width: 50px;
	height: 50px;
	border: 2px solid var(--hl-dark-green);
	position: relative;

	flex-shrink:0;
}

section.global-office-regions .btn-global-office-region-expander .indicator:after {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	position: absolute;
	top: 15px;
	left: 15px;
	background: url("/_assets/icon-plus-hl-dark-green.png") center no-repeat;
	background-size: 16px 16px; 
	transition: all 0.5s;
}

section.global-office-regions .btn-global-office-region-expander.expanded .indicator:after {
	transform: rotate(45deg);
}

section.global-office-regions .global-office-region-offices {
	padding: 20px 0;
	display: none;
}

section.global-office-regions .global-office-region-offices .grid-container {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-column-gap: 40px;
	grid-row-gap: 10px;
}

section.global-office-regions .global-office-region-offices .grid-item {
	display: flex;
	flex-direction: row;
	gap: 16px;
}

section.global-office-regions .global-office-region-offices .grid-item .icon { 
	display: inline-block;
	width: 16px;
	height: 18px;
	background: url("/_assets/icon-location-pin-hl-dark-green.png") center no-repeat;
	background-size: auto 14px;
}

section.global-office-regions .global-office-region-offices a {
	position: relative;
	display: inline-flex;
	font-family: Roobert, sans-serif;
	font-size: 18px;
	font-weight: 400;
	color: var(--hl-dark-green);
	text-decoration: none;
}

section.global-office-regions .global-office-region-offices a:hover:after {
	content: "";
	position: absolute;
	left:0;
	bottom: -1px;
	height:1px;
	width:100%;
	background-color: var(--hl-dark-green);
}


@media (max-width: 680px) {
	section.global-office-regions .global-office-region-offices .grid-container {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 440px) {
	section.global-office-regions .global-office-region-offices .grid-container {
		grid-template-columns: 1fr;
	}
}