Memasang Kode Parallax-animated-air-balloon
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:  0px 0;
  position: fixed;
  top:-37px;
  width: 100%;
height:80px;
text-align: center;
font-size: 6px;
background: linear-gradient(270deg,#AA80FE,#660099, #809FFE, #B0E0E6, #809FFE,#660099, #AA80FE);
  border-bottom: 3px solid #24006B;  
-webkit-animation: shadow 6s ease-in-out infinite;
          animation: shadow 6s ease-in-out infinite;
}
.ap {
position: fixed;
right: 0;
bottom:-19px;
left: 0;
height:80px;
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;
font-size:  11px;
background:  #111;
border-top: 2px solid #222;
z-index: 9999;
} 
h2 {
padding:15px; 
background: -webkit-linear-gradient(transparent 10%, #000 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #000 50%, transparent 90%); 
} 
#M-2010, #teks, #posisi, #dibawah #shadow;}
 .text-bawah {
  
}
.M2010-textshadow {  
   margin: 0 auto;
  text-align: center;
  color: #00248E;
  text-shadow: #00248E 10px 0px 30px, #00248E -10px 0px 30px, #00248E 0px 10px 30px, #00248E 10px 0px 30px, #00248E -10px 0px 30px, #00248E 0px 10px 30px,#00248E 0px -10px 30px;
  color: #eee;
  background:#eee;
  mix-blend-mode: screen;
}
#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:40px;
 -webkit-animation: shadow 6s ease-in-out infinite;
          animation: shadow 6s ease-in-out infinite;
}
@keyframes shadow {
  0% {
    text-shadow: 0 0 2px  #B0E0E6 , 
0 0 8px  #B0E0E6  , 0 0 10px  #B0E0E6 , 
0 0 20px  #B0E0E6 , 0 0 30px  #B0E0E6 , 
0 0 40px  #B0E0E6, 0 0 50px  #B0E0E6 , 
0 0 80px  #B0E0E6;
  }
  50% {
      text-shadow: 0 12px 7px #809FFE,
 0 5px 15px #809FFE, 0 0 50px #809FFE,
 0 -10px 2px #809FFE;
  }
 100% {
    text-shadow: 0 0 2px     #800080  , 
0 0 8px     #800080  , 0 0 10px     #800080  , 
0 0 20px     #800080  , 0 0 30px     #800080  , 
0 0 40px     #800080  , 0 0 50px     #800080  , 
0 0 80px     #800080  ;
  } 
}
/*end*/ 
 
.Liplop {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 11pt;
font-weight: bold;
color: #000;
margin-top:-3px;
} 
.Liplop {
  -webkit-animation: fade-in 0.2s linear infinite alternate;
  -moz-animation: fade-in 0.2s linear infinite alternate;
  animation: fade-in 0.2s linear infinite alternate;
}
@-moz-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*end*/
 
M2010-text-bawah-shadow;}
 .text-bawah {
  position: absolute;
  right: 410px;
  bottom: -310px;  
font-size: 50px;
font-family: agency fb, sans-serif;
  text-transform: uppercase;
}
.text-bawah1 {
  position: absolute;
  left: 90px;
  bottom: 189px;
  text-align: left;
  text-transform: uppercase;}
.text-bawah2 {
  position: absolute;
  right: 90px;
  bottom: 189px;
  text-align: right;
  text-transform: uppercase;
}
.M2010-textshadow {  
margin: 0 auto;
text-align: center;
color: #FFF8DC;
text-shadow: #dad 10px 0px 30px, #033FFF -10px 0px 30px, #dad 0px 10px 30px, #dad 0px -10px 30px;
color: #eee;
background:#eee;
mix-blend-mode: screen;
}
/*end*/  
.moon {
  position: absolute;
   right: 100px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #eef;
  box-shadow: 0px 0px 38px 19px #bbd;
  opacity: 1;
  animation: moon 22s ease;
  animation-fill-mode: forwards;
  z-index: 4;
}

@keyframes moon {
  0% {
    transform: scale(2);
    top: 500px;
    box-shadow: 0px 0px 68px 19px #bbd;
  }
  100% {
    transform: scale(1);
    top: 290px;
    box-shadow: 0px 0px 38px 9px #bbd;
  }
}
/*end*/
html, body {
  margin-top: -50px;
  height: 80%
}
.parallax-sky {
  height: 880px;
  background: #007fd5;
  position: relative;
  overflow: hidden;
  -webkit-animation: parallax-sky_background 50s ease-out infinite;
  -moz-animation: parallax-sky_background 50s ease-out infinite;
  -o-animation: parallax-sky_background 50s ease-out infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0)
}

@-webkit-keyframes parallax-sky_background {
  0% {
    background: #007fd5;
    color: #007fd5
  }
  50% {
    background: #000;
    color: #a3d9ff
  }
  100% {
    background: #007fd5;
    color: #007fd5
  }
}

@-moz-keyframes parallax-sky_background {
  0% {
    background: #007fd5;
    color: #007fd5
  }
  50% {
    background: #000;
    color: #a3d9ff
  }
  100% {
    background: #007fd5;
    color: #007fd5
  }
}

