html{box-sizing:border-box;background-color:#2d3748}.flipclock{display:flex;justify-content:center;padding:40px;box-sizing:border-box}.flipclock *{box-sizing:inherit}.leaf{display:flex;flex-direction:column;margin:0 10px;perspective:300px}.leaf::after{content:attr(data-label);position:absolute;top:100%;left:50%;margin-top:8px;transform:translateX(-50%);color:#f2f2f2;font-size:14px;font-weight:400;text-transform:uppercase;opacity:.5}.top1,.bottom,.leaf-front,.leaf-back{position:relative;display:block;height:64px;width:120px;background-color:#08080840;color:#fff;overflow:hidden;border-color:#2d3748}.top1 span,.bottom span,.leaf-front span,.leaf-back span{position:absolute;left:50%;width:100%;height:128px;text-align:center;font-family:"Impact",sans serif;font-size:80px;line-height:128px;transform:translateX(-50%)}.leaf._3-digits .top1,.leaf._3-digits .bottom,.leaf._3-digits .leaf-front,.leaf._3-digits .leaf-back{width:148px}.leaf .bottom{background-color:#c5c5c54a}.top1,.leaf-front{border-top-left-radius:6px;border-top-right-radius:6px;margin-bottom:1px;border-bottom-style:solid;border-bottom-width:1px}.top1 span,.leaf-front span{top:0}.leaf-front{position:absolute;z-index:10}.bottom,.leaf-back{border-bottom-left-radius:6px;border-bottom-right-radius:6px;border-top-style:solid;border-top-width:1px}.bottom span,.leaf-back span{bottom:0}.leaf-back{position:absolute;top:64px;z-index:10}@media screen and (max-width:600px){.flipclock{padding:6.6666666667vw}.leaf{margin:0 .6666666667vw}.leaf::after{margin-top:1.3333333333vw;font-size:2.3333333333vw}.top1,.bottom,.leaf-front,.leaf-back{height:10.6666666667vw;width:20vw}.top1 span,.bottom span,.leaf-front span,.leaf-back span{height:21.3333333333vw;font-size:13.3333333333vw;line-height:21.3333333333vw}.leaf._3-digits .top1,.leaf._3-digits .bottom,.leaf._3-digits .leaf-front,.leaf._3-digits .leaf-back{width:24.6666666667vw}.top1,.leaf-front{border-top-left-radius:1vw;border-top-right-radius:1vw}.bottom,.leaf-back{border-bottom-left-radius:1vw;border-bottom-right-radius:1vw}.leaf-back{top:10.6666666667vw}}.leaf-front{transform-origin:bottom center;transform:rotateX(0deg);transform-style:preserve-3d;transition-delay:0.3s}.leaf-back{transform-origin:top center;transform:rotateX(90deg);transform-style:preserve-3d;transition-delay:0s}.bottom::before{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:0%;background:#000;background:linear-gradient(180deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,0) 100%);filter:blur(10px)}.flip .leaf-front{transform:rotateX(-90deg);transition:transform 0.3s ease-in,background-color 0.3s ease-in,color 0.3s ease-in;transition-delay:0s;color:#000;background-color:#737373}.flip .leaf-back{transform:rotateX(0deg);transition:transform 0.3s ease-in,background-color 0.3s ease-in,color 0.3s ease-in;transition-delay:0.3s}.flip .bottom::before{transition:height 0.3s ease-in-out;transition-delay:0.15s;height:100%}