/* ------------- 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;
 background-color: #ccc;
}
.map img {
 height: auto;
 max-width: 100%;
 display: block;
 width: 100%;
}
.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: 30px;
 height: 30px;
 color: #ffffffb0;
 line-height: 25px;
 text-align: center;
 text-decoration: none;
 border-radius: 50%;
 background-color: #e2191973;
 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 #ffffff85;
}
.marker:hover {
 background-color: red;
}
.marker11 { /* от жилого дома */
top: 16%;
left: 23%;
}
.marker12 {
top: 23%;
left: 23%;
}
.marker13 {
top: 16%;
left: 40%;
}
.marker14 {
top: 28%;
left: 10%;
}
.marker15 {
top: 18%;
left: 56%;
}
.marker16 {
top: 70%;
left: 70%;
}
.marker17 {
top: 90%;
    left: 10%;
}
.marker18 {
top: 70%;
    left: 85%;
}
.marker19 {
top: 55%;
    left: 35%;
}
.marker20 {
top: 46%;
    left: 85%;
}
.marker21 {
top: 50%;
    left: 6%;
}
.marker22 {
top: 30%;
    left: 85%;
}
@media only screen and (min-width:48em) {

.marker {
width: 40px;
height: 40px;
line-height: 37px;
font-size: 20px;
border: 2px solid #ffffff96;
border-radius: 40px;
 }
 .map-item {
  position: absolute;
  width: 30px;
  height: 30px;
 }
 .map-item .marker {
  top: auto;
  left: auto;
 }
 /* full */ 
  .map-item11 {  /* от жилого дома */
top: 16%;
left: 23%;
 }
 .map-item12 {
top: 23%;
left: 23%;
 }
 .map-item13 {
top: 16%;
left: 40%;
 }
 .map-item14 {
top: 28%;
left: 10%;
 }
 .map-item15 {
top: 18%;
left: 56%;
 }
 .map-item16 {
top: 70%;
left: 70%;
 }
 .map-item17 {
top: 90%;
    left: 10%;
 }
 .map-item18 {
top: 70%;
    left: 85%;
 }
 .map-item19 {
top: 55%;
    left: 35%;
 }
 .map-item20 {
top: 46%;
    left: 85%;
 }
 .map-item21 {
top: 50%;
    left: 6%;
 }
  .map-item22 {
top: 30%;
    left: 85%;
 }
 .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 ----------------- */