body {

    width: 100%;

}

body:before,

body:after {

    content: "";

    display: table;

}

body:after {

    clear: both;

}

@font-face {

    font-family: 'FontAwesome';

    src: url("fonts/fontawesome-webfont.eot");

    src: url("fonts/fontawesome-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/fontawesome-webfont.woff") format("woff"), url("fonts/fontawesome-webfont.ttf") format("truetype"), url("fonts/fontawesome-webfont.svgz#FontAwesomeRegular") format("svg"), url("fonts/fontawesome-webfont.svg#FontAwesomeRegular") format("svg");

    font-weight: normal;

    font-style: normal;

}

html,

body,

div,

span,

applet,

object,

iframe,

h1,

h2,

h3,

h4,

h5,

h6,

p,

blockquote,

pre,

a,

abbr,

acronym,

address,

big,

cite,

code,

del,

dfn,

em,

img,

ins,

kbd,

q,

s,

samp,

small,

strike,

strong,

sub,

sup,

tt,

var,

dl,

dt,

dd,

ol,

ul,

li,

fieldset,

form,

label,

legend,

table,

caption,

tbody,

tfoot,

thead,

tr,

th,

td {

    margin: 0;

    padding: 0;

    border: 0;

    outline: 0;

    font-weight: inherit;

    font-style: inherit;

    font-family: inherit;

    font-size: 100%;

    vertical-align: baseline;

}

body {

    line-height: 1;

    color: #000;

    background: #fff;

}

ol,

ul {

    list-style: none;

}

table {

    border-collapse: separate;

    border-spacing: 0;

    vertical-align: middle;

}

caption,

th,

td {

    text-align: left;

    font-weight: normal;

    vertical-align: middle;

}

a img {

    border: none;

}

ol {

    list-style: decimal;

    padding-left: 20px;

}

ul {

    list-style: none;

}

input,

button {

    margin: 0;

    padding: 0;

}

input::-moz-focus-inner,

button::-moz-focus-inner {

    border: 0;

    padding: 0;

}

@font-face {

    font-family: FontAwesome;

    font-style: normal;

    font-weight: normal;

    src: url("fonts/fontawesome-webfont.eot");

    src: url("fonts/fontawesome-webfont.eot") format("embedded-opentype"), url("fonts/fontawesome-webfont.woff?v=#4.0.3") format("woff"), url("fonts/fontawesome-webfont.ttf?v=#4.0.3") format("truetype"), url("fonts/fontawesome-webfont.svg#fontawesomeregular?v=#4.0.3") format("svg");

}

html,

body,

#container {

    height: 100%;

    cursor: url("../img/cursor.ico"), auto;

}

body {

    font-family: "微软雅黑", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;

    font-size: 16px;

    background: #fff;

    color: rgba(0,0,0,0.6);

    -webkit-overflow-scrolling: touch;

}

h1,

h2,

h3 {

    display: block;

}

h1 {

    font-size: 1.5em;

}

h2 {

    font-size: 1.3em;

}

h3 {

    font-size: 1.1em;

}

h4,

h5,

h6 {

    font-size: 1em;

}

a {

    text-decoration: none;

    outline-width: 0;

    color: #258fb8;

    outline: none;

}

.alignleft {

    float: left;

}

.alignright {

    float: right;

}

.clearfix {

    *zoom: 1;

}

.clearfix:after {

    content: "";

    display: table;

    clear: both;

}

.inner {

    width: 1000px;

    margin: 0 auto;

}

.hide {

    display: none;

}

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

    .inner {

        width: 100%;

    }

}

#container {

    position: relative;

    min-height: 100%;

}

#container #mobile-nav {

    display: none;

}

#container #mobile-nav .overlay {

    height: 110px;

    position: absolute;

    width: 100%;

    background: #4d4d4d;

}

#container #mobile-nav .overlay.fixed {

    position: fixed;

    height: 42px;

    z-index: 99;

}

#container #mobile-nav #header {

    padding: 10px 0 0 0;

}

#container #mobile-nav #header .profilepic {

    display: block;

    position: relative;

    z-index: 100;

}

#container #mobile-nav #header .header-menu {

    height: auto;

    margin: 10px;

}

#container #mobile-nav #header .header-menu ul {

    text-align: center;

    cursor: default;

}

#container #mobile-nav #header .header-menu li {

    display: inline-block;

    margin: 3px;

}

#container .left-col {

    background: #fff;

    width: 300px;

    position: fixed;

    opacity: 1;

    -webkit-transition: all 0.2s ease-in;

    -moz-transition: all 0.2s ease-in;

    -ms-transition: all 0.2s ease-in;

    transition: all 0.2s ease-in;

    height: 100%;

}

#container .left-col .overlay {

    width: 100%;

    height: 180px;

    background-color: #000;

    position: absolute;

    opacity: 0.7;

}

#container .left-col .intrude-less {

    width: 76%;

    text-align: center;

    margin: 112px auto 0;

}

#container .mid-col {

    position: absolute;

    right: 0;

    min-height: 100%;

    background: #eaeaea;

    left: 300px;

    width: auto;

}

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

    #container .left-col {

        display: none;

    }

    #container .mid-col {

        left: 0;

    }

    #container #header .header-nav {

        position: relative;

    }

    #container .header-author.fixed {

        position: fixed;

        top: -13px;

        width: 100%;

        color: #ddd;

    }

    #container .overlay .slider-trigger {

        position: absolute;

        z-index: 101;

        bottom: 0;

        left: 0;

        width: 42px;

        height: 42px;

    }

    #container .overlay .slider-trigger:hover {

        background: #444;

    }

    #container .overlay .slider-trigger:before {

        color: #ddd;

        content: "\f00b";

        font: 16px FontAwesome;

        width: 16px;

        height: 16px;

        margin-left: 9px;

        margin-top: 14px;

        display: block;

    }

    #container .article-header {

        border-left: none;

        padding: 0;

        border-bottom: 1px dotted #ddd;

    }

    #container .article-header h1 {

        margin-bottom: 10px;

    }

    #container .header-subtitle {

        padding: 0 24px;

    }

    #container .article-info-index.article-info {

        padding-top: 10px;

        margin: 0;

        border-top: 1px solid #ddd;

    }

    #container .article-info-post.article-info {

        margin: 0;

        padding-top: 10px;

        border: none;

    }

    #container .article-more-link a {

        float: right;

    }

    #container #viewer-box .viewer-box-l {

        font-size: 14px;

    }

    #container .article {

        padding: 10px;

        margin: 10px;

        font-size: 14px;

    }

    #container .article .article-entry {

        padding-left: 0;

        padding-right: 0;

        padding-top: 10px;

    }

    #container .article .article-title {

        font-size: 18px;

        max-width: 185px;

        display: block;

        margin: 0;

    }

    #container .article .article-meta {

        width: auto;

        height: 30px;

        margin-top: -5px;

        position: ralative;

    }

    #container .article .article-meta .article-date {

        font-size: 12px;

        -webkit-border-radius: 0;

        border-radius: 0;

        color: #666;

        background: none;

        height: auto;

        padding: 0;

        margin: 0;

        width: 100%;

        text-align: left;

        margin-left: 10px;

    }

    #container .article .article-meta .article-date time {

        width: auto;

        float: right;

        margin-right: 10px;

    }

    #container .article .article-meta .article-tag-list {

        margin-top: 7px;

        position: absolute;

        right: 10px;

        top: 0;

    }

    #container .article .article-meta .article-tag-list:before {

        float: left;

        margin-top: 1px;

        left: 0;

    }

    #container .article .article-meta .article-tag-list .article-tag-list-item {

        float: left;

        padding-left: 0;

        width: auto;

        max-width: 83px;

    }

    #container .article .article-meta .article-category {

        margin-top: 7px;

        position: absolute;

        right: 10px;

        top: -30px;

    }

    #container .article .article-meta .article-category:before {

        float: left;

        margin-top: 1px;

        left: 15px;

    }

    #container .article .article-meta .article-category .article-category-link {

        max-width: 83px;

        width: auto;

        padding-left: 10px;

    }

    #container .article .article-nav-link-wrap {

        margin: 5px 0;

    }

    #container .article .article-nav-link-wrap strong {

        float: left;

        margin-right: 5px;

    }

    #container .article #article-nav-older {

        float: none;

        display: block;

    }

    #container .share {

        padding: 3px 10px;

    }

    #container .duoshuo {

        padding: 0 13px;

    }

    #container #disqus_thread {

        padding: 0 13px;

    }

    #container #mobile-nav {

        display: block;

    }

    #container #page-nav .extend {

        opacity: 1;

    }

    #container .instagram .open-ins {

        left: 2px;

        top: -30px;

        color: #aaa;

    }

    #container .info-on-right {

        float: initial;

    }

    #container .archives-wrap {

        margin: 10px 10px 0px;

        padding: 10px;

    }

    #container .archives-wrap .archive-article-title {

        font-size: 14px;

    }

    #container .archives-wrap .archive-year-wrap {

        position: relative;

        padding: 0 0 0 0;

    }

    #container .archives-wrap .archive-year-wrap a {

        padding: 0 0 0 0;

    }

    #container .archives-wrap .article-meta .archive-article-date {

        font-size: 12px;

        margin-right: 10px;

        margin-top: -5px;

    }

    #container .archives-wrap .article-meta .article-tag-list-link {

        font-size: 12px;

    }

    #container .archives .archive-article {

        padding: 10px 0;

        margin-left: 0;

    }

    #container #footer .footer-left {

        float: initial;

        margin-bottom: 10px;

    }

    #container #footer .footer-right {

        float: initial;

    }

    #container .copyright {

        margin: 0 0.5em;

        padding: 0.5em 1.3em;

    }

}

.header-author {

    text-align: center;

    margin: 0.67em 0;

    font-family: Roboto, "Roboto", serif;

    font-size: 30px;

    -webkit-transition: 0.3s;

    -moz-transition: 0.3s;

    -ms-transition: 0.3s;

    transition: 0.3s;

}

#header {

    width: 100%;

}

#header a {

    color: #696969;

}

#header a:hover {

    color: #b0a0aa;

}

#header .profilepic {

    text-align: center;

    display: block;

    border: 5px solid #fff;

    -webkit-border-radius: 300px;

    border-radius: 300px;

    width: 128px;

    height: 128px;

    margin: 0 auto;

    position: relative;

    overflow: hidden;

    background: #88acdb;

    -webkit-transition: all 0.2s ease-in;

    display: -webkit-box;

    -webkit-box-orient: horizontal;

    -webkit-box-pack: center;

    -webkit-box-align: center;

    text-align: center;

}

#header .profilepic img {

    width: 20%;

    height: 20%;

    -webkit-border-radius: 300px;

    border-radius: 300px;

    opacity: 0;

    -webkit-transition: all 0.2s ease-in;

    animation: myfirst 2s;

    -moz-animation: myfirst 2s;	/* Firefox */

    -webkit-animation: myfirst 2s;	/* Safari 和 Chrome */

    -o-animation: myfirst 2s;	/* Opera */

    animation-fill-mode: forwards;//当完成动画后，保留到最后一帧

}

@keyframes myfirst

{

    100% {    width: 100%;

        height: 100%;

        opacity: 1;}

}



@-moz-keyframes myfirst /* Firefox */

{



    100% {    width: 100%;

        height: 100%;

        opacity: 1;}

}



@-webkit-keyframes myfirst /* Safari 和 Chrome */

{



    100% {    width: 100%;

        height: 100%;

        opacity: 1;}

}



@-o-keyframes myfirst /* Opera */

{

    100% {    width: 100%;

        height: 100%;

        opacity: 1;}

}

#header .profilepic img.show {

    width: 100%;

    height: 100%;

    opacity: 1;

}

#header .header-subtitle {

    text-align: center;

    color: #999;

    font-size: 14px;

    line-height: 25px;

    overflow: hidden;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

}

#header .header-menu {

    font-weight: 300;

    line-height: 31px;

    cursor: pointer;

    text-transform: uppercase;

    float: none;

    height: 150px;

    margin-left: -12px;

    text-align: center;

    display: -webkit-box;

    -webkit-box-orient: horizontal;

    -webkit-box-pack: center;

    -webkit-box-align: center;

}

#header .header-menu li {

    cursor: default;

}

#header .header-menu li a {

    font-size: 14px;

    min-width: 300px;

}

#header .switch-area {

    position: relative;

    width: 100%;

    overflow: hidden;

    min-height: 500px;

    font-size: 14px;

}

#header .switch-area .switch-wrap {

    -webkit-transition: -webkit-transform 0.3s ease-in;

    -moz-transition: -moz-transform 0.3s ease-in;

    -ms-transition: -ms-transform 0.3s ease-in;

    transition: transform 0.3s ease-in;

    position: relative;

}

#header .turn-left {

    -webkit-transform: translate(-100%, 0);

    -moz-transform: translate(-100%, 0);

    -ms-transform: translate(-100%, 0);

    transform: translate(-100%, 0);

}

#header .header-nav {

    width: 100%;

    position: absolute;

    -webkit-transition: -webkit-transform 0.3s ease-in;

    -moz-transition: -moz-transform 0.3s ease-in;

    -ms-transition: -ms-transform 0.3s ease-in;

    transition: transform 0.3s ease-in;

}

#header .header-nav .social {

    margin-right: 15px;

    margin-top: 10px;

    text-align: center;

}

#header .header-nav .social a {

    -webkit-border-radius: 50%;

    border-radius: 50%;

    display: -moz-inline-stack;

    display: inline-block;

    vertical-align: middle;

    *vertical-align: auto;

    zoom: 1;

    *display: inline;

    text-indent: -9999px;

    margin: 0 8px 15px 8px;

    opacity: 0.7;

    width: 28px;

    height: 28px;

    -webkit-transition: 0.3s;

    -moz-transition: 0.3s;

    -ms-transition: 0.3s;

    transition: 0.3s;

}

#header .header-nav .social a:hover {

    opacity: 1;

}

#header .header-nav .social a:last-of-type {

    margin-right: 0;

}

#header .header-nav .social a.weibo {

    background: url("../img/weibo.png") center no-repeat #aaf;

    border: 1px solid #aaf;

}

#header .header-nav .social a.weibo:hover {

    border: 1px solid #aaf;

}

#header .header-nav .social a.rss {

    background: url("../img/rss.png") center no-repeat #ef7522;

    border: 1px solid #ef7522;

}

#header .header-nav .social a.rss:hover {

    border: 1px solid #cf5d0f;

}

#header .header-nav .social a.github {

    background: url("../img/github.png") center no-repeat #afb6ca;

    border: 1px solid #afb6ca;

}

#header .header-nav .social a.github:hover {

    border: 1px solid #909ab6;

}

#header .header-nav .social a.facebook {

    background: url("../img/facebook.png") center no-repeat #3b5998;

    border: 1px solid #3b5998;

}

#header .header-nav .social a.facebook:hover {

    border: 1px solid #2d4373;

}

#header .header-nav .social a.google {

    background: url("../img/google.png") center no-repeat #c83d20;

    border: 1px solid #c83d20;

}

#header .header-nav .social a.google:hover {

    border: 1px solid #9c3019;

}

#header .header-nav .social a.twitter {

    background: url("../img/twitter.png") center no-repeat #55cff8;

    border: 1px solid #55cff8;

}

#header .header-nav .social a.twitter:hover {

    border: 1px solid #24c1f6;

}

#header .header-nav .social a.linkedin {

    background: url("../img/linkedin.png") center no-repeat #005a87;

    border: 1px solid #005a87;

}

#header .header-nav .social a.linkedin:hover {

    border: 1px solid #006b98;

}

#header .header-nav .social a.zhihu {

    background: url("../img/zhihu.png") center no-repeat #0078d8;

    border: 1px solid #0078d8;

}

#header .header-nav .social a.zhihu:hover {

    border: 1px solid #0078d8;

}

#header .header-nav .social a.douban {

    background: url("../img/douban.png") center no-repeat #06c611;

    border: 1px solid #06c611;

}

#header .header-nav .social a.douban:hover {

    border: 1px solid #06c611;

}

#header .header-nav .social a.mail {

    background: url("../img/mail.png") center no-repeat #005a87;

    border: 1px solid #005a87;

}

#header .header-nav .social a.mail:hover {

    border: 1px solid #006b98;

}

#header .header-nav .social a.jianshu {

    background: url("../img/jianshu.png") center no-repeat #d49085;

    border: 1px solid #d49085;

}

#header .header-nav .social a.jianshu:hover {

    border: 1px solid #b97d72;

}

#header .header-nav .social a.wymusic {

    background: url("../img/wymusic.png") center no-repeat #e30100;

    border: 1px solid #e30100;

}

#header .header-nav .social a.wymusic:hover {

    border: 1px solid #ff0100;

}

#header .switch-part {

    width: 100%;

    position: absolute;

}

#header .switch-part1 {

    left: 0;

}

#header .switch-part2 {

    left: 100%;

    top: 20px;

    overlay-x: hidden;

    overflow-y: auto;

    max-height: 200px;

}

#header .switch-part3 {

    left: 200%;

    line-height: 30px;

}

#header .switch-part3 .switch-friends-link {

    margin-right: 9px;

    -webkit-border-radius: 3px;

    border-radius: 3px;

    padding: 5px;

}

#header .switch-part3 .switch-friends-link:hover {

    background: #88acdb;

    color: #fff;

}

#header .switch-part4 {

    left: 300%;

    text-align: left;

    line-height: 30px;

}

.duoshuo {

    padding: 0 40px;

}

#disqus_thread {

    padding: 0 40px;

}

body {

    -webkit-background-size: cover;

    -moz-background-size: cover;

    background-size: cover;

}

#container .left-col {

    background-color: rgba(255,255,255,0.85);

}

#container .mid-col {

    background-color: rgba(255,255,255,0.8);

}

.overlay {

    opacity: 0;

}

.player {

    opacity: 0.5;

}

