* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.testimonials-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: white;
}

.testimonials-viewport {
  display: flex;
  flex-direction: column;
  gap: 120px;
  position: relative;
  background-color: #f5f5f5;
  padding: 120px 0;
  overflow: hidden;
  width: 100%;
}
.testimonials-carousel-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

/* Line */
.testimonials-carousel-container::before {
  content: '';
  position: absolute;
  top: 36px;
  left: 0;
  background-color: white;
  height: 1px;
  width: 200vw;
  opacity: 20%;
}

.testimonials-list-container {
  display: flex;
  gap: 120px;
  animation: scroll 10s linear infinite;
}

.single-testimonial {
display: flex;
flex-direction: column;
gap: 40px;
}

.testimonial-author {
display: flex;
align-items: center;
gap: 24px;
}

.testimonial-author > img {
  width: 48px;
  height: 48px;
  border-radius: 240px;
}

.qoute-container {
  display: flex;
  width: 376px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 32px;
  align-self: stretch;
}

.qoute-container > p {
  color: black;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 200%; /* 28.8px */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4; /* number of lines to show */
  line-clamp: 4;
  -webkit-box-orient: vertical;
}

.name-title-container {
  display: flex;
  width: 309px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.name-title-container > p {
  color: black;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 16px */
}

.name-title-container > p:nth-child(2) {
  color: black;
  font-family: Montserrat, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%; /* 14px */
  opacity: 50%;
}

@media only screen and (max-width: 1320px) {

  .testimonials-viewport {
      border-radius: 0;
  }

  .testimonials-carousel-container::before {
    top: 32px;
  }
  
  .single-testimonial {
      width: 342px;
      gap: 24px;
      height: unset;
  }

  .single-testimonial > img {
      width: 64px;
      height: 64px;
      border-radius: 240px;
  }

  .qoute-container {
      width: 320px;
      justify-content: flex-end;
      gap: 32px;
  }

  .qoute-container > p {
      font-size: 16px;
  }
}

@media only screen and (max-width: 680px) {


  .testimonials-text-container {
      align-items: start;
  }
  
  .testimonials-list-container {
      gap: 96px;
  }

  .single-testimonial {
      gap: 24px;
  }

  .single-testimonial > img {
      width: 64px;
      height: 64px;
      border-radius: 240px;
  }

  .qoute-container {
      width: 254px;
      justify-content: flex-end;
      gap: 32px;
      transform: translateX(-88px);
  }

  .qoute-container > p {
      font-size: 14px;
  }

}   


/* Particles */

.particle-container {
  position: absolute;
  top: -80px;
  width: 100%;
  height: 100%;
  opacity: 50%;
}

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

@-webkit-keyframes particle-animation-1 {
  0% {
    -webkit-transform: translate3d(56vw, 89vh, 306px) rotate(12deg);
    transform: translate3d(48vw, 8vh, 90px) rotate(83deg);
  }
  100% {
    -webkit-transform: translate3d(74vw, 50vh, 89px) rotate(103deg);
    transform: translate3d(35vw, 27vh, 286px) rotate(124deg);
  }
}
@keyframes particle-animation-1 {
  0% {
    -webkit-transform: translate3d(79vw, 33vh, 14px) rotate(59deg);
    transform: translate3d(66vw, 92vh, 275px) rotate(29deg);
  }
  100% {
    -webkit-transform: translate3d(76vw, 82vh, 107px) rotate(107deg);
    transform: translate3d(32vw, 31vh, 355px) rotate(59deg);
  }
}
@-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: 52px;
  width: 52px;
  border: 1px solid white;
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

@-webkit-keyframes particle-animation-2 {
  0% {
    -webkit-transform: translate3d(101vw, 76vh, 225px) rotate(30deg);
    transform: translate3d(100vw, 4vh, 1px) rotate(8deg);
  }
  100% {
    -webkit-transform: translate3d(79vw, 98vh, 195px) rotate(38deg);
    transform: translate3d(27vw, 17vh, 301px) rotate(33deg);
  }
}
@keyframes particle-animation-2 {
  0% {
    -webkit-transform: translate3d(55vw, 62vh, 69px) rotate(82deg);
    transform: translate3d(40vw, 96vh, 73px) rotate(73deg);
  }
  100% {
    -webkit-transform: translate3d(3vw, 49vh, 31px) rotate(57deg);
    transform: translate3d(89vw, 37vh, 114px) rotate(96deg);
  }
}
@-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: 54px;
  width: 54px;
  border: 1px solid #717171;
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
}

