/*
Theme Name: Amativeness
Theme URI: https://github.com/DIYgod/Amativeness
Author: DIYgod
Author URI: https://www.anotherhome.net/
Description: Wow, such a beautiful WordPress theme
Version: 3.1
License: MIT
License URI: https://github.com/DIYgod/Amativeness
Tags: light, gray, white, one-column, two-columns, right-sidebar, fluid-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
Text Domain: Amativeness
*/
@font-face {
    font-family: kilsonburg;
    src: url('https://diygod.b0.upaiyun.com/kilsonburg.ttf');
}

@media (max-width: 700px) {
    #site-header {
        font-size: 16px !important;
    }

    .header-description {
        height: 450px !important;
    }

    .header-description .scene {
        height: 450px !important;
    }

    .scene img {
        min-height: 450px !important;
    }

    #information {
        display: none;
    }

    .header-description #site-header {
        top: 150px;
    }

    #primary-navigation {
        float: none;
    }

    #primary-navigation .nav-menu {
        display: flex;
    }

    #primary-navigation .menu-item {
        flex: 1;
    }

    #menu-item-2512 {
        display: none;
    }

    #primary-navigation .fa {
        display: none;
    }

    #primary-navigation a {
        width: 100%;
        padding: 0;
        text-align: center;
    }

    .navbar {
        position: absolute !important;
    }

    .xm {
        display: none;
    }
}

@media (max-width: 800px) {
    .navbar .nav-right .search-form {
        display: none !important;
        position: relative !important;
    }

    .navbar .nav-right .online {
        display: none !important;
    }

    .container {
        max-width: 100% !important;
    }

    .block {
        border-radius: 0 !important;
    }

    .round-date {
        display: none !important;
    }

    #back-to-top {
        display: none !important;
    }
}

@media (max-width: 1000px) {
    .article-list .side {
        display: none !important;
    }

    .article-list .main {
        width: 100% !important;
    }
}

html, body, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    cursor: url(images/cursor.ico), auto;
}

article h2 {
    font-size: 22px;
}

article h3 {
    font-size: 18px;
}

article h1, article h2, article h3, article h4, article h5, article h6 {
    line-height: 30px;
}

.alignnone {
    cursor: auto;
}

ol,
ul {
    list-style: none;
}

body {
    line-height: 1;
    background-color: #efefef;
    font-family: "PingFang TC", "Avenir Next", Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    font-size: 15px;
    color: #444 !important;
}

a {
    outline: none;
    text-decoration: none;
    color: #444;
}

p {
    max-height: 100%;
}

.article-content {
    font-size: 15px;
}

.article-content a {
    color: rgb(56, 89, 102);
}

hr {
    background-color: #ccc;
    border: 0;
    height: 1px;
}

.main img {
    max-width: 100%;
    border-radius: 5px;
    -webkit-user-drag: none;
    height: auto;
}

img {
    max-width: 100%;
}

.sousuo {
    width: 25px;
    height: 25px;
    background: none;
}

/* 导航栏 */
@media screen and (min-width: 6px) {
    .container > div > section > div#content {
        margin-top: -20px;
        position: relative;
        background: rgb(255, 255, 255);
        padding: 15px;
        border-radius: 5px;
        box-shadow: 0 5px 20px rgb(186, 186, 186);
        -moz-box-shadow: 0 5px 20px #bbb;
    }

    .container > div > section > div#content > header {
        position: relative;
        background: hsl(0, 100%, 100%);
        padding: 15px;
        margin-bottom: 40px;
        border-radius: 5px;
        box-shadow: 0 5px 20px hsl(0, 0%, 73%);
        -moz-box-shadow: 0 5px 20px #bbb;
    }

    .container > div > section > div#content > header > h1 {
        text-align: center;
        font-size: 25px;
        color: hsl(0, 0%, 0%);
    }

    .site-navigation {
        float: left;
    }

    /* Primary Navigation */
    .primary-navigation {
        font-size: 14px;
    }

    .primary-navigation .menu-toggle {
        display: none;
        padding: 0;
    }

    .primary-navigation li {
        border: 0;
        display: inline-block;
        height: 38px;
        line-height: 38px;
        position: relative;
    }

    .primary-navigation a {
        display: inline-block;
        padding: 0 12px;
        white-space: nowrap;
        color: #fff;
    }

    .primary-navigation ul ul {
        background-color: #6360A0;
        float: left;
        margin: 0;
        position: absolute;
        top: 38px;
        left: -999em;
        z-index: 99999;
    }

    .primary-navigation li li {
        border: 0;
        display: block;
        height: auto;
        line-height: 1.0909090909;
    }

    .primary-navigation ul ul ul {
        left: -999em;
        top: 0;
    }

    .primary-navigation ul ul a {
        padding: 14px 12px;
        white-space: normal;
        width: 130px;
        background-color: #47456D;
    }

    .primary-navigation li:hover > a {
        background-color: #47456D;
        color: #fff;
    }

    .primary-navigation ul ul li a {
        background-color: #47456D;
    }

    .primary-navigation ul ul a:hover {
        background-color: #6360A0;
    }

    .primary-navigation ul li:hover > ul,
    .primary-navigation ul li.focus > ul {
        left: auto;
    }

    .primary-navigation ul ul li:hover > ul,
    .primary-navigation ul ul li.focus > ul {
        left: 100%;
    }

    .primary-navigation .menu-item-has-children > a:after,
    .primary-navigation .page_item_has_children > a:after {
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font: normal 8px/1 Genericons;
        position: absolute;
        right: 12px;
        top: 22px;
        vertical-align: text-bottom;
    }

    .primary-navigation li .menu-item-has-children > a,
    .primary-navigation li .page_item_has_children > a {
        width: 130px;
    }

    .primary-navigation .menu-item-has-children li.menu-item-has-children > a:after,
    .primary-navigation .menu-item-has-children li.page_item_has_children > a:after,
    .primary-navigation .page_item_has_children li.menu-item-has-children > a:after,
    .primary-navigation .page_item_has_children li.page_item_has_children > a:after {
        top: 20px;
    }

    .menu-item {
        cursor: pointer;
    }
}

#site-navigation > div > ul > li {
    display: inline;
}

section > ul > li {
    padding: 8px 0px;
}

section > ul > li > ul {
    margin-left: 40px;
    margin-top: 10px;
}

article > section > p {
    margin-left: 50px !important;
}

#content > div.article-list > div.main > ol > a.prev.page-numbers {
    display: inline-block;
    padding: 10px;
    background: #fff;
}

