@charset "UTF-8";
/* CSS Document */
html,body{
	font-family: "Helvetica Neue", "Source Sans Pro", Arial, sans-serif;
	/*font-family: "Inter", "Helvetica Neue", Arial, sans-serif; */
	font-size:.9em; 
	line-height: 1.2; 
	font-weight: 300; 
	letter-spacing: .055em;
	}
html{overflow-x:hidden}
h1{font-size:30px}
h2{font-size:22px}
h3{font-size:18px}
h4{font-size:16px; text-align:left}
h5{font-size:14px}
h6{font-size:13px}
p{font-size:13px; line-height:1.5; display:block; margin-block-start: 1em;
    margin-block-end: 1em;margin-inline-start: 0px;
    margin-inline-end: 0px;}

.scroll-anchor { /*for links to other areas of the page to scroll content below the menu bar */
			scroll-margin-top: 2.75em;
		}

/* Style that effect the location of the menu on the map pages */
		.header { /*edited so that the menu bar will resize with the contain-page-resize div */
		  position: fixed;  /* keeps the menu (header) on the lease land page, doesn't scroll off */
		  top: 0;
		  left: 0;
		  right: 0;
		  max-width: 1200px;  /* your desired content width */
		  margin: 0 auto;
		  /*z-index: 9999;    different but present - commented out, 1000 in menu css*/
		  /*background-color: white;   different but present - commented out, #FFF in menu css*/
		  /*box-shadow: 0 2px 5px rgba(0,0,0,0.1);   different but present - commented out*/
		}

		.container-page-resize {
			
		  /*padding-top: 60px;  adjust to match your fixed header height */
		}
	
		.container, .container-lg, .container-md, .container-sm, .container-xl {
			max-width: 1200px;
		}

		.mort-option li {
			font-family: "Open Sans", sans-serif !important;
			line-height: 1.2;
		}

		.w3-sidebar {
			top: 60px; 
    		height: calc(100vh - 60px); /* subtracts top space from full viewport height */
		}

 	/* Hiding the map image so it will be found by google search */
        .hidden-img {
            display: none; /* or use position: absolute; left: -9999px; */
        }
		.lease-calculator-button {
		  width: 30% !important;
		  display: block;
		  margin: 0 auto;
		  height: auto;
		  padding-bottom: 1em;
		}
		/* Space above main text to clear the menu. Default for small screens (820px and under) */
		.left-sidebar-grid {
			min-height: 0vh;
		}

		/* For viewports wider than 820px */
		@media screen and (min-width: 821px) {
			.left-sidebar-grid {
				min-height: 10vh;
			}
		}

		.w3-sidebar {
				top: 60px;
				height: calc(100vh - 60px); /* subtracts top space from full viewport height */
			}


/*style for the main map */
	.w3-row-padding img {margin-bottom: 12px}
	.bgimg {
	  background-position: center;
	  background-repeat: no-repeat;
	  background-size: 100%;
	  background-image: url('https://www.markgps.com/palm-springs-lease-land-map.jpg');
	  min-height: 100%;
	}
div#indent {
  padding: 2.5em;
}	

#element-with-light-background-image {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 2.5em;
    background-image: var(--custom-background-image);
}

#element-with-dark-background-image {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 2.5em;
    background-image: var(--custom-background-image);
	color: white;
}

 
/* this make allows the map to have links via the SVG areas */
	#svg-container {
			position: fixed;
			background-repeat: no-repeat;
			/*top: 0;*/
			left: 0;
			width: 100%;
			height: 100%;
			padding-top: 50px; /*moves the linkable area down to match the number locations*/
		  }

      #svg-container svg {
        width: 100%;
        height: 100%;
      }

      /*this give the link blocks color for editing when opacity is set to 1.0 rather than 0.5 for the SVG elements*/ 
      #svg-container rect {
        fill: hsla(0, 100%, 50%, 0.5);
      }

/* styling the size of the map */
	.svg-mapdisplay {
	  display: block;
	  width: 70%;
	  margin: auto;
	}

/*CSS for popup video*/
#headerPopup{
  width:75%;
  margin:0 auto;
}

#headerPopup iframe{
  width:100%;
  margin:0 auto;
}

@media only screen and (max-width: 768px) {
.svg-mapdisplay {
  width: 100% !important;
}
	.boundry img {
		width: 90%;
	}
}


html {
  scroll-behavior: smooth;
}
	
/* Hide the back-to-top links (return to map) by default */
.back-to-top {
  display: none;
  bottom: 5%;
  right: 5%;
  z-index: 9999;
}

/* Show the back-to-top links on small screens with a single column layout */
@media only screen and (max-width: 767px) {
  /* Hide the back-to-top links if the layout is two columns or has a sidebar */
  body:not(.w3-twothird) .back-to-top {
    display: block;
  }
	h1{font-size:32px}
	h2{font-size:24px}
	h3{font-size:20px}
	h4{font-size:18px}
	h5{font-size:16px}
	h6{font-size:15px}
	p{font-size:16px; line-height:1.5;}
	}

	