@-webkit-keyframes particle-animation-3 {
  0% {
    -webkit-transform: translate3d(24vw, 50vh, 247px) rotate(6deg);
    transform: translate3d(45vw, 92vh, 373px) rotate(67deg);
  }
  100% {
    -webkit-transform: translate3d(19vw, 18vh, 181px) rotate(153deg);
    transform: translate3d(105vw, 88vh, 304px) rotate(18deg);
  }
}
@keyframes particle-animation-3 {
  0% {
    -webkit-transform: translate3d(36vw, 44vh, 13px) rotate(19deg);
    transform: translate3d(104vw, 22vh, 344px) rotate(38deg);
  }
  100% {
    -webkit-transform: translate3d(86vw, 84vh, 42px) rotate(158deg);
    transform: translate3d(80vw, 72vh, 253px) rotate(143deg);
  }
}
@-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: 13px;
  width: 13px;
  border: 1px solid #ececec;
  -webkit-animation-delay: -3s;
  animation-delay: -3s;
}

@-webkit-keyframes particle-animation-4 {
  0% {
    -webkit-transform: translate3d(3vw, 73vh, 372px) rotate(36deg);
    transform: translate3d(21vw, 99vh, 103px) rotate(64deg);
  }
  100% {
    -webkit-transform: translate3d(8vw, 33vh, 191px) rotate(78deg);
    transform: translate3d(104vw, 37vh, 256px) rotate(178deg);
  }
}
@keyframes particle-animation-4 {
  0% {
    -webkit-transform: translate3d(97vw, 37vh, 50px) rotate(58deg);
    transform: translate3d(91vw, 41vh, 262px) rotate(65deg);
  }
  100% {
    -webkit-transform: translate3d(85vw, 68vh, 363px) rotate(131deg);
    transform: translate3d(83vw, 33vh, 27px) 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(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: 81px;
  width: 81px;
  border: 1px solid #999999;
  -webkit-animation-delay: -4s;
  animation-delay: -4s;
}

@-webkit-keyframes particle-animation-5 {
  0% {
    -webkit-transform: translate3d(87vw, 94vh, 99px) rotate(49deg);
    transform: translate3d(40vw, 78vh, 376px) rotate(24deg);
  }
  100% {
    -webkit-transform: translate3d(10vw, 8vh, 180px) rotate(101deg);
    transform: translate3d(27vw, 86vh, 81px) rotate(59deg);
  }
}
@keyframes particle-animation-5 {
  0% {
    -webkit-transform: translate3d(107vw, 75vh, 12px) rotate(4deg);
    transform: translate3d(94vw, 56vh, 20px) rotate(51deg);
  }
  100% {
    -webkit-transform: translate3d(46vw, 98vh, 88px) rotate(42deg);
    transform: translate3d(65vw, 39vh, 282px) rotate(4deg);
  }
}
@-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: 58px;
  width: 58px;
  border: 1px solid #333333;
  -webkit-animation-delay: -5s;
  animation-delay: -5s;
}

@-webkit-keyframes particle-animation-6 {
  0% {
    -webkit-transform: translate3d(31vw, 57vh, 38px) rotate(70deg);
    transform: translate3d(58vw, 14vh, 101px) rotate(88deg);
  }
  100% {
    -webkit-transform: translate3d(20vw, 58vh, 71px) rotate(119deg);
    transform: translate3d(103vw, 92vh, 140px) rotate(122deg);
  }
}
@keyframes particle-animation-6 {
  0% {
    -webkit-transform: translate3d(25vw, 14vh, 79px) rotate(10deg);
    transform: translate3d(20vw, 98vh, 212px) rotate(53deg);
  }
  100% {
    -webkit-transform: translate3d(41vw, 34vh, 138px) rotate(147deg);
    transform: translate3d(74vw, 97vh, 318px) rotate(116deg);
  }
}
@-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: 83px;
  width: 83px;
  border: 1px solid #e7e7e7;
  -webkit-animation-delay: -6s;
  animation-delay: -6s;
}

