.interactive-map {
	margin: 30px 0px;
}

.interactive-map h2 {
	display: none;
	margin: 0px 20px;
}

.interactive-map .map-title > p {
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 300;
	letter-spacing: 1px;
}

/***
	Map Stage
****/
.interactive-map .stage {
	position: relative;
	width: 100%;
	padding-left: 0;
}

/***
	Map SVG
****/
.interactive-map .map {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: 30px 0px;
}

.interactive-map .map .mobile,
.interactive-map .map .mobile-key {
	display: unset;
}

.interactive-map .desktop,
.interactive-map .desktop-key {
	display: none;
}

.interactive-map .map svg {
	position: relative;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	transform: none;
	margin-top: 20px;
	margin-bottom: 30px;
}

.interactive-map .map svg [data-map-beacon],
.interactive-map svg [data-map-beacon] {
	cursor: pointer;
}

.interactive-map .map svg .active-pin-mobile,
.interactive-map svg .active-pin {
	opacity: 0;
}

.interactive-map .map svg .active-pin-mobile:hover,
.interactive-map .map svg .active-pin-mobile:active,
.interactive-map svg .active-pin:hover,
.interactive-map svg .active-pin:active {
	opacity: 1;
}


.interactive-map .map svg .active-pin-mobile.hover,
.interactive-map .map svg .active-pin-mobile.active,
.interactive-map svg .active-pin.hover,
.interactive-map svg .active-pin.active {
	opacity: 1;
}

/***
	Map Region List
****/

.interactive-map .map [data-map-region],
.interactive-map [data-map-region] {
	cursor: pointer;
}

.interactive-map .map .active-li-region-mobile,
.interactive-map .active-li-region {
	opacity: 0;
}

.interactive-map .map .active-li-region-mobile:hover,
.interactive-map .map .active-li-region-mobile:active,
.interactive-map .active-li-region:hover,
.interactive-map .active-li-region:active {
	opacity: 1;
}

.interactive-map .map .active-li-region-mobile.hover,
.interactive-map .map .active-li-region-mobile.active,
.interactive-map .active-li-region.hover,
.interactive-map .active-li-region.active {
	opacity: 1;
}

