/**
 * Gel 2021.3
 * VB Interactive Map CSS
 * @version 2021.3.10
 * @created 2021-06-22 by Fritz Green
 * @modified 2022-03-30 by Christina Joly
 */

/*
font-family: Montserrat, Verdana, sans-serif;
font-family: Georgia, Times New Roman, Times, serif; (font weights: thin-300, medium-500)
Brick: #6e2405;
Light Brick: #83270e;
Olive: #737144;
Light Olive: #84824f;
Brown: #855914;
Light Brown: #966a25;
Gold: #c78500;
Medium Gold: #eda81c;
Light Gold: #ffd681;
Lighter Gold: #ffe4ac;
Off Black: #231f20;
Medium Black: #4D4D4D;
Charcoal: #6a6969;
Light Grey: #e0e0e0;
*/

/* Page Layout */
/*header {
	min-height: 13.3vh;
}*/
.short-hdr + .content-o {
	margin-top: 65px;
}
.map-page .content-o {
	overflow: hidden;
}
.map-page .content-i {
	width: 100%;
}
.content-i {
	padding: 0;
}
#lead-trigger {
	bottom: 35%;
}
.admin-menu-container, .manage-btns-o {
	display: none;
}

/* Header */
.im-hdr {
	display: flex;
	width: 100%;
	min-height: 54px;
	max-height: 54px;
	padding: .2em 1% .35em;
	justify-content: space-between;
	align-items: center;
	background: #4D4D4D;
}
.im-hdr h1 {
	flex: 1 0 70%;
	width: 70%;
	margin: 0;
	font-size: 2em;
	color: #e0e0e0;
}
.im-hdr-compass-icon {
	width: 32px;
	max-height: 32px;
}
.view-all-button {
	margin: 0;
	font-size: 1em;
	background: #6a6969;
}

/* Main Map Content */
.im-fill-height {
	min-height: calc(100vh - 119px);
	max-height: calc(100vh - 119px);
}
.im-content {
	display: flex;
	width: 100%;
}

/* Options Bar */
.im-options {
	flex: 0 1 5.5%;
	position: relative;
	max-width: 82px;
	background: #fafafa;
}
.im-btns {
	width: 100%;
	padding: 11px 16px;
	transition: unset;
}
.im-btns svg {
	display: block;
	width: 50px;
	max-height: 50px;
	min-height: 50px;
	stroke: none;
	transition: unset;
}

.things-to-do-btn svg {
	fill: #6e2405;
}
.shopping-btn svg {
	fill: #737144;
}
.food-drink-btn svg {
	fill: #c78500;
}
.places-to-stay-btn svg {
	fill: #855914;
}
.weddings-btn svg {
	fill: #325862;
}
.meetings-btn svg {
	fill: #4D4D4D;
}
.im-btns:hover svg, .im-btn-hlt svg {
	fill: #fafafa;
}

.things-to-do-btn:hover, .things-to-do-btn.im-btn-hlt {
	background: #6e2405;
}
.shopping-btn:hover, .shopping-btn.im-btn-hlt {
	background: #737144;
}
.food-drink-btn:hover, .food-drink-btn.im-btn-hlt {
	background: #c78500;
}
.places-to-stay-btn:hover, .places-to-stay-btn.im-btn-hlt {
	background: #855914;
}
.weddings-btn:hover, .weddings-btn.im-btn-hlt {
	background: #325862;
}
.meetings-btn:hover, .meetings-btn.im-btn-hlt {
	background: #4D4D4D;
}

/* Options Slide-out Bars */
.im-bars {
	position: absolute;
	top: 0;
	left: 82px;
	overflow: hidden;
	transition: max-width 0.5s ease-in-out;
	z-index: 1;
}
.im-bar-content {
	min-width: 256px;
	max-width: 256px;
}
.im-bar-closed {
	max-width: 0;
}
.im-bar-open {
	max-width: 256px;
}

.im-bars h2 {
	margin: 1em 1.3em;
	font-weight: 700;
	font-size: 1.25em;
	text-transform: unset;
	color: #F8F8F8;
}
.im-bars ul {
	width: 100%;
	max-height: calc(100vh - 188px);
	padding: 1em;
	margin: 0;
	border-top: 1px solid #F8F8F8;
	overflow-y: auto;
	overflow-x: hidden;
}
.im-bars li {
	list-style: none;
}
.im-bars label {
	font-size: 1em;
	color: #F8F8F8;
}

