.map-container {
    position: inherit;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px;
    box-sizing: border-box;
}
.map-container-wrapper {
    position:relative;
}

.map-container-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(https://www.fogano.sk/user/documents/upload/obrazky/state-label-sk.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: scaleX(1.2);
    z-index: 1;
}

.map-container svg {
    width: 100%;
    height: auto;
    display: block;
}

.map-container g.region-group> :not(.region-outline) {
    opacity: 1;
    transition: opacity 0.4s ease;
}

.map-container g.region-group .label {
    opacity: 1;
    transition: opacity 0.4s ease;
}

@media (max-width: 767px) {
    .map-container g.region-group .label {
        opacity: 0;
    }
}

.map-container .region-group {
    cursor: pointer;
    transition: fill 0.6s cubic-bezier(.4, 0, .2, 1), stroke 0.6s cubic-bezier(.4, 0, .2, 1);
}

.map-container .region-outline {
    fill: #01CCB0;
    stroke: #333;
    stroke-width: 1.25;
    vector-effect: non-scaling-stroke;
    will-change: fill, stroke;
    transition: fill 0.6s cubic-bezier(.4, 0, .2, 1), stroke 0.6s cubic-bezier(.4, 0, .2, 1);
}

.map-container .region-group:hover .region-outline {
    fill: #03b69c;
}

.map-container .map-outline {
    pointer-events: none;
    stroke: #888;
    stroke-width: 1.1;
    vector-effect: non-scaling-stroke;
    fill: none;
}

.map-container.fade-others .region-group:not(.is-active)> :not(.region-outline) {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {

    .map-container .region-group,
    .map-container .region-outline {
        transition-duration: 0.01ms;
        transition-delay: 0s;
    }
}