#header{
    width: 100%;
    height: 3.5em;
    box-shadow: rgba(0,0,0,0.5) 0 2px 5px;
    background-size: cover;
    z-index: 999;
    position: absolute;
    top: 0;
}
#header .nav{
    width: 100%;
    height: 3.5em;
    position: relative;
    overflow: hidden;
}
#header .nav .nav-bg{
    height: 100vh;
    overflow: hidden;
    filter: blur(5px);
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 998;
}
#header .nav .nav-wrap{
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 999;
    background: rgba(0,0,0,0.3);
    height: 3.5em;
    overflow: hidden;
}
#header .nav .nav-wrap .logo{
    position: absolute;
    left: 1.25em;
    top: 0;
}
#header .nav .nav-wrap .logo a{
    color: white;
    font-weight: 300;
    font-size: .8em;
    display: block;
    margin: .5em 0;
}
#header .nav .nav-wrap .logo a:hover{
    color: #e44c65;
}
#header .nav .nav-wrap>nav{
    position: absolute;
    right: 1.25em;
    height: 3.5em;
    display: flex;
    align-items: center;
}
#header .nav .nav-wrap>nav a{
    color: white;
    padding: 0.3em 0.6em;
    border-radius: 3px;
    transition: background-color ease .2s;
}
#header .nav .nav-wrap>nav ul a:hover, #header .nav .nav-wrap>nav ul a:focus{
    background: #e44c65;
}
#header .nav .nav-wrap>nav a.hover{
    background: #e44c65;
}
#header nav ul{
    margin: 0;
    padding-left: 1em;
}
#header nav ul li {
    display: inline-block;
    margin-left: 1em;
}
#titleBar{
    display: none;
}

@media screen and (max-width: 736px){
    #header .nav .nav-wrap>nav a:hover{
        background: inherit;
    }
    #header .nav .nav-wrap>nav a.hover {
        background: #e44c65;
    }
    .blog #header{
        height: 44px;
        font-weight: 300;
        line-height: 44px;
        text-align: center;
        color: #ffffff;
        background: #272833;
        position: fixed;
        z-index: 1599;
        box-shadow: 0 0.125em 0.125em 0 rgba(0, 0, 0, 0.125)
    }
    #titleBar{
        position: relative;
        width: 100%;
        display: block;
    }
    #titleBar .title a{
        color: inherit;
    }
    #titleBar .toggleGroupPanel{
        text-decoration: none;
        height: 60px;
        position: absolute;
        top: 0;
        right: 0;
        width: 90px;
        outline: 0;
        border: 0;
    }
    #titleBar .toggleGroupPanel:before {
        background: #e44c65;
        color: rgba(255, 255, 255, 0.5);
        content: '\F0C9';
        display: block;
        font-size: 18px;
        height: 44px;
        right: 0;
        line-height: 44px;
        position: absolute;
        text-align: center;
        top: 0;
        width: 54px;
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
    }
}
@media screen and (max-width: 736px){
    #header nav ul li {
        margin-left: 0;
        padding-left: .3em;
    }
}
@media screen and (max-width: 360px){
    #header nav ul li {
        margin-left: 1em;
        padding-left: .5em;
    }
    #header #message-board-link, #header #about-link {
        display: none;
    }
}#main-banner{
    height: 100vh;
    width: 100%;
    overflow: hidden;
    position: relative;
}
#main-banner >.layer{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 10;
}
#main-banner >.bg-mask{
    position: absolute;
    top: 0;
    z-index: 5;
    background: rgba(0,0,0,0.1);
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#main-banner .motto{
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 10em;
    right: 1.25em;
    color: white;
}
#main-banner .motto .wrap{
    background: rgba(0,0,0,0.4);
    padding: 1.25em;
}
@media screen and (max-width: 736px){
    #main-banner .motto{
        width: 100%;
        left: 0;
        bottom: 6em;

    }
}
#main-banner .motto h2 + p {
    color: white;
    margin: 0.5em 0 0 0;
    font-size: 0.75em;
    margin-top: -1em;
    line-height: 1.5em;
}
.goto-next {
    border: 0;
    bottom: 0;
    display: block;
    height: 5em;
    left: 50%;
    margin: 0 0 0 -5em;
    overflow: hidden;
    position: absolute;
    text-indent: 10em;
    white-space: nowrap;
    width: 10em;
    z-index: 1;
}
.goto-next:before {
    background-image: url(/static/images/default/arrow.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    content: '';
    display: block;
    height: 1.5em;
    left: 50%;
    margin: -0.75em 0 0 -1em;
    position: absolute;
    top: 50%;
    width: 2em;
    z-index: 1;
}@keyframes links {
    0% {
        transform: rotate(-2deg);
    }

    100% {
        transform: rotate(2deg);
    }
}

.blog-wrap .article-list{
    float: left;
    width: 60%;
    overflow: hidden;
    padding: .5em;
    padding-right: 1em;
}
.article-list .article-list-wrap{
    width: 100%;
    overflow: hidden;
}
.article-list ul{
   padding-right: 2px;
}
.article-list .article-item{
    width: 100%;
    overflow: hidden;
    display: block;
    padding: 2em 0;
    margin-bottom: 2em;
    background-color: rgba(255,255,255,.85);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.article-list .article-item:last-child{
    margin-bottom: 0;
}
.article-list .article-item .article-info{
    width: 100%;
    overflow: hidden;
}
.article-info .article-title{
    width: 100%;
    text-align: right;
}
.article-info .article-title a{
    color: inherit;
    display: inline-block;
    padding: .3em .5em;
}
.article-info .article-title a:hover{
    background: #e44c65;
    color: white;
    animation: links .1s 3;
}
.article-info .article-title >h3{
    font-size: 1.5em;
    line-height: 2em;

}
.article-info .article-dateline{
    width: 100%;
    padding: .5em 0;
    text-align: right;
    color: #999;
}
.article-info .article-img{
    width: 100%;
    margin: .5em 0;
    max-height: 30em;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.article-info .article-img img{
    width: 100%;
    max-height: 60em;
    border: none;
}
@media screen and (min-width: 736px){
    .article-list .article-item{
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .article-list .article-info .article-img img{
        transition: transform .5s ease-out;
        transform-origin: center;
    }
    .article-list .article-info .article-img img:hover{
        transform: scale(1.2,1.2);
    }
    .article-info .article-title, .article-info .article-dateline, .article-info .article-summary, .article-item .article-oper.article-oper{
        padding: 0 1em;
    }
}
.article-info .article-summary{
    width: 100%;
    overflow: hidden;
}
.article-info .article-summary p{
    line-height: 1.5em;
    padding: 0;
    text-indent: 2em;
}
.article-item .article-oper{
    width: 100%;
    text-align: right;
    padding: .2em 0;
}
.article-item .article-oper >span{
    display: inline-block;
    padding: .3em .5em;
}
.article-item .article-oper >span:last-child{
    padding: 0;
}
.article-item .article-oper a{
    color: inherit;
}
.article-item .article-oper span>a{
    padding: .3em .5em;
    display: block;
    transition: background-color ease .5s;
}
.article-item .article-oper a:hover{
    background: #e44c65;
    color: white;
    animation: links .1s 3;
}
.article-list .load-more{
    width: 100%;
    overflow: hidden;
    text-align: center;
}
.article-list .load-more >a{
    padding: .3em .5em;
    display: inline-block;
    transition: background-color ease .5s;
}
.article-list .load-more >a:hover{
    background: #e44c65;
    color: white;
    animation: links .1s 3;
}

@media screen and (max-width: 1200px){


}
@media screen and (max-width: 1000px){

    .blog-wrap .article-list{
        width: 90%;
        margin: 0 auto;
        float: none;
        padding: 2em .5em;
    }

}
@media screen and (max-width: 736px){
    .blog-wrap .article-list{
        width: 100%;
    }
    .blog-wrap .article-list ul{
        padding: 0;
    }
    .blog-wrap .article-list{
        padding: 1em .5em 1.5em .5em;
    }
    .article-list .article-item{
        margin-bottom: 1em;
    }
    .article-list .article-item:last-child{
        margin-bottom: 0;
    }
    .article-info .article-title, .article-info .article-dateline, .article-info .article-summary, .article-item .article-oper.article-oper{
        padding: 0 .5em;
    }

    .article-info .article-title{
        text-align: center;
    }
    .article-info .article-title >h3{
        font-size: 1.25em;
        line-height: 1.5em;
        margin: 0;
    }
    .article-info .article-dateline{
        text-align: center;
        font-size: .75em;
    }
    .article-info .article-summary p{
        font-size: .85em;
        text-indent: 1.7em;
    }
    .article-item .article-oper{
        font-size: .82em;
    }
    .article-list .article-item{
        padding: 1em 0 2em 0;
        border-left: 1px solid #eff;
        border-right: 1px solid #eff;
    }
}@keyframes links {
    0% {
        transform: rotate(-2deg);
    }

    100% {
        transform: rotate(2deg);
    }
}
@keyframes blurFadeOut {
    0% {
        filter: blur(10px);
        opacity: 1;
    }
    100% {
        filter: blur(0);
        opacity: 0;
    }
}
.blog #header .nav .nav-bg{
    height: 5em;
    overflow: hidden;
}
.blog-banner-wrap{
    width: 100%;
    height: 35em;
    position: relative;
}
.blog-banner-wrap .mask-layer{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    left: 0;
    top: 0;
    z-index: 2;
    background: rgba(0,0,0,0.1);
}
.blog-banner-wrap .mask-layer >.layer{
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    z-index: 10;
    color: white;
    font-size: 2em;
    font-weight: 300;
    text-shadow: 3px 3px 15px rgba(0,0,0,.2);
    padding: 0 10%;
    line-height: 1.5;
}
.blog-banner{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    box-shadow: rgba(0,0,0,0.2) 0 1px 5px;
    border-bottom: 1px solid #e44c65;
    background: no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    background-color: #202020;
}
.blog-banner.loading{
    filter: blur(5px);
    position: absolute;
    z-index: 1;
}
.blog-banner.loading.blur-fade-out{
    filter: blur(0);
    opacity: 0;
    animation: blurFadeOut 1.5s ease;
}

.blog-wrap{
    width: 100%;
    min-height: 20vh;
    overflow: hidden;
    padding: 4em 10em;
    /*font-weight: 300;*/
}
.blog-wrap .blog-group{
    width: 40%;
    float: right;
    padding: .5em;
}
.blog-group nav{
    display: none;
}
.recommend-item{
    width: 100%;
    background: rgba(255,255,255,.85);
    border-radius: 4px;
    border: 2px solid black;
    position: relative;
    overflow: hidden;
    margin-bottom: 5em;
}
.recommend-item .recommend-item-inner{
    width: 100%;
}
.recommend-item .recommend-item-container{
    padding: 15px 45px 15px 15px;
}
.recommend-item .recommend-item-more{
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    background: #333;
    width: 30px;
    padding: 0 9px;
    color: #fff;
    font-size: 14px;
    line-height: 28px;
    vertical-align: middle;
    display: flex;
    justify-content: center;
    align-items: center;
}
.recommend-item .recommend-item-header{
    padding-bottom: 15px;
    border-bottom: 1px solid #ddd;
    overflow: hidden;
}
.recommend-item .recommend-item-header .name{
    float: left;
    padding-left: 1em;
    font-size: 1.15em;
    color: #666;
}
.recommend-item .recommend-item-header .story-intro {
    float: left;
    height: 17px;
    min-height: 1.1em;
    margin: 5px 0 0 20px;
    color: #999;
    font-size: 0.75em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: calc(100% - 20px);
}
.recommend-item .recommend-item-main{
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: 15em;
    padding: 0 5%;
}
.recommend-item .recommend-item-main p{
    overflow: hidden;
    line-height: 1.75em;
    max-height: 3.5em;
}
.recommend-item .recommend-item-main.motto p{
    max-height: none;
    width: 100%;
}
.recommend-item .recommend-item-main.motto p >span{
    display: inline-block;
    text-align: right;
    width: 100%;
}
.main-wrap .main-mask{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1099;
    top: 0;
    left: 0;
}
@media screen and (max-width: 1200px){
    .blog #header .nav .nav-bg{
        height: 22em;
    }
    .blog-banner-wrap{
        height: 22em;
    }
    .blog-banner-wrap .mask-layer >.layer{
        font-size: 1.8em;
    }
    .blog-wrap{
        padding: 4em 3em;
    }
    .recommend-item .recommend-item-main{
        min-height: 8em;
    }


}
@media screen and (max-width: 1000px){
    .blog #header .nav .nav-bg{
        height: 18em;
    }
    .blog-banner-wrap{
        height: 18em;
    }
    .blog-banner-wrap .mask-layer >.layer{
        font-size: 1.5em;
    }
    .blog-wrap{
        padding: 0;
    }
    .blog-wrap .blog-group{
        display: none;
    }
}
@media screen and (max-width: 736px){
    @keyframes groupPanelSlideOutRight {
        from {
            transform: translate3d(5em,0,0);;
        }

        to {
            visibility: hidden;
            transform:  translate3d(calc(100% + 5em),0,0);
        }
    }
    @keyframes groupPanelSlideInRight {
        from {
            transform: translate3d(calc(100% + 5em),0,0);
            visibility: visible;
        }

        to {
            transform: translate3d(5em, 0, 0);
        }
    }

    .blog #header .nav{
        display: none;
    }
    .blog #header .nav .nav-bg{
        height: 12em;
    }
    .blog-banner-wrap{
        margin-top: 44px;
        height: 12em;
    }
    .blog-banner-wrap .mask-layer >.layer{
        font-size: 1.25em;
    }
    .blog-banner{
        background-attachment: inherit;
    }
    .blog-wrap{
        padding: 0;
    }
    .main-wrap.blog.group-panel-visible{

    }
    .main-wrap.blog .blog-group{
        z-index: 1999;
        width: calc(100% - 5em);
        background: #181920;
        display: block;
        transform: translate3d(calc(100% + 5em),0,0);
        transition: transform .5s ease;
        position: fixed;
        top: 0;
        overflow-y: auto;
        height: 100%;
        -webkit-overflow-scrolling: touch;
    }
    .main-wrap.blog .bounceInRight{
        animation-name: none;
    }
    .main-wrap.blog.group-panel-visible .blog-group{
        animation-name: groupPanelSlideInRight;
        animation-duration: .5s;
        animation-fill-mode: both;
    }
    .main-wrap.blog.group-panel-closing .blog-group{
        animation-name: groupPanelSlideOutRight;
        animation-duration: .5s;
        animation-fill-mode: both;
    }
    .blog-group nav{
        display: block;
    }
    .blog-group nav ul{
        margin: .5em 0;
        overflow: hidden;
    }
    .blog-group nav ul li{
        width: 25%;
        float: left;
    }
    .blog-group nav a{
        display: inline-block;
        font-size: 1em;
    }
    .blog-group nav a{
        color: white;
    }
    .blog-group nav a.hover{
        color: #e44c65;
        font-weight: 700;
    }
    .recommend-item{
        margin-bottom: 1em;
        background-color: black;
        padding: 2px;
    }
    .recommend-item .recommend-item-inner {
        border-radius: 2px;
        background: white;
    }
    .recommend-item .recommend-item-more {
        right: 2px;
        bottom: 2px;
        top: 2px;
    }
    .recommend-item .recommend-item-header{
        padding-bottom: 10px;
    }
    .recommend-item .recommend-item-header .name{
        font-size: 1em;
    }
    .recommend-item .recommend-item-header .story-intro{
        font-size: .6em;
        height: 14px;
    }
    .recommend-item .recommend-item-main{
        min-height: 5em;
    }
    .recommend-item .recommend-item-main p{
        font-size: .75em;
        line-height: 1.5em;
        overflow: hidden;
        max-height: 3em;
    }
    .recommend-item .recommend-item-main.motto p{
        font-size: .75em;
        line-height: 1.5em;
        overflow: hidden;
        max-height: none;
    }
}#footer {
    background: #202020;
    padding: 6em 0;
    text-align: center;
}
#footer .copyright{
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9em;
    font-weight: 100;
    line-height: 1em;
    margin: 2em 0 0 0;
    padding: 0;
    text-align: center;
}
#footer .copyright li:first-child {
    border-left: 0;
    margin-left: 0;
    padding-left: 0;
}
#footer .copyright li {
    border-left: solid 1px rgba(255, 255, 255, 0.3);
    display: inline-block;
    list-style: none;
    margin-left: 1.5em;
    padding-left: 1.5em;
}
#footer .copyright li a {
    color: inherit;
}