@-webkit-keyframes particle-animation-7 {
  0% {
    -webkit-transform: translate3d(68vw, 49vh, 129px) rotate(7deg);
    transform: translate3d(42vw, 99vh, 290px) rotate(26deg);
  }
  100% {
    -webkit-transform: translate3d(74vw, 75vh, 323px) rotate(117deg);
    transform: translate3d(73vw, 25vh, 265px) rotate(117deg);
  }
}
@keyframes particle-animation-7 {
  0% {
    -webkit-transform: translate3d(71vw, 39vh, 64px) rotate(87deg);
    transform: translate3d(5vw, 62vh, 227px) rotate(1deg);
  }
  100% {
    -webkit-transform: translate3d(62vw, 44vh, 250px) rotate(168deg);
    transform: translate3d(54vw, 7vh, 260px) rotate(164deg);
  }
}
@-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: 70px;
  width: 70px;
  border: 1px solid #262626;
  -webkit-animation-delay: -7s;
  animation-delay: -7s;
}

@-webkit-keyframes particle-animation-8 {
  0% {
    -webkit-transform: translate3d(54vw, 27vh, 50px) rotate(64deg);
    transform: translate3d(92vw, 58vh, 291px) rotate(55deg);
  }
  100% {
    -webkit-transform: translate3d(59vw, 39vh, 71px) rotate(57deg);
    transform: translate3d(36vw, 54vh, 221px) rotate(132deg);
  }
}
@keyframes particle-animation-8 {
  0% {
    -webkit-transform: translate3d(53vw, 75vh, 57px) rotate(66deg);
    transform: translate3d(70vw, 50vh, 295px) rotate(57deg);
  }
  100% {
    -webkit-transform: translate3d(79vw, 62vh, 99px) rotate(75deg);
    transform: translate3d(16vw, 90vh, 370px) rotate(43deg);
  }
}
@-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: 83px;
  width: 83px;
  border: 1px solid #b1b1b1;
  -webkit-animation-delay: -8s;
  animation-delay: -8s;
}

@-webkit-keyframes particle-animation-9 {
  0% {
    -webkit-transform: translate3d(58vw, 48vh, 281px) rotate(51deg);
    transform: translate3d(14vw, 63vh, 330px) rotate(70deg);
  }
  100% {
    -webkit-transform: translate3d(63vw, 96vh, 142px) rotate(122deg);
    transform: translate3d(87vw, 3vh, 72px) rotate(74deg);
  }
}
@keyframes particle-animation-9 {
  0% {
    -webkit-transform: translate3d(31vw, 61vh, 83px) rotate(48deg);
    transform: translate3d(97vw, 21vh, 185px) rotate(31deg);
  }
  100% {
    -webkit-transform: translate3d(43vw, 15vh, 140px) rotate(174deg);
    transform: translate3d(58vw, 18vh, 96px) rotate(93deg);
  }
}
@-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: 19px;
  width: 19px;
  border: 1px solid #b4b4b4;
  -webkit-animation-delay: -9s;
  animation-delay: -9s;
}