#content > div.article-list > div.main > ol > a {
    display: inline-block;
    padding: 10px;
    background: #fff;
}

#content > div.article-list > div.main > ol > span.page-numbers.current {
    display: inline-block;
    padding: 10px;
    background: #fff;
}

#content > div.article-list > div.main > ol > span.page-numbers.dots {
    display: inline-block;
    padding: 10px;
    background: #fff;
}

#content > div.article-list > div.main > ol > a.next.page-numbers {
    display: inline-block;
    padding: 10px;
    background: #fff;
}

article > div > p {
    line-height: 20px;
}

.readers-list {
    line-height: 18px;
    text-align: left;
    _zoom: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.readers-list li {
    width: 200px;
    float: left;
    margin-right: -1px;
}

.readers-list a, .readers-list a:hover strong {
    background-color: #f2f2f2;
    background-image: -webkit-linear-gradient(#f8f8f8, #f2f2f2);
    background-image: -moz-linear-gradient(#f8f8f8, #f2f2f2);
    background-image: linear-gradient(#f8f8f8, #f2f2f2);
}

.readers-list a {
    position: relative;
    display: block;
    height: 36px;
    margin: 4px;
    padding: 4px 4px 4px 44px;
    color: #999;
    overflow: hidden;
    border: #d8d1a7 1px solid;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    box-shadow: #eee 0 0 2px;
}

.readers-list img, .readers-list em, .readers-list strong {
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    transition: all .2s ease-out
}

.readers-list img {
    width: 36px;
    height: 36px;
    float: left;
    margin: 0 8px 0 -40px;
    -webkit-border-radius: 2px;
    --mozborder-radius: 2px;
    border-radius: 2px;
}

.readers-list em {
    color: #666;
    font-style: normal;
    margin-right: 10px;
}

.readers-list strong {
    color: #EE8B17;
    width: 40px;
    text-align: right;
    position: absolute;
    right: 6px;
    top: 4px;
    font: bold 14px/16px microsoft yahei;
}

.readers-list a:hover {
    border-color: #bcbca7;
    box-shadow: #BBBBBB 0px 0px 3px;
    background-color: #fff;
    background-image: none;
}

.readers-list a:hover img {
    opacity: .6;
    margin-left: 0;
}

.readers-list a:hover em {
    color: #EE8B17;
    font: bold 12px/36px microsoft yahei;
}

.readers-list a:hover strong {
    color: #EE8B17;
    right: 150px;
    top: 0;
    text-align: center;
    border-right: #ccc 1px solid;
    height: 44px;
    line-height: 40px;
}

#pagination {
    width: 67%;
    float: left;
}

#pagination > a {
    background: #97dffd;
    display: block;
    padding: 8px 0px;
    border-radius: 5px;
    text-align: center;
    font-size: 14px;
    color: #FFF;
    /*box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);*/
}

#pagination > a:hover {
    background: #47456D;
    color: #FFF;
}

.side .blogroll {
    height: 400px;
    overflow-y: auto;
}

.side .blogroll li {
    float: left;
    width: 50%;
    font-size: 10pt;
}

/* global.css */
/*------------------------------------
 * theme by Sloger
 *
 * @author  Sloger
 * @link  http: //blog.sloger.info
 * @update  2013-12-31
 * --------------------------------- */

.article-list .main p {
    margin: 10px 0px;
    line-height: 24px;
}

/* 布局 */

.container {
    max-width: 80%;
    margin: 0 auto;
    position: relative;
}

.container:after {
    clear: both;
    content: "";
    display: table;
}

/* semantic框架提供的 label */

.ui.ribbon.label {
    margin-top: 5px;
    margin-bottom: 5px;
}

/* 代码 */

pre, code {
    word-wrap: break-word;
    border-radius: 5px;
    color: #DE3859;
    border: 1px solid #ddd;
    cursor: auto;
    padding: 2px 5px;
    font-size: 14px;

    user-select: initial;
    -moz-user-select: initial;
    -webkit-user-select: initial;
}

pre {
    padding: 10px;
    border-left: 4px solid #de3859;
    overflow: auto;
}

pre code {
    border: 0px;
    padding: 0px;
}

.article-content.red pre {
    border-left-color: #D95C5C;
    padding: 10px;
    border-left: 4px solid #de3859;
    overflow: auto;
    line-height: 20px;
    word-wrap: break-word;
}

/* footer 部分 */

footer {
    text-align: center;
    margin-top: -10px;
    color: rgb(136, 136, 136);
    font-size: 12px;
    line-height: 1.5;
}

footer p {
    margin: 5px 0px;
}

footer a {
    color: rgb(136, 136, 136);
}

footer a:hover {
    color: #000;
}

/* 光标 */
.side .block .label:hover, .main .block .comments:hover, .main .block .round-date:hover {
    cursor: pointer;
}

#content {
    position: relative;
    margin-top: -180px;
}

form textarea {
    resize: none !important;
}

/* label.css */
/*
 * # Semantic - Label
 * http://github.com/jlukic/semantic-ui/
 *
 *
 * Copyright 2013 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */

/*******************************
            Label
*******************************/

.ui.label {
    display: inline-block;
    padding: 0.5em 0.8em;
}

.ui.label:first-child {
    margin-left: 0em;
}

.ui.label:last-child {
    margin-right: 0em;
}

.ui.label a {
    color: inherit;
}

.ui.ribbon.label {
    position: relative;
    margin: 0em 0.2em;
    left: -2.0rem;
    padding-left: 2rem;
    border-radius: 0px 4px 4px 0px;
    border-color: rgba(0, 0, 0, 0.15);
}

.ui.ribbon.label:after {
    position: absolute;
    content: "";
    top: 100%;
    left: 0%;
    border-top: 0em solid transparent;
    border-right-width: 1em;
    border-right-color: inherit;
    border-right-style: solid;
    border-bottom: 1em solid transparent;
    border-left: 0em solid transparent;
    width: 0em;
    height: 0em;
}

.ui.red.labels .label,
.ui.red.label {
    background-color: #97dffd;
    border-color: #97dffd;
    color: #fff;
    margin: 5px 0 15px 2px;
    font-size: 14px;
}

.ui.labels .red.label:before,
.ui.red.labels .label:before,
.ui.red.label:before {
    background-color: #97dffd;
}

