* {
	--imageHeight:280px;
	--hsSize:50px;
}


.hsStyle {
	position: absolute;
	width: var(--hsSize);
	height: var(--hsSize);
	margin-left: calc(var(--hsSize) / 2 * -1);
	margin-top: calc(var(--hsSize) / 2 * -1);
	cursor: pointer;
}

.hsStyle:hover .hsBgImage {
	transform-origin: center;
	transform: scale(1.2);
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-o-transform: scale(1.2);
}

.hsBaloon {
	font-family: 'Futura', Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.9rem;
	position: absolute;
	cursor: default;
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.4);
	width: 350px;
	transform: translate(calc(-50% + var(--hsSize) / 2), calc(-100% + 0px)) scale(0.0);
	-webkit-transform: translate(calc(-50% + var(--hsSize) / 2), calc(-100% + 0px)) scale(0.0);
	-moz-transform: translate(calc(-50% + var(--hsSize) / 2), calc(-100% + 0px)) scale(0.0);
	-ms-transform: translate(calc(-50% + var(--hsSize) / 2), calc(-100% + 0px)) scale(0.0);
	-o-transform: translate(calc(-50% + var(--hsSize) / 2), calc(-100% + 0px)) scale(0.0);
	top: -10px;
	left: 0px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	text-align: center;
	opacity: 0.0;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transform-origin: bottom;
}

/* .hsStyle:hover .hsBaloon { */
.hsBaloonOpen {
	opacity: 1;
	transform: translate(calc(-50% + var(--hsSize) / 2), calc(-100% + 0px)) scale(1);
	-webkit-transform: translate(calc(-50% + var(--hsSize) / 2), calc(-100% + 0px)) scale(1);
	-moz-transform: translate(calc(-50% + var(--hsSize) / 2), calc(-100% + 0px)) scale(1);
	-ms-transform: translate(calc(-50% + var(--hsSize) / 2), calc(-100% + 0px)) scale(1);
	-o-transform: translate(calc(-50% + var(--hsSize) / 2), calc(-100% + 0px)) scale(1);
}
.hsBaloonCloseButton{
	width:30px;
	height:30px;
	position: absolute;
	top:10px;
	right:7px;
	background-color: rgba(0, 0, 0, 0.8);
	opacity: 0.8;
	cursor:pointer;
	z-index: 1;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
}
.hsBaloonCloseButton>svg {
	pointer-events: none;
	opacity: 0.6;
}
.hsBaloonCloseButton:hover{
	opacity: 1;
	transform: scale(120%);
	-webkit-transform: scale(120%);
	-moz-transform: scale(120%);
	-ms-transform: scale(120%);
	-o-transform: scale(120%);
}

.hsBgImage {
	width: 100%;
	height: 100%;
	position: absolute;
	background-image: url("hs_icon.png");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	top: 0;
	left: 0;
	transform-origin: center;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
}

.hsNameLocationDate {
	position: absolute;
	top:1px;
	left:1px;
	max-height: var(--imageHeight);
	overflow: hidden;
	padding:1rem;
	background: linear-gradient(170deg, rgba(4, 4, 49, 0.9) 0%, rgba(0, 0, 0, 0) 50%);
	border-radius: 5px;
	width: 100%;
	height:100%;
	box-sizing: border-box;
}

.hsName, .hsLocation, .hsDate {
	text-align: left;
	padding: 0rem;
	font-size: 1rem;
	color: #fff;
	text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.8);
	line-height: 1.4rem;
}
.hsDate{
	margin-bottom:0.5rem;
}
.hsName {
	font-weight: bold;
	font-size: 1.5rem;
}

.hsButton {
	background-color: var(--yellowColor);
	position: absolute;
	color: var(--blueColor);
	font-size: 1rem;
	/* padding: 1rem 0rem; */
	cursor: pointer;
	font-weight: normal;
	border-radius: 35px;
	-webkit-border-radius: 35px;
	-moz-border-radius: 35px;
	-ms-border-radius: 35px;
	-o-border-radius: 35px;
	white-space: nowrap;
	/* display: block; */
	bottom: 1rem;
	margin: 0 auto;
	padding:0;
	width:160px;
	left:calc(50% - 80px);
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hsButton:hover {
	background-color: var(--blueColor);
	color: var(--yellowColor);
	transition: color 0.3s ease, background-color 0.3s ease;
	-webkit-transition: color 0.3s ease, background-color 0.3s ease;
	-moz-transition: color 0.3s ease, background-color 0.3s ease;
	-ms-transition: color 0.3s ease, background-color 0.3s ease;
	-o-transition: color 0.3s ease, background-color 0.3s ease;
}

.hsInfoButton{
	width:50px;
	height:50px;
	background-repeat: no-repeat;
	background-position: center;
	background-color: var(--blueColor);
	position: absolute;
	bottom:1rem;
	right:1rem;
	cursor:pointer;
	border-radius: 25px;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	-ms-border-radius: 25px;
	-o-border-radius: 25px;
	transition: color 0.3s ease, background-color 0.3s ease;
	-webkit-transition: color 0.3s ease, background-color 0.3s ease;
	-moz-transition: color 0.3s ease, background-color 0.3s ease;
	-ms-transition: color 0.3s ease, background-color 0.3s ease;
	-o-transition: color 0.3s ease, background-color 0.3s ease;
}
.hsInfoButton:hover{
	background-color: var(--yellowColor);
}
.hsInfoButton svg{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	pointer-events: none;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
}
.hsInfoButtonSkywayIcon{
	background-image: var(--skywayIconYellow);
	background-size: 70%;
}
.hsInfoButtonSkywayIcon:hover{
	background-image: var(--skywayIconBlue);
}
.hsInfoButton:hover svg {
	transform: translate(-50%, -50%) scale(120%);
	-webkit-transform: translate(-50%, -50%) scale(120%);
	-moz-transform: translate(-50%, -50%) scale(120%);
	-ms-transform: translate(-50%, -50%) scale(120%);
	-o-transform: translate(-50%, -50%) scale(120%);
}
.hsInfoButton:hover svg path{
	fill: var(--blueColor);
}
.hsDescription {
	text-align: left;
	padding: 1rem;
	color: var(--blueColor);
}

.hsImage {
	width: 100%;
	height: var(--imageHeight);
	border-radius: 5px;
	border:solid 1px #fff;
	background-color: gray;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
}









/* Hide "View from SkyWay" cross-link (map marker popup icon) */
.hsInfoButtonSkywayIcon {
	display: none !important;
}