/*end*/
.balloontengah  {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrxKMQvRm0Zm6ZaoHSFSVQUqd0uCc_kbbnSmDh0EGFvGxrEE2DcmPkNfY3zFqa7Yx602qu3Hm-4i0kpG5yq1-EV_H1qMQMzmS8ebzZCR6krg3U16tQtpevyVQ6-pIBnrlcRNPZOa9FAV0/s1600/animated-ballon-M2010.gif);background-repeat:no-repeat;
  width: 328px;  height:310px; 
  position:absolute;
  left:35%;top:70%;  -webkit-transform: translate(-50%,-50%);  transform: translate(-50%,-50%);
}
.balloontengah-position {
animation: catchup  80s ease-in-out infinite;  
position: absolute;
bottom: 200px;
left: 50%;
margin-left: -10px;
}
 
@keyframes catchup {
0% {left: 10%}
10% {left: 85%}
100% {left: 10%}
}

@keyframes balloon-tengah {  
0% {background-position: -12px -10px; } 
100% {background-position: -1950px -10px; } 
}
/*end*/  
body div#balloon_holder {
 position: absolute;
 left: -30%;
 bottom: 60px;
 z-index: 6;

 -webkit-animation: M-2010_balloon 240s linear infinite;
 -moz-animation: M-2010_balloon 240s linear infinite;
 -ms-animation: M-2010_balloon 240s linear infinite;
 -o-animation: M-2010_balloon 240s linear infinite;
 animation: M-2010_balloon 240s linear infinite;
}
@-moz-keyframes M-2010_balloon {
 25% {
   z-index: 6;
 }
 50% {
   left: 140%;
   bottom: 600px;
   z-index: 0;
 }
 55% {
   bottom: 680px;
 }
 75% {
   z-index: 0;
 }
 100% {
   left: -30%;
   z-index: 6;
   bottom: 100px;
 }
}
/*end*/ 
 html, body {
  margin-top: -140px;
  height: 98%
}
.animated {
  width: 100%;
  min-height: 700px;
  position: relative;
  top: 0;
  left: 0;
  background-color: #222; 
}

.pagar-1 {
   -webkit-animation: parallax_bg linear  0s infinite both;
           animation: parallax_bg linear  0s infinite both;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyUJDeuykhgugpIdq-XgiXmHQdQ3Z8Oyr7B_32KZMfuvGW_Km0ecJrkji04OWn7TNJ2GFz_X-zncR51G6L7jhkkdlE0vaHiHdCsgtPTzfZBukmGbE2oWiYuGVALg95WGuIPsTsH-B4CK8u/s1600/Pagar-M2010.png) 0 100% repeat-x;
  z-index: 1;
  position: absolute;
   bottom:31px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 235px; 
}