.ui.red.ribbon.label {
    border-color: #47456D;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}

/* content.css */
/*********************
 *
 *      正文部分
 *
 *********************/

/* 文章列表 */

.article-list {
    margin-top: 40px;
}

.article-list .main {
    width: 67%;
    float: left;
    transition: all .5s ease-out
}

.article-list .side {
    width: 30%;
    float: right;
}

/* block */

.block {
    position: relative;
    background: #fff;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    /*box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);*/
}

.block .title {
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    margin: 15px 0;
    line-height: 30px !important;
}

.post.block {
    margin-bottom: 40px;
}

.block.widget {
    transition: all .2s linear;
}

.block.widget:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.category.block {
    margin-bottom: 40px;
}

/* 每篇文章左上角的时间 */

.round-date {
    position: absolute;
    top: -20px;
    left: -35px;
    height: 60px;
    width: 70px;
    padding-top: 10px;
    border-radius: 100px;
    color: #fff;
}

.round-date .month, .round-date .day {
    text-align: center;
    display: block;
}

.round-date .day {
    font-size: 30px;
    font-weight: bold;
}

.round-date.red {
    background-color: #97dffd;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}

/* 文章信息 */
.article-meta {
    color: #555;
    font-size: 14px;
    text-align: center;
    word-break: break-word;
    line-height: 20px;
}

/* 文章中 查看更多 链接 */

.more {
    text-align: center;
}

.more a {
    color: #fff;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 5px;
    background-color: #E8E8E8;

    transition: 500ms;
    -o-transition: 500ms;
    -moz-transition: 500ms;
    -webkit-transition: 500ms;
}

.article-content.red > .more a {
    background-color: #97dffd;
}

/* 侧边栏 */

.side .list {
    list-style: none;
}

.side .list .item {
    padding: 5px 0px;
    display: list-item;
}

.side .list .item:after {
    clear: both;
    content: '';
    display: table;
}

.side .list .item a {
    color: rgba(0, 0, 0, 0.8);
}

.side .list .item a:hover {
    color: rgba(0, 0, 0, 0.5);
}

.side .animated.list .item {
    cursor: pointer;
    padding: 5px 0px;

    transition: .2s color ease, .2s padding-left ease, .2s background-color ease;
    -o-transition: .2s color ease, .2s padding-left ease, .2s background-color ease;
    -moz-transition: .2s color ease, .2s padding-left ease, .2s background-color ease;
    -webkit-transition: .2s color ease, .2s padding-left ease, .2s background-color ease;
}

.side .animated.list .item:hover {
    padding-left: 15px;
    background-color: rgba(0, 0, 0, 0.02);
    color: rgba(0, 0, 0, 0.7);
}

.side .animated.list .item:hover * {
    cursor: pointer;
}

.side .friend.list .item {
    padding: 10px 0px;
    color: #555;
}

.side .friend.list .item:hover img {
    transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}

.side .friend.list p {
    margin: 1px;
}

.side .friend.list .header {
    font-weight: bold;
}

/* 分类下 显示文章个数的标签 */
.side .category.list .item .label {
    float: right;
}

/* header.css */
/* ------------------------------------
 *
 *   顶部部分
 *
 * --------------------------------- */

/* 返回顶部小火箭 */

#back-to-top {
    cursor: pointer;
    position: fixed;
    right: 50px;
    top: -900px;
    z-index: 9;
    width: 70px;
    height: 900px;
    background: url(https://diygod.b0.upaiyun.com/scroll.png);
    transition: all 0.5s ease-in-out;
}

#back-to-top #rocket {
    margin: 8px;
}

#back-to-top #rocket path {
    transition: .5s;
    -o-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
}

#back-to-top.red:hover #rocket path {
    fill: #97dffd;
}

/* 导航栏 */
.navbar {
    left: 0px;
    right: 0px;
    top: 0px;
    position: fixed;
    z-index: 10;
    background: #000;
    background: rgba(40,42,44,.6);
}

.navbar .nav {
    float: left;
    margin-top: 0px;
    font-size: 14px;
    padding: 0px;
}

.navbar .nav-right {
    position: absolute;
    right: -43px;
    top: 0;
    bottom: 0;
}

.navbar .search-form {
    float: left;
}

.navbar .search-form .search-input {
    float: right;
    height: 25px;
    width: 0px;
    margin-top: 5px;
    padding: 0px 0px 0px 10px;
    color: rgb(238, 238, 238);
    background: rgba(0, 0, 0, 0);
    border: none;
    border-radius: 2px;
    transition: .6s;
    margin-top: 6.5px;
}

.navbar .search-form:hover .search-input {
    width: 150px;
    margin-right: 10px;
    color: #333;
    background-color: #fff;
}

.navbar .search-form .search-input:focus {
    width: 150px;
    color: #333;
    background: #fff;
    outline: none;
}

.navbar .search-form .search-submit {
    border: none;
    color: #fff;
    cursor: pointer;
    transition: 1s;
    font-size: 25px;
}

.navbar .search-form .search-submit:focus {
    outline: none;
}

.navbar .search-form:hover .search-submit, .search-form .search-input:focus + .search-submit {
    color: #fff;
    transform: rotateY(-180deg);
}

.houtai {
    float: left;
    line-height: 38px;
    color: #fff;
    margin-left: 10px;
}

.navbar .nav li {
    display: inline;
    margin-left: 20px;
}

.navbar .nav li.active, .navbar .nav li:focus {
    color: #fff;
    background-color: #111;
}

.navbar .nav li a:hover {
    color: #fff;

    transform: translateY(-8px);
    -o-transform: translateY(-8px);
    -ms-transform: translateY(-8px);
    -moz-transform: translateY(-8px);
    -webkit-transform: translateY(-8px);
}

#site-navigation > div > ul > li > a, .fuser, .feed {
    display: inline-block;
    padding: 10px 15px 10px;
    color: #999;
    /* text-shadow: 0 -1px 0 rgba(0,0,0,0.25); */
}

#site-navigation > div > ul > li > a.active, .fuser, .feed {
    background: #000;
}

.navbar .nav-right a {
    padding: 0px;
}

/* 站点标题 */

.header-description {
    height: 650px;
    position: relative;
    background-image: url(https://diygod.b0.upaiyun.com/header-sagiri.jpg);
    width: 100%;
    background-size: cover;
    background-position: center 50%;
    background-repeat: no-repeat;
}

#site-header {
    position: relative;
    top: 180px;
    font-family: kilsonburg, "Avenir Next", Helvetica, Arial, "Lantinghei SC", "Microsoft YaHei", sans-serif;
    font-size: 34px;
    font-weight: bold;
    text-align: center;
    text-shadow: 0px 1px 1px rgb(71, 69, 109);
    margin-bottom: 130px;
    z-index: 1;

    animation: show-site-title 1s ease-out;
    -o-animation: show-site-title 1s ease-out;
    -moz-animation: show-site-title 1s ease-out;
    -webkit-animation: show-site-title 1s ease-out;
}

