/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
.esp-map {
    position: relative;
}
.esp-map svg {
    position: relative;
    width: 100%;
    height: auto;
}
.esp-map svg path.has-tooltip {
    position: relative;
    fill: #D11110;
    transition: fill .3s ease;
}
.esp-map svg path.has-tooltip::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
}
.esp-map svg path.has-tooltip:hover {
    fill: #FD8181;
}
.esp-tooltip {
    position: absolute;
    z-index: 4;
    display: none;
    max-width: 270px;
    width: 100%;
    padding: 30px 35px;
    flex-direction: column;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    line-height: 26px;
    color: #000;
    background: #fff;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    transform: translate(-50%, -17px);
}
.esp-tooltip.active {
    display: flex;
}
.esp-tooltip::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    margin-left: -10px;
    width: 20px;
    height: 20px;
    background: #fff;
    transform: rotate(45deg);
}
.esp-tooltip .title-region {
    font-weight: 600;
    font-size: 18px;
    line-height: 26px;
    color: #333;
}
.esp-tooltip .title-light {
    padding-top: 15px;
    font-weight: 500;
    font-size: 13px;
    line-height: 21px;
    color: #999;
}
.esp-point {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 3;
    display: block;
    width: 30px;
    height: 30px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAyNiAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTIuNjgwNSIgY3k9IjEyLjY4MDMiIHI9IjcuMzk2ODMiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0yMS42NDQ1IDMuNjM4NjRDMTYuNjkwMSAtMS4yMTI2MiA4LjY3MDkzIC0xLjIxMzE0IDMuNzE2IDMuNjM4NjRDLTEuMjM4MjggOC40ODk3MiAtMS4yMzkwNSAxNi4zNDIxIDMuNzE2IDIxLjE5MzlMMTIuMDEwMyAyOS4zMTU1QzEyLjM4MDQgMjkuNjc3OSAxMi45ODAzIDI5LjY3NzkgMTMuMzUwMyAyOS4zMTU1TDIxLjY0NDYgMjEuMTkzOUMyNi41OTg4IDE2LjM0MjggMjYuNTk5NiA4LjQ5MDQ4IDIxLjY0NDUgMy42Mzg2NFpNMTYuNjg3NyAxNi4zNDAyQzE0LjQ3MyAxOC41MDg3IDEwLjg4OCAxOC41MDkyIDguNjcyODkgMTYuMzQwMkM2LjQ1ODE2IDE0LjE3MTYgNi40NTc4IDEwLjY2MTMgOC42NzI4OSA4LjQ5MjM5QzEwLjg4NzQgNi4zMjM4MyAxNC40NzI1IDYuMzIzNDIgMTYuNjg3NiA4LjQ5MjM5QzE4LjkwMjMgMTAuNjYwOSAxOC45MDI3IDE0LjE3MTMgMTYuNjg3NyAxNi4zNDAyWiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transform: translate(-50%, -20%);
    pointer-events: none;
}

@media (max-width: 768px) {
    body.unscroll {
        overflow: hidden;
    }
    body.unscroll::before {
        content: '';
        position: fixed;
        bottom: 0;
        left: 0;
        top: 0;
        right: 0;
        z-index: 10;
        width: 100%;
        height: 100%;
        background: #000000;
        opacity: 0.25;
        transform: none;
    }
    .esp-map {
        overflow-x: auto;
        padding: 0 16px;
        margin: 0 -16px;
    }
    .esp-map svg {
        height: 460px;
        width: auto;
    }
    .esp-tooltip {
        position: fixed;
        top: 50% !important;
        left: 50% !important;
        bottom: unset !important;
        z-index: 11;
        padding: 30px;
        transform: translate(-50%, -50%);
    }
    .esp-tooltip::after {
        content: none;
    }
    .esp-tooltip-close {
        position: absolute;
        top: 15px;
        right: 15px;
        width: 15px;
        height: 15px;
        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNSAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAuNSAxTDcuNSA4TTE0LjUgMTVMNy41IDhNNy41IDhMMTQuNSAxTTcuNSA4TDAuNSAxNSIgc3Ryb2tlPSIjQUNBQ0FDIi8+Cjwvc3ZnPgo=");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }
}

.home-map {
    padding: 100px 0;
}
.home-map__title {
    margin-bottom: -60px;
    text-align: center;
}
h2.home-map__title::after {
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 768px) {
    .home-map {
        padding: 30px 0;
    }
    .home-map__title {
        max-width: 190px;
        margin-bottom: -60px;
        text-align: left;
    }
    h2.home-map__title::after {
        margin-left: 0;
        margin-right: auto;
    }
}
@media (max-width: 600px) {
    .home-map__title {
        max-width: 175px;
    }
}
@media (max-width: 460px) {
    .home-map__title {
        max-width: 160px;
    }
}