@media (max-width: 1000px) {
    .main-container {
        display: none;
    }
}

.main-container {
    overflow: hidden;
    height: 505px;
}

.map-container {
    position: relative;
    
    transition: .8s ease;
    transform-origin: 75% 65%;
}

.map {
    height: 448px;
    width:1000px;
    background: url('/images/esumaptrimmed-transparent.png') no-repeat;
}

#expand-esu1 {
    display: none;
}

    #expand-esu1:checked ~ .map-container {
        transform: scale(3.3) translate(-100px,170px);
    }

.esu1 {
    background: rgba(0,0,0,.95);
    width: 45px;
    height: 45px;
    position: absolute;
    top: 68px;
    left: 709px;
    border-radius: 50%;
    display: block;
    color: #ffffff;
    line-height: 45px;
    font-size: 24px;
    cursor: pointer;
}

#expand-esu2:checked ~ .map-container {
    transform: scale(3) translate(-150px,60px);
}

#expand-esu2 {
    display: none;
}
.esu2 {
    background: rgba(0,0,0,.95);
    width: 45px;
    height: 45px;
    position: absolute;
    top: 156px;
    left: 771px;
    border-radius: 50%;
    display: block;
    color: #ffffff;
    line-height: 45px;
    font-size: 24px;
    cursor: pointer;
}


#expand-esu3 {
    display: none;
}

    #expand-esu3:checked ~ .map-container {
        transform: scale(3.2) translate(-240px,30px);
    }
    #expand-esu3:checked ~ .map-container .esu3 {
        background: rgba(0,0,0,.5);
    }

.esu3 {
    background: rgba(0,0,0,.95);
    width: 45px;
    height: 45px;
    position: absolute;
    top: 259px;
    left: 850px;
    border-radius: 50%;
    display: block;
    color: #ffffff;
    line-height: 45px;
    font-size: 24px;
    cursor: pointer;
}

#expand-esu4 {
    display: none;
}

    #expand-esu4:checked ~ .map-container {
        transform: scale(3.5) translate(-180px,-100px);
    }

.esu4 {
    background: rgba(0,0,0,.95);
    width: 45px;
    height: 45px;
    position: absolute;
    top: 370px;
    left: 844px;
    border-radius: 50%;
    display: block;
    color: #ffffff;
    line-height: 45px;
    font-size: 24px;
    cursor: pointer;
}

#expand-esu5 {
    display: none;
}

    #expand-esu5:checked ~ .map-container {
        transform: scale(3.5) translate(-100px,-100px);
    }

.esu5 {
    background: rgba(0,0,0,.95);
    width: 45px;
    height: 45px;
    position: absolute;
    top: 370px;
    left: 711px;
    border-radius: 50%;
    display: block;
    color: #ffffff;
    line-height: 45px;
    font-size: 24px;
    cursor: pointer;
}


#expand-esu6 {
    display: none;
}

    #expand-esu6:checked ~ .map-container {
        transform: scale(3.4) translate(-130px,-50px);
    }

.esu6 {
    background: rgba(0,0,0,.95);
    width: 45px;
    height: 45px;
    position: absolute;
    top: 308px;
    left: 702px;
    border-radius: 50%;
    display: block;
    color: #ffffff;
    line-height: 45px;
    font-size: 24px;
    cursor: pointer;
}


#expand-esu7 {
    display: none;
}

    #expand-esu7:checked ~ .map-container {
        transform: scale(3) translate(-20px,60px);
    }

.esu7 {
    background: rgba(0,0,0,.95);
    width: 45px;
    height: 45px;
    position: absolute;
    top: 212px;
    left: 670px;
    border-radius: 50%;
    display: block;
    color: #ffffff;
    line-height: 45px;
    font-size: 24px;
    cursor: pointer;
}

#expand-esu8 {
    display: none;
}

    #expand-esu8:checked ~ .map-container {
        transform: scale(2.8) translate(0px,170px);
    }

.esu8 {
    background: rgba(0,0,0,.95);
    width: 45px;
    height: 45px;
    position: absolute;
    top: 101px;
    left: 573px;
    border-radius: 50%;
    display: block;
    color: #ffffff;
    line-height: 45px;
    font-size: 24px;
    cursor: pointer;
}

#expand-esu9 {
    display: none;
}

    #expand-esu9:checked ~ .map-container {
        transform: scale(3.2) translate(0px,-90px);
    }

.esu9 {
    background: rgba(0,0,0,.95);
    width: 45px;
    height: 45px;
    position: absolute;
    top: 354px;
    left: 601px;
    border-radius: 50%;
    display: block;
    color: #ffffff;
    line-height: 45px;
    font-size: 24px;
    cursor: pointer;
}

