.b-longread-77591-map {
    position: relative;
    max-width: 100%;
    width: 1980px;
    color: #fff;
    background: #1d2139;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
}

@media (max-width: 640px) {
    .b-longread-77591-map {
        font-size: 4px;
    }
}

.b-longread-77591-map:before {
    content: '';
    display: block;
    width: 100%;
    padding: calc(900 / 1980 * 100%) 0 0;
}

.b-longread-77591-map--1 {
    background-image: url(https://static.sobaka.ru/uploads/longread/77591/map-1.jpg);
}

.b-longread-77591-map--2 {
    background-image: url(https://static.sobaka.ru/uploads/longread/77591/map-2.jpg);
}

.b-longread-77591-map--3 {
    background-image: url(https://static.sobaka.ru/uploads/longread/77591/map-3.jpg);
}

.b-longread-77591-map__point {
    position: absolute;
    width: 0;
    height: 0;
    background: #ff0000;
}

.b-longread-77591-map__point:hover {
    z-index: 1;
}

/* map 1 */
.b-longread-77591-map--1 .b-longread-77591-map__point--1 {
    top: calc(163 / 900 * 100%);
    left: calc(1291 / 1980 * 100%);
}

.b-longread-77591-map--1 .b-longread-77591-map__point--2 {
    top: calc(220 / 900 * 100%);
    left: calc(1146 / 1980 * 100%);
}

.b-longread-77591-map--1 .b-longread-77591-map__point--3 {
    top: calc(346 / 900 * 100%);
    left: calc(1172 / 1980 * 100%);
}

.b-longread-77591-map--1 .b-longread-77591-map__point--4 {
    top: calc(502 / 900 * 100%);
    left: calc(834 / 1980 * 100%);
}

.b-longread-77591-map--1 .b-longread-77591-map__point--5 {
    top: calc(514 / 900 * 100%);
    left: calc(568 / 1980 * 100%);
}

.b-longread-77591-map--1 .b-longread-77591-map__point--6 {
    top: calc(754 / 900 * 100%);
    left: calc(1141 / 1980 * 100%);
}

.b-longread-77591-map--1 .b-longread-77591-map__point--7 {
    top: calc(866 / 900 * 100%);
    left: calc(1094 / 1980 * 100%);
}

/* map 2 */
.b-longread-77591-map--2 .b-longread-77591-map__point--1 {
    top: calc(418 / 900 * 100%);
    left: calc(1461 / 1980 * 100%);
}

.b-longread-77591-map--2 .b-longread-77591-map__point--2 {
    top: calc(488 / 900 * 100%);
    left: calc(1051 / 1980 * 100%);
}

.b-longread-77591-map--2 .b-longread-77591-map__point--3 {
    top: calc(671 / 900 * 100%);
    left: calc(796 / 1980 * 100%);
}

.b-longread-77591-map--2 .b-longread-77591-map__point--4 {
    top: calc(593 / 900 * 100%);
    left: calc(541 / 1980 * 100%);
}

.b-longread-77591-map--2 .b-longread-77591-map__point--5 {
    top: calc(345 / 900 * 100%);
    left: calc(668 / 1980 * 100%);
}

.b-longread-77591-map--2 .b-longread-77591-map__point--6 {
    top: calc(240 / 900 * 100%);
    left: calc(971 / 1980 * 100%);
}

.b-longread-77591-map--2 .b-longread-77591-map__point--7 {
    top: calc(264 / 900 * 100%);
    left: calc(1081 / 1980 * 100%);
}

/* map 3 */
.b-longread-77591-map--3 .b-longread-77591-map__point--1 {
    top: calc(295 / 900 * 100%);
    left: calc(1403 / 1980 * 100%);
}

.b-longread-77591-map--3 .b-longread-77591-map__point--2 {
    top: calc(438 / 900 * 100%);
    left: calc(1239 / 1980 * 100%);
}

.b-longread-77591-map--3 .b-longread-77591-map__point--3 {
    top: calc(442 / 900 * 100%);
    left: calc(993 / 1980 * 100%);
}

.b-longread-77591-map--3 .b-longread-77591-map__point--4 {
    top: calc(567 / 900 * 100%);
    left: calc(1019 / 1980 * 100%);
}

.b-longread-77591-map--3 .b-longread-77591-map__point--5 {
    top: calc(616 / 900 * 100%);
    left: calc(839 / 1980 * 100%);
}

.b-longread-77591-map--3 .b-longread-77591-map__point--6 {
    top: calc(721 / 900 * 100%);
    left: calc(667 / 1980 * 100%);
}

.b-longread-77591-map__point-pin {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 11.6em;
    height: 14em;
    background: url('https://static.sobaka.ru/uploads/longread/77591/pin.png') 50% 50% no-repeat;
    background-size: cover;
    transform: translate(-50%, 0);
}

.b-longread-77591-map__point-pin-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-clip-path: url(#pin-clip-mask);
    clip-path: url(#pin-clip-mask);
}

.b-longread-77591-map__point-pin-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-clip-path: url(#pin-clip-mask);
    clip-path: url(#pin-clip-mask);
}

.b-longread-77591-map__point-pin-num {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0 0 0.6em;
    font: normal 400 7.6em/1 'metaboldcregular', sans-serif;
    color: #37a2e1;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transform: translate(0, 100%);
    transition: all 0.5s;
    -webkit-clip-path: url(#pin-clip-mask);
    clip-path: url(#pin-clip-mask);
}

.b-longread-77591-map__point:hover .b-longread-77591-map__point-pin-num {
    opacity: 1;
    transform: translate(0, 0);
}

.b-longread-77591-map__point-popup {
    display: flex;
    align-items: center;
    position: absolute;
    top: -14em;
    right: -5.8em;
    z-index: 100;
    width: 25em;
    min-height: 11.5em;
    color: #a3d4f1;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transform: translate(100%, 0);
    transition: all 0.5s;
}

.b-longread-77591-map__point-popup--long {
    width: 33em;
}

.b-longread-77591-map__point-popup[x-placement] {
    top: auto;
    right: auto;
}

.b-longread-77591-map__point:hover .b-longread-77591-map__point-popup {
    opacity: 1;
    pointer-events: auto;
    transform: translate(100%, 0);
}

.b-longread-77591-map__point-popup-content {
    padding: 1.6em 1.6em 1.6em 2.8em;
    transform: translate(0, -100%);
    transition: all 0.5s;
}

.b-longread-77591-map__point:hover .b-longread-77591-map__point-popup-content {
    transform: translate(0, 0);
}

.b-longread-77591-map__point-popup-title {
    font: normal 400 1.4em/1.5 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
}

.b-longread-77591-map__point-popup-subtitle {
    font: italic 400 1.2em/1 'Roboto Condensed', sans-serif;
}

.b-longread-77591-map__point-popup-address {
    margin: 0.3571428571428571em 0 0;
    font: normal 400 1.4em/1.5 'Roboto Condensed', sans-serif;
}