@media screen and (max-width: 480px) {
    #footer{
        padding: 1em 0;
    }
    #footer .copyright li {
        border-left: 0;
        display: block;
        margin: 0;
        padding: .5em 0;
    }
    #footer .copyright {
        margin: .5em 0 0 0;
    }
}@keyframes backTopFadeIn {
    0% {
        opacity: 0;
        transform: translateX(10em);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes backTopFadeOut {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(10em);
    }
}
.backTop {
    z-index: 1000;
    position: fixed;
    right: 1.2em;
    bottom: 2.2em;
    opacity: 0;
    width: 36px;
    height: 36px;
    background: #e44c65;
    color: #fff;
    text-align: center;
    line-height: 36px;
    font-size: 14px;
    cursor: pointer;
    transition: all .3s;
}
.backTop.fadeIn{
    opacity: 1;
    -webkit-animation: backTopFadeIn .8s;
    animation: backTopFadeIn .8s;
}
.backTop.fadeOut{
    opacity: 0;
    -webkit-animation: backTopFadeOut .8s;
    animation: backTopFadeOut .8s;
}.my-friends{
    width: 100%;
    padding: .5em 0;
}
.my-friends ul{
    margin: 0;
    padding: 0;
}
.my-friends .friend-wrap{
    width: 33.33%;
    overflow: hidden;
    display: inline-block;
    padding: 0 1.2em;
    margin-top: 1em;
    vertical-align: top;
}
.my-friends .friend-wrap .friend-head{
    width: 100%;
    height: 100%;
    margin: .75em 0;
    text-align: center;
}
.my-friends .friend-wrap .friend-head img{
    max-width: 100%;
    max-height: 100%;
}
.my-friends .friend-wrap .blog-name{
    font-size: .85em;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.5em;
    height: 1.5em;
    text-overflow: ellipsis;
}
.my-friends .friend-wrap .friend-name{
    font-size: .75em;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.5em;
    height: 1.5em;
    text-overflow: ellipsis;
}
.my-friends .friend-wrap .blog_motto{
    font-size: .75em;
    width: 100%;
    height: 3em;
    line-height: 1.5em;
    overflow: hidden;
}

@media screen and (min-width: 1200px){
    .my-friends .friend-wrap .friend-head img{
        max-width: 90%;
        max-height: 90%;
    }
}

@media screen and (max-width: 1500px){
    .my-friends .friend-wrap{
        width: 50%;
    }
}

@media screen and (max-width: 736px){
    .my-friends .friend-wrap{
        width: 100%;
        padding: 0 .25em;
    }
    .my-friends .friend-wrap .friend-head img{
        max-width: 70%;
        max-height: 70%;
    }
    .my-friends .friend-wrap .friend-head{
        text-align: left;
    }
}.article-detail .article-detail-wrap{
    overflow: hidden;
    padding: 5em 3em;
    max-width: 1200px;
    margin: 0 auto;
    background-color: rgba(255,255,255,.85);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.article-detail .blog-group{
    display: none;
}
.article-detail-wrap .notFound{
    text-align: center;
}
.article-detail-wrap .article-oper {
    width: 100%;
    text-align: right;
    padding: .2em 0;
}
.article-detail-wrap .article-oper >span {
    display: inline-block;
    padding: .3em .5em;
}

.article-detail-wrap .article-content{
    width: 100%;
    margin: 3.5em 0;
}

@media screen and (max-width: 1000px){
    .article-detail-wrap{
        width: 90%;
    }
}

@media screen and (max-width: 736px){
    .article-detail .article-detail-wrap{
        width: 100%;;
        overflow: hidden;
        padding: 2em 1em;
        background-color: rgba(255,255,255,.85);
    }
    .article-detail-wrap .article-info .article-title span {
        color: inherit;
        display: inline-block;
        padding: .3em .5em;
    }
    .article-detail-wrap .notFound>a{
        font-size: 1em;
        text-decoration: underline;
    }
    .article-detail-wrap .notFound>h1{
        text-align: center;
        font-size: 1.25em;
    }
    .article-detail-wrap .article-oper {
        font-size: .75em;
        text-align: left;
        padding: .1em 0;
    }
    .article-detail-wrap .article-oper >span {
        display: inline-block;
        padding: 0;
        margin-right: 1em;
        color: #999;
    }
    .article-detail-wrap .article-info .article-title {
        text-align: left;
        margin-bottom: 1em;
    }
    .article-detail-wrap .article-dateline {
        text-align: left;
        padding: .1em 0;
    }
    .article-detail-wrap .article-content {
        margin: 1.5em 0;
    }
}
/**
 * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
 * Based on https://github.com/chriskempson/tomorrow-theme
 * @author Rose Pritchard
 */

code[class*="language-"],
pre[class*="language-"] {
	color: #ccc;
	background: none;
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	font-size: 1em;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;

}

/* Code blocks */
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: #2d2d2d;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
	white-space: normal;
}

.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: #999;
}

.token.punctuation {
	color: #ccc;
}

.token.tag,
.token.attr-name,
.token.namespace,
.token.deleted {
	color: #e2777a;
}

.token.function-name {
	color: #6196cc;
}

.token.boolean,
.token.number,
.token.function {
	color: #f08d49;
}

.token.property,
.token.class-name,
.token.constant,
.token.symbol {
	color: #f8c555;
}

.token.selector,
.token.important,
.token.atrule,
.token.keyword,
.token.builtin {
	color: #cc99cd;
}

.token.string,
.token.char,
.token.attr-value,
.token.regex,
.token.variable {
	color: #7ec699;
}

.token.operator,
.token.entity,
.token.url {
	color: #67cdcc;
}

.token.important,
.token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}

