.HotspotAnnotation {
    font-weight: 300;
    line-height: 1.2;
}

.HotspotAnnotation h4 {
    font-weight: bold;
    margin: 0;
}

.HotspotAnnotation span {
    font-size: 0.8rem;
}

#annotation1 {
    left: -400px;
}

#annotation2,
#annotation3 {
    left: -350px;
}

#annotation3 {
    transform: translateY(-50%);
}

#annotation6, #annotation7 {
    width: 40vw;
}

.HotspotAnnotation img {
    width: 90%;
    margin: 2% 5%;
}

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

    #annotation1,
    #annotation2,
    #annotation3 {
        left: 50px;
    }

    #annotation4,
    #annotation6 {
        left: -350px;
    }

    #annotation5 {
        left: -300px;
    }
}

@media screen and (max-width: 666px) {
    .HotspotAnnotation {
        top: 0;
        font-weight: 200;
    }

    .HotspotAnnotation span {
        font-size: 0.6rem;
    }

    #annotation4,
    #annotation6 {
        left: -250px;
    }

    #annotation5 {
        left: -200px;
    }
}