body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0}body,button,input,select,textarea{font-size:12px}h1,h2,h3,h4,h5,h6{font-size:100%}address,cite,dfn,em,var{font-style:normal}code,kbd,pre,samp{font-family:couriernew,courier,monospace}small{font-size:12px}ul,ol{list-style:none}a{text-decoration:none}a:hover{text-decoration:underline}sup{vertical-align:text-top}sub{vertical-align:text-bottom}legend{color:#000}fieldset,img{border:0}button,input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}.clearfix:before,.clearfix:after{content:"";line-height:0;display:table}.clearfix:after{clear:both}#app{background:#f9f9f9e6;justify-content:center;align-items:center;height:100%;display:flex;overflow:hidden}.text-wrapper{text-align:center;width:100%;max-width:50rem;padding:0 1rem}.text{text-transform:uppercase;letter-spacing:-14px;font-size:8em}.text .letter{width:2.8rem;transition:all .4s;display:inline-block;position:relative}.text .letter .character{opacity:.65;cursor:pointer;transition:color .4s}.text .letter span{width:100%;height:15px;display:block;position:absolute;bottom:.8rem;left:.4rem}.text .letter span:before{content:"";background:#00000040;border-radius:50%;width:0;height:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.text .letter:hover .character{color:#fff!important}.text.part1 .letter:first-child.poofed{transform-origin:50%;animation:1.4s ease-in-out infinite alternate poofing1}@keyframes poofing1{0%{transform:rotate(0)rotateY(0)translateY(0)scale(1)}50%{transform:rotate(0)rotateY(360deg)translateY(0)scale(1)}56%{transform:rotate(459deg)rotateY(360deg)translateY(0)scale(1)}to{transform:rotate(459deg)rotateY(360deg)translateY(-700px)scale(.01)}}.text.part1 .letter:first-child .character{color:#f44336;animation:1.2s linear .33333s infinite wave}.text.part1 .letter:first-child span:before{animation:1.2s linear .33333s infinite shadow}.text.part1 .letter:nth-child(2).poofed{transform-origin:50%;animation:1.4s ease-in-out infinite alternate poofing2}@keyframes poofing2{0%{transform:rotate(0)rotateY(0)translateY(0)scale(1)}50%{transform:rotate(0)rotateY(360deg)translateY(0)scale(1)}56%{transform:rotate(540deg)rotateY(360deg)translateY(0)scale(1)}to{transform:rotate(540deg)rotateY(360deg)translateY(-700px)scale(.01)}}.text.part1 .letter:nth-child(2) .character{color:#9c27b0;animation:1.2s linear .66667s infinite wave}.text.part1 .letter:nth-child(2) span:before{animation:1.2s linear .66667s infinite shadow}.text.part1 .letter:nth-child(3).poofed{transform-origin:50%;animation:1.4s ease-in-out infinite alternate poofing3}@keyframes poofing3{0%{transform:rotate(0)rotateY(0)translateY(0)scale(1)}50%{transform:rotate(0)rotateY(360deg)translateY(0)scale(1)}56%{transform:rotate(264deg)rotateY(360deg)translateY(0)scale(1)}to{transform:rotate(264deg)rotateY(360deg)translateY(-700px)scale(.01)}}.text.part1 .letter:nth-child(3) .character{color:#f99b0c;animation:1.2s linear 1s infinite wave}.text.part1 .letter:nth-child(3) span:before{animation:1.2s linear 1s infinite shadow}.text.part1 .letter:nth-child(4).poofed{transform-origin:50%;animation:1.4s ease-in-out infinite alternate poofing4}@keyframes poofing4{0%{transform:rotate(0)rotateY(0)translateY(0)scale(1)}50%{transform:rotate(0)rotateY(360deg)translateY(0)scale(1)}56%{transform:rotate(42deg)rotateY(360deg)translateY(0)scale(1)}to{transform:rotate(42deg)rotateY(360deg)translateY(-700px)scale(.01)}}.text.part1 .letter:nth-child(4) .character{color:#cee007;animation:1.2s linear 1.33333s infinite wave}.text.part1 .letter:nth-child(4) span:before{animation:1.2s linear 1.33333s infinite shadow}.text.part1 .letter:nth-child(5).poofed{transform-origin:50%;animation:1.4s ease-in-out infinite alternate poofing5}@keyframes poofing5{0%{transform:rotate(0)rotateY(0)translateY(0)scale(1)}50%{transform:rotate(0)rotateY(360deg)translateY(0)scale(1)}56%{transform:rotate(384deg)rotateY(360deg)translateY(0)scale(1)}to{transform:rotate(384deg)rotateY(360deg)translateY(-700px)scale(.01)}}.text.part1 .letter:nth-child(5) .character{color:#00c6b2;animation:1.2s linear 1.66667s infinite wave}.text.part1 .letter:nth-child(5) span:before{animation:1.2s linear 1.66667s infinite shadow}.text.part1 .letter:nth-child(6).poofed{transform-origin:50%;animation:1.4s ease-in-out infinite alternate poofing6}@keyframes poofing6{0%{transform:rotate(0)rotateY(0)translateY(0)scale(1)}50%{transform:rotate(0)rotateY(360deg)translateY(0)scale(1)}56%{transform:rotate(156deg)rotateY(360deg)translateY(0)scale(1)}to{transform:rotate(156deg)rotateY(360deg)translateY(-700px)scale(.01)}}.text.part1 .letter:nth-child(6) .character{color:#f44336;animation:1.2s linear 2s infinite wave}.text.part1 .letter:nth-child(6) span:before{animation:1.2s linear 2s infinite shadow}.text.part1 .letter:nth-child(7).poofed{transform-origin:50%;animation:1.4s ease-in-out infinite alternate poofing7}@keyframes poofing7{0%{transform:rotate(0)rotateY(0)translateY(0)scale(1)}50%{transform:rotate(0)rotateY(360deg)translateY(0)scale(1)}56%{transform:rotate(156deg)rotateY(360deg)translateY(0)scale(1)}to{transform:rotate(156deg)rotateY(360deg)translateY(-700px)scale(.01)}}.text.part1 .letter:nth-child(7) .character{color:#4caf50;animation:1.2s linear 2.5s infinite wave}.text.part1 .letter:nth-child(7) span:before{animation:1.2s linear 3s infinite shadow}.text.part2 span:first-child.poofed{animation:1.4s ease-in-out infinite alternate sec_poofing1}@keyframes sec_poofing1{0%{transform:rotate(0)rotateY(0)translateY(0)scale(1)}50%{transform:rotate(0)rotateY(360deg)translateY(0)scale(1)}56%{transform:rotate(268deg)rotateY(360deg)translateY(0)scale(1)}to{transform:rotate(268deg)rotateY(360deg)translateY(-700px)scale(.01)}}.text.part2 span:first-child .character{color:#ff5a5f;animation:1.2s linear 2.33333s infinite wave}.text.part2 span:first-child span:before{animation:1.2s linear 2.33333s infinite shadow}.text.part2 span:nth-child(2).poofed{animation:1.4s ease-in-out infinite alternate sec_poofing2}@keyframes sec_poofing2{0%{transform:rotate(0)rotateY(0)translateY(0)scale(1)}50%{transform:rotate(0)rotateY(360deg)translateY(0)scale(1)}56%{transform:rotate(135deg)rotateY(360deg)translateY(0)scale(1)}to{transform:rotate(135deg)rotateY(360deg)translateY(-700px)scale(.01)}}.text.part2 span:nth-child(2) .character{color:#f99b0c;animation:1.2s linear 2.66667s infinite wave}.text.part2 span:nth-child(2) span:before{animation:1.2s linear 2.66667s infinite shadow}.text.part2 span:nth-child(3).poofed{animation:1.4s ease-in-out infinite alternate sec_poofing3}@keyframes sec_poofing3{0%{transform:rotate(0)rotateY(0)translateY(0)scale(1)}50%{transform:rotate(0)rotateY(360deg)translateY(0)scale(1)}56%{transform:rotate(442deg)rotateY(360deg)translateY(0)scale(1)}to{transform:rotate(442deg)rotateY(360deg)translateY(-700px)scale(.01)}}.text.part2 span:nth-child(3) .character{color:#cee007;animation:1.2s linear 3s infinite wave}.text.part2 span:nth-child(3) span:before{animation:1.2s linear 3s infinite shadow}.text.part2 span:nth-child(4).poofed{animation:1.4s ease-in-out infinite alternate sec_poofing4}@keyframes sec_poofing4{0%{transform:rotate(0)rotateY(0)translateY(0)scale(1)}50%{transform:rotate(0)rotateY(360deg)translateY(0)scale(1)}56%{transform:rotate(525deg)rotateY(360deg)translateY(0)scale(1)}to{transform:rotate(525deg)rotateY(360deg)translateY(-700px)scale(.01)}}.text.part2 span:nth-child(4) .character{color:#00c6b2;animation:1.2s linear 3.33333s infinite wave}.text.part2 span:nth-child(4) span:before{animation:1.2s linear 3.33333s infinite shadow}.text.part2 span:nth-child(5).poofed{animation:1.4s ease-in-out infinite alternate sec_poofing5}@keyframes sec_poofing5{0%{transform:rotate(0)rotateY(0)translateY(0)scale(1)}50%{transform:rotate(0)rotateY(360deg)translateY(0)scale(1)}56%{transform:rotate(419deg)rotateY(360deg)translateY(0)scale(1)}to{transform:rotate(419deg)rotateY(360deg)translateY(-700px)scale(.01)}}.text.part2 span:nth-child(5) .character{color:#4e2a84;animation:1.2s linear 3.66667s infinite wave}.text.part2 span:nth-child(5) span:before{animation:1.2s linear 3.66667s infinite shadow}.text.part2 span:nth-child(6).poofed{animation:1.4s ease-in-out infinite alternate sec_poofing6}@keyframes sec_poofing6{0%{transform:rotate(0)rotateY(0)translateY(0)scale(1)}50%{transform:rotate(0)rotateY(360deg)translateY(0)scale(1)}56%{transform:rotate(246deg)rotateY(360deg)translateY(0)scale(1)}to{transform:rotate(246deg)rotateY(360deg)translateY(-700px)scale(.01)}}.text.part2 span:nth-child(6) .character{color:#9c27b0;animation:1.2s linear 4s infinite wave}.text.part2 span:nth-child(6) span:before{animation:1.2s linear 4s infinite shadow}.text.part2 span:nth-child(7).poofed{animation:1.4s ease-in-out infinite alternate sec_poofing7}@keyframes sec_poofing7{0%{transform:rotate(0)rotateY(0)translateY(0)scale(1)}50%{transform:rotate(0)rotateY(360deg)translateY(0)scale(1)}56%{transform:rotate(206deg)rotateY(360deg)translateY(0)scale(1)}to{transform:rotate(206deg)rotateY(360deg)translateY(-700px)scale(.01)}}.text.part2 span:nth-child(7) .character{color:#f99b0c;animation:1.2s linear 4.33333s infinite wave}.text.part2 span:nth-child(7) span:before{animation:1.2s linear 4.33333s infinite shadow}.text.part2 span:nth-child(8).poofed{animation:1.4s ease-in-out infinite alternate sec_poofing8}@keyframes sec_poofing8{0%{transform:rotate(0)rotateY(0)translateY(0)scale(1)}50%{transform:rotate(0)rotateY(360deg)translateY(0)scale(1)}56%{transform:rotate(60deg)rotateY(360deg)translateY(0)scale(1)}to{transform:rotate(60deg)rotateY(360deg)translateY(-700px)scale(.01)}}.text.part2 span:nth-child(8) .character{color:#cee007;animation:1.2s linear 4.66667s infinite wave}.text.part2 span:nth-child(8) span:before{animation:1.2s linear 4.66667s infinite shadow}.text.part2 span:nth-child(9).poofed{animation:1.4s ease-in-out infinite alternate sec_poofing9}@keyframes sec_poofing9{0%{transform:rotate(0)rotateY(0)translateY(0)scale(1)}50%{transform:rotate(0)rotateY(360deg)translateY(0)scale(1)}56%{transform:rotate(496deg)rotateY(360deg)translateY(0)scale(1)}to{transform:rotate(496deg)rotateY(360deg)translateY(-700px)scale(.01)}}.text.part2 span:nth-child(9) .character{color:#00c6b2;animation:1.2s linear 5s infinite wave}.text.part2 span:nth-child(9) span:before{animation:1.2s linear 5s infinite shadow}@keyframes wave{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}@keyframes shadow{0%{width:0;height:0}50%{width:100%;height:100%}to{width:0;height:0}}.how-to{letter-spacing:4px;color:#000c;margin:2rem 0 2rem 1rem;font-family:Opens Sans,sans-serif;font-size:.85em;font-weight:300}@keyframes rotate{0%{transform:rotate(0)scale(.7)}to{transform:rotate(360deg)scale(.7)}}@media only screen and (width<=767px){.text{font-size:6em}.text .letter span{bottom:.5rem}}@media only screen and (width<=480px){.text{font-size:4em}.text .letter span{bottom:0}}