/* Options Bar Close Button */
.im-bar-close {
	position: absolute;
	top: 14px;
	left: 338px;
	width: 28px;
	padding-top: 40px;
	background: #4D4D4D;
	opacity: .7;
	border-radius: 0 5px 5px 0;
	overflow: hidden;
	transition: left 0.5s ease-in-out, max-width 0.5s ease-in-out;
	z-index: 1;
}
.im-bar-close:after {
	content: "";
	position: absolute;
	top: .7rem;
	left: .45rem;
	width: 1.15rem;
	height: 1.15rem;
	border-bottom: .4rem solid #000;
	border-right: .4rem solid #000;
	transform: rotate(135deg) skew(-5deg,-5deg);
}
.im-close-hidden {
	left: 82px;
	max-width: 0;
}
.im-close-visible {
	left: 338px;
	max-width: 28px;
}

.things-to-do-bar {
	background: #6e2405;
}
.shopping-bar {
	background: #737144;
}
.food-drink-bar {
	background: #c78500;
}
.places-to-stay-bar {
	background: #855914;
}
.weddings-bar {
	background: #325862;
}
.meetings-bar {
	background: #4D4D4D;
}

/* Map Canvas */
.im-canvas {
	flex: 1 0 94.5%;
	background: url(../images/fake-map-img.png) center center no-repeat;
	background-size: cover;
}

/* Info Windows */
.gm-style-iw-d > div {
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .1rem;
	color: #ffffff;
	font-size: 12px;
	font-family: Lato,sans-serif;
}

.gm-style-iw > button {
	display: none !important;
}

.gm-style .gm-style-iw-c {
	top: 13px !important;
	padding: 0 !important;
	box-shadow: none !important;
	background-color: transparent;
}

.gm-style .gm-style-iw-c .gm-style-iw-d {
	padding: 12px;
	background-color: transparent;
	overflow: unset !important;
	border-radius: 5px;
}

.gm-style .gm-style-iw-t::after {
	content: unset !important;
}

.gm-style .gm-style-iw-d .multiple {
	padding: 12px;
	background: #231f20;
	border: 1px solid #231f20;
	border-radius: 8px;
}
.gm-style .gm-style-iw-d .multiple::after {
	content: "";
	position: absolute;
	top: 80%;
	left: 50%;
	margin-left: -10px;
	border-width: 10px;
	border-style: solid;
	border-color: #231f20 transparent transparent transparent;
}

.gm-style .gm-style-iw-d .things-to-do {
	padding: 12px;
	background: #6e2405;
	border: 1px solid #6e2405;
	border-radius: 8px;
}
.gm-style .gm-style-iw-d .things-to-do::after {
	content: "";
	position: absolute;
	top: 80%;
	left: 50%;
	margin-left: -10px;
	border-width: 10px;
	border-style: solid;
	border-color: #6e2405 transparent transparent transparent;
}

.gm-style .gm-style-iw-d .shopping {
	padding: 12px;
	background: #737144;
	border: 1px solid #737144;
	border-radius: 8px;
}
.gm-style .gm-style-iw-d .shopping::after {
	content: "";
	position: absolute;
	top: 80%;
	left: 50%;
	margin-left: -10px;
	border-width: 10px;
	border-style: solid;
	border-color: #737144 transparent transparent transparent;
}

.gm-style .gm-style-iw-d .food-drink {
	padding: 12px;
	background: #c78500;
	border: 1px solid #c78500;
	border-radius: 8px;
}
.gm-style .gm-style-iw-d .food-drink::after {
	content: "";
	position: absolute;
	top: 80%;
	left: 50%;
	margin-left: -10px;
	border-width: 10px;
	border-style: solid;
	border-color: #c78500 transparent transparent transparent;
}

.gm-style .gm-style-iw-d .places-to-stay {
	padding: 12px;
	background: #855914;
	border: 1px solid #855914;
	border-radius: 8px;
}
.gm-style .gm-style-iw-d .places-to-stay::after {
	content: "";
	position: absolute;
	top: 80%;
	left: 50%;
	margin-left: -10px;
	border-width: 10px;
	border-style: solid;
	border-color: #855914 transparent transparent transparent;
}

