Bubble • Layout

Memasang Kode Bubble • Layout
Login ke akun blog klik tombol blog baru, buat satubuah link baru   
kemudian beri nama sesuai fungsi,  klik Edit HTML pada link baru tersebut, 
hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut :  Get Blank Template.   edit background warna sesuai keinginan klik simpan selesai.

Kemudian klik entri halaman baru HTML pada link tersebut.
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style class="M-2010-styles"> 
body {);color:#28143f;height:100%;overflow:hidden;}
body {
  background: #28143f;
  font-size: 16px;
  margin: 0;
  padding: 0;
  user-select: none;
  overflow: hidden;
  font-family: Open Sans, sans-serif;
  min-width: 768px;
}
.curtain {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #28143f;
  z-index: 30;
  opacity: 1;
  transition: all 0.8s ease-out;
}
.curtain__progress {
  height: 0.0625rem;
  width: 9.375rem;
  border-radius: 0.25rem;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -4.6875rem;
  margin-top: -0.0625rem;
  transition: width 0.3s ease-out;
}
.curtain__progress-text,
.curtain__progress-text-gradient {
  position: absolute;
  color: #fff;
  font-size: 0.625rem;
  font-weight: 100;
  letter-spacing: 0.0875rem;
  position: absolute;
  margin-left: -4.6875rem;
  margin-top: -1.25rem;
  top: 50%;
  left: 50%;
}
.curtain__progress-text-gradient {
  width: 14.0625rem;
  height: 1rem;
  z-index: 1;
  transition: transform 0.3s ease-out;
  background: linear-gradient(to right, rgba(40,18,64,0) 20%, #281240 50%);
}
.curtain.is-hide {
  opacity: 0;
  z-index: 0;
}
.badge {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  color: #fff;
}
.wrapper {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}
.particles {
  perspective: 500px;
  perspective-origin: 50% 50%;
  overflow: visible;
  position: relative;
  user-select: none;
  position: absolute;
  z-index: 1;
  tap-highlight-color: rgba(0,0,0,0);
  transform: translateZ(0);
  user-select: none;
  text-size-adjust: none;
}
.particle {
  width: 9.375rem;
  height: 9.375rem;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  display: block;
  line-height: 9.375rem;
}
.particle.is-open {
  z-index: 20;
}
.particle.is-open .particle__inner {
  transform: scale(15) translateZ(-1000px);
}
.particle.is-open .particle__content {
  display: block;
}
.particle__inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateZ(0);
}
.particle__over-mobile {
  display: none;
}
.desktop .particle__over-mobile {
  display: block;
}
.content {
  position: fixed;
  width: 33.75rem;
  height: 17.5rem;
  display: block;
  margin-left: -16.875rem;
  margin-top: -8.75rem;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translateX(-5000px);
}
.content__inner {
  position: absolute;
  width: 100%;
  height: 100%;
}
.content.is-show {
  display: block;
}
.project {
  color: #fff;
  position: relative;
  width: 100%;
  height: 100%;
}
.project__text,
.project__img {
  position: absolute;
  width: 50%;
  height: 100%;
}
.project__text {
  left: 57%;
  margin-top: 1.875rem;
  width: 40%;
  text-align: left;
  line-height: 1.6;
}
.project h2 {
  text-transform: uppercase;
}
.project__shadow-wrap {
  transform-origin: 100% center;
}
.project__shadow {
  position: absolute;
  width: 300px;
  height: 50px;
  opacity: 0;
  top: 204px;
  right: 8px;
  transform: rotateX(80deg);
  border-radius: 26px;
  background: linear-gradient(to right, rgba(58,8,57,0) 0%, rgba(58,8,57,0.65) 100%);
  transform-origin: 100% center;
}
.ie .project__shadow {
  display: none;
}
.by {
  background: #fff;
  position: absolute;
  bottom: 0;
  right: 0;
  height: 1.75rem;
  width: 6.875rem;
  z-index: 40;
  opacity: 0.75;
  border-top-left-radius: 0.75rem;
}
.by:hover {
  opacity: 1;
}
.by__text {
  color: #28143f;
  font-size: 0.53125rem;
  letter-spacing: 0.0125rem;
  position: absolute;
  top: 0.5625rem;
}
.ios .by__text {
  top: 0.5rem;
}
.by__text--1 {
  left: 0.4375rem;
}
.by__text--2 {
  left: 4.375rem;
}
.by__logo {
  background: #f1f1f1;
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: url("") no-repeat center;
center
  background-size: 100% 100%;
  top: 0.4375rem;
}
.ios .by__logo {
  top: 0.375rem;
}
.by__logo--mojs {
  left: 3.0625rem;
  background-image: url("http://myscript2010.hexat.com/kliplove.gif");
}
.by__logo--M-2010 {
  left: 5.3125rem;
  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMyaIudqq_5e8xgDOhAhG5z5mafmwqJuWTdbm_03LQR4xXo4ucNQwqdNTbTY7hVDuUMAN_hzaFpRLXaK5keuqAEG4wW0CoGcizbsbiJkaKFTQuCIeLTMR_59syoxfA7JtpVFNI1k2C9hg/s1600/logo-mys2010s.png");
}

