.map {
    margin-bottom: 120px;
}
.kiev, .kiev-text, .kiev-line, .odessa, .odessa-text, .odessa-line, .dnepr, .dnepr-text, .dnepr-line {
    cursor: pointer;
    transition: all .2s linear;
}

.kiev:hover, .odessa:hover, .dnepr:hover {
    fill: hsla(222, 100%, 25%, 0.7);
}
.kiev:hover ~ .kiev-text,
.odessa:hover ~ .odessa-text,
.dnepr:hover ~ .dnepr-text {
    fill: #6BC116;
}
.kiev:hover ~ .kiev-line,
.odessa:hover ~ .odessa-line,
.dnepr:hover ~ .dnepr-line {
    stroke: #fff;
}

.kiev.active,
.odessa.active,
.dnepr.active {
    fill: #002682;
}
.kiev.active ~ .kiev-text,
.odessa.active ~ .odessa-text,
.dnepr.active ~ .dnepr-text {
    fill: #6BC116;
}
.kiev.active ~ .kiev-line,
.odessa.active ~ .odessa-line,
.dnepr.active ~ .dnepr-line {
    stroke: #fff;
}

.map-title {
    color: #002682;
    border-bottom: 4px solid #6BC116;
    display: inline-block;
    margin-bottom: 60px;
}
.map-info {
    width: 350px;
    padding: 32px;
    background: #fff;
    border: 2px solid #6BC116;
    box-shadow: 2px 2px 20px rgba(0, 46, 115, 0.06);
}
.map-info__item-title {
    margin-bottom: 24px;
    color: #334B86;
}
.map-info__item-text {
    color: #334B86;
}
.map-info__item-text a {
    color: #334B86;
    text-decoration: none;
    display: block;
}
.map-info__item-text:not(:last-child) {
    margin-bottom: 12px;
}
.map__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.map-info__item {
    display: none;
}
.map-info__item.active {
    display: block;
}

@media (max-width: 768px) {
    .map__inner {
        flex-direction: column-reverse;
    }
    .map-map {
        margin-bottom: 40px;
    }
}
@media (max-width: 767px) {
    .map {
        margin-bottom: 100px;
    }
}
@media (max-width: 600px) {
    .map-map svg {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .map-info {
        width: 100%;
    }
    .map-title {
        margin-bottom: 10px;
    }
    .map-map {
        margin-bottom: 0;
    }
}