.gm-style .gm-style-iw-d .meetings {
	padding: 12px;
	background: #4D4D4D;
	border: 1px solid #4D4D4D;
	border-radius: 8px;
}
.gm-style .gm-style-iw-d .meetings::after {
	content: "";
	position: absolute;
	top: 80%;
	left: 50%;
	margin-left: -10px;
	border-width: 10px;
	border-style: solid;
	border-color: #4D4D4D transparent transparent transparent;
}

.gm-style .gm-style-iw-d .weddings {
	padding: 12px;
	background: #325862;
	border: 1px solid #325862;
	border-radius: 8px;
}
.gm-style .gm-style-iw-d .weddings::after {
	content: "";
	position: absolute;
	top: 80%;
	left: 50%;
	margin-left: -10px;
	border-width: 10px;
	border-style: solid;
	border-color: #325862 transparent transparent transparent;
}

/* Media Queries */
@media screen and (max-width: 1250px) {
	/* Header */
	.im-hdr {
		min-height: 46px;
		max-height: 46px;
	}
	.im-hdr h1 {
		font-size: 1.6em;
	}
	.im-hdr-compass-icon {
		width: 26px;
		max-height: 26px;
	}
	.view-all-button {
		margin: 0;
		font-size: 1em;
	}

	/* Map Main Content */
	.im-fill-height {
		min-height: calc(100vh - 111px);
		max-height: calc(100vh - 111px);
	}

	/* Options Bar */
	.im-btns {
		padding: 11px 12px;
	}
	.im-btns svg {
		width: 40px;
		max-height: 40px;
		min-height: 40px;
	}

	/* Options Slide-out Bars */
	.im-bars {
		left: 64px;
	}
	.im-bars ul {
		max-height: calc(100vh - 180px);
	}
	.im-bar-close {
		left: 320px;
	}
	.im-close-hidden {
		left: 64px;
		max-width: 0;
	}
	.im-close-visible {
		left: 320px;
	}
}
@media screen and (max-width: 1024px) {
	/* Page Layout */
	.vb-header-logo-simple {
		margin: .4em 0 0 .2rem;
	}
	.short-hdr .dropdown {
		margin: 0;
		top: 65px;
	}
	#lead-trigger {
		bottom: 20%;
	}
}
@media screen and (max-width: 768px) {
	.view-all-button {
		font-size: .9em;
	}
}
@media screen and (max-width: 600px) {
	/* Layout */
	.im-content {
		flex-wrap: wrap;
	}

	/* Header */
	.im-hdr {
		min-height: 36px;
		max-height: 36px;
	}
	.im-hdr h1 {
		font-size: 1.1em;
	}
	.im-hdr-compass-icon {
		width: 18px;
		max-height: 18px;
	}
	.view-all-button {
		flex: 0 1 20%;
		font-size: .75em;
	}

	/* Map Main Content */
	.im-fill-height {
		min-height: 100vh;
		max-height: 100vh;
	}

	/* Options Bar */
	.im-options {
		display: flex;
		flex: 0 0 100%;
		max-width: 100%;
		justify-content: space-evenly;
	}
	.im-options.im-fill-height {
		min-height: 56px;
		max-height: 56px;
	}
	.im-btns {
		padding: 9px 0;
	}
	.im-btns svg {
		width: 100%;
		max-height: 36px;
		min-height: 36px;
	}
	.im-btns.meetings-btn svg {
		max-height: 32px;
		min-height: 32px;
	}

	/* Options Slide-out Bars */
	.im-bars {
		left: 0;
		top: 56px;
	}
	.im-bars ul {
		max-height: calc(100vh - 63px);
	}
	.im-bar-close {
		left: 256px;
		top: 85px;
	}
	.im-close-hidden {
		left: 0;
		max-width: 0;
	}
	.im-close-visible {
		left: 256px;
	}

	/* Map Canvas */
	.im-canvas {
		flex: 0 0 100%;
	}
}
@media screen and (max-width: 360px) {
	.view-all-button {
		flex: 0 1 25%;
		font-size: .7em;
	}

	/* Options Bar */
	.im-btns {
		padding: 11px 0;
	}
	.im-btns svg {
		min-height: 32px;
		max-height: 32px;
	}
	.im-btns.meetings-btn svg {
		max-height: 28px;
		min-height: 28px;
	}
}