body{height:100%}.analog-clock{right:50%;width:50vh;height:50vh;background-color:#fff;-webkit-transform:translate3d(-1.5rem,-50%,0);transform:translate3d(-1.5rem,-50%,0);-webkit-filter:drop-shadow(0 .125rem .5rem rgba(0,0,0,.1));filter:drop-shadow(0 .125rem .5rem rgba(0,0,0,.1))}.analog-clock,.analog-clock:after{top:50%;position:absolute;border-radius:100%}.analog-clock:after{left:50%;content:"";width:2.5%;height:2.5%;background-color:#edbec5;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}.analog-clock__face{position:absolute;top:0;left:0;width:100%;height:100%}.analog-clock__notch{-webkit-transform-origin:50% 100%;transform-origin:50% 100%;position:absolute;width:1px;height:49%;bottom:50%;left:50%}.analog-clock__notch:after{content:"";width:100%;height:2.5%;position:absolute;top:0;left:0;background-color:#b6c3c9}.analog-clock__notch.-long:after{width:2px;height:7.5%}.analog-clock__hand{-webkit-transform-origin:50% 100%;transform-origin:50% 100%;background-color:#7392a0;position:absolute;width:2px;height:40%;bottom:50%;left:50%;border-radius:2px;-webkit-transition:-webkit-transform 1s linear;transition:-webkit-transform 1s linear;transition:transform 1s linear;transition:transform 1s linear,-webkit-transform 1s linear}.analog-clock__hand:after{content:"";position:absolute;top:100%;left:0;width:100%;height:10%;background-color:inherit;-webkit-backface-visibility:hidden;backface-visibility:hidden}.analog-clock__hand.-hours{height:33.33333%;width:3px;border-radius:3px;-webkit-transition:-webkit-transform 60s linear;transition:-webkit-transform 60s linear;transition:transform 60s linear;transition:transform 60s linear,-webkit-transform 60s linear}.analog-clock__hand.-seconds{width:1px;height:45%;border-radius:0;background-color:#edbec5;-webkit-transition:-webkit-transform .1s cubic-bezier(.6,.05,0,1.6);transition:-webkit-transform .1s cubic-bezier(.6,.05,0,1.6);transition:transform .1s cubic-bezier(.6,.05,0,1.6);transition:transform .1s cubic-bezier(.6,.05,0,1.6),-webkit-transform .1s cubic-bezier(.6,.05,0,1.6)}.analog-clock__hand.-seconds:after{height:12.5%}.text-clock{top:50%;left:50%;font-size:3rem;position:absolute;color:#99dcf9;-webkit-transform:translate3d(1.5rem,-50%,0);transform:translate3d(1.5rem,-50%,0);white-space:nowrap}.text-clock,.text-clock__col{display:-webkit-box;display:-ms-flexbox;display:flex}.text-clock__col{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:distribute;justify-content:space-around;text-align:center;line-height:1.1;padding:.5rem .5rem .65rem}.text-clock__col.-meridiem{text-transform:uppercase;font-size:.85em;background-color:#7392a0;color:#fff;font-weight:500;-webkit-box-shadow:0 .25rem .75rem rgba(0,0,0,.1);box-shadow:0 .25rem .75rem rgba(0,0,0,.1)}.text-clock__row{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
|
Download
