/* ------------- 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 h3, .map h4, .map h5 {
  font-size: 18px;
}
.map {
 position: relative;
 max-width: 1100px;
 margin: auto;
}
.map img {
 height: auto;
 max-width: 100%;
 display: block;
 width: 100%;
 filter: none;
}
.map .map-popup img {
 float: right;
 margin-left: 10px;
margin-bottom: 10px;
}
.map-popup h3 {
 text-transform: uppercase;
}
.map-popup {
 position: absolute;
 left: 50%;
 top: 50%;
 z-index: 99;
 width: 60%;
 padding: 20px;
 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: #d41111b0;
 line-height: 20px;
 text-align: center;
 text-decoration: none;
 border-radius: 8px;
 background-color: #ffffffc9;
 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);
 border: 3px solid #d0101085;
}
.marker:hover {
 background-color: red;
 color: #fff;
}
.marker1 {
top: 5%;
    left: 88%;
}
.marker2 {
top: 18%;
    left: 88%;
}
.marker3 {
top: 31%;
    left: 88%;
}
.marker4 {
top: 44%;
left: 88%;
}
.marker5 {
top: 57%;
left: 88%;
}
.marker6 {
top: 70%;
left: 88%;
}
.marker7 {
top: 83%;
    left: 88%;
}
.marker11 {
top: 5%;
left: 88%;
}
.marker12 {
top: 18%;
left: 88%;
}
.marker13 {
top: 31%;
left: 88%;
}
.marker14 {
top: 44%;
left: 88%;
}
.marker15 {
top: 57%;
left: 20%;
}
.marker16 {
top: 57%;
left: 88%;
}
@media only screen and (min-width:48em) {

.marker {
width: 35px;
height: 30px;
line-height: 25px;
font-size: 18px;
border: 2px solid #bd1414d9;
border-radius: 8px;
 }
 .map-item {
  position: absolute;
  width: 30px;
  height: 30px;
 }
 .map-item .marker {
  top: auto;
  left: auto;
 }
 .map-item1 {
top: 5%;
    left: 88%;
 }
 .map-item2 {
top: 18%;
    left: 88%;
 }
 .map-item3 {
top: 31%;
    left: 88%;
 }
 .map-item4 {
top: 44%;
    left: 88%;
 }
 .map-item5 {
top: 57%;
    left: 88%;
 }
 .map-item6 {
top: 70%;
    left: 88%;
 }
 .map-item7 {
top: 83%;
    left: 88%;
 }
  .map-item11 {
top: 5%;
left: 88%;
 }
 .map-item12 {
top: 18%;
left: 88%;
 }
 .map-item13 {
top: 31%;
left: 88%;
 }
 .map-item14 {
top: 44%;
left: 88%;
 }
 .map-item15 {
top: 85%;
left: 20%;
 }
 .map-item16 {
top: 57%;
left: 88%;
 }

 .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;
 }
}
/* ------------- End HotSpot ----------------- */
.map-gap, .map-gap2, .map-gap3  {
  width: 13%;
top: 3%;
left: 3%;
  position: absolute;
  transition: all 800ms;
  opacity: 0;
}
.map-gap3 {
  width: 18%;
  opacity: 1;
}
.map-item:hover  ~ .map-gap {
  opacity: 1;
}
.map-item.map-item1:hover  ~ .map-gap {
top: 50%;
left: 50%;
}
.map-item.map-item2:hover  ~ .map-gap {
top: 84%;
left: 26%;
}
.map-item.map-item3:hover  ~ .map-gap {
top: 62%;
left: 11%;
}
.map-item.map-item4:hover  ~ .map-gap {
top: 12%;
left: 55%;
}
.map-item.map-item4:hover  ~ .map-gap2 {
top: 12%;
left: 40%;
  opacity: 0.8;
transform: scaleX(-1);
}
.map-item.map-item5:hover  ~ .map-gap {
top: 28%;
left: 13%;
}
.map-item.map-item5:hover  ~ .map-gap2 {
top: 75%;
left: 40%;
  opacity: 1;
transform: scaleX(-1);
}
.map-item.map-item6:hover  ~ .map-gap {
top: 5%;
left: 30%;
}
.map-item.map-item7:hover  ~ .map-gap {
top: 35%;
left: 29%;
}
.lsb-preview.map-img2 img {
  position: absolute;
  max-width: 20%;
  bottom: 0px;
  left: 10px;
  filter: none;
  border: 6px solid #fff;
}
.footer-rayony .col-inner h4 {
  color: #222;
}
/* rayony */
.map-item:hover  ~ .map-gap3 {
  opacity: 0.8;
}
.map-item.map-item11:hover  ~ .map-gap3 {
top: 12%;
left: 37%;
}
.map-item.map-item12:hover  ~ .map-gap3 {
top: 38%;
left: 12%;
transform: scaleX(-1);
}
.map-item.map-item13:hover  ~ .map-gap3 {
top: 50%;
left: 70%;
}
.map-item.map-item14:hover  ~ .map-gap3 {
top: 70%;
left: 35%;
transform: scaleX(-1);
}
.map-mo .marker {
  width: 65px;
}
.footer-rayony .go-bal:hover  ~ .map-gap3 {
top: 60%;
left: 35%;
  opacity: 0.8;
}
.map-popup.open p {
  color: #222;
}
.map-mo-block {
  width: 80%;
  margin: 0 auto;
  max-width: 800px;
}
.map-mo img {
  filter: none;
}