@charset "UTF-8";
@font-face {
  font-family: 'Playball';
  src: url("../fonts/Playball/Playball-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Satisfy';
  src: url("../fonts/Satisfy/Satisfy-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Athelas';
  src: url("../fonts/Athelas/Athelas-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

h1 {
  font-size: 32px;
  font-family: "Athelas", STHeiti, Microsoft Yahei, serif; }

h2 {
  font-size: 30px;
  font-family: "Athelas", STHeiti, Microsoft Yahei, serif; }

h3 {
  font-size: 26px;
  font-family: "Athelas", STHeiti, Microsoft Yahei, serif; }

h4 {
  font-size: 22px;
  font-family: "Athelas", STHeiti, Microsoft Yahei, serif; }

h5 {
  font-size: 20px;
  font-family: "Athelas", STHeiti, Microsoft Yahei, serif; }

h6 {
  font-size: 20px;
  font-family: "Athelas", STHeiti, Microsoft Yahei, serif; }

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

html,
body {
  height: 100%; }

body {
  margin: 0;
  font-size: 125%;
  font-family: "Athelas", STHeiti, Microsoft Yahei, serif;
  line-height: 1.5;
  background: #eaeaea;
  color: #34495e;
  white-space: normal;
  word-wrap: break-word; }
  body a {
    color: #34495e; }

main {
  position: relative;
  z-index: 8;
  max-width: 960px;
  margin: -170px auto 10px; }

.page {
  background: #eaeaea;
  height: 100%; }
  .page > .container {
    min-height: 100%;
    padding-bottom: 190px;
    overflow: hidden; }
  .page > footer {
    margin-top: -150px; }
  .page img {
    display: block;
    margin: 0 auto; }

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

#mobile-nav .slideout-menu {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 0;
  color: #34495e;
  background: #f6f6f6;
  width: 180px;
  display: none;
  padding-top: 100px; }
  #mobile-nav .slideout-menu a {
    text-align: center;
    width: 180px;
    font-size: 18px;
    display: block;
    text-decoration: none;
    margin: 20px 0;
    padding: 5px 0; }
  #mobile-nav .slideout-menu .mobile-intro {
    text-align: center;
    width: 150px;
    font-family: "Satisfy", cursive, LiSu, sans-serif;
    margin: 50px 10px 0;
    font-size: 18px; }
    #mobile-nav .slideout-menu .mobile-intro i {
      font-size: 30px; }

.slideout-open {
  overflow: hidden; }
  .slideout-open .slideout-panel {
    position: relative;
    z-index: 2;
    will-change: transform;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
  .slideout-open body,
  .slideout-open .slideout-panel {
    overflow: hidden; }
  .slideout-open #mobile-nav .slideout-menu {
    display: block; }

.fixed-mobile {
  transform: translateX(180px); }

.mobile-header {
  display: none;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9;
  background: #34495e;
  box-shadow: 0 2px 10px rgba(52, 73, 94, 0.9); }
  .mobile-header span, .mobile-header a {
    color: #fff; }
  .mobile-header span {
    float: left;
    margin-left: 12px;
    margin-top: 6px;
    cursor: pointer;
    padding: 0 10px; }
    .mobile-header span i {
      font-size: 22px;
      margin-top: 5px; }
  .mobile-header .mobile-logo {
    text-align: center; }
    .mobile-header .mobile-logo a {
      font-size: 28px;
      text-decoration: none;
      font-family: "Athelas", STHeiti, Microsoft Yahei, serif;
      margin-right: 42px; }

header.site-nav {
  display: none;
  width: 100%;
  min-height: 40px;
  background: rgba(0, 0, 0, 0.5);
  margin: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  border: 1px solid transparent; }
  header.site-nav .nav-content {
    max-width: 960px;
    margin: 0 auto; }
  header.site-nav .logo {
    font-family: "Athelas", STHeiti, Microsoft Yahei, serif; }
    header.site-nav .logo ul {
      padding: 0;
      margin: 0;
      float: left;
      margin: 20px; }
      header.site-nav .logo ul li {
        display: inline-block;
        list-style: none;
        margin: 0 20px;
        font-size: 22px; }
        header.site-nav .logo ul li i {
          vertical-align: text-bottom; }
    header.site-nav .logo a {
      color: #fff; }
      header.site-nav .logo a::after {
        content: none; }
  header.site-nav a {
    text-decoration: none;
    color: #fff;
    transition: color .3s;
    position: relative; }
    header.site-nav a::after {
      position: absolute;
      bottom: 0;
      left: 50%;
      right: 50%;
      content: "";
      background: #fff;
      height: 2px;
      transition: all .3s; }
    header.site-nav a:hover::after {
      left: 0;
      right: 0; }
  header.site-nav .navbar ul {
    padding: 0;
    margin: 0;
    float: right;
    margin: 20px; }
    header.site-nav .navbar ul li {
      display: inline-block;
      list-style: none;
      margin: 0 20px;
      font-size: 22px; }
      header.site-nav .navbar ul li i {
        vertical-align: text-bottom; }

.banner {
  position: relative; }
  .banner .show {
    position: relative;
    z-index: 2;
    font-size: 65px;
    height: 350px;
    background-image: url("../../images/banner.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cove;
    background-color: #34495e;
    color: #fff;
    text-align: center; }
    .banner .show div.banner-title {
      position: relative;
      top: 25%;
      margin: 0;
      font-family: "Satisfy", cursive, LiSu, sans-serif; }
      .banner .show div.banner-title .post-title {
        font-size: 42px;
        font-family: "Satisfy", cursive, LiSu, sans-serif; }
        .banner .show div.banner-title .post-title .post-tags a {
          display: inline-block;
          text-decoration: none;
          color: #fff;
          margin: 10px;
          border: 1px solid #fff;
          border-radius: 2px;
          padding: 0 10px;
          font-size: 12px;
          transition: all .3s; }
          .banner .show div.banner-title .post-title .post-tags a:before {
            content: "#";
            font-size: 16px; }
          .banner .show div.banner-title .post-title .post-tags a:hover {
            background: #fff;
            color: #34495e; }

article#post-excerpt {
  min-height: 0; }
  article#post-excerpt header {
    text-align: center;
    color: #8a8a8a; }
    article#post-excerpt header h1 {
      font-size: 30px;
      margin: 0 auto 10px; }
    article#post-excerpt header a {
      display: inline-block;
      color: #34495e;
      position: relative;
      font-weight: normal; }
      article#post-excerpt header a::after {
        position: absolute;
        bottom: 0;
        left: 51%;
        right: 51%;
        content: "";
        background: #34495e;
        height: 2px;
        transition: all .3s; }
      article#post-excerpt header a:hover::after {
        left: 0;
        right: 0; }
    article#post-excerpt header a.post-category {
      color: #8a8a8a; }
      article#post-excerpt header a.post-category::after {
        content: none; }
    article#post-excerpt header .post-meta span.post-time {
      color: #8a8a8a;
      font-size: 14px;
      margin-bottom: 30px;
      font-weight: normal; }
    article#post-excerpt header .post-meta .post-visits {
      color: #8a8a8a;
      font-size: 14px; }
  article#post-excerpt .post-tags a {
    display: inline-block;
    color: #34495e;
    background: #eee;
    margin: 10px;
    border: 1px solid #eee;
    border-radius: 2px;
    padding: 0 10px;
    font-size: 12px;
    transition: all .3s; }
    article#post-excerpt .post-tags a:before {
      content: "#";
      font-size: 16px; }
    article#post-excerpt .post-tags a:hover {
      transform: translateY(-5px); }

