.map {
    position: relative;
    display: inline-block;

}

.box {
    position: absolute;
    width: 8%;
    height: 8%;
    max-width: 20px;
    max-height: 20px;
    background: no-repeat top center;
    background-size: contain;
}

.pin-blue {
    opacity: 0.8;
    background-image: url('../img/dots/dot-blue.png');
}

.pin-green {
    opacity: 0.8;
    background-image: url('../img/dots/dot-green.png');
}

.pin-orange {
    opacity: 0.8;
    background-image: url('../img/dots/dot-orange.png');
}

#pin-blue-1 {
    top: 43%;
    left: 19%;
}

#pin-blue-2 {
    top: 51%;
    left: 24%;
}

#pin-blue-3 {
    top: 57%;
    left: 34%;
}

#pin-blue-4 {
    top: 22%;
    left: 44%;
}

#pin-blue-5 {
    top: 31%;
    left: 46%;
}

#pin-blue-6 {
    top: 37%;
    left: 53%;
}

#pin-blue-7 {
    top: 34%;
    left: 54%;
}

#pin-blue-8 {
    top: 31%;
    left: 55%;
}

#pin-blue-9 {
    top: 39%;
    left: 79%;
}

#pin-blue-10 {
    top: 47%;
    left: 80%;
}

#pin-green-1 {
    top: 21%;
    left: 18%;
}

#pin-green-2 {
    top: 30%;
    left: 19%;
}

#pin-green-3 {
    top: 31%;
    left: 45%;
}

#pin-green-4 {
    top: 26%;
    left: 47%;
}

#pin-green-5 {
    top: 24%;
    left: 50%;
}

#pin-green-6 {
    top: 26%;
    left: 51%;
}

#pin-green-7 {
    top: 26%;
    left: 54%;
}

#pin-green-8 {
    top: 21%;
    left: 53%;
}

#pin-green-9 {
    top: 15%;
    left: 52%;
}

#pin-green-10 {
    top: 15%;
    left: 55%;
}

#pin-green-11 {
    top: 39%;
    left: 54%;
}

#pin-green-12 {
    top: 40%;
    left: 59%;
}

#pin-green-13 {
    top: 21%;
    left: 69%;
}

#pin-green-14 {
    top: 36%;
    left: 79%;
}

#pin-green-15 {
    top: 47%;
    left: 77%;
}

#pin-green-16 {
    top: 54%;
    left: 78%;
}

#pin-green-17 {
    top: 67%;
    left: 81%;
}

#pin-orange-1 {
    top: 42%;
    left: 18%;
}

#pin-orange-2 {
    top: 49%;
    left: 25%;
}

#pin-orange-3 {
    top: 53%;
    left: 24%;
}

#pin-orange-4 {
    top: 57%;
    left: 25%;
}

#pin-orange-5 {
    top: 58%;
    left: 35%;
}

#pin-orange-6 {
    top: 70%;
    left: 27%;
}

#pin-orange-7 {
    top: 31%;
    left: 54%;
}

#pin-orange-8 {
    top: 31%;
    left: 56%;
}

#pin-orange-9 {
    top: 34%;
    left: 56%;
}

#pin-orange-10 {
    top: 34%;
    left: 55%;
}

#pin-orange-11 {
    top: 38%;
    left: 77%;
}

#pin-orange-12 {
    top: 44%;
    left: 76%;
}

#pin-orange-13 {
    top: 54%;
    left: 79%;
}

.box:hover > .pin-text {
    display: block;
}

.box:hover {
    opacity: 1;
    width: 25px;
    height: 25px;
}

.pin-text {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translate(-50%, 50%);
    white-space: nowrap;
    display: none;
}

.pin-text span {
    color: white;
    text-shadow: 1px 1px 1px #000;
}