#site-header a {
    color: #fff;
    font-weight: normal;
}

/* 中央信息块 */

#information {
    text-align: center;
    width: 70%;
    margin: auto;
    top: -170px;
    padding: 40px 0px;
    padding-bottom: 40px;
    font-size: 16px;
    opacity: .98;
    background: rgba(230, 244, 249, 0.8);
    z-index: 1;
    animation: show-description 1s ease-out;
    -o-animation: show-description 1s ease-out;
    -moz-animation: show-description 1s ease-out;
    -webkit-animation: show-description 1s ease-out;
}

#information img.avatar {
    width: 100px;
    height: 100px;
    border-radius: 100%;
}

#information .description {
    font-size: 18px;
    font-weight: bold;
    margin-top: 20px;
}

/* 以下是动画部分 */
@keyframes show-site-title {
    0% {
        transform: translateY(-40px);
        -ms-transform: translateY(-40px);
    }
    100% {
        transform: translateY(0);
        -ms-transform: translateY(0);
    }
}

@-o-keyframes show-site-title {
    0% {
        -o-transform: translateY(-40px);
    }
    100% {
        -o-transform: translateY(0);
    }
}

@-moz-keyframes show-site-title {
    0% {
        transform: translateY(-40px);
        -moz-transform: translateY(-40px);
    }
    100% {
        transform: translateY(0);
        -moz-transform: translateY(0);
    }
}

@-webkit-keyframes show-site-title {
    0% {
        -webkit-transform: translateY(-40px);
    }
    100% {
        -webkit-transform: translateY(0);
    }
}

@keyframes show-description {
    0% {
        transform: translateY(90px);
        -ms-transform: translateY(90px);
    }
    80% {
        transform: translateY(5px);
        -ms-transform: translateY(5px);
    }
    90% {
        transform: translateY(-5px);
        -ms-transform: translateY(-5px);
    }
    100% {
        transform: translateY(0);
        -ms-transform: translateY(0);
    }
}

@-webkit-keyframes show-description {
    0% {
        -webkit-transform: translateY(90px);
    }
    80% {
        -webkit-transform: translateY(5px);
    }
    90% {
        -webkit-transform: translateY(-5px);
    }
    100% {
        -webkit-transform: translateY(0);
    }
}

@-moz-keyframes show-description {
    0% {
        transform: translateY(90px);
        -moz-transform: translateY(90px);
    }
    80% {
        transform: translateY(5px);
        -moz-transform: translateY(5px);
    }
    90% {
        transform: translateY(-5px);
        -moz-transform: translateY(-5px);
    }
    100% {
        transform: translateY(0);
        -moz-transform: translateY(0);
    }
}

@-o-keyframes show-description {
    0% {
        -o-transform: translateY(90px);
    }
    80% {
        -o-transform: translateY(5px);
    }
    90% {
        -o-transform: translateY(-5px);
    }
    100% {
        -o-transform: translateY(0);
    }
}

/* crayon-syntax */
.crayon-syntax .crayon-plain {
    width: 0 !important;
}

/* 一连串较长的英文字符自动换行 */
#content .post,
.recent-comments {
    white-space: normal;
    word-break: break-all;
    word-wrap: break-word;
}

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

.animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

@-webkit-keyframes tada {
    0% {
        -webkit-transform: scale(1);
    }

    10%, 20% {
        -webkit-transform: scale(0.9) rotate(-3deg);
    }

    30%, 50%, 70%, 90% {
        -webkit-transform: scale(1.1) rotate(3deg);
    }

    40%, 60%, 80% {
        -webkit-transform: scale(1.1) rotate(-3deg);
    }

    100% {
        -webkit-transform: scale(1) rotate(0deg);
    }
}

@keyframes tada {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    10%, 20% {
        -webkit-transform: scale(0.9) rotate(-3deg);
        transform: scale(0.9) rotate(-3deg);
    }

    30%, 50%, 70%, 90% {
        -webkit-transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg);
    }

    40%, 60%, 80% {
        -webkit-transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg);
    }

    100% {
        -webkit-transform: scale(1) rotate(0deg);
        transform: scale(1) rotate(0deg);
    }
}

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

@-webkit-keyframes pulse {
    0% {
        box-shadow: 0 0 5px rgba(77, 173, 208, 0.1);
    }

    50% {
        box-shadow: 0 0 60px rgba(77, 173, 208, 0.8);
    }

    100% {
        box-shadow: 0 0 5px rgba(77, 173, 208, 0.1);
    }
}

@-webkit-keyframes throb {
    0% {
        -webkit-transform: scale(1);
    }

    50% {
        -webkit-transform: scale(0.8);
    }

    100% {
        -webkit-transform: scale(1);
    }
}

@keyframes throb {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.8);
    }

    100% {
        transform: scale(1);
    }
}

.throb {
    -webkit-animation: throb 1.33s ease-in-out infinite;
    animation: throb 1.33s ease-in-out infinite;
}

.spinner {
    width: 40px;
    height: 40px;

    position: relative;
    margin: 100px auto;
}

.double-bounce1, .double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #97dffd;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;

    -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
    animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
    0%, 100% {
        -webkit-transform: scale(0.0)
    }
    50% {
        -webkit-transform: scale(1.0)
    }
}

@keyframes sk-bounce {
    0%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    }
    50% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}

/* Do you like me? */
.like-vote {
    text-align: center;
    cursor: pointer;
    padding: 10px 0 4px;
}

.like-vote:hover {
    background: #e51c23;
}

.like-vote:hover .like-count,
.like-vote:hover .like-title,
.like-vote:hover .like-message {
    color: #fff;
}

.like-title {
    color: #e51c23;
    font-size: 20px;
    margin-bottom: 10px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.like-count {
    color: #e51c23;
    font-size: 40px;
    cursor: pointer;
}

.like-count span {
    cursor: pointer;
}

#nprogress .bar {
    background: #9f3 !important;
}

#nprogress .peg {
    box-shadow: 0 0 15px #9f3, 0 0 10px #9f3 !important;
}

#nprogress .spinner-icon {
    border-top-color: #29d !important;
    border-left-color: #29d !important;
}

.edit-wz {
    float: left;
}

/* head-animated */

.head-animated {
    -webkit-animation-duration: .5s;
    -moz-animation-duration: .5s;
    -o-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}

