/* ==========================================================================
   Table of Contents
   ========================================================================== */


/*

    0.  Variables
    1.  Normalize
    2.  General
    3.  Utilities
    4.  General
    5.  Single Post
    6.  Tag Archive
    7.  Read Next
    8.  Third Party Elements
    9.  Pagination
    10. Footer
    11. Layout
    12. Widget
    13. Post Nav
    14. BackTop Button
    15. TOC
    16. Profile
    17. Media Queries (Tablet - Portrait)
    18. Media Queries (Tablet - Landscape)
    19. Media Queries (Mobile)
    20. Animations
    21. Static Page
    22. Highlight Code
    23. Archives
    24. Fancybox Setting
    25. Koenig Styles in Ghost 2.x
    26. Search
    27. Bookmark card

*/

/* ==========================================================================
   0. Variables
   ========================================================================== */

@import "variables.css";


/* ==========================================================================
   1. Normalize.css v2.1.3 | MIT License | git.io/normalize | (minified)
   ========================================================================== */

@import "normalize.css";

/* ==========================================================================
   2. General - Setting up some base styles
   ========================================================================== */

html {
    height: 100%;
    max-height: 100%;
    font-size: 62.5%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
    height: 100%;
    max-height: 100%;
    width: 100%;
    font-family: var(--sans-serif);
    font-size: 1.6em;
    line-height: 1.6em;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.01rem;
    color: var(--font-color);
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
}
::-moz-selection {
    background: var(--selection-color);
    color: #FFF;
}
::selection {
    background: var(--selection-color);
    color: #FFF;
}
h1, h2, h3, h4, h5, h6 {
    
    color: var(--font-color);
    line-height: 1.2em;
    margin: 1.6em 0 0.8em 0;
    font-weight: bold !important;
    text-rendering: geometricPrecision;
}
h1 {
    font-size: 3.2rem;
}
h2 {
    font-size: 2.4rem;
}
h3 {
    font-size: 2rem;
}
h4 {
    font-size: 1.6rem;
}
h5 {
    font-size: 1.4rem !important;
}
h6 {
    font-size: 1.2rem !important;
}
a {
    color: #4A4A4A;
    transition: color 0.3s ease;
}
a:hover {
    color: #111;
}
p, ul, ol, dl {
    -webkit-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
    -moz-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
    -o-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
    margin: 0 0 1.25em 0;
    text-rendering: geometricPrecision;
    line-height: 1.6;
}
ol, ul {
    padding-left: 3rem;
}
ol ol, ul ul, ul ol, ol ul {
    margin: 0 0 0.4em 0;
    padding-left: 2em;
}
dl dt {
    float: left;
    width: 180px;
    overflow: hidden;
    clear: left;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    margin-bottom: 1em;
}
dl dd {
    margin-left: 200px;
    margin-bottom: 1em
}
li {
    margin: 0.4em 0;
}
li li {
    margin: 0;
}
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid var(--border-color) !important;
    margin: 2em 0;
    padding: 0;
}
blockquote {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 15px 20px !important;
    margin: 1.75em 0;
    font-size: 1.6rem !important;
    border-left: #4A4A4A 0.4em solid;
    background-color: rgba(102, 128, 153, 0.05);
    border-left: 5px solid rgba(102, 128, 153, 0.075) !important;
}
blockquote small {
    display: inline-block;
    margin: 0.8em 0 0.8em 1.5em;
    font-size: 0.9em;
    color: #CCC;
}
blockquote small:before {
    content: "\2014 \00A0";
}
blockquote cite {
    font-weight: 700;
}
blockquote cite a {
    font-weight: normal;
}
mark {
    background-color: #fdffb6;
}
tt {
    padding: 1px 3px;
    font-family: Monaco, monospace, sans-serif !important;
    font-size: 0.85em;
    white-space: pre-wrap;
    background: #f9f2f4;
    border-radius: 2px;
}
pre {
    padding: 0px !important;
    font-family: Monaco, monospace, sans-serif !important;
    font-size: 0.8em !important;
    line-height: 1.6 !important;
    white-space: pre;
    background: #F7FAFB;
    border: 0px !important;
}
pre code, pre tt {
    font-size: inherit;
    white-space: pre-wrap;
    background: transparent;
    border: none;
    padding: 0;
}
kbd {
    display: inline-block;
    margin-bottom: 0.4em;
    padding: 1px 8px;
    border: #CCC 1px solid;
    color: #666;
    text-shadow: #FFF 0 1px 0;
    font-size: 0.9em;
    font-weight: 700;
    background: #F4F4F4;
    border-radius: 4px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 1px 0 0 #fff inset;
}
table {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 1.75em 0;
    width: 100%;
    max-width: 100%;
    background-color: transparent;
}
table th, table td {
    padding: 8px;
    line-height: 20px;
    text-align: left;
    vertical-align: top;
    border-top: #EFEFEF 1px solid;
}
table th {
    color: #000;
}
table caption + thead tr:first-child th, table caption + thead tr:first-child td, table colgroup + thead tr:first-child th, table colgroup + thead tr:first-child td, table thead:first-child tr:first-child th, table thead:first-child tr:first-child td {
    border-top: 0;
}
table tbody + tbody {
    border-top: #EFEFEF 2px solid;
}
table table table {
    background-color: #FFF;
}
table tbody > tr:nth-child(odd) > td, table tbody > tr:nth-child(odd) > th {
    background-color: #F6F6F6;
}
table.plain tbody > tr:nth-child(odd) > td, table.plain tbody > tr:nth-child(odd) > th {
    background: transparent;
}
iframe, .fluid-width-video-wrapper {
    display: block;
    margin: 1.75em 0;
}

/* When a video is inside the fitvids wrapper, drop the
margin on the iframe, cause it breaks stuff. */

.fluid-width-video-wrapper iframe {
    margin: 0;
}

/* ==========================================================================
   3. Utilities - These things get used a lot
   ========================================================================== */

/* Clears shit */

.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1;
}

/* Hides shit */

.hidden {
    text-indent: -9999px;
    visibility: hidden;
    display: none;
}

/* Creates a responsive wrapper that makes our content scale nicely */

.inner {
    position: relative;
    width: 80%;
    max-width: 750px;
    margin: 0 auto;
}

/* Centres vertically yo. (IE8+) */

.vertical {
    display: table-cell;
    vertical-align: middle;
}

/* Wraps the main content & footer */

.site-wrapper {
    position: relative;
    z-index: 10;
    min-height: 100%;
    background: var(--background-color);
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
}

/* ==========================================================================
   4. General - The main styles for the the theme
   ========================================================================== */


/* Big cover image on the home page */