.player:hover {

    opacity: 0.9;

}

.xm {

    position: fixed;

    bottom: 0;

    left: 0;

    z-index: 1;

    font-size: 0;

    -webkit-transition: all 0.3s ease-in-out;

    -webkit-transition: all 0.3s ease-in-out;

    -moz-transition: all 0.3s ease-in-out;

    -ms-transition: all 0.3s ease-in-out;

    transition: all 0.3s ease-in-out;

    -webkit-transform: translateY(3px);

    -ms-transform: translateY(3px);

    -webkit-transform: translateY(3px);

    -moz-transform: translateY(3px);

    -ms-transform: translateY(3px);

    transform: translateY(3px);

}

.xm:hover {

    -webkit-transform: translateY(0);

    -ms-transform: translateY(0);

    -webkit-transform: translateY(0);

    -moz-transform: translateY(0);

    -ms-transform: translateY(0);

    transform: translateY(0);

}

.xm img {

    width: 50px;

}

.archives-wrap {

    position: relative;

    margin: 0 30px;

    padding-right: 60px;

    border-bottom: 1px solid #eee;

    background: #fff;

}

.archives-wrap:first-child {

    margin-top: 30px;

}

.archives-wrap:last-child {

    margin-bottom: 80px;

}

.archives-wrap .archive-year-wrap {

    line-height: 35px;

    width: 200px;

    position: absolute;

    padding-top: 15px;

    font-size: 1.8em;

}

.archives-wrap .archive-year-wrap a {

    color: #666;

    font-weight: bold;

    padding-left: 48px;

}

.archives {

    position: relative;

}

.archives .article-info {

    border: none;

}

.archives .archive-article {

    margin-left: 200px;

    padding: 20px 0;

    border-bottom: 1px solid #eee;

    border-top: 1px solid #fff;

    position: relative;

}

.archives .archive-article:first-child {

    border-top: none;

}

.archives .archive-article:last-child {

    border-bottom: none;

}

.archives .archive-article-title {

    font-size: 16px;

    color: #333;

    -webkit-transition: color 0.3s;

    -moz-transition: color 0.3s;

    -ms-transition: color 0.3s;

    transition: color 0.3s;

}

.archives .archive-article-title:hover {

    color: #657b83;

}

.archives .archive-article-title span {

    display: block;

    color: #a8a8a8;

    font-size: 12px;

    line-height: 14px;

    height: 7px;

    padding-left: 2px;

}

.archives .archive-article-title span:before {

    display: inline-block;

    content: "“";

    font-family: serif;

    font-size: 30px;

    float: left;

    margin: 4px 4px 0 -12px;

    color: #c8c8c8;

}

.archive-article-inner .archive-article-header {

    position: relative;

}

.archive-article-inner .article-meta {

    position: relative;

    float: right;

    margin-top: -10px;

    color: #555;

    background: none;

    text-align: right;

    width: auto;

}

.archive-article-inner .article-meta .article-date time {

    color: #aaa;

}

.archive-article-inner .article-meta .archive-article-date,

.archive-article-inner .article-meta .article-tag-list {

    margin-right: 30px;

    display: -moz-inline-stack;

    display: inline-block;

    vertical-align: middle;

    zoom: 1;

    color: #666;

    font-size: 14px;

}

.archive-article-inner .article-meta .archive-article-date {

    cursor: default;

    font-size: 12px;

    margin-bottom: 5px;

    margin-top: -10px;

}

.archive-article-inner .article-meta .archive-article-date time:before {

    content: "\f073";

    color: #999;

    position: relative;

    margin-right: 10px;

    font: 16px FontAwesome;

}

.archive-article-inner .article-meta .article-category:before {

    float: left;

    margin-top: 1px;

    left: 15px;

}

.archive-article-inner .article-meta .article-category .article-category-link {

    width: auto;

    max-width: 83px;

    padding-left: 10px;

}

.archive-article-inner .article-meta .article-tag-list {

    margin-top: 0px;

}

.archive-article-inner .article-meta .article-tag-list:before {

    left: 15px;

}

.archive-article-inner .article-meta .article-tag-list .article-tag-list-item {

    display: inline-block;

    width: auto;

    max-width: 83px;

    padding-left: 8px;

    font-size: 12px;

}

.archives-wrap {

    background: rgba(255,255,255,0.4);

}

.archives-wrap .archives {

    background: transparent;

}

#back-to-top {

    cursor: pointer;

    position: fixed;

    right: 50px;

    top: -900px;

    z-index: 9;

    width: 70px;

    height: 900px;

    background: url("../img/scroll.png");

    -webkit-transition: all 0.5s ease-in-out;

    -moz-transition: all 0.5s ease-in-out;

    -ms-transition: all 0.5s ease-in-out;

    transition: all 0.5s ease-in-out;

}

#back-to-top #rocket {

    margin: 8px;

}

#back-to-top #rocket path {

    -webkit-transition: 0.5s;

    -moz-transition: 0.5s;

    -ms-transition: 0.5s;

    transition: 0.5s;

    -o-transition: 0.5s;

    -moz-transition: 0.5s;

    -webkit-transition: 0.5s;

}

#back-to-top.red:hover #rocket path {

    fill: #92c0ef;

}

.body-wrap {

    margin-bottom: 80px;

}

.article {

    margin: 30px;

    position: relative;

    border: 1px solid #ddd;

    background: #fff;

    -webkit-transition: all 0.2s ease-in;

}

.article.show {

    visibility: visible;

    -webkit-animation: cd-bounce-1 0.6s;

    -moz-animation: cd-bounce-1 0.6s;

    -webkit-animation: cd-bounce-1 0.6s;

    -moz-animation: cd-bounce-1 0.6s;

    -ms-animation: cd-bounce-1 0.6s;

    animation: cd-bounce-1 0.6s;

}

.article.hidden {

    visibility: hidden;

}

.article img {

    max-width: 100%;

}

@-webkit-keyframes cd-bounce-1 {

    0% {

        opacity: 0;

        -webkit-transform: scale(1);

    }

    60% {

        opacity: 1;

        -webkit-transform: scale(1.01);

    }

    100% {

        -webkit-transform: scale(1);

    }

}

@-moz-keyframes cd-bounce-1 {

    0% {

        opacity: 0;

        -moz-transform: scale(1);

    }

    60% {

        opacity: 1;

        -moz-transform: scale(1.01);

    }

    100% {

        -moz-transform: scale(1);

    }

}

.article-index {

    margin-left: 200px;

    padding: 15px 0;

    margin-right: 75px;

}

.article-index .brief {

    display: block;

    color: #a8a8a8;

    font-size: 12px;

    line-height: 14px;

    height: 7px;

    padding-left: 2px;

}

.article-index .brief:before {

    display: inline-block;

    content: "“";

    font-family: serif;

    font-size: 30px;

    float: left;

    margin: 4px 4px 0 -12px;

    color: #c8c8c8;

}

.article-title {

    color: #696969;

    margin-left: 0px;

    font-weight: 300;

    line-height: 35px;

    margin-bottom: 20px;

    font-size: 26px;

    -webkit-transition: color 0.3s;

    -moz-transition: color 0.3s;

    -o-transition: color 0.3s;

    -webkit-transition: color 0.3s;

    -moz-transition: color 0.3s;

    -ms-transition: color 0.3s;

    transition: color 0.3s;

}

.article-title:hover {

    color: #b0a0aa;

}

.article-inner {

    position: relative;

    margin-bottom: 20px;

}

.article-header {

    border-left: 5px solid;

    padding: 15px 0px 15px 25px;

}

.article-info.info-on-right {

    margin: 10px 0 0 0;

    float: right;

}

.article-info-index.article-info {

    padding-top: 20px;

    margin: 30px 30px 0 30px;

    border-top: 1px solid #ddd;

}

.article-info-post.article-info {

    padding: 0;

    border: none;

    margin: -30px 0 20px 30px;

}

@font-face {

    font-family: HYMiaoHunTiW;

    src: '/css/fonts/HYMiaoHunTiW.ttf';

}

.article-entry {

    line-height: 1.8em;

    padding-right: 30px;

    padding-left: 30px;

}

.article-entry p {

    margin-top: 10px;

}

.article-entry p code,

.article-entry li code {

    padding: 1px 3px;

    margin: 0 3px;

    background: #ddd;

    border: 1px solid #ccc;

    font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;

    word-wrap: break-word;

    font-size: 14px;

}

.article-entry blockquote {

    background: #ddd;

    border-left: 5px solid #ccc;

    padding: 15px 20px;

    margin-top: 10px;

    border-left: 5px solid #657b83;

    background: #f6f6f6;

}

.article-entry blockquote p {

    margin-top: 0;

}

.article-entry em {

    font-style: italic;

}

.article-entry ul li:before {

    content: "";

    width: 6px;

    height: 6px;

    border: 1px solid #999;

    -webkit-border-radius: 10px;

    border-radius: 10px;

    background: #aaa;

    display: inline-block;

    margin-right: 10px;

    float: left;

    margin-top: 12px;

}

.article-entry ul,

.article-entry ol {

    font-size: 14px;

    margin: 10px 0px;

}

.article-entry li ul,

.article-entry li ol {

    margin-left: 30px;

}

.article-entry li ul li:before,

.article-entry li ol li:before {

    content: "";

    background: #dedede;

}

.article-entry h1 {

    margin-top: 30px;

}

.article-entry h2 {

    margin-top: 20px;

    font-weight: 300;

    color: #574c4c;

    padding-bottom: 5px;

    border-bottom: 1px solid #ddd;

}

.article-entry h3,

.article-entry h4,

.article-entry h5,

.article-entry h6 {

    margin-top: 20px;

    font-weight: 300;

    color: #574c4c;

    padding-bottom: 5px;

    border-bottom: 1px solid #ddd;

}

.article-entry video {

    max-width: 100%;

}

.article-entry strong {

    font-weight: bold;

}

.article-entry .caption {

    display: block;

    font-size: 0.8em;

    color: #aaa;

}

.article-entry hr {

    height: 0;

    margin-top: 20px;

    margin-bottom: 20px;

    border-left: 0;

    border-right: 0;

    border-top: 1px solid #ddd;

    border-bottom: 1px solid #fff;

}

.article-entry pre {

    font-size: 1/0.9em;

    line-height: 1.5;

    margin-top: 10px;

    padding: 5px 15px;

    overflow-x: auto;

    color: #657b83;

    font-size: 10px;

    border: 1px solid #ccc;

    text-shadow: 0 1px #444;

    font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;

}

.article-entry pre code {

    font-size: 14px;

}

.article-entry table {

    width: 100%;

    border: 1px solid #dedede;

    margin: 15px 0;

    border-collapse: collapse;

}

.article-entry table tr,

.article-entry table td {

    height: 35px;

}

.article-entry table thead tr {

    background: #f8f8f8;

}

.article-entry table tbody tr:hover {

    background: #efefef;

}

.article-entry table td,

.article-entry table th {

    border: 1px solid #dedede;

    padding: 0 10px;

}

.article-entry figure table {

    border: none;

    width: auto;

    margin: 0;

}

.article-entry figure table tbody tr:hover {

    background: none;

}

.article-meta {

    width: 150px;

    font-size: 14;

    text-align: right;

    position: absolute;

    right: 0;

    top: 23px;

    text-align: center;

    z-index: 1;

}

.article-meta time {

    color: #aaa;

}

.article-meta time:before {

    color: #999;

    content: "\f073";

    font: 17px FontAwesome;

    margin-right: 10px;

}

.article-more-link {

    margin-top: 5px;

    text-align: right;

}

.article-more-link a {

    background: #4d4d4d;

    color: #fff;

    font-size: 12px;

    padding: 2px 8px 4px;

    line-height: 16px;

    -webkit-border-radius: 2px;

    -moz-border-radius: 2px;

    -webkit-border-radius: 2px;

    border-radius: 2px;

    -webkit-transition: background 0.3s;

    -moz-transition: background 0.3s;

    -ms-transition: background 0.3s;

    transition: background 0.3s;

}

.article-more-link a:hover {

    background: #3c3c3c;

}

.article-more-link a.hidden {

    visibility: hidden;

}

#article-nav {

    margin: 80px 0 30px 0;

    padding-bottom: 10px;

}

#article-nav .article-nav-link-wrap {

    margin: 0px 30px 0px 30px;

    font-size: 14px;

    color: #333;

}

#article-nav .article-nav-link-wrap .article-nav-title {

    display: inline-block;

    font-size: 12px;

    color: #aaa;

    -webkit-transition: color 0.3s;

    -moz-transition: color 0.3s;

    -ms-transition: color 0.3s;

    transition: color 0.3s;

}

#article-nav .article-nav-link-wrap strong {

    background: #ddd;

    color: #fff;

    -webkit-border-radius: 100%;

    border-radius: 100%;

    width: 15px;

    height: 15px;

    display: inline-block;

    text-align: center;

    -webkit-transition: background 0.3s;

    -moz-transition: background 0.3s;

    -ms-transition: background 0.3s;

    transition: background 0.3s;

}

#article-nav .article-nav-link-wrap:hover strong {

    background: #4d4d4d;

}

#article-nav .article-nav-link-wrap:hover .article-nav-title {

    color: #4d4d4d;

}

#article-nav #article-nav-older {

    float: right;

}

.copyright {

    width: 85%;

    max-width: 45em;

    margin: 1.2em auto 0;

    padding: 0.5em 1.8em;

    border: 1px solid #d3d3d3;

    font-size: 0.93em;

    line-height: 1.6em;

    word-break: break-all;

    background: rgba(255,255,255,0.4);

}

.copyright span {

    display: inline-block;

    width: 5.8em;

    color: #b5b5b5;

    font-weight: bold;

}

.copyright a {

    color: #808080;

}

.copyright a:hover {

    color: #a3d2a3;

    text-decoration: underline;

}

.copyright:hover .fa-clipboard {

    color: #000;

}

.copyright .copy-path {

    margin-left: 1em;

}

.copyright .copy-path:hover {

    color: #808080;

    cursor: pointer;

}

.article .article-inner {

    margin-bottom: 0px;

    padding-bottom: 0.5em;

}

.article {

    background: rgba(255,255,255,0.4);

    border: none;

}

.copyright {

    background-color: rgba(255,255,255,0.3);

}

#article-nav {

    background-color: rgba(158,188,226,0.6);

}

.article-entry blockquote {

    background: rgba(255,255,255,0.4);

    /*  border-left: 4px solid #cbe8f7;*/

}

li:hover {

    background: rgba(158,188,226,0.21);

}

#toc {

    background: none;

}

#tocButton {

    background: none;

}

.article-entry > ol:last-child > li:nth-child(2n) {

    background: rgba(158,188,226,0.12);

}

.article-entry h3 {

    background: rgba(243,248,253,0.6);

}

.article-entry h3::after {

    content: "";

}

.like {

    display: block;

    height: 100px;

    width: 312px;

    font-family: "Avenir Next", Helvetica, Arial, "Lantinghei SC", "Microsoft YaHei", sans-serif;

    background: #fff;

    padding: 15px;

    margin: 20px auto;

    -webkit-border-radius: 5px;

    border-radius: 5px;

    -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.2), 0 1px 5px 0 rgba(0,0,0,0.12);

    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.2), 0 1px 5px 0 rgba(0,0,0,0.12);

}

.article img {

    display: block;

    max-width: 100%;

    margin: 0 auto;

}

.post-comments-count a::before {

    content: "评论";

}

#yun-tie-sdk-wrap .input-box .tie-submit-row .tie-submit-btn {

    background-color: #649ab6;

}

#yun-tie-sdk-wrap .input-box .tie-submit-row .tie-submit-btn:hover {

    background-color: #4c618f;

}

.tie-empty-tip {

    display: none;

}

#yun-tie-sdk-wrap .input-box .tie-submit-row .user-info img:hover {

    /*#fff;*/

    -webkit-box-shadow: 0 0 10px #fff;

    box-shadow: 0 0 10px #fff;

rgba(255,255,255,0.6)

-webkit-box-shadow: 0 0 10px #fff;

rgba(255,255,255,0.6)

-webkit-transform: rotateZ(360deg);

    -moz-transform: rotateZ(360deg);

    -ms-transform: rotateZ(360deg);

    transform: rotateZ(360deg);

    -webkit-transform: rotateZ(360deg);

    -moz-transform: rotateZ(360deg);

}

#yun-tie-sdk-wrap .input-box .tie-submit-row .user-info img {

    width: 32px;

    height: 32px;

    -webkit-border-radius: 50%;

    border-radius: 50%;

    margin: 4px 10px 4px 8px;

    padding: 0;

    cursor: pointer;

    -webkit-box-shadow: inset 0 -1px 0 rgba(51,51,51,0.2) sf;

    box-shadow: inset 0 -1px 0 rgba(51,51,51,0.2) sf; /*设置图像阴影效果*/

    -webkit-box-shadow: inset 0 -1px 0 rgba(51,51,51,0.2) sf;

    -webkit-transition: 0.4s;

    -webkit-transition: -webkit-transform 0.4s ease-out;

    -webkit-transition: -webkit-transform 0.4s ease-out;

    -moz-transition: -moz-transform 0.4s ease-out;

    -ms-transition: -ms-transform 0.4s ease-out;

    transition: transform 0.4s ease-out; /*变化时间设置为0.4秒(变化动作即为下面的图像旋转360读）*/

    -moz-transition: -moz-transform 0.4s ease-out;

}

#yun-tie-sdk-wrap .single-tie .photo img:hover {

    /*#fff*/

    -webkit-box-shadow: 0 0 10px #fff;

    box-shadow: 0 0 10px #fff;

rgba(255,255,255,0.6)

-webkit-box-shadow: 0 0 10px #fff;

rgba(255,255,255,0.6)

-webkit-transform: rotateZ(360deg);

    -moz-transform: rotateZ(360deg);

    -ms-transform: rotateZ(360deg);

    transform: rotateZ(360deg);

    -webkit-transform: rotateZ(360deg);

    -moz-transform: rotateZ(360deg);

}