.token.inserted {
	color: green;
}
.article-comment-wrap{
    overflow: hidden;
    background-color: rgba(255,255,255,.85);
    margin: 1em auto;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    max-width: 1200px;
    position: relative;
}
.article-comment-wrap .at-user{
    color: #e44c65;
}
.article-comment-wrap .comment-title{
    width: 100%;
    margin: .3em 0;
}
.article-comment-wrap .comment-title .comment-count{
    margin-left: .5em;
}
.article-comment-wrap .comment-title >span{
    font-size: 1.2em;
}
.article-comment-wrap .multi-border-hl {
    font-size: 1.1em;
    text-transform: uppercase;
    margin: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1)
}
.article-comment-wrap .multi-border-hl span{
    border-left-color: #e44c65;
    border-width: 0 0 0 4px;
    border-style: solid;
    padding: .3em;
    display: inline-block;
}
.article-comment-wrap .multi-border-hl .email {
    text-transform: none;
    float: right;
    position: relative;
    margin-right: 1em;
    padding: 2px 0;
    font-size: .85em;
}
.article-comment-wrap .multi-border-hl .email input {
    width: 12rem;
    border: none;
    outline: none;
    text-align: center;
    margin-left: .5em;
    color: #bbb;
    font-weight: 300;
    font-size: .85em;
    background: transparent;
}
.article-comment-wrap .multi-border-hl .email .border {
    position: absolute;
    height: .5px;
    width: 12rem;
    background: black;
    right: 0;
    bottom: 0;
    transition: transform ease .3s;
    display: block;
    transform: scale3d(0,1,1)
}
.article-comment-wrap .multi-border-hl .email input:focus {
    color: black;
}
.article-comment-wrap .multi-border-hl .email input:focus + .border {
    transform: scale3d(1,1,1);
}
.article-comment-wrap .comment-box{
    width: 100%;
    padding: .5em 1em;
    font-size: .85em;
    transition: height ease .3s;
    height: 16em;
    overflow: hidden;
}
.article-comment-wrap .comment-box.min{
    height: 60px;
}
.article-comment-wrap .comment-box.min .comment-box-oper{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.article-comment-wrap .comment-box-write{
    width: 100%;
    overflow: hidden;
    margin: 1em 0;
}
.article-comment-wrap .user-head{
    width: 48px;
    height: 48px;
    overflow: hidden;
    float: left;
    margin-top: .5em;
}
.article-comment-wrap  .user-head img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.article-comment-wrap .comment-box-write .textarea-container{
    margin-left: 5em;
    overflow: hidden;
}
.article-comment-wrap .comment-box .comment-box-title{
    text-align: right;
}
.article-comment-wrap .comment-box .comment-textarea{
    padding: .3em .6em;
    outline: 0;
    resize: none;
    display: inline-block;
    font-size: 1em;
    height: 7em;
    width: 100%;
    font-weight: 300;
    border: 1px solid #eee;
    background: 0;
    background-color: #f4f5f7;
}

.article-comment-wrap .comment-box .comment-box-oper{
    width: 100%;
    text-align: right;
}
.article-comment-wrap .comment-box-oper .btn-submit{
    display: inline-block;
    padding: .5em .8em;
    font-size: 1em;
    background: #e44c65;
    border-radius: 4px;
    color: white;
}
.article-comment-wrap .comment-box-oper .btn-submit:hover{
    background-color: #e42a37;
}

.article-comment-wrap .comment-box-oper .btn-cancel{
    padding: .5em .5em;
    color: black;
    margin-right: .5em;
}
.article-comment-wrap .comment-list{
    width: 100%;
    overflow: hidden;
    padding: 1em;
}
.article-comment-wrap .comment-list .header-page{
    width: 100%;
    overflow: hidden;
    line-height: 1.5;
    height: 2em;
    text-align: right;
    font-size: .9em;
}
.article-comment-wrap .header-page span.now-page{
    color: #e44c65;
    font-weight: 700;
}
.article-comment-wrap .header-page span{
    padding: 0 4px;
    transition: color ease .3s;
}
.article-comment-wrap .header-page span.number-link{
    cursor: pointer;
}
.article-comment-wrap .header-page span.page-up, .article-comment-wrap .header-page span.page-down{
    cursor: pointer;
}
.article-comment-wrap .header-page span.page-up:hover, .article-comment-wrap .header-page span.page-down:hover, .article-comment-wrap .header-page span.number-link:hover{
    color: #e44c65;
}
.article-comment-wrap .comment-ul, .article-comment-wrap .reply-box{
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.article-comment-wrap .comment-ul{
    font-size: .85em;
}


.article-comment-wrap .comment-item{
    width: 100%;
    overflow: hidden;
    padding: 0;
}
.article-comment-wrap .comment-item .header-page{
    text-align: left;
}
.article-comment-wrap .content-wrap{
    margin-left: 5em;
    overflow: hidden;
    padding: .2em 0;
    padding-bottom: .8em;
    border-bottom: 1px solid rgba(0,0,0,.1);
    margin-top: .5em;
    margin-bottom: 1em;
}
.article-comment-wrap .reply-item{
    width: 100%;
    overflow: hidden;
}
.article-comment-wrap .content-wrap .nickname, .article-comment-wrap .reply-content-wrap .reply-nickname{
    font-weight: 400;
    margin-top: .2em;
    padding: .2em;
}
.article-comment-wrap .content-wrap .info, .article-comment-wrap .article-comment-wrap .content-wrap .reply-info{
    width: 100%;
    color: #999;
}
.article-comment-wrap .reply-content-wrap{
    margin-left: 2.3em;
    margin-top: .7em;
}
.article-comment-wrap .reply-item{
    padding: 0;
}
.article-comment-wrap .reply-user-head{
    width: 1.8em;
    height: 1.8em;
    overflow: hidden;
    float: left;
    margin-top: .8em;
}
.article-comment-wrap .reply-user-head img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.article-comment-wrap .reply-content-wrap .reply-info{
    color: #999;
    padding: .2em 0;
}
.article-comment-wrap .reply-content-wrap .reply-nickname{
    display: inline-block;
}
.article-comment-wrap .content-wrap p{
    display: inline-block;
    margin: .5em 0;
}
.article-comment-wrap .view-more{
    margin-top: 1em;
    margin-bottom: 1em;
}
.article-comment-wrap .view-more a{
    padding: 2px 4px;
    border-radius: 4px;
    transition: all ease .3s;
}
.article-comment-wrap .view-more a:hover{
    color: white;
    background-color: #e44c65;
}
.article-comment-wrap .comment-item .info span, .article-comment-wrap .reply-content-wrap .reply-info span{
    margin-right: .5em;
    padding: 2px 4px;
}
.article-comment-wrap .comment-item .info span.btn-hover, .article-comment-wrap .reply-content-wrap .reply-info span.btn-hover{
    cursor: pointer;
    transition: all .3s ease;
    border-radius: 3px;
}
.article-comment-wrap .comment-item .info span.btn-hover:hover, .article-comment-wrap .reply-content-wrap .reply-info span.btn-hover:hover{
    color: white;
    background-color: #e44c65;
}
@media screen and (max-width: 1000px){
    .article-comment-wrap{
        width: 90%;
    }
    .article-comment-wrap .multi-border-hl .email input {
        width: 10rem;
    }
    .article-comment-wrap .multi-border-hl .email .border {
        width: 10rem;
    }
}
@media screen and (min-width: 736px){
    .article-comment-wrap .user-head{
        transition: transform ease .5s;
    }
    .article-comment-wrap .user-head:hover{
        transform:rotate(180deg);
    }
    .article-comment-wrap .reply-user-head{
        transition: transform ease .5s;
    }
    .article-comment-wrap .reply-user-head:hover{
        transform:rotate(180deg);
    }
}
@media screen and (max-width: 736px){
    .article-comment-wrap{
        margin: 1em 0;
        width: 100%;
    }

    .article-comment-wrap .multi-border-hl {
        font-size: .85em;
        text-transform: uppercase;
        margin: 0;
        padding: .3em 0;
    }

    .article-comment-wrap .multi-border-hl .email input {
        width: 8rem;
        font-size: .85em;
    }
    .article-comment-wrap .multi-border-hl .email .border {
        width: 8rem;
    }

    .article-comment-wrap .comment-box{
        font-size: .85em;
        padding: .5em 1em;
        height: 11em;
    }
    .article-comment-wrap .comment-box.min{
        height: 3em;
    }
    .article-comment-wrap .comment-box .comment-box-write{
        margin: .5em 0;
    }
    .article-comment-wrap .comment-box-write .textarea-container{
        margin-left: 3.5em;
    }
    .article-comment-wrap .comment-ul, .article-comment-wrap .reply-box{
        width: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
        font-size: 1em;
    }
    .article-comment-wrap .comment-box .comment-textarea{
        padding: .3em .6em;
        outline: 0;
        resize: none;
        display: inline-block;
        height: 5em;
        font-size: 1em;
    }
    .article-comment-wrap .comment-box-oper .btn-submit{
        padding: .5em .5em;
        border-radius: 4px;
        color: white;
    }
    .article-comment-wrap .comment-list{
        font-size: .85em;
    }
    .article-comment-wrap .comment-list .header-page{
        line-height: 1.5;
        height: 2em;
        font-size: .9em;
    }
    .article-comment-wrap .header-page span{
        padding: 0 2px;
    }
    .article-comment-wrap .comment-item .content-wrap{
        margin-left: 3.5em;
        overflow: hidden;
        padding: .2em 0;
    }
    .article-comment-wrap .comment-item .content-wrap .nickname, .article-comment-wrap .reply-nickname{
        font-weight: 400;
        margin-top: .2em;
        font-size: .85em;
    }
    .article-comment-wrap .reply-user-head{
        width: 1.8em;
        height: 1.8em;
        margin-top: .8em;
    }
    .article-comment-wrap .reply-item .reply-content-wrap >p{
        margin: .3em 0;
        font-size: .85em;
    }
    .article-comment-wrap .comment-item .info, .article-comment-wrap .reply-content-wrap .reply-info{
        font-size: .85em;
        padding: .5em 0;
    }
    .article-comment-wrap .reply-content-wrap{
        margin-left: 2.3em;
        margin-top: .5em;
    }
    .article-comment-wrap .view-more{
        margin-top: .5em;
        margin-bottom: .5em;
    }

    .article-comment-wrap .user-head{
        width: 3em;
        height: 3em;
        overflow: hidden;
        float: left;
        margin-top: .5em;
    }

}.spin {
    color: #108ee9;
    vertical-align: middle;
    text-align: center;
    opacity: 0;
    position: absolute;
    -webkit-transition: -webkit-transform .3s cubic-bezier(.78,.14,.15,.86);
    transition: -webkit-transform .3s cubic-bezier(.78,.14,.15,.86);
    transition: transform .3s cubic-bezier(.78,.14,.15,.86);
    font-size: 12px;
    display: none;
}
.spin-loading{
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 4;
}
.spin-loading>div>.spin{
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 4;
}
.spin-spinning {
    opacity: 1;
    position: static;
    display: inline-block;
}
.spin-blur{
    overflow: hidden;
    opacity: .7;
    -webkit-filter: blur(.5px);
    filter: blur(.5px);
    -webkit-transform: translateZ(0);
}
.spin-container{
    -webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);
    transition: all .3s cubic-bezier(.645,.045,.355,1);
    position: relative;
}
@-webkit-keyframes rotate_pacman_half_up {
    0% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg); }

    50% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg); }

    100% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg); } }

@keyframes rotate_pacman_half_up {
    0% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg); }

    50% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg); }

    100% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg); } }

@-webkit-keyframes rotate_pacman_half_down {
    0% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg); }

    50% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg); }

    100% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg); } }

@keyframes rotate_pacman_half_down {
    0% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg); }

    50% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg); }

    100% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg); } }

@-webkit-keyframes pacman-balls {
    75% {
        opacity: 0.7; }

    100% {
        -webkit-transform: translate(-100px, -6.25px);
        transform: translate(-100px, -6.25px); } }

@keyframes pacman-balls {
    75% {
        opacity: 0.7; }

    100% {
        -webkit-transform: translate(-100px, -6.25px);
        transform: translate(-100px, -6.25px); } }
.pacman {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -150px;
}
.pacman > div:first-of-type {
    width: 0px;
    height: 0px;
    border-right: 25px solid transparent;
    border-top: 25px solid #e44c65;
    border-left: 25px solid #e44c65;
    border-bottom: 25px solid #e44c65;
    border-radius: 25px;
    -webkit-animation: rotate_pacman_half_up 0.5s 0s infinite;
    animation: rotate_pacman_half_up 0.5s 0s infinite;
}
.pacman > div:nth-child(2) {
    width: 0;
    height: 0;
    border-right: 25px solid transparent;
    border-top: 25px solid #e44c65;
    border-left: 25px solid #e44c65;
    border-bottom: 25px solid #e44c65;
    border-radius: 25px;
    -webkit-animation: rotate_pacman_half_down 0.5s 0s infinite;
    animation: rotate_pacman_half_down 0.5s 0s infinite;
    margin-top: -50px;
}
.pacman > div:nth-child(3), .pacman > div:nth-child(4), .pacman > div:nth-child(5), .pacman > div:nth-child(6) {
    background-color: #e44c65;
    border-radius: 100%;
    margin: 2px;
    width: 10px;
    height: 10px;
    position: absolute;
    -webkit-transform: translate(0, -6.25px);
    -ms-transform: translate(0, -6.25px);
    transform: translate(0, -6.25px);
    top: 25px;
    left: 100px;
}
.pacman > div:nth-child(3) {
    -webkit-animation: pacman-balls 1s 0.33s infinite linear;
    animation: pacman-balls 1s 0.33s infinite linear;
}
.pacman > div:nth-child(4) {
    -webkit-animation: pacman-balls 1s 0.66s infinite linear;
    animation: pacman-balls 1s 0.66s infinite linear;
}
.pacman > div:nth-child(5) {
    -webkit-animation: pacman-balls 1s 0.99s infinite linear;
    animation: pacman-balls 1s 0.99s infinite linear;
}
@keyframes spin {
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        transform: translate(-50%, -50%) rotate(0deg)
    }
    to {
        -webkit-transform: translate(-50%, -50%) rotate(1turn);
        transform: translate(-50%, -50%) rotate(1turn)
    }
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: translate(-50%, -50%) rotate(0deg);
        transform: translate(-50%, -50%) rotate(0deg)
    }
    to {
        -webkit-transform: translate(-50%, -50%) rotate(1turn);
        transform: translate(-50%, -50%) rotate(1turn)
    }
}
@keyframes colorFadeIn {
    from {
        background-color: rgba(0,0,0,0);
    }

    to {
        background-color: rgba(0,0,0,.9);
    }
}
@keyframes colorFadeOut {
    from {
        background-color: rgba(0,0,0,0.9);
    }

    to {
        background-color: rgba(0,0,0,0);
    }
}
.pic-viewer {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2500;
    background: rgba(0,0,0,.9);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3em;
    animation: colorFadeIn .5s ease;
    touch-action: none;
}
.pic-viewer .loading-container {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    -webkit-animation: fadeIn 1s linear forwards;
    animation: fadeIn 1s linear forwards;
}
.pic-viewer .loading-container.out {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    -webkit-animation: fadeOut .5s linear forwards;
    animation: fadeOut .5s linear forwards;
}
.pic-viewer .loading-container .loading {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #000;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}
.pic-viewer-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pic-viewer .pic {
    max-width: 100%;
    max-height: 100%;
}

@media screen and (max-width: 1200px){
    .pic-viewer {
        padding: 2.5em;
    }
}

@media screen and (max-width: 1000px){
    .pic-viewer {
        padding: 1.5em;
    }
}

@media screen and (max-width: 736px){
    .pic-viewer {
        padding: .5em;
    }
}.page404-wrap{
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    font-family: "PingFang SC", "Helvetica Neue", "Hiragino Sans GB", "Segoe UI", "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", sans-serif;
    overflow: hidden;
}
.page404-wrap .container {
    width: 800px;
    height: 800px;
    margin: 15% auto;
}
.page404-wrap #head {
    color: #4F565F;
    font-size : 120px;
    font-family: PingFang-SC-Semibold;
    line-height: 168px;
}
.page404-wrap #words {
    color: #76808E;
    font-size : 24px;
    font-family : PingFang-SC-Regular;
    line-height: 33px;
}
.page404-wrap .container img{
    margin-left: 80px;
}
.page404-wrap .container .text-wrap{
    float: left;
}
.page404-wrap .container .image-wrap{
    float: left;
}

@media screen and (max-width: 1000px){
    .page404-wrap .container{
        width: 100%;
        padding: 0 10%;
        margin: 5% auto;
    }
    .page404-wrap #head{
        font-size: 8em;
    }
    .page404-wrap #words{
        font-size: 1em;
        line-height: 4em;
    }
    .page404-wrap .container img{
        max-width: 90%;
        margin-left: 0;
    }
    .page404-wrap .container .text-wrap{
        width: 100%;
        text-align: center;
        clear: both;
    }
    .page404-wrap .container .image-wrap{
        clear: both;
        width: 100%;
        text-align: center;
    }
}#lolili_music{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1699;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}
#lolili_music *::-webkit-scrollbar{
    width: 3px;
    height: 3px;
}
#lolili_music .mask{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    background: rgba(0,0,0,.5);
    pointer-events: auto;
}
#music_wedgit{
    width: 3em;
    height: 3em;
    border-radius: 50%;
    background: white;
    overflow: hidden;
    border: 1px solid white;
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.3);
    position: fixed;
    z-index: 9;
    top: 20%;
    left: 2em;
    touch-action: none;
    display: block;
    -webkit-user-select: none;
    pointer-events: auto;
}
#music_wedgit img{
    width: 100%;
    height: 100%;
}
#music_wedgit::before{
    content: "";
    position: absolute;
    z-index: 9;
    display: block;
    width: 100%;
    height: 100%;
}
#music_wedgit.music_playing::before{
    content: "";
    position: absolute;
    z-index: 9;
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(/static/images/default/music/RfCqLoe9.gif);
    background-repeat: no-repeat;
    background-position: 50% 30%;
    background-size: 40%;
    background-color: rgba(0,0,0,0.2);
}
#music_wedgit.music_playing::after{
    content: "";
    position: absolute;
    top: 0;
    z-index: 9;
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(/static/images/default/music/RfCqLoe9.gif);
    transform: scaleY(-1);
    background-repeat: no-repeat;
    background-position: 50% 30%;
    background-size: 40%;
}

