EffectHub.com: your best source for gaming

Recommendation

More Effects...

'use strict';

// Let's define the required varibles such as the number of particles to be created and an array to hold the particles
var particleContainer = document.getElementById('particles');
var Nparticles = 100;
var particles = [];

// function to return a random number from a given min and max
function rand(min, max) {
	return Math.floor(Math.random() * (max - min)) + min;
}

// This constructor will generate the required information for each particle and it's html structure to be added to the document
function createParticle(i) {
	this.id = i;
	this.width = rand(1, 20) + 'px';
	this.height = this.width;
	this.x = rand(10, 90) + '%';
	this.delay = rand(1, 60) + 's';
	this.duration = rand(10, 60) + 's';
	this.html = '<span style=" width: ' + this.width + '; height: ' + this.height + '; left: ' + this.x + '; animation-delay: ' + this.duration + '; animation-duration: ' + this.duration + '; "></span>';
}

// Let's loop through till we reach the max number of particles and save them to the array and append them to the document
while (particles.length <= Nparticles) {if (window.CP.shouldStopExecution(1)){break;}
	var Particle = new createParticle(particles.length);
	particles.push(Particle);
	particleContainer.innerHTML += Particle.html;
}
window.CP.exitedLoop(1);

// Hope you liked it and that has inspired you to create something awesome

CSS