@-webkit-keyframes particle-animation-10 {
  0% {
    -webkit-transform: translate3d(34vw, 25vh, 252px) rotate(34deg);
    transform: translate3d(20vw, 26vh, 50px) rotate(2deg);
  }
  100% {
    -webkit-transform: translate3d(94vw, 75vh, 335px) rotate(96deg);
    transform: translate3d(66vw, 39vh, 162px) rotate(158deg);
  }
}
@keyframes particle-animation-10 {
  0% {
    -webkit-transform: translate3d(54vw, 65vh, 108px) rotate(47deg);
    transform: translate3d(107vw, 91vh, 265px) rotate(49deg);
  }
  100% {
    -webkit-transform: translate3d(10vw, 1vh, 98px) rotate(178deg);
    transform: translate3d(15vw, 81vh, 232px) 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(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: 43px;
  width: 43px;
  border: 1px solid #232323;
  -webkit-animation-delay: -10s;
  animation-delay: -10s;
}

@-webkit-keyframes particle-animation-11 {
  0% {
    -webkit-transform: translate3d(11vw, 88vh, 43px) rotate(90deg);
    transform: translate3d(90vw, 89vh, 350px) rotate(32deg);
  }
  100% {
    -webkit-transform: translate3d(15vw, 15vh, 336px) rotate(119deg);
    transform: translate3d(61vw, 100vh, 37px) rotate(107deg);
  }
}
@keyframes particle-animation-11 {
  0% {
    -webkit-transform: translate3d(46vw, 65vh, 50px) rotate(43deg);
    transform: translate3d(95vw, 1vh, 179px) rotate(58deg);
  }
  100% {
    -webkit-transform: translate3d(90vw, 60vh, 241px) rotate(163deg);
    transform: translate3d(69vw, 50vh, 160px) rotate(132deg);
  }
}
@-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: 105px;
  width: 105px;
  border: 1px solid #080808;
  -webkit-animation-delay: -11s;
  animation-delay: -11s;
}

@-webkit-keyframes particle-animation-12 {
  0% {
    -webkit-transform: translate3d(81vw, 55vh, 312px) rotate(11deg);
    transform: translate3d(28vw, 47vh, 37px) rotate(12deg);
  }
  100% {
    -webkit-transform: translate3d(42vw, 15vh, 3px) rotate(46deg);
    transform: translate3d(62vw, 65vh, 125px) rotate(45deg);
  }
}
@keyframes particle-animation-12 {
  0% {
    -webkit-transform: translate3d(18vw, 6vh, 82px) rotate(88deg);
    transform: translate3d(38vw, 69vh, 365px) rotate(52deg);
  }
  100% {
    -webkit-transform: translate3d(56vw, 1vh, 23px) rotate(128deg);
    transform: translate3d(32vw, 58vh, 134px) rotate(97deg);
  }
}
@-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: 58px;
  width: 58px;
  border: 1px solid #373737;
  -webkit-animation-delay: -12s;
  animation-delay: -12s;
}

@-webkit-keyframes particle-animation-13 {
  0% {
    -webkit-transform: translate3d(86vw, 88vh, 128px) rotate(5deg);
    transform: translate3d(45vw, 28vh, 118px) rotate(72deg);
  }
  100% {
    -webkit-transform: translate3d(93vw, 31vh, 157px) rotate(172deg);
    transform: translate3d(4vw, 41vh, 247px) rotate(57deg);
  }
}
@keyframes particle-animation-13 {
  0% {
    -webkit-transform: translate3d(108vw, 67vh, 44px) rotate(88deg);
    transform: translate3d(13vw, 69vh, 365px) rotate(3deg);
  }
  100% {
    -webkit-transform: translate3d(105vw, 19vh, 245px) rotate(133deg);
    transform: translate3d(69vw, 79vh, 398px) 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(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: 86px;
  width: 86px;
  border: 1px solid #838383;
  -webkit-animation-delay: -13s;
  animation-delay: -13s;
}

@-webkit-keyframes particle-animation-14 {
  0% {
    -webkit-transform: translate3d(107vw, 5vh, 107px) rotate(21deg);
    transform: translate3d(43vw, 29vh, 310px) rotate(36deg);
  }
  100% {
    -webkit-transform: translate3d(30vw, 57vh, 235px) rotate(115deg);
    transform: translate3d(28vw, 29vh, 108px) rotate(85deg);
  }
}
@keyframes particle-animation-14 {
  0% {
    -webkit-transform: translate3d(87vw, 44vh, 87px) rotate(79deg);
    transform: translate3d(49vw, 64vh, 77px) rotate(27deg);
  }
  100% {
    -webkit-transform: translate3d(75vw, 43vh, 112px) rotate(109deg);
    transform: translate3d(105vw, 57vh, 180px) rotate(165deg);
  }
}
@-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: 86px;
  width: 86px;
  border: 1px solid #171717;
  -webkit-animation-delay: -14s;
  animation-delay: -14s;
}

@-webkit-keyframes particle-animation-15 {
  0% {
    -webkit-transform: translate3d(16vw, 99vh, 134px) rotate(82deg);
    transform: translate3d(46vw, 79vh, 137px) rotate(56deg);
  }
  100% {
    -webkit-transform: translate3d(36vw, 90vh, 165px) rotate(127deg);
    transform: translate3d(4vw, 85vh, 250px) rotate(132deg);
  }
}
@keyframes particle-animation-15 {
  0% {
    -webkit-transform: translate3d(86vw, 52vh, 104px) rotate(57deg);
    transform: translate3d(21vw, 85vh, 300px) rotate(64deg);
  }
  100% {
    -webkit-transform: translate3d(39vw, 86vh, 197px) rotate(74deg);
    transform: translate3d(81vw, 30vh, 19px) rotate(14deg);
  }
}
@-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: 8px;
  width: 8px;
  border: 1px solid #262626;
  -webkit-animation-delay: -15s;
  animation-delay: -15s;
}

