@import url(https://fonts.googleapis.com/css?family=Montserrat);

/* General */
body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}
h1, h2, h3, h4, h5, h6 {font-family: 'Montserrat', 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 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: #584d4d; 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: #584d4d; letter-spacing: 1px; }
footer .copyright a {color: #ccc; }
footer .copyright a:hover {color: #333;}
footer .social-media {padding-right: 50px; width: 50%; display:inline-block; text-align: right; letter-spacing: 1px; font-size: 12px; }
footer .social-media a {color: #584d4d; 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;
}