.M-FlipCard{display:inline-block;position:relative;width:60px;height:100px;line-height:100px;border:1px solid #000;border-radius:10px;background:#fff;font-size:66px;color:#fff;box-shadow:0 0 6px rgba(0,0,0,.5);text-align:center;font-family:Helvetica Neue}.M-FlipCard .digital:after,.M-FlipCard .digital:before{content:"";position:absolute;left:0;right:0;background:#000;overflow:hidden;box-sizing:border-box}.M-FlipCard .digital:before{top:0;bottom:50%;border-radius:10px 10px 0 0;border-bottom:1px solid #666}.M-FlipCard .digital:after{top:50%;bottom:0;border-radius:0 0 10px 10px;line-height:0}.M-FlipCard.down .front:before{z-index:3}.M-FlipCard.down .back:after{z-index:2;transform-origin:50% 0;transform:perspective(160px) rotateX(180deg)}.M-FlipCard.down .back:before,.M-FlipCard.down .front:after{z-index:1}.M-FlipCard.down.go .front:before{transform-origin:50% 100%;animation:frontFlipDown .6s ease-in-out both;box-shadow:0 -2px 6px rgba(255,255,255,.3);backface-visibility:hidden}.M-FlipCard.down.go .back:after{animation:backFlipDown .6s ease-in-out both}.M-FlipCard.up .front:after{z-index:3}.M-FlipCard.up .back:before{z-index:2;transform-origin:50% 100%;transform:perspective(160px) rotateX(-180deg)}.M-FlipCard.up .back:after,.M-FlipCard.up .front:before{z-index:1}.M-FlipCard.up.go .front:after{transform-origin:50% 0;animation:frontFlipUp .6s ease-in-out both;box-shadow:0 2px 6px rgba(255,255,255,.3);backface-visibility:hidden}.M-FlipCard.up.go .back:before{animation:backFlipUp .6s ease-in-out both}.M-FlipCard .number0:after,.M-FlipCard .number0:before{content:"0"}.M-FlipCard .number1:after,.M-FlipCard .number1:before{content:"1"}.M-FlipCard .number2:after,.M-FlipCard .number2:before{content:"2"}.M-FlipCard .number3:after,.M-FlipCard .number3:before{content:"3"}.M-FlipCard .number4:after,.M-FlipCard .number4:before{content:"4"}.M-FlipCard .number5:after,.M-FlipCard .number5:before{content:"5"}.M-FlipCard .number6:after,.M-FlipCard .number6:before{content:"6"}.M-FlipCard .number7:after,.M-FlipCard .number7:before{content:"7"}.M-FlipCard .number8:after,.M-FlipCard .number8:before{content:"8"}.M-FlipCard .number9:after,.M-FlipCard .number9:before{content:"9"}.flip-digit{display:inline-block;position:relative;border:1px solid #e5e7eb;border-radius:8px;background:#fff;color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.1);text-align:center;font-family:Helvetica Neue,Arial,sans-serif;font-weight:700;transition:box-shadow .2s ease}.flip-digit:hover{box-shadow:0 4px 8px rgba(0,0,0,.15)}.flip-digit.small{width:20px;height:28px;line-height:28px;font-size:16px;border-radius:4px}.flip-digit.medium{width:28px;height:36px;line-height:36px;font-size:20px;border-radius:6px}.flip-digit.large{width:36px;height:48px;line-height:48px;font-size:28px;border-radius:8px}.flip-digit .digital:after,.flip-digit .digital:before{content:"";position:absolute;left:0;right:0;background:#1f2937;color:#fff;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;justify-content:center;font-weight:700}.flip-digit .digital:before{top:0;bottom:50%;border-radius:inherit;border-radius:8px 8px 0 0;border-bottom:1px solid #374151}.flip-digit .digital:after{top:50%;bottom:0;border-radius:0 0 8px 8px;line-height:0}.flip-digit.small .digital:before{border-radius:4px 4px 0 0}.flip-digit.small .digital:after{border-radius:0 0 4px 4px}.flip-digit.medium .digital:before{border-radius:6px 6px 0 0}.flip-digit.medium .digital:after{border-radius:0 0 6px 6px}.flip-digit.down .front:before{z-index:3}.flip-digit.down .back:after{z-index:2;transform-origin:50% 0;transform:perspective(160px) rotateX(180deg)}.flip-digit.down .back:before,.flip-digit.down .front:after{z-index:1}.flip-digit.down.go .front:before{transform-origin:50% 100%;animation:frontFlipDown .6s ease-in-out both;box-shadow:0 -2px 6px rgba(255,255,255,.3);backface-visibility:hidden}.flip-digit.down.go .back:after{animation:backFlipDown .6s ease-in-out both}.flip-digit.up .front:after{z-index:3}.flip-digit.up .back:before{z-index:2;transform-origin:50% 100%;transform:perspective(160px) rotateX(-180deg)}.flip-digit.up .back:after,.flip-digit.up .front:before{z-index:1}.flip-digit.up.go .front:after{transform-origin:50% 0;animation:frontFlipUp .6s ease-in-out both;box-shadow:0 2px 6px rgba(255,255,255,.3);backface-visibility:hidden}.flip-digit.up.go .back:before{animation:backFlipUp .6s ease-in-out both}@keyframes frontFlipDown{0%{transform:perspective(160px) rotateX(0deg)}to{transform:perspective(160px) rotateX(-180deg)}}@keyframes backFlipDown{0%{transform:perspective(160px) rotateX(180deg)}to{transform:perspective(160px) rotateX(0deg)}}@keyframes frontFlipUp{0%{transform:perspective(160px) rotateX(0deg)}to{transform:perspective(160px) rotateX(180deg)}}@keyframes backFlipUp{0%{transform:perspective(160px) rotateX(-180deg)}to{transform:perspective(160px) rotateX(0deg)}}.flip-digit .number0:after,.flip-digit .number0:before{content:"0"}.flip-digit .number1:after,.flip-digit .number1:before{content:"1"}.flip-digit .number2:after,.flip-digit .number2:before{content:"2"}.flip-digit .number3:after,.flip-digit .number3:before{content:"3"}.flip-digit .number4:after,.flip-digit .number4:before{content:"4"}.flip-digit .number5:after,.flip-digit .number5:before{content:"5"}.flip-digit .number6:after,.flip-digit .number6:before{content:"6"}.flip-digit .number7:after,.flip-digit .number7:before{content:"7"}.flip-digit .number8:after,.flip-digit .number8:before{content:"8"}.flip-digit .number9:after,.flip-digit .number9:before{content:"9"}@media (max-width:640px){.flip-digit.large{width:32px;height:42px;font-size:24px}.flip-digit.medium{width:24px;height:32px;font-size:18px}}@media (prefers-contrast:high){.flip-digit{border:2px solid #000}.flip-digit .digital:after,.flip-digit .digital:before{background:#000;border-color:#000}}@media (prefers-reduced-motion:reduce){.flip-digit.down.go .back:after,.flip-digit.down.go .front:before,.flip-digit.up.go .back:before,.flip-digit.up.go .front:after{animation:none}.flip-digit{transition:none}}