.sprite__frame {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  transform: translateZ(0);
  width: 100%;
  height: 100%;
}
.sprite__ellipse {
  fill: none;
  stroke: #fff;
}
.dust {
  position: absolute;
  width: 12.5rem;
  height: 12.5rem;
  height: 3.125rem;
}
.dust--1 {
  top: 16.875rem;
  left: 6.25rem;
}
.dust--2,
.dust--3 {
  top: 14.1875rem;
}
.dust--2 {
  left: -2.5rem;
  opacity: 0.9;
}
.dust--3 {
  left: -4.375rem;
  opacity: 0.7;
}
.blob-circle {
  position: absolute;
  top: -50%;
  left: -50%;
  z-index: 1;
  margin-left: -3.125rem;
  margin-top: -3.125rem;
  width: 6.25rem;
  height: 6.25rem;
}
.blob-circle-wrap {
  width: 0px;
  height: 0px;
  overflow: hidden;
}
.close {
  position: fixed;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  top: 20%;
  left: -10%;
  z-index: -1;
  transition: opacity 0.25s ease-out;
  display: none;
}
.close:hover {
  cursor: pointer;
}
.close.is-show {
  display: block;
  opacity: 1;
  left: 75%;
  z-index: 10;
}
.image-ie {
  width: 16rem;
  height: 12rem;
  background: url("i/mojs-logo.png") no-repeat center center;
  background-size: 100% 100%;
  position: absolute;
  top: 2.8125rem;
  left: 0.5rem;
  border-radius: 0.9375rem;
  display: none;
}
.ie .image-ie {
  display: block;
}
.image {
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent;
  font-size: 100%;
}
.ie .image {
  display: none;
}
.scene,
.shape,
.face,
.face-wrapper,
.cr {
  position: absolute;
  transform-style: preserve-3d;
}
.shape {
  opacity: 0;
}
.scene {
  width: 80em;
  height: 80em;
  top: 50%;
  left: 50%;
  margin: -40em 0 0 -40em;
  transform: rotateX(90deg);
}
.cub-1 .ft .photon-shader,
.cub-1 .bk .photon-shader,
.cub-1 .bm .photon-shader {
  background-color: #fff;
}
.cub-1 .ft .photon-shader,
.cub-1 .bk .photon-shader,
.cub-1 .rt .photon-shader,
.cub-1 .lt .photon-shader {
  background-color: #ccc;
}
.cub-1 .bm .photon-shader {
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsM8PuoWFJ-yH7-5iBA6-BeSEoa4D1Upbu1T1Z_GxhOUIQKQR7UOZMnynxKn5DL8NASLtd5DP-C8C-kL3h7kqnqrVJr1Y2IQayoUlEh4PxL5Jf3Av_FCpP-Cj_oz24pibUwdQes59z-eQ/s1600/logo-mys2010s.png") no-repeat center center;
  background-size: 100% 100%;
}
.cub-1 .cr .photon-shader {
  background-color: #ccc;
}
.shape {
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-origin: 50%;
}
.face,
.face-wrapper {
  overflow: hidden;
  transform-origin: 0 0;
  backface-visibility: hidden;
/* hidden by default, prevent blinking and other weird rendering glitchs */
}
.face {
  background-size: 100% 100% !important;
  background-position: center;
}
.face-wrapper .face {
  left: 100%;
  width: 100%;
  height: 100%;
}
.photon-shader {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.side {
  left: 50%;
}
.cr,
.cr .side {
  height: 100%;
}
[class*="cuboid"] .ft,
[class*="cuboid"] .bk {
  width: 100%;
  height: 100%;
}
[class*="cuboid"] .bk {
  left: 100%;
}
[class*="cuboid"] .rt {
  transform: rotateY(-90deg) translateX(-50%);
}
[class*="cuboid"] .lt {
  transform: rotateY(90deg) translateX(-50%);
}
[class*="cuboid"] .tp {
  transform: rotateX(90deg) translateY(-50%);
}
[class*="cuboid"] .bm {
  transform: rotateX(-90deg) translateY(-50%);
}
[class*="cuboid"] .lt {
  left: 100%;
}
[class*="cuboid"] .bm {
  top: 100%;
}
/* .cub-1 styles */
.cub-1 {
  transform: translate3D(0em, 0em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  width: 16em;
  height: 1em;
  margin: -0.5em 0 0 -8em;
}
.cub-1 .ft {
  transform: translateZ(6em);
}
.cub-1 .bk {
  transform: translateZ(-6em) rotateY(180deg);
}
.cub-1 .rt,
.cub-1 .lt {
  width: 12em;
  height: 1em;
}
.cub-1 .tp,
.cub-1 .bm {
  width: 16em;
  height: 12em;
}
.cub-1 .face {
  background-color: #fff;
}
.cub-1 .ft {
  width: 14em;
  margin-left: 1em;
}
.cub-1 .bk {
  width: 14em;
  margin-left: -1em;
}
.cub-1 .rt,
.cub-1 .lt {
  width: 10em;
}
.cub-1 .tp,
.cub-1 .bm,
.cub-1 .tp .photon-shader,
.cub-1 .bm .photon-shader {
  border-radius: 1em;
}
.cub-1 .cr {
  width: 1em;
  left: 0.5em;
}
.cub-1 .cr-0 {
  transform: translate3D(14em, 0, 5em);
}
.cub-1 .cr-1 {
  transform: translate3D(14em, 0, -5em);
}
.cub-1 .cr-2 {
  transform: translate3D(0, 0, -5em);
}
.cub-1 .cr-3 {
  transform: translate3D(0, 0, 5em);
}
.cub-1 .cr-0 .s0 {
  transform: rotateY(15deg) translate3D(-50%, 0, 0.975em);
}
.cub-1 .cr-0 .s1 {
  transform: rotateY(45deg) translate3D(-50%, 0, 0.975em);
}
.cub-1 .cr-0 .s2 {
  transform: rotateY(75deg) translate3D(-50%, 0, 0.975em);
}
.cub-1 .cr-1 .s0 {
  transform: rotateY(105deg) translate3D(-50%, 0, 0.975em);
}
.cub-1 .cr-1 .s1 {
  transform: rotateY(135deg) translate3D(-50%, 0, 0.975em);
}
.cub-1 .cr-1 .s2 {
  transform: rotateY(165deg) translate3D(-50%, 0, 0.975em);
}
.cub-1 .cr-2 .s0 {
  transform: rotateY(195deg) translate3D(-50%, 0, 0.975em);
}
.cub-1 .cr-2 .s1 {
  transform: rotateY(225deg) translate3D(-50%, 0, 0.975em);
}
.cub-1 .cr-2 .s2 {
  transform: rotateY(255deg) translate3D(-50%, 0, 0.975em);
}
.cub-1 .cr-3 .s0 {
  transform: rotateY(285deg) translate3D(-50%, 0, 0.975em);
}
.cub-1 .cr-3 .s1 {
  transform: rotateY(315deg) translate3D(-50%, 0, 0.975em);
}
.cub-1 .cr-3 .s2 {
  transform: rotateY(345deg) translate3D(-50%, 0, 0.975em);
}
.cub-1 .side {
  width: 0.560898384862245em;
}
    .particles {
      width:  1675px;
      height: 1200px;
      margin-left: -175px;
      margin-top: -175px;
    }
    .desktop .particles {
      width:  3865px;
      height: 2875px;
    }
</style>

<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=768px, user-scalable=no"/>
</head>
<body>
<div class="by">
<div class="by__text by__text--1">
Edited &nbsp; :</div>
<div class="by__text by__text--2">
to</div>
<a href="http://sample-mys2010.blogspot.co.id" title="M-2010" class="by__logo by__logo--mojs"></a><a href="http://myscript2010s.blogspot.co.id" title="M-2010" class="by__logo by__logo--M-2010"></a>
</div>
<div id="js-curtain" class="curtain">
<div class="curtain__progress-text">
loading..</div>
<div id="js-progress-gradient" class="curtain__progress-text-gradient">
</div>
<div id="js-progress" class="curtain__progress">
</div>
</div>
<div id="js-close-btn" class="close">
<div id="js-close-btn-inner" class="close__inner">
</div>
</div>
<div id="js-content" class="content">
<div id="js-dust-1" class="dust dust--1 sprite">
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="0" ry="0" stroke-width="10" stroke-dasharray="0" stroke-dashoffset="0" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="1.6" ry="0.2" stroke-width="9.8" stroke-dasharray="3.4" stroke-dashoffset="6.8" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="3.2" ry="0.4" stroke-width="9.6" stroke-dasharray="6.8" stroke-dashoffset="13.6" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="4.800000000000001" ry="0.6000000000000001" stroke-width="9.4" stroke-dasharray="10.2" stroke-dashoffset="20.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="6.4" ry="0.8" stroke-width="9.2" stroke-dasharray="13.6" stroke-dashoffset="27.2" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="8" ry="1" stroke-width="9" stroke-dasharray="17" stroke-dashoffset="34" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="9.600000000000001" ry="1.2000000000000002" stroke-width="8.8" stroke-dasharray="20.4" stroke-dashoffset="40.8" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="11.200000000000001" ry="1.4000000000000001" stroke-width="8.6" stroke-dasharray="23.8" stroke-dashoffset="47.6" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="12.8" ry="1.6" stroke-width="8.4" stroke-dasharray="27.2" stroke-dashoffset="54.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="14.4" ry="1.8" stroke-width="8.2" stroke-dasharray="30.599999999999998" stroke-dashoffset="61.199999999999996" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="16" ry="2" stroke-width="8" stroke-dasharray="34" stroke-dashoffset="68" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="17.6" ry="2.2" stroke-width="7.8" stroke-dasharray="37.4" stroke-dashoffset="74.8" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="19.200000000000003" ry="2.4000000000000004" stroke-width="7.6" stroke-dasharray="40.8" stroke-dashoffset="81.6" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="20.8" ry="2.6" stroke-width="7.4" stroke-dasharray="44.199999999999996" stroke-dashoffset="88.39999999999999" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="22.400000000000002" ry="2.8000000000000003" stroke-width="7.199999999999999" stroke-dasharray="47.6" stroke-dashoffset="95.2" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="24" ry="3" stroke-width="7" stroke-dasharray="51" stroke-dashoffset="102" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="25.6" ry="3.2" stroke-width="6.8" stroke-dasharray="54.4" stroke-dashoffset="108.8" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="27.200000000000003" ry="3.4000000000000004" stroke-width="6.6" stroke-dasharray="57.8" stroke-dashoffset="115.6" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="28.8" ry="3.6" stroke-width="6.4" stroke-dasharray="61.199999999999996" stroke-dashoffset="122.39999999999999" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="30.400000000000002" ry="3.8000000000000003" stroke-width="6.199999999999999" stroke-dasharray="64.6" stroke-dashoffset="129.2" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="32" ry="4" stroke-width="6" stroke-dasharray="68" stroke-dashoffset="136" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="33.6" ry="4.2" stroke-width="5.8" stroke-dasharray="71.39999999999999" stroke-dashoffset="142.79999999999998" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="35.2" ry="4.4" stroke-width="5.6" stroke-dasharray="74.8" stroke-dashoffset="149.6" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="36.800000000000004" ry="4.6000000000000005" stroke-width="5.3999999999999995" stroke-dasharray="78.2" stroke-dashoffset="156.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="38.400000000000006" ry="4.800000000000001" stroke-width="5.199999999999999" stroke-dasharray="81.6" stroke-dashoffset="163.2" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="40" ry="5" stroke-width="5" stroke-dasharray="85" stroke-dashoffset="170" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="41.6" ry="5.2" stroke-width="4.8" stroke-dasharray="88.39999999999999" stroke-dashoffset="176.79999999999998" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="43.2" ry="5.4" stroke-width="4.6" stroke-dasharray="91.8" stroke-dashoffset="183.6" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="44.800000000000004" ry="5.6000000000000005" stroke-width="4.3999999999999995" stroke-dasharray="95.2" stroke-dashoffset="190.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="46.400000000000006" ry="5.800000000000001" stroke-width="4.199999999999999" stroke-dasharray="98.6" stroke-dashoffset="197.2" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="48" ry="6" stroke-width="4" stroke-dasharray="102" stroke-dashoffset="204" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="49.6" ry="6.2" stroke-width="3.8" stroke-dasharray="105.39999999999999" stroke-dashoffset="210.79999999999998" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="51.2" ry="6.4" stroke-width="3.5999999999999996" stroke-dasharray="108.8" stroke-dashoffset="217.6" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="52.800000000000004" ry="6.6000000000000005" stroke-width="3.3999999999999995" stroke-dasharray="112.2" stroke-dashoffset="224.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="54.400000000000006" ry="6.800000000000001" stroke-width="3.1999999999999993" stroke-dasharray="115.6" stroke-dashoffset="231.2" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="56" ry="7" stroke-width="3" stroke-dasharray="119" stroke-dashoffset="238" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="57.6" ry="7.2" stroke-width="2.8" stroke-dasharray="122.39999999999999" stroke-dashoffset="244.79999999999998" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="59.2" ry="7.4" stroke-width="2.5999999999999996" stroke-dasharray="125.8" stroke-dashoffset="251.6" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="60.800000000000004" ry="7.6000000000000005" stroke-width="2.3999999999999995" stroke-dasharray="129.2" stroke-dashoffset="258.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="62.400000000000006" ry="7.800000000000001" stroke-width="2.1999999999999993" stroke-dasharray="132.6" stroke-dashoffset="265.2" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="64" ry="8" stroke-width="2" stroke-dasharray="136" stroke-dashoffset="272" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="65.60000000000001" ry="8.200000000000001" stroke-width="1.799999999999999" stroke-dasharray="139.4" stroke-dashoffset="278.8" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="67.2" ry="8.4" stroke-width="1.5999999999999996" stroke-dasharray="142.79999999999998" stroke-dashoffset="285.59999999999997" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="68.8" ry="8.6" stroke-width="1.4000000000000004" stroke-dasharray="146.2" stroke-dashoffset="292.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="70.4" ry="8.8" stroke-width="1.1999999999999993" stroke-dasharray="149.6" stroke-dashoffset="299.2" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="72" ry="9" stroke-width="1" stroke-dasharray="153" stroke-dashoffset="306" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="73.60000000000001" ry="9.200000000000001" stroke-width="0.7999999999999989" stroke-dasharray="156.4" stroke-dashoffset="312.8" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="75.2" ry="9.4" stroke-width="0.5999999999999996" stroke-dasharray="159.79999999999998" stroke-dashoffset="319.59999999999997" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="76.80000000000001" ry="9.600000000000001" stroke-width="0.3999999999999986" stroke-dasharray="163.2" stroke-dashoffset="326.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="78.4" ry="9.8" stroke-width="0.1999999999999993" stroke-dasharray="166.6" stroke-dashoffset="333.2" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
</div>
<div id="js-dust-2" class="dust dust--2 sprite">
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="0" ry="0" stroke-width="8" stroke-dasharray="0" stroke-dashoffset="0" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="1" ry="0.16" stroke-width="7.84" stroke-dasharray="3.6" stroke-dashoffset="1.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="2" ry="0.32" stroke-width="7.68" stroke-dasharray="7.2" stroke-dashoffset="2.8" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="3" ry="0.48" stroke-width="7.52" stroke-dasharray="10.8" stroke-dashoffset="4.199999999999999" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="4" ry="0.64" stroke-width="7.36" stroke-dasharray="14.4" stroke-dashoffset="5.6" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="5" ry="0.8" stroke-width="7.2" stroke-dasharray="18" stroke-dashoffset="7" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="6" ry="0.96" stroke-width="7.04" stroke-dasharray="21.6" stroke-dashoffset="8.399999999999999" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="7" ry="1.12" stroke-width="6.88" stroke-dasharray="25.2" stroke-dashoffset="9.799999999999999" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="8" ry="1.28" stroke-width="6.72" stroke-dasharray="28.8" stroke-dashoffset="11.2" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="9" ry="1.44" stroke-width="6.5600000000000005" stroke-dasharray="32.4" stroke-dashoffset="12.6" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="10" ry="1.6" stroke-width="6.4" stroke-dasharray="36" stroke-dashoffset="14" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="11" ry="1.76" stroke-width="6.24" stroke-dasharray="39.6" stroke-dashoffset="15.399999999999999" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="12" ry="1.92" stroke-width="6.08" stroke-dasharray="43.2" stroke-dashoffset="16.799999999999997" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="13" ry="2.08" stroke-width="5.92" stroke-dasharray="46.800000000000004" stroke-dashoffset="18.2" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="14" ry="2.24" stroke-width="5.76" stroke-dasharray="50.4" stroke-dashoffset="19.599999999999998" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="15" ry="2.4" stroke-width="5.6" stroke-dasharray="54" stroke-dashoffset="21" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="16" ry="2.56" stroke-width="5.4399999999999995" stroke-dasharray="57.6" stroke-dashoffset="22.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="17" ry="2.72" stroke-width="5.279999999999999" stroke-dasharray="61.2" stroke-dashoffset="23.799999999999997" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="18" ry="2.88" stroke-width="5.12" stroke-dasharray="64.8" stroke-dashoffset="25.2" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="19" ry="3.04" stroke-width="4.96" stroke-dasharray="68.4" stroke-dashoffset="26.599999999999998" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="20" ry="3.2" stroke-width="4.8" stroke-dasharray="72" stroke-dashoffset="28" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="21" ry="3.36" stroke-width="4.640000000000001" stroke-dasharray="75.60000000000001" stroke-dashoffset="29.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="22" ry="3.52" stroke-width="4.48" stroke-dasharray="79.2" stroke-dashoffset="30.799999999999997" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="23" ry="3.68" stroke-width="4.32" stroke-dasharray="82.8" stroke-dashoffset="32.199999999999996" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="24" ry="3.84" stroke-width="4.16" stroke-dasharray="86.4" stroke-dashoffset="33.599999999999994" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="25" ry="4" stroke-width="4" stroke-dasharray="90" stroke-dashoffset="35" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="26" ry="4.16" stroke-width="3.84" stroke-dasharray="93.60000000000001" stroke-dashoffset="36.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="27" ry="4.32" stroke-width="3.6799999999999997" stroke-dasharray="97.2" stroke-dashoffset="37.8" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="28" ry="4.48" stroke-width="3.5199999999999996" stroke-dasharray="100.8" stroke-dashoffset="39.199999999999996" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="29" ry="4.64" stroke-width="3.3600000000000003" stroke-dasharray="104.4" stroke-dashoffset="40.599999999999994" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="30" ry="4.8" stroke-width="3.2" stroke-dasharray="108" stroke-dashoffset="42" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="31" ry="4.96" stroke-width="3.04" stroke-dasharray="111.60000000000001" stroke-dashoffset="43.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="32" ry="5.12" stroke-width="2.88" stroke-dasharray="115.2" stroke-dashoffset="44.8" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="33" ry="5.28" stroke-width="2.7199999999999998" stroke-dasharray="118.8" stroke-dashoffset="46.199999999999996" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="34" ry="5.44" stroke-width="2.5599999999999996" stroke-dasharray="122.4" stroke-dashoffset="47.599999999999994" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="35" ry="5.6000000000000005" stroke-width="2.3999999999999995" stroke-dasharray="126" stroke-dashoffset="49" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="36" ry="5.76" stroke-width="2.24" stroke-dasharray="129.6" stroke-dashoffset="50.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="37" ry="5.92" stroke-width="2.08" stroke-dasharray="133.20000000000002" stroke-dashoffset="51.8" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="38" ry="6.08" stroke-width="1.92" stroke-dasharray="136.8" stroke-dashoffset="53.199999999999996" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="39" ry="6.24" stroke-width="1.7599999999999998" stroke-dasharray="140.4" stroke-dashoffset="54.599999999999994" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="40" ry="6.4" stroke-width="1.5999999999999996" stroke-dasharray="144" stroke-dashoffset="56" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="41" ry="6.5600000000000005" stroke-width="1.4399999999999995" stroke-dasharray="147.6" stroke-dashoffset="57.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="42" ry="6.72" stroke-width="1.2800000000000002" stroke-dasharray="151.20000000000002" stroke-dashoffset="58.8" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="43" ry="6.88" stroke-width="1.12" stroke-dasharray="154.8" stroke-dashoffset="60.199999999999996" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="44" ry="7.04" stroke-width="0.96" stroke-dasharray="158.4" stroke-dashoffset="61.599999999999994" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="45" ry="7.2" stroke-width="0.7999999999999998" stroke-dasharray="162" stroke-dashoffset="62.99999999999999" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="46" ry="7.36" stroke-width="0.6399999999999997" stroke-dasharray="165.6" stroke-dashoffset="64.39999999999999" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="47" ry="7.5200000000000005" stroke-width="0.47999999999999954" stroke-dasharray="169.20000000000002" stroke-dashoffset="65.8" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="48" ry="7.68" stroke-width="0.3200000000000003" stroke-dasharray="172.8" stroke-dashoffset="67.19999999999999" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="49" ry="7.84" stroke-width="0.16000000000000014" stroke-dasharray="176.4" stroke-dashoffset="68.6" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
</div>
<div id="js-dust-3" class="dust dust--3 sprite">
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="0" ry="0" stroke-width="5" stroke-dasharray="0" stroke-dashoffset="0" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="0.6" ry="0.08" stroke-width="4.9" stroke-dasharray="1.8" stroke-dashoffset="0.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="1.2" ry="0.16" stroke-width="4.8" stroke-dasharray="3.6" stroke-dashoffset="0.8" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="1.7999999999999998" ry="0.24" stroke-width="4.7" stroke-dasharray="5.4" stroke-dashoffset="1.2000000000000002" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="2.4" ry="0.32" stroke-width="4.6" stroke-dasharray="7.2" stroke-dashoffset="1.6" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="3" ry="0.4" stroke-width="4.5" stroke-dasharray="9" stroke-dashoffset="2" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="3.5999999999999996" ry="0.48" stroke-width="4.4" stroke-dasharray="10.8" stroke-dashoffset="2.4000000000000004" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="4.2" ry="0.56" stroke-width="4.3" stroke-dasharray="12.6" stroke-dashoffset="2.8000000000000003" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="4.8" ry="0.64" stroke-width="4.2" stroke-dasharray="14.4" stroke-dashoffset="3.2" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="5.3999999999999995" ry="0.72" stroke-width="4.1" stroke-dasharray="16.2" stroke-dashoffset="3.6" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="6" ry="0.8" stroke-width="4" stroke-dasharray="18" stroke-dashoffset="4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="6.6" ry="0.88" stroke-width="3.9" stroke-dasharray="19.8" stroke-dashoffset="4.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="7.199999999999999" ry="0.96" stroke-width="3.8" stroke-dasharray="21.6" stroke-dashoffset="4.800000000000001" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="7.8" ry="1.04" stroke-width="3.7" stroke-dasharray="23.400000000000002" stroke-dashoffset="5.2" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="8.4" ry="1.12" stroke-width="3.5999999999999996" stroke-dasharray="25.2" stroke-dashoffset="5.6000000000000005" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="9" ry="1.2" stroke-width="3.5" stroke-dasharray="27" stroke-dashoffset="6" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="9.6" ry="1.28" stroke-width="3.4" stroke-dasharray="28.8" stroke-dashoffset="6.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="10.2" ry="1.36" stroke-width="3.3" stroke-dasharray="30.6" stroke-dashoffset="6.800000000000001" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="10.799999999999999" ry="1.44" stroke-width="3.2" stroke-dasharray="32.4" stroke-dashoffset="7.2" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="11.4" ry="1.52" stroke-width="3.0999999999999996" stroke-dasharray="34.2" stroke-dashoffset="7.6000000000000005" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="12" ry="1.6" stroke-width="3" stroke-dasharray="36" stroke-dashoffset="8" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="12.6" ry="1.68" stroke-width="2.9" stroke-dasharray="37.800000000000004" stroke-dashoffset="8.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="13.2" ry="1.76" stroke-width="2.8" stroke-dasharray="39.6" stroke-dashoffset="8.8" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="13.799999999999999" ry="1.84" stroke-width="2.6999999999999997" stroke-dasharray="41.4" stroke-dashoffset="9.200000000000001" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="14.399999999999999" ry="1.92" stroke-width="2.5999999999999996" stroke-dasharray="43.2" stroke-dashoffset="9.600000000000001" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="15" ry="2" stroke-width="2.5" stroke-dasharray="45" stroke-dashoffset="10" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="15.6" ry="2.08" stroke-width="2.4" stroke-dasharray="46.800000000000004" stroke-dashoffset="10.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="16.2" ry="2.16" stroke-width="2.3" stroke-dasharray="48.6" stroke-dashoffset="10.8" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="16.8" ry="2.24" stroke-width="2.1999999999999997" stroke-dasharray="50.4" stroke-dashoffset="11.200000000000001" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="17.4" ry="2.32" stroke-width="2.0999999999999996" stroke-dasharray="52.2" stroke-dashoffset="11.600000000000001" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="18" ry="2.4" stroke-width="2" stroke-dasharray="54" stroke-dashoffset="12" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="18.599999999999998" ry="2.48" stroke-width="1.9" stroke-dasharray="55.800000000000004" stroke-dashoffset="12.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="19.2" ry="2.56" stroke-width="1.7999999999999998" stroke-dasharray="57.6" stroke-dashoffset="12.8" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="19.8" ry="2.64" stroke-width="1.6999999999999997" stroke-dasharray="59.4" stroke-dashoffset="13.200000000000001" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="20.4" ry="2.72" stroke-width="1.5999999999999996" stroke-dasharray="61.2" stroke-dashoffset="13.600000000000001" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="21" ry="2.8000000000000003" stroke-width="1.5" stroke-dasharray="63" stroke-dashoffset="14" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="21.599999999999998" ry="2.88" stroke-width="1.4" stroke-dasharray="64.8" stroke-dashoffset="14.4" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="22.2" ry="2.96" stroke-width="1.2999999999999998" stroke-dasharray="66.60000000000001" stroke-dashoffset="14.8" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="22.8" ry="3.04" stroke-width="1.1999999999999997" stroke-dasharray="68.4" stroke-dashoffset="15.200000000000001" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="23.4" ry="3.12" stroke-width="1.0999999999999996" stroke-dasharray="70.2" stroke-dashoffset="15.600000000000001" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="24" ry="3.2" stroke-width="1" stroke-dasharray="72" stroke-dashoffset="16" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="24.599999999999998" ry="3.2800000000000002" stroke-width="0.8999999999999995" stroke-dasharray="73.8" stroke-dashoffset="16.400000000000002" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="25.2" ry="3.36" stroke-width="0.7999999999999998" stroke-dasharray="75.60000000000001" stroke-dashoffset="16.8" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="25.8" ry="3.44" stroke-width="0.7000000000000002" stroke-dasharray="77.4" stroke-dashoffset="17.2" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="26.4" ry="3.52" stroke-width="0.5999999999999996" stroke-dasharray="79.2" stroke-dashoffset="17.6" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="27" ry="3.6" stroke-width="0.5" stroke-dasharray="81" stroke-dashoffset="18" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="27.599999999999998" ry="3.68" stroke-width="0.39999999999999947" stroke-dasharray="82.8" stroke-dashoffset="18.400000000000002" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="28.2" ry="3.7600000000000002" stroke-width="0.2999999999999998" stroke-dasharray="84.60000000000001" stroke-dashoffset="18.8" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="28.799999999999997" ry="3.84" stroke-width="0.1999999999999993" stroke-dasharray="86.4" stroke-dashoffset="19.200000000000003" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="100" cy="10" rx="29.4" ry="3.92" stroke-width="0.09999999999999964" stroke-dasharray="88.2" stroke-dashoffset="19.6" stroke-linecap="round" class="sprite__ellipse"></ellipse>
</svg>
</div>
<div id="js-content-inner" class="content__inner">
<div class="project">
<div class="project__img">
<div id="js-shadow-wrap" class="project__shadow-wrap">
<div id="js-shadow" class="project__shadow">
</div>
</div>
<div class="image-ie">
</div>
<div class="image">
<div class="scene">
<div class="shape cuboid-1 cub-1">
<div class="face ft">
<div class="photon-shader">
</div>
</div>
<div class="face bk">
<div class="photon-shader">
</div>
</div>
<div class="face rt">
<div class="photon-shader">
</div>
</div>
<div class="face lt">
<div class="photon-shader">
</div>
</div>
<div class="face bm">
<div class="photon-shader">
</div>
</div>
<div class="face tp">
<div class="photon-shader">
</div>
</div>
<div class="cr cr-0">
<div class="face side s0">
<div class="photon-shader">
</div>
</div>
<div class="face side s1">
<div class="photon-shader">
</div>
</div>
<div class="face side s2">
<div class="photon-shader">
</div>
</div>
</div>
<div class="cr cr-1">
<div class="face side s0">
<div class="photon-shader">
</div>
</div>
<div class="face side s1">
<div class="photon-shader">
</div>
</div>
<div class="face side s2">
<div class="photon-shader">
</div>
</div>
</div>
<div class="cr cr-2">
<div class="face side s0">
<div class="photon-shader">
</div>
</div>
<div class="face side s1">
<div class="photon-shader">
</div>
</div>
<div class="face side s2">
<div class="photon-shader">
</div>
</div>
</div>
<div class="cr cr-3">
<div class="face side s0">
<div class="photon-shader">
</div>
</div>
<div class="face side s1">
<div class="photon-shader">
</div>
</div>
<div class="face side s2">
<div class="photon-shader">
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div id="js-text" class="project__text">
<h2>
M - 2010</h2>
<p>
LEARN EDITING SCRIPT
</p>
<p>
WITH CODE
</p>
<p>
CSS HTML EFFECT
</p>
<p>
SOURCE <a href="https://codepen.io/sol0mka/pen/yNOage" target="_blank" title="Sumber"> <span style="color:#222">CODE </a> : LEGO M 
</p>
<p>
BY. <a href="http://codepen.io/Myscript2010/pen/PzqVYX" target="_blank" title="Edited by. M - 2010"><span style="color:#222"> MYSCRIPT </a>2010
</p>
<p>
CIBEBER CIMAHI 2010 - 2016
</p>

</div>
</div>
</div>
</div>
<div id="js-badge" class="badge">
</div>
<div id="js-wrapper" class="wrapper">
<div id="scroller" class="particles">
<div class="blob-circle-wrap">
<div id="js-blob-circle" class="blob-circle sprite">
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
<svg class="sprite__frame">
<ellipse id="js-blob-circle-ellipse" cx="50" cy="50" fill="none" class="sprite__ellipse"></ellipse>
</svg>
</div>
</div>
<div id="js-particle-0" data-left="0" data-top="0" style="left: 0px; top: 0px" class="particle">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-1" data-left="175" data-top="0" style="left: 175px; top: 0px" class="particle">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-2" data-left="350" data-top="0" style="left: 350px; top: 0px" class="particle">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-3" data-left="525" data-top="0" style="left: 525px; top: 0px" class="particle">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-4" data-left="700" data-top="0" style="left: 700px; top: 0px" class="particle">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-5" data-left="875" data-top="0" style="left: 875px; top: 0px" class="particle">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-6" data-left="1050" data-top="0" style="left: 1050px; top: 0px" class="particle">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-7" data-left="1225" data-top="0" style="left: 1225px; top: 0px" class="particle">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-8" data-left="1400" data-top="0" style="left: 1400px; top: 0px" class="particle">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-9" data-left="1575" data-top="0" style="left: 1575px; top: 0px" class="particle">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-10" data-left="1750" data-top="0" style="left: 1750px; top: 0px" class="particle">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-11" data-left="1925" data-top="0" style="left: 1925px; top: 0px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-12" data-left="2100" data-top="0" style="left: 2100px; top: 0px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-13" data-left="2275" data-top="0" style="left: 2275px; top: 0px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-14" data-left="2450" data-top="0" style="left: 2450px; top: 0px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-15" data-left="2625" data-top="0" style="left: 2625px; top: 0px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-16" data-left="2800" data-top="0" style="left: 2800px; top: 0px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-17" data-left="2975" data-top="0" style="left: 2975px; top: 0px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-18" data-left="3150" data-top="0" style="left: 3150px; top: 0px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-19" data-left="3325" data-top="0" style="left: 3325px; top: 0px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-20" data-left="3500" data-top="0" style="left: 3500px; top: 0px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-21" data-left="3675" data-top="0" style="left: 3675px; top: 0px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-22" data-left="3850" data-top="0" style="left: 3850px; top: 0px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-23" data-left="4025" data-top="0" style="left: 4025px; top: 0px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-0" data-left="87.5" data-top="137.5" style="left: 87.5px; top: 137.5px" class="particle">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-1" data-left="262.5" data-top="137.5" style="left: 262.5px; top: 137.5px" class="particle">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-2" data-left="437.5" data-top="137.5" style="left: 437.5px; top: 137.5px" class="particle">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-3" data-left="612.5" data-top="137.5" style="left: 612.5px; top: 137.5px" class="particle">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-4" data-left="787.5" data-top="137.5" style="left: 787.5px; top: 137.5px" class="particle">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-5" data-left="962.5" data-top="137.5" style="left: 962.5px; top: 137.5px" class="particle">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-6" data-left="1137.5" data-top="137.5" style="left: 1137.5px; top: 137.5px" class="particle">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-7" data-left="1312.5" data-top="137.5" style="left: 1312.5px; top: 137.5px" class="particle">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-8" data-left="1487.5" data-top="137.5" style="left: 1487.5px; top: 137.5px" class="particle">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-9" data-left="1662.5" data-top="137.5" style="left: 1662.5px; top: 137.5px" class="particle">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-10" data-left="1837.5" data-top="137.5" style="left: 1837.5px; top: 137.5px" class="particle">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-11" data-left="2012.5" data-top="137.5" style="left: 2012.5px; top: 137.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-12" data-left="2187.5" data-top="137.5" style="left: 2187.5px; top: 137.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-13" data-left="2362.5" data-top="137.5" style="left: 2362.5px; top: 137.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-14" data-left="2537.5" data-top="137.5" style="left: 2537.5px; top: 137.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-15" data-left="2712.5" data-top="137.5" style="left: 2712.5px; top: 137.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-16" data-left="2887.5" data-top="137.5" style="left: 2887.5px; top: 137.5px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-17" data-left="3062.5" data-top="137.5" style="left: 3062.5px; top: 137.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-18" data-left="3237.5" data-top="137.5" style="left: 3237.5px; top: 137.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-19" data-left="3412.5" data-top="137.5" style="left: 3412.5px; top: 137.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-20" data-left="3587.5" data-top="137.5" style="left: 3587.5px; top: 137.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-21" data-left="3762.5" data-top="137.5" style="left: 3762.5px; top: 137.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-22" data-left="3937.5" data-top="137.5" style="left: 3937.5px; top: 137.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-23" data-left="4112.5" data-top="137.5" style="left: 4112.5px; top: 137.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-0" data-left="0" data-top="275" style="left: 0px; top: 275px" class="particle">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-1" data-left="175" data-top="275" style="left: 175px; top: 275px" class="particle">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-2" data-left="350" data-top="275" style="left: 350px; top: 275px" class="particle">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-3" data-left="525" data-top="275" style="left: 525px; top: 275px" class="particle">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-4" data-left="700" data-top="275" style="left: 700px; top: 275px" class="particle">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-5" data-left="875" data-top="275" style="left: 875px; top: 275px" class="particle">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-6" data-left="1050" data-top="275" style="left: 1050px; top: 275px" class="particle">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-7" data-left="1225" data-top="275" style="left: 1225px; top: 275px" class="particle">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-8" data-left="1400" data-top="275" style="left: 1400px; top: 275px" class="particle">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-9" data-left="1575" data-top="275" style="left: 1575px; top: 275px" class="particle">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-10" data-left="1750" data-top="275" style="left: 1750px; top: 275px" class="particle">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-11" data-left="1925" data-top="275" style="left: 1925px; top: 275px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-12" data-left="2100" data-top="275" style="left: 2100px; top: 275px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-13" data-left="2275" data-top="275" style="left: 2275px; top: 275px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-14" data-left="2450" data-top="275" style="left: 2450px; top: 275px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-15" data-left="2625" data-top="275" style="left: 2625px; top: 275px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-16" data-left="2800" data-top="275" style="left: 2800px; top: 275px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-17" data-left="2975" data-top="275" style="left: 2975px; top: 275px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-18" data-left="3150" data-top="275" style="left: 3150px; top: 275px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-19" data-left="3325" data-top="275" style="left: 3325px; top: 275px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-20" data-left="3500" data-top="275" style="left: 3500px; top: 275px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-21" data-left="3675" data-top="275" style="left: 3675px; top: 275px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-22" data-left="3850" data-top="275" style="left: 3850px; top: 275px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-23" data-left="4025" data-top="275" style="left: 4025px; top: 275px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-0" data-left="87.5" data-top="412.5" style="left: 87.5px; top: 412.5px" class="particle">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-1" data-left="262.5" data-top="412.5" style="left: 262.5px; top: 412.5px" class="particle">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-2" data-left="437.5" data-top="412.5" style="left: 437.5px; top: 412.5px" class="particle">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-3" data-left="612.5" data-top="412.5" style="left: 612.5px; top: 412.5px" class="particle">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-4" data-left="787.5" data-top="412.5" style="left: 787.5px; top: 412.5px" class="particle">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-5" data-left="962.5" data-top="412.5" style="left: 962.5px; top: 412.5px" class="particle">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-6" data-left="1137.5" data-top="412.5" style="left: 1137.5px; top: 412.5px" class="particle">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-7" data-left="1312.5" data-top="412.5" style="left: 1312.5px; top: 412.5px" class="particle">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-8" data-left="1487.5" data-top="412.5" style="left: 1487.5px; top: 412.5px" class="particle">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-9" data-left="1662.5" data-top="412.5" style="left: 1662.5px; top: 412.5px" class="particle">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-10" data-left="1837.5" data-top="412.5" style="left: 1837.5px; top: 412.5px" class="particle">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-11" data-left="2012.5" data-top="412.5" style="left: 2012.5px; top: 412.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-12" data-left="2187.5" data-top="412.5" style="left: 2187.5px; top: 412.5px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-13" data-left="2362.5" data-top="412.5" style="left: 2362.5px; top: 412.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-14" data-left="2537.5" data-top="412.5" style="left: 2537.5px; top: 412.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-15" data-left="2712.5" data-top="412.5" style="left: 2712.5px; top: 412.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-16" data-left="2887.5" data-top="412.5" style="left: 2887.5px; top: 412.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-17" data-left="3062.5" data-top="412.5" style="left: 3062.5px; top: 412.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-18" data-left="3237.5" data-top="412.5" style="left: 3237.5px; top: 412.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-19" data-left="3412.5" data-top="412.5" style="left: 3412.5px; top: 412.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-20" data-left="3587.5" data-top="412.5" style="left: 3587.5px; top: 412.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-21" data-left="3762.5" data-top="412.5" style="left: 3762.5px; top: 412.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-22" data-left="3937.5" data-top="412.5" style="left: 3937.5px; top: 412.5px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-23" data-left="4112.5" data-top="412.5" style="left: 4112.5px; top: 412.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-0" data-left="0" data-top="550" style="left: 0px; top: 550px" class="particle">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-1" data-left="175" data-top="550" style="left: 175px; top: 550px" class="particle">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-2" data-left="350" data-top="550" style="left: 350px; top: 550px" class="particle">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-3" data-left="525" data-top="550" style="left: 525px; top: 550px" class="particle">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-4" data-left="700" data-top="550" style="left: 700px; top: 550px" class="particle">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-5" data-left="875" data-top="550" style="left: 875px; top: 550px" class="particle">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-6" data-left="1050" data-top="550" style="left: 1050px; top: 550px" class="particle">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-7" data-left="1225" data-top="550" style="left: 1225px; top: 550px" class="particle">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-8" data-left="1400" data-top="550" style="left: 1400px; top: 550px" class="particle">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-9" data-left="1575" data-top="550" style="left: 1575px; top: 550px" class="particle">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-10" data-left="1750" data-top="550" style="left: 1750px; top: 550px" class="particle">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-11" data-left="1925" data-top="550" style="left: 1925px; top: 550px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-12" data-left="2100" data-top="550" style="left: 2100px; top: 550px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-13" data-left="2275" data-top="550" style="left: 2275px; top: 550px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-14" data-left="2450" data-top="550" style="left: 2450px; top: 550px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-15" data-left="2625" data-top="550" style="left: 2625px; top: 550px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-16" data-left="2800" data-top="550" style="left: 2800px; top: 550px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-17" data-left="2975" data-top="550" style="left: 2975px; top: 550px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-18" data-left="3150" data-top="550" style="left: 3150px; top: 550px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-19" data-left="3325" data-top="550" style="left: 3325px; top: 550px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-20" data-left="3500" data-top="550" style="left: 3500px; top: 550px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-21" data-left="3675" data-top="550" style="left: 3675px; top: 550px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-22" data-left="3850" data-top="550" style="left: 3850px; top: 550px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-23" data-left="4025" data-top="550" style="left: 4025px; top: 550px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-0" data-left="87.5" data-top="687.5" style="left: 87.5px; top: 687.5px" class="particle">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-1" data-left="262.5" data-top="687.5" style="left: 262.5px; top: 687.5px" class="particle">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-2" data-left="437.5" data-top="687.5" style="left: 437.5px; top: 687.5px" class="particle">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-3" data-left="612.5" data-top="687.5" style="left: 612.5px; top: 687.5px" class="particle">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-4" data-left="787.5" data-top="687.5" style="left: 787.5px; top: 687.5px" class="particle">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-5" data-left="962.5" data-top="687.5" style="left: 962.5px; top: 687.5px" class="particle">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-6" data-left="1137.5" data-top="687.5" style="left: 1137.5px; top: 687.5px" class="particle">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-7" data-left="1312.5" data-top="687.5" style="left: 1312.5px; top: 687.5px" class="particle">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-8" data-left="1487.5" data-top="687.5" style="left: 1487.5px; top: 687.5px" class="particle">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-9" data-left="1662.5" data-top="687.5" style="left: 1662.5px; top: 687.5px" class="particle">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-10" data-left="1837.5" data-top="687.5" style="left: 1837.5px; top: 687.5px" class="particle">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-11" data-left="2012.5" data-top="687.5" style="left: 2012.5px; top: 687.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-12" data-left="2187.5" data-top="687.5" style="left: 2187.5px; top: 687.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-13" data-left="2362.5" data-top="687.5" style="left: 2362.5px; top: 687.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-14" data-left="2537.5" data-top="687.5" style="left: 2537.5px; top: 687.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-15" data-left="2712.5" data-top="687.5" style="left: 2712.5px; top: 687.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-16" data-left="2887.5" data-top="687.5" style="left: 2887.5px; top: 687.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-17" data-left="3062.5" data-top="687.5" style="left: 3062.5px; top: 687.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-18" data-left="3237.5" data-top="687.5" style="left: 3237.5px; top: 687.5px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-19" data-left="3412.5" data-top="687.5" style="left: 3412.5px; top: 687.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-20" data-left="3587.5" data-top="687.5" style="left: 3587.5px; top: 687.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-21" data-left="3762.5" data-top="687.5" style="left: 3762.5px; top: 687.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-22" data-left="3937.5" data-top="687.5" style="left: 3937.5px; top: 687.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-23" data-left="4112.5" data-top="687.5" style="left: 4112.5px; top: 687.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-0" data-left="0" data-top="825" style="left: 0px; top: 825px" class="particle">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-1" data-left="175" data-top="825" style="left: 175px; top: 825px" class="particle">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-2" data-left="350" data-top="825" style="left: 350px; top: 825px" class="particle">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-3" data-left="525" data-top="825" style="left: 525px; top: 825px" class="particle">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-4" data-left="700" data-top="825" style="left: 700px; top: 825px" class="particle">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-5" data-left="875" data-top="825" style="left: 875px; top: 825px" class="particle">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-6" data-left="1050" data-top="825" style="left: 1050px; top: 825px" class="particle">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-7" data-left="1225" data-top="825" style="left: 1225px; top: 825px" class="particle">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-8" data-left="1400" data-top="825" style="left: 1400px; top: 825px" class="particle">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-9" data-left="1575" data-top="825" style="left: 1575px; top: 825px" class="particle">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-10" data-left="1750" data-top="825" style="left: 1750px; top: 825px" class="particle">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-11" data-left="1925" data-top="825" style="left: 1925px; top: 825px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-12" data-left="2100" data-top="825" style="left: 2100px; top: 825px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-13" data-left="2275" data-top="825" style="left: 2275px; top: 825px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-14" data-left="2450" data-top="825" style="left: 2450px; top: 825px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-15" data-left="2625" data-top="825" style="left: 2625px; top: 825px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-16" data-left="2800" data-top="825" style="left: 2800px; top: 825px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-17" data-left="2975" data-top="825" style="left: 2975px; top: 825px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-18" data-left="3150" data-top="825" style="left: 3150px; top: 825px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-19" data-left="3325" data-top="825" style="left: 3325px; top: 825px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-20" data-left="3500" data-top="825" style="left: 3500px; top: 825px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-21" data-left="3675" data-top="825" style="left: 3675px; top: 825px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-22" data-left="3850" data-top="825" style="left: 3850px; top: 825px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-23" data-left="4025" data-top="825" style="left: 4025px; top: 825px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-0" data-left="87.5" data-top="962.5" style="left: 87.5px; top: 962.5px" class="particle">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-1" data-left="262.5" data-top="962.5" style="left: 262.5px; top: 962.5px" class="particle">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-2" data-left="437.5" data-top="962.5" style="left: 437.5px; top: 962.5px" class="particle">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-3" data-left="612.5" data-top="962.5" style="left: 612.5px; top: 962.5px" class="particle">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-4" data-left="787.5" data-top="962.5" style="left: 787.5px; top: 962.5px" class="particle">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-5" data-left="962.5" data-top="962.5" style="left: 962.5px; top: 962.5px" class="particle">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-6" data-left="1137.5" data-top="962.5" style="left: 1137.5px; top: 962.5px" class="particle">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-7" data-left="1312.5" data-top="962.5" style="left: 1312.5px; top: 962.5px" class="particle">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-8" data-left="1487.5" data-top="962.5" style="left: 1487.5px; top: 962.5px" class="particle">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-9" data-left="1662.5" data-top="962.5" style="left: 1662.5px; top: 962.5px" class="particle">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-10" data-left="1837.5" data-top="962.5" style="left: 1837.5px; top: 962.5px" class="particle">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-11" data-left="2012.5" data-top="962.5" style="left: 2012.5px; top: 962.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-12" data-left="2187.5" data-top="962.5" style="left: 2187.5px; top: 962.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-13" data-left="2362.5" data-top="962.5" style="left: 2362.5px; top: 962.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-14" data-left="2537.5" data-top="962.5" style="left: 2537.5px; top: 962.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-15" data-left="2712.5" data-top="962.5" style="left: 2712.5px; top: 962.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-16" data-left="2887.5" data-top="962.5" style="left: 2887.5px; top: 962.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-17" data-left="3062.5" data-top="962.5" style="left: 3062.5px; top: 962.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-18" data-left="3237.5" data-top="962.5" style="left: 3237.5px; top: 962.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-19" data-left="3412.5" data-top="962.5" style="left: 3412.5px; top: 962.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-20" data-left="3587.5" data-top="962.5" style="left: 3587.5px; top: 962.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-21" data-left="3762.5" data-top="962.5" style="left: 3762.5px; top: 962.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-22" data-left="3937.5" data-top="962.5" style="left: 3937.5px; top: 962.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-23" data-left="4112.5" data-top="962.5" style="left: 4112.5px; top: 962.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-0" data-left="0" data-top="1100" style="left: 0px; top: 1100px" class="particle">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-1" data-left="175" data-top="1100" style="left: 175px; top: 1100px" class="particle">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-2" data-left="350" data-top="1100" style="left: 350px; top: 1100px" class="particle">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-3" data-left="525" data-top="1100" style="left: 525px; top: 1100px" class="particle">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-4" data-left="700" data-top="1100" style="left: 700px; top: 1100px" class="particle">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-5" data-left="875" data-top="1100" style="left: 875px; top: 1100px" class="particle">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-6" data-left="1050" data-top="1100" style="left: 1050px; top: 1100px" class="particle">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-7" data-left="1225" data-top="1100" style="left: 1225px; top: 1100px" class="particle">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-8" data-left="1400" data-top="1100" style="left: 1400px; top: 1100px" class="particle">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-9" data-left="1575" data-top="1100" style="left: 1575px; top: 1100px" class="particle">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-10" data-left="1750" data-top="1100" style="left: 1750px; top: 1100px" class="particle">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-11" data-left="1925" data-top="1100" style="left: 1925px; top: 1100px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-12" data-left="2100" data-top="1100" style="left: 2100px; top: 1100px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-13" data-left="2275" data-top="1100" style="left: 2275px; top: 1100px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-14" data-left="2450" data-top="1100" style="left: 2450px; top: 1100px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-15" data-left="2625" data-top="1100" style="left: 2625px; top: 1100px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-16" data-left="2800" data-top="1100" style="left: 2800px; top: 1100px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-17" data-left="2975" data-top="1100" style="left: 2975px; top: 1100px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-18" data-left="3150" data-top="1100" style="left: 3150px; top: 1100px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-19" data-left="3325" data-top="1100" style="left: 3325px; top: 1100px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-20" data-left="3500" data-top="1100" style="left: 3500px; top: 1100px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-21" data-left="3675" data-top="1100" style="left: 3675px; top: 1100px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-22" data-left="3850" data-top="1100" style="left: 3850px; top: 1100px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-23" data-left="4025" data-top="1100" style="left: 4025px; top: 1100px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-0" data-left="87.5" data-top="1237.5" style="left: 87.5px; top: 1237.5px" class="particle">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-1" data-left="262.5" data-top="1237.5" style="left: 262.5px; top: 1237.5px" class="particle">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-2" data-left="437.5" data-top="1237.5" style="left: 437.5px; top: 1237.5px" class="particle">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-3" data-left="612.5" data-top="1237.5" style="left: 612.5px; top: 1237.5px" class="particle">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-4" data-left="787.5" data-top="1237.5" style="left: 787.5px; top: 1237.5px" class="particle">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-5" data-left="962.5" data-top="1237.5" style="left: 962.5px; top: 1237.5px" class="particle">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-6" data-left="1137.5" data-top="1237.5" style="left: 1137.5px; top: 1237.5px" class="particle">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-7" data-left="1312.5" data-top="1237.5" style="left: 1312.5px; top: 1237.5px" class="particle">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-8" data-left="1487.5" data-top="1237.5" style="left: 1487.5px; top: 1237.5px" class="particle">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-9" data-left="1662.5" data-top="1237.5" style="left: 1662.5px; top: 1237.5px" class="particle">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-10" data-left="1837.5" data-top="1237.5" style="left: 1837.5px; top: 1237.5px" class="particle">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-11" data-left="2012.5" data-top="1237.5" style="left: 2012.5px; top: 1237.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-12" data-left="2187.5" data-top="1237.5" style="left: 2187.5px; top: 1237.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-13" data-left="2362.5" data-top="1237.5" style="left: 2362.5px; top: 1237.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-14" data-left="2537.5" data-top="1237.5" style="left: 2537.5px; top: 1237.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-15" data-left="2712.5" data-top="1237.5" style="left: 2712.5px; top: 1237.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-16" data-left="2887.5" data-top="1237.5" style="left: 2887.5px; top: 1237.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-17" data-left="3062.5" data-top="1237.5" style="left: 3062.5px; top: 1237.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-18" data-left="3237.5" data-top="1237.5" style="left: 3237.5px; top: 1237.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-19" data-left="3412.5" data-top="1237.5" style="left: 3412.5px; top: 1237.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-20" data-left="3587.5" data-top="1237.5" style="left: 3587.5px; top: 1237.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-21" data-left="3762.5" data-top="1237.5" style="left: 3762.5px; top: 1237.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-22" data-left="3937.5" data-top="1237.5" style="left: 3937.5px; top: 1237.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-23" data-left="4112.5" data-top="1237.5" style="left: 4112.5px; top: 1237.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-0" data-left="0" data-top="1375" style="left: 0px; top: 1375px" class="particle">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-1" data-left="175" data-top="1375" style="left: 175px; top: 1375px" class="particle">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-2" data-left="350" data-top="1375" style="left: 350px; top: 1375px" class="particle">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-3" data-left="525" data-top="1375" style="left: 525px; top: 1375px" class="particle">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-4" data-left="700" data-top="1375" style="left: 700px; top: 1375px" class="particle">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-5" data-left="875" data-top="1375" style="left: 875px; top: 1375px" class="particle">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-6" data-left="1050" data-top="1375" style="left: 1050px; top: 1375px" class="particle">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-7" data-left="1225" data-top="1375" style="left: 1225px; top: 1375px" class="particle">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-8" data-left="1400" data-top="1375" style="left: 1400px; top: 1375px" class="particle">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-9" data-left="1575" data-top="1375" style="left: 1575px; top: 1375px" class="particle">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-10" data-left="1750" data-top="1375" style="left: 1750px; top: 1375px" class="particle">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-11" data-left="1925" data-top="1375" style="left: 1925px; top: 1375px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-12" data-left="2100" data-top="1375" style="left: 2100px; top: 1375px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-13" data-left="2275" data-top="1375" style="left: 2275px; top: 1375px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-14" data-left="2450" data-top="1375" style="left: 2450px; top: 1375px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-15" data-left="2625" data-top="1375" style="left: 2625px; top: 1375px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-16" data-left="2800" data-top="1375" style="left: 2800px; top: 1375px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-17" data-left="2975" data-top="1375" style="left: 2975px; top: 1375px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-18" data-left="3150" data-top="1375" style="left: 3150px; top: 1375px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-19" data-left="3325" data-top="1375" style="left: 3325px; top: 1375px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-20" data-left="3500" data-top="1375" style="left: 3500px; top: 1375px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-21" data-left="3675" data-top="1375" style="left: 3675px; top: 1375px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-22" data-left="3850" data-top="1375" style="left: 3850px; top: 1375px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-23" data-left="4025" data-top="1375" style="left: 4025px; top: 1375px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-0" data-left="87.5" data-top="1512.5" style="left: 87.5px; top: 1512.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-1" data-left="262.5" data-top="1512.5" style="left: 262.5px; top: 1512.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-2" data-left="437.5" data-top="1512.5" style="left: 437.5px; top: 1512.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-3" data-left="612.5" data-top="1512.5" style="left: 612.5px; top: 1512.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-4" data-left="787.5" data-top="1512.5" style="left: 787.5px; top: 1512.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-5" data-left="962.5" data-top="1512.5" style="left: 962.5px; top: 1512.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-6" data-left="1137.5" data-top="1512.5" style="left: 1137.5px; top: 1512.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-7" data-left="1312.5" data-top="1512.5" style="left: 1312.5px; top: 1512.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-8" data-left="1487.5" data-top="1512.5" style="left: 1487.5px; top: 1512.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-9" data-left="1662.5" data-top="1512.5" style="left: 1662.5px; top: 1512.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-10" data-left="1837.5" data-top="1512.5" style="left: 1837.5px; top: 1512.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-11" data-left="2012.5" data-top="1512.5" style="left: 2012.5px; top: 1512.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-12" data-left="2187.5" data-top="1512.5" style="left: 2187.5px; top: 1512.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-13" data-left="2362.5" data-top="1512.5" style="left: 2362.5px; top: 1512.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-14" data-left="2537.5" data-top="1512.5" style="left: 2537.5px; top: 1512.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-15" data-left="2712.5" data-top="1512.5" style="left: 2712.5px; top: 1512.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-16" data-left="2887.5" data-top="1512.5" style="left: 2887.5px; top: 1512.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-17" data-left="3062.5" data-top="1512.5" style="left: 3062.5px; top: 1512.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-18" data-left="3237.5" data-top="1512.5" style="left: 3237.5px; top: 1512.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-19" data-left="3412.5" data-top="1512.5" style="left: 3412.5px; top: 1512.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-20" data-left="3587.5" data-top="1512.5" style="left: 3587.5px; top: 1512.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-21" data-left="3762.5" data-top="1512.5" style="left: 3762.5px; top: 1512.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-22" data-left="3937.5" data-top="1512.5" style="left: 3937.5px; top: 1512.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-23" data-left="4112.5" data-top="1512.5" style="left: 4112.5px; top: 1512.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-0" data-left="0" data-top="1650" style="left: 0px; top: 1650px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-1" data-left="175" data-top="1650" style="left: 175px; top: 1650px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-2" data-left="350" data-top="1650" style="left: 350px; top: 1650px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-3" data-left="525" data-top="1650" style="left: 525px; top: 1650px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-4" data-left="700" data-top="1650" style="left: 700px; top: 1650px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-5" data-left="875" data-top="1650" style="left: 875px; top: 1650px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-6" data-left="1050" data-top="1650" style="left: 1050px; top: 1650px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-7" data-left="1225" data-top="1650" style="left: 1225px; top: 1650px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-8" data-left="1400" data-top="1650" style="left: 1400px; top: 1650px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-9" data-left="1575" data-top="1650" style="left: 1575px; top: 1650px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-10" data-left="1750" data-top="1650" style="left: 1750px; top: 1650px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-11" data-left="1925" data-top="1650" style="left: 1925px; top: 1650px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-12" data-left="2100" data-top="1650" style="left: 2100px; top: 1650px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-13" data-left="2275" data-top="1650" style="left: 2275px; top: 1650px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-14" data-left="2450" data-top="1650" style="left: 2450px; top: 1650px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-15" data-left="2625" data-top="1650" style="left: 2625px; top: 1650px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-16" data-left="2800" data-top="1650" style="left: 2800px; top: 1650px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-17" data-left="2975" data-top="1650" style="left: 2975px; top: 1650px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-18" data-left="3150" data-top="1650" style="left: 3150px; top: 1650px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-19" data-left="3325" data-top="1650" style="left: 3325px; top: 1650px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-20" data-left="3500" data-top="1650" style="left: 3500px; top: 1650px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-21" data-left="3675" data-top="1650" style="left: 3675px; top: 1650px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-22" data-left="3850" data-top="1650" style="left: 3850px; top: 1650px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-23" data-left="4025" data-top="1650" style="left: 4025px; top: 1650px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-0" data-left="87.5" data-top="1787.5" style="left: 87.5px; top: 1787.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-1" data-left="262.5" data-top="1787.5" style="left: 262.5px; top: 1787.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-2" data-left="437.5" data-top="1787.5" style="left: 437.5px; top: 1787.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-3" data-left="612.5" data-top="1787.5" style="left: 612.5px; top: 1787.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-4" data-left="787.5" data-top="1787.5" style="left: 787.5px; top: 1787.5px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-5" data-left="962.5" data-top="1787.5" style="left: 962.5px; top: 1787.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-6" data-left="1137.5" data-top="1787.5" style="left: 1137.5px; top: 1787.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-7" data-left="1312.5" data-top="1787.5" style="left: 1312.5px; top: 1787.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-8" data-left="1487.5" data-top="1787.5" style="left: 1487.5px; top: 1787.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-9" data-left="1662.5" data-top="1787.5" style="left: 1662.5px; top: 1787.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-10" data-left="1837.5" data-top="1787.5" style="left: 1837.5px; top: 1787.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-11" data-left="2012.5" data-top="1787.5" style="left: 2012.5px; top: 1787.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-12" data-left="2187.5" data-top="1787.5" style="left: 2187.5px; top: 1787.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-13" data-left="2362.5" data-top="1787.5" style="left: 2362.5px; top: 1787.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-14" data-left="2537.5" data-top="1787.5" style="left: 2537.5px; top: 1787.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-15" data-left="2712.5" data-top="1787.5" style="left: 2712.5px; top: 1787.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-16" data-left="2887.5" data-top="1787.5" style="left: 2887.5px; top: 1787.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-17" data-left="3062.5" data-top="1787.5" style="left: 3062.5px; top: 1787.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-18" data-left="3237.5" data-top="1787.5" style="left: 3237.5px; top: 1787.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-19" data-left="3412.5" data-top="1787.5" style="left: 3412.5px; top: 1787.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-20" data-left="3587.5" data-top="1787.5" style="left: 3587.5px; top: 1787.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-21" data-left="3762.5" data-top="1787.5" style="left: 3762.5px; top: 1787.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-22" data-left="3937.5" data-top="1787.5" style="left: 3937.5px; top: 1787.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-23" data-left="4112.5" data-top="1787.5" style="left: 4112.5px; top: 1787.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-0" data-left="0" data-top="1925" style="left: 0px; top: 1925px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-1" data-left="175" data-top="1925" style="left: 175px; top: 1925px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-2" data-left="350" data-top="1925" style="left: 350px; top: 1925px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-3" data-left="525" data-top="1925" style="left: 525px; top: 1925px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-4" data-left="700" data-top="1925" style="left: 700px; top: 1925px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-5" data-left="875" data-top="1925" style="left: 875px; top: 1925px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-6" data-left="1050" data-top="1925" style="left: 1050px; top: 1925px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-7" data-left="1225" data-top="1925" style="left: 1225px; top: 1925px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-8" data-left="1400" data-top="1925" style="left: 1400px; top: 1925px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-9" data-left="1575" data-top="1925" style="left: 1575px; top: 1925px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-10" data-left="1750" data-top="1925" style="left: 1750px; top: 1925px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-11" data-left="1925" data-top="1925" style="left: 1925px; top: 1925px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-12" data-left="2100" data-top="1925" style="left: 2100px; top: 1925px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-13" data-left="2275" data-top="1925" style="left: 2275px; top: 1925px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-14" data-left="2450" data-top="1925" style="left: 2450px; top: 1925px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-15" data-left="2625" data-top="1925" style="left: 2625px; top: 1925px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-16" data-left="2800" data-top="1925" style="left: 2800px; top: 1925px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-17" data-left="2975" data-top="1925" style="left: 2975px; top: 1925px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-18" data-left="3150" data-top="1925" style="left: 3150px; top: 1925px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-19" data-left="3325" data-top="1925" style="left: 3325px; top: 1925px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-20" data-left="3500" data-top="1925" style="left: 3500px; top: 1925px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-21" data-left="3675" data-top="1925" style="left: 3675px; top: 1925px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-22" data-left="3850" data-top="1925" style="left: 3850px; top: 1925px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-23" data-left="4025" data-top="1925" style="left: 4025px; top: 1925px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-0" data-left="87.5" data-top="2062.5" style="left: 87.5px; top: 2062.5px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-1" data-left="262.5" data-top="2062.5" style="left: 262.5px; top: 2062.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-2" data-left="437.5" data-top="2062.5" style="left: 437.5px; top: 2062.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-3" data-left="612.5" data-top="2062.5" style="left: 612.5px; top: 2062.5px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-4" data-left="787.5" data-top="2062.5" style="left: 787.5px; top: 2062.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-5" data-left="962.5" data-top="2062.5" style="left: 962.5px; top: 2062.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-6" data-left="1137.5" data-top="2062.5" style="left: 1137.5px; top: 2062.5px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-7" data-left="1312.5" data-top="2062.5" style="left: 1312.5px; top: 2062.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-8" data-left="1487.5" data-top="2062.5" style="left: 1487.5px; top: 2062.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-9" data-left="1662.5" data-top="2062.5" style="left: 1662.5px; top: 2062.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-10" data-left="1837.5" data-top="2062.5" style="left: 1837.5px; top: 2062.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-11" data-left="2012.5" data-top="2062.5" style="left: 2012.5px; top: 2062.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-12" data-left="2187.5" data-top="2062.5" style="left: 2187.5px; top: 2062.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-13" data-left="2362.5" data-top="2062.5" style="left: 2362.5px; top: 2062.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-14" data-left="2537.5" data-top="2062.5" style="left: 2537.5px; top: 2062.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-15" data-left="2712.5" data-top="2062.5" style="left: 2712.5px; top: 2062.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-16" data-left="2887.5" data-top="2062.5" style="left: 2887.5px; top: 2062.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-17" data-left="3062.5" data-top="2062.5" style="left: 3062.5px; top: 2062.5px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-18" data-left="3237.5" data-top="2062.5" style="left: 3237.5px; top: 2062.5px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-19" data-left="3412.5" data-top="2062.5" style="left: 3412.5px; top: 2062.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-20" data-left="3587.5" data-top="2062.5" style="left: 3587.5px; top: 2062.5px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-21" data-left="3762.5" data-top="2062.5" style="left: 3762.5px; top: 2062.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-22" data-left="3937.5" data-top="2062.5" style="left: 3937.5px; top: 2062.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-23" data-left="4112.5" data-top="2062.5" style="left: 4112.5px; top: 2062.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-0" data-left="0" data-top="2200" style="left: 0px; top: 2200px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-1" data-left="175" data-top="2200" style="left: 175px; top: 2200px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-2" data-left="350" data-top="2200" style="left: 350px; top: 2200px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-3" data-left="525" data-top="2200" style="left: 525px; top: 2200px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-4" data-left="700" data-top="2200" style="left: 700px; top: 2200px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-5" data-left="875" data-top="2200" style="left: 875px; top: 2200px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-6" data-left="1050" data-top="2200" style="left: 1050px; top: 2200px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-7" data-left="1225" data-top="2200" style="left: 1225px; top: 2200px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-8" data-left="1400" data-top="2200" style="left: 1400px; top: 2200px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-9" data-left="1575" data-top="2200" style="left: 1575px; top: 2200px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-10" data-left="1750" data-top="2200" style="left: 1750px; top: 2200px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-11" data-left="1925" data-top="2200" style="left: 1925px; top: 2200px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-12" data-left="2100" data-top="2200" style="left: 2100px; top: 2200px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-13" data-left="2275" data-top="2200" style="left: 2275px; top: 2200px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-14" data-left="2450" data-top="2200" style="left: 2450px; top: 2200px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-15" data-left="2625" data-top="2200" style="left: 2625px; top: 2200px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-16" data-left="2800" data-top="2200" style="left: 2800px; top: 2200px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-17" data-left="2975" data-top="2200" style="left: 2975px; top: 2200px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-18" data-left="3150" data-top="2200" style="left: 3150px; top: 2200px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-19" data-left="3325" data-top="2200" style="left: 3325px; top: 2200px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-20" data-left="3500" data-top="2200" style="left: 3500px; top: 2200px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-21" data-left="3675" data-top="2200" style="left: 3675px; top: 2200px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-22" data-left="3850" data-top="2200" style="left: 3850px; top: 2200px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-23" data-left="4025" data-top="2200" style="left: 4025px; top: 2200px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-0" data-left="87.5" data-top="2337.5" style="left: 87.5px; top: 2337.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-1" data-left="262.5" data-top="2337.5" style="left: 262.5px; top: 2337.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-2" data-left="437.5" data-top="2337.5" style="left: 437.5px; top: 2337.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-3" data-left="612.5" data-top="2337.5" style="left: 612.5px; top: 2337.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-4" data-left="787.5" data-top="2337.5" style="left: 787.5px; top: 2337.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-5" data-left="962.5" data-top="2337.5" style="left: 962.5px; top: 2337.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-6" data-left="1137.5" data-top="2337.5" style="left: 1137.5px; top: 2337.5px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-7" data-left="1312.5" data-top="2337.5" style="left: 1312.5px; top: 2337.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-8" data-left="1487.5" data-top="2337.5" style="left: 1487.5px; top: 2337.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-9" data-left="1662.5" data-top="2337.5" style="left: 1662.5px; top: 2337.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-10" data-left="1837.5" data-top="2337.5" style="left: 1837.5px; top: 2337.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-11" data-left="2012.5" data-top="2337.5" style="left: 2012.5px; top: 2337.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-12" data-left="2187.5" data-top="2337.5" style="left: 2187.5px; top: 2337.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-13" data-left="2362.5" data-top="2337.5" style="left: 2362.5px; top: 2337.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-14" data-left="2537.5" data-top="2337.5" style="left: 2537.5px; top: 2337.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-15" data-left="2712.5" data-top="2337.5" style="left: 2712.5px; top: 2337.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-16" data-left="2887.5" data-top="2337.5" style="left: 2887.5px; top: 2337.5px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-17" data-left="3062.5" data-top="2337.5" style="left: 3062.5px; top: 2337.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-18" data-left="3237.5" data-top="2337.5" style="left: 3237.5px; top: 2337.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-19" data-left="3412.5" data-top="2337.5" style="left: 3412.5px; top: 2337.5px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-20" data-left="3587.5" data-top="2337.5" style="left: 3587.5px; top: 2337.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-21" data-left="3762.5" data-top="2337.5" style="left: 3762.5px; top: 2337.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-22" data-left="3937.5" data-top="2337.5" style="left: 3937.5px; top: 2337.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-23" data-left="4112.5" data-top="2337.5" style="left: 4112.5px; top: 2337.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-0" data-left="0" data-top="2475" style="left: 0px; top: 2475px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-1" data-left="175" data-top="2475" style="left: 175px; top: 2475px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-2" data-left="350" data-top="2475" style="left: 350px; top: 2475px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-3" data-left="525" data-top="2475" style="left: 525px; top: 2475px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-4" data-left="700" data-top="2475" style="left: 700px; top: 2475px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-5" data-left="875" data-top="2475" style="left: 875px; top: 2475px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-6" data-left="1050" data-top="2475" style="left: 1050px; top: 2475px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-7" data-left="1225" data-top="2475" style="left: 1225px; top: 2475px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-8" data-left="1400" data-top="2475" style="left: 1400px; top: 2475px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-9" data-left="1575" data-top="2475" style="left: 1575px; top: 2475px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-10" data-left="1750" data-top="2475" style="left: 1750px; top: 2475px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-11" data-left="1925" data-top="2475" style="left: 1925px; top: 2475px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-12" data-left="2100" data-top="2475" style="left: 2100px; top: 2475px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-13" data-left="2275" data-top="2475" style="left: 2275px; top: 2475px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-14" data-left="2450" data-top="2475" style="left: 2450px; top: 2475px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-15" data-left="2625" data-top="2475" style="left: 2625px; top: 2475px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-16" data-left="2800" data-top="2475" style="left: 2800px; top: 2475px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-17" data-left="2975" data-top="2475" style="left: 2975px; top: 2475px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-18" data-left="3150" data-top="2475" style="left: 3150px; top: 2475px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-19" data-left="3325" data-top="2475" style="left: 3325px; top: 2475px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-20" data-left="3500" data-top="2475" style="left: 3500px; top: 2475px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-21" data-left="3675" data-top="2475" style="left: 3675px; top: 2475px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-22" data-left="3850" data-top="2475" style="left: 3850px; top: 2475px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-23" data-left="4025" data-top="2475" style="left: 4025px; top: 2475px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-0" data-left="87.5" data-top="2612.5" style="left: 87.5px; top: 2612.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-1" data-left="262.5" data-top="2612.5" style="left: 262.5px; top: 2612.5px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-2" data-left="437.5" data-top="2612.5" style="left: 437.5px; top: 2612.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-3" data-left="612.5" data-top="2612.5" style="left: 612.5px; top: 2612.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-4" data-left="787.5" data-top="2612.5" style="left: 787.5px; top: 2612.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-5" data-left="962.5" data-top="2612.5" style="left: 962.5px; top: 2612.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-6" data-left="1137.5" data-top="2612.5" style="left: 1137.5px; top: 2612.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-7" data-left="1312.5" data-top="2612.5" style="left: 1312.5px; top: 2612.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-8" data-left="1487.5" data-top="2612.5" style="left: 1487.5px; top: 2612.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-9" data-left="1662.5" data-top="2612.5" style="left: 1662.5px; top: 2612.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-10" data-left="1837.5" data-top="2612.5" style="left: 1837.5px; top: 2612.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-11" data-left="2012.5" data-top="2612.5" style="left: 2012.5px; top: 2612.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-12" data-left="2187.5" data-top="2612.5" style="left: 2187.5px; top: 2612.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-13" data-left="2362.5" data-top="2612.5" style="left: 2362.5px; top: 2612.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-14" data-left="2537.5" data-top="2612.5" style="left: 2537.5px; top: 2612.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-15" data-left="2712.5" data-top="2612.5" style="left: 2712.5px; top: 2612.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-16" data-left="2887.5" data-top="2612.5" style="left: 2887.5px; top: 2612.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-17" data-left="3062.5" data-top="2612.5" style="left: 3062.5px; top: 2612.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-18" data-left="3237.5" data-top="2612.5" style="left: 3237.5px; top: 2612.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-19" data-left="3412.5" data-top="2612.5" style="left: 3412.5px; top: 2612.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-20" data-left="3587.5" data-top="2612.5" style="left: 3587.5px; top: 2612.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-21" data-left="3762.5" data-top="2612.5" style="left: 3762.5px; top: 2612.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-22" data-left="3937.5" data-top="2612.5" style="left: 3937.5px; top: 2612.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-23" data-left="4112.5" data-top="2612.5" style="left: 4112.5px; top: 2612.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-0" data-left="0" data-top="2750" style="left: 0px; top: 2750px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-1" data-left="175" data-top="2750" style="left: 175px; top: 2750px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-2" data-left="350" data-top="2750" style="left: 350px; top: 2750px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-3" data-left="525" data-top="2750" style="left: 525px; top: 2750px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-4" data-left="700" data-top="2750" style="left: 700px; top: 2750px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-5" data-left="875" data-top="2750" style="left: 875px; top: 2750px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-6" data-left="1050" data-top="2750" style="left: 1050px; top: 2750px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-7" data-left="1225" data-top="2750" style="left: 1225px; top: 2750px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-8" data-left="1400" data-top="2750" style="left: 1400px; top: 2750px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-9" data-left="1575" data-top="2750" style="left: 1575px; top: 2750px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-10" data-left="1750" data-top="2750" style="left: 1750px; top: 2750px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-11" data-left="1925" data-top="2750" style="left: 1925px; top: 2750px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-12" data-left="2100" data-top="2750" style="left: 2100px; top: 2750px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-13" data-left="2275" data-top="2750" style="left: 2275px; top: 2750px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-14" data-left="2450" data-top="2750" style="left: 2450px; top: 2750px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-15" data-left="2625" data-top="2750" style="left: 2625px; top: 2750px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-16" data-left="2800" data-top="2750" style="left: 2800px; top: 2750px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-17" data-left="2975" data-top="2750" style="left: 2975px; top: 2750px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-18" data-left="3150" data-top="2750" style="left: 3150px; top: 2750px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-19" data-left="3325" data-top="2750" style="left: 3325px; top: 2750px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-20" data-left="3500" data-top="2750" style="left: 3500px; top: 2750px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-21" data-left="3675" data-top="2750" style="left: 3675px; top: 2750px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-22" data-left="3850" data-top="2750" style="left: 3850px; top: 2750px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-23" data-left="4025" data-top="2750" style="left: 4025px; top: 2750px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-0" data-left="87.5" data-top="2887.5" style="left: 87.5px; top: 2887.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-1" data-left="262.5" data-top="2887.5" style="left: 262.5px; top: 2887.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-2" data-left="437.5" data-top="2887.5" style="left: 437.5px; top: 2887.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-3" data-left="612.5" data-top="2887.5" style="left: 612.5px; top: 2887.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-4" data-left="787.5" data-top="2887.5" style="left: 787.5px; top: 2887.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-5" data-left="962.5" data-top="2887.5" style="left: 962.5px; top: 2887.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-6" data-left="1137.5" data-top="2887.5" style="left: 1137.5px; top: 2887.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-7" data-left="1312.5" data-top="2887.5" style="left: 1312.5px; top: 2887.5px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-8" data-left="1487.5" data-top="2887.5" style="left: 1487.5px; top: 2887.5px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-9" data-left="1662.5" data-top="2887.5" style="left: 1662.5px; top: 2887.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-10" data-left="1837.5" data-top="2887.5" style="left: 1837.5px; top: 2887.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-11" data-left="2012.5" data-top="2887.5" style="left: 2012.5px; top: 2887.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-12" data-left="2187.5" data-top="2887.5" style="left: 2187.5px; top: 2887.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-13" data-left="2362.5" data-top="2887.5" style="left: 2362.5px; top: 2887.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-14" data-left="2537.5" data-top="2887.5" style="left: 2537.5px; top: 2887.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-15" data-left="2712.5" data-top="2887.5" style="left: 2712.5px; top: 2887.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-16" data-left="2887.5" data-top="2887.5" style="left: 2887.5px; top: 2887.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-17" data-left="3062.5" data-top="2887.5" style="left: 3062.5px; top: 2887.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-18" data-left="3237.5" data-top="2887.5" style="left: 3237.5px; top: 2887.5px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-19" data-left="3412.5" data-top="2887.5" style="left: 3412.5px; top: 2887.5px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-20" data-left="3587.5" data-top="2887.5" style="left: 3587.5px; top: 2887.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-21" data-left="3762.5" data-top="2887.5" style="left: 3762.5px; top: 2887.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-22" data-left="3937.5" data-top="2887.5" style="left: 3937.5px; top: 2887.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-23" data-left="4112.5" data-top="2887.5" style="left: 4112.5px; top: 2887.5px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-0" data-left="0" data-top="3025" style="left: 0px; top: 3025px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-1" data-left="175" data-top="3025" style="left: 175px; top: 3025px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-2" data-left="350" data-top="3025" style="left: 350px; top: 3025px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-3" data-left="525" data-top="3025" style="left: 525px; top: 3025px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-4" data-left="700" data-top="3025" style="left: 700px; top: 3025px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-5" data-left="875" data-top="3025" style="left: 875px; top: 3025px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-6" data-left="1050" data-top="3025" style="left: 1050px; top: 3025px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-7" data-left="1225" data-top="3025" style="left: 1225px; top: 3025px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-8" data-left="1400" data-top="3025" style="left: 1400px; top: 3025px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-9" data-left="1575" data-top="3025" style="left: 1575px; top: 3025px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-10" data-left="1750" data-top="3025" style="left: 1750px; top: 3025px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-11" data-left="1925" data-top="3025" style="left: 1925px; top: 3025px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-12" data-left="2100" data-top="3025" style="left: 2100px; top: 3025px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-13" data-left="2275" data-top="3025" style="left: 2275px; top: 3025px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-14" data-left="2450" data-top="3025" style="left: 2450px; top: 3025px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-15" data-left="2625" data-top="3025" style="left: 2625px; top: 3025px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-16" data-left="2800" data-top="3025" style="left: 2800px; top: 3025px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-17" data-left="2975" data-top="3025" style="left: 2975px; top: 3025px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-18" data-left="3150" data-top="3025" style="left: 3150px; top: 3025px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-19" data-left="3325" data-top="3025" style="left: 3325px; top: 3025px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-20" data-left="3500" data-top="3025" style="left: 3500px; top: 3025px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-21" data-left="3675" data-top="3025" style="left: 3675px; top: 3025px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-22" data-left="3850" data-top="3025" style="left: 3850px; top: 3025px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-23" data-left="4025" data-top="3025" style="left: 4025px; top: 3025px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-0" data-left="87.5" data-top="3162.5" style="left: 87.5px; top: 3162.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-1" data-left="262.5" data-top="3162.5" style="left: 262.5px; top: 3162.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-2" data-left="437.5" data-top="3162.5" style="left: 437.5px; top: 3162.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-3" data-left="612.5" data-top="3162.5" style="left: 612.5px; top: 3162.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-4" data-left="787.5" data-top="3162.5" style="left: 787.5px; top: 3162.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-5" data-left="962.5" data-top="3162.5" style="left: 962.5px; top: 3162.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-6" data-left="1137.5" data-top="3162.5" style="left: 1137.5px; top: 3162.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-7" data-left="1312.5" data-top="3162.5" style="left: 1312.5px; top: 3162.5px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-8" data-left="1487.5" data-top="3162.5" style="left: 1487.5px; top: 3162.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-9" data-left="1662.5" data-top="3162.5" style="left: 1662.5px; top: 3162.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-10" data-left="1837.5" data-top="3162.5" style="left: 1837.5px; top: 3162.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-11" data-left="2012.5" data-top="3162.5" style="left: 2012.5px; top: 3162.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-12" data-left="2187.5" data-top="3162.5" style="left: 2187.5px; top: 3162.5px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-13" data-left="2362.5" data-top="3162.5" style="left: 2362.5px; top: 3162.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-14" data-left="2537.5" data-top="3162.5" style="left: 2537.5px; top: 3162.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-15" data-left="2712.5" data-top="3162.5" style="left: 2712.5px; top: 3162.5px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-16" data-left="2887.5" data-top="3162.5" style="left: 2887.5px; top: 3162.5px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-17" data-left="3062.5" data-top="3162.5" style="left: 3062.5px; top: 3162.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-18" data-left="3237.5" data-top="3162.5" style="left: 3237.5px; top: 3162.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-19" data-left="3412.5" data-top="3162.5" style="left: 3412.5px; top: 3162.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-20" data-left="3587.5" data-top="3162.5" style="left: 3587.5px; top: 3162.5px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-21" data-left="3762.5" data-top="3162.5" style="left: 3762.5px; top: 3162.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-22" data-left="3937.5" data-top="3162.5" style="left: 3937.5px; top: 3162.5px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-23" data-left="4112.5" data-top="3162.5" style="left: 4112.5px; top: 3162.5px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-0" data-left="0" data-top="3300" style="left: 0px; top: 3300px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-1" data-left="175" data-top="3300" style="left: 175px; top: 3300px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-2" data-left="350" data-top="3300" style="left: 350px; top: 3300px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-3" data-left="525" data-top="3300" style="left: 525px; top: 3300px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-4" data-left="700" data-top="3300" style="left: 700px; top: 3300px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-5" data-left="875" data-top="3300" style="left: 875px; top: 3300px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-6" data-left="1050" data-top="3300" style="left: 1050px; top: 3300px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-7" data-left="1225" data-top="3300" style="left: 1225px; top: 3300px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-8" data-left="1400" data-top="3300" style="left: 1400px; top: 3300px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-9" data-left="1575" data-top="3300" style="left: 1575px; top: 3300px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-10" data-left="1750" data-top="3300" style="left: 1750px; top: 3300px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-11" data-left="1925" data-top="3300" style="left: 1925px; top: 3300px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-12" data-left="2100" data-top="3300" style="left: 2100px; top: 3300px" class="particle particle__over-mobile">
<div style="background: #4A90E2" class="particle__inner">
</div>
</div>
<div id="js-particle-13" data-left="2275" data-top="3300" style="left: 2275px; top: 3300px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-14" data-left="2450" data-top="3300" style="left: 2450px; top: 3300px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-15" data-left="2625" data-top="3300" style="left: 2625px; top: 3300px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-16" data-left="2800" data-top="3300" style="left: 2800px; top: 3300px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-17" data-left="2975" data-top="3300" style="left: 2975px; top: 3300px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-18" data-left="3150" data-top="3300" style="left: 3150px; top: 3300px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-19" data-left="3325" data-top="3300" style="left: 3325px; top: 3300px" class="particle particle__over-mobile">
<div style="background: #11CDC5" class="particle__inner">
</div>
</div>
<div id="js-particle-20" data-left="3500" data-top="3300" style="left: 3500px; top: 3300px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
<div id="js-particle-21" data-left="3675" data-top="3300" style="left: 3675px; top: 3300px" class="particle particle__over-mobile">
<div style="background: #c1c1c1" class="particle__inner">
</div>
</div>
<div id="js-particle-22" data-left="3850" data-top="3300" style="left: 3850px; top: 3300px" class="particle particle__over-mobile">
<div style="background: #FC2D79" class="particle__inner">
</div>
</div>
<div id="js-particle-23" data-left="4025" data-top="3300" style="left: 4025px; top: 3300px" class="particle particle__over-mobile">
<div style="background: #FCB635" class="particle__inner">
</div>
</div>
</div>
</div>

<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/howler/1.1.26/howler.min.js'></script><script src='https://cdn.jsdelivr.net/mojs/0.119.0/mo.min.js'></script><script src='https://cdn.jsdelivr.net/hammerjs/2.0.4/hammer.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.1/iscroll-probe.min.js'></script>

<script>
'use strict';
var main = {
  init: function init(o) {
    var _this = this;
    this.vars();this.initContainer();this.initClose();this.initHideClose();
    this.prepareSprites();this.events();this.draw();
    setInterval(function () {
      _this.updateProgress(false);
    }, 10);
    return this;
  },
  initContainer: function initContainer() {
    this.iscroll = new IScroll('#js-wrapper', {
      scrollX: true, freeScroll: true, mouseWheel: true, probeType: 3
    });
    var x = -this.centerX + this.wWidth / 2 + this.xOffset,
        y = -this.centerY + this.wHeight / 2 + this.yOffset;
    this.iscroll.scrollTo(x, y, 10);
  },
  vars: function vars() {
    this.S = 1;this.loadCnt = 0;this.maxLoadCnt = 8;
    this.BLOB_DURATION = 500;
    this.ext = this.isCanPlayMP3() ? 'mp3' : 'wav';
    this.isIE = this.isIE();
    this.isIOS = !!/(iPad|iPhone|iPod)/g.test(navigator.userAgent);
    this.isIOS && document.body.classList.add('ios');
    !this.isTabletMobile && document.body.classList.add('desktop');
    this.progressStep = 150 / this.maxLoadCnt * (1 / 16);

    this.getDOMElements();

    this.particleRadius = parseInt(getComputedStyle(this.particles[0]).width, 10) / 2;
    this.particlesLength = this.particles.length;

    this.radPoint = mojs.helpers.getRadialPoint;
    this.particleBuffer = null;this.isOpen = false;
    this.blobBase = 1.6;this.blob = this.blobBase;this.blobShift = this.blobBase;
    this.xOffset = this.particleRadius + 25;
    this.yOffset = 1.4 * this.particleRadius;

    var styles = getComputedStyle(this.particlesContainer);
    this.width = parseInt(styles.width, 10);this.height = parseInt(styles.height, 10);

    this.prepareDust();this.calcDimentions();this.loadAssets();

    var i = this.particlesLength;
    while (i--) {
      var particle = this.particles[i];
      particle.x = parseInt(particle.getAttribute('data-left'), 10);
      particle.y = parseInt(particle.getAttribute('data-top'), 10);
    }
  },
  getDOMElements: function getDOMElements() {
    this.particlesContainer = document.querySelector('#scroller');
    this.particles = document.querySelectorAll('.particle');
    this.closeBtn = document.querySelector('#js-close-btn');
    this.blobCircle = document.querySelector('#js-blob-circle');
    this.blobEllipses = this.blobCircle.querySelectorAll('#js-blob-circle-ellipse');
    this.dust1 = document.querySelector('#js-dust-1');
    this.dust2 = document.querySelector('#js-dust-2');
    this.dust3 = document.querySelector('#js-dust-3');
    this.dust4 = document.querySelector('#js-dust-4');
    this.content = document.querySelector('#js-content');
    this.curtain = document.querySelector('#js-curtain');
    this.progress = document.querySelector('#js-progress');
    this.progressGrad = document.querySelector('#js-progress-gradient');
  },
  draw: function draw() {
    var origin = this.bubleCenter.x + 'px ' + this.bubleCenter.y + 'px',
        h = mojs.h,
        inEasing = mojs.easing.cubic.in,
        i = this.particlesLength;

    h.setPrefixedStyle(this.particlesContainer, 'perspective-origin', origin);

    while (i--) {
      this.particleBuffer = this.particles[i];
      var x = Math.abs(this.bubleCenter.x - this.particleBuffer.x),
          y = Math.abs(this.bubleCenter.y - this.particleBuffer.y),
          radius = Math.sqrt(x * x + y * y),
          a = this.blob - 2 * radius / this.size,
          b = this.blobShift - 2 * radius / this.size,
          scaleMax = 1;

      var delta = mojs.helpers.clamp(inEasing(a), 0.03, scaleMax),
          deltaShift = h.clamp(inEasing(b), 0.03, scaleMax),
          isDeltaChanged = this.particleBuffer.prevDelta !== delta;

      if (isDeltaChanged || this.particleBuffer.prevDeltaShift !== deltaShift) {
        var translateZ = -150 * inEasing(1 - deltaShift),
            transform = 'scale(' + delta + ') translateZ(' + translateZ + 'px)';
        h.setPrefixedStyle(this.particleBuffer, 'transform', transform);
        this.particleBuffer.prevDelta = delta;
        this.particleBuffer.prevDeltaShift = deltaShift;
      }
    }
    requestAnimationFrame(this.draw.bind(this));
  },
  calcDimentions: function calcDimentions() {
    this.wWidth = window.innerWidth;this.wHeight = window.innerHeight;
    this.centerY = this.height / 2 - this.wHeight / 2;
    this.centerX = this.width / 2 - this.wWidth / 2;
    this.bubleCenter = { x: this.centerX, y: this.centerY };
    var x = Math.sqrt(this.wHeight * this.wHeight),
        y = Math.sqrt(this.wWidth * this.wWidth);
    this.size = 1 * Math.min(x, y);
  },
  start: function start() {
    this.curtain.classList.add('is-hide');this.startBlob();
  },
  startBlob: function startBlob() {
    var _this2 = this;

    var tween = new mojs.Tween();
    var t = new mojs.Timeline({
      duration: 1200 * this.S,
      onUpdate: function onUpdate(p) {
        _this2.blob = _this2.blobBase + .3 * (1 - mojs.easing.elastic.out(p));
      }
    });

    var centerX = this.bubleCenter.x,
        centerY = this.bubleCenter.y;

    var t2 = new mojs.Timeline({
      duration: 1200 * this.S, delay: 0 * this.S,
      onUpdate: function onUpdate(p) {
        _this2.blobShift = _this2.blobBase + .5 * (1 - mojs.easing.elastic.out(p));
      },
      onStart: function onStart() {
        _this2.closeScaleSound.play();
      }
    });
    tween.add(t, t2);tween.start();
  },
  updateProgress: function updateProgress() {
    var isReturn = arguments.length <= 0 || arguments[0] === undefined ? true : arguments[0];

    if (isReturn) {
      return;
    }
    var shift = (this.maxLoadCnt - ++this.loadCnt) * this.progressStep;
    this.progress.style.width = shift + 'rem';
    mojs.h.setPrefixedStyle(this.progressGrad, 'transform', 'translateX(-' + this.loadCnt * this.progressStep / 1.3 + 'rem)');
    this.loadCnt === this.maxLoadCnt && this.start();
  },
  loadAssets: function loadAssets() {
    this.openSound = new Howl({ urls: ['https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/open-bubble-2.' + this.ext], onload: this.updateProgress.bind(this) });
    this.openSound2 = new Howl({ urls: ['https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/open-bubble-3.' + this.ext], rate: .15, onload: this.updateProgress.bind(this) });
    this.bounceSound = new Howl({ urls: ['https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/bounce.' + this.ext] });
    this.closeSound = new Howl({ urls: ['https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/bubble-single-1.' + this.ext], rate: .5, onload: this.updateProgress.bind(this) });
    this.closeSound2 = new Howl({ urls: ['https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/bubble-single-1.' + this.ext], rate: .75, onload: this.updateProgress.bind(this) });
    this.closeSound3 = new Howl({ urls: ['https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/bubble-single-1.' + this.ext], rate: .85, onload: this.updateProgress.bind(this) });
    this.closeScaleSound = new Howl({ urls: ['https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/open-bubble-3.' + this.ext], rate: .25, onload: this.updateProgress.bind(this) });
    this.closeBtnSound = new Howl({ urls: ['https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/open-bubble-3.' + this.ext], rate: 1, onload: this.updateProgress.bind(this) });
    this.loadImage('https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/mojs-logo.png');
  },
  loadImage: function loadImage(url) {
    var image = new Image();
    image.addEventListener('load', this.updateProgress.bind(this), false);
    image.addEventListener('error', this.updateProgress.bind(this), false);
    image.src = url;
  },
  isCanPlayMP3: function isCanPlayMP3() {
    var userAgent = navigator.userAgent;
    return !(userAgent.indexOf("Opera") && userAgent.indexOf('firefox') > -1);
  },
  isIE: function isIE() {
    return !!(window.navigator.msPointerEnabled && !window.PointerEvent);
  },
  isTabletMobile: function () {
    return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
    );
  }(),

  setBubblePosition: function setBubblePosition() {
    this.bubleCenter.x = -this.iscroll.x + this.wWidth / 2 + this.xOffset;
    this.bubleCenter.y = -this.iscroll.y + this.wHeight / 2 + this.yOffset;
  },

  events: function events() {
    var _this3 = this;

    window.addEventListener('resize', function () {
      _this3.calcDimentions();_this3.setBubblePosition();
    });
    new Hammer(document.body).on('tap', function (e) {
      var el = e.target.parentNode;
      if (_this3.isOpen) {
        return e.preventDefault();
      }
      if (el.classList.contains('particle')) {
        _this3.showOnEl(el);
      } else if (el.parentNode.classList.contains('particle')) {
        _this3.showOnEl(el.parentNode);
      }
    });
    new Hammer(this.closeBtn).on('tap', this.closeEl.bind(this));
    document.addEventListener('touchmove', function (e) {
      e.preventDefault();
    }, false);
    this.iscroll.on('scroll', this.setBubblePosition.bind(this));
  },
  initClose: function initClose() {
    var _this4 = this;

    var dur = 400 * this.S;
    var closeOption = {
      parent: document.querySelector('#js-close-btn'),
      type: 'circle',
      radius: { 0: 15 },
      fill: 'transparent',
      stroke: 'white',
      strokeWidth: { 5: 0 },
      x: '50%', y: '50%',
      duration: dur,
      isRunLess: true
    };
    this.closeCircle = new mojs.Transit(closeOption);

    var closeCrossOption = {
      type: 'cross',
      delay: .4 * dur,
      angle: 45,
      strokeWidth: 2,
      radius: { 0: 8 },
      isShowEnd: true,
      onStart: function onStart() {
        _this4.closeSound.play();
      }
    };
    mojs.h.extend(closeCrossOption, closeOption);
    this.closeCross = new mojs.Transit(closeCrossOption);

    var closeBurstOption = {
      type: 'line',
      radius: { 0: 30 },
      strokeWidth: { 4: 0 },
      delay: .4 * dur,
      childOptions: { radius: { 5: 0 } }
    };
    mojs.h.extend(closeBurstOption, closeOption);
    this.closeBurst = new mojs.Burst(closeBurstOption);

    var closeOption2 = {
      parent: document.querySelector('#js-close-btn'),
      type: 'circle',
      radius: { 0: 10 },
      fill: 'transparent',
      stroke: 'white',
      strokeWidth: { 5: 0 },
      x: '-20%', y: '-50%',
      isRunLess: true,
      delay: .7 * dur,
      duration: 400 * this.S,
      onStart: function onStart() {
        _this4.closeSound2.play();
      }
    };
    this.closeCircle2 = new mojs.Transit(closeOption2);

    var closeOption3 = {
      x: '80%', y: '-30%',
      radius: { 0: 6 },
      delay: 1.1 * dur,
      duration: 300 * this.S,
      onStart: function onStart() {
        _this4.closeSound3.play();
      }
    };
    mojs.h.extend(closeOption3, closeOption2);
    this.closeCircle3 = new mojs.Transit(closeOption3);

    var closeOption4 = {
      x: '50%', y: '130%',
      radius: { 0: 4 },
      delay: .9 * dur,
      duration: 200 * this.S,
      onStart: function onStart() {
        _this4.closeSound3.play();
      }
    };
    mojs.h.extend(closeOption4, closeOption2);
    this.closeCircle4 = new mojs.Transit(closeOption4);

    this.showCloseBtnTween = new mojs.Tween();
    this.showCloseBtnTween.add(this.closeCircle.tween, this.closeCircle2.tween, this.closeCircle3.tween, this.closeCircle4.tween, this.closeCross.tween, this.closeBurst.tween);
  },
  showClose: function showClose() {
    this.closeBtn.classList.add('is-show');this.showCloseBtnTween.start();
  },
  initHideClose: function initHideClose() {
    var _this5 = this;

    this.hideBurst = new mojs.Burst({
      x: '50%', y: '50%',
      parent: this.closeBtn,
      radius: { 0: 100 },
      type: 'circle',
      fill: 'white',
      degree: 25,
      isSwirl: true,
      randomRadius: 1,
      isRunLess: true,
      childOptions: { radius: { 'rand(12,5)': 0 } },
      duration: 500 * this.S,
      onUpdate: function onUpdate(p) {
        p = mojs.easing.cubic.in(p);
        mojs.h.setPrefixedStyle(_this5.closeCross.el, 'transform', 'scale(' + (1 - p) + ')');
      },
      onStart: function onStart() {
        _this5.closeBtnSound.play();
      },
      onComplete: function onComplete() {
        _this5.closeBtn.classList.remove('is-show');
        mojs.h.setPrefixedStyle(_this5.closeCross.el, 'transform', 'none');
      }
    });
    this.hideCircle = new mojs.Transit({
      x: '50%', y: '50%',
      parent: this.closeBtn,
      type: 'circle',
      radius: { 0: 15 },
      fill: 'transparent',
      stroke: 'white',
      strokeWidth: { 8: 0 },
      isRunLess: true,
      duration: 500 * this.S
    });
  },
  hideClose: function hideClose() {
    this.hideBurst.run();this.hideCircle.run();
  },
  closeEl: function closeEl() {
    var _this6 = this;

    this.iscroll.enabled = true;this.isOpen = false;this.hideClose();

    var innerEl = this.currentEl.querySelector('.particle__inner'),
        scaleDownTween = new mojs.Tween();

    var scaleDownTimeline = new mojs.Timeline({
      duration: 500 * this.S,
      onUpdate: function onUpdate(p) {
        var np = 1 - p,
            npe = mojs.easing.cubic.inout(np),
            scaleSize = .75 + 18 * npe,
            scale = 'scale(' + scaleSize + ') translateZ(0)';

        mojs.h.setPrefixedStyle(innerEl, 'transform', scale);
        mojs.h.setPrefixedStyle(_this6.content, 'transform', 'scale(' + npe + ') translateZ(0)');
      }
    });

    var scaleDownSoundTimeline = new mojs.Timeline({
      delay: 0 * this.S, onStart: function onStart() {
        _this6.closeScaleSound.play();
      }
    });

    var scaleUpTimeline = new mojs.Timeline({
      duration: 1000 * this.S,
      onUpdate: function onUpdate(p) {
        var scaleSize = .75 + .25 * mojs.easing.elastic.out(p),
            scale = 'scale(' + scaleSize + ') translateZ(0)';
        mojs.h.setPrefixedStyle(innerEl, 'transform', scale);
      },
      onComplete: function onComplete() {
        if (_this6.isOpen) {
          return mojs.h.setPrefixedStyle(_this6.content, 'transform', 'translate3d(-5000px,-5000px,0)');
        }
        mojs.h.setPrefixedStyle(_this6.content, 'transform', 'translate3d(-5000px,-5000px,0)');
      }
    });
    scaleDownTween.add(scaleDownTimeline);scaleDownTween.append(scaleUpTimeline);

    var blobTween = new mojs.Tween();
    var blobShiftDownTimeline = new mojs.Timeline({
      duration: 1200 * this.S, delay: 300 * this.S,
      onUpdate: function onUpdate(p) {
        if (_this6.isOpen) {
          return;
        }
        _this6.blobShift = _this6.blobBase + (1 - mojs.easing.elastic.out(p));
      }
    });
    var blobDownTimeline = new mojs.Timeline({
      duration: 2100 * this.S, delay: 0 * this.S,
      onUpdate: function onUpdate(p) {
        if (_this6.isOpen) {
          return;
        }
        _this6.blob = _this6.blobBase + .3 * (1 - mojs.easing.elastic.out(p));
      }
    });

    blobTween.add(blobShiftDownTimeline, blobDownTimeline, scaleDownSoundTimeline);

    this.jellyTween = new mojs.Tween();
    this.jellyTween.add(scaleDownTween, blobTween);
    this.jellyTween.start();
  },
  moveTextEl: function moveTextEl(el, p) {
    p = mojs.easing.cubic.out(p);
    var transform = 'rotate(' + 90 * (1 - p) + 'deg) translateZ(0) translateY(' + 200 * (1 - p) + '%)',
        transformOrigin = 'left ' + 80 * p + '%';
    mojs.h.setPrefixedStyle(el, 'transform', transform);
    mojs.h.setPrefixedStyle(el, 'transform-origin', transformOrigin);
    el.style.opacity = mojs.easing.cubic.out(p);
  },

  prepareDust: function prepareDust() {
    this.dust1Spriter = new mojs.Spriter({
      el: this.dust1,
      duration: 300 * this.S,
      delay: 275 * this.S,
      isRunLess: true
    });
    this.dust2Spriter = new mojs.Spriter({
      el: this.dust2,
      duration: 200 * this.S,
      delay: 575 * this.S,
      isRunLess: true
    });
    this.dust3Spriter = new mojs.Spriter({
      el: this.dust3,
      duration: 100 * this.S,
      delay: 725 * this.S,
      isRunLess: true
    });
  },

  runDust: function runDust() {
    if (this.isTabletMobile || this.isIE) {
      return;
    };
    this.dust1Spriter.run();this.dust2Spriter.run();
    this.dust3Spriter.run();
  },

  showInnerPlastic: function showInnerPlastic(el) {
    var _this7 = this;

    var tween = new mojs.Tween(),
        image = el.querySelector('.image'),
        scene = el.querySelector('.shape'),
        shadow = el.querySelector('#js-shadow'),
        shadowWrap = el.querySelector('#js-shadow-wrap');

    this.runDust();

    var mp = new mojs.MotionPath({
      path: { x: -300, y: -300 },
      curvature: { x: '75%', y: '50%' },
      offsetX: 300,
      offsetY: 300,
      el: image,
      duration: this.isIE ? 200 * this.S : 1000 * this.S,
      easing: 'cubic.out',
      onPosit: function onPosit(p, x, y, angle) {
        p = mojs.easing.expo.out(mojs.easing.cubic.in(p));
        var rotate = 'rotateX(70deg) rotateZ(' + -60 * (1 - p) + 'deg)',
            translate = 'translateX(' + x + 'px) translateY(' + y + 'px)',
            scale = 'scaleY(' + (2.5 - 1.5 * p) + ')';
        mojs.h.setPrefixedStyle(shadow, 'transform', translate + ' ' + rotate + ' ' + scale);
        return 'translate3d(' + x + 'px, ' + y + 'px, 0)';
      }
    });

    var opacityEasing = mojs.easing.path('M0,0 C0,0 32.1191406,0.314142863 40.1669859,0 C40.1669859,0.165327852 50.9999996,-112.569017 74.0660521,0 C80.8905119,-16.0420643 87.1001393,-19.621745 92.0689049,0 C92.0689049,1.54522552 95.3231688,-14.8615687 100,0'),
        bounceEasing = mojs.easing.path('M0,100 C28.3125,98.6523445 39.0445328,8.99375039 40.1669859,0 C40.1669859,-0.0485295402 50.9999996,152.873952 74.0660521,0 C80.8905119,21.9365596 87.1001393,26.7923438 92.0689049,0 C92.0689049,-1.92034044 95.3231688,20.3352347 100,0');

    var timeline1 = new mojs.Timeline({
      duration: this.isIE ? 200 * this.S : 800 * this.S,
      onStart: function onStart() {
        mojs.h.setPrefixedStyle(_this7.content, 'transform', 'translate3d(0,0,0)');
      },
      onComplete: function onComplete() {
        _this7.showClose();
      },
      onUpdate: function onUpdate(p) {
        var b = mojs.easing.bounce.out(p),
            bin = mojs.easing.bounce.in(p),
            t = mojs.easing.cubic.out(p),
            rotate = 'rotateY(' + 90 * (1 - b) + 'deg) rotateX(' + 70 * (1 - t) + 'deg) rotateZ(' + 90 * (1 - t) + 'deg)',
            scale = 'scaleX(' + opacityEasing(p) + ')',
            transform = 'translate(' + (-300 * mojs.easing.bounce.in(1 - p) - 5) + 'px, 2px) ' + scale;
        mojs.h.setPrefixedStyle(scene, 'transform', '' + rotate);
        mojs.h.setPrefixedStyle(scene, 'transform-origin', 50 + 50 * t + '% 100%');
        mojs.h.setPrefixedStyle(shadowWrap, 'transform', transform);
        scene.style.opacity = mojs.easing.expo.out(p);
        shadow.style.opacity = .75 * bounceEasing(p);
      }
    });

    var soundTimeline = new mojs.Timeline({
      delay: 300 * this.S, onStart: function onStart() {
        if (_this7.isIE) {
          return;
        };_this7.bounceSound.play();
      }
    });

    tween.add(timeline1, soundTimeline);
    tween.start();
  },
  prepareSprites: function prepareSprites() {
    this.blobSprite = new mojs.Spriter({
      el: this.blobCircle,
      duration: this.BLOB_DURATION * this.S,
      isRunLess: true
    });
  },

  showInnerCircle: function showInnerCircle(x, y) {
    var _this8 = this;

    this.blobCircle.style.left = x + 'px';
    this.blobCircle.style.top = y + 'px';

    var tween = new mojs.Tween(),
        size = Math.min(this.wWidth, this.wHeight),
        borderWidth = Math.min(10 * mojs.easing.cubic.in(size / 800), 20),
        blobCircleSize = 30 + 2 * borderWidth,
        strokeStep = borderWidth / 2 / this.blobEllipses.length,
        i = 0;

    for (var i = 0; i < this.blobEllipses.length; i++) {
      var item = this.blobEllipses[i];
      item.setAttribute('stroke-width', borderWidth / 2 - i * strokeStep);
      item.setAttribute('rx', blobCircleSize / 2);
      item.setAttribute('ry', blobCircleSize / 2);
    };

    this.blobCircle.style.display = 'block';
    var blobCircleTm = new mojs.Timeline({
      duration: this.BLOB_DURATION * this.S,
      onStart: function onStart() {
        _this8.blobSprite.run();
        _this8.openSound.play();
      },
      onUpdate: function onUpdate(p) {
        var tr = 'scale(' + 28 * p + ') translateZ(0)';
        mojs.h.setPrefixedStyle(_this8.blobCircle, 'transform', tr);
        _this8.blobCircle.style.opacity = 1 * mojs.easing.cubic.in(1 - p);
      }
    });

    tween.add(blobCircleTm);
    tween.start();
  },

  showOnEl: function showOnEl(el) {
    var _this9 = this;

    this.prevEl = this.currentEl;this.currentEl = el;
    this.prevEl && (this.prevEl.style['z-index'] = 0);
    // return immediately on edges
    if (el.delta < .2) {
      return;
    }
    var x = el.x - this.wWidth / 2 - this.xOffset,
        y = el.y - this.wHeight / 2 - this.yOffset,
        innerEl = el.querySelector('.particle__inner'),
        contentEl = el.querySelector('.particle__content'),
        tween = new mojs.Tween();

    this.isOpen = true;el.style['z-index'] = 20;this.iscroll.enabled = false;
    this.showInnerCircle(el.x + 75, el.y + 75);this.iscroll.scrollTo(-x, -y, 500 * this.S);

    var soundTimeline = new mojs.Timeline({
      delay: 0 * this.S, onStart: function onStart() {
        _this9.openSound2.play();
      }
    });

    var scaleDownTween = new mojs.Timeline({
      duration: 300 * this.S, easing: 'expo.out',
      onUpdate: function onUpdate(p) {
        mojs.h.setPrefixedStyle(innerEl, 'transform', 'scale(' + (1 - .25 * p) + ') translateZ(0)');
        innerEl.style.opacity = 1 - .25 * p;
      }
    });

    var blobTimeline = new mojs.Timeline({
      duration: 600 * this.S, delay: 100 * this.S,
      onUpdate: function onUpdate(p) {
        _this9.blob = _this9.blobBase + .3 * mojs.easing.cubic.out(p);
        _this9.blobShift = _this9.blobBase + 1 * p;
      }
    });

    mojs.h.setPrefixedStyle(this.content, 'transform', 'translate3d(-5000px,-5000px,0)');

    var scaleUpTimeline = new mojs.Timeline({
      duration: 600 * this.S, delay: 350 * this.S,
      onUpdate: function onUpdate(p) {
        var scaleSize = 19 * mojs.easing.cubic.in(p);
        scaleSize = Math.max(.75, scaleSize);
        var scale = 'scale(' + scaleSize + ') translateZ(0)';
        mojs.h.setPrefixedStyle(innerEl, 'transform', scale);
        innerEl.style.opacity = .75 + .25 * mojs.easing.cubic.out(p);
      },
      onStart: function onStart() {
        setTimeout(function () {
          _this9.showInnerPlastic(_this9.content);
        }, 400);
      },
      onComplete: function onComplete() {
        _this9.blobCircle.style.display = 'none';
      }
    });

    tween.add(scaleDownTween, soundTimeline, blobTimeline, scaleUpTimeline);
    tween.start();
  }
};
main.init();
 
</script>

Bubble • Layout code by. Lego Mushroom
Design code is edited by. Mys2010 In Codepen

DEMOSHOW

If you want to directly copy  and  paste you canDownload Here  Bubble • Layout  

lihat juga Bubble • Layout dengan audio - Mp3 klik di sini   untuk • melihat  

Category: Bubble • Layout

Neon Hek with audio

Memasang Kode Neon Hek with audio
Login ke akun blog klik tombol blog baru, buat satubuah link baru   
kemudian beri nama sesuai fungsi,  klik Edit HTML pada link baru tersebut, 
hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut :  Get Blank Template.   edit background warna sesuai keinginan klik simpan selesai.

Kemudian klik entri halaman baru HTML pada link tersebut.
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style class="Mys2010-styles">
body {);color:red;height:100%;overflow:hidden;}
body {
  background: #151515;
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  1px 0;
  position: fixed;
  top: 0;
  width: 100%;
text-align: center;
text-shadow: 0px 0px #fff; 
font-size:  6px;
background: -moz-linear-gradient(top, #333 0%, rgba(53,02,01,1) 100%);
  border-bottom: 3px solid #dad; 
}
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 60px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
text-shadow: 0px 0px #FFf; 
font-size:  11px;
background:  #111;
border-top: 2px solid #f0f;
z-index: 9999;
} 
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #666 50%, transparent 90%); 
}

