:root{--perspective-value:52rem}.flip-clock{aspect-ratio:1;color:#e7cb68;text-align:center;border-radius:1.5rem;width:10vw;height:10vw;font-size:5vw;line-height:10vw;display:flex;position:relative;box-shadow:3px 3px 6px #0006}.flip-clock .digital:before,.flip-clock .digital:after{content:"" attr(data-number)"";box-sizing:border-box;background-color:#781202;position:absolute;left:0;right:0;overflow:hidden}.flip-clock .digital:before{border-bottom:.5px solid #e7cb686b;border-radius:1.5rem 1.5rem 0 0;top:0;bottom:50%}.flip-clock .digital:after{border-top:.5px solid #e7cb686b;border-radius:0 0 1.5rem 1.5rem;line-height:0;top:50%;bottom:0}.flip-clock.down .back:before,.flip-clock.down .front:after{z-index:1}.flip-clock.down .back:after{z-index:2;transform-origin:50% 0;transform:perspective(var(--perspective-value))rotate(180deg)}.flip-clock.down .front:before{z-index:3}.flip-clock.down.go .front:before,.flip-clock.down.go .back:after{will-change:transform}.flip-clock.down.go .front:before{transform-origin:50% 100%;backface-visibility:hidden;animation:.6s ease-in-out both frontFlipDown}.flip-clock.down.go .back:after{backface-visibility:hidden;animation:.6s ease-in-out both backFlipDown}@keyframes frontFlipDown{0%{transform:perspective(var(--perspective-value))rotateX(0deg)}to{transform:perspective(var(--perspective-value))rotateX(180deg)}}@keyframes backFlipDown{0%{transform:perspective(var(--perspective-value))rotateX(180deg)}to{transform:perspective(var(--perspective-value))rotateX(0deg)}}.flip-clock:not(.go) .front:before,.flip-clock:not(.go) .back:after{will-change:auto}@media (max-width:1025px){.flip-clock{aspect-ratio:1;color:#e7cb68;text-align:center;border-radius:.5rem;width:10vw;height:10vw;font-size:5vw;line-height:10vw;display:flex;position:relative;box-shadow:3px 3px 6px #0000001a}}@media (max-width:541px){.flip-clock{border-radius:1rem;width:20vw;height:20vw;font-size:10vw;line-height:20vw}.flip-clock .digital:before{border-radius:1rem 1rem 0 0}.flip-clock .digital:after{border-radius:0 0 1rem 1rem}}