.head-animated.slideDown {
    -webkit-animation-name: slideDown;
    -moz-animation-name: slideDown;
    -o-animation-name: slideDown;
    animation-name: slideDown;
}

.head-animated.slideUp {
    -webkit-animation-name: slideUp;
    -moz-animation-name: slideUp;
    -o-animation-name: slideUp;
    animation-name: slideUp;
}

@-webkit-keyframes slideDown {
    0% {
        -webkit-transform: translateY(-8em)
    }
    100% {
        -webkit-transform: translateY(0)
    }
}

@-moz-keyframes slideDown {
    0% {
        -moz-transform: translateY(-8em)
    }
    100% {
        -moz-transform: translateY(0)
    }
}

@-o-keyframes slideDown {
    0% {
        -o-transform: translateY(-8em)
    }
    100% {
        -o-transform: translateY(0)
    }
}

@keyframes slideDown {
    0% {
        transform: translateY(-8em)
    }
    100% {
        transform: translateY(0)
    }
}

@-webkit-keyframes slideUp {
    0% {
        -webkit-transform: translateY(0)
    }
    100% {
        -webkit-transform: translateY(-8em)
    }
}

@-moz-keyframes slideUp {
    0% {
        -moz-transform: translateY(0)
    }
    100% {
        -moz-transform: translateY(-8em)
    }
}

@-o-keyframes slideUp {
    0% {
        -o-transform: translateY(0)
    }
    100% {
        -o-transform: translateY(-8em)
    }
}

@keyframes slideUp {
    0% {
        transform: translateY(0)
    }
    100% {
        transform: translateY(-8em)
    }
}

/* 评论 */
.comment-block .comment-notes {
    display: none;
}

.comment-block .text-block {
    padding: 10px;
    background: #f4f6f7;
    outline: none;
    border: 1px solid #d9d9d9;
    box-sizing: border-box;
    font-size: 14px;
    border-radius: 3px;
}

.comment-block .comment-info .text-block {
    padding: 0 10px;
}

.comment-block .text-block:hover {
    border: 1px solid #b9b9b9;
}

.comment-block .text-block:focus {
    border: 1px solid #4d90fe;
}

.comment-block .content-field textarea {
    margin: 10px 0;
    height: 100px;
    width: 100%;
}

.comment-block input.text-block {
    height: 25px;
    width: 32%;
    margin-right: 2%;
}

.comment-block #url {
    height: 25px;
    margin-right: 0;
}

.comment-block .form-submit {
    margin: 0;
}

.comment-block .comment-info {
    font-size: 0;
    margin: 10px 0;
}

.comment-block .form-submit input[type=submit] {
    width: 100%;
    background: #97dffd;
    border: 0;
    outline: 0;
    font-size: 15px;
    display: block;
    color: #fff;
    height: 30px;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
}

.comment-block .form-submit input[type=submit]:hover {
    background: #47456D;
}

.comment-block #comments > a {
    display: block;
    border-left: 2px solid #363d4c;
    padding: 0 10px;
    margin: 40px 0;
    font-size: 20px;
}

.comment-block .commentlist .comment-author > img {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    float: left;
    transition: .4s all ease-in-out;
    margin-right: 15px;
}

.comment-block .commentlist .comment:hover .comment-author > img {
    transform: rotate(360deg);
}

.comment-block .commentlist article {
    margin: 20px 0;
}

.comment-block .commentlist .children {
    margin-left: 50px;
}

.comment-block .commentlist .comment-author .comments-name {
    font-size: 14px;
    margin: 5px 8px 7px 0;
    color: #444;
    font-style: normal;
    font-weight: bolder;
    display: inline-block;
}

.comment-block .commentlist .comment-author .comments-name .comment-master {
    margin-left: 10px;
    font-style: normal;
    background: #DFF0D8;
    color: #3C763D;
    border-radius: 5px;
    padding: 1px 6px;
    font-size: 12px;
    font-weight: normal;
}

.comment-block .commentlist .comment-author time {
    color: #aaa;
    font-size: 12px;
    display: block;
}

.comment-block .commentlist .comment-content {
    line-height: 20px;
    font-size: 14px;
    margin-left: 80px;
    white-space: normal;
    word-break: break-all;
    word-wrap: break-word;
}

.comment-block .commentlist .comment-content img {
    max-width: 200px;
}

.comment-block .commentlist .comment-content > p {
    margin: 5px 0!important;
}

.comment-block .commentlist .comment-content .comment-reply {
    font-size: 12px;
}

.comment-block .commentlist > li{
    border-bottom: 1px solid #e5eaed;
}

/* 文章分页列表 */
#content > ol:nth-child(2) {
    display: none;
}

.page-navigator {
    margin-top: 10px;
    display: inline-block;
    padding: 0;
    border-radius: 5px;
    background: #fff;
    width: 100%;
    text-align: right;
}

.page-numbers {
    display: inline-block;
    padding: 20px 10px;
    color: #385966;
}

.page-numbers.current {
    color: rgb(81, 88, 101);
    border-radius: 50%;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(211, 211, 211);
    width: 45px;
    height: 45px;
    line-height: 45px;
    margin: 0px 5px;
    padding: 0;
}

.page-numbers.dots {
    background: #fff;
}

#comments-nav {
    text-align: center;
}

.comments-ua {
    display: inline-block;
}

.comments-ua a {
    color: #fff;
    margin-left: 5px;
    font-style: normal;
    border-radius: 5px;
    padding: 1px 6px;
    font-size: 12px;
    font-weight: 400;
}

.comments-ua a:first-child {
    background: #66CC66;
}

.comments-ua a:last-child {
    background: #1e90ff;
}

.comment-block .commentlist .comment-author .comments-class {
    display: inline-block;
    margin-left: 10px;
    font-style: normal;
    background: #DFF0D8;
    color: #3C763D;
    border-radius: 5px;
    padding: 3px 6px;
    font-size: 12px;
    font-weight: normal;
}

.comments-authore-title {
    height: 25px;
    overflow: hidden;
}

.noties {
    z-index: 999;
    top: 50px !important;
}

.notie {
    font-family: "PingFang TC", "Avenir Next", Helvetica, Arial, "Lantinghei SC", "Microsoft YaHei", sans-serif !important;
    font-size: 13px !important;
    line-height: 18px;
}

.widget_views {
    font-size: 13px;
}

.linkpage h3 {
    padding: 15px 0;
    font-size: 25px;
}

.linkpage ul:after {
    content: ' ';
    clear: both;
    display: block;
}

.linkpage li {
    float: left;
    width: 50%;
    position: relative;
    transition: all .3s ease-out;
    border-radius: 5px;
}