.main-header {
    position: relative;
    width: 100%;
    margin-bottom: 1.25em;
    text-align: center;
    background: #FFF no-repeat center center;
    overflow: hidden;
    border-bottom: 1px solid var(--border-color);
    height: 80px;
    max-height: 80px;
    z-index: 2;
}
.main-header .inner {
    width: 80%;
}
.main-header a {
    text-decoration: none !important;
}
.main-nav {
    display: flex;
    position: relative;
    padding: 35px 40px;
    margin: 0 auto 0 !important;
    height: 80px;
}
.main-nav a {
    text-decoration: none;
    font-size: 16px;
    color: var(--font-color);
    padding: 1.5em .8em;
}
.main-nav__brand {
    padding: 23px 0;
    background: var(--primary-color);
    opacity: .9;
}
.main-nav__brand a {
    font-size: 30px;
    color: #fff;
    padding: 20px;
}
.main-nav__brand a:hover {
    color: #fff;
}

/* Navigation */

.main-header .main-nav__menu {
    display: flex;
    justify-content: flex-end;
    flex: 1;
}
.main-nav__menu > ul {
    margin: 0 1.25em;
    padding: 0;
    height: 80px;
}
.main-nav__menu > ul > li {
    display: inline-block;
    padding: 22px 0px;
}
.main-nav__menu > ul > li:hover {
    border-bottom: 4px solid var(--primary-color);
    margin-bottom: -4px;
}

.main-nav__menu > .btn.btn-link {
    display: none;
}

/* The details of your blog. Defined in ghost/settings/ */

.page-title {
    margin: .8rem;
    font-size: 3.2rem;
    letter-spacing: -1px;
    font-weight: 700;
    color: #fff;
}
.page-description {
    margin: 0;
    font-size: 2rem;
    line-height: 1.5em;
    font-weight: 400;
    letter-spacing: 0.01rem;
    color: rgba(255, 255, 255, 0.8);
}
.no-cover.main-header {
    min-height: 160px;
    max-height: 40vh;
    background: #f5f8fa;
}
.no-cover .page-title {
    color: #fff;
}
.no-cover .page-description {
    color: rgba(255, 255, 255, 0.8);
}

/* Add subtle load-in animation for content on the home page */