img {
  position: absolute;
  top:  109px;
  left: 578px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #f00;
  width: 211px;
  height: 212px;
  z-index: 3;
  opacity: 1;
  animation: photo-ani 7s forwards;
}
/* Keyframes */
@keyframes line-ani {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes photo-ani {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.M-2010 {
  background: #8080;
  color: #f00;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);}
canvas {
  position: absolute;
  width: 100%;
}
</style>

<canvas></canvas>
<canvas></canvas>
<div style="position: fixed; bottom: 160px; right: 430px;width:500px;height:300px;">
<h1 class="M-2010">
<center>
<p>
M-2010</p>
LOVE SONG 
</h1>
</div>
</div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Xyz00fR_NylgVh-uwZEYhZUzN5903V8wR0QJvIdltoMEAmmt3KSZVW8a69rommCIgXlTlQ4aMVJca9346KNzh2QHl7a7jc53m15tLgJAeSggOfI_QQtaluyLvsLCzrQBBWEhQamLYSA/s1600/iis-mys2010.jpg"  />

<div class="ap" id="ap">
<div align="center">
<h2>
<audio id="mys2010" src="https://sites.google.com/site/kodesite/svn/Iis-masih-mys2010.mp3"controls="controls"></audio></2></a> </div>
</div>
<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/06/neon-hek-with-audio.html" target="_blank" title="Mari Belajar">
<h2>
<span style="color:green; font-size: 10pt">LET'S STUDY</2></a> 
</div>
</header>

<div style="position: fixed; bottom: 399px; right: 507px;width:300px;height:30px;">
<a href="https://#" target="_blank" title="Source Code on Codepen">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXPeSBRYGveUdQH5S1ojAFrR914H9YM76RGmTyTusR8BAxZFMGwPm5Dj9MNGNp_Fiq8n0jJ6HOwgLrxAbzQL31i2GJczjOCoG41NqneyKRD3Srz0agCEx55Z8QMIBdPS8GYxrVpHa5_XM/s1600/love-mys2010.png" title="Source Code" width="10" height="10"></a> 
<div style="position: fixed; bottom: 370px; right: 1060px;width:300px;height:30px;">
<a href="http://#"title="Next Song">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnXfkfw6ke6Q1DnxhYB2ljomALm4HsxLipc6U2lU6D0o-NNu5VYGnF2m_WnVX4ErSOh8bBl9yHlXeV8ep2FBXXI8tzzQlMsMVBMdUsHg_HMff6b0SOWX53j_M_KIjwbN6v_B7jX4c3gMI/s1600/Logo-mys2010.png" title="Next Song" width="230" height="110"></a> 
<div style="position: fixed; bottom: 399px; left: -550px;width:300px;height:30px;">
<a href="https://#" title="Download Full Code">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn9j38y6U-Fl2jD7rLxeuetBXafvlgOUpQcDi8ROCCM7Is-BSz0Ze8t4cplSlGVoulBMVhbWwhn7mrME5xer_j8ggd7tUiMF0TKuemqLJeHEa0QgimuXplWu-NtOuWbPD_DlRe7L61afs/s1600/love-mys2010.png" title="Download Full Code" width="10" height="10"></a> 

<ul class="mys2010-list">
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>  
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script> 
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>   <script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'>
</script> 
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js">
</script>
<script src='//codepen.io/assets/libs/prefixfree.min.js'></script> <script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script> 

<script>
Object.getOwnPropertyNames(Math).map(function(p) {
 window[p] = Math[p];
});

var HEX_CRAD = 32, 
  HEX_BG = '#171717', 
  HEX_HL = '#2a2a2a', 
  HEX_HLW = 2, 
  HEX_GAP = 4, 
  NEON_PALETE = [
   '#0000FF', '#0000FF', 
   '#ff6666', '#feff99', 
   '#ffff67', '#ccff66', 
   '#99fe00', '#fe99ff', 
   '#ff99cb', '#fe349a', 
   '#cc99fe', '#6599ff', 
   '#00ccff', '#ffffff'
  ], 
  T_SWITCH = 64, 
  
  unit_x = 3*HEX_CRAD + HEX_GAP*sqrt(3), 
  unit_y = HEX_CRAD*sqrt(3)*.5 + .5*HEX_GAP, 
  off_x = 1.5*HEX_CRAD + HEX_GAP*sqrt(3)*.5, 
  
  /* extract a work palette */
  wp = NEON_PALETE.map(function(c) {
   var num = parseInt(c.replace('#', ''), 16);
   
   return {
    'r': num >> 16 & 0xFF, 
    'g': num >> 8 & 0xFF, 
    'b': num & 0xFF
   };
  }), 
  nwp = wp.length, csi = 0, 
  
  f = 1/T_SWITCH, 
  
  c = document.querySelectorAll('canvas'), 
  n = c.length, w, h, _min, 
  ctx = [], 
  grid, source = null, 
  t = 0, request_id = null;

var GridItem = function(x, y) {
 this.x = x || 0;
 this.y = y || 0;
 this.points = { 'hex': [], 'hl': [] };
 
 this.init = function() {
  var x, y, a, ba = PI/3, 
    ri = HEX_CRAD - .5*HEX_HLW;
  
  for(var i = 0; i < 6; i++) {
   a = i*ba;
   x = this.x + HEX_CRAD*cos(a);
   y = this.y + HEX_CRAD*sin(a);
   
   this.points.hex.push({
    'x': x, 
    'y': y
   });
   
   if(i > 2) {
    x = this.x + ri*cos(a);
    y = this.y + ri*sin(a);
    
    this.points.hl.push({
     'x': x, 
     'y': y
    });
   }
  }
 };
 
 this.draw  = function(ct) {
  for(var i = 0; i < 6; i++) {
   ct[(i === 0?'move':'line')+ 'To'](
    this.points.hex[i].x, 
    this.points.hex[i].y
   );
  }
 };
 
 this.highlight = function(ct) {
  for(var i = 0; i < 3; i++) {
   ct[(i === 0?'move':'line')+ 'To'](
    this.points.hl[i].x, 
    this.points.hl[i].y
   );
  }
 };
 
 this.init();
};

var Grid = function(rows, cols) {
 this.cols = cols || 16;
 this.rows = rows || 16;
 this.items = [];
 this.n = this.items.length;
 
 this.init = function() {
  var x, y;
  
  for(var row = 0; row < this.rows; row++) {
   y = row*unit_y;
   
   for(var col = 0; col < this.cols; col++) {
    x = ((row%2 == 0)?0:off_x) + col*unit_x;
    
    this.items.push(new GridItem(x, y));
   }
  }
  
  this.n = this.items.length;
 };
 
 this.draw = function(ct) {
  ct.fillStyle = HEX_BG;
  ct.beginPath();
  
  for(var i = 0; i < this.n; i++) {
   this.items[i].draw(ct);
  }
  
  ct.closePath();
  ct.fill();
  
  ct.strokeStyle = HEX_HL;
  ct.beginPath();
  
  for(var i = 0; i < this.n; i++) {
   this.items[i].highlight(ct);
  }
  
  ct.closePath();
  ct.stroke();
 };
 
 this.init();
};

var init = function() {
 var s = getComputedStyle(c[0]), 
   rows, cols;
 
 w = ~~s.width.split('px')[0];
 h = ~~s.height.split('px')[0];
 _min = .75*min(w, h);
 
 rows = ~~(h/unit_y) + 2;
 cols = ~~(w/unit_x) + 2;
 
 for(var i = 0; i < n; i++) {
  c[i].width = w;
  c[i].height = h;
  ctx[i] = c[i].getContext('2d');
 }
 
 grid = new Grid(rows, cols);
 grid.draw(ctx[1]);
 
 if(!source) {
  source = { 'x': ~~(w/2), 'y': ~~(h/2) };
 }
 
 neon();
};

var neon = function() {
 var k = (t%T_SWITCH)*f, 
   rgb = {
    'r': ~~(wp[csi].r*(1 - k) + 
       wp[(csi + 1)%nwp].r*k), 
    'g': ~~(wp[csi].g*(1 - k) + 
       wp[(csi + 1)%nwp].g*k), 
    'b': ~~(wp[csi].b*(1 - k) + 
       wp[(csi + 1)%nwp].b*k)
   }, 
   rgb_str = 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')', 
   light = ctx[0].createRadialGradient(
    source.x, source.y, 0, 
    source.x, source.y, .875*_min
   ), stp;
 
 stp = .5 - .5*sin(7*t*f)*cos(5*t*f)*sin(3*t*f);
   
 light.addColorStop(0, rgb_str);
 light.addColorStop(stp, 'rgba(0,0,0,.03)');
 
 fillBackground('rgba(0,0,0,.02)');
 fillBackground(light);
 
 t++;
 
 if(t%T_SWITCH === 0) {
  csi++;
  
  if(csi === nwp) {
   csi = 0;
   t = 0;
  }
 }
 
 request_id = requestAnimationFrame(neon);
};

var fillBackground = function(bg_fill) {
 ctx[0].fillStyle = bg_fill;
 ctx[0].beginPath();
 ctx[0].rect(0, 0, w, h);
 ctx[0].closePath();
 ctx[0].fill();
};

init();

addEventListener('resize', init, false);

addEventListener('mousemove', function(e) {
 source = { 'x': e.clientX, 'y': e.clientY };
}, false);
 
</script>

<script>
      $(function () {
    $('video,audio').mediaelementplayer({
        success: function (mediaElement, domObject) {
            var audio_src = $('li.current').attr('data-url');
            mediaElement.setSrc(audio_src);
            mediaElement.addEventListener('ended', function (e) {
                mys2010PlayNext(e.target);
            }, false);
        },
        keyActions: []
    });
    $('.mys2010-list li').click(function () {
        $(this).addClass('current').siblings().removeClass('current');
        var audio_src = $(this).attr('data-url');
        $('audio#mys2010:first').each(function () {
            this.player.pause();
            this.player.setSrc(audio_src);
            this.player.play();
        });
    });
});
function mys2010PlayNext(currentPlayer) {
    if ($('.mys2010-list li.current').length > 0) {
        var current_item = $('.mys2010-list li.current:first');
        var audio_src = $(current_item).next().text();
        $(current_item).next().addClass('current').siblings().removeClass('current');
        console.log('if ' + audio_src);
    } else {
        var current_item = $('.mys2010-list li:first');
        var audio_src = $(current_item).next().text();
        $(current_item).next().addClass('current').siblings().removeClass('current');
        console.log('elseif ' + audio_src);
    }
    if ($(current_item).is(':last-child')) {
        $(current_item).removeClass('current');
    } else {
        currentPlayer.setSrc(audio_src);
        currentPlayer.play();
    }
}
      
    </script> 

Neon Hek code by. Ana Tudor
Design code is edited by. Mys2010 In Codepen

DEMOSHOW

If you want to directly copy  and  paste you canDownload Here  Neon Hek with audio  

Category: Neon Hek with audio

Animated Frame

Memasang Kode Animated Frame
Login ke akun blog klik tombol blog baru, buat satubuah link baru   
kemudian beri nama sesuai fungsi,  klik Edit HTML pada link baru tersebut, 
hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut :  Get Blank Template.   edit background warna sesuai keinginan klik simpan selesai.

Kemudian klik entri halaman baru HTML pada link tersebut.
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style class="Mys2010-styles">
body {);color:red;height:100%;overflow:hidden;}
body {
  background: #151515;
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:   -7px 0;
  position: fixed;
  top: 0;
  width: 100%;
text-align: center;
text-shadow: 0px 0px #fff;  
font-size:  6px;
background: -moz-linear-gradient(top, #333 0%, rgba(53,02,01,1) 100%);
  border-bottom: 3px solid #dad;  
}
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 40px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 3px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
text-shadow: 0px 0px #FFf;  
font-size:   -1px;
background:  #111;
border-top: 2px solid #f0f;
z-index: 9999;
}  
h2 {
padding: 10px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #666 50%, transparent 90%); 
}
body::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0; 
background-image: linear-gradient(bottom, rgba(255,255,255,.3) 26%, rgb(188,52,255) 63%, rgba( 0, 0, 0, 0.8 ) 91%);
background-image: -o-linear-gradient(bottom, rgba(255,255,255,.3) 26%, rgb(188,52,255) 63%, rgba( 0, 0, 0, 0.8 ) 91%);
background-image: -moz-linear-gradient(bottom, rgba(255,255,255,.3) 26%, rgb(188,52,255) 63%, rgba( 0, 0, 0, 0.8 ) 91%);
background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,.3) 26%, rgb(188,52,255) 63%, rgba( 0, 0, 0, 0.8 ) 91%);
background-image: -ms-linear-gradient(bottom, rgba(255,255,255,.3) 26%, rgb(188,52,255) 63%, rgba( 0, 0, 0, 0.8 ) 91%);
  -webkit-animation: overlay infinite 12s;
          animation: overlay infinite 12s;
  content: '';
}
@-webkit-keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}
@keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}
@-webkit-keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@-webkit-keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}
@keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}
body {
    background: #333;
    padding-left:0px;}

