/*-----------------------------------------------------------------------------------------------------------
		MAP
-----------------------------------------------------------------------------------------------------------*/
body{
	background: #414141;
}
.content-wrapper{
	margin-bottom: 6%;
}
.landing-banner.maps-banner .landing-banner-conent{
	/* background: url('../images/banner-leafe-lef.svg') no-repeat top right,#414141; */
	background: url('../images/sub-leaf-right.png') top right no-repeat;
}
.map-legend-top {
	display: flex;
	margin: 0 auto;
	padding: 10px 10px;
	max-width: 1500px;
	background: #e4e1d9;
	flex-wrap: wrap;
	gap: 10px;
}

.homesites-legend {
	padding: 0 0 0 20px;
	width: 200px;
	font-size: 15px;
	line-height: 40px;
	font-weight: 500;
	
	text-align: center;
	text-transform: uppercase;
	background: #fff url('../images/homesite-icon.png') no-repeat 15px center;
	background-size: auto 32px;
	cursor: pointer;
}
.lan-header-content{
	max-width: 1500px;
}
.desk-menu .content-wrapper{
	position: relative;
	z-index:0;
}
.homes-legend {
	padding: 0 0 0 20px;
	width: 200px;
	font-size: 15px;
	line-height: 40px;
	font-weight: 500;
	
	text-align: center;
	text-transform: uppercase;
	background: #fff url('../images/home-icon.png') no-repeat 15px center;
	background-size: auto 32px;
	cursor: pointer;
}

.homesites-legend:hover,
.homes-legend:hover {
	background-color: #cec9be;
}

.smooth_zoom_preloader {
	background-image: url('../images/preloader.gif');
}

.smooth_zoom_icons {
	background-image: url('../images/icons.png');
}

#community-map-wrapper {
	margin: 0 auto;
}

#community-map {
	max-width: none;
}
.landing-banner-full{
	padding-bottom: 22px;
}
#community-map-wrapper .landmarks {
	position:absolute;
	z-index:10;	
	top:0px;
	left:0px;
}

#community-map-wrapper .landmarks .item {
	position:absolute;		
	text-align:center;		
	display: none;	
}


.map-marker {
	max-width: none;
	cursor: pointer;
	/* width: 40px !important;
    height: 40px !important;
    object-fit: contain; */
}

.map-bottom-legend {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 0 auto;
	padding: 10px 10px 10px 20px;
	max-width: 1500px;
	background: #e4e1d9;
}

.map-bottom-legend div {
	position: relative;
	padding: 5px 25px 5px 40px;
	font-size: 15px;
	line-height: 20px;
	text-transform: uppercase;
}

.map-bottom-legend div:before {
	content: ' ';
	display: block;
	position: absolute;
	left: 0;
	top: 5px;
	width: 30px;
	height: 25px;
	background: #e4e1d9;
}