.bg-1 {
   -webkit-animation: parallax_bg linear 0s infinite both;
           animation: parallax_bg linear 0s infinite both;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8PN9HQB0F7u32jAhwWmj2GqGdffq9rIpwtRdq3Nm_sWFc4tVuN808eLiXBCaq-bS4E2CtFvrtVUu5Uzh9gdzk7hEb5eCS1lLvyiybAl_6scjQWc7TepeOXzYck4E05WsVOn_benfw5l4/s1600/kembang-m2010.png) 0 100% repeat-x;
  z-index: 1;
  position: absolute;
  bottom:-67px;
  left: 0;
  width: 100%;
  height: 90%;
  background-size: auto  390px; 
}
.bg-2 {
  -webkit-animation: parallax_bg linear 0s infinite both;
          animation: parallax_bg linear 0s infinite both;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwiVOpWMUoc0FFewRlX4_d9LzjJFq37pxD5KDv63Cjo9ssmklon4CY827gTI0_SigEUvO0NffZa96OagUeEjIEwQf45SXYUlTZFqK3pi4uuSgfpzLcEJrhPLLWgKtpP7_VwHaeErE13KE/s1600/palm-m2010.png) 0 100% repeat-x;
  z-index: 1;
  position: absolute;
  bottom:-67px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 300px;
}
.bg-3 {
  -webkit-animation: parallax_bg linear 55s infinite both;
          animation: parallax_bg linear 55s infinite both;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8PN9HQB0F7u32jAhwWmj2GqGdffq9rIpwtRdq3Nm_sWFc4tVuN808eLiXBCaq-bS4E2CtFvrtVUu5Uzh9gdzk7hEb5eCS1lLvyiybAl_6scjQWc7TepeOXzYck4E05WsVOn_benfw5l4/s1600/kembang-m2010.png) 0 100% repeat-x;
  z-index: 1;
  position: absolute;
  bottom:-67px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 258px;
}
.bg-4 {
  -webkit-animation: parallax_bg linear 75s infinite both;
          animation: parallax_bg linear 75s infinite both;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8PN9HQB0F7u32jAhwWmj2GqGdffq9rIpwtRdq3Nm_sWFc4tVuN808eLiXBCaq-bS4E2CtFvrtVUu5Uzh9gdzk7hEb5eCS1lLvyiybAl_6scjQWc7TepeOXzYck4E05WsVOn_benfw5l4/s1600/kembang-m2010.png) 0 100% repeat-x;
  z-index: 1;
  position: absolute;
  bottom:-67px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 268px;
}
.bg-5 {
  -webkit-animation: parallax_bg linear -95s infinite both;
          animation: parallax_bg linear -95s infinite both;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGaeQr31AF25UaxtZqyLYT9PF6ymdD8FupBg7aPptZ7zYCkqdR2fsjooAnf00NHjjdI61pVq2vp-ynwgK8wuZPwviYtgKWfJjxdHNxo1PsMOo-pxE7AMQO7t1FpTBLNTctteC71TIZ3Fo/s1600/gedung-m2010.png) 0 100% repeat-x;
  z-index: 1;
  position: absolute;
  bottom:-88px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 591px;
}
.bg-6 {
  -webkit-animation: parallax_bg linear -30s infinite both;
          animation: parallax_bg linear -30s infinite both;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoZSy69tR1AYlyChHKItKiKHE21evJTdzta0At77R4mgp9vmSyBiuyL-hJNGs4dYdvf2RSnE_3W_v8TsrZ0gyK5pPTHFSC2jzyyjOZUOZTpZvYYlh-b_ThqK9futv1pMRQ4g_kaQ3YaRc/s1600/pohon-tiang-m2010.png) 0 100% repeat-x;
  z-index: 1;
  position: absolute;
  bottom:91px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 245px;
}
.bg-7 {
  -webkit-animation: parallax_bg linear 0s infinite both;
          animation: parallax_bg linear 0s infinite both;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjavBdAzF5Dy-BDs3DWQVDIGj6GHrZMyMYk4r7Kj-zykC3L6LzzkTMqUTIu1SFHAc1VLDgdzkO2IkkhoQIuxL3z4Mg8nBnT3PAjIk1Xh3J8c48dzOR4MGfF8bv4eMAjJP73mQ9CJqYBH-E/s1600/Cemara-3-Mys2010.png) 0 100% repeat-x;
  z-index: 1;
  position: absolute;
  bottom:91px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto  198px;
}
@-webkit-keyframes parallax_bg {
  0% {
    background-position: 2765px 100%;
  }
  100% {
    background-position: 550px 100%;
  }
}
@keyframes parallax_bg {
  0% {
    background-position: 2765px 100%;
  }
  100% {
    background-position: 550px 100%;
  }
}
/*end*/
.balloon-1 {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimCkg_W6-eKQ4MMYfjNCvi5SMUvspYUMrcgkVWscgdDyA-W-zspNoxsInWJpjf_oQJM6EZR-lzRwhyphenhyphen6z-5J-ghEIVmP-tyYr349e8Ip8DFV3UHgoXObSk76eA5EVvy3KDD3ADfOlAXbIw/s1600/Air-balloon-green-M2010.png) 0 100% no-repeat;
  z-index: 1;
  position: absolute;
  bottom: 300px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 75px;
}
.balloon-2 {
  background: url(https://sites.google.com/site/usesitesto/file-code/ballon-blue-white-mys2010.png) 0 100% no-repeat;
  z-index: 1;
  position: absolute;
  bottom: 450px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 35px;
}
.balloon-2a {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEzY-iDxPy92oKT9RK3Zsygv8bhKrSclqUAsMYKxhImbdRmjq_MNiQq771mVlMTRDpthsKmN8dAsmzJq5ErxvOMru47lmKs1bWt_w-_UaUh1-X2l2W7qrpJtrLPmc1gu8PHBjK9Q7JUAo/s1600/White-air-balloon-M2010.png) 0 100% no-repeat;
  z-index: 1;
  position: absolute;
  bottom: 350px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 55px;
}
.balloon-3 {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhlkRs_nCHerVBakvH64efjuUUYrXrb4bEpki5B4JjOb_OwQq9nSg5muw9kPV9W3rS8lTs6CfzXdKmhhz19H8q4nLmjV8aLqIQcuGOlLJcUiJJ_33sUmoyDQPQ1Tc3-Y2kDgO1KK22n0M/s1600/balloon4-m2010.png) 0 100% no-repeat;
  z-index: 1;
  position: absolute;
  bottom: 170px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 75px;
}
.balloon-4 {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsUmWVJNWGMkSb9GS4XzKxNJrWmBaj9Xjmgm3GCiHZfl2k-ay6nSPDBkTgD8741HqKDykqQCNewtJ3EM4NbadDYlQclKISC19SMKeHYR_WHg3E3SzKM0eSp9inEb-aQMCch09Zc0yZMJE/s1600/balloon-merah-m2010.png) 0 100% no-repeat;
  z-index: 1;
  position: absolute;
  bottom: 170px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 75px;
}
.balloon-5 {
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsUmWVJNWGMkSb9GS4XzKxNJrWmBaj9Xjmgm3GCiHZfl2k-ay6nSPDBkTgD8741HqKDykqQCNewtJ3EM4NbadDYlQclKISC19SMKeHYR_WHg3E3SzKM0eSp9inEb-aQMCch09Zc0yZMJE/s1600/balloon-merah-m2010.png) 0 100% no-repeat;
  z-index: 1;
  position: absolute;
  bottom: 400px;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 55px;
}
.balloon-1 {
  -webkit-animation: parallax_balloon linear 150s infinite both;
          animation: parallax_balloon linear 150s infinite both;
}
.balloon-2 {
  -webkit-animation: parallax_balloon linear 115s infinite both;
          animation: parallax_balloon linear 115s infinite both;
}
.balloon-2a {
  -webkit-animation: parallax_balloon linear 100s infinite both;
          animation: parallax_balloon linear 100s infinite both;
}
.balloon-3 {
  -webkit-animation: parallax_balloon linear 35s infinite both;
          animation: parallax_balloon linear 35s infinite both;
}
.balloon-4 {
  -webkit-animation: parallax_balloon linear 75s infinite both;
          animation: parallax_balloon linear 75s infinite both;
}
.balloon-5 {
  -webkit-animation: parallax_balloon linear 55s infinite both;
          animation: parallax_balloon linear 55s infinite both;
}
@-webkit-keyframes parallax_balloon {
  0% {
    background-position: -300px 100%;
  }
  100% {
    background-position: 2000px 100%;
  }
}
@keyframes parallax_balloon {
  0% {
    background-position: -300px 100%;
  }
  100% {
    background-position: 2000px 100%;
  }
} 
</style> 
<div class="animated">
<div class="parallax bg-6">
<div class="moon">
</div>
</div>
<div class="parallax balloon-5">
</div>
<div class="parallax balloon-4">
</div>
<div class="parallax bg-5">
</div>
<div class="parallax balloon-1">
</div>
<div class="parallax balloon-2">
</div>
<div class="parallax balloon-2a">
</div>
<div class="parallax balloon-3">
</div>
<div class="parallax bg-3">
</div>
<div class="parallax bg-7">
</div>
<div class="parallax bg-2">
</div>
<div class="parallax bg-4">
</div>
<div class="parallax-sky">
</div>
<div class="parallax bg-1">
</div>
<div class="parallax pagar-1">
</div>
<div class="balloontengah-position">
<div class="balloontengah">
<div id="balloon_holder">
<div id="balloon_go">
<div id="balloon_back">
</div>
<img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTxZOWmkFKyvNbM2A4Qo5k9XByEnN0cVSAHEUB1oevSl36ffFpVC7GVNDq27gHV_t2FMhpnm_h7ULTDdm59Lw5h2Eju-akQQiw7HQvwJqP7Gblcz79ZsbmnSC1CgBGofAudDoHbWLUFtc/s1600/air-balloon-m2010.png"name="e902" border="0" width="90" height="100" /></a>
<div id="balloon_go">
<img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPRjz8XkOhbBwV-5s7cN3pF27voRDzDmZuZvIpGhtk_g0tlcctQeuxUQ6AVnKyyHRPGHVg_f0KY7z8ITK8G1wi9GLqhd75fNhp1TSoojAnpSSoFc0dmsiP62KJhUXyG6xqwRM_FV-QT5M/s1600/Cibeber-Cimahi-M2010.png"name="e902" border="0" width=" 30" height=" 30" /></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> EDITED BY. <a href="https://Link Download"title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#80C8FE;"> COPYRIGHT <a href="http://codepen.io/Myscript2010/pen/vKxvmd" target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2017 </a>&nbsp; CODEPEN </a> 
</div>
<h2>
<div align="center" style="margin-top:5px">
<audio id="mys2010" src="https://sites.google.com/site/usesitesto/file/Die-Twinnies-%26-Junger-Egger-Dreigesang-Mys200.mp3"controls="controls"></audio></h2>
</a></div>
<header>
<a href="http://Link Title" target="_blank" title="Mari Belajar">
<h2>
<span style="color:#f00; font-size:11pt">
<div class="Liplop">
Myscript2010</div>
</a>
</h2>
</header>
<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>
Animated code by. All Sources
Design code is edited by. Mys2010 In Codepen
If you want to directly copy  and  paste you canDownload Here Animated air balloon   