@-webkit-keyframes particle-animation-16 {
  0% {
    -webkit-transform: translate3d(42vw, 79vh, 173px) rotate(79deg);
    transform: translate3d(100vw, 90vh, 252px) rotate(90deg);
  }
  100% {
    -webkit-transform: translate3d(53vw, 52vh, 316px) rotate(81deg);
    transform: translate3d(78vw, 93vh, 6px) rotate(4deg);
  }
}
@keyframes particle-animation-16 {
  0% {
    -webkit-transform: translate3d(16vw, 52vh, 94px) rotate(38deg);
    transform: translate3d(26vw, 11vh, 19px) rotate(56deg);
  }
  100% {
    -webkit-transform: translate3d(20vw, 57vh, 191px) rotate(53deg);
    transform: translate3d(16vw, 16vh, 198px) rotate(4deg);
  }
}
@-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: 57px;
  width: 57px;
  border: 1px solid #717171;
  -webkit-animation-delay: -16s;
  animation-delay: -16s;
}

@-webkit-keyframes particle-animation-17 {
  0% {
    -webkit-transform: translate3d(70vw, 34vh, 336px) rotate(36deg);
    transform: translate3d(67vw, 45vh, 144px) rotate(41deg);
  }
  100% {
    -webkit-transform: translate3d(20vw, 9vh, 54px) rotate(169deg);
    transform: translate3d(60vw, 61vh, 389px) rotate(121deg);
  }
}
@keyframes particle-animation-17 {
  0% {
    -webkit-transform: translate3d(3vw, 44vh, 52px) rotate(62deg);
    transform: translate3d(55vw, 29vh, 112px) rotate(54deg);
  }
  100% {
    -webkit-transform: translate3d(32vw, 29vh, 103px) rotate(102deg);
    transform: translate3d(96vw, 55vh, 181px) 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(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: 17px;
  width: 17px;
  border: 1px solid #b9b9b9;
  -webkit-animation-delay: -17s;
  animation-delay: -17s;
}

@-webkit-keyframes particle-animation-18 {
  0% {
    -webkit-transform: translate3d(42vw, 18vh, 194px) rotate(54deg);
    transform: translate3d(90vw, 79vh, 251px) rotate(80deg);
  }
  100% {
    -webkit-transform: translate3d(26vw, 12vh, 322px) rotate(48deg);
    transform: translate3d(103vw, 54vh, 77px) rotate(21deg);
  }
}
@keyframes particle-animation-18 {
  0% {
    -webkit-transform: translate3d(2vw, 42vh, 57px) rotate(43deg);
    transform: translate3d(72vw, 70vh, 75px) rotate(89deg);
  }
  100% {
    -webkit-transform: translate3d(48vw, 16vh, 332px) rotate(53deg);
    transform: translate3d(64vw, 16vh, 11px) 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(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: 56px;
  width: 56px;
  border: 1px solid #515151;
  -webkit-animation-delay: -18s;
  animation-delay: -18s;
}

@-webkit-keyframes particle-animation-19 {
  0% {
    -webkit-transform: translate3d(99vw, 39vh, 285px) rotate(72deg);
    transform: translate3d(3vw, 11vh, 61px) rotate(44deg);
  }
  100% {
    -webkit-transform: translate3d(64vw, 52vh, 386px) rotate(29deg);
    transform: translate3d(10vw, 53vh, 59px) rotate(72deg);
  }
}
@keyframes particle-animation-19 {
  0% {
    -webkit-transform: translate3d(20vw, 74vh, 80px) rotate(15deg);
    transform: translate3d(71vw, 42vh, 315px) rotate(43deg);
  }
  100% {
    -webkit-transform: translate3d(77vw, 41vh, 259px) rotate(120deg);
    transform: translate3d(62vw, 90vh, 100px) rotate(171deg);
  }
}
@-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: 7px;
  width: 7px;
  border: 1px solid #848484;
  -webkit-animation-delay: -19s;
  animation-delay: -19s;
}

@-webkit-keyframes particle-animation-20 {
  0% {
    -webkit-transform: translate3d(62vw, 15vh, 208px) rotate(7deg);
    transform: translate3d(11vw, 80vh, 85px) rotate(24deg);
  }
  100% {
    -webkit-transform: translate3d(68vw, 40vh, 49px) rotate(41deg);
    transform: translate3d(95vw, 33vh, 235px) rotate(170deg);
  }
}
@keyframes particle-animation-20 {
  0% {
    -webkit-transform: translate3d(95vw, 97vh, 109px) rotate(20deg);
    transform: translate3d(26vw, 41vh, 212px) rotate(32deg);
  }
  100% {
    -webkit-transform: translate3d(44vw, 42vh, 164px) rotate(169deg);
    transform: translate3d(65vw, 69vh, 297px) rotate(52deg);
  }
}
@-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: 97px;
  width: 97px;
  border: 1px solid #4e4e4e;
  -webkit-animation-delay: -20s;
  animation-delay: -20s;
}

@-webkit-keyframes particle-animation-21 {
  0% {
    -webkit-transform: translate3d(97vw, 29vh, 314px) rotate(37deg);
    transform: translate3d(12vw, 90vh, 288px) rotate(4deg);
  }
  100% {
    -webkit-transform: translate3d(103vw, 67vh, 157px) rotate(115deg);
    transform: translate3d(10vw, 41vh, 386px) rotate(177deg);
  }
}
@keyframes particle-animation-21 {
  0% {
    -webkit-transform: translate3d(59vw, 13vh, 98px) rotate(48deg);
    transform: translate3d(43vw, 55vh, 332px) rotate(81deg);
  }
  100% {
    -webkit-transform: translate3d(88vw, 52vh, 386px) rotate(67deg);
    transform: translate3d(83vw, 92vh, 119px) rotate(58deg);
  }
}
@-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: 85px;
  width: 85px;
  border: 1px solid #6f6f6f;
  -webkit-animation-delay: -21s;
  animation-delay: -21s;
}

@-webkit-keyframes particle-animation-22 {
  0% {
    -webkit-transform: translate3d(29vw, 6vh, 221px) rotate(61deg);
    transform: translate3d(21vw, 18vh, 257px) rotate(7deg);
  }
  100% {
    -webkit-transform: translate3d(72vw, 78vh, 285px) rotate(73deg);
    transform: translate3d(64vw, 15vh, 81px) rotate(84deg);
  }
}
@keyframes particle-animation-22 {
  0% {
    -webkit-transform: translate3d(40vw, 46vh, 21px) rotate(74deg);
    transform: translate3d(91vw, 86vh, 89px) rotate(62deg);
  }
  100% {
    -webkit-transform: translate3d(51vw, 50vh, 293px) rotate(50deg);
    transform: translate3d(36vw, 65vh, 196px) rotate(173deg);
  }
}
@-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: 16px;
  width: 16px;
  border: 1px solid #454545;
  -webkit-animation-delay: -22s;
  animation-delay: -22s;
}

