/* Mt. Vernon Map */

:root {
	--black:#000000;
	--orange: #f47920;
	--red: #a21d2f;
	--white: #ffffff;
}

body {
	overflow-x:hidden;
}
body, p {
	font-family: "zeitung", sans-serif;
	font-weight: 400;
	font-style: normal;	
	font-size:1vw;
}
h3 {
	font-family: zeitung, sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size:1.5vw;
	color:var(--red);
	margin-top:0;
	margin-bottom:15px;
}
.button {
	display:inline-block;
	padding:5px 15px;
	border:2px solid var(--black);
	border-radius:20px;
	cursor: pointer;
	text-decoration:none;
	color:var(--black);
}
.button:hover {
	background-color:var(--orange);
	color:var(--white);
}

#mapSection {
	width:100%;
}
#theMap {
	position:relative;
	width:100%;
	height:auto;
	aspect-ratio:1.5;
	background-image:url(images/map-bg.gif);
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center center;
	margin:0;
}




/* MAP BUTTONS */

.icon {
	position:absolute;
	transition: .2s ease all;
	transform-origin: center center;
}
.icon:hover {
	transform:scale(1.1);
}
.icon > img {
	display:block;
	width:100%;
	height:100%;
}
#blackberry {
	transform-origin: center bottom;
	aspect-ratio:1.35;
	width:8%;
	left:46%;
	top:88%;
}
#cedarhurst {
	transform-origin: left bottom;
	aspect-ratio:1.85;
	width:14%;
	left:48%;
	top:13%;
}
#chickenranch {
	aspect-ratio:1.14;
	width:8%;
	left:64%;
	top:4%;
}
#commons {
	transform-origin: left center;
	aspect-ratio:2.34;
	width:18%;
	left:69%;
	top:40%;
}
#courthouse {
	transform-origin: center bottom;
	aspect-ratio:.75;
	width:9%;
	left:59%;
	top:27%;
}
#familyfarm {
	aspect-ratio:1.08;
	width:7%;
	left:40.5%;
	top:87.5%;
}
#granada {
	transform-origin: center bottom;
	aspect-ratio:.855;
	width:9%;
	left:67%;
	top:26%;
}
#greenhills {
	aspect-ratio:1.64;
	width:9%;
	left:90.5%;
	top:5%;
}
#hallofhonor {
	aspect-ratio:1.63;
	width:9%;
	left:90.5%;
	top:13.5%;
}
#historicalvillage {
	transform-origin: right center;
	aspect-ratio:2.67;
	width:15%;
	left:29.5%;
	top:13.5%;
}
#hospitality {
	aspect-ratio:1.66;
	width:8%;
	left:18%;
	top:40.5%;
}
#indianhills {
	aspect-ratio:1.5;
	width:10%;
	left:35%;
	top:5.5%;
}
#library {
	transform-origin: left bottom;
	aspect-ratio:2.02;
	width:13%;
	left:73%;
	top:35%;
}
#lincolnpark {
	transform-origin: right center;
	aspect-ratio:2.10;
	width:15%;
	left:20%;
	top:87%;
}
#marlows {
	aspect-ratio:1.72;
	width:9%;
	left:90.5%;
	top:22%;
}
#shopping {
	transform-origin: right top;
	aspect-ratio:2.89;
	width:17%;
	left:49.5%;
	top:45.5%;
}
#veteranspark {
	transform-origin: left center;
	aspect-ratio:1.60;
	width:12%;
	left:47%;
	top:58%;
}
#waterpark {
	aspect-ratio:1.35;
	width:9%;
	left:35%;
	top:78%;
}




/* MAP POPUPS */

.popup {
	display:none;
	position:absolute;
	background-color:var(--white);
	border:2px solid var(--orange);
	border-radius:10px;
	padding:20px;
	align-items: center;
	gap:20px;
	width:50%;
	height:25%;
	left:25%;
	top:37.5%;
}
/*.popup.ul {
	left:10%;
	top:10%;
}
.popup.ur {
	right:10%;
	top:10%;
}
.popup.lr {
	right:10%;
	bottom:10%;
}
.popup.ll {
	left:10%;
	bottom:10%;
}*/
.popup.open {
	display:flex;
}
.popup > .close {
	position:absolute;
	top:5px;
	right:10px;
	cursor: pointer;
}
.popup > img {
	flex:1;
	max-width:50%;
	max-height:100%;
	aspect-ratio:4/3;
	object-fit:cover;
	object-position: center center;
}
.popup > .col {
	flex:1;
}