#yun-tie-sdk-wrap .single-tie .photo img {

    width: 42px;

    height: 42px;

    -webkit-border-radius: 50%;

    border-radius: 50%;

    padding: 0;

    cursor: pointer;

    -webkit-box-shadow: inset 0 -1px 0 rgba(51,51,51,0.2) sf;

    box-shadow: inset 0 -1px 0 rgba(51,51,51,0.2) sf; /*设置图像阴影效果*/

    -webkit-box-shadow: inset 0 -1px 0 rgba(51,51,51,0.2) sf;

    -webkit-transition: 0.4s;

    -webkit-transition: -webkit-transform 0.4s ease-out;

    -webkit-transition: -webkit-transform 0.4s ease-out;

    -moz-transition: -moz-transform 0.4s ease-out;

    -ms-transition: -ms-transform 0.4s ease-out;

    transition: transform 0.4s ease-out; /*变化时间设置为0.4秒(变化动作即为下面的图像旋转360读）*/

    -moz-transition: -moz-transform 0.4s ease-out;

}

.name-nick:hover {

    border-left: 14px solid #3264b4;

}

.name-desp:hover {

    border-left: 14px solid #3264b4;

}

#yun-tie-sdk-wrap .single-tie .tie-author .name-nick {

    cursor: pointer;

    -webkit-transition: border-width 0.3s linear 0.1s, color 0.2s linear 0.3s;

    -moz-transition: border-width 0.3s linear 0.1s, color 0.2s linear 0.3s;

    -ms-transition: border-width 0.3s linear 0.1s, color 0.2s linear 0.3s;

    transition: border-width 0.3s linear 0.1s, color 0.2s linear 0.3s;

}

#yun-tie-sdk-wrap .single-tie .tie-author .name-desp {

    cursor: pointer;

    -webkit-transition: border-width 0.3s linear 0.1s, color 0.2s linear 0.3s;

    -moz-transition: border-width 0.3s linear 0.1s, color 0.2s linear 0.3s;

    -ms-transition: border-width 0.3s linear 0.1s, color 0.2s linear 0.3s;

    transition: border-width 0.3s linear 0.1s, color 0.2s linear 0.3s;

}

.tie-time:hover {

    border-right: 14px solid #3264b4;

}

#yun-tie-sdk-wrap .single-tie .tie-time {

    -webkit-transition: border-width 0.3s linear 0.1s, color 0.2s linear 0.3s;

    -moz-transition: border-width 0.3s linear 0.1s, color 0.2s linear 0.3s;

    -ms-transition: border-width 0.3s linear 0.1s, color 0.2s linear 0.3s;

    transition: border-width 0.3s linear 0.1s, color 0.2s linear 0.3s;

    cursor: pointer;

}

.page-reward {

    margin: 60px 0;

    text-align: center;

}

.page-reward .page-reward-btn {

    position: relative;

    display: inline-block;

    width: 56px;

    height: 56px;

    line-height: 56px;

    font-size: 20px;

    color: #fff;

    background: #f44336;

    -webkit-border-radius: 50%;

    border-radius: 50%;

    -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);

    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);

    -webkit-transition: 0.4s ease-in-out;

    -webkit-transition: 0.4s ease-in-out;

    -moz-transition: 0.4s ease-in-out;

    -ms-transition: 0.4s ease-in-out;

    transition: 0.4s ease-in-out;

}

.page-reward .page-reward-btn:hover,

.page-reward .page-reward-btn:active {

    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.2), 0 4px 15px rgba(0,0,0,0.2);

    box-shadow: 0 6px 12px rgba(0,0,0,0.2), 0 4px 15px rgba(0,0,0,0.2);

}

.page-reward .page-reward-btn .tooltip-item {

    display: block;

    width: 56px;

    height: 56px;

}

.page-reward .reward-box {

    display: -webkit-box;

    display: -moz-box;

    display: -webkit-flex;

    display: -ms-flexbox;

    display: box;

    display: flex;

    -webkit-box-pack: distribute;

    -moz-box-pack: distribute;

    -ms-flex-pack: distribute;

    -webkit-justify-content: space-around;

    justify-content: space-around;

}

.page-reward .reward-p {

    color: #fff;

    font-weight: bold;

    text-shadow: 1px 1px 1px #45b9e0;

}

.page-reward .reward-p .icon {

    margin: 0 10px;

    color: #ddd;

}

.page-reward .reward-type {

    font-size: 16px;

    display: block;

    color: #4d4d4d;

    margin: 20px 0 0 0;

}

.page-reward .reward-img {

    width: 130px;

    height: 130px;

    border: 6px solid #fff;

    -webkit-border-radius: 3px;

    border-radius: 3px;

}

.tooltip-left .tooltip {

    position: absolute;

    z-index: 999;

    cursor: pointer;

    width: 28px;

    height: 28px;

    top: -10px;

    right: 10px;

}

.tooltip-left .tooltip:hover a.share-outer {

    background: #24c1f6;

}

@-webkit-keyframes pulse {

    from {

        -webkit-transform: scale3d(0.5, 0.5, 1);

    }

    to {

        -webkit-transform: scale3d(1, 1, 1);

    }

}

.tooltip-left .tooltip-content {

    position: absolute;

    background: rgba(36,193,246,0.9);

    z-index: 9999;

    width: 200px;

    bottom: 50%;

    margin-bottom: -10px;

    -webkit-border-radius: 20px;

    border-radius: 20px;

    font-size: 1.1em;

    text-align: center;

    color: #fff;

    opacity: 0;

    cursor: default;

    pointer-events: none;

    -webkit-font-smoothing: antialiased;

    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;

    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;

    -moz-transition: opacity 0.3s, -moz-transform 0.3s;

    -ms-transition: opacity 0.3s, -ms-transform 0.3s;

    transition: opacity 0.3s, transform 0.3s;

}

.tooltip-left .tooltip-west .tooltip-content {

    left: 3.5em;

    -webkit-transform-origin: -2em 50%;

    -webkit-transform-origin: -2em 50%;

    -moz-transform-origin: -2em 50%;

    -ms-transform-origin: -2em 50%;

    transform-origin: -2em 50%;

    -webkit-transform: translate3d(0, 50%, 0) rotate3d(1, 1, 1, 30deg);

    -webkit-transform: translate3d(0, 50%, 0) rotate3d(1, 1, 1, 30deg);

    -moz-transform: translate3d(0, 50%, 0) rotate3d(1, 1, 1, 30deg);

    -ms-transform: translate3d(0, 50%, 0) rotate3d(1, 1, 1, 30deg);

    transform: translate3d(0, 50%, 0) rotate3d(1, 1, 1, 30deg);

}

.tooltip-left .tooltip-east .tooltip-content {

    right: 3.5em;

    -webkit-transform-origin: calc(100% + 2em) 50%;

    -webkit-transform-origin: calc(100% + 2em) 50%;

    -moz-transform-origin: calc(100% + 2em) 50%;

    -ms-transform-origin: calc(100% + 2em) 50%;

    transform-origin: calc(100% + 2em) 50%;

    -webkit-transform: translate3d(0, 50%, 0) rotate3d(1, 1, 1, -30deg);

    -webkit-transform: translate3d(0, 50%, 0) rotate3d(1, 1, 1, -30deg);

    -moz-transform: translate3d(0, 50%, 0) rotate3d(1, 1, 1, -30deg);

    -ms-transform: translate3d(0, 50%, 0) rotate3d(1, 1, 1, -30deg);

    transform: translate3d(0, 50%, 0) rotate3d(1, 1, 1, -30deg);

}

.tooltip-left .tooltip:hover .tooltip-content {

    opacity: 1;

    -webkit-transform: translate3d(0, 50%, 0) rotate3d(0, 0, 0, 0);

    -webkit-transform: translate3d(0, 50%, 0) rotate3d(0, 0, 0, 0);

    -moz-transform: translate3d(0, 50%, 0) rotate3d(0, 0, 0, 0);

    -ms-transform: translate3d(0, 50%, 0) rotate3d(0, 0, 0, 0);

    transform: translate3d(0, 50%, 0) rotate3d(0, 0, 0, 0);

    pointer-events: auto;

}

.tooltip-left .tooltip-content::before,

.tooltip-left .tooltip-content::after {

    content: '';

    position: absolute;

}

.tooltip-left .tooltip-content::before {

    height: 100%;

    width: 3em;

}

.tooltip-left .tooltip-content::after {

    width: 2em;

    height: 2em;

    top: 50%;

    margin: -1em 0 0;

    background: url("../img/tooltip.svg") no-repeat center center;

    -webkit-background-size: 100%;

    -moz-background-size: 100%;

    background-size: 100%;

}

.tooltip-left .tooltip-west .tooltip-content::before,

.tooltip-left .tooltip-west .tooltip-content::after {

    right: 99%; /* because of FF, otherwise we have a gap */

}

.tooltip-left .tooltip-east .tooltip-content::before,

.tooltip-left .tooltip-east .tooltip-content::after {

    left: 99%; /* because of FF, otherwise we have a gap */

}

.tooltip-left .tooltip-east .tooltip-content::after {

    -webkit-transform: scale3d(-1, 1, 1);

    -webkit-transform: scale3d(-1, 1, 1);

    -moz-transform: scale3d(-1, 1, 1);

    -ms-transform: scale3d(-1, 1, 1);

    transform: scale3d(-1, 1, 1);

}

@-moz-keyframes pulse {

    from {

        -webkit-transform: scale3d(0.5, 0.5, 1);

        -webkit-transform: scale3d(0.5, 0.5, 1);

        -moz-transform: scale3d(0.5, 0.5, 1);

        -ms-transform: scale3d(0.5, 0.5, 1);

        transform: scale3d(0.5, 0.5, 1);

    }

    to {

        -webkit-transform: scale3d(1, 1, 1);

        -webkit-transform: scale3d(1, 1, 1);

        -moz-transform: scale3d(1, 1, 1);

        -ms-transform: scale3d(1, 1, 1);

        transform: scale3d(1, 1, 1);

    }

}

@-webkit-keyframes pulse {

    from {

        -webkit-transform: scale3d(0.5, 0.5, 1);

        -webkit-transform: scale3d(0.5, 0.5, 1);

        -moz-transform: scale3d(0.5, 0.5, 1);

        -ms-transform: scale3d(0.5, 0.5, 1);

        transform: scale3d(0.5, 0.5, 1);

    }

    to {

        -webkit-transform: scale3d(1, 1, 1);

        -webkit-transform: scale3d(1, 1, 1);

        -moz-transform: scale3d(1, 1, 1);

        -ms-transform: scale3d(1, 1, 1);

        transform: scale3d(1, 1, 1);

    }

}

@-o-keyframes pulse {

    from {

        -webkit-transform: scale3d(0.5, 0.5, 1);

        -webkit-transform: scale3d(0.5, 0.5, 1);

        -moz-transform: scale3d(0.5, 0.5, 1);

        -ms-transform: scale3d(0.5, 0.5, 1);

        transform: scale3d(0.5, 0.5, 1);

    }

    to {

        -webkit-transform: scale3d(1, 1, 1);

        -webkit-transform: scale3d(1, 1, 1);

        -moz-transform: scale3d(1, 1, 1);

        -ms-transform: scale3d(1, 1, 1);

        transform: scale3d(1, 1, 1);

    }

}

@keyframes pulse {

    from {

        -webkit-transform: scale3d(0.5, 0.5, 1);

        -webkit-transform: scale3d(0.5, 0.5, 1);

        -moz-transform: scale3d(0.5, 0.5, 1);

        -ms-transform: scale3d(0.5, 0.5, 1);

        transform: scale3d(0.5, 0.5, 1);

    }

    to {

        -webkit-transform: scale3d(1, 1, 1);

        -webkit-transform: scale3d(1, 1, 1);

        -moz-transform: scale3d(1, 1, 1);

        -ms-transform: scale3d(1, 1, 1);

        transform: scale3d(1, 1, 1);

    }

}

.tooltip-top .tooltip {

    display: inline;

    position: relative;

    z-index: 999;

}

.tooltip-top .tooltip::after {

    content: '';

    position: absolute;

    width: 100%;

    height: 20px;

    bottom: 100%;

    left: 50%;

    pointer-events: none;

    -webkit-transform: translateX(-50%);

    -webkit-transform: translateX(-50%);

    -moz-transform: translateX(-50%);

    -ms-transform: translateX(-50%);

    transform: translateX(-50%);

}

.tooltip-top .tooltip:hover::after {

    pointer-events: auto;

}

.tooltip-top .tooltip-content {

    position: absolute;

    z-index: 9999;

    width: 370px;

    left: 50%;

    bottom: 100%;

    font-size: 20px;

    line-height: 1.4;

    text-align: center;

    font-weight: 400;

    color: #4d4d4d;

    background: transparent;

    opacity: 0;

    margin: 0 0 -10px -185px;

    cursor: default;

    pointer-events: none;

    font-family: 'Satisfy', cursive;

    -webkit-font-smoothing: antialiased;

    -webkit-transition: opacity 0.3s 0.3s;

    -webkit-transition: opacity 0.3s 0.3s;

    -moz-transition: opacity 0.3s 0.3s;

    -ms-transition: opacity 0.3s 0.3s;

    transition: opacity 0.3s 0.3s;

    padding-bottom: 80px;

}

.tooltip-top .tooltip:hover .tooltip-content {

    opacity: 1;

    pointer-events: auto;

    -webkit-transition-delay: 0s;

    -webkit-transition-delay: 0s;

    -moz-transition-delay: 0s;

    -ms-transition-delay: 0s;

    transition-delay: 0s;

}

.tooltip-top .tooltip-content span {

    display: block;

}

.tooltip-top .tooltip-text {

    border-bottom: 10px solid #4d4d4d;

    overflow: hidden;

    -webkit-transform: scale3d(0, 1, 1);

    -webkit-transform: scale3d(0, 1, 1);

    -moz-transform: scale3d(0, 1, 1);

    -ms-transform: scale3d(0, 1, 1);

    transform: scale3d(0, 1, 1);

    -webkit-transition: -webkit-transform 0.3s 0.3s;

    -webkit-transition: -webkit-transform 0.3s 0.3s;

    -moz-transition: -moz-transform 0.3s 0.3s;

    -ms-transition: -ms-transform 0.3s 0.3s;

    transition: transform 0.3s 0.3s;

}

.tooltip-top .tooltip:hover .tooltip-text {

    -webkit-transition-delay: 0s;

    -webkit-transition-delay: 0s;

    -moz-transition-delay: 0s;

    -ms-transition-delay: 0s;

    transition-delay: 0s;

    -webkit-transform: scale3d(1, 1, 1);

    -webkit-transform: scale3d(1, 1, 1);

    -moz-transform: scale3d(1, 1, 1);

    -ms-transform: scale3d(1, 1, 1);

    transform: scale3d(1, 1, 1);

}

.tooltip-top .tooltip-inner {

    background: rgba(36,193,246,0.9);

    padding: 40px;

    -webkit-transform: translate3d(0, 100%, 0);

    -webkit-transform: translate3d(0, 100%, 0);

    -moz-transform: translate3d(0, 100%, 0);

    -ms-transform: translate3d(0, 100%, 0);

    transform: translate3d(0, 100%, 0);

    webkit-transition: -webkit-transform 0.3s;

    -webkit-transition: -webkit-transform 0.3s;

    -moz-transition: -moz-transform 0.3s;

    -ms-transition: -ms-transform 0.3s;

    transition: transform 0.3s;

}

.tooltip-top .tooltip:hover .tooltip-inner {

    -webkit-transition-delay: 0.3s;

    -webkit-transition-delay: 0.3s;

    -moz-transition-delay: 0.3s;

    -ms-transition-delay: 0.3s;

    transition-delay: 0.3s;

    -webkit-transform: translate3d(0, 0, 0);

    -webkit-transform: translate3d(0, 0, 0);

    -moz-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

}

.tooltip-top .tooltip-content::after {

    content: '';

    left: 50%;

    border: solid transparent;

    height: 0;

    width: 0;

    position: absolute;

    pointer-events: none;

    border-color: transparent;

    border-top-color: #4d4d4d;

    border-width: 10px;

    margin-left: -10px;

}

@-moz-keyframes cd-bounce-1 {

    0% {

        opacity: 0;

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        -ms-transform: scale(1);

        -o-transform: scale(1);

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        -ms-transform: scale(1);

        transform: scale(1);

    }

    60% {

        opacity: 1;

        -webkit-transform: scale(1.01);

        -moz-transform: scale(1.01);

        -ms-transform: scale(1.01);

        -o-transform: scale(1.01);

        -webkit-transform: scale(1.01);

        -moz-transform: scale(1.01);

        -ms-transform: scale(1.01);

        transform: scale(1.01);

    }

    100% {

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        -ms-transform: scale(1);

        -o-transform: scale(1);

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        -ms-transform: scale(1);

        transform: scale(1);

    }

}

@-webkit-keyframes cd-bounce-1 {

    0% {

        opacity: 0;

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        -ms-transform: scale(1);

        -o-transform: scale(1);

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        -ms-transform: scale(1);

        transform: scale(1);

    }

    60% {

        opacity: 1;

        -webkit-transform: scale(1.01);

        -moz-transform: scale(1.01);

        -ms-transform: scale(1.01);

        -o-transform: scale(1.01);

        -webkit-transform: scale(1.01);

        -moz-transform: scale(1.01);

        -ms-transform: scale(1.01);

        transform: scale(1.01);

    }

    100% {

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        -ms-transform: scale(1);

        -o-transform: scale(1);

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        -ms-transform: scale(1);

        transform: scale(1);

    }

}