@-webkit-keyframes particle-animation-23 {
  0% {
    -webkit-transform: translate3d(94vw, 41vh, 306px) rotate(90deg);
    transform: translate3d(37vw, 62vh, 66px) rotate(59deg);
  }
  100% {
    -webkit-transform: translate3d(46vw, 39vh, 218px) rotate(116deg);
    transform: translate3d(76vw, 40vh, 110px) rotate(107deg);
  }
}
@keyframes particle-animation-23 {
  0% {
    -webkit-transform: translate3d(47vw, 37vh, 52px) rotate(84deg);
    transform: translate3d(89vw, 79vh, 374px) rotate(1deg);
  }
  100% {
    -webkit-transform: translate3d(61vw, 30vh, 66px) rotate(117deg);
    transform: translate3d(38vw, 31vh, 132px) rotate(92deg);
  }
}
@-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: 28px;
  width: 28px;
  border: 1px solid #5d5d5d;
  -webkit-animation-delay: -23s;
  animation-delay: -23s;
}

@-webkit-keyframes particle-animation-24 {
  0% {
    -webkit-transform: translate3d(97vw, 63vh, 235px) rotate(34deg);
    transform: translate3d(21vw, 13vh, 319px) rotate(9deg);
  }
  100% {
    -webkit-transform: translate3d(31vw, 58vh, 169px) rotate(98deg);
    transform: translate3d(20vw, 92vh, 222px) rotate(117deg);
  }
}
@keyframes particle-animation-24 {
  0% {
    -webkit-transform: translate3d(77vw, 91vh, 10px) rotate(69deg);
    transform: translate3d(29vw, 89vh, 94px) rotate(80deg);
  }
  100% {
    -webkit-transform: translate3d(102vw, 92vh, 83px) rotate(10deg);
    transform: translate3d(52vw, 41vh, 86px) rotate(95deg);
  }
}
@-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: 8px;
  width: 8px;
  border: 1px solid #636363;
  -webkit-animation-delay: -24s;
  animation-delay: -24s;
}

