.oclock {
    position: relative;
    width: 125px;
    height: 125px;
}

.oclock:before {
    content: '';
    width: 95%;
    height: 95%;
    border-radius: 50%;
    display: block;
    background: transparent;
    border: 2vmin solid white;
}

/* highlight at top left of black outline */
.oclock:after {
    content: '';
    width: 105%;
    height: 105%;
    border-radius: 50%;
    display: block;
    background: transparent;
    position: absolute;
    top: -2.5%;
    left: -2.5%;
    box-shadow: -3px -3px 9px rgba(255,255,255,.8);
}

.flat {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    border-radius: 50%;
    background-image: conic-gradient(rgba(0, 0, 0, 0) 75%, #dadaff 75%);
}

.flat2 {
    position: absolute;
    background: #fff;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 100%;
}

.label {
    position: absolute;
    top: 17px;
    left: 39%;
    font-size: .5em;
    color: #000;
}

.hourhand,
.secondhand,
.minutehand {
    width: 100%;
    height: 7px;
    background: #000;
    position: absolute;
/*    top: 40vmin;
    left: calc(50% - 3.5vmin);*/
    z-index: 2;
    transform: rotate(-139deg);
    transform-origin: 19%;
}

/*.hourhand:after,
.secondhand:after,*/
.minutehand:after {
/*    content: '';*/
    background: #000;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    z-index: 3;
    position: absolute;
    top: -15px;
    left: 20px;
}

.hourhand {
    border-top-right-radius: 20%;
    border-bottom-right-radius: 20%;
    box-shadow: -10px 0px 10px rgba(0,0,0,.4);

    transform: scale(0.35) rotate(180deg);
    top: 45%;
    left: 31%;
    width: 110%;
    height: 10%;
}

.minutehand {
    width: 165%;
    height: 8px;
    transform: rotate(-39deg);
    transform-origin: 10%;
    border-top-right-radius: 30%;
    border-bottom-right-radius: 30%;
    box-shadow: -10px 10px 10px rgba(0,0,0,.4);

    top: 50%;
    left: 35%;
    transform: scale(0.32) rotate(270deg);
}

.minutehand:before {
/*        content: '';*/
        width: 15px;
        height: 15px;
        border-radius: 50%;
        z-index: 99;
        position: absolute;
        top: -27px;
        left: 27;
        box-shadow: -2px -2px 7px rgba(255,255,255,.6);
    }

.secondhand {
    width: 35vmin;
    height: .5vmin;
    top: 40.75vmin;
    transform: rotate(160deg);
    transform-origin: 11.5%;
    box-shadow: -10px -10px 10px rgba(0,0,0,.4);

    transform: scale(0.35) rotate(45deg);
    top: 46%;
    left: 34%;
    display: none;
}

.secondhand:after {
    top: -2.25vmin;
}

.hour12,
.hour1,
.hour2,
.hour3,
.hour4,
.hour5 {
    height: 1px;
    width: 89%;
    background: transparent;
    border-left: 10px solid #000;
    border-right: 10px solid #000;
    transform: translate(-50%, -50%);
/*     transform-origin: right bottom; */
    top: 50%;
    left: 50%;
    position: absolute;
}

.hour12 { transform: translate(-67px, 0px); top: 48%;left: 58%;}

.hour3 { transform: rotate(90deg) translate(-4px, 66px); left: 59%;}

.hour1 { transform: rotate(120deg) translate(30px, 60px); left: 59%;}

.hour2 { transform: rotate(150deg) translate(56px, 36px); left: 59%;}

.hour4 { transform: rotate(210deg) translate(60px, -31px); left: 59%;}

.hour5 { transform: rotate(240deg) translate(37px, -58px); left: 59%;}