@-o-keyframes cd-bounce-1 {

    0% {

        opacity: 0;

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        -ms-transform: scale(1);

        -o-transform: scale(1);

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        -ms-transform: scale(1);

        transform: scale(1);

    }

    60% {

        opacity: 1;

        -webkit-transform: scale(1.01);

        -moz-transform: scale(1.01);

        -ms-transform: scale(1.01);

        -o-transform: scale(1.01);

        -webkit-transform: scale(1.01);

        -moz-transform: scale(1.01);

        -ms-transform: scale(1.01);

        transform: scale(1.01);

    }

    100% {

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        -ms-transform: scale(1);

        -o-transform: scale(1);

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        -ms-transform: scale(1);

        transform: scale(1);

    }

}

@keyframes cd-bounce-1 {

    0% {

        opacity: 0;

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        -ms-transform: scale(1);

        -o-transform: scale(1);

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        -ms-transform: scale(1);

        transform: scale(1);

    }

    60% {

        opacity: 1;

        -webkit-transform: scale(1.01);

        -moz-transform: scale(1.01);

        -ms-transform: scale(1.01);

        -o-transform: scale(1.01);

        -webkit-transform: scale(1.01);

        -moz-transform: scale(1.01);

        -ms-transform: scale(1.01);

        transform: scale(1.01);

    }

    100% {

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        -ms-transform: scale(1);

        -o-transform: scale(1);

        -webkit-transform: scale(1);

        -moz-transform: scale(1);

        -ms-transform: scale(1);

        transform: scale(1);

    }

}

.archives-wrap {

    position: relative;

    margin: 0 30px;

    padding-right: 60px;

    border-bottom: 1px solid #eee;

    background: #fff;

}

.archives-wrap:first-child {

    margin-top: 30px;

}

.archives-wrap:last-child {

    margin-bottom: 80px;

}

.archives-wrap .archive-year-wrap {

    line-height: 35px;

    width: 200px;

    position: absolute;

    padding-top: 15px;

    font-size: 1.8em;

}

.archives-wrap .archive-year-wrap a {

    color: #666;

    font-weight: bold;

    padding-left: 48px;

}

.archives {

    position: relative;

}

.archives .article-info {

    border: none;

}

.archives .archive-article {

    margin-left: 200px;

    padding: 20px 0;

    border-bottom: 1px solid #eee;

    border-top: 1px solid #fff;

    position: relative;

}

.archives .archive-article:first-child {

    border-top: none;

}

.archives .archive-article:last-child {

    border-bottom: none;

}

.archives .archive-article-title {

    font-size: 16px;

    color: #333;

    -webkit-transition: color 0.3s;

    -moz-transition: color 0.3s;

    -ms-transition: color 0.3s;

    transition: color 0.3s;

}

.archives .archive-article-title:hover {

    color: #657b83;

}

.archives .archive-article-title span {

    display: block;

    color: #a8a8a8;

    font-size: 12px;

    line-height: 14px;

    height: 7px;

    padding-left: 2px;

}

.archives .archive-article-title span:before {

    display: inline-block;

    content: "“";

    font-family: serif;

    font-size: 30px;

    float: left;

    margin: 4px 4px 0 -12px;

    color: #c8c8c8;

}

.archive-article-inner .archive-article-header {

    position: relative;

}

.archive-article-inner .article-meta {

    position: relative;

    float: right;

    margin-top: -10px;

    color: #555;

    background: none;

    text-align: right;

    width: auto;

}

.archive-article-inner .article-meta .article-date time {

    color: #aaa;

}

.archive-article-inner .article-meta .archive-article-date,

.archive-article-inner .article-meta .article-tag-list {

    margin-right: 30px;

    display: -moz-inline-stack;

    display: inline-block;

    vertical-align: middle;

    zoom: 1;

    color: #666;

    font-size: 14px;

}

.archive-article-inner .article-meta .archive-article-date {

    cursor: default;

    font-size: 12px;

    margin-bottom: 5px;

    margin-top: -10px;

}

.archive-article-inner .article-meta .archive-article-date time:before {

    content: "\f073";

    color: #999;

    position: relative;

    margin-right: 10px;

    font: 16px FontAwesome;

}

.archive-article-inner .article-meta .article-category:before {

    float: left;

    margin-top: 1px;

    left: 15px;

}

.archive-article-inner .article-meta .article-category .article-category-link {

    width: auto;

    max-width: 83px;

    padding-left: 10px;

}

.archive-article-inner .article-meta .article-tag-list {

    margin-top: 0px;

}

.archive-article-inner .article-meta .article-tag-list:before {

    left: 15px;

}

.archive-article-inner .article-meta .article-tag-list .article-tag-list-item {

    display: inline-block;

    width: auto;

    max-width: 83px;

    padding-left: 8px;

    font-size: 12px;

}

.archives-wrap {

    background: rgba(255,255,255,0.4);

}

.archives-wrap .archives {

    background: transparent;

}

#back-to-top {

    cursor: pointer;

    position: fixed;

    right: 50px;

    top: -900px;

    z-index: 9;

    width: 70px;

    height: 900px;

    background: url("../img/scroll.png");

    -webkit-transition: all 0.5s ease-in-out;

    -moz-transition: all 0.5s ease-in-out;

    -ms-transition: all 0.5s ease-in-out;

    transition: all 0.5s ease-in-out;

}

#back-to-top #rocket {

    margin: 8px;

}

#back-to-top #rocket path {

    -webkit-transition: 0.5s;

    -moz-transition: 0.5s;

    -ms-transition: 0.5s;

    transition: 0.5s;

    -o-transition: 0.5s;

    -moz-transition: 0.5s;

    -webkit-transition: 0.5s;

}

#back-to-top.red:hover #rocket path {

    fill: #92c0ef;

}

.article-entry pre,

.article-entry .highlight {

    background: #4d4d4d;

    margin: 10px 0;

    padding: 10px 10px;

    overflow: auto;

    color: #4c4c4c;

    line-height: 22.400000000000002px;

}

.article-entry .highlight .gutter pre,

.article-entry .gist .gist-file .gist-data .line-numbers {

    color: #666;

    font-size: 0.85em;

}

.article-entry pre,

.article-entry code {

    font-family: "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace;

}

.article-entry code {

    background: #eee;

    text-shadow: 0 1px #fff;

    padding: 0 0.3em;

    border: none;

}

.article-entry pre {

    color: #eef8fc;

}

.article-entry pre code {

    background: none;

    text-shadow: none;

    padding: 0;

    color: #eef8fc;

}

.article-entry .highlight pre {

    border: none;

    margin: 0;

    padding: 0;

}

.article-entry .highlight table {

    margin: 0;

    width: auto;

}

.article-entry .highlight td {

    border: none;

    padding: 0;

}

.article-entry .highlight figcaption {

    font-size: 0.85em;

    color: #a6e22e;

    line-height: 1em;

    margin-bottom: 1em;

}

.article-entry .highlight figcaption:before,

.article-entry .highlight figcaption:after {

    content: "";

    display: table;

}

.article-entry .highlight figcaption:after {

    clear: both;

}

.article-entry .highlight figcaption a {

    float: right;

}

.article-entry .highlight .gutter pre {

    text-align: right;

    padding-right: 20px;

}

.article-entry .highlight .gutter pre .line {

    text-shadow: none;

}

.article-entry .highlight .line {

    font-size: 14px;

    height: 22.400000000000002px;

}

.article-entry .gist {

    margin: 0 -20px;

    border-style: solid;

    border-color: #ddd;

    border-width: 1px 0;

    background: #272822;

    padding: 15px 20px 15px 0;

}

.article-entry .gist .gist-file {

    border: none;

    font-family: "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace;

    margin: 0;

}

.article-entry .gist .gist-file .gist-data {

    background: none;

    border: none;

}

.article-entry .gist .gist-file .gist-data .line-numbers {

    background: none;

    border: none;

    padding: 0 20px 0 0;

}

.article-entry .gist .gist-file .gist-data .line-data {

    padding: 0 !important;

}

.article-entry .gist .gist-file .highlight {

    margin: 0;

    padding: 0;

    border: none;

}

.article-entry .gist .gist-file .gist-meta {

    background: #272822;

    color: #a6e22e;

    font: 0.85em "Helvetica Neue", Helvetica, Arial, sans-serif;

    text-shadow: 0 0;

    padding: 0;

    margin-top: 1em;

    margin-left: 20px;

}

.article-entry .gist .gist-file .gist-meta a {

    color: #258fb8;

    font-weight: normal;

}

.article-entry .gist .gist-file .gist-meta a:hover {

    text-decoration: underline;

}

pre .comment {

    color: #ddd;

}

pre .title {

    color: #a6e22e;

}

pre .variable,

pre .attribute,

pre .tag,

pre .regexp,

pre .ruby .constant,

pre .xml .tag .title,

pre .xml .pi,

pre .xml .doctype,

pre .html .doctype,

pre .css .id,

pre .css .class,

pre .css .pseudo {

    color: #f2777a;

}

pre .number,

pre .preprocessor,

pre .built_in,

pre .literal,

pre .params,

pre .constant {

    color: #66d9ef;

}

pre .class,

pre .ruby .class .title,

pre .css .rules .attribute {

    color: #e6db74;

}

pre .string,

pre .value,

pre .inheritance,

pre .header,

pre .ruby .symbol,

pre .xml .cdata {

    color: #e6db74;

}

pre .css .hexcolor {

    color: #6cc;

}

pre .function,

pre .python .decorator,

pre .python .title,

pre .ruby .function .title,

pre .ruby .title .keyword,

pre .perl .sub,

pre .javascript .title,

pre .coffeescript .title {

    color: #69c;

}

pre .keyword,

pre .javascript .function {

    color: #f92672;

}

#footer {

    font-size: 12px;

    font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;

    text-shadow: 0 1px #fff;

    position: absolute;

    bottom: 30px;

    opacity: 0.6;

    width: 100%;

    text-align: center;

}

#footer .outer {

    padding: 0 30px;

}

.footer-left {

    float: left;

}

.footer-right {

    float: right;

}

#footer-time {

    max-width: 100%;

    margin: 0 154px;

    position: relative;

}

.fa.fa-heart {

    color: #f00;

}

.my-face {

    -webkit-animation: my-face 5s infinite ease-in-out;

    -moz-animation: my-face 5s infinite ease-in-out;

    -ms-animation: my-face 5s infinite ease-in-out;

    animation: my-face 5s infinite ease-in-out;

    display: inline-block;

    margin: 0 5px;

}

@-moz-keyframes my-face {

    2% {

        -webkit-transform: translate(0, 1.5px) rotate(1.5deg);

        -moz-transform: translate(0, 1.5px) rotate(1.5deg);

        -ms-transform: translate(0, 1.5px) rotate(1.5deg);

        transform: translate(0, 1.5px) rotate(1.5deg);

    }

    4% {

        -webkit-transform: translate(0, -1.5px) rotate(-0.5deg);

        -moz-transform: translate(0, -1.5px) rotate(-0.5deg);

        -ms-transform: translate(0, -1.5px) rotate(-0.5deg);

        transform: translate(0, -1.5px) rotate(-0.5deg);

    }

    6% {

        -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);

        -moz-transform: translate(0, 1.5px) rotate(-1.5deg);

        -ms-transform: translate(0, 1.5px) rotate(-1.5deg);

        transform: translate(0, 1.5px) rotate(-1.5deg);

    }

    8% {

        -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);

        -moz-transform: translate(0, -1.5px) rotate(-1.5deg);

        -ms-transform: translate(0, -1.5px) rotate(-1.5deg);

        transform: translate(0, -1.5px) rotate(-1.5deg);

    }

    10% {

        -webkit-transform: translate(0, 2.5px) rotate(1.5deg);

        -moz-transform: translate(0, 2.5px) rotate(1.5deg);

        -ms-transform: translate(0, 2.5px) rotate(1.5deg);

        transform: translate(0, 2.5px) rotate(1.5deg);

    }

    12% {

        -webkit-transform: translate(0, -0.5px) rotate(1.5deg);

        -moz-transform: translate(0, -0.5px) rotate(1.5deg);

        -ms-transform: translate(0, -0.5px) rotate(1.5deg);

        transform: translate(0, -0.5px) rotate(1.5deg);

    }

    14% {

        -webkit-transform: translate(0, -1.5px) rotate(1.5deg);

        -moz-transform: translate(0, -1.5px) rotate(1.5deg);

        -ms-transform: translate(0, -1.5px) rotate(1.5deg);

        transform: translate(0, -1.5px) rotate(1.5deg);

    }

    16% {

        -webkit-transform: translate(0, -0.5px) rotate(-1.5deg);

        -moz-transform: translate(0, -0.5px) rotate(-1.5deg);

        -ms-transform: translate(0, -0.5px) rotate(-1.5deg);

        transform: translate(0, -0.5px) rotate(-1.5deg);

    }

    18% {

        -webkit-transform: translate(0, 0.5px) rotate(-1.5deg);

        -moz-transform: translate(0, 0.5px) rotate(-1.5deg);

        -ms-transform: translate(0, 0.5px) rotate(-1.5deg);

        transform: translate(0, 0.5px) rotate(-1.5deg);

    }

    20% {

        -webkit-transform: translate(0, -1.5px) rotate(2.5deg);

        -moz-transform: translate(0, -1.5px) rotate(2.5deg);

        -ms-transform: translate(0, -1.5px) rotate(2.5deg);

        transform: translate(0, -1.5px) rotate(2.5deg);

    }

    22% {

        -webkit-transform: translate(0, 0.5px) rotate(-1.5deg);

        -moz-transform: translate(0, 0.5px) rotate(-1.5deg);

        -ms-transform: translate(0, 0.5px) rotate(-1.5deg);

        transform: translate(0, 0.5px) rotate(-1.5deg);

    }

    24% {

        -webkit-transform: translate(0, 1.5px) rotate(1.5deg);

        -moz-transform: translate(0, 1.5px) rotate(1.5deg);

        -ms-transform: translate(0, 1.5px) rotate(1.5deg);

        transform: translate(0, 1.5px) rotate(1.5deg);

    }

    26% {

        -webkit-transform: translate(0, 0.5px) rotate(0.5deg);

        -moz-transform: translate(0, 0.5px) rotate(0.5deg);

        -ms-transform: translate(0, 0.5px) rotate(0.5deg);

        transform: translate(0, 0.5px) rotate(0.5deg);

    }

    28% {

        -webkit-transform: translate(0, 0.5px) rotate(1.5deg);

        -moz-transform: translate(0, 0.5px) rotate(1.5deg);

        -ms-transform: translate(0, 0.5px) rotate(1.5deg);

        transform: translate(0, 0.5px) rotate(1.5deg);

    }

    30% {

        -webkit-transform: translate(0, -0.5px) rotate(2.5deg);

        -moz-transform: translate(0, -0.5px) rotate(2.5deg);

        -ms-transform: translate(0, -0.5px) rotate(2.5deg);

        transform: translate(0, -0.5px) rotate(2.5deg);

    }

    32% {

        -webkit-transform: translate(0, 1.5px) rotate(-0.5deg);

        -moz-transform: translate(0, 1.5px) rotate(-0.5deg);

        -ms-transform: translate(0, 1.5px) rotate(-0.5deg);

        transform: translate(0, 1.5px) rotate(-0.5deg);

    }

    34% {

        -webkit-transform: translate(0, 1.5px) rotate(-0.5deg);

        -moz-transform: translate(0, 1.5px) rotate(-0.5deg);

        -ms-transform: translate(0, 1.5px) rotate(-0.5deg);

        transform: translate(0, 1.5px) rotate(-0.5deg);

    }

    36% {

        -webkit-transform: translate(0, -1.5px) rotate(2.5deg);

        -moz-transform: translate(0, -1.5px) rotate(2.5deg);

        -ms-transform: translate(0, -1.5px) rotate(2.5deg);

        transform: translate(0, -1.5px) rotate(2.5deg);

    }

    38% {

        -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);

        -moz-transform: translate(0, 1.5px) rotate(-1.5deg);

        -ms-transform: translate(0, 1.5px) rotate(-1.5deg);

        transform: translate(0, 1.5px) rotate(-1.5deg);

    }

    40% {

        -webkit-transform: translate(0, -0.5px) rotate(2.5deg);

        -moz-transform: translate(0, -0.5px) rotate(2.5deg);

        -ms-transform: translate(0, -0.5px) rotate(2.5deg);

        transform: translate(0, -0.5px) rotate(2.5deg);

    }

    42% {

        -webkit-transform: translate(0, 2.5px) rotate(-1.5deg);

        -moz-transform: translate(0, 2.5px) rotate(-1.5deg);

        -ms-transform: translate(0, 2.5px) rotate(-1.5deg);

        transform: translate(0, 2.5px) rotate(-1.5deg);

    }

    44% {

        -webkit-transform: translate(0, 1.5px) rotate(0.5deg);

        -moz-transform: translate(0, 1.5px) rotate(0.5deg);

        -ms-transform: translate(0, 1.5px) rotate(0.5deg);

        transform: translate(0, 1.5px) rotate(0.5deg);

    }

    46% {

        -webkit-transform: translate(0, -1.5px) rotate(2.5deg);

        -moz-transform: translate(0, -1.5px) rotate(2.5deg);

        -ms-transform: translate(0, -1.5px) rotate(2.5deg);

        transform: translate(0, -1.5px) rotate(2.5deg);

    }

    48% {

        -webkit-transform: translate(0, -0.5px) rotate(0.5deg);

        -moz-transform: translate(0, -0.5px) rotate(0.5deg);

        -ms-transform: translate(0, -0.5px) rotate(0.5deg);

        transform: translate(0, -0.5px) rotate(0.5deg);

    }

    50% {

        -webkit-transform: translate(0, 0.5px) rotate(0.5deg);

        -moz-transform: translate(0, 0.5px) rotate(0.5deg);

        -ms-transform: translate(0, 0.5px) rotate(0.5deg);

        transform: translate(0, 0.5px) rotate(0.5deg);

    }

    52% {

        -webkit-transform: translate(0, 2.5px) rotate(2.5deg);

        -moz-transform: translate(0, 2.5px) rotate(2.5deg);

        -ms-transform: translate(0, 2.5px) rotate(2.5deg);

        transform: translate(0, 2.5px) rotate(2.5deg);

    }

    54% {

        -webkit-transform: translate(0, -1.5px) rotate(1.5deg);

        -moz-transform: translate(0, -1.5px) rotate(1.5deg);

        -ms-transform: translate(0, -1.5px) rotate(1.5deg);

        transform: translate(0, -1.5px) rotate(1.5deg);

    }

    56% {

        -webkit-transform: translate(0, 2.5px) rotate(2.5deg);

        -moz-transform: translate(0, 2.5px) rotate(2.5deg);

        -ms-transform: translate(0, 2.5px) rotate(2.5deg);

        transform: translate(0, 2.5px) rotate(2.5deg);

    }

    58% {

        -webkit-transform: translate(0, 0.5px) rotate(2.5deg);

        -moz-transform: translate(0, 0.5px) rotate(2.5deg);

        -ms-transform: translate(0, 0.5px) rotate(2.5deg);

        transform: translate(0, 0.5px) rotate(2.5deg);

    }

    60% {

        -webkit-transform: translate(0, 2.5px) rotate(2.5deg);

        -moz-transform: translate(0, 2.5px) rotate(2.5deg);

        -ms-transform: translate(0, 2.5px) rotate(2.5deg);

        transform: translate(0, 2.5px) rotate(2.5deg);

    }

    62% {

        -webkit-transform: translate(0, -0.5px) rotate(2.5deg);

        -moz-transform: translate(0, -0.5px) rotate(2.5deg);

        -ms-transform: translate(0, -0.5px) rotate(2.5deg);

        transform: translate(0, -0.5px) rotate(2.5deg);

    }

    64% {

        -webkit-transform: translate(0, -0.5px) rotate(1.5deg);

        -moz-transform: translate(0, -0.5px) rotate(1.5deg);

        -ms-transform: translate(0, -0.5px) rotate(1.5deg);

        transform: translate(0, -0.5px) rotate(1.5deg);

    }

    66% {

        -webkit-transform: translate(0, 1.5px) rotate(-0.5deg);

        -moz-transform: translate(0, 1.5px) rotate(-0.5deg);

        -ms-transform: translate(0, 1.5px) rotate(-0.5deg);

        transform: translate(0, 1.5px) rotate(-0.5deg);

    }

    68% {

        -webkit-transform: translate(0, -1.5px) rotate(-0.5deg);

        -moz-transform: translate(0, -1.5px) rotate(-0.5deg);

        -ms-transform: translate(0, -1.5px) rotate(-0.5deg);

        transform: translate(0, -1.5px) rotate(-0.5deg);

    }

    70% {

        -webkit-transform: translate(0, 1.5px) rotate(0.5deg);

        -moz-transform: translate(0, 1.5px) rotate(0.5deg);

        -ms-transform: translate(0, 1.5px) rotate(0.5deg);

        transform: translate(0, 1.5px) rotate(0.5deg);

    }

    72% {

        -webkit-transform: translate(0, 2.5px) rotate(1.5deg);

        -moz-transform: translate(0, 2.5px) rotate(1.5deg);

        -ms-transform: translate(0, 2.5px) rotate(1.5deg);

        transform: translate(0, 2.5px) rotate(1.5deg);

    }

    74% {

        -webkit-transform: translate(0, -0.5px) rotate(0.5deg);

        -moz-transform: translate(0, -0.5px) rotate(0.5deg);

        -ms-transform: translate(0, -0.5px) rotate(0.5deg);

        transform: translate(0, -0.5px) rotate(0.5deg);

    }

    76% {

        -webkit-transform: translate(0, -0.5px) rotate(2.5deg);

        -moz-transform: translate(0, -0.5px) rotate(2.5deg);

        -ms-transform: translate(0, -0.5px) rotate(2.5deg);

        transform: translate(0, -0.5px) rotate(2.5deg);

    }

    78% {

        -webkit-transform: translate(0, -0.5px) rotate(1.5deg);

        -moz-transform: translate(0, -0.5px) rotate(1.5deg);

        -ms-transform: translate(0, -0.5px) rotate(1.5deg);

        transform: translate(0, -0.5px) rotate(1.5deg);

    }

    80% {

        -webkit-transform: translate(0, 1.5px) rotate(1.5deg);

        -moz-transform: translate(0, 1.5px) rotate(1.5deg);

        -ms-transform: translate(0, 1.5px) rotate(1.5deg);

        transform: translate(0, 1.5px) rotate(1.5deg);

    }

    82% {

        -webkit-transform: translate(0, -0.5px) rotate(0.5deg);

        -moz-transform: translate(0, -0.5px) rotate(0.5deg);

        -ms-transform: translate(0, -0.5px) rotate(0.5deg);

        transform: translate(0, -0.5px) rotate(0.5deg);

    }

    84% {

        -webkit-transform: translate(0, 1.5px) rotate(2.5deg);

        -moz-transform: translate(0, 1.5px) rotate(2.5deg);

        -ms-transform: translate(0, 1.5px) rotate(2.5deg);

        transform: translate(0, 1.5px) rotate(2.5deg);

    }

    86% {

        -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);

        -moz-transform: translate(0, -1.5px) rotate(-1.5deg);

        -ms-transform: translate(0, -1.5px) rotate(-1.5deg);

        transform: translate(0, -1.5px) rotate(-1.5deg);

    }

    88% {

        -webkit-transform: translate(0, -0.5px) rotate(2.5deg);

        -moz-transform: translate(0, -0.5px) rotate(2.5deg);

        -ms-transform: translate(0, -0.5px) rotate(2.5deg);

        transform: translate(0, -0.5px) rotate(2.5deg);

    }

    90% {

        -webkit-transform: translate(0, 2.5px) rotate(-0.5deg);

        -moz-transform: translate(0, 2.5px) rotate(-0.5deg);

        -ms-transform: translate(0, 2.5px) rotate(-0.5deg);

        transform: translate(0, 2.5px) rotate(-0.5deg);

    }

    92% {

        -webkit-transform: translate(0, 0.5px) rotate(-0.5deg);

        -moz-transform: translate(0, 0.5px) rotate(-0.5deg);

        -ms-transform: translate(0, 0.5px) rotate(-0.5deg);

        transform: translate(0, 0.5px) rotate(-0.5deg);

    }

    94% {

        -webkit-transform: translate(0, 2.5px) rotate(0.5deg);

        -moz-transform: translate(0, 2.5px) rotate(0.5deg);

        -ms-transform: translate(0, 2.5px) rotate(0.5deg);

        transform: translate(0, 2.5px) rotate(0.5deg);

    }

    96% {

        -webkit-transform: translate(0, -0.5px) rotate(1.5deg);

        -moz-transform: translate(0, -0.5px) rotate(1.5deg);

        -ms-transform: translate(0, -0.5px) rotate(1.5deg);

        transform: translate(0, -0.5px) rotate(1.5deg);

    }

    98% {

        -webkit-transform: translate(0, -1.5px) rotate(-0.5deg);

        -moz-transform: translate(0, -1.5px) rotate(-0.5deg);

        -ms-transform: translate(0, -1.5px) rotate(-0.5deg);

        transform: translate(0, -1.5px) rotate(-0.5deg);

    }

    0%, 100% {

        -webkit-transform: translate(0, 0) rotate(0deg);

        -moz-transform: translate(0, 0) rotate(0deg);

        -ms-transform: translate(0, 0) rotate(0deg);

        transform: translate(0, 0) rotate(0deg);

    }

}

