.city-map {
	position: relative;
	background: -moz-linear-gradient(top, rgba(222,224,220,1) 55%,rgba(222,224,220,0.4) 80%,rgba(222,224,220,0) 100%);
	background: -webkit-linear-gradient(top, rgba(222,224,220,1) 55%,rgba(222,224,220,0.4) 80%,rgba(222,224,220,0) 100%);
	background: linear-gradient(to bottom, rgba(222,224,220,1) 55%,rgba(222,224,220,0.4) 80%,rgba(222,224,220,0) 100%);
	width: 100%;
	margin: 0;
	padding: 0 0 30px 0;
}

.city-map.layout-town {
	background: -moz-linear-gradient(top, rgba(222,224,220,0) 0%, rgba(222,224,220,1) 13%, rgba(222,224,220,1) 40%, rgba(222,224,220,0.4) 80%, rgba(222,224,220,0) 100%);
	background: -webkit-linear-gradient(top, rgba(222,224,220,0) 0%, rgba(222,224,220,1) 13%, rgba(222,224,220,1) 40%, rgba(222,224,220,0.4) 80%,rgba(222,224,220,0) 100%);
	background: linear-gradient(to bottom, rgba(222,224,220,0) 0%, rgba(222,224,220,1) 13%, rgba(222,224,220,1) 40%, rgba(222,224,220,0.4) 80%,rgba(222,224,220,0) 100%);
}

@media (min-width: 64.063em) {
	.city-map {
		display: grid;
		background: -moz-linear-gradient(top, rgba(222,224,220,1) 0%,rgba(222,224,220,0.4) 70%,rgba(222,224,220,0) 100%);
		background: -webkit-linear-gradient(top, rgba(222,224,220,1) 0%,rgba(222,224,220,0.4) 70%,rgba(222,224,220,0) 100%);
		background: linear-gradient(to bottom, rgba(222,224,220,1) 0%,rgba(222,224,220,0.4) 70%,rgba(222,224,220,0) 100%);
	}

	.city-map.layout-town {
		background: -moz-linear-gradient(top, rgba(222,224,220,0) 0%, rgba(222,224,220,1) 13%, rgba(222,224,220,0.4) 75%, rgba(222,224,220,0) 100%);
		background: -webkit-linear-gradient(top, rgba(222,224,220,0) 0%, rgba(222,224,220,1) 13%, rgba(222,224,220,0.4) 75%,rgba(222,224,220,0) 100%);
		background: linear-gradient(to bottom, rgba(222,224,220,0) 0%, rgba(222,224,220,1) 13%, rgba(222,224,220,0.4) 75%,rgba(222,224,220,0) 100%);
	}

	.city-map.layout-town {
		grid-template-columns: 30% 70%;
	}
}

@media (min-width: 64.063em) and (max-width: 81em) {
	.city-map.layout-full {
		grid-template-columns: 32% 68%;
	}
}

@media (min-width: 81.063em) {
	.city-map.layout-full {
		grid-template-columns: 9% 28% 49% 14%;
	}

	.city-map .title-cont {
		padding: 100px 30px 0 10px;
	}
}

@media (max-width: 81em) {
	.city-map .title-cont,
	.city-map .anim-cont {
		display: none;
	}
}

.city-map.layout-town .anim-cont {
	display: none;
}

.city-map .content-cont {
	padding: 20px 15px;
}

.city-map .content-cont h2 {
	margin-bottom: 18px;
	line-height: 1.2;
}

.city-map .content-cont p {
	margin-bottom: 10px;
	line-height: 1.3;
}

.city-map .menu-cont {
	position: relative;
	margin: 20px 0 0 0;
	display: grid;
	grid-template-columns: 0 auto;
}

@media (min-width: 64.063em) {
	.city-map.layout-town .content-cont {
		padding: 20px 5px;
	}

	.city-map .menu-cont {
		margin-top: 30px;
		grid-template-columns: 26px 250px;
		column-gap: 5px;
	}

	.city-map.layout-town .menu-cont {
		margin-top: 0;
		grid-template-columns: 22px calc(100% - 22px);
		column-gap: 0;
	}
}

.city-map .menu-north {
	padding: 39px 0 0;
}


.city-map .map-cont {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding-top: calc(1 / (1100 / 1250) * 100%);
}

.city-map .map-cont .map-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media (min-width: 64.063em) {
	.city-map.layout-town .map-cont .map-grad {
		position: absolute;
		top: 0;
		left: 15%;
		width: 45%;
		height: 4%;
		background: -moz-linear-gradient(top, rgba(255,255,255,1) 20%, rgba(255,255,255,0) 100%);
		background: -webkit-linear-gradient(top, rgba(255,255,255,1) 20%,rgba(255,255,255,0) 100%);
		background: linear-gradient(to bottom, rgba(255,255,255,1) 20%,rgba(255,255,255,0) 100%);
	}
}