h1 {
  text-align: center;
  font: bold 45px Sans-Serif;
  padding: 260px 0;
}
.otto {
  background: #8080;
  color: #888;
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);}
    body {
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbPaw9NJ48fhMHOrIT3df6gJngIPaLaQBS75JQfM6-NMk1h4xM6kPOzPxCB80MxJelR9z4hHDJv5PPFv7EXiayBPaxK5jugZJf2IvvxmYRjcDkadFUbxF5Ww5kvzBDO6oF5o_68_SodAg/s1600/anjing-mys2010.jpg");
 margin-top:-110px;
    background-repeat: no-repeat;
background-size: 300px 260px;
background-attachment: fixed;
    background-position: center;
 background-color: #242930; 
 
}
		body{ 
		margin-top:-59px;
		background-color:#B0E0E6;} 
		#box{
		margin:0 auto;
		position:relative;
		width:500px;
		height:500px;
		border:1px solid rgba(255,255,255,.4);
		box-shadow:inset 1px 1px 3px #4f4f4f, inset 1px 1px 3px #4f4f4f, inset -1px -1px 3px #4f4f4f, inset -1px -1px 3px #4f4f4f;}	
	
		#box:after{
		content:"";
		left:25px;
		top:25px;
		position:absolute;
		width:450px;
		height:450px;
		border:1px solid #4f4f4f;
		box-shadow:1px 1px 3px rgba(255,255,255,.4), 1px 1px 3px rgba(255,255,255,.4), -1px -1px 3px rgba(255,255,255,.4), -1px -1px 3px rgba(255,255,255,.4);		
		}		
		.box{
		opacity:0;}		
		#top{
		position:absolute;		
		top:3px;
		right:2px;		
		height:0px;
		width:60px;
		border-top:20px solid  #800080;
		border-left:22px solid transparent;
		border-right:22px solid transparent;
		-moz-animation:top 20s linear infinite;		
		}		
		@-moz-keyframes top{
		0%{right:2px;opacity:1;}
		25%{right:400px;opacity:1;}
		26%{opacity:0;}
		50%{opacity:0;}
		100%{opacity:0;}
		}
		
		#left{
		position:absolute;		
		top:2px;
		left:2px;				
		height:60px;
		width:0px;		
		border-left:22px solid  #0000FF;
		border-top:20px solid transparent;
		border-bottom:22px solid transparent;
		-moz-animation:left 20s linear 5s infinite;}		
		@-moz-keyframes left{
		0%{top:2px;opacity:1;}
		25%{top:400px;opacity:1;}
		26%{opacity:0;}
		50%{opacity:0;}
		100%{opacity:0;}
		}	
		
		#bottom{
		position:absolute;		
		left:2px;
		bottom:2px;		
		height:0px;
		width:60px;		
		border-bottom:20px solid  #483D8B;
		border-left:22px solid transparent;
		border-right:22px solid transparent;
		-moz-animation:bottom 20s linear 10s infinite;}		
		@-moz-keyframes bottom{
		0%{left:2px;opacity:1;}
		25%{left:400px;opacity:1;}
		26%{opacity:0;}
		50%{opacity:0;}
		100%{opacity:0;}
		}		
		#right{
		position:absolute;		
		bottom:2px;
		right:2px;		
		height:60px;
		width:0px;		
		border-right:22px solid #7B68EE;
		border-top:20px solid transparent;
		border-bottom:22px solid transparent;
		-moz-animation:right 20s linear 15s infinite;}		
		@-moz-keyframes right{
		0%{bottom:2px;opacity:1;}
		25%{bottom:400px;opacity:1;}
		26%{opacity:0;}
		50%{opacity:0;}
		100%{opacity:0;}
		}		
    </style>

