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


/*

    0.  Normalize
    1.  Icons
    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

*/


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

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display: block;
}
audio, canvas, video {
    display: inline-block;
}
audio:not([controls]) {
    display: none;
    height: 0;
}
[hidden], template {
    display: none;
}
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
body {
    margin: 0;
}
a {
    background: transparent;
    text-decoration: none;
}
a:focus {
    outline: thin dotted;
}
a:active, a:hover {
    outline: 0;
}
abbr[title] {
    border-bottom: 1px dotted;
}
b, strong {
    font-weight: 700;
}
dfn {
    font-style: italic;
}
hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}
mark {
    background: #FF0;
    color: #000;
}
code, kbd, pre, samp {
    font-family: Monaco, monospace, sans-serif !important;
    font-size: 1em;
}
pre {
    white-space: pre-wrap;
}
q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}
small {
    font-size: 80%;
}
sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}
img {
    border: 0;
}
svg:not(:root) {
    overflow: hidden;
}
figure {
    margin: 0;
}
fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}
legend {
    border: 0;
    padding: 0;
}
button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
}
button, input {
    line-height: normal;
}
button, select {
    text-transform: none;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}
button[disabled], html input[disabled] {
    cursor: default;
}
input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}
input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0;
}
textarea {
    overflow: auto;
    vertical-align: top;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* ==========================================================================
   1. Icons - Sets up the icon font and respective classes
   ========================================================================== */


/* Import the font file with the icons in it */

@font-face {
    font-family: "casper-icons";
    src: url("../fonts/casper-icons.eot?v=1");
    src: url("../fonts/casper-icons.eot?v=1#iefix") format("embedded-opentype"), url("../fonts/casper-icons.woff?v=1") format("woff"), url("../fonts/casper-icons.ttf?v=1") format("truetype"), url("../fonts/casper-icons.svg?v=1#icons") format("svg");
    font-weight: normal;
    font-style: normal;
}

/* Apply these base styles to all icons */

[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: "casper-icons", "Microsoft Yahei", "Monaco", sans-serif;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    text-decoration: none !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Each icon is created by inserting the correct character into the
   content of the :before pseudo element. Like a boss. */

.icon-ghost:before {
    content: "\f600";
}
.icon-feed:before {
    content: "\f601";
}
.icon-twitter:before {
    content: "\f602";
    font-size: 1.1em;
}
.icon-google-plus:before {
    content: "\f603";
}
.icon-facebook:before {
    content: "\f604";
}
.icon-arrow-left:before {
    content: "\f605";
}
.icon-stats:before {
    content: "\f606";
}
.icon-location:before {
    content: "\f607";
    margin-left: -3px;
    /* Tracking fix */
}
.icon-link:before {
    content: "\f608";
}
.icon-menu:before {
    content: "\f609";
}

/*
    IMPORTANT: When making any changes to the icon font, be sure to increment
    the version number by 1 in the @font-face rule. `?v=1` becomes `?v=2`
    This forces browsers to download the new font file.
*/


/* ==========================================================================
   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%;
    font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif, serif !important;
    letter-spacing: 0.01rem;
    /*font-size: 1.6em !important;*/
    /*line-height: 1.75em !important;*/
    color: #2C3F51 !important;
    -webkit-font-feature-settings: 'kern' 1;
    -moz-font-feature-settings: 'kern' 1;
    -o-font-feature-settings: 'kern' 1;
    text-rendering: geometricPrecision;
}
::-moz-selection {
    background: #16a085;
    color: #FFF;
}
::selection {
    background: #16a085;
    color: #FFF;
}
h1, h2, h3, h4, h5, h6 {
    -webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
    -moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
    -o-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
    color: #2E2E2E;
    line-height: 1.15em;
    margin: 0 0 0.4em 0;
    font-weight: bold !important;
    font-family: "Microsoft Yahei", "Monaco", sans-serif;
    text-rendering: geometricPrecision;
}
h1 {
    font-size: 3.6rem;
    text-indent: -3px;
}
h2 {
    font-size: 3rem;
    padding-bottom: 10px;
    border-bottom: 1px solid #EBF2F6;
}
h3 {
    font-size: 2.4rem;
}
h4 {
    font-size: 1.8rem;
}
h5 {
    font-size: 1.6rem !important;
}
h6 {
    font-size: 1.4rem !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.25em;
}
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: #EBF2F6 1px solid !important;
    margin: 3.2em 0;
    padding: 0;
}
blockquote {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 15px 20px !important;
    margin: 1.75em 0 1.75em -2.2em;
    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;
}
code, tt {
    padding: 1px 3px;
    font-family: Monaco, monospace, sans-serif !important;
    font-size: 0.85em;
    white-space: pre-wrap;
    background: #F7FAFB;
    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: #F5F7F9;
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
}
body.nav-opened .site-wrapper {
    overflow-x: hidden;
    -webkit-transform: translate3D(-240px, 0, 0);
    -ms-transform: translate3D(-240px, 0, 0);
    transform: translate3D(-240px, 0, 0);
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s 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: 20px;
    text-align: center;
    background: #FFF no-repeat center center;
    overflow: hidden;
    border-bottom: 1px solid #EBF2F6;
    height: 80px;
    max-height: 80px;
    z-index: 2;
}
.main-header .inner {
    width: 80%;
}
.main-header a {
    text-decoration: none !important;
}
.main-nav {
    position: relative;
    padding: 35px 40px;
    margin: 0 auto 0 !important;
    height: 80px;
}
.main-nav a {
    text-decoration: none;
    font-family: 'Microsoft Yahei', sans-serif;
    font-size: 16px;
    color: #2C3F51;
    padding: 25px 20px;
}
.main-nav a:hover {
    color: #009a61;
    border-bottom: 4px solid #009a61;
    margin-bottom: -4px;
}
.main-nav-title {
    padding: 23px 0;
    background: #009a61;
    opacity: .9;
}
.main-nav-title a {
    font-size: 30px;
    color: #fff;
    padding: 20px;
}
.main-nav-title a:hover {
    color: #fff;
}

