/*  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;
   /* transform: scale(0.5); */
   /* 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: none;
 /* 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: 100px;
    width: 10px;
    background: #fff;
    left: 125px;
    margin-left: -2.5px;
    top: 25px;
    z-index: 100;
}

.hours-hand{
    height: 60px;
    width: 15px;
    background: #fff;  
    left: 120px;
    margin-left: -4px;
    top: 65px;
    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: #fff;
   display: inline-block;
   position: absolute;
  z-index: 100;
  box-sizing: border-box;
  


}
.pt59,.pt4, .pt9,.pt14, .pt19, 
.pt24,.pt29, .pt34, .pt39, .pt44,
.pt49, .pt54{
   width: 3px;
   height: 25px;
}

.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;
  
}



/* Reset */
*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}


.htmleaf-links a{ color: rgba(255, 255, 255, 0.6);outline: none;text-decoration: none;-webkit-transition: 0.2s;transition: 0.2s;}
.htmleaf-links a:hover,.htmleaf-links a:focus{color:#74777b;text-decoration: none;}
.htmleaf-container{
    /*margin: 0 auto;*/
    width: 70px;
    height: 70px;
    margin-left: -30px;
}
.htmleaf-content{
    /*padding: 2em 0;*/
    transform: scale(0.2);
    margin-top: -90px;
}

.htmleaf-header{
    /*padding: 1em 190px 1em;*/
    letter-spacing: -1px;
    text-align: center;
    background: #66677c;
}
.htmleaf-header h1 {
    color: #D5D6E2;
    font-weight: 600;
    font-size: 2em;
    line-height: 1;
    margin-bottom: 0;
}
.htmleaf-header h1 span {
    display: block;
    font-size: 60%;
    font-weight: 400;
    padding: 0.8em 0 0.5em 0;
    color: #c3c8cd;
}
/*nav*/
.htmleaf-demo a{color: #fff;text-decoration: none;}
.htmleaf-demo{width: 100%;padding-bottom: 1.2em;}
.htmleaf-demo a{display: inline-block;margin: 0.5em;padding: 0.6em 1em;border: 3px solid #fff;font-weight: 700;}
.htmleaf-demo a:hover{opacity: 0.6;}
.htmleaf-demo a.current{background:#1d7db1;color: #fff; }
/* Top Navigation Style */
.htmleaf-links {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    font-size: 1.5em;
    text-align: center;
}

.htmleaf-links::after {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -1px;
    width: 2px;
    height: 100%;
    background: #dbdbdb;
    content: '';
    -webkit-transform: rotate3d(0,0,1,22.5deg);
    transform: rotate3d(0,0,1,22.5deg);
}

.htmleaf-icon {
    display: inline-block;
    margin: 0.5em;
    padding: 0em 0;
    width: 1.5em;
    text-decoration: none;
}

.htmleaf-icon span {
    display: none;
}

.htmleaf-icon:before {
    margin: 0 5px;
    text-transform: none;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    font-family: 'icomoon';
    line-height: 1;
    speak: none;
    -webkit-font-smoothing: antialiased;
}
/* footer */
.htmleaf-footer{width: 100%;padding-top: 10px;}
.htmleaf-small{font-size: 0.8em;}
.center{text-align: center;}
/****/
.related {
    color: #fff;
    background: #494A5F;
    text-align: center;
    font-size: 1.25em;
    padding: 0.5em 0;
    overflow: hidden;
}

.related > a {
    vertical-align: top;
    width: calc(100% - 20px);
    max-width: 340px;
    display: inline-block;
    text-align: center;
    margin: 20px 10px;
    padding: 25px;
    font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
}
.related a {
    display: inline-block;
    text-align: left;
    margin: 20px auto;
    padding: 10px 20px;
    opacity: 0.8;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    -webkit-backface-visibility: hidden;
    text-decoration: none;
}

.related a:hover,
.related a:active {
    opacity: 1;
}

.related a img {
    max-width: 100%;
    opacity: 0.8;
    border-radius: 4px;
}
.related a:hover img,
.related a:active img {
    opacity: 1;
}
.related h3{font-family: "Microsoft YaHei", sans-serif;font-size: 1.2em}
.related a h3 {
    font-size: 0.85em;
    font-weight: 300;
    margin-top: 0.15em;
    color: #fff;
}
/* icomoon */
.icon-htmleaf-home-outline:before {
    content: "\e5000";
}

.icon-htmleaf-arrow-forward-outline:before {
    content: "\e5001";
}

@media screen and (max-width: 1024px) {
    .htmleaf-header {
        padding: 2em 10% 2em;
    }
    .htmleaf-header h1 {
        font-size:1.4em;
    }
    .htmleaf-links{font-size: 1.4em}
}

@media screen and (max-width: 960px) {
    .htmleaf-header {
        padding: 2em 10% 2em;
    }
    .htmleaf-header h1 {
        font-size:1.2em;
    }
    .htmleaf-links{font-size: 1.2em}
    .related h3{font-size: 1em;}
    .related a h3 {
        font-size: 0.8em;
    }
}

@media screen and (max-width: 766px) {
    .htmleaf-header h1 {
        font-size:1.3em;
    }
    .htmleaf-links{font-size: 1.3em}
}

@media screen and (max-width: 640px) {
    .htmleaf-header {
        padding: 2em 10% 2em;
    }
    .htmleaf-header h1 {
        font-size:1em;
    }
    .htmleaf-links{font-size: 1em}
    .related h3{font-size: 0.8em;}
    .related a h3 {
        font-size: 0.6em;
    }
}