.flip-clock-container{direction:ltr;font-family:Arial;padding:0;margin:0 0 20px;list-style:none;-webkit-box-sizing:border-box;box-sizing:border-box;--flip-bg-color:#fff;--flip-text-color:#000;--flip-dots-color:#fff;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;width:100%}.flip-clock-container *{padding:0;margin:0;list-style:none;-webkit-box-sizing:border-box;box-sizing:border-box}.flip-clock-container ::after,.flip-clock-container ::before{-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:60px;color:#fff;line-height:10px;margin:0 -5px;display:flex;align-items:center;position:relative;top:13px}.flip-clock-container [class|=flip-item]:first-child::before{content:none}.flip-clock-container [class|=flip-item] .flip-digit{width:30px;height:45px;position:relative;margin:0 2px}.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:52%;font-size:45px;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;top:42px}.flip-clock-container [class|=flip-item] .flip-digit>span::before{top:17px;line-height:50px;border-radius:4px 4px 0 0;border-bottom:0;-webkit-transform-origin:bottom;transform-origin:bottom}.flip-clock-container [class|=flip-item] .flip-digit>span::after{bottom:0;line-height:0px;border-radius:0 0 4px 4px;border-top:0;-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 transparent;box-shadow:inset 0 0 20px -10px transparent}}@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 transparent;box-shadow:inset 0 0 20px -10px transparent}}@-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 transparent;box-shadow:inset 0 0 20px -10px transparent}}@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 transparent;box-shadow:inset 0 0 20px -10px transparent}}@-webkit-keyframes currentFlipAnim{0%{-webkit-transform:rotateX(0);transform:rotateX(0)}100%{-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg)}}@keyframes currentFlipAnim{0%{-webkit-transform:rotateX(0);transform:rotateX(0)}100%{-webkit-transform:rotateX(-180deg);transform:rotateX(-180deg)}}@-webkit-keyframes currentUpShadowAnim{0%{-webkit-box-shadow:inset 0 0 15px -10px transparent;box-shadow:inset 0 0 15px -10px transparent}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 transparent;box-shadow:inset 0 0 15px -10px transparent}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 transparent;box-shadow:inset 0 0 15px -10px transparent}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 transparent;box-shadow:inset 0 0 15px -10px transparent}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}}