/* 
	SLIDES
*/
.interactive-map .region {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

.interactive-map .region .slide {
	grid-column: 1 / span 1;
	grid-row: 1 / span 1;
	opacity: 0;
	height: 0;
	pointer-events: none;
}

.interactive-map .region .slide.active {
	opacity: 1;
	height: unset;
	pointer-events: all;
}

.interactive-map .region .slide .img-cont {
	position: relative;
}

.interactive-map .region .slide .direction-arrows {
	display: flex;
	justify-content: center;
    position: relative;
    top: 20px;
	margin: 0px 30px;
}

.interactive-map .region .slide .direction-arrows .arrows {
	display: flex;
    gap: 5px;
	margin-left: 15px;
}

.interactive-map .region .slide .direction-arrows .arrows .arrow.left:hover .cls-120,
.interactive-map .region .slide .direction-arrows .arrows .arrow.right:hover .cls-121 {
	fill: #0A4369 !important;
}

.interactive-map .region .slide .direction-arrows .arrows .arrow.left:hover .cls-100,
.interactive-map .region .slide .direction-arrows .arrows .arrow.right:hover .cls-101 {
	fill: #FFFFFF !important;
}

.interactive-map .region .slide .direction-arrows .learn-more-mobile > p,
.interactive-map .region .slide .direction-arrows .learn-more-desktop > p,
.interactive-map .region .slide .direction-arrows .learn-more-desktop .read-more,
.interactive-map .region .slide .direction-arrows .learn-more-mobile .read-more {
	min-width: 138px;
	height: 41px;
	text-align: center;
	letter-spacing: 0px;
	color: #332E2C;
	opacity: 1;
	font-family: var(--font-dm-serif);
	display: unset;
	flex: 1;
}

.interactive-map .region .slide .direction-arrows .learn-more-mobile .read-more:hover,
.interactive-map .region .slide .direction-arrows .learn-more-desktop .read-more:hover {
	text-decoration: underline;
}

.interactive-map .region .slide .direction-arrows .learn-more-desktop,
.interactive-map .region .slide .direction-arrows .learn-more-desktop .read-more {
	display: none;
}

.interactive-map .region .slide .direction-arrows .arrows .arrow {
	height: 44px;
	width: 44px;
	margin-right: 5px;
	cursor: pointer;
}

.interactive-map .region .slide .content-section {
	margin: 0 20px;
    border-bottom: 1px dashed #A3A6B3;
}

.interactive-map .region .slide  .region-name {
	font-size: 30px;
	min-width: 271px;
	text-align: left;
	letter-spacing: 0px;
	color: #0A4369;
}

.interactive-map .region .slide .description {
	color: #332E2C;
	margin-bottom: 20px;
	font-size: 14px;
}

@media (min-width: 40em) {

	.interactive-map .region .slide .direction-arrows .learn-more-mobile {
		font-size: 20px;
		min-width: 188px;
	}

	.interactive-map .region .slide .direction-arrows .arrows .arrow {
		height: 54px;
		width: 54px;
	}
}

/*
	Desktop Overwrites
*/
@media (min-width: 64em) {

	.interactive-map {
		margin: 30px 30px;
	}

	.interactive-map .stage {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: minmax(100px, auto);
		gap: 30px;
	}

	.interactive-map .map {
		display: none;
	}

	.interactive-map .stage .region-content {
		grid-column: 3 /span 2;
		grid-row: 1;
		z-index: 2;
	}
	
	.interactive-map .stage .desktop-key {
		grid-column: 4;
		grid-row: 2 ;
		margin-right: 20px;
		z-index: 2;
	}

	.interactive-map .stage .desktop {
		grid-column: 1 / span 2;
    	grid-row: 1 / span 3;
		right: 40%;
    	position: relative;
	}

	.interactive-map .stage .desktop svg {
		height: 100%;
    	width: 1100px;
	}

	.interactive-map .map .mobile,
	.interactive-map .map .mobile-key {
		display: none;
	}
	
	.interactive-map .desktop,
	.interactive-map .desktop-key {
		display: unset;
	}

	.interactive-map h2 {
		text-align: left;
		letter-spacing: 4.8px;
		color: #760032;
		display: unset;
		font-family: var(--font-dm-sans);
		font-weight: 600;
		text-transform: uppercase;
		font-size: 14.56px;
	}

	.interactive-map .region .slide .direction-arrows .learn-more-mobile {
		display: none;
	}
	
	.interactive-map .region .slide .direction-arrows .learn-more-desktop,
	.interactive-map .region .slide .direction-arrows .learn-more-desktop .read-more {
		display: unset;
		font-size: 16px;
		min-width: 300px;
		text-align: end;
	}

	.interactive-map .region .slide .direction-arrows {
		flex-direction: column;
		gap: 10px;
		left: 0px;
		align-items: flex-end;
		margin: 0px 20px 15px;
	}

	.interactive-map .region .slide .direction-arrows .arrows {
		justify-content: center;
	}

	.interactive-map .region .slide .direction-arrows .arrows .arrow {
		height: 44px;
		width: 44px;
	}

}

@media (min-width: 75em) {
	.interactive-map {
		margin: 30px 50px;
	}

	.interactive-map .region .slide  .region-name {
		font-size: 50px;
	}

	.interactive-map .stage .desktop {
		bottom: 10px
	}

	.interactive-map .stage .desktop svg {
		width: 1300px;
	}
}

@media (min-width: 90em) {
	.interactive-map .stage .desktop {
		right: 30%;
	}

	.interactive-map .stage .desktop {
		bottom: 30px
	}

	.interactive-map .stage .desktop svg {
		width: 1400px;
	}
}

@media (min-width: 100em) {
	.interactive-map {
		margin: 30px 80px;
	}
	.interactive-map .stage .desktop {
		bottom: 100px;
	}
	.interactive-map .stage .desktop svg {
		width: 1700px;
	}
}

@media (min-width: 113em) {
	.interactive-map .stage .desktop {
		right: 30%;
	}
}