.pic{
    position: absolute;
    pointer-events: none;
    z-index: 2;
}

.pic-1{
    width: 10vw;
    left: 10vw;
    transform: rotate(30deg);
    top: 15vh;
    animation: icon-1 5s linear infinite;
}
.pic-2{
    width: 5vw;
    right: 10vw;
    transform: rotate(70deg);
    top: 18vh;
    z-index: 2;
    animation: icon-3 4s linear infinite;
}
.pic-3{
    width: 6vw;
    right: 5vw;
    transform: rotate(50deg);
    top: 55vh;
    z-index: 2;
    animation: icon-4 8s linear infinite;
}
.pic-4{
    width: 6vw;
    right: 35vw;
    transform: rotate(-10deg);
    top: 10vh;
    z-index: 2;
    animation: icon-1 5s linear infinite;
}
.pic-5{
    width: 10vw;
    right: 60vw;
    transform: rotate(30deg);
    bottom: 5vh;
    animation: icon-3 3s linear infinite;
}
.pic-6{
    width: 4vw;
    right: 35vw;
    transform: rotate(20deg);
    bottom: 10vh;
    z-index: 2;
    animation: icon-4 7s linear infinite;
}
.pic-7{
    width: 10vw;
    right: 10vw;
    transform: rotate(120deg);
    bottom: 3vh;
    animation: icon-2 4s linear infinite;
}
.pic-8{
    width: 6vw;
    left: 35vw;
    transform: rotate(30deg);
    top: 5vh;
    animation: icon-1 3s linear infinite;
}
.pic-9{
    width: 10vw;
    left: 55vw;
    transform: rotate(-80deg);
    bottom: 15vh;
    animation: icon-4 6s linear infinite;
}
.pic-10{
    width: 10vw;
    left: 40vw;
    transform: rotate(30deg);
    bottom: 5vh;
    animation: icon-1 5s linear infinite;
}
.pic-11{
    width: 10vw;
    left: 10vw;
    transform: rotate(30deg);
    top: 15vh;
    animation: icon-2 5s linear infinite;
}
.pic-12{
    width: 4vw;
    right: 3vw;
    transform: rotate(-30deg);
    top: 15vh;
    animation: icon-1 6s linear infinite;
}
.pic-13{
    width: 10vw;
    right: 10vw;
    transform: rotate(-30deg);
    bottom: 15vh;
    animation: icon-2 5s linear infinite;
}
.pic-14{
    width: 8vw;
    left: 55vw;
    transform: rotate(30deg);
    top: 18vh;
    animation: icon-4 3s linear infinite;
}
.pic-15{
    width: 8vw;
    left: 15vw;
    transform: rotate(100deg);
    bottom: 15vh;
    animation: icon-1 8s linear infinite;
}
.pic-16{
    width: 12vw;
    right: 10vw;
    transform: rotate(130deg);
    top: 35vh;
    animation: icon-3 3s linear infinite;
}
.pic-17{
    width: 11vw;
    left: 16vw;
    transform: rotate(10deg);
    top: 35vh;
    animation: icon-1 3s linear infinite;
}
.pic-18{
    width: 12vw;
    right: 10vw;
    transform: rotate(30deg);
    top: 5vw;
    animation: icon-2 7s linear infinite;
}
.pic-19{
    width: 10vw;
    left: 25vw;
    transform: rotate(0deg);
    top: 55vh;
    animation: icon-3 6s linear infinite;
}
.pic-20{
    width: 10vw;
    left: 10vw;
    transform: rotate(30deg);
    top: 15vh;
    animation: icon-1 5s linear infinite;
}

@keyframes icon-1 {
    0%{
        transform: rotate(30deg) translate(0, 0);
    }   
    50%{
        transform: rotate(-30deg) translate(40px, 20px) scale(1.1);
    }
    100%{
        transform: rotate(30deg) translate(0, 0);  
    }
}
@keyframes icon-2 {
    0%{
        transform: rotate(30deg) translate(0, 0);
    }   
    50%{
        transform: rotate(210deg) translate(30px, 10px);
    }
    100%{
        transform: rotate(390deg) translate(0, 0);  
    }
}
@keyframes icon-3 {
    0%{
        transform: rotate(30deg) translate(0, 0);
    }   
    50%{
        transform: rotate(50deg) translate(20px, 20px) scale(1.2);
    }
    100%{
        transform: rotate(30deg) translate(0, 0);  
    }
}
@keyframes icon-4 {
    0%{
        transform: rotate(30deg) translate(0, 0);
    }   
    50%{
        transform: rotate(-150deg) translate(10px, 30px);
    }
    100%{
        transform: rotate(-330deg) translate(0, 0);  
    }
}


@media(min-width: 1921px){
    .pic-4{
        right: 25vw;
    }
    .pic-8{
        left: auto;
        right: 20vw;
    }
    .pic-13{
        bottom: 0;
    }
    .pic-17{
        top: 5vh;
        left: 26vw;
    }
    .pic-16{
        display: none;
    }
}

@media (max-width: 960px) {
    .pic-1{
        width: 25vw;
    }
    .pic-2{
        width: 15vw;
    }
    .pic-4{
        width: 10vw;
    }
    .pic-6{
        width: 14vw;
    }
    .pic-7{
        width: 10vw;
    }
    .pic-8{
        width: 16vw;
    }
    .pic-9{
        width: 15vw;
    }
    .pic-10{
        width: 17vw;
    }
    .pic-11{
        width: 20vw;
    }
    .pic-12{
        width: 12vw;
    }
    .pic-10{
        width: 12vw;
    }
    .pic-11{
        width: 16vw;
    }
    .pic-12{
        width: 14vw;
    }
    .pic-13{
        width: 10vw;
    }
    .pic-14{
        width: 18vw;
    }
    .pic-15{
        display: none;
    }
    .pic-16{
        width: 14vw;
    }
    .pic-17{
        display: none;
    }
    .pic-18{
        width: 17vw;
    }
    .pic-19{
        width: 20vw;
    }
    .pic-20{
        width: 14vw;
    }
}