.demo-container.clocks{background:rgba(200,200,200,.9);padding:4em 0 2em 1em}
@media(max-width:550px){.demo-container.clocks{font-size:12px;width:100%}
}
.demo-container.clocks.single{padding:2em;display:inline-block; }
.demo-container.clocks.single.local{padding:2em;display:inline-block;}
.demo-container.clocks.single .clock{height:20em;width:20em;padding:0;margin:0}
@media(max-width:550px){.demo-container.clocks.single .clock{font-size:12px}
}
@media(max-width:420px){.demo-container.clocks.single .clock{font-size:10px}
}
.clock{border-radius:50%;background:radial-gradient(#000,#000 0.1em,#fff 0.1em,#fff),#fff;display:inline-block;padding-bottom:31.333%;position:relative;width:31.333%;opacity:0}
.multiple .clock{left:auto}
.clock.show{opacity:1;-webkit-transition:all 2.5s cubic-bezier(.12,1.03,.34,1);transition:all 2.5s cubic-bezier(.12,1.03,.34,1)}
.multiple .clock.show{-webkit-transform:none;transform:none}
.clock::after{background:red;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 .3s cubic-bezier(.4,2.08,.55,.44);transition:-webkit-transform .3s cubic-bezier(.4,2.08,.55,.44);transition:transform .3s cubic-bezier(.4,2.08,.55,.44);transition:transform .3s cubic-bezier(.4,2.08,.55,.44),-webkit-transform .3s cubic-bezier(.4,2.08,.55,.44)}
.bounce .seconds-container{-webkit-transition:-webkit-transform .2s cubic-bezier(.4,2.08,.55,.44);transition:-webkit-transform .2s cubic-bezier(.4,2.08,.55,.44);transition:transform .2s cubic-bezier(.4,2.08,.55,.44);transition:transform .2s cubic-bezier(.4,2.08,.55,.44),-webkit-transform .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:55%;position:absolute;left:48.25%;top:7%;-webkit-transform-origin:50% 78.5%;transform-origin:50% 78.5%}
.seconds{background:red;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:#000;font-family:MyriadPro-Regular,myriad pro regular,MyriadPro,myriad pro,Helvetica,Arial,sans-serif;font-size:.5em;font-weight:700;text-transform:uppercase;padding:.5em .75em .25em;position:absolute;top:-4em;left:50%;-webkit-transform:translate(-50%,0);transform:translate(-50%,0)}
@-webkit-keyframes rotate{100%{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}
}
@keyframes rotate{100%{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}
}
.clock.station{background:#fff url(station_clock.svg) no-repeat center;background-size:95%;-webkit-box-shadow:0 0 .5em rgba(0,0,0,.2) inset;box-shadow:0 0 .5em rgba(0,0,0,.2) inset}
.clock.station .seconds::before{background:red;border-radius:50%;content:"";position:absolute;top:-9%;left:-200%;height:18%;width:500%}
.clock.ios7{background:#fff url(ios_clock.svg) no-repeat center;background-size:88%}
.clock.ios7:before{background:#000;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(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)}
.post-header-container{width:46em;height:32em;position:absolute;left:50%;top:75%;-webkit-transform:translate(-90%,-40%);transform:translate(-90%,-40%)}
.post-header-container .clock{background:rgba(255,255,255,.5);width:100%;height:100%;padding:0;-webkit-perspective:1200px;perspective:1200px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:scaleY(.6) rotateY(60deg) rotateX(30deg);transform:scaleY(.6) rotateY(60deg) rotateX(30deg)}
.post-header-container .clock::after{display:none}
.post-header{background:#3cd19e}
.demo .extrude1,.demo .extrude2,.demo .extrude3{display:block;position:absolute;top:0;right:0;bottom:0;left:0}
.demo .extrude1{-webkit-transform:translateZ(4em);transform:translateZ(4em);opacity:.4}
.demo .extrude2{-webkit-transform:translateZ(16em);transform:translateZ(16em);opacity:.6}
.demo .extrude3{-webkit-transform:translateZ(28em);transform:translateZ(28em);opacity:1}
.demo .seconds-container{background-color:rgba(255,255,255,.4)}
.demo .minutes-container{background-color:rgba(255,255,255,.6)}
.demo .hours-container{background-color:rgba(255,255,255,.8)}