.destinationsContainer {
	min-height:		50vh;
	display:		flex;
	align-items:	center;
}

.destinationsContainer > * {
	width: auto;
}
.destinationsMap__caption {
	padding:	4rem 2rem;
	text-align:	left;
	flex:		1;
}

.destinationsMap__nav .destinationsMap__list {
	margin:		0;
	padding:	0;
	list-style: none;
}

.destinationsMap__nav .trigger {
	cursor:				pointer;
	border:				none;
	text-align:			left;
	font-size:			24px;
	font-weight:		400;
	color:				var( --awb-color5, #123658 );
	padding:			10px;
	background:			transparent;
	display:			flex;
    justify-content:	space-between;
    width:				100%;
}


.destinationsMap__nav .trigger .label {
	min-width:	170px;
	display:	inline-block;
}


.destinationsMap__nav .trigger.active:not( .active + .active ) {
	font-weight: 800;
}



.destinationsContainer .destinations__map_wrapper {
	flex:		3;
	align-self:	flex-end;
}
.destinationsContainer .destinations__map_wrapper > * {
	width:		100%;
	height:		100%;
	display:	block;
}


@media ( min-width: 1221px ) {
	
	.destinationsMap__caption {
		display: flex;
	}

	.destinationsMap__nav {
		background:	var( --awb-color5, #123658 );
		padding:	20px 30px;
		min-width:	360px;
	}
	

	.destinationsMap__nav .destinationsMap__list li:not( :last-child ) {
		border-bottom: 1px solid rgba( 255, 255, 255, 0.25 );
	}

	.destinationsMap__nav .trigger {
		color: var( --awb-color1, #F5F5F5 );
	}

}


@media ( max-width: 1220px ) {
	.destinationsContainer {
		flex-direction: column;
	}
	.destinationsMap__caption {
		padding:	0;
		flex:		initial;
	}
	.destinationsMap__nav {
		overflow-x:		auto;
		max-width:		100vw;
		padding:		20px 10px;
		border-bottom:	1px solid rgb( 0 0 0 / 10% );
	}
	.destinationsMap__nav .destinationsMap__list {
		display:			flex;
		align-items:		center;
		justify-content:	flex-start;
		gap:				5px 0px;
	}
	.destinationsMap__nav .trigger {
		display:		flex;
		flex-direction:	column;
		align-items:	center;
		text-align:		center;
		background:		transparent;
		border-radius:	7px;
		transition:		background 300ms ease-in-out;
	}
	.destinationsMap__nav .trigger.active:not( .active + .active ) {
		background: rgb( 0 0 0 / 10% );
	}

	.destinationsMap__nav .trigger.active:not( .active + .active ) * {
		font-size: 22px !important;
	}
	
	.destinationsMap__nav .trigger .label {
		min-width:	160px;
	}

	.destinationsMap__nav .trigger.active:not( .active + .active ) .distance,
	.destinationsMap__nav .trigger .distance {
		font-size:		16px !important;
		font-weight:	400 !important;
	}



	.destinationsContainer .destinations__map_wrapper {
		width:		100vw;
		max-height:	50vh;
		overflow:	auto;
	}
	.destinationsContainer .destinations__map_wrapper > * {
		width:	130vw;
		/* height:	fit-content; */
		height:	auto;
	}
}
@media ( max-width: 800px ) {
	.destinationsContainer .destinations__map_wrapper > * {
		width:	200vw;
	}
}
@media ( max-width: 500px ) {
	.destinationsContainer .destinations__map_wrapper > * {
		width:	300vw;
	}
}



/* SVG map styles */
.destinationsMap {
	--white:		var( --awb-color1, #F5F5F5 );
	--primary:		#3095F2;
	--sea:			#537EA6;
	--land:			#F2EFE9;
	--font-family:	"Red Hat Display", Arial, Helvetica, sans-serif;
}
.destinationsMap .sea { fill: var( --sea, #537EA6 ); }
.destinationsMap .land { fill: var( --land, #F2EFE9 ); }

.destination {
	--path-duration: 1.2s;
}

.destinationsMap .label {
	isolation:		isolate;
	font-family:	var( --font-family, "Red Hat Display", Arial, Helvetica, sans-serif );
	font-size:		1.6px;
	letter-spacing:	0.1px;
}

.destinationsMap .label,
.destinationsMap .point {
	fill:	var( --white, #F5F5F5 );
	cursor:	pointer;
}
.destinationsMap .point {
	filter: url( #shadow );
}
.destinationsMap .point.primary { fill: var( --primary, #3095F2 ) }

.destinationsMap .track {
	--path-lenght:		111px;
	--path-dashoffset:	var( --path-lenght, 111px );
	fill:				none;
	stroke:				var( --primary, #3095F2 );
	stroke-width:		0.4px;
	stroke-linecap:		round;
	stroke-miterlimit:	10;
	stroke-dasharray:	var( --path-lenght, 111px );
	stroke-dashoffset:	var( --path-dashoffset, 111px );
	transition:			var( --path-duration ) ease-in-out;
}
.destinationsMap .track.invert {
	--path-dashoffset: calc( var( --path-lenght ) * -1 )
}

.destinationsMap .distance {
	opacity:			0;
	transition:			opacity 200ms ease-in-out;
	transition-delay:	0s;
	font-size:			1.5px;
	cursor:				default;
}


.destinationsMap .active .track {
	stroke-dashoffset:	0;
}
.destinationsMap .active .distance {
	opacity:			1;
	transition-delay:	calc( var( --path-duration ) / 2 );
}