/* Navigation */

.nav > ul {
    margin: 0 20px;
    padding: 0;
    height: 80px;
}
.nav > ul > li {
    display: inline-block;
    padding: 22px 0px;
    margin-top: 4px;
}
.nav > ul > li:hover {
    border-bottom: 4px solid #009a61;
    margin-bottom: -4px;
}

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

.page-title {
    margin: 10px 0 10px 0;
    font-size: 3rem;
    letter-spacing: -1px;
    font-weight: 700;
    font-family: "Microsoft Yahei", "Monaco", sans-serif;
    color: #fff;
}
.page-description {
    margin: 0;
    font-size: 2rem;
    line-height: 1.5em;
    font-weight: 400;
    font-family: "Microsoft Yahei", "Monaco", sans-serif;
    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: 20px;
    padding-bottom: 2rem;
    border-bottom: #EBF2F6 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 {
    font-size: 30px;
}
.post-title a {
    color: #2C3F51;
    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: 15px;
    margin-left: -20px;
}
.post-meta {
    display: block;
    margin: 1.75rem 0 0 0;
    font-family: "Microsoft Yahei", "Monaco", sans-serif;
    /*font-size: 1.5rem;*/
    line-height: 2.2rem;
    color: #9EABB3;
}
.author-thumb {
    width: 24px;
    height: 24px;
    float: left;
    margin-right: 9px;
    border-radius: 100%;
}
.post-meta a {
    color: #9EABB3;
    text-decoration: none;
}
.post-meta a:hover {
    text-decoration: underline;
}
.user-meta {
    position: relative;
    padding: 0.3rem 40px 0 100px;
    min-height: 77px;
}
.post-meta-item {
    margin-left: 8px;
    padding-left: 12px;
    border-left: #d5dbde 1px solid;
}
.post-meta-item:first-child, .post-meta-item:last-child {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
}
.post-meta-tags a {
    color: #017e66;
    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: #017e66;
}
.post-date {
    display: inline-block;
    text-transform: uppercase;
    /*font-size: 1.4rem;*/
    white-space: nowrap;
}
.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-header {
    margin-bottom: 3.4rem;
}
.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 {
    display: block;
    max-width: 720px;
    height: auto;
    padding: 0.6em 0;
    /* 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 a {
    color: #009a61;
}
.post-content a:hover {
    color: #004e31;
}
.post-content h3 {
    margin-left: -20px;
    padding-left: 15px;
    border-left: 5px solid;
}
.post-content h4 {
    margin-left: -20px;
    padding-left: 16px;
    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 6rem;
    padding: 6rem 0 0 0;
    border-top: #EBF2F6 1px solid;
}
.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: #009a61;
}
.author-meta a:hover {
    color: #004e31;
}

/* author-info after post content */

.author-info {
    border: 1px solid #EBF2F6;
    background: #FFF;
    margin-bottom: 10px;
}
.author-info .author-info-title {
    border-bottom: 1px solid #EBF2F6;
    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-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-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: #EBF2F6 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;
    font-family: "Microsoft Yahei", "Monaco", serif;
    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;
    font-family: "Microsoft Yahei", "Monaco", sans-serif;
    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: 4rem auto;
    font-family: "Microsoft Yahei", "Monaco", sans-serif;
    font-size: 1.3rem;
    color: #9EABB3;
    text-align: center;
}
.pagination a {
    color: #9EABB3;
    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: #009a61;
    background-color: #009a61;
}
.extra-pagination {
    display: none;
    border-bottom: #EBF2F6 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: 8rem auto 0;
    padding: 1rem 15px;
    font-family: "Microsoft Yahei", "Monaco", sans-serif;
    line-height: 1.75em;
    color: #BBC7CC;
    background: #34495e;
    border-top: 4px solid #009a61;
}
.site-footer a {
    color: #BBC7CC;
    text-decoration: none;
    font-weight: bold;
}
.site-footer a:hover {
    color: #009a61;
}
.footer-meta {
    margin: 0 auto;
}
.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 10px;
    max-width: 1080px;
    text-align: left;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}
