.flipClock{display:inline-flex;align-items:flex-end}.lowerCard,.upperCard{display:flex;position:relative;justify-content:center;width:100%;height:50%;overflow:hidden;border:1px solid #f5f5f5}.lowerCard span,.upperCard span{font-size:5em;font-family:"Droid Sans Mono",monospace;font-weight:lighter}.upperCard{align-items:flex-end;border-bottom:.5px solid #f5f5f5;border-top-left-radius:3px;border-top-right-radius:3px}.upperCard span{transform:translateY(50%)}.lowerCard{align-items:flex-start;border-top:.5px solid #f5f5f5;border-bottom-left-radius:3px;border-bottom-right-radius:3px}.lowerCard span{transform:translateY(-50%)}.flipCard{display:flex;justify-content:center;position:absolute;left:0;width:100%;height:50%;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}.flipCard span{font-family:"Droid Sans Mono",monospace;font-size:5em;font-weight:lighter}.flipCard.unfold{top:50%;align-items:flex-start;transform-origin:50% 0;transform:rotateX(180deg);border-bottom-left-radius:3px;border-bottom-right-radius:3px;border:.5px solid #f5f5f5}.flipCard.unfold span{transform:translateY(-50%)}.flipCard.fold{top:0;align-items:flex-end;transform-origin:50% 100%;transform:rotateX(0deg);border-top-left-radius:3px;border-top-right-radius:3px;border:.5px solid #f5f5f5}.flipCard.fold span{transform:translateY(50%)}.fold{animation:fold .6s cubic-bezier(.455,.03,.515,.955) 0s 1 normal forwards}.fold,.unfold{transform-style:preserve-3d}.unfold{animation:unfold .6s cubic-bezier(.455,.03,.515,.955) 0s 1 normal forwards}@keyframes fold{0%{transform:rotateX(0deg)}to{transform:rotateX(-180deg)}}@keyframes unfold{0%{transform:rotateX(280deg);opacity:0}to{transform:rotateX(0deg);opacity:1}}