@import "https://fonts.googleapis.com/css?family=Cabin";.scroll-animation{position:absolute;display:flex;flex-direction:column;align-items:center;top:50vh;left:50%;transform:translate(-50%,-50%)}.scroll-animation__animation{background:#4e5559 linear-gradient(transparent 0%,transparent 50%,#fff 50%,#fff 100%);position:relative;width:52px;height:88px;border-radius:100px;background-size:100% 200%;animation:colorSlide 6s linear infinite,nudgeMouse 6s ease-out infinite}.scroll-animation__animation:before,.scroll-animation__animation:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;margin:auto}.scroll-animation__animation:before{width:46px;height:82px;background-color:#9f9f9f;border-radius:100px}.scroll-animation__animation:after{background-color:#fff;width:10px;height:10px;border-radius:100%;animation:trackBallSlide 6s linear infinite}.scroll-animation__text{margin-top:50px;font-family:"Cabin",sans-serif;letter-spacing:7px;text-indent:12px;color:#fff;animation:colorText 6s ease-out infinite,nudgeText 6s ease-out infinite;background-color:rgba(40,40,40,0.8);border-radius:1em}@keyframes colorSlide{0%{background-position:0 100%}20%{background-position:0 0}21%{background-color:#4e5559}29.99%{background-color:#fff;background-position:0 0}30%{background-color:#4e5559;background-position:0 100%}50%{background-position:0 0}51%{background-color:#4e5559}59%{background-color:#fff;background-position:0 0}60%{background-color:#4e5559;background-position:0 100%}80%{background-position:0 0}81%{background-color:#4e5559}90%,100%{background-color:#fff}}@keyframes trackBallSlide{0%{opacity:1;transform:scale(1) translateY(-20px)}6%{opacity:1;transform:scale(0.9) translateY(5px)}14%{opacity:0;transform:scale(0.4) translateY(40px)}15%,19%{opacity:0;transform:scale(0.4) translateY(-20px)}28%,29.99%{opacity:1;transform:scale(1) translateY(-20px)}30%{opacity:1;transform:scale(1) translateY(-20px)}36%{opacity:1;transform:scale(0.9) translateY(5px)}44%{opacity:0;transform:scale(0.4) translateY(40px)}45%,49%{opacity:0;transform:scale(0.4) translateY(-20px)}58%,59.99%{opacity:1;transform:scale(1) translateY(-20px)}60%{opacity:1;transform:scale(1) translateY(-20px)}66%{opacity:1;transform:scale(0.9) translateY(5px)}74%{opacity:0;transform:scale(0.4) translateY(40px)}75%,79%{opacity:0;transform:scale(0.4) translateY(-20px)}88%,100%{opacity:1;transform:scale(1) translateY(-20px)}}@keyframes nudgeMouse{0%{transform:translateY(0)}20%{transform:translateY(8px)}30%{transform:translateY(0)}50%{transform:translateY(8px)}60%{transform:translateY(0)}80%{transform:translateY(8px)}90%{transform:translateY(0)}}@keyframes nudgeText{0%{transform:translateY(0)}20%{transform:translateY(2px)}30%{transform:translateY(0)}50%{transform:translateY(2px)}60%{transform:translateY(0)}80%{transform:translateY(2px)}90%{transform:translateY(0)}}@keyframes colorText{21%{color:#4e5559}30%{color:#fff}51%{color:#4e5559}60%{color:#fff}81%{color:#4e5559}90%{color:#fff}}