<body translate="no" >
<div id="box">
<span id="top" class="box"></span>
<span id="left" class="box"></span> 
<span id="right" class="box"></span>
<span id="bottom" class="box"></span>
<h1 class="otto">
<p>
ANJING</p>
DACHSHUND
</h1>
</div>

<div class="ap" id="ap">
<div align="center">
<a href="https://Link Download-Mys2010s.css"title="Myscript2010s"><h2>
<span style="color:#dad; font-size: 10pt">DOWNLOAD FULL CODE</2></a>  
</div>
<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/05/animated-frame.html" target="_blank" title="Full Page">
<h2>
<span style="color:green; font-size: 10pt">LET'S STUDY</2></a>  
</div>
</header>

Frame code by. Astronaut
Design code is edited by. Mys2010 In Codepen

DEMOSHOW

If you want to directly copy  &  paste you canDownload Here  Animated Frame  

Youtube Ambilight with backgrounds

Memasang Kode Youtube Ambilight with backgrounds
Login ke akun blog klik tombol blog baru, buat satubuah link baru   
kemudian beri nama sesuai fungsi,  klik Edit HTML pada link baru tersebut, 
hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut :  Get Blank Template.   edit background warna sesuai keinginan klik simpan selesai.

Kemudian klik entri halaman baru HTML pada link tersebut.
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style>
body {);color:red;height:100%;overflow:hidden;}
body {
background: #151515;
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  1px 0;
  position: fixed;
  top: 0;
  width: 100%;
text-align: center;
text-shadow: 0px 0px #fff;  
font-size:  6px;
background: -moz-linear-gradient(top, #333 0%, rgba(53,02,01,1) 100%);
  border-bottom: 3px solid #dad;  
}
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 60px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
text-shadow: 0px 0px #FFf;  
font-size:  11px;
background:  #111;
border-top: 2px solid #f0f;
z-index: 9999;
}  
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #666 50%, transparent 90%); 
}
body::before {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:   #000 ;
  -webkit-animation: overlay infinite 12s;
          animation: overlay infinite 12s;
  content: '';
}