.home-template .page-title {
    -webkit-animation: fade-in-down 0.6s;
    animation: fade-in-down 0.6s;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
.home-template .page-description {
    -webkit-animation: fade-in-down 0.9s;
    animation: fade-in-down 0.9s;
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
}

/* Every post, on every page, gets this style on its <article> tag */

.post {
    position: relative;
    max-width: 750px;
    margin: 2em;
    border-bottom: var(--border-color) 1px solid;
    word-wrap: break-word;
}

/* Add a little circle in the middle of the border-bottom on our .post
   just for the lolz and stylepoints. */

.post:after {
    display: block;
    content: "";
    width: 7px;
    height: 7px;
    border: #E7EEF2 1px solid;
    position: absolute;
    bottom: -5px;
    left: 50%;
    margin-left: -5px;
    background: #FFF;
    border-radius: 100%;
    box-shadow: #FFF 0 0 0 5px;
}
.post-title {
    margin: 0 auto .6em;
    font-size: 3.2rem;
}
.post-title a {
    color: var(--font-color);
    text-decoration: none !important;
}
.post-excerpt p {
    margin: 0;
    font-size: 0.9em;
    line-height: 1.7em;
}
.read-more {
    text-decoration: none;
}
.featured h1 {
    border-left: 5px solid;
    padding-left: 27px;
    margin-left: -32px;
}
.post-meta {
    display: block;
    margin: 2rem 0;
    font-size: 1.4rem;
    line-height: 2.2rem;
    color: var(--post-meta);
}
.author-thumb {
    width: 24px;
    height: 24px;
    float: left;
    margin-right: 9px;
    border-radius: 100%;
}
.post-meta a {
    color: var(--post-meta);
    text-decoration: none;
}
.post-meta a:hover {
    color: var(--primary-light-hover);
    text-decoration: none;
}
.user-meta {
    position: relative;
    padding: 0.3rem 40px 0 100px;
    min-height: 77px;
}
.post-meta-item {
    margin-left: 8px;
    padding-left: 12px;
    border-left: 1px solid var(--border-color);
}
.post-meta-item:first-child,
.post-meta-item:last-child {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
}
.post-meta-tags a {
    color: var(--primary-light-hover);
    background-color: rgba(1, 126, 102, .08);
    display: inline-block;
    margin: 0 5px;
    padding: 0 6px;
    line-height: 22px;
    font-size: 13px;
    text-decoration: none !important;
}
.post-meta-tags a:hover {
    color: #fff;
    background-color: var(--primary-light-hover);
}
.post-date {
    display: inline-block;
    text-transform: uppercase;
    font-size: 1.4rem;
    white-space: nowrap;
}
.post-meta-reading_time {
    display: none;
}
.user-image {
    position: absolute;
    top: 0;
    left: 0;
}
.user-name {
    display: block;
    font-weight: 700;
}
.user-bio {
    display: block;
    max-width: 440px;
    font-size: 1.4rem;
    line-height: 1.5em;
}
.publish-meta {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4.3rem 0 4rem 0;
    text-align: right;
}
.publish-heading {
    display: block;
    font-weight: 700;
}
.publish-date {
    display: block;
    font-size: 1.4rem;
    line-height: 1.5em;
}

/* ==========================================================================
   5. Single Post - When you click on an individual post
   ========================================================================== */

.post-template .post-title {
    margin-bottom: 0;
}
.post-template .post-date {
    padding: 0;
    margin: 0;
    border: none;
}

/* Stop elements, such as img wider than the post content, from
   creating horizontal scroll - slight hack due to imperfections
   with browser width % calculations and rounding */

.post-template .content {
    overflow: hidden;
}

/* Tweak the .post wrapper style */

.post-template .post {
    /*margin-top: 0;*/
    border-bottom: none;
    padding-bottom: 0;
}

/* Kill that stylish little circle that was on the border, too */

.post-template .post:after {
    display: none;
}
/* Keep images centered, and allow images wider than the main
   text column to break out. */

.post-content img:not(.kg-bookmark-icon):not(.kg-bookmark-thumbnail) {
    display: block;
    max-width: 100%;
    height: auto;
    position: relative;
    left: 50%;
    padding: .8em 0;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}
.post-content a {
    color: var(--primary-color);
}
.post-content a:hover {
    color: var(--primary-dark-hover);
}
.post-content h1 {
    margin: 1em 0 .75em;
}
.post-content h2 {
    padding-bottom: 0.6em;
    border-bottom: 1px solid var(--border-color);
}
/* .post-content h3 {
    margin-left: -32px;
    padding-left: 27px;
    border-left: 5px solid;
} */
.post-content h4 {
    margin-left: -32px;
    padding-left: 28px;
    border-left: 4px solid;
}
.footnotes {
    font-style: italic;
    font-size: 1.3rem;
    line-height: 1.6em;
}
.footnotes li {
    margin: 0.6rem 0;
}
.footnotes p {
    margin: 0;
}
.footnotes p a:last-child {
    text-decoration: none;
}

/* The author credit area after the post */

.post-footer {
    position: relative;
    margin: 6rem 0 0;
    padding: 6rem 0 0;
    border-top: 1px solid var(--border-color);
}
.post-footer h4 {
    font-size: 1.8rem;
    margin: 0;
}
.post-footer p {
    margin: 1rem 0;
    font-size: 1.4rem;
    line-height: 1.75em;
}

/* list of author links - location / url */

.author-meta {
    padding: 10px 20px;
    margin: 0;
    list-style: none;
    line-height: 1.5;
}
.author-meta a {
    color: var(--primary-color);
}
.author-meta a:hover {
    color: var(--primary-dark-hover);
}

/* author-info after post content */

.author-info {
    border: 1px solid var(--border-color);
    background: #FFF;
    margin-bottom: 10px;
}
.author-info .author-info-title {
    border-bottom: 1px solid var(--border-color);
    padding: 2px 10px;
    font-size: 14px !important;
    background: #F9F9F9;
    font-weight: 700;
}
.author-info .author-info-title h5 {
    margin: 4px 0px;
}
.author-info .author-info-content {
    padding: 10px;
}
.author-info .author-info-content .author-info-bio-placeholder a {
    color: var(--primary-color);
}
.author-info .author-info-content .author-info-bio-placeholder a:hover {
    color: var(--primary-dark-hover);
}
.author-info-bio {
    font-size: 1.4rem;
    line-height: 1.75em;
}

/* author social links */

.author-info-social {
    margin-top: 10px;
}
.author-info-social a {
    color: #FFF;
    text-decoration: none;
    padding: 4px 7px;
    font-size: 14px;
    white-space: nowrap;
    margin-right: 10px;
}
.author-info-social a:hover {
    color: #FFF;
    text-decoration: none;
    filter: alpha(opacity=70);
    opacity: 0.7;
}
.author-info-social .author-info-social-website {
    background-color: #428BCA;
}
.author-info-social .author-info-social-weibo {
    background-color: #D9534F;
}
.author-info-social .author-info-social-github {
    background-color: #4A4A4A;
}
.author-info-social .author-info-social-sf {
    background-color: #5CB85C;
}
.author-info-social .author-info-social-jj {
    background-color: #007fff;
}
.author-info-social .author-info-social-feature {
    background-color: #567E95;
}

/* Create some space to the right for the share links */

.post-footer .author {
    margin-right: 180px;
}
.post-footer h4 a {
    color: #2e2e2e;
    text-decoration: none;
}
.post-footer h4 a:hover {
    text-decoration: underline;
}

/* Drop the share links in the space to the right.
   Doing it like this means it's easier for the author bio
   to be flexible at smaller screen sizes while the share
   links remain at a fixed width the whole time */

.post-footer .share {
    position: absolute;
    top: 6rem;
    right: 0;
    width: 140px;
}
.post-footer .share a {
    font-size: 1.8rem;
    display: inline-block;
    margin: 1rem 1.6rem 1.6rem 0;
    color: #BBC7CC;
    text-decoration: none;
}
.post-footer .share .icon-twitter:hover {
    color: #55acee;
}
.post-footer .share .icon-facebook:hover {
    color: #3b5998;
}
.post-footer .share .icon-google-plus:hover {
    color: #dd4b39;
}

/* ==========================================================================
   6. Author profile
   ========================================================================== */

.post-head.main-header {
    height: 40vh;
    min-height: 180px;
}
.no-cover.post-head.main-header {
    height: 85px;
    min-height: 0;
    margin-bottom: 0;
    background: transparent;
}
.tag-head.main-header {
    height: 40vh;
    min-height: 180px;
}
.author-head.main-header {
    height: 40vh;
    min-height: 180px;
}
.no-cover.author-head.main-header {
    height: 10vh;
    min-height: 100px;
    background: transparent;
}
.author-profile {
    padding: 0 15px 5rem 15px;
    border-bottom: var(--border-color) 1px solid;
    text-align: center;
}

/* Add a little circle in the middle of the border-bottom */

.author-profile:after {
    display: block;
    content: "";
    width: 7px;
    height: 7px;
    border: #E7EEF2 1px solid;
    position: absolute;
    bottom: -5px;
    left: 50%;
    margin-left: -5px;
    background: #FFF;
    border-radius: 100%;
    box-shadow: #FFF 0 0 0 5px;
}
.author-image {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    position: absolute;
    top: -40px;
    left: 50%;
    margin-left: -40px;
    width: 80px;
    height: 80px;
    border-radius: 100%;
    overflow: hidden;
    padding: 6px;
    background: #fff;
    z-index: 2;
    box-shadow: #E7EEF2 0 0 0 1px;
}
.author-image .img {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    border-radius: 100%;
    -webkit-transition: .8s;
    -moz-transition: .8s;
    -o-transition: .8s;
    -ms-transition: .8s;
}
.author-image .img:hover {
    transform: rotate(720deg);
    -webkit-transform: rotate(720deg);
    -moz-transform: rotate(720deg);
    -o-transform: rotate(720deg);
    -ms-transform: rotate(720deg);
    border-radius: 35px !important;
    filter: alpha(opacity=100) !important;
    opacity: 1 !important;
}
.author-profile .author-image {
    position: relative;
    left: auto;
    top: auto;
    width: 120px;
    height: 120px;
    padding: 3px;
    margin: -100px auto 0 auto;
    box-shadow: none;
}
.author-title {
    margin: 1.5rem 0 1rem;
}
.author-bio {
    font-size: 1.8rem;
    line-height: 1.5em;
    font-weight: 200;
    color: #50585D;
    letter-spacing: 0;
    text-indent: 0;
}

/* Location, website, and link */

.author-profile .author-meta {
    margin: 2rem 0;
    letter-spacing: 0.01rem;
    font-size: 1.7rem;
}
.author-meta span {
    display: block;
    margin: 0 2rem 1rem 0;
    word-wrap: break-word;
}
.author-meta a {
    text-decoration: none;
}


/* ==========================================================================
   7. Read More - Next/Prev Post Links
   ========================================================================== */

.read-next {
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    margin-top: 10rem;
}
.read-next-story {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    min-width: 50%;
    text-decoration: none;
    position: relative;
    text-align: center;
    color: #fff;
    background: #222 no-repeat center center;
    background-size: cover;
    overflow: hidden;
}
.read-next-story:hover:before {
    background: rgba(0, 0, 0, 0.8);
    transition: all 0.2s ease;
}
.read-next-story:hover .post:before {
    color: #222;
    background: #fff;
    transition: all 0.2s ease;
}
.read-next-story:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: all 0.5s ease;
}
.read-next-story .post {
    padding-top: 6rem;
    padding-bottom: 6rem;
}
.read-next-story .post:before {
    content: "Read This Next";
    padding: 4px 10px 5px;
    text-transform: uppercase;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    border: rgba(255, 255, 255, 0.5) 1px solid;
    border-radius: 4px;
    transition: all 0.5s ease;
}
.read-next-story.prev .post:before {
    content: "You Might Enjoy";
}
.read-next-story h2 {
    margin-top: 1rem;
    color: #fff;
}
.read-next-story p {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
}