@media screen and (min-width: 1400px){

}@-webkit-keyframes rotateAlways{
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes rotateAlways{
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

.music-detail{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: white;
    pointer-events: auto;
    font-weight: 300;
    position: relative;
}
.music-detail .top-tip{
    position: fixed;
    top: 50%;
    width: 100%;
    height: 3em;
    z-index: 203;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -1.5em;
    transition: opacity ease .8s;

    opacity: 0;
}
.music-detail .top-tip.show{
    opacity: 1;
}
.music-detail .top-tip >span{
    display: block;
    padding: .6em .75em;
    font-size: .85em;
    background: black;
    color: white;
    border-radius: 5px;
}
.music-detail .music-cover{
    width: 100%;
    background-color: #3B3B3B;
    padding-bottom: 2em;
    padding-top: 1em;
    overflow: hidden;
    position: relative;
}
.info-blurbg-wrapper{
    position: absolute;
    overflow: hidden;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.info-blurbg-wrapper:before{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color:rgba(58,58,58,.3);;
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#48000000, endColorstr=#48000000);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
}
.info-blurbg{
    position: absolute;
    left: -40px;top: -40px;
    width: calc(100% + 80px);
    height: calc(100% + 80px);
    z-index: 10;
    background-repeat: no-repeat;
    background-size: 100%;
    filter: blur(40px);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
}
.cover-info{
    width: 100%;
    z-index: 100;
    position: relative;
    height: 100%;
}
.cover-info .cover-scroll-view{
    width: 200%;
    height: calc(100% - 3em);
    display: flex;
    position: relative;
    overflow: hidden;
}
.cover-info .lrc-list{
    width: 50%;
    height: 100%;
    text-align: center;
    color: white;
    font-size: .9em;
    padding: 0 3em;
    padding-top: 10%;
    transition: transform ease .5s;
}
.cover-info .lrc-list > p{
    margin: .25em 0;
    min-height: 1.25em;
}
.cover-info .lrc-list .now {
    color: #ec7b99;
}
.cover-info .cover-img{
    width: 50%;
    height: 100%;
    text-align: center;
}
.cover-info .cover-img >img{
    max-width: 80%;
    height: 100%;
    border-radius: 5px;
}
.cover-info .caption{
    text-align: center;
    color: white;
    margin: 0 auto;
    margin-bottom: .85em;
    font-size: 1.25em;
    position: relative;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    padding: 0 3em;
}
.cover-info .caption .back-btn{
    position: absolute;
    left: .85em;
    top: 4px;
    width: 22px;
    height: 22px;
    display: block;
    background: url("/static/images/default/music/back.png") no-repeat center;
    border-radius: 50%;
    background-size: 26px;
    z-index: 9;
    -webkit-user-select: none;
}
.cover-info .scroll-view-btns{
    width: 100%;
    height: 2em;
    line-height: 2em;
    text-align: center;
}
.cover-info .scroll-view-btns >span{
    display: inline-block;
    background-color: rgba(255,255,255,.5);
    width: 8px;
    height: 8px;
    border-radius: 8px;
    margin: 0 2px;
    cursor: pointer;
    -webkit-user-select: none;
}
.cover-info .scroll-view-btns >span.now-scroll{
    width: 14px;
    border-radius: 8px;
    background-color: white;
}
.music-detail .music-summary{
    width: 100%;
    height: 100%;
    background: white;
    position: absolute;
    left: 0;
    top: 100vw;
    z-index: 199;
    /*可开启浏览器硬件加速*/
    transform: translate3d(0,0,0);
    transition: top cubic-bezier(0, 0, 0.2, 1) .2s;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.music-detail .music-summary.all{
    top: 55px;
}
.music-detail .music-summary .summary-tab{
    width: 100%;
    height: 2.75em;
    box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
    font-size: .75em;
    color: #e44c65;
    padding: 0 2em;
    cursor: pointer;
}
.music-summary .summary-tab span{
    border-bottom: 2px solid #e44c65;
    display: inline-block;
    height: 2.7em;
    padding: .5em 1em;
}
.music-summary .summary-inner {
    width: 100%;
    padding: 0 .75em;
    font-size: .75em;
}
.music-summary .summary-inner .caption{
    color: black;
    font-size: 1.25em;
    margin: .5em 0;
}
.music-summary .summary-inner .other-info{
    color: #949494;
}
.music-detail .music-oper{
    width: 100%;
    height: 75px;
    background: #585858;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 200;
}
.music-detail .music-btns{
    width: 100%;
    margin-top: 3px;
}
.music-detail .music-btns .btn-wrap{
    width: 20%;
    text-align: center;
    float: left;
    position: relative;
}
.music-detail .music-btns .btn{
    background: url("/static/images/default/music/btns.png") no-repeat;
    width: 25px;
    height: 25px;
    display: inline-block;
    background-size: 205px 25px;
    -webkit-user-select: none;
    cursor: pointer;
}
.music-detail .music-btns .btn-wrap.lighting:before{
    content: "";
    background-color: rgba(255,255,255,.7);
    border-radius: 50%;
    box-shadow: 0 0 30px 20px rgba(255, 255, 255, 1);
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    width: 1px;
    height: 1px;
    margin-top: -5px;
    animation-name: fadeOut;
    animation-duration: .25s;
    animation-fill-mode: both;
}
.music-btns .btn.mode{
    background-position: 0 0;
}
.music-btns .btn.before{
    background-position: -25px 0;
}
.music-btns .btn.play{
    background-position: -50px 0;
}
.music-btns .btn.next{
    background-position: -78px 0;
}
.music-btns .btn.pause{
    background-position: -131px 0;
}
.music-btns .btn.list{
    background-position: -105px 0;
}
.music-btns .btn.mode1{
    background-position: -154px 0;
}
.music-btns .btn.mode2{
    background-position: -178px 0;
}
.music-process-wrap{
    width: 100%;
    padding: 4px 4%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
    -webkit-user-select: none;
}
.music-process-wrap .process-timer{
    font-size: .65em;
    color: rgba(255,255,255,.5);
    display: inline-block;
    width: 3.5em;
    text-align: center;
    cursor: default;
}
.music-process-wrap .process-bar{
    width: calc(100% - 7em);
    height: 2px;
    display: inline-block;
    margin: 0 12px;
    position: relative;
}
.music-process-wrap .process-btn-wrap {
    position: absolute;
    z-index: 3;
    width: 17px;
    height: 17px;
    top: 50%;
    margin-top: -9px;
    left: -9px;
    cursor: pointer;
    -webkit-user-select: none;
    touch-action: none;
}
.music-process-wrap .process-btn{
    width: 11px;
    height: 11px;
    background: white;
    box-shadow: 0 0 0 3px rgba(228, 76, 101, 0.6);
    border-radius: 50%;
    pointer-events: none;
    margin: 3px;
}
.music-process-wrap .process-btn-loading{
    width: 16px;
    height: 16px;
    background: url('/static/images/default/loading.png') no-repeat;
    background-size: 100%;
    animation: rotateAlways 1s infinite;
    pointer-events: none;
}
.music-process-wrap .process-inner{
    height: 2px;
    background-color: #e44c65;
    width: 0;
    position: absolute;
    z-index: 2;
    border-radius: 2px;
}
.music-process-wrap .process-bg{
    width: 100%;
    height: 2px;
    background-color: #eba8bb;
    position: absolute;
    z-index: 1;
    border-radius: 2px;
}
.music-detail .music-list-box{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 201;
}
.music-list-box .music-list-box-mask{
    width: 100%;
    height: 35%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.3);
}
.music-list-box .music-list-box-wrap{
    width: 100%;
    height: 65%;
    position: absolute;
    top: 35%;
    left: 0;
    background: white;
}
.music-list-box-wrap .music-box-top{
    width: 100%;
    height: 2.6em;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    font-size: .85em;
    padding: 0 1em;
    position: relative;
}
.music-list-box-wrap .music-list{
    width: 100%;
    height: calc(100% - 2.6em - 2.2em);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 .5em;
}
.music-list-box-wrap .music-list .list-item{
    width: 100%;
    display: flex;
    align-items: center;
    height: 2.4em;
    border-bottom: 1px solid #eee;
    cursor: default;
    position: relative;
}
.music-list-box-wrap .music-list .list-item .music-caption{
    font-size: .85em;
    max-width: calc(100% - 2.5em - 6em);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.music-list-box-wrap .music-list .list-item .music-author{
    font-size: .75em;
    color: #e44c65;
    max-width: 5.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 5px;
    white-space: nowrap;
}
.music-list-box-wrap .music-list .list-item .music-delete{
    width: 3em;
    text-align: center;
    color: #e44c65;
    position: absolute;
    right: 0;
    top: 0;
    font-size: .75em;
    -webkit-user-select: none;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.music-list-box-wrap .music-list .list-item.playing .music-caption{
    color: #e44c65;
    padding-left: .75em;
}
.music-list-box-wrap .music-list .list-item.playing{
    color: #ff728a;
    position: relative;
}
.music-list-box-wrap .music-list .list-item.playing::before{
    content: "";
    position: absolute;
    left: -.5em;
    top: 0;
    width: 3px;
    background-color: #e44c65;
    height: 100%;
}
.music-list-box-wrap .btn-group{
    width: 100%;
    height: 2.4em;
    position: absolute;
    left: 0;
    bottom: 0;
    line-height: 2.4em;
    font-size: 1em;
    text-align: center;
    border-top: 1px solid #ddd;
}
.music-list-box-wrap .btn-group >span{
    display: block;
    -webkit-user-select: none;
    cursor: pointer;
}

.music-volume-control{
    display: flex;
    align-items: center;
    font-size: .75em;
    color: #8e98a0;
    position: absolute;
    right: 1em;
}
.music-volume-control .volume-bar-wrap{
    width: 5em;
    height: 6px;
    background-color: #eba8bb;
    border-radius: 6px;
    position: relative;
    margin: 0 10px;
}
.music-volume-control .volume-bar-inner{
    width: 50%;
    height: 6px;
    background-color: #e44c65;
    border-radius: 6px;
    position: absolute;
}
.music-volume-control .volume-bar-btn{
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 7px;
    background-color: white;
    box-shadow: 0 0 3px #e44c65;
    transition: box-shadow .3s;
    cursor: pointer;
    z-index: 1;
    top: -4px;
    -webkit-user-select: none;
    touch-action: none;
}
.music-volume-control .volume-bar-btn:hover{
    box-shadow: 0 0 5px #e44c65;
}
.music-volume-control .volume-percent{
    display: inline-block;
    width: 3em;
}

@media screen and (min-width: 1400px){
    .music-detail{
        width: 400px;
        float: right;
        height: 100%;
        overflow: hidden;
        background: white;
        pointer-events: auto;
        font-weight: 300;
        position: relative;
    }
    .music-detail .music-summary{
        top: 400px;
    }
}

@media screen and (min-width: 736px){
    .music-list-box-wrap .music-list .list-item .music-delete{
        transition: transform ease .5s;
    }
    .music-list-box-wrap .music-list .list-item .music-delete:hover{
        transform: rotate(180deg);
    }
}.message-board .message-board-ani{
    width: 100%;
}
.message-board .message-board-wrap{
    overflow: hidden;
    padding: 2em 1.5em;
    max-width: 1200px;
    margin: 0 auto;
    background: rgba(255,255,255,.85);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.message-board .blog-group{
    display: none;
}
.message-board-wrap .message-board-content{
    width: 100%;
}
.message-board-wrap .message-board-content h2{
    font-size: 1.2em;
    font-weight: 500;
}

@media screen and (max-width: 736px){
    .message-board .message-board-wrap {
        width: 100%;
        overflow: hidden;
        padding: 1em 1em;
    }
    .message-board-wrap .message-board-content h2{
        font-size: 1em;
    }
    .message-board-wrap .message-board-content p{
        width: 100%;
        font-size: .85em;
        margin: .3em 0;
        line-height: 2;
    }
}.about .about-wrap{
    overflow: hidden;
    padding: 5em 3em;
    max-width: 1200px;
    margin: 0 auto;
    background: rgba(255,255,255,.85);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.about .blog-group{
    display: none;
}
.about-wrap .about-content{
    display: flex;
}
.about-wrap .about-content h2{
    font-size: 1.2em;
    font-weight: 500;
}
.about-wrap .about-content .mini-banner{
    width: 30%;
}
.about-wrap .about-content .about-me{
    width: 70%;
    padding: 0 2em;
}
.about-wrap .about-content .mini-banner img{
    max-width: 100%;
}

@media screen and (max-width: 736px){
    .about .about-wrap {
        width: 100%;
        overflow: hidden;
        padding: 1em 1em;
    }
    .about-wrap .about-content h2{
        font-size: 1em;
    }
    .about-wrap .about-content p{
        width: 100%;
        font-size: .85em;
        margin: .3em 0;
        line-height: 2;
    }
    .about-wrap .about-content{
        display: block;
    }
    .about-wrap .about-content .mini-banner{
        width: 100%;
        text-align: center;
        margin-bottom: 1em;
    }
    .about-wrap .about-content .mini-banner img{
        max-width: 80%;
    }
    .about-wrap .about-content .about-me{
        width: 100%;
        padding: 0 .5em;
    }
}html.admin{
    overflow-x: initial;
}
html.admin body{
    overflow-x: initial;
}
.main-wrap.admin{
    min-width: 1000px;
    font-weight: 300;
    position: relative;
    min-height: 100%;
}

#admin-header{
    width: 100%;
    height: 60px;
    position: fixed;
    background: white;
    border-bottom: 1px solid #f1f2f7;
    padding: 0 15px;
    display: flex;
    align-items: center;
    z-index: 999;
}
#admin-header .sidebar-toggle-box {
    display: inline-block;
    padding-right: 15px;
}
#admin-header .sidebar-toggle-box .icon-reorder {
    cursor: pointer;
    display: inline-block;
    font-size: 20px;
}
.icon-reorder:before {
    content: "\F0C9";
    font-family: FontAwesome;
}
#admin-header a.logo {
    font-size: 21px;
    color: #2e2e2e;
    display: inline-block;
}
#admin-header a.logo span{
    font-size: 12px;
    padding-left: 5px;
}
#admin-header-nav{
    position: absolute;
    right: 20px;
    height: 60px;
    display: flex;
    align-items: center
}
#admin-header-nav >.user{

}
#admin-header-nav >.user span.well{
    color: #e44c65;
}
#admin-header-nav ul{
    margin: 0;
}
#admin-header-nav ul li{
    display: inline-block;
}
.admin-side-nav{
    height: 100%;
    position: fixed;
    left: -180px;
    top: 0;
    width: 180px;
    background: #2a3542;
    padding-top: 60px;
    transition: left .5s ease;
    overflow: hidden;
}
.admin.showSideNav .admin-side-nav{
    left: 0;
}
.admin-side-nav ul{
    margin: 0;
    padding: 0;
}
.admin-side-nav ul.sidebar-menu li {
    line-height: 20px!important;
    margin-bottom: 5px;
    margin-left: 10px;
    margin-right: 10px;
    width: 160px;
    padding: 0;
}
.admin-side-nav ul.sidebar-menu {
    margin: 15px 0 0 0;
    width: 200px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.admin-side-nav ul.sidebar-menu .menu-li.active >a, .admin-side-nav ul.sidebar-menu li a.active, .admin-side-nav ul.sidebar-menu li a:hover, .admin-side-nav ul.sidebar-menu li a:focus {
    background: #35404d;
    color: #fff;
    display: block;
    border-radius: 4px;
    transition: all .3s ease;
}

.admin-side-nav ul.sidebar-menu li a {
    color: #8b9199;
    text-decoration: none;
    display: block;
    padding: 15px 0 15px 10px;
    font-size: 14px;
    outline: 0;
    transition: all .3s ease;
}
.admin-side-nav ul.sidebar-menu li ul.sub-menu li a:hover {
    color: #e44c65;
}
.admin-side-nav ul.sidebar-menu li ul.sub-menu li a.sub-active{
    color: #e44c65;
}
.admin-side-nav ul.sidebar-menu li a i {
    font-size: 16px;
    padding-right: 6px;
    font-style: normal;
}
.admin-side-nav i[class^="icon-"] {
    width: 22px;
    display: inline-block;
    font-family: FontAwesome;
}
.admin-side-nav .icon-dashboard:before {
    content: "\F0E4";
}
.admin-side-nav .icon-book:before {
    content: "\F02D";
}
.admin-side-nav .icon-cogs:before {
    content: "\F085";
}
.admin-side-nav .icon-link:before {
    content: "\F0C1";
}
.admin-side-nav .icon-music:before {
    content: "\F001";
}
.admin-side-nav .icon-user:before {
    content: "\F007";
}
.admin-side-nav .icon-motto:before {
    content: "\F249";
}
.admin-side-nav>ul>li>a .arrow {
    border-bottom: 4px solid transparent;
    border-left: 4px solid #A0A0A0;
    border-top: 4px solid transparent;
    float: right;
    height: 0;
    margin-right: 10px;
    margin-top: 6px;
    width: 0;
}
.admin-side-nav>ul>li>a .arrow.open {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #A0A0A0;
    float: right;
    height: 0;
    margin-right: 10px;
    margin-top: 8px;
    width: 0;
}
.admin-side-nav ul.sidebar-menu li ul.sub-menu li {
    background: #35404D;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    cursor: pointer;
}
.admin-side-nav ul.sidebar-menu li ul.sub-menu li a {
    font-size: 12px;
    padding: 0 0 0 32px;
    line-height: 35px;
    height: 35px;
    transition: all .3s ease;
    color: #737B83;
}
.admin-main{
    width: 100%;
    padding: 80px 20px 20px 20px;
    transition: padding-left .5s ease;
    overflow: hidden;
    min-height: 100vh;
}
.admin.showSideNav .admin-main{
    padding-left: 200px;
}

/*common*/
.admin-form-group{
    width: 750px;
    overflow: hidden;
}
.admin-form-input{
    display: inline-block;
    width: 100%;
    font-size: 20px;
    padding: 5px;
    font-weight: 300;
    margin-bottom: 1em;
}
.admin-form-radio{
    display: inline-block;
    font-size: 20px;
    padding: 5px;
    font-weight: 300;
    margin-bottom: 1em;
    position: relative;
    top: -2px;
}
.admin-form-group > label + label{
    margin-left: .75em;
}
.admin-form-textarea{
    display: inline-block;
    width: 100%;
    font-size: 15px;
    padding: 5px;
    font-weight: 300;
    margin-bottom: 1em;
    min-height: 80px;
    max-width: 100%;
}

.main-wrap.admin .btn{
    border-radius: 3px;
    transition: all .2s ease;
    font-size: 14px;
    display: inline-block;
    margin-right: 10px;
    padding: 5px 10px;
}
.main-wrap.admin .btn:last-child{
    margin-right: 0;
}
.main-wrap.admin .btn.btn-cancel{
    background: white;
    border: 1px solid #ccc;

}
.main-wrap.admin .btn.btn-cancel:hover{
    background: #e44c65;
    color: white;
    border-color: #e44c65
}
.main-wrap.admin .btn.btn-confirm{
    background: #e44c65;
    color: white;
    border: 1px solid #e44c65;
}
.main-wrap.admin .btn.btn-confirm:hover{
    background: #e41526;
}.admin-article-list{
    width: 100%;
    overflow: hidden;
}
.admin-article-list .article-item{
    border: 1px solid #ddd;
    width: 100%;
    padding: 0;
}
.admin-article-list .article-item-head{
    background: #f5f5f5;
    padding: 10px 15px;
}
.admin-article-list .article-other-info{
    padding: 10px 15px;
}
.admin-article-list .article-other-info span {
    display: inline-block;
    margin-right: 5px;
}
.admin-article-list .article-other-info span a {
    margin: 2px 5px 2px 0;
    font-size: 14px;
    display: inline-block;
}
.admin-article-list .article-other-info span a::before {
    font-family: FontAwesome;
    display: inline-block;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    margin: 0 5px 0 0;
    background-color: #666;
    -webkit-background-size: 18px;
    -moz-background-size: 18px;
    background-size: 18px;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 100px;
    -webkit-transition: .2s ease all;
    -moz-transition: .2s ease all;
    -ms-transition: .2s ease all;
    transition: .2s ease all;
    cursor: pointer;
    color: #fff;
}
.admin-article-list .article-other-info span a:hover::before {
    background-color: #DADADA;
    color: #232425;
}
.admin-article-list .article-other-info span .article-author::before {
    content: '\F007';
}
.admin-article-list .admin-article-list .article-other-info span .article-view-num::before {
    content: '\F06E';
}
.admin-article-list .article-other-info span .article-date::before {
    content: '\F133';
}
.admin-article-list .article-other-info span .article-edit::before {
    content: '\F044';
}
.admin-article-list .article-other-info span .article-delete::before {
    content: "\F014";
}
.admin-article-list .article-stick{
    background: white;
    border: 1px solid #ccc;
    padding: 6px 12px;
    border-radius: 4px;
    transition: all .2s ease;
}
.admin-article-list .article-stick:hover{
    background: #e44c65;
    color: white;
    border-color: #e44c65;
}
.admin-article-list .article-stick-false{
    background: #e44c65;
    color: white;
    border: 1px solid #e44c65;
    padding: 6px 12px;
    border-radius: 4px;
    transition: all .2s ease;
}
.admin-article-list .article-stick-false:hover{
    background: #e41526;
}
.admin-article-list .load-more{
    width: 100%;
    overflow: hidden;
    text-align: center;
}
.admin-article-list .load-more >a{
    padding: .3em .5em;
    display: inline-block;
    transition: background-color ease .5s;
}
.admin-article-list .load-more >a:hover{
    background: #e44c65;
    color: white;
    animation: links .1s 3;
}.admin-article-edit{
    width: 100%;
    overflow: hidden;
}

.admin-article-edit .editor-wrap{
    width: 80%;
    float: left;
    overflow: hidden;
    padding: 10px;
}
.admin-article-edit .editor-tool-bar{
    width: 20%;
    float: left;
    overflow: hidden;
    padding: 10px;
}
.admin-article-edit .tool-wrap{
    border: 1px solid #ccc;
    margin-bottom: 15px;
}
.admin-article-edit  .tool-title{
    font-size: 14px;
    padding: 8px 12px;
    margin: 0;
    line-height: 1.4;
    font-weight: normal;
    border-bottom: 1px solid #ccc;
}
.admin-article-edit  .tool-content{
    padding: 8px 12px;
}
.admin-article-edit .btn{
    border-radius: 3px;
    transition: all .2s ease;
    font-size: 14px;
    display: inline-block;
    margin-right: 10px;
    padding: 5px 10px;
}
.admin-article-edit .btn.cancel{
    background: white;
    border: 1px solid #ccc;

}
.admin-article-edit .btn.cancel:hover{
    background: #e44c65;
    color: white;
    border-color: #e44c65
}
.admin-article-edit .btn.confirm{
    background: #e44c65;
    color: white;
    border: 1px solid #e44c65;
}
.admin-article-edit .btn.confirm:hover{
    background: #e41526;
}
.admin-article-edit .edit-title input{
    width: 100%;
    font-size: 20px;
    padding: 5px;
    font-weight: 300;
    margin-bottom: 1em;
}
.admin-article-edit .edit-title .summary{
    width: 100%;
    font-size: 13px;
    font-weight: 300;
    height: 120px;
    resize: none;
    border: 1px solid #ccc;
    padding: 5px;
    overflow-y: auto;
    margin-bottom: 1em;
}
.admin-article-edit .editor{
    width: 100%;
    overflow: hidden;
    padding: 10px 0;
}
.admin-article-edit .editor .tools{
    width: 100%;
    overflow: hidden;
}
.admin-article-edit .editor .tools a{
    padding: 5px 10px;
    transition: .2s ease;
    border: 1px solid #ccc;
    border-left: none;
    display: inline-block;
    margin: 10px 0;
}
.admin-article-edit .editor .tools a:first-child{
    border-left: 1px solid #ccc;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.admin-article-edit .editor .tools a:last-child{
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.admin-article-edit .editor .tools a.select{
    background: #e44c65;
    color: white;
    border-color: #e44c65;
}
.admin-article-edit .editor .tools a:hover{
    background: #e44c65;
    color: white;
    border-color: #e44c65;
}
.admin-article-edit .edit-area{
    width: 100%;
    height: calc(100vh - 150px);
    margin-top: 10px;
    font-weight: normal;
}
.admin-article-edit .edit-area > textarea{
    width: 49.5%;
    height: 100%;
    resize: none;
    border: 1px solid #ccc;
    padding: 5px;
    font-size: 13px;
    overflow: auto;
    font-weight: 300;
    float: left;
}
.admin-article-edit .editor .result-html{
    width: 49.5%;
    height: 100%;
    border: 1px solid #ccc;
    float: left;
    font-size: 13px;
    padding: 5px;
    overflow: auto;
}
.admin-article-edit .editor .result-html.grey{
    background-color: white;
}
.admin-article-edit pre.result-src{
    background: white!important;
}
.admin-article-edit pre.result-src code{
    color: inherit!important;
}
.admin-article-edit .result-src-content{
    height: 100%;
}
.admin-article-edit .result-src-content pre code{
    font-weight: 300;
}
.admin-article-edit .main-img-wrap{
    max-width: 100%;
    min-width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eee;
    margin-bottom: 1em;
    position: relative;
}
.admin-article-edit .main-img-wrap .mask{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    z-index: 1;
    transition: backgroud-color .3s ease;
    cursor: pointer;
}
.admin-article-edit .main-img-wrap .mask:hover{
    background-color: rgba(228,76,101,0.1);
}
.admin-article-edit .main-img-wrap >img{
    max-height: 100%;
    max-width: 100%;
}
.admin-pic-select{
    width: 850px;
    height: 560px;
    background-color: white;
    margin: 0 auto;
    overflow: hidden;
    font-weight: 300;
}

.admin-pic-select .upload-button {
    overflow: hidden;
    position: relative;
    padding: 5px 10px;
    background-color: #e44c65;
    border-radius: 3px;
    font-size: 14px;
    color: #ffffff;
    text-decoration: none;
    transition: .3s ease;
    display: inline-block;
}
.admin-pic-select .upload-button:hover{
    background-color: #e41526;
}
.admin-pic-select .upload-button input {
    position: absolute;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    opacity: 0;
    cursor: pointer;
}
.admin-pic-select .thumbs-box{
    width: 100%;
    height: 150px;
    overflow-y: auto;
    border: 1px solid #eee;
    margin: 15px 0;
}
.admin-pic-select .thumbs-box ul{
    padding: 5px 0;
    overflow: hidden;
    margin: 0;
}
.admin-pic-select .thumbs-box li{
    float: left;
    height: 110px;
    width: 110px;
    text-align: center;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    transition: .3s ease;
    margin: 10px;
}
.admin-pic-select .thumbs-box li:nth-of-type(6n - 5){
    margin-left: 30px;
}
.admin-pic-select .thumbs-box li img{
    max-width: 100px;
    max-height: 100px;
}
.admin-pic-select .thumbs-box li.select{
    border-color: #e44c65;
}
.admin-pic-select .thumbs-box li:hover{
    border-color: #e44c65;
}
.admin-pic-select .btn{
    border-radius: 3px;
    transition: all .2s ease;
    font-size: 14px;
    display: inline-block;
    margin-right: 10px;
    padding: 5px 10px;
}
.admin-pic-select .btn:last-child{
    margin-right: 0;
}
.admin-pic-select .btn.btn-cancel{
    background: white;
    border: 1px solid #ccc;

}
.admin-pic-select .btn.btn-cancel:hover{
    background: #e44c65;
    color: white;
    border-color: #e44c65
}
.admin-pic-select .btn.btn-confirm{
    background: #e44c65;
    color: white;
    border: 1px solid #e44c65;
}
.admin-pic-select .btn.btn-confirm:hover{
    background: #e41526;
}.rodal,
.rodal-mask {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3333;
}

.rodal {
    position: fixed;
}

/* -- mask -- */
.rodal-mask {
    position: absolute;
    background: rgba(0, 0, 0, .3);
}

/* -- dialog -- */
.rodal-dialog {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 3334;
    padding: 15px;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

/* -- close button -- */
.rodal-close {
    position: absolute;
    cursor: pointer;
    top: 16px;
    right: 16px;
    width: 16px;
    height: 16px;
}

.rodal-close:before,
.rodal-close:after {
    position: absolute;
    content: '';
    height: 2px;
    width: 100%;
    top: 50%;
    left: 0;
    margin-top: -1px;
    background: #999;
    border-radius: 100%;
    -webkit-transition: background .2s;
    transition: background .2s;
}

.rodal-close:before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.rodal-close:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.rodal-close:hover:before,
.rodal-close:hover:after {
    background: #333;
}

/* -- fade -- */
@-webkit-keyframes rodal-fade-enter {
    from {
        opacity: 0;
    }
}

@keyframes rodal-fade-enter {
    from {
        opacity: 0;
    }
}

.rodal-fade-enter {
    -webkit-animation: rodal-fade-enter both ease-in;
    animation: rodal-fade-enter both ease-in;
}

@-webkit-keyframes rodal-fade-leave {
    to {
        opacity: 0
    }
}

@keyframes rodal-fade-leave {
    to {
        opacity: 0
    }
}

.rodal-fade-leave {
    -webkit-animation: rodal-fade-leave both ease-out;
    animation: rodal-fade-leave both ease-out;
}

/* -- zoom -- */
@-webkit-keyframes rodal-zoom-enter {
    from {
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
}

@keyframes rodal-zoom-enter {
    from {
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
}

.rodal-zoom-enter {
    -webkit-animation: rodal-zoom-enter both cubic-bezier(0.4, 0, 0, 1.5);
    animation: rodal-zoom-enter both cubic-bezier(0.4, 0, 0, 1.5);
}

@-webkit-keyframes rodal-zoom-leave {
    to {
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
}

@keyframes rodal-zoom-leave {
    to {
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
}

.rodal-zoom-leave {
    -webkit-animation: rodal-zoom-leave both;
    animation: rodal-zoom-leave both;
}

/* -- slideDown -- */
@-webkit-keyframes rodal-slideDown-enter {
    from {
        -webkit-transform: translate3d(0, -100px, 0);
        transform: translate3d(0, -100px, 0);
    }
}

@keyframes rodal-slideDown-enter {
    from {
        -webkit-transform: translate3d(0, -100px, 0);
        transform: translate3d(0, -100px, 0);
    }
}

.rodal-slideDown-enter {
    -webkit-animation: rodal-slideDown-enter both cubic-bezier(0.4, 0, 0, 1.5);
    animation: rodal-slideDown-enter both cubic-bezier(0.4, 0, 0, 1.5);
}

@-webkit-keyframes rodal-slideDown-leave {
    to {
        -webkit-transform: translate3d(0, -100px, 0);
        transform: translate3d(0, -100px, 0);
    }
}

@keyframes rodal-slideDown-leave {
    to {
        -webkit-transform: translate3d(0, -100px, 0);
        transform: translate3d(0, -100px, 0);
    }
}

.rodal-slideDown-leave {
    -webkit-animation: rodal-slideDown-leave both;
    animation: rodal-slideDown-leave both;
}

/* -- slideLeft -- */
@-webkit-keyframes rodal-slideLeft-enter {
    from {
        -webkit-transform: translate3d(-150px, 0, 0);
        transform: translate3d(-150px, 0, 0);
    }
}

@keyframes rodal-slideLeft-enter {
    from {
        -webkit-transform: translate3d(-150px, 0, 0);
        transform: translate3d(-150px, 0, 0);
    }
}

.rodal-slideLeft-enter {
    -webkit-animation: rodal-slideLeft-enter both cubic-bezier(0.4, 0, 0, 1.5);
    animation: rodal-slideLeft-enter both cubic-bezier(0.4, 0, 0, 1.5);
}

@-webkit-keyframes rodal-slideLeft-leave {
    to {
        -webkit-transform: translate3d(-150px, 0, 0);
        transform: translate3d(-150px, 0, 0);
    }
}

@keyframes rodal-slideLeft-leave {
    to {
        -webkit-transform: translate3d(-150px, 0, 0);
        transform: translate3d(-150px, 0, 0);
    }
}

.rodal-slideLeft-leave {
    -webkit-animation: rodal-slideLeft-leave both;
    animation: rodal-slideLeft-leave both;
}

/* -- slideRight -- */
@-webkit-keyframes rodal-slideRight-enter {
    from {
        -webkit-transform: translate3d(150px, 0, 0);
        transform: translate3d(150px, 0, 0);
    }
}

@keyframes rodal-slideRight-enter {
    from {
        -webkit-transform: translate3d(150px, 0, 0);
        transform: translate3d(150px, 0, 0);
    }
}

.rodal-slideRight-enter {
    -webkit-animation: rodal-slideRight-enter both cubic-bezier(0.4, 0, 0, 1.5);
    animation: rodal-slideRight-enter both cubic-bezier(0.4, 0, 0, 1.5);
}

@-webkit-keyframes rodal-slideRight-leave {
    to {
        -webkit-transform: translate3d(150px, 0, 0);
        transform: translate3d(150px, 0, 0);
    }
}

@keyframes rodal-slideRight-leave {
    to {
        -webkit-transform: translate3d(150px, 0, 0);
        transform: translate3d(150px, 0, 0);
    }
}

.rodal-slideRight-leave {
    -webkit-animation: rodal-slideRight-leave both;
    animation: rodal-slideRight-leave both;
}

/* -- slideUp -- */
@-webkit-keyframes rodal-slideUp-enter {
    from {
        -webkit-transform: translate3d(0, 100px, 0);
        transform: translate3d(0, 100px, 0);
    }
}

@keyframes rodal-slideUp-enter {
    from {
        -webkit-transform: translate3d(0, 100px, 0);
        transform: translate3d(0, 100px, 0);
    }
}

.rodal-slideUp-enter {
    -webkit-animation: rodal-slideUp-enter both cubic-bezier(0.4, 0, 0, 1.5);
    animation: rodal-slideUp-enter both cubic-bezier(0.4, 0, 0, 1.5);
}

@-webkit-keyframes rodal-slideUp-leave {
    to {
        -webkit-transform: translate3d(0, 100px, 0);
        transform: translate3d(0, 100px, 0);
    }
}

@keyframes rodal-slideUp-leave {
    to {
        -webkit-transform: translate3d(0, 100px, 0);
        transform: translate3d(0, 100px, 0);
    }
}

.rodal-slideUp-leave {
    -webkit-animation: rodal-slideUp-leave both;
    animation: rodal-slideUp-leave both;
}

/* -- flip -- */
@-webkit-keyframes rodal-flip-enter {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 60deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 60deg);
    }
    70% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
    }
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

@keyframes rodal-flip-enter {
    from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 60deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 60deg);
    }
    70% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
    }
    to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

.rodal-flip-enter {
    -webkit-animation: rodal-flip-enter both ease-in;
    animation: rodal-flip-enter both ease-in;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
}

@-webkit-keyframes rodal-flip-leave {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
    30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
    }
    to {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 45deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 45deg);
    }
}

@keyframes rodal-flip-leave {
    from {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
    30% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
    }
    to {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 45deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 45deg);
    }
}

