.map-wrap,
.map-canvas { width: 100%; aspect-ratio: 16 / 9; }

section.locationsByCountryBlock .inner,
section.locationsByCountryNav .inner { 
  padding-top: 0;
  padding-bottom: 0;
}

section.locationsByCountryNav ul { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  width: 100%; 
  list-style: none; 
  margin: 0; 
  padding: 0;
  border-bottom: 1px solid #E0DAEA; 
  gap: 1.5rem;
}
section.locationsByCountryNav li { 
  flex: 0 0 auto; calc(33.33% - .75rem); 
  appearance: none; 
  margin: 0; 
  padding: 0; 
}
section.locationsByCountryNav li a { 
  display: block; 
  padding: 1rem 0; 
  text-decoration: none; 
  font-weight: bold; 
  color: var(--yorktel-off-black); 
  font-size: var(--font-body); 
  border-bottom: 3px solid transparent; 
}
@media (min-width:1024px) {
  section.locationsByCountryNav li a { 
    font-size: var(--font-large); 
  }
}
section.locationsByCountryNav li.active a { border-bottom: 3px solid var(--yorktel-off-black); }

@media (min-width:1024px) {
  section.locationsByCountryNav ul {
    gap: 4rem; 
  }
  section.locationsByCountryNav li { 
    flex: 0 0 calc(33.33% - 2.67rem); 
  }
}

section.locationsByCountryBlock.hidden { display: none; }

section.locationsByCountryBlock .inner { 
  justify-content: flex-start; 
  padding-top: 3rem; 
  padding-bottom: 3rem; 
}
section.locationsByCountryBlock.visible .inner { padding-top: 0; }
section.locationsByCountryBlock.visible .content-label { display: none; }

section.locationsByCountryBlock .inner .block-text { flex: 0 0 100%; }
section.locationsByCountryBlock .inner .block-text .content-label { border-top: 1px solid #E0DAEA; padding-top: 1rem; }
section.locationsByCountryBlock .inner .locations { 
  margin: 1.5em 0 0 0; 
  flex: 0 0 100%; 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: flex-start; 
  gap: 1.5rem;
}

section.locationsByCountryBlock .inner .countries { 
  flex: 0 0 100%;
}

section.locationsByCountryBlock .inner .countries .country { 
  margin: 1.5rem 0 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #ddd;
}
section.locationsByCountryBlock .inner .countries .country:first-child {
  border: 0;
  padding-top: 0; 
}

@media (min-width:768px) {
  section.locationsByCountryBlock .inner .countries .country { 
    margin: 1.5rem 0 3rem;
  }
}

section.locationsByCountryBlock .inner .countries .country h3 { 
  color: var(--yorktel-off-black);
  font-size: var(--font-medium);
  font-weight: 700;
  margin: 0 0 1rem;
  text-transform: uppercase;
}

section.locationsByCountryBlock .inner .locations .location { flex: 0 0 100%; }
section.locationsByCountryBlock .inner .locations .location h3 { margin-top: 0; }
section.locationsByCountryBlock .inner .locations .location .location-region { font-size: var(--font-body); font-weight: bold; text-transform: uppercase; color: #81719A; margin: 0 0 1rem 0; }
@media (min-width:768px) {
	section.locationsByCountryBlock .inner .locations { flex: 0 0 100%; margin: 0; gap: 1.5rem 4rem; }
	section.locationsByCountryBlock .inner .locations .location { flex: 0 0 calc(25% - 3rem); }
}
@media (min-width:1024px) {
/* 	section.locationsByCountryBlock .inner .locations:not(.odd) .location { flex: 0 0 calc(25% - 3rem); } */
}
section.locationsByCountryBlock .inner .locations .location .label { 
	display: block;
	text-transform: uppercase;
	font-size: var(--font-small);
	font-weight: bold;
	margin: 1em 0 0 0;
} 
section.locationsByCountryBlock.visible .block-text-inner .label { 
  display: none;
}
.location h4 {
  display: flex;
  font-size: var(--font-medium);
  font-weight: bold;
  margin: 1em 0 0 0;
}
.location h4 a {
  font-weight: bold;
}
.location h4 button {
  flex: 0 0 auto;
  margin: 0 0 0 auto;
  padding: 0;
  background: transparent;
  color: var(--yorktel-off-black);
  border: 0;
  cursor: pointer;
}
.location h4 button:active,
.location h4 button:focus {
  border: 0;
  outline: 0;
}
.location h4 button img {
  width: 1rem;
  height: auto;
  filter: invert(21%) sepia(95%) saturate(7279%) hue-rotate(265deg) brightness(34%) contrast(100%);
}

.location-detail {
/*height: 0;
  opacity: 0;
  overflow: hidden; */
  transition: .3s all ease-out;
  padding-top: 1rem;
}
.location.active .location-detail {
  height: auto; /*12rem;*/
  opacity: 1;
}