@-webkit-keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}

@keyframes transform {
  0%, 16% {
    opacity: 0;
    -webkit-transform: translateY(-50%) rotateX(-90deg);
            transform: translateY(-50%) rotateX(-90deg);
  }
  18% {
    opacity: 1;
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(-50%) rotateX(0deg);
            transform: translateY(-50%) rotateX(0deg);
  }
}
@-webkit-keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@keyframes overlay {
  0% {
    opacity: .5;
  }
  18%, 81% {
    opacity: 0;
  }
  92%, 100% {
    opacity: .5;
  }
}
@-webkit-keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}
@keyframes opacity {
  0%, 4% {
    opacity: 0;
  }
  18%, 81% {
    opacity: 1;
  }
  92%, 100% {
    opacity: 0;
  }
}
img {
width: 720px;
  height: 480px;
  position: center;
    margin-top:129px;
}
#tubular-container {
  filter: blur(50px) brightness(0.5);
  -webkit-filter: blur(50px) brightness(0.5);
  z-index: 0;
}
.video {
  width: 560px;
  height: 315px;
  position: absolute;
  top:-51px;
  left: 50px;
  right: 50px;
  bottom: 0;
  margin: auto;
  z-index: 100;
}
 </style>

<body translate="no" >    
<div class='video'>
</div>  
<p align="center">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh5HhoswRC9wL9ef14cmmVX2qadBG8yR5zqrxxoCLs1JtJpFzB3NWJCjlHhwT1rZuSeoHHYrQSNMG-wFoz3FHWDtmAxcbMANPErEfXSRu4OdUnGxBxiKfrx7U34XEesOBAryFt0UHWH3fJ/s1600-r/tele-mys2010.png" name="e902" border="0" width="716" height="540"></a> </center>
<div class="ap" id="ap">
<div align="center">
<a href="https://Link Download"title="Myscript2010s"> 
<h2>
<span style="color:#dad; font-size: 10pt">DOWNLOAD</2></a>  
</div>
<header>
<a href="http://demoshow-mys2010.blogspot.co.id/p/sebelum-dimodifikasi.html" target="_blank" title="Full Page">
<h2>
<span style="color:orange; font-size: 10pt">BEFORE MODIFICATION</2></a>  
</div>
</header>

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script> 
<script>
(function () {
    var ambilight;
    $(document).ready(function () {
        return ambilight.on('KSqttO3NtCg', '.video');
    });
    ambilight = {
        on: function (yt_id, container) {
            $(container).append('<iframe width="560" height="320" src="https://www.youtube.com/embed/Favl3kzWejA?list=RDcbV190MjKiU" frameborder="0" allowfullscreen></iframe>');
            return $('body').tubular({ videoId: yt_id });
        }
    };
}.call(this));
</script>

