body{margin:0}.demo-container.clocks{padding:0;width:100%;margin:0;margin:0 auto}.js-london.show.show{margin-right:5.5%}.js-new-york.show.show{margin-right:5.5%}.clock{border-radius:50%;background:-webkit-radial-gradient(#000000,#000000 .1em,#ffffff .1em,#ffffff),#fff;background:radial-gradient(#000000,#000000 .1em,#ffffff .1em,#ffffff),#fff;display:inline-block;margin:1%;padding-bottom:31%;position:relative;top:50%;width:28%;opacity:0;-webkit-transform:translateY(-40%);transform:translateY(-40%)}.clock.show{opacity:1;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:all 2.5s 0.5s cubic-bezier(.12,1.03,.34,1);transition:all 2.5s 0.5s cubic-bezier(.12,1.03,.34,1)}.clock::after{background:#a00;border-radius:50%;content:"";position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:4%;height:4%;z-index:10}.minutes-container,.hours-container,.seconds-container{position:absolute;top:0;right:0;bottom:0;left:0}.hours-container{-webkit-animation:rotate 43200s infinite linear;animation:rotate 43200s infinite linear}.linear .minutes-container{-webkit-animation:rotate 3600s infinite linear;animation:rotate 3600s infinite linear}.linear .seconds-container{-webkit-animation:rotate 60s infinite linear;animation:rotate 60s infinite linear}.steps .minutes-container{-webkit-animation:rotate 3600s infinite steps(60);animation:rotate 3600s infinite steps(60)}.steps .seconds-container{-webkit-animation:rotate 60s infinite steps(60);animation:rotate 60s infinite steps(60)}.local.steps .minutes-container{-webkit-animation:none;animation:none}.bounce .minutes-container{-webkit-transition:-webkit-transform 0.3s cubic-bezier(.4,2.08,.55,.44);transition:-webkit-transform 0.3s cubic-bezier(.4,2.08,.55,.44);transition:transform 0.3s cubic-bezier(.4,2.08,.55,.44);transition:transform 0.3s cubic-bezier(.4,2.08,.55,.44),-webkit-transform 0.3s cubic-bezier(.4,2.08,.55,.44)}.bounce .seconds-container{-webkit-transition:-webkit-transform 0.2s cubic-bezier(.4,2.08,.55,.44);transition:-webkit-transform 0.2s cubic-bezier(.4,2.08,.55,.44);transition:transform 0.2s cubic-bezier(.4,2.08,.55,.44);transition:transform 0.2s cubic-bezier(.4,2.08,.55,.44),-webkit-transform 0.2s cubic-bezier(.4,2.08,.55,.44)}.hours{background:#000;width:3.5%;height:40%;position:absolute;left:48.25%;top:22%;-webkit-transform-origin:50% 71%;transform-origin:50% 71%}.minutes{background:#000;width:3.5%;height:53%;position:absolute;left:48.25%;top:7%;-webkit-transform-origin:50% 78.5%;transform-origin:50% 78.5%}.seconds{background:#a00;width:1.5%;height:42%;position:absolute;left:49.25%;top:20%;-webkit-transform-origin:50% 71%;transform-origin:50% 71%;z-index:8}.label{background:#fff;border-radius:.25em;color:#a00;font-size:1em;font-weight:700;padding:0;text-transform:uppercase;position:absolute;letter-spacing:3px;top:-30px;left:47%;text-align:center;width:100%;letter-spacing:3px;-webkit-transform:translate(-50%,0);transform:translate(-50%,0);font-family:'HelveticaNeueBold'}@-webkit-keyframes rotate{100%{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}}@keyframes rotate{100%{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}}.clock.station{background-image:url(https://www.greyscape.com/wp-content/themes/greyscape/library/images/station_clock.svg);background-size:95%;background-repeat:no-repeat}.clock.station .seconds::before{background:#a00;border-radius:50%;content:"";position:absolute;top:-9%;left:-200%;height:18%;width:500%}.clock.ios7{background:#fff url(/assets/images/posts/clocks/ios_clock.svg) no-repeat center;background-size:88%}.clock.ios7:before{background:black;border-radius:50%;content:"";position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:6%;height:6%;z-index:0}.clock.ios7:after{width:2%;height:2%}.clock.ios7 .seconds{border-radius:200%/10%;height:30%;left:49.5%;top:20%;width:1%;-webkit-transform-origin:50% 100%;transform-origin:50% 100%}.clock.ios7 .minutes{border-radius:150%/10%;width:2%;height:35%;left:49%;top:15%;-webkit-transform-origin:50% 100%;transform-origin:50% 100%}.clock.ios7 .hours{border-radius:85%/10%;width:2%;height:20%;left:49%;top:30%;-webkit-transform-origin:50% 100%;transform-origin:50% 100%}.clock.simple{background:#fff url(/assets/images/posts/clocks/ios_clock.svg) no-repeat center;background-size:88%}.clock.simple:after{background-color:#000;width:5%;height:5%}.clock.simple .seconds{background-color:#000;height:45%;left:49.5%;top:14%;width:1%;-webkit-transform-origin:50% 80%;transform-origin:50% 80%}.clock.simple .minutes{width:2%;height:40%;left:49%;top:10%;-webkit-transform-origin:50% 100%;transform-origin:50% 100%}.clock.simple .hours{width:2.5%;height:20%;left:48.75%;top:30%;-webkit-transform-origin:50% 100%;transform-origin:50% 100%}.hours.angled{-webkit-transform:rotateZ(-40deg);transform:rotateZ(-40deg)}.minutes.angled{-webkit-transform:rotateZ(40deg);transform:rotateZ(40deg)}