style2d.css 86 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585
  1. /* Variables */
  2. /* Placeholders */
  3. body .center {
  4. left: 0;
  5. right: 0;
  6. top: 50%;
  7. position: absolute;
  8. margin: auto;
  9. -webkit-transform: translateY(-50%);
  10. transform: translateY(-50%);
  11. }
  12. body .center .outer_one, body .center .outer_two, body .center .outer_three, body .center .outer_four, body .center .outer_five, body .center .pieces {
  13. position: absolute;
  14. width: 50px;
  15. height: 50px;
  16. left: 50%;
  17. }
  18. body .center .outer_two__piece:nth-of-type(1), body .center .outer_three__piece:nth-of-type(1) {
  19. -webkit-animation: fade 5s 0.1s infinite;
  20. animation: fade 5s 0.1s infinite;
  21. }
  22. body .center .outer_two__piece:nth-of-type(2), body .center .outer_three__piece:nth-of-type(2) {
  23. -webkit-animation: fade 5s 0.2s infinite;
  24. animation: fade 5s 0.2s infinite;
  25. }
  26. body .center .outer_two__piece:nth-of-type(3), body .center .outer_three__piece:nth-of-type(3) {
  27. -webkit-animation: fade 5s 0.3s infinite;
  28. animation: fade 5s 0.3s infinite;
  29. }
  30. body .center .outer_two__piece:nth-of-type(4), body .center .outer_three__piece:nth-of-type(4) {
  31. -webkit-animation: fade 5s 0.4s infinite;
  32. animation: fade 5s 0.4s infinite;
  33. }
  34. body .center .outer_two__piece:nth-of-type(5), body .center .outer_three__piece:nth-of-type(5) {
  35. -webkit-animation: fade 5s 0.5s infinite;
  36. animation: fade 5s 0.5s infinite;
  37. }
  38. body .center .outer_two__piece:nth-of-type(6), body .center .outer_three__piece:nth-of-type(6) {
  39. -webkit-animation: fade 5s 0.6s infinite;
  40. animation: fade 5s 0.6s infinite;
  41. }
  42. body .center .outer_two__piece:nth-of-type(7), body .center .outer_three__piece:nth-of-type(7) {
  43. -webkit-animation: fade 5s 0.7s infinite;
  44. animation: fade 5s 0.7s infinite;
  45. }
  46. body .center .outer_two__piece:nth-of-type(8), body .center .outer_three__piece:nth-of-type(8) {
  47. -webkit-animation: fade 5s 0.8s infinite;
  48. animation: fade 5s 0.8s infinite;
  49. }
  50. body .center .outer_two__piece:nth-of-type(9), body .center .outer_three__piece:nth-of-type(9) {
  51. -webkit-animation: fade 5s 0.9s infinite;
  52. animation: fade 5s 0.9s infinite;
  53. }
  54. body .center .outer_two__piece:nth-of-type(10), body .center .outer_three__piece:nth-of-type(10) {
  55. -webkit-animation: fade 5s 1s infinite;
  56. animation: fade 5s 1s infinite;
  57. }
  58. body .center .outer_two__piece:nth-of-type(11), body .center .outer_three__piece:nth-of-type(11) {
  59. -webkit-animation: fade 5s 1.1s infinite;
  60. animation: fade 5s 1.1s infinite;
  61. }
  62. body .center .outer_two__piece:nth-of-type(12), body .center .outer_three__piece:nth-of-type(12) {
  63. -webkit-animation: fade 5s 1.2s infinite;
  64. animation: fade 5s 1.2s infinite;
  65. }
  66. body .center .outer_two__piece:nth-of-type(13), body .center .outer_three__piece:nth-of-type(13) {
  67. -webkit-animation: fade 5s 1.3s infinite;
  68. animation: fade 5s 1.3s infinite;
  69. }
  70. body .center .outer_two__piece:nth-of-type(14), body .center .outer_three__piece:nth-of-type(14) {
  71. -webkit-animation: fade 5s 1.4s infinite;
  72. animation: fade 5s 1.4s infinite;
  73. }
  74. body .center .outer_two__piece:nth-of-type(15), body .center .outer_three__piece:nth-of-type(15) {
  75. -webkit-animation: fade 5s 1.5s infinite;
  76. animation: fade 5s 1.5s infinite;
  77. }
  78. body .center .outer_two__piece:nth-of-type(16), body .center .outer_three__piece:nth-of-type(16) {
  79. -webkit-animation: fade 5s 1.6s infinite;
  80. animation: fade 5s 1.6s infinite;
  81. }
  82. body .center .outer_two__piece:nth-of-type(17), body .center .outer_three__piece:nth-of-type(17) {
  83. -webkit-animation: fade 5s 1.7s infinite;
  84. animation: fade 5s 1.7s infinite;
  85. }
  86. body .center .outer_two__piece:nth-of-type(18), body .center .outer_three__piece:nth-of-type(18) {
  87. -webkit-animation: fade 5s 1.8s infinite;
  88. animation: fade 5s 1.8s infinite;
  89. }
  90. body .center .outer_two__piece:nth-of-type(19), body .center .outer_three__piece:nth-of-type(19) {
  91. -webkit-animation: fade 5s 1.9s infinite;
  92. animation: fade 5s 1.9s infinite;
  93. }
  94. body .center .outer_two__piece:nth-of-type(20), body .center .outer_three__piece:nth-of-type(20) {
  95. -webkit-animation: fade 5s 2s infinite;
  96. animation: fade 5s 2s infinite;
  97. }
  98. body .center .outer_two__piece:nth-of-type(21), body .center .outer_three__piece:nth-of-type(21) {
  99. -webkit-animation: fade 5s 2.1s infinite;
  100. animation: fade 5s 2.1s infinite;
  101. }
  102. body .center .outer_two__piece:nth-of-type(22), body .center .outer_three__piece:nth-of-type(22) {
  103. -webkit-animation: fade 5s 2.2s infinite;
  104. animation: fade 5s 2.2s infinite;
  105. }
  106. body .center .outer_two__piece:nth-of-type(23), body .center .outer_three__piece:nth-of-type(23) {
  107. -webkit-animation: fade 5s 2.3s infinite;
  108. animation: fade 5s 2.3s infinite;
  109. }
  110. body .center .outer_two__piece:nth-of-type(24), body .center .outer_three__piece:nth-of-type(24) {
  111. -webkit-animation: fade 5s 2.4s infinite;
  112. animation: fade 5s 2.4s infinite;
  113. }
  114. body .center .outer_two__piece:nth-of-type(25), body .center .outer_three__piece:nth-of-type(25) {
  115. -webkit-animation: fade 5s 2.5s infinite;
  116. animation: fade 5s 2.5s infinite;
  117. }
  118. body .center .outer_two__piece:nth-of-type(26), body .center .outer_three__piece:nth-of-type(26) {
  119. -webkit-animation: fade 5s 2.6s infinite;
  120. animation: fade 5s 2.6s infinite;
  121. }
  122. body .center .outer_two__piece:nth-of-type(27), body .center .outer_three__piece:nth-of-type(27) {
  123. -webkit-animation: fade 5s 2.7s infinite;
  124. animation: fade 5s 2.7s infinite;
  125. }
  126. body .center .outer_two__piece:nth-of-type(28), body .center .outer_three__piece:nth-of-type(28) {
  127. -webkit-animation: fade 5s 2.8s infinite;
  128. animation: fade 5s 2.8s infinite;
  129. }
  130. body .center .outer_two__piece:nth-of-type(29), body .center .outer_three__piece:nth-of-type(29) {
  131. -webkit-animation: fade 5s 2.9s infinite;
  132. animation: fade 5s 2.9s infinite;
  133. }
  134. body .center .outer_two__piece:nth-of-type(30), body .center .outer_three__piece:nth-of-type(30) {
  135. -webkit-animation: fade 5s 3s infinite;
  136. animation: fade 5s 3s infinite;
  137. }
  138. body .center .outer_two__piece:nth-of-type(31), body .center .outer_three__piece:nth-of-type(31) {
  139. -webkit-animation: fade 5s 3.1s infinite;
  140. animation: fade 5s 3.1s infinite;
  141. }
  142. body .center .outer_two__piece:nth-of-type(32), body .center .outer_three__piece:nth-of-type(32) {
  143. -webkit-animation: fade 5s 3.2s infinite;
  144. animation: fade 5s 3.2s infinite;
  145. }
  146. body .center .outer_two__piece:nth-of-type(33), body .center .outer_three__piece:nth-of-type(33) {
  147. -webkit-animation: fade 5s 3.3s infinite;
  148. animation: fade 5s 3.3s infinite;
  149. }
  150. body .center .outer_two__piece:nth-of-type(34), body .center .outer_three__piece:nth-of-type(34) {
  151. -webkit-animation: fade 5s 3.4s infinite;
  152. animation: fade 5s 3.4s infinite;
  153. }
  154. body .center .outer_two__piece:nth-of-type(35), body .center .outer_three__piece:nth-of-type(35) {
  155. -webkit-animation: fade 5s 3.5s infinite;
  156. animation: fade 5s 3.5s infinite;
  157. }
  158. body .center .outer_two__piece:nth-of-type(36), body .center .outer_three__piece:nth-of-type(36) {
  159. -webkit-animation: fade 5s 3.6s infinite;
  160. animation: fade 5s 3.6s infinite;
  161. }
  162. body .center .outer_four__piece:nth-of-type(1), body .center .outer_five__piece:nth-of-type(1) {
  163. -webkit-animation: fade 7s 0.1s infinite;
  164. animation: fade 7s 0.1s infinite;
  165. }
  166. body .center .outer_four__piece:nth-of-type(2), body .center .outer_five__piece:nth-of-type(2) {
  167. -webkit-animation: fade 7s 0.2s infinite;
  168. animation: fade 7s 0.2s infinite;
  169. }
  170. body .center .outer_four__piece:nth-of-type(3), body .center .outer_five__piece:nth-of-type(3) {
  171. -webkit-animation: fade 7s 0.3s infinite;
  172. animation: fade 7s 0.3s infinite;
  173. }
  174. body .center .outer_four__piece:nth-of-type(4), body .center .outer_five__piece:nth-of-type(4) {
  175. -webkit-animation: fade 7s 0.4s infinite;
  176. animation: fade 7s 0.4s infinite;
  177. }
  178. body .center .outer_four__piece:nth-of-type(5), body .center .outer_five__piece:nth-of-type(5) {
  179. -webkit-animation: fade 7s 0.5s infinite;
  180. animation: fade 7s 0.5s infinite;
  181. }
  182. body .center .outer_four__piece:nth-of-type(6), body .center .outer_five__piece:nth-of-type(6) {
  183. -webkit-animation: fade 7s 0.6s infinite;
  184. animation: fade 7s 0.6s infinite;
  185. }
  186. body .center .outer_four__piece:nth-of-type(7), body .center .outer_five__piece:nth-of-type(7) {
  187. -webkit-animation: fade 7s 0.7s infinite;
  188. animation: fade 7s 0.7s infinite;
  189. }
  190. body .center .outer_four__piece:nth-of-type(8), body .center .outer_five__piece:nth-of-type(8) {
  191. -webkit-animation: fade 7s 0.8s infinite;
  192. animation: fade 7s 0.8s infinite;
  193. }
  194. body .center .outer_four__piece:nth-of-type(9), body .center .outer_five__piece:nth-of-type(9) {
  195. -webkit-animation: fade 7s 0.9s infinite;
  196. animation: fade 7s 0.9s infinite;
  197. }
  198. body .center .outer_four__piece:nth-of-type(10), body .center .outer_five__piece:nth-of-type(10) {
  199. -webkit-animation: fade 7s 1s infinite;
  200. animation: fade 7s 1s infinite;
  201. }
  202. body .center .outer_four__piece:nth-of-type(11), body .center .outer_five__piece:nth-of-type(11) {
  203. -webkit-animation: fade 7s 1.1s infinite;
  204. animation: fade 7s 1.1s infinite;
  205. }
  206. body .center .outer_four__piece:nth-of-type(12), body .center .outer_five__piece:nth-of-type(12) {
  207. -webkit-animation: fade 7s 1.2s infinite;
  208. animation: fade 7s 1.2s infinite;
  209. }
  210. body .center .outer_four__piece:nth-of-type(13), body .center .outer_five__piece:nth-of-type(13) {
  211. -webkit-animation: fade 7s 1.3s infinite;
  212. animation: fade 7s 1.3s infinite;
  213. }
  214. body .center .outer_four__piece:nth-of-type(14), body .center .outer_five__piece:nth-of-type(14) {
  215. -webkit-animation: fade 7s 1.4s infinite;
  216. animation: fade 7s 1.4s infinite;
  217. }
  218. body .center .outer_four__piece:nth-of-type(15), body .center .outer_five__piece:nth-of-type(15) {
  219. -webkit-animation: fade 7s 1.5s infinite;
  220. animation: fade 7s 1.5s infinite;
  221. }
  222. body .center .outer_four__piece:nth-of-type(16), body .center .outer_five__piece:nth-of-type(16) {
  223. -webkit-animation: fade 7s 1.6s infinite;
  224. animation: fade 7s 1.6s infinite;
  225. }
  226. body .center .outer_four__piece:nth-of-type(17), body .center .outer_five__piece:nth-of-type(17) {
  227. -webkit-animation: fade 7s 1.7s infinite;
  228. animation: fade 7s 1.7s infinite;
  229. }
  230. body .center .outer_four__piece:nth-of-type(18), body .center .outer_five__piece:nth-of-type(18) {
  231. -webkit-animation: fade 7s 1.8s infinite;
  232. animation: fade 7s 1.8s infinite;
  233. }
  234. body .center .outer_four__piece:nth-of-type(19), body .center .outer_five__piece:nth-of-type(19) {
  235. -webkit-animation: fade 7s 1.9s infinite;
  236. animation: fade 7s 1.9s infinite;
  237. }
  238. body .center .outer_four__piece:nth-of-type(20), body .center .outer_five__piece:nth-of-type(20) {
  239. -webkit-animation: fade 7s 2s infinite;
  240. animation: fade 7s 2s infinite;
  241. }
  242. body .center .outer_four__piece:nth-of-type(21), body .center .outer_five__piece:nth-of-type(21) {
  243. -webkit-animation: fade 7s 2.1s infinite;
  244. animation: fade 7s 2.1s infinite;
  245. }
  246. body .center .outer_four__piece:nth-of-type(22), body .center .outer_five__piece:nth-of-type(22) {
  247. -webkit-animation: fade 7s 2.2s infinite;
  248. animation: fade 7s 2.2s infinite;
  249. }
  250. body .center .outer_four__piece:nth-of-type(23), body .center .outer_five__piece:nth-of-type(23) {
  251. -webkit-animation: fade 7s 2.3s infinite;
  252. animation: fade 7s 2.3s infinite;
  253. }
  254. body .center .outer_four__piece:nth-of-type(24), body .center .outer_five__piece:nth-of-type(24) {
  255. -webkit-animation: fade 7s 2.4s infinite;
  256. animation: fade 7s 2.4s infinite;
  257. }
  258. body .center .outer_four__piece:nth-of-type(25), body .center .outer_five__piece:nth-of-type(25) {
  259. -webkit-animation: fade 7s 2.5s infinite;
  260. animation: fade 7s 2.5s infinite;
  261. }
  262. body .center .outer_four__piece:nth-of-type(26), body .center .outer_five__piece:nth-of-type(26) {
  263. -webkit-animation: fade 7s 2.6s infinite;
  264. animation: fade 7s 2.6s infinite;
  265. }
  266. body .center .outer_four__piece:nth-of-type(27), body .center .outer_five__piece:nth-of-type(27) {
  267. -webkit-animation: fade 7s 2.7s infinite;
  268. animation: fade 7s 2.7s infinite;
  269. }
  270. body .center .outer_four__piece:nth-of-type(28), body .center .outer_five__piece:nth-of-type(28) {
  271. -webkit-animation: fade 7s 2.8s infinite;
  272. animation: fade 7s 2.8s infinite;
  273. }
  274. body .center .outer_four__piece:nth-of-type(29), body .center .outer_five__piece:nth-of-type(29) {
  275. -webkit-animation: fade 7s 2.9s infinite;
  276. animation: fade 7s 2.9s infinite;
  277. }
  278. body .center .outer_four__piece:nth-of-type(30), body .center .outer_five__piece:nth-of-type(30) {
  279. -webkit-animation: fade 7s 3s infinite;
  280. animation: fade 7s 3s infinite;
  281. }
  282. body .center .outer_four__piece:nth-of-type(31), body .center .outer_five__piece:nth-of-type(31) {
  283. -webkit-animation: fade 7s 3.1s infinite;
  284. animation: fade 7s 3.1s infinite;
  285. }
  286. body .center .outer_four__piece:nth-of-type(32), body .center .outer_five__piece:nth-of-type(32) {
  287. -webkit-animation: fade 7s 3.2s infinite;
  288. animation: fade 7s 3.2s infinite;
  289. }
  290. body .center .outer_four__piece:nth-of-type(33), body .center .outer_five__piece:nth-of-type(33) {
  291. -webkit-animation: fade 7s 3.3s infinite;
  292. animation: fade 7s 3.3s infinite;
  293. }
  294. body .center .outer_four__piece:nth-of-type(34), body .center .outer_five__piece:nth-of-type(34) {
  295. -webkit-animation: fade 7s 3.4s infinite;
  296. animation: fade 7s 3.4s infinite;
  297. }
  298. body .center .outer_four__piece:nth-of-type(35), body .center .outer_five__piece:nth-of-type(35) {
  299. -webkit-animation: fade 7s 3.5s infinite;
  300. animation: fade 7s 3.5s infinite;
  301. }
  302. body .center .outer_four__piece:nth-of-type(36), body .center .outer_five__piece:nth-of-type(36) {
  303. -webkit-animation: fade 7s 3.6s infinite;
  304. animation: fade 7s 3.6s infinite;
  305. }
  306. body .center .outer_one__piece, body .center .outer_two__piece, body .center .pieces .future_ui__piece {
  307. position: absolute;
  308. }
  309. body .center .outer_one__piece:nth-of-type(1), body .center .outer_two__piece:nth-of-type(1), body .center .pieces .future_ui__piece:nth-of-type(1) {
  310. border-radius: 2px;
  311. -webkit-transform: rotateZ(10deg);
  312. transform: rotateZ(10deg);
  313. }
  314. body .center .outer_one__piece:nth-of-type(2), body .center .outer_two__piece:nth-of-type(2), body .center .pieces .future_ui__piece:nth-of-type(2) {
  315. border-radius: 2px;
  316. -webkit-transform: rotateZ(20deg);
  317. transform: rotateZ(20deg);
  318. }
  319. body .center .outer_one__piece:nth-of-type(3), body .center .outer_two__piece:nth-of-type(3), body .center .pieces .future_ui__piece:nth-of-type(3) {
  320. border-radius: 2px;
  321. -webkit-transform: rotateZ(30deg);
  322. transform: rotateZ(30deg);
  323. }
  324. body .center .outer_one__piece:nth-of-type(4), body .center .outer_two__piece:nth-of-type(4), body .center .pieces .future_ui__piece:nth-of-type(4) {
  325. border-radius: 2px;
  326. -webkit-transform: rotateZ(40deg);
  327. transform: rotateZ(40deg);
  328. }
  329. body .center .outer_one__piece:nth-of-type(5), body .center .outer_two__piece:nth-of-type(5), body .center .pieces .future_ui__piece:nth-of-type(5) {
  330. border-radius: 2px;
  331. -webkit-transform: rotateZ(50deg);
  332. transform: rotateZ(50deg);
  333. }
  334. body .center .outer_one__piece:nth-of-type(6), body .center .outer_two__piece:nth-of-type(6), body .center .pieces .future_ui__piece:nth-of-type(6) {
  335. border-radius: 2px;
  336. -webkit-transform: rotateZ(60deg);
  337. transform: rotateZ(60deg);
  338. }
  339. body .center .outer_one__piece:nth-of-type(7), body .center .outer_two__piece:nth-of-type(7), body .center .pieces .future_ui__piece:nth-of-type(7) {
  340. border-radius: 2px;
  341. -webkit-transform: rotateZ(70deg);
  342. transform: rotateZ(70deg);
  343. }
  344. body .center .outer_one__piece:nth-of-type(8), body .center .outer_two__piece:nth-of-type(8), body .center .pieces .future_ui__piece:nth-of-type(8) {
  345. border-radius: 2px;
  346. -webkit-transform: rotateZ(80deg);
  347. transform: rotateZ(80deg);
  348. }
  349. body .center .outer_one__piece:nth-of-type(9), body .center .outer_two__piece:nth-of-type(9), body .center .pieces .future_ui__piece:nth-of-type(9) {
  350. border-radius: 2px;
  351. -webkit-transform: rotateZ(90deg);
  352. transform: rotateZ(90deg);
  353. }
  354. body .center .outer_one__piece:nth-of-type(10), body .center .outer_two__piece:nth-of-type(10), body .center .pieces .future_ui__piece:nth-of-type(10) {
  355. border-radius: 2px;
  356. -webkit-transform: rotateZ(100deg);
  357. transform: rotateZ(100deg);
  358. }
  359. body .center .outer_one__piece:nth-of-type(11), body .center .outer_two__piece:nth-of-type(11), body .center .pieces .future_ui__piece:nth-of-type(11) {
  360. border-radius: 2px;
  361. -webkit-transform: rotateZ(110deg);
  362. transform: rotateZ(110deg);
  363. }
  364. body .center .outer_one__piece:nth-of-type(12), body .center .outer_two__piece:nth-of-type(12), body .center .pieces .future_ui__piece:nth-of-type(12) {
  365. border-radius: 2px;
  366. -webkit-transform: rotateZ(120deg);
  367. transform: rotateZ(120deg);
  368. }
  369. body .center .outer_one__piece:nth-of-type(13), body .center .outer_two__piece:nth-of-type(13), body .center .pieces .future_ui__piece:nth-of-type(13) {
  370. border-radius: 2px;
  371. -webkit-transform: rotateZ(130deg);
  372. transform: rotateZ(130deg);
  373. }
  374. body .center .outer_one__piece:nth-of-type(14), body .center .outer_two__piece:nth-of-type(14), body .center .pieces .future_ui__piece:nth-of-type(14) {
  375. border-radius: 2px;
  376. -webkit-transform: rotateZ(140deg);
  377. transform: rotateZ(140deg);
  378. }
  379. body .center .outer_one__piece:nth-of-type(15), body .center .outer_two__piece:nth-of-type(15), body .center .pieces .future_ui__piece:nth-of-type(15) {
  380. border-radius: 2px;
  381. -webkit-transform: rotateZ(150deg);
  382. transform: rotateZ(150deg);
  383. }
  384. body .center .outer_one__piece:nth-of-type(16), body .center .outer_two__piece:nth-of-type(16), body .center .pieces .future_ui__piece:nth-of-type(16) {
  385. border-radius: 2px;
  386. -webkit-transform: rotateZ(160deg);
  387. transform: rotateZ(160deg);
  388. }
  389. body .center .outer_one__piece:nth-of-type(17), body .center .outer_two__piece:nth-of-type(17), body .center .pieces .future_ui__piece:nth-of-type(17) {
  390. border-radius: 2px;
  391. -webkit-transform: rotateZ(170deg);
  392. transform: rotateZ(170deg);
  393. }
  394. body .center .outer_one__piece:nth-of-type(18), body .center .outer_two__piece:nth-of-type(18), body .center .pieces .future_ui__piece:nth-of-type(18) {
  395. border-radius: 2px;
  396. -webkit-transform: rotateZ(180deg);
  397. transform: rotateZ(180deg);
  398. }
  399. body .center .outer_one__piece:nth-of-type(19), body .center .outer_two__piece:nth-of-type(19), body .center .pieces .future_ui__piece:nth-of-type(19) {
  400. border-radius: 2px;
  401. -webkit-transform: rotateZ(190deg);
  402. transform: rotateZ(190deg);
  403. }
  404. body .center .outer_one__piece:nth-of-type(20), body .center .outer_two__piece:nth-of-type(20), body .center .pieces .future_ui__piece:nth-of-type(20) {
  405. border-radius: 2px;
  406. -webkit-transform: rotateZ(200deg);
  407. transform: rotateZ(200deg);
  408. }
  409. body .center .outer_one__piece:nth-of-type(21), body .center .outer_two__piece:nth-of-type(21), body .center .pieces .future_ui__piece:nth-of-type(21) {
  410. border-radius: 2px;
  411. -webkit-transform: rotateZ(210deg);
  412. transform: rotateZ(210deg);
  413. }
  414. body .center .outer_one__piece:nth-of-type(22), body .center .outer_two__piece:nth-of-type(22), body .center .pieces .future_ui__piece:nth-of-type(22) {
  415. border-radius: 2px;
  416. -webkit-transform: rotateZ(220deg);
  417. transform: rotateZ(220deg);
  418. }
  419. body .center .outer_one__piece:nth-of-type(23), body .center .outer_two__piece:nth-of-type(23), body .center .pieces .future_ui__piece:nth-of-type(23) {
  420. border-radius: 2px;
  421. -webkit-transform: rotateZ(230deg);
  422. transform: rotateZ(230deg);
  423. }
  424. body .center .outer_one__piece:nth-of-type(24), body .center .outer_two__piece:nth-of-type(24), body .center .pieces .future_ui__piece:nth-of-type(24) {
  425. border-radius: 2px;
  426. -webkit-transform: rotateZ(240deg);
  427. transform: rotateZ(240deg);
  428. }
  429. body .center .outer_one__piece:nth-of-type(25), body .center .outer_two__piece:nth-of-type(25), body .center .pieces .future_ui__piece:nth-of-type(25) {
  430. border-radius: 2px;
  431. -webkit-transform: rotateZ(250deg);
  432. transform: rotateZ(250deg);
  433. }
  434. body .center .outer_one__piece:nth-of-type(26), body .center .outer_two__piece:nth-of-type(26), body .center .pieces .future_ui__piece:nth-of-type(26) {
  435. border-radius: 2px;
  436. -webkit-transform: rotateZ(260deg);
  437. transform: rotateZ(260deg);
  438. }
  439. body .center .outer_one__piece:nth-of-type(27), body .center .outer_two__piece:nth-of-type(27), body .center .pieces .future_ui__piece:nth-of-type(27) {
  440. border-radius: 2px;
  441. -webkit-transform: rotateZ(270deg);
  442. transform: rotateZ(270deg);
  443. }
  444. body .center .outer_one__piece:nth-of-type(28), body .center .outer_two__piece:nth-of-type(28), body .center .pieces .future_ui__piece:nth-of-type(28) {
  445. border-radius: 2px;
  446. -webkit-transform: rotateZ(280deg);
  447. transform: rotateZ(280deg);
  448. }
  449. body .center .outer_one__piece:nth-of-type(29), body .center .outer_two__piece:nth-of-type(29), body .center .pieces .future_ui__piece:nth-of-type(29) {
  450. border-radius: 2px;
  451. -webkit-transform: rotateZ(290deg);
  452. transform: rotateZ(290deg);
  453. }
  454. body .center .outer_one__piece:nth-of-type(30), body .center .outer_two__piece:nth-of-type(30), body .center .pieces .future_ui__piece:nth-of-type(30) {
  455. border-radius: 2px;
  456. -webkit-transform: rotateZ(300deg);
  457. transform: rotateZ(300deg);
  458. }
  459. body .center .outer_one__piece:nth-of-type(31), body .center .outer_two__piece:nth-of-type(31), body .center .pieces .future_ui__piece:nth-of-type(31) {
  460. border-radius: 2px;
  461. -webkit-transform: rotateZ(310deg);
  462. transform: rotateZ(310deg);
  463. }
  464. body .center .outer_one__piece:nth-of-type(32), body .center .outer_two__piece:nth-of-type(32), body .center .pieces .future_ui__piece:nth-of-type(32) {
  465. border-radius: 2px;
  466. -webkit-transform: rotateZ(320deg);
  467. transform: rotateZ(320deg);
  468. }
  469. body .center .outer_one__piece:nth-of-type(33), body .center .outer_two__piece:nth-of-type(33), body .center .pieces .future_ui__piece:nth-of-type(33) {
  470. border-radius: 2px;
  471. -webkit-transform: rotateZ(330deg);
  472. transform: rotateZ(330deg);
  473. }
  474. body .center .outer_one__piece:nth-of-type(34), body .center .outer_two__piece:nth-of-type(34), body .center .pieces .future_ui__piece:nth-of-type(34) {
  475. border-radius: 2px;
  476. -webkit-transform: rotateZ(340deg);
  477. transform: rotateZ(340deg);
  478. }
  479. body .center .outer_one__piece:nth-of-type(35), body .center .outer_two__piece:nth-of-type(35), body .center .pieces .future_ui__piece:nth-of-type(35) {
  480. border-radius: 2px;
  481. -webkit-transform: rotateZ(350deg);
  482. transform: rotateZ(350deg);
  483. }
  484. body .center .outer_one__piece:nth-of-type(36), body .center .outer_two__piece:nth-of-type(36), body .center .pieces .future_ui__piece:nth-of-type(36) {
  485. border-radius: 2px;
  486. -webkit-transform: rotateZ(360deg);
  487. transform: rotateZ(360deg);
  488. }
  489. body .center .outer_three__piece {
  490. position: absolute;
  491. }
  492. body .center .outer_three__piece:nth-of-type(1) {
  493. border-radius: 2px;
  494. -webkit-transform: rotateZ(4deg);
  495. transform: rotateZ(4deg);
  496. }
  497. body .center .outer_three__piece:nth-of-type(2) {
  498. border-radius: 2px;
  499. -webkit-transform: rotateZ(8deg);
  500. transform: rotateZ(8deg);
  501. }
  502. body .center .outer_three__piece:nth-of-type(3) {
  503. border-radius: 2px;
  504. -webkit-transform: rotateZ(12deg);
  505. transform: rotateZ(12deg);
  506. }
  507. body .center .outer_three__piece:nth-of-type(4) {
  508. border-radius: 2px;
  509. -webkit-transform: rotateZ(16deg);
  510. transform: rotateZ(16deg);
  511. }
  512. body .center .outer_three__piece:nth-of-type(5) {
  513. border-radius: 2px;
  514. -webkit-transform: rotateZ(20deg);
  515. transform: rotateZ(20deg);
  516. }
  517. body .center .outer_three__piece:nth-of-type(6) {
  518. border-radius: 2px;
  519. -webkit-transform: rotateZ(24deg);
  520. transform: rotateZ(24deg);
  521. }
  522. body .center .outer_three__piece:nth-of-type(7) {
  523. border-radius: 2px;
  524. -webkit-transform: rotateZ(28deg);
  525. transform: rotateZ(28deg);
  526. }
  527. body .center .outer_three__piece:nth-of-type(8) {
  528. border-radius: 2px;
  529. -webkit-transform: rotateZ(32deg);
  530. transform: rotateZ(32deg);
  531. }
  532. body .center .outer_three__piece:nth-of-type(9) {
  533. border-radius: 2px;
  534. -webkit-transform: rotateZ(36deg);
  535. transform: rotateZ(36deg);
  536. }
  537. body .center .outer_three__piece:nth-of-type(10) {
  538. border-radius: 2px;
  539. -webkit-transform: rotateZ(40deg);
  540. transform: rotateZ(40deg);
  541. }
  542. body .center .outer_three__piece:nth-of-type(11) {
  543. border-radius: 2px;
  544. -webkit-transform: rotateZ(44deg);
  545. transform: rotateZ(44deg);
  546. }
  547. body .center .outer_three__piece:nth-of-type(12) {
  548. border-radius: 2px;
  549. -webkit-transform: rotateZ(48deg);
  550. transform: rotateZ(48deg);
  551. }
  552. body .center .outer_three__piece:nth-of-type(13) {
  553. border-radius: 2px;
  554. -webkit-transform: rotateZ(52deg);
  555. transform: rotateZ(52deg);
  556. }
  557. body .center .outer_three__piece:nth-of-type(14) {
  558. border-radius: 2px;
  559. -webkit-transform: rotateZ(56deg);
  560. transform: rotateZ(56deg);
  561. }
  562. body .center .outer_three__piece:nth-of-type(15) {
  563. border-radius: 2px;
  564. -webkit-transform: rotateZ(60deg);
  565. transform: rotateZ(60deg);
  566. }
  567. body .center .outer_three__piece:nth-of-type(16) {
  568. border-radius: 2px;
  569. -webkit-transform: rotateZ(64deg);
  570. transform: rotateZ(64deg);
  571. }
  572. body .center .outer_three__piece:nth-of-type(17) {
  573. border-radius: 2px;
  574. -webkit-transform: rotateZ(68deg);
  575. transform: rotateZ(68deg);
  576. }
  577. body .center .outer_three__piece:nth-of-type(18) {
  578. border-radius: 2px;
  579. -webkit-transform: rotateZ(72deg);
  580. transform: rotateZ(72deg);
  581. }
  582. body .center .outer_three__piece:nth-of-type(19) {
  583. border-radius: 2px;
  584. -webkit-transform: rotateZ(76deg);
  585. transform: rotateZ(76deg);
  586. }
  587. body .center .outer_three__piece:nth-of-type(20) {
  588. border-radius: 2px;
  589. -webkit-transform: rotateZ(80deg);
  590. transform: rotateZ(80deg);
  591. }
  592. body .center .outer_three__piece:nth-of-type(21) {
  593. border-radius: 2px;
  594. -webkit-transform: rotateZ(84deg);
  595. transform: rotateZ(84deg);
  596. }
  597. body .center .outer_three__piece:nth-of-type(22) {
  598. border-radius: 2px;
  599. -webkit-transform: rotateZ(88deg);
  600. transform: rotateZ(88deg);
  601. }
  602. body .center .outer_three__piece:nth-of-type(23) {
  603. border-radius: 2px;
  604. -webkit-transform: rotateZ(92deg);
  605. transform: rotateZ(92deg);
  606. }
  607. body .center .outer_three__piece:nth-of-type(24) {
  608. border-radius: 2px;
  609. -webkit-transform: rotateZ(96deg);
  610. transform: rotateZ(96deg);
  611. }
  612. body .center .outer_three__piece:nth-of-type(25) {
  613. border-radius: 2px;
  614. -webkit-transform: rotateZ(100deg);
  615. transform: rotateZ(100deg);
  616. }
  617. body .center .outer_three__piece:nth-of-type(26) {
  618. border-radius: 2px;
  619. -webkit-transform: rotateZ(104deg);
  620. transform: rotateZ(104deg);
  621. }
  622. body .center .outer_three__piece:nth-of-type(27) {
  623. border-radius: 2px;
  624. -webkit-transform: rotateZ(108deg);
  625. transform: rotateZ(108deg);
  626. }
  627. body .center .outer_three__piece:nth-of-type(28) {
  628. border-radius: 2px;
  629. -webkit-transform: rotateZ(112deg);
  630. transform: rotateZ(112deg);
  631. }
  632. body .center .outer_three__piece:nth-of-type(29) {
  633. border-radius: 2px;
  634. -webkit-transform: rotateZ(116deg);
  635. transform: rotateZ(116deg);
  636. }
  637. body .center .outer_three__piece:nth-of-type(30) {
  638. border-radius: 2px;
  639. -webkit-transform: rotateZ(120deg);
  640. transform: rotateZ(120deg);
  641. }
  642. body .center .outer_three__piece:nth-of-type(31) {
  643. border-radius: 2px;
  644. -webkit-transform: rotateZ(124deg);
  645. transform: rotateZ(124deg);
  646. }
  647. body .center .outer_three__piece:nth-of-type(32) {
  648. border-radius: 2px;
  649. -webkit-transform: rotateZ(128deg);
  650. transform: rotateZ(128deg);
  651. }
  652. body .center .outer_three__piece:nth-of-type(33) {
  653. border-radius: 2px;
  654. -webkit-transform: rotateZ(132deg);
  655. transform: rotateZ(132deg);
  656. }
  657. body .center .outer_three__piece:nth-of-type(34) {
  658. border-radius: 2px;
  659. -webkit-transform: rotateZ(136deg);
  660. transform: rotateZ(136deg);
  661. }
  662. body .center .outer_three__piece:nth-of-type(35) {
  663. border-radius: 2px;
  664. -webkit-transform: rotateZ(140deg);
  665. transform: rotateZ(140deg);
  666. }
  667. body .center .outer_three__piece:nth-of-type(36) {
  668. border-radius: 2px;
  669. -webkit-transform: rotateZ(144deg);
  670. transform: rotateZ(144deg);
  671. }
  672. body .center .outer_four__piece, body .center .outer_five__piece {
  673. position: absolute;
  674. }
  675. body .center .outer_four__piece:nth-of-type(1), body .center .outer_five__piece:nth-of-type(1) {
  676. border-radius: 2px;
  677. -webkit-transform: rotateZ(-176deg);
  678. transform: rotateZ(-176deg);
  679. }
  680. body .center .outer_four__piece:nth-of-type(2), body .center .outer_five__piece:nth-of-type(2) {
  681. border-radius: 2px;
  682. -webkit-transform: rotateZ(-172deg);
  683. transform: rotateZ(-172deg);
  684. }
  685. body .center .outer_four__piece:nth-of-type(3), body .center .outer_five__piece:nth-of-type(3) {
  686. border-radius: 2px;
  687. -webkit-transform: rotateZ(-168deg);
  688. transform: rotateZ(-168deg);
  689. }
  690. body .center .outer_four__piece:nth-of-type(4), body .center .outer_five__piece:nth-of-type(4) {
  691. border-radius: 2px;
  692. -webkit-transform: rotateZ(-164deg);
  693. transform: rotateZ(-164deg);
  694. }
  695. body .center .outer_four__piece:nth-of-type(5), body .center .outer_five__piece:nth-of-type(5) {
  696. border-radius: 2px;
  697. -webkit-transform: rotateZ(-160deg);
  698. transform: rotateZ(-160deg);
  699. }
  700. body .center .outer_four__piece:nth-of-type(6), body .center .outer_five__piece:nth-of-type(6) {
  701. border-radius: 2px;
  702. -webkit-transform: rotateZ(-156deg);
  703. transform: rotateZ(-156deg);
  704. }
  705. body .center .outer_four__piece:nth-of-type(7), body .center .outer_five__piece:nth-of-type(7) {
  706. border-radius: 2px;
  707. -webkit-transform: rotateZ(-152deg);
  708. transform: rotateZ(-152deg);
  709. }
  710. body .center .outer_four__piece:nth-of-type(8), body .center .outer_five__piece:nth-of-type(8) {
  711. border-radius: 2px;
  712. -webkit-transform: rotateZ(-148deg);
  713. transform: rotateZ(-148deg);
  714. }
  715. body .center .outer_four__piece:nth-of-type(9), body .center .outer_five__piece:nth-of-type(9) {
  716. border-radius: 2px;
  717. -webkit-transform: rotateZ(-144deg);
  718. transform: rotateZ(-144deg);
  719. }
  720. body .center .outer_four__piece:nth-of-type(10), body .center .outer_five__piece:nth-of-type(10) {
  721. border-radius: 2px;
  722. -webkit-transform: rotateZ(-140deg);
  723. transform: rotateZ(-140deg);
  724. }
  725. body .center .outer_four__piece:nth-of-type(11), body .center .outer_five__piece:nth-of-type(11) {
  726. border-radius: 2px;
  727. -webkit-transform: rotateZ(-136deg);
  728. transform: rotateZ(-136deg);
  729. }
  730. body .center .outer_four__piece:nth-of-type(12), body .center .outer_five__piece:nth-of-type(12) {
  731. border-radius: 2px;
  732. -webkit-transform: rotateZ(-132deg);
  733. transform: rotateZ(-132deg);
  734. }
  735. body .center .outer_four__piece:nth-of-type(13), body .center .outer_five__piece:nth-of-type(13) {
  736. border-radius: 2px;
  737. -webkit-transform: rotateZ(-128deg);
  738. transform: rotateZ(-128deg);
  739. }
  740. body .center .outer_four__piece:nth-of-type(14), body .center .outer_five__piece:nth-of-type(14) {
  741. border-radius: 2px;
  742. -webkit-transform: rotateZ(-124deg);
  743. transform: rotateZ(-124deg);
  744. }
  745. body .center .outer_four__piece:nth-of-type(15), body .center .outer_five__piece:nth-of-type(15) {
  746. border-radius: 2px;
  747. -webkit-transform: rotateZ(-120deg);
  748. transform: rotateZ(-120deg);
  749. }
  750. body .center .outer_four__piece:nth-of-type(16), body .center .outer_five__piece:nth-of-type(16) {
  751. border-radius: 2px;
  752. -webkit-transform: rotateZ(-116deg);
  753. transform: rotateZ(-116deg);
  754. }
  755. body .center .outer_four__piece:nth-of-type(17), body .center .outer_five__piece:nth-of-type(17) {
  756. border-radius: 2px;
  757. -webkit-transform: rotateZ(-112deg);
  758. transform: rotateZ(-112deg);
  759. }
  760. body .center .outer_four__piece:nth-of-type(18), body .center .outer_five__piece:nth-of-type(18) {
  761. border-radius: 2px;
  762. -webkit-transform: rotateZ(-108deg);
  763. transform: rotateZ(-108deg);
  764. }
  765. body .center .outer_four__piece:nth-of-type(19), body .center .outer_five__piece:nth-of-type(19) {
  766. border-radius: 2px;
  767. -webkit-transform: rotateZ(-104deg);
  768. transform: rotateZ(-104deg);
  769. }
  770. body .center .outer_four__piece:nth-of-type(20), body .center .outer_five__piece:nth-of-type(20) {
  771. border-radius: 2px;
  772. -webkit-transform: rotateZ(-100deg);
  773. transform: rotateZ(-100deg);
  774. }
  775. body .center .outer_four__piece:nth-of-type(21), body .center .outer_five__piece:nth-of-type(21) {
  776. border-radius: 2px;
  777. -webkit-transform: rotateZ(-96deg);
  778. transform: rotateZ(-96deg);
  779. }
  780. body .center .outer_four__piece:nth-of-type(22), body .center .outer_five__piece:nth-of-type(22) {
  781. border-radius: 2px;
  782. -webkit-transform: rotateZ(-92deg);
  783. transform: rotateZ(-92deg);
  784. }
  785. body .center .outer_four__piece:nth-of-type(23), body .center .outer_five__piece:nth-of-type(23) {
  786. border-radius: 2px;
  787. -webkit-transform: rotateZ(-88deg);
  788. transform: rotateZ(-88deg);
  789. }
  790. body .center .outer_four__piece:nth-of-type(24), body .center .outer_five__piece:nth-of-type(24) {
  791. border-radius: 2px;
  792. -webkit-transform: rotateZ(-84deg);
  793. transform: rotateZ(-84deg);
  794. }
  795. body .center .outer_four__piece:nth-of-type(25), body .center .outer_five__piece:nth-of-type(25) {
  796. border-radius: 2px;
  797. -webkit-transform: rotateZ(-80deg);
  798. transform: rotateZ(-80deg);
  799. }
  800. body .center .outer_four__piece:nth-of-type(26), body .center .outer_five__piece:nth-of-type(26) {
  801. border-radius: 2px;
  802. -webkit-transform: rotateZ(-76deg);
  803. transform: rotateZ(-76deg);
  804. }
  805. body .center .outer_four__piece:nth-of-type(27), body .center .outer_five__piece:nth-of-type(27) {
  806. border-radius: 2px;
  807. -webkit-transform: rotateZ(-72deg);
  808. transform: rotateZ(-72deg);
  809. }
  810. body .center .outer_four__piece:nth-of-type(28), body .center .outer_five__piece:nth-of-type(28) {
  811. border-radius: 2px;
  812. -webkit-transform: rotateZ(-68deg);
  813. transform: rotateZ(-68deg);
  814. }
  815. body .center .outer_four__piece:nth-of-type(29), body .center .outer_five__piece:nth-of-type(29) {
  816. border-radius: 2px;
  817. -webkit-transform: rotateZ(-64deg);
  818. transform: rotateZ(-64deg);
  819. }
  820. body .center .outer_four__piece:nth-of-type(30), body .center .outer_five__piece:nth-of-type(30) {
  821. border-radius: 2px;
  822. -webkit-transform: rotateZ(-60deg);
  823. transform: rotateZ(-60deg);
  824. }
  825. body .center .outer_four__piece:nth-of-type(31), body .center .outer_five__piece:nth-of-type(31) {
  826. border-radius: 2px;
  827. -webkit-transform: rotateZ(-56deg);
  828. transform: rotateZ(-56deg);
  829. }
  830. body .center .outer_four__piece:nth-of-type(32), body .center .outer_five__piece:nth-of-type(32) {
  831. border-radius: 2px;
  832. -webkit-transform: rotateZ(-52deg);
  833. transform: rotateZ(-52deg);
  834. }
  835. body .center .outer_four__piece:nth-of-type(33), body .center .outer_five__piece:nth-of-type(33) {
  836. border-radius: 2px;
  837. -webkit-transform: rotateZ(-48deg);
  838. transform: rotateZ(-48deg);
  839. }
  840. body .center .outer_four__piece:nth-of-type(34), body .center .outer_five__piece:nth-of-type(34) {
  841. border-radius: 2px;
  842. -webkit-transform: rotateZ(-44deg);
  843. transform: rotateZ(-44deg);
  844. }
  845. body .center .outer_four__piece:nth-of-type(35), body .center .outer_five__piece:nth-of-type(35) {
  846. border-radius: 2px;
  847. -webkit-transform: rotateZ(-40deg);
  848. transform: rotateZ(-40deg);
  849. }
  850. body .center .outer_four__piece:nth-of-type(36), body .center .outer_five__piece:nth-of-type(36) {
  851. border-radius: 2px;
  852. -webkit-transform: rotateZ(-36deg);
  853. transform: rotateZ(-36deg);
  854. }
  855. /* Styles */
  856. body {
  857. height: 100vh;
  858. -webkit-animation: intro_box 1s 1s forwards;
  859. animation: intro_box 1s 1s forwards;
  860. opacity: 0;
  861. -webkit-perspective-origin: 50% -10%;
  862. perspective-origin: 50% -10%;
  863. margin: 0;
  864. padding: 0;
  865. font-family: montserrat;
  866. -webkit-perspective: 800;
  867. perspective: 800;
  868. background: -webkit-radial-gradient(top left ellipse, rgba(222, 11, 70, 0.26) -160%, rgba(255, 255, 255, 0) 103%), -webkit-radial-gradient(center, ellipse cover, #0C1019 0%, #0B0B0E 100%);
  869. background: radial-gradient(ellipse at top left, rgba(222, 11, 70, 0.26) -160%, rgba(255, 255, 255, 0) 103%), -webkit-radial-gradient(center, ellipse cover, #0C1019 0%, #0B0B0E 100%);
  870. overflow: hidden;
  871. }
  872. body .grain {
  873. -webkit-transform: scale(1) !important;
  874. transform: scale(1) !important;
  875. background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/overlay.png");
  876. left: 0;
  877. right: 0;
  878. margin: auto;
  879. width: 100%;
  880. height: 100%;
  881. position: absolute;
  882. z-index: 100;
  883. pointer-events: none;
  884. top: 0;
  885. opacity: 1;
  886. bottom: 0;
  887. }
  888. body .center {
  889. -webkit-transform: translateY(-21px) translateZ(-870px) rotateX(69deg) rotateY(-26deg) rotatez(-647deg) scale(0.9);
  890. transform: translateY(-21px) translateZ(-870px) rotateX(69deg) rotateY(-26deg) rotatez(-647deg) scale(0.9);
  891. height: 50px;
  892. width: 50px;
  893. -webkit-animation: wiggle 20s infinite linear;
  894. animation: wiggle 20s infinite linear;
  895. }
  896. body .center .core {
  897. width: 50px;
  898. height: 50px;
  899. border-radius: 50px;
  900. background: #de0b46;
  901. box-shadow: 0px 0px 70px 20px #de0b46;
  902. }
  903. body .center .outer_one {
  904. -webkit-transform: translateX(-120px) translateY(-50%);
  905. transform: translateX(-120px) translateY(-50%);
  906. }
  907. body .center .outer_one__piece {
  908. width: 10px;
  909. height: 30px;
  910. background: #de0b46;
  911. box-shadow: 0px 0px 20px 0px #de0b46;
  912. -webkit-transform-origin: 120px 0px;
  913. transform-origin: 120px 0px;
  914. }
  915. body .center .outer_two {
  916. -webkit-transform: translateX(-290px) translateY(-50%);
  917. transform: translateX(-290px) translateY(-50%);
  918. }
  919. body .center .outer_two__piece {
  920. width: 28px;
  921. height: 5px;
  922. background: #de0b46;
  923. box-shadow: 0px 0px 20px 0px #de0b46;
  924. -webkit-transform-origin: 290px 0px;
  925. transform-origin: 290px 0px;
  926. }
  927. body .center .outer_three {
  928. -webkit-transform: translateX(-440px) translateY(-50%);
  929. transform: translateX(-440px) translateY(-50%);
  930. }
  931. body .center .outer_three__piece {
  932. width: 55px;
  933. height: 5px;
  934. background: #55E2F9;
  935. box-shadow: 0px 0px 20px 0px #55E2F9;
  936. -webkit-transform-origin: 440px 0px;
  937. transform-origin: 440px 0px;
  938. }
  939. body .center .outer_four {
  940. -webkit-transform: translateX(-440px) translateY(-50%);
  941. transform: translateX(-440px) translateY(-50%);
  942. }
  943. body .center .outer_four__piece {
  944. width: 6px;
  945. height: 5px;
  946. background: #de0b46;
  947. box-shadow: 0px 0px 20px 0px #de0b46;
  948. -webkit-transform-origin: 440px 0px;
  949. transform-origin: 440px 0px;
  950. }
  951. body .center .outer_five {
  952. -webkit-transform: translateX(-410px) translateY(-50%);
  953. transform: translateX(-410px) translateY(-50%);
  954. }
  955. body .center .outer_five__piece {
  956. width: 6px;
  957. height: 5px;
  958. background: #de0b46;
  959. box-shadow: 0px 0px 20px 0px #de0b46;
  960. -webkit-transform-origin: 410px 0px;
  961. transform-origin: 410px 0px;
  962. }
  963. body .center .pieces {
  964. -webkit-transform: translateX(540px) translateY(-50%);
  965. transform: translateX(540px) translateY(-50%);
  966. }
  967. body .center .pieces .tip {
  968. font-size: 17px;
  969. position: absolute;
  970. left: 105%;
  971. opacity: 0;
  972. -webkit-transition: all .2s .3s;
  973. transition: all .2s .3s;
  974. font-weight: 400;
  975. color: #85DFE4;
  976. width: 100%;
  977. top: 70px;
  978. }
  979. body .center .pieces span {
  980. position: absolute;
  981. top: 19px;
  982. width: 270px;
  983. LEFT: 34PX;
  984. -webkit-transform: translateZ(-770px) rotateZ(0deg);
  985. transform: translateZ(-770px) rotateZ(0deg);
  986. -webkit-transition: all .2s .1s;
  987. transition: all .2s .1s;
  988. }
  989. body .center .pieces .line {
  990. width: 0px;
  991. height: 5px;
  992. left: -547px;
  993. -webkit-transform: rotatez(4deg);
  994. transform: rotatez(4deg);
  995. top: 17px;
  996. background: #DE0B46;
  997. position: absolute;
  998. opacity: 0;
  999. }
  1000. body .center .pieces .future_ui__piece {
  1001. border: 3px solid #DE0B46;
  1002. position: absolute;
  1003. font-weight: 900;
  1004. padding: 30px;
  1005. font-size: 30px;
  1006. box-shadow: 0px 0px 25px rgba(222, 11, 70, 0.27);
  1007. -webkit-transform-style: preserve-3d;
  1008. transform-style: preserve-3d;
  1009. -webkit-transition: all 1s .1s;
  1010. transition: all 1s .1s;
  1011. color: white;
  1012. text-align: left;
  1013. height: 20px;
  1014. background: transparent;
  1015. color: white;
  1016. border-radius: 100px !important;
  1017. box-shadow: 0px 0px 25px rgba(222, 11, 70, 0.27);
  1018. -webkit-transform-origin: -540px 0px;
  1019. transform-origin: -540px 0px;
  1020. }
  1021. body .center .pieces .future_ui__piece:nth-of-type(1) {
  1022. width: 244px;
  1023. }
  1024. body .center .pieces .future_ui__piece:nth-of-type(2) {
  1025. width: 216px;
  1026. }
  1027. body .center .pieces .future_ui__piece:nth-of-type(3) {
  1028. width: 218px;
  1029. }
  1030. body .center .pieces .future_ui__piece:nth-of-type(4) {
  1031. width: 230px;
  1032. }
  1033. body .center .pieces .future_ui__piece:nth-of-type(5) {
  1034. width: 206px;
  1035. }
  1036. body .center .pieces .future_ui__piece:nth-of-type(6) {
  1037. width: 233px;
  1038. }
  1039. body .center .pieces .future_ui__piece:nth-of-type(7) {
  1040. width: 224px;
  1041. }
  1042. body .center .pieces .future_ui__piece:nth-of-type(8) {
  1043. width: 220px;
  1044. }
  1045. body .center .pieces .future_ui__piece:nth-of-type(9) {
  1046. width: 250px;
  1047. }
  1048. body .center .pieces .future_ui__piece:nth-of-type(10) {
  1049. width: 248px;
  1050. }
  1051. body .center .pieces .future_ui__piece:nth-of-type(11) {
  1052. width: 205px;
  1053. }
  1054. body .center .pieces .future_ui__piece:nth-of-type(12) {
  1055. width: 231px;
  1056. }
  1057. body .center .pieces .future_ui__piece:nth-of-type(13) {
  1058. width: 206px;
  1059. }
  1060. body .center .pieces .future_ui__piece:nth-of-type(14) {
  1061. width: 238px;
  1062. }
  1063. body .center .pieces .future_ui__piece:nth-of-type(15) {
  1064. width: 233px;
  1065. }
  1066. body .center .pieces .future_ui__piece:nth-of-type(16) {
  1067. width: 219px;
  1068. }
  1069. body .center .pieces .future_ui__piece:nth-of-type(17) {
  1070. width: 237px;
  1071. }
  1072. body .center .pieces .future_ui__piece:nth-of-type(18) {
  1073. width: 228px;
  1074. }
  1075. body .center .pieces .future_ui__piece:nth-of-type(19) {
  1076. width: 219px;
  1077. }
  1078. body .center .pieces .future_ui__piece:nth-of-type(20) {
  1079. width: 208px;
  1080. }
  1081. body .center .pieces .future_ui__piece:nth-of-type(21) {
  1082. width: 231px;
  1083. }
  1084. body .center .pieces .future_ui__piece:nth-of-type(22) {
  1085. width: 217px;
  1086. }
  1087. body .center .pieces .future_ui__piece:nth-of-type(23) {
  1088. width: 227px;
  1089. }
  1090. body .center .pieces .future_ui__piece:nth-of-type(24) {
  1091. width: 211px;
  1092. }
  1093. body .center .pieces .future_ui__piece:nth-of-type(25) {
  1094. width: 239px;
  1095. }
  1096. body .center .pieces .future_ui__piece:nth-of-type(26) {
  1097. width: 214px;
  1098. }
  1099. body .center .pieces .future_ui__piece:nth-of-type(27) {
  1100. width: 249px;
  1101. }
  1102. body .center .pieces .future_ui__piece:nth-of-type(28) {
  1103. width: 215px;
  1104. }
  1105. body .center .pieces .future_ui__piece:nth-of-type(29) {
  1106. width: 203px;
  1107. }
  1108. body .center .pieces .future_ui__piece:nth-of-type(30) {
  1109. width: 225px;
  1110. }
  1111. body .center .pieces .future_ui__piece:nth-of-type(31) {
  1112. width: 204px;
  1113. }
  1114. body .center .pieces .future_ui__piece:nth-of-type(32) {
  1115. width: 224px;
  1116. }
  1117. body .center .pieces .future_ui__piece:nth-of-type(33) {
  1118. width: 231px;
  1119. }
  1120. body .center .pieces .future_ui__piece:nth-of-type(34) {
  1121. width: 210px;
  1122. }
  1123. body .center .pieces .future_ui__piece:nth-of-type(35) {
  1124. width: 204px;
  1125. }
  1126. body .center .pieces .future_ui__piece:nth-of-type(36) {
  1127. width: 221px;
  1128. }
  1129. body .center .pieces .future_ui__piece:nth-of-type(1) {
  1130. -webkit-transform: rotateZ(-45deg) rotateY(0deg);
  1131. transform: rotateZ(-45deg) rotateY(0deg);
  1132. width: 316px;
  1133. }
  1134. body .center .pieces .future_ui__piece:nth-of-type(1):hover {
  1135. cursor: pointer;
  1136. color: white;
  1137. -webkit-animation: blink .4s .4s;
  1138. animation: blink .4s .4s;
  1139. background: #DE0B46;
  1140. -webkit-transform: rotate(-45deg) translatex(20px);
  1141. transform: rotate(-45deg) translatex(20px);
  1142. box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
  1143. }
  1144. body .center .pieces .future_ui__piece:nth-of-type(1):hover span {
  1145. position: absolute;
  1146. top: 12px;
  1147. width: 270px;
  1148. text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
  1149. left: 240px;
  1150. -webkit-transform: translateZ(100px) rotateZ(0deg);
  1151. transform: translateZ(100px) rotateZ(0deg);
  1152. }
  1153. body .center .pieces .future_ui__piece:nth-of-type(1):hover .tip {
  1154. opacity: 1;
  1155. left: 110%;
  1156. }
  1157. body .center .pieces .future_ui__piece:nth-of-type(1):hover .line {
  1158. opacity: 1;
  1159. width: 547px;
  1160. -webkit-transition: all .4s .2s;
  1161. transition: all .4s .2s;
  1162. }
  1163. body .center .pieces .future_ui__piece:nth-of-type(2) {
  1164. -webkit-transform: rotateZ(-35deg) rotateY(0deg);
  1165. transform: rotateZ(-35deg) rotateY(0deg);
  1166. width: 255px;
  1167. }
  1168. body .center .pieces .future_ui__piece:nth-of-type(2):hover {
  1169. cursor: pointer;
  1170. color: white;
  1171. -webkit-animation: blink .4s .4s;
  1172. animation: blink .4s .4s;
  1173. background: #DE0B46;
  1174. -webkit-transform: rotate(-35deg) translatex(20px);
  1175. transform: rotate(-35deg) translatex(20px);
  1176. box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
  1177. }
  1178. body .center .pieces .future_ui__piece:nth-of-type(2):hover span {
  1179. position: absolute;
  1180. top: 12px;
  1181. width: 270px;
  1182. text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
  1183. left: 240px;
  1184. -webkit-transform: translateZ(100px) rotateZ(0deg);
  1185. transform: translateZ(100px) rotateZ(0deg);
  1186. }
  1187. body .center .pieces .future_ui__piece:nth-of-type(2):hover .tip {
  1188. opacity: 1;
  1189. left: 110%;
  1190. }
  1191. body .center .pieces .future_ui__piece:nth-of-type(2):hover .line {
  1192. opacity: 1;
  1193. width: 547px;
  1194. -webkit-transition: all .4s .2s;
  1195. transition: all .4s .2s;
  1196. }
  1197. body .center .pieces .future_ui__piece:nth-of-type(3) {
  1198. -webkit-transform: rotateZ(-25deg) rotateY(0deg);
  1199. transform: rotateZ(-25deg) rotateY(0deg);
  1200. width: 315px;
  1201. }
  1202. body .center .pieces .future_ui__piece:nth-of-type(3):hover {
  1203. cursor: pointer;
  1204. color: white;
  1205. -webkit-animation: blink .4s .4s;
  1206. animation: blink .4s .4s;
  1207. background: #DE0B46;
  1208. -webkit-transform: rotate(-25deg) translatex(20px);
  1209. transform: rotate(-25deg) translatex(20px);
  1210. box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
  1211. }
  1212. body .center .pieces .future_ui__piece:nth-of-type(3):hover span {
  1213. position: absolute;
  1214. top: 12px;
  1215. width: 270px;
  1216. text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
  1217. left: 240px;
  1218. -webkit-transform: translateZ(100px) rotateZ(0deg);
  1219. transform: translateZ(100px) rotateZ(0deg);
  1220. }
  1221. body .center .pieces .future_ui__piece:nth-of-type(3):hover .tip {
  1222. opacity: 1;
  1223. left: 110%;
  1224. }
  1225. body .center .pieces .future_ui__piece:nth-of-type(3):hover .line {
  1226. opacity: 1;
  1227. width: 547px;
  1228. -webkit-transition: all .4s .2s;
  1229. transition: all .4s .2s;
  1230. }
  1231. body .center .pieces .future_ui__piece:nth-of-type(4) {
  1232. -webkit-transform: rotateZ(-15deg) rotateY(0deg);
  1233. transform: rotateZ(-15deg) rotateY(0deg);
  1234. width: 309px;
  1235. }
  1236. body .center .pieces .future_ui__piece:nth-of-type(4):hover {
  1237. cursor: pointer;
  1238. color: white;
  1239. -webkit-animation: blink .4s .4s;
  1240. animation: blink .4s .4s;
  1241. background: #DE0B46;
  1242. -webkit-transform: rotate(-15deg) translatex(20px);
  1243. transform: rotate(-15deg) translatex(20px);
  1244. box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
  1245. }
  1246. body .center .pieces .future_ui__piece:nth-of-type(4):hover span {
  1247. position: absolute;
  1248. top: 12px;
  1249. width: 270px;
  1250. text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
  1251. left: 240px;
  1252. -webkit-transform: translateZ(100px) rotateZ(0deg);
  1253. transform: translateZ(100px) rotateZ(0deg);
  1254. }
  1255. body .center .pieces .future_ui__piece:nth-of-type(4):hover .tip {
  1256. opacity: 1;
  1257. left: 110%;
  1258. }
  1259. body .center .pieces .future_ui__piece:nth-of-type(4):hover .line {
  1260. opacity: 1;
  1261. width: 547px;
  1262. -webkit-transition: all .4s .2s;
  1263. transition: all .4s .2s;
  1264. }
  1265. body .center .pieces .future_ui__piece:nth-of-type(5) {
  1266. -webkit-transform: rotateZ(-5deg) rotateY(0deg);
  1267. transform: rotateZ(-5deg) rotateY(0deg);
  1268. width: 271px;
  1269. }
  1270. body .center .pieces .future_ui__piece:nth-of-type(5):hover {
  1271. cursor: pointer;
  1272. color: white;
  1273. -webkit-animation: blink .4s .4s;
  1274. animation: blink .4s .4s;
  1275. background: #DE0B46;
  1276. -webkit-transform: rotate(-5deg) translatex(20px);
  1277. transform: rotate(-5deg) translatex(20px);
  1278. box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
  1279. }
  1280. body .center .pieces .future_ui__piece:nth-of-type(5):hover span {
  1281. position: absolute;
  1282. top: 12px;
  1283. width: 270px;
  1284. text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
  1285. left: 240px;
  1286. -webkit-transform: translateZ(100px) rotateZ(0deg);
  1287. transform: translateZ(100px) rotateZ(0deg);
  1288. }
  1289. body .center .pieces .future_ui__piece:nth-of-type(5):hover .tip {
  1290. opacity: 1;
  1291. left: 110%;
  1292. }
  1293. body .center .pieces .future_ui__piece:nth-of-type(5):hover .line {
  1294. opacity: 1;
  1295. width: 547px;
  1296. -webkit-transition: all .4s .2s;
  1297. transition: all .4s .2s;
  1298. }
  1299. body .center .pieces .future_ui__piece:nth-of-type(6) {
  1300. -webkit-transform: rotateZ(5deg) rotateY(0deg);
  1301. transform: rotateZ(5deg) rotateY(0deg);
  1302. width: 269px;
  1303. }
  1304. body .center .pieces .future_ui__piece:nth-of-type(6):hover {
  1305. cursor: pointer;
  1306. color: white;
  1307. -webkit-animation: blink .4s .4s;
  1308. animation: blink .4s .4s;
  1309. background: #DE0B46;
  1310. -webkit-transform: rotate(5deg) translatex(20px);
  1311. transform: rotate(5deg) translatex(20px);
  1312. box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
  1313. }
  1314. body .center .pieces .future_ui__piece:nth-of-type(6):hover span {
  1315. position: absolute;
  1316. top: 12px;
  1317. width: 270px;
  1318. text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
  1319. left: 240px;
  1320. -webkit-transform: translateZ(100px) rotateZ(0deg);
  1321. transform: translateZ(100px) rotateZ(0deg);
  1322. }
  1323. body .center .pieces .future_ui__piece:nth-of-type(6):hover .tip {
  1324. opacity: 1;
  1325. left: 110%;
  1326. }
  1327. body .center .pieces .future_ui__piece:nth-of-type(6):hover .line {
  1328. opacity: 1;
  1329. width: 547px;
  1330. -webkit-transition: all .4s .2s;
  1331. transition: all .4s .2s;
  1332. }
  1333. body .center .pieces .future_ui__piece:nth-of-type(7) {
  1334. -webkit-transform: rotateZ(15deg) rotateY(0deg);
  1335. transform: rotateZ(15deg) rotateY(0deg);
  1336. width: 258px;
  1337. }
  1338. body .center .pieces .future_ui__piece:nth-of-type(7):hover {
  1339. cursor: pointer;
  1340. color: white;
  1341. -webkit-animation: blink .4s .4s;
  1342. animation: blink .4s .4s;
  1343. background: #DE0B46;
  1344. -webkit-transform: rotate(15deg) translatex(20px);
  1345. transform: rotate(15deg) translatex(20px);
  1346. box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
  1347. }
  1348. body .center .pieces .future_ui__piece:nth-of-type(7):hover span {
  1349. position: absolute;
  1350. top: 12px;
  1351. width: 270px;
  1352. text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
  1353. left: 240px;
  1354. -webkit-transform: translateZ(100px) rotateZ(0deg);
  1355. transform: translateZ(100px) rotateZ(0deg);
  1356. }
  1357. body .center .pieces .future_ui__piece:nth-of-type(7):hover .tip {
  1358. opacity: 1;
  1359. left: 110%;
  1360. }
  1361. body .center .pieces .future_ui__piece:nth-of-type(7):hover .line {
  1362. opacity: 1;
  1363. width: 547px;
  1364. -webkit-transition: all .4s .2s;
  1365. transition: all .4s .2s;
  1366. }
  1367. body .center .pieces .future_ui__piece:nth-of-type(8) {
  1368. -webkit-transform: rotateZ(25deg) rotateY(0deg);
  1369. transform: rotateZ(25deg) rotateY(0deg);
  1370. width: 278px;
  1371. }
  1372. body .center .pieces .future_ui__piece:nth-of-type(8):hover {
  1373. cursor: pointer;
  1374. color: white;
  1375. -webkit-animation: blink .4s .4s;
  1376. animation: blink .4s .4s;
  1377. background: #DE0B46;
  1378. -webkit-transform: rotate(25deg) translatex(20px);
  1379. transform: rotate(25deg) translatex(20px);
  1380. box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
  1381. }
  1382. body .center .pieces .future_ui__piece:nth-of-type(8):hover span {
  1383. position: absolute;
  1384. top: 12px;
  1385. width: 270px;
  1386. text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
  1387. left: 240px;
  1388. -webkit-transform: translateZ(100px) rotateZ(0deg);
  1389. transform: translateZ(100px) rotateZ(0deg);
  1390. }
  1391. body .center .pieces .future_ui__piece:nth-of-type(8):hover .tip {
  1392. opacity: 1;
  1393. left: 110%;
  1394. }
  1395. body .center .pieces .future_ui__piece:nth-of-type(8):hover .line {
  1396. opacity: 1;
  1397. width: 547px;
  1398. -webkit-transition: all .4s .2s;
  1399. transition: all .4s .2s;
  1400. }
  1401. body .center .pieces .future_ui__piece:nth-of-type(9) {
  1402. -webkit-transform: rotateZ(35deg) rotateY(0deg);
  1403. transform: rotateZ(35deg) rotateY(0deg);
  1404. width: 275px;
  1405. }
  1406. body .center .pieces .future_ui__piece:nth-of-type(9):hover {
  1407. cursor: pointer;
  1408. color: white;
  1409. -webkit-animation: blink .4s .4s;
  1410. animation: blink .4s .4s;
  1411. background: #DE0B46;
  1412. -webkit-transform: rotate(35deg) translatex(20px);
  1413. transform: rotate(35deg) translatex(20px);
  1414. box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
  1415. }
  1416. body .center .pieces .future_ui__piece:nth-of-type(9):hover span {
  1417. position: absolute;
  1418. top: 12px;
  1419. width: 270px;
  1420. text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
  1421. left: 240px;
  1422. -webkit-transform: translateZ(100px) rotateZ(0deg);
  1423. transform: translateZ(100px) rotateZ(0deg);
  1424. }
  1425. body .center .pieces .future_ui__piece:nth-of-type(9):hover .tip {
  1426. opacity: 1;
  1427. left: 110%;
  1428. }
  1429. body .center .pieces .future_ui__piece:nth-of-type(9):hover .line {
  1430. opacity: 1;
  1431. width: 547px;
  1432. -webkit-transition: all .4s .2s;
  1433. transition: all .4s .2s;
  1434. }
  1435. body .center .pieces .future_ui__piece:nth-of-type(10) {
  1436. -webkit-transform: rotateZ(45deg) rotateY(0deg);
  1437. transform: rotateZ(45deg) rotateY(0deg);
  1438. width: 246px;
  1439. }
  1440. body .center .pieces .future_ui__piece:nth-of-type(10):hover {
  1441. cursor: pointer;
  1442. color: white;
  1443. -webkit-animation: blink .4s .4s;
  1444. animation: blink .4s .4s;
  1445. background: #DE0B46;
  1446. -webkit-transform: rotate(45deg) translatex(20px);
  1447. transform: rotate(45deg) translatex(20px);
  1448. box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
  1449. }
  1450. body .center .pieces .future_ui__piece:nth-of-type(10):hover span {
  1451. position: absolute;
  1452. top: 12px;
  1453. width: 270px;
  1454. text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
  1455. left: 240px;
  1456. -webkit-transform: translateZ(100px) rotateZ(0deg);
  1457. transform: translateZ(100px) rotateZ(0deg);
  1458. }
  1459. body .center .pieces .future_ui__piece:nth-of-type(10):hover .tip {
  1460. opacity: 1;
  1461. left: 110%;
  1462. }
  1463. body .center .pieces .future_ui__piece:nth-of-type(10):hover .line {
  1464. opacity: 1;
  1465. width: 547px;
  1466. -webkit-transition: all .4s .2s;
  1467. transition: all .4s .2s;
  1468. }
  1469. body .center .pieces .future_ui__piece:nth-of-type(11) {
  1470. -webkit-transform: rotateZ(55deg) rotateY(0deg);
  1471. transform: rotateZ(55deg) rotateY(0deg);
  1472. width: 304px;
  1473. }
  1474. body .center .pieces .future_ui__piece:nth-of-type(11):hover {
  1475. cursor: pointer;
  1476. color: white;
  1477. -webkit-animation: blink .4s .4s;
  1478. animation: blink .4s .4s;
  1479. background: #DE0B46;
  1480. -webkit-transform: rotate(55deg) translatex(20px);
  1481. transform: rotate(55deg) translatex(20px);
  1482. box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
  1483. }
  1484. body .center .pieces .future_ui__piece:nth-of-type(11):hover span {
  1485. position: absolute;
  1486. top: 12px;
  1487. width: 270px;
  1488. text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
  1489. left: 240px;
  1490. -webkit-transform: translateZ(100px) rotateZ(0deg);
  1491. transform: translateZ(100px) rotateZ(0deg);
  1492. }
  1493. body .center .pieces .future_ui__piece:nth-of-type(11):hover .tip {
  1494. opacity: 1;
  1495. left: 110%;
  1496. }
  1497. body .center .pieces .future_ui__piece:nth-of-type(11):hover .line {
  1498. opacity: 1;
  1499. width: 547px;
  1500. -webkit-transition: all .4s .2s;
  1501. transition: all .4s .2s;
  1502. }
  1503. body .center .pieces .future_ui__piece:nth-of-type(12) {
  1504. -webkit-transform: rotateZ(65deg) rotateY(0deg);
  1505. transform: rotateZ(65deg) rotateY(0deg);
  1506. width: 280px;
  1507. }
  1508. body .center .pieces .future_ui__piece:nth-of-type(12):hover {
  1509. cursor: pointer;
  1510. color: white;
  1511. -webkit-animation: blink .4s .4s;
  1512. animation: blink .4s .4s;
  1513. background: #DE0B46;
  1514. -webkit-transform: rotate(65deg) translatex(20px);
  1515. transform: rotate(65deg) translatex(20px);
  1516. box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
  1517. }
  1518. body .center .pieces .future_ui__piece:nth-of-type(12):hover span {
  1519. position: absolute;
  1520. top: 12px;
  1521. width: 270px;
  1522. text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
  1523. left: 240px;
  1524. -webkit-transform: translateZ(100px) rotateZ(0deg);
  1525. transform: translateZ(100px) rotateZ(0deg);
  1526. }
  1527. body .center .pieces .future_ui__piece:nth-of-type(12):hover .tip {
  1528. opacity: 1;
  1529. left: 110%;
  1530. }
  1531. body .center .pieces .future_ui__piece:nth-of-type(12):hover .line {
  1532. opacity: 1;
  1533. width: 547px;
  1534. -webkit-transition: all .4s .2s;
  1535. transition: all .4s .2s;
  1536. }
  1537. body .center .pieces .future_ui__piece:nth-of-type(13) {
  1538. -webkit-transform: rotateZ(75deg) rotateY(0deg);
  1539. transform: rotateZ(75deg) rotateY(0deg);
  1540. width: 319px;
  1541. }
  1542. body .center .pieces .future_ui__piece:nth-of-type(13):hover {
  1543. cursor: pointer;
  1544. color: white;
  1545. -webkit-animation: blink .4s .4s;
  1546. animation: blink .4s .4s;
  1547. background: #DE0B46;
  1548. -webkit-transform: rotate(75deg) translatex(20px);
  1549. transform: rotate(75deg) translatex(20px);
  1550. box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
  1551. }
  1552. body .center .pieces .future_ui__piece:nth-of-type(13):hover span {
  1553. position: absolute;
  1554. top: 12px;
  1555. width: 270px;
  1556. text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
  1557. left: 240px;
  1558. -webkit-transform: translateZ(100px) rotateZ(0deg);
  1559. transform: translateZ(100px) rotateZ(0deg);
  1560. }
  1561. body .center .pieces .future_ui__piece:nth-of-type(13):hover .tip {
  1562. opacity: 1;
  1563. left: 110%;
  1564. }
  1565. body .center .pieces .future_ui__piece:nth-of-type(13):hover .line {
  1566. opacity: 1;
  1567. width: 547px;
  1568. -webkit-transition: all .4s .2s;
  1569. transition: all .4s .2s;
  1570. }
  1571. body .center .pieces .future_ui__piece:nth-of-type(14) {
  1572. -webkit-transform: rotateZ(85deg) rotateY(0deg);
  1573. transform: rotateZ(85deg) rotateY(0deg);
  1574. width: 270px;
  1575. }
  1576. body .center .pieces .future_ui__piece:nth-of-type(14):hover {
  1577. cursor: pointer;
  1578. color: white;
  1579. -webkit-animation: blink .4s .4s;
  1580. animation: blink .4s .4s;
  1581. background: #DE0B46;
  1582. -webkit-transform: rotate(85deg) translatex(20px);
  1583. transform: rotate(85deg) translatex(20px);
  1584. box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
  1585. }
  1586. body .center .pieces .future_ui__piece:nth-of-type(14):hover span {
  1587. position: absolute;
  1588. top: 12px;
  1589. width: 270px;
  1590. text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
  1591. left: 240px;
  1592. -webkit-transform: translateZ(100px) rotateZ(0deg);
  1593. transform: translateZ(100px) rotateZ(0deg);
  1594. }
  1595. body .center .pieces .future_ui__piece:nth-of-type(14):hover .tip {
  1596. opacity: 1;
  1597. left: 110%;
  1598. }
  1599. body .center .pieces .future_ui__piece:nth-of-type(14):hover .line {
  1600. opacity: 1;
  1601. width: 547px;
  1602. -webkit-transition: all .4s .2s;
  1603. transition: all .4s .2s;
  1604. }
  1605. body .center .pieces .future_ui__piece:nth-of-type(15) {
  1606. -webkit-transform: rotateZ(95deg) rotateY(0deg);
  1607. transform: rotateZ(95deg) rotateY(0deg);
  1608. width: 286px;
  1609. }
  1610. body .center .pieces .future_ui__piece:nth-of-type(15):hover {
  1611. cursor: pointer;
  1612. color: white;
  1613. -webkit-animation: blink .4s .4s;
  1614. animation: blink .4s .4s;
  1615. background: #DE0B46;
  1616. -webkit-transform: rotate(95deg) translatex(20px);
  1617. transform: rotate(95deg) translatex(20px);
  1618. box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
  1619. }
  1620. body .center .pieces .future_ui__piece:nth-of-type(15):hover span {
  1621. position: absolute;
  1622. top: 12px;
  1623. width: 270px;
  1624. text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
  1625. left: 240px;
  1626. -webkit-transform: translateZ(100px) rotateZ(0deg);
  1627. transform: translateZ(100px) rotateZ(0deg);
  1628. }
  1629. body .center .pieces .future_ui__piece:nth-of-type(15):hover .tip {
  1630. opacity: 1;
  1631. left: 110%;
  1632. }
  1633. body .center .pieces .future_ui__piece:nth-of-type(15):hover .line {
  1634. opacity: 1;
  1635. width: 547px;
  1636. -webkit-transition: all .4s .2s;
  1637. transition: all .4s .2s;
  1638. }
  1639. body .center .pieces .future_ui__piece:nth-of-type(16) {
  1640. -webkit-transform: rotateZ(105deg) rotateY(0deg);
  1641. transform: rotateZ(105deg) rotateY(0deg);
  1642. width: 281px;
  1643. }
  1644. body .center .pieces .future_ui__piece:nth-of-type(16):hover {
  1645. cursor: pointer;
  1646. color: white;
  1647. -webkit-animation: blink .4s .4s;
  1648. animation: blink .4s .4s;
  1649. background: #DE0B46;
  1650. -webkit-transform: rotate(105deg) translatex(20px);
  1651. transform: rotate(105deg) translatex(20px);
  1652. box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
  1653. }
  1654. body .center .pieces .future_ui__piece:nth-of-type(16):hover span {
  1655. position: absolute;
  1656. top: 12px;
  1657. width: 270px;
  1658. text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
  1659. left: 240px;
  1660. -webkit-transform: translateZ(100px) rotateZ(0deg);
  1661. transform: translateZ(100px) rotateZ(0deg);
  1662. }
  1663. body .center .pieces .future_ui__piece:nth-of-type(16):hover .tip {
  1664. opacity: 1;
  1665. left: 110%;
  1666. }
  1667. body .center .pieces .future_ui__piece:nth-of-type(16):hover .line {
  1668. opacity: 1;
  1669. width: 547px;
  1670. -webkit-transition: all .4s .2s;
  1671. transition: all .4s .2s;
  1672. }
  1673. body .center .pieces .future_ui__piece:nth-of-type(17) {
  1674. -webkit-transform: rotateZ(115deg) rotateY(0deg);
  1675. transform: rotateZ(115deg) rotateY(0deg);
  1676. width: 252px;
  1677. }
  1678. body .center .pieces .future_ui__piece:nth-of-type(17):hover {
  1679. cursor: pointer;
  1680. color: white;
  1681. -webkit-animation: blink .4s .4s;
  1682. animation: blink .4s .4s;
  1683. background: #DE0B46;
  1684. -webkit-transform: rotate(115deg) translatex(20px);
  1685. transform: rotate(115deg) translatex(20px);
  1686. box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
  1687. }
  1688. body .center .pieces .future_ui__piece:nth-of-type(17):hover span {
  1689. position: absolute;
  1690. top: 12px;
  1691. width: 270px;
  1692. text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
  1693. left: 240px;
  1694. -webkit-transform: translateZ(100px) rotateZ(0deg);
  1695. transform: translateZ(100px) rotateZ(0deg);
  1696. }
  1697. body .center .pieces .future_ui__piece:nth-of-type(17):hover .tip {
  1698. opacity: 1;
  1699. left: 110%;
  1700. }
  1701. body .center .pieces .future_ui__piece:nth-of-type(17):hover .line {
  1702. opacity: 1;
  1703. width: 547px;
  1704. -webkit-transition: all .4s .2s;
  1705. transition: all .4s .2s;
  1706. }
  1707. body .center .pieces .future_ui__piece:nth-of-type(18) {
  1708. -webkit-transform: rotateZ(125deg) rotateY(0deg);
  1709. transform: rotateZ(125deg) rotateY(0deg);
  1710. width: 269px;
  1711. }
  1712. body .center .pieces .future_ui__piece:nth-of-type(18):hover {
  1713. cursor: pointer;
  1714. color: white;
  1715. -webkit-animation: blink .4s .4s;
  1716. animation: blink .4s .4s;
  1717. background: #DE0B46;
  1718. -webkit-transform: rotate(125deg) translatex(20px);
  1719. transform: rotate(125deg) translatex(20px);
  1720. box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
  1721. }
  1722. body .center .pieces .future_ui__piece:nth-of-type(18):hover span {
  1723. position: absolute;
  1724. top: 12px;
  1725. width: 270px;
  1726. text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
  1727. left: 240px;
  1728. -webkit-transform: translateZ(100px) rotateZ(0deg);
  1729. transform: translateZ(100px) rotateZ(0deg);
  1730. }
  1731. body .center .pieces .future_ui__piece:nth-of-type(18):hover .tip {
  1732. opacity: 1;
  1733. left: 110%;
  1734. }
  1735. body .center .pieces .future_ui__piece:nth-of-type(18):hover .line {
  1736. opacity: 1;
  1737. width: 547px;
  1738. -webkit-transition: all .4s .2s;
  1739. transition: all .4s .2s;
  1740. }
  1741. body .center .pieces .future_ui__piece:nth-of-type(19) {
  1742. -webkit-transform: rotateZ(135deg) rotateY(0deg);
  1743. transform: rotateZ(135deg) rotateY(0deg);
  1744. width: 262px;
  1745. }
  1746. body .center .pieces .future_ui__piece:nth-of-type(19):hover {
  1747. cursor: pointer;
  1748. color: white;
  1749. -webkit-animation: blink .4s .4s;
  1750. animation: blink .4s .4s;
  1751. background: #DE0B46;
  1752. -webkit-transform: rotate(135deg) translatex(20px);
  1753. transform: rotate(135deg) translatex(20px);
  1754. box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
  1755. }
  1756. body .center .pieces .future_ui__piece:nth-of-type(19):hover span {
  1757. position: absolute;
  1758. top: 12px;
  1759. width: 270px;
  1760. text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
  1761. left: 240px;
  1762. -webkit-transform: translateZ(100px) rotateZ(0deg);
  1763. transform: translateZ(100px) rotateZ(0deg);
  1764. }
  1765. body .center .pieces .future_ui__piece:nth-of-type(19):hover .tip {
  1766. opacity: 1;
  1767. left: 110%;
  1768. }
  1769. body .center .pieces .future_ui__piece:nth-of-type(19):hover .line {
  1770. opacity: 1;
  1771. width: 547px;
  1772. -webkit-transition: all .4s .2s;
  1773. transition: all .4s .2s;
  1774. }
  1775. body .center .pieces .future_ui__piece:nth-of-type(20) {
  1776. -webkit-transform: rotateZ(145deg) rotateY(0deg);
  1777. transform: rotateZ(145deg) rotateY(0deg);
  1778. width: 242px;
  1779. }
  1780. body .center .pieces .future_ui__piece:nth-of-type(20):hover {
  1781. cursor: pointer;
  1782. color: white;
  1783. -webkit-animation: blink .4s .4s;
  1784. animation: blink .4s .4s;
  1785. background: #DE0B46;
  1786. -webkit-transform: rotate(145deg) translatex(20px);
  1787. transform: rotate(145deg) translatex(20px);
  1788. box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
  1789. }
  1790. body .center .pieces .future_ui__piece:nth-of-type(20):hover span {
  1791. position: absolute;
  1792. top: 12px;
  1793. width: 270px;
  1794. text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
  1795. left: 240px;
  1796. -webkit-transform: translateZ(100px) rotateZ(0deg);
  1797. transform: translateZ(100px) rotateZ(0deg);
  1798. }
  1799. body .center .pieces .future_ui__piece:nth-of-type(20):hover .tip {
  1800. opacity: 1;
  1801. left: 110%;
  1802. }
  1803. body .center .pieces .future_ui__piece:nth-of-type(20):hover .line {
  1804. opacity: 1;
  1805. width: 547px;
  1806. -webkit-transition: all .4s .2s;
  1807. transition: all .4s .2s;
  1808. }
  1809. body .center .pieces .future_ui__piece:nth-of-type(21) {
  1810. -webkit-transform: rotateZ(155deg) rotateY(0deg);
  1811. transform: rotateZ(155deg) rotateY(0deg);
  1812. width: 273px;
  1813. }
  1814. body .center .pieces .future_ui__piece:nth-of-type(21):hover {
  1815. cursor: pointer;
  1816. color: white;
  1817. -webkit-animation: blink .4s .4s;
  1818. animation: blink .4s .4s;
  1819. background: #DE0B46;
  1820. -webkit-transform: rotate(155deg) translatex(20px);
  1821. transform: rotate(155deg) translatex(20px);
  1822. box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
  1823. }
  1824. body .center .pieces .future_ui__piece:nth-of-type(21):hover span {
  1825. position: absolute;
  1826. top: 12px;
  1827. width: 270px;
  1828. text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
  1829. left: 240px;
  1830. -webkit-transform: translateZ(100px) rotateZ(0deg);
  1831. transform: translateZ(100px) rotateZ(0deg);
  1832. }
  1833. body .center .pieces .future_ui__piece:nth-of-type(21):hover .tip {
  1834. opacity: 1;
  1835. left: 110%;
  1836. }
  1837. body .center .pieces .future_ui__piece:nth-of-type(21):hover .line {
  1838. opacity: 1;
  1839. width: 547px;
  1840. -webkit-transition: all .4s .2s;
  1841. transition: all .4s .2s;
  1842. }
  1843. body .center .pieces .future_ui__piece:nth-of-type(22) {
  1844. -webkit-transform: rotateZ(165deg) rotateY(0deg);
  1845. transform: rotateZ(165deg) rotateY(0deg);
  1846. width: 289px;
  1847. }
  1848. body .center .pieces .future_ui__piece:nth-of-type(22):hover {
  1849. cursor: pointer;
  1850. color: white;
  1851. -webkit-animation: blink .4s .4s;
  1852. animation: blink .4s .4s;
  1853. background: #DE0B46;
  1854. -webkit-transform: rotate(165deg) translatex(20px);
  1855. transform: rotate(165deg) translatex(20px);
  1856. box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
  1857. }
  1858. body .center .pieces .future_ui__piece:nth-of-type(22):hover span {
  1859. position: absolute;
  1860. top: 12px;
  1861. width: 270px;
  1862. text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
  1863. left: 240px;
  1864. -webkit-transform: translateZ(100px) rotateZ(0deg);
  1865. transform: translateZ(100px) rotateZ(0deg);
  1866. }
  1867. body .center .pieces .future_ui__piece:nth-of-type(22):hover .tip {
  1868. opacity: 1;
  1869. left: 110%;
  1870. }
  1871. body .center .pieces .future_ui__piece:nth-of-type(22):hover .line {
  1872. opacity: 1;
  1873. width: 547px;
  1874. -webkit-transition: all .4s .2s;
  1875. transition: all .4s .2s;
  1876. }
  1877. body .center .pieces .future_ui__piece:nth-of-type(23) {
  1878. -webkit-transform: rotateZ(175deg) rotateY(0deg);
  1879. transform: rotateZ(175deg) rotateY(0deg);
  1880. width: 265px;
  1881. }
  1882. body .center .pieces .future_ui__piece:nth-of-type(23):hover {
  1883. cursor: pointer;
  1884. color: white;
  1885. -webkit-animation: blink .4s .4s;
  1886. animation: blink .4s .4s;
  1887. background: #DE0B46;
  1888. -webkit-transform: rotate(175deg) translatex(20px);
  1889. transform: rotate(175deg) translatex(20px);
  1890. box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
  1891. }
  1892. body .center .pieces .future_ui__piece:nth-of-type(23):hover span {
  1893. position: absolute;
  1894. top: 12px;
  1895. width: 270px;
  1896. text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
  1897. left: 240px;
  1898. -webkit-transform: translateZ(100px) rotateZ(0deg);
  1899. transform: translateZ(100px) rotateZ(0deg);
  1900. }
  1901. body .center .pieces .future_ui__piece:nth-of-type(23):hover .tip {
  1902. opacity: 1;
  1903. left: 110%;
  1904. }
  1905. body .center .pieces .future_ui__piece:nth-of-type(23):hover .line {
  1906. opacity: 1;
  1907. width: 547px;
  1908. -webkit-transition: all .4s .2s;
  1909. transition: all .4s .2s;
  1910. }
  1911. body .center .pieces .future_ui__piece:nth-of-type(24) {
  1912. -webkit-transform: rotateZ(185deg) rotateY(0deg);
  1913. transform: rotateZ(185deg) rotateY(0deg);
  1914. width: 274px;
  1915. }
  1916. body .center .pieces .future_ui__piece:nth-of-type(24):hover {
  1917. cursor: pointer;
  1918. color: white;
  1919. -webkit-animation: blink .4s .4s;
  1920. animation: blink .4s .4s;
  1921. background: #DE0B46;
  1922. -webkit-transform: rotate(185deg) translatex(20px);
  1923. transform: rotate(185deg) translatex(20px);
  1924. box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
  1925. }
  1926. body .center .pieces .future_ui__piece:nth-of-type(24):hover span {
  1927. position: absolute;
  1928. top: 12px;
  1929. width: 270px;
  1930. text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
  1931. left: 240px;
  1932. -webkit-transform: translateZ(100px) rotateZ(0deg);
  1933. transform: translateZ(100px) rotateZ(0deg);
  1934. }
  1935. body .center .pieces .future_ui__piece:nth-of-type(24):hover .tip {
  1936. opacity: 1;
  1937. left: 110%;
  1938. }
  1939. body .center .pieces .future_ui__piece:nth-of-type(24):hover .line {
  1940. opacity: 1;
  1941. width: 547px;
  1942. -webkit-transition: all .4s .2s;
  1943. transition: all .4s .2s;
  1944. }
  1945. body .center .pieces .future_ui__piece:nth-of-type(25) {
  1946. -webkit-transform: rotateZ(195deg) rotateY(0deg);
  1947. transform: rotateZ(195deg) rotateY(0deg);
  1948. width: 259px;
  1949. }
  1950. body .center .pieces .future_ui__piece:nth-of-type(25):hover {
  1951. cursor: pointer;
  1952. color: white;
  1953. -webkit-animation: blink .4s .4s;
  1954. animation: blink .4s .4s;
  1955. background: #DE0B46;
  1956. -webkit-transform: rotate(195deg) translatex(20px);
  1957. transform: rotate(195deg) translatex(20px);
  1958. box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
  1959. }
  1960. body .center .pieces .future_ui__piece:nth-of-type(25):hover span {
  1961. position: absolute;
  1962. top: 12px;
  1963. width: 270px;
  1964. text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
  1965. left: 240px;
  1966. -webkit-transform: translateZ(100px) rotateZ(0deg);
  1967. transform: translateZ(100px) rotateZ(0deg);
  1968. }
  1969. body .center .pieces .future_ui__piece:nth-of-type(25):hover .tip {
  1970. opacity: 1;
  1971. left: 110%;
  1972. }
  1973. body .center .pieces .future_ui__piece:nth-of-type(25):hover .line {
  1974. opacity: 1;
  1975. width: 547px;
  1976. -webkit-transition: all .4s .2s;
  1977. transition: all .4s .2s;
  1978. }
  1979. body .center .pieces .future_ui__piece:nth-of-type(26) {
  1980. -webkit-transform: rotateZ(205deg) rotateY(0deg);
  1981. transform: rotateZ(205deg) rotateY(0deg);
  1982. width: 317px;
  1983. }
  1984. body .center .pieces .future_ui__piece:nth-of-type(26):hover {
  1985. cursor: pointer;
  1986. color: white;
  1987. -webkit-animation: blink .4s .4s;
  1988. animation: blink .4s .4s;
  1989. background: #DE0B46;
  1990. -webkit-transform: rotate(205deg) translatex(20px);
  1991. transform: rotate(205deg) translatex(20px);
  1992. box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
  1993. }
  1994. body .center .pieces .future_ui__piece:nth-of-type(26):hover span {
  1995. position: absolute;
  1996. top: 12px;
  1997. width: 270px;
  1998. text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
  1999. left: 240px;
  2000. -webkit-transform: translateZ(100px) rotateZ(0deg);
  2001. transform: translateZ(100px) rotateZ(0deg);
  2002. }
  2003. body .center .pieces .future_ui__piece:nth-of-type(26):hover .tip {
  2004. opacity: 1;
  2005. left: 110%;
  2006. }
  2007. body .center .pieces .future_ui__piece:nth-of-type(26):hover .line {
  2008. opacity: 1;
  2009. width: 547px;
  2010. -webkit-transition: all .4s .2s;
  2011. transition: all .4s .2s;
  2012. }
  2013. body .center .pieces .future_ui__piece:nth-of-type(27) {
  2014. -webkit-transform: rotateZ(215deg) rotateY(0deg);
  2015. transform: rotateZ(215deg) rotateY(0deg);
  2016. width: 272px;
  2017. }
  2018. body .center .pieces .future_ui__piece:nth-of-type(27):hover {
  2019. cursor: pointer;
  2020. color: white;
  2021. -webkit-animation: blink .4s .4s;
  2022. animation: blink .4s .4s;
  2023. background: #DE0B46;
  2024. -webkit-transform: rotate(215deg) translatex(20px);
  2025. transform: rotate(215deg) translatex(20px);
  2026. box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
  2027. }
  2028. body .center .pieces .future_ui__piece:nth-of-type(27):hover span {
  2029. position: absolute;
  2030. top: 12px;
  2031. width: 270px;
  2032. text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
  2033. left: 240px;
  2034. -webkit-transform: translateZ(100px) rotateZ(0deg);
  2035. transform: translateZ(100px) rotateZ(0deg);
  2036. }
  2037. body .center .pieces .future_ui__piece:nth-of-type(27):hover .tip {
  2038. opacity: 1;
  2039. left: 110%;
  2040. }
  2041. body .center .pieces .future_ui__piece:nth-of-type(27):hover .line {
  2042. opacity: 1;
  2043. width: 547px;
  2044. -webkit-transition: all .4s .2s;
  2045. transition: all .4s .2s;
  2046. }
  2047. body .center .pieces .future_ui__piece:nth-of-type(28) {
  2048. -webkit-transform: rotateZ(225deg) rotateY(0deg);
  2049. transform: rotateZ(225deg) rotateY(0deg);
  2050. width: 272px;
  2051. }
  2052. body .center .pieces .future_ui__piece:nth-of-type(28):hover {
  2053. cursor: pointer;
  2054. color: white;
  2055. -webkit-animation: blink .4s .4s;
  2056. animation: blink .4s .4s;
  2057. background: #DE0B46;
  2058. -webkit-transform: rotate(225deg) translatex(20px);
  2059. transform: rotate(225deg) translatex(20px);
  2060. box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
  2061. }
  2062. body .center .pieces .future_ui__piece:nth-of-type(28):hover span {
  2063. position: absolute;
  2064. top: 12px;
  2065. width: 270px;
  2066. text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
  2067. left: 240px;
  2068. -webkit-transform: translateZ(100px) rotateZ(0deg);
  2069. transform: translateZ(100px) rotateZ(0deg);
  2070. }
  2071. body .center .pieces .future_ui__piece:nth-of-type(28):hover .tip {
  2072. opacity: 1;
  2073. left: 110%;
  2074. }
  2075. body .center .pieces .future_ui__piece:nth-of-type(28):hover .line {
  2076. opacity: 1;
  2077. width: 547px;
  2078. -webkit-transition: all .4s .2s;
  2079. transition: all .4s .2s;
  2080. }
  2081. body .center .pieces .future_ui__piece:nth-of-type(29) {
  2082. -webkit-transform: rotateZ(235deg) rotateY(0deg);
  2083. transform: rotateZ(235deg) rotateY(0deg);
  2084. width: 255px;
  2085. }
  2086. body .center .pieces .future_ui__piece:nth-of-type(29):hover {
  2087. cursor: pointer;
  2088. color: white;
  2089. -webkit-animation: blink .4s .4s;
  2090. animation: blink .4s .4s;
  2091. background: #DE0B46;
  2092. -webkit-transform: rotate(235deg) translatex(20px);
  2093. transform: rotate(235deg) translatex(20px);
  2094. box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
  2095. }
  2096. body .center .pieces .future_ui__piece:nth-of-type(29):hover span {
  2097. position: absolute;
  2098. top: 12px;
  2099. width: 270px;
  2100. text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
  2101. left: 240px;
  2102. -webkit-transform: translateZ(100px) rotateZ(0deg);
  2103. transform: translateZ(100px) rotateZ(0deg);
  2104. }
  2105. body .center .pieces .future_ui__piece:nth-of-type(29):hover .tip {
  2106. opacity: 1;
  2107. left: 110%;
  2108. }
  2109. body .center .pieces .future_ui__piece:nth-of-type(29):hover .line {
  2110. opacity: 1;
  2111. width: 547px;
  2112. -webkit-transition: all .4s .2s;
  2113. transition: all .4s .2s;
  2114. }
  2115. body .center .pieces .future_ui__piece:nth-of-type(30) {
  2116. -webkit-transform: rotateZ(245deg) rotateY(0deg);
  2117. transform: rotateZ(245deg) rotateY(0deg);
  2118. width: 250px;
  2119. }
  2120. body .center .pieces .future_ui__piece:nth-of-type(30):hover {
  2121. cursor: pointer;
  2122. color: white;
  2123. -webkit-animation: blink .4s .4s;
  2124. animation: blink .4s .4s;
  2125. background: #DE0B46;
  2126. -webkit-transform: rotate(245deg) translatex(20px);
  2127. transform: rotate(245deg) translatex(20px);
  2128. box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
  2129. }
  2130. body .center .pieces .future_ui__piece:nth-of-type(30):hover span {
  2131. position: absolute;
  2132. top: 12px;
  2133. width: 270px;
  2134. text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
  2135. left: 240px;
  2136. -webkit-transform: translateZ(100px) rotateZ(0deg);
  2137. transform: translateZ(100px) rotateZ(0deg);
  2138. }
  2139. body .center .pieces .future_ui__piece:nth-of-type(30):hover .tip {
  2140. opacity: 1;
  2141. left: 110%;
  2142. }
  2143. body .center .pieces .future_ui__piece:nth-of-type(30):hover .line {
  2144. opacity: 1;
  2145. width: 547px;
  2146. -webkit-transition: all .4s .2s;
  2147. transition: all .4s .2s;
  2148. }
  2149. body .center .pieces .future_ui__piece:nth-of-type(31) {
  2150. -webkit-transform: rotateZ(255deg) rotateY(0deg);
  2151. transform: rotateZ(255deg) rotateY(0deg);
  2152. width: 283px;
  2153. }
  2154. body .center .pieces .future_ui__piece:nth-of-type(31):hover {
  2155. cursor: pointer;
  2156. color: white;
  2157. -webkit-animation: blink .4s .4s;
  2158. animation: blink .4s .4s;
  2159. background: #DE0B46;
  2160. -webkit-transform: rotate(255deg) translatex(20px);
  2161. transform: rotate(255deg) translatex(20px);
  2162. box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
  2163. }
  2164. body .center .pieces .future_ui__piece:nth-of-type(31):hover span {
  2165. position: absolute;
  2166. top: 12px;
  2167. width: 270px;
  2168. text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
  2169. left: 240px;
  2170. -webkit-transform: translateZ(100px) rotateZ(0deg);
  2171. transform: translateZ(100px) rotateZ(0deg);
  2172. }
  2173. body .center .pieces .future_ui__piece:nth-of-type(31):hover .tip {
  2174. opacity: 1;
  2175. left: 110%;
  2176. }
  2177. body .center .pieces .future_ui__piece:nth-of-type(31):hover .line {
  2178. opacity: 1;
  2179. width: 547px;
  2180. -webkit-transition: all .4s .2s;
  2181. transition: all .4s .2s;
  2182. }
  2183. body .center .pieces .future_ui__piece:nth-of-type(32) {
  2184. -webkit-transform: rotateZ(265deg) rotateY(0deg);
  2185. transform: rotateZ(265deg) rotateY(0deg);
  2186. width: 254px;
  2187. }
  2188. body .center .pieces .future_ui__piece:nth-of-type(32):hover {
  2189. cursor: pointer;
  2190. color: white;
  2191. -webkit-animation: blink .4s .4s;
  2192. animation: blink .4s .4s;
  2193. background: #DE0B46;
  2194. -webkit-transform: rotate(265deg) translatex(20px);
  2195. transform: rotate(265deg) translatex(20px);
  2196. box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
  2197. }
  2198. body .center .pieces .future_ui__piece:nth-of-type(32):hover span {
  2199. position: absolute;
  2200. top: 12px;
  2201. width: 270px;
  2202. text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
  2203. left: 240px;
  2204. -webkit-transform: translateZ(100px) rotateZ(0deg);
  2205. transform: translateZ(100px) rotateZ(0deg);
  2206. }
  2207. body .center .pieces .future_ui__piece:nth-of-type(32):hover .tip {
  2208. opacity: 1;
  2209. left: 110%;
  2210. }
  2211. body .center .pieces .future_ui__piece:nth-of-type(32):hover .line {
  2212. opacity: 1;
  2213. width: 547px;
  2214. -webkit-transition: all .4s .2s;
  2215. transition: all .4s .2s;
  2216. }
  2217. body .center .pieces .future_ui__piece:nth-of-type(33) {
  2218. -webkit-transform: rotateZ(275deg) rotateY(0deg);
  2219. transform: rotateZ(275deg) rotateY(0deg);
  2220. width: 276px;
  2221. }
  2222. body .center .pieces .future_ui__piece:nth-of-type(33):hover {
  2223. cursor: pointer;
  2224. color: white;
  2225. -webkit-animation: blink .4s .4s;
  2226. animation: blink .4s .4s;
  2227. background: #DE0B46;
  2228. -webkit-transform: rotate(275deg) translatex(20px);
  2229. transform: rotate(275deg) translatex(20px);
  2230. box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
  2231. }
  2232. body .center .pieces .future_ui__piece:nth-of-type(33):hover span {
  2233. position: absolute;
  2234. top: 12px;
  2235. width: 270px;
  2236. text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
  2237. left: 240px;
  2238. -webkit-transform: translateZ(100px) rotateZ(0deg);
  2239. transform: translateZ(100px) rotateZ(0deg);
  2240. }
  2241. body .center .pieces .future_ui__piece:nth-of-type(33):hover .tip {
  2242. opacity: 1;
  2243. left: 110%;
  2244. }
  2245. body .center .pieces .future_ui__piece:nth-of-type(33):hover .line {
  2246. opacity: 1;
  2247. width: 547px;
  2248. -webkit-transition: all .4s .2s;
  2249. transition: all .4s .2s;
  2250. }
  2251. body .center .pieces .future_ui__piece:nth-of-type(34) {
  2252. -webkit-transform: rotateZ(285deg) rotateY(0deg);
  2253. transform: rotateZ(285deg) rotateY(0deg);
  2254. width: 287px;
  2255. }
  2256. body .center .pieces .future_ui__piece:nth-of-type(34):hover {
  2257. cursor: pointer;
  2258. color: white;
  2259. -webkit-animation: blink .4s .4s;
  2260. animation: blink .4s .4s;
  2261. background: #DE0B46;
  2262. -webkit-transform: rotate(285deg) translatex(20px);
  2263. transform: rotate(285deg) translatex(20px);
  2264. box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
  2265. }
  2266. body .center .pieces .future_ui__piece:nth-of-type(34):hover span {
  2267. position: absolute;
  2268. top: 12px;
  2269. width: 270px;
  2270. text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
  2271. left: 240px;
  2272. -webkit-transform: translateZ(100px) rotateZ(0deg);
  2273. transform: translateZ(100px) rotateZ(0deg);
  2274. }
  2275. body .center .pieces .future_ui__piece:nth-of-type(34):hover .tip {
  2276. opacity: 1;
  2277. left: 110%;
  2278. }
  2279. body .center .pieces .future_ui__piece:nth-of-type(34):hover .line {
  2280. opacity: 1;
  2281. width: 547px;
  2282. -webkit-transition: all .4s .2s;
  2283. transition: all .4s .2s;
  2284. }
  2285. body .center .pieces .future_ui__piece:nth-of-type(35) {
  2286. -webkit-transform: rotateZ(295deg) rotateY(0deg);
  2287. transform: rotateZ(295deg) rotateY(0deg);
  2288. width: 312px;
  2289. }
  2290. body .center .pieces .future_ui__piece:nth-of-type(35):hover {
  2291. cursor: pointer;
  2292. color: white;
  2293. -webkit-animation: blink .4s .4s;
  2294. animation: blink .4s .4s;
  2295. background: #DE0B46;
  2296. -webkit-transform: rotate(295deg) translatex(20px);
  2297. transform: rotate(295deg) translatex(20px);
  2298. box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
  2299. }
  2300. body .center .pieces .future_ui__piece:nth-of-type(35):hover span {
  2301. position: absolute;
  2302. top: 12px;
  2303. width: 270px;
  2304. text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
  2305. left: 240px;
  2306. -webkit-transform: translateZ(100px) rotateZ(0deg);
  2307. transform: translateZ(100px) rotateZ(0deg);
  2308. }
  2309. body .center .pieces .future_ui__piece:nth-of-type(35):hover .tip {
  2310. opacity: 1;
  2311. left: 110%;
  2312. }
  2313. body .center .pieces .future_ui__piece:nth-of-type(35):hover .line {
  2314. opacity: 1;
  2315. width: 547px;
  2316. -webkit-transition: all .4s .2s;
  2317. transition: all .4s .2s;
  2318. }
  2319. body .center .pieces .future_ui__piece:nth-of-type(36) {
  2320. -webkit-transform: rotateZ(305deg) rotateY(0deg);
  2321. transform: rotateZ(305deg) rotateY(0deg);
  2322. width: 289px;
  2323. }
  2324. body .center .pieces .future_ui__piece:nth-of-type(36):hover {
  2325. cursor: pointer;
  2326. color: white;
  2327. -webkit-animation: blink .4s .4s;
  2328. animation: blink .4s .4s;
  2329. background: #DE0B46;
  2330. -webkit-transform: rotate(305deg) translatex(20px);
  2331. transform: rotate(305deg) translatex(20px);
  2332. box-shadow: 0px 0px 55px rgba(222, 11, 70, 0.77);
  2333. }
  2334. body .center .pieces .future_ui__piece:nth-of-type(36):hover span {
  2335. position: absolute;
  2336. top: 12px;
  2337. width: 270px;
  2338. text-shadow: 0px 13px 0px rgba(30, 30, 30, 0.4);
  2339. left: 240px;
  2340. -webkit-transform: translateZ(100px) rotateZ(0deg);
  2341. transform: translateZ(100px) rotateZ(0deg);
  2342. }
  2343. body .center .pieces .future_ui__piece:nth-of-type(36):hover .tip {
  2344. opacity: 1;
  2345. left: 110%;
  2346. }
  2347. body .center .pieces .future_ui__piece:nth-of-type(36):hover .line {
  2348. opacity: 1;
  2349. width: 547px;
  2350. -webkit-transition: all .4s .2s;
  2351. transition: all .4s .2s;
  2352. }
  2353. body .center .pieces .blank {
  2354. opacity: 0.1;
  2355. background: none;
  2356. pointer-events: none;
  2357. box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.27);
  2358. border: 6px solid #3D4B6D !important;
  2359. }
  2360. /* animations */
  2361. @-webkit-keyframes spin {
  2362. 0% {
  2363. -webkit-transform: rotate(0deg);
  2364. transform: rotate(0deg);
  2365. }
  2366. 100% {
  2367. -webkit-transform: rotate(360deg);
  2368. transform: rotate(360deg);
  2369. }
  2370. }
  2371. @keyframes spin {
  2372. 0% {
  2373. -webkit-transform: rotate(0deg);
  2374. transform: rotate(0deg);
  2375. }
  2376. 100% {
  2377. -webkit-transform: rotate(360deg);
  2378. transform: rotate(360deg);
  2379. }
  2380. }
  2381. @-webkit-keyframes fade {
  2382. 0% {
  2383. opacity: 0;
  2384. }
  2385. 50% {
  2386. opacity: 1;
  2387. }
  2388. 100% {
  2389. opacity: 0;
  2390. }
  2391. }
  2392. @keyframes fade {
  2393. 0% {
  2394. opacity: 0;
  2395. }
  2396. 50% {
  2397. opacity: 1;
  2398. }
  2399. 100% {
  2400. opacity: 0;
  2401. }
  2402. }
  2403. @-webkit-keyframes blink {
  2404. 0% {
  2405. opacity: 1;
  2406. }
  2407. 25% {
  2408. opacity: 0;
  2409. }
  2410. 50% {
  2411. opacity: 1;
  2412. }
  2413. 75% {
  2414. opacity: 0;
  2415. }
  2416. 100% {
  2417. opacity: 1;
  2418. }
  2419. }
  2420. @keyframes blink {
  2421. 0% {
  2422. opacity: 1;
  2423. }
  2424. 25% {
  2425. opacity: 0;
  2426. }
  2427. 50% {
  2428. opacity: 1;
  2429. }
  2430. 75% {
  2431. opacity: 0;
  2432. }
  2433. 100% {
  2434. opacity: 1;
  2435. }
  2436. }
  2437. @-webkit-keyframes in {
  2438. 0% {
  2439. opacity: 0;
  2440. }
  2441. 100% {
  2442. opacity: 1;
  2443. }
  2444. }
  2445. @keyframes in {
  2446. 0% {
  2447. opacity: 0;
  2448. }
  2449. 100% {
  2450. opacity: 1;
  2451. }
  2452. }
  2453. @-webkit-keyframes inalt {
  2454. 0% {
  2455. opacity: 0;
  2456. }
  2457. 50% {
  2458. opacity: 1;
  2459. }
  2460. 100% {
  2461. opacity: 0;
  2462. }
  2463. }
  2464. @keyframes inalt {
  2465. 0% {
  2466. opacity: 0;
  2467. }
  2468. 50% {
  2469. opacity: 1;
  2470. }
  2471. 100% {
  2472. opacity: 0;
  2473. }
  2474. }
  2475. @-webkit-keyframes wiggle {
  2476. 0% {
  2477. -webkit-transform: translateY(0) translateZ(-840px) rotateX(64deg) rotateY(-21deg) rotatez(80deg) scale(0.9);
  2478. transform: translateY(0) translateZ(-840px) rotateX(64deg) rotateY(-21deg) rotatez(80deg) scale(0.9);
  2479. }
  2480. 25% {
  2481. -webkit-transform: translateY(0) translateZ(-820px) rotateX(66deg) rotateY(-24deg) rotatez(84deg) scale(0.9);
  2482. transform: translateY(0) translateZ(-820px) rotateX(66deg) rotateY(-24deg) rotatez(84deg) scale(0.9);
  2483. }
  2484. 50% {
  2485. -webkit-transform: translateY(0) translateZ(-840px) rotateX(62deg) rotateY(-23deg) rotatez(82deg) scale(0.9);
  2486. transform: translateY(0) translateZ(-840px) rotateX(62deg) rotateY(-23deg) rotatez(82deg) scale(0.9);
  2487. }
  2488. 75% {
  2489. -webkit-transform: translateY(0) translateZ(-840px) rotateX(63deg) rotateY(-19deg) rotatez(78deg) scale(0.9);
  2490. transform: translateY(0) translateZ(-840px) rotateX(63deg) rotateY(-19deg) rotatez(78deg) scale(0.9);
  2491. }
  2492. 100% {
  2493. -webkit-transform: translateY(0) translateZ(-840px) rotateX(64deg) rotateY(-21deg) rotatez(80deg) scale(0.9);
  2494. transform: translateY(0) translateZ(-840px) rotateX(64deg) rotateY(-21deg) rotatez(80deg) scale(0.9);
  2495. }
  2496. }
  2497. @keyframes wiggle {
  2498. 0% {
  2499. -webkit-transform: translateY(0) translateZ(-840px) rotateX(64deg) rotateY(-21deg) rotatez(80deg) scale(0.9);
  2500. transform: translateY(0) translateZ(-840px) rotateX(64deg) rotateY(-21deg) rotatez(80deg) scale(0.9);
  2501. }
  2502. 25% {
  2503. -webkit-transform: translateY(0) translateZ(-820px) rotateX(66deg) rotateY(-24deg) rotatez(84deg) scale(0.9);
  2504. transform: translateY(0) translateZ(-820px) rotateX(66deg) rotateY(-24deg) rotatez(84deg) scale(0.9);
  2505. }
  2506. 50% {
  2507. -webkit-transform: translateY(0) translateZ(-840px) rotateX(62deg) rotateY(-23deg) rotatez(82deg) scale(0.9);
  2508. transform: translateY(0) translateZ(-840px) rotateX(62deg) rotateY(-23deg) rotatez(82deg) scale(0.9);
  2509. }
  2510. 75% {
  2511. -webkit-transform: translateY(0) translateZ(-840px) rotateX(63deg) rotateY(-19deg) rotatez(78deg) scale(0.9);
  2512. transform: translateY(0) translateZ(-840px) rotateX(63deg) rotateY(-19deg) rotatez(78deg) scale(0.9);
  2513. }
  2514. 100% {
  2515. -webkit-transform: translateY(0) translateZ(-840px) rotateX(64deg) rotateY(-21deg) rotatez(80deg) scale(0.9);
  2516. transform: translateY(0) translateZ(-840px) rotateX(64deg) rotateY(-21deg) rotatez(80deg) scale(0.9);
  2517. }
  2518. }
  2519. @-webkit-keyframes intro_box {
  2520. 0% {
  2521. opacity: 0;
  2522. -webkit-transform: scale(0);
  2523. transform: scale(0);
  2524. }
  2525. 20% {
  2526. opacity: 1;
  2527. -webkit-transform: scale(1.2);
  2528. transform: scale(1.2);
  2529. }
  2530. 40% {
  2531. -webkit-transform: scale(0.89);
  2532. transform: scale(0.89);
  2533. }
  2534. 60% {
  2535. -webkit-transform: scale(1.04);
  2536. transform: scale(1.04);
  2537. }
  2538. 80% {
  2539. -webkit-transform: scale(0.98);
  2540. transform: scale(0.98);
  2541. }
  2542. 100% {
  2543. opacity: 1;
  2544. -webkit-transform: scale(1);
  2545. transform: scale(1);
  2546. }
  2547. }
  2548. @keyframes intro_box {
  2549. 0% {
  2550. opacity: 0;
  2551. -webkit-transform: scale(0);
  2552. transform: scale(0);
  2553. }
  2554. 20% {
  2555. opacity: 1;
  2556. -webkit-transform: scale(1.2);
  2557. transform: scale(1.2);
  2558. }
  2559. 40% {
  2560. -webkit-transform: scale(0.89);
  2561. transform: scale(0.89);
  2562. }
  2563. 60% {
  2564. -webkit-transform: scale(1.04);
  2565. transform: scale(1.04);
  2566. }
  2567. 80% {
  2568. -webkit-transform: scale(0.98);
  2569. transform: scale(0.98);
  2570. }
  2571. 100% {
  2572. opacity: 1;
  2573. -webkit-transform: scale(1);
  2574. transform: scale(1);
  2575. }
  2576. }