#background{
   background: linear-gradient(30deg, #FFF 0%, #bfd7f6 10%, #afcdf4 22%, #b7d3f4 26%, #e3efff 45%, #FFF 64%, #bdd2ec 80%, #b3cae7 87%, #c3d5e9 95%, #b7d5f9 100%);
}

.main-box-particle {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
 
  /*filter: blur(3px);*/
}

/*.main-box-particle-background {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  
  width: 100vw;
  height: 100vh;
  background: #FFF;
  background: linear-gradient(30deg, #FFF 0%, #bfd7f6 10%, #afcdf4 22%, #b7d3f4 26%, #e3efff 45%, #FFF 64%, #bdd2ec 80%, #b3cae7 87%, #c3d5e9 95%, #b7d5f9 100%);
}*/

.main-box-circle-container {
  position: absolute;
  transform: translateY(-100vh);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}
.main-box-circle-container .main-box-circle-particle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  mix-blend-mode: screen;
  background-image: radial-gradient(white, white 10%, rgba(255, 255, 255, 0) 56%);
  -webkit-animation: fadein-frames 200ms infinite, scale-frames 2s infinite;
          animation: fadein-frames 200ms infinite, scale-frames 2s infinite;
}

@-webkit-keyframes fade-frames {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-frames {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes scale-frames {
  0% {
    transform: scale3d(0.8, 0.8, 1);
  }
  50% {
    transform: scale3d(2.2, 2.2, 1);
  }
  100% {
    transform: scale3d(0.8, 0.8, 1);
  }
}
@keyframes scale-frames {
  0% {
    transform: scale3d(0.8, 0.8, 1);
  }
  50% {
    transform: scale3d(2.2, 2.2, 1);
  }
  100% {
    transform: scale3d(0.8, 0.8, 1);
  }
}
.main-box-circle-container:nth-child(1) {
  width: 69px;
  height: 69px;
  -webkit-animation-name: move-frames-1;
          animation-name: move-frames-1;
  -webkit-animation-duration: 62923ms;
          animation-duration: 62923ms;
  -webkit-animation-delay: 35981ms;
          animation-delay: 35981ms;
}
@-webkit-keyframes move-frames-1 {
  from {
    transform: translate3d(19vw, 162vh, 0);
  }
  to {
    transform: translate3d(175vw, -217vh, 0);
  }
}
@keyframes move-frames-1 {
  from {
    transform: translate3d(19vw, 162vh, 0);
  }
  to {
    transform: translate3d(175vw, -217vh, 0);
  }
}
.main-box-circle-container:nth-child(1) .main-box-circle-particle {
  -webkit-animation-delay: 1004ms;
          animation-delay: 1004ms;
}
.main-box-circle-container:nth-child(2) {
  width: 113px;
  height: 113px;
  -webkit-animation-name: move-frames-2;
          animation-name: move-frames-2;
  -webkit-animation-duration: 63740ms;
          animation-duration: 63740ms;
  -webkit-animation-delay: 17978ms;
          animation-delay: 17978ms;
}
@-webkit-keyframes move-frames-2 {
  from {
    transform: translate3d(40vw, 189vh, 0);
  }
  to {
    transform: translate3d(223vw, -261vh, 0);
  }
}
@keyframes move-frames-2 {
  from {
    transform: translate3d(40vw, 189vh, 0);
  }
  to {
    transform: translate3d(223vw, -261vh, 0);
  }
}
.main-box-circle-container:nth-child(2) .main-box-circle-particle {
  -webkit-animation-delay: 7550ms;
          animation-delay: 7550ms;
}
.main-box-circle-container:nth-child(3) {
  width: 54px;
  height: 54px;
  -webkit-animation-name: move-frames-3;
          animation-name: move-frames-3;
  -webkit-animation-duration: 62717ms;
          animation-duration: 62717ms;
  -webkit-animation-delay: 1511ms;
          animation-delay: 1511ms;
}
@-webkit-keyframes move-frames-3 {
  from {
    transform: translate3d(41vw, 120vh, 0);
  }
  to {
    transform: translate3d(232vw, -166vh, 0);
  }
}
@keyframes move-frames-3 {
  from {
    transform: translate3d(41vw, 120vh, 0);
  }
  to {
    transform: translate3d(232vw, -166vh, 0);
  }
}
.main-box-circle-container:nth-child(3) .main-box-circle-particle {
  -webkit-animation-delay: 1391ms;
          animation-delay: 1391ms;
}
.main-box-circle-container:nth-child(4) {
  width: 146px;
  height: 146px;
  -webkit-animation-name: move-frames-4;
          animation-name: move-frames-4;
  -webkit-animation-duration: 62860ms;
          animation-duration: 62860ms;
  -webkit-animation-delay: 33414ms;
          animation-delay: 33414ms;
}
@-webkit-keyframes move-frames-4 {
  from {
    transform: translate3d(28vw, 224vh, 0);
  }
  to {
    transform: translate3d(142vw, -234vh, 0);
  }
}
@keyframes move-frames-4 {
  from {
    transform: translate3d(28vw, 224vh, 0);
  }
  to {
    transform: translate3d(142vw, -234vh, 0);
  }
}
.main-box-circle-container:nth-child(4) .main-box-circle-particle {
  -webkit-animation-delay: 7345ms;
          animation-delay: 7345ms;
}
.main-box-circle-container:nth-child(5) {
  width: 11px;
  height: 11px;
  -webkit-animation-name: move-frames-5;
          animation-name: move-frames-5;
  -webkit-animation-duration: 63990ms;
          animation-duration: 63990ms;
  -webkit-animation-delay: 13163ms;
          animation-delay: 13163ms;
}
@-webkit-keyframes move-frames-5 {
  from {
    transform: translate3d(22vw, 213vh, 0);
  }
  to {
    transform: translate3d(64vw, -329vh, 0);
  }
}
@keyframes move-frames-5 {
  from {
    transform: translate3d(22vw, 213vh, 0);
  }
  to {
    transform: translate3d(64vw, -329vh, 0);
  }
}
.main-box-circle-container:nth-child(5) .main-box-circle-particle {
  -webkit-animation-delay: 4317ms;
          animation-delay: 4317ms;
}
.main-box-circle-container:nth-child(6) {
  width: 113px;
  height: 113px;
  -webkit-animation-name: move-frames-6;
          animation-name: move-frames-6;
  -webkit-animation-duration: 67241ms;
          animation-duration: 67241ms;
  -webkit-animation-delay: 6529ms;
          animation-delay: 6529ms;
}
@-webkit-keyframes move-frames-6 {
  from {
    transform: translate3d(33vw, 199vh, 0);
  }
  to {
    transform: translate3d(80vw, -329vh, 0);
  }
}
@keyframes move-frames-6 {
  from {
    transform: translate3d(33vw, 199vh, 0);
  }
  to {
    transform: translate3d(80vw, -329vh, 0);
  }
}
.main-box-circle-container:nth-child(6) .main-box-circle-particle {
  -webkit-animation-delay: 4608ms;
          animation-delay: 4608ms;
}
.main-box-circle-container:nth-child(7) {
  width: 138px;
  height: 138px;
  -webkit-animation-name: move-frames-7;
          animation-name: move-frames-7;
  -webkit-animation-duration: 64370ms;
          animation-duration: 64370ms;
  -webkit-animation-delay: 27799ms;
          animation-delay: 27799ms;
}
@-webkit-keyframes move-frames-7 {
  from {
    transform: translate3d(23vw, 221vh, 0);
  }
  to {
    transform: translate3d(132vw, -230vh, 0);
  }
}
@keyframes move-frames-7 {
  from {
    transform: translate3d(23vw, 221vh, 0);
  }
  to {
    transform: translate3d(132vw, -230vh, 0);
  }
}
.main-box-circle-container:nth-child(7) .main-box-circle-particle {
  -webkit-animation-delay: 5395ms;
          animation-delay: 5395ms;
}
.main-box-circle-container:nth-child(8) {
  width: 97px;
  height: 97px;
  -webkit-animation-name: move-frames-8;
          animation-name: move-frames-8;
  -webkit-animation-duration: 67790ms;
          animation-duration: 67790ms;
  -webkit-animation-delay: 21633ms;
          animation-delay: 21633ms;
}
@-webkit-keyframes move-frames-8 {
  from {
    transform: translate3d(14vw, 127vh, 0);
  }
  to {
    transform: translate3d(172vw, -160vh, 0);
  }
}
@keyframes move-frames-8 {
  from {
    transform: translate3d(14vw, 127vh, 0);
  }
  to {
    transform: translate3d(172vw, -160vh, 0);
  }
}
.main-box-circle-container:nth-child(8) .main-box-circle-particle {
  -webkit-animation-delay: 5263ms;
          animation-delay: 5263ms;
}
.main-box-circle-container:nth-child(9) {
  width: 117px;
  height: 117px;
  -webkit-animation-name: move-frames-9;
          animation-name: move-frames-9;
  -webkit-animation-duration: 66127ms;
          animation-duration: 66127ms;
  -webkit-animation-delay: 33515ms;
          animation-delay: 33515ms;
}
@-webkit-keyframes move-frames-9 {
  from {
    transform: translate3d(19vw, 138vh, 0);
  }
  to {
    transform: translate3d(190vw, -154vh, 0);
  }
}
@keyframes move-frames-9 {
  from {
    transform: translate3d(19vw, 138vh, 0);
  }
  to {
    transform: translate3d(190vw, -154vh, 0);
  }
}
.main-box-circle-container:nth-child(9) .main-box-circle-particle {
  -webkit-animation-delay: 1706ms;
          animation-delay: 1706ms;
}
.main-box-circle-container:nth-child(10) {
  width: 50px;
  height: 50px;
  -webkit-animation-name: move-frames-10;
          animation-name: move-frames-10;
  -webkit-animation-duration: 67471ms;
          animation-duration: 67471ms;
  -webkit-animation-delay: 36706ms;
          animation-delay: 36706ms;
}
@-webkit-keyframes move-frames-10 {
  from {
    transform: translate3d(28vw, 215vh, 0);
  }
  to {
    transform: translate3d(71vw, -325vh, 0);
  }
}
@keyframes move-frames-10 {
  from {
    transform: translate3d(28vw, 215vh, 0);
  }
  to {
    transform: translate3d(71vw, -325vh, 0);
  }
}
.main-box-circle-container:nth-child(10) .main-box-circle-particle {
  -webkit-animation-delay: 6987ms;
          animation-delay: 6987ms;
}
.main-box-circle-container:nth-child(11) {
  width: 98px;
  height: 98px;
  -webkit-animation-name: move-frames-11;
          animation-name: move-frames-11;
  -webkit-animation-duration: 66008ms;
          animation-duration: 66008ms;
  -webkit-animation-delay: 29081ms;
          animation-delay: 29081ms;
}
@-webkit-keyframes move-frames-11 {
  from {
    transform: translate3d(35vw, 229vh, 0);
  }
  to {
    transform: translate3d(128vw, -379vh, 0);
  }
}
@keyframes move-frames-11 {
  from {
    transform: translate3d(35vw, 229vh, 0);
  }
  to {
    transform: translate3d(128vw, -379vh, 0);
  }
}
.main-box-circle-container:nth-child(11) .main-box-circle-particle {
  -webkit-animation-delay: 4177ms;
          animation-delay: 4177ms;
}
.main-box-circle-container:nth-child(12) {
  width: 60px;
  height: 60px;
  -webkit-animation-name: move-frames-12;
          animation-name: move-frames-12;
  -webkit-animation-duration: 64300ms;
          animation-duration: 64300ms;
  -webkit-animation-delay: 31743ms;
          animation-delay: 31743ms;
}
@-webkit-keyframes move-frames-12 {
  from {
    transform: translate3d(34vw, 103vh, 0);
  }
  to {
    transform: translate3d(111vw, -246vh, 0);
  }
}
@keyframes move-frames-12 {
  from {
    transform: translate3d(34vw, 103vh, 0);
  }
  to {
    transform: translate3d(111vw, -246vh, 0);
  }
}
.main-box-circle-container:nth-child(12) .main-box-circle-particle {
  -webkit-animation-delay: 1228ms;
          animation-delay: 1228ms;
}
.main-box-circle-container:nth-child(13) {
  width: 146px;
  height: 146px;
  -webkit-animation-name: move-frames-13;
          animation-name: move-frames-13;
  -webkit-animation-duration: 65452ms;
          animation-duration: 65452ms;
  -webkit-animation-delay: 25665ms;
          animation-delay: 25665ms;
}
@-webkit-keyframes move-frames-13 {
  from {
    transform: translate3d(21vw, 157vh, 0);
  }
  to {
    transform: translate3d(36vw, -257vh, 0);
  }
}
@keyframes move-frames-13 {
  from {
    transform: translate3d(21vw, 157vh, 0);
  }
  to {
    transform: translate3d(36vw, -257vh, 0);
  }
}
.main-box-circle-container:nth-child(13) .main-box-circle-particle {
  -webkit-animation-delay: 6160ms;
          animation-delay: 6160ms;
}
.main-box-circle-container:nth-child(14) {
  width: 136px;
  height: 136px;
  -webkit-animation-name: move-frames-14;
          animation-name: move-frames-14;
  -webkit-animation-duration: 63784ms;
          animation-duration: 63784ms;
  -webkit-animation-delay: 9382ms;
          animation-delay: 9382ms;
}
@-webkit-keyframes move-frames-14 {
  from {
    transform: translate3d(21vw, 229vh, 0);
  }
  to {
    transform: translate3d(143vw, -309vh, 0);
  }
}
@keyframes move-frames-14 {
  from {
    transform: translate3d(21vw, 229vh, 0);
  }
  to {
    transform: translate3d(143vw, -309vh, 0);
  }
}
.main-box-circle-container:nth-child(14) .main-box-circle-particle {
  -webkit-animation-delay: 6921ms;
          animation-delay: 6921ms;
}
.main-box-circle-container:nth-child(15) {
  width: 91px;
  height: 91px;
  -webkit-animation-name: move-frames-15;
          animation-name: move-frames-15;
  -webkit-animation-duration: 63620ms;
          animation-duration: 63620ms;
  -webkit-animation-delay: 30727ms;
          animation-delay: 30727ms;
}
@-webkit-keyframes move-frames-15 {
  from {
    transform: translate3d(32vw, 249vh, 0);
  }
  to {
    transform: translate3d(132vw, -324vh, 0);
  }
}
@keyframes move-frames-15 {
  from {
    transform: translate3d(32vw, 249vh, 0);
  }
  to {
    transform: translate3d(132vw, -324vh, 0);
  }
}
.main-box-circle-container:nth-child(15) .main-box-circle-particle {
  -webkit-animation-delay: 1134ms;
          animation-delay: 1134ms;
}
.main-box-circle-container:nth-child(16) {
  width: 109px;
  height: 109px;
  -webkit-animation-name: move-frames-16;
          animation-name: move-frames-16;
  -webkit-animation-duration: 66071ms;
          animation-duration: 66071ms;
  -webkit-animation-delay: 26916ms;
          animation-delay: 26916ms;
}
@-webkit-keyframes move-frames-16 {
  from {
    transform: translate3d(42vw, 183vh, 0);
  }
  to {
    transform: translate3d(99vw, -275vh, 0);
  }
}
@keyframes move-frames-16 {
  from {
    transform: translate3d(42vw, 183vh, 0);
  }
  to {
    transform: translate3d(99vw, -275vh, 0);
  }
}
.main-box-circle-container:nth-child(16) .main-box-circle-particle {
  -webkit-animation-delay: 6150ms;
          animation-delay: 6150ms;
}
.main-box-circle-container:nth-child(17) {
  width: 56px;
  height: 56px;
  -webkit-animation-name: move-frames-17;
          animation-name: move-frames-17;
  -webkit-animation-duration: 62320ms;
          animation-duration: 62320ms;
  -webkit-animation-delay: 51ms;
          animation-delay: 51ms;
}
@-webkit-keyframes move-frames-17 {
  from {
    transform: translate3d(29vw, 204vh, 0);
  }
  to {
    transform: translate3d(71vw, -216vh, 0);
  }
}
@keyframes move-frames-17 {
  from {
    transform: translate3d(29vw, 204vh, 0);
  }
  to {
    transform: translate3d(71vw, -216vh, 0);
  }
}
.main-box-circle-container:nth-child(17) .main-box-circle-particle {
  -webkit-animation-delay: 3959ms;
          animation-delay: 3959ms;
}
.main-box-circle-container:nth-child(18) {
  width: 43px;
  height: 43px;
  -webkit-animation-name: move-frames-18;
          animation-name: move-frames-18;
  -webkit-animation-duration: 64888ms;
          animation-duration: 64888ms;
  -webkit-animation-delay: 6691ms;
          animation-delay: 6691ms;
}
@-webkit-keyframes move-frames-18 {
  from {
    transform: translate3d(28vw, 234vh, 0);
  }
  to {
    transform: translate3d(244vw, -304vh, 0);
  }
}
@keyframes move-frames-18 {
  from {
    transform: translate3d(28vw, 234vh, 0);
  }
  to {
    transform: translate3d(244vw, -304vh, 0);
  }
}
.main-box-circle-container:nth-child(18) .main-box-circle-particle {
  -webkit-animation-delay: 3082ms;
          animation-delay: 3082ms;
}
.main-box-circle-container:nth-child(19) {
  width: 119px;
  height: 119px;
  -webkit-animation-name: move-frames-19;
          animation-name: move-frames-19;
  -webkit-animation-duration: 68166ms;
          animation-duration: 68166ms;
  -webkit-animation-delay: 32514ms;
          animation-delay: 32514ms;
}
@-webkit-keyframes move-frames-19 {
  from {
    transform: translate3d(46vw, 249vh, 0);
  }
  to {
    transform: translate3d(13vw, -287vh, 0);
  }
}
@keyframes move-frames-19 {
  from {
    transform: translate3d(46vw, 249vh, 0);
  }
  to {
    transform: translate3d(13vw, -287vh, 0);
  }
}
.main-box-circle-container:nth-child(19) .main-box-circle-particle {
  -webkit-animation-delay: 2104ms;
          animation-delay: 2104ms;
}
.main-box-circle-container:nth-child(20) {
  width: 94px;
  height: 94px;
  -webkit-animation-name: move-frames-20;
          animation-name: move-frames-20;
  -webkit-animation-duration: 68932ms;
          animation-duration: 68932ms;
  -webkit-animation-delay: 16050ms;
          animation-delay: 16050ms;
}
@-webkit-keyframes move-frames-20 {
  from {
    transform: translate3d(31vw, 163vh, 0);
  }
  to {
    transform: translate3d(237vw, -266vh, 0);
  }
}
@keyframes move-frames-20 {
  from {
    transform: translate3d(31vw, 163vh, 0);
  }
  to {
    transform: translate3d(237vw, -266vh, 0);
  }
}
.main-box-circle-container:nth-child(20) .main-box-circle-particle {
  -webkit-animation-delay: 1346ms;
          animation-delay: 1346ms;
}
.main-box-circle-container:nth-child(21) {
  width: 119px;
  height: 119px;
  -webkit-animation-name: move-frames-21;
          animation-name: move-frames-21;
  -webkit-animation-duration: 68952ms;
          animation-duration: 68952ms;
  -webkit-animation-delay: 755ms;
          animation-delay: 755ms;
}
@-webkit-keyframes move-frames-21 {
  from {
    transform: translate3d(49vw, 173vh, 0);
  }
  to {
    transform: translate3d(80vw, -179vh, 0);
  }
}
@keyframes move-frames-21 {
  from {
    transform: translate3d(49vw, 173vh, 0);
  }
  to {
    transform: translate3d(80vw, -179vh, 0);
  }
}
.main-box-circle-container:nth-child(21) .main-box-circle-particle {
  -webkit-animation-delay: 1228ms;
          animation-delay: 1228ms;
}
.main-box-circle-container:nth-child(22) {
  width: 3px;
  height: 3px;
  -webkit-animation-name: move-frames-22;
          animation-name: move-frames-22;
  -webkit-animation-duration: 60625ms;
          animation-duration: 60625ms;
  -webkit-animation-delay: 21262ms;
          animation-delay: 21262ms;
}
@-webkit-keyframes move-frames-22 {
  from {
    transform: translate3d(17vw, 186vh, 0);
  }
  to {
    transform: translate3d(232vw, -261vh, 0);
  }
}
@keyframes move-frames-22 {
  from {
    transform: translate3d(17vw, 186vh, 0);
  }
  to {
    transform: translate3d(232vw, -261vh, 0);
  }
}
.main-box-circle-container:nth-child(22) .main-box-circle-particle {
  -webkit-animation-delay: 4079ms;
          animation-delay: 4079ms;
}
.main-box-circle-container:nth-child(23) {
  width: 85px;
  height: 85px;
  -webkit-animation-name: move-frames-23;
          animation-name: move-frames-23;
  -webkit-animation-duration: 62649ms;
          animation-duration: 62649ms;
  -webkit-animation-delay: 30570ms;
          animation-delay: 30570ms;
}
@-webkit-keyframes move-frames-23 {
  from {
    transform: translate3d(17vw, 215vh, 0);
  }
  to {
    transform: translate3d(135vw, -355vh, 0);
  }
}
@keyframes move-frames-23 {
  from {
    transform: translate3d(17vw, 215vh, 0);
  }
  to {
    transform: translate3d(135vw, -355vh, 0);
  }
}
.main-box-circle-container:nth-child(23) .main-box-circle-particle {
  -webkit-animation-delay: 7434ms;
          animation-delay: 7434ms;
}
.main-box-circle-container:nth-child(24) {
  width: 2px;
  height: 2px;
  -webkit-animation-name: move-frames-24;
          animation-name: move-frames-24;
  -webkit-animation-duration: 66899ms;
          animation-duration: 66899ms;
  -webkit-animation-delay: 20424ms;
          animation-delay: 20424ms;
}
@-webkit-keyframes move-frames-24 {
  from {
    transform: translate3d(19vw, 121vh, 0);
  }
  to {
    transform: translate3d(242vw, -214vh, 0);
  }
}
@keyframes move-frames-24 {
  from {
    transform: translate3d(19vw, 121vh, 0);
  }
  to {
    transform: translate3d(242vw, -214vh, 0);
  }
}
.main-box-circle-container:nth-child(24) .main-box-circle-particle {
  -webkit-animation-delay: 5456ms;
          animation-delay: 5456ms;
}
.main-box-circle-container:nth-child(25) {
  width: 12px;
  height: 12px;
  -webkit-animation-name: move-frames-25;
          animation-name: move-frames-25;
  -webkit-animation-duration: 63522ms;
          animation-duration: 63522ms;
  -webkit-animation-delay: 16975ms;
          animation-delay: 16975ms;
}
@-webkit-keyframes move-frames-25 {
  from {
    transform: translate3d(37vw, 163vh, 0);
  }
  to {
    transform: translate3d(88vw, -182vh, 0);
  }
}
@keyframes move-frames-25 {
  from {
    transform: translate3d(37vw, 163vh, 0);
  }
  to {
    transform: translate3d(88vw, -182vh, 0);
  }
}
.main-box-circle-container:nth-child(25) .main-box-circle-particle {
  -webkit-animation-delay: 3090ms;
          animation-delay: 3090ms;
}
.main-box-circle-container:nth-child(26) {
  width: 91px;
  height: 91px;
  -webkit-animation-name: move-frames-26;
          animation-name: move-frames-26;
  -webkit-animation-duration: 62999ms;
          animation-duration: 62999ms;
  -webkit-animation-delay: 31216ms;
          animation-delay: 31216ms;
}
@-webkit-keyframes move-frames-26 {
  from {
    transform: translate3d(8vw, 112vh, 0);
  }
  to {
    transform: translate3d(188vw, -238vh, 0);
  }
}
@keyframes move-frames-26 {
  from {
    transform: translate3d(8vw, 112vh, 0);
  }
  to {
    transform: translate3d(188vw, -238vh, 0);
  }
}
.main-box-circle-container:nth-child(26) .main-box-circle-particle {
  -webkit-animation-delay: 2188ms;
          animation-delay: 2188ms;
}
.main-box-circle-container:nth-child(27) {
  width: 132px;
  height: 132px;
  -webkit-animation-name: move-frames-27;
          animation-name: move-frames-27;
  -webkit-animation-duration: 65474ms;
          animation-duration: 65474ms;
  -webkit-animation-delay: 27653ms;
          animation-delay: 27653ms;
}
@-webkit-keyframes move-frames-27 {
  from {
    transform: translate3d(42vw, 177vh, 0);
  }
  to {
    transform: translate3d(33vw, -264vh, 0);
  }
}
@keyframes move-frames-27 {
  from {
    transform: translate3d(42vw, 177vh, 0);
  }
  to {
    transform: translate3d(33vw, -264vh, 0);
  }
}
.main-box-circle-container:nth-child(27) .main-box-circle-particle {
  -webkit-animation-delay: 6365ms;
          animation-delay: 6365ms;
}
.main-box-circle-container:nth-child(28) {
  width: 119px;
  height: 119px;
  -webkit-animation-name: move-frames-28;
          animation-name: move-frames-28;
  -webkit-animation-duration: 60445ms;
          animation-duration: 60445ms;
  -webkit-animation-delay: 36332ms;
          animation-delay: 36332ms;
}
@-webkit-keyframes move-frames-28 {
  from {
    transform: translate3d(9vw, 116vh, 0);
  }
  to {
    transform: translate3d(70vw, -205vh, 0);
  }
}
@keyframes move-frames-28 {
  from {
    transform: translate3d(9vw, 116vh, 0);
  }
  to {
    transform: translate3d(70vw, -205vh, 0);
  }
}
.main-box-circle-container:nth-child(28) .main-box-circle-particle {
  -webkit-animation-delay: 2626ms;
          animation-delay: 2626ms;
}
.main-box-circle-container:nth-child(29) {
  width: 3px;
  height: 3px;
  -webkit-animation-name: move-frames-29;
          animation-name: move-frames-29;
  -webkit-animation-duration: 66830ms;
          animation-duration: 66830ms;
  -webkit-animation-delay: 16529ms;
          animation-delay: 16529ms;
}
@-webkit-keyframes move-frames-29 {
  from {
    transform: translate3d(27vw, 157vh, 0);
  }
  to {
    transform: translate3d(119vw, -292vh, 0);
  }
}
@keyframes move-frames-29 {
  from {
    transform: translate3d(27vw, 157vh, 0);
  }
  to {
    transform: translate3d(119vw, -292vh, 0);
  }
}
.main-box-circle-container:nth-child(29) .main-box-circle-particle {
  -webkit-animation-delay: 5656ms;
          animation-delay: 5656ms;
}
.main-box-circle-container:nth-child(30) {
  width: 103px;
  height: 103px;
  -webkit-animation-name: move-frames-30;
          animation-name: move-frames-30;
  -webkit-animation-duration: 66554ms;
          animation-duration: 66554ms;
  -webkit-animation-delay: 32245ms;
          animation-delay: 32245ms;
}
@-webkit-keyframes move-frames-30 {
  from {
    transform: translate3d(49vw, 115vh, 0);
  }
  to {
    transform: translate3d(92vw, -152vh, 0);
  }
}
@keyframes move-frames-30 {
  from {
    transform: translate3d(49vw, 115vh, 0);
  }
  to {
    transform: translate3d(92vw, -152vh, 0);
  }
}
.main-box-circle-container:nth-child(30) .main-box-circle-particle {
  -webkit-animation-delay: 2931ms;
          animation-delay: 2931ms;
}
.main-box-circle-container:nth-child(31) {
  width: 70px;
  height: 70px;
  -webkit-animation-name: move-frames-31;
          animation-name: move-frames-31;
  -webkit-animation-duration: 60268ms;
          animation-duration: 60268ms;
  -webkit-animation-delay: 2571ms;
          animation-delay: 2571ms;
}
@-webkit-keyframes move-frames-31 {
  from {
    transform: translate3d(28vw, 244vh, 0);
  }
  to {
    transform: translate3d(123vw, -269vh, 0);
  }
}
@keyframes move-frames-31 {
  from {
    transform: translate3d(28vw, 244vh, 0);
  }
  to {
    transform: translate3d(123vw, -269vh, 0);
  }
}
.main-box-circle-container:nth-child(31) .main-box-circle-particle {
  -webkit-animation-delay: 7942ms;
          animation-delay: 7942ms;
}
.main-box-circle-container:nth-child(32) {
  width: 61px;
  height: 61px;
  -webkit-animation-name: move-frames-32;
          animation-name: move-frames-32;
  -webkit-animation-duration: 68254ms;
          animation-duration: 68254ms;
  -webkit-animation-delay: 32290ms;
          animation-delay: 32290ms;
}
@-webkit-keyframes move-frames-32 {
  from {
    transform: translate3d(41vw, 159vh, 0);
  }
  to {
    transform: translate3d(66vw, -185vh, 0);
  }
}
@keyframes move-frames-32 {
  from {
    transform: translate3d(41vw, 159vh, 0);
  }
  to {
    transform: translate3d(66vw, -185vh, 0);
  }
}
.main-box-circle-container:nth-child(32) .main-box-circle-particle {
  -webkit-animation-delay: 4516ms;
          animation-delay: 4516ms;
}
.main-box-circle-container:nth-child(33) {
  width: 47px;
  height: 47px;
  -webkit-animation-name: move-frames-33;
          animation-name: move-frames-33;
  -webkit-animation-duration: 68462ms;
          animation-duration: 68462ms;
  -webkit-animation-delay: 2029ms;
          animation-delay: 2029ms;
}
@-webkit-keyframes move-frames-33 {
  from {
    transform: translate3d(15vw, 138vh, 0);
  }
  to {
    transform: translate3d(81vw, -154vh, 0);
  }
}
@keyframes move-frames-33 {
  from {
    transform: translate3d(15vw, 138vh, 0);
  }
  to {
    transform: translate3d(81vw, -154vh, 0);
  }
}
.main-box-circle-container:nth-child(33) .main-box-circle-particle {
  -webkit-animation-delay: 7039ms;
          animation-delay: 7039ms;
}
.main-box-circle-container:nth-child(34) {
  width: 115px;
  height: 115px;
  -webkit-animation-name: move-frames-34;
          animation-name: move-frames-34;
  -webkit-animation-duration: 64123ms;
          animation-duration: 64123ms;
  -webkit-animation-delay: 4861ms;
          animation-delay: 4861ms;
}
@-webkit-keyframes move-frames-34 {
  from {
    transform: translate3d(12vw, 138vh, 0);
  }
  to {
    transform: translate3d(35vw, -192vh, 0);
  }
}
@keyframes move-frames-34 {
  from {
    transform: translate3d(12vw, 138vh, 0);
  }
  to {
    transform: translate3d(35vw, -192vh, 0);
  }
}
.main-box-circle-container:nth-child(34) .main-box-circle-particle {
  -webkit-animation-delay: 5282ms;
          animation-delay: 5282ms;
}
.main-box-circle-container:nth-child(35) {
  width: 83px;
  height: 83px;
  -webkit-animation-name: move-frames-35;
          animation-name: move-frames-35;
  -webkit-animation-duration: 61285ms;
          animation-duration: 61285ms;
  -webkit-animation-delay: 29627ms;
          animation-delay: 29627ms;
}
@-webkit-keyframes move-frames-35 {
  from {
    transform: translate3d(3vw, 221vh, 0);
  }
  to {
    transform: translate3d(121vw, -357vh, 0);
  }
}
@keyframes move-frames-35 {
  from {
    transform: translate3d(3vw, 221vh, 0);
  }
  to {
    transform: translate3d(121vw, -357vh, 0);
  }
}
.main-box-circle-container:nth-child(35) .main-box-circle-particle {
  -webkit-animation-delay: 699ms;
          animation-delay: 699ms;
}
.main-box-circle-container:nth-child(36) {
  width: 16px;
  height: 16px;
  -webkit-animation-name: move-frames-36;
          animation-name: move-frames-36;
  -webkit-animation-duration: 63964ms;
          animation-duration: 63964ms;
  -webkit-animation-delay: 11425ms;
          animation-delay: 11425ms;
}
@-webkit-keyframes move-frames-36 {
  from {
    transform: translate3d(39vw, 134vh, 0);
  }
  to {
    transform: translate3d(223vw, -217vh, 0);
  }
}
@keyframes move-frames-36 {
  from {
    transform: translate3d(39vw, 134vh, 0);
  }
  to {
    transform: translate3d(223vw, -217vh, 0);
  }
}
.main-box-circle-container:nth-child(36) .main-box-circle-particle {
  -webkit-animation-delay: 5870ms;
          animation-delay: 5870ms;
}
.main-box-circle-container:nth-child(37) {
  width: 144px;
  height: 144px;
  -webkit-animation-name: move-frames-37;
          animation-name: move-frames-37;
  -webkit-animation-duration: 62520ms;
          animation-duration: 62520ms;
  -webkit-animation-delay: 33948ms;
          animation-delay: 33948ms;
}
@-webkit-keyframes move-frames-37 {
  from {
    transform: translate3d(25vw, 118vh, 0);
  }
  to {
    transform: translate3d(76vw, -262vh, 0);
  }
}
@keyframes move-frames-37 {
  from {
    transform: translate3d(25vw, 118vh, 0);
  }
  to {
    transform: translate3d(76vw, -262vh, 0);
  }
}
.main-box-circle-container:nth-child(37) .main-box-circle-particle {
  -webkit-animation-delay: 5656ms;
          animation-delay: 5656ms;
}
.main-box-circle-container:nth-child(38) {
  width: 35px;
  height: 35px;
  -webkit-animation-name: move-frames-38;
          animation-name: move-frames-38;
  -webkit-animation-duration: 63182ms;
          animation-duration: 63182ms;
  -webkit-animation-delay: 22174ms;
          animation-delay: 22174ms;
}
@-webkit-keyframes move-frames-38 {
  from {
    transform: translate3d(18vw, 115vh, 0);
  }
  to {
    transform: translate3d(108vw, -161vh, 0);
  }
}
@keyframes move-frames-38 {
  from {
    transform: translate3d(18vw, 115vh, 0);
  }
  to {
    transform: translate3d(108vw, -161vh, 0);
  }
}
.main-box-circle-container:nth-child(38) .main-box-circle-particle {
  -webkit-animation-delay: 536ms;
          animation-delay: 536ms;
}
.main-box-circle-container:nth-child(39) {
  width: 134px;
  height: 134px;
  -webkit-animation-name: move-frames-39;
          animation-name: move-frames-39;
  -webkit-animation-duration: 62880ms;
          animation-duration: 62880ms;
  -webkit-animation-delay: 11848ms;
          animation-delay: 11848ms;
}
@-webkit-keyframes move-frames-39 {
  from {
    transform: translate3d(26vw, 131vh, 0);
  }
  to {
    transform: translate3d(156vw, -155vh, 0);
  }
}
@keyframes move-frames-39 {
  from {
    transform: translate3d(26vw, 131vh, 0);
  }
  to {
    transform: translate3d(156vw, -155vh, 0);
  }
}
.main-box-circle-container:nth-child(39) .main-box-circle-particle {
  -webkit-animation-delay: 979ms;
          animation-delay: 979ms;
}
.main-box-circle-container:nth-child(40) {
  width: 23px;
  height: 23px;
  -webkit-animation-name: move-frames-40;
          animation-name: move-frames-40;
  -webkit-animation-duration: 64914ms;
          animation-duration: 64914ms;
  -webkit-animation-delay: 29725ms;
          animation-delay: 29725ms;
}
@-webkit-keyframes move-frames-40 {
  from {
    transform: translate3d(42vw, 137vh, 0);
  }
  to {
    transform: translate3d(33vw, -256vh, 0);
  }
}
@keyframes move-frames-40 {
  from {
    transform: translate3d(42vw, 137vh, 0);
  }
  to {
    transform: translate3d(33vw, -256vh, 0);
  }
}
.main-box-circle-container:nth-child(40) .main-box-circle-particle {
  -webkit-animation-delay: 7679ms;
          animation-delay: 7679ms;
}
.main-box-circle-container:nth-child(41) {
  width: 130px;
  height: 130px;
  -webkit-animation-name: move-frames-41;
          animation-name: move-frames-41;
  -webkit-animation-duration: 66720ms;
          animation-duration: 66720ms;
  -webkit-animation-delay: 20057ms;
          animation-delay: 20057ms;
}
@-webkit-keyframes move-frames-41 {
  from {
    transform: translate3d(37vw, 130vh, 0);
  }
  to {
    transform: translate3d(205vw, -216vh, 0);
  }
}
@keyframes move-frames-41 {
  from {
    transform: translate3d(37vw, 130vh, 0);
  }
  to {
    transform: translate3d(205vw, -216vh, 0);
  }
}
.main-box-circle-container:nth-child(41) .main-box-circle-particle {
  -webkit-animation-delay: 1206ms;
          animation-delay: 1206ms;
}
.main-box-circle-container:nth-child(42) {
  width: 35px;
  height: 35px;
  -webkit-animation-name: move-frames-42;
          animation-name: move-frames-42;
  -webkit-animation-duration: 67908ms;
          animation-duration: 67908ms;
  -webkit-animation-delay: 36053ms;
          animation-delay: 36053ms;
}
@-webkit-keyframes move-frames-42 {
  from {
    transform: translate3d(45vw, 220vh, 0);
  }
  to {
    transform: translate3d(212vw, -268vh, 0);
  }
}
@keyframes move-frames-42 {
  from {
    transform: translate3d(45vw, 220vh, 0);
  }
  to {
    transform: translate3d(212vw, -268vh, 0);
  }
}
.main-box-circle-container:nth-child(42) .main-box-circle-particle {
  -webkit-animation-delay: 5059ms;
          animation-delay: 5059ms;
}
.main-box-circle-container:nth-child(43) {
  width: 119px;
  height: 119px;
  -webkit-animation-name: move-frames-43;
          animation-name: move-frames-43;
  -webkit-animation-duration: 68824ms;
          animation-duration: 68824ms;
  -webkit-animation-delay: 24514ms;
          animation-delay: 24514ms;
}
@-webkit-keyframes move-frames-43 {
  from {
    transform: translate3d(3vw, 205vh, 0);
  }
  to {
    transform: translate3d(246vw, -277vh, 0);
  }
}
@keyframes move-frames-43 {
  from {
    transform: translate3d(3vw, 205vh, 0);
  }
  to {
    transform: translate3d(246vw, -277vh, 0);
  }
}
.main-box-circle-container:nth-child(43) .main-box-circle-particle {
  -webkit-animation-delay: 1780ms;
          animation-delay: 1780ms;
}
.main-box-circle-container:nth-child(44) {
  width: 8px;
  height: 8px;
  -webkit-animation-name: move-frames-44;
          animation-name: move-frames-44;
  -webkit-animation-duration: 63028ms;
          animation-duration: 63028ms;
  -webkit-animation-delay: 19533ms;
          animation-delay: 19533ms;
}
@-webkit-keyframes move-frames-44 {
  from {
    transform: translate3d(46vw, 177vh, 0);
  }
  to {
    transform: translate3d(222vw, -218vh, 0);
  }
}
@keyframes move-frames-44 {
  from {
    transform: translate3d(46vw, 177vh, 0);
  }
  to {
    transform: translate3d(222vw, -218vh, 0);
  }
}
.main-box-circle-container:nth-child(44) .main-box-circle-particle {
  -webkit-animation-delay: 152ms;
          animation-delay: 152ms;
}
.main-box-circle-container:nth-child(45) {
  width: 13px;
  height: 13px;
  -webkit-animation-name: move-frames-45;
          animation-name: move-frames-45;
  -webkit-animation-duration: 63929ms;
          animation-duration: 63929ms;
  -webkit-animation-delay: 23613ms;
          animation-delay: 23613ms;
}
@-webkit-keyframes move-frames-45 {
  from {
    transform: translate3d(47vw, 164vh, 0);
  }
  to {
    transform: translate3d(102vw, -277vh, 0);
  }
}
@keyframes move-frames-45 {
  from {
    transform: translate3d(47vw, 164vh, 0);
  }
  to {
    transform: translate3d(102vw, -277vh, 0);
  }
}
.main-box-circle-container:nth-child(45) .main-box-circle-particle {
  -webkit-animation-delay: 156ms;
          animation-delay: 156ms;
}
.main-box-circle-container:nth-child(46) {
  width: 97px;
  height: 97px;
  -webkit-animation-name: move-frames-46;
          animation-name: move-frames-46;
  -webkit-animation-duration: 64596ms;
          animation-duration: 64596ms;
  -webkit-animation-delay: 30682ms;
          animation-delay: 30682ms;
}
@-webkit-keyframes move-frames-46 {
  from {
    transform: translate3d(6vw, 142vh, 0);
  }
  to {
    transform: translate3d(24vw, -208vh, 0);
  }
}
@keyframes move-frames-46 {
  from {
    transform: translate3d(6vw, 142vh, 0);
  }
  to {
    transform: translate3d(24vw, -208vh, 0);
  }
}
.main-box-circle-container:nth-child(46) .main-box-circle-particle {
  -webkit-animation-delay: 7213ms;
          animation-delay: 7213ms;
}
.main-box-circle-container:nth-child(47) {
  width: 51px;
  height: 51px;
  -webkit-animation-name: move-frames-47;
          animation-name: move-frames-47;
  -webkit-animation-duration: 67823ms;
          animation-duration: 67823ms;
  -webkit-animation-delay: 2596ms;
          animation-delay: 2596ms;
}
@-webkit-keyframes move-frames-47 {
  from {
    transform: translate3d(32vw, 122vh, 0);
  }
  to {
    transform: translate3d(161vw, -228vh, 0);
  }
}
@keyframes move-frames-47 {
  from {
    transform: translate3d(32vw, 122vh, 0);
  }
  to {
    transform: translate3d(161vw, -228vh, 0);
  }
}
.main-box-circle-container:nth-child(47) .main-box-circle-particle {
  -webkit-animation-delay: 6300ms;
          animation-delay: 6300ms;
}
.main-box-circle-container:nth-child(48) {
  width: 54px;
  height: 54px;
  -webkit-animation-name: move-frames-48;
          animation-name: move-frames-48;
  -webkit-animation-duration: 62475ms;
          animation-duration: 62475ms;
  -webkit-animation-delay: 18116ms;
          animation-delay: 18116ms;
}
@-webkit-keyframes move-frames-48 {
  from {
    transform: translate3d(24vw, 244vh, 0);
  }
  to {
    transform: translate3d(203vw, -310vh, 0);
  }
}
@keyframes move-frames-48 {
  from {
    transform: translate3d(24vw, 244vh, 0);
  }
  to {
    transform: translate3d(203vw, -310vh, 0);
  }
}
.main-box-circle-container:nth-child(48) .main-box-circle-particle {
  -webkit-animation-delay: 5314ms;
          animation-delay: 5314ms;
}
.main-box-circle-container:nth-child(49) {
  width: 27px;
  height: 27px;
  -webkit-animation-name: move-frames-49;
          animation-name: move-frames-49;
  -webkit-animation-duration: 64110ms;
          animation-duration: 64110ms;
  -webkit-animation-delay: 20246ms;
          animation-delay: 20246ms;
}
@-webkit-keyframes move-frames-49 {
  from {
    transform: translate3d(33vw, 161vh, 0);
  }
  to {
    transform: translate3d(177vw, -281vh, 0);
  }
}
@keyframes move-frames-49 {
  from {
    transform: translate3d(33vw, 161vh, 0);
  }
  to {
    transform: translate3d(177vw, -281vh, 0);
  }
}
.main-box-circle-container:nth-child(49) .main-box-circle-particle {
  -webkit-animation-delay: 7255ms;
          animation-delay: 7255ms;
}
.main-box-circle-container:nth-child(50) {
  width: 39px;
  height: 39px;
  -webkit-animation-name: move-frames-50;
          animation-name: move-frames-50;
  -webkit-animation-duration: 60990ms;
          animation-duration: 60990ms;
  -webkit-animation-delay: 2985ms;
          animation-delay: 2985ms;
}
@-webkit-keyframes move-frames-50 {
  from {
    transform: translate3d(10vw, 169vh, 0);
  }
  to {
    transform: translate3d(26vw, -244vh, 0);
  }
}
@keyframes move-frames-50 {
  from {
    transform: translate3d(10vw, 169vh, 0);
  }
  to {
    transform: translate3d(26vw, -244vh, 0);
  }
}
.main-box-circle-container:nth-child(50) .main-box-circle-particle {
  -webkit-animation-delay: 7622ms;
          animation-delay: 7622ms;
}
.main-box-circle-container:nth-child(51) {
  width: 109px;
  height: 109px;
  -webkit-animation-name: move-frames-51;
          animation-name: move-frames-51;
  -webkit-animation-duration: 62371ms;
          animation-duration: 62371ms;
  -webkit-animation-delay: 26782ms;
          animation-delay: 26782ms;
}
@-webkit-keyframes move-frames-51 {
  from {
    transform: translate3d(48vw, 207vh, 0);
  }
  to {
    transform: translate3d(250vw, -343vh, 0);
  }
}
@keyframes move-frames-51 {
  from {
    transform: translate3d(48vw, 207vh, 0);
  }
  to {
    transform: translate3d(250vw, -343vh, 0);
  }
}
.main-box-circle-container:nth-child(51) .main-box-circle-particle {
  -webkit-animation-delay: 5669ms;
          animation-delay: 5669ms;
}
.main-box-circle-container:nth-child(52) {
  width: 30px;
  height: 30px;
  -webkit-animation-name: move-frames-52;
          animation-name: move-frames-52;
  -webkit-animation-duration: 66194ms;
          animation-duration: 66194ms;
  -webkit-animation-delay: 12677ms;
          animation-delay: 12677ms;
}
@-webkit-keyframes move-frames-52 {
  from {
    transform: translate3d(33vw, 217vh, 0);
  }
  to {
    transform: translate3d(134vw, -308vh, 0);
  }
}
@keyframes move-frames-52 {
  from {
    transform: translate3d(33vw, 217vh, 0);
  }
  to {
    transform: translate3d(134vw, -308vh, 0);
  }
}
.main-box-circle-container:nth-child(52) .main-box-circle-particle {
  -webkit-animation-delay: 4935ms;
          animation-delay: 4935ms;
}
.main-box-circle-container:nth-child(53) {
  width: 11px;
  height: 11px;
  -webkit-animation-name: move-frames-53;
          animation-name: move-frames-53;
  -webkit-animation-duration: 65072ms;
          animation-duration: 65072ms;
  -webkit-animation-delay: 23778ms;
          animation-delay: 23778ms;
}
@-webkit-keyframes move-frames-53 {
  from {
    transform: translate3d(23vw, 127vh, 0);
  }
  to {
    transform: translate3d(97vw, -193vh, 0);
  }
}
@keyframes move-frames-53 {
  from {
    transform: translate3d(23vw, 127vh, 0);
  }
  to {
    transform: translate3d(97vw, -193vh, 0);
  }
}
.main-box-circle-container:nth-child(53) .main-box-circle-particle {
  -webkit-animation-delay: 5029ms;
          animation-delay: 5029ms;
}
.main-box-circle-container:nth-child(54) {
  width: 85px;
  height: 85px;
  -webkit-animation-name: move-frames-54;
          animation-name: move-frames-54;
  -webkit-animation-duration: 64448ms;
          animation-duration: 64448ms;
  -webkit-animation-delay: 19830ms;
          animation-delay: 19830ms;
}
@-webkit-keyframes move-frames-54 {
  from {
    transform: translate3d(36vw, 125vh, 0);
  }
  to {
    transform: translate3d(164vw, -187vh, 0);
  }
}
@keyframes move-frames-54 {
  from {
    transform: translate3d(36vw, 125vh, 0);
  }
  to {
    transform: translate3d(164vw, -187vh, 0);
  }
}
.main-box-circle-container:nth-child(54) .main-box-circle-particle {
  -webkit-animation-delay: 2726ms;
          animation-delay: 2726ms;
}
.main-box-circle-container:nth-child(55) {
  width: 128px;
  height: 128px;
  -webkit-animation-name: move-frames-55;
          animation-name: move-frames-55;
  -webkit-animation-duration: 62189ms;
          animation-duration: 62189ms;
  -webkit-animation-delay: 4737ms;
          animation-delay: 4737ms;
}
@-webkit-keyframes move-frames-55 {
  from {
    transform: translate3d(15vw, 115vh, 0);
  }
  to {
    transform: translate3d(206vw, -140vh, 0);
  }
}
@keyframes move-frames-55 {
  from {
    transform: translate3d(15vw, 115vh, 0);
  }
  to {
    transform: translate3d(206vw, -140vh, 0);
  }
}
.main-box-circle-container:nth-child(55) .main-box-circle-particle {
  -webkit-animation-delay: 7940ms;
          animation-delay: 7940ms;
}
.main-box-circle-container:nth-child(56) {
  width: 14px;
  height: 14px;
  -webkit-animation-name: move-frames-56;
          animation-name: move-frames-56;
  -webkit-animation-duration: 68474ms;
          animation-duration: 68474ms;
  -webkit-animation-delay: 10106ms;
          animation-delay: 10106ms;
}
@-webkit-keyframes move-frames-56 {
  from {
    transform: translate3d(44vw, 221vh, 0);
  }
  to {
    transform: translate3d(165vw, -302vh, 0);
  }
}
@keyframes move-frames-56 {
  from {
    transform: translate3d(44vw, 221vh, 0);
  }
  to {
    transform: translate3d(165vw, -302vh, 0);
  }
}
.main-box-circle-container:nth-child(56) .main-box-circle-particle {
  -webkit-animation-delay: 3561ms;
          animation-delay: 3561ms;
}
.main-box-circle-container:nth-child(57) {
  width: 89px;
  height: 89px;
  -webkit-animation-name: move-frames-57;
          animation-name: move-frames-57;
  -webkit-animation-duration: 65916ms;
          animation-duration: 65916ms;
  -webkit-animation-delay: 33301ms;
          animation-delay: 33301ms;
}
@-webkit-keyframes move-frames-57 {
  from {
    transform: translate3d(7vw, 149vh, 0);
  }
  to {
    transform: translate3d(37vw, -237vh, 0);
  }
}
@keyframes move-frames-57 {
  from {
    transform: translate3d(7vw, 149vh, 0);
  }
  to {
    transform: translate3d(37vw, -237vh, 0);
  }
}
.main-box-circle-container:nth-child(57) .main-box-circle-particle {
  -webkit-animation-delay: 3681ms;
          animation-delay: 3681ms;
}
.main-box-circle-container:nth-child(58) {
  width: 139px;
  height: 139px;
  -webkit-animation-name: move-frames-58;
          animation-name: move-frames-58;
  -webkit-animation-duration: 61448ms;
          animation-duration: 61448ms;
  -webkit-animation-delay: 1375ms;
          animation-delay: 1375ms;
}
@-webkit-keyframes move-frames-58 {
  from {
    transform: translate3d(9vw, 124vh, 0);
  }
  to {
    transform: translate3d(250vw, -197vh, 0);
  }
}
@keyframes move-frames-58 {
  from {
    transform: translate3d(9vw, 124vh, 0);
  }
  to {
    transform: translate3d(250vw, -197vh, 0);
  }
}
.main-box-circle-container:nth-child(58) .main-box-circle-particle {
  -webkit-animation-delay: 7358ms;
          animation-delay: 7358ms;
}
.main-box-circle-container:nth-child(59) {
  width: 18px;
  height: 18px;
  -webkit-animation-name: move-frames-59;
          animation-name: move-frames-59;
  -webkit-animation-duration: 62136ms;
          animation-duration: 62136ms;
  -webkit-animation-delay: 6648ms;
          animation-delay: 6648ms;
}
@-webkit-keyframes move-frames-59 {
  from {
    transform: translate3d(12vw, 218vh, 0);
  }
  to {
    transform: translate3d(195vw, -266vh, 0);
  }
}
@keyframes move-frames-59 {
  from {
    transform: translate3d(12vw, 218vh, 0);
  }
  to {
    transform: translate3d(195vw, -266vh, 0);
  }
}
.main-box-circle-container:nth-child(59) .main-box-circle-particle {
  -webkit-animation-delay: 7891ms;
          animation-delay: 7891ms;
}
.main-box-circle-container:nth-child(60) {
  width: 143px;
  height: 143px;
  -webkit-animation-name: move-frames-60;
          animation-name: move-frames-60;
  -webkit-animation-duration: 62312ms;
          animation-duration: 62312ms;
  -webkit-animation-delay: 15558ms;
          animation-delay: 15558ms;
}
@-webkit-keyframes move-frames-60 {
  from {
    transform: translate3d(50vw, 127vh, 0);
  }
  to {
    transform: translate3d(229vw, -136vh, 0);
  }
}
@keyframes move-frames-60 {
  from {
    transform: translate3d(50vw, 127vh, 0);
  }
  to {
    transform: translate3d(229vw, -136vh, 0);
  }
}
.main-box-circle-container:nth-child(60) .main-box-circle-particle {
  -webkit-animation-delay: 4266ms;
          animation-delay: 4266ms;
}


/*

https://codepen.io/hf666/pen/WVrpWe?editors=1100


HTML Pug
------------------------------------------

.main-box-particle
    .main-box-particle-background
    - for (i = 1; i <= 60; i++)
      .main-box-circle-container
        .main-box-circle-particle

------------------------------------------

HTML SCSS
------------------------------------------


* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  background-color: #021027;
}

.main-box-particle {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  filter: blur(3px);
}

.main-box-particle-background {
  display: block;
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;
  background: rgb(209,226,246);
  background: linear-gradient(30deg, rgba(209,226,246,1) 0%, rgba(191,215,246,1) 8%, rgba(175,205,244,1) 19%, rgba(183,211,244,1) 26%, rgba(227,239,255,1) 45%, rgba(225,239,255,1) 64%, rgba(189,210,236,1) 80%, rgba(179,202,231,1) 87%, rgba(195,213,233,1) 95%, rgba(183,213,249,1) 100%);
  
  
  
}

.main-box-circle-container {
  $particleNum: 60;
  $particleColor: hsl(0, 100%, 100%);

  position: absolute;
  transform: translateY(-100vh);
  animation-iteration-count: infinite;
  animation-timing-function: linear;

  .main-box-circle-particle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    mix-blend-mode: screen;
    
    background-image: radial-gradient(
      hsl(0, 100%, 100%),
      hsl(0, 100%, 100%) 10%,
      hsla(0, 100%, 100%, 0) 56%
    );

    animation: fadein-frames 200ms infinite, scale-frames 2s infinite;

    @keyframes fade-frames {
      0% {
        opacity: 1;
      }

      50% {
        opacity: 0.7;
      }

      100% {
        opacity: 1;
      }
    }

    @keyframes scale-frames {
      0% {
        transform: scale3d(0.8, 0.8, 1);
      }

      50% {
        transform: scale3d(2.2, 2.2, 1);
      }

      100% {
        transform: scale3d(0.8, 0.8, 1);
      }
    }
  }

  $particleBaseSize: 150;

  @for $i from 1 through $particleNum {
    &:nth-child(#{$i}) {
      $circleSize: random($particleBaseSize);
      width: $circleSize + px;
      height: $circleSize + px;

      $startPositionY: random(150) + 100;
      $framesName: "move-frames-" + $i;
      $moveDuration: 60000 + random(9000) + ms;

      animation-name: #{$framesName};
      animation-duration: $moveDuration;
      animation-delay: random(37000) + ms;

      @keyframes #{$framesName} {
        from {
          transform: translate3d(
            #{random(50) + vw},
            #{$startPositionY + vh},
            0
          );
        }

        to {
          transform: translate3d(
            #{random(250) + vw},
            #{- $startPositionY - random(150) + vh},
            0
          );
        }
      }

      .main-box-circle-particle {
        animation-delay: random(8000) + ms;
      }
    }
  }
}

------------------------------------------

*/