Youtube code by. Max
Design code is edited by. Mys2010 In Codepen

DEMOSHOW

If you want to directly copy  &  paste you canDownload Here  Youtube Ambilight  

Category: Youtube Ambilight with backgrounds change automatically

Exiting Hyperspace Circle

Memasang Kode Exiting Hyperspace Circle
Login ke akun blog klik tombol blog baru, buat satubuah link baru   
kemudian beri nama sesuai fungsi,  klik Edit HTML pada link baru tersebut, 
hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut :  Get Blank Template.   edit background warna sesuai keinginan klik simpan selesai.

Kemudian klik entri halaman baru HTML pada link tersebut.
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style class="Mys2010-styles">
body {);color:red;height:100%;overflow:hidden;}
body {
  background: #000;
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:   1px 0;
  position: fixed;
  top: 0;
  width: 100%;
text-align: center;
text-shadow: 0px 0px #fff;  
font-size:  6px;
background: -moz-linear-gradient(top, #333 0%, rgba(53,02,01,1) 100%);
  border-bottom: 3px solid #dad;  
}
.ap {
position: fixed;
right: 0;
bottom: 30px;
left: 0;
height: 50px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
text-shadow: 0px 0px #FFf;  
font-size:  11px;
background:  #111;
border-top: 2px solid #f0f;
z-index: 9999;
}  
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #666 50%, transparent 90%); 
}

.star {
  animation: star 10s ease-out infinite;
}
.wars {
  animation: wars 10s ease-out infinite;
}
.byline span {
  animation: spin-letters 10s linear infinite;
}
.byline {
  animation: move-byline 10s linear infinite;
}
/* Keyframes */
@keyframes star {
  0% {
    opacity: 0;
    transform: scale(1.5) translateY(-0.75em);
  }
  20% {
    opacity: 1;
  }
  89% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: translateZ(-1000em);
  }
}

@keyframes wars {
  0% {
    opacity: 0;
    transform: scale(1.5) translateY(0.5em);
  }
  20% {
    opacity: 1;
  }
  90% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: translateZ(-1000em);
  }
}

@keyframes spin-letters {
  0%, 10% {
    opacity: 0;
    transform: rotateY(90deg);
  }
  30% {
    opacity: 1;
  }
  70%, 86% {
    transform: rotateY(0);
    opacity: 1;
  }
  95%, 100% {
    opacity: 0;
  }
}

@keyframes move-byline {
  0% {
    transform: translateZ(5em);
  }
  100% {
    transform: translateZ(0);
  }
}
/* Make the 3D work on the container */
.starwars-demo {
  perspective: 800px;
  transform-style: preserve3d;
}
/* General styles and layout */
.starwars-demo {
  height: 17em;
  left: 50%;
  position: absolute;
  top: 53%;
  transform: translate(-50%, -50%);
  width: 34em;
}
.byline span {
  display: inline-block;
}
img {
  width: 100%;
}

.star, .wars, .byline {
  position: absolute;
}

.star {
  top: -0.75em;
}

.wars {
  bottom: -0.5em;
}
.byline {
  color: #fff;
  font-family: "ITC Serif Gothic", Lato;
  font-size: 2.25em;
  left: -2em;
  letter-spacing: 0.4em;
  right: -2em;
  text-align: center;
  text-transform: uppercase;
  top: 29%;
}
/*** Media queries  ***/
@media only screen and (max-width: 600px) {
  .starwars-demo {
    font-size: 10px;
  }
}
@media only screen and (max-width: 480px) {
  .starwars-demo {
    font-size: 7px;
  }
}

.scene,
.space {
  animation: fadeIn 3s 1 linear;
}
input {
  color: yellow;
  outline: none;
  border: 0px solid white;
  border-radius: 0px;
  text-transform: uppercase;
  letter-spacing: 6px;
  width: 200px;
  height: 40px;
  margin: 7px 0 0 -100px;
  position: absolute;
  left: 50%;
  top: 8%;
  background: transparent;
  z-index: 9999;
  animation: reload-button 17s ease-out 1;
}
@keyframes reload-button {
  0% {
    opacity: 0;
    display: none;
  }
  95% {
    opacity: 0;
    display: auto;
  }
  100% {
    opacity: 1;
    display: auto;
  }
}
 
@keyframes bb-swivel {
  0% {
    background-position: 40% center;
  }
  3% {
    background-position: 40% center;
  }
  5% {
    background-position: 58% center;
  }
  8% {
    background-position: 58% center;
  }
  10% {
    background-position: 58% center;
  }
  12% {
    background-position: 40% center;
  }
  15% {
    background-position: 60% center;
  }
  25% {
    background-position: 60% center;
  }
  35% {
    background-position: 10% center;
  }
  39% {
    background-position: 10% center;
  }
  40% {
    background-position: 60% center;
  }
  52% {
    background-position: 37% center;
  }
  53% {
    background-position: 63% center;
  }
  54% {
    background-position: 39% center;
  }
  55% {
    background-position: 60% center;
  }
  56% {
    background-position: 36% center;
  }
  57% {
    background-position: 62% center;
  }
  66% {
    background-position: 62% center;
  }
  67% {
    background-position: 45% center;
  }
  70% {
    background-position: 45% center;
  }
  75% {
    background-position: 100% center;
  }
  100% {
    background-position: 100% center;
  }
}
.thruster-flicker {
  opacity: 0.55;
  width: 100%;
  height: 100%;
  animation: flicker 0.05s linear infinite;
}

@keyframes flicker {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.075);
  }
  30% {
    transform: scale(0.95);
  }
  50% {
    transform: scale(1.015);
  }
  70% {
    transform: scale(0.92);
  }
  85% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
.thruster {
  position: absolute;
  border-radius: 50%;
  height: 2.8vh;
  width: 2.8vh;
  max-height: 13px;
  max-width: 13px;
  background-color: white;
  box-shadow: 0 0 8px 3px red;
  animation: thrusters 16.5s ease-out 1;
}
.thruster.t1 {
  top: 42%;
  left: 35%;
}
.thruster.t2 {
  top: 41.5%;
  left: 64.5%;
}
.thruster.t3 {
  top: 80.5%;
  left: 63%;
}
.thruster.t4 {
  top: 81.5%;
  left: 36.5%;
}

@keyframes thrusters {
  0% {
    transform: scale(2.25);
  }
  15% {
    transform: scale(0.8);
  }
  30% {
    transform: scale(2.25);
  }
  44% {
    transform: scale(0.95);
  }
  52% {
    transform: scale(3);
  }
  54% {
    transform: scale(1.5);
  }
  62% {
    transform: scale(2.5);
  }
  100% {
    transform: scale(0.8);
  }
}
.x-wing {
  opacity: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg) scale(0);
  z-index: 9999;
  height: 41vh;
  width: 80vh;
  max-height: 205px;
  max-width: 400px;
  background-size: cover;
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0iNwug76uLpn4dNA8KG41Rgw_rRHqYD7lzGnD-_2kCG1ry57-aMRGvkTm8RFEhGqarzi3V98VNbzzNG7EKfAXpCoVFLynuxF6Kk0VsjfBiWLohVYaW2HCw1IVqie_caZNfeist2m-Hvw/s1600/Starwars-mys2010.png);
  animation: flightplan 16.5s ease-in-out 1;
}

@keyframes flightplan {
  0% {
    -webkit-filter: brightness(0.5) hue-rotate(-5deg);
    filter: brightness(0.5) hue-rotate(-5deg);
    transform: translate(-85%, 50%) rotate(8deg) scale(5);
  }
  15% {
    -webkit-filter: brightness(0.9) hue-rotate(-15deg);
    filter: brightness(0.9) hue-rotate(-15deg);
    transform: translate(25%, 30%) rotate(-30deg) scale(0.85);
  }
  30% {
    -webkit-filter: brightness(1.35) hue-rotate(-5deg);
    filter: brightness(1.35) hue-rotate(-5deg);
    transform: translate(-80%, 0%) rotate(15deg) scale(1.3);
  }
  44% {
    -webkit-filter: brightness(1.2) contrast(1) hue-rotate(-12deg);
    filter: brightness(1.2) contrast(1) hue-rotate(-12deg);
    transform: translate(-20%, -20%) rotate(-18deg) scale(0.75);
  }
  52% {
    -webkit-filter: brightness(1.45) contrast(1.15) hue-rotate(2deg);
    filter: brightness(1.45) contrast(1.15) hue-rotate(2deg);
    transform: translate(10%, 10%) rotate(-25deg) scale(1.65);
  }
  100% {
    -webkit-filter: brightness(0.55) contrast(0.85) hue-rotate(0deg);
    filter: brightness(0.55) contrast(0.85) hue-rotate(0deg);
    transform: translate(-30%, -30%) rotate(-47deg) scale(0);
  }
}
.subspace {
  z-index: 500;
  width: 300px;
  height: 300px;
  position: absolute;
  margin-top: -150px;
  top: 50%;
  margin-left: -150px;
  left: 50%;
}
.hosnian-prime {
  position: absolute;
  top: 55%;
  left: 50%;
  left: 0;
  right: 0;
  margin: -22vh auto 0;
  z-index: 50;
  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO89UpztbCb-Fm8h5FKhV26Um2rH3qu9pTIrK6lKDrC2PSJpx04Uwz2s90OVTQjaIQoaTpbneGydofO75IpiwcKvFC674KuVyuRatIKwzRFNTFb-JnWqPbKPlI9mL4f69emifiaENAIbb6/s1600-r/black-logo-sule.png");
  width: 38vh;
  max-width: 268px;
  height: 38vh;
  max-height: 268px;
  box-shadow: inset 76px 0 80px 3px rgba(0, 0, 0, 0.69), inset -1px 0 50px 15px rgba(255, 255, 255, 0.49), inset -1px 0 15px 2px white, 0 0 55px 10px rgba(0, 0, 255, 0.45), 3px 0 10px 2px rgba(0, 0, 255, 0.75), -3px 0 10px 2px rgba(96, 96, 159, 0.75);
  background-size: 602px;
  border-radius: 50%;
  position: relative;
  transform: scale(1.1) translateY(0px);
  animation-name: rotate, planet-zoom;
  animation-duration: 60s, 16.5s;
  animation-iteration-count: infinite, 1;
  animation-timing-function: linear, ease-out;
}
@keyframes rotate {
  0% {
    background-position: 0px;
  }
  100% {
    background-position: 602px;
  }
}
@keyframes planet-zoom {
  0% {
    transform: scale(0) translateY(-100px);
  }
  51% {
    transform: scale(0) translateY(-100px);
  }
  52% {
    transform: scale(0.01) translateY(-100px);
  }
  100% {
    transform: scale(1.1) translateY(0px);
  }
}
.space {
  width: 100%;
  transform: scale(1.75) translateX(-300px);
  animation: space-zoom 16.5s 1 ease-out;
}