@-webkit-keyframes my-face {

    2% {

        -webkit-transform: translate(0, 1.5px) rotate(1.5deg);

        -moz-transform: translate(0, 1.5px) rotate(1.5deg);

        -ms-transform: translate(0, 1.5px) rotate(1.5deg);

        transform: translate(0, 1.5px) rotate(1.5deg);

    }

    4% {

        -webkit-transform: translate(0, -1.5px) rotate(-0.5deg);

        -moz-transform: translate(0, -1.5px) rotate(-0.5deg);

        -ms-transform: translate(0, -1.5px) rotate(-0.5deg);

        transform: translate(0, -1.5px) rotate(-0.5deg);

    }

    6% {

        -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);

        -moz-transform: translate(0, 1.5px) rotate(-1.5deg);

        -ms-transform: translate(0, 1.5px) rotate(-1.5deg);

        transform: translate(0, 1.5px) rotate(-1.5deg);

    }

    8% {

        -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);

        -moz-transform: translate(0, -1.5px) rotate(-1.5deg);

        -ms-transform: translate(0, -1.5px) rotate(-1.5deg);

        transform: translate(0, -1.5px) rotate(-1.5deg);

    }

    10% {

        -webkit-transform: translate(0, 2.5px) rotate(1.5deg);

        -moz-transform: translate(0, 2.5px) rotate(1.5deg);

        -ms-transform: translate(0, 2.5px) rotate(1.5deg);

        transform: translate(0, 2.5px) rotate(1.5deg);

    }

    12% {

        -webkit-transform: translate(0, -0.5px) rotate(1.5deg);

        -moz-transform: translate(0, -0.5px) rotate(1.5deg);

        -ms-transform: translate(0, -0.5px) rotate(1.5deg);

        transform: translate(0, -0.5px) rotate(1.5deg);

    }

    14% {

        -webkit-transform: translate(0, -1.5px) rotate(1.5deg);

        -moz-transform: translate(0, -1.5px) rotate(1.5deg);

        -ms-transform: translate(0, -1.5px) rotate(1.5deg);

        transform: translate(0, -1.5px) rotate(1.5deg);

    }

    16% {

        -webkit-transform: translate(0, -0.5px) rotate(-1.5deg);

        -moz-transform: translate(0, -0.5px) rotate(-1.5deg);

        -ms-transform: translate(0, -0.5px) rotate(-1.5deg);

        transform: translate(0, -0.5px) rotate(-1.5deg);

    }

    18% {

        -webkit-transform: translate(0, 0.5px) rotate(-1.5deg);

        -moz-transform: translate(0, 0.5px) rotate(-1.5deg);

        -ms-transform: translate(0, 0.5px) rotate(-1.5deg);

        transform: translate(0, 0.5px) rotate(-1.5deg);

    }

    20% {

        -webkit-transform: translate(0, -1.5px) rotate(2.5deg);

        -moz-transform: translate(0, -1.5px) rotate(2.5deg);

        -ms-transform: translate(0, -1.5px) rotate(2.5deg);

        transform: translate(0, -1.5px) rotate(2.5deg);

    }

    22% {

        -webkit-transform: translate(0, 0.5px) rotate(-1.5deg);

        -moz-transform: translate(0, 0.5px) rotate(-1.5deg);

        -ms-transform: translate(0, 0.5px) rotate(-1.5deg);

        transform: translate(0, 0.5px) rotate(-1.5deg);

    }

    24% {

        -webkit-transform: translate(0, 1.5px) rotate(1.5deg);

        -moz-transform: translate(0, 1.5px) rotate(1.5deg);

        -ms-transform: translate(0, 1.5px) rotate(1.5deg);

        transform: translate(0, 1.5px) rotate(1.5deg);

    }

    26% {

        -webkit-transform: translate(0, 0.5px) rotate(0.5deg);

        -moz-transform: translate(0, 0.5px) rotate(0.5deg);

        -ms-transform: translate(0, 0.5px) rotate(0.5deg);

        transform: translate(0, 0.5px) rotate(0.5deg);

    }

    28% {

        -webkit-transform: translate(0, 0.5px) rotate(1.5deg);

        -moz-transform: translate(0, 0.5px) rotate(1.5deg);

        -ms-transform: translate(0, 0.5px) rotate(1.5deg);

        transform: translate(0, 0.5px) rotate(1.5deg);

    }

    30% {

        -webkit-transform: translate(0, -0.5px) rotate(2.5deg);

        -moz-transform: translate(0, -0.5px) rotate(2.5deg);

        -ms-transform: translate(0, -0.5px) rotate(2.5deg);

        transform: translate(0, -0.5px) rotate(2.5deg);

    }

    32% {

        -webkit-transform: translate(0, 1.5px) rotate(-0.5deg);

        -moz-transform: translate(0, 1.5px) rotate(-0.5deg);

        -ms-transform: translate(0, 1.5px) rotate(-0.5deg);

        transform: translate(0, 1.5px) rotate(-0.5deg);

    }

    34% {

        -webkit-transform: translate(0, 1.5px) rotate(-0.5deg);

        -moz-transform: translate(0, 1.5px) rotate(-0.5deg);

        -ms-transform: translate(0, 1.5px) rotate(-0.5deg);

        transform: translate(0, 1.5px) rotate(-0.5deg);

    }

    36% {

        -webkit-transform: translate(0, -1.5px) rotate(2.5deg);

        -moz-transform: translate(0, -1.5px) rotate(2.5deg);

        -ms-transform: translate(0, -1.5px) rotate(2.5deg);

        transform: translate(0, -1.5px) rotate(2.5deg);

    }

    38% {

        -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);

        -moz-transform: translate(0, 1.5px) rotate(-1.5deg);

        -ms-transform: translate(0, 1.5px) rotate(-1.5deg);

        transform: translate(0, 1.5px) rotate(-1.5deg);

    }

    40% {

        -webkit-transform: translate(0, -0.5px) rotate(2.5deg);

        -moz-transform: translate(0, -0.5px) rotate(2.5deg);

        -ms-transform: translate(0, -0.5px) rotate(2.5deg);

        transform: translate(0, -0.5px) rotate(2.5deg);

    }

    42% {

        -webkit-transform: translate(0, 2.5px) rotate(-1.5deg);

        -moz-transform: translate(0, 2.5px) rotate(-1.5deg);

        -ms-transform: translate(0, 2.5px) rotate(-1.5deg);

        transform: translate(0, 2.5px) rotate(-1.5deg);

    }

    44% {

        -webkit-transform: translate(0, 1.5px) rotate(0.5deg);

        -moz-transform: translate(0, 1.5px) rotate(0.5deg);

        -ms-transform: translate(0, 1.5px) rotate(0.5deg);

        transform: translate(0, 1.5px) rotate(0.5deg);

    }

    46% {

        -webkit-transform: translate(0, -1.5px) rotate(2.5deg);

        -moz-transform: translate(0, -1.5px) rotate(2.5deg);

        -ms-transform: translate(0, -1.5px) rotate(2.5deg);

        transform: translate(0, -1.5px) rotate(2.5deg);

    }

    48% {

        -webkit-transform: translate(0, -0.5px) rotate(0.5deg);

        -moz-transform: translate(0, -0.5px) rotate(0.5deg);

        -ms-transform: translate(0, -0.5px) rotate(0.5deg);

        transform: translate(0, -0.5px) rotate(0.5deg);

    }

    50% {

        -webkit-transform: translate(0, 0.5px) rotate(0.5deg);

        -moz-transform: translate(0, 0.5px) rotate(0.5deg);

        -ms-transform: translate(0, 0.5px) rotate(0.5deg);

        transform: translate(0, 0.5px) rotate(0.5deg);

    }

    52% {

        -webkit-transform: translate(0, 2.5px) rotate(2.5deg);

        -moz-transform: translate(0, 2.5px) rotate(2.5deg);

        -ms-transform: translate(0, 2.5px) rotate(2.5deg);

        transform: translate(0, 2.5px) rotate(2.5deg);

    }

    54% {

        -webkit-transform: translate(0, -1.5px) rotate(1.5deg);

        -moz-transform: translate(0, -1.5px) rotate(1.5deg);

        -ms-transform: translate(0, -1.5px) rotate(1.5deg);

        transform: translate(0, -1.5px) rotate(1.5deg);

    }

    56% {

        -webkit-transform: translate(0, 2.5px) rotate(2.5deg);

        -moz-transform: translate(0, 2.5px) rotate(2.5deg);

        -ms-transform: translate(0, 2.5px) rotate(2.5deg);

        transform: translate(0, 2.5px) rotate(2.5deg);

    }

    58% {

        -webkit-transform: translate(0, 0.5px) rotate(2.5deg);

        -moz-transform: translate(0, 0.5px) rotate(2.5deg);

        -ms-transform: translate(0, 0.5px) rotate(2.5deg);

        transform: translate(0, 0.5px) rotate(2.5deg);

    }

    60% {

        -webkit-transform: translate(0, 2.5px) rotate(2.5deg);

        -moz-transform: translate(0, 2.5px) rotate(2.5deg);

        -ms-transform: translate(0, 2.5px) rotate(2.5deg);

        transform: translate(0, 2.5px) rotate(2.5deg);

    }

    62% {

        -webkit-transform: translate(0, -0.5px) rotate(2.5deg);

        -moz-transform: translate(0, -0.5px) rotate(2.5deg);

        -ms-transform: translate(0, -0.5px) rotate(2.5deg);

        transform: translate(0, -0.5px) rotate(2.5deg);

    }

    64% {

        -webkit-transform: translate(0, -0.5px) rotate(1.5deg);

        -moz-transform: translate(0, -0.5px) rotate(1.5deg);

        -ms-transform: translate(0, -0.5px) rotate(1.5deg);

        transform: translate(0, -0.5px) rotate(1.5deg);

    }

    66% {

        -webkit-transform: translate(0, 1.5px) rotate(-0.5deg);

        -moz-transform: translate(0, 1.5px) rotate(-0.5deg);

        -ms-transform: translate(0, 1.5px) rotate(-0.5deg);

        transform: translate(0, 1.5px) rotate(-0.5deg);

    }

    68% {

        -webkit-transform: translate(0, -1.5px) rotate(-0.5deg);

        -moz-transform: translate(0, -1.5px) rotate(-0.5deg);

        -ms-transform: translate(0, -1.5px) rotate(-0.5deg);

        transform: translate(0, -1.5px) rotate(-0.5deg);

    }

    70% {

        -webkit-transform: translate(0, 1.5px) rotate(0.5deg);

        -moz-transform: translate(0, 1.5px) rotate(0.5deg);

        -ms-transform: translate(0, 1.5px) rotate(0.5deg);

        transform: translate(0, 1.5px) rotate(0.5deg);

    }

    72% {

        -webkit-transform: translate(0, 2.5px) rotate(1.5deg);

        -moz-transform: translate(0, 2.5px) rotate(1.5deg);

        -ms-transform: translate(0, 2.5px) rotate(1.5deg);

        transform: translate(0, 2.5px) rotate(1.5deg);

    }

    74% {

        -webkit-transform: translate(0, -0.5px) rotate(0.5deg);

        -moz-transform: translate(0, -0.5px) rotate(0.5deg);

        -ms-transform: translate(0, -0.5px) rotate(0.5deg);

        transform: translate(0, -0.5px) rotate(0.5deg);

    }

    76% {

        -webkit-transform: translate(0, -0.5px) rotate(2.5deg);

        -moz-transform: translate(0, -0.5px) rotate(2.5deg);

        -ms-transform: translate(0, -0.5px) rotate(2.5deg);

        transform: translate(0, -0.5px) rotate(2.5deg);

    }

    78% {

        -webkit-transform: translate(0, -0.5px) rotate(1.5deg);

        -moz-transform: translate(0, -0.5px) rotate(1.5deg);

        -ms-transform: translate(0, -0.5px) rotate(1.5deg);

        transform: translate(0, -0.5px) rotate(1.5deg);

    }

    80% {

        -webkit-transform: translate(0, 1.5px) rotate(1.5deg);

        -moz-transform: translate(0, 1.5px) rotate(1.5deg);

        -ms-transform: translate(0, 1.5px) rotate(1.5deg);

        transform: translate(0, 1.5px) rotate(1.5deg);

    }

    82% {

        -webkit-transform: translate(0, -0.5px) rotate(0.5deg);

        -moz-transform: translate(0, -0.5px) rotate(0.5deg);

        -ms-transform: translate(0, -0.5px) rotate(0.5deg);

        transform: translate(0, -0.5px) rotate(0.5deg);

    }

    84% {

        -webkit-transform: translate(0, 1.5px) rotate(2.5deg);

        -moz-transform: translate(0, 1.5px) rotate(2.5deg);

        -ms-transform: translate(0, 1.5px) rotate(2.5deg);

        transform: translate(0, 1.5px) rotate(2.5deg);

    }

    86% {

        -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);

        -moz-transform: translate(0, -1.5px) rotate(-1.5deg);

        -ms-transform: translate(0, -1.5px) rotate(-1.5deg);

        transform: translate(0, -1.5px) rotate(-1.5deg);

    }

    88% {

        -webkit-transform: translate(0, -0.5px) rotate(2.5deg);

        -moz-transform: translate(0, -0.5px) rotate(2.5deg);

        -ms-transform: translate(0, -0.5px) rotate(2.5deg);

        transform: translate(0, -0.5px) rotate(2.5deg);

    }

    90% {

        -webkit-transform: translate(0, 2.5px) rotate(-0.5deg);

        -moz-transform: translate(0, 2.5px) rotate(-0.5deg);

        -ms-transform: translate(0, 2.5px) rotate(-0.5deg);

        transform: translate(0, 2.5px) rotate(-0.5deg);

    }

    92% {

        -webkit-transform: translate(0, 0.5px) rotate(-0.5deg);

        -moz-transform: translate(0, 0.5px) rotate(-0.5deg);

        -ms-transform: translate(0, 0.5px) rotate(-0.5deg);

        transform: translate(0, 0.5px) rotate(-0.5deg);

    }

    94% {

        -webkit-transform: translate(0, 2.5px) rotate(0.5deg);

        -moz-transform: translate(0, 2.5px) rotate(0.5deg);

        -ms-transform: translate(0, 2.5px) rotate(0.5deg);

        transform: translate(0, 2.5px) rotate(0.5deg);

    }

    96% {

        -webkit-transform: translate(0, -0.5px) rotate(1.5deg);

        -moz-transform: translate(0, -0.5px) rotate(1.5deg);

        -ms-transform: translate(0, -0.5px) rotate(1.5deg);

        transform: translate(0, -0.5px) rotate(1.5deg);

    }

    98% {

        -webkit-transform: translate(0, -1.5px) rotate(-0.5deg);

        -moz-transform: translate(0, -1.5px) rotate(-0.5deg);

        -ms-transform: translate(0, -1.5px) rotate(-0.5deg);

        transform: translate(0, -1.5px) rotate(-0.5deg);

    }

    0%, 100% {

        -webkit-transform: translate(0, 0) rotate(0deg);

        -moz-transform: translate(0, 0) rotate(0deg);

        -ms-transform: translate(0, 0) rotate(0deg);

        transform: translate(0, 0) rotate(0deg);

    }

}

