/*  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 #555;
   box-sizing: content-box;
   box-shadow: -2px 1px 8px rgba(0, 0, 0, 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 {
   background: #555;
   color: #fff;
}

.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: #16a085;
   background: -webkit-linear-gradient(to right, #185a9d, #43cea2);
	background: linear-gradient(to right, #185a9d, #43cea2);
   position: absolute;
   top: 125px;
   left: 125px;
   z-index: 999;
   border: 1px solid #16a085;
   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: red; 
    left: 125px;
    margin-left: -1px;
   top: 25px;
   z-index: 110;   
}

.minutes-hand{
    height: 80px;
    width: 5px;
    background: #348781;
    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;
}

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

.point{
   width: 1px;
   height: 6px;
   background: #999;
   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{
   border: 4px solid rgba(0, 0, 0, 0.13);
   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;
}
.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;
   
}
.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);
}


}