The Dark - CSS animated background
How do I make an the dark - css animated background?
Has i was having issues on code pen with CORS when using canvas, decided to convert this piece into css and js from canvas. The JavaScript currently only creates the particles.. What is a the dark - css animated background? How do you make a the dark - css animated background? This script and codes were developed by Mario Duarte on 11 December 2022, Sunday.
The Dark - CSS animated background Previews
The Dark - CSS animated background - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>The Dark - CSS animated background</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="background"></div> <div id="particles"></div> <div class="foreground"></div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>The Dark - CSS animated background - Script Codes CSS Codes
@-webkit-keyframes particle-1 { 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(4px) translateY(-20vh); transform: translateX(4px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-10px) translateY(-30vh); transform: translateX(-10px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(12px) translateY(-40vh); transform: translateX(12px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-19px) translateY(-50vh); transform: translateX(-19px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-14px) translateY(-100vh); transform: translateX(-14px) 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(-36px) translateY(-10vh); transform: translateX(-36px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(4px) translateY(-20vh); transform: translateX(4px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-10px) translateY(-30vh); transform: translateX(-10px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(12px) translateY(-40vh); transform: translateX(12px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-19px) translateY(-50vh); transform: translateX(-19px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-14px) translateY(-100vh); transform: translateX(-14px) 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(-28px) translateY(-10vh); transform: translateX(-28px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(35px) translateY(-20vh); transform: translateX(35px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-35px) translateY(-30vh); transform: translateX(-35px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-3px) translateY(-40vh); transform: translateX(-3px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(0px) translateY(-50vh); transform: translateX(0px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(2px) translateY(-100vh); transform: translateX(2px) 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(-28px) translateY(-10vh); transform: translateX(-28px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(35px) translateY(-20vh); transform: translateX(35px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-35px) translateY(-30vh); transform: translateX(-35px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-3px) translateY(-40vh); transform: translateX(-3px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(0px) translateY(-50vh); transform: translateX(0px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(2px) translateY(-100vh); transform: translateX(2px) 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(25px) translateY(-10vh); transform: translateX(25px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(23px) translateY(-20vh); transform: translateX(23px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-33px) translateY(-30vh); transform: translateX(-33px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(37px) translateY(-40vh); transform: translateX(37px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(36px) translateY(-50vh); transform: translateX(36px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-34px) translateY(-100vh); transform: translateX(-34px) 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(25px) translateY(-10vh); transform: translateX(25px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(23px) translateY(-20vh); transform: translateX(23px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-33px) translateY(-30vh); transform: translateX(-33px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(37px) translateY(-40vh); transform: translateX(37px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(36px) translateY(-50vh); transform: translateX(36px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-34px) translateY(-100vh); transform: translateX(-34px) 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(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(33px) translateY(-30vh); transform: translateX(33px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-21px) translateY(-40vh); transform: translateX(-21px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(8px) translateY(-50vh); transform: translateX(8px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(31px) translateY(-100vh); transform: translateX(31px) 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(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(33px) translateY(-30vh); transform: translateX(33px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-21px) translateY(-40vh); transform: translateX(-21px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(8px) translateY(-50vh); transform: translateX(8px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(31px) translateY(-100vh); transform: translateX(31px) 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(17px) translateY(-10vh); transform: translateX(17px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-3px) translateY(-20vh); transform: translateX(-3px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(28px) translateY(-30vh); transform: translateX(28px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-32px) translateY(-40vh); transform: translateX(-32px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(28px) translateY(-50vh); transform: translateX(28px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(7px) translateY(-100vh); transform: translateX(7px) 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(17px) translateY(-10vh); transform: translateX(17px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-3px) translateY(-20vh); transform: translateX(-3px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(28px) translateY(-30vh); transform: translateX(28px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-32px) translateY(-40vh); transform: translateX(-32px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(28px) translateY(-50vh); transform: translateX(28px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(7px) translateY(-100vh); transform: translateX(7px) 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(-2px) translateY(-10vh); transform: translateX(-2px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(30px) translateY(-20vh); transform: translateX(30px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(33px) translateY(-30vh); transform: translateX(33px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-25px) translateY(-40vh); transform: translateX(-25px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(24px) translateY(-50vh); transform: translateX(24px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-15px) translateY(-100vh); transform: translateX(-15px) 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(-2px) translateY(-10vh); transform: translateX(-2px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(30px) translateY(-20vh); transform: translateX(30px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(33px) translateY(-30vh); transform: translateX(33px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-25px) translateY(-40vh); transform: translateX(-25px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(24px) translateY(-50vh); transform: translateX(24px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-15px) translateY(-100vh); transform: translateX(-15px) 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(-39px) translateY(-10vh); transform: translateX(-39px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-2px) translateY(-20vh); transform: translateX(-2px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-34px) translateY(-30vh); transform: translateX(-34px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-12px) translateY(-40vh); transform: translateX(-12px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-25px) translateY(-50vh); transform: translateX(-25px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-38px) translateY(-100vh); transform: translateX(-38px) 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(-39px) translateY(-10vh); transform: translateX(-39px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-2px) translateY(-20vh); transform: translateX(-2px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-34px) translateY(-30vh); transform: translateX(-34px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-12px) translateY(-40vh); transform: translateX(-12px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-25px) translateY(-50vh); transform: translateX(-25px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-38px) translateY(-100vh); transform: translateX(-38px) 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(20px) translateY(-10vh); transform: translateX(20px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-23px) translateY(-20vh); transform: translateX(-23px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-1px) translateY(-30vh); transform: translateX(-1px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(36px) translateY(-40vh); transform: translateX(36px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-5px) translateY(-50vh); transform: translateX(-5px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(23px) translateY(-100vh); transform: translateX(23px) 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(20px) translateY(-10vh); transform: translateX(20px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-23px) translateY(-20vh); transform: translateX(-23px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-1px) translateY(-30vh); transform: translateX(-1px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(36px) translateY(-40vh); transform: translateX(36px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-5px) translateY(-50vh); transform: translateX(-5px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(23px) translateY(-100vh); transform: translateX(23px) 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(-1px) translateY(-10vh); transform: translateX(-1px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-9px) translateY(-20vh); transform: translateX(-9px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-2px) translateY(-30vh); transform: translateX(-2px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-15px) translateY(-40vh); transform: translateX(-15px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(18px) translateY(-50vh); transform: translateX(18px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-17px) translateY(-100vh); transform: translateX(-17px) 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(-1px) translateY(-10vh); transform: translateX(-1px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-9px) translateY(-20vh); transform: translateX(-9px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-2px) translateY(-30vh); transform: translateX(-2px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-15px) translateY(-40vh); transform: translateX(-15px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(18px) translateY(-50vh); transform: translateX(18px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-17px) translateY(-100vh); transform: translateX(-17px) 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(-17px) translateY(-10vh); transform: translateX(-17px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-37px) translateY(-20vh); transform: translateX(-37px) 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(31px) translateY(-50vh); transform: translateX(31px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-36px) translateY(-100vh); transform: translateX(-36px) 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(-17px) translateY(-10vh); transform: translateX(-17px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-37px) translateY(-20vh); transform: translateX(-37px) 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(31px) translateY(-50vh); transform: translateX(31px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-36px) translateY(-100vh); transform: translateX(-36px) 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(-1px) translateY(-10vh); transform: translateX(-1px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(17px) translateY(-20vh); transform: translateX(17px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-35px) translateY(-30vh); transform: translateX(-35px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(8px) translateY(-40vh); transform: translateX(8px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-20px) translateY(-50vh); transform: translateX(-20px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(23px) translateY(-100vh); transform: translateX(23px) 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(-1px) translateY(-10vh); transform: translateX(-1px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(17px) translateY(-20vh); transform: translateX(17px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-35px) translateY(-30vh); transform: translateX(-35px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(8px) translateY(-40vh); transform: translateX(8px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-20px) translateY(-50vh); transform: translateX(-20px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(23px) translateY(-100vh); transform: translateX(23px) 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(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(0px) translateY(-30vh); transform: translateX(0px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(37px) translateY(-40vh); transform: translateX(37px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-2px) translateY(-50vh); transform: translateX(-2px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(15px) translateY(-100vh); transform: translateX(15px) 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(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(0px) translateY(-30vh); transform: translateX(0px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(37px) translateY(-40vh); transform: translateX(37px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-2px) translateY(-50vh); transform: translateX(-2px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(15px) translateY(-100vh); transform: translateX(15px) 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(-27px) translateY(-10vh); transform: translateX(-27px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-4px) translateY(-20vh); transform: translateX(-4px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(2px) translateY(-30vh); transform: translateX(2px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-12px) translateY(-40vh); transform: translateX(-12px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(25px) translateY(-50vh); transform: translateX(25px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(2px) translateY(-100vh); transform: translateX(2px) 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(-27px) translateY(-10vh); transform: translateX(-27px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-4px) translateY(-20vh); transform: translateX(-4px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(2px) translateY(-30vh); transform: translateX(2px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-12px) translateY(-40vh); transform: translateX(-12px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(25px) translateY(-50vh); transform: translateX(25px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(2px) translateY(-100vh); transform: translateX(2px) 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(12px) translateY(-10vh); transform: translateX(12px) 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(35px) translateY(-40vh); transform: translateX(35px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-10px) translateY(-50vh); transform: translateX(-10px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(22px) translateY(-100vh); transform: translateX(22px) 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(12px) translateY(-10vh); transform: translateX(12px) 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(35px) translateY(-40vh); transform: translateX(35px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-10px) translateY(-50vh); transform: translateX(-10px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(22px) translateY(-100vh); transform: translateX(22px) 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(-2px) translateY(-10vh); transform: translateX(-2px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-25px) translateY(-20vh); transform: translateX(-25px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-15px) translateY(-30vh); transform: translateX(-15px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-26px) translateY(-40vh); transform: translateX(-26px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(26px) translateY(-50vh); transform: translateX(26px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(29px) translateY(-100vh); transform: translateX(29px) 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(-2px) translateY(-10vh); transform: translateX(-2px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-25px) translateY(-20vh); transform: translateX(-25px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-15px) translateY(-30vh); transform: translateX(-15px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-26px) translateY(-40vh); transform: translateX(-26px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(26px) translateY(-50vh); transform: translateX(26px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(29px) translateY(-100vh); transform: translateX(29px) 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(8px) translateY(-10vh); transform: translateX(8px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-29px) translateY(-20vh); transform: translateX(-29px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-25px) translateY(-30vh); transform: translateX(-25px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-39px) translateY(-40vh); transform: translateX(-39px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(19px) translateY(-50vh); transform: translateX(19px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(23px) translateY(-100vh); transform: translateX(23px) 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(8px) translateY(-10vh); transform: translateX(8px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-29px) translateY(-20vh); transform: translateX(-29px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-25px) translateY(-30vh); transform: translateX(-25px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-39px) translateY(-40vh); transform: translateX(-39px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(19px) translateY(-50vh); transform: translateX(19px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(23px) translateY(-100vh); transform: translateX(23px) 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(6px) translateY(-10vh); transform: translateX(6px) 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(-31px) translateY(-40vh); transform: translateX(-31px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-23px) translateY(-50vh); transform: translateX(-23px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(7px) translateY(-100vh); transform: translateX(7px) 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(6px) translateY(-10vh); transform: translateX(6px) 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(-31px) translateY(-40vh); transform: translateX(-31px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-23px) translateY(-50vh); transform: translateX(-23px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(7px) translateY(-100vh); transform: translateX(7px) 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(16px) translateY(-10vh); transform: translateX(16px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(22px) translateY(-20vh); transform: translateX(22px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-4px) translateY(-30vh); transform: translateX(-4px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(29px) translateY(-40vh); transform: translateX(29px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(3px) translateY(-50vh); transform: translateX(3px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(6px) translateY(-100vh); transform: translateX(6px) 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(16px) translateY(-10vh); transform: translateX(16px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(22px) translateY(-20vh); transform: translateX(22px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-4px) translateY(-30vh); transform: translateX(-4px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(29px) translateY(-40vh); transform: translateX(29px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(3px) translateY(-50vh); transform: translateX(3px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(6px) translateY(-100vh); transform: translateX(6px) 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(10px) translateY(-10vh); transform: translateX(10px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(3px) translateY(-20vh); transform: translateX(3px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(30px) translateY(-30vh); transform: translateX(30px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(38px) translateY(-40vh); transform: translateX(38px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-15px) translateY(-50vh); transform: translateX(-15px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-29px) translateY(-100vh); transform: translateX(-29px) 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(10px) translateY(-10vh); transform: translateX(10px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(3px) translateY(-20vh); transform: translateX(3px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(30px) translateY(-30vh); transform: translateX(30px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(38px) translateY(-40vh); transform: translateX(38px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-15px) translateY(-50vh); transform: translateX(-15px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-29px) translateY(-100vh); transform: translateX(-29px) 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(-35px) translateY(-10vh); transform: translateX(-35px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-39px) translateY(-20vh); transform: translateX(-39px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-6px) translateY(-30vh); transform: translateX(-6px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-22px) translateY(-40vh); transform: translateX(-22px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(10px) translateY(-50vh); transform: translateX(10px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-28px) translateY(-100vh); transform: translateX(-28px) 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(-35px) translateY(-10vh); transform: translateX(-35px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-39px) translateY(-20vh); transform: translateX(-39px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-6px) translateY(-30vh); transform: translateX(-6px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-22px) translateY(-40vh); transform: translateX(-22px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(10px) translateY(-50vh); transform: translateX(10px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-28px) translateY(-100vh); transform: translateX(-28px) 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(17px) translateY(-10vh); transform: translateX(17px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(5px) translateY(-20vh); transform: translateX(5px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-9px) translateY(-30vh); transform: translateX(-9px) 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(-18px) translateY(-100vh); transform: translateX(-18px) 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(17px) translateY(-10vh); transform: translateX(17px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(5px) translateY(-20vh); transform: translateX(5px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-9px) translateY(-30vh); transform: translateX(-9px) 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(-18px) translateY(-100vh); transform: translateX(-18px) 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(29px) translateY(-10vh); transform: translateX(29px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(19px) translateY(-20vh); transform: translateX(19px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-20px) translateY(-30vh); transform: translateX(-20px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-26px) translateY(-40vh); transform: translateX(-26px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(1px) translateY(-50vh); transform: translateX(1px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(0px) translateY(-100vh); transform: translateX(0px) 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(29px) translateY(-10vh); transform: translateX(29px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(19px) translateY(-20vh); transform: translateX(19px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-20px) translateY(-30vh); transform: translateX(-20px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-26px) translateY(-40vh); transform: translateX(-26px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(1px) translateY(-50vh); transform: translateX(1px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(0px) translateY(-100vh); transform: translateX(0px) 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(34px) translateY(-10vh); transform: translateX(34px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-38px) translateY(-20vh); transform: translateX(-38px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-31px) translateY(-30vh); transform: translateX(-31px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(32px) translateY(-40vh); transform: translateX(32px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(5px) translateY(-50vh); transform: translateX(5px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(38px) translateY(-100vh); transform: translateX(38px) 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(34px) translateY(-10vh); transform: translateX(34px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-38px) translateY(-20vh); transform: translateX(-38px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-31px) translateY(-30vh); transform: translateX(-31px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(32px) translateY(-40vh); transform: translateX(32px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(5px) translateY(-50vh); transform: translateX(5px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(38px) translateY(-100vh); transform: translateX(38px) 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(-31px) translateY(-10vh); transform: translateX(-31px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-37px) translateY(-20vh); transform: translateX(-37px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(13px) translateY(-30vh); transform: translateX(13px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-17px) translateY(-40vh); transform: translateX(-17px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-1px) translateY(-50vh); transform: translateX(-1px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-1px) translateY(-100vh); transform: translateX(-1px) 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(-31px) translateY(-10vh); transform: translateX(-31px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-37px) translateY(-20vh); transform: translateX(-37px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(13px) translateY(-30vh); transform: translateX(13px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-17px) translateY(-40vh); transform: translateX(-17px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-1px) translateY(-50vh); transform: translateX(-1px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-1px) translateY(-100vh); transform: translateX(-1px) 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(-16px) translateY(-10vh); transform: translateX(-16px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(28px) translateY(-20vh); transform: translateX(28px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-25px) translateY(-30vh); transform: translateX(-25px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(34px) translateY(-40vh); transform: translateX(34px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-16px) translateY(-50vh); transform: translateX(-16px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-20px) translateY(-100vh); transform: translateX(-20px) 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(-16px) translateY(-10vh); transform: translateX(-16px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(28px) translateY(-20vh); transform: translateX(28px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-25px) translateY(-30vh); transform: translateX(-25px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(34px) translateY(-40vh); transform: translateX(34px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-16px) translateY(-50vh); transform: translateX(-16px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-20px) translateY(-100vh); transform: translateX(-20px) 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(-14px) translateY(-10vh); transform: translateX(-14px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-7px) translateY(-20vh); transform: translateX(-7px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-31px) translateY(-30vh); transform: translateX(-31px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-31px) translateY(-40vh); transform: translateX(-31px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-13px) translateY(-50vh); transform: translateX(-13px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(22px) translateY(-100vh); transform: translateX(22px) 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(-14px) translateY(-10vh); transform: translateX(-14px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-7px) translateY(-20vh); transform: translateX(-7px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-31px) translateY(-30vh); transform: translateX(-31px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-31px) translateY(-40vh); transform: translateX(-31px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-13px) translateY(-50vh); transform: translateX(-13px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(22px) translateY(-100vh); transform: translateX(22px) 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(4px) translateY(-10vh); transform: translateX(4px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-15px) translateY(-20vh); transform: translateX(-15px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(15px) translateY(-30vh); transform: translateX(15px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(8px) translateY(-40vh); transform: translateX(8px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(19px) translateY(-50vh); transform: translateX(19px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-12px) translateY(-100vh); transform: translateX(-12px) 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(4px) translateY(-10vh); transform: translateX(4px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-15px) translateY(-20vh); transform: translateX(-15px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(15px) translateY(-30vh); transform: translateX(15px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(8px) translateY(-40vh); transform: translateX(8px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(19px) translateY(-50vh); transform: translateX(19px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-12px) translateY(-100vh); transform: translateX(-12px) 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(-16px) translateY(-10vh); transform: translateX(-16px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(22px) translateY(-20vh); transform: translateX(22px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(25px) translateY(-30vh); transform: translateX(25px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(21px) translateY(-40vh); transform: translateX(21px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(12px) translateY(-50vh); transform: translateX(12px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-34px) translateY(-100vh); transform: translateX(-34px) 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(-16px) translateY(-10vh); transform: translateX(-16px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(22px) translateY(-20vh); transform: translateX(22px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(25px) translateY(-30vh); transform: translateX(25px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(21px) translateY(-40vh); transform: translateX(21px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(12px) translateY(-50vh); transform: translateX(12px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-34px) translateY(-100vh); transform: translateX(-34px) 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(-19px) translateY(-10vh); transform: translateX(-19px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(5px) translateY(-20vh); transform: translateX(5px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(31px) translateY(-30vh); transform: translateX(31px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-18px) translateY(-40vh); transform: translateX(-18px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-5px) translateY(-50vh); transform: translateX(-5px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-23px) translateY(-100vh); transform: translateX(-23px) 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(-19px) translateY(-10vh); transform: translateX(-19px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(5px) translateY(-20vh); transform: translateX(5px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(31px) translateY(-30vh); transform: translateX(31px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-18px) translateY(-40vh); transform: translateX(-18px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-5px) translateY(-50vh); transform: translateX(-5px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-23px) translateY(-100vh); transform: translateX(-23px) 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(0px) translateY(-10vh); transform: translateX(0px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-14px) translateY(-20vh); transform: translateX(-14px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(20px) translateY(-30vh); transform: translateX(20px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-34px) translateY(-40vh); transform: translateX(-34px) 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-30 { 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(-14px) translateY(-20vh); transform: translateX(-14px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(20px) translateY(-30vh); transform: translateX(20px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-34px) translateY(-40vh); transform: translateX(-34px) 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(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(-10px) translateY(-10vh); transform: translateX(-10px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(31px) translateY(-20vh); transform: translateX(31px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-14px) translateY(-30vh); transform: translateX(-14px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-14px) translateY(-40vh); transform: translateX(-14px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-38px) translateY(-50vh); transform: translateX(-38px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-5px) translateY(-100vh); transform: translateX(-5px) 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(-10px) translateY(-10vh); transform: translateX(-10px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(31px) translateY(-20vh); transform: translateX(31px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-14px) translateY(-30vh); transform: translateX(-14px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-14px) translateY(-40vh); transform: translateX(-14px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-38px) translateY(-50vh); transform: translateX(-38px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-5px) translateY(-100vh); transform: translateX(-5px) 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(-28px) translateY(-10vh); transform: translateX(-28px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(0px) translateY(-20vh); transform: translateX(0px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-26px) translateY(-30vh); transform: translateX(-26px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(25px) translateY(-40vh); transform: translateX(25px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(22px) translateY(-50vh); transform: translateX(22px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-1px) translateY(-100vh); transform: translateX(-1px) 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(-28px) translateY(-10vh); transform: translateX(-28px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(0px) translateY(-20vh); transform: translateX(0px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-26px) translateY(-30vh); transform: translateX(-26px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(25px) translateY(-40vh); transform: translateX(25px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(22px) translateY(-50vh); transform: translateX(22px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-1px) translateY(-100vh); transform: translateX(-1px) 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(-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(-36px) translateY(-30vh); transform: translateX(-36px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(37px) translateY(-40vh); transform: translateX(37px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(15px) translateY(-50vh); transform: translateX(15px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(34px) translateY(-100vh); transform: translateX(34px) 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(-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(-36px) translateY(-30vh); transform: translateX(-36px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(37px) translateY(-40vh); transform: translateX(37px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(15px) translateY(-50vh); transform: translateX(15px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(34px) translateY(-100vh); transform: translateX(34px) 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(-36px) translateY(-10vh); transform: translateX(-36px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(21px) translateY(-20vh); transform: translateX(21px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-19px) translateY(-30vh); transform: translateX(-19px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-8px) translateY(-40vh); transform: translateX(-8px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-19px) translateY(-50vh); transform: translateX(-19px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(21px) translateY(-100vh); transform: translateX(21px) 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(-36px) translateY(-10vh); transform: translateX(-36px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(21px) translateY(-20vh); transform: translateX(21px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-19px) translateY(-30vh); transform: translateX(-19px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-8px) translateY(-40vh); transform: translateX(-8px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-19px) translateY(-50vh); transform: translateX(-19px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(21px) translateY(-100vh); transform: translateX(21px) 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(-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(16px) translateY(-30vh); transform: translateX(16px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(4px) translateY(-40vh); transform: translateX(4px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-29px) translateY(-50vh); transform: translateX(-29px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(9px) translateY(-100vh); transform: translateX(9px) 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(-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(16px) translateY(-30vh); transform: translateX(16px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(4px) translateY(-40vh); transform: translateX(4px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-29px) translateY(-50vh); transform: translateX(-29px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(9px) translateY(-100vh); transform: translateX(9px) 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(-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(34px) translateY(-30vh); transform: translateX(34px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-22px) translateY(-40vh); transform: translateX(-22px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(14px) translateY(-50vh); transform: translateX(14px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(26px) translateY(-100vh); transform: translateX(26px) 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(-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(34px) translateY(-30vh); transform: translateX(34px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-22px) translateY(-40vh); transform: translateX(-22px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(14px) translateY(-50vh); transform: translateX(14px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(26px) translateY(-100vh); transform: translateX(26px) 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(1px) translateY(-10vh); transform: translateX(1px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(20px) translateY(-20vh); transform: translateX(20px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-30px) translateY(-30vh); transform: translateX(-30px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-38px) translateY(-40vh); transform: translateX(-38px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(26px) translateY(-50vh); transform: translateX(26px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-36px) translateY(-100vh); transform: translateX(-36px) 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(1px) translateY(-10vh); transform: translateX(1px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(20px) translateY(-20vh); transform: translateX(20px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-30px) translateY(-30vh); transform: translateX(-30px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-38px) translateY(-40vh); transform: translateX(-38px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(26px) translateY(-50vh); transform: translateX(26px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-36px) translateY(-100vh); transform: translateX(-36px) 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(-38px) translateY(-20vh); transform: translateX(-38px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-23px) translateY(-30vh); transform: translateX(-23px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-21px) translateY(-40vh); transform: translateX(-21px) 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-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(-38px) translateY(-20vh); transform: translateX(-38px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-23px) translateY(-30vh); transform: translateX(-23px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-21px) translateY(-40vh); transform: translateX(-21px) 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(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(-9px) translateY(-10vh); transform: translateX(-9px) 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(-16px) translateY(-40vh); transform: translateX(-16px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(11px) translateY(-50vh); transform: translateX(11px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-25px) translateY(-100vh); transform: translateX(-25px) 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(-9px) translateY(-10vh); transform: translateX(-9px) 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(-16px) translateY(-40vh); transform: translateX(-16px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(11px) translateY(-50vh); transform: translateX(11px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-25px) translateY(-100vh); transform: translateX(-25px) 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(-32px) translateY(-10vh); transform: translateX(-32px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(38px) translateY(-20vh); transform: translateX(38px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(12px) translateY(-30vh); transform: translateX(12px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(40px) translateY(-40vh); transform: translateX(40px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(8px) translateY(-50vh); transform: translateX(8px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-18px) translateY(-100vh); transform: translateX(-18px) 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(-32px) translateY(-10vh); transform: translateX(-32px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(38px) translateY(-20vh); transform: translateX(38px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(12px) translateY(-30vh); transform: translateX(12px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(40px) translateY(-40vh); transform: translateX(40px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(8px) translateY(-50vh); transform: translateX(8px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-18px) translateY(-100vh); transform: translateX(-18px) 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(37px) translateY(-10vh); transform: translateX(37px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-38px) translateY(-20vh); transform: translateX(-38px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(21px) translateY(-30vh); transform: translateX(21px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(12px) translateY(-40vh); transform: translateX(12px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(26px) translateY(-50vh); transform: translateX(26px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-24px) translateY(-100vh); transform: translateX(-24px) 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(37px) translateY(-10vh); transform: translateX(37px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-38px) translateY(-20vh); transform: translateX(-38px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(21px) translateY(-30vh); transform: translateX(21px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(12px) translateY(-40vh); transform: translateX(12px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(26px) translateY(-50vh); transform: translateX(26px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-24px) translateY(-100vh); transform: translateX(-24px) 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(24px) translateY(-10vh); transform: translateX(24px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-26px) translateY(-20vh); transform: translateX(-26px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-15px) translateY(-30vh); transform: translateX(-15px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-19px) translateY(-40vh); transform: translateX(-19px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-29px) translateY(-50vh); transform: translateX(-29px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(24px) translateY(-100vh); transform: translateX(24px) 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(24px) translateY(-10vh); transform: translateX(24px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-26px) translateY(-20vh); transform: translateX(-26px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-15px) translateY(-30vh); transform: translateX(-15px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-19px) translateY(-40vh); transform: translateX(-19px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-29px) translateY(-50vh); transform: translateX(-29px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(24px) translateY(-100vh); transform: translateX(24px) 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(-12px) translateY(-10vh); transform: translateX(-12px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(17px) translateY(-20vh); transform: translateX(17px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-33px) translateY(-30vh); transform: translateX(-33px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(17px) translateY(-40vh); transform: translateX(17px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-6px) translateY(-50vh); transform: translateX(-6px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(28px) translateY(-100vh); transform: translateX(28px) 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(-12px) translateY(-10vh); transform: translateX(-12px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(17px) translateY(-20vh); transform: translateX(17px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-33px) translateY(-30vh); transform: translateX(-33px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(17px) translateY(-40vh); transform: translateX(17px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-6px) translateY(-50vh); transform: translateX(-6px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(28px) translateY(-100vh); transform: translateX(28px) 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(38px) translateY(-10vh); transform: translateX(38px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(3px) translateY(-20vh); transform: translateX(3px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(14px) translateY(-30vh); transform: translateX(14px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-20px) translateY(-40vh); transform: translateX(-20px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-1px) translateY(-50vh); transform: translateX(-1px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-23px) translateY(-100vh); transform: translateX(-23px) 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(38px) translateY(-10vh); transform: translateX(38px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(3px) translateY(-20vh); transform: translateX(3px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(14px) translateY(-30vh); transform: translateX(14px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-20px) translateY(-40vh); transform: translateX(-20px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-1px) translateY(-50vh); transform: translateX(-1px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-23px) translateY(-100vh); transform: translateX(-23px) 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(-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(-37px) translateY(-30vh); transform: translateX(-37px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(25px) translateY(-40vh); transform: translateX(25px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(3px) translateY(-50vh); transform: translateX(3px) 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(-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(-37px) translateY(-30vh); transform: translateX(-37px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(25px) translateY(-40vh); transform: translateX(25px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(3px) translateY(-50vh); transform: translateX(3px) 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(24px) translateY(-10vh); transform: translateX(24px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-25px) translateY(-20vh); transform: translateX(-25px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-28px) translateY(-30vh); transform: translateX(-28px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(30px) translateY(-40vh); transform: translateX(30px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(4px) translateY(-50vh); transform: translateX(4px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-6px) translateY(-100vh); transform: translateX(-6px) 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(24px) translateY(-10vh); transform: translateX(24px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-25px) translateY(-20vh); transform: translateX(-25px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-28px) translateY(-30vh); transform: translateX(-28px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(30px) translateY(-40vh); transform: translateX(30px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(4px) translateY(-50vh); transform: translateX(4px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-6px) translateY(-100vh); transform: translateX(-6px) 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(-32px) translateY(-10vh); transform: translateX(-32px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-21px) translateY(-20vh); transform: translateX(-21px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(40px) translateY(-30vh); transform: translateX(40px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(19px) translateY(-40vh); transform: translateX(19px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-4px) translateY(-50vh); transform: translateX(-4px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(22px) translateY(-100vh); transform: translateX(22px) 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(-32px) translateY(-10vh); transform: translateX(-32px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-21px) translateY(-20vh); transform: translateX(-21px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(40px) translateY(-30vh); transform: translateX(40px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(19px) translateY(-40vh); transform: translateX(19px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-4px) translateY(-50vh); transform: translateX(-4px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(22px) translateY(-100vh); transform: translateX(22px) 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(-36px) translateY(-10vh); transform: translateX(-36px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-20px) translateY(-20vh); transform: translateX(-20px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(32px) translateY(-30vh); transform: translateX(32px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-27px) translateY(-40vh); transform: translateX(-27px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(9px) translateY(-50vh); transform: translateX(9px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(18px) translateY(-100vh); transform: translateX(18px) 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(-36px) translateY(-10vh); transform: translateX(-36px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-20px) translateY(-20vh); transform: translateX(-20px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(32px) translateY(-30vh); transform: translateX(32px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-27px) translateY(-40vh); transform: translateX(-27px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(9px) translateY(-50vh); transform: translateX(9px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(18px) translateY(-100vh); transform: translateX(18px) 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(-28px) translateY(-10vh); transform: translateX(-28px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-7px) translateY(-20vh); transform: translateX(-7px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(4px) translateY(-30vh); transform: translateX(4px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-10px) translateY(-40vh); transform: translateX(-10px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(16px) translateY(-50vh); transform: translateX(16px) 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(-28px) translateY(-10vh); transform: translateX(-28px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-7px) translateY(-20vh); transform: translateX(-7px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(4px) translateY(-30vh); transform: translateX(4px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-10px) translateY(-40vh); transform: translateX(-10px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(16px) translateY(-50vh); transform: translateX(16px) 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(-11px) translateY(-10vh); transform: translateX(-11px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(9px) translateY(-20vh); transform: translateX(9px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-30px) translateY(-30vh); transform: translateX(-30px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(36px) translateY(-40vh); transform: translateX(36px) 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-50 { 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(9px) translateY(-20vh); transform: translateX(9px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-30px) translateY(-30vh); transform: translateX(-30px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(36px) translateY(-40vh); transform: translateX(36px) 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(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(-31px) translateY(-10vh); transform: translateX(-31px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(35px) translateY(-20vh); transform: translateX(35px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-20px) translateY(-30vh); transform: translateX(-20px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(16px) translateY(-40vh); transform: translateX(16px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(7px) translateY(-50vh); transform: translateX(7px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-33px) translateY(-100vh); transform: translateX(-33px) 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(-31px) translateY(-10vh); transform: translateX(-31px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(35px) translateY(-20vh); transform: translateX(35px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-20px) translateY(-30vh); transform: translateX(-20px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(16px) translateY(-40vh); transform: translateX(16px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(7px) translateY(-50vh); transform: translateX(7px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-33px) translateY(-100vh); transform: translateX(-33px) 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(13px) translateY(-10vh); transform: translateX(13px) 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(-30px) translateY(-40vh); transform: translateX(-30px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-13px) translateY(-50vh); transform: translateX(-13px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(3px) translateY(-100vh); transform: translateX(3px) 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(13px) translateY(-10vh); transform: translateX(13px) 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(-30px) translateY(-40vh); transform: translateX(-30px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-13px) translateY(-50vh); transform: translateX(-13px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(3px) translateY(-100vh); transform: translateX(3px) 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(34px) translateY(-10vh); transform: translateX(34px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-33px) translateY(-20vh); transform: translateX(-33px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-32px) translateY(-30vh); transform: translateX(-32px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-18px) translateY(-40vh); transform: translateX(-18px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(13px) translateY(-50vh); transform: translateX(13px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-3px) translateY(-100vh); transform: translateX(-3px) 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(34px) translateY(-10vh); transform: translateX(34px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-33px) translateY(-20vh); transform: translateX(-33px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-32px) translateY(-30vh); transform: translateX(-32px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-18px) translateY(-40vh); transform: translateX(-18px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(13px) translateY(-50vh); transform: translateX(13px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-3px) translateY(-100vh); transform: translateX(-3px) 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(29px) translateY(-10vh); transform: translateX(29px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(8px) translateY(-20vh); transform: translateX(8px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(15px) translateY(-30vh); transform: translateX(15px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-1px) translateY(-40vh); transform: translateX(-1px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-31px) translateY(-50vh); transform: translateX(-31px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(29px) translateY(-100vh); transform: translateX(29px) 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(29px) translateY(-10vh); transform: translateX(29px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(8px) translateY(-20vh); transform: translateX(8px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(15px) translateY(-30vh); transform: translateX(15px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-1px) translateY(-40vh); transform: translateX(-1px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-31px) translateY(-50vh); transform: translateX(-31px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(29px) translateY(-100vh); transform: translateX(29px) 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(17px) translateY(-10vh); transform: translateX(17px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(3px) translateY(-20vh); transform: translateX(3px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(24px) translateY(-30vh); transform: translateX(24px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-13px) translateY(-40vh); transform: translateX(-13px) 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-55 { 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(3px) translateY(-20vh); transform: translateX(3px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(24px) translateY(-30vh); transform: translateX(24px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-13px) translateY(-40vh); transform: translateX(-13px) 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(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(26px) translateY(-10vh); transform: translateX(26px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(34px) translateY(-20vh); transform: translateX(34px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(20px) translateY(-30vh); transform: translateX(20px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(27px) translateY(-40vh); transform: translateX(27px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(23px) translateY(-50vh); transform: translateX(23px) 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(26px) translateY(-10vh); transform: translateX(26px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(34px) translateY(-20vh); transform: translateX(34px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(20px) translateY(-30vh); transform: translateX(20px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(27px) translateY(-40vh); transform: translateX(27px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(23px) translateY(-50vh); transform: translateX(23px) 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(-37px) translateY(-10vh); transform: translateX(-37px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-18px) translateY(-20vh); transform: translateX(-18px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-35px) translateY(-30vh); transform: translateX(-35px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(3px) translateY(-40vh); transform: translateX(3px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(35px) translateY(-50vh); transform: translateX(35px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(10px) translateY(-100vh); transform: translateX(10px) 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(-37px) translateY(-10vh); transform: translateX(-37px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-18px) translateY(-20vh); transform: translateX(-18px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-35px) translateY(-30vh); transform: translateX(-35px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(3px) translateY(-40vh); transform: translateX(3px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(35px) translateY(-50vh); transform: translateX(35px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(10px) translateY(-100vh); transform: translateX(10px) 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(34px) translateY(-10vh); transform: translateX(34px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-8px) translateY(-20vh); transform: translateX(-8px) 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(-2px) translateY(-50vh); transform: translateX(-2px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-32px) translateY(-100vh); transform: translateX(-32px) 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(34px) translateY(-10vh); transform: translateX(34px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-8px) translateY(-20vh); transform: translateX(-8px) 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(-2px) translateY(-50vh); transform: translateX(-2px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-32px) translateY(-100vh); transform: translateX(-32px) 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(-16px) translateY(-10vh); transform: translateX(-16px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(7px) translateY(-20vh); transform: translateX(7px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(13px) translateY(-30vh); transform: translateX(13px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-2px) translateY(-40vh); transform: translateX(-2px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(11px) translateY(-50vh); transform: translateX(11px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-15px) translateY(-100vh); transform: translateX(-15px) 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(-16px) translateY(-10vh); transform: translateX(-16px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(7px) translateY(-20vh); transform: translateX(7px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(13px) translateY(-30vh); transform: translateX(13px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-2px) translateY(-40vh); transform: translateX(-2px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(11px) translateY(-50vh); transform: translateX(11px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-15px) translateY(-100vh); transform: translateX(-15px) 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(-24px) translateY(-10vh); transform: translateX(-24px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(10px) translateY(-20vh); transform: translateX(10px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(37px) translateY(-30vh); transform: translateX(37px) 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(-30px) translateY(-100vh); transform: translateX(-30px) 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(-24px) translateY(-10vh); transform: translateX(-24px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(10px) translateY(-20vh); transform: translateX(10px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(37px) translateY(-30vh); transform: translateX(37px) 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(-30px) translateY(-100vh); transform: translateX(-30px) 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(35px) translateY(-10vh); transform: translateX(35px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(17px) translateY(-20vh); transform: translateX(17px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-4px) translateY(-30vh); transform: translateX(-4px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-28px) translateY(-40vh); transform: translateX(-28px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(11px) translateY(-50vh); transform: translateX(11px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(23px) translateY(-100vh); transform: translateX(23px) 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(35px) translateY(-10vh); transform: translateX(35px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(17px) translateY(-20vh); transform: translateX(17px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-4px) translateY(-30vh); transform: translateX(-4px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-28px) translateY(-40vh); transform: translateX(-28px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(11px) translateY(-50vh); transform: translateX(11px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(23px) translateY(-100vh); transform: translateX(23px) 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(-17px) translateY(-10vh); transform: translateX(-17px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-13px) translateY(-20vh); transform: translateX(-13px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(21px) translateY(-30vh); transform: translateX(21px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(22px) translateY(-40vh); transform: translateX(22px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-18px) translateY(-50vh); transform: translateX(-18px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-23px) translateY(-100vh); transform: translateX(-23px) 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(-17px) translateY(-10vh); transform: translateX(-17px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-13px) translateY(-20vh); transform: translateX(-13px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(21px) translateY(-30vh); transform: translateX(21px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(22px) translateY(-40vh); transform: translateX(22px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-18px) translateY(-50vh); transform: translateX(-18px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-23px) translateY(-100vh); transform: translateX(-23px) 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(27px) translateY(-10vh); transform: translateX(27px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-24px) translateY(-20vh); transform: translateX(-24px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-28px) translateY(-30vh); transform: translateX(-28px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(10px) translateY(-40vh); transform: translateX(10px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(37px) translateY(-50vh); transform: translateX(37px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-31px) translateY(-100vh); transform: translateX(-31px) 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(27px) translateY(-10vh); transform: translateX(27px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-24px) translateY(-20vh); transform: translateX(-24px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-28px) translateY(-30vh); transform: translateX(-28px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(10px) translateY(-40vh); transform: translateX(10px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(37px) translateY(-50vh); transform: translateX(37px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-31px) translateY(-100vh); transform: translateX(-31px) 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(16px) translateY(-10vh); transform: translateX(16px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(23px) translateY(-20vh); transform: translateX(23px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-4px) translateY(-30vh); transform: translateX(-4px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(1px) translateY(-40vh); transform: translateX(1px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(20px) translateY(-50vh); transform: translateX(20px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(28px) translateY(-100vh); transform: translateX(28px) 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(16px) translateY(-10vh); transform: translateX(16px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(23px) translateY(-20vh); transform: translateX(23px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-4px) translateY(-30vh); transform: translateX(-4px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(1px) translateY(-40vh); transform: translateX(1px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(20px) translateY(-50vh); transform: translateX(20px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(28px) translateY(-100vh); transform: translateX(28px) 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(-11px) translateY(-10vh); transform: translateX(-11px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-37px) translateY(-20vh); transform: translateX(-37px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-19px) translateY(-30vh); transform: translateX(-19px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-34px) translateY(-40vh); transform: translateX(-34px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-38px) translateY(-50vh); transform: translateX(-38px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-20px) translateY(-100vh); transform: translateX(-20px) 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(-11px) translateY(-10vh); transform: translateX(-11px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-37px) translateY(-20vh); transform: translateX(-37px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-19px) translateY(-30vh); transform: translateX(-19px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-34px) translateY(-40vh); transform: translateX(-34px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-38px) translateY(-50vh); transform: translateX(-38px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-20px) translateY(-100vh); transform: translateX(-20px) 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(-25px) translateY(-10vh); transform: translateX(-25px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(31px) translateY(-20vh); transform: translateX(31px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-8px) translateY(-30vh); transform: translateX(-8px) 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(2px) translateY(-100vh); transform: translateX(2px) 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(-25px) translateY(-10vh); transform: translateX(-25px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(31px) translateY(-20vh); transform: translateX(31px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-8px) translateY(-30vh); transform: translateX(-8px) 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(2px) translateY(-100vh); transform: translateX(2px) 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(-22px) translateY(-10vh); transform: translateX(-22px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-36px) translateY(-20vh); transform: translateX(-36px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(19px) translateY(-30vh); transform: translateX(19px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(29px) translateY(-40vh); transform: translateX(29px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-28px) translateY(-50vh); transform: translateX(-28px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-36px) translateY(-100vh); transform: translateX(-36px) 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(-22px) translateY(-10vh); transform: translateX(-22px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-36px) translateY(-20vh); transform: translateX(-36px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(19px) translateY(-30vh); transform: translateX(19px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(29px) translateY(-40vh); transform: translateX(29px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-28px) translateY(-50vh); transform: translateX(-28px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-36px) translateY(-100vh); transform: translateX(-36px) 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(0px) translateY(-10vh); transform: translateX(0px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(31px) translateY(-20vh); transform: translateX(31px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-28px) translateY(-30vh); transform: translateX(-28px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-23px) translateY(-40vh); transform: translateX(-23px) 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-68 { 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(31px) translateY(-20vh); transform: translateX(31px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-28px) translateY(-30vh); transform: translateX(-28px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-23px) translateY(-40vh); transform: translateX(-23px) 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(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(8px) translateY(-10vh); transform: translateX(8px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-27px) translateY(-20vh); transform: translateX(-27px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(36px) translateY(-30vh); transform: translateX(36px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(28px) translateY(-40vh); transform: translateX(28px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(19px) translateY(-50vh); transform: translateX(19px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(37px) translateY(-100vh); transform: translateX(37px) 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(8px) translateY(-10vh); transform: translateX(8px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-27px) translateY(-20vh); transform: translateX(-27px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(36px) translateY(-30vh); transform: translateX(36px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(28px) translateY(-40vh); transform: translateX(28px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(19px) translateY(-50vh); transform: translateX(19px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(37px) translateY(-100vh); transform: translateX(37px) 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(-4px) translateY(-10vh); transform: translateX(-4px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(30px) translateY(-20vh); transform: translateX(30px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(28px) translateY(-30vh); transform: translateX(28px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-9px) translateY(-40vh); transform: translateX(-9px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(24px) translateY(-50vh); transform: translateX(24px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-31px) translateY(-100vh); transform: translateX(-31px) 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(-4px) translateY(-10vh); transform: translateX(-4px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(30px) translateY(-20vh); transform: translateX(30px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(28px) translateY(-30vh); transform: translateX(28px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-9px) translateY(-40vh); transform: translateX(-9px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(24px) translateY(-50vh); transform: translateX(24px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-31px) translateY(-100vh); transform: translateX(-31px) 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(14px) translateY(-10vh); transform: translateX(14px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-31px) translateY(-20vh); transform: translateX(-31px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-22px) translateY(-30vh); transform: translateX(-22px) 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(-19px) translateY(-100vh); transform: translateX(-19px) 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(14px) translateY(-10vh); transform: translateX(14px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-31px) translateY(-20vh); transform: translateX(-31px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-22px) translateY(-30vh); transform: translateX(-22px) 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(-19px) translateY(-100vh); transform: translateX(-19px) 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(-20px) translateY(-10vh); transform: translateX(-20px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-23px) translateY(-20vh); transform: translateX(-23px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-33px) translateY(-30vh); transform: translateX(-33px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(9px) translateY(-40vh); transform: translateX(9px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-3px) translateY(-50vh); transform: translateX(-3px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-28px) translateY(-100vh); transform: translateX(-28px) 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(-20px) translateY(-10vh); transform: translateX(-20px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-23px) translateY(-20vh); transform: translateX(-23px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-33px) translateY(-30vh); transform: translateX(-33px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(9px) translateY(-40vh); transform: translateX(9px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-3px) translateY(-50vh); transform: translateX(-3px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-28px) translateY(-100vh); transform: translateX(-28px) 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(-21px) translateY(-10vh); transform: translateX(-21px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(18px) translateY(-20vh); transform: translateX(18px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(11px) translateY(-30vh); transform: translateX(11px) 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(0px) translateY(-100vh); transform: translateX(0px) 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(-21px) translateY(-10vh); transform: translateX(-21px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(18px) translateY(-20vh); transform: translateX(18px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(11px) translateY(-30vh); transform: translateX(11px) 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(0px) translateY(-100vh); transform: translateX(0px) 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(2px) translateY(-10vh); transform: translateX(2px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-38px) translateY(-20vh); transform: translateX(-38px) 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(-5px) translateY(-50vh); transform: translateX(-5px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(39px) translateY(-100vh); transform: translateX(39px) 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(2px) translateY(-10vh); transform: translateX(2px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-38px) translateY(-20vh); transform: translateX(-38px) 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(-5px) translateY(-50vh); transform: translateX(-5px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(39px) translateY(-100vh); transform: translateX(39px) 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(-37px) translateY(-10vh); transform: translateX(-37px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-26px) translateY(-20vh); transform: translateX(-26px) 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(31px) translateY(-50vh); transform: translateX(31px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-7px) translateY(-100vh); transform: translateX(-7px) 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(-37px) translateY(-10vh); transform: translateX(-37px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-26px) translateY(-20vh); transform: translateX(-26px) 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(31px) translateY(-50vh); transform: translateX(31px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-7px) translateY(-100vh); transform: translateX(-7px) 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(6px) translateY(-10vh); transform: translateX(6px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(23px) translateY(-20vh); transform: translateX(23px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-36px) translateY(-30vh); transform: translateX(-36px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-16px) translateY(-40vh); transform: translateX(-16px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(15px) translateY(-50vh); transform: translateX(15px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-7px) translateY(-100vh); transform: translateX(-7px) 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(6px) translateY(-10vh); transform: translateX(6px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(23px) translateY(-20vh); transform: translateX(23px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-36px) translateY(-30vh); transform: translateX(-36px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-16px) translateY(-40vh); transform: translateX(-16px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(15px) translateY(-50vh); transform: translateX(15px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-7px) translateY(-100vh); transform: translateX(-7px) 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(-2px) translateY(-10vh); transform: translateX(-2px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-38px) translateY(-20vh); transform: translateX(-38px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-39px) translateY(-30vh); transform: translateX(-39px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(4px) translateY(-40vh); transform: translateX(4px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(26px) translateY(-50vh); transform: translateX(26px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-8px) translateY(-100vh); transform: translateX(-8px) 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(-2px) translateY(-10vh); transform: translateX(-2px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-38px) translateY(-20vh); transform: translateX(-38px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-39px) translateY(-30vh); transform: translateX(-39px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(4px) translateY(-40vh); transform: translateX(4px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(26px) translateY(-50vh); transform: translateX(26px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-8px) translateY(-100vh); transform: translateX(-8px) 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(-34px) translateY(-10vh); transform: translateX(-34px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-6px) translateY(-20vh); transform: translateX(-6px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-2px) translateY(-30vh); transform: translateX(-2px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-26px) translateY(-40vh); transform: translateX(-26px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(3px) translateY(-50vh); transform: translateX(3px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-20px) translateY(-100vh); transform: translateX(-20px) 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(-34px) translateY(-10vh); transform: translateX(-34px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-6px) translateY(-20vh); transform: translateX(-6px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-2px) translateY(-30vh); transform: translateX(-2px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-26px) translateY(-40vh); transform: translateX(-26px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(3px) translateY(-50vh); transform: translateX(3px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-20px) translateY(-100vh); transform: translateX(-20px) 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(-23px) translateY(-10vh); transform: translateX(-23px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-2px) translateY(-20vh); transform: translateX(-2px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-6px) translateY(-30vh); transform: translateX(-6px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-13px) translateY(-40vh); transform: translateX(-13px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(24px) translateY(-50vh); transform: translateX(24px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(9px) translateY(-100vh); transform: translateX(9px) 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(-23px) translateY(-10vh); transform: translateX(-23px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-2px) translateY(-20vh); transform: translateX(-2px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-6px) translateY(-30vh); transform: translateX(-6px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-13px) translateY(-40vh); transform: translateX(-13px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(24px) translateY(-50vh); transform: translateX(24px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(9px) translateY(-100vh); transform: translateX(9px) 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(-14px) translateY(-10vh); transform: translateX(-14px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(22px) translateY(-20vh); transform: translateX(22px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-37px) translateY(-30vh); transform: translateX(-37px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(29px) translateY(-40vh); transform: translateX(29px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(30px) translateY(-50vh); transform: translateX(30px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-20px) translateY(-100vh); transform: translateX(-20px) 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(-14px) translateY(-10vh); transform: translateX(-14px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(22px) translateY(-20vh); transform: translateX(22px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-37px) translateY(-30vh); transform: translateX(-37px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(29px) translateY(-40vh); transform: translateX(29px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(30px) translateY(-50vh); transform: translateX(30px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-20px) translateY(-100vh); transform: translateX(-20px) 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(-19px) translateY(-10vh); transform: translateX(-19px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(15px) translateY(-20vh); transform: translateX(15px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-25px) translateY(-30vh); transform: translateX(-25px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-18px) translateY(-40vh); transform: translateX(-18px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(8px) translateY(-50vh); transform: translateX(8px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(7px) translateY(-100vh); transform: translateX(7px) 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(-19px) translateY(-10vh); transform: translateX(-19px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(15px) translateY(-20vh); transform: translateX(15px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-25px) translateY(-30vh); transform: translateX(-25px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-18px) translateY(-40vh); transform: translateX(-18px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(8px) translateY(-50vh); transform: translateX(8px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(7px) translateY(-100vh); transform: translateX(7px) 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(-4px) translateY(-10vh); transform: translateX(-4px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(24px) translateY(-20vh); transform: translateX(24px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-25px) translateY(-30vh); transform: translateX(-25px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(24px) translateY(-40vh); transform: translateX(24px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(0px) translateY(-50vh); transform: translateX(0px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-7px) translateY(-100vh); transform: translateX(-7px) 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(-4px) translateY(-10vh); transform: translateX(-4px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(24px) translateY(-20vh); transform: translateX(24px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-25px) translateY(-30vh); transform: translateX(-25px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(24px) translateY(-40vh); transform: translateX(24px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(0px) translateY(-50vh); transform: translateX(0px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-7px) translateY(-100vh); transform: translateX(-7px) 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(40px) translateY(-10vh); transform: translateX(40px) 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(-5px) translateY(-40vh); transform: translateX(-5px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-9px) translateY(-50vh); transform: translateX(-9px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(25px) translateY(-100vh); transform: translateX(25px) 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(40px) translateY(-10vh); transform: translateX(40px) 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(-5px) translateY(-40vh); transform: translateX(-5px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-9px) translateY(-50vh); transform: translateX(-9px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(25px) translateY(-100vh); transform: translateX(25px) 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(-33px) translateY(-10vh); transform: translateX(-33px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-33px) translateY(-20vh); transform: translateX(-33px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(27px) translateY(-30vh); transform: translateX(27px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(25px) translateY(-40vh); transform: translateX(25px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(5px) translateY(-50vh); transform: translateX(5px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(38px) translateY(-100vh); transform: translateX(38px) 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(-33px) translateY(-10vh); transform: translateX(-33px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-33px) translateY(-20vh); transform: translateX(-33px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(27px) translateY(-30vh); transform: translateX(27px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(25px) translateY(-40vh); transform: translateX(25px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(5px) translateY(-50vh); transform: translateX(5px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(38px) translateY(-100vh); transform: translateX(38px) 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(-30px) translateY(-10vh); transform: translateX(-30px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(24px) translateY(-20vh); transform: translateX(24px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-35px) translateY(-30vh); transform: translateX(-35px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-39px) translateY(-40vh); transform: translateX(-39px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-28px) translateY(-50vh); transform: translateX(-28px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(15px) translateY(-100vh); transform: translateX(15px) 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(-30px) translateY(-10vh); transform: translateX(-30px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(24px) translateY(-20vh); transform: translateX(24px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-35px) translateY(-30vh); transform: translateX(-35px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-39px) translateY(-40vh); transform: translateX(-39px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-28px) translateY(-50vh); transform: translateX(-28px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(15px) translateY(-100vh); transform: translateX(15px) 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(-32px) translateY(-10vh); transform: translateX(-32px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-36px) translateY(-20vh); transform: translateX(-36px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(14px) translateY(-30vh); transform: translateX(14px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-6px) translateY(-40vh); transform: translateX(-6px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(29px) translateY(-50vh); transform: translateX(29px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-9px) translateY(-100vh); transform: translateX(-9px) 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(-32px) translateY(-10vh); transform: translateX(-32px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-36px) translateY(-20vh); transform: translateX(-36px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(14px) translateY(-30vh); transform: translateX(14px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-6px) translateY(-40vh); transform: translateX(-6px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(29px) translateY(-50vh); transform: translateX(29px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-9px) translateY(-100vh); transform: translateX(-9px) 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(-23px) translateY(-10vh); transform: translateX(-23px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(3px) translateY(-20vh); transform: translateX(3px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-23px) translateY(-30vh); transform: translateX(-23px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(13px) translateY(-40vh); transform: translateX(13px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-36px) translateY(-50vh); transform: translateX(-36px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-24px) translateY(-100vh); transform: translateX(-24px) 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(-23px) translateY(-10vh); transform: translateX(-23px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(3px) translateY(-20vh); transform: translateX(3px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-23px) translateY(-30vh); transform: translateX(-23px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(13px) translateY(-40vh); transform: translateX(13px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-36px) translateY(-50vh); transform: translateX(-36px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-24px) translateY(-100vh); transform: translateX(-24px) 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(-12px) translateY(-10vh); transform: translateX(-12px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(39px) translateY(-20vh); transform: translateX(39px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(12px) translateY(-30vh); transform: translateX(12px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(30px) translateY(-40vh); transform: translateX(30px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-28px) translateY(-50vh); transform: translateX(-28px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-17px) translateY(-100vh); transform: translateX(-17px) 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(-12px) translateY(-10vh); transform: translateX(-12px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(39px) translateY(-20vh); transform: translateX(39px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(12px) translateY(-30vh); transform: translateX(12px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(30px) translateY(-40vh); transform: translateX(30px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-28px) translateY(-50vh); transform: translateX(-28px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-17px) translateY(-100vh); transform: translateX(-17px) 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(-13px) translateY(-10vh); transform: translateX(-13px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-16px) translateY(-20vh); transform: translateX(-16px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-30px) translateY(-30vh); transform: translateX(-30px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(39px) translateY(-40vh); transform: translateX(39px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-9px) translateY(-50vh); transform: translateX(-9px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(34px) translateY(-100vh); transform: translateX(34px) 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(-13px) translateY(-10vh); transform: translateX(-13px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-16px) translateY(-20vh); transform: translateX(-16px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-30px) translateY(-30vh); transform: translateX(-30px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(39px) translateY(-40vh); transform: translateX(39px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-9px) translateY(-50vh); transform: translateX(-9px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(34px) translateY(-100vh); transform: translateX(34px) 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(-9px) translateY(-10vh); transform: translateX(-9px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(11px) translateY(-20vh); transform: translateX(11px) 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(4px) translateY(-50vh); transform: translateX(4px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-15px) translateY(-100vh); transform: translateX(-15px) 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(-9px) translateY(-10vh); transform: translateX(-9px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(11px) translateY(-20vh); transform: translateX(11px) 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(4px) translateY(-50vh); transform: translateX(4px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-15px) translateY(-100vh); transform: translateX(-15px) 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(12px) translateY(-10vh); transform: translateX(12px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(8px) translateY(-20vh); transform: translateX(8px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(31px) translateY(-30vh); transform: translateX(31px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-37px) translateY(-40vh); transform: translateX(-37px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(10px) translateY(-50vh); transform: translateX(10px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(28px) translateY(-100vh); transform: translateX(28px) 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(12px) translateY(-10vh); transform: translateX(12px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(8px) translateY(-20vh); transform: translateX(8px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(31px) translateY(-30vh); transform: translateX(31px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-37px) translateY(-40vh); transform: translateX(-37px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(10px) translateY(-50vh); transform: translateX(10px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(28px) translateY(-100vh); transform: translateX(28px) 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(20px) translateY(-10vh); transform: translateX(20px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(7px) translateY(-20vh); transform: translateX(7px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(22px) translateY(-30vh); transform: translateX(22px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(15px) translateY(-40vh); transform: translateX(15px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(38px) translateY(-50vh); transform: translateX(38px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-13px) translateY(-100vh); transform: translateX(-13px) 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(20px) translateY(-10vh); transform: translateX(20px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(7px) translateY(-20vh); transform: translateX(7px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(22px) translateY(-30vh); transform: translateX(22px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(15px) translateY(-40vh); transform: translateX(15px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(38px) translateY(-50vh); transform: translateX(38px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-13px) translateY(-100vh); transform: translateX(-13px) 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(8px) translateY(-20vh); transform: translateX(8px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(4px) translateY(-30vh); transform: translateX(4px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-33px) translateY(-40vh); transform: translateX(-33px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(32px) translateY(-50vh); transform: translateX(32px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-26px) translateY(-100vh); transform: translateX(-26px) 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(8px) translateY(-20vh); transform: translateX(8px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(4px) translateY(-30vh); transform: translateX(4px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-33px) translateY(-40vh); transform: translateX(-33px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(32px) translateY(-50vh); transform: translateX(32px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-26px) translateY(-100vh); transform: translateX(-26px) 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(25px) translateY(-10vh); transform: translateX(25px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(24px) translateY(-20vh); transform: translateX(24px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-29px) translateY(-30vh); transform: translateX(-29px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-12px) translateY(-40vh); transform: translateX(-12px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-23px) translateY(-50vh); transform: translateX(-23px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-38px) translateY(-100vh); transform: translateX(-38px) 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(25px) translateY(-10vh); transform: translateX(25px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(24px) translateY(-20vh); transform: translateX(24px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-29px) translateY(-30vh); transform: translateX(-29px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-12px) translateY(-40vh); transform: translateX(-12px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-23px) translateY(-50vh); transform: translateX(-23px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(-38px) translateY(-100vh); transform: translateX(-38px) 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(-22px) translateY(-10vh); transform: translateX(-22px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-9px) translateY(-20vh); transform: translateX(-9px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(20px) translateY(-30vh); transform: translateX(20px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(20px) translateY(-40vh); transform: translateX(20px) 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-95 { 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(-9px) translateY(-20vh); transform: translateX(-9px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(20px) translateY(-30vh); transform: translateX(20px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(20px) translateY(-40vh); transform: translateX(20px) 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(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(-6px) translateY(-10vh); transform: translateX(-6px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(25px) translateY(-20vh); transform: translateX(25px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(15px) translateY(-30vh); transform: translateX(15px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-14px) translateY(-40vh); transform: translateX(-14px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(15px) translateY(-50vh); transform: translateX(15px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(0px) translateY(-100vh); transform: translateX(0px) 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(-6px) translateY(-10vh); transform: translateX(-6px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(25px) translateY(-20vh); transform: translateX(25px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(15px) translateY(-30vh); transform: translateX(15px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-14px) translateY(-40vh); transform: translateX(-14px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(15px) translateY(-50vh); transform: translateX(15px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(0px) translateY(-100vh); transform: translateX(0px) 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(20px) translateY(-10vh); transform: translateX(20px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(32px) translateY(-20vh); transform: translateX(32px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(18px) translateY(-30vh); transform: translateX(18px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-24px) translateY(-40vh); transform: translateX(-24px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(1px) translateY(-50vh); transform: translateX(1px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(19px) translateY(-100vh); transform: translateX(19px) 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(20px) translateY(-10vh); transform: translateX(20px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(32px) translateY(-20vh); transform: translateX(32px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(18px) translateY(-30vh); transform: translateX(18px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-24px) translateY(-40vh); transform: translateX(-24px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(1px) translateY(-50vh); transform: translateX(1px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(19px) translateY(-100vh); transform: translateX(19px) 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(14px) translateY(-10vh); transform: translateX(14px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-26px) translateY(-20vh); transform: translateX(-26px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(13px) translateY(-30vh); transform: translateX(13px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(18px) translateY(-40vh); transform: translateX(18px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(39px) translateY(-50vh); transform: translateX(39px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(40px) translateY(-100vh); transform: translateX(40px) 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(14px) translateY(-10vh); transform: translateX(14px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-26px) translateY(-20vh); transform: translateX(-26px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(13px) translateY(-30vh); transform: translateX(13px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(18px) translateY(-40vh); transform: translateX(18px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(39px) translateY(-50vh); transform: translateX(39px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(40px) translateY(-100vh); transform: translateX(40px) 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(-10px) translateY(-10vh); transform: translateX(-10px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-1px) translateY(-20vh); transform: translateX(-1px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(3px) translateY(-30vh); transform: translateX(3px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-8px) translateY(-40vh); transform: translateX(-8px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-38px) translateY(-50vh); transform: translateX(-38px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(39px) translateY(-100vh); transform: translateX(39px) 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(-10px) translateY(-10vh); transform: translateX(-10px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-1px) translateY(-20vh); transform: translateX(-1px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(3px) translateY(-30vh); transform: translateX(3px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(-8px) translateY(-40vh); transform: translateX(-8px) translateY(-40vh); opacity: 0.6; } 70% { -webkit-transform: translateX(-38px) translateY(-50vh); transform: translateX(-38px) translateY(-50vh); opacity: 0.5; } 100% { -webkit-transform: translateX(39px) translateY(-100vh); transform: translateX(39px) 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(40px) translateY(-10vh); transform: translateX(40px) translateY(-10vh); opacity: 0.9; } 40% { -webkit-transform: translateX(-30px) translateY(-20vh); transform: translateX(-30px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-20px) translateY(-30vh); transform: translateX(-20px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(38px) translateY(-40vh); transform: translateX(38px) 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-100 { 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(-30px) translateY(-20vh); transform: translateX(-30px) translateY(-20vh); opacity: 0.8; } 50% { -webkit-transform: translateX(-20px) translateY(-30vh); transform: translateX(-20px) translateY(-30vh); opacity: 0.7; } 60% { -webkit-transform: translateX(38px) translateY(-40vh); transform: translateX(38px) 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(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;
}
The Dark - CSS animated background - Script Codes JS Codes
'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) { var Particle = new createParticle(particles.length); particles.push(Particle); particleContainer.innerHTML += Particle.html;
}
// Hope you liked it and that has inspired you to create something awesome
| Developer | Mario Duarte |
| Username | MarioDesigns |
| Uploaded | December 11, 2022 |
| Rating | 4.5 |
| Size | 11,432 Kb |
| Views | 20,240 |
Do you need developer help for The Dark - CSS animated background?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Mario Duarte (MarioDesigns) Script Codes
| Name | Size |
| Floating Particles | 13,587 Kb |
| Minimalist Mobile Mockup | 2,748 Kb |
| 3D Pyramid Animation | 4,521 Kb |
| Interactive 3D Video Thumbnail | 7,015 Kb |
| Flying Bird Animation | 2,873 Kb |
| Diamond - Pure CSS | 3,300 Kb |
| MDesigns Animated Background | 2,888 Kb |
| Colour Game | 0 Kb |
| Hero Animated Canvas Background | 6,714 Kb |
| Carbon Atom Animation | 5,507 Kb |
Create amazing video scripts with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Border-radius animation | Yukulele | 2,480 Kb |
| CSS3 keyframe onload animation. | Samueljseay | 1,706 Kb |
| Getting Started | Viblast | 1,500 Kb |
| Sitemap generator for Sharepoint | Gyusza | 2,518 Kb |
| Android Play Store With Slick Carousel | -J0hn- | 4,982 Kb |
| Border image | JohnRiordan | 2,120 Kb |
| Hmmm... | Rk007 | 4,848 Kb |
| Super Discount | Orrinward | 3,225 Kb |
| SVG Text Masking | JMChristensen | 2,141 Kb |
| Cofee and sugar | Tripack | 2,094 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!