@media only screen and (max-width: 1280px) {
  .back-to-top {
    display: block;
  }
	h1{font-size:32px}
	h2{font-size:24px}
	h3{font-size:20px}
	h4{font-size:18px}
	h5{font-size:16px}
	h6{font-size:15px}
	p{font-size:16px; line-height:1.5;}
	}
	
/* Default image size for desktop */
	.section img {
	  width: 60%;
	}

	.page-disclaimer {
	  text-align: center;
	  padding-top: 3.5em;
	  font-family: sans-serif;
	  font-size: 0.5em;
	  font-style: italic;
	  color: gray;
	  width: 70%;
	}

/* Adjust left margin of map at this size so it is not at the left margin of viewport */
	@media only screen and (min-width: 993px) {
	
	.w3-sidebar {
		position: fixed;
		top: 50px !important;             /* override the earlier top: 60px */
		right: 50%;
		width: 500px !important;
		height: 572px !important;      /* override earlier height calc */
		overflow: hidden;
		z-index: 1;
	  }
	#svg-container {
		position: absolute;
		width: 500px !important;
		right: 50%;
		top: -50px !important;
	}
	#svg-container svg {
		width: 500px !important;
		height: auto;
    	display: block;
    }
	.svg-mapdisplay {
	  	width: 600px !important;
	  	display: block;
	}

}



/* Adjust left margin of map on full screen map so it's not at the left margin of viewport */
	@media only screen and (min-width: 1346px) {
	
	.w3-sidebar {
		position: fixed;
		top: 55px !important;             /* override the earlier top: 60px */
		right: 50%;
		width: 600px !important;
		height: 687px !important;      /* override earlier height calc */
		overflow: hidden;
		z-index: 1;
	  }
	#svg-container {
		position: absolute;
		width: 600px !important;
		right: 50%;
		top: -20px !important;
	}
	#svg-container svg {
		width: 600px !important;
		height: auto;
    	display: block;
    }
	.svg-mapdisplay {
	  	width: 600px !important;
	  	display: block;
	}

}

/* Adjust left margin of map on full screen map so it's not at the left margin of viewport */
	@media only screen and (width: 1180px) {
	
	.w3-sidebar {
		position: fixed;
		top: 55px !important;             /* override the earlier top: 60px */
		right: 50%;
		width: 600px !important;
		height: 687px !important;      /* override earlier height calc */
		overflow: hidden;
		z-index: 1;
	  }
	#svg-container {
		position: absolute;
		width: 600px !important;
		right: 50%;
		top: -20px !important;
	}
	#svg-container svg {
		width: 600px !important;
		height: auto;
    	display: block;
    }
	.svg-mapdisplay {
	  	width: 600px !important;
	  	display: block;
	}

}



/* Adjusting the links to the map numbers laptop */
	@media only screen and (min-width: 1500px) {
	#svg-container {
		top: -30px !important;
	}
	.w3-sidebar {
		top: 45px !important;
	}
}

/* Adjust image size for mobile devices */
	@media only screen and (max-width: 768px) {
	  .section img {
		width: 100%;
	  }
	p{font-size:18px; line-height:1.5; text-align: left;}
	.w3-justify {
		text-align: left;
		}

	}

	@media only screen and (max-width: 1640px) and (orientation: portrait) {
	  p {
		font-size: 18px;
	  }
	}

	@media only screen and (max-width: 500px) {
	p{font-size:16px; line-height:1.5; text-align: left;}
	h2{font-size:24px; font-weight: 700; text-align: left;}
	h3{font-size:20px; font-weight: 700; text-align: left;}
	div#indent {
	  padding: 0em;
	}
		}


	@media (max-width: 600px) {
	  .w3-sidebar {
		/* Change the width to 60% for mobile devices */
		width: 80%!important;
	  }
	}

ol.alpha-circle-leaseland {
   list-style: none;
   counter-reset: item;
 }

 ol.alpha-circle-leaseland > li{
   counter-increment: item;
   margin-bottom: 5px;
   display: flex; /* Add this line */
  align-items: flex-start; /* Add this line */
  text-align: left;
 }

ol.alpha-circle-leaseland > li:before {
   margin-right: 10px;
   margin-top: -0.25em;
   content: counter(item, lower-alpha);
   background: #5CCAE8;
   border-radius: 50%;
   color: white;
   width: 1.7em;
   height: 1.7em;
   box-sizing: border-box;
   padding-bottom: 0.17em;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
 }

.lease-area-map {
   max-width: 60%;
   height: auto;
   display: block;
}

@media only screen and (max-width: 700px) {
   .lease-area-map {
      max-width: 100%;
   }
	.lease-calculator-button {
	  width: 60% !important;
	}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  /* CSS rules for iPad Air in portrait mode */
  p{font-size:14px;}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  /* CSS rules for iPad Air in landscape mode */
  p{font-size:14px;}
}