.particle-1{
 position: absolute;
 z-index: 99; 
 animation: particle-1 10s linear infinite;
 left: 40%;
 display: none;
}

.particle-2{
    position: absolute;
    z-index: 99; 
    left: 4%;
    bottom: -15%;
    animation: particle-2 8s linear infinite;
    width: 150px;
    
}

.particle-3{
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #43d355;
    position: absolute;
    bottom: -65%;
    left: 30%;
    animation: particle-3 8s linear infinite;
    display: none;
}

.custom-particle-div{
    position: relative;
}

.particle-4{
    left: 5%;
    width: 0;
    top: 100px;    
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 35px solid hsla(0,0%,100%,.141);
    position: absolute;
    animation: particle-4 15s infinite linear;
    -webkit-animation: particle-4 15s infinite linear;
}

.particle-section-1{
    top: 0px;    
    position: absolute;
    right: 5%;
    -webkit-animation: particle-section-1 20s infinite linear;
    animation: particle-section-1 20s infinite linear;
}

.particle-section-2{
    top: 20px;    
    position: absolute;
    left: 20%;
    -webkit-animation: particle-section-2 20s infinite linear;
    animation: particle-section-2 20s infinite linear;
}

.particle-section-3{
    top: 20px;    
    position: absolute;
    left: 40%;
    -webkit-animation: particle-section-3 20s infinite linear;
    animation: particle-section-3 20s infinite linear;
}
.particle-5{
    width: 31px;
    height: 31px;
    border-radius: 50%;
    left: 10%;
    top: 300px;
    background-color: hsla(0,0%,100%,.141);
    -webkit-animation: particle-5 15s infinite linear;
    animation: particle-5 15s infinite linear;
    position: absolute;
}

.particle-6{
    right: 5%;
    top: 33px;
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 50px solid hsla(0,0%,100%,.141);
    -webkit-animation: particle-6 15s infinite linear;
    animation: particle-6 15s infinite linear;
    position: absolute;
}

.particle-7{
    width: 13px;
    height: 13px;
    border-radius: 50%;
    right: 12%;
    top: 400px;
    background-color: hsla(0,0%,100%,.141);
    -webkit-animation: particle-7 15s infinite linear;
    animation: particle-7 15s infinite linear;
    position: absolute;
}

.particle-8{
    right: 80px;
    top: 240px;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 20px solid hsla(0,0%,100%,.141);
    -webkit-animation: particle-8 15s infinite linear;
    animation: particle-8 15s infinite linear;
    position: absolute;
}

.mouse-scroll{
    opacity: 0;
    animation: mouse-scroll 1s infinite linear;
}

@keyframes mouse-scroll{
    0%, 100%{
        position: relative;
        top: 0px;
        opacity: 0;
    }
    50%{
        position: relative;
        top: 25px;
        opacity: 1;
    }
}

@keyframes particle-1 {
    0%, 100% {
      left: 10%;
      bottom: 100px;  
    }
    25% {
      left:20%;
      bottom: -100px;
    }
    50%{
        left: 20%;
        bottom: 0px;
    }
    75%{
        left: 15%;
        bottom: 100px;
    }
  
}


@keyframes particle-2 {
    0%, 100% {
        left: 10%;
        bottom: -15%;
        
    }
    50%{
        left: 4%;
        bottom: -10%;
    }
    
}

@keyframes particle-3 {
    0%, 100% {
        bottom: -65%;
        left: 30%;
    }
    50%
    {
        bottom: -45%;
        left: 40%;
    }
}


@keyframes particle-4{

    0%, 100% {
        top: 100px;
        left: 5%;
        -webkit-transform: rotate(0deg); 
    }

    25% {
        top: 120px;
        left: 10%;
        -webkit-transform: rotate(90deg); 
        
    }

    50% {
        top: 180px;
        left: 2%;
        -webkit-transform: rotate(180deg); 
    }

    75% {
        top: 120px;
        left: 4%;
        -webkit-transform: rotate(240deg); 
    }

}


@keyframes particle-5{

    0%, 100% {
        top: 300px;
    }

    50% {
        top: 500px;
    }

}

@keyframes particle-6{

    0%, 100% {
        right: 5%;
        top: 33px;
        -webkit-transform: rotate(0deg); 
    }

    25% {
        right: 10%;
        top: 33px;
        -webkit-transform: rotate(90deg); 
    }

    50%{
        right: 10%;
        top: 70px;
        -webkit-transform: rotate(180deg); 
    }

    75%{
        right: 3%;
        top: 70px;
        -webkit-transform: rotate(240deg); 
    }

}


@keyframes particle-8{

    0%, 100% {
        right: 80px;
        top: 240px;
        -webkit-transform: rotate(0deg); 
    }

    25% {
        right: 80px;
        top: 400px;
        -webkit-transform: rotate(90deg); 
    }

    50%{
        right: 160px;
        top: 400px;
        -webkit-transform: rotate(180deg); 
    }

    75%{
        right: 80px;
        top: 240px;
        -webkit-transform: rotate(240deg); 
    }

}

@keyframes particle-7{

    0%, 100% {
        right: 12%;
        top: 400px;
     }

    50%{
        right: 4%;
        top: 600px;
        
    }

 
}

@keyframes particle-section-2{

    0%, 100% {
        left: 12%;
        top: 20px;
     }

     25%{
        left: 30%;
        top: 60px;
         
     }

    50%{
        left: 5%;
        top: 40px;
        
    }
}

@keyframes particle-section-3{

    0%, 100% {
        top: 20px;    
        left: 40%;
     }

     25%{
        left: 30%;
        top: 60px;
         
     }

    50%{
        left: 70%;
        top: 40px;
        
    }
}


@keyframes particle-section-1{

    0%, 100% {
        top: 0px;    
        right: 5%;
     }

     25%{
        right: 30%;
        top: 20px;
         
     }

    50%{
        right: 20%;
        top: 40px;
        
    }

    75%{
        right: 10%;
        top: 80px;
        
    }

}