/* Special styles for posts with no cover images */

.read-next-story.no-cover {
    background: #f5f8fa;
}
.read-next-story.no-cover:before {
    display: none;
}
.read-next-story.no-cover .post:before {
    color: rgba(0, 0, 0, 0.5);
    border-color: rgba(0, 0, 0, 0.2);
}
.read-next-story.no-cover h2 {
    color: rgba(0, 0, 0, 0.8);
}
.read-next-story.no-cover p {
    color: rgba(0, 0, 0, 0.5);
}

/* if there are two posts without covers, put a border between them */

.read-next-story.no-cover + .read-next-story.no-cover {
    border-left: rgba(0, 0, 100, 0.04) 1px solid;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Correctly position site-footer when next to the .read-next container */

.read-next + .site-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
}

/* ==========================================================================
   8. Third Party Elements - Embeds from other services
   ========================================================================== */


/* Github */

.gist table {
    margin: 0;
    font-size: 1.4rem;
    text-rendering: auto;
}
.gist td {
    line-height: 1.4;
}
.gist .line-number {
    min-width: 25px;
}

/* Pastebin */

.content .embedPastebin {
    margin-bottom: 1.75em;
}

/* ==========================================================================
   9. Pagination - Tools to let you flick between pages
   ========================================================================== */


/* The main wrapper for our pagination links */

.pagination {
    position: relative;
    width: 100%;
    max-width: 750px;
    margin: 0 auto 2em;
    font-size: 1.3rem;
    color: var(--post-meta);
    text-align: center;
}
.pagination a {
    color: var(--post-meta);
    transition: all 0.2s ease;
    text-decoration: none !important;
}

/* Push the previous/next links out to the left/right */

.older-posts, .newer-posts {
    position: absolute;
    display: inline-block;
    padding: 0 15px;
    border: #bfc8cd 1px solid;
    text-decoration: none;
    border-radius: 4px;
    transition: border 0.3s ease;
}
.older-posts {
    right: 20px;
}
.page-number {
    display: inline-block;
    padding: 2px 0;
    min-width: 100px;
}
.newer-posts {
    left: 20px;
}
.older-posts:hover, .newer-posts:hover {
    color: #fff;
    border-color: var(--primary-color);
    background-color: var(--primary-color);
}
.extra-pagination {
    display: none;
    border-bottom: var(--border-color) 1px solid;
}
.extra-pagination:after {
    display: block;
    content: "";
    width: 7px;
    height: 7px;
    border: #E7EEF2 1px solid;
    position: absolute;
    bottom: -5px;
    left: 50%;
    margin-left: -5px;
    background: #FFF;
    border-radius: 100%;
    box-shadow: #FFF 0 0 0 5px;
}
.extra-pagination .pagination {
    width: auto;
}

/* ==========================================================================
   10. Footer - The bottom of every page
   ========================================================================== */

.site-footer {
    margin: 1.25em auto 0;
    padding: 1rem 15px;
    line-height: 1.75em;
    color: #BBC7CC;
    background: var(--font-color);
    border-top: 4px solid var(--primary-color);
}
.site-footer a {
    color: #BBC7CC;
    text-decoration: none;
    font-weight: bold;
}
.site-footer a:hover {
    color: var(--primary-color);
}
.footer-meta {
    margin: 0 auto !important;
}
.poweredby {
    display: block;
    float: right;
    text-align: right;
}
.copyright {
    display: block;
    float: left;
}

/* ==========================================================================
   11. Layout
   ========================================================================== */

