.flip-clock{text-align:center;-webkit-perspective:400px;perspective:400px;margin:20px auto}.flip-clock *,.flip-clock :after,.flip-clock :before{-webkit-box-sizing:border-box;box-sizing:border-box}.flip-clock__piece{display:inline-block;margin:0 5px}.flip-clock__slot{font-size:1vw;color:#ffff}.card{display:block;position:relative;padding-bottom:.72em;font-size:2.5vw;line-height:.95}.card__back,.card__bottom{position:absolute;left:0;pointer-events:none}.card__back::after,.card__back::before,.card__bottom,.card__top{display:block;height:.72em;color:#ccc;background:#222;padding:.25em;backface-visiblity:hidden;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;width:1.8em;-webkit-transform:translateZ(0);transform:translateZ(0)}.card__bottom{color:#fff;top:50%;border-top:1px solid #000;background:#393939;overflow:hidden}.card__bottom::after{display:block;margin-top:-.72em}.card__back::before,.card__bottom::after{content:attr(data-value)}.card__back{top:0;height:100%}.card__back::before{position:relative;z-index:-1;overflow:hidden}.flip .card__back::before{-webkit-animation:.3s cubic-bezier(.37,.01,.94,.35) flipTop;animation:.3s cubic-bezier(.37,.01,.94,.35) flipTop;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom}.flip .card__back .card__bottom{-webkit-transform-origin:center top;-ms-transform-origin:center top;transform-origin:center top;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation:.6s cubic-bezier(.15,.45,.28,1) flipBottom;animation:.6s cubic-bezier(.15,.45,.28,1) flipBottom}@-webkit-keyframes flipTop{0%{-webkit-transform:rotateX(0);transform:rotateX(0);z-index:2}0%,99%{opacity:.99}100%{-webkit-transform:rotateX(-90deg);transform:rotateX(-90deg);opacity:0}}@keyframes flipTop{0%{-webkit-transform:rotateX(0);transform:rotateX(0);z-index:2}0%,99%{opacity:.99}100%{-webkit-transform:rotateX(-90deg);transform:rotateX(-90deg);opacity:0}}@-webkit-keyframes flipBottom{0%,50%{z-index:-1;-webkit-transform:rotateX(90deg);transform:rotateX(90deg);opacity:0}51%{opacity:.99}100%{opacity:.99;-webkit-transform:rotateX(0);transform:rotateX(0);z-index:5}}@keyframes flipBottom{0%,50%{z-index:-1;-webkit-transform:rotateX(90deg);transform:rotateX(90deg);opacity:0}51%{opacity:.99}100%{opacity:.99;-webkit-transform:rotateX(0);transform:rotateX(0);z-index:5}}@media only screen and (max-width:480px){.card{font-size:8vw}.flip-clock__slot{font-size:2vw}}@media only screen and (min-width:481px) and (max-width:700px){.card{font-size:5vw}.flip-clock__slot{font-size:2vw}}@media only screen and (min-width:701px) and (max-width:800px){.card{font-size:4vw}.flip-clock__slot{font-size:1.5vw}}@media only screen and (min-width:801px) and (max-width:1000px){.card{font-size:3vw}.flip-clock__slot{font-size:1.5vw}}