/* ------------- HotSpot ----------------- */
.map-popup.open p, .map-popup.open li, .map-popup.open div {
    font-size: 14px;
	text-align: left;
}
.map-popup.open h4 {
    font-size: 18px;
}
.map {
 position: relative;
 max-width: 1100px;
 margin: auto;
}
.map img {
 height: auto;
 max-width: 100%;
 display: block;
 width: 100%;
}
.map-popup h3 {
 text-transform: uppercase;
}
.map-popup {
 position: absolute;
 left: 50%;
 top: 50%;
 z-index: 99;
 width: 70%;
 padding: 15px;
 background-color: #fff;
 transition: all 300ms ease-in;
 transform: translate(-50%,-50%);
 box-shadow: 0 0 24px rgba(0,0,0,0.22);
 opacity: 0;
 visibility: hidden;
}
.map-popup > *:first-child {
 margin-top: 0;
}
.map-popup > *:last-child {
 margin-bottom: 0;
}
.map-popup.open {
 opacity: 1;
 visibility: visible;
 border-radius: 10px;
}
.marker {
 position: absolute;
 z-index: 1;
 display: inline-block;
 width: 35px;
 height: 25px;
color: #fef8f894;
 line-height: 20px;
 text-align: center;
 text-decoration: none;
 border-radius: 8px;
 border: 2px solid #ffffffad;
background-color: #d12ba075;
 transition: all 300ms;
 -moz-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0);
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
 font-weight: bold;
 box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
 cursor: pointer;
 -webkit-animation: pulse-2 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
 -moz-animation: pulse-2 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
 animation: pulse-2 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
}
.marker:hover {
 background-color: #ff008f;
color: #fff;
}
.marker1 {
 top: 2%;
 left: 90%;
}
.marker2 {
 top: 13%;
 left: 90%;
}
.marker3 {
 top: 24%;
 left: 90%;
}
.marker4 {
 top: 35%;
 left: 90%;
}
.marker5 {
 top: 46%;
 left: 90%;
}
.marker6 {
 top: 57%;
 left: 90%;
}
.marker7 {
 top: 68%;
 left: 90%;
}
.marker8 {
 top: 79%;
 left: 90%;
}
.marker9 {
 top: 90%;
 left: 90%;
}
@media only screen and (min-width:48em) {

.marker {
width: 40px;
height: 30px;
line-height: 25px;
font-size: 18px;
border-radius: 8px;
border: 3px solid #ffffff94;
 }
 .map-item {
  position: absolute;
  width: 40px;
  height: 40px;
 }
 .map-item .marker {
  top: auto;
  left: auto;
 }
 .map-item1 {
 top: 2%;
 left: 90%;
 }
 .map-item2 {
 top: 13%;
 left: 90%;
 }
 .map-item3 {
 top: 24%;
 left: 90%;
 }
 .map-item4 {
  top: 35%;
 left: 90%;
 }
 .map-item5 {
 top: 46%;
 left: 90%;
 }
 .map-item6 {
 top: 57%;
 left: 90%;
 }
 .map-item7 {
 top: 68%;
 left: 90%;
 }
 .map-item8 {
 top: 79%;
 left: 90%;
 }
  .map-item9 {
 top: 90%;
 left: 90%;
 }
 .map-popup {
  position: absolute;
  left: 58px;
  width: 280px;
  transform: translateY(-50%);
 }
 .map-popup:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -16px;
  margin-top: -16px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 16px 16px 16px 0;
  border-color: transparent #fff transparent transparent;
 }
 .map-popup.edge {
  left: auto;
  right: calc(100% + 24px);
 }
 .map-popup.edge:before {
  left: auto;
  right: -16px;
  border-width: 16px 0 16px 16px;
  border-color: transparent transparent transparent #fff;
 }
}
@-webkit-keyframes pulse-2 {
 to {
  box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
 }
}
@keyframes pulse-2 {
 to {
  box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
 }
}
/* ------------- End HotSpot ----------------- */
.map-gap, .map-gap2 {
  width: 13%;
  top: 0%;
  left: 0%;
  position: absolute;
  transition: all 800ms;
  opacity: 1;
}
.map-item:hover  ~ .map-gap {
  opacity: 1;
}
.map-item.map-item1:hover  ~ .map-gap {
top: 80%;
left: 51%;
}
.map-item.map-item2:hover  ~ .map-gap {
top: 86%;
left: 10%;
}
.map-item.map-item3:hover  ~ .map-gap {
top: 50%;
left: 10%;
transform: scaleX(-1);
}
.map-item.map-item4:hover  ~ .map-gap {
top: 44%;
left: 4%;
}
.map-item.map-item5:hover  ~ .map-gap {
top: 75%;
left: 22%;
}
.map-item.map-item6:hover  ~ .map-gap {
top: 66%;
left: 51%;
}
.map-item.map-item7:hover  ~ .map-gap {
top: 75%;
left: 60%;
}
.map-item.map-item8:hover  ~ .map-gap {
top: 86%;
left: 66%;
}
.map-item.map-item9:hover  ~ .map-gap {
top: 50%;
left: 10%;
transform: scaleX(-1);
}
.map-item.map-item9:hover  ~ .map-gap2 {
top: 37%;
left: 56%;
opacity: 1;
}