@-webkit-keyframes particle-animation-25 {
  0% {
    -webkit-transform: translate3d(28vw, 28vh, 204px) rotate(87deg);
    transform: translate3d(100vw, 62vh, 237px) rotate(75deg);
  }
  100% {
    -webkit-transform: translate3d(74vw, 30vh, 214px) rotate(70deg);
    transform: translate3d(69vw, 74vh, 125px) rotate(152deg);
  }
}
@keyframes particle-animation-25 {
  0% {
    -webkit-transform: translate3d(47vw, 9vh, 11px) rotate(35deg);
    transform: translate3d(100vw, 27vh, 266px) rotate(79deg);
  }
  100% {
    -webkit-transform: translate3d(87vw, 88vh, 285px) rotate(11deg);
    transform: translate3d(74vw, 78vh, 286px) rotate(137deg);
  }
}
@-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: 11px;
  width: 11px;
  border: 1px solid #cfcfcf;
  -webkit-animation-delay: -25s;
  animation-delay: -25s;
}

@-webkit-keyframes particle-animation-26 {
  0% {
    -webkit-transform: translate3d(83vw, 79vh, 53px) rotate(9deg);
    transform: translate3d(77vw, 30vh, 230px) rotate(83deg);
  }
  100% {
    -webkit-transform: translate3d(103vw, 67vh, 31px) rotate(134deg);
    transform: translate3d(49vw, 64vh, 116px) rotate(30deg);
  }
}
@keyframes particle-animation-26 {
  0% {
    -webkit-transform: translate3d(17vw, 50vh, 106px) rotate(39deg);
    transform: translate3d(63vw, 32vh, 378px) rotate(40deg);
  }
  100% {
    -webkit-transform: translate3d(108vw, 9vh, 285px) rotate(150deg);
    transform: translate3d(9vw, 58vh, 359px) 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(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: 95px;
  width: 95px;
  border: 1px solid #bababa;
  -webkit-animation-delay: -26s;
  animation-delay: -26s;
}

@-webkit-keyframes particle-animation-27 {
  0% {
    -webkit-transform: translate3d(43vw, 74vh, 351px) rotate(5deg);
    transform: translate3d(8vw, 22vh, 291px) rotate(5deg);
  }
  100% {
    -webkit-transform: translate3d(86vw, 18vh, 104px) rotate(1deg);
    transform: translate3d(15vw, 36vh, 112px) rotate(157deg);
  }
}
@keyframes particle-animation-27 {
  0% {
    -webkit-transform: translate3d(60vw, 25vh, 21px) rotate(23deg);
    transform: translate3d(29vw, 31vh, 275px) rotate(76deg);
  }
  100% {
    -webkit-transform: translate3d(94vw, 88vh, 158px) rotate(72deg);
    transform: translate3d(60vw, 34vh, 301px) rotate(180deg);
  }
}
@-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: 60px;
  width: 60px;
  border: 1px solid #bababa;
  -webkit-animation-delay: -27s;
  animation-delay: -27s;
}

@-webkit-keyframes particle-animation-28 {
  0% {
    -webkit-transform: translate3d(16vw, 68vh, 149px) rotate(73deg);
    transform: translate3d(24vw, 36vh, 142px) rotate(74deg);
  }
  100% {
    -webkit-transform: translate3d(94vw, 54vh, 361px) rotate(169deg);
    transform: translate3d(96vw, 22vh, 96px) rotate(175deg);
  }
}
@keyframes particle-animation-28 {
  0% {
    -webkit-transform: translate3d(72vw, 16vh, 33px) rotate(5deg);
    transform: translate3d(20vw, 67vh, 395px) rotate(87deg);
  }
  100% {
    -webkit-transform: translate3d(94vw, 8vh, 388px) rotate(110deg);
    transform: translate3d(31vw, 63vh, 250px) rotate(129deg);
  }
}
@-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: 27px;
  width: 27px;
  border: 1px solid #b3b3b3;
  -webkit-animation-delay: -28s;
  animation-delay: -28s;
}