Memasang Kode Image Matting 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:  0px 0;
  position: fixed;
  top: -15px;
  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%); 
margin-top: 5px;
} 
#M-2010, #teks, #posisi, #dibawah  {
    position: absolute;
    font-size: 11px;
    margin: -4px
}
#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: 22px;
}
 img.mat { 
 width: 42%; height: auto; display: block;
  margin: -1rem auto; padding: 2%;
  background-color: #FA8072;
  background-repeat: no-repeat;
  background-size: cover;
  border: 18px double #111;
  box-shadow: 0 0 0 50px rgba(244,240,236,0.4) inset, 0 0 0 11px rgb(180, 130, 90), 0 0 30px rgba(0,0,0,0.8) inset; 
-webkit-box-shadow: 0 0 0 50px rgba(244,240,236,0.4) inset, 0 0 0 11px rgb(180, 130, 90), 0 0 30px rgba(0,0,0,0.8) inset, 0 30px 20px rgba(0,0,0,0.3); 
  outline: 2px solid #333;
  outline-offset: 10px;
}
</style> 
<img class="mat" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh93JyejZsQP2PfhcXzTFqy7-dO1UbpFpYuVQHrptgXgkrGNrGWj0ELwjQz6INrvRpje1wcQgl0zaZOPwjnOr8A2taw5_XgVYIGzJSDCYH45GwDuZ8ZOQowS_YPdj5Bl6XDOnxk2Ufd7g2v/s1600-r/pooto-mys2010.jpeg"title="Suara Manuk Potoo">
<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/06/sound-manuk-potoo.html" target="_blank" title="Menampilkan">
<h2>
<span style="color:orange; font-size: 9pt">LET'S STUDY</a></span>  </h2>
</a>  
</div>
</header>
<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#fff;"> SOURCE <a href="https://codepen.io/dudleystorey/pen/sjvCA" target="_blank" title="Menampilkan"><span style="color: #FFFF00; font-size: 14px;">&nbsp; MATTING </a>&nbsp; FRAME </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#fff;"> DOWNLOAD<a href="https://Link Download"title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; SOUND </a>&nbsp; BIRD POTOO </a> 
</div>
<h2>
<audio id="mys2010" src="https://sites.google.com/site/fileblogfor/code/pooto-Mys2010s.mp3" controls="controls"></audio></div>
</h2>
</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>
      $(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>
Matting Frame code by. Dudley Storey
Design code is edited by. Mys2010 In Codepen
If you want to directly copy  and  paste you canDownload Here Image Matting Frame  

Memasang Kode Sound Animated Cat Walking
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:  0px 0;
  position: fixed;
  top: -15px;
  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%); 
