.map-container {
	border-bottom: 20px solid #00005C;
}
.map-browse-title {
	font-family: var(--font-family-exo);
	font-size: var(--font-size-20);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-35);
	color: var(--white);
	display: flex;
	top: 50%;
	transform: translateY(-50%);
	position: relative;
}
.map-browse-title .down-arrow {
	margin-left: 30px;
}
.map-col {
	padding: 10px 50px;
}
.map-selectors {
	position: relative;
	padding: 10px;
	display: flex;
	width: 100%;
	background-color: #00005C;
}
.map-selectors .selector-type {
	color: #fff;
	font-size: var(--font-size-12);
	line-height: var(--line-height-12);
	margin-bottom: 3px;
}
.map-selectors select {
	margin-bottom: 0px;
	min-width: 250px;
	max-height: 40px;
	padding: 7px 10px 10px;
}
.map-selectors .connector-line {
	width: 260px;
	display: flex;
	padding: 0px 20px;
}
.map-selectors .connector-line .connector-dc {
	width: 15px;
	height: 12px;
	border-radius: 50%;
	background-color: #ff0000;
	position: relative;
	top: 50%;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}
.map-selectors .connector-line .connector-dc.active {
	opacity: 1;
}
.map-selectors .connector-line .connector-dt {
	width: 15px;
	height: 12px;
	border-radius: 50%;
	background-color: #ff0000;
	border: 2px solid #FFB967;
	position: relative;
	top: 50%;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}
.map-selectors .connector-line .connector-dt.active {
	opacity: 1;
}
.map-selectors .connector-line .connector-tline {
	width: 240px;
	height: 1px;
	border: 3px solid #ff0000;
	position: relative;
	top: 55%;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}
.map-selectors .connector-line .connector-tline.active {
	opacity: 1;
}
.map-selectors .connector-line .connector-info {
	position: absolute;
	width: 220px;
	text-align: center;
	color: #fff;
	font-family: var(--font-family-exo);
	font-size: var(--font-size-16);
	font-weight: var(--font-weight-bold);
}
.map-svg {
	max-height: 100vh;
	min-height: 100vh;
	transition: all 1s ease-in-out;
}
.map-svg .lightbox::before {
	content: '';
	position: absolute;
	top: 108px;
	left: 0px;
	width: 100%;
	height: 110%;
	background-color: rgba(0,0,0,0.4);
	z-index: 1;
}
.map-svg .lightbox .box-wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-30%,-50%);
	z-index: 2;
	width: 800px;
}
.map-svg .lightbox .box-wrapper .box-title {
	padding: 15px 20px;
	background-color: #00005C;
	color: #fff;
}
.map-svg .lightbox .box-wrapper .box-title.black {
	background-color: #000;
}
.map-svg .lightbox .closebtn {
	position: absolute;
	top: 10px;
	right: 15px;
	cursor: pointer;
	z-index: 3;
}
.map-svg .lightbox .closebtn img {
	width: 20px;
}
.map-options {
	display: flex;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}
