.interactive-map-cont {
	position: relative;
	overflow: hidden;
	padding: 0 0 61px;
}

.interactive-map-cont .hidden {
	display: none;
}

.interactive-map-cont .mobile-guide {
	display: none;
	text-align: right;
	font-family: var(--font-body);
	text-transform: capitalize;
	font-weight: bold;
}

.interactive-map-cont .mobile-guide p {
	font-family: var(--font-body);
	text-transform: capitalize;
	font-weight: bold;
	padding-bottom: 20px;
}

.interactive-map-cont .container {
	display: grid;
	grid-template-columns: 1fr 40%;
	min-width: 0;
	margin: 0 auto;
	max-width: 1440px;
}

.interactive-map-cont .slider-cont {
	background-color: #f0f5fa;
}

.interactive-map-cont .reference-map {
	position: absolute;
	max-width: 15%;
	top: 0;
}

.interactive-map-cont .map-title {
	font-size: 20px;
	font-weight: 900;
}

.interactive-map-cont .map-region .title {
	position: relative;
	font-family: var(--font-display);
	font-size: 40px;
	font-weight: bold;
	color: #1C2B59;
}

.interactive-map-cont .map-region .content-section {
	display: grid;
	gap: 20px;
	padding-bottom: 20px;
}

.interactive-map-cont .inner-panel {
	padding: 22px 42px;
}

.interactive-map-cont .map-region .title:after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -8px;
	width: 50px;
	height: 3px;
	background-color: var(--orange-ec);
}

.interactive-map-cont .map-region .title:after {
	bottom: -11px;
	width: 60px;
	height: 3px;
}

.interactive-map-cont svg {
	width: 80%;
	margin-left: 80px;	
}

.interactive-map-cont .glide__track {
	background-color: #f0f5fa;
}

.interactive-map-cont .glide__arrows {
	display: flex;
	padding-bottom: 30px;
	background-color: white;
	align-items: center;	
}

.interactive-map-cont .glide__arrow {
	--arrow-color: #1C2B59;
	--arrow-bg-color: transparent;
	position: relative;
	width: 31px;
	height: 31px;
	align-items: center;
	justify-content: center;
	margin: var(--space-1);
	background: var(--arrow-bg-color);
	border-radius: 0;
	font-size: 32px;
	color: var(--arrow-color);
	pointer-events: all;
}

.interactive-map-cont .glide__arrow:hover {
	background: transparent;
	border: none;
}

.interactive-map-cont .count {
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 2.8px;
	color: #1C2B59;
	white-space: nowrap;
}

.interactive-map-cont .content-section p {
	font-size: 18px;
	line-height: 30px;
	max-width: 95%;
} 

.interactive-map-cont .view-all {
	position: relative;
	font-weight: 700;
	font-size: 14px;
	line-height: var(--leading-none);
	letter-spacing: 2.8px;
	color: var(--white);
	text-transform: uppercase;
	text-decoration: none;
	background-color: var(--green-21);
	padding: var(--space-3) var(--space-4);
	width: fit-content;
}

#frederick:hover #frederick-default {
	opacity: 0
} 

#frederick:hover #frederick-hover {
	opacity: 1
} 

#frederick.active #frederick-hover {
	opacity: 1
} 

#north:hover #north-default {
	opacity: 0
} 

#north:hover #north-hover {
	opacity: 1
} 

#north.active #north-hover {
	opacity: 1
} 

#east:hover #east-default {
	opacity: 0
} 

#east:hover #east-hover {
	opacity: 1
} 

#east.active #east-hover {
	opacity: 1
} 

#south:hover #south-default {
	opacity: 0
} 

#south:hover #south-hover {
	opacity: 1
} 

#south.active #south-hover {
	opacity: 1
} 

#west:hover #west-default {
	opacity: 0
} 

#west:hover #west-hover {
	opacity: 1
} 

#west.active #west-hover {
	opacity: 1
} 

#Highways, #Rivers, #Icons {
	pointer-events: none;
	cursor: none;
	letter-spacing: -1.5px;
}

.interactive-map-cont #Town_Names {
	letter-spacing: -1px
}

.interactive-map-cont .cls-16 {
	letter-spacing: -1px;	
}

.interactive-map-cont .cls-15 {
	letter-spacing: -1px;	
}

@media (max-width: 1250px) {
	.interactive-map-cont .map-cont {
		margin: auto 0;
	}
	.interactive-map-cont svg {
		width: 90%;
		margin: 0 auto;
	}
}

@media (max-width: 1024px) {
	.interactive-map-cont .container {
		display: unset;
	}

	.interactive-map-cont .mobile-guide {
		display: unset;
	}

	.interactive-map-cont svg {
		width: 100%;
		margin-left: 0px;	
	}

	.interactive-map-cont .reference-map {
		position: absolute;
		max-width: 27%;
		top: 33px;
		left: 12px;
	}

	.interactive-map-cont .glide__arrows {
		display: none;
	}

	.imgbox-grid-cont .imgbox-arrows {
		width: 107%;
		top: 41%;
		left: -3.5%;
		font-size: 22px;
	}

	.interactive-map-cont .mobile-guide p {
		font-size: 20px;
	}
}

@media (max-width: 640px) {
	.interactive-map-cont .map-region .title {
		font-size: 24px;
	}

	.interactive-map-cont .content-section p {
		font-size: 14px;
		line-height: 19px;
	}

	.imgbox-grid-items .slide-title h3 {
		font-size: 12px;
	}

	.interactive-map-cont .map-region .title:after {
		width: 39px;
		bottom: -3px;
		height: 2px;
	}

	.interactive-map-cont .map-cont {
		padding-bottom: 20px
	}

	.imgbox-grid-cont .imgbox-arrows {
		width: 110%;
		top: 41%;
		left: -5.5%;
	}
}

@media (max-width: 460px) {
	.imgbox-grid-cont .imgbox-arrows {
		width: 116%;
		top: 34%;
		left: -8.5%;
	}

	.interactive-map-cont .mobile-guide p {
		font-size: 10px;
	}

	.interactive-map-cont .view-all {
		font-size: 10px;
	}
}

@media (max-width: 360px) {
	.imgbox-grid-cont .imgbox-arrows {
		top: 32%;
	}
}