#expand-esu10 {
    display: none;
}

    #expand-esu10:checked ~ .map-container {
        transform: scale(2.6) translate(100px,30px);
    }

.esu10 {
    background: rgba(0,0,0,.95);
    width: 45px;
    height: 45px;
    position: absolute;
    top: 223px;
    left: 482px;
    border-radius: 50%;
    display: block;
    color: #ffffff;
    line-height: 45px;
    font-size: 24px;
    cursor: pointer;
}


#expand-esu11 {
    display: none;
}

    #expand-esu11:checked ~ .map-container {
        transform: scale(3) translate(120px,-110px);
    }

.esu11 {
    background: rgba(0,0,0,.95);
    width: 45px;
    height: 45px;
    position: absolute;
    top: 361px;
    left: 452px;
    border-radius: 50%;
    display: block;
    color: #ffffff;
    line-height: 45px;
    font-size: 24px;
    cursor: pointer;
}

#expand-esu13 {
    display: none;
}

    #expand-esu13:checked ~ .map-container {
        transform: scale(2) translate(450px,120px);
    }

.esu13 {
    background: rgba(0,0,0,.95);
    width: 45px;
    height: 45px;
    position: absolute;
    top: 130px;
    left: 86px;
    border-radius: 50%;
    display: block;
    color: #ffffff;
    line-height: 45px;
    font-size: 24px;
    cursor: pointer;
}


#expand-esu15 {
    display: none;
}

    #expand-esu15:checked ~ .map-container {
        transform: scale(3) translate(270px,-110px);
    }

.esu15 {
    background: rgba(0,0,0,.95);
    width: 45px;
    height: 45px;
    position: absolute;
    top: 361px;
    left: 296px;
    border-radius: 50%;
    display: block;
    color: #ffffff;
    line-height: 45px;
    font-size: 24px;
    cursor: pointer;
}


#expand-esu16 {
    display: none;
}

    #expand-esu16:checked ~ .map-container {
        transform: scale(2.3) translate(250px,50px);
    }

.esu16 {
    background: rgba(0,0,0,.95);
    width: 45px;
    height: 45px;
    position: absolute;
    top: 229px;
    left: 286px;
    border-radius: 50%;
    display: block;
    color: #ffffff;
    line-height: 45px;
    font-size: 24px;
    cursor:pointer;
}

#expand-esu17 {
    display: none;
}

    #expand-esu17:checked ~ .map-container {
        transform: scale(2.7) translate(250px,160px);
    }

.esu17 {
    background: rgba(0,0,0,.95);
    width: 45px;
    height: 45px;
    position: absolute;
    top: 50px;
    left: 370px;
    border-radius: 50%;
    display: block;
    color: #ffffff;
    line-height: 45px;
    font-size: 24px;
    cursor: pointer;
}

#expand-esu18 {
    display: none;
}

    #expand-esu18:checked ~ .map-container {
        transform: scale(3.5) translate(-170px,-50px);
    }

        #expand-esu18:checked ~ .map-container .esu18 {
            background: rgba(0,0,0,.5);
        }

.esu18 {
    background: rgba(0,0,0,.95);
    width: 45px;
    height: 45px;
    position: absolute;
    top: 290px;
    left: 761px;
    border-radius: 50%;
    display: block;
    color: #ffffff;
    line-height: 45px;
    font-size: 24px;
    cursor: pointer;
}

#expand-esu19 {
    display: none;
}

    #expand-esu19:checked ~ .map-container {
        transform: scale(4) translate(-240px,30px);
    }

        #expand-esu19:checked ~ .map-container .esu19 {
            background: rgba(0,0,0,.5);
        }

    .esu19 {
        background: rgba(0,0,0,.95);
        width: 45px;
        height: 45px;
        position: absolute;
        top: 212px;
        left: 853px;
        border-radius: 50%;
        display: block;
        color: #ffffff;
        line-height: 45px;
        font-size: 24px;
        cursor: pointer;
    }

#expand-esucc {
    display: none;
}

    #expand-esucc:checked ~ .map-container {
        transform: scale(4) translate(480px,-80px);
    }

.esucc {
    background: rgba(0,0,0,.95);
    width: 110px;
    height: 45px;
    position: absolute;
    top: 322px;
    left: 80px;
    border-radius: 23px;
    display: block;
    color: #ffffff;
    line-height: 45px;
    font-size: 24px;
    cursor: pointer;
}