@-o-keyframes my-face {

    2% {

        -webkit-transform: translate(0, 1.5px) rotate(1.5deg);

        -moz-transform: translate(0, 1.5px) rotate(1.5deg);

        -ms-transform: translate(0, 1.5px) rotate(1.5deg);

        transform: translate(0, 1.5px) rotate(1.5deg);

    }

    4% {

        -webkit-transform: translate(0, -1.5px) rotate(-0.5deg);

        -moz-transform: translate(0, -1.5px) rotate(-0.5deg);

        -ms-transform: translate(0, -1.5px) rotate(-0.5deg);

        transform: translate(0, -1.5px) rotate(-0.5deg);

    }

    6% {

        -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);

        -moz-transform: translate(0, 1.5px) rotate(-1.5deg);

        -ms-transform: translate(0, 1.5px) rotate(-1.5deg);

        transform: translate(0, 1.5px) rotate(-1.5deg);

    }

    8% {

        -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);

        -moz-transform: translate(0, -1.5px) rotate(-1.5deg);

        -ms-transform: translate(0, -1.5px) rotate(-1.5deg);

        transform: translate(0, -1.5px) rotate(-1.5deg);

    }

    10% {

        -webkit-transform: translate(0, 2.5px) rotate(1.5deg);

        -moz-transform: translate(0, 2.5px) rotate(1.5deg);

        -ms-transform: translate(0, 2.5px) rotate(1.5deg);

        transform: translate(0, 2.5px) rotate(1.5deg);

    }

    12% {

        -webkit-transform: translate(0, -0.5px) rotate(1.5deg);

        -moz-transform: translate(0, -0.5px) rotate(1.5deg);

        -ms-transform: translate(0, -0.5px) rotate(1.5deg);

        transform: translate(0, -0.5px) rotate(1.5deg);

    }

    14% {

        -webkit-transform: translate(0, -1.5px) rotate(1.5deg);

        -moz-transform: translate(0, -1.5px) rotate(1.5deg);

        -ms-transform: translate(0, -1.5px) rotate(1.5deg);

        transform: translate(0, -1.5px) rotate(1.5deg);

    }

    16% {

        -webkit-transform: translate(0, -0.5px) rotate(-1.5deg);

        -moz-transform: translate(0, -0.5px) rotate(-1.5deg);

        -ms-transform: translate(0, -0.5px) rotate(-1.5deg);

        transform: translate(0, -0.5px) rotate(-1.5deg);

    }

    18% {

        -webkit-transform: translate(0, 0.5px) rotate(-1.5deg);

        -moz-transform: translate(0, 0.5px) rotate(-1.5deg);

        -ms-transform: translate(0, 0.5px) rotate(-1.5deg);

        transform: translate(0, 0.5px) rotate(-1.5deg);

    }

    20% {

        -webkit-transform: translate(0, -1.5px) rotate(2.5deg);

        -moz-transform: translate(0, -1.5px) rotate(2.5deg);

        -ms-transform: translate(0, -1.5px) rotate(2.5deg);

        transform: translate(0, -1.5px) rotate(2.5deg);

    }

    22% {

        -webkit-transform: translate(0, 0.5px) rotate(-1.5deg);

        -moz-transform: translate(0, 0.5px) rotate(-1.5deg);

        -ms-transform: translate(0, 0.5px) rotate(-1.5deg);

        transform: translate(0, 0.5px) rotate(-1.5deg);

    }

    24% {

        -webkit-transform: translate(0, 1.5px) rotate(1.5deg);

        -moz-transform: translate(0, 1.5px) rotate(1.5deg);

        -ms-transform: translate(0, 1.5px) rotate(1.5deg);

        transform: translate(0, 1.5px) rotate(1.5deg);

    }

    26% {

        -webkit-transform: translate(0, 0.5px) rotate(0.5deg);

        -moz-transform: translate(0, 0.5px) rotate(0.5deg);

        -ms-transform: translate(0, 0.5px) rotate(0.5deg);

        transform: translate(0, 0.5px) rotate(0.5deg);

    }

    28% {

        -webkit-transform: translate(0, 0.5px) rotate(1.5deg);

        -moz-transform: translate(0, 0.5px) rotate(1.5deg);

        -ms-transform: translate(0, 0.5px) rotate(1.5deg);

        transform: translate(0, 0.5px) rotate(1.5deg);

    }

    30% {

        -webkit-transform: translate(0, -0.5px) rotate(2.5deg);

        -moz-transform: translate(0, -0.5px) rotate(2.5deg);

        -ms-transform: translate(0, -0.5px) rotate(2.5deg);

        transform: translate(0, -0.5px) rotate(2.5deg);

    }

    32% {

        -webkit-transform: translate(0, 1.5px) rotate(-0.5deg);

        -moz-transform: translate(0, 1.5px) rotate(-0.5deg);

        -ms-transform: translate(0, 1.5px) rotate(-0.5deg);

        transform: translate(0, 1.5px) rotate(-0.5deg);

    }

    34% {

        -webkit-transform: translate(0, 1.5px) rotate(-0.5deg);

        -moz-transform: translate(0, 1.5px) rotate(-0.5deg);

        -ms-transform: translate(0, 1.5px) rotate(-0.5deg);

        transform: translate(0, 1.5px) rotate(-0.5deg);

    }

    36% {

        -webkit-transform: translate(0, -1.5px) rotate(2.5deg);

        -moz-transform: translate(0, -1.5px) rotate(2.5deg);

        -ms-transform: translate(0, -1.5px) rotate(2.5deg);

        transform: translate(0, -1.5px) rotate(2.5deg);

    }

    38% {

        -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);

        -moz-transform: translate(0, 1.5px) rotate(-1.5deg);

        -ms-transform: translate(0, 1.5px) rotate(-1.5deg);

        transform: translate(0, 1.5px) rotate(-1.5deg);

    }

    40% {

        -webkit-transform: translate(0, -0.5px) rotate(2.5deg);

        -moz-transform: translate(0, -0.5px) rotate(2.5deg);

        -ms-transform: translate(0, -0.5px) rotate(2.5deg);

        transform: translate(0, -0.5px) rotate(2.5deg);

    }

    42% {

        -webkit-transform: translate(0, 2.5px) rotate(-1.5deg);

        -moz-transform: translate(0, 2.5px) rotate(-1.5deg);

        -ms-transform: translate(0, 2.5px) rotate(-1.5deg);

        transform: translate(0, 2.5px) rotate(-1.5deg);

    }

    44% {

        -webkit-transform: translate(0, 1.5px) rotate(0.5deg);

        -moz-transform: translate(0, 1.5px) rotate(0.5deg);

        -ms-transform: translate(0, 1.5px) rotate(0.5deg);

        transform: translate(0, 1.5px) rotate(0.5deg);

    }

    46% {

        -webkit-transform: translate(0, -1.5px) rotate(2.5deg);

        -moz-transform: translate(0, -1.5px) rotate(2.5deg);

        -ms-transform: translate(0, -1.5px) rotate(2.5deg);

        transform: translate(0, -1.5px) rotate(2.5deg);

    }

    48% {

        -webkit-transform: translate(0, -0.5px) rotate(0.5deg);

        -moz-transform: translate(0, -0.5px) rotate(0.5deg);

        -ms-transform: translate(0, -0.5px) rotate(0.5deg);

        transform: translate(0, -0.5px) rotate(0.5deg);

    }

    50% {

        -webkit-transform: translate(0, 0.5px) rotate(0.5deg);

        -moz-transform: translate(0, 0.5px) rotate(0.5deg);

        -ms-transform: translate(0, 0.5px) rotate(0.5deg);

        transform: translate(0, 0.5px) rotate(0.5deg);

    }

    52% {

        -webkit-transform: translate(0, 2.5px) rotate(2.5deg);

        -moz-transform: translate(0, 2.5px) rotate(2.5deg);

        -ms-transform: translate(0, 2.5px) rotate(2.5deg);

        transform: translate(0, 2.5px) rotate(2.5deg);

    }

    54% {

        -webkit-transform: translate(0, -1.5px) rotate(1.5deg);

        -moz-transform: translate(0, -1.5px) rotate(1.5deg);

        -ms-transform: translate(0, -1.5px) rotate(1.5deg);

        transform: translate(0, -1.5px) rotate(1.5deg);

    }

    56% {

        -webkit-transform: translate(0, 2.5px) rotate(2.5deg);

        -moz-transform: translate(0, 2.5px) rotate(2.5deg);

        -ms-transform: translate(0, 2.5px) rotate(2.5deg);

        transform: translate(0, 2.5px) rotate(2.5deg);

    }

    58% {

        -webkit-transform: translate(0, 0.5px) rotate(2.5deg);

        -moz-transform: translate(0, 0.5px) rotate(2.5deg);

        -ms-transform: translate(0, 0.5px) rotate(2.5deg);

        transform: translate(0, 0.5px) rotate(2.5deg);

    }

    60% {

        -webkit-transform: translate(0, 2.5px) rotate(2.5deg);

        -moz-transform: translate(0, 2.5px) rotate(2.5deg);

        -ms-transform: translate(0, 2.5px) rotate(2.5deg);

        transform: translate(0, 2.5px) rotate(2.5deg);

    }

    62% {

        -webkit-transform: translate(0, -0.5px) rotate(2.5deg);

        -moz-transform: translate(0, -0.5px) rotate(2.5deg);

        -ms-transform: translate(0, -0.5px) rotate(2.5deg);

        transform: translate(0, -0.5px) rotate(2.5deg);

    }

    64% {

        -webkit-transform: translate(0, -0.5px) rotate(1.5deg);

        -moz-transform: translate(0, -0.5px) rotate(1.5deg);

        -ms-transform: translate(0, -0.5px) rotate(1.5deg);

        transform: translate(0, -0.5px) rotate(1.5deg);

    }

    66% {

        -webkit-transform: translate(0, 1.5px) rotate(-0.5deg);

        -moz-transform: translate(0, 1.5px) rotate(-0.5deg);

        -ms-transform: translate(0, 1.5px) rotate(-0.5deg);

        transform: translate(0, 1.5px) rotate(-0.5deg);

    }

    68% {

        -webkit-transform: translate(0, -1.5px) rotate(-0.5deg);

        -moz-transform: translate(0, -1.5px) rotate(-0.5deg);

        -ms-transform: translate(0, -1.5px) rotate(-0.5deg);

        transform: translate(0, -1.5px) rotate(-0.5deg);

    }

    70% {

        -webkit-transform: translate(0, 1.5px) rotate(0.5deg);

        -moz-transform: translate(0, 1.5px) rotate(0.5deg);

        -ms-transform: translate(0, 1.5px) rotate(0.5deg);

        transform: translate(0, 1.5px) rotate(0.5deg);

    }

    72% {

        -webkit-transform: translate(0, 2.5px) rotate(1.5deg);

        -moz-transform: translate(0, 2.5px) rotate(1.5deg);

        -ms-transform: translate(0, 2.5px) rotate(1.5deg);

        transform: translate(0, 2.5px) rotate(1.5deg);

    }

    74% {

        -webkit-transform: translate(0, -0.5px) rotate(0.5deg);

        -moz-transform: translate(0, -0.5px) rotate(0.5deg);

        -ms-transform: translate(0, -0.5px) rotate(0.5deg);

        transform: translate(0, -0.5px) rotate(0.5deg);

    }

    76% {

        -webkit-transform: translate(0, -0.5px) rotate(2.5deg);

        -moz-transform: translate(0, -0.5px) rotate(2.5deg);

        -ms-transform: translate(0, -0.5px) rotate(2.5deg);

        transform: translate(0, -0.5px) rotate(2.5deg);

    }

    78% {

        -webkit-transform: translate(0, -0.5px) rotate(1.5deg);

        -moz-transform: translate(0, -0.5px) rotate(1.5deg);

        -ms-transform: translate(0, -0.5px) rotate(1.5deg);

        transform: translate(0, -0.5px) rotate(1.5deg);

    }

    80% {

        -webkit-transform: translate(0, 1.5px) rotate(1.5deg);

        -moz-transform: translate(0, 1.5px) rotate(1.5deg);

        -ms-transform: translate(0, 1.5px) rotate(1.5deg);

        transform: translate(0, 1.5px) rotate(1.5deg);

    }

    82% {

        -webkit-transform: translate(0, -0.5px) rotate(0.5deg);

        -moz-transform: translate(0, -0.5px) rotate(0.5deg);

        -ms-transform: translate(0, -0.5px) rotate(0.5deg);

        transform: translate(0, -0.5px) rotate(0.5deg);

    }

    84% {

        -webkit-transform: translate(0, 1.5px) rotate(2.5deg);

        -moz-transform: translate(0, 1.5px) rotate(2.5deg);

        -ms-transform: translate(0, 1.5px) rotate(2.5deg);

        transform: translate(0, 1.5px) rotate(2.5deg);

    }

    86% {

        -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);

        -moz-transform: translate(0, -1.5px) rotate(-1.5deg);

        -ms-transform: translate(0, -1.5px) rotate(-1.5deg);

        transform: translate(0, -1.5px) rotate(-1.5deg);

    }

    88% {

        -webkit-transform: translate(0, -0.5px) rotate(2.5deg);

        -moz-transform: translate(0, -0.5px) rotate(2.5deg);

        -ms-transform: translate(0, -0.5px) rotate(2.5deg);

        transform: translate(0, -0.5px) rotate(2.5deg);

    }

    90% {

        -webkit-transform: translate(0, 2.5px) rotate(-0.5deg);

        -moz-transform: translate(0, 2.5px) rotate(-0.5deg);

        -ms-transform: translate(0, 2.5px) rotate(-0.5deg);

        transform: translate(0, 2.5px) rotate(-0.5deg);

    }

    92% {

        -webkit-transform: translate(0, 0.5px) rotate(-0.5deg);

        -moz-transform: translate(0, 0.5px) rotate(-0.5deg);

        -ms-transform: translate(0, 0.5px) rotate(-0.5deg);

        transform: translate(0, 0.5px) rotate(-0.5deg);

    }

    94% {

        -webkit-transform: translate(0, 2.5px) rotate(0.5deg);

        -moz-transform: translate(0, 2.5px) rotate(0.5deg);

        -ms-transform: translate(0, 2.5px) rotate(0.5deg);

        transform: translate(0, 2.5px) rotate(0.5deg);

    }

    96% {

        -webkit-transform: translate(0, -0.5px) rotate(1.5deg);

        -moz-transform: translate(0, -0.5px) rotate(1.5deg);

        -ms-transform: translate(0, -0.5px) rotate(1.5deg);

        transform: translate(0, -0.5px) rotate(1.5deg);

    }

    98% {

        -webkit-transform: translate(0, -1.5px) rotate(-0.5deg);

        -moz-transform: translate(0, -1.5px) rotate(-0.5deg);

        -ms-transform: translate(0, -1.5px) rotate(-0.5deg);

        transform: translate(0, -1.5px) rotate(-0.5deg);

    }

    0%, 100% {

        -webkit-transform: translate(0, 0) rotate(0deg);

        -moz-transform: translate(0, 0) rotate(0deg);

        -ms-transform: translate(0, 0) rotate(0deg);

        transform: translate(0, 0) rotate(0deg);

    }

}