.container {
    min-width: 320px;
    padding: 0px !important;
    margin: 0px auto;
    max-width: 1152px;
    text-align: left;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    z-index: 0;
}
.content {
    background: #FFF;
    display: block;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.sidebar {
    display: block;
    padding-left: 20px !important;
    padding-right: 0px !important;
}

/* ==========================================================================
   12. Widget
   ========================================================================== */

.widget {
    clear: both;
    margin-bottom: 1.25em;
    background-color: #FFF;
}
.widget-title {
    padding: 10px 10px 0px 0px;
    font-size: 15px;
    border-bottom: 2px solid #EAEAEA;
    font-weight: normal;
    position: relative;
    margin: 0px 10px;
    line-height: 20px;
    color: var(--font-color);
    font-weight: 700;
}
.widget-title-meta {
    display: inline-block;
    height: 30px;
    border-bottom: 2px solid var(--primary-light-hover);
    margin-bottom: -2px;
}

/* Tag cloud style */

.tag-cloud-content {
    padding: 12px;
    font-size: 14px;
}
.tag-cloud-content a {
    color: var(--primary-light-hover);
    background-color: rgba(1, 126, 102, .08);
    display: inline-block;
    margin: 0 5px 5px 0;
    padding: 2px 6px;
    line-height: 22px;
    text-decoration: none !important;
}
.tag-cloud-content a:hover {
    color: #fff;
    background-color: var(--primary-light-hover);
}
.tag-meta.no-cover {
    background: var(--font-color);
}
.tag-meta .tag-meta-content {
    padding: 26px 20px;
    text-align: center;
}

/* ==========================================================================
   13. Post Nav
   ========================================================================== */

.post-nav {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
    padding: 15px 20px;
    font-size: 14px;
    color: #BBB;
}
.post-nav span {
    float: left;
    position: relative
}
.post-nav span.post-nav-next {
    float: right;
    text-align: right
}
.post-nav a {
    color: var(--primary-color);
}
.post-nav a:hover {
    color: var(--primary-dark-hover);
}

/* ==========================================================================
   14. BackTop Button
   ========================================================================== */

.back-top {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 999;
    width: 56px;
    display: none;
}
.back-top:focus,
.back-top .btn:focus,
.back-top .btn:active:focus {
    outline: none;
}
.back-top .btn {
    margin-top: 2px;
    height: 56px;
    display: block;
    padding: 0;
    width: 100%;
    opacity: .4;
}
.btn-inverse {
    background: #666;
    color: #FFF !important;
}
.btn-minty {
    background: var(--primary-color);
}
.back-top .btn:hover {
    background: var(--primary-color);
    opacity: .9;
    color: #FFF !important;
}
.back-top .btn:active {
    opacity: .6;
}
.back-top .btn i {
    position: relative;
    top: -1px;
}

/* ==========================================================================
   15. TOC
   ========================================================================== */

.widget-toc-fixed {
    top: 0px;
    width: 364px;
    position: fixed;
    z-index: 2;
}
.toc {
    padding-bottom: 10px;
    overflow-y: auto;
}
.toc a {
    font-size: 14px;
    color: var(--primary-color);
}
.toc a:hover {
    color: var(--primary-dark-hover);
}
.toc > li.active > a, .toc > li li.active > a {
    color: var(--font-color);
    font-weight: 600;
}

/* ==========================================================================
   16. Profile
   ========================================================================== */

.widget-profile > a {
    position: relative;
    left: 120px;
}
.widget-profile-header {
    text-align: center;
    margin: -50px auto auto;
}
.widget-profile-header > a > img {
    width: 10rem;
    border: 5px solid #fff;
    border-radius: 100%;
    background: #fff;
    background-size: cover;
    background-position: center center;
    -webkit-transition: .8s;
    -moz-transition: .8s;
    -o-transition: .8s;
    -ms-transition: .8s;
}
/* .widget-profile-header > a > img:hover {
    transform: rotate(720deg);
    -webkit-transform: rotate(720deg);
    -moz-transform: rotate(720deg);
    -o-transform: rotate(720deg);
    -ms-transform: rotate(720deg);
    filter: alpha(opacity=100) !important;
    opacity: 1 !important;
} */
.widget-profile-title {
    text-align: center;
    display: inherit !important;
    margin: 20px 80px !important;
    font-size: 18px !important;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
}
.widget-profile-cover.overlay, .widget-profile-cover.no-cover {
    background: var(--font-color);
    background-position: center center;
    height: 100px;
}
.widget-profile-desc {
    padding: 0px 20px;
    text-align: center;
    text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
}
.widget-profile-desc a {
    color: var(--primary-color);
}
.widget-profile-desc a:hover {
    color: var(--primary-dark-hover);
}
.widget-profile hr {
    margin: 20px;
}

/* label style */

.label.arrowed, .label.arrowed-in {
    position: relative;
    z-index: 1;
}
.label.arrowed:before, .label.arrowed-in:before {
    display: inline-block;
    content: "";
    position: absolute;
    top: 0;
    z-index: -1;
    border: 1px solid transparent;
    border-right-color: #abbac3;
    -moz-border-right-colors: #abbac3;
}
.label.arrowed-in:before {
    border-color: #abbac3;
    border-left-color: transparent;
    -moz-border-left-colors: none;
}
.label.arrowed-right, .label.arrowed-in-right {
    position: relative;
    z-index: 1;
}
.label.arrowed-right:after, .label.arrowed-in-right:after {
    display: inline-block;
    content: "";
    position: absolute;
    top: 0;
    z-index: -1;
    border: 1px solid transparent;
    border-left-color: #abbac3;
    -moz-border-left-colors: #abbac3;
}
.label.arrowed-in-right:after {
    border-color: #abbac3;
    border-right-color: transparent;
    -moz-border-right-colors: none;
}
.label-minty {
    background-color: var(--primary-color);
}
.label-minty.arrowed:before {
    border-right-color: var(--primary-color);
    -moz-border-right-colors: var(--primary-color);
}
.label-minty.arrowed-in:before {
    border-color: var(--primary-color) var(--primary-color) var(--primary-color) transparent;
    -moz-border-right-colors: var(--primary-color);
}
.label-minty.arrowed-right:after {
    border-left-color: var(--primary-color);
    -moz-border-left-colors: var(--primary-color);
}
.label-minty.arrowed-in-right:after {
    border-color: var(--primary-color) transparent var(--primary-color) var(--primary-color);
    -moz-border-left-colors: var(--primary-color);
}
.label {
    font-size: 12px;
    line-height: 1.15;
    height: 20px;
}
.label.arrowed {
    margin-left: 5px;
}
.label.arrowed:before {
    left: -10px;
    border-width: 10px 5px;
}
.label.arrowed-in {
    margin-left: 5px;
}
.label.arrowed-in:before {
    left: -5px;
    border-width: 10px 5px;
}
.label.arrowed-right {
    margin-right: 5px;
}
.label.arrowed-right:after {
    right: -10px;
    border-width: 10px 5px;
}
.label.arrowed-in-right {
    margin-right: 5px;
}
.label.arrowed-in-right:after {
    right: -5px;
    border-width: 10px 5px;
}
.label-xlg {
    font-size: 14px;
    line-height: 1;
    height: 28px;
}
.label-xlg.arrowed {
    margin-left: 7px;
}
.label-xlg.arrowed:before {
    left: -14px;
    border-width: 14px 7px;
}
.label-xlg.arrowed-in {
    margin-left: 7px;
}
.label-xlg.arrowed-in:before {
    left: -7px;
    border-width: 14px 7px;
}
.label-xlg.arrowed-right {
    margin-right: 7px;
}
.label-xlg.arrowed-right:after {
    right: -14px;
    border-width: 14px 7px;
}
.label-xlg.arrowed-in-right {
    margin-right: 7px;
}
.label-xlg.arrowed-in-right:after {
    right: -7px;
    border-width: 14px 7px;
}

/* Social Style */

.navigation.social {
    padding-bottom: 0.8em;
}
.navigation.social > ul {
    display: flex;
    justify-content: space-evenly;
    margin: 0;
    padding: 0;
    list-style: none;
}
.social > li > a {
    color: #8F8F8F;
}
.social .social-weibo:hover {
    color: #D9534F;
}
.social .social-github:hover {
    color: #4A4A4A;
}
.social .social-music:hover {
    color: #FF434F;
}
.social .social-mail:hover {
    color: #428BCA;
}
.social .social-rss:hover {
    color: #FF7500;
}
.fa-xlg {
    font-size: 1.6em !important;
}
.navigation.site-stat {
    display: flex;
    justify-content: space-around;
    padding: 0px 1.25em;
}

/* Site Stat Style */

.site-stat-item {
    width: 100%;
}
.site-stat-item:not(:last-child) {
    border-right: 1px solid var(--border-color);
}
.site-stat-item-count,
.site-stat-item-name {
    display: block;
    text-align: center;
}
.site-stat-item-name:hover {
    color: var(--primary-dark-hover);
}

/* ==========================================================================
   17. Media Queries - Smaller than 900px
   ========================================================================== */

@media only screen and (max-width: 900px) {
    blockquote {
        margin-left: 0;
    }
    .main-header {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        height: 64px;
    }
    .main-nav {
        height: 64px;
    }
    .main-nav__brand {
        padding: 15px 0;
    }
    .main-nav__brand a {
        padding: 12px 15px;
    }
    .main-nav__menu > ul {
        height: 64px;
    }
    .main-nav__menu > ul > li {
        padding: 14px 0;
    }
    .scroll-down, .home-template .main-header:after {
        display: none;
    }
    .blog-logo img {
        padding: 4px 0;
    }
    .page-title {
        font-size: 3rem;
        letter-spacing: -1px;
    }
    .page-description {
        font-size: 1.8rem;
        line-height: 1.5em;
    }
    .post {
        font-size: 0.95em;
    }
    body:not(.post-template) .post-title {
        font-size: 3.2rem;
    }
    hr {
        margin: 2.4em 0;
    }
    ol, ul {
        padding-left: 2em;
    }
    h1 {
        font-size: 4.5rem;
        text-indent: -2px;
    }
    h2 {
        font-size: 3.6rem;
    }
    h3 {
        font-size: 3.1rem;
    }
    h4 {
        font-size: 2.5rem;
    }
    h5 {
        font-size: 2.2rem;
    }
    h6 {
        font-size: 1.8rem;
    }
    .author-profile {
        padding-bottom: 4rem;
    }
    .author-profile .author-bio {
        font-size: 1.6rem;
    }
    .author-meta span {
        display: block;
        margin: 1.5rem 0;
    }
    .author-profile .author-meta span {
        font-size: 1.6rem;
    }
    .post-head.main-header {
        height: 45vh;
    }
    .tag-head.main-header, .author-head.main-header {
        height: 30vh;
    }
    .no-cover.post-head.main-header {
        height: 55px;
        padding: 0;
    }
    .no-cover.author-head.main-header {
        padding: 0;
    }
    .read-next {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-top: 4rem;
    }
    .read-next p {
        display: none;
    }
    .read-next-story.no-cover + .read-next-story.no-cover {
        border-top: rgba(0, 0, 100, 0.06) 1px solid;
        border-left: none;
    }
    .sidebar {
        display: none !important;
    }
    .tag-meta .tag-meta-content {
        padding: 8px 20px;
        text-align: center;
    }
    .search-toggle {
        display: none;
        padding: 1.25em 1em 1.25em .5em !important;
    }
    .site-search {
        top: 64px !important;
        padding: 24px 64px !important;
    }
}

/* ==========================================================================
   18. Media Queries - Smaller than 1024px for (tablet - landscape)
   ========================================================================== */

@media only screen and (max-width: 1024px) {
    .site-stat-item {
        padding: 0 15px;
    }
    .navigation > ul > li {
        padding: 0;
    }
    .main-nav__menu {
        display: flex;
        justify-content: flex-end;
        flex: 1;
    }
    .main-nav a {
        padding: 2rem 1rem;
    }
}

@media only screen and (max-width: 1472px) {
    .widget-toc-fixed {
        width: 300px;
    }

    .post-content .kg-image-card img {
        max-width: 640px !important;
    }

    .main-nav a {
        padding: 1.5em .4em;
    }

    .main-nav a.search-toggle {
        display: none;
        padding: 1.75em 1em 1.75em .5em;
    }
}

/* ==========================================================================
   19. Media Queries - Smaller than 500px
   ========================================================================== */

@media only screen and (max-width: 500px) {
    .main-header {
        height: 96px;
        max-height: 96px;
        margin-bottom: 0px;
    }
    .main-header .main-nav__menu {
        display: flex;
        justify-content: space-around;
    }
    .main-nav__menu > ul > li > a:hover {
        color: #fff;
    }
    .main-nav__menu > ul > li > a:hover .nav_menuitem-name::before {
        transform: scale3d(1, 1, 1);
    }
    .main-nav__menu > ul > li > a .nav_menuitem-name {
        position: relative;
        font-weight: bold;
        line-height: 1.4;
        transition: color 0.5s;
        transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    }
    .main-nav__menu > ul > li > a .nav_menuitem-name::before {
        content: '';
        position: absolute;
        z-index: -1;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50%;
        background: var(--font-color);
        opacity: 0.5;
        transform: scale3d(0, 1, 1);
        transform-origin: 0% 50%;
        transition: transform 0.5s;
        transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    }
    .no-cover.main-header {
        height: 30vh;
    }
    .main-nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 96px;
        padding: 5px;
        margin-bottom: 2rem;
        background: var(--primary-color);
        opacity: .9;
    }
    .menu-button {
        padding: 0 5px;
        border-radius: 0;
        border-width: 0;
        color: #2e2e2e;
        background: transparent;
    }
    .menu-button:hover {
        color: #2e2e2e;
        border-color: transparent;
        background: none;
    }
    .main-nav.overlay a:hover {
        color: #fff;
        border-color: transparent;
        background: transparent;
    }
    .no-cover .main-nav.overlay {
        background: none;
    }
    .no-cover .main-nav.overlay .menu-button {
        border: none;
    }
    .main-nav.overlay .menu-button {
        border-color: transparent;
    }
    .main-nav__brand {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 1.6rem 0 0;
    }
    .main-nav__brand a {
        font-size: 20px;
        font-weight: 500;
        padding: 0 !important;
    }
    .nav-title {
        top: 25px;
    }
    .nav-close {
        position: absolute;
        top: 18px;
    }
    .main-nav__menu > ul {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 48px;
        margin: 0;
    }
    .main-nav__menu > ul > li {
        padding: 0;
        margin: 0;
    }
    .main-nav__menu ul a {
        color: #fff;
        padding: 0 .66rem;
        font-size: 14px;
        font-weight: 500;
    }
    .main-nav__menu > .btn.btn-link {
        display: block;
        font-size: 20px;
        color: #fff;
    }
    .main-nav__menu > .btn.btn-link:focus {
        outline: none;
    }
    .inner, .pagination {
        width: auto;
        padding: 1.2rem 0;
        margin: 0;
        display: block !important;
    }
    .content {
        margin: 1rem;
    }
    .post {
        width: auto;
        margin: 1rem 1.33rem;
        padding: 1rem 0;
        line-height: 1.65em;
    }
    .archives {
        width: 90%;
        margin: 0 auto;
        padding: 2rem 0;
    }
    .post-meta-tags,
    .post-meta-date {
        display: none;
    }
    .post-meta-reading_time {
        display: inline-block;
    }
    .post-template .post-header {
        margin-bottom: 2rem;
    }
    hr {
        margin: 1.75em 0;
    }
    p, ul, ol, dl {
        font-size: 0.95em;
        margin: 0 0 2.5rem 0;
    }
    .page-title {
        font-size: 1.8rem;
    }
    .post-excerpt p {
        font-size: 0.85em;
    }
    .page-description {
        font-size: 1.6rem;
    }
    h1, h2, h3, h4, h5, h6 {
        margin: 0.3em 0 !important;
    }
    h1 {
        font-size: 2.7rem !important;
        letter-spacing: -1px;
    }
    h2 {
        font-size: 2.4rem;
        letter-spacing: 0;
    }
    h3 {
        font-size: 2.1rem;
    }
    h4 {
        font-size: 1.9rem;
    }
    h5 {
        font-size: 1.8rem;
    }
    h6 {
        font-size: 1.8rem;
    }
    body:not(.post-template) .post-title {
        font-size: 2.5rem;
    }
    .post-template .site-footer {
        margin-top: 0;
    }
    .post-content img {
        padding: 0;
        width: calc(100% + 32px);
        /* expand with to image + margins */
        min-width: 0;
        max-width: 112%;
        /* fallback when calc doesn't work */
    }
    .post-meta {
        font-size: 1.3rem;
        margin-top: 1rem;
    }
    .post-footer .author {
        margin: 0 0 2rem 0;
        padding: 0 0 1.6rem 0;
        border-bottom: var(--border-color) 1px dashed;
    }
    .post-footer .share {
        position: static;
        width: auto;
    }
    .post-footer .share a {
        margin: 1.4rem 0.8rem 0 0.8rem;
    }
    .author-meta li {
        float: none;
        margin: 0;
        line-height: 1.75em;
    }
    .author-meta li:before {
        display: none;
    }
    .author-info-social a {
        padding: 2px 4px;
        font-size: 12px;
        margin-right: 4px;
    }
    .older-posts, .newer-posts {
        position: static;
        margin: 10px 0;
    }
    .page-number {
        display: block;
    }
    .author-profile {
        padding-bottom: 2rem;
    }
    .post-head.main-header {
        height: 30vh;
    }
    .tag-head.main-header, .author-head.main-header {
        height: 20vh;
    }
    .author-profile .author-image {
        margin-top: -70px;
    }
    .author-profile .author-meta span {
        font-size: 1.4rem;
    }
    .read-next {
        margin-top: 2rem;
        margin-bottom: -37px;
    }
    .read-next .post {
        width: 100%;
    }
    .footer-meta.container {
        text-align: center;
        margin: 0 auto;
        font-size: 12px;
        width: auto;
        min-width: unset;
    }
    .poweredby {
        display: block;
        text-align: center;
        float: none;
    }
    .copyright {
        display: block;
        text-align: center;
        float: none;
    }
    .featured h1 {
        border-left: 4px solid;
        padding-left: 12px;
        margin-left: -16px !important;
    }
    .post-content h4 {
        border-left: 4px solid;
        padding-left: 12px;
        margin-left: -16px !important;
    }
    .search-toggle {
        display: none !important;
    }
}

