*{ 
    padding: 0;
    margin: 0; 
    box-sizing: border-box;
}
.img-fluid{
    max-width: 100%;
    height: auto;
}

.map-block{
    font-family: sans-serif;
    max-width: 800px;
    padding: 100px 0;
    margin: 0 auto 0;
    position: relative;
}

.northeast {
    position: absolute;
    top: 102px;
    right: 4px;
    opacity: 0;
    transition: 0.5s;
    z-index: 1;
    width: 572px;
}

.northeast:hover{
    opacity: 1;
}

.east {
    position: absolute;
    top: 413px;
    right: 223px;
    opacity: 0;
    transition: 0.5s;
    z-index: 1;
    width: 184px;
}

.east:hover{
    opacity: 1;
}






.west {
    position: absolute;
    top: 289px;
    left: 137px;
    opacity: 0;
    transition: 0.5s;
    z-index: 11;
    width: 319px;
    opacity: 0;
}

.west:hover{
    opacity: 1;
}

.southwest {
    position: absolute;
    left: 100px;
    bottom: 309px;
    width: 310px;
    z-index: 1;
    opacity: 0;
    transition: 0.5s;
}

.southwest:hover{
    opacity: 1;
}


.south {
    position: absolute;
    left: 234px;
    bottom: 102px;
    width: 537px;
    z-index: 1;
    opacity: 0;
    transition: 0.5s;
}

.south:hover{
    opacity: 1;
}

@media screen and (max-width:768px) {

    .northeast {
        width: 547px;
    }


    .west {
        top: 282px;
        left: 132px;
        width: 302px;
    }

    .southwest {
        left: 95px;
        bottom: 299px;
        width: 296px;
    }

    .south {
        left: 222px;
        bottom: 101px;
        width: 516px;
    }


}


@media screen and (max-width:600px) {
    .south {
        left: 29%;
        bottom: 13%;
        width: 67.5%;
    }

    .southwest {
        left: 12.3%;
        bottom: 32%;
        width: 39%;
    }
    
    .west {
        top: 30.3%;
        left: 17%;
        width: 40%;
    }

    .northeast {
        width: 71.3%;
        top: 13.1%;
        right: .9%;
    }

    .east {
        position: absolute;
        top: 41.9%;
        right: 27.8%;
        opacity: 0;
        transition: 0.5s;
        z-index: 1;
        width: 23.2%;
    }


}



@media screen and (max-width:500px) {

    .northeast {
        width: 71%;
        top: 14.6%;
        right: .88%;
    }

    .east {
        top: 42%;
        right: 28%;
        opacity: 0;
        transition: 0.5s;
        z-index: 1;
        width: 23.2%;
    }

    .west {
        top: 31.3%;
        left: 17%;
        width: 40%;
    }

    .southwest {
        left: 12.3%;
        bottom: 33%;
        width: 39%;
    }

    .south {
        left: 29.5%;
        bottom: 14.7%;
        width: 66.5%;
    }


}