.flipClock{display:flex;justify-content:space-between;width:80px}.flipUnitContainer{display:block;height:26px;perspective:300px;perspective-origin:50% 50%;position:relative;width:26px}.lowerCard,.upperCard{border:.1px solid #fff;display:flex;height:50%;justify-content:center;overflow:hidden;position:relative;width:100%}.upperCard{align-items:flex-end;border-bottom:.1px solid #fff;border-top-left-radius:4px;border-top-right-radius:4px}.upperCard span{transform:translateY(50%)}.lowerCard{align-items:flex-start;border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-top:.1px solid #fff}.lowerCard span{transform:translateY(-50%)}.flipCard{-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;height:50%;justify-content:center;left:0;overflow:hidden;position:absolute;width:100%}.flipCard.unfold{align-items:flex-start;border:.1px solid #fff;border-bottom-left-radius:4px;border-bottom-right-radius:4px;top:50%;transform:rotateX(180deg);transform-origin:50% 0}.flipCard.unfold span{transform:translateY(-50%)}.flipCard.fold{align-items:flex-end;border:.1px solid #fff;border-top-left-radius:4px;border-top-right-radius:4px;top:0;transform:rotateX(0deg);transform-origin:50% 100%}.flipCard.fold span{transform:translateY(50%)}.fold{-webkit-animation:fold .6s cubic-bezier(.455,.03,.515,.955) 0s 1 normal forwards;animation:fold .6s cubic-bezier(.455,.03,.515,.955) 0s 1 normal forwards}.fold,.unfold{transform-style:preserve-3d}.unfold{-webkit-animation:unfold .6s cubic-bezier(.455,.03,.515,.955) 0s 1 normal forwards;animation:unfold .6s cubic-bezier(.455,.03,.515,.955) 0s 1 normal forwards}@-webkit-keyframes fold{0%{transform:rotateX(0deg)}to{transform:rotateX(-180deg)}}@keyframes fold{0%{transform:rotateX(0deg)}to{transform:rotateX(-180deg)}}@-webkit-keyframes unfold{0%{transform:rotateX(180deg)}to{transform:rotateX(0deg)}}@keyframes unfold{0%{transform:rotateX(180deg)}to{transform:rotateX(0deg)}}