.icon-container {
    position: absolute;
    width: var(--icon-size);
    height: var(--icon-size);
    z-index: 2;
}

.map-icon {
    background-image: url(images/map-icon.png);
    background-size: cover;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.icon-container.animate .map-icon {
    animation-duration: var(--animation-length);
    animation-name: pin-drop;
    animation-delay: calc(var(--anim-delay) * var(--i));
    animation-fill-mode: forwards;
}

.icon-shadow {
    background-image: url(images/icon-shadow.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    top: -12px;
    width: 100%;
    opacity: 0;
    aspect-ratio: 1/1;
}

.icon-container.animate .icon-shadow {
    animation-duration: var(--animation-length);
    animation-name: shadow;
    animation-delay: calc(var(--anim-delay) * var(--i));
    animation-fill-mode: forwards;
}

/* ANIMATIONS */

@keyframes shadow {
    from {
        opacity: 0;
    }

    to {
        opacity: 0.5;
    }
}

@keyframes pin-drop {
    0% {
        transform: scaleY(100%) translateY(var(--pin-drop-height));
        opacity: 1;
    }

    50% {
        transform: scaleY(50%) translateY(20px);
        opacity: 1;
    }

    100% {
        transform: scaleY(100%) translateY(0px);
        opacity: 1;
    }
}


/* PIN LOCATIONS */

:nth-child(1 of .icon-container) {
    left: 43%;
    bottom: 88%;
}

:nth-child(2 of .icon-container) {
    left: 35%;
    bottom: 86%;
}

:nth-child(3 of .icon-container) {
    left: 33%;
    bottom: 80%;
}

:nth-child(4 of .icon-container) {
    left: 18%;
    bottom: 85%;
}

:nth-child(5 of .icon-container) {
    left: 53%;
    bottom: 80%;
}

:nth-child(6 of .icon-container) {
    left: 47%;
    bottom: 77%;
}

:nth-child(7 of .icon-container) {
    left: 40%;
    bottom: 75%;
}

:nth-child(8 of .icon-container) {
    left: 33%;
    bottom: 74%;
}

:nth-child(9 of .icon-container) {
    left: 25%;
    bottom: 75%;
}

:nth-child(10 of .icon-container) {
    left: 31%;
    bottom: 70%;
}

:nth-child(11 of .icon-container) {
    left: 37%;
    bottom: 68%;
}

:nth-child(12 of .icon-container) {
    left: 45%;
    bottom: 65%;
}

:nth-child(13 of .icon-container) {
    left: 37%;
    bottom: 62%;
}

:nth-child(14 of .icon-container) {
    left: 51%;
    bottom: 67%;
}

:nth-child(15 of .icon-container) {
    left: 56%;
    bottom: 63%;
}

:nth-child(16 of .icon-container) {
    left: 32%;
    bottom: 60%;
}

:nth-child(17 of .icon-container) {
    left: 42%;
    bottom: 60%;
}

:nth-child(18 of .icon-container) {
    left: 60%;
    bottom: 57%;
}

:nth-child(19 of .icon-container) {
    left: 52%;
    bottom: 58%;
}

:nth-child(20 of .icon-container) {
    left: 15%;
    bottom: 60%;
}

:nth-child(21 of .icon-container) {
    left: 6%;
    bottom: 55%;
}

:nth-child(22 of .icon-container) {
    left: 21%;
    bottom: 55%;
}

:nth-child(23 of .icon-container) {
    left: 13%;
    bottom: 56%;
}

:nth-child(24 of .icon-container) {
    left: 16%;
    bottom: 52%;
}

:nth-child(25 of .icon-container) {
    left: 44%;
    bottom: 52%;
}

:nth-child(26 of .icon-container) {
    left: 53%;
    bottom: 53%;
}

:nth-child(27 of .icon-container) {
    left: 71%;
    bottom: 48%;
}

:nth-child(28 of .icon-container) {
    left: 60%;
    bottom: 50%;
}

:nth-child(29 of .icon-container) {
    left: 50%;
    bottom: 48%;
}

:nth-child(30 of .icon-container) {
    left: 48%;
    bottom: 44%;
}

:nth-child(31 of .icon-container) {
    left: 55%;
    bottom: 44%;
}

:nth-child(32 of .icon-container) {
    left: 43%;
    bottom: 42%;
}

:nth-child(33 of .icon-container) {
    left: 52%;
    bottom: 40%;
}

:nth-child(34 of .icon-container) {
    left: 65%;
    bottom: 45%;
}

:nth-child(35 of .icon-container) {
    left: 70%;
    bottom: 42%;
}

:nth-child(36 of .icon-container) {
    left: 60%;
    bottom: 40%;
}

:nth-child(37 of .icon-container) {
    left: 34%;
    bottom: 42%;
}

:nth-child(38 of .icon-container) {
    left: 44%;
    bottom: 37%;
}

:nth-child(39 of .icon-container) {
    left: 38%;
    bottom: 35%;
}

:nth-child(40 of .icon-container) {
    left: 50%;
    bottom: 35%;
}

:nth-child(41 of .icon-container) {
    left: 52%;
    bottom: 31%;
}

:nth-child(42 of .icon-container) {
    left: 45%;
    bottom: 30%;
}

:nth-child(43 of .icon-container) {
    left: 28%;
    bottom: 26%;
}

:nth-child(44 of .icon-container) {
    left: 37%;
    bottom: 25%;
}

:nth-child(45 of .icon-container) {
    left: 47%;
    bottom: 24%;
}

:nth-child(46 of .icon-container) {
    left: 65%;
    bottom: 37%;
}

:nth-child(47 of .icon-container) {
    left: 60%;
    bottom: 33%;
}

:nth-child(48 of .icon-container) {
    left: 80%;
    bottom: 37%;
}

:nth-child(49 of .icon-container) {
    left: 88%;
    bottom: 33%;
}

:nth-child(50 of .icon-container) {
    left: 85%;
    bottom: 28%;
}

:nth-child(51 of .icon-container) {
    left: 79%;
    bottom: 30%;
}

:nth-child(52 of .icon-container) {
    left: 70%;
    bottom: 33%;
}

:nth-child(53 of .icon-container) {
    left: 72%;
    bottom: 28%;
}

:nth-child(54 of .icon-container) {
    left: 80%;
    bottom: 24%;
}

:nth-child(55 of .icon-container) {
    left: 55%;
    bottom: 25%;
}

:nth-child(56 of .icon-container) {
    left: 73%;
    bottom: 23%;
}

:nth-child(57 of .icon-container) {
    left: 64%;
    bottom: 26%;
}

:nth-child(58 of .icon-container) {
    left: 68%;
    bottom: 21%;
}

:nth-child(59 of .icon-container) {
    left: 61%;
    bottom: 22%;
}

:nth-child(60 of .icon-container) {
    left: 52%;
    bottom: 20%;
}

:nth-child(61 of .icon-container) {
    left: 59%;
    bottom: 17%;
}

:nth-child(62 of .icon-container) {
    left: 68%;
    bottom: 15%;
}

:nth-child(63 of .icon-container) {
    left: 51%;
    bottom: 14%;
}

:nth-child(64 of .icon-container) {
    left: 76%;
    bottom: 17%;
}

:nth-child(65 of .icon-container) {
    left: 82%;
    bottom: 16%;
}

:nth-child(66 of .icon-container) {
    left: 38%;
    bottom: 17%;
}

:nth-child(67 of .icon-container) {
    left: 87%;
    bottom: 19%;
}

:nth-child(68 of .icon-container) {
    left: 45%;
    bottom: 16%;
}

:nth-child(69 of .icon-container) {
    left: 37%;
    bottom: 13%;
}

:nth-child(70 of .icon-container) {
    left: 30%;
    bottom: 10%;
}

:nth-child(71 of .icon-container) {
    left: 39%;
    bottom: 8%;
}

:nth-child(72 of .icon-container) {
    left: 20%;
    bottom: 6%;
}

@media (max-width: 550px) {
    .icon-container {
        transform: translateX(-10px);
    }
}