.linkpage li:hover {
    background: rgba(230, 244, 250, .5);
}

.linkpage li a {
    display: block;
    padding: 0 10px 0 90px;
    height: 90px;
}

.linkpage li a img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: absolute;
    top: 15px;
    left: 15px;
    cursor: pointer;
}

.linkpage li a h4 {
    font-size: 20px;
    padding-top: 8px;
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.linkpage li a p {
    font-size: 12px;
    color: #999;
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.close-side {
    text-align: center;
    font-size: 15px;
    cursor: pointer;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fa {
    margin: 0 .2em;
}

.footer-image {
    background: url(https://diygod.b0.upaiyun.com/footer01.png) no-repeat center;
    height: 368px;
    z-index: 1;
    position: absolute;
    width: 100%;
    pointer-events: none;
}

footer .container {
    background: #232323;
    width: 100%;
    top: 294px;
    padding: 15px 0 10px;
    max-width: 100% !important;
}

.houtai {
    position: absolute;
    left: 0;
}

#evanyou {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

::selection {
    background: rgba(0, 149, 255, .2);
}

::-moz-selection {
    background: rgba(0, 149, 255, .2);
}

.catch-me {
    text-align: center;
}
.catch-me a {
    text-align: center;
    display: inline-block;
    margin-bottom: 7px;
    text-decoration: none;
}

.catch-me i {
    display: inline-block;
    font-size: 16px;
    width: 42px;
    height: 42px;
    line-height: 42px;
    border-radius: 42px;
    color: rgba(0, 0, 0, .5);
    background-color: rgba(0, 0, 0, .10);
    transition: all .3s ease-in-out;
    font-style: normal;
}
.catch-me i:hover {
    background-color: rgb(247, 107, 29);
    color: #fff;
}

.clearfix {
    zoom: 1;
}

.clearfix:before,
.clearfix:after {
    content: ' ';
    display: table;
}

.clearfix:after {
    clear: both;
}

.ca-container {
    background: #fff;
    border-radius: 4px;
}

.ca-head {
    position: relative;
    width: 100%;
    border-radius: 4px 4px 0 0;
    text-align: center;
    box-shadow: inset 0 -70px 100px -50px rgba(0, 0, 0, .5);
}

.ca-head img {
    width: 100%;
    min-height: 100px;
}

.ca-head-container {
    font-size: 0;
    width: 100%;
    position: relative;
}

.ca-head-container h1 {
    position: absolute;
    bottom: 5px;
    margin: 0 0 0 -65px;
    font-size: 20px;
    letter-spacing: 0.5px;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .7);
    font-weight: 700;
    width: 130px;
    left: 50%;
}

.ca-head-container span {
    opacity: .2;
}

.ca-body {
    width: 100%;
    text-align: center;
    padding-top: 10px;
    box-sizing: border-box;
    border-radius: 0 0 4px 4px;
}
.ca-body p {
    font-size: 14px;
    margin: 5px 0 8px;
    font-weight: bold;
}

.my-face {
    animation: my-face 5s infinite ease-in-out;
    display: inline-block;
    margin: 0 5px;
}

@keyframes my-face {
    2% {
        transform: translate(0, 1.5px) rotate(1.5deg);
    }
    4% {
        transform: translate(0, -1.5px) rotate(-0.5deg);
    }
    6% {
        transform: translate(0, 1.5px) rotate(-1.5deg);
    }
    8% {
        transform: translate(0, -1.5px) rotate(-1.5deg);
    }
    10% {
        transform: translate(0, 2.5px) rotate(1.5deg);
    }
    12% {
        transform: translate(0, -0.5px) rotate(1.5deg);
    }
    14% {
        transform: translate(0, -1.5px) rotate(1.5deg);
    }
    16% {
        transform: translate(0, -0.5px) rotate(-1.5deg);
    }
    18% {
        transform: translate(0, 0.5px) rotate(-1.5deg);
    }
    20% {
        transform: translate(0, -1.5px) rotate(2.5deg);
    }
    22% {
        transform: translate(0, 0.5px) rotate(-1.5deg);
    }
    24% {
        transform: translate(0, 1.5px) rotate(1.5deg);
    }
    26% {
        transform: translate(0, 0.5px) rotate(0.5deg);
    }
    28% {
        transform: translate(0, 0.5px) rotate(1.5deg);
    }
    30% {
        transform: translate(0, -0.5px) rotate(2.5deg);
    }
    32% {
        transform: translate(0, 1.5px) rotate(-0.5deg);
    }
    34% {
        transform: translate(0, 1.5px) rotate(-0.5deg);
    }
    36% {
        transform: translate(0, -1.5px) rotate(2.5deg);
    }
    38% {
        transform: translate(0, 1.5px) rotate(-1.5deg);
    }
    40% {
        transform: translate(0, -0.5px) rotate(2.5deg);
    }
    42% {
        transform: translate(0, 2.5px) rotate(-1.5deg);
    }
    44% {
        transform: translate(0, 1.5px) rotate(0.5deg);
    }
    46% {
        transform: translate(0, -1.5px) rotate(2.5deg);
    }
    48% {
        transform: translate(0, -0.5px) rotate(0.5deg);
    }
    50% {
        transform: translate(0, 0.5px) rotate(0.5deg);
    }
    52% {
        transform: translate(0, 2.5px) rotate(2.5deg);
    }
    54% {
        transform: translate(0, -1.5px) rotate(1.5deg);
    }
    56% {
        transform: translate(0, 2.5px) rotate(2.5deg);
    }
    58% {
        transform: translate(0, 0.5px) rotate(2.5deg);
    }
    60% {
        transform: translate(0, 2.5px) rotate(2.5deg);
    }
    62% {
        transform: translate(0, -0.5px) rotate(2.5deg);
    }
    64% {
        transform: translate(0, -0.5px) rotate(1.5deg);
    }
    66% {
        transform: translate(0, 1.5px) rotate(-0.5deg);
    }
    68% {
        transform: translate(0, -1.5px) rotate(-0.5deg);
    }
    70% {
        transform: translate(0, 1.5px) rotate(0.5deg);
    }
    72% {
        transform: translate(0, 2.5px) rotate(1.5deg);
    }
    74% {
        transform: translate(0, -0.5px) rotate(0.5deg);
    }
    76% {
        transform: translate(0, -0.5px) rotate(2.5deg);
    }
    78% {
        transform: translate(0, -0.5px) rotate(1.5deg);
    }
    80% {
        transform: translate(0, 1.5px) rotate(1.5deg);
    }
    82% {
        transform: translate(0, -0.5px) rotate(0.5deg);
    }
    84% {
        transform: translate(0, 1.5px) rotate(2.5deg);
    }
    86% {
        transform: translate(0, -1.5px) rotate(-1.5deg);
    }
    88% {
        transform: translate(0, -0.5px) rotate(2.5deg);
    }
    90% {
        transform: translate(0, 2.5px) rotate(-0.5deg);
    }
    92% {
        transform: translate(0, 0.5px) rotate(-0.5deg);
    }
    94% {
        transform: translate(0, 2.5px) rotate(0.5deg);
    }
    96% {
        transform: translate(0, -0.5px) rotate(1.5deg);
    }
    98% {
        transform: translate(0, -1.5px) rotate(-0.5deg);
    }
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

.OwO-logo span {
    cursor: pointer;
}

.OwO-packages span {
    cursor: pointer;
}

.OwO-item img {
    cursor: pointer;
}

.xm {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1;
    font-size: 0;
    transition: all .3s ease-in-out;
    transform: translateY(3px);
}

.xm:hover {
    transform: translateY(0);
}

.xm img {
    width: 50px;
}

.typed-cursor{
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

.typed {
    font-size: 2em;
    height: 68px;
}

.typed-cursor {
    color: #fff;
}

#site-header h1 {
    display: none;
}

/* blogChat */
.chatroom-feedback {
    position: absolute;
    bottom: 3px;
    background: #EEE;
    width: 159px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    z-index: 0;
}
.chatroom {
    font-size: 12px;
    position: fixed;
    right: -3px;
    bottom: -3px;
    width: 563px;
    height: 405px;
    z-index: 998;
    overflow: hidden;
    background: #FFF;
    box-shadow: -3px -2px 8px -1px rgba(0,0,0,0.2);
    border-radius: 2px 0px 0px 2px;
    transition: all 0.3s;
}
.chatroom-fold {
    right: -404px;
    bottom: -368px;
    transition: all 0.3s;
}
.chatroom-fold .chatroom-tribe .count {
    right: 42px;
}
.chatroom-info {
    position: absolute;
    right: 10px;
    top: 6px;
    cursor: pointer;
    z-index: 12;
}
.chatroom-info:after {
    content: '[收起]';
    color: #F40;
}
.chatroom-fold .chatroom-info:after {
    content: '[展开]';
    color: #F40;
    z-index: 10;
    position: relative;
    top: 5px;
}
.chatroom-fold .chatroom-info {
    right: 412px;
}
.chatroom-tribe {
    -webkit-user-select: none;
    padding: 4px 5px;
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    margin-bottom: 1px;
    position: relative;
}
.chatroom-tribe:hover, .chatroom-tribe.current {
    background: #f2f2f5;
}
.chatroom-tribe img {
    width: 30px;
    height: 30px;
    vertical-align: middle;
}
.chatroom-tribe .name {
    max-width: 90px;
    display: inline-block;
    vertical-align: middle;
    height: 30px;
    margin-left: 10px;
    line-height: 30px;
    overflow: hidden;
}
.chatroom-tribe .count {
    visibility: hidden;
    min-width: 18px;
    height: 13px;
    line-height: 14px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    padding: 1px 2px;
    background: #fa7d3c;
    color: #fff;
    border-radius: 3px;
    transform: scale(0.8);
    position: absolute;
    right: 22px;
    top: 12px;
}
.chatroom-tribe .iconfont {
    position: absolute;
    right: 0;
    width: 30px;
    height: 30px;
    text-align: center;
    font-size: 12px;
    font-family: Arial;
    color: #696e78;
    font-style: normal;
    transform: scale(0.5);
    font-weight: bold;
    visibility: hidden;
}
.chatroom-tribe .iconfont:hover {
    color: #fa7d3c;
}
.chatroom-tribe:hover .iconfont {
    visibility: visible;
}
.chatroom-tribes {
    float: left;
    width: 159px;
    border-right: 1px #d9d9d9 solid;
    overflow: hidden;
    height: 402px;
    overflow-y: auto;
}
.chatroom-tribe {

}
.chatroom-pannels {
    float: left;
    width: 400px;
    height: 350px;
}
.chatroom-pannel-bd {
    height: 340px;
    background: #f2f2f5;
    overflow-y: auto;
}
.chatroom-item {
    display: none;
    padding-bottom: 10px;
}
.chatroom-item.current {
    display: block;
}
.chatroom-pannel-ft {
    border-top: 1px #d9d9d9 solid;
    position: relative;
    height: 60px;
}
.chatroom-pannel-ft textarea {
    resize: none;
    border: none;
    position: absolute;
    left: 6px;
    right: 6px;
    top: 6px;
    width: 77%;
    bottom: 6px;
    outline: none;
    line-height: 18px;
    font-size: 12px;
    overflow-y: auto;
}
.chatroom-log {
    padding: 25px 10px 0;
    overflow: hidden;
    line-height: 18px;
}
.chatroom-log .avatar {
    width: 30px;
    height: 30px;
    overflow: hidden;
    float: left;
    border-radius: 4px;
    cursor: pointer;
}
.chatroom-log .avatar img {
    width: 30px;
    min-height: 30px;
}
.chatroom-log .time {
    width: 310px;
    margin-left: 13px;
    margin-bottom: 4px;
    float: left;
    color: #999;
}
.chatroom-log .time b {
    text-decoration: underline;
    font-weight: normal;
}
.chatroom-log .time b:hover {
    cursor: pointer;
    color: #666;
}
.chatroom-log .detail {
    max-width: 222px;
    float: left;
    padding: 5px 9px;
    position: relative;
    margin-left: 13px;
    background: #fff;
    border: 1px #ccc solid;
    border-radius: 5px;
    box-shadow: 0 3px 3px rgba(0,0,0,.05);
    word-break: break-word;
}
.chatroom-log .detail:before, .chatroom-log .detail:after {
    content: " ";
    display: inline-block;
    width: 0;
    height: 0;
    border-width: 7px;
    border-style: solid;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    vertical-align: top;
    top: 10px;
    position: absolute;
    border-top-color: rgba(0, 0, 0, 0);
    border-bottom-color: rgba(0, 0, 0, 0);
    border-left-color: rgba(0, 0, 0, 0);
}
.chatroom-log .detail:before {
    border-width: 4px;
    border-top-color: #ccc;
    color: #ccc;
    left: -8px;
}
.chatroom-log .detail:after {
    border-top-color: #fff;
    color: #fff;
    left: -6px;
    border-width: 3px;
    top: 11px;
}
.chatroom-log.myself {
}
.chatroom-log.myself .avatar {
    float: right;
}
.chatroom-log.myself .time {
    float: right;
    margin-left: 0;
    margin-right: 13px;
    text-align: right;
}
.chatroom-log.myself .detail {
    float: right;
    margin-left: 0;
    margin-right: 13px;
    background: #d7ebfe;
    border: 1px #b7d4ef solid;
}
.myself .detail:before, .myself .detail:after {
    border-top-color: rgba(0, 0, 0, 0);
    border-bottom-color: rgba(0, 0, 0, 0);
    border-right-color: rgba(0, 0, 0, 0);
}
.chatroom-log.myself .detail:before {
    border-top-color: #b7d4ef;
    border-left-color: #b7d4ef;
    left: auto;
    right: -8px;
}
.chatroom-log.myself .detail:after {
    border-top-color: #d7ebfe;
    border-left-color: #d7ebfe;
    left: auto;
    right: -6px;
}
.chatroom-log-info {
    text-align: center;
    padding: 5px;
    color: #999;
}
.chatroom-rename {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
}
.chatroom-rename span {
    cursor: pointer;
    top: 50%;
    margin-top: -15px;
    position: absolute;
    left: 400px;
    background: #EEE;
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
    border-radius: 2px;
    text-align: center;
}
.chatroom-rename span:hover {
    background: #ccc;
}
.chatroom-rename input {
    position: absolute;
    left: 120px;
    top: 50%;
    height: 30px;
    line-height: 30px;
    text-indent: 10px;
    border: none;
    width: 250px;
    border-radius: 3px;
    margin-top: -15px;
    outline: none;
}
.chatroom-fold .chatroom-rename {
    display: none !important;
}
.chatroom-log-welcome {
    padding-left: 20px;
    padding-right: 20px;
}
.chatroom-log-welcome img {
    width: 28px;
    vertical-align: middle;
    margin: 0 2px;
    border-radius: 100%;
    cursor: pointer;
}
.chatroom-log-welcome strong {
    font-weight: normal;
    cursor:pointer;
    text-decoration: underline;
}
.chatroom-send-btn {
    position: relative;
    z-index: 0;
    float: right;
    width: 70px;
    height: 40px;
    background: #EEE;
    text-align: center;
    line-height: 40px;
    top: 10px;
    font-size: 14px;
    margin-right: 10px;
    cursor: pointer;
    transition: all 0.3s;
}
.chatroom-send-btn:hover {
    background: #CCC;
    transition: all 0.3s;
}

/* svg loader */
.pageload-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    visibility: hidden;
    background: #fff;
    z-index: 99;
}
.pageload-overlay.show {
    visibility: visible;
}
.pageload-overlay svg path {
    fill: #FADFA3;
}

/* donate */
.donate {
    position: relative;
}

.donate-word {
    background: #E26D6D;
    height: 34px;
    width: 80px;
    border-radius: 4px;
    line-height: 34px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    margin: 40px auto 25px;
    cursor: pointer;
}

.donate-body {
    display: none;
    text-align: center;
    width: 500px;
    margin: auto;
    max-width: 100%;
}

.donate-body.donate-show {
    display: flex;
}

.donate-item {
    flex: 1;
}

.donate-item img {
    width: 200px;
}

.donate-tip {
    font-size: 14px;
    margin: 10px 0;
}

.donate-wx .donate-tip {
    color: #44b549;
}

.donate-zfb .donate-tip {
    color: #00A0E9;
}

.donate-table {
    width: 100%;
    text-align: center;
}

.donate-table th,
.donate-table td {
    padding: 10px 0;
    max-width: 50%;
}

.dplayer .dplayer-danmaku .dplayer-danmaku-item {
    font-family: sans-serif !important;
}

.recent-comments {
    font-size: 13px;
    list-style: none;
    line-height: 20px;
}

.recent-comments:last-child a {
    border-bottom: none;
}

.recent-comments a {
    display: block;
    padding: 5px;
    transition: all .3s ease-out;
    border-bottom: 1px solid #ddd;
    margin: 5px 0;
}

.recent-comments a:hover {
    background: rgba(230,244,250,.5);
    border-radius: 5px;
}

.recent-avatar {
    float: left;
}

.recent-avatar img {
    border-radius: 50%;
}

.recent-body {
    margin-left: 40px;
}

.recent-text {
    font-size: 12px;
}

.recent-comments a * {
    cursor: auto;
}

.pingback {
    display: none;
}

a * {
    cursor: pointer;
}

.social-share .social-share-icon {
    transition: none !important;
}

.share {
    margin-top: 40px;
}

/* ajax comment */
.butterBar{
    margin-left:36%;
    max-width:640px;
    position:fixed;
    text-align:center;
    top:0;
    width:58%;
    z-index:800
}
.butterBar--center{
    left:50%;
    margin-left:-320px
}
.butterBar-message{
    background:rgba(255,255,255,0.97);
    border-bottom-left-radius:4px;
    border-bottom-right-radius:4px;
    box-shadow:0 1px 1px rgba(0,0,0,0.25),0 0 1px rgba(0,0,0,0.35);
    display:inline-block;
    font-size:14px;
    margin-bottom:0;
    padding:12px 25px
}

/*.header-description:before {*/
    /*content:" ";*/
    /*display:block;*/
    /*position:absolute;*/
    /*top:0;*/
    /*left:-50%;*/
    /*width:200%;*/
    /*height:100%;*/
    /*z-index:1;*/
    /*background-size:40rem 40rem;*/
    /*background-image:url(https://diygod.b0.upaiyun.com/falling-snow2.png);*/
    /*animation: snow 28s linear infinite;*/
/*}*/

/*.header-description:after{*/
    /*content:" ";*/
    /*display:block;*/
    /*position:absolute;*/
    /*top:0;*/
    /*left:-50%;*/
    /*width:200%;*/
    /*height:100%;*/
    /*background-size:40rem 40rem;*/
    /*background-image:url(https://diygod.b0.upaiyun.com/falling-snow1.png);*/
    /*animation: snow 18s linear infinite;*/
/*}*/

/*@keyframes snow{*/
    /*0%{background-position-x:0;background-position-y:0}50%{background-position-y:40rem}100%{background-position-x:40rem;background-position-y:80rem}*/
/*}*/

.single article.block .article-content {
    margin-bottom: 40px;
}

.online {
    float: left;
    line-height: 38px;
    color: #fff;
    margin-right: 20px;
    font-size: 12px;
}