/*** Particle Animation ***/
/*** Inspired by Tuts Plus https://codepen.io/tutsplus/pen/MrjYJK ***/
/*** and particles.js ***/

.particle-container {

  position: relative;
  z-index: 1;
 
}

.home-hero {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  text-align: center;
  z-index: 13;
}


.circle {
  border-radius: 50%;
  position: absolute;
  z-index: 12;
}

@-webkit-keyframes particle-animation-1 {
  0% {
    -webkit-transform: translate3d(67vw, 42vh, 146px) rotate(18deg);
    transform: translate3d(68vw, 72vh, 135px) rotate(75deg);
  }
  100% {
    -webkit-transform: translate3d(18vw, 13vh, 316px) rotate(114deg);
    transform: translate3d(74vw, 51vh, 321px) rotate(80deg);
  }
}
@keyframes particle-animation-1 {
  0% {
    -webkit-transform: translate3d(71vw, 29vh, 2px) rotate(54deg);
    transform: translate3d(83vw, 36vh, 45px) rotate(58deg);
  }
  100% {
    -webkit-transform: translate3d(18vw, 30vh, 181px) rotate(109deg);
    transform: translate3d(38vw, 60vh, 67px) rotate(155deg);
  }
}
@-webkit-keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
.particles span:nth-child(1) {
  -webkit-animation: particle-animation-1 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  animation: particle-animation-1 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  height: 38px;
  width: 38px;
 
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

@-webkit-keyframes particle-animation-2 {
  0% {
    -webkit-transform: translate3d(98vw, 66vh, 27px) rotate(4deg);
    transform: translate3d(76vw, 94vh, 160px) rotate(71deg);
  }
  100% {
    -webkit-transform: translate3d(83vw, 20vh, 102px) rotate(132deg);
    transform: translate3d(21vw, 94vh, 274px) rotate(61deg);
  }
}
@keyframes particle-animation-2 {
  0% {
    -webkit-transform: translate3d(62vw, 90vh, 109px) rotate(49deg);
    transform: translate3d(28vw, 71vh, 261px) rotate(75deg);
  }
  100% {
    -webkit-transform: translate3d(18vw, 13vh, 94px) rotate(5deg);
    transform: translate3d(3vw, 54vh, 202px) rotate(169deg);
  }
}
@-webkit-keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
.particles span:nth-child(2) {
  -webkit-animation: particle-animation-2 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  animation: particle-animation-2 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  height: 46px;
  width: 46px;
 
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
}

@-webkit-keyframes particle-animation-3 {
  0% {
    -webkit-transform: translate3d(96vw, 53vh, 161px) rotate(57deg);
    transform: translate3d(100vw, 6vh, 266px) rotate(82deg);
  }
  100% {
    -webkit-transform: translate3d(31vw, 74vh, 376px) rotate(1deg);
    transform: translate3d(18vw, 84vh, 260px) rotate(3deg);
  }
}
@keyframes particle-animation-3 {
  0% {
    -webkit-transform: translate3d(49vw, 100vh, 46px) rotate(57deg);
    transform: translate3d(102vw, 94vh, 208px) rotate(69deg);
  }
  100% {
    -webkit-transform: translate3d(42vw, 87vh, 249px) rotate(113deg);
    transform: translate3d(74vw, 71vh, 219px) rotate(54deg);
  }
}
@-webkit-keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
.particles span:nth-child(3) {
  -webkit-animation: particle-animation-3 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  animation: particle-animation-3 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  height: 18px;
  width: 18px;
 
  -webkit-animation-delay: -3s;
  animation-delay: -3s;
}

@-webkit-keyframes particle-animation-4 {
  0% {
    -webkit-transform: translate3d(70vw, 43vh, 275px) rotate(54deg);
    transform: translate3d(43vw, 26vh, 71px) rotate(69deg);
  }
  100% {
    -webkit-transform: translate3d(59vw, 100vh, 33px) rotate(171deg);
    transform: translate3d(106vw, 12vh, 324px) rotate(70deg);
  }
}
@keyframes particle-animation-4 {
  0% {
    -webkit-transform: translate3d(57vw, 68vh, 59px) rotate(69deg);
    transform: translate3d(25vw, 96vh, 345px) rotate(12deg);
  }
  100% {
    -webkit-transform: translate3d(65vw, 11vh, 375px) rotate(101deg);
    transform: translate3d(34vw, 11vh, 115px) rotate(121deg);
  }
}
@-webkit-keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
.particles span:nth-child(4) {
  -webkit-animation: particle-animation-4 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  animation: particle-animation-4 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  height: 12px;
  width: 12px;
  
  -webkit-animation-delay: -4s;
  animation-delay: -4s;
}

@-webkit-keyframes particle-animation-5 {
  0% {
    -webkit-transform: translate3d(71vw, 9vh, 159px) rotate(47deg);
    transform: translate3d(37vw, 46vh, 253px) rotate(9deg);
  }
  100% {
    -webkit-transform: translate3d(29vw, 70vh, 152px) rotate(119deg);
    transform: translate3d(84vw, 11vh, 234px) rotate(66deg);
  }
}
@keyframes particle-animation-5 {
  0% {
    -webkit-transform: translate3d(10vw, 77vh, 96px) rotate(62deg);
    transform: translate3d(67vw, 35vh, 196px) rotate(18deg);
  }
  100% {
    -webkit-transform: translate3d(50vw, 46vh, 293px) rotate(98deg);
    transform: translate3d(108vw, 51vh, 195px) rotate(46deg);
  }
}
@-webkit-keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
.particles span:nth-child(5) {
  -webkit-animation: particle-animation-5 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  animation: particle-animation-5 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  height: 43px;
  width: 43px;

  -webkit-animation-delay: -5s;
  animation-delay: -5s;
}

@-webkit-keyframes particle-animation-6 {
  0% {
    -webkit-transform: translate3d(51vw, 25vh, 258px) rotate(75deg);
    transform: translate3d(92vw, 81vh, 279px) rotate(21deg);
  }
  100% {
    -webkit-transform: translate3d(72vw, 73vh, 232px) rotate(68deg);
    transform: translate3d(100vw, 76vh, 124px) rotate(73deg);
  }
}
@keyframes particle-animation-6 {
  0% {
    -webkit-transform: translate3d(47vw, 93vh, 42px) rotate(39deg);
    transform: translate3d(89vw, 18vh, 319px) rotate(51deg);
  }
  100% {
    -webkit-transform: translate3d(26vw, 10vh, 163px) rotate(96deg);
    transform: translate3d(8vw, 82vh, 69px) rotate(36deg);
  }
}
@-webkit-keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
.particles span:nth-child(6) {
  -webkit-animation: particle-animation-6 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  animation: particle-animation-6 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  height: 11px;
  width: 11px;

  -webkit-animation-delay: -6s;
  animation-delay: -6s;
}

@-webkit-keyframes particle-animation-7 {
  0% {
    -webkit-transform: translate3d(75vw, 47vh, 108px) rotate(42deg);
    transform: translate3d(90vw, 61vh, 299px) rotate(57deg);
  }
  100% {
    -webkit-transform: translate3d(77vw, 36vh, 54px) rotate(84deg);
    transform: translate3d(3vw, 77vh, 77px) rotate(117deg);
  }
}
@keyframes particle-animation-7 {
  0% {
    -webkit-transform: translate3d(56vw, 17vh, 62px) rotate(70deg);
    transform: translate3d(73vw, 35vh, 305px) rotate(54deg);
  }
  100% {
    -webkit-transform: translate3d(73vw, 29vh, 100px) rotate(116deg);
    transform: translate3d(102vw, 22vh, 313px) rotate(38deg);
  }
}
@-webkit-keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
.particles span:nth-child(7) {
  -webkit-animation: particle-animation-7 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  animation: particle-animation-7 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  height: 45px;
  width: 45px;

  -webkit-animation-delay: -7s;
  animation-delay: -7s;
}

@-webkit-keyframes particle-animation-8 {
  0% {
    -webkit-transform: translate3d(52vw, 78vh, 369px) rotate(79deg);
    transform: translate3d(101vw, 34vh, 258px) rotate(76deg);
  }
  100% {
    -webkit-transform: translate3d(96vw, 26vh, 312px) rotate(136deg);
    transform: translate3d(23vw, 55vh, 148px) rotate(126deg);
  }
}
@keyframes particle-animation-8 {
  0% {
    -webkit-transform: translate3d(98vw, 39vh, 84px) rotate(22deg);
    transform: translate3d(103vw, 56vh, 270px) rotate(60deg);
  }
  100% {
    -webkit-transform: translate3d(99vw, 10vh, 377px) rotate(15deg);
    transform: translate3d(51vw, 77vh, 318px) rotate(117deg);
  }
}
@-webkit-keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
.particles span:nth-child(8) {
  -webkit-animation: particle-animation-8 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  animation: particle-animation-8 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  height: 9px;
  width: 9px;

  -webkit-animation-delay: -8s;
  animation-delay: -8s;
}

@-webkit-keyframes particle-animation-9 {
  0% {
    -webkit-transform: translate3d(37vw, 67vh, 2px) rotate(72deg);
    transform: translate3d(84vw, 15vh, 143px) rotate(69deg);
  }
  100% {
    -webkit-transform: translate3d(62vw, 31vh, 110px) rotate(160deg);
    transform: translate3d(104vw, 52vh, 93px) rotate(171deg);
  }
}
@keyframes particle-animation-9 {
  0% {
    -webkit-transform: translate3d(9vw, 72vh, 38px) rotate(3deg);
    transform: translate3d(15vw, 60vh, 188px) rotate(47deg);
  }
  100% {
    -webkit-transform: translate3d(20vw, 91vh, 21px) rotate(170deg);
    transform: translate3d(9vw, 37vh, 88px) rotate(154deg);
  }
}
@-webkit-keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
.particles span:nth-child(9) {
  -webkit-animation: particle-animation-9 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  animation: particle-animation-9 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  height: 39px;
  width: 39px;

  -webkit-animation-delay: -9s;
  animation-delay: -9s;
}

@-webkit-keyframes particle-animation-10 {
  0% {
    -webkit-transform: translate3d(88vw, 75vh, 216px) rotate(15deg);
    transform: translate3d(92vw, 6vh, 217px) rotate(36deg);
  }
  100% {
    -webkit-transform: translate3d(15vw, 29vh, 143px) rotate(29deg);
    transform: translate3d(91vw, 79vh, 145px) rotate(2deg);
  }
}
@keyframes particle-animation-10 {
  0% {
    -webkit-transform: translate3d(80vw, 72vh, 101px) rotate(83deg);
    transform: translate3d(110vw, 23vh, 300px) rotate(31deg);
  }
  100% {
    -webkit-transform: translate3d(47vw, 11vh, 397px) rotate(156deg);
    transform: translate3d(92vw, 98vh, 297px) rotate(77deg);
  }
}
@-webkit-keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
.particles span:nth-child(10) {
  -webkit-animation: particle-animation-10 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  animation: particle-animation-10 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  height: 88px;
  width: 88px;
  
  -webkit-animation-delay: -10s;
  animation-delay: -10s;
}

@-webkit-keyframes particle-animation-11 {
  0% {
    -webkit-transform: translate3d(84vw, 6vh, 140px) rotate(46deg);
    transform: translate3d(64vw, 3vh, 311px) rotate(15deg);
  }
  100% {
    -webkit-transform: translate3d(107vw, 26vh, 361px) rotate(87deg);
    transform: translate3d(9vw, 24vh, 272px) rotate(117deg);
  }
}
@keyframes particle-animation-11 {
  0% {
    -webkit-transform: translate3d(24vw, 94vh, 21px) rotate(6deg);
    transform: translate3d(79vw, 62vh, 23px) rotate(10deg);
  }
  100% {
    -webkit-transform: translate3d(73vw, 82vh, 208px) rotate(151deg);
    transform: translate3d(105vw, 85vh, 65px) rotate(147deg);
  }
}
@-webkit-keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
.particles span:nth-child(11) {
  -webkit-animation: particle-animation-11 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  animation: particle-animation-11 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  height: 46px;
  width: 46px;
  
  -webkit-animation-delay: -11s;
  animation-delay: -11s;
}

@-webkit-keyframes particle-animation-12 {
  0% {
    -webkit-transform: translate3d(59vw, 45vh, 319px) rotate(40deg);
    transform: translate3d(107vw, 27vh, 225px) rotate(30deg);
  }
  100% {
    -webkit-transform: translate3d(15vw, 8vh, 83px) rotate(45deg);
    transform: translate3d(102vw, 6vh, 309px) rotate(44deg);
  }
}
@keyframes particle-animation-12 {
  0% {
    -webkit-transform: translate3d(98vw, 29vh, 48px) rotate(19deg);
    transform: translate3d(68vw, 28vh, 127px) rotate(69deg);
  }
  100% {
    -webkit-transform: translate3d(86vw, 72vh, 46px) rotate(109deg);
    transform: translate3d(52vw, 4vh, 82px) rotate(41deg);
  }
}
@-webkit-keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
.particles span:nth-child(12) {
  -webkit-animation: particle-animation-12 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  animation: particle-animation-12 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  height: 26px;
  width: 26px;

  -webkit-animation-delay: -12s;
  animation-delay: -12s;
}

@-webkit-keyframes particle-animation-13 {
  0% {
    -webkit-transform: translate3d(51vw, 16vh, 322px) rotate(65deg);
    transform: translate3d(32vw, 43vh, 57px) rotate(14deg);
  }
  100% {
    -webkit-transform: translate3d(83vw, 32vh, 18px) rotate(15deg);
    transform: translate3d(13vw, 97vh, 222px) rotate(150deg);
  }
}
@keyframes particle-animation-13 {
  0% {
    -webkit-transform: translate3d(105vw, 41vh, 97px) rotate(7deg);
    transform: translate3d(105vw, 5vh, 203px) rotate(40deg);
  }
  100% {
    -webkit-transform: translate3d(109vw, 55vh, 219px) rotate(164deg);
    transform: translate3d(59vw, 76vh, 18px) rotate(133deg);
  }
}
@-webkit-keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
.particles span:nth-child(13) {
  -webkit-animation: particle-animation-13 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  animation: particle-animation-13 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  height: 100px;
  width: 100px;

  -webkit-animation-delay: -13s;
  animation-delay: -13s;
}

@-webkit-keyframes particle-animation-14 {
  0% {
    -webkit-transform: translate3d(49vw, 19vh, 361px) rotate(35deg);
    transform: translate3d(3vw, 90vh, 58px) rotate(59deg);
  }
  100% {
    -webkit-transform: translate3d(4vw, 63vh, 248px) rotate(91deg);
    transform: translate3d(51vw, 99vh, 261px) rotate(111deg);
  }
}
@keyframes particle-animation-14 {
  0% {
    -webkit-transform: translate3d(90vw, 8vh, 43px) rotate(79deg);
    transform: translate3d(41vw, 88vh, 104px) rotate(21deg);
  }
  100% {
    -webkit-transform: translate3d(105vw, 75vh, 56px) rotate(83deg);
    transform: translate3d(54vw, 41vh, 171px) rotate(163deg);
  }
}
@-webkit-keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
.particles span:nth-child(14) {
  -webkit-animation: particle-animation-14 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  animation: particle-animation-14 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  height: 81px;
  width: 81px;
  
  -webkit-animation-delay: -14s;
  animation-delay: -14s;
}

@-webkit-keyframes particle-animation-15 {
  0% {
    -webkit-transform: translate3d(56vw, 22vh, 354px) rotate(84deg);
    transform: translate3d(54vw, 21vh, 139px) rotate(10deg);
  }
  100% {
    -webkit-transform: translate3d(18vw, 50vh, 369px) rotate(98deg);
    transform: translate3d(98vw, 94vh, 312px) rotate(146deg);
  }
}
@keyframes particle-animation-15 {
  0% {
    -webkit-transform: translate3d(52vw, 38vh, 75px) rotate(24deg);
    transform: translate3d(37vw, 33vh, 46px) rotate(31deg);
  }
  100% {
    -webkit-transform: translate3d(1vw, 100vh, 288px) rotate(172deg);
    transform: translate3d(33vw, 83vh, 340px) rotate(88deg);
  }
}
@-webkit-keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
.particles span:nth-child(15) {
  -webkit-animation: particle-animation-15 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  animation: particle-animation-15 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  height: 47px;
  width: 47px;
  
  -webkit-animation-delay: -15s;
  animation-delay: -15s;
}

@-webkit-keyframes particle-animation-16 {
  0% {
    -webkit-transform: translate3d(51vw, 90vh, 124px) rotate(49deg);
    transform: translate3d(72vw, 62vh, 219px) rotate(80deg);
  }
  100% {
    -webkit-transform: translate3d(97vw, 80vh, 40px) rotate(74deg);
    transform: translate3d(100vw, 94vh, 145px) rotate(48deg);
  }
}
@keyframes particle-animation-16 {
  0% {
    -webkit-transform: translate3d(84vw, 79vh, 52px) rotate(68deg);
    transform: translate3d(50vw, 13vh, 328px) rotate(21deg);
  }
  100% {
    -webkit-transform: translate3d(13vw, 20vh, 243px) rotate(26deg);
    transform: translate3d(10vw, 92vh, 300px) rotate(111deg);
  }
}
@-webkit-keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
.particles span:nth-child(16) {
  -webkit-animation: particle-animation-16 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  animation: particle-animation-16 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  height: 14px;
  width: 14px;
 
  -webkit-animation-delay: -16s;
  animation-delay: -16s;
}

@-webkit-keyframes particle-animation-17 {
  0% {
    -webkit-transform: translate3d(82vw, 41vh, 305px) rotate(79deg);
    transform: translate3d(86vw, 3vh, 374px) rotate(26deg);
  }
  100% {
    -webkit-transform: translate3d(14vw, 13vh, 14px) rotate(28deg);
    transform: translate3d(20vw, 43vh, 90px) rotate(62deg);
  }
}
@keyframes particle-animation-17 {
  0% {
    -webkit-transform: translate3d(79vw, 27vh, 91px) rotate(77deg);
    transform: translate3d(77vw, 91vh, 26px) rotate(51deg);
  }
  100% {
    -webkit-transform: translate3d(64vw, 84vh, 167px) rotate(2deg);
    transform: translate3d(82vw, 67vh, 239px) rotate(82deg);
  }
}
@-webkit-keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
.particles span:nth-child(17) {
  -webkit-animation: particle-animation-17 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  animation: particle-animation-17 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  height: 42px;
  width: 42px;

  -webkit-animation-delay: -17s;
  animation-delay: -17s;
}

@-webkit-keyframes particle-animation-18 {
  0% {
    -webkit-transform: translate3d(12vw, 76vh, 247px) rotate(26deg);
    transform: translate3d(2vw, 36vh, 72px) rotate(74deg);
  }
  100% {
    -webkit-transform: translate3d(72vw, 16vh, 104px) rotate(133deg);
    transform: translate3d(103vw, 30vh, 248px) rotate(175deg);
  }
}
@keyframes particle-animation-18 {
  0% {
    -webkit-transform: translate3d(37vw, 26vh, 98px) rotate(5deg);
    transform: translate3d(71vw, 78vh, 346px) rotate(41deg);
  }
  100% {
    -webkit-transform: translate3d(15vw, 41vh, 250px) rotate(171deg);
    transform: translate3d(21vw, 76vh, 94px) rotate(142deg);
  }
}
@-webkit-keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
.particles span:nth-child(18) {
  -webkit-animation: particle-animation-18 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  animation: particle-animation-18 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  height: 41px;
  width: 41px;
 
  -webkit-animation-delay: -18s;
  animation-delay: -18s;
}

@-webkit-keyframes particle-animation-19 {
  0% {
    -webkit-transform: translate3d(100vw, 36vh, 164px) rotate(90deg);
    transform: translate3d(42vw, 81vh, 208px) rotate(80deg);
  }
  100% {
    -webkit-transform: translate3d(93vw, 2vh, 63px) rotate(98deg);
    transform: translate3d(60vw, 29vh, 352px) rotate(145deg);
  }
}
@keyframes particle-animation-19 {
  0% {
    -webkit-transform: translate3d(75vw, 45vh, 42px) rotate(50deg);
    transform: translate3d(48vw, 12vh, 268px) rotate(42deg);
  }
  100% {
    -webkit-transform: translate3d(22vw, 61vh, 230px) rotate(126deg);
    transform: translate3d(47vw, 49vh, 370px) rotate(154deg);
  }
}
@-webkit-keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
.particles span:nth-child(19) {
  -webkit-animation: particle-animation-19 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  animation: particle-animation-19 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  height: 41px;
  width: 41px;
  
  -webkit-animation-delay: -19s;
  animation-delay: -19s;
}

@-webkit-keyframes particle-animation-20 {
  0% {
    -webkit-transform: translate3d(81vw, 86vh, 193px) rotate(42deg);
    transform: translate3d(74vw, 18vh, 101px) rotate(21deg);
  }
  100% {
    -webkit-transform: translate3d(28vw, 50vh, 159px) rotate(32deg);
    transform: translate3d(97vw, 30vh, 226px) rotate(11deg);
  }
}
@keyframes particle-animation-20 {
  0% {
    -webkit-transform: translate3d(86vw, 35vh, 16px) rotate(59deg);
    transform: translate3d(27vw, 62vh, 219px) rotate(13deg);
  }
  100% {
    -webkit-transform: translate3d(25vw, 34vh, 327px) rotate(30deg);
    transform: translate3d(2vw, 20vh, 31px) rotate(75deg);
  }
}
@-webkit-keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
.particles span:nth-child(20) {
  -webkit-animation: particle-animation-20 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  animation: particle-animation-20 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  height: 44px;
  width: 44px;
  
  -webkit-animation-delay: -20s;
  animation-delay: -20s;
}

@-webkit-keyframes particle-animation-21 {
  0% {
    -webkit-transform: translate3d(8vw, 71vh, 83px) rotate(58deg);
    transform: translate3d(2vw, 38vh, 219px) rotate(69deg);
  }
  100% {
    -webkit-transform: translate3d(61vw, 48vh, 249px) rotate(98deg);
    transform: translate3d(40vw, 9vh, 398px) rotate(67deg);
  }
}
@keyframes particle-animation-21 {
  0% {
    -webkit-transform: translate3d(18vw, 100vh, 98px) rotate(22deg);
    transform: translate3d(20vw, 70vh, 94px) rotate(17deg);
  }
  100% {
    -webkit-transform: translate3d(87vw, 16vh, 311px) rotate(58deg);
    transform: translate3d(51vw, 95vh, 155px) rotate(156deg);
  }
}
@-webkit-keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
.particles span:nth-child(21) {
  -webkit-animation: particle-animation-21 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  animation: particle-animation-21 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  height: 20px;
  width: 20px;

  -webkit-animation-delay: -21s;
  animation-delay: -21s;
}

@-webkit-keyframes particle-animation-22 {
  0% {
    -webkit-transform: translate3d(44vw, 95vh, 291px) rotate(77deg);
    transform: translate3d(33vw, 77vh, 243px) rotate(23deg);
  }
  100% {
    -webkit-transform: translate3d(74vw, 16vh, 187px) rotate(3deg);
    transform: translate3d(37vw, 67vh, 125px) rotate(77deg);
  }
}
@keyframes particle-animation-22 {
  0% {
    -webkit-transform: translate3d(95vw, 93vh, 26px) rotate(38deg);
    transform: translate3d(4vw, 83vh, 54px) rotate(36deg);
  }
  100% {
    -webkit-transform: translate3d(32vw, 20vh, 30px) rotate(74deg);
    transform: translate3d(88vw, 65vh, 48px) rotate(118deg);
  }
}
@-webkit-keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
.particles span:nth-child(22) {
  -webkit-animation: particle-animation-22 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  animation: particle-animation-22 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  height: 58px;
  width: 58px;
  
  -webkit-animation-delay: -22s;
  animation-delay: -22s;
}

@-webkit-keyframes particle-animation-23 {
  0% {
    -webkit-transform: translate3d(52vw, 56vh, 394px) rotate(66deg);
    transform: translate3d(83vw, 19vh, 388px) rotate(5deg);
  }
  100% {
    -webkit-transform: translate3d(100vw, 2vh, 262px) rotate(144deg);
    transform: translate3d(51vw, 18vh, 255px) rotate(43deg);
  }
}
@keyframes particle-animation-23 {
  0% {
    -webkit-transform: translate3d(36vw, 97vh, 56px) rotate(22deg);
    transform: translate3d(46vw, 97vh, 375px) rotate(80deg);
  }
  100% {
    -webkit-transform: translate3d(20vw, 51vh, 37px) rotate(154deg);
    transform: translate3d(77vw, 20vh, 248px) rotate(142deg);
  }
}
@-webkit-keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
.particles span:nth-child(23) {
  -webkit-animation: particle-animation-23 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  animation: particle-animation-23 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  height: 79px;
  width: 79px;
  
  -webkit-animation-delay: -23s;
  animation-delay: -23s;
}

@-webkit-keyframes particle-animation-24 {
  0% {
    -webkit-transform: translate3d(45vw, 87vh, 37px) rotate(65deg);
    transform: translate3d(108vw, 28vh, 394px) rotate(53deg);
  }
  100% {
    -webkit-transform: translate3d(62vw, 20vh, 307px) rotate(180deg);
    transform: translate3d(108vw, 83vh, 285px) rotate(143deg);
  }
}
@keyframes particle-animation-24 {
  0% {
    -webkit-transform: translate3d(25vw, 4vh, 89px) rotate(28deg);
    transform: translate3d(5vw, 31vh, 347px) rotate(70deg);
  }
  100% {
    -webkit-transform: translate3d(103vw, 47vh, 214px) rotate(172deg);
    transform: translate3d(48vw, 38vh, 72px) rotate(13deg);
  }
}
@-webkit-keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
.particles span:nth-child(24) {
  -webkit-animation: particle-animation-24 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  animation: particle-animation-24 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  height: 19px;
  width: 19px;

  -webkit-animation-delay: -24s;
  animation-delay: -24s;
}

@-webkit-keyframes particle-animation-25 {
  0% {
    -webkit-transform: translate3d(54vw, 85vh, 237px) rotate(85deg);
    transform: translate3d(24vw, 53vh, 280px) rotate(53deg);
  }
  100% {
    -webkit-transform: translate3d(59vw, 2vh, 378px) rotate(49deg);
    transform: translate3d(110vw, 42vh, 29px) rotate(82deg);
  }
}
@keyframes particle-animation-25 {
  0% {
    -webkit-transform: translate3d(54vw, 28vh, 80px) rotate(30deg);
    transform: translate3d(19vw, 3vh, 308px) rotate(26deg);
  }
  100% {
    -webkit-transform: translate3d(27vw, 59vh, 40px) rotate(12deg);
    transform: translate3d(43vw, 14vh, 7px) rotate(45deg);
  }
}
@-webkit-keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
.particles span:nth-child(25) {
  -webkit-animation: particle-animation-25 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  animation: particle-animation-25 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  height: 35px;
  width: 35px;

  -webkit-animation-delay: -25s;
  animation-delay: -25s;
}

@-webkit-keyframes particle-animation-26 {
  0% {
    -webkit-transform: translate3d(90vw, 88vh, 144px) rotate(14deg);
    transform: translate3d(47vw, 4vh, 178px) rotate(77deg);
  }
  100% {
    -webkit-transform: translate3d(25vw, 13vh, 380px) rotate(95deg);
    transform: translate3d(82vw, 65vh, 187px) rotate(36deg);
  }
}
@keyframes particle-animation-26 {
  0% {
    -webkit-transform: translate3d(102vw, 37vh, 75px) rotate(50deg);
    transform: translate3d(83vw, 11vh, 16px) rotate(12deg);
  }
  100% {
    -webkit-transform: translate3d(70vw, 72vh, 215px) rotate(17deg);
    transform: translate3d(108vw, 49vh, 276px) rotate(89deg);
  }
}
@-webkit-keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
.particles span:nth-child(26) {
  -webkit-animation: particle-animation-26 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  animation: particle-animation-26 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  height: 100px;
  width: 100px;

  -webkit-animation-delay: -26s;
  animation-delay: -26s;
}

@-webkit-keyframes particle-animation-27 {
  0% {
    -webkit-transform: translate3d(34vw, 70vh, 21px) rotate(20deg);
    transform: translate3d(36vw, 100vh, 250px) rotate(6deg);
  }
  100% {
    -webkit-transform: translate3d(98vw, 22vh, 17px) rotate(122deg);
    transform: translate3d(22vw, 95vh, 264px) rotate(171deg);
  }
}
@keyframes particle-animation-27 {
  0% {
    -webkit-transform: translate3d(89vw, 59vh, 110px) rotate(60deg);
    transform: translate3d(31vw, 23vh, 317px) rotate(15deg);
  }
  100% {
    -webkit-transform: translate3d(10vw, 100vh, 98px) rotate(18deg);
    transform: translate3d(21vw, 14vh, 347px) rotate(34deg);
  }
}
@-webkit-keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
.particles span:nth-child(27) {
  -webkit-animation: particle-animation-27 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  animation: particle-animation-27 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  height: 104px;
  width: 104px;
 
  -webkit-animation-delay: -27s;
  animation-delay: -27s;
}

@-webkit-keyframes particle-animation-28 {
  0% {
    -webkit-transform: translate3d(56vw, 62vh, 220px) rotate(53deg);
    transform: translate3d(7vw, 20vh, 397px) rotate(21deg);
  }
  100% {
    -webkit-transform: translate3d(16vw, 51vh, 339px) rotate(72deg);
    transform: translate3d(94vw, 19vh, 285px) rotate(4deg);
  }
}
@keyframes particle-animation-28 {
  0% {
    -webkit-transform: translate3d(60vw, 95vh, 18px) rotate(60deg);
    transform: translate3d(99vw, 39vh, 118px) rotate(74deg);
  }
  100% {
    -webkit-transform: translate3d(15vw, 51vh, 204px) rotate(152deg);
    transform: translate3d(16vw, 99vh, 371px) rotate(20deg);
  }
}
@-webkit-keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
.particles span:nth-child(28) {
  -webkit-animation: particle-animation-28 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  animation: particle-animation-28 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  height: 85px;
  width: 85px;

  -webkit-animation-delay: -28s;
  animation-delay: -28s;
}

@-webkit-keyframes particle-animation-29 {
  0% {
    -webkit-transform: translate3d(28vw, 11vh, 59px) rotate(76deg);
    transform: translate3d(89vw, 27vh, 36px) rotate(1deg);
  }
  100% {
    -webkit-transform: translate3d(28vw, 8vh, 363px) rotate(178deg);
    transform: translate3d(6vw, 44vh, 53px) rotate(95deg);
  }
}
@keyframes particle-animation-29 {
  0% {
    -webkit-transform: translate3d(97vw, 34vh, 78px) rotate(71deg);
    transform: translate3d(87vw, 4vh, 54px) rotate(70deg);
  }
  100% {
    -webkit-transform: translate3d(67vw, 45vh, 317px) rotate(172deg);
    transform: translate3d(15vw, 24vh, 290px) rotate(101deg);
  }
}
@-webkit-keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
.particles span:nth-child(29) {
  -webkit-animation: particle-animation-29 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  animation: particle-animation-29 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  height: 26px;
  width: 26px;
  -webkit-animation-delay: -29s;
  animation-delay: -29s;
}

@-webkit-keyframes particle-animation-30 {
  0% {
    -webkit-transform: translate3d(17vw, 11vh, 135px) rotate(83deg);
    transform: translate3d(85vw, 93vh, 6px) rotate(9deg);
  }
  100% {
    -webkit-transform: translate3d(17vw, 19vh, 216px) rotate(145deg);
    transform: translate3d(39vw, 38vh, 209px) rotate(83deg);
  }
}
@keyframes particle-animation-30 {
  0% {
    -webkit-transform: translate3d(52vw, 85vh, 93px) rotate(1deg);
    transform: translate3d(19vw, 43vh, 95px) rotate(5deg);
  }
  100% {
    -webkit-transform: translate3d(60vw, 65vh, 369px) rotate(2deg);
    transform: translate3d(56vw, 13vh, 339px) rotate(106deg);
  }
}
@-webkit-keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
.particles span:nth-child(30) {
  -webkit-animation: particle-animation-30 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  animation: particle-animation-30 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  height: 18px;
  width: 18px;
  -webkit-animation-delay: -30s;
  animation-delay: -30s;
}

@-webkit-keyframes particle-animation-31 {
  0% {
    -webkit-transform: translate3d(63vw, 90vh, 309px) rotate(31deg);
    transform: translate3d(61vw, 1vh, 100px) rotate(37deg);
  }
  100% {
    -webkit-transform: translate3d(63vw, 1vh, 390px) rotate(142deg);
    transform: translate3d(30vw, 97vh, 244px) rotate(100deg);
  }
}
@keyframes particle-animation-31 {
  0% {
    -webkit-transform: translate3d(41vw, 90vh, 7px) rotate(85deg);
    transform: translate3d(28vw, 10vh, 257px) rotate(67deg);
  }
  100% {
    -webkit-transform: translate3d(2vw, 53vh, 224px) rotate(141deg);
    transform: translate3d(53vw, 25vh, 104px) rotate(6deg);
  }
}
@-webkit-keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-frames {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
.particles span:nth-child(31) {
  -webkit-animation: particle-animation-31 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  animation: particle-animation-31 10s ease-in infinite, fade-frames 10s ease-in-out infinite;
  height: 104px;
  width: 104px;
  -webkit-animation-delay: -31s;
  animation-delay: -31s;
}

/********* End particle Animation Styles ***********/