/* ==========================================================================
   20. Animations
   ========================================================================== */


/* Used to fade in title/desc on the home page */

@-webkit-keyframes fade-in-down {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes fade-in-down {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

/* Used to bounce .scroll-down on home page */

@-webkit-keyframes bounce {
    0%, 10%, 25%, 40%, 50% {
        -webkit-transform: translateY(0) rotate(-90deg);
        transform: translateY(0) rotate(-90deg);
    }
    20% {
        -webkit-transform: translateY(-10px) rotate(-90deg);
        transform: translateY(-10px) rotate(-90deg);
    }
    30% {
        -webkit-transform: translateY(-5px) rotate(-90deg);
        transform: translateY(-5px) rotate(-90deg);
    }
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0) rotate(-90deg);
        transform: translateY(0) rotate(-90deg);
    }
    40% {
        -webkit-transform: translateY(-10px) rotate(-90deg);
        transform: translateY(-10px) rotate(-90deg);
    }
    60% {
        -webkit-transform: translateY(-5px) rotate(-90deg);
        transform: translateY(-5px) rotate(-90deg);
    }
}

@keyframes mPanelIn {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,-64px,0);
        transform: translate3d(0,-64px,0);
    }
}


/* rewrite bootstrap container */

@media (min-width:500px) {
    .container {
        width: auto;
    }
}
@media (min-width:768px) {
    .container {
        width: auto;
    }
}
@media (min-width:1088px) {
    .container {
        width: 960px !important;
    }
}
@media (min-width:1280px) {
    .container {
        width: 960px !important;
    }
}
@media (min-width:1472px) {
    .container {
        width: 1152px !important;
    }
}

