#map-box {
    width: 100%;
    margin: 40px auto 0;
    overflow: hidden;
    position: relative;
}

#map-box svg {
    height: 980px;
}

/* Size N */
@media only screen and (min-width: 769px) and (max-width: 992px) {
    #map-box svg {
        height: 780px;
    }
}

/* Size S */
@media only screen and (min-width: 576px) and (max-width: 768px) {
    #map-box svg {
        height: 680px;
    }
}

/* Size XS */
@media only screen and (min-width: 0px) and (max-width: 575px) {
    #map-box svg {
        max-height: 400px;
    }
}


#map-box svg .area {
    fill: #e6e9ed;
    cursor: pointer;
}

#map-box svg .available .area {
    fill: #99afc2;
    transition: .5s;
}

#map-box svg .available:hover .area {
    fill: #213b63;
}

#map-box svg .available.active .area {
    fill: #213b63;
}

#map-box svg .available .location .pin {
    opacity: 1;
    fill: #7e98ad;
    cursor: pointer;
    transition: .5s;
}

#map-box svg .available:hover .location .pin,
#map-box svg .available.active .location .pin {
    opacity: 1;
    fill: #4c7597;
}

#map-box svg .available.active .location:hover .pin,
#map-box svg .available.active .location.active .pin {
    fill: #fff;
    stroke: #4c7597;
    stroke-miterlimit: 10;
    stroke-width: 2px;
}

#map-box svg .available .location .text {
    display: none;
    opacity: 0;
    transition: .5s;
}

#map-box svg .available.active .location:hover .text,
#map-box svg .available.active .location.active .text {
    display: inline;
    opacity: 1;
}

#map-box svg .available.active .location:hover .text .bubble,
#map-box svg .available.active .location.active .text .bubble {
    fill: #213b63;
    stroke: #fff;
    stroke-miterlimit: 10;
    stroke-width: 2px;
}

#map-box svg .available.active .location:hover .text .word,
#map-box svg .available.active .location.active .text .word {
    fill: #fff;
}

#map-box .infobox {
    position: absolute;
    top: 10%;
    left: 10%;
    display: none;
    width: 350px;
}

/* Size XS */
@media only screen and (min-width: 0px) and (max-width: 575px) {
    #map-box .infobox {
        top: 2%;
        left: 2%;
        width: 300px;
        max-height: 150px;
        overflow-x: scroll;
        border: 1px solid var(--color-blue-light);
        border-radius: 4px;
    }
}

#map-box .infobox.active {
    display: inline;
}

#map-box .infobox.active .info {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.25);
    padding: 20px;
    opacity: 0;
    animation-name: fadein;
    animation-duration: .25s;
    animation-delay: .25s;
    animation-fill-mode: forwards;
}


@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#map-box .infobox.active .info .headline {
    font-size: 26px;
    font-weight: 700;
    text-align: left;
}

#map-box .infobox.active .info .copy {
    font-size: 15px;
    margin: 10px auto 20px;
    text-align: left;
}