@-webkit-keyframes particle-animation-29 {
  0% {
    -webkit-transform: translate3d(54vw, 71vh, 396px) rotate(43deg);
    transform: translate3d(1vw, 67vh, 292px) rotate(55deg);
  }
  100% {
    -webkit-transform: translate3d(108vw, 91vh, 395px) rotate(65deg);
    transform: translate3d(6vw, 74vh, 110px) rotate(50deg);
  }
}
@keyframes particle-animation-29 {
  0% {
    -webkit-transform: translate3d(72vw, 54vh, 101px) rotate(18deg);
    transform: translate3d(16vw, 74vh, 243px) rotate(70deg);
  }
  100% {
    -webkit-transform: translate3d(93vw, 89vh, 393px) rotate(177deg);
    transform: translate3d(34vw, 24vh, 362px) rotate(7deg);
  }
}
@-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: 24px;
  width: 24px;
  border: 1px solid #727272;
  -webkit-animation-delay: -29s;
  animation-delay: -29s;
}

@-webkit-keyframes particle-animation-30 {
  0% {
    -webkit-transform: translate3d(87vw, 14vh, 133px) rotate(53deg);
    transform: translate3d(31vw, 10vh, 342px) rotate(83deg);
  }
  100% {
    -webkit-transform: translate3d(56vw, 88vh, 120px) rotate(79deg);
    transform: translate3d(67vw, 81vh, 56px) rotate(75deg);
  }
}
@keyframes particle-animation-30 {
  0% {
    -webkit-transform: translate3d(31vw, 67vh, 70px) rotate(44deg);
    transform: translate3d(43vw, 23vh, 279px) rotate(89deg);
  }
  100% {
    -webkit-transform: translate3d(1vw, 9vh, 105px) rotate(26deg);
    transform: translate3d(61vw, 55vh, 108px) rotate(37deg);
  }
}
@-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: 87px;
  width: 87px;
  border: 1px solid #c6c6c6;
  -webkit-animation-delay: -30s;
  animation-delay: -30s;
}

@-webkit-keyframes particle-animation-31 {
  0% {
    -webkit-transform: translate3d(40vw, 1vh, 24px) rotate(81deg);
    transform: translate3d(26vw, 89vh, 325px) rotate(89deg);
  }
  100% {
    -webkit-transform: translate3d(72vw, 33vh, 370px) rotate(90deg);
    transform: translate3d(82vw, 31vh, 243px) rotate(15deg);
  }
}
@keyframes particle-animation-31 {
  0% {
    -webkit-transform: translate3d(30vw, 86vh, 32px) rotate(28deg);
    transform: translate3d(20vw, 64vh, 82px) rotate(8deg);
  }
  100% {
    -webkit-transform: translate3d(81vw, 52vh, 70px) rotate(142deg);
    transform: translate3d(25vw, 70vh, 220px) rotate(92deg);
  }
}
@-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: 24px;
  width: 24px;
  border: 1px solid #888888;
  -webkit-animation-delay: -31s;
  animation-delay: -31s;
}

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