/* General */
body {font-family:PingHei,'PingFang SC',Helvetica Neue,'Work Sans','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;}

a {color: #2ecc71;  -webkit-transition: color 0.1s ease-in; -moz-transition: color 0.1s ease-in; -o-transition: color 0.1s ease-in; transition: color 0.1s ease-in;}
a:hover {text-decoration: none;}
a:focus {
  outline:0;
}
a:active,a:hover {
  outline:0;
}
.container-fluid {padding-left: 50px; padding-right: 50px;}
.content {margin-bottom: 50px;}
.loading { height:50px; margin-top: 30px; background-position: top center; background-repeat: no-repeat;}

/* Header */
header{ padding-top: 65px; padding-bottom: 0px;  width: 100%; display: table; margin-bottom: 40px;}
header .branding { display: table-cell; width: 100%; padding-left: 50px; }
header .branding h1 a {color: #bdc3c7; }
header .branding .dot  {color: #2ecc71; }
header .blog-logo img { max-height: 100px; max-width: -webkit-calc(100% - 20px); max-width: calc(100% - 20px);}

/* Single Content without Featured Image */
.post-single{width: 640px; margin: 0 auto; color: #555; line-height: 22px;}
.post-single .post-single-image img {border-radius: 2px; width: 22px; margin-right: 10px;}
.post-single .post-single-title h1{ font-size: 40px; color: #333; margin-bottom: 30px;}
.post-single .post-single-content { font-size: 16px; line-height: 26px; }
.post-single .post-single-content p,.post-single .post-single-content pre { margin-bottom: 20px; }
.post-single .post-single-content img { width:120%; border-radius: 10px; position: relative; right: 10%; } 
.post-single .post-single-content h1, .post-single .post-single-content h2, .post-single .post-single-content h3, .post-single .post-single-content h4, .post-single .post-single-content h5, .post-single .post-single-content h6 { color: #555; }  
.post-single .post-single-content p mark { color: #999; background: none;  } 
.post-single .post-single-date { color: #bbb; }
.post-single a {color: #2ecc71;}
.post-single a:hover {color: #555;}
.post-single code{background-color: #e5eff5; color: #555; border-radius: 0px; font-size: 95%;}
.post-single .post-single-content blockquote {font-family: 'Bad Script', cursive; color:#aaa; border-left: none; padding: 0; margin: 0 auto; width: 120%; position: relative; right: 10%; font-size: 22px; line-height: 34px; }
.post-single .post-single-content blockquote p{padding-left: 30px;}  
.kg-card-markdown p {margin-bottom: 30px;}
.kg-card-markdown p img {width: 100%;}

/* Page */
.page-template .kg-card-markdown p {font-size: 14px; color: #555; line-height: 20px;}

/* Content If Has Image */
.post {padding-top: 15px; padding-bottom: 15px;}
.post-featured-image {position: relative; display: none;}
.post-featured-image img {width: 100%; height: auto;}
.post-featured-image .mask {position: absolute; top:0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0;  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0;  -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;}
.post-featured-image:hover .mask {opacity: 0.3;}
.post-featured-image .entry-date, .post-featured-image .post-tag {position: absolute;  color: #fff; -webkit-transform: translateY(10px); color: #fff;
   -moz-transform: translateY(10px);
   -o-transform: translateY(10px);
   -ms-transform: translateY(10px);
   transform: translateY(10px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;}
.post-featured-image .entry-date {top:50%; right: 0%; width: 100%; text-align: center;}
.post-featured-image .post-tag {top:40%; right: 0%; width: 100%; text-align: center;}
.post-featured-image .post-tag a {color: #fff; letter-spacing: 1px; }
.post-featured-image:hover .entry-date, .post-featured-image:hover .post-tag { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);}

/*Post*/
.post-template .kg-card-markdown {display: none;}

/*Back To Home*/
.back-to-home {margin-top: 55px;}
.back-to-home a { color: #ccc; font-size: 12px; letter-spacing: 1px;}
.back-to-home a:hover { color: #333; }

/* Pagination Post */ 
.pagination { width: 100%; border-radius: 0; padding: 0 15px; margin: 15 0 0; display: none;}
.pagination .page-number {color: #b3b3b3; float: left; font-size: 12px;}
.pagination .pagination-posts  { float: right;}
.pagination .pagination-posts a { color: #ccc; font-size: 12px; letter-spacing: 1px;}
.pagination .pagination-posts a.older-posts { margin-left: 15px; }
.pagination .pagination-posts a:hover { color: #333; }

/* Footer */
footer {border-top: 1px solid #eaeaea; padding-top: 20px; padding-bottom: 20px; margin-top: 80px; }
footer .copyright { font-size:12px; padding-left: 50px;  width: 50%; display: inline-block; color: #bbb; letter-spacing: 1px; }
footer .copyright a {color: #ccc; }
footer .copyright a:hover {color: #333;}
footer .social-media {float:right;padding-right: 50px; width: 50%; display:inline-block; text-align: right; letter-spacing: 1px; font-size: 12px; }
footer .social-media a {color: #ccc; margin-left: 15px;  -webkit-transition: color 0.1s ease-in; -moz-transition: color 0.1s ease-in; -o-transition: color 0.1s ease-in; transition: color 0.1s ease-in;}
footer .social-media a:hover {color: #333;}

/* Animated */
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}


.doc_comments {padding: 0; }
.cf{margin:0 0 3rem 0}
.cf .page-navigator{margin:3.75rem 0 3rem 0}
.response{margin:2rem 0}
.hinfo{display:none}
.cf a{color:#aaa}
.comment-list{margin:0;padding-left:0;list-style-type:none}
.avatar{float:left;display:block;margin:1.4rem 1rem 0 0;width:40px;height:40px;border-radius:50%}
.cp{overflow:hidden;padding:1.5rem 0;border-bottom:1px dotted #e0e0e0}
.cp p{margin:0}
.cr{float:right;display:none}
.cp:hover .cr{display:block}
.ccr,.cm{margin-top:1rem;margin-bottom:1rem;color:#aaa;font-size:.766rem}
.ccr{text-align:right}
.ca{padding:.1rem .25rem;border-radius:2px;background:#eee;font-size:.7rem}
.ca a:hover{color:#222!important}
.c_p>.children{margin-left:1rem;padding-left:40px}
.tbox{padding:0 0 0 18px}
.ci{overflow:auto;margin:10px 0;margin-left:-18px;padding:3px 7px;width:100%;height:30px;border:1px solid #ccc;border-radius:2px;color:#555;font-size:14px;line-height:1.5}
.ci:focus{outline:0;border-color:#999}
textarea.ci{padding-top:8px;height:10rem;resize:none}
.submit{display:block;padding:0 30px;height:36px;border:1px solid #f0f0f0;background:#f5f5f5;text-align:center;font-size:1rem;line-height:36px}
.submit:hover{border-color:#ddd;background:#ddd;color:#000;cursor:pointer}
@media only screen and (max-width:767px){.c_p .children{margin-left:0;padding-left:0}
}