.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: 10px;
    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: #2C3F51;
    font-weight: 700;
}
.widget-title-meta {
    display: inline-block;
    height: 30px;
    border-bottom: 2px solid #017e66;
    margin-bottom: -2px;
}

/* Tag cloud style */

.tag-cloud-content {
    padding: 12px;
    font-size: 14px;
}
.tag-cloud-content a {
    color: #017e66;
    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: #017e66;
}
.tag-meta.no-cover {
    background: #34495e;
}
.tag-meta .tag-meta-content {
    padding: 26px 20px;
    text-align: center;
}

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

.post-nav {
    border-top: 1px solid #EBF2F6;
    border-bottom: 1px solid #EBF2F6;
    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: #009a61;
}
.post-nav a:hover {
    color: #004e31;
}

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

.backTop {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999;
    width: 50px;
    display: none;
}
.backTop .btn {
    margin-top: 2px;
    height: 50px;
    display: block;
    padding: 0;
    width: 100%;
    opacity: .4;
}
.btn-inverse {
    background: #666;
    color: #FFF !important;
}
.btn-minty {
    background: #009a61;
}
.backTop .btn:hover {
    background: #009a61;
    opacity: .9;
    color: #FFF !important;
}
.backTop .btn i {
    position: relative;
    top: -1px;
}

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

.widget-toc-fixed {
    top: 0px;
    width: 340px;
    position: fixed;
    z-index: 2;
}
.toc {
    padding-bottom: 10px;
    overflow-y: auto;
}
.toc a {
    font-size: 14px;
    color: #009a61;
}
.toc a:hover {
    color: #004e31;
}
.toc > li.active > a, .toc > li li.active > a {
    color: #2C3F51;
    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: #34495e;
    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: #009a61;
}
.widget-profile-desc a:hover {
    color: #004e31;
}
.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: #009a61;
}
.label-minty.arrowed:before {
    border-right-color: #009a61;
    -moz-border-right-colors: #009a61;
}
.label-minty.arrowed-in:before {
    border-color: #009a61 #009a61 #009a61 transparent;
    -moz-border-right-colors: #009a61;
}
.label-minty.arrowed-right:after {
    border-left-color: #009a61;
    -moz-border-left-colors: #009a61;
}
.label-minty.arrowed-in-right:after {
    border-color: #009a61 transparent #009a61 #009a61;
    -moz-border-left-colors: #009a61;
}
.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 {
    padding: 0.3em 0.7em 0.4em;
    font-size: 14px;
    line-height: 1.3;
    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: 10px;
}
.navigation > ul {
    list-style: none;
}
.navigation > ul > li {
    display: inline-block;
    padding: 10px;
    margin: 5px;
}
.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 {
    padding: 0px 25px;
}