@keyframes space-zoom {
  0% {
    transform: scale(0.45) translateX(-250px);
    opacity: 0;
  }
  48% {
    transform: scale(0.45) translateX(-250px);
    opacity: 0;
  }
  49% {
    transform: scale(0.45) translateX(-250px);
    opacity: 1;
  }
  100% {
    transform: scale(1.75) translateX(-300px);
    opacity: 1;
  }
}

.posisilingkaran {
  width: 400px;
  height: 400px;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
}
.posisilingkaran .tengah {
 left:  40px;
margin-top:20px;
  width: 300px;
  height: 300px;
  position: absolute;
  border-radius: 100%;
  border: 10px solid #f00;
  overflow: hidden;
  z-index: 10;
}

#M-2010, #teks, #posisi, #dibawah  {
    position: absolute;
    font-size: 11px;
    margin: 2px
}
#M-2010, #teks div {
    text-decoration: underline;
    cursor: pointer
}
#teks, #posisi {
    text-align: right;
    right:  50px;
}
#teks, #dibawah {
    text-align: left;
    left:  50px;
}
 #dibawah, #posisi {
    bottom: -6px;
}

canvas{
  position: absolute;
  min-width: 400px;
  min-height: 400px;
  width: 100%;
  height: 100%;

}</style>

<div class="ap" id="ap">
<h2>
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:orange;"> Edited by . <a href="https://Link Download" title="Download Full Code"><span style="font-family: arial ; font-size: 12px; color:#eee;">&nbsp; Myscript2010 </a>&nbsp; Download </a> 
</div>
<body translate="no" ><div align="center" style="margin-top:11px">
<audio id="mys2010" src="https://sites.google.com/site/usesitesto/file/sepultura-Mys2010.mp3" controls="controls"></audio></div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:orange;"> Copyright <a href="http://sample-mys2010.blogspot.co.id/2016/05/exiting-hyperspace-circle.html" target="_blank" title="Mari Belajar"><span style="font-family: arial ; font-size: 12px; color:#eee;">&nbsp; 2010 - 2016 </a>&nbsp; Let's Study </a> 
</div>
</2></a>  
</div>
<header>
<h2>
<input type="button" value="replay" onClick="history.go(0)"></2></a>
</div>
</header>
<div class="posisilingkaran">
<div class="tengah">
<canvas id="field"></canvas>
<div class="subspace">
<div class="hosnian-prime">
</div>
<div class="x-wing">
<div class="bb-unit">
</div>
<div class="thruster-flicker">
<div class="thruster t1">
</div>
<div class="thruster t2">
</div>
<div class="thruster t3">
</div>
<div class="thruster t4">
</div>
</div>
</div>
</div>
<div class="hyperspace">
<div class="scene">
<div class="wrap">
<div class="wall wall-right">
</div>
<div class="wall wall-left">
</div>
<div class="wall wall-top">
</div>
<div class="wall wall-bottom">
</div>
<div class="wall wall-back">
</div>
</div>
<div class="wrap">
<div class="wall wall-right">
</div>
<div class="wall wall-left">
</div>
<div class="wall wall-top">
</div>
<div class="wall wall-bottom">
</div>
<div class="wall wall-back">
</div>
</div>
</div>
</div>
<div class="space">
<div id="stars">
</div>
<div id="stars2">
</div>
<div id="stars3">
</div>
</div>
</div>
<div class="starwars-demo">
<h1 class="byline" id="byline">
M-2010</h1>
</div>
</div>
</div>
</div>

<ul class="mys2010-list">
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>   
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>  
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>   
<script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'>
</script>  
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js">
</script> 

<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>

<script>var byline = document.getElementById('byline');
bylineText = byline.innerHTML;
bylineArr = bylineText.split('');
byline.innerHTML = '';
var span;
var letter;
for (i = 0; i < bylineArr.length; i++) {
    if (window.CP.shouldStopExecution(1)) {
        break;
    }
    span = document.createElement('span');
    letter = document.createTextNode(bylineArr[i]);
    if (bylineArr[i] == ' ') {
        byline.appendChild(letter);
    } else {
        span.appendChild(letter);
        byline.appendChild(span);
    }
}
window.CP.exitedLoop(1);
</script>
<music>               
<script>
      $(function () {
    $('video,audio').mediaelementplayer({
        success: function (mediaElement, domObject) {
            var audio_src = $('li.current').attr('data-url');
            mediaElement.setSrc(audio_src);
            mediaElement.addEventListener('ended', function (e) {
                mys2010PlayNext(e.target);
            }, false);
        },
        keyActions: []
    });
    $('.mys2010-list li').click(function () {
        $(this).addClass('current').siblings().removeClass('current');
        var audio_src = $(this).attr('data-url');
        $('audio#mys2010:first').each(function () {
            this.player.pause();
            this.player.setSrc(audio_src);
            this.player.play();
        });
    });
});
function mys2010PlayNext(currentPlayer) {
    if ($('.mys2010-list li.current').length > 0) {
        var current_item = $('.mys2010-list li.current:first');
        var audio_src = $(current_item).next().text();
        $(current_item).next().addClass('current').siblings().removeClass('current');
        console.log('if ' + audio_src);
    } else {
        var current_item = $('.mys2010-list li:first');
        var audio_src = $(current_item).next().text();
        $(current_item).next().addClass('current').siblings().removeClass('current');
        console.log('elseif ' + audio_src);
    }
    if ($(current_item).is(':last-child')) {
        $(current_item).removeClass('current');
    } else {
        currentPlayer.setSrc(audio_src);
        currentPlayer.play();
    }
}     
    </script>

<script>
      var totalObjects = 1500;
var maxVelocity = 2;
var starSize = 2;
var twinkleFreq = 50000;
var shootingStarFreq = 90;
var shootingStarVelocity = 100;
var shootingStarSize = 7;

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            setInterval(callback, 75);
          };
})();

var canvas = document.getElementById('field');
canvas.width = document.width || 1024;
canvas.height = document.height || 768;
var ctx = canvas.getContext("2d");



var stars = [];
var shootingStars = [];
this.init();

setInterval(update, 30);
requestAnimFrame(draw);

function init() {
  for(i=0;i<totalObjects;i++){
    stars.push(new Star());
  }
}

function draw() {
  requestAnimFrame(draw);
  ctx.clearRect(0,0,canvas.width,canvas.height);
   for(f=0;f<stars.length;f++)
   {
     stars[f].Update();
     stars[f].Draw();
   }
   for(f=0;f<shootingStars.length;f++)
   {
     shootingStars[f].Update();
     shootingStars[f].Draw();
   }
}

function update()
{
  if(Math.round((Math.random()*shootingStarFreq))==1){
    shootingStars.push(new ShootingStar());
  }
   for(f=0;f<shootingStars.length;f++)
   {
     if (shootingStars[f].X < -1000)
     {
       shootingStars.splice(f,1);
     }
   }
}


function Star(){
  this.X = Math.random()*canvas.width;
  this.Y = Math.random()*canvas.height;
  this.Velocity = (Math.random()*maxVelocity);
  this.Opacity = (((Math.random()*10)+1)*0.1);
  
  this.Update = function() {
    this.X -= this.Velocity;
    if(this.X<0){ ///reset
      this.X = canvas.width+1;
    }
  };
  
  this.Draw = function() {
    ctx.fillStyle = "rgba(255,255,255," + this.Opacity + ")";
    if(Math.round((Math.random()*twinkleFreq))==1){
      ctx.fillRect(this.X,this.Y,starSize+2,starSize+2);
    }
    else{
      ctx.fillRect(this.X,this.Y,starSize,starSize);
    }
  };
}

function ShootingStar() {
    this.X = 2000;
    this.Y = Math.random()*canvas.height;
    this.Length = 1000;
  
  this.Update = function(){
    this.X -= shootingStarVelocity;
  };
  
  this.Draw = function() {
    for (var i = 0; i < this.Length; i++){
      opacity = (0.8 - (0.001 * i));
      ctx.fillStyle = "rgba(255,255,255," + opacity + ")";
      ctx.fillRect(this.X+i,this.Y,shootingStarSize,shootingStarSize);
    }
  };
}   
  </script>

Hyperspace Code by. Matt Popovich
Night sky with Stars Code by. Web Sonick

Design code is edited by. Mys2010 In Codepen

DEMOSHOW

If you want to directly copy  and  paste you canDownload Here  Hyperspace Circle 

Category: Exiting Hyperspace Circle

Frame with Audio

Memasang Kode Frame with Audio
Login ke akun blog klik tombol blog baru, buat satubuah link baru   
kemudian beri nama sesuai fungsi,  klik Edit HTML pada link baru tersebut, 
hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut :  Get Blank Template.   edit background warna sesuai keinginan klik simpan selesai.

Kemudian klik entri halaman baru HTML pada link tersebut.
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style class="Mys2010-styles">
body {);color:red;height:100%;overflow:hidden;}
body {
  background: #151515;
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  1px 0;
  position: fixed;
  top: 0;
  width: 100%;
text-align: center;
text-shadow: 0px 0px #fff;  
font-size:  8px;
background: -moz-linear-gradient(top, #333 0%, rgba(53,02,01,1) 100%);
  border-bottom: 3px solid #dad;  
}
/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 60px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 20px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
text-shadow: 0px 0px #FFf;  
font-size:  19px;
background:  #111;
border-top: 2px solid #f0f;
z-index: 9999;
} 
h2 {
padding: -4px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #666 50%, transparent 90%); 
} 

#original-link, #load-song, #credits, #tested {
    position: absolute;
    font-size: 11px;
    margin: 20px
}
#original-link, #load-song div {
    text-decoration: underline;
    cursor: pointer
}
#load-song, #credits {
    text-align: right;
    right: 0
}
 #tested, #credits {
    bottom: 0
}

body {
  text-align: center;
}
.item {
  list-style-type: none;
  position: relative;
  display: inline-block;
  background-color: black;
 margin-top:  16px;
  padding:  2rem;
  -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 1rem 2rem 0;
  -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 1rem 2rem 0;
  box-shadow: rgba(0, 0, 0, 0.7) 0 1rem 2rem 0;
}
.inner {
  position: relative;
  padding:  2rem;
  background-color: white;
  -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 0 1.5rem 0 inset;
  -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 0 1.5rem 0 inset;
  box-shadow: rgba(0, 0, 0, 0.7) 0 0 1.5rem 0 inset;

}

@import url(http://fonts.googleapis.com/css?family=Raleway:100,300);
@keyframes calling {
  from {
    background: rgba(255, 255, 255, 0.1);
  }
  to {
    background: rgba(255, 255, 255, 0.9);
  }
}
@keyframes calling2 {
  to {
    border-color: red;
  }
}
@keyframes declined {
  to {
    -webkit-filter: grayscale(0.1) blur(1px) drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.7));
    -moz-filter: grayscale(0.1) blur(1px) drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.7));
    opacity: .5;
  }
}
@keyframes go {
  0% {
    opacity: .5;
  }
  95% {
    transform: scale(0.2);
  }
  100% {
    opacity: 0;
  }
}
* {
  box-sizing: border-box;
}

body {
  background: #B000DA;
  font-family: "Raleway", sans-serif;
}

.call {
  width: 300px;
  height: 330px;
  position: absolute;
  top: 0;
  left: 0px;
  right:   97px;
  bottom: 0;
  margin: auto;
  box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.1);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border: #9b00c1;
}
.call.is-declined {
  animation: declined .4s forwards, go .3s .8s forwards;
}
.call.is-declined .circle {
  background: rgba(255, 255, 255, 0.1);
}
.call.is-declined .user-photo__wrap, .call.is-declined .circle {
  animation-play-state: paused;
}
.call.is-accepted header > h1 {
  opacity: 0;
}
.call.is-accepted .circle {
  opacity: 0;
  animation-play-state: paused;
}
.call.is-accepted .user-photo__wrap {
  border: none;
  animation-play-state: paused;
}
.call.is-accepted .user-photo__wrap > img {
  transform: scale(1.2);
}


header > h1 {
  font-size: 1.2em;
  text-shadow: 0px 1px 1px #444;
  color: white;
  font-weight: 100;
}
header .header-close {
  position: absolute;
  right: 10px;
  top: 15px;
  opacity: .4;
  color: #72008e;
  font-weight: 400;
  font-size: 1.2em;
  text-decoration: none;
}
header .header-close:hover {
  opacity: 1;
}

main {
  height: 470px;
width: 400px;
  border: 31px solid #d528ff;
  background-image: linear-gradient(#da41ff, #9b00c1);
 margin-top: -100px;
}

.user {
  margin-top: 1px;
  width: 100%;
}

.user-photo {
  width: 200px;
  height: 200px;
  padding: 10px;
  margin: 0 auto;
  border-radius: 100%;
  background: #111;
  box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.8), inset 1px 1px 1px rgba(0, 0, 0, 0.3), inset -1px -1px 1px rgba(0, 0, 0, 0.3), inset 2px 2px 1px rgba(0, 0, 0, 0.3), inset 1px 3px 1px rgba(0, 0, 0, 0.3);
}

.user-photo__wrap {
  background: #d10eff;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  border: 9px solid #d10eff;
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.6);
  animation: calling2 1.3s linear infinite;
}
.user-photo__wrap > img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transition: transform .2s;
}

.user-name {
  margin: 15px 0;
  text-align: center;
  color: aqua;
  text-shadow: 0px 1px 1px #444;
}

.status {
  width: 100px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  color: white;
  text-align: center;
}
.status .circle {
  float: left;
  margin-right: 12px;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: rgba(255, 255, 255, 0.1);
  animation: calling 1s backwards infinite;
}
.status .circle:nth-child(1) {
  animation-delay: 0.2s;
}
.status .circle:nth-child(2) {
  animation-delay: 0.4s;
}
.status .circle:nth-child(3) {
  animation-delay: 0.6s;
}
.status .circle:nth-child(4) {
  animation-delay: 0.8s;
}
.status .circle:nth-child(5) {
  animation-delay: 1s;
}
.status .circle.last {
  margin-right: 0;
}

.buttons {
  width: 90%;
  margin: 40px auto;
}
.buttons .col {
  width: 50%;
  float: left;
}
.buttons .button {
  margin: 0 auto;
  width: 80%;
  display: block;
  padding:  1px 30px;
  text-align: center;
  border-radius: 34px;
  border-width: 1px;

  border-style: solid;
  color: white;
  text-decoration: none;
}
.buttons .button.-decline {
  border-color: #FF0C21;
  background: rgba(203, 0, 18, 0.14);
}
.buttons .button.-decline:hover {
  background: #ff1126;
}
.buttons .button.-accept {
  border-color: #69C915;
  background: rgba(169, 228, 114, 0.12);
}
.buttons .button.-accept:hover {
  background: #6bce15;
}
</style>

<figure class="item">
<div class="inner">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizXXTvx7hbtZnkxcwkaWbRmSoSMoLTFyujLDfco6AP3gUMSGn37Ld-PT7mKGFxbNNyng7BEaSCFGrEK5KxYxE95HJu-nTl9zc8lFutROBfbNctWT-fm-MJpJcxxcoRJ_lp_goMomKXXwM/s1600/Metall-mys2010.jpg" name="e902" border="0" width="250" height="370" /></a>
</div>
<figcaption class="title">
<span style="color: #F00; font-size: 11px;"><b>&#9827 &nbsp; ORIGINALLY &nbsp;  &#9827 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <b>&#9827 &nbsp; STAY HERE &nbsp; &#9827</b></a>
</figure>

<div class='call'>
<header>
<h1></h1>
<a class='header-close js-decline' href='@'>
</a>
</header>
<main>
<div class='user'>
<div class='user-photo'>
<div class='user-photo__wrap'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1RGtYiJyxIMjgGbveeE1_jmMO8JcjmVxAr127wtxyPU0pJ5vRwwpTUQ__EfKXNAyFpMcLORCx_Cc6fslU6E2AQnauXBXQIke4OhddioKUGqhhOcLwlQ91cbwZBjMWn48aU9gcdYNE8_c/s1600/kotak-mys2010.jpg'>
</div>
</div>

<div class='user-name'>
<p>
<span style="color: #ddd; font-size: 14px;">MYS-2010</p>
<p>
CIBEBER CIMAHI</p>
</div>
</div>
<div class='status'>
<div class='circle'>
</div>
<div class='circle'>
</div>
<div class='circle'>
</div>
<div class='circle'>
</div>
<div class='circle last'>
</div>
</div>
<div class='buttons'>
<div class='col'>
<a class='button -decline js-decline' href='#'>
Decline
</a>
</div>
<div class='col'>
<a class='button -accept js-accept' href='#'>
Accept
</a>
</div>
</div>
</main>
</div>

<header> 
<div class="Top Title Header">
<div align="center">
<h2>
<a href="http://Your Link" title="Tukar Gambar"><span style="color: #fff; font-size: 11px;"><b>EXCHANGE PICTURES</b></h2>
</a>
</div>
</header>
<div class="ap" id="ap">
<body translate="no" ><div align="center" style="margin-top: 17px">
<audio id="mys2010" src="https://sites.google.com/site/usesitesto/file/Metallica-The-Day-That-Never-One-Whiskey-InTheJar-mys2010.mp3" controls="controls"></audio></a> 
</div>

<div id="tested">
<font size="3" color="#FF1000"face="agency fb"> &nbsp; &nbsp; &nbsp; &nbsp; EDITED BY. &nbsp;  <a href="http://Your Link" title="Download Full Code"> MYS-2010 &nbsp; </a> DOWNLOAD </a> 
</div>
<div id="credits">
<font size="3" color="#FF1000"face="agency fb"> &nbsp; &nbsp; &nbsp; &nbsp; METALLICA &nbsp; <a href="http://Your Link" title="Home Page"> THE DAY &nbsp; </a>AMBILIGHT &nbsp; &nbsp; &nbsp; &nbsp;</a> 
</div>

<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>

<script>(function () {
    $('.js-decline').on('click', function (e) {
        $('.call').toggleClass('is-declined');
        return e.preventDefault();
    });
    $('.js-accept').on('click', function (e) {
        $('.call').toggleClass('is-accepted');
        return e.preventDefault();
    });
}.call(this));
 
</script>

<ul class="mys2010-list">
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>
<link rel='stylesheet prefetch' href='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelementplayer.min.css'>
<script src='http://cdn.jsdelivr.net/mediaelement/2.13.1/mediaelement-and-player.min.js'>
</script>
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js">
</script>

<script>
      $(function () {
$('video,audio').mediaelementplayer({
success: function (mediaElement, domObject) {
var audio_src = $('li.current').attr('data-url');
mediaElement.setSrc(audio_src);
mediaElement.addEventListener('ended', function (e) {
mys2010PlayNext(e.target);
}, false);
},
keyActions: []
});
$('.mys2010-list li').click(function () {
$(this).addClass('current').siblings().removeClass('current');
var audio_src = $(this).attr('data-url');
$('audio#mys2010:first').each(function () {
this.player.pause();
this.player.setSrc(audio_src);
this.player.play();
});
});
});
function mys2010PlayNext(currentPlayer) {
if ($('.mys2010-list li.current').length > 0) {
var current_item = $('.mys2010-list li.current:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('if ' + audio_src);
} else {
var current_item = $('.mys2010-list li:first');
var audio_src = $(current_item).next().text();
$(current_item).next().addClass('current').siblings().removeClass('current');
console.log('elseif ' + audio_src);
}
if ($(current_item).is(':last-child')) {
$(current_item).removeClass('current');
} else {
currentPlayer.setSrc(audio_src);
currentPlayer.play();}}
</script> 

Audio Code by. Jereme Causing
Photo Frame Code by. Sébastien Lombard

Incoming Call Code by. Davilious
Design code is edited by. Mys2010 In Codepen

DEMOSHOW

If you want to directly copy  and  paste you canDownload Here Frame with Audio  

Category: Frame with Audio