margin-top: 5px;
} 
#M-2010, #teks, #posisi, #dibawah  {
    position: absolute;
    font-size: 11px;
    margin: -4px
}
#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: 22px;
} 
</style>
<header>
<a href="https://Link Download css" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">DOWNLOAD</a>  </h2>
</a>  
</div>
</header>
<p align="center">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqmb6qn6DuGiCck42f5EPVwV36Ij0oWalez5jN8NVYBGs1ZvLCFXW043MNjKWW5b07dtIAfbyUr5pt0s-La2Bl9JunVvie-GIn6pn3xIM5zWPxzyfew9MozuoqnnikijfTf_fc9vads7M/s1600/kucing-mys2010s.gif" name="e902" border="1" width="300" height="140" class="top"> 
<div class="animal-container animated">
<p align="center">
<code> SOUND CAT WALKING  CLICK BELOW </code> 
<center>
<h3 class='animal-title'>
CAT</h3>
<svg id="cat" class="animal" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 159.39 148.96">
<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#fff;"> EDITED BY. <a href="http://sample-mys2010.blogspot.co.id/p/statis-home.html"target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; M-2010 </a>&nbsp; LET'S STUDY </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#fff;"> SOURCE <a href="http://codepen.io/4trio19/full/aNmVdx/" target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp;CODE SOUND </a>&nbsp; ANIMAL </a> 
</div>
<h2>
<span style="font-family: arial ; font-size: 12px; color:#fff;"> COPYRIGHT <a href="http://myscript2010s.blogspot.co.id" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; @ - 2016 </a>&nbsp; ANIMATED </a> 
</div>
</h2>
</div>
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
      $(document).ready(function () {var CAT = new Audio();
    CAT.src = 'https://dl.dropboxusercontent.com/u/7673790/Cat%20Meow-SoundBible.com-1453940411.mp3';$('.animal').on('click', function (e) {
        $('.animal').css('pointer-events', 'none');
        animal = $(this).prev('.animal-title').text();
        e.preventDefault();
        $(this).find('.head-parts').css('-webkit-animation-play-state', 'running');
        switch (animal) { case 'CAT':
            CAT.play();
            break;}
        setTimeout(function () {
            $('.head-parts').css('-webkit-animation-play-state', 'paused');
            $('.animal').css('pointer-events', 'auto');
        }, 1000);
    });
});
      
    </script>
Animated Cat code by. Nick Burress
Design code is edited by. Mys2010 In Codepen
If you want to directly copy  and  paste you canDownload Here Animated Cat Walking  

Memasang Kode Sound Animated Pear Bird
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:  0px 0;
  position: fixed;
  top: -15px;
  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;  
}

