.flip-clock-container{direction:ltr;font-family:Arial;padding:0;margin:0;list-style:none;-webkit-box-sizing:border-box;box-sizing:border-box;--flip-bg-color:#333;--flip-text-color:#fff;--flip-dots-color:#333;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.flip-clock-container *{padding:0;margin:0;list-style:none;-webkit-box-sizing:border-box;box-sizing:border-box}.flip-clock-container *:before,.flip-clock-container *:after{-webkit-box-sizing:border-box;box-sizing:border-box}.flip-clock-container [class|=flip-item]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.flip-clock-container [class|=flip-item]:before{content:":";font-family:Consolas;font-size:160px;color:var(--flip-dots-color);line-height:130px;margin:0 -20px}.flip-clock-container [class|=flip-item]:first-child:before{content:none}.flip-clock-container [class|=flip-item] .flip-digit{width:100px;height:150px;position:relative;margin:0 5px}.flip-clock-container [class|=flip-item] .flip-digit>span{position:absolute;top:0;left:0;width:100%;height:100%;display:block;-webkit-perspective:300px;perspective:300px}.flip-clock-container [class|=flip-item] .flip-digit>span:after,.flip-clock-container [class|=flip-item] .flip-digit>span:before{content:attr(data-digit);position:absolute;left:0;width:100%;height:50%;font-size:120px;font-weight:bolder;text-align:center;color:var(--flip-text-color);background-color:var(--flip-bg-color);overflow:hidden;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.flip-clock-container [class|=flip-item] .flip-digit>span:before{top:0;line-height:157px;border-radius:10px 10px 0 0;border-bottom:1px solid #000;-webkit-transform-origin:bottom;transform-origin:bottom}.flip-clock-container [class|=flip-item] .flip-digit>span:after{bottom:0;line-height:7px;border-radius:0 0 10px 10px;border-top:1px solid #000;-webkit-transform-origin:top;transform-origin:top}.flip-clock-container [class|=flip-item] .flip-digit.flipping .flip-digit-next{z-index:0;-webkit-animation:afterZIndexAnim .9s linear forwards;animation:afterZIndexAnim .9s linear forwards}.flip-clock-container [class|=flip-item] .flip-digit.flipping .flip-digit-next:before{-webkit-animation:afterUpShadowAnim .9s linear forwards;animation:afterUpShadowAnim .9s linear forwards}.flip-clock-container [class|=flip-item] .flip-digit.flipping .flip-digit-next:after{-webkit-animation:afterFlipAnim .9s linear forwards,afterDownShadowAnim .9s linear forwards;animation:afterFlipAnim .9s linear forwards,afterDownShadowAnim .9s linear forwards}.flip-clock-container [class|=flip-item] .flip-digit.flipping .flip-digit-current{z-index:1;-webkit-animation:currentZIndexAnim .9s linear forwards;animation:currentZIndexAnim .9s linear forwards}.flip-clock-container [class|=flip-item] .flip-digit.flipping .flip-digit-current:before{-webkit-animation:currentFlipAnim .9s linear forwards,currentUpShadowAnim .9s linear forwards;animation:currentFlipAnim .9s linear forwards,currentUpShadowAnim .9s linear forwards}.flip-clock-container [class|=flip-item] .flip-digit.flipping .flip-digit-current:after{-webkit-animation:currentDownShadowAnim .9s linear forwards;animation:currentDownShadowAnim .9s linear forwards}@-webkit-keyframes afterZIndexAnim{0%{z-index:0}100%{z-index:1}}@keyframes afterZIndexAnim{0%{z-index:0}100%{z-index:1}}@-webkit-keyframes currentZIndexAnim{0%{z-index:1}100%{z-index:0}}@keyframes currentZIndexAnim{0%{z-index:1}100%{z-index:0}}@-webkit-keyframes afterFlipAnim{0%{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}100%{-webkit-transform:rotateX(0);transform:rotateX(0)}}@keyframes afterFlipAnim{0%{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}100%{-webkit-transform:rotateX(0);transform:rotateX(0)}}@-webkit-keyframes afterUpShadowAnim{0%{-webkit-box-shadow:inset 0 -100px 20px -10px #000;box-shadow:inset 0 -100px 20px -10px #000}100%{-webkit-box-shadow:inset 0 0 20px -10px rgba(0,0,0,0);box-shadow:inset 0 0 20px -10px rgba(0,0,0,0)}}@keyframes afterUpShadowAnim{0%{-webkit-box-shadow:inset 0 -100px 20px -10px #000;box-shadow:inset 0 -100px 20px -10px #000}100%{-webkit-box-shadow:inset 0 0 20px -10px rgba(0,0,0,0);box-shadow:inset 0 0 20px -10px rgba(0,0,0,0)}}@-webkit-keyframes afterDownShadowAnim{0%{-webkit-box-shadow:inset 0 100px 20px -10px #000;box-shadow:inset 0 100px 20px -10px #000}100%{-webkit-box-shadow:inset 0 0 20px -10px rgba(0,0,0,0);box-shadow:inset 0 0 20px -10px rgba(0,0,0,0)}}@keyframes afterDownShadowAnim{0%{-webkit-box-shadow:inset 0 100px 20px -10px #000;box-shadow:inset 0 100px 20px -10px #000}100%{-webkit-box-shadow:inset 0 0 20px -10px rgba(0,0,0,0);box-shadow:inset 0 0 20px -10px rgba(0,0,0,0)}}@-webkit-keyframes currentFlipAnim{0%{-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}100%{-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg)}}@keyframes currentFlipAnim{0%{-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}100%{-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg)}}@-webkit-keyframes currentUpShadowAnim{0%{-webkit-box-shadow:inset 0 0 15px -10px rgba(0,0,0,0);box-shadow:inset 0 0 15px -10px rgba(0,0,0,0)}50%{-webkit-box-shadow:inset 0 -50px 25px -10px #000;box-shadow:inset 0 -50px 25px -10px #000}100%{-webkit-box-shadow:inset 0 -100px 25px -10px #000;box-shadow:inset 0 -100px 25px -10px #000}}@keyframes currentUpShadowAnim{0%{-webkit-box-shadow:inset 0 0 15px -10px rgba(0,0,0,0);box-shadow:inset 0 0 15px -10px rgba(0,0,0,0)}50%{-webkit-box-shadow:inset 0 -50px 25px -10px #000;box-shadow:inset 0 -50px 25px -10px #000}100%{-webkit-box-shadow:inset 0 -100px 25px -10px #000;box-shadow:inset 0 -100px 25px -10px #000}}@-webkit-keyframes currentDownShadowAnim{0%{-webkit-box-shadow:inset 0 0 15px -10px rgba(0,0,0,0);box-shadow:inset 0 0 15px -10px rgba(0,0,0,0)}50%{-webkit-box-shadow:inset 0 50px 25px -10px #000;box-shadow:inset 0 50px 25px -10px #000}100%{-webkit-box-shadow:inset 0 100px 25px -10px #000;box-shadow:inset 0 100px 25px -10px #000}}@keyframes currentDownShadowAnim{0%{-webkit-box-shadow:inset 0 0 15px -10px rgba(0,0,0,0);box-shadow:inset 0 0 15px -10px rgba(0,0,0,0)}50%{-webkit-box-shadow:inset 0 50px 25px -10px #000;box-shadow:inset 0 50px 25px -10px #000}100%{-webkit-box-shadow:inset 0 100px 25px -10px #000;box-shadow:inset 0 100px 25px -10px #000}}