@-webkit-keyframes particle-1 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(7px) translateY(-10vh);
            transform: translateX(7px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-6px) translateY(-20vh);
            transform: translateX(-6px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(26px) translateY(-30vh);
            transform: translateX(26px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(16px) translateY(-40vh);
            transform: translateX(16px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(6px) translateY(-50vh);
            transform: translateX(6px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-22px) translateY(-100vh);
            transform: translateX(-22px) translateY(-100vh);
    opacity: 0;
  }
}
@keyframes particle-1 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(7px) translateY(-10vh);
            transform: translateX(7px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-6px) translateY(-20vh);
            transform: translateX(-6px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(26px) translateY(-30vh);
            transform: translateX(26px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(16px) translateY(-40vh);
            transform: translateX(16px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(6px) translateY(-50vh);
            transform: translateX(6px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-22px) translateY(-100vh);
            transform: translateX(-22px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(1) {
  -webkit-animation-name: particle-1;
          animation-name: particle-1;
}

@-webkit-keyframes particle-2 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-15px) translateY(-10vh);
            transform: translateX(-15px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-32px) translateY(-20vh);
            transform: translateX(-32px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(19px) translateY(-30vh);
            transform: translateX(19px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(30px) translateY(-40vh);
            transform: translateX(30px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(37px) translateY(-50vh);
            transform: translateX(37px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(34px) translateY(-100vh);
            transform: translateX(34px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-2 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-15px) translateY(-10vh);
            transform: translateX(-15px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-32px) translateY(-20vh);
            transform: translateX(-32px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(19px) translateY(-30vh);
            transform: translateX(19px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(30px) translateY(-40vh);
            transform: translateX(30px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(37px) translateY(-50vh);
            transform: translateX(37px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(34px) translateY(-100vh);
            transform: translateX(34px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(2) {
  -webkit-animation-name: particle-2;
          animation-name: particle-2;
}

@-webkit-keyframes particle-3 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(0px) translateY(-10vh);
            transform: translateX(0px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(16px) translateY(-20vh);
            transform: translateX(16px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-37px) translateY(-30vh);
            transform: translateX(-37px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-39px) translateY(-40vh);
            transform: translateX(-39px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-5px) translateY(-50vh);
            transform: translateX(-5px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-31px) translateY(-100vh);
            transform: translateX(-31px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-3 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(0px) translateY(-10vh);
            transform: translateX(0px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(16px) translateY(-20vh);
            transform: translateX(16px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-37px) translateY(-30vh);
            transform: translateX(-37px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-39px) translateY(-40vh);
            transform: translateX(-39px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-5px) translateY(-50vh);
            transform: translateX(-5px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-31px) translateY(-100vh);
            transform: translateX(-31px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(3) {
  -webkit-animation-name: particle-3;
          animation-name: particle-3;
}

@-webkit-keyframes particle-4 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(8px) translateY(-10vh);
            transform: translateX(8px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-38px) translateY(-20vh);
            transform: translateX(-38px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-1px) translateY(-30vh);
            transform: translateX(-1px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-33px) translateY(-40vh);
            transform: translateX(-33px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-39px) translateY(-50vh);
            transform: translateX(-39px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-15px) translateY(-100vh);
            transform: translateX(-15px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-4 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(8px) translateY(-10vh);
            transform: translateX(8px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-38px) translateY(-20vh);
            transform: translateX(-38px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-1px) translateY(-30vh);
            transform: translateX(-1px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-33px) translateY(-40vh);
            transform: translateX(-33px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-39px) translateY(-50vh);
            transform: translateX(-39px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-15px) translateY(-100vh);
            transform: translateX(-15px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(4) {
  -webkit-animation-name: particle-4;
          animation-name: particle-4;
}

@-webkit-keyframes particle-5 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-22px) translateY(-10vh);
            transform: translateX(-22px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(15px) translateY(-20vh);
            transform: translateX(15px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-4px) translateY(-30vh);
            transform: translateX(-4px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(24px) translateY(-40vh);
            transform: translateX(24px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-27px) translateY(-50vh);
            transform: translateX(-27px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-9px) translateY(-100vh);
            transform: translateX(-9px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-5 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-22px) translateY(-10vh);
            transform: translateX(-22px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(15px) translateY(-20vh);
            transform: translateX(15px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-4px) translateY(-30vh);
            transform: translateX(-4px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(24px) translateY(-40vh);
            transform: translateX(24px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-27px) translateY(-50vh);
            transform: translateX(-27px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-9px) translateY(-100vh);
            transform: translateX(-9px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(5) {
  -webkit-animation-name: particle-5;
          animation-name: particle-5;
}

@-webkit-keyframes particle-6 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(17px) translateY(-10vh);
            transform: translateX(17px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(19px) translateY(-20vh);
            transform: translateX(19px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(26px) translateY(-30vh);
            transform: translateX(26px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-12px) translateY(-40vh);
            transform: translateX(-12px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(4px) translateY(-50vh);
            transform: translateX(4px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(36px) translateY(-100vh);
            transform: translateX(36px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-6 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(17px) translateY(-10vh);
            transform: translateX(17px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(19px) translateY(-20vh);
            transform: translateX(19px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(26px) translateY(-30vh);
            transform: translateX(26px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-12px) translateY(-40vh);
            transform: translateX(-12px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(4px) translateY(-50vh);
            transform: translateX(4px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(36px) translateY(-100vh);
            transform: translateX(36px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(6) {
  -webkit-animation-name: particle-6;
          animation-name: particle-6;
}

@-webkit-keyframes particle-7 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-5px) translateY(-10vh);
            transform: translateX(-5px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-29px) translateY(-20vh);
            transform: translateX(-29px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-13px) translateY(-30vh);
            transform: translateX(-13px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(30px) translateY(-40vh);
            transform: translateX(30px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-17px) translateY(-50vh);
            transform: translateX(-17px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-4px) translateY(-100vh);
            transform: translateX(-4px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-7 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-5px) translateY(-10vh);
            transform: translateX(-5px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-29px) translateY(-20vh);
            transform: translateX(-29px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-13px) translateY(-30vh);
            transform: translateX(-13px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(30px) translateY(-40vh);
            transform: translateX(30px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-17px) translateY(-50vh);
            transform: translateX(-17px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-4px) translateY(-100vh);
            transform: translateX(-4px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(7) {
  -webkit-animation-name: particle-7;
          animation-name: particle-7;
}

@-webkit-keyframes particle-8 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(30px) translateY(-10vh);
            transform: translateX(30px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(3px) translateY(-20vh);
            transform: translateX(3px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-3px) translateY(-30vh);
            transform: translateX(-3px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(2px) translateY(-40vh);
            transform: translateX(2px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-3px) translateY(-50vh);
            transform: translateX(-3px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(33px) translateY(-100vh);
            transform: translateX(33px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-8 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(30px) translateY(-10vh);
            transform: translateX(30px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(3px) translateY(-20vh);
            transform: translateX(3px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-3px) translateY(-30vh);
            transform: translateX(-3px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(2px) translateY(-40vh);
            transform: translateX(2px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-3px) translateY(-50vh);
            transform: translateX(-3px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(33px) translateY(-100vh);
            transform: translateX(33px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(8) {
  -webkit-animation-name: particle-8;
          animation-name: particle-8;
}

@-webkit-keyframes particle-9 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-23px) translateY(-10vh);
            transform: translateX(-23px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(39px) translateY(-20vh);
            transform: translateX(39px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-29px) translateY(-30vh);
            transform: translateX(-29px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(30px) translateY(-40vh);
            transform: translateX(30px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-32px) translateY(-50vh);
            transform: translateX(-32px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(28px) translateY(-100vh);
            transform: translateX(28px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-9 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-23px) translateY(-10vh);
            transform: translateX(-23px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(39px) translateY(-20vh);
            transform: translateX(39px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-29px) translateY(-30vh);
            transform: translateX(-29px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(30px) translateY(-40vh);
            transform: translateX(30px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-32px) translateY(-50vh);
            transform: translateX(-32px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(28px) translateY(-100vh);
            transform: translateX(28px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(9) {
  -webkit-animation-name: particle-9;
          animation-name: particle-9;
}

@-webkit-keyframes particle-10 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-11px) translateY(-10vh);
            transform: translateX(-11px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-26px) translateY(-20vh);
            transform: translateX(-26px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(1px) translateY(-30vh);
            transform: translateX(1px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(33px) translateY(-40vh);
            transform: translateX(33px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-38px) translateY(-50vh);
            transform: translateX(-38px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(35px) translateY(-100vh);
            transform: translateX(35px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-10 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-11px) translateY(-10vh);
            transform: translateX(-11px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-26px) translateY(-20vh);
            transform: translateX(-26px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(1px) translateY(-30vh);
            transform: translateX(1px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(33px) translateY(-40vh);
            transform: translateX(33px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-38px) translateY(-50vh);
            transform: translateX(-38px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(35px) translateY(-100vh);
            transform: translateX(35px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(10) {
  -webkit-animation-name: particle-10;
          animation-name: particle-10;
}

@-webkit-keyframes particle-11 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-36px) translateY(-10vh);
            transform: translateX(-36px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(5px) translateY(-20vh);
            transform: translateX(5px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-24px) translateY(-30vh);
            transform: translateX(-24px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(4px) translateY(-40vh);
            transform: translateX(4px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-18px) translateY(-50vh);
            transform: translateX(-18px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-38px) translateY(-100vh);
            transform: translateX(-38px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-11 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-36px) translateY(-10vh);
            transform: translateX(-36px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(5px) translateY(-20vh);
            transform: translateX(5px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-24px) translateY(-30vh);
            transform: translateX(-24px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(4px) translateY(-40vh);
            transform: translateX(4px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-18px) translateY(-50vh);
            transform: translateX(-18px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-38px) translateY(-100vh);
            transform: translateX(-38px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(11) {
  -webkit-animation-name: particle-11;
          animation-name: particle-11;
}

@-webkit-keyframes particle-12 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(22px) translateY(-10vh);
            transform: translateX(22px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(5px) translateY(-20vh);
            transform: translateX(5px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(24px) translateY(-30vh);
            transform: translateX(24px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(9px) translateY(-40vh);
            transform: translateX(9px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(31px) translateY(-50vh);
            transform: translateX(31px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-28px) translateY(-100vh);
            transform: translateX(-28px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-12 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(22px) translateY(-10vh);
            transform: translateX(22px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(5px) translateY(-20vh);
            transform: translateX(5px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(24px) translateY(-30vh);
            transform: translateX(24px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(9px) translateY(-40vh);
            transform: translateX(9px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(31px) translateY(-50vh);
            transform: translateX(31px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-28px) translateY(-100vh);
            transform: translateX(-28px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(12) {
  -webkit-animation-name: particle-12;
          animation-name: particle-12;
}

@-webkit-keyframes particle-13 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(32px) translateY(-10vh);
            transform: translateX(32px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-18px) translateY(-20vh);
            transform: translateX(-18px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(9px) translateY(-30vh);
            transform: translateX(9px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-32px) translateY(-40vh);
            transform: translateX(-32px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(13px) translateY(-50vh);
            transform: translateX(13px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(30px) translateY(-100vh);
            transform: translateX(30px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-13 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(32px) translateY(-10vh);
            transform: translateX(32px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-18px) translateY(-20vh);
            transform: translateX(-18px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(9px) translateY(-30vh);
            transform: translateX(9px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-32px) translateY(-40vh);
            transform: translateX(-32px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(13px) translateY(-50vh);
            transform: translateX(13px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(30px) translateY(-100vh);
            transform: translateX(30px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(13) {
  -webkit-animation-name: particle-13;
          animation-name: particle-13;
}

@-webkit-keyframes particle-14 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(15px) translateY(-10vh);
            transform: translateX(15px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(14px) translateY(-20vh);
            transform: translateX(14px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(7px) translateY(-30vh);
            transform: translateX(7px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-34px) translateY(-40vh);
            transform: translateX(-34px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-18px) translateY(-50vh);
            transform: translateX(-18px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-38px) translateY(-100vh);
            transform: translateX(-38px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-14 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(15px) translateY(-10vh);
            transform: translateX(15px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(14px) translateY(-20vh);
            transform: translateX(14px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(7px) translateY(-30vh);
            transform: translateX(7px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-34px) translateY(-40vh);
            transform: translateX(-34px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-18px) translateY(-50vh);
            transform: translateX(-18px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-38px) translateY(-100vh);
            transform: translateX(-38px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(14) {
  -webkit-animation-name: particle-14;
          animation-name: particle-14;
}

@-webkit-keyframes particle-15 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(8px) translateY(-10vh);
            transform: translateX(8px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(13px) translateY(-20vh);
            transform: translateX(13px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(12px) translateY(-30vh);
            transform: translateX(12px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-2px) translateY(-40vh);
            transform: translateX(-2px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-7px) translateY(-50vh);
            transform: translateX(-7px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(26px) translateY(-100vh);
            transform: translateX(26px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-15 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(8px) translateY(-10vh);
            transform: translateX(8px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(13px) translateY(-20vh);
            transform: translateX(13px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(12px) translateY(-30vh);
            transform: translateX(12px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-2px) translateY(-40vh);
            transform: translateX(-2px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-7px) translateY(-50vh);
            transform: translateX(-7px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(26px) translateY(-100vh);
            transform: translateX(26px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(15) {
  -webkit-animation-name: particle-15;
          animation-name: particle-15;
}

@-webkit-keyframes particle-16 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(19px) translateY(-10vh);
            transform: translateX(19px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-26px) translateY(-20vh);
            transform: translateX(-26px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-5px) translateY(-30vh);
            transform: translateX(-5px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-30px) translateY(-40vh);
            transform: translateX(-30px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-3px) translateY(-50vh);
            transform: translateX(-3px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(18px) translateY(-100vh);
            transform: translateX(18px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-16 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(19px) translateY(-10vh);
            transform: translateX(19px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-26px) translateY(-20vh);
            transform: translateX(-26px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-5px) translateY(-30vh);
            transform: translateX(-5px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-30px) translateY(-40vh);
            transform: translateX(-30px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-3px) translateY(-50vh);
            transform: translateX(-3px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(18px) translateY(-100vh);
            transform: translateX(18px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(16) {
  -webkit-animation-name: particle-16;
          animation-name: particle-16;
}

@-webkit-keyframes particle-17 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(32px) translateY(-10vh);
            transform: translateX(32px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(40px) translateY(-20vh);
            transform: translateX(40px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-36px) translateY(-30vh);
            transform: translateX(-36px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-26px) translateY(-40vh);
            transform: translateX(-26px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(35px) translateY(-50vh);
            transform: translateX(35px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-13px) translateY(-100vh);
            transform: translateX(-13px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-17 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(32px) translateY(-10vh);
            transform: translateX(32px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(40px) translateY(-20vh);
            transform: translateX(40px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-36px) translateY(-30vh);
            transform: translateX(-36px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-26px) translateY(-40vh);
            transform: translateX(-26px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(35px) translateY(-50vh);
            transform: translateX(35px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-13px) translateY(-100vh);
            transform: translateX(-13px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(17) {
  -webkit-animation-name: particle-17;
          animation-name: particle-17;
}

@-webkit-keyframes particle-18 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-15px) translateY(-10vh);
            transform: translateX(-15px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(17px) translateY(-20vh);
            transform: translateX(17px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-23px) translateY(-30vh);
            transform: translateX(-23px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(5px) translateY(-40vh);
            transform: translateX(5px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(5px) translateY(-50vh);
            transform: translateX(5px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(25px) translateY(-100vh);
            transform: translateX(25px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-18 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-15px) translateY(-10vh);
            transform: translateX(-15px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(17px) translateY(-20vh);
            transform: translateX(17px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-23px) translateY(-30vh);
            transform: translateX(-23px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(5px) translateY(-40vh);
            transform: translateX(5px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(5px) translateY(-50vh);
            transform: translateX(5px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(25px) translateY(-100vh);
            transform: translateX(25px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(18) {
  -webkit-animation-name: particle-18;
          animation-name: particle-18;
}

@-webkit-keyframes particle-19 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-15px) translateY(-10vh);
            transform: translateX(-15px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(12px) translateY(-20vh);
            transform: translateX(12px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-17px) translateY(-30vh);
            transform: translateX(-17px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-15px) translateY(-40vh);
            transform: translateX(-15px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(27px) translateY(-50vh);
            transform: translateX(27px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-35px) translateY(-100vh);
            transform: translateX(-35px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-19 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-15px) translateY(-10vh);
            transform: translateX(-15px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(12px) translateY(-20vh);
            transform: translateX(12px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-17px) translateY(-30vh);
            transform: translateX(-17px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-15px) translateY(-40vh);
            transform: translateX(-15px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(27px) translateY(-50vh);
            transform: translateX(27px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-35px) translateY(-100vh);
            transform: translateX(-35px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(19) {
  -webkit-animation-name: particle-19;
          animation-name: particle-19;
}

@-webkit-keyframes particle-20 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-22px) translateY(-10vh);
            transform: translateX(-22px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-20px) translateY(-20vh);
            transform: translateX(-20px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(40px) translateY(-30vh);
            transform: translateX(40px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(3px) translateY(-40vh);
            transform: translateX(3px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(27px) translateY(-50vh);
            transform: translateX(27px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-7px) translateY(-100vh);
            transform: translateX(-7px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-20 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-22px) translateY(-10vh);
            transform: translateX(-22px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-20px) translateY(-20vh);
            transform: translateX(-20px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(40px) translateY(-30vh);
            transform: translateX(40px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(3px) translateY(-40vh);
            transform: translateX(3px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(27px) translateY(-50vh);
            transform: translateX(27px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-7px) translateY(-100vh);
            transform: translateX(-7px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(20) {
  -webkit-animation-name: particle-20;
          animation-name: particle-20;
}

@-webkit-keyframes particle-21 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(21px) translateY(-10vh);
            transform: translateX(21px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(5px) translateY(-20vh);
            transform: translateX(5px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(8px) translateY(-30vh);
            transform: translateX(8px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(37px) translateY(-40vh);
            transform: translateX(37px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-1px) translateY(-50vh);
            transform: translateX(-1px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(7px) translateY(-100vh);
            transform: translateX(7px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-21 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(21px) translateY(-10vh);
            transform: translateX(21px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(5px) translateY(-20vh);
            transform: translateX(5px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(8px) translateY(-30vh);
            transform: translateX(8px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(37px) translateY(-40vh);
            transform: translateX(37px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-1px) translateY(-50vh);
            transform: translateX(-1px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(7px) translateY(-100vh);
            transform: translateX(7px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(21) {
  -webkit-animation-name: particle-21;
          animation-name: particle-21;
}

@-webkit-keyframes particle-22 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-16px) translateY(-10vh);
            transform: translateX(-16px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(1px) translateY(-20vh);
            transform: translateX(1px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-11px) translateY(-30vh);
            transform: translateX(-11px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-16px) translateY(-40vh);
            transform: translateX(-16px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(17px) translateY(-50vh);
            transform: translateX(17px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(21px) translateY(-100vh);
            transform: translateX(21px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-22 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-16px) translateY(-10vh);
            transform: translateX(-16px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(1px) translateY(-20vh);
            transform: translateX(1px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-11px) translateY(-30vh);
            transform: translateX(-11px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-16px) translateY(-40vh);
            transform: translateX(-16px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(17px) translateY(-50vh);
            transform: translateX(17px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(21px) translateY(-100vh);
            transform: translateX(21px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(22) {
  -webkit-animation-name: particle-22;
          animation-name: particle-22;
}

@-webkit-keyframes particle-23 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-9px) translateY(-10vh);
            transform: translateX(-9px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-13px) translateY(-20vh);
            transform: translateX(-13px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(3px) translateY(-30vh);
            transform: translateX(3px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-2px) translateY(-40vh);
            transform: translateX(-2px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-27px) translateY(-50vh);
            transform: translateX(-27px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(20px) translateY(-100vh);
            transform: translateX(20px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-23 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-9px) translateY(-10vh);
            transform: translateX(-9px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-13px) translateY(-20vh);
            transform: translateX(-13px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(3px) translateY(-30vh);
            transform: translateX(3px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-2px) translateY(-40vh);
            transform: translateX(-2px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-27px) translateY(-50vh);
            transform: translateX(-27px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(20px) translateY(-100vh);
            transform: translateX(20px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(23) {
  -webkit-animation-name: particle-23;
          animation-name: particle-23;
}

@-webkit-keyframes particle-24 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(22px) translateY(-10vh);
            transform: translateX(22px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-18px) translateY(-20vh);
            transform: translateX(-18px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-24px) translateY(-30vh);
            transform: translateX(-24px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(18px) translateY(-40vh);
            transform: translateX(18px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-20px) translateY(-50vh);
            transform: translateX(-20px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-22px) translateY(-100vh);
            transform: translateX(-22px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-24 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(22px) translateY(-10vh);
            transform: translateX(22px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-18px) translateY(-20vh);
            transform: translateX(-18px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-24px) translateY(-30vh);
            transform: translateX(-24px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(18px) translateY(-40vh);
            transform: translateX(18px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-20px) translateY(-50vh);
            transform: translateX(-20px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-22px) translateY(-100vh);
            transform: translateX(-22px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(24) {
  -webkit-animation-name: particle-24;
          animation-name: particle-24;
}

@-webkit-keyframes particle-25 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-34px) translateY(-10vh);
            transform: translateX(-34px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(3px) translateY(-20vh);
            transform: translateX(3px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-8px) translateY(-30vh);
            transform: translateX(-8px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-17px) translateY(-40vh);
            transform: translateX(-17px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(31px) translateY(-50vh);
            transform: translateX(31px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(4px) translateY(-100vh);
            transform: translateX(4px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-25 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-34px) translateY(-10vh);
            transform: translateX(-34px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(3px) translateY(-20vh);
            transform: translateX(3px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-8px) translateY(-30vh);
            transform: translateX(-8px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-17px) translateY(-40vh);
            transform: translateX(-17px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(31px) translateY(-50vh);
            transform: translateX(31px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(4px) translateY(-100vh);
            transform: translateX(4px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(25) {
  -webkit-animation-name: particle-25;
          animation-name: particle-25;
}

@-webkit-keyframes particle-26 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(39px) translateY(-10vh);
            transform: translateX(39px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-18px) translateY(-20vh);
            transform: translateX(-18px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-17px) translateY(-30vh);
            transform: translateX(-17px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(14px) translateY(-40vh);
            transform: translateX(14px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(17px) translateY(-50vh);
            transform: translateX(17px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-1px) translateY(-100vh);
            transform: translateX(-1px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-26 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(39px) translateY(-10vh);
            transform: translateX(39px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-18px) translateY(-20vh);
            transform: translateX(-18px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-17px) translateY(-30vh);
            transform: translateX(-17px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(14px) translateY(-40vh);
            transform: translateX(14px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(17px) translateY(-50vh);
            transform: translateX(17px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-1px) translateY(-100vh);
            transform: translateX(-1px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(26) {
  -webkit-animation-name: particle-26;
          animation-name: particle-26;
}

@-webkit-keyframes particle-27 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-18px) translateY(-10vh);
            transform: translateX(-18px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(22px) translateY(-20vh);
            transform: translateX(22px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(27px) translateY(-30vh);
            transform: translateX(27px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(16px) translateY(-40vh);
            transform: translateX(16px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(35px) translateY(-50vh);
            transform: translateX(35px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(40px) translateY(-100vh);
            transform: translateX(40px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-27 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-18px) translateY(-10vh);
            transform: translateX(-18px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(22px) translateY(-20vh);
            transform: translateX(22px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(27px) translateY(-30vh);
            transform: translateX(27px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(16px) translateY(-40vh);
            transform: translateX(16px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(35px) translateY(-50vh);
            transform: translateX(35px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(40px) translateY(-100vh);
            transform: translateX(40px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(27) {
  -webkit-animation-name: particle-27;
          animation-name: particle-27;
}

@-webkit-keyframes particle-28 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-18px) translateY(-10vh);
            transform: translateX(-18px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-28px) translateY(-20vh);
            transform: translateX(-28px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-17px) translateY(-30vh);
            transform: translateX(-17px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-15px) translateY(-40vh);
            transform: translateX(-15px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(3px) translateY(-50vh);
            transform: translateX(3px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-3px) translateY(-100vh);
            transform: translateX(-3px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-28 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-18px) translateY(-10vh);
            transform: translateX(-18px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-28px) translateY(-20vh);
            transform: translateX(-28px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-17px) translateY(-30vh);
            transform: translateX(-17px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-15px) translateY(-40vh);
            transform: translateX(-15px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(3px) translateY(-50vh);
            transform: translateX(3px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-3px) translateY(-100vh);
            transform: translateX(-3px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(28) {
  -webkit-animation-name: particle-28;
          animation-name: particle-28;
}

@-webkit-keyframes particle-29 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(40px) translateY(-10vh);
            transform: translateX(40px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-19px) translateY(-20vh);
            transform: translateX(-19px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-12px) translateY(-30vh);
            transform: translateX(-12px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-20px) translateY(-40vh);
            transform: translateX(-20px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(27px) translateY(-50vh);
            transform: translateX(27px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(28px) translateY(-100vh);
            transform: translateX(28px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-29 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(40px) translateY(-10vh);
            transform: translateX(40px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-19px) translateY(-20vh);
            transform: translateX(-19px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-12px) translateY(-30vh);
            transform: translateX(-12px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-20px) translateY(-40vh);
            transform: translateX(-20px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(27px) translateY(-50vh);
            transform: translateX(27px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(28px) translateY(-100vh);
            transform: translateX(28px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(29) {
  -webkit-animation-name: particle-29;
          animation-name: particle-29;
}

@-webkit-keyframes particle-30 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-20px) translateY(-10vh);
            transform: translateX(-20px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-31px) translateY(-20vh);
            transform: translateX(-31px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(1px) translateY(-30vh);
            transform: translateX(1px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(19px) translateY(-40vh);
            transform: translateX(19px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(11px) translateY(-50vh);
            transform: translateX(11px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-29px) translateY(-100vh);
            transform: translateX(-29px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-30 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-20px) translateY(-10vh);
            transform: translateX(-20px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-31px) translateY(-20vh);
            transform: translateX(-31px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(1px) translateY(-30vh);
            transform: translateX(1px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(19px) translateY(-40vh);
            transform: translateX(19px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(11px) translateY(-50vh);
            transform: translateX(11px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-29px) translateY(-100vh);
            transform: translateX(-29px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(30) {
  -webkit-animation-name: particle-30;
          animation-name: particle-30;
}

@-webkit-keyframes particle-31 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-5px) translateY(-10vh);
            transform: translateX(-5px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(40px) translateY(-20vh);
            transform: translateX(40px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(29px) translateY(-30vh);
            transform: translateX(29px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(14px) translateY(-40vh);
            transform: translateX(14px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-36px) translateY(-50vh);
            transform: translateX(-36px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(4px) translateY(-100vh);
            transform: translateX(4px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-31 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-5px) translateY(-10vh);
            transform: translateX(-5px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(40px) translateY(-20vh);
            transform: translateX(40px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(29px) translateY(-30vh);
            transform: translateX(29px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(14px) translateY(-40vh);
            transform: translateX(14px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-36px) translateY(-50vh);
            transform: translateX(-36px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(4px) translateY(-100vh);
            transform: translateX(4px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(31) {
  -webkit-animation-name: particle-31;
          animation-name: particle-31;
}

@-webkit-keyframes particle-32 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(11px) translateY(-10vh);
            transform: translateX(11px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(25px) translateY(-20vh);
            transform: translateX(25px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(38px) translateY(-30vh);
            transform: translateX(38px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-16px) translateY(-40vh);
            transform: translateX(-16px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(33px) translateY(-50vh);
            transform: translateX(33px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(26px) translateY(-100vh);
            transform: translateX(26px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-32 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(11px) translateY(-10vh);
            transform: translateX(11px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(25px) translateY(-20vh);
            transform: translateX(25px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(38px) translateY(-30vh);
            transform: translateX(38px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-16px) translateY(-40vh);
            transform: translateX(-16px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(33px) translateY(-50vh);
            transform: translateX(33px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(26px) translateY(-100vh);
            transform: translateX(26px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(32) {
  -webkit-animation-name: particle-32;
          animation-name: particle-32;
}

@-webkit-keyframes particle-33 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(6px) translateY(-10vh);
            transform: translateX(6px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(29px) translateY(-20vh);
            transform: translateX(29px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(26px) translateY(-30vh);
            transform: translateX(26px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-21px) translateY(-40vh);
            transform: translateX(-21px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(19px) translateY(-50vh);
            transform: translateX(19px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(20px) translateY(-100vh);
            transform: translateX(20px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-33 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(6px) translateY(-10vh);
            transform: translateX(6px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(29px) translateY(-20vh);
            transform: translateX(29px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(26px) translateY(-30vh);
            transform: translateX(26px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-21px) translateY(-40vh);
            transform: translateX(-21px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(19px) translateY(-50vh);
            transform: translateX(19px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(20px) translateY(-100vh);
            transform: translateX(20px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(33) {
  -webkit-animation-name: particle-33;
          animation-name: particle-33;
}

@-webkit-keyframes particle-34 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(38px) translateY(-10vh);
            transform: translateX(38px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-24px) translateY(-20vh);
            transform: translateX(-24px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(15px) translateY(-30vh);
            transform: translateX(15px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(33px) translateY(-40vh);
            transform: translateX(33px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(18px) translateY(-50vh);
            transform: translateX(18px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(40px) translateY(-100vh);
            transform: translateX(40px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-34 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(38px) translateY(-10vh);
            transform: translateX(38px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-24px) translateY(-20vh);
            transform: translateX(-24px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(15px) translateY(-30vh);
            transform: translateX(15px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(33px) translateY(-40vh);
            transform: translateX(33px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(18px) translateY(-50vh);
            transform: translateX(18px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(40px) translateY(-100vh);
            transform: translateX(40px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(34) {
  -webkit-animation-name: particle-34;
          animation-name: particle-34;
}

@-webkit-keyframes particle-35 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(14px) translateY(-10vh);
            transform: translateX(14px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(35px) translateY(-20vh);
            transform: translateX(35px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(18px) translateY(-30vh);
            transform: translateX(18px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-23px) translateY(-40vh);
            transform: translateX(-23px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-25px) translateY(-50vh);
            transform: translateX(-25px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(8px) translateY(-100vh);
            transform: translateX(8px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-35 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(14px) translateY(-10vh);
            transform: translateX(14px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(35px) translateY(-20vh);
            transform: translateX(35px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(18px) translateY(-30vh);
            transform: translateX(18px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-23px) translateY(-40vh);
            transform: translateX(-23px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-25px) translateY(-50vh);
            transform: translateX(-25px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(8px) translateY(-100vh);
            transform: translateX(8px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(35) {
  -webkit-animation-name: particle-35;
          animation-name: particle-35;
}

@-webkit-keyframes particle-36 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(18px) translateY(-10vh);
            transform: translateX(18px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-9px) translateY(-20vh);
            transform: translateX(-9px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-9px) translateY(-30vh);
            transform: translateX(-9px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-32px) translateY(-40vh);
            transform: translateX(-32px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(27px) translateY(-50vh);
            transform: translateX(27px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-14px) translateY(-100vh);
            transform: translateX(-14px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-36 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(18px) translateY(-10vh);
            transform: translateX(18px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-9px) translateY(-20vh);
            transform: translateX(-9px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-9px) translateY(-30vh);
            transform: translateX(-9px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-32px) translateY(-40vh);
            transform: translateX(-32px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(27px) translateY(-50vh);
            transform: translateX(27px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-14px) translateY(-100vh);
            transform: translateX(-14px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(36) {
  -webkit-animation-name: particle-36;
          animation-name: particle-36;
}

@-webkit-keyframes particle-37 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-18px) translateY(-10vh);
            transform: translateX(-18px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-25px) translateY(-20vh);
            transform: translateX(-25px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-22px) translateY(-30vh);
            transform: translateX(-22px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(8px) translateY(-40vh);
            transform: translateX(8px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-34px) translateY(-50vh);
            transform: translateX(-34px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-30px) translateY(-100vh);
            transform: translateX(-30px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-37 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-18px) translateY(-10vh);
            transform: translateX(-18px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-25px) translateY(-20vh);
            transform: translateX(-25px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-22px) translateY(-30vh);
            transform: translateX(-22px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(8px) translateY(-40vh);
            transform: translateX(8px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-34px) translateY(-50vh);
            transform: translateX(-34px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-30px) translateY(-100vh);
            transform: translateX(-30px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(37) {
  -webkit-animation-name: particle-37;
          animation-name: particle-37;
}

@-webkit-keyframes particle-38 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(23px) translateY(-10vh);
            transform: translateX(23px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-22px) translateY(-20vh);
            transform: translateX(-22px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-34px) translateY(-30vh);
            transform: translateX(-34px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-31px) translateY(-40vh);
            transform: translateX(-31px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(36px) translateY(-50vh);
            transform: translateX(36px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-38px) translateY(-100vh);
            transform: translateX(-38px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-38 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(23px) translateY(-10vh);
            transform: translateX(23px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-22px) translateY(-20vh);
            transform: translateX(-22px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-34px) translateY(-30vh);
            transform: translateX(-34px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-31px) translateY(-40vh);
            transform: translateX(-31px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(36px) translateY(-50vh);
            transform: translateX(36px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-38px) translateY(-100vh);
            transform: translateX(-38px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(38) {
  -webkit-animation-name: particle-38;
          animation-name: particle-38;
}

@-webkit-keyframes particle-39 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-17px) translateY(-10vh);
            transform: translateX(-17px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(30px) translateY(-20vh);
            transform: translateX(30px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-37px) translateY(-30vh);
            transform: translateX(-37px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(24px) translateY(-40vh);
            transform: translateX(24px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(39px) translateY(-50vh);
            transform: translateX(39px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-24px) translateY(-100vh);
            transform: translateX(-24px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-39 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-17px) translateY(-10vh);
            transform: translateX(-17px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(30px) translateY(-20vh);
            transform: translateX(30px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-37px) translateY(-30vh);
            transform: translateX(-37px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(24px) translateY(-40vh);
            transform: translateX(24px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(39px) translateY(-50vh);
            transform: translateX(39px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-24px) translateY(-100vh);
            transform: translateX(-24px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(39) {
  -webkit-animation-name: particle-39;
          animation-name: particle-39;
}

@-webkit-keyframes particle-40 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-17px) translateY(-10vh);
            transform: translateX(-17px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-10px) translateY(-20vh);
            transform: translateX(-10px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(23px) translateY(-30vh);
            transform: translateX(23px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(23px) translateY(-40vh);
            transform: translateX(23px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-35px) translateY(-50vh);
            transform: translateX(-35px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-25px) translateY(-100vh);
            transform: translateX(-25px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-40 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-17px) translateY(-10vh);
            transform: translateX(-17px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-10px) translateY(-20vh);
            transform: translateX(-10px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(23px) translateY(-30vh);
            transform: translateX(23px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(23px) translateY(-40vh);
            transform: translateX(23px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-35px) translateY(-50vh);
            transform: translateX(-35px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-25px) translateY(-100vh);
            transform: translateX(-25px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(40) {
  -webkit-animation-name: particle-40;
          animation-name: particle-40;
}

@-webkit-keyframes particle-41 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-9px) translateY(-10vh);
            transform: translateX(-9px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-7px) translateY(-20vh);
            transform: translateX(-7px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(29px) translateY(-30vh);
            transform: translateX(29px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(23px) translateY(-40vh);
            transform: translateX(23px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(23px) translateY(-50vh);
            transform: translateX(23px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-29px) translateY(-100vh);
            transform: translateX(-29px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-41 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-9px) translateY(-10vh);
            transform: translateX(-9px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-7px) translateY(-20vh);
            transform: translateX(-7px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(29px) translateY(-30vh);
            transform: translateX(29px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(23px) translateY(-40vh);
            transform: translateX(23px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(23px) translateY(-50vh);
            transform: translateX(23px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-29px) translateY(-100vh);
            transform: translateX(-29px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(41) {
  -webkit-animation-name: particle-41;
          animation-name: particle-41;
}

@-webkit-keyframes particle-42 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-13px) translateY(-10vh);
            transform: translateX(-13px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(22px) translateY(-20vh);
            transform: translateX(22px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-17px) translateY(-30vh);
            transform: translateX(-17px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-13px) translateY(-40vh);
            transform: translateX(-13px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(33px) translateY(-50vh);
            transform: translateX(33px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(4px) translateY(-100vh);
            transform: translateX(4px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-42 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-13px) translateY(-10vh);
            transform: translateX(-13px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(22px) translateY(-20vh);
            transform: translateX(22px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-17px) translateY(-30vh);
            transform: translateX(-17px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-13px) translateY(-40vh);
            transform: translateX(-13px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(33px) translateY(-50vh);
            transform: translateX(33px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(4px) translateY(-100vh);
            transform: translateX(4px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(42) {
  -webkit-animation-name: particle-42;
          animation-name: particle-42;
}

@-webkit-keyframes particle-43 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(40px) translateY(-10vh);
            transform: translateX(40px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(1px) translateY(-20vh);
            transform: translateX(1px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-25px) translateY(-30vh);
            transform: translateX(-25px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(15px) translateY(-40vh);
            transform: translateX(15px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(39px) translateY(-50vh);
            transform: translateX(39px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(7px) translateY(-100vh);
            transform: translateX(7px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-43 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(40px) translateY(-10vh);
            transform: translateX(40px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(1px) translateY(-20vh);
            transform: translateX(1px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-25px) translateY(-30vh);
            transform: translateX(-25px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(15px) translateY(-40vh);
            transform: translateX(15px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(39px) translateY(-50vh);
            transform: translateX(39px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(7px) translateY(-100vh);
            transform: translateX(7px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(43) {
  -webkit-animation-name: particle-43;
          animation-name: particle-43;
}

@-webkit-keyframes particle-44 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(30px) translateY(-10vh);
            transform: translateX(30px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(26px) translateY(-20vh);
            transform: translateX(26px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(3px) translateY(-30vh);
            transform: translateX(3px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-11px) translateY(-40vh);
            transform: translateX(-11px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-10px) translateY(-50vh);
            transform: translateX(-10px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(37px) translateY(-100vh);
            transform: translateX(37px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-44 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(30px) translateY(-10vh);
            transform: translateX(30px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(26px) translateY(-20vh);
            transform: translateX(26px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(3px) translateY(-30vh);
            transform: translateX(3px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-11px) translateY(-40vh);
            transform: translateX(-11px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-10px) translateY(-50vh);
            transform: translateX(-10px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(37px) translateY(-100vh);
            transform: translateX(37px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(44) {
  -webkit-animation-name: particle-44;
          animation-name: particle-44;
}

@-webkit-keyframes particle-45 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(17px) translateY(-10vh);
            transform: translateX(17px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-19px) translateY(-20vh);
            transform: translateX(-19px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-17px) translateY(-30vh);
            transform: translateX(-17px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(2px) translateY(-40vh);
            transform: translateX(2px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-27px) translateY(-50vh);
            transform: translateX(-27px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-28px) translateY(-100vh);
            transform: translateX(-28px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-45 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(17px) translateY(-10vh);
            transform: translateX(17px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-19px) translateY(-20vh);
            transform: translateX(-19px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-17px) translateY(-30vh);
            transform: translateX(-17px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(2px) translateY(-40vh);
            transform: translateX(2px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-27px) translateY(-50vh);
            transform: translateX(-27px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-28px) translateY(-100vh);
            transform: translateX(-28px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(45) {
  -webkit-animation-name: particle-45;
          animation-name: particle-45;
}

@-webkit-keyframes particle-46 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-12px) translateY(-10vh);
            transform: translateX(-12px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(7px) translateY(-20vh);
            transform: translateX(7px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-14px) translateY(-30vh);
            transform: translateX(-14px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-35px) translateY(-40vh);
            transform: translateX(-35px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-9px) translateY(-50vh);
            transform: translateX(-9px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-17px) translateY(-100vh);
            transform: translateX(-17px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-46 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-12px) translateY(-10vh);
            transform: translateX(-12px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(7px) translateY(-20vh);
            transform: translateX(7px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-14px) translateY(-30vh);
            transform: translateX(-14px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-35px) translateY(-40vh);
            transform: translateX(-35px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-9px) translateY(-50vh);
            transform: translateX(-9px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-17px) translateY(-100vh);
            transform: translateX(-17px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(46) {
  -webkit-animation-name: particle-46;
          animation-name: particle-46;
}

@-webkit-keyframes particle-47 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(1px) translateY(-10vh);
            transform: translateX(1px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-34px) translateY(-20vh);
            transform: translateX(-34px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(33px) translateY(-30vh);
            transform: translateX(33px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-11px) translateY(-40vh);
            transform: translateX(-11px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-36px) translateY(-50vh);
            transform: translateX(-36px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-5px) translateY(-100vh);
            transform: translateX(-5px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-47 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(1px) translateY(-10vh);
            transform: translateX(1px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-34px) translateY(-20vh);
            transform: translateX(-34px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(33px) translateY(-30vh);
            transform: translateX(33px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-11px) translateY(-40vh);
            transform: translateX(-11px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-36px) translateY(-50vh);
            transform: translateX(-36px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-5px) translateY(-100vh);
            transform: translateX(-5px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(47) {
  -webkit-animation-name: particle-47;
          animation-name: particle-47;
}

@-webkit-keyframes particle-48 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(38px) translateY(-10vh);
            transform: translateX(38px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(22px) translateY(-20vh);
            transform: translateX(22px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(32px) translateY(-30vh);
            transform: translateX(32px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-13px) translateY(-40vh);
            transform: translateX(-13px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-22px) translateY(-50vh);
            transform: translateX(-22px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(17px) translateY(-100vh);
            transform: translateX(17px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-48 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(38px) translateY(-10vh);
            transform: translateX(38px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(22px) translateY(-20vh);
            transform: translateX(22px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(32px) translateY(-30vh);
            transform: translateX(32px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-13px) translateY(-40vh);
            transform: translateX(-13px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-22px) translateY(-50vh);
            transform: translateX(-22px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(17px) translateY(-100vh);
            transform: translateX(17px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(48) {
  -webkit-animation-name: particle-48;
          animation-name: particle-48;
}

@-webkit-keyframes particle-49 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(10px) translateY(-10vh);
            transform: translateX(10px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(7px) translateY(-20vh);
            transform: translateX(7px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(20px) translateY(-30vh);
            transform: translateX(20px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(32px) translateY(-40vh);
            transform: translateX(32px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(4px) translateY(-50vh);
            transform: translateX(4px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(31px) translateY(-100vh);
            transform: translateX(31px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-49 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(10px) translateY(-10vh);
            transform: translateX(10px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(7px) translateY(-20vh);
            transform: translateX(7px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(20px) translateY(-30vh);
            transform: translateX(20px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(32px) translateY(-40vh);
            transform: translateX(32px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(4px) translateY(-50vh);
            transform: translateX(4px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(31px) translateY(-100vh);
            transform: translateX(31px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(49) {
  -webkit-animation-name: particle-49;
          animation-name: particle-49;
}

@-webkit-keyframes particle-50 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(36px) translateY(-10vh);
            transform: translateX(36px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-14px) translateY(-20vh);
            transform: translateX(-14px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(3px) translateY(-30vh);
            transform: translateX(3px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-19px) translateY(-40vh);
            transform: translateX(-19px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-27px) translateY(-50vh);
            transform: translateX(-27px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(6px) translateY(-100vh);
            transform: translateX(6px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-50 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(36px) translateY(-10vh);
            transform: translateX(36px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-14px) translateY(-20vh);
            transform: translateX(-14px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(3px) translateY(-30vh);
            transform: translateX(3px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-19px) translateY(-40vh);
            transform: translateX(-19px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-27px) translateY(-50vh);
            transform: translateX(-27px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(6px) translateY(-100vh);
            transform: translateX(6px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(50) {
  -webkit-animation-name: particle-50;
          animation-name: particle-50;
}

@-webkit-keyframes particle-51 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(15px) translateY(-10vh);
            transform: translateX(15px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-37px) translateY(-20vh);
            transform: translateX(-37px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(12px) translateY(-30vh);
            transform: translateX(12px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(17px) translateY(-40vh);
            transform: translateX(17px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(12px) translateY(-50vh);
            transform: translateX(12px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-36px) translateY(-100vh);
            transform: translateX(-36px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-51 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(15px) translateY(-10vh);
            transform: translateX(15px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-37px) translateY(-20vh);
            transform: translateX(-37px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(12px) translateY(-30vh);
            transform: translateX(12px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(17px) translateY(-40vh);
            transform: translateX(17px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(12px) translateY(-50vh);
            transform: translateX(12px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-36px) translateY(-100vh);
            transform: translateX(-36px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(51) {
  -webkit-animation-name: particle-51;
          animation-name: particle-51;
}

@-webkit-keyframes particle-52 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(5px) translateY(-10vh);
            transform: translateX(5px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(22px) translateY(-20vh);
            transform: translateX(22px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-2px) translateY(-30vh);
            transform: translateX(-2px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-3px) translateY(-40vh);
            transform: translateX(-3px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(20px) translateY(-50vh);
            transform: translateX(20px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-7px) translateY(-100vh);
            transform: translateX(-7px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-52 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(5px) translateY(-10vh);
            transform: translateX(5px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(22px) translateY(-20vh);
            transform: translateX(22px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-2px) translateY(-30vh);
            transform: translateX(-2px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-3px) translateY(-40vh);
            transform: translateX(-3px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(20px) translateY(-50vh);
            transform: translateX(20px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-7px) translateY(-100vh);
            transform: translateX(-7px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(52) {
  -webkit-animation-name: particle-52;
          animation-name: particle-52;
}

@-webkit-keyframes particle-53 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-37px) translateY(-10vh);
            transform: translateX(-37px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-27px) translateY(-20vh);
            transform: translateX(-27px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-11px) translateY(-30vh);
            transform: translateX(-11px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-12px) translateY(-40vh);
            transform: translateX(-12px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(3px) translateY(-50vh);
            transform: translateX(3px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-23px) translateY(-100vh);
            transform: translateX(-23px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-53 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-37px) translateY(-10vh);
            transform: translateX(-37px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-27px) translateY(-20vh);
            transform: translateX(-27px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-11px) translateY(-30vh);
            transform: translateX(-11px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-12px) translateY(-40vh);
            transform: translateX(-12px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(3px) translateY(-50vh);
            transform: translateX(3px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-23px) translateY(-100vh);
            transform: translateX(-23px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(53) {
  -webkit-animation-name: particle-53;
          animation-name: particle-53;
}

@-webkit-keyframes particle-54 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-26px) translateY(-10vh);
            transform: translateX(-26px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(9px) translateY(-20vh);
            transform: translateX(9px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(11px) translateY(-30vh);
            transform: translateX(11px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-13px) translateY(-40vh);
            transform: translateX(-13px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(25px) translateY(-50vh);
            transform: translateX(25px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-15px) translateY(-100vh);
            transform: translateX(-15px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-54 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-26px) translateY(-10vh);
            transform: translateX(-26px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(9px) translateY(-20vh);
            transform: translateX(9px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(11px) translateY(-30vh);
            transform: translateX(11px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-13px) translateY(-40vh);
            transform: translateX(-13px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(25px) translateY(-50vh);
            transform: translateX(25px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-15px) translateY(-100vh);
            transform: translateX(-15px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(54) {
  -webkit-animation-name: particle-54;
          animation-name: particle-54;
}

@-webkit-keyframes particle-55 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(29px) translateY(-10vh);
            transform: translateX(29px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-24px) translateY(-20vh);
            transform: translateX(-24px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-2px) translateY(-30vh);
            transform: translateX(-2px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(21px) translateY(-40vh);
            transform: translateX(21px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(11px) translateY(-50vh);
            transform: translateX(11px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-20px) translateY(-100vh);
            transform: translateX(-20px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-55 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(29px) translateY(-10vh);
            transform: translateX(29px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-24px) translateY(-20vh);
            transform: translateX(-24px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-2px) translateY(-30vh);
            transform: translateX(-2px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(21px) translateY(-40vh);
            transform: translateX(21px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(11px) translateY(-50vh);
            transform: translateX(11px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-20px) translateY(-100vh);
            transform: translateX(-20px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(55) {
  -webkit-animation-name: particle-55;
          animation-name: particle-55;
}

@-webkit-keyframes particle-56 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-6px) translateY(-10vh);
            transform: translateX(-6px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-20px) translateY(-20vh);
            transform: translateX(-20px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(35px) translateY(-30vh);
            transform: translateX(35px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-4px) translateY(-40vh);
            transform: translateX(-4px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(1px) translateY(-50vh);
            transform: translateX(1px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(3px) translateY(-100vh);
            transform: translateX(3px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-56 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-6px) translateY(-10vh);
            transform: translateX(-6px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-20px) translateY(-20vh);
            transform: translateX(-20px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(35px) translateY(-30vh);
            transform: translateX(35px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-4px) translateY(-40vh);
            transform: translateX(-4px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(1px) translateY(-50vh);
            transform: translateX(1px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(3px) translateY(-100vh);
            transform: translateX(3px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(56) {
  -webkit-animation-name: particle-56;
          animation-name: particle-56;
}

@-webkit-keyframes particle-57 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(39px) translateY(-10vh);
            transform: translateX(39px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(24px) translateY(-20vh);
            transform: translateX(24px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-23px) translateY(-30vh);
            transform: translateX(-23px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-20px) translateY(-40vh);
            transform: translateX(-20px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-7px) translateY(-50vh);
            transform: translateX(-7px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-25px) translateY(-100vh);
            transform: translateX(-25px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-57 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(39px) translateY(-10vh);
            transform: translateX(39px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(24px) translateY(-20vh);
            transform: translateX(24px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-23px) translateY(-30vh);
            transform: translateX(-23px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-20px) translateY(-40vh);
            transform: translateX(-20px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-7px) translateY(-50vh);
            transform: translateX(-7px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-25px) translateY(-100vh);
            transform: translateX(-25px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(57) {
  -webkit-animation-name: particle-57;
          animation-name: particle-57;
}

@-webkit-keyframes particle-58 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-38px) translateY(-10vh);
            transform: translateX(-38px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(29px) translateY(-20vh);
            transform: translateX(29px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(39px) translateY(-30vh);
            transform: translateX(39px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(0px) translateY(-40vh);
            transform: translateX(0px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(8px) translateY(-50vh);
            transform: translateX(8px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(37px) translateY(-100vh);
            transform: translateX(37px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-58 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-38px) translateY(-10vh);
            transform: translateX(-38px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(29px) translateY(-20vh);
            transform: translateX(29px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(39px) translateY(-30vh);
            transform: translateX(39px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(0px) translateY(-40vh);
            transform: translateX(0px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(8px) translateY(-50vh);
            transform: translateX(8px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(37px) translateY(-100vh);
            transform: translateX(37px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(58) {
  -webkit-animation-name: particle-58;
          animation-name: particle-58;
}

@-webkit-keyframes particle-59 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-4px) translateY(-10vh);
            transform: translateX(-4px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-35px) translateY(-20vh);
            transform: translateX(-35px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-23px) translateY(-30vh);
            transform: translateX(-23px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(1px) translateY(-40vh);
            transform: translateX(1px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-33px) translateY(-50vh);
            transform: translateX(-33px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(13px) translateY(-100vh);
            transform: translateX(13px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-59 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-4px) translateY(-10vh);
            transform: translateX(-4px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-35px) translateY(-20vh);
            transform: translateX(-35px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-23px) translateY(-30vh);
            transform: translateX(-23px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(1px) translateY(-40vh);
            transform: translateX(1px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-33px) translateY(-50vh);
            transform: translateX(-33px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(13px) translateY(-100vh);
            transform: translateX(13px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(59) {
  -webkit-animation-name: particle-59;
          animation-name: particle-59;
}

@-webkit-keyframes particle-60 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-34px) translateY(-10vh);
            transform: translateX(-34px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(13px) translateY(-20vh);
            transform: translateX(13px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(26px) translateY(-30vh);
            transform: translateX(26px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(22px) translateY(-40vh);
            transform: translateX(22px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(34px) translateY(-50vh);
            transform: translateX(34px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(37px) translateY(-100vh);
            transform: translateX(37px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-60 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-34px) translateY(-10vh);
            transform: translateX(-34px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(13px) translateY(-20vh);
            transform: translateX(13px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(26px) translateY(-30vh);
            transform: translateX(26px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(22px) translateY(-40vh);
            transform: translateX(22px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(34px) translateY(-50vh);
            transform: translateX(34px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(37px) translateY(-100vh);
            transform: translateX(37px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(60) {
  -webkit-animation-name: particle-60;
          animation-name: particle-60;
}

@-webkit-keyframes particle-61 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(39px) translateY(-10vh);
            transform: translateX(39px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-37px) translateY(-20vh);
            transform: translateX(-37px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-15px) translateY(-30vh);
            transform: translateX(-15px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(16px) translateY(-40vh);
            transform: translateX(16px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-26px) translateY(-50vh);
            transform: translateX(-26px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-32px) translateY(-100vh);
            transform: translateX(-32px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-61 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(39px) translateY(-10vh);
            transform: translateX(39px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-37px) translateY(-20vh);
            transform: translateX(-37px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-15px) translateY(-30vh);
            transform: translateX(-15px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(16px) translateY(-40vh);
            transform: translateX(16px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-26px) translateY(-50vh);
            transform: translateX(-26px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-32px) translateY(-100vh);
            transform: translateX(-32px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(61) {
  -webkit-animation-name: particle-61;
          animation-name: particle-61;
}

@-webkit-keyframes particle-62 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(26px) translateY(-10vh);
            transform: translateX(26px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-6px) translateY(-20vh);
            transform: translateX(-6px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-27px) translateY(-30vh);
            transform: translateX(-27px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(8px) translateY(-40vh);
            transform: translateX(8px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-29px) translateY(-50vh);
            transform: translateX(-29px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-12px) translateY(-100vh);
            transform: translateX(-12px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-62 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(26px) translateY(-10vh);
            transform: translateX(26px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-6px) translateY(-20vh);
            transform: translateX(-6px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-27px) translateY(-30vh);
            transform: translateX(-27px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(8px) translateY(-40vh);
            transform: translateX(8px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-29px) translateY(-50vh);
            transform: translateX(-29px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-12px) translateY(-100vh);
            transform: translateX(-12px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(62) {
  -webkit-animation-name: particle-62;
          animation-name: particle-62;
}

@-webkit-keyframes particle-63 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(11px) translateY(-10vh);
            transform: translateX(11px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-3px) translateY(-20vh);
            transform: translateX(-3px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(5px) translateY(-30vh);
            transform: translateX(5px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(8px) translateY(-40vh);
            transform: translateX(8px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(23px) translateY(-50vh);
            transform: translateX(23px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(32px) translateY(-100vh);
            transform: translateX(32px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-63 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(11px) translateY(-10vh);
            transform: translateX(11px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-3px) translateY(-20vh);
            transform: translateX(-3px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(5px) translateY(-30vh);
            transform: translateX(5px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(8px) translateY(-40vh);
            transform: translateX(8px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(23px) translateY(-50vh);
            transform: translateX(23px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(32px) translateY(-100vh);
            transform: translateX(32px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(63) {
  -webkit-animation-name: particle-63;
          animation-name: particle-63;
}

@-webkit-keyframes particle-64 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(1px) translateY(-10vh);
            transform: translateX(1px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-11px) translateY(-20vh);
            transform: translateX(-11px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(8px) translateY(-30vh);
            transform: translateX(8px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(8px) translateY(-40vh);
            transform: translateX(8px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-25px) translateY(-50vh);
            transform: translateX(-25px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(27px) translateY(-100vh);
            transform: translateX(27px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-64 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(1px) translateY(-10vh);
            transform: translateX(1px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-11px) translateY(-20vh);
            transform: translateX(-11px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(8px) translateY(-30vh);
            transform: translateX(8px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(8px) translateY(-40vh);
            transform: translateX(8px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-25px) translateY(-50vh);
            transform: translateX(-25px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(27px) translateY(-100vh);
            transform: translateX(27px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(64) {
  -webkit-animation-name: particle-64;
          animation-name: particle-64;
}

@-webkit-keyframes particle-65 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(24px) translateY(-10vh);
            transform: translateX(24px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(24px) translateY(-20vh);
            transform: translateX(24px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(11px) translateY(-30vh);
            transform: translateX(11px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(4px) translateY(-40vh);
            transform: translateX(4px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-20px) translateY(-50vh);
            transform: translateX(-20px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(4px) translateY(-100vh);
            transform: translateX(4px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-65 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(24px) translateY(-10vh);
            transform: translateX(24px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(24px) translateY(-20vh);
            transform: translateX(24px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(11px) translateY(-30vh);
            transform: translateX(11px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(4px) translateY(-40vh);
            transform: translateX(4px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-20px) translateY(-50vh);
            transform: translateX(-20px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(4px) translateY(-100vh);
            transform: translateX(4px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(65) {
  -webkit-animation-name: particle-65;
          animation-name: particle-65;
}

@-webkit-keyframes particle-66 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(33px) translateY(-10vh);
            transform: translateX(33px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(12px) translateY(-20vh);
            transform: translateX(12px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-22px) translateY(-30vh);
            transform: translateX(-22px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-7px) translateY(-40vh);
            transform: translateX(-7px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(25px) translateY(-50vh);
            transform: translateX(25px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(24px) translateY(-100vh);
            transform: translateX(24px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-66 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(33px) translateY(-10vh);
            transform: translateX(33px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(12px) translateY(-20vh);
            transform: translateX(12px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-22px) translateY(-30vh);
            transform: translateX(-22px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-7px) translateY(-40vh);
            transform: translateX(-7px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(25px) translateY(-50vh);
            transform: translateX(25px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(24px) translateY(-100vh);
            transform: translateX(24px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(66) {
  -webkit-animation-name: particle-66;
          animation-name: particle-66;
}

@-webkit-keyframes particle-67 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(2px) translateY(-10vh);
            transform: translateX(2px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(6px) translateY(-20vh);
            transform: translateX(6px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(4px) translateY(-30vh);
            transform: translateX(4px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(35px) translateY(-40vh);
            transform: translateX(35px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(2px) translateY(-50vh);
            transform: translateX(2px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(3px) translateY(-100vh);
            transform: translateX(3px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-67 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(2px) translateY(-10vh);
            transform: translateX(2px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(6px) translateY(-20vh);
            transform: translateX(6px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(4px) translateY(-30vh);
            transform: translateX(4px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(35px) translateY(-40vh);
            transform: translateX(35px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(2px) translateY(-50vh);
            transform: translateX(2px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(3px) translateY(-100vh);
            transform: translateX(3px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(67) {
  -webkit-animation-name: particle-67;
          animation-name: particle-67;
}

@-webkit-keyframes particle-68 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(13px) translateY(-10vh);
            transform: translateX(13px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-15px) translateY(-20vh);
            transform: translateX(-15px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(14px) translateY(-30vh);
            transform: translateX(14px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(3px) translateY(-40vh);
            transform: translateX(3px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-11px) translateY(-50vh);
            transform: translateX(-11px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-34px) translateY(-100vh);
            transform: translateX(-34px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-68 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(13px) translateY(-10vh);
            transform: translateX(13px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-15px) translateY(-20vh);
            transform: translateX(-15px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(14px) translateY(-30vh);
            transform: translateX(14px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(3px) translateY(-40vh);
            transform: translateX(3px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-11px) translateY(-50vh);
            transform: translateX(-11px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-34px) translateY(-100vh);
            transform: translateX(-34px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(68) {
  -webkit-animation-name: particle-68;
          animation-name: particle-68;
}

@-webkit-keyframes particle-69 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(38px) translateY(-10vh);
            transform: translateX(38px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(40px) translateY(-20vh);
            transform: translateX(40px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-3px) translateY(-30vh);
            transform: translateX(-3px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-15px) translateY(-40vh);
            transform: translateX(-15px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(37px) translateY(-50vh);
            transform: translateX(37px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(11px) translateY(-100vh);
            transform: translateX(11px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-69 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(38px) translateY(-10vh);
            transform: translateX(38px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(40px) translateY(-20vh);
            transform: translateX(40px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-3px) translateY(-30vh);
            transform: translateX(-3px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-15px) translateY(-40vh);
            transform: translateX(-15px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(37px) translateY(-50vh);
            transform: translateX(37px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(11px) translateY(-100vh);
            transform: translateX(11px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(69) {
  -webkit-animation-name: particle-69;
          animation-name: particle-69;
}

@-webkit-keyframes particle-70 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(12px) translateY(-10vh);
            transform: translateX(12px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-2px) translateY(-20vh);
            transform: translateX(-2px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-38px) translateY(-30vh);
            transform: translateX(-38px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-9px) translateY(-40vh);
            transform: translateX(-9px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-14px) translateY(-50vh);
            transform: translateX(-14px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(11px) translateY(-100vh);
            transform: translateX(11px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-70 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(12px) translateY(-10vh);
            transform: translateX(12px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-2px) translateY(-20vh);
            transform: translateX(-2px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-38px) translateY(-30vh);
            transform: translateX(-38px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-9px) translateY(-40vh);
            transform: translateX(-9px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-14px) translateY(-50vh);
            transform: translateX(-14px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(11px) translateY(-100vh);
            transform: translateX(11px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(70) {
  -webkit-animation-name: particle-70;
          animation-name: particle-70;
}

@-webkit-keyframes particle-71 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(10px) translateY(-10vh);
            transform: translateX(10px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(21px) translateY(-20vh);
            transform: translateX(21px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-16px) translateY(-30vh);
            transform: translateX(-16px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(12px) translateY(-40vh);
            transform: translateX(12px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-34px) translateY(-50vh);
            transform: translateX(-34px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(18px) translateY(-100vh);
            transform: translateX(18px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-71 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(10px) translateY(-10vh);
            transform: translateX(10px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(21px) translateY(-20vh);
            transform: translateX(21px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-16px) translateY(-30vh);
            transform: translateX(-16px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(12px) translateY(-40vh);
            transform: translateX(12px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-34px) translateY(-50vh);
            transform: translateX(-34px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(18px) translateY(-100vh);
            transform: translateX(18px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(71) {
  -webkit-animation-name: particle-71;
          animation-name: particle-71;
}

@-webkit-keyframes particle-72 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-39px) translateY(-10vh);
            transform: translateX(-39px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(1px) translateY(-20vh);
            transform: translateX(1px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-37px) translateY(-30vh);
            transform: translateX(-37px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(34px) translateY(-40vh);
            transform: translateX(34px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(36px) translateY(-50vh);
            transform: translateX(36px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-20px) translateY(-100vh);
            transform: translateX(-20px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-72 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-39px) translateY(-10vh);
            transform: translateX(-39px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(1px) translateY(-20vh);
            transform: translateX(1px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-37px) translateY(-30vh);
            transform: translateX(-37px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(34px) translateY(-40vh);
            transform: translateX(34px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(36px) translateY(-50vh);
            transform: translateX(36px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-20px) translateY(-100vh);
            transform: translateX(-20px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(72) {
  -webkit-animation-name: particle-72;
          animation-name: particle-72;
}

@-webkit-keyframes particle-73 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-27px) translateY(-10vh);
            transform: translateX(-27px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(32px) translateY(-20vh);
            transform: translateX(32px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-3px) translateY(-30vh);
            transform: translateX(-3px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-27px) translateY(-40vh);
            transform: translateX(-27px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-36px) translateY(-50vh);
            transform: translateX(-36px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-5px) translateY(-100vh);
            transform: translateX(-5px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-73 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-27px) translateY(-10vh);
            transform: translateX(-27px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(32px) translateY(-20vh);
            transform: translateX(32px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-3px) translateY(-30vh);
            transform: translateX(-3px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-27px) translateY(-40vh);
            transform: translateX(-27px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-36px) translateY(-50vh);
            transform: translateX(-36px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-5px) translateY(-100vh);
            transform: translateX(-5px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(73) {
  -webkit-animation-name: particle-73;
          animation-name: particle-73;
}

@-webkit-keyframes particle-74 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(18px) translateY(-10vh);
            transform: translateX(18px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(39px) translateY(-20vh);
            transform: translateX(39px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(15px) translateY(-30vh);
            transform: translateX(15px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(2px) translateY(-40vh);
            transform: translateX(2px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(24px) translateY(-50vh);
            transform: translateX(24px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-20px) translateY(-100vh);
            transform: translateX(-20px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-74 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(18px) translateY(-10vh);
            transform: translateX(18px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(39px) translateY(-20vh);
            transform: translateX(39px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(15px) translateY(-30vh);
            transform: translateX(15px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(2px) translateY(-40vh);
            transform: translateX(2px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(24px) translateY(-50vh);
            transform: translateX(24px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-20px) translateY(-100vh);
            transform: translateX(-20px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(74) {
  -webkit-animation-name: particle-74;
          animation-name: particle-74;
}

@-webkit-keyframes particle-75 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(36px) translateY(-10vh);
            transform: translateX(36px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-31px) translateY(-20vh);
            transform: translateX(-31px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(9px) translateY(-30vh);
            transform: translateX(9px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(23px) translateY(-40vh);
            transform: translateX(23px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(28px) translateY(-50vh);
            transform: translateX(28px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-38px) translateY(-100vh);
            transform: translateX(-38px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-75 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(36px) translateY(-10vh);
            transform: translateX(36px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-31px) translateY(-20vh);
            transform: translateX(-31px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(9px) translateY(-30vh);
            transform: translateX(9px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(23px) translateY(-40vh);
            transform: translateX(23px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(28px) translateY(-50vh);
            transform: translateX(28px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-38px) translateY(-100vh);
            transform: translateX(-38px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(75) {
  -webkit-animation-name: particle-75;
          animation-name: particle-75;
}

@-webkit-keyframes particle-76 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(33px) translateY(-10vh);
            transform: translateX(33px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-18px) translateY(-20vh);
            transform: translateX(-18px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(21px) translateY(-30vh);
            transform: translateX(21px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-11px) translateY(-40vh);
            transform: translateX(-11px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-9px) translateY(-50vh);
            transform: translateX(-9px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-27px) translateY(-100vh);
            transform: translateX(-27px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-76 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(33px) translateY(-10vh);
            transform: translateX(33px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-18px) translateY(-20vh);
            transform: translateX(-18px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(21px) translateY(-30vh);
            transform: translateX(21px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-11px) translateY(-40vh);
            transform: translateX(-11px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-9px) translateY(-50vh);
            transform: translateX(-9px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-27px) translateY(-100vh);
            transform: translateX(-27px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(76) {
  -webkit-animation-name: particle-76;
          animation-name: particle-76;
}

@-webkit-keyframes particle-77 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-28px) translateY(-10vh);
            transform: translateX(-28px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-30px) translateY(-20vh);
            transform: translateX(-30px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(14px) translateY(-30vh);
            transform: translateX(14px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(21px) translateY(-40vh);
            transform: translateX(21px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-19px) translateY(-50vh);
            transform: translateX(-19px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-9px) translateY(-100vh);
            transform: translateX(-9px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-77 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-28px) translateY(-10vh);
            transform: translateX(-28px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-30px) translateY(-20vh);
            transform: translateX(-30px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(14px) translateY(-30vh);
            transform: translateX(14px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(21px) translateY(-40vh);
            transform: translateX(21px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-19px) translateY(-50vh);
            transform: translateX(-19px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-9px) translateY(-100vh);
            transform: translateX(-9px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(77) {
  -webkit-animation-name: particle-77;
          animation-name: particle-77;
}

@-webkit-keyframes particle-78 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-1px) translateY(-10vh);
            transform: translateX(-1px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-2px) translateY(-20vh);
            transform: translateX(-2px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(5px) translateY(-30vh);
            transform: translateX(5px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-7px) translateY(-40vh);
            transform: translateX(-7px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-29px) translateY(-50vh);
            transform: translateX(-29px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(40px) translateY(-100vh);
            transform: translateX(40px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-78 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-1px) translateY(-10vh);
            transform: translateX(-1px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-2px) translateY(-20vh);
            transform: translateX(-2px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(5px) translateY(-30vh);
            transform: translateX(5px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-7px) translateY(-40vh);
            transform: translateX(-7px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-29px) translateY(-50vh);
            transform: translateX(-29px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(40px) translateY(-100vh);
            transform: translateX(40px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(78) {
  -webkit-animation-name: particle-78;
          animation-name: particle-78;
}

@-webkit-keyframes particle-79 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(39px) translateY(-10vh);
            transform: translateX(39px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-27px) translateY(-20vh);
            transform: translateX(-27px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-29px) translateY(-30vh);
            transform: translateX(-29px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(25px) translateY(-40vh);
            transform: translateX(25px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-32px) translateY(-50vh);
            transform: translateX(-32px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(36px) translateY(-100vh);
            transform: translateX(36px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-79 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(39px) translateY(-10vh);
            transform: translateX(39px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-27px) translateY(-20vh);
            transform: translateX(-27px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-29px) translateY(-30vh);
            transform: translateX(-29px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(25px) translateY(-40vh);
            transform: translateX(25px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-32px) translateY(-50vh);
            transform: translateX(-32px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(36px) translateY(-100vh);
            transform: translateX(36px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(79) {
  -webkit-animation-name: particle-79;
          animation-name: particle-79;
}

@-webkit-keyframes particle-80 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-27px) translateY(-10vh);
            transform: translateX(-27px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(11px) translateY(-20vh);
            transform: translateX(11px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-9px) translateY(-30vh);
            transform: translateX(-9px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(29px) translateY(-40vh);
            transform: translateX(29px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-1px) translateY(-50vh);
            transform: translateX(-1px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(25px) translateY(-100vh);
            transform: translateX(25px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-80 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-27px) translateY(-10vh);
            transform: translateX(-27px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(11px) translateY(-20vh);
            transform: translateX(11px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-9px) translateY(-30vh);
            transform: translateX(-9px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(29px) translateY(-40vh);
            transform: translateX(29px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-1px) translateY(-50vh);
            transform: translateX(-1px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(25px) translateY(-100vh);
            transform: translateX(25px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(80) {
  -webkit-animation-name: particle-80;
          animation-name: particle-80;
}

@-webkit-keyframes particle-81 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-20px) translateY(-10vh);
            transform: translateX(-20px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-20px) translateY(-20vh);
            transform: translateX(-20px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-12px) translateY(-30vh);
            transform: translateX(-12px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-11px) translateY(-40vh);
            transform: translateX(-11px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-29px) translateY(-50vh);
            transform: translateX(-29px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-37px) translateY(-100vh);
            transform: translateX(-37px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-81 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-20px) translateY(-10vh);
            transform: translateX(-20px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-20px) translateY(-20vh);
            transform: translateX(-20px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-12px) translateY(-30vh);
            transform: translateX(-12px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-11px) translateY(-40vh);
            transform: translateX(-11px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-29px) translateY(-50vh);
            transform: translateX(-29px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-37px) translateY(-100vh);
            transform: translateX(-37px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(81) {
  -webkit-animation-name: particle-81;
          animation-name: particle-81;
}

@-webkit-keyframes particle-82 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-22px) translateY(-10vh);
            transform: translateX(-22px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(13px) translateY(-20vh);
            transform: translateX(13px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(19px) translateY(-30vh);
            transform: translateX(19px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-35px) translateY(-40vh);
            transform: translateX(-35px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(0px) translateY(-50vh);
            transform: translateX(0px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(13px) translateY(-100vh);
            transform: translateX(13px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-82 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-22px) translateY(-10vh);
            transform: translateX(-22px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(13px) translateY(-20vh);
            transform: translateX(13px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(19px) translateY(-30vh);
            transform: translateX(19px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-35px) translateY(-40vh);
            transform: translateX(-35px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(0px) translateY(-50vh);
            transform: translateX(0px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(13px) translateY(-100vh);
            transform: translateX(13px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(82) {
  -webkit-animation-name: particle-82;
          animation-name: particle-82;
}

@-webkit-keyframes particle-83 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(20px) translateY(-10vh);
            transform: translateX(20px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(0px) translateY(-20vh);
            transform: translateX(0px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(21px) translateY(-30vh);
            transform: translateX(21px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(34px) translateY(-40vh);
            transform: translateX(34px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-39px) translateY(-50vh);
            transform: translateX(-39px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-22px) translateY(-100vh);
            transform: translateX(-22px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-83 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(20px) translateY(-10vh);
            transform: translateX(20px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(0px) translateY(-20vh);
            transform: translateX(0px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(21px) translateY(-30vh);
            transform: translateX(21px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(34px) translateY(-40vh);
            transform: translateX(34px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-39px) translateY(-50vh);
            transform: translateX(-39px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-22px) translateY(-100vh);
            transform: translateX(-22px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(83) {
  -webkit-animation-name: particle-83;
          animation-name: particle-83;
}

@-webkit-keyframes particle-84 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-1px) translateY(-10vh);
            transform: translateX(-1px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-24px) translateY(-20vh);
            transform: translateX(-24px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-37px) translateY(-30vh);
            transform: translateX(-37px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-34px) translateY(-40vh);
            transform: translateX(-34px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(18px) translateY(-50vh);
            transform: translateX(18px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(14px) translateY(-100vh);
            transform: translateX(14px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-84 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-1px) translateY(-10vh);
            transform: translateX(-1px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-24px) translateY(-20vh);
            transform: translateX(-24px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-37px) translateY(-30vh);
            transform: translateX(-37px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-34px) translateY(-40vh);
            transform: translateX(-34px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(18px) translateY(-50vh);
            transform: translateX(18px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(14px) translateY(-100vh);
            transform: translateX(14px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(84) {
  -webkit-animation-name: particle-84;
          animation-name: particle-84;
}

@-webkit-keyframes particle-85 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-18px) translateY(-10vh);
            transform: translateX(-18px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-38px) translateY(-20vh);
            transform: translateX(-38px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-9px) translateY(-30vh);
            transform: translateX(-9px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-35px) translateY(-40vh);
            transform: translateX(-35px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(18px) translateY(-50vh);
            transform: translateX(18px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-16px) translateY(-100vh);
            transform: translateX(-16px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-85 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-18px) translateY(-10vh);
            transform: translateX(-18px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-38px) translateY(-20vh);
            transform: translateX(-38px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-9px) translateY(-30vh);
            transform: translateX(-9px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-35px) translateY(-40vh);
            transform: translateX(-35px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(18px) translateY(-50vh);
            transform: translateX(18px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-16px) translateY(-100vh);
            transform: translateX(-16px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(85) {
  -webkit-animation-name: particle-85;
          animation-name: particle-85;
}

@-webkit-keyframes particle-86 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(3px) translateY(-10vh);
            transform: translateX(3px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-16px) translateY(-20vh);
            transform: translateX(-16px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(22px) translateY(-30vh);
            transform: translateX(22px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-5px) translateY(-40vh);
            transform: translateX(-5px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-2px) translateY(-50vh);
            transform: translateX(-2px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(2px) translateY(-100vh);
            transform: translateX(2px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-86 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(3px) translateY(-10vh);
            transform: translateX(3px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-16px) translateY(-20vh);
            transform: translateX(-16px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(22px) translateY(-30vh);
            transform: translateX(22px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-5px) translateY(-40vh);
            transform: translateX(-5px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-2px) translateY(-50vh);
            transform: translateX(-2px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(2px) translateY(-100vh);
            transform: translateX(2px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(86) {
  -webkit-animation-name: particle-86;
          animation-name: particle-86;
}

@-webkit-keyframes particle-87 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(10px) translateY(-10vh);
            transform: translateX(10px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(13px) translateY(-20vh);
            transform: translateX(13px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-4px) translateY(-30vh);
            transform: translateX(-4px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(32px) translateY(-40vh);
            transform: translateX(32px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-11px) translateY(-50vh);
            transform: translateX(-11px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(37px) translateY(-100vh);
            transform: translateX(37px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-87 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(10px) translateY(-10vh);
            transform: translateX(10px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(13px) translateY(-20vh);
            transform: translateX(13px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-4px) translateY(-30vh);
            transform: translateX(-4px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(32px) translateY(-40vh);
            transform: translateX(32px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-11px) translateY(-50vh);
            transform: translateX(-11px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(37px) translateY(-100vh);
            transform: translateX(37px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(87) {
  -webkit-animation-name: particle-87;
          animation-name: particle-87;
}

@-webkit-keyframes particle-88 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(35px) translateY(-10vh);
            transform: translateX(35px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-9px) translateY(-20vh);
            transform: translateX(-9px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-10px) translateY(-30vh);
            transform: translateX(-10px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-11px) translateY(-40vh);
            transform: translateX(-11px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(40px) translateY(-50vh);
            transform: translateX(40px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-29px) translateY(-100vh);
            transform: translateX(-29px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-88 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(35px) translateY(-10vh);
            transform: translateX(35px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-9px) translateY(-20vh);
            transform: translateX(-9px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-10px) translateY(-30vh);
            transform: translateX(-10px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-11px) translateY(-40vh);
            transform: translateX(-11px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(40px) translateY(-50vh);
            transform: translateX(40px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-29px) translateY(-100vh);
            transform: translateX(-29px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(88) {
  -webkit-animation-name: particle-88;
          animation-name: particle-88;
}

@-webkit-keyframes particle-89 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-25px) translateY(-10vh);
            transform: translateX(-25px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-35px) translateY(-20vh);
            transform: translateX(-35px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-7px) translateY(-30vh);
            transform: translateX(-7px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(17px) translateY(-40vh);
            transform: translateX(17px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(16px) translateY(-50vh);
            transform: translateX(16px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(29px) translateY(-100vh);
            transform: translateX(29px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-89 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-25px) translateY(-10vh);
            transform: translateX(-25px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-35px) translateY(-20vh);
            transform: translateX(-35px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-7px) translateY(-30vh);
            transform: translateX(-7px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(17px) translateY(-40vh);
            transform: translateX(17px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(16px) translateY(-50vh);
            transform: translateX(16px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(29px) translateY(-100vh);
            transform: translateX(29px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(89) {
  -webkit-animation-name: particle-89;
          animation-name: particle-89;
}

@-webkit-keyframes particle-90 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-6px) translateY(-10vh);
            transform: translateX(-6px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-21px) translateY(-20vh);
            transform: translateX(-21px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-21px) translateY(-30vh);
            transform: translateX(-21px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-27px) translateY(-40vh);
            transform: translateX(-27px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(34px) translateY(-50vh);
            transform: translateX(34px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-10px) translateY(-100vh);
            transform: translateX(-10px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-90 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-6px) translateY(-10vh);
            transform: translateX(-6px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-21px) translateY(-20vh);
            transform: translateX(-21px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-21px) translateY(-30vh);
            transform: translateX(-21px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-27px) translateY(-40vh);
            transform: translateX(-27px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(34px) translateY(-50vh);
            transform: translateX(34px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-10px) translateY(-100vh);
            transform: translateX(-10px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(90) {
  -webkit-animation-name: particle-90;
          animation-name: particle-90;
}

@-webkit-keyframes particle-91 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(37px) translateY(-10vh);
            transform: translateX(37px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-23px) translateY(-20vh);
            transform: translateX(-23px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(13px) translateY(-30vh);
            transform: translateX(13px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-6px) translateY(-40vh);
            transform: translateX(-6px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-24px) translateY(-50vh);
            transform: translateX(-24px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-3px) translateY(-100vh);
            transform: translateX(-3px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-91 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(37px) translateY(-10vh);
            transform: translateX(37px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-23px) translateY(-20vh);
            transform: translateX(-23px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(13px) translateY(-30vh);
            transform: translateX(13px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-6px) translateY(-40vh);
            transform: translateX(-6px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-24px) translateY(-50vh);
            transform: translateX(-24px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-3px) translateY(-100vh);
            transform: translateX(-3px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(91) {
  -webkit-animation-name: particle-91;
          animation-name: particle-91;
}

@-webkit-keyframes particle-92 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-12px) translateY(-10vh);
            transform: translateX(-12px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(27px) translateY(-20vh);
            transform: translateX(27px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(0px) translateY(-30vh);
            transform: translateX(0px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-2px) translateY(-40vh);
            transform: translateX(-2px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(34px) translateY(-50vh);
            transform: translateX(34px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-24px) translateY(-100vh);
            transform: translateX(-24px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-92 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-12px) translateY(-10vh);
            transform: translateX(-12px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(27px) translateY(-20vh);
            transform: translateX(27px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(0px) translateY(-30vh);
            transform: translateX(0px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-2px) translateY(-40vh);
            transform: translateX(-2px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(34px) translateY(-50vh);
            transform: translateX(34px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-24px) translateY(-100vh);
            transform: translateX(-24px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(92) {
  -webkit-animation-name: particle-92;
          animation-name: particle-92;
}

@-webkit-keyframes particle-93 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-8px) translateY(-10vh);
            transform: translateX(-8px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(14px) translateY(-20vh);
            transform: translateX(14px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-12px) translateY(-30vh);
            transform: translateX(-12px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-22px) translateY(-40vh);
            transform: translateX(-22px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-15px) translateY(-50vh);
            transform: translateX(-15px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-8px) translateY(-100vh);
            transform: translateX(-8px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-93 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-8px) translateY(-10vh);
            transform: translateX(-8px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(14px) translateY(-20vh);
            transform: translateX(14px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-12px) translateY(-30vh);
            transform: translateX(-12px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-22px) translateY(-40vh);
            transform: translateX(-22px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-15px) translateY(-50vh);
            transform: translateX(-15px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-8px) translateY(-100vh);
            transform: translateX(-8px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(93) {
  -webkit-animation-name: particle-93;
          animation-name: particle-93;
}

@-webkit-keyframes particle-94 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(12px) translateY(-10vh);
            transform: translateX(12px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(16px) translateY(-20vh);
            transform: translateX(16px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(15px) translateY(-30vh);
            transform: translateX(15px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(0px) translateY(-40vh);
            transform: translateX(0px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(21px) translateY(-50vh);
            transform: translateX(21px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(17px) translateY(-100vh);
            transform: translateX(17px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-94 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(12px) translateY(-10vh);
            transform: translateX(12px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(16px) translateY(-20vh);
            transform: translateX(16px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(15px) translateY(-30vh);
            transform: translateX(15px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(0px) translateY(-40vh);
            transform: translateX(0px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(21px) translateY(-50vh);
            transform: translateX(21px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(17px) translateY(-100vh);
            transform: translateX(17px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(94) {
  -webkit-animation-name: particle-94;
          animation-name: particle-94;
}

@-webkit-keyframes particle-95 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-7px) translateY(-10vh);
            transform: translateX(-7px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(39px) translateY(-20vh);
            transform: translateX(39px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-30px) translateY(-30vh);
            transform: translateX(-30px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(18px) translateY(-40vh);
            transform: translateX(18px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-17px) translateY(-50vh);
            transform: translateX(-17px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-13px) translateY(-100vh);
            transform: translateX(-13px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-95 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-7px) translateY(-10vh);
            transform: translateX(-7px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(39px) translateY(-20vh);
            transform: translateX(39px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-30px) translateY(-30vh);
            transform: translateX(-30px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(18px) translateY(-40vh);
            transform: translateX(18px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-17px) translateY(-50vh);
            transform: translateX(-17px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-13px) translateY(-100vh);
            transform: translateX(-13px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(95) {
  -webkit-animation-name: particle-95;
          animation-name: particle-95;
}

@-webkit-keyframes particle-96 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-9px) translateY(-10vh);
            transform: translateX(-9px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-31px) translateY(-20vh);
            transform: translateX(-31px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(30px) translateY(-30vh);
            transform: translateX(30px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(12px) translateY(-40vh);
            transform: translateX(12px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-8px) translateY(-50vh);
            transform: translateX(-8px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(32px) translateY(-100vh);
            transform: translateX(32px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-96 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-9px) translateY(-10vh);
            transform: translateX(-9px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-31px) translateY(-20vh);
            transform: translateX(-31px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(30px) translateY(-30vh);
            transform: translateX(30px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(12px) translateY(-40vh);
            transform: translateX(12px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-8px) translateY(-50vh);
            transform: translateX(-8px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(32px) translateY(-100vh);
            transform: translateX(32px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(96) {
  -webkit-animation-name: particle-96;
          animation-name: particle-96;
}

@-webkit-keyframes particle-97 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-21px) translateY(-10vh);
            transform: translateX(-21px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(34px) translateY(-20vh);
            transform: translateX(34px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-13px) translateY(-30vh);
            transform: translateX(-13px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(29px) translateY(-40vh);
            transform: translateX(29px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-4px) translateY(-50vh);
            transform: translateX(-4px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-26px) translateY(-100vh);
            transform: translateX(-26px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-97 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-21px) translateY(-10vh);
            transform: translateX(-21px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(34px) translateY(-20vh);
            transform: translateX(34px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-13px) translateY(-30vh);
            transform: translateX(-13px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(29px) translateY(-40vh);
            transform: translateX(29px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-4px) translateY(-50vh);
            transform: translateX(-4px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-26px) translateY(-100vh);
            transform: translateX(-26px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(97) {
  -webkit-animation-name: particle-97;
          animation-name: particle-97;
}

@-webkit-keyframes particle-98 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(1px) translateY(-10vh);
            transform: translateX(1px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-18px) translateY(-20vh);
            transform: translateX(-18px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(6px) translateY(-30vh);
            transform: translateX(6px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-32px) translateY(-40vh);
            transform: translateX(-32px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-16px) translateY(-50vh);
            transform: translateX(-16px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-19px) translateY(-100vh);
            transform: translateX(-19px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-98 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(1px) translateY(-10vh);
            transform: translateX(1px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-18px) translateY(-20vh);
            transform: translateX(-18px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(6px) translateY(-30vh);
            transform: translateX(6px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-32px) translateY(-40vh);
            transform: translateX(-32px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-16px) translateY(-50vh);
            transform: translateX(-16px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-19px) translateY(-100vh);
            transform: translateX(-19px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(98) {
  -webkit-animation-name: particle-98;
          animation-name: particle-98;
}

@-webkit-keyframes particle-99 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-3px) translateY(-10vh);
            transform: translateX(-3px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-28px) translateY(-20vh);
            transform: translateX(-28px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-1px) translateY(-30vh);
            transform: translateX(-1px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-2px) translateY(-40vh);
            transform: translateX(-2px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-12px) translateY(-50vh);
            transform: translateX(-12px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-24px) translateY(-100vh);
            transform: translateX(-24px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-99 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(-3px) translateY(-10vh);
            transform: translateX(-3px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(-28px) translateY(-20vh);
            transform: translateX(-28px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-1px) translateY(-30vh);
            transform: translateX(-1px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(-2px) translateY(-40vh);
            transform: translateX(-2px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(-12px) translateY(-50vh);
            transform: translateX(-12px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(-24px) translateY(-100vh);
            transform: translateX(-24px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(99) {
  -webkit-animation-name: particle-99;
          animation-name: particle-99;
}

@-webkit-keyframes particle-100 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(28px) translateY(-10vh);
            transform: translateX(28px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(25px) translateY(-20vh);
            transform: translateX(25px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-23px) translateY(-30vh);
            transform: translateX(-23px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(27px) translateY(-40vh);
            transform: translateX(27px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(35px) translateY(-50vh);
            transform: translateX(35px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(22px) translateY(-100vh);
            transform: translateX(22px) translateY(-100vh);
    opacity: 0;
  }
}

@keyframes particle-100 {
  0% {
    -webkit-transform: translateX(0px) translateY(0vh);
            transform: translateX(0px) translateY(0vh);
    opacity: 1;
  }
  30% {
    -webkit-transform: translateX(28px) translateY(-10vh);
            transform: translateX(28px) translateY(-10vh);
    opacity: 0.9;
  }
  40% {
    -webkit-transform: translateX(25px) translateY(-20vh);
            transform: translateX(25px) translateY(-20vh);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translateX(-23px) translateY(-30vh);
            transform: translateX(-23px) translateY(-30vh);
    opacity: 0.7;
  }
  60% {
    -webkit-transform: translateX(27px) translateY(-40vh);
            transform: translateX(27px) translateY(-40vh);
    opacity: 0.6;
  }
  70% {
    -webkit-transform: translateX(35px) translateY(-50vh);
            transform: translateX(35px) translateY(-50vh);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(22px) translateY(-100vh);
            transform: translateX(22px) translateY(-100vh);
    opacity: 0;
  }
}
.container #particles span:nth-child(100) {
  -webkit-animation-name: particle-100;
          animation-name: particle-100;
}

html, body {
  position: relative;
  height: 100%;
  background-color: #224154;
  text-align: center;
  overflow: hidden;
  min-width: 768px;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
}
.container .background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/751678/my-illustration-background.png");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100% auto;
  z-index: 0;
}
.container #particles {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.container #particles span {
  display: inline-block;
  position: absolute;
  bottom: 0%;
  border-radius: 50%;
  background-color: #a42b52;
  opacity: 1;
  box-shadow: 0px 0px 10px 5px #a42b52;
  -webkit-transform: translateX(0%) translateY(0%);
          transform: translateX(0%) translateY(0%);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}
.container .foreground {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/751678/my-illustration-foreground.png");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100% auto;
  z-index: 2;
}

HTML

Recommendation

Join Effecthub.com