/* ------------- HotSpot ----------------- */
.map-popup.open p, .map-popup.open li, .map-popup.open div { font-size: 14px; text-align: left; }
.map h3, .map h4, .map h5, .map-popup.open h4 { font-size: 18px; }
.map { position: relative;
max-width: 95%;}
.map-item a.marker h3, .map-item a.marker h4 {
  font-size: 13px;
padding: 0;
margin: 0;
color: #fff;
line-height: 22px;
text-transform: none;
font-weight: normal;
}
div h3.maph {
position: absolute;
z-index: 1;
font-size: 14px;
line-height: .85;
top: -20px;
}
.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: 35px; color: #fff; line-height: 26px; text-align: center; text-decoration: none; border-radius: 8px; background-color: #c42828; transition: all 300ms; transform: translate3d(0, 0, 0); font-weight: bold; box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); cursor: pointer; animation: pulse-2 1.5s infinite cubic-bezier(0.66, 0, 0, 1); border: 3px solid #fff; }
.marker:hover { background-color: red; color: #fff; }
.marker1, .marker11 { top: 5%; left: 88%; }
.marker2, .marker12 { top: 18%; left: 88%; }
.marker3, .marker13 { top: 31%; left: 88%; }
.marker4, .marker14 { top: 44%; left: 88%; }
.marker5, .marker15 { top: 57%; left: 88%; }
.marker6, .marker16 { top: 70%; left: 88%; }
.marker7 { top: 83%; left: 88%; }
.marker-11 { left: 80%; top: 15%; }
.marker-12 { left: 80%; top: 25%; }
.marker-13 { left: 80%; top: 35%; }
.marker-14 { left: 80%; top: 45%; }

@media only screen and (min-width:48em) {
	.oblh .marker:hover {
  opacity: 0;
}
.marker { 
height: 26px;
line-height: 22px;
font-size: 16px;
border: 2px solid #fff;
background-color: #c7333f;}
.map-item { position: absolute; width: 30px; height: 30px; }
.map-item .marker { top: auto; left: auto; }
.map-item1, .map-item11 { top: 5%; left: 88%; }
.map-item2, .map-item12 { top: 18%; left: 88%; }
.map-item3, .map-item13 { top: 31%; left: 88%; }
.map-item4, .map-item14 { top: 44%; left: 88%; }
.map-item5, .map-item15 { top: 57%; left: 88%; }
.map-item6, .map-item16 { top: 70%; left: 88%; }
.map-item7 { top: 83%; left: 88%; }
.map-item-11 { top: 33%; left: 58%; }
.map-item-12 { top: 50%; left: 40%; }
.map-item-13 { top: 57%; left: 75%; }
.map-item-14 { top: 65%; left: 55%; }
}
.map-popup { position: absolute; left: 33px; 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-gap3 { width: 15%; top: 30%; left: 0%; position: absolute; transition: all 800ms; opacity: 1; }
.map-gap img.hand { filter: none; }
div .map-gap3 { min-width: 33%; opacity: 1; }
.map-item:hover ~ .map-gap3 { min-width: 20%; }
.map-item:hover ~ .map-gap { opacity: 1; }

.map-item.map-item1:hover ~ .map-gap { top: 38%; left: 14%; }
.map-item.map-item2:hover ~ .map-gap { top: 25%; left: 22%; }
.map-item.map-item3:hover ~ .map-gap { top: 58%; left: 20%; }
.map-item.map-item4:hover ~ .map-gap { top: 56%; left: 33%; }
.map-item.map-item5:hover ~ .map-gap { top: 82%; left: 13%; }
.map-item.map-item6:hover ~ .map-gap { top: 72%; left: 40%; }
.map-item.map-item7:hover ~ .map-gap { top: 38%; left: 45%; }
/* rayony */
.map-item.map-item-11:hover ~ .map-gap3 { top: 35%; left: 44%; }
.map-item.map-item-12:hover ~ .map-gap3 { top: 38%; left: 28%; }
.map-item.map-item-13:hover ~ .map-gap3 { top: 46%; left: 60%; transform: scaleX(-1); }
.map-item.map-item-14:hover ~ .map-gap3 { top: 65%; left: 42%; transform: scaleX(-1); }
 /* области */
/* Маркеры областей */
.marker-yarosl { top: 15%; left: 0%; }
.marker-vladimirs { top: 35%; left: 0%; }
.marker-ivanovs { top: 25%; left: 0%; }
.marker-ryazans { top: 45%; left: 0%; }
.marker-tvers { top: 85%; left: 0%; }
.marker-smolens { top: 75%; left: 0%; }
.marker-kalzs { top: 65%; left: 0%; }
.marker-tulsk { top: 55%; left: 0%; }
/* ================ REGIONS ================ */
.map-item-yarosl { top: 18%; right: 27%; }
.map-item-vladimirs { top: 47%; right: 10%; }
.map-item-ivanovs { top: 33%; right: 5%; }
.map-item-ryazans { top: 75.5%; right: 12%; }
.map-item-tvers { top: 29%; right: 58%; }
.map-item-smolens { top: 66%; right: 73.5%; }
.map-item-kalzs { top: 76%; right: 57%; }
.map-item-tulsk { top: 81.5%; right: 37.5%; }
/* области */
/* Общие стили для скрытых изображений областей */
.map img.obl { display: none; transition: all 0.5s; position: absolute; }
/* Позиции и размеры для областей при наведении на маркеры */

.map-item.map-item-11:hover  ~ img.obl.moskow { top: 33%;
right: 22%;
width: 44%; display: block; }
.map-item.map-item-12:hover  ~ img.obl.moskow { top: 33%;
right: 22%;
width: 44%; display: block; }
.map-item.map-item-13:hover  ~ img.obl.moskow { top: 33%;
right: 22%;
width: 44%; display: block; }
.map-item.map-item-14:hover  ~ img.obl.moskow { top: 33%;
right: 22%;
width: 44%; display: block; }
.map-item.map-item-yarosl:hover ~ .map-gap3 { top: 6%; left: 57%; }
.map-item.map-item-yarosl:hover ~ img.obl.yarosl { top: 0%; right: 15.8%; width: 33%; display: block; }
.map-item.map-item-vladimirs:hover ~ .map-gap3 { top: 35%; left: 70%; }
.map-item.map-item-vladimirs:hover ~ img.obl.vladimirs { top: 37%; right: 2%; width: 38%; display: block; }
.map-item.map-item-ivanovs:hover ~ .map-gap3 { top: 21%; left: 74%; }
.map-item.map-item-ivanovs:hover ~ img.obl.ivanovs { top: 21%; right: 0%; width: 33%; display: block; }
.map-item.map-item-ryazans:hover ~ .map-gap3 { top: 62%; left: 70%; }
.map-item.map-item-ryazans:hover ~ img.obl.ryazans { top: 60%; right: 4.5%; width: 33%; display: block; }
.map-item.map-item-tvers:hover ~ .map-gap3 { top: 16%; left: 24%; transform: none; }
.map-item.map-item-tvers:hover ~ img.obl.tvers { top: 1%; left: 1%; width: 60.5%; display: block; }
.map-item.map-item-smolens:hover ~ .map-gap3 { top: 52%; left: 6%; transform: none; }
.map-item.map-item-smolens:hover ~ img.obl.smolens { top: 49.5%; left: 0%; width: 38%; display: block; }
.map-item.map-item-kalzs:hover ~ .map-gap3 { top: 63%; left: 24%; transform: none; }
.map-item.map-item-kalzs:hover ~ img.obl.kalzs { top: 61%; left: 21%; width: 31%; display: block; }
.map-item.map-item-tulsk:hover ~ .map-gap3 { top: 68%; left: 44%; transform: none; }
.map-item.map-item-tulsk:hover ~ img.obl.tulsk { top: 69%; left: 41%; width: 26%; display: block; }
/* Фильтр для руки */
.hand.filter-shadow { filter: drop-shadow(0 8px 10px rgba(116, 115, 115, 0.5)); }
.map-mo .marker { width: max-content; right: 4px; padding: 0px 8px; }
.footer-rayony .go-bal:hover ~ .map-gap3 { top: 60%; left: 35%; opacity: 0.8; }
.map-popup.open p { color: #222; }
.map-mo-block { width: 90%; margin: 0 auto; max-width: 800px; }
.map-mo img { filter: none; }
img.filter-shadow  { filter: drop-shadow(0 8px 10px rgba(116, 115, 115, 0.5)); }
@media only screen and (max-width:48em) {
.marker {
  line-height: 20px;
  height: 20px;
  border: none;
}
.map-item a.marker h3, .map-item a.marker h4 {
  line-height: 20px;
  font-size: 13px;
  font-weight: normal;
  text-transform: none;
}
 .map-popup::before {border: none;}
 .map-popup {
  position: absolute;
  left: 16%;
  width: 66%;
}
 }