.outer_face {
    position: relative;
    width: 40px; /* width of clock */
    height: 40px; /* height of clock */
    border-radius: 20px; /* clock round corner radius */
    background: white;
    z-index: 0;
    box-shadow: inset 0 0 2px gray;
    border: 0 solid gray; /* thickness of outer border */
}

.outer_face::before, .outer_face::after, .outer_face .marker { /* time markers syle */
    content: "";
    position: absolute;
    width: 1.5px; /* width of 12-6 and 3-9 markers */
    height: 100%;
    background: black;
    z-index: 0;
    left: 50%;
    margin-left: -0.75px; /* set this value of 1/2 marker width */
    top: 0;
}

.outer_face::after {
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.outer_face .marker {
    background: gray;
    width: 1px; /* width of all other markers */
    margin-left: -0.5px; /* set this value of 1/2 marker width */
}

.outer_face .marker.oneseven {
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}

.outer_face .marker.twoeight {
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}

.outer_face .marker.fourten {
    -moz-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg);
}

.outer_face .marker.fiveeleven {
    -moz-transform: rotate(150deg);
    -ms-transform: rotate(150deg);
    -webkit-transform: rotate(150deg);
    transform: rotate(150deg);
}

.inner_face {
    position: relative;
    width: 88%;
    height: 88%;
    background: white;
    -moz-border-radius: 250px;
    -webkit-border-radius: 250px;
    border-radius: 250px;
    z-index: 1000;
    left: 6%; /* set this value of 1/2 width value*/
    top: 6% /* set this value of 1/2 height value*/
}

.rtl .inner_face {
    position: relative;
    width: 88%;
    height: 88%;
    background: white;
    -moz-border-radius: 250px;
    -webkit-border-radius: 250px;
    border-radius: 250px;
    z-index: 1000;
    right: 5%;
    top: 6% /* set this value of 1/2 height value*/
}

.inner_face::before {
    /* clock center circle small */
    content: "";
    width: 3px; /* width of inner circle */
    height: 3px; /* height of inner circle */
    border-radius: 3px;
    margin-left: -1.5px; /* set this value of 1/2 width value*/
    margin-top: -1.5px; /* set this value of 1/2 height value*/
    background: black;
    position: absolute;
    top: 50%;
    left: 50%;
    box-shadow: 0 0 5px blue;
    }

.hand, .hand.hour {
    position: absolute;
    width: 1px; /* width of hour hand */
    height: 30%; /* height of hour hand */
    top: 15%; /* set top to 50% - height */
    left: 50%;
    margin-left: -0.5px; /* set this value to 1/2 width */
    background: black;
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -moz-transform-origin: bottom;
    -ms-transform-origin: bottom;
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    z-index: -1;
    -moz-box-shadow: 0 0 2px gray;
    -webkit-box-shadow: 0 0 1.5px gray;
    box-shadow: 0 0 1.5px gray;
    }

.hand.minute {
    height: 45%; /* height of min hand */
    top: 5%; /* set top to 50% - height */
    width: 1px; /* width of min hand */
    margin-left: -0.5px; /* set this value to 1/2 width */
    }

.hand.second {
    height: 50%; /* height of sec hand */
    width: 1px; /* width of sec hand */
    margin-left: -0.5px; /* set this value to 1/2 width */
    top: 0;
    background: red;
    }