/* Site Stat Style */

.site-stat-item {
    display: inline-block;
    padding: 0px 28px;
}
.site-stat-item:first-child {
    border-left: none;
    border-right: 1px solid #EBF2F6;
}
.site-stat-item:last-child {
    border-left: 1px solid #EBF2F6;
    border-right: none;
}
.site-stat-item-count {
    display: block;
    text-align: center;
}
.site-stat-item-name {
    text-align: center;
}
.site-stat-item-name:hover {
    color: #004e31;
}

/* ==========================================================================
   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-title {
        padding: 15px 0;
    }
    .main-nav-title a {
        padding: 12px 15px;
    }
    .nav > ul {
        height: 64px;
    }
    .nav > 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;
    }
}

/* ==========================================================================
   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;
    }
}

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

@media only screen and (max-width: 500px) {
    .main-header {
        margin-bottom: 0px;
    }
    .no-cover.main-header {
        height: 30vh;
    }
    .main-nav {
        padding: 5px;
        margin-bottom: 2rem;
    }
    .blog-logo {
        padding: 5px;
    }
    .blog-logo img {
        height: 30px;
    }
    .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;
    }
    body.nav-opened .menu-button {
        background: none;
        border: transparent;
    }
    .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-title {
        padding: 17px 0px;
    }
    .main-nav-title a {
        font-size: 20px;
        padding: 18px;
    }
    .nav-title {
        top: 25px;
    }
    .nav-close {
        position: absolute;
        top: 18px;
    }
    .nav > ul {
        height: 64px;
        margin: 0 15px;
    }
    .nav ul a {
        padding: 25px 6px;
        font-size: 14px;
    }
    .inner, .pagination {
        width: auto;
        margin: 2rem auto;
        display: block !important;
    }
    .post {
        width: auto;
        margin-top: 1rem;
        margin-bottom: 1rem;
        margin-left: 16px;
        margin-right: 16px;
        padding-top: 1rem;
        padding-bottom: 2rem;
        line-height: 1.65em;
    }
    .post-meta-date {
        display: none;
    }
    .post-template .post-header {
        margin-bottom: 2rem;
    }
    .post-template .post-meta-date {
        display: inline-block;
    }
    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.8rem;
        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: #EBF2F6 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;
    }
    .site-footer {
        margin-top: 3rem;
    }
    .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;
        float: none;
        text-align: center;
    }
    .read-more {
        display: none;
    }
}

/* ==========================================================================
   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);
    }
}

/* rewrite bootstrap container */

@media (min-width:500px) {
    .container {
        width: auto;
    }
}
@media (min-width:768px) {
    .container {
        width: 640px !important
    }
}
@media (min-width:992px) {
    .container {
        width: 820px !important
    }
}
@media (min-width:1200px) {
    .container {
        width: 1080px !important
    }
}

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


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

.page-template .page, .page-template .comments {
    max-width: 1080px
}

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

pre {
    position: relative;
    margin-bottom: 24px;
    border-radius: 3px;
    overflow: hidden;
}
code.has-numbering {
    margin-left: 32px;
    padding: 0.5em;
    white-space: pre;
    word-wrap: normal;
    display: block;
}
.pre-numbering {
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    margin: 0;
    padding: 0.5em;
    line-height: 1.6;
    border-right: 1px solid #23241F;
    background-color: rgba(35, 36, 31, 0.9);
    text-align: right;
    font-size: 1em;
    color: #999;
}

.pre-numbering li {
    margin: 0;
    list-style: none;
}

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

.archives {
    width:90%;
    margin-left:auto;
    margin-right:auto;
}
.archives .archives-header {
    margin-top: 40px;
}
.archives .archives-content::before, .archives .archives-content::after {
    content: " ";
    position: absolute;
}
.archives .archives-content::after {
    top: 60px;
    margin-left: 2px;
    width: 4px;
    height: 100%;
    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 #2C3F51;
}
.archives-info .archives-info-meta:hover::before {
    background: #009a61;
}
.archives-info .archives-info-meta a {
    color: #009a61;
    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: rgb(0, 154, 97);
}

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