.map-options.active {
	opacity: 1;
}
.map-svg {
	overflow: hidden;
	position: relative;
}
.select-tip {
	font-family: var(--font-family-exo);
	font-size: var(--font-size-16);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-18);
	color: var(--medGray);
	padding: 25px;
	text-align: center;
	opacity: 1;
	position: absolute;
	top: 100px;
	left: 50%;
	transform: translateX(-50%);
	transition: opacity 0.5s ease-in-out;
	z-index: -1;
}
.map-svg .select-tip.inactive {
	opacity: 0;
}
/* .map-svg.focus svg {
	transform: scale(1.5);
	cursor: grab;
} */
.map-svg {
	cursor: grab;
}
.map-svg[zoomLevel="1"] svg {
	/* transform: scale(1.2); */
	width: 100vw;
	height: 771px;
}
.map-svg[zoomLevel="2"] svg {
	/* transform: scale(1.5); */
	width: calc(100vw * 1.2);
	height: calc(771px * 1.2);
	/* transform: translateX(calc(100vw * -0.1)); */
}
.map-svg[zoomLevel="3"] svg {
	/* transform: scale(1.8); */
	width: calc(100vw * 1.5);
	height: calc(771px * 1.5);
	/* transform: translateX(calc(100vw * -0.25)); */
}
/* .map-svg[zoomLevel="1"].zoomOut svg {
	transform: scale(1);
}
.map-svg[zoomLevel="2"].zoomOut svg {
	transform: scale(1.2);
}
.map-svg[zoomLevel="3"].zoomOut svg {
	transform: scale(1.5);
} */
.map-svg svg {
	width: 100%;
	transition: all 2s ease-in-out;
}
svg > g {
	opacity: 0.7;
}
.spot { 
	fill: #00005C; 
	cursor: pointer;
}
.spot.dc {
	fill: #00CBFE;
	stroke: #00005C;
	stroke-width: 3;
}
.spot.dt {
	pointer-events: none;
	opacity: 0.4;
	transition: all 0.5s ease-in-out;
}
.spot.dt.active {
	pointer-events: auto;
	opacity: 1;
}
.spot.selected { 
	fill: #FF0000;
	pointer-events: none;
	stroke: none;
	r: 8px;
}
.spot.dt.selected {
	stroke: #FFB967;
	stroke-width: 3;
	r: 7px;
}
.spot2 { 
	fill: #ff0000; 
	display: none; 
}
text.dt {
	opacity: 0.3;
	transition: all 0.5s ease-in-out;
}
text.dt.active {
	opacity: 1;
}
.curve {
	opacity: 0;
	pointer-events: none;
	stroke-width: 1;
}
.curve.active {
	opacity: 1;
	cursor: pointer;
	pointer-events: none;
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: animateDash 2s linear forwards;
}
.curve.animate {
	stroke-dasharray: 5;
	animation: animateDash 30s linear infinite;
}
.curve.linked {
	stroke: #ff0000;
	stroke-width: 2;
	stroke-dasharray: 10;
}

@keyframes animateDash { 
	to {
	    stroke-dashoffset: 0;
  	}
}

.map-info {
	position: absolute;
	top: 0px;
	left: 0px;
	border-right: 1px solid #ddd;
	width: 350px;
	height: calc(100% - 115px);
	background-color: #fff;
	z-index: 2;
	opacity: 0;
	transition: all 0.5s ease-in-out; 
	margin-top: 95px;
	overflow-x: hidden;
	overflow-y: scroll;
	pointer-events: none;
}
.map-info.active {
	opacity: 1;
	pointer-events: auto;
}
.map-info.collapsed {
	transform: translateX(-350px);
}

.map-info .npItem-header {
	background-color: #EEE;
	padding: 10px 30px;
	font-family: var(--font-family-exo);
	font-weight: var(--font-weight-bold);
	text-align: center;
	cursor: pointer;
	position: relative;
}
.map-info .npItem-header:after {
	content: '';
	position: absolute;
	top: 15px;
	right: 15px;
	background: url(/wp-content/themes/restly-child/assets/image/icons/arrow-down.svg);
	width: 15px;
	height: 15px;
	background-repeat: no-repeat;
	background-size: cover;	
}	
.map-info .npItem-header.expand:after {
	transform-origin: center center;
	transform: rotate(180deg);
}
.map-info .npItem-wrapper {
	display: flex;
	flex-wrap: wrap;
	padding: 0px;
	margin-bottom: 0px;
	opacity: 0;
	height: 0;
	transition: all 0.5s ease-in-out;
	gap: 12px;
}
.map-info .npItem-wrapper.expand {
	height: auto;
	opacity: 1;
	padding: 10px 30px;
	margin-bottom: 30px;	
}
.map-info .npItem-wrapper.expand .npItem {
	opacity: 1;
}
.map-info .npItem {
	/* margin-right: 12px; */
	opacity: 0;
	width: calc(33% - (2*12px)/2);
}
.map-info .npItem:nth-child(n+3) {
	margin-right: 0px;
}
.map-info img {
	width: auto;
	height: 45px;
}
.map-info .no-list {
	text-align: center;
	color: #ccc;
	font-size: var(--font-size-12);
	width: 100%;
}
.toggle-btn {
	width: 50px;
	height: 50px;
	position: absolute;
	bottom: 20px;
	left: 350px;
	border: 1px solid #000;
	cursor: pointer;
	z-index: 2;
	transition: all 0.5s ease-in-out; 
}
.toggle-btn.mobile {
	width: 130px;
	padding: 15px;
}
.toggle-btn.collapsed {
	transform: translateX(-350px);
}
.toggle-btn:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background: url(/wp-content/themes/restly-child/assets/image/icons/arrow-down.svg);
	width: 25px;
	height: 25px;
	x: no-repeat;
	background-size: cover;
	transform: translate(-50%,-50%) rotate(90deg);
}
.toggle-btn.mobile:after {
	left: unset;
	right: 10px;
	width: 15px;
	height: 15px;	
	transform: translateY(-50%) rotate(90deg);
}
.toggle-btn.collapsed:after {
	transform: translate(-50%,-50%) rotate(-90deg);
}
.toggle-btn.mobile.collapsed:after {
	transform: translateY(-50%) rotate(-90deg);
}
.float-cta-wrapper {
	position: absolute;
	bottom: 30px;
	left: 370px;
	display: flex;
	opacity: 0;
	pointer-events: none;
	transition: all 0.5s ease-in-out;
}
.float-cta-wrapper.active {
	opacity: 1;
	pointer-events: auto;
}
.float-cta-wrapper .float-cta-cls,
.float-cta-wrapper .float-cta-ix {
	background-color: #00005c;
	color: #fff;
	border-radius: 12px;
	margin-right: 15px;
	padding: 8px 12px 15px 12px;
	font-size: var(--font-size-12);
	line-height: var(--line-height-12);
	cursor: pointer;
}
.float-cta-wrapper .float-cta-ix {
	background-color: #000;
}
.float-cta-wrapper .float-cta-cls::after,
.float-cta-wrapper .float-cta-ix::after {
	content: '';
	position: relative;
	top: 4px;
	background: url(/wp-content/themes/restly-child/assets/image/icons/eye-icon.svg);
	width: 30px;
	height: 15px;
	background-repeat: no-repeat;
	background-size: cover;
	display: inline-block;
	margin-left: 10px;
}

