/*  Plugin: Codehim Clock (Realistic Analog Clock)
 *   Frameworks: jQuery 3.3.1 
 *   Author: Asif Mughal
 *   GitHub: https://github.com/CodeHimBlog
 *   URL: https://www.codehim.com
 *   License: MIT License
 *   Copyright (c) 2018 - Asif Mughal
 */


/* File: codehim-clock.css */

.codehim-clock-dale {
    width: 250px;
    height: 250px;
    background: #eee;
    background: -webkit-linear-gradient(to right, #ddd, #fff);
    background: linear-gradient(to right, #ddd, #fff);
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    border: 10px solid #efefef;
    box-sizing: content-box;
    box-shadow: -2px 1px 8px rgba(86, 86, 86, 0.4);
}


/* Codehim Clock Size */

.codehim-clock-dale.original {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
}

.codehim-clock-dale.xlarge {
    transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
}

.codehim-clock-dale.xsmall {
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
}

.number {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #333;
    border-radius: 50%;
    font-size: 13px;
    position: absolute;
}

.p3,
.p6,
.p9,
.p12 {
    color: #161819;
    font-size: 25px;
    font-family: fantasy;
}

.p1 {
    right: 72px;
    margin-right: -15px;
    top: 26px;
}

.p2 {
    right: 38px;
    margin-right: -15px;
    top: 63px;
}

.p3 {
    top: 125px;
    margin-top: -15px;
    right: 10px;
}

.p4 {
    right: 38px;
    margin-right: -15px;
    bottom: 63px;
}

.p5 {
    right: 72px;
    margin-right: -15px;
    bottom: 26px;
}

.p6 {
    left: 125px;
    margin-left: -15px;
    bottom: 10px;
}

.p7 {
    left: 72px;
    margin-left: -15px;
    bottom: 26px;
}

.p8 {
    left: 38px;
    margin-left: -15px;
    bottom: 63px;
}

.p9 {
    top: 125px;
    margin-top: -15px;
    left: 10px;
}

.p10 {
    left: 38px;
    margin-left: -15px;
    top: 63px;
}

.p11 {
    left: 72px;
    margin-left: -15px;
    top: 26px;
}

.p12 {
    left: 125px;
    margin-left: -15px;
    top: 10px;
}

.clock-center {
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    border-radius: 50%;
    background: #524f47;
    background: -webkit-linear-gradient(to right, #185a9d, #43cea2);
    background: linear-gradient(to right, #ffffff, #ffffff);
    position: absolute;
    top: 125px;
    left: 125px;
    z-index: 999;
    border: 3px solid #000000a8;
    box-sizing: border-box;
}


/* clock hands */

.seconds-hand,
.minutes-hand,
.hours-hand {
    position: absolute;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
    border-radius: 3px;
}

.seconds-hand {
    height: 100px;
    width: 2px;
    background: #ff0047;
    left: 125px;
    margin-left: -1px;
    top: 25px;
    z-index: 110;
}

.minutes-hand {
    height: 80px;
    width: 5px;
    background: #474644;
    left: 125px;
    margin-left: -2.5px;
    top: 45px;
    z-index: 100;
}

.hours-hand {
    height: 70px;
    width: 8px;
    background: #3D3C3A;
    left: 125px;
    margin-left: -4px;
    top: 55px;
    z-index: 90;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
}

.clock-logo {
    position: absolute;
    left: 125px;
    top: 125px;
    width: 80px;
    border-radius: 50%;
    height: 80px;
    padding: 10px;
    margin-left: -40px;
    margin-top: -40px;
    text-align: center;
    background: #ccc;
    color: #16a085;
    font-size: 12px;
    text-align: center;
    box-sizing: border-box;
    z-index: 0;
    display: none;
}

.clock-logo span {
    display: block;
    font-size: 7px;
    color: #333;
    margin-top: 26px;
}

.point {
    width: 1px;
    height: 6px;
    background: #000;
    display: inline-block;
    position: absolute;
    z-index: 100;
    box-sizing: border-box;
}

.pt4,
.pt9,
.pt19,
.pt24,
.pt34,
.pt39,
.pt49,
.pt54 {
    width: 3px;
    height: 10px;
}

.pt0 {
    top: 1px;
    right: 108px;
}

.pt1 {
    top: 3px;
    right: 96px;
}

.pt2 {
    top: 6.5px;
    right: 84px;
}

.pt3 {
    top: 12px;
    right: 72px;
}

.pt4 {
    top: 18px;
    right: 60px;
}

.pt5 {
    top: 25px;
    right: 50px;
}

.pt6 {
    top: 32px;
    right: 42px;
}

.pt7 {
    top: 40px;
    right: 34px;
}

.pt8 {
    top: 48px;
    right: 27px;
}

.pt9 {
    top: 60px;
    right: 19.5px;
}

.pt10 {
    top: 72px;
    right: 13.5px;
}

.pt11 {
    top: 84px;
    right: 8px;
}

.pt12 {
    top: 95px;
    right: 5px;
}

.pt13 {
    top: 110px;
    right: 3px;
}

.pt14 {
    top: 123px;
    right: 3px;
}

.pt15 {
    top: 134px;
    right: 4px;
}

.pt16 {
    top: 145px;
    right: 5px;
}

.pt17 {
    top: 156px;
    right: 8px;
}

.pt18 {
    top: 169px;
    right: 13px;
}

.pt19 {
    top: 180px;
    right: 20px;
}

.pt20 {
    bottom: 49px;
    right: 26px;
}

.pt21 {
    bottom: 39px;
    right: 35px;
}

.pt22 {
    bottom: 31px;
    right: 43px;
}

.pt23 {
    bottom: 24px;
    right: 51px;
}

.pt24 {
    bottom: 18px;
    right: 61px;
}

.pt25 {
    bottom: 12px;
    right: 72px;
}

.pt26 {
    bottom: 6.5px;
    right: 84px;
}

.pt27 {
    bottom: 3px;
    right: 96px;
}

.pt28 {
    bottom: 1px;
    right: 108px;
}

.pt29 {
    bottom: 0px;
    right: 125px;
}

.pt30 {
    bottom: 1px;
    left: 108px;
}

.pt31 {
    bottom: 3px;
    left: 96px;
}

.pt32 {
    bottom: 6.5px;
    left: 84px;
}

.pt33 {
    bottom: 12px;
    left: 72px;
}

.pt34 {
    bottom: 18px;
    left: 61px;
}

.pt35 {
    bottom: 24px;
    left: 51px;
}

.pt36 {
    bottom: 31px;
    left: 43px;
}

.pt37 {
    bottom: 39px;
    left: 35px;
}

.pt38 {
    bottom: 49px;
    left: 26px;
}

.pt39 {
    top: 180px;
    left: 20px;
}

.pt40 {
    top: 169px;
    left: 13px;
}

.pt41 {
    top: 156px;
    left: 8px;
}

.pt42 {
    top: 145px;
    left: 5px;
}

.pt43 {
    top: 134px;
    left: 4px;
}

.pt44 {
    top: 123px;
    left: 3px;
}

.pt45 {
    top: 110px;
    left: 3px;
}

.pt46 {
    top: 95px;
    left: 5px;
}

.pt47 {
    top: 84px;
    left: 8px;
}

.pt48 {
    top: 72px;
    left: 13.5px;
}

.pt49 {
    top: 60px;
    left: 19.5px;
}

.pt50 {
    top: 48px;
    left: 27px;
}

.pt51 {
    top: 40px;
    left: 34px;
}

.pt52 {
    top: 32px;
    left: 42px;
}

.pt53 {
    top: 25px;
    left: 50px;
}

.pt54 {
    top: 18px;
    left: 60px;
}

.pt55 {
    top: 12px;
    left: 72px;
}

.pt56 {
    top: 6.5px;
    left: 84px;
}

.pt57 {
    top: 3px;
    left: 96px;
}

.pt58 {
    top: 1px;
    left: 108px;
}

.pt59 {
    top: 0px;
    left: 125px;
}

.dale-inner,
.glass-border {
    border-radius: 50%;
    background: transparent;
    position: absolute;
    box-sizing: border-box;
}

.dale-inner {
    width: 250px;
    height: 250px;
    box-shadow: inset -4px 14px 25px rgba(255, 255, 255, 1);
}


/* v2 */

.date-box {
    background: #666;
    color: #fff;
    display: inline-block;
    position: absolute;
    width: 40px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 1px;
    border: 1px solid #444;
    box-sizing: border-box;
    font-size: 9px;
    top: 125px;
    margin-top: -8px;
    right: 43px;
    z-index: 30;
    display: none;
}

.date-box .day {
    background: #e41;
    padding: 1px;
    padding-top: 3px;
}

.date-box .date {
    line-height: 16px;
    padding-left: 2px;
}

.logo-outer1,
.logo-outer {
    width: 80px;
    height: 80px;
    border: 3px solid transparent;
    border-radius: 50%;
    position: absolute;
    top: 125px;
    margin-top: -40px;
    right: 125px;
    margin-right: -40px;
    box-sizing: border-box;
    display: none;
}

.logo-outer {
    animation: spinnerClockWise 4s linear infinite;
    -webkit-animation: spinnerClockWise 4s linear infinite;
    border-left: 3px solid #7BCCB5;
}

.logo-outer1 {
    border-left: 3px solid #43BFC7;
    animation: spinnerAntiClockWise 4s linear infinite;
    -webkit-animation: spinnerAntiClockWise 4s linear infinite;
}

@keyframes spinnerClockWise {
    from {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spinnerAntiClockWise {
    from {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
}

-webkit-@keyframes spinnerClockWise {
    from {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}

-webkit-@keyframes spinnerAntiClockWise {
    from {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
}

.clock-place {
    float: right;
    width: 40%;
    margin-top: 20px;
    margin-bottom: 25px;
}