.digit{position:relative;float:left;width:10vw;height:15vw;background-color:#fff;border-radius:1vw;text-align:center;font-size:8vw;color:#2bad00;font-weight:700;font-family:'Nunito', sans-serif;border:solid 1px #f3f3f3}.base{display:block;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);color:#2bad00}.flap{display:none;position:absolute;width:100%;height:50%;background-color:#fff;left:0;top:0;border-radius:1vw 1vw 0 0;-webkit-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}.flap::before{content:attr(data-content);position:absolute;left:50%}.flap.front::before,.flap.under::before{top:100%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.flap.back{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.flap.back::before{top:100%;-webkit-transform:translate(-50%, -50%) rotateZ(180deg);transform:translate(-50%, -50%) rotateZ(180deg)}.flap.over{z-index:2}.flap.under{z-index:1}.flap.front{-webkit-animation:flip-down-front 300ms ease-in both;animation:flip-down-front 300ms ease-in both}.flap.back{-webkit-animation:flip-down-back 300ms ease-in both;animation:flip-down-back 300ms ease-in both}.flap.under{-webkit-animation:fade-under 300ms ease-in both;animation:fade-under 300ms ease-in both}@-webkit-keyframes flip-down-front{0%{-webkit-transform:rotateX(0deg);transform:rotateX(0deg);background-color:#fff;color:#2bad00}100%{-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg);background-color:#a6a6a6;color:black}}@keyframes flip-down-front{0%{-webkit-transform:rotateX(0deg);transform:rotateX(0deg);background-color:#fff;color:#2bad00}100%{-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg);background-color:#a6a6a6;color:black}}@-webkit-keyframes flip-down-back{0%{-webkit-transform:rotateY(180deg) rotateX(0deg);transform:rotateY(180deg) rotateX(0deg);background-color:#a6a6a6;color:black}100%{-webkit-transform:rotateY(180deg) rotateX(180deg);transform:rotateY(180deg) rotateX(180deg);background-color:#fff;color:#2bad00}}@keyframes flip-down-back{0%{-webkit-transform:rotateY(180deg) rotateX(0deg);transform:rotateY(180deg) rotateX(0deg);background-color:#a6a6a6;color:black}100%{-webkit-transform:rotateY(180deg) rotateX(180deg);transform:rotateY(180deg) rotateX(180deg);background-color:#fff;color:#2bad00}}@-webkit-keyframes fade-under{0%{background-color:#a6a6a6;color:black}100%{background-color:#fff;color:#2bad00}}@keyframes fade-under{0%{background-color:#a6a6a6;color:black}100%{background-color:#fff;color:#2bad00}}.flip-counter{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;position:relative;width:70vw;-webkit-perspective:100vw;perspective:100vw;-webkit-perspective-origin:50% 50%;perspective-origin:50% 50%;overflow:hidden;margin:auto}.flip-counter .digit{margin-right:1vw}