/* ==========================================================================
  21. Static Page
  ========================================================================== */

.page-template .page,
.page-template .comments {
    max-width: 1152px;
}
.page-template .post {
    border-bottom: none;
}
.page-template .post::after {
    display: none;
}

/* ==========================================================================
  22. Highlight Code
  ========================================================================== */

pre {
    position: relative;
    margin-bottom: 1.5em;
    border-radius: 4px;
    overflow: hidden;
}
code.has-numbering {
    display: block;
    margin-left: 32px;
    padding: 0.5em;
    white-space: pre;
    word-wrap: normal;
}
code.hljs {
    padding: 1.2em 2em;
}

pre .line-numbering {
    position: absolute;
    top: 0;
    width: 3.5rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
    padding: 1.25rem 0;
    line-height: 1.4;
    z-index: 10;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-evenly;
}

pre .line-numbering.light {
    color: currentColor;
}

pre code.has-numbering::after {
    content: '';
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 3.5rem;
    height: 100%;
    border-radius: 6px 0 0 6px;
    border-right: 1px solid rgba(0, 0, 0, 0.66);
    background-color: var(--linenumber-dark-bg);
}

pre code.has-numbering.light::after {
    background-color: var(--linenumber-light-bg);
    border-right: currentColor;
}

/* ==========================================================================
  23. Archives
  ========================================================================== */