@keyframes my-face {

    2% {

        -webkit-transform: translate(0, 1.5px) rotate(1.5deg);

        -moz-transform: translate(0, 1.5px) rotate(1.5deg);

        -ms-transform: translate(0, 1.5px) rotate(1.5deg);

        transform: translate(0, 1.5px) rotate(1.5deg);

    }

    4% {

        -webkit-transform: translate(0, -1.5px) rotate(-0.5deg);

        -moz-transform: translate(0, -1.5px) rotate(-0.5deg);

        -ms-transform: translate(0, -1.5px) rotate(-0.5deg);

        transform: translate(0, -1.5px) rotate(-0.5deg);

    }

    6% {

        -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);

        -moz-transform: translate(0, 1.5px) rotate(-1.5deg);

        -ms-transform: translate(0, 1.5px) rotate(-1.5deg);

        transform: translate(0, 1.5px) rotate(-1.5deg);

    }

    8% {

        -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);

        -moz-transform: translate(0, -1.5px) rotate(-1.5deg);

        -ms-transform: translate(0, -1.5px) rotate(-1.5deg);

        transform: translate(0, -1.5px) rotate(-1.5deg);

    }

    10% {

        -webkit-transform: translate(0, 2.5px) rotate(1.5deg);

        -moz-transform: translate(0, 2.5px) rotate(1.5deg);

        -ms-transform: translate(0, 2.5px) rotate(1.5deg);

        transform: translate(0, 2.5px) rotate(1.5deg);

    }

    12% {

        -webkit-transform: translate(0, -0.5px) rotate(1.5deg);

        -moz-transform: translate(0, -0.5px) rotate(1.5deg);

        -ms-transform: translate(0, -0.5px) rotate(1.5deg);

        transform: translate(0, -0.5px) rotate(1.5deg);

    }

    14% {

        -webkit-transform: translate(0, -1.5px) rotate(1.5deg);

        -moz-transform: translate(0, -1.5px) rotate(1.5deg);

        -ms-transform: translate(0, -1.5px) rotate(1.5deg);

        transform: translate(0, -1.5px) rotate(1.5deg);

    }

    16% {

        -webkit-transform: translate(0, -0.5px) rotate(-1.5deg);

        -moz-transform: translate(0, -0.5px) rotate(-1.5deg);

        -ms-transform: translate(0, -0.5px) rotate(-1.5deg);

        transform: translate(0, -0.5px) rotate(-1.5deg);

    }

    18% {

        -webkit-transform: translate(0, 0.5px) rotate(-1.5deg);

        -moz-transform: translate(0, 0.5px) rotate(-1.5deg);

        -ms-transform: translate(0, 0.5px) rotate(-1.5deg);

        transform: translate(0, 0.5px) rotate(-1.5deg);

    }

    20% {

        -webkit-transform: translate(0, -1.5px) rotate(2.5deg);

        -moz-transform: translate(0, -1.5px) rotate(2.5deg);

        -ms-transform: translate(0, -1.5px) rotate(2.5deg);

        transform: translate(0, -1.5px) rotate(2.5deg);

    }

    22% {

        -webkit-transform: translate(0, 0.5px) rotate(-1.5deg);

        -moz-transform: translate(0, 0.5px) rotate(-1.5deg);

        -ms-transform: translate(0, 0.5px) rotate(-1.5deg);

        transform: translate(0, 0.5px) rotate(-1.5deg);

    }

    24% {

        -webkit-transform: translate(0, 1.5px) rotate(1.5deg);

        -moz-transform: translate(0, 1.5px) rotate(1.5deg);

        -ms-transform: translate(0, 1.5px) rotate(1.5deg);

        transform: translate(0, 1.5px) rotate(1.5deg);

    }

    26% {

        -webkit-transform: translate(0, 0.5px) rotate(0.5deg);

        -moz-transform: translate(0, 0.5px) rotate(0.5deg);

        -ms-transform: translate(0, 0.5px) rotate(0.5deg);

        transform: translate(0, 0.5px) rotate(0.5deg);

    }

    28% {

        -webkit-transform: translate(0, 0.5px) rotate(1.5deg);

        -moz-transform: translate(0, 0.5px) rotate(1.5deg);

        -ms-transform: translate(0, 0.5px) rotate(1.5deg);

        transform: translate(0, 0.5px) rotate(1.5deg);

    }

    30% {

        -webkit-transform: translate(0, -0.5px) rotate(2.5deg);

        -moz-transform: translate(0, -0.5px) rotate(2.5deg);

        -ms-transform: translate(0, -0.5px) rotate(2.5deg);

        transform: translate(0, -0.5px) rotate(2.5deg);

    }

    32% {

        -webkit-transform: translate(0, 1.5px) rotate(-0.5deg);

        -moz-transform: translate(0, 1.5px) rotate(-0.5deg);

        -ms-transform: translate(0, 1.5px) rotate(-0.5deg);

        transform: translate(0, 1.5px) rotate(-0.5deg);

    }

    34% {

        -webkit-transform: translate(0, 1.5px) rotate(-0.5deg);

        -moz-transform: translate(0, 1.5px) rotate(-0.5deg);

        -ms-transform: translate(0, 1.5px) rotate(-0.5deg);

        transform: translate(0, 1.5px) rotate(-0.5deg);

    }

    36% {

        -webkit-transform: translate(0, -1.5px) rotate(2.5deg);

        -moz-transform: translate(0, -1.5px) rotate(2.5deg);

        -ms-transform: translate(0, -1.5px) rotate(2.5deg);

        transform: translate(0, -1.5px) rotate(2.5deg);

    }

    38% {

        -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);

        -moz-transform: translate(0, 1.5px) rotate(-1.5deg);

        -ms-transform: translate(0, 1.5px) rotate(-1.5deg);

        transform: translate(0, 1.5px) rotate(-1.5deg);

    }

    40% {

        -webkit-transform: translate(0, -0.5px) rotate(2.5deg);

        -moz-transform: translate(0, -0.5px) rotate(2.5deg);

        -ms-transform: translate(0, -0.5px) rotate(2.5deg);

        transform: translate(0, -0.5px) rotate(2.5deg);

    }

    42% {

        -webkit-transform: translate(0, 2.5px) rotate(-1.5deg);

        -moz-transform: translate(0, 2.5px) rotate(-1.5deg);

        -ms-transform: translate(0, 2.5px) rotate(-1.5deg);

        transform: translate(0, 2.5px) rotate(-1.5deg);

    }

    44% {

        -webkit-transform: translate(0, 1.5px) rotate(0.5deg);

        -moz-transform: translate(0, 1.5px) rotate(0.5deg);

        -ms-transform: translate(0, 1.5px) rotate(0.5deg);

        transform: translate(0, 1.5px) rotate(0.5deg);

    }

    46% {

        -webkit-transform: translate(0, -1.5px) rotate(2.5deg);

        -moz-transform: translate(0, -1.5px) rotate(2.5deg);

        -ms-transform: translate(0, -1.5px) rotate(2.5deg);

        transform: translate(0, -1.5px) rotate(2.5deg);

    }

    48% {

        -webkit-transform: translate(0, -0.5px) rotate(0.5deg);

        -moz-transform: translate(0, -0.5px) rotate(0.5deg);

        -ms-transform: translate(0, -0.5px) rotate(0.5deg);

        transform: translate(0, -0.5px) rotate(0.5deg);

    }

    50% {

        -webkit-transform: translate(0, 0.5px) rotate(0.5deg);

        -moz-transform: translate(0, 0.5px) rotate(0.5deg);

        -ms-transform: translate(0, 0.5px) rotate(0.5deg);

        transform: translate(0, 0.5px) rotate(0.5deg);

    }

    52% {

        -webkit-transform: translate(0, 2.5px) rotate(2.5deg);

        -moz-transform: translate(0, 2.5px) rotate(2.5deg);

        -ms-transform: translate(0, 2.5px) rotate(2.5deg);

        transform: translate(0, 2.5px) rotate(2.5deg);

    }

    54% {

        -webkit-transform: translate(0, -1.5px) rotate(1.5deg);

        -moz-transform: translate(0, -1.5px) rotate(1.5deg);

        -ms-transform: translate(0, -1.5px) rotate(1.5deg);

        transform: translate(0, -1.5px) rotate(1.5deg);

    }

    56% {

        -webkit-transform: translate(0, 2.5px) rotate(2.5deg);

        -moz-transform: translate(0, 2.5px) rotate(2.5deg);

        -ms-transform: translate(0, 2.5px) rotate(2.5deg);

        transform: translate(0, 2.5px) rotate(2.5deg);

    }

    58% {

        -webkit-transform: translate(0, 0.5px) rotate(2.5deg);

        -moz-transform: translate(0, 0.5px) rotate(2.5deg);

        -ms-transform: translate(0, 0.5px) rotate(2.5deg);

        transform: translate(0, 0.5px) rotate(2.5deg);

    }

    60% {

        -webkit-transform: translate(0, 2.5px) rotate(2.5deg);

        -moz-transform: translate(0, 2.5px) rotate(2.5deg);

        -ms-transform: translate(0, 2.5px) rotate(2.5deg);

        transform: translate(0, 2.5px) rotate(2.5deg);

    }

    62% {

        -webkit-transform: translate(0, -0.5px) rotate(2.5deg);

        -moz-transform: translate(0, -0.5px) rotate(2.5deg);

        -ms-transform: translate(0, -0.5px) rotate(2.5deg);

        transform: translate(0, -0.5px) rotate(2.5deg);

    }

    64% {

        -webkit-transform: translate(0, -0.5px) rotate(1.5deg);

        -moz-transform: translate(0, -0.5px) rotate(1.5deg);

        -ms-transform: translate(0, -0.5px) rotate(1.5deg);

        transform: translate(0, -0.5px) rotate(1.5deg);

    }

    66% {

        -webkit-transform: translate(0, 1.5px) rotate(-0.5deg);

        -moz-transform: translate(0, 1.5px) rotate(-0.5deg);

        -ms-transform: translate(0, 1.5px) rotate(-0.5deg);

        transform: translate(0, 1.5px) rotate(-0.5deg);

    }

    68% {

        -webkit-transform: translate(0, -1.5px) rotate(-0.5deg);

        -moz-transform: translate(0, -1.5px) rotate(-0.5deg);

        -ms-transform: translate(0, -1.5px) rotate(-0.5deg);

        transform: translate(0, -1.5px) rotate(-0.5deg);

    }

    70% {

        -webkit-transform: translate(0, 1.5px) rotate(0.5deg);

        -moz-transform: translate(0, 1.5px) rotate(0.5deg);

        -ms-transform: translate(0, 1.5px) rotate(0.5deg);

        transform: translate(0, 1.5px) rotate(0.5deg);

    }

    72% {

        -webkit-transform: translate(0, 2.5px) rotate(1.5deg);

        -moz-transform: translate(0, 2.5px) rotate(1.5deg);

        -ms-transform: translate(0, 2.5px) rotate(1.5deg);

        transform: translate(0, 2.5px) rotate(1.5deg);

    }

    74% {

        -webkit-transform: translate(0, -0.5px) rotate(0.5deg);

        -moz-transform: translate(0, -0.5px) rotate(0.5deg);

        -ms-transform: translate(0, -0.5px) rotate(0.5deg);

        transform: translate(0, -0.5px) rotate(0.5deg);

    }

    76% {

        -webkit-transform: translate(0, -0.5px) rotate(2.5deg);

        -moz-transform: translate(0, -0.5px) rotate(2.5deg);

        -ms-transform: translate(0, -0.5px) rotate(2.5deg);

        transform: translate(0, -0.5px) rotate(2.5deg);

    }

    78% {

        -webkit-transform: translate(0, -0.5px) rotate(1.5deg);

        -moz-transform: translate(0, -0.5px) rotate(1.5deg);

        -ms-transform: translate(0, -0.5px) rotate(1.5deg);

        transform: translate(0, -0.5px) rotate(1.5deg);

    }

    80% {

        -webkit-transform: translate(0, 1.5px) rotate(1.5deg);

        -moz-transform: translate(0, 1.5px) rotate(1.5deg);

        -ms-transform: translate(0, 1.5px) rotate(1.5deg);

        transform: translate(0, 1.5px) rotate(1.5deg);

    }

    82% {

        -webkit-transform: translate(0, -0.5px) rotate(0.5deg);

        -moz-transform: translate(0, -0.5px) rotate(0.5deg);

        -ms-transform: translate(0, -0.5px) rotate(0.5deg);

        transform: translate(0, -0.5px) rotate(0.5deg);

    }

    84% {

        -webkit-transform: translate(0, 1.5px) rotate(2.5deg);

        -moz-transform: translate(0, 1.5px) rotate(2.5deg);

        -ms-transform: translate(0, 1.5px) rotate(2.5deg);

        transform: translate(0, 1.5px) rotate(2.5deg);

    }

    86% {

        -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);

        -moz-transform: translate(0, -1.5px) rotate(-1.5deg);

        -ms-transform: translate(0, -1.5px) rotate(-1.5deg);

        transform: translate(0, -1.5px) rotate(-1.5deg);

    }

    88% {

        -webkit-transform: translate(0, -0.5px) rotate(2.5deg);

        -moz-transform: translate(0, -0.5px) rotate(2.5deg);

        -ms-transform: translate(0, -0.5px) rotate(2.5deg);

        transform: translate(0, -0.5px) rotate(2.5deg);

    }

    90% {

        -webkit-transform: translate(0, 2.5px) rotate(-0.5deg);

        -moz-transform: translate(0, 2.5px) rotate(-0.5deg);

        -ms-transform: translate(0, 2.5px) rotate(-0.5deg);

        transform: translate(0, 2.5px) rotate(-0.5deg);

    }

    92% {

        -webkit-transform: translate(0, 0.5px) rotate(-0.5deg);

        -moz-transform: translate(0, 0.5px) rotate(-0.5deg);

        -ms-transform: translate(0, 0.5px) rotate(-0.5deg);

        transform: translate(0, 0.5px) rotate(-0.5deg);

    }

    94% {

        -webkit-transform: translate(0, 2.5px) rotate(0.5deg);

        -moz-transform: translate(0, 2.5px) rotate(0.5deg);

        -ms-transform: translate(0, 2.5px) rotate(0.5deg);

        transform: translate(0, 2.5px) rotate(0.5deg);

    }

    96% {

        -webkit-transform: translate(0, -0.5px) rotate(1.5deg);

        -moz-transform: translate(0, -0.5px) rotate(1.5deg);

        -ms-transform: translate(0, -0.5px) rotate(1.5deg);

        transform: translate(0, -0.5px) rotate(1.5deg);

    }

    98% {

        -webkit-transform: translate(0, -1.5px) rotate(-0.5deg);

        -moz-transform: translate(0, -1.5px) rotate(-0.5deg);

        -ms-transform: translate(0, -1.5px) rotate(-0.5deg);

        transform: translate(0, -1.5px) rotate(-0.5deg);

    }

    0%, 100% {

        -webkit-transform: translate(0, 0) rotate(0deg);

        -moz-transform: translate(0, 0) rotate(0deg);

        -ms-transform: translate(0, 0) rotate(0deg);

        transform: translate(0, 0) rotate(0deg);

    }

}

.share {

    padding-left: 40px;

    margin: 1em auto 0.5em;

    opacity: 0.5;

}

.share:hover {

    opacity: 1;

}

.bdsharebuttonbox {

    font-family: Arial;

}

.bdsharebuttonbox li {

    display: inline-block;

    width: 28px;

    height: 28px;

    margin-right: 2px;

    font: 20px FontAwesome;

    background: #6f7170;

    text-align: center;

    vertical-align: middle;

    -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.3);

    box-shadow: 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.3);

}

.bdsharebuttonbox li a,