@media (max-width: 64em) {
	.city-map .map-cont .map-grad {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 7%;
		background: -moz-linear-gradient(top, rgba(222,224,220,1) 20%, rgba(222,224,220,0) 100%);
		background: -webkit-linear-gradient(top, rgba(222,224,220,1) 20%,rgba(222,224,220,0) 100%);
		background: linear-gradient(to bottom, rgba(222,224,220,1) 20%,rgba(222,224,220,0) 100%);
	}
}

.city-map .svg-map .extras {
	display: none;
}
.city-map.layout-full .svg-map .extras {
	display: inherit;
}

@media (max-width: 48em) {
	.city-map.layout-full .svg-map .NV-airports {
		display: none;
	}
}

@keyframes anim-M {
  0% { transform: translateY(0) translateX(0); }
  40% { transform: translateY(-50px) translateX(-30px); }
  75% { transform: translateY(60px) translateX(40px); }
  100% { transform: translateY(0) translateX(0); }
}
.city-map.layout-full .svg-balloons .anim_balloon_M {
  animation: anim-M 45s infinite linear;
}

@keyframes anim-S {
  0% { transform: translateY(0) translateX(0); }
  30% { transform: translateY(5px) translateX(40px); }
  80% { transform: translateY(-10px) translateX(-50px); }
  100% { transform: translateY(0) translateX(0); }
}
.city-map.layout-full .svg-balloons .anim_balloon_S {
  animation: anim-S 30s infinite linear;
}

@keyframes anim-L {
  0% { transform: translateY(0) translateX(0); }
  30% { transform: translateY(90px) translateX(20px); }
  90% { transform: translateY(-100px) translateX(-10px); }
  100% { transform: translateY(0) translateX(0); }
}
.city-map.layout-full .svg-balloons .anim_balloon_L {
  animation: anim-L 60s infinite linear;
}


.city-map .menu-title {
	color: var(--Ash);
	font-family: 'Playfair Display';
	font-size: 15px;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 4px;
	text-transform: uppercase;
	padding: 10px 0 6px 0;
}

@media (max-width: 64em) {
	.city-map .menu-buttons {
		display: grid;
		grid-template-columns: 48% 48%;
		column-gap: 15px;
	}
}

[class*="button-town"], [class*="button-region"] {
	display: block;
	background: #fff;
	color: var(--Ash);
	text-align: left;
	width: 100%;
	margin: 0 0 7px 0;
	box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}
[class*="button-town"]:visited, [class*="button-region"]:visited {
	color: var(--Ash);
}
[class*="button-town"] {
	font-family: 'Playfair Display';
	font-size: 16px;
	font-weight: 400;
	font-style: normal;
	text-transform: unset;
	padding: 6px 15px 10px;
}
.layout-town [class*="button-town"] {
	font-size: 14px;
	padding: 4px 13px 8px;
	text-wrap: nowrap;
}
[class*="button-town"]:hover, .button-town:focus { color: #fff; }
.button-town-cal:hover, .button-town-cal:focus { background: var(--Town-Calistoga); }
.button-town-sth:hover, .button-town-sth:focus { background: var(--Town-StHelena); }
.button-town-you:hover, .button-town-you:focus { background: var(--Town-Yountville); }
.button-town-nap:hover, .button-town-nap:focus { background: var(--Town-Napa); }
.button-town-amc:hover, .button-town-amc:focus { background: var(--Town-AmCan); }

.city-map.town-cal .button-town-cal { color: #fff; background: var(--Town-Calistoga); }
.city-map.town-sth .button-town-sth { color: #fff; background: var(--Town-StHelena); }
.city-map.town-you .button-town-you { color: #fff; background: var(--Town-Yountville); }
.city-map.town-nap .button-town-nap { color: #fff; background: var(--Town-Napa); }
.city-map.town-amc .button-town-amc { color: #fff; background: var(--Town-AmCan); }

[class*="button-region"] {
	font-family: 'GT Pressura Bold';
	font-size: 14px;
	font-weight: 700;
	font-style: normal;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 7px 15px;
	text-wrap: nowrap;
}
.layout-town [class*="button-region"] {
	font-size: 11px;
	padding: 5px 13px;
}
[class*="button-region"]:hover, [class*="button-region"]:focus { color: #fff; background: var(--Cabernet); }

.city-map.region-ang .button-region-ang { color: #fff; background: var(--Cabernet); }
.city-map.region-lak .button-region-lak { color: #fff; background: var(--Cabernet); }
.city-map.region-rut .button-region-rut { color: #fff; background: var(--Cabernet); }
.city-map.region-oak .button-region-oak { color: #fff; background: var(--Cabernet); }