.archives {
    width: 90%;
    margin: 40px auto;
}
.archives .archives-content::before,
.archives .archives-content::after {
    content: " ";
    position: absolute;
}
.archives .archives-content::after {
    top: 60px;
    bottom: 52px;
    width: 4px;
    margin-left: 2px;
    background: #f5f5f5;
    z-index: 1;
}
.archives .archives-top {
    position: absolute;
    top: 50px;
    width: 10px;
    height: 10px;
    margin-left: -1px;
    background: #555;
    opacity: 0.5;
    border: 1px solid #fff;
    border-radius: 50%;
}
.archives .archives-total {
    position: relative;
    top: 4px;
    left: 20px;
}
.archives .archives-item {
    position: relative;
    margin: 30px 0;
    overflow: hidden;
    z-index: 2;
}
.archives .archives-year {
    font-weight: bold;
    margin: 10px 20px;
}
.archives .archives-year::before {
    content: " ";
    position: absolute;
    left: 0;
    width: 10px;
    height: 10px;
    margin-left: -1px;
    margin-top: 8px;
    background: #555;
    opacity: 0.5;
    border: 1px solid #fff;
    border-radius: 50%;
}
.archives-info {
    list-style: none;
    font-size: 14px;
    line-height: 20px;
    position: relative;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
    transition-property: border;
}
.archives-info .archives-info-meta {
    margin-left: 20px;
    padding: 4px 0;
    overflow: hidden;
    border-bottom: 1px dashed #ccc;
}
.archives-info .archives-info-meta::before {
    content: " ";
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    background: #bbb;
    border-radius: 50%;
    border: 1px solid #fff;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
    transition-property: background;
}
.archives-info .archives-info-meta:hover {
    border-bottom: 1px dashed var(--font-color);
}
.archives-info .archives-info-meta:hover::before {
    background: var(--primary-color);
}
.archives-info .archives-info-meta a {
    color: var(--primary-color);
    text-decoration: none;
}
.archives-info time {
    margin-right: 4px;
    color: #999;
    display: inline-block;
}

/* ==========================================================================
  24. Fancybox Setting
  ========================================================================== */

.fancybox-is-open .fancybox-bg {
    opacity: 0.33 !important;
    background: var(--primary-color);
}

/* ==========================================================================
  25. Koenig Styles in Ghost 2.x
  ========================================================================== */

.post-content .kg-image-card {
    margin: .8em 0 2em;
}
/* Keep images centered, and allow images wider than the main
text column to break out. */

.post-content .kg-image-card img {
    display: block;
    max-width: 100%;
    height: auto;
    /* Centers an image by (1) pushing its left edge to the
       center of its container and (2) shifting the entire image
       in the opposite direction by half its own width.
       Works for images that are larger than their containers. */
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    /* for Safari and iOS */
    -ms-transform: translateX(-50%);
    /* for IE9 */
    transform: translateX(-50%);

}
.post-content .kg-image-card.kg-width-wide img {
    max-width: 768px;
}

.post-content .kg-image-card.kg-width-full img {
    max-width: 768px;
}

.kg-gallery-container {
    display: flex;
    flex-direction: column;
    max-width: 768px;
    width: 100vw;
}

.kg-gallery-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.kg-gallery-image img {
    display: block;
    margin: 0;
    width: 100%;
    height: 100%;
}

/* ==========================================================================
  26. Search
  ========================================================================== */

body.is-search {
    position: fixed;
    overflow: hidden;
}

.main-nav a.search-toggle {
    display: none;
    padding: 1.75em 1em 1.75em .5em;
}

.search-toggle:focus {
    outline: none;
}

.search-toggle .search-icon {
    width: 20px;
    height: 20px;
    color: var(--lightgrey);
    transition: all 0.6s cubic-bezier(.25, 1.7, .35, .8);
}

.search-toggle:hover .search-icon {
    color: var(--primary-color);
}

.site-search {
    position: fixed;
    background-color: #fff;
    top: 80px;
    right: 0;
    bottom: 100%;
    left: 0;
    height: 100%;
    overflow: hidden;
    padding: 0 10px;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    visibility: visible;
    z-index: 10;
}

.site-search.is-hidden {
    visibility: hidden;
    height: 0;
}

.site-search .search-form {
    position: relative;
    width: 100%;
    margin: 40px auto 0;
}

.site-search .input-prefix {
    position: absolute;
    left: 0;
    top: 0;
    padding: 15px;
    color: var(--lightgrey);
    opacity: .66;
}

.site-search .search-field {
    display: flex;
    position: relative;
    width: 100%;
    background: transparent;
    box-shadow: 0 1px 0 0 rgba(85, 95, 110, .2);
    transition: box-shadow .4s ease, background .4s ease, -webkit-box-shadow .4s ease;
    border: 1px solid var(--border-color);
    border-radius: 0;
    font-size: 24px;
    font-weight: lighter;
    line-height: 45px;
    margin: 0 auto;
    padding: 8px 20px 8px 60px;
    outline: 0;
    cursor: text;
}

.site-search .search-field:focus {
    outline: 0;
    box-shadow: 0 0 0 1px var(--primary-color);
}

.site-search .search-list {
    display: flex;
    justify-content: center;
    overflow-y: auto;
    margin: 1px auto;
    max-height: 330px;
    border-bottom: 1px solid var(--border-color);
}

.site-search .search-results {
    width: 100%;
}

.site-search .search-results a {
    text-decoration: none;
    display: block;
    padding: 20px;
    color: var(--primary-color);
    background: #fff;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}

.site-search .search-results a + a {
    border-top: 1px solid var(--border-color);
}

.site-search .search-results a:hover {
    color: var(--primary-dark-hover);
}

/* ==========================================================================
  27. Bookmark card
  ========================================================================== */

.kg-bookmark-card {
    width: 100%;
    position: relative;
    margin: 0 0 1.5em;
    border: 1px solid #e5eff5;
    border-radius: 5px;
    box-shadow: 0 0 1px rgba(0, 0, 0, .06),
    0 2px 6px rgba(0, 0, 0, .03);
    overflow: hidden;
}

.kg-bookmark-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    color: currentColor;
    font-family: inherit;
    text-decoration: none;
}

.kg-bookmark-container:hover {
    text-decoration: none;
}

.kg-bookmark-content {
    flex-basis: 0;
    flex-grow: 999;
    padding: 20px;
    order: 1;
    color: var(--font-color);
}

.kg-bookmark-title {
    font-weight: 600;
}

.kg-bookmark-metadata,
.kg-bookmark-description {
    margin-top: .5em;
}

.kg-bookmark-metadata {
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kg-bookmark-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.kg-bookmark-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: text-bottom;
    margin-right: .5em;
    margin-bottom: .05em;
}

.kg-bookmark-thumbnail {
    display: flex;
    flex-basis: 24rem;
    flex-grow: 1;
}

.kg-bookmark-thumbnail img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
    object-fit: cover;
}

.kg-bookmark-author {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.kg-bookmark-publisher::before {
    content: "•";
    margin: 0 .5em;
}

.kg-bookmark-card figcaption {
    display: flex;
    justify-content: center;
    padding: 8px 0;
    border-top: 1px solid #e5eff5;
}

/* ==========================================================================
   End of file. Animations should be the last thing here. Do not add stuff
   below this point, or it will probably fuck everything up.
   ========================================================================== */