#map-tour-float {
	transition: all 0.5s ease-in-out;
}
#map-tour-float.inactive {
	opacity: 0;
	pointer-events: none;
}
.map-tour {
	display: flex;
	width: 280px;
	position: absolute;
	top: 120px;
	right: 40px;
	cursor: pointer;
}
.map-tour .tour-text {
	background-color: #00005C;
	color: #fff;
	text-align: center;
	padding: 15px 20px;
	flex-basis: 85%;
}
.map-tour .tour-arrow {
	background-color: #00CBFE;
	position: relative;
	flex-basis: 15%;
}
.map-tour .tour-arrow img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 22px;
	height: 22px;
}
.map-info .map-tour {
	width: 100%;
	top: unset;
	bottom: 0px;
	right: 0px;
	position: relative;
}
.map-tour-controls {
	display: flex;
	width: 200px;
	position: absolute;
	top: 120px;
	right: 50px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s ease-in-out;
}
.map-tour-controls.active {
	opacity: 1;
	pointer-events: auto;
}
.map-tour-controls .pause-tour,
.map-tour-controls .stop-tour {
	pointer-events: none;
	padding: 10px;
	border: 1px solid #000;
}
.map-tour-controls.active .pause-tour,
.map-tour-controls.active .stop-tour {
	cursor: pointer;
	pointer-events: auto;
	display: flex;
}
.map-tour-controls .pause-tour::after {
	content:'';
	position: relative;
	top: 2px;
	background-image: url(/wp-content/themes/restly-child/assets/image/icons/pause-icon.svg);
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-size: cover;
	display: inline-block;
	margin-left: 5px;	
}
.map-tour-controls .pause-tour.paused::after {
	background-image: url(/wp-content/themes/restly-child/assets/image/icons/play-icon.svg);
}
.map-tour-controls .stop-tour::after {
	content:'';
	position: relative;
	top: 2px;
	background-image: url(/wp-content/themes/restly-child/assets/image/icons/stop-icon.svg);
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-size: cover;
	display: inline-block;
	margin-left: 5px;	
}

.map-controls {
	position: absolute;
	top: 190px;
	right: 40px;
}	
.map-controls .resetBtn {
	cursor: pointer;
}
.map-controls .zoomIn, .map-controls .zoomOut {
	cursor: pointer;
	width: 50px;
}
.map-controls .zoomOut {
	margin-top: -8px;
}
#intermap {
	position: relative;
}