article.post {
  min-height: 400px;
  margin: 0 auto 15px;
  padding: 40px 20px 20px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); }
  article.post a {
    color: #0099cc;
    position: relative;
    text-decoration: none;
    font-weight: bold;
    transition: color .3s; }
    article.post a:hover {
      color: #f6695f; }
  article.post blockquote {
    font: 14px/22px helvetica, sans-serif;
    font-style: italic;
    margin: 10px 10px 10px 20px;
    padding: 10px 10px 10px 15px;
    border-left: 3px solid #ccc;
    background-color: #f1f1f1; }
  article.post .post-meta {
    text-align: center; }
    article.post .post-meta .post-time {
      font-size: 15px;
      margin-bottom: 30px;
      font-weight: bold; }
      article.post .post-meta .post-time i {
        font-weight: normal; }
    article.post .post-meta .post-category {
      color: #8a8a8a;
      font-weight: normal;
      font-size: 14px; }
    article.post .post-meta .post-visits {
      display: inline-block;
      color: #8a8a8a;
      font-size: 14px; }
  article.post img {
    box-sizing: border-box;
    max-width: 100%;
    display: block;
    border: 1px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    background: #fff;
    padding: 5px; }
  article.post .post-tags {
    margin-bottom: 10px; }
    article.post .post-tags a {
      display: inline-block;
      text-decoration: none;
      color: #34495e;
      margin: 5px;
      border: 1px solid #34495e;
      border-radius: 2px;
      padding: 0 5px;
      font-size: 12px; }
      article.post .post-tags a:before {
        content: "#";
        font-size: 16px; }
  article.post .post-footer {
    margin-top: 40px;
    text-align: center;
    font-family: "Satisfy", cursive, LiSu, sans-serif;
    color: #8d8a8a; }
  article.post #read-more {
    margin: 40px 0;
    text-align: center; }
    article.post #read-more a {
      font-weight: normal;
      color: #34495e;
      padding: 5px;
      border: 1px solid #34495e;
      border-radius: 2px;
      transition: all .3s; }
      article.post #read-more a:hover {
        background: #34495e;
        border-color: #34495e;
        color: #fff; }

.post-toc {
  position: absolute;
  width: 200px;
  z-index: -1;
  top: 0;
  margin-left: 960px;
  padding: 10px;
  font-family: "Athelas", STHeiti, Microsoft Yahei, serif;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
  word-wrap: break-word;
  box-sizing: border-box; }
  .post-toc .post-toc-title {
    margin: 0 10px;
    font-size: 20px;
    font-weight: normal;
    text-transform: uppercase; }
  .post-toc .post-toc-content {
    font-size: 14px; }
    .post-toc .post-toc-content .toc, .post-toc .post-toc-content .toc-item {
      list-style: none; }
    .post-toc .post-toc-content .toc {
      margin: 10px 0;
      padding-left: 20px; }
      .post-toc .post-toc-content .toc .toc-child {
        padding-left: 15px; }
    .post-toc .post-toc-content span {
      font-weight: normal; }
    .post-toc .post-toc-content .toc-link.active {
      color: #34495e; }

code, pre {
  padding: 7px;
  font-size: 13px;
  font-family: Consolas, Monaco, Menlo, Consolas, monospace;
  background: #e8e8e8; }

code {
  padding: 3px 5px;
  border-radius: 4px;
  color: #444;
  white-space: normal;
  word-break: break-all; }

.highlight {
  margin: 1em 0;
  border-radius: 5px 5px 0 0;
  overflow-x: auto;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.125);
  position: relative; }
  .highlight table {
    position: relative; }
    .highlight table::after {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      padding: 2px 7px;
      font-size: 13px;
      font-weight: bold;
      color: #979797;
      background: #d9d9d9;
      content: 'Code'; }
  .highlight.html > table::after {
    content: "HTML"; }
  .highlight.html > figcaption > span::after {
    content: " · HTML"; }
  .highlight.html figcaption + table::after {
    display: none; }
  .highlight.js > table::after {
    content: "JavaScript"; }
  .highlight.js > figcaption > span::after {
    content: " · JavaScript"; }
  .highlight.js figcaption + table::after {
    display: none; }
  .highlight.bash > table::after {
    content: "Bash"; }
  .highlight.bash > figcaption > span::after {
    content: " · Bash"; }
  .highlight.bash figcaption + table::after {
    display: none; }
  .highlight.css > table::after {
    content: "CSS"; }
  .highlight.css > figcaption > span::after {
    content: " · CSS"; }
  .highlight.css figcaption + table::after {
    display: none; }
  .highlight.scss > table::after {
    content: "Scss"; }
  .highlight.scss > figcaption > span::after {
    content: " · Scss"; }
  .highlight.scss figcaption + table::after {
    display: none; }
  .highlight.java > table::after {
    content: "Java"; }
  .highlight.java > figcaption > span::after {
    content: " · Java"; }
  .highlight.java figcaption + table::after {
    display: none; }
  .highlight.xml > table::after {
    content: "XML"; }
  .highlight.xml > figcaption > span::after {
    content: " · XML"; }
  .highlight.xml figcaption + table::after {
    display: none; }
  .highlight.python > table::after {
    content: "Python"; }
  .highlight.python > figcaption > span::after {
    content: " · Python"; }
  .highlight.python figcaption + table::after {
    display: none; }
  .highlight.json > table::after {
    content: "JSON"; }
  .highlight.json > figcaption > span::after {
    content: " · JSON"; }
  .highlight.json figcaption + table::after {
    display: none; }
  .highlight.swift > table::after {
    content: "Swift"; }
  .highlight.swift > figcaption > span::after {
    content: " · Swift"; }
  .highlight.swift figcaption + table::after {
    display: none; }
  .highlight.ruby > table::after {
    content: "Ruby"; }
  .highlight.ruby > figcaption > span::after {
    content: " · Ruby"; }
  .highlight.ruby figcaption + table::after {
    display: none; }
  .highlight.php > table::after {
    content: "PHP"; }
  .highlight.php > figcaption > span::after {
    content: " · PHP"; }
  .highlight.php figcaption + table::after {
    display: none; }
  .highlight.c > table::after {
    content: "C"; }
  .highlight.c > figcaption > span::after {
    content: " · C"; }
  .highlight.c figcaption + table::after {
    display: none; }
  .highlight.cpp > table::after {
    content: "C++"; }
  .highlight.cpp > figcaption > span::after {
    content: " · C++"; }
  .highlight.cpp figcaption + table::after {
    display: none; }
  .highlight.scheme > table::after {
    content: "Scheme"; }
  .highlight.scheme > figcaption > span::after {
    content: " · Scheme"; }
  .highlight.scheme figcaption + table::after {
    display: none; }
  .highlight.objectivec > table::after {
    content: "Objective-C"; }
  .highlight.objectivec > figcaption > span::after {
    content: " · Objective-C"; }
  .highlight.objectivec figcaption + table::after {
    display: none; }
  .highlight.yml > table::after {
    content: "YAML"; }
  .highlight.yml > figcaption > span::after {
    content: " · YAML"; }
  .highlight.yml figcaption + table::after {
    display: none; }
  .highlight.stylus > table::after {
    content: "Stylus"; }
  .highlight.stylus > figcaption > span::after {
    content: " · Stylus"; }
  .highlight.stylus figcaption + table::after {
    display: none; }
  .highlight.sql > table::after {
    content: "SQL"; }
  .highlight.sql > figcaption > span::after {
    content: " · SQL"; }
  .highlight.sql figcaption + table::after {
    display: none; }
  .highlight.http > table::after {
    content: "HTTP"; }
  .highlight.http > figcaption > span::after {
    content: " · HTTP"; }
  .highlight.http figcaption + table::after {
    display: none; }
  .highlight.go > table::after {
    content: "Go"; }
  .highlight.go > figcaption > span::after {
    content: " · Go"; }
  .highlight.go figcaption + table::after {
    display: none; }
  .highlight figcaption {
    position: absolute;
    top: 0;
    width: 100%;
    padding: 2px 7px;
    font-size: 13px;
    font-weight: bold;
    color: #b1b1b1;
    background: #e0e0e0;
    z-index: 20;
    overflow-x: hidden;
    box-sizing: border-box; }
    .highlight figcaption > a {
      position: absolute;
      right: 0;
      display: inline-box;
      margin-right: 7px;
      font-weight: 400; }
      .highlight figcaption > a:hover {
        text-decoration: none;
        border: 0; }
  .highlight .code pre {
    margin: 0;
    padding: 30px 10px 10px; }
  .highlight .gutter {
    width: 10px;
    color: #cacaca; }
    .highlight .gutter pre {
      margin: 0;
      padding: 30px 7px 10px; }
  .highlight .line {
    height: 20px; }
  .highlight table, .highlight tr, .highlight td {
    margin: 0;
    padding: 0;
    width: 100%;
    border-collapse: collapse; }
  .highlight .code .comment,
  .highlight .code .quote {
    color: #93a1a1; }
  .highlight .code .keyword,
  .highlight .code .selector-tag,
  .highlight .code .addition {
    color: #859900; }
  .highlight .code .number,
  .highlight .code .string,
  .highlight .code .meta .meta-string,
  .highlight .code .literal,
  .highlight .code .doctag,
  .highlight .code .regexp {
    color: #2aa198; }
  .highlight .code .title,
  .highlight .code .section,
  .highlight .code .name,
  .highlight .code .selector-id,
  .highlight .code .selector-class {
    color: #268bd2; }
  .highlight .code .attribute,
  .highlight .code .attr,
  .highlight .code .variable,
  .highlight .code .template-variable,
  .highlight .code .class .title,
  .highlight .code .type {
    color: #b58900; }
  .highlight .code .symbol,
  .highlight .code .bullet,
  .highlight .code .subst,
  .highlight .code .meta,
  .highlight .code .meta .keyword,
  .highlight .code .selector-attr,
  .highlight .code .selector-pseudo,
  .highlight .code .link {
    color: #cb4b16; }
  .highlight .code .built_in,
  .highlight .code .deletion {
    color: #dc322f; }

.pagination {
  margin: 0 auto;
  font-weight: bold; }
  .pagination i {
    font-size: 24px;
    vertical-align: sub; }
  .pagination .next-post,
  .pagination .next {
    float: right;
    color: #34495e;
    font-size: 16px;
    text-decoration: none;
    transition: all .3s; }
    .pagination .next-post:hover,
    .pagination .next:hover {
      color: #f6695f;
      transform: translateX(5px); }
  .pagination .prev-post,
  .pagination .prev {
    float: left;
    color: #34495e;
    font-size: 16px;
    text-decoration: none;
    transition: all .3s; }
    .pagination .prev-post:hover,
    .pagination .prev:hover {
      color: #f6695f;
      transform: translateX(-5px); }

footer {
  height: 150px;
  background: #34495e;
  text-align: center;
  color: #fff;
  font-size: 16px; }
  footer .social-links a i {
    display: inline-block;
    margin: 20px 0 0 0;
    color: #fff;
    font-size: 30px;
    transition: color .3s; }
    footer .social-links a i:hover {
      color: #f6695f; }
  footer .copyright {
    font-size: 16px;
    color: #aaa;
    margin: 0; }
    footer .copyright p {
      margin: 10px 0 0; }
    footer .copyright a {
      color: #0099cc;
      text-decoration: none; }
      footer .copyright a:hover {
        text-decoration: underline; }

.back-to-top {
  text-align: center;
  display: none;
  position: fixed;
  right: 80px;
  bottom: 40px;
  background: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
  transition: all .3s ease-out;
  z-index: 10;
  cursor: pointer; }
  .back-to-top:hover {
    transform: translateY(-5px); }
  .back-to-top i {
    display: inline-block;
    margin-top: 3px;
    font-size: 35px; }

.archives-container {
  min-height: 400px;
  padding: 30px 40px;
  margin-bottom: 10px;
  background: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); }
  .archives-container .archive-year {
    line-height: 1;
    font-size: 30px;
    margin: 10px 10px 15px;
    color: #34495e; }
  .archives-container .archive-article {
    display: block;
    text-decoration: none;
    padding: 10px;
    transition: all .3s;
    border-right: 3px solid transparent;
    border-left: 3px solid transparent;
    cursor: pointer; }
    .archives-container .archive-article .archive-meta {
      color: #8a8a8a; }
    .archives-container .archive-article .archive-title {
      color: #34495e;
      font-size: 20px;
      padding-left: 20px; }
    .archives-container .archive-article:hover {
      transform: translateY(-5px);
      box-shadow: 0 5px 10px #eaeaea;
      border-color: #f6695f; }
      .archives-container .archive-article:hover .archive-title {
        color: #f6695f; }

.tags-container {
  font-size: 18px;
  min-height: 400px;
  padding: 30px 40px;
  margin-bottom: 10px;
  background: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); }
  .tags-container .tags-title {
    text-align: center;
    border-left: 2px solid #f6695f; }
  .tags-container .tags-content {
    margin: 40px 0 0;
    text-align: center; }
    .tags-container .tags-content a {
      text-decoration: none;
      margin: 5px;
      transition: color .3s; }
      .tags-container .tags-content a:hover {
        color: #f6695f; }

.category-container .category-meta {
  font-size: 18px;
  text-align: center;
  border-left: 2px solid #f6695f; }

.category-container ul {
  border-left: 1px dashed #aaa;
  margin-left: 60px;
  margin-top: 40px;
  padding: 0;
  position: relative; }
  .category-container ul::before {
    position: absolute;
    top: -10px;
    left: -6px;
    content: "";
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid #555;
    width: 10px;
    height: 10px;
    border-radius: 5px; }
  .category-container ul::after {
    position: absolute;
    bottom: -10px;
    left: -6px;
    content: "";
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid #555;
    width: 10px;
    height: 10px;
    border-radius: 5px; }
  .category-container ul li {
    font-size: 20px;
    list-style: none; }
    .category-container ul li:before {
      content: "";
      display: inline-block;
      width: 20%;
      border: 1px dashed transparent;
      border-top-color: #aaa; }
    .category-container ul li a.category-item {
      display: inline-block;
      text-decoration: none;
      margin: 5px 0;
      transition: color .3s; }
      .category-container ul li a.category-item i {
        font-size: 26px; }
      .category-container ul li a.category-item:hover {
        color: #f6695f; }

.category-container a.category-item span {
  font-size: 16px;
  color: #8a8a8a; }

.category-container .category-item-name {
  margin: 0 0 15px;
  font-weight: normal;
  line-height: 1;
  padding-left: 20px;
  color: #34495e;
  font-size: 24px;
  font-weight: bold; }
  .category-container .category-item-name i {
    font-size: 28px;
    vertical-align: middle !important;
    padding-bottom: 5px; }

.category-container .category-item a {
  display: block;
  text-decoration: none;
  padding: 10px;
  transition: all .3s;
  border-right: 3px solid transparent;
  border-left: 3px solid transparent;
  cursor: pointer; }
  .category-container .category-item a time {
    color: #8a8a8a; }
  .category-container .category-item a .category-title {
    color: #34495e;
    font-size: 20px;
    padding-left: 20px; }
  .category-container .category-item a:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 10px #eaeaea;
    border-color: #f6695f; }
    .category-container .category-item a:hover .category-title {
      color: #f6695f; }

/*=====responsive======*/
@media only screen and (min-width: 800px) {
  header.site-nav {
    display: block; }
  .post .mobile-post-title {
    display: none; } }

@media only screen and (max-width: 1440px) {
  .post-toc {
    display: none; } }

@media only screen and (max-width: 800px) {
  html,
  body {
    height: auto; }
  .page > .container {
    padding-bottom: 190px; }
  .mobile-header {
    display: block; }
  header.site-nav {
    display: none; }
  .banner .show {
    display: none; }
  main {
    margin: 60px 16px 10px; }
  .post .mobile-post-tilte {
    display: block; }
  .back-to-top {
    right: 20px;
    bottom: 50px; }
  article#post-excerpt header h1 {
    font-size: 22px;
    margin: 0; }
  article#post-excerpt header .post-meta {
    margin-bottom: 0; }
  article#post-excerpt .post-tags a {
    padding: 0; }
  article.post {
    padding: 10px; }
    article.post .mobile-post-title > h1 {
      border-left: 3px solid #34495e;
      margin: -10px 0 0 -10px;
      padding: 12px 0 12px 10px;
      text-align: center; }
    article.post .post-meta .post-time {
      font-size: 14px;
      margin-bottom: 0;
      font-weight: normal; }
      article.post .post-meta .post-time i {
        font-weight: normal; }
    article.post #read-more {
      margin: 5px 0; }
      article.post #read-more a {
        font-size: 14px;
        padding: 3px; }
    article.post h1 {
      font-size: 20px; }
    article.post h2 {
      font-size: 18px; }
    article.post h3 {
      font-size: 16px; }
    article.post h4 {
      font-size: 15px; }
    article.post h5 {
      font-size: 15px; }
    article.post h6 {
      font-size: 14px; }
  .archives-container {
    min-height: 400px;
    padding: 15px 20px 30px; }
    .archives-container .archive-year {
      font-size: 24px;
      padding: 0 10px;
      margin: 15px 0 5px 10px;
      border-left: 2px solid #f6695f; }
    .archives-container .archive-article {
      padding: 5px; }
      .archives-container .archive-article .archive-title {
        font-size: 16px;
        padding-left: 10px; }
      .archives-container .archive-article .archive-meta {
        font-size: 12px; }
  .category-container {
    padding: 30px 20px; }
    .category-container ul {
      margin-left: 20px; }
      .category-container ul li a.category-item {
        font-size: 16px; }
        .category-container ul li a.category-item i {
          font-size: 22px; }
    .category-container a.category-item span {
      font-size: 14px; }
    .category-container .category-item a {
      padding: 5px; }
      .category-container .category-item a .category-title {
        font-size: 16px; }
      .category-container .category-item a time {
        font-size: 12px; }
    .category-container .category-item-name {
      border-left: 2px solid #f6695f; }
  .tags-container {
    min-height: 400px;
    padding: 30px 20px; }
    .tags-container .tags-content {
      margin-top: 20px; }
  .pagination.post-nav {
    margin: 0 16px; }
    .pagination.post-nav a {
      text-decoration: none; }
    .pagination.post-nav .next-post {
      float: none;
      display: block;
      color: #0099cc; }
    .pagination.post-nav .prev-post {
      float: none;
      display: block;
      color: #0099cc; }
  footer .social-links a i {
    margin: 20px 0 0 0; }
  footer .quote {
    font-size: 14px; }
    footer .quote p:before {
      font-size: 35px;
      margin-top: -35px; }
  footer .copyright {
    font-size: 16px;
    margin-top: 10px; }
    footer .copyright p {
      margin: 0; } }