@keyframes fold{0%{transform:rotateX(0deg)}to{transform:rotateX(-180deg)}}@keyframes unfold{0%{transform:rotateX(180deg)}to{transform:rotateX(0deg)}}*{box-sizing:border-box}.flipClock{gap:5%;justify-content:center;width:100%;height:100%;margin:0 auto 5rem;padding:3rem 120px}.flipClock,.flipUnitWrapper{display:flex;align-items:center}.flipUnitWrapper{flex-direction:column}.flipCard span,.lowerCard span,.upperCard span{position:relative;display:flex;justify-content:space-around;width:100%}.flipUnitContainer{display:block;flex:1;width:calc((80vw - 120px) / 4);position:relative;height:20vh;perspective-origin:50% 50%;perspective:300px;background-color:#434242;border-radius:16px}@media screen and (max-width:768px){.flipUnitContainer{height:11vh}}.label{font-size:1.5rem;font-weight:700;text-transform:uppercase;color:white;text-align:center}.lowerCard,.upperCard{display:flex;position:relative;justify-content:center;width:100%;height:50%;overflow:hidden;border:1px solid rgba(12,12,12,.1)}.flipCard span,.lowerCard span,.upperCard span{font-size:7em;font-weight:900;letter-spacing:.5rem}.flipCard span,.lowerCard span{color:white}.upperCard{align-items:flex-end;border-bottom:.5px solid rgba(12,12,12,.1);border-top-left-radius:16px;border-top-right-radius:16px}.upperCard span{transform:translateY(50%)}.lowerCard{align-items:flex-start;border-top:.5px solid rgba(12,12,12,.1);border-bottom-left-radius:16px;border-bottom-right-radius:16px}.lowerCard span{transform:translateY(-50%)}.flipCard{display:flex;justify-content:center;position:absolute;left:0;width:100%;height:50%;overflow:hidden;backface-visibility:hidden}.flipCard.unfold{top:50%;align-items:flex-start;transform-origin:50% 0;transform:rotateX(180deg);background-color:#303030;border-bottom-left-radius:16px;border-bottom-right-radius:16px;border:.5px solid rgba(12,12,12,.1)}.flipCard.unfold span{transform:translateY(-50%)}.flipCard.fold{top:0;align-items:flex-end;transform-origin:50% 100%;transform:rotateX(0deg);background-color:#4d4c4c;border-top-left-radius:16px;border-top-right-radius:16px;border:.5px solid rgba(12,12,12,.1)}.flipCard.fold span{transform:translateY(50%)}.fold{animation:fold .6s cubic-bezier(.455,.03,.515,.955) forwards}.fold,.unfold{transform-style:preserve-3d}.unfold{animation:unfold .6s cubic-bezier(.455,.03,.515,.955) forwards}@media screen and (max-width:1200px){.flipUnitContainer{width:calc((100vw - 80px) / 4)}.flipCard span,.lowerCard span,.upperCard span{font-size:5em}}@media screen and (max-width:968px){.flipCard span,.lowerCard span,.upperCard span{font-size:4em}}@media screen and (max-width:768px){.flipClock{width:100%;gap:5%;padding:0 60px;margin-bottom:2.5rem}.flipUnitContainer{width:calc((100vw - 60px) / 4)}.flipCard span,.lowerCard span,.upperCard span{font-size:4em}.label{font-size:.8em}}@media screen and (max-width:706px){.flipCard span,.lowerCard span,.upperCard span{font-size:3em;font-size:.8em}}@media screen and (max-width:480px){.flipClock{transform:scale(.9);width:95%;gap:1%;padding:0 10px;margin-bottom:2rem}.flipUnitContainer{height:22vw;min-height:70px;width:calc((95vw - 40px) / 4);max-width:100px}.flipCard span,.lowerCard span,.upperCard span{font-size:2em}.label{font-size:.6em}}@media screen and (max-width:360px){.flipClock{transform:scale(.85);width:98%;gap:.8%;padding:0 5px}.flipUnitContainer{width:calc((98vw - 20px) / 4);height:24vw;min-width:50px;min-height:60px;max-width:90px}.flipCard span,.lowerCard span,.upperCard span{font-size:1.25em}.label{font-size:.4em;font-size:1.25em}}