.map-bottom-legend div.color1:before { background: #81b9a1; }
.map-bottom-legend div.color2:before { background: #eaa14f; }
.map-bottom-legend div.color3:before { background: #cc7956; }
.map-bottom-legend div.color4:before { background: #c8af95; }
.map-bottom-legend div.color5:before { background: #7d0000; }
.map-bottom-legend div.color6:before { background: #fec311; }

.map-bottom-legend div span {
	display: block;
	font-size: 16px;
	line-height: 16px;
	font-weight: 300;
}

@media all and (max-width: 1199px) {

	.map-bottom-legend {
		justify-content: flex-start;
	}

	.map-bottom-legend div {
		width: 33.3333%;
	}

}

@media all and (max-width: 1023px) {

	.map-bottom-legend div {
		width: 50%;
	}

}



.map-popup-overlay {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
    background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(8px);
	z-index: 998;
}

.map-popup {
	display: none;
	position: fixed;
	left: 50%;
	top: 50%;
	width: calc(100% - 20px);
	max-width: 600px;
	max-height: 80vh;
	transform: translateX(-50%) translateY(-50%);
	overflow: auto;	
	z-index: 999;
}

.map-popup-container {
	padding: 30px 30px 10px;
	background: #fff;
}

.map-popup-close {
	position: absolute;
	right: 4px;
	top: 7px;
	background: url(../images/close-icon.png) no-repeat 0 0;
    width: 48px;
    height: 48px;
	cursor: pointer;
	background-size: 44px;
  z-index: 100;
}

.map-popup-image-wrapper {
	position: relative;
	margin: 0 0 30px;
}

.map-popup-image-wrapper img {
   width: 100%;
}

.map-popup-info {
	margin: 0 0 20px;
	padding: 0 10px 0 30px;
	border-left: 2px solid #b29a79;
}

.map-popup-name {
	margin: 0 0 10px;
	
	font-size: 26px;
	line-height: 30px;
	font-weight: 700;
	
}

.map-popup-info-list {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 10px;
	max-width: 480px;
	list-style-type: none;
	padding: 0;
}

.map-popup-info-list li {
	width: 50%;
	font-size: 17px;
	line-height: 27px;
	font-weight: 400;
	
}

.map-popup-button {
	display: inline-block;
	padding: 0 16px 0 0;
	font-size: 19px;
	line-height: 24px;
	font-weight: 400;
	color: #414141;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none !important;
	background: url('../images/right-arrow-gray.png') no-repeat right center;
	background-size: auto 16px;
}

.map-popup-button:hover {
	color: #b29a79;
	background-image: url('../images/right-arrow-gold.png');
}

@media all and (max-width: 767px) {

	.map-popup-info {
		padding: 0 10px 0 20px;
		border-left: 2px solid #b29a79;
	}

	.map-popup-name {
		margin: 0 0 10px;
		
		font-size: 22px;
		line-height: 26px;
		font-weight: 700;
		
	}

	.map-popup-info-list {
		margin: 0 0 8px;
	}

	.map-popup-info-list li {
		width: 50%;
		font-size: 16px;
		line-height: 26px;
		font-weight: 400;
		
	}

	.map-popup-button {
		display: inline-block;
		padding: 0 16px 0 0;
		font-size: 16px;
		line-height: 22px;

	}

}

@media all and (max-width: 479px) {

	.map-popup {
		padding: 20px 20px 5px;
	}

	.map-popup-close {
		width: 42px;
		height: 42px;
		background-size: 35px auto;
		top: 29px;
		right: 26px;
		z-index: 1000;
	}

}

@media all and (max-width: 419px) {

	.map-popup-image-wrapper {
		margin: 0 0 20px;
	}

	.map-popup-info {
		padding: 0 10px 0 10px;
	}

	.map-popup-name {
		margin: 0 0 8px;
		font-size: 20px;
		line-height: 24px;
	}

	.map-popup-info-list {
		margin: 0;
	}

	.map-popup-info-list li {
		width: 100%;
		font-size: 16px;
		line-height: 26px;
	}

	.map-popup-button {
		padding: 0 14px 0 0;
		font-size: 14px;
		line-height: 20px;
		background-size: auto 14px;
	}

}
@media all and (max-width: 1000px){
	.landing-banner.maps-banner{
		background: none;
	}
	.sub-page .landing-banner-conent:before{
		background: none;
	}
	.content-wrapper {
		margin-bottom: 0;
	}
	.landing-banner.maps-banner .landing-banner-conent{
		background-size: 400px;
	}
	.landing-banner-full {
		padding-bottom: 0;
	}
	.map-bottom-legend div{
		font-size: 10px;
		font-weight: 600;
		line-height: 11px; 
		letter-spacing: 0.3px;
		display: flex;
		flex-direction: column;
		justify-content: center;

	  }
	  .map-bottom-legend div span{
		font-size: 9px; 
		line-height: 9px;
          letter-spacing: 0.27px; 
	  }
	  .map-bottom-legend div::before{
		width: 17px;
      height: 18px; 
	  bottom: 50%;
	  top: 50%;
      transform: translateY(-50%);
	  }
	  .map-bottom-legend{
		padding: 10px 13px;
	  }
	  .map-bottom-legend div{
		padding-left: 24px;
		padding-right: 7px;
	  }
       .noSel .noSel{
		width: 20px !important;
		height: 20px !important;
	   }
	   #_zinorm,#_zonorm,#_mrnorm,#_mlnorm,#_munorm,#_mdnorm,#_rsnorm{
		width: 20px !important;
		height: 20px !important;
	   }
	  #_zi_icon,#_zo_icon,#_mr_icon,#_ml_icon,#_mu_icon,#_md_icon,#_rs_icon {
		width: 20px !important;
		height: 20px !important;
	   }
	   .noSel.controlsBg{
	    width: 129px !important;
       height: 86px !important;

	   }
	   #_zi_icon{
		background-position: -15px -15px !important;
	   }
	   #_zo_icon{
		background-position: -65px -15px !important;

	   }
	   #_mr_icon{
		background-position: -115px -15px !important;
	   }
	   #_ml_icon{
		background-position: -165px -15px !important;
	   }
	   #_mu_icon{
		background-position: -215px -15px !important;
	   }
	   #_md_icon{
		background-position: -265px -15px !important;
	   }
	   #_rs_icon{
		background-position: -315px -15px !important;
	   }
	   #_mrnorm,#_mlnorm,#_munorm,#_mdnorm,#_rsnorm,#_mr_icon,#_ml_icon,#_mu_icon,#_md_icon,#_rs_icon{
		left: -15px !important;
	   }
	   #_zinorm,#_zi_icon,#_ziover{
		top: 2px !important;
		left: 2px !important;
	   }
	   #_zonorm,#_zo_icon,#_zoover{
		top: -7px !important;
		left: 2px !important;
	   }
	   #_mrnorm,#_mr_icon,#_mrover{
		left: -12px !important;
		top: -3px !important;
	   }
	   #_mlnorm,#_ml_icon,#_mlover{
		left: -22px !important;
		top: -3px !important;
	   }
	   #_munorm,#_mu_icon,#_muover{
		top: -9px !important;
		left: -17px !important;
	   }
	   #_mdnorm,#_md_icon,#_mdover{
		top: 3px !important;
		left: -17px !important;
	   }
	   #_rsnorm,#_rs_icon,#_rsover{
		left: -17px !important;
		top: -3px !important;
	   }
	   #_ziover,#_zoover,#_mrover,#_mlover,#_muover,#_mdover,#_rsover{
		width: 21px !important;
		height: 21px !important;
	   }
}