.demo-container.clocks{background:none;
  max-height: 300px;
    margin-left: 50px;
  margin-bottom: 20px;
    margin-top: -60px;

     }
@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 .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(/images/posts/clocks/station_clock.svg) no-repeat center;
    background-size:100px;
    background-position-y:-100px;
    -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:-12%;left:-200%;height:18%;width:500%}
.clock.ios7{background:#fff url(../content/img/icons/ios_clock.svg) no-repeat center;
  margin-top: -65px;
 margin-left: 15px;
    margin-bottom: 40px;
    z-index: 50;
    background-size:70%}
.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:34%;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(/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)}.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)}