#map{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:var(--grey-light);
}

.map_nav{
	position:absolute;
	top:20px;
	left:20px;
	z-index:1000;
}

.maplibregl-ctrl-attrib{
	margin-bottom:200px;
}

.end-marker,
.start-marker{
	height:20px;
	font-size:14px;
	font-weight:900;
	text-transform:uppercase;
	color:var(--dark);
	position:relative;
	padding-right:1.5em;
	display: flex;
	align-items: center;
	margin-right:-6px;
}

.start-marker::before{
	content:'start';
	color:var(--grey-dark);
}

.start-marker::after{
	position:absolute;
	right:0;
	top:3px;
	content: '';
	width:1.2em;
	height:1.2em;
	background-color:var(--dark);
	color:var(--dark);
	border-radius:50%;
}


.end-marker::before{
	content:'finish';
}

.end-marker::after{
	position:absolute;
	right:0;
	top:3px;
	content: '';
	width:1em;
	height:1em;
	background-color:var(--dark);
	rotate: 45deg;
}

.map_panel{
	position:absolute;
	top:0;
	left:calc(-50vw - 360px);
	width:90vw;
	max-width:660px;
	min-width:360px;
	height:100%;
	background-color:var(--dark);
	color:var(--pale);
	z-index:1000;
	padding:20px;
	overflow-y:auto;
	overflow-x:hidden;
	transition: var(--transition);
	box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.60);
	scroll-behavior: smooth;
}

@media (min-width: 996px) {
	.map_panel{
		width:48vw;
	}
}

.panel_visible .map_panel{
	left:0;
	transition: left 0.2s ease-in-out;

}

.pannel_inner{
	padding:var(--gap-small);
}

.pannel_inner.loading{
	opacity:0.5;
}

.mp_close{
	position:absolute;
	top:var(--gap);
	right:var(--gap);
	cursor:pointer;
	color:var(--accent);
	font-size:48px;
	line-height: 0;
	transition: var(--transition);
	scale:0.1;
}
.panel_visible .mp_close{
	scale:1;
	transition: var(--transition);
	transition-delay: 0.2s;
}

.mp_close:hover{
	transform:scale(1.1);
	color:white;
	transition: var(--transition);
}

.map_panel h1{
	padding-right:56px;
}



.story-marker{
	margin-left:-24px;
	margin-bottom:-24px;
	pointer-events: none;
}

.sm_header{
	display:flex;
	align-items:start;
	position:relative;
	pointer-events: auto;
}

.sm_index{
	display:flex;
	padding-top:6px;
	align-items:start;
	justify-content:center;
	width:32px;
	height:40px;
	font-size:24px;
	font-weight:900;
	color:white;
	background:url('/site/assets/images/pin_drop.svg') no-repeat center center;
	background-size:contain;
	z-index:10;
	pointer-events: auto;
}

.story-marker:hover .sm_index{
	/* background-image:url('/site/assets/images/pin_drop_black.svg');
	color:var(--pale); */
	filter: grayscale(100%);
	transition: var(--transition);
	transition-delay: 0.2s;
}

.sm_clickable{
	cursor:pointer;
}


.sm_title{
	font-size: 14px;
	font-weight: 900;
	line-height: 110%; /* 15.4px */
	text-transform: uppercase;
	color:var(--pale);
	border: 2px solid var(--white, #FFF);
	background: var(--black, #000);
	display: inline-flex;
	padding: 3px 4px 4px 20px;
	margin-top:3px;
	margin-left:-16px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	z-index:5;
}

.story-marker:hover .sm_title{
	background:var(--pale);
	color:var(--dark);
	transition: var(--transition);
	transition-delay: 0.2s;
}

.sm_bench{
	width:48px;
	height:48px;
	background:url('/site/assets/images/benches/1.png') no-repeat center center;
	filter: grayscale(100%);
	transition: var(--transition);
	transition-delay: 0.2s;
	pointer-events: auto;
}

.story-marker:hover .sm_bench{
	filter: grayscale(0%);
	transition: var(--transition);
	transition-delay: 0.2s;
}