.demo-block {
    height: 500px;
}

.clock {
    position: relative;
    height: 409px;
    width: 413px;
    margin: 50px auto;
    background: url(../images/clock.gif);
}

.face {
    position: absolute;
    left: 80px;
    top: 80px;
    width: calc(413px - 80px * 2);
    height: calc(409px - 80px * 2);
}


.face:after {
    position: absolute;
    content: "";
    left: 45%;
    top: 45%;
    width: 10%;
    height: 10%;
    border-radius: 50%;
    background-color: #2e2d2d;
    z-index: 50;
}


.seconds {
    position: absolute;
    top: 10%;
    left: 49.5%;
    background: #2e2d2d;
    border-radius: 50px;
    transform-origin: 50% 80%;
    width: 1%;
    height: 50%;
    z-index: 40;
    animation: tick 60s steps(60, end) infinite;

}

.minutes {
    position: absolute;
    top: 0;
    left: 48%;
    background-color: #20b2aa;
    border-radius: 50px;
    transform-origin: bottom;
    width: 4%;
    height: 50%;
    z-index: 20;
    animation: tick 3600s steps(60, end) infinite;
}


.hours {
    position: absolute;
    top: 20%;
    left: 48%;
    background-color: #20b2aa;
    transform-origin: bottom;
    border-radius: 50px;
    width: 4%;
    height: 30%;
    z-index: 30;
    animation: tick 43200s steps(60, end) infinite;
}


@keyframes tick {
    to {
        transform: rotate(360deg);
    }
}