/* Media handling */
@media only screen and (min-width: 992px) {

}
@media only screen and (min-width: 768px) and (max-width: 991px) {
}
@media only screen and (min-width: 1920px) {
}
@media only screen and (max-width: 1920px) {

}
@media only screen and (max-width: 1536px) {

}
@media only screen and (max-width: 1440px) {
	
}
@media only screen and (max-width: 1367px) {
	.map-col {
	  padding: 10px 30px;
	}
}
@media only screen and (max-width: 1280px) {
	.map-col {
	  padding: 10px 15px;
	}
	.map-selectors select {
	  min-width: 200px;
	}	
	.map-selectors .connector-line {
	  width: 240px;
	}	
	.map-selectors .connector-line .connector-info {
	  width: 200px;
	}
}
@media only screen and (max-width: 1080px) {
	.map-browse-title {
	  font-size: var(--font-size-18);
	  line-height: var(--line-height-22);
	}
	.map-browse-title .down-arrow {
	  margin-left: 10px;
	}
	.map-selectors select {
	  min-width: 200px;
	}	
}
@media only screen and (max-width: 992px) {
 	    
}
@media only screen and (min-width: 767px) and (max-width: 940px) {
	.map-col:first-child {
		width: 30%;
	}
	.map-col:nth-child(2) {
		width: 70%;
	}
	.select-tip {
		left: 20%;
	}
	.map-selectors .connector-line {
		width: 120px;
	}
	.map-selectors .connector-line .connector-info {
		width: 80px;
	}
}
@media only screen and (max-width: 767px) {
	.map-selectors {
		flex-wrap: wrap;
	}
	.map-col {
		width: 100%;
		flex-wrap: wrap;
	}
	.map-options > div{
		width: 100%;
		margin-bottom: 10px;
	}
	.map-options > div.connector-line {
		order: 3;
		margin-top: 15px;
		width: 100%;
		display: none;
	}
	.map-options > div.connector-line.show-mobile {
		display: flex;
	}
	.map-selectors .connector-line .connector-tline {
		width: 100%;
		top: 85%;
	}
	.map-selectors .connector-line .connector-info {
		width: 75%;
		margin-top: -10px
	}	
	.map-tour {
		top: unset;
		bottom: 33px;
		font-size: 12px;
		line-height: 12px;
		width: 200px;
		right: unset;
		left: 15px;
	}
	.map-info .map-tour {
		left: 0px;
	}
	.map-controls {
		right: 15px;
		/* bottom: 30px; */
		display: none;
	}
	.map-controls .zoomIn {
		margin-right: -8px;
	}
	.map-controls .zoomOut {
		margin-top: 0px;
	}
	.map-controls .resetBtn {
		margin-top: 15px;
		margin-left: 5px;
	}
	.map-tour-controls {
		top: 330px;
		right: 0px;
	}	
	.map-svg {
		overflow: auto;
		/* max-width: 100vw; */
	}
	
	.map-svg[zoomLevel="1"] svg {
		width: 250vw;
		height: 771px;
	}
	.map-svg[zoomLevel="2"] svg {
		width: calc(250vw * 1.2);
		height: calc(771px * 1.2);
		transform: translateX(calc(250vw * -0.1));
	}
	.map-svg[zoomLevel="3"] svg {
		width: calc(250vw * 1.5);
		height: calc(771px * 1.5);
		transform: translateX(calc(250vw * -0.25));
	}	
	.select-tip {
		top: 270px;
		width: 100%;
	}
	.float-cta-wrapper {
		left: 20px;
		flex-wrap: wrap;
		bottom: 30px;
	}
	.float-cta-wrapper > div {
		padding: 8px 10px 15px 10px;
		margin-bottom: 5px;
	}
	.map-info {
		height: calc(100% - 235px);
		margin-top: 215px;
	}
}
@media only screen and (min-width: 600px) and (max-width: 767px) {
	.map-controls {
		top: 220px;
	}
	.map-col {
		width: 100%;
		flex-wrap: nowrap;
	}
	.map-options > div{
		width: 33%;
		margin-bottom: 10px;
	}
	.map-options > div.connector-line {
		order: unset;
		margin-top: 15px;
		width: 100%;
		display: block;
	}
	.map-selectors .connector-line .connector-tline {
		top: 60%;
	}
	.map-selectors .connector-line .connector-info {
		width: 250px;
	}
}