.bdsharebuttonbox li .bds_more {

    float: none;

    margin: 0;

    padding: 0;

    font: 20px FontAwesome;

    background-image: none;

    color: #fff;

    line-height: 28px;

}

.bdsharebuttonbox li a:hover,

.bdsharebuttonbox li .bds_more:hover {

    opacity: 1;

}

.bdsharebuttonbox li:hover {

    opacity: 1;

    -webkit-transform: scale(1.1);

    -moz-transform: scale(1.1);

    -ms-transform: scale(1.1);

    transform: scale(1.1);

}

.bdsharebuttonbox li:hover a {

    color: #fff;

}

.bdsharebuttonbox .bds_tsina:before {

    content: '\f18a';

}

.bdsharebuttonbox #bds_tsina {

    background: #db332f;

}

.bdsharebuttonbox .bds_sqq:before {

    content: '\f1d6';

}

.bdsharebuttonbox #bds_sqq {

    background: #1cbcef;

}

.bdsharebuttonbox .bds_copy:before {

    content: '\f016';

}

.bdsharebuttonbox #bds_copy {

    background: #8f8f8f;

}

.bdsharebuttonbox .bds_mail:before {

    content: '\f003';

}

.bdsharebuttonbox #bds_mail {

    background: #6fc0e4;

}

.bdsharebuttonbox .bds_weixin:before {

    content: '\f1d7';

}

.bdsharebuttonbox #bds_weixin {

    background: #8cdc49;

}

.bdsharebuttonbox .bds_more:before {

    content: '\f1e0';

}

.bdsharebuttonbox #bds_more {

    background: #8cbcf5;

}

.bdsharebuttonbox .bds_twi:before {

    content: '\f099';

}

.bdsharebuttonbox #bds_twi {

    background: #21abf4;

}

#page-nav {

    text-align: center;

    margin-top: 30px;

}

#page-nav .page-number {

    width: 20px;

    height: 20px;

    background: #4d4d4d;

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    -webkit-border-radius: 50%;

    border-radius: 50%;

    display: inline-block;

    color: #fff;

    line-height: 20px;

    font-size: 12px;

    margin: 0 3px 30px;

}

#page-nav .page-number:hover {

    background: #5e5e5e;

}

#page-nav .current {

    background: #88acdb;

    cursor: default;

}

#page-nav .current:hover {

    background: #88acdb;

}

#page-nav .extend {

    color: #4d4d4d;

    margin: 0 27px;

    opacity: 0;

}

#page-nav .extend:hover {

    color: #5e5e5e;

}

#page-nav:hover .extend {

    opacity: 1;

}

#post-instagram {

    padding: 30px;

}

#post-instagram .article-entry {

    padding-right: 0;

}

.instagram {

    position: relative;

    min-height: 500px;

}

.instagram .open-ins {

    display: block;

    padding: 10px 0;

    position: absolute;

    right: 28px;

    top: -75px;

    color: #333;

}

.instagram .open-ins:hover {

    color: #657b83;

}

.instagram .year {

    display: inline;

}

.instagram .album h1 em {

    font-style: normal;

    font-size: 14px;

    margin-left: 10px;

}

.instagram .album ul {

    min-height: 149px;

    padding-top: 17px;

    border-bottom: 1px solid #ddd;

    list-style: none;

}

.instagram .album li {

    position: relative;

    display: inline-block;

    min-width: 157px;

    margin: 0;

}

.instagram .album li:before {

    display: none;

}

.instagram .album div.img-box {

    position: relative;

    margin: 0 20px 10px;

    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.4), 0 1px 0 1px rgba(255,255,255,0.1);

    -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.4), 0 1px 0 1px rgba(255,255,255,0.1);

    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.4), 0 1px 0 1px rgba(255,255,255,0.1);

    box-shadow: 0 1px 0 rgba(255,255,255,0.4), 0 1px 0 1px rgba(255,255,255,0.1);

}

.instagram .album div.img-box .img-bg {

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0px;

    width: 100%;

    margin: -5px;

    padding: 5px;

    background: rgba(204,204,204,0.8);

    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 5px rgba(0,0,0,0.1);

    -moz-box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 5px rgba(0,0,0,0.1);

    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 5px rgba(0,0,0,0.1);

    box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 5px rgba(0,0,0,0.1);

    -webkit-transition: all 0.15s ease-out 0.1s;

    -moz-transition: all 0.15s ease-out 0.1s;

    -o-transition: all 0.15s ease-out 0.1s;

    -webkit-transition: all 0.15s ease-out 0.1s;

    -moz-transition: all 0.15s ease-out 0.1s;

    -ms-transition: all 0.15s ease-out 0.1s;

    transition: all 0.15s ease-out 0.1s;

    opacity: 0.2;

    cursor: pointer;

    display: block;

}

.instagram .album div.img-box .img-bg:hover {

    opacity: 0;

}

.instagram .album div.img-box img {

    width: 100%;

    height: auto;

    display: block;

}

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

    .instagram .album ul {

        margin-left: 0;

        padding: 0;

        text-align: center;

    }

    .instagram .album li {

        max-width: 300px;

    }

    .instagram .album div.img-box {

        margin: 0;

    }

}

.switch-btn {

    margin-left: 74px;

    margin-top: 23px;

    position: relative;

    width: 70px;

    text-align: center;

}

.switch-btn .tips-box {

    position: relative;

}

.switch-btn .tips-box .tips-arrow {

    width: 0;

    height: 0;

    border-left: 5px solid transparent;

    border-right: 5px solid transparent;

    border-bottom: 6px solid #000;

    opacity: 0.8;

    position: absolute;

    top: -6px;

    left: 30px;

}

.switch-btn .tips-box .tips-inner {

    padding: 5px 8px 4px 8px;

    background-color: #000;

    color: #fff;

    width: 80px;

    text-align: center;

    -webkit-border-radius: 3px;

    border-radius: 3px;

    opacity: 0.8;

    position: absolute;

    z-index: 99;

    left: -13px;

}

.switch-btn .tips-box .tips-inner li {

    padding: 4px 0;

    cursor: pointer;

    font-size: 13px;

    color: #ddd;

}

.switch-btn .tips-box .tips-inner li:hover {

    background: #111;

}

.switch-btn .icon {

    height: 32px;

    width: 32px;

    background: #cecece;

    -webkit-border-radius: 100px;

    border-radius: 100px;

    position: relative;

    overflow: hidden;

    display: inline-block;

    padding: 10px;

    -webkit-transform: scale(0.6);

    -moz-transform: scale(0.6);

    -ms-transform: scale(0.6);

    transform: scale(0.6);

    cursor: pointer;

}

.switch-btn .icon-ctn {

    width: 34px;

    height: 34px;

    position: relative;

    overflow: hidden;

}

.switch-btn .icon-ctn .birdhouse {

    width: 0;

    height: 0;

    position: absolute;

    top: 0;

    left: 0;

    border-style: solid;

    border-color: transparent transparent #4d4d4d transparent;

    border-width: 0 16px 14px;

}

.switch-btn .icon-ctn .birdhouse:after {

    content: '';

    position: absolute;

    top: 12px;

    left: -12px;

    border-style: solid;

    border-color: #4d4d4d transparent transparent transparent;

    border-width: 100px 12px;

}

.switch-btn .icon-ctn .birdhouse_holes {

    width: 12px;

    height: 12px;

    background: #ddd;

    position: absolute;

    -webkit-border-radius: 60px;

    -moz-border-radius: 60px;

    -webkit-border-radius: 60px;

    border-radius: 60px;

    left: 10px;

    top: 8px;

}

.switch-btn .icon-ctn .birdhouse_holes:after {

    content: '';

    position: absolute;

    width: 4px;

    height: 4px;

    background: #ccc;

    bottom: -8px;

    left: 4px;

    -webkit-border-radius: 60px;

    -moz-border-radius: 60px;

    -webkit-border-radius: 60px;

    border-radius: 60px;

}

.switch-btn .icon-ctn .ribbon {

    width: 12px;

    height: 20px;

    background: #333;

    margin: 2px 0 0 10px;

}

.switch-btn .icon-ctn .ribbon:after {

    content: '';

    position: absolute;

    left: 10px;

    top: 16px;

    width: 0;

    height: 0;

    border: solid #333;

    border-color: transparent #333 transparent #333;

    border-width: 6px 6px 8px 6px;

}

.switch-btn .icon-ctn .loopback_l {

    width: 10px;

    height: 5px;

    border-style: solid;

    border-width: 0px 3px 3px 3px;

    border-color: #333;

    -webkit-border-radius: 0 0 50px 50px;

    border-radius: 0 0 50px 50px;

    position: absolute;

    top: 16px;

    left: 1px;

}

.switch-btn .icon-ctn .loopback_l:before {

    content: '';

    position: absolute;

    width: 0;

    height: 0;

    border-style: solid;

    border-width: 4px;

    border-color: transparent transparent transparent #333;

    bottom: 7px;

    left: 5px;

}

.switch-btn .icon-ctn .loopback_l:after {

    content: '';

    width: 5px;

    height: 5px;

    border-style: solid;

    border-width: 3px 0 0 3px;

    border-color: #333;

    -webkit-border-radius: 50px 0 0 0;

    border-radius: 50px 0 0 0;

    position: absolute;

    left: -3px;

    bottom: 5px;

}

.switch-btn .icon-ctn .loopback_r {

    width: 10px;

    height: 5px;

    border-style: solid;

    border-width: 3px 3px 0 3px;

    border-color: #333;

    -webkit-border-radius: 50px 50px 0 0;

    border-radius: 50px 50px 0 0;

    position: absolute;

    top: 8px;

    right: 2px;

}

.switch-btn .icon-ctn .loopback_r:before {

    content: '';

    position: absolute;

    width: 0;

    height: 0;

    border-style: solid;

    border-width: 4px;

    border-color: transparent #333 transparent transparent;

    top: 7px;

    right: 5px;

}

.switch-btn .icon-ctn .loopback_r:after {

    content: '';

    width: 5px;

    height: 5px;

    border-style: solid;

    border-width: 0 3px 3px 0;

    border-color: #333;

    -webkit-border-radius: 0 0 50px 0;

    border-radius: 0 0 50px 0;

    position: absolute;

    left: 5px;

    top: 5px;

}

.switch-btn .icon-ctn .user {

    width: 12px;

    height: 14px;

    background: #333;

    -webkit-border-radius: 5px 5px 0 0;

    border-radius: 5px 5px 0 0;

    margin-left: 10px;

    margin-top: 2px;

}

.switch-btn .icon-ctn .user:before {

    content: '';

    width: 0px;

    height: 0px;

    position: absolute;

    top: 17px;

    left: 0px;

    border-style: solid;

    border-color: transparent transparent #333 transparent;

    border-width: 0 16px 6px 16px;

}

.switch-btn .icon-ctn .user:after {

    content: '';

    width: 8px;

    height: 5px;

    background: #333;

    position: absolute;

    margin-top: 13px;

    margin-left: -4px;

}

.switch-btn .icon-ctn .shoulder {

    width: 32px;

    height: 6px;

    background: #333;

    position: absolute;

    bottom: 6px;

}

#header .tagcloud a {

    color: #fff;

}

.tagcloud a {

    display: inline-block;

    text-decoration: none;

    font-weight: normal;

    font-size: 10px;

    color: #fff;

    height: 18px;

    line-height: 18px;

    float: left;

    padding: 0 5px 0px 10px;

    position: relative;

    -webkit-border-radius: 0 5px 5px 0;

    border-radius: 0 5px 5px 0;

    margin: 5px 9px 5px 8px;

    font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;

}

.tagcloud a:hover {

    opacity: 0.8;

}

.tagcloud a:before {

    content: " ";

    width: 0px;

    height: 0px;

    position: absolute;

    top: 0;

    left: -18px;

    border: 9px solid transparent;

}

.tagcloud a:after {

    content: " ";

    width: 4px;

    height: 4px;

    background-color: #fff;

    -webkit-border-radius: 4px;

    border-radius: 4px;

    -webkit-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3);

    box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3);

    position: absolute;

    top: 7px;

    left: 2px;

}

.tagcloud a.color1 {

    background: #ff945c;

}

.tagcloud a.color1:before {

    border-right-color: #ff945c;

}

.tagcloud a.color2 {

    background: #f5c7b7;

}

.tagcloud a.color2:before {

    border-right-color: #f5c7b7;

}

.tagcloud a.color3 {

    background: #ba8f6c;

}

.tagcloud a.color3:before {

    border-right-color: #ba8f6c;

}

.tagcloud a.color4 {

    background: #cfb7c4;

}

.tagcloud a.color4:before {

    border-right-color: #cfb7c4;

}

.tagcloud a.color5 {

    background: #7b5d5f;

}

.tagcloud a.color5:before {

    border-right-color: #7b5d5f;

}

.article-tag-list .article-tag-list-item {

    float: left;

}

.article-tag {

    float: left;

}

.article-tag .article-tag-list {

    float: left;

}

.article-tag:before {

    float: left;

    color: #999;

    content: "\f06c";

    font: 16px FontAwesome;

    float: left;

    margin-right: 10px;

    margin-top: 9px;

}

.article-tag:after {

    float: left;

    content: "";

    margin-right: 20px;

    margin-top: 9px;

    float: left;

}

.article-category {

    float: left;

}

.article-category:before {

    float: left;

    color: #999;

    content: "\f02d";

    font: 16px FontAwesome;

    float: left;

    margin-right: 10px;

    margin-top: 9px;

}

.article-category:after {

    float: left;

    content: "";

    margin-right: 20px;

    margin-top: 9px;

    float: left;

}

.article-pop-out {

    float: left;

}

.article-pop-out:before {

    float: left;

    color: #999;

    content: "\f08d";

    font: 16px FontAwesome;

    float: left;

    margin-right: 10px;

    margin-top: 9px;

}

.article-pop-out:after {

    float: left;

    content: "";

    margin-right: 20px;

    margin-top: 9px;

    float: left;

}

.article-pop-out {

    float: left;

}

.article-pop-out:before {

    float: left;

    color: #999;

    content: "\f08d";

    font: 16px FontAwesome;

    float: left;

    margin-right: 10px;

    margin-top: 9px;

}

.article-pop-out:after {

    float: left;

    content: "";

    margin-right: 20px;

    margin-top: 9px;

    float: left;

}

::-webkit-scrollbar {

    width: 10px;

    height: 10px;

}

::-webkit-scrollbar-button {

    width: 0;

    height: 0;

}

::-webkit-scrollbar-button:start:increment,

::-webkit-scrollbar-button:end:decrement {

    display: none;

}

::-webkit-scrollbar-corner {

    display: block;

}

::-webkit-scrollbar-thumb {

    -webkit-border-radius: 8px;

    border-radius: 8px;

    background-color: rgba(0,0,0,0.2);

}

::-webkit-scrollbar-thumb:hover {

    -webkit-border-radius: 8px;

    border-radius: 8px;

    background-color: rgba(0,0,0,0.5);

}

::-webkit-scrollbar-track,

::-webkit-scrollbar-thumb {

    border-right: 1px solid transparent;

    border-left: 1px solid transparent;

}

::-webkit-scrollbar-track:hover {

    background-color: rgba(0,0,0,0.15);

}

::-webkit-scrollbar-button:start {

    width: 10px;

    height: 10px;

    background: url("../img/scrollbar_arrow.png") no-repeat 0 0;

}

::-webkit-scrollbar-button:start:hover {

    background: url("../img/scrollbar_arrow.png") no-repeat -15px 0;

}

::-webkit-scrollbar-button:start:active {

    background: url("../img/scrollbar_arrow.png") no-repeat -30px 0;

}

::-webkit-scrollbar-button:end {

    width: 10px;

    height: 10px;

    background: url("../img/scrollbar_arrow.png") no-repeat 0 -18px;

}

::-webkit-scrollbar-button:end:hover {

    background: url("../img/scrollbar_arrow.png") no-repeat -15px -18px;

}

::-webkit-scrollbar-button:end:active {

    background: url("../img/scrollbar_arrow.png") no-repeat -30px -18px;

}

#viewer {

    position: fixed;

    z-index: 1000000;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    overflow: hidden;

}

#viewer-box {

    width: 100%;

    height: 100%;

    position: relative;

    color: #ccc;

    -webkit-transform: translate3d(-100%, 0, 0);

    -webkit-transition: -webkit-transform 0.25s ease-in-out;

}

#viewer-box .viewer-box-l {

    background: rgba(20,20,20,0.9);

    width: 80%;

    height: 100%;

    float: left;

}

#viewer-box .viewer-box-l .viewer-box-wrap {

    margin: 20px 10px 0px 20px;

}

#viewer-box .viewer-box-l .viewer-title {

    line-height: 32px;

}

#viewer-box .viewer-box-l .viewer-title:before {

    content: "";

    width: 6px;

    height: 6px;

    border: 1px solid #999;

    -webkit-border-radius: 10px;

    -webkit-border-radius: 10px;

    border-radius: 10px;

    background: #aaa;

    display: inline-block;

    margin-right: 10px;

}

#viewer-box .viewer-box-l .viewer-div {

    border-bottom: 1px dotted #666;

    padding-bottom: 13px;

    line-height: 20px;

}

#viewer-box .viewer-box-l .viewer-div:last-child {

    border-bottom: none;

}

#viewer-box .viewer-box-l .viewer-div .switch-friends-link {

    line-height: 20px;

}

#viewer-box .viewer-box-r {

    background: rgba(0,0,0,0);

    width: 20%;

    height: 100%;

    float: right;

}

#viewer-box.anm-swipe {

    -webkit-transform: translate3d(0, 0, 0);

}

#viewer-box.anm-swipe .viewer-box-r {

    background: rgba(0,0,0,0);

}

.hide {

    display: none;

}

#viewer-box .viewer-list {

    margin: 0;

    padding: 0;

    height: 100%;

    overflow: hidden;

}