.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

article {
    width: 50%;
    margin: 0 auto;
}

.input-group {
    padding-bottom: 20px;
}

.jumbotron {
    height: 100%;
}

.jumbotron .container {
    max-width: 100%;
    position: absolute;
    top: 45%;
    transform: translate(-50%, -50%);
    left: 50%;
}

body {
    margin: 0;
    padding: 0;
    height: 100vh;
}

.clock {
    border-radius: 50%;
    background: #fff url('/assets/images/clock.svg') no-repeat center;
    background-size: 88%;
    height: 20em;
    padding-bottom: 31%;
    position: relative;
    width: 20em;
}

.clock.simple:after {
    background: #000;
    border-radius: 50%;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 5%;
    height: 5%;
    z-index: 10;
}

.minutes-container, .hours-container, .seconds-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.hours {
    background: #000;
    height: 20%;
    left: 48.75%;
    position: absolute;
    top: 30%;
    transform-origin: 50% 100%;
    width: 2.5%;
}

.minutes {
    background: #000;
    height: 40%;
    left: 49%;
    position: absolute;
    top: 10%;
    transform-origin: 50% 100%;
    width: 2%;
}

.seconds {
    background: #f00;
    height: 45%;
    left: 49.5%;
    position: absolute;
    top: 14%;
    transform-origin: 50% 80%;
    width: 1%;
    z-index: 8;
}

@keyframes rotate {
    100% {
        transform: rotateZ(360deg);
    }
}

.hours-container {
    animation: rotate 43200s infinite linear;
}
.minutes-container {
    transition: transform 0.3s cubic-bezier(.4,2.08,.55,.44);
}
.seconds-container {
    transition: transform 0.2s cubic-bezier(.4,2.08,.55,.44);
}