.rodal-flip-leave {
    -webkit-animation: rodal-flip-leave both;
    animation: rodal-flip-leave both;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
}

/* -- rotate -- */
@-webkit-keyframes rodal-rotate-enter {
    from {
        -webkit-transform: rotate3d(0, 0, 1, -180deg) scale3d(.3, .3, .3);
        transform: rotate3d(0, 0, 1, -180deg) scale3d(.3, .3, .3);
    }
}

@keyframes rodal-rotate-enter {
    from {
        -webkit-transform: rotate3d(0, 0, 1, -180deg) scale3d(.3, .3, .3);
        transform: rotate3d(0, 0, 1, -180deg) scale3d(.3, .3, .3);
    }
}

.rodal-rotate-enter {
    -webkit-animation: rodal-rotate-enter both;
    animation: rodal-rotate-enter both;
    -webkit-transform-origin: center;
    transform-origin: center;
}

@-webkit-keyframes rodal-rotate-leave {
    to {
        -webkit-transform: rotate3d(0, 0, 1, 180deg) scale3d(.3, .3, .3);
        transform: rotate3d(0, 0, 1, 180deg) scale3d(.3, .3, .3);
    }
}

@keyframes rodal-rotate-leave {
    to {
        -webkit-transform: rotate3d(0, 0, 1, 180deg) scale3d(.3, .3, .3);
        transform: rotate3d(0, 0, 1, 180deg) scale3d(.3, .3, .3);
    }
}

.rodal-rotate-leave {
    -webkit-animation: rodal-rotate-leave both;
    animation: rodal-rotate-leave both;
    -webkit-transform-origin: center;
    transform-origin: center;
}

/* -- door -- */
@-webkit-keyframes rodal-door-enter {
    from {
        -webkit-transform: scale3d(0, 1, 1);
        transform: scale3d(0, 1, 1);
    }
}

@keyframes rodal-door-enter {
    from {
        -webkit-transform: scale3d(0, 1, 1);
        transform: scale3d(0, 1, 1);
    }
}

.rodal-door-enter {
    -webkit-animation: rodal-door-enter both cubic-bezier(0.4, 0, 0, 1.5);
    animation: rodal-door-enter both cubic-bezier(0.4, 0, 0, 1.5);
}

@-webkit-keyframes rodal-door-leave {
    60% {
        -webkit-transform: scale3d(.01, 1, 1);
        transform: scale3d(.01, 1, 1);
    }
    to {
        -webkit-transform: scale3d(0, 1, .1);
        transform: scale3d(0, 1, .1);
    }
}

@keyframes rodal-door-leave {
    60% {
        -webkit-transform: scale3d(.01, 1, 1);
        transform: scale3d(.01, 1, 1);
    }
    to {
        -webkit-transform: scale3d(0, 1, .1);
        transform: scale3d(0, 1, .1);
    }
}

.rodal-door-leave {
    -webkit-animation: rodal-door-leave both;
    animation: rodal-door-leave both;
}.admin-welcome{
    width: 100%;
    position: absolute;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.admin-welcome .welcome{
    display: inline-block;
    margin-left: -200px;
}.admin-account{
    width: 100%;
}
.admin-account .admin-form-group .img-head{
    width: 80px;
    height: 80px;
    margin-bottom: 1em;
    border: 1px solid #ccc;
}.admin-music-list{
    width: 100%;
    overflow: hidden;
}
.admin-music-list .music-list-item{
    width: 100%;
    display: flex;
    align-items: center;
    background: white;
    position: relative;
    padding-left: 60px;
    margin-bottom: 20px;
    font-size: .85em;
    border: 1px solid #f5f1f1;
    padding-top: 20px;
    padding-bottom: 20px;
}
.admin-music-list .music-list-item .music-index{
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    background: #e44c65;
    color: white;
    text-align: center;
    line-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-music-list .music-item-cover{
    width: 120px;
    height: 120px;
    border: 1px solid #dedfda;
}
.admin-music-list .music-item-cover img{
    width: 100%;
    height: 100%;
}
.admin-music-list .music-item-info{
    margin-left: 1em;
    height: 120px;
}
.admin-music-list .music-item-info .line{
    padding: 5px 0;
}
.admin-music-list .music-item-info .btn-delete{
    margin-left: 15px;
}
.admin-music-list .music-item-info .btn-default{
    margin-left: 15px;
}
.admin-music-list .music-item-info .music-default{
    margin-left: 15px;
    color: #e44c65;
}
.admin-music-list .music-list-tip{
    text-align: center;
    margin-top: 200px;
}.admin-music-edit{
    width: 100%;
}
.admin-music-edit .admin-form-group .img-cover{
    width: 100%;
    height: 100%;
}
.admin-music-edit .music-cover{
    width: 120px;
    height: 120px;
    cursor: pointer;
    padding: 10px;
    border: 1px solid #ccc;
    margin-bottom: 3em;
    position: relative;
}
.admin-music-edit .music-cover:hover:before{
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(228,76,101,0.1);
}.admin-friend-list{
    width: 100%;
    overflow: hidden;
}
.admin-friend-list .friend-list-item{
    width: 100%;
    display: flex;
    align-items: center;
    background: white;
    position: relative;
    padding-left: 60px;
    margin-bottom: 20px;
    font-size: .85em;
    border: 1px solid #f5f1f1;
    padding-top: 20px;
    padding-bottom: 20px;
}
.admin-friend-list .friend-list-item .friend-index{
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    background: #e44c65;
    color: white;
    text-align: center;
    line-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-friend-list .friend-item-head{
    width: 140px;
    height: 140px;
    border: 1px solid #dedfda;
}
.admin-friend-list .friend-item-head img{
    width: 100%;
    height: 100%;
}
.admin-friend-list .friend-item-info{
    margin-left: 1em;
    height: 140px;
}
.admin-friend-list .friend-item-info .line{
    padding: 5px 0;
}
.admin-friend-list .friend-item-info .btn-delete{
    margin-left: 15px;
}
.admin-friend-list .friend-list-tip{
    text-align: center;
    margin-top: 200px;
}
.admin-friend-list .load-more{
    width: 100%;
    overflow: hidden;
    text-align: center;
}
.admin-friend-list .load-more >a{
    padding: .3em .5em;
    display: inline-block;
    transition: background-color ease .5s;
}
.admin-friend-list .load-more >a:hover{
    background: #e44c65;
    color: white;
    animation: links .1s 3;
}
.admin-friend-edit{
    width: 100%;
}
.admin-friend-edit .admin-form-group .img-head{
    width: 100%;
    height: 100%;
}
.admin-friend-edit .friend-head{
    width: 140px;
    height: 140px;
    cursor: pointer;
    padding: 10px;
    border: 1px solid #ccc;
    margin-bottom: 3em;
    position: relative;
}
.admin-friend-edit .friend-head:hover:before{
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(228,76,101,0.1);
}.admin-login >.welcome{
    margin: 0;
}
.admin-login-group{
    width: 300px;
}
.admin-login-btn{
    padding: 5px 10px;
    background: #e44c65;
    transition: .3s ease;
    color: white;
    border-radius: 4px;
}
.admin-login-btn:hover{
    background: #e41526;
    color: white;
}/* Make clicks pass-through */
#nprogress {
    pointer-events: none;
}

#nprogress .bar {
    background: #e44c65;

    position: fixed;
    z-index: 1031;
    top: 0;
    left: 0;

    width: 100%;
    height: 2px;
}

/* Fancy blur effect */
#nprogress .peg {
    display: block;
    position: absolute;
    right: 0px;
    width: 100px;
    height: 100%;
    box-shadow: 0 0 10px #e44c65, 0 0 5px #e44c65;
    opacity: 1.0;

    -webkit-transform: rotate(3deg) translate(0px, -4px);
    -ms-transform: rotate(3deg) translate(0px, -4px);
    transform: rotate(3deg) translate(0px, -4px);
}

/* Remove these to get rid of the spinner */
#nprogress .spinner {
    display: block;
    position: fixed;
    z-index: 1031;
    top: 15px;
    right: 15px;
}

#nprogress .spinner-icon {
    width: 18px;
    height: 18px;
    box-sizing: border-box;

    border: solid 2px transparent;
    border-top-color: #e44c65;
    border-left-color: #e44c65;
    border-radius: 50%;

    -webkit-animation: nprogress-spinner 400ms linear infinite;
    animation: nprogress-spinner 400ms linear infinite;
}

.nprogress-custom-parent {
    overflow: hidden;
    position: relative;
}

.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
    position: absolute;
}

@-webkit-keyframes nprogress-spinner {
    0%   { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* webkit, opera, IE9 */
::selection{
    background:#e44c65;
    text-shadow:none;
    color:#fff;
}
/* mozilla firefox */
::-moz-selection{
    background:#e44c65;
    text-shadow:none;
    color:#fff;
}

::-webkit-scrollbar{width:10px;height:8px;}
::-webkit-scrollbar-button{display:none}
::-webkit-scrollbar-track{background-color:black}
::-webkit-scrollbar-track-piece{background:#ddd}
::-webkit-scrollbar-thumb{background-color: #e44c65;}
::-webkit-scrollbar-thumb:hover{background-color:#3B3B3B}
::-webkit-scrollbar-corner{background-color:#535353}
::-webkit-scrollbar-resizer{background-color:#FF6E00}

body, input, select, textarea {
    font-family: '\5FAE\8F6F\96C5\9ED1', 'Open Sans', 'Microsoft YaHei', sans-serif!important;
    text-shadow: 0 0 3px rgba(228, 76, 101, .3);
}
*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
ol, ul {
    list-style: none;
}
ul {
    margin: 0 0 2em 0;
    padding-left: 1em;
}
ul li {
    padding-left: 0.5em;
    list-style: none;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
    line-height: 1em;
    margin: 0 0 1em 0;
}
a{
    color: black;
    text-decoration: none;
}
a:hover{
    color: #e44c65;
    transition: color ease .2s;
}
html, body{
    overflow-x: hidden;
}
body{
    margin: 0;
}
@-moz-keyframes spinner-show {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes spinner-show {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-ms-keyframes spinner-show {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes spinner-show {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes spinner-hide {
    0% {
        color: rgba(255, 255, 255, 0.15);
        z-index: 100001;
        -moz-transform: scale(1) rotate(0deg);
        -webkit-transform: scale(1) rotate(0deg);
        -ms-transform: scale(1) rotate(0deg);
        transform: scale(1) rotate(0deg);
    }

    99% {
        color: #1c1d26;
        z-index: 100001;
        -moz-transform: scale(0.5) rotate(360deg);
        -webkit-transform: scale(0.5) rotate(360deg);
        -ms-transform: scale(0.5) rotate(360deg);
        transform: scale(0.5) rotate(360deg);
    }

    100% {
        color: #1c1d26;
        z-index: -1;
        -moz-transform: scale(0) rotate(360deg);
        -webkit-transform: scale(0) rotate(360deg);
        -ms-transform: scale(0) rotate(360deg);
        transform: scale(0) rotate(360deg);
    }
}

@-ms-keyframes spinner-hide {
    0% {
        color: rgba(255, 255, 255, 0.15);
        z-index: 100001;
        -moz-transform: scale(1) rotate(0deg);
        -webkit-transform: scale(1) rotate(0deg);
        -ms-transform: scale(1) rotate(0deg);
        transform: scale(1) rotate(0deg);
    }

    99% {
        color: #1c1d26;
        z-index: 100001;
        -moz-transform: scale(0.5) rotate(360deg);
        -webkit-transform: scale(0.5) rotate(360deg);
        -ms-transform: scale(0.5) rotate(360deg);
        transform: scale(0.5) rotate(360deg);
    }

    100% {
        color: #1c1d26;
        z-index: -1;
        -moz-transform: scale(0) rotate(360deg);
        -webkit-transform: scale(0) rotate(360deg);
        -ms-transform: scale(0) rotate(360deg);
        transform: scale(0) rotate(360deg);
    }
}

@keyframes spinner-hide {
    0% {
        color: rgba(255, 255, 255, 0.15);
        z-index: 100001;
        -moz-transform: scale(1) rotate(0deg);
        -webkit-transform: scale(1) rotate(0deg);
        -ms-transform: scale(1) rotate(0deg);
        transform: scale(1) rotate(0deg);
    }

    99% {
        color: #1c1d26;
        z-index: 100001;
        -moz-transform: scale(0.5) rotate(360deg);
        -webkit-transform: scale(0.5) rotate(360deg);
        -ms-transform: scale(0.5) rotate(360deg);
        transform: scale(0.5) rotate(360deg);
    }

    100% {
        color: #1c1d26;
        z-index: -1;
        -moz-transform: scale(0) rotate(360deg);
        -webkit-transform: scale(0) rotate(360deg);
        -ms-transform: scale(0) rotate(360deg);
        transform: scale(0) rotate(360deg);
    }
}

@-moz-keyframes spinner-rotate {
    0% {
        -moz-transform: scale(1) rotate(0deg);
        -webkit-transform: scale(1) rotate(0deg);
        -ms-transform: scale(1) rotate(0deg);
        transform: scale(1) rotate(0deg);
    }

    100% {
        -moz-transform: scale(1) rotate(360deg);
        -webkit-transform: scale(1) rotate(360deg);
        -ms-transform: scale(1) rotate(360deg);
        transform: scale(1) rotate(360deg);
    }
}

@-webkit-keyframes spinner-rotate {
    0% {
        -moz-transform: scale(1) rotate(0deg);
        -webkit-transform: scale(1) rotate(0deg);
        -ms-transform: scale(1) rotate(0deg);
        transform: scale(1) rotate(0deg);
    }

    100% {
        -moz-transform: scale(1) rotate(360deg);
        -webkit-transform: scale(1) rotate(360deg);
        -ms-transform: scale(1) rotate(360deg);
        transform: scale(1) rotate(360deg);
    }
}

@-ms-keyframes spinner-rotate {
    0% {
        -moz-transform: scale(1) rotate(0deg);
        -webkit-transform: scale(1) rotate(0deg);
        -ms-transform: scale(1) rotate(0deg);
        transform: scale(1) rotate(0deg);
    }

    100% {
        -moz-transform: scale(1) rotate(360deg);
        -webkit-transform: scale(1) rotate(360deg);
        -ms-transform: scale(1) rotate(360deg);
        transform: scale(1) rotate(360deg);
    }
}

@keyframes spinner-rotate {
    0% {
        -moz-transform: scale(1) rotate(0deg);
        -webkit-transform: scale(1) rotate(0deg);
        -ms-transform: scale(1) rotate(0deg);
        transform: scale(1) rotate(0deg);
    }

    100% {
        -moz-transform: scale(1) rotate(360deg);
        -webkit-transform: scale(1) rotate(360deg);
        -ms-transform: scale(1) rotate(360deg);
        transform: scale(1) rotate(360deg);
    }
}

@-moz-keyframes overlay-hide {
    0% {
        opacity: 1;
        z-index: 100000;
    }

    15% {
        opacity: 1;
        z-index: 100000;
    }

    99% {
        opacity: 0;
        z-index: 100000;
    }

    100% {
        opacity: 0;
        z-index: -1;
    }
}

@-webkit-keyframes overlay-hide {
    0% {
        opacity: 1;
        z-index: 100000;
    }

    15% {
        opacity: 1;
        z-index: 100000;
    }

    99% {
        opacity: 0;
        z-index: 100000;
    }

    100% {
        opacity: 0;
        z-index: -1;
    }
}

@-ms-keyframes overlay-hide {
    0% {
        opacity: 1;
        z-index: 100000;
    }

    15% {
        opacity: 1;
        z-index: 100000;
    }

    99% {
        opacity: 0;
        z-index: 100000;
    }

    100% {
        opacity: 0;
        z-index: -1;
    }
}

@keyframes overlay-hide {
    0% {
        opacity: 1;
        z-index: 100000;
    }

    15% {
        opacity: 1;
        z-index: 100000;
    }

    99% {
        opacity: 0;
        z-index: 100000;
    }

    100% {
        opacity: 0;
        z-index: -1;
    }
}

body.landing {
    text-decoration: none;
}

body.landing:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-transform: none !important;
}

body.landing:before {
    -moz-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important;
    -webkit-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important;
    -ms-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important;
    animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important;
    -moz-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    color: rgba(255, 255, 255, 0.15);
    content: '\F1CE';
    cursor: default;
    display: block;
    font-size: 2em;
    height: 2em;
    left: 50%;
    line-height: 2em;
    margin: -1em 0 0 -1em;
    opacity: 0;
    position: fixed;
    text-align: center;
    top: 50%;
    width: 2em;
    z-index: -1;
}

body.landing:after {
    -moz-animation: overlay-hide 1.5s ease-in forwards !important;
    -webkit-animation: overlay-hide 1.5s ease-in forwards !important;
    -ms-animation: overlay-hide 1.5s ease-in forwards !important;
    animation: overlay-hide 1.5s ease-in forwards !important;
    background: #1c1d26;
    content: '';
    display: block;
    height: 100%;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -1;
}

body.landing.is-loading:before {
    -moz-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
    -webkit-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
    -ms-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
    animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
    z-index: 100001;
}

body.landing.is-loading:after {
    -moz-animation: none !important;
    -webkit-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;
    opacity: 1;
    z-index: 100000;
}

.text-right{
    text-align: right;
}
.text-center{
    text-align: center;
}
#app{
    height: 100%;
}
.container {
    width: 100%;
}
.main-wrap{
    background: white;
    overflow: hidden;
    width: 100%;
}
.main-wrap.blog{
    background: none;
}
.main-wrap.blog::before{
    content: "";
    width: 100%;
    height: 100%;
    background: url("/static/images/default/right-bg.png") no-repeat right;
    background-position: right -50px bottom -30vh;
    pointer-events: none;
    background-size: contain;
    position: fixed;
    z-index: -1;
    top: 0;
    background-color: white;
    background-blend-mode: multiply;
}

#error{
    background: #393f77;
    height: 100vh;
    color: white;
    text-shadow: 5px 5px 10px black;
    padding: 50px;
    width: 100%;
    overflow-x: hidden;
}
@media screen and (max-width: 736px){
    html, body {
        overflow-x: hidden;
    }
    html, body{
        overflow-x: hidden;
    }
}

.article-html {
    word-break: break-word;
}
.article-html blockquote {
    padding: .6em 1.2em;
    margin: 0 0 1.2em;
    font-size: 1em;
    line-height: 2;
    border-left: .3em solid #eee;
}
.article-html blockquote p{
    margin: 0 0 .6em;
}
.article-html blockquote p:last-child{
    margin: 0;
}
.article-html h1{
    font-size: 1.8em;
}
.article-html h2{
    font-size: 1.5em;
}
.article-html h3{
    font-size: 1.17em;
}
.article-html h4{
    font-size: 1em;
}
.article-html h5{
    font-size: .85em;
}
.article-html h6{
    font-size: .67em;
}
.article-html h1, .article-html h2, .article-html h3{
    font-weight: 500;
    line-height: 1.5em;
    margin: 1em 0 .8em 0;
}
.article-html h4, .article-html h5, .article-html h6 {
    font-weight: 500;
    line-height: 1.5em;
    margin: .8em 0;
}
.article-html hr {
    margin-top: 1.2em;
    margin-bottom: 1.2em;
    border: 0;
    border-top: 1px solid #bbb;
}
.article-html ul {
    margin: 0 0 .2em 0;
    padding-left: 2em;
    list-style-type: disc;
}
.article-html ul li {
    padding-left: 0;
    list-style-type: inherit;
    line-height: 2;
}
.article-html ul ul, .article-html ol ul {
    list-style-type: circle;
}
.article-html ol{
    list-style-type: decimal;
    margin-top: 0;
}
.article-html ol ol ul, .article-html ol ul ul, .article-html ul ol ul, .article-html ul ul ul {
    list-style-type: square;
}
.article-html ol li {
    line-height: 2;
}
.article-html ol p, .article-html li p {
    margin: 0 0 .6em;
}
.article-html >p {
    line-height: 2em;
}
.article-html pre{
    line-height: 2em;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    word-spacing: normal;
    hyphens: none;
    color: #c7254e;
    border-radius: 4px;
    background-color: #2d2d2d;
    overflow: auto;
    padding: .3em .6em;
}
.article-html code {
    line-height: 2em;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    word-spacing: normal;
    hyphens: none;
    padding: 2px 4px;
    font-size: .9em;
    color: #c7254e;
    border-radius: 4px;
    background-color: #f9f2f4;
}
.article-html pre >code{
    background-color: transparent;
    display: block;
    overflow-x: auto;
}

.article-html table{
    border: 1px solid #eee;
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.2em;
    word-break: normal;
}
.article-html table>caption+thead>tr:first-child>td, .article-html table>caption+thead>tr:first-child>th, .article-html table>colgroup+thead>tr:first-child>td, .article-html table>colgroup+thead>tr:first-child>th, .article-html table>thead:first-child>tr:first-child>td, .article-html table>thead:first-child>tr:first-child>th {
    border-top: 0;
}
.article-html table>tbody>tr:nth-of-type(odd) {
    background-color: white;
}
.article-html table>tbody>tr:nth-of-type(even) {
    background-color: white;
}
.article-html table>tbody>tr>td, .article-html table>tbody>tr>th, .article-html table>tfoot>tr>td, .article-html table>tfoot>tr>th, .article-html table>thead>tr>td, .article-html table>thead>tr>th {
    border: 1px solid #eee;
}
.article-html table>thead>tr>th {
    border-bottom-width: 1px;
    background: #f3f3f3;
}
.table>thead>tr>th {
    vertical-align: bottom;
    border-bottom: 1px solid #eee;
}
.article-html table>thead>tr>th {
    vertical-align: bottom;
    border-bottom: 1px solid #eee;
}
.article-html th {
    text-align: left;
}
.article-html td, th {
    padding: 0;
}
.article-html table>tbody>tr>td, .article-html table>tbody>tr>th, .article-html table>tfoot>tr>td, .article-html table>tfoot>tr>th, .article-html table>thead>tr>td, .article-html table>thead>tr>th {
    padding: .85em 1.7em;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #eee;
}
.article-html a{
    color: #e44c65;
    transition: color ease .2s;
    font-weight: 400;
}
.article-html a:hover{
    color: #cc4861;
    text-decoration: underline;
}
.article-html img{
    max-width: 100%;
    vertical-align: middle;
    border: 0;
}
.article-html abbr{
    cursor: help;
}
.article-html mark{
    padding: .2em;
    background-color: #fcf8e3;
}
.article-html dd{
    margin-left: 0;
}
.article-html dt{
    font-weight: bold;
}
.article-html p{
    margin: 0 0 .8em;
}
.article-html >img{
    margin: 0 0 .8em;
}
.article-html .warning{
    background: #ff8;
    padding: 20px;
    border-radius: 6px;
}
.article-html .footnotes{
    column-count: 2;
}
@media screen and (max-width: 736px){
    .article-html{
        font-size: .85em;
    }
    .article-html pre {
        -webkit-overflow-scrolling: touch;
        line-height: 1.5em;
    }
    .article-html >p{
        line-height: 1.8em;
    }
    .article-html blockquote{
        padding: .4em 1.2em
    }
    .article-html p, .article-html ol p, .article-html li p {
        margin: 0 0 .6em;
    }{
        margin: 0 0 .4em;
    }
    .article-html >img{
        margin: 0 0 .4em;
    }
    ::-webkit-scrollbar{
        width: 3px;
        height: 3px;
    }
    .article-html hr{
        margin-top: .8em;
        margin-bottom: .8em;
    }
    .article-html .footnotes{
        column-count: 1;
    }
}@charset "UTF-8";

/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.2
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2017 Daniel Eden
 */

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

.animated.infinite {
  animation-iteration-count: infinite;
}

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

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
  animation-duration: .75s;
}

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    transform: translate3d(0,-4px,0);
  }
}

.bounce {
  animation-name: bounce;
  transform-origin: center bottom;
}

@keyframes flash {
  from, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

.flash {
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  animation-name: pulse;
}

@keyframes rubberBand {
  from {
    transform: scale3d(1, 1, 1);
  }

  30% {
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    transform: scale3d(1.05, .95, 1);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

.rubberBand {
  animation-name: rubberBand;
}

@keyframes shake {
  from, to {
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  animation-name: shake;
}

@keyframes headShake {
  0% {
    transform: translateX(0);
  }

  6.5% {
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    transform: translateX(0);
  }
}

.headShake {
  animation-timing-function: ease-in-out;
  animation-name: headShake;
}

@keyframes swing {
  20% {
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.swing {
  transform-origin: top center;
  animation-name: swing;
}

@keyframes tada {
  from {
    transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

.tada {
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@keyframes wobble {
  from {
    transform: none;
  }

  15% {
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    transform: none;
  }
}

.wobble {
  animation-name: wobble;
}

@keyframes jello {
  from, 11.1%, to {
    transform: none;
  }

  22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

.jello {
  animation-name: jello;
  transform-origin: center;
}

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  animation-name: bounceIn;
}

@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }

  75% {
    transform: translate3d(0, -10px, 0);
  }

  90% {
    transform: translate3d(0, 5px, 0);
  }

  to {
    transform: none;
  }
}

.bounceInDown {
  animation-name: bounceInDown;
}

@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }

  75% {
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    transform: translate3d(5px, 0, 0);
  }

  to {
    transform: none;
  }
}

.bounceInLeft {
  animation-name: bounceInLeft;
}

@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    transform: translate3d(10px, 0, 0);
  }

  90% {
    transform: translate3d(-5px, 0, 0);
  }

  to {
    transform: none;
  }
}

.bounceInRight {
  animation-name: bounceInRight;
}

@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }

  75% {
    transform: translate3d(0, 10px, 0);
  }

  90% {
    transform: translate3d(0, -5px, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.bounceInUp {
  animation-name: bounceInUp;
}

@keyframes bounceOut {
  20% {
    transform: scale3d(.9, .9, .9);
  }

  50%, 55% {
    opacity: 1;
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }
}

.bounceOut {
  animation-name: bounceOut;
}

@keyframes bounceOutDown {
  20% {
    transform: translate3d(0, 10px, 0);
  }

  40%, 45% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}

.bounceOutDown {
  animation-name: bounceOutDown;
}

@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }
}

.bounceOutLeft {
  animation-name: bounceOutLeft;
}

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }
}

.bounceOutRight {
  animation-name: bounceOutRight;
}

@keyframes bounceOutUp {
  20% {
    transform: translate3d(0, -10px, 0);
  }

  40%, 45% {
    opacity: 1;
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}

.bounceOutUp {
  animation-name: bounceOutUp;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInDown {
  animation-name: fadeInDown;
}

@keyframes fadeInDownBig {
  from {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInDownBig {
  animation-name: fadeInDownBig;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInLeft {
  animation-name: fadeInLeft;
}

@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInLeftBig {
  animation-name: fadeInLeftBig;
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInRight {
  animation-name: fadeInRight;
}

@keyframes fadeInRightBig {
  from {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInRightBig {
  animation-name: fadeInRightBig;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInUp {
  animation-name: fadeInUp;
}

@keyframes fadeInUpBig {
  from {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInUpBig {
  animation-name: fadeInUpBig;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  animation-name: fadeOut;
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
}

.fadeOutDown {
  animation-name: fadeOutDown;
}

@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}

.fadeOutDownBig {
  animation-name: fadeOutDownBig;
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
}

.fadeOutLeft {
  animation-name: fadeOutLeft;
}

@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);
  }
}

.fadeOutLeftBig {
  animation-name: fadeOutLeftBig;
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
}

.fadeOutRight {
  animation-name: fadeOutRight;
}

@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }
}

.fadeOutRightBig {
  animation-name: fadeOutRightBig;
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
}

.fadeOutUp {
  animation-name: fadeOutUp;
}

@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}

.fadeOutUpBig {
  animation-name: fadeOutUpBig;
}

@keyframes flip {
  from {
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    animation-timing-function: ease-out;
  }

  40% {
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    animation-timing-function: ease-out;
  }

  50% {
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    animation-timing-function: ease-in;
  }

  80% {
    transform: perspective(400px) scale3d(.95, .95, .95);
    animation-timing-function: ease-in;
  }

  to {
    transform: perspective(400px);
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  animation-name: flip;
}

@keyframes flipInX {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }

  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  animation-name: flipInX;
}

@keyframes flipInY {
  from {
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    animation-timing-function: ease-in;
  }

  60% {
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    transform: perspective(400px);
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  animation-name: flipInY;
}

@keyframes flipOutX {
  from {
    transform: perspective(400px);
  }

  30% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.flipOutX {
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@keyframes flipOutY {
  from {
    transform: perspective(400px);
  }

  30% {
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  animation-name: flipOutY;
}

@keyframes lightSpeedIn {
  from {
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    transform: skewX(-5deg);
    opacity: 1;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

.lightSpeedIn {
  animation-name: lightSpeedIn;
  animation-timing-function: ease-out;
}

@keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  animation-name: lightSpeedOut;
  animation-timing-function: ease-in;
}

@keyframes rotateIn {
  from {
    transform-origin: center;
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    transform-origin: center;
    transform: none;
    opacity: 1;
  }
}

.rotateIn {
  animation-name: rotateIn;
}

@keyframes rotateInDownLeft {
  from {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    transform-origin: left bottom;
    transform: none;
    opacity: 1;
  }
}

.rotateInDownLeft {
  animation-name: rotateInDownLeft;
}

@keyframes rotateInDownRight {
  from {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    transform-origin: right bottom;
    transform: none;
    opacity: 1;
  }
}

.rotateInDownRight {
  animation-name: rotateInDownRight;
}

@keyframes rotateInUpLeft {
  from {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    transform-origin: left bottom;
    transform: none;
    opacity: 1;
  }
}

.rotateInUpLeft {
  animation-name: rotateInUpLeft;
}

@keyframes rotateInUpRight {
  from {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    transform-origin: right bottom;
    transform: none;
    opacity: 1;
  }
}

.rotateInUpRight {
  animation-name: rotateInUpRight;
}

@keyframes rotateOut {
  from {
    transform-origin: center;
    opacity: 1;
  }

  to {
    transform-origin: center;
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

.rotateOut {
  animation-name: rotateOut;
}

@keyframes rotateOutDownLeft {
  from {
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  animation-name: rotateOutDownLeft;
}

@keyframes rotateOutDownRight {
  from {
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutDownRight {
  animation-name: rotateOutDownRight;
}

@keyframes rotateOutUpLeft {
  from {
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutUpLeft {
  animation-name: rotateOutUpLeft;
}

@keyframes rotateOutUpRight {
  from {
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

.rotateOutUpRight {
  animation-name: rotateOutUpRight;
}

@keyframes hinge {
  0% {
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    transform: rotate3d(0, 0, 1, 80deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }

  40%, 80% {
    transform: rotate3d(0, 0, 1, 60deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

.hinge {
  animation-name: hinge;
}

@keyframes jackInTheBox {
  from {
    opacity: 0;
    transform: scale(0.1) rotate(30deg);
    transform-origin: center bottom;
  }

  50% {
    transform: rotate(-10deg);
  }

  70% {
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.jackInTheBox {
  animation-name: jackInTheBox;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@keyframes rollIn {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.rollIn {
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

.rollOut {
  animation-name: rollOut;
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  animation-name: zoomIn;
}

@keyframes zoomInDown {
  from {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInDown {
  animation-name: zoomInDown;
}

@keyframes zoomInLeft {
  from {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInLeft {
  animation-name: zoomInLeft;
}

@keyframes zoomInRight {
  from {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInRight {
  animation-name: zoomInRight;
}

@keyframes zoomInUp {
  from {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInUp {
  animation-name: zoomInUp;
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  to {
    opacity: 0;
  }
}

.zoomOut {
  animation-name: zoomOut;
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  to {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    transform-origin: center bottom;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomOutDown {
  animation-name: zoomOutDown;
}

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    transform: scale(.1) translate3d(-2000px, 0, 0);
    transform-origin: left center;
  }
}

.zoomOutLeft {
  animation-name: zoomOutLeft;
}

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    transform: scale(.1) translate3d(2000px, 0, 0);
    transform-origin: right center;
  }
}

.zoomOutRight {
  animation-name: zoomOutRight;
}

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  to {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    transform-origin: center bottom;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomOutUp {
  animation-name: zoomOutUp;
}

@keyframes slideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown {
  animation-name: slideInDown;
}

@keyframes slideInLeft {
  from {
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slideInLeft {
  animation-name: slideInLeft;
}

@keyframes slideInRight {
  from {
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slideInRight {
  animation-name: slideInRight;
}

@keyframes slideInUp {
  from {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
  animation-name: slideInUp;
}

@keyframes slideOutDown {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(0, 100%, 0);
  }
}

.slideOutDown {
  animation-name: slideOutDown;
}

@keyframes slideOutLeft {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(-100%, 0, 0);
  }
}

.slideOutLeft {
  animation-name: slideOutLeft;
}

@keyframes slideOutRight {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(100%, 0, 0);
  }
}

.slideOutRight {
  animation-name: slideOutRight;
}

@keyframes slideOutUp {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    transform: translate3d(0, -100%, 0);
  }
}

.slideOutUp {
  animation-name: slideOutUp;
}

/*# sourceMappingURL=style.css.map*/