/* GRADIEND */
.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%); 
margin-top:-8px;
} 
#M-2010, #teks, #posisi, #dibawah  {
    position: absolute;
    font-size: 11px;
    margin: -4px
}
#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: 17px;
} 
 body {
  background: #000;
  position: relative;
  margin: 0;
}
.buttons{
  width:500px;
  margin:0 auto;
  text-align:center;
  font-family: 'Bernard MT Condensed', sans-serif;
  font-size:18px;
  color: #EE82EE
}
.buttons a:hover {
  background-color:#0033CC;}
.buttons a:active, a:focus {
background-color:  #FF6347;
 box-shadow:0 0px 0 rgba(0,0,0,0.4) inset;  
  transition:all 0.1s}
audio{
  display:none
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  0px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: #000;
  border-bottom: 3px solid #dad;
}
/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 40px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 12px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #333;
background: #000;
border-top: 2px solid #f0f;
z-index: 9999;
}<style>
.buttons{
  width:500px;
  margin:0 auto;
  text-align:center;
  font-family: 'Bernard MT Condensed', sans-serif;
  font-size:18px;
  color: #EE82EE
}
.buttons a:hover {
  background-color:#0033CC;}
.buttons a:active, a:focus {
background-color:  #FF6347;
 box-shadow:0 0px 0 rgba(0,0,0,0.4) inset;  
  transition:all 0.1s}
audio{
  display:none
} 
svg{ display:block; margin:0 auto; border:0px solid #222;}
</style>
<svg width="500px" height="500px" viewBox="0 0 500 500">
  <defs>  <radialgradient id="rg">
      <stop offset="0%" stop-color="chartreuse"></stop>
      <stop offset="100%" stop-color="#030"></stop>
    </radialGradient>
    <radialgradient id="rgs">
      <stop offset="0%" stop-color="#111"></stop>
      <stop offset="100%" stop-color="#333"></stop>
    </radialGradient>   <g id="legs">
      <polygon id="Rleg" points="254.683,374.612 259,394.741 280.582,401.216 259.719,401.216 258.28,416.324 
  254.683,400.497 239.935,399.777 254.683,395.469" /></polygon>
      <polygon id="Lleg" points="214.835,372.612 210.518,392.741 188.935,399.216 209.799,399.216 211.237,414.324 
  214.835,398.497 229.583,397.777 214.835,393.469 "></polygon>
    </g>  </defs>
  <ellipse id="bigS" fill="url(#rgs)" stroke="none" cx="250" cy="420" rx="86" ry="18">
    <animate id="bigSAnimacionRX" attributeName="rx" attributeType="XML" values="86;56;86" begin="0;Down.click" dur="2s" repeatCount="1" fill="freeze" />
    <animate id="bigSAnimacionRY" attributeName="ry" attributeType="XML" values="18;9;18" begin="0;Down.click" dur="2s" repeatCount="1" fill="freeze" />
  </ellipse>  <g id="Down">
    <use xlink:href="#legs" fill="#B26B29" />
    <animatetransform id="LegsAnimacion" attributeType="XML" attributeName="transform" type="translate" values="0,0;  0,-180;  0,-150;  0,-180;  0,0" keySplines=".5 0 .5 1;   0 .75 .25 1;    0 .75 .25 1; 1 0 .25 .25" begin="0;Down.click" dur="2s" repeatCount="1" fill="freeze" />   </use>
    <path id="Lwing" fill="#FFFFFF" stroke="#000000" d="M299.361,267.521c0,0,5.905,36.185,24.725,60.779
  c18.819,24.594-11.749,2.022-17.665-5.255c-5.918-7.278,13.125,18.913,13.125,18.913s-14.832-3.719-20.804-13.585
  c-5.972-9.867,3.246,13.51,3.246,13.51s-6.73,2.919-12.75-9.54c-6.021-12.462-13.332-40.664-13.332-40.664L299.361,267.521z">
      <animatetransform id="LwingAnimacion" attributeName="transform" type="rotate" attributeType="XML" values="0 299 267; -40 299 267;0 299 267" begin="0;Down.click" dur="200ms" repeatCount="10" fill="freeze" />  </path>
    <path id="Rwing" fill="#FFFFFF" stroke="#000000" d="M195.678,267.521c0,0-5.905,36.185-24.725,60.779  c-18.819,24.594,11.749,2.022,17.665-5.255c5.918-7.278-13.125,18.913-13.125,18.913s14.832-3.719,20.804-13.585  c5.972-9.867-3.246,13.51-3.246,13.51s6.73,2.919,12.75-9.54c6.021-12.462,13.332-40.664,13.332-40.664L195.678,267.521z">
      <animatetransform id="RwingAnimacion" attributeName="transform" type="rotate" attributeType="XML" values="0 196 266;40 196 267 ;0 196 267" begin="0;Down.click" dur="200ms" repeatCount="10" fill="freeze" />    </path>
    <path id="comb" fill="#F7941E" d="M251.504,171.111c3.167,12.389,6.055,29.201,6.055,29.201h-13.947
  C242.079,196.878,251.411,180.798,251.504,171.111L251.504,171.111z">
      <animate id="combAnimacion" attributeName="d" attributeType="XML" values="M251.504,171.111c3.167,12.389,6.055,29.201,6.055,29.201h-13.947
  C242.079,196.878,251.411,180.798,251.504,171.111L251.504,171.111z; M232.22,184.296c14.604,3.296,25.338,16.016,25.338,16.016h-13.947  c-2.347-3.252,0.02-5.704-6.15-11.874L232.22,184.296z;M251.504,171.111c3.167,12.389,6.055,29.201,6.055,29.201h-13.947
  C242.079,196.878,251.411,180.798,251.504,171.111L251.504,171.111z" begin="0;Down.click" dur="2s" repeatCount="1" fill="freeze" />    </path>
<path id="body" fill="url(#rg)" stroke="none" d="M249.023,390.597
  c50.446,0.719,86.244-23.74,86.964-58.992S305.053,276.928,303.613,250s-22.303-50.77-54.59-50.77H250
  c-32.288,0-53.151,23.842-54.59,50.77s-33.093,46.353-32.374,81.604s36.518,59.711,86.964,58.992">
 <animate id="bodyAnimacion" attributeName= "d" attributeType= "XML"
   values ="M249.023,390.597
  c50.446,0.719,86.244-23.74,86.964-58.992S305.053,276.928,303.613,250s-22.303-50.77-54.59-50.77H250
  c-32.288,0-53.151,23.842-54.59,50.77s-33.093,46.353-32.374,81.604s36.518,59.711,86.964,58.992;M249.023,390.597
  c50.446,0.719,55.446-21.582,56.166-56.834s-0.137-56.835-1.576-83.763s-22.303-50.77-54.59-50.77H250
  c-32.288,0-53.151,23.842-54.59,50.77s-7.194,45.634-6.475,80.886s10.619,60.43,61.065,59.711;M249.023,390.597
  c50.446,0.719,55.446-21.582,56.166-56.834s-0.137-56.835-1.576-83.763s-22.303-50.77-54.59-50.77H250
  c-32.288,0-53.151,23.842-54.59,50.77s-7.194,45.634-6.475,80.886s10.619,60.43,61.065,59.711; M249.023,390.597
  c50.446,0.719,86.244-23.74,86.964-58.992S305.053,276.928,303.613,250s-22.303-50.77-54.59-50.77H250
  c-32.288,0-53.151,23.842-54.59,50.77s-33.093,46.353-32.374,81.604s36.518,59.711,86.964,58.992"
   keyTimes= "0; 0.2;0.90; 1"
   begin= "0;Down.click" dur= "2200ms"  repeatCount="1" fill="freeze"/>
 </path>    <g id="beak">
      <polygon id="light" fill="#F7941E" points="243.528,290.228 226.864,247.9 249.025,251.215 271.854,254.631" />
      <polygon id="dark" fill="#B26B29" points="249,251 244,290 272,255" /> </g>
    <ellipse id="eyeL" fill="#FFFFFF" cx="227" cy="245" rx="12" ry="14" />
    <ellipse id="eyeR" fill="#FFFFFF" cx="268" cy="245" rx="12" ry="14" />
    <circle id="irisL" cx="230" cy="249" r="10">
      <animate id="irisLAnimacion" attributeName="cy" attributeType="XML" values="249;241; 249" begin="0;Down.click" dur="2s" repeatCount="1" fill="freeze" />
    </circle>
    <circle id="irisR" cx="266" cy="249" r="10">
      <animate id="irisRAnimacion" attributeName="cy" attributeType="XML" values="249;241; 249" begin="0;Down.click" dur="2s" repeatCount="1" fill="freeze" />
    </circle>  </g></svg>  
<div class="animal-container animated">
<p align="center">
<div class="buttons">
<a href="#" data-fx="epic.swf_1"><b>PLAY</b></a>
<h4>
SOUND BIRD</h4>
</div>
<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#fff;"> SOURCE <a href="#"target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; CODE </a>&nbsp; ANIMATED BIRD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#fff;"> SOURCE <a href="#" target="_blank" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; CODE </a>&nbsp; SOUND </a> 
</div>
<h2>
<span style="font-family: arial ; font-size: 12px; color:#fff;"> SOUND <a href="#" title="Mari Belajar"><span style="color: #FFFF00; font-size: 14px;">&nbsp; ANIMATED </a>&nbsp; KITTY </a> 
</div>
</h2>
</div>
<header>
<a href="#" target="_blank" title="Mari Belajar">
<h2>
<span style="color:orange; font-size: 10pt">DOWNLOAD</a>  </h2>
</a>  
</div>
</header>
<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>$('.buttons a').on('click', function (e) {
    e.preventDefault();
    $('audio').remove();
    var fx = $(this).attr('data-fx');
    $('<audio controls="controls" autobuffer="autobuffer" autoplay="autoplay"> <source src="https://sites.google.com/site/fileblogfor/code/burung1-Mys2010.mp3"  type="audio/mpeg"> </audio>').appendTo('.buttons');
}); 
</script>
Pear Bird code by. Gabi
Sound Code by. Nodws
Design code is edited by. Mys2010 In Codepen
If you want to directly copy  and  paste you canDownload Here Sound Animated Bird  

Memasang Kode Youtube within the 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="M-2010-styles"> 
body {);color:red;height:100%;overflow:hidden;}
body { 
 background: -moz-linear-gradient(top, #111 0%, rgba(53,02,01,1) 100%);
  height: 100%;
  width: 100%;
}
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%); 
}
.app {
  position: relative;
  margin: 90px auto;
  width: 550px;
  height: 316px;
  overflow: hidden;
border: 20px solid transparent;
 -moz-border-image: -moz-linear-gradient(top, #660099 0%, #fc0 100%);
 -webkit-border-image: -webkit-linear-gradient(top, #660099 0%, #fc0 100%);
 border-image: linear-gradient(to bottom, #660099 0%, #fc0 100%);
 border-image-slice: 1;
 }
.begin-playing-active {
  background-position: left !important;
}
.begin-playing {
  z-index: 5;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #111;
  transition: all 0.3s;
}
</style>
<div class="app">
<div class="begin-playing">
<iframe width="550" height="315" src="https://www.youtube.com/embed/vO_kwR9CATE" frameborder="0" allowfullscreen></iframe>
</div>
<div class="ap" id="ap">
<div align="center">
<a href="https://Link Download"title="Myscript2010s"> 
<h2>
<span style="color:orange; font-size: 10pt">DOWNLOAD FULL CODE</2></a></span> 
</div>
<header>
<a href="http://sample-mys2010.blogspot.co.id/2016/06/youtube-within-frame.html" target="_blank" title="Mari Belajar">
<h2>
<span style="color:green; font-size: 10pt">LET'S STUDY</2></a> </span> 
</div>
</header>
<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>var menu = $('.menu-button'), playlist = $('ul.playlist'), current = $('.now-playing');
menu.on('click', function () {
    $(this).toggleClass('menu-active');
    playlist.toggleClass('playlist-active');
    current.toggleClass('now-playing-active');
});
</script>
Design code is edited by. Myscript2010 
If you want to directly copy  and  paste you canDownload Youtube within the frame  

Memasang Kode Frame Everyday Illusion
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:#1bdde4;height:100%;overflow:hidden;}
.ap {
position: fixed;
right: 0;
bottom:-3px;
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;
font-size:  11px; 
 border-bottom:#1bdde4;
 background: #660099;
z-index: 9999;
} 
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, #fff 50%, transparent 90%); 
} 
#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: 17px;
}
html {
  overflow-X: hidden;
  height: 100%;
}
html body {
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1bdde4), color-stop(100%, #1360d7));
  background-image: -moz-linear-gradient(top, #1bdde4 0%, #1360d7 100%);
  background-image: -webkit-linear-gradient(top, #1bdde4 0%, #1360d7 100%);
  background-image: linear-gradient(to bottom, #1bdde4 0%, #1360d7 100%);
  position: relative;
  top: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  margin: auto;
  overflow: hidden;
}
html body h1 {
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 100;
  letter-spacing: 0.5px;
  color: #FFFFFF;
  font-size: 40px;
  text-align: center;
}
html body .sand {
  position: absolute;
  top: 10%;
  left: -10%;
  width: 120%;
  height: 1000px;
  -moz-border-radius: 50% 50% 0 0/3% 3% 0 0;
  -webkit-border-radius: 50%;
  border-radius: 50% 50% 0 0/3% 3% 0 0;
  background:  rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0 20px 30px 0 rgba(0, 0, 0, 0.3), 0 -20px 30px 0 rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 20px 30px 0 rgba(0, 0, 0, 0.3), 0 -20px 30px 0 rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 20px 30px 0 rgba(0, 0, 0, 0.3), 0 -20px 30px 0 rgba(0, 0, 0, 0.3);
}
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;
  }
}
.frame-border {
 top:60px;
 position: relative;
 -moz-box-shadow: 20px 20px 36px rgba(0,0,0,0.2);
 -webkit-box-shadow: 20px 20px 36px rgba(0,0,0,0.2);
 box-shadow: 20px 20px 36px rgba(0,0,0,0.2);
 border: 20px solid transparent;
 -moz-border-image: -moz-linear-gradient(top, #fc0 0%, #990099 100%);
 -webkit-border-image: -webkit-linear-gradient(top, #fc0 0%, #990099  100%);
 border-image: linear-gradient(to bottom, #fc0 0%, #990099  100%);
 border-image-slice: 1; 
 width: 533px;
 height: 407px;
 margin: 0 auto;
}
.frame-inset {
 -moz-box-shadow:    inset 0 0 10px rgba(0,0,0,0.2);
    -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
    box-shadow:         inset 0 0 10px rgba(0,0,0,0.2);
 background-color: #bebebe;
 border:19px solid #f00;
 max-width:220%;
 max-height:100%;
 padding:5px20px;
}
#bkg {
  position: absolute;
  width: 90px;
  height: 90px;
  margin-left: -310px;
  margin-top: -190px;
  top: 50%;
  left:49%;  
}
#left, #right {
  display: inline-block;
  position: inherit;
  border: 20px solid transparent;
 -moz-border-image: -moz-linear-gradient(top, #660099 0%, #fc0 100%);
 -webkit-border-image: -webkit-linear-gradient(top, #660099 0%, #fc0 100%);
 border-image: linear-gradient(to bottom, #660099 0%, #fc0 100%);
 border-image-slice: 1; 
  width: 100px;
  height: 100px;
  transform: rotate(45deg);
  box-shadow: 20px -20px 10px 10px rgba(12,12,12, 0.5);
}
#left {
  top: 0px;
  left: 0px;
}
#right {
  top: 0px;
  right: 10px;
}
#sh-1 {
  display: inline-block;
  position: inherit;
  border-right: 50px solid #111; 
  width: 0px;
  height: 50px;
  top: 5px;
  left:  15px;
  transform: rotate(45deg);
  box-shadow: 20px 10px 10px 10px rgba(12,12,12, 0.5);
}
</style>
<div class='sand'>
</div>
<div class="frame-border">
<div class="frame-inset">
<a href="http://demoshow-mys2010.blogspot.co.id/2016/06/frame-everyday-illusion.html" title="M-2010">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIVRD8jp5Ogj51ovwn1uP_YYhBNAu2AzxGntUK2Rbvt0JojupGB9SGvhv6zM0ieRDpaylFxpV1eSKgxY_-0JVyBVx8DQZ2GqD9lH5D-0RvLqB4PojzMQ5Ssl3Uy5JEv2U_OyTzaG0QKhY/s1600/M-2010.jpg" title="Myscript2010" width="750" height="610"></a>
</div>
</div>
<div id='bkg'>
<div id='right'>
</div>
<div id='left'>
</div>
<div id='sh-1'>
</div>
<div id='sh-2'>
</div>
</div>
</div>
<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial ; font-size: 12px; color:#222;"> EDITED BY. <a href="https://Link Download"title="Download Full Code"><span style="color: #1919B3; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family: arial ; font-size: 12px; color:#222;"> COPYRIGHT <a href="http://sample-mys2010.blogspot.co.id/2016/06/frame-everyday-illusion.html"target="_blank" title="Mari Belajar"><span style="color: #1919B3; font-size: 14px;">&nbsp; &copy; - 2016 </a>&nbsp; LET'S STUDY</a> 
</div>
<h2>
<audio id="mys2010" src="https://sites.google.com/site/laguhiburan/mp3-1/waliBaik_mys2010.mp3"controls="controls"></audio></h2>
</a></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>
      $(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> 
Everyday Illusion code by. Aleks
Work hard, dream big Code by. Colin Howeth
Design code is edited by. Mys2010 In Codepen
If you want to directly copy  &  paste you canDownload Here  Frame Everyday Illusi 

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
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