style.css

/* 
 * ┌─┐┬ ┬┌─┐┬ ┬┌┐┌┌─┐┌─┐┌┐┌┌─┐ ┌─┐┌─┐┌┬┐
 * └─┐├─┤├─┤││││││┌─┘├┤ ││││ ┬ │  │ ││││
 * └─┘┴ ┴┴ ┴└┴┘┘└┘└─┘└─┘┘└┘└─┘o└─┘└─┘┴ ┴
 * Theme Name: Memory
 * Theme URI: https://shawnzeng.com/wordpress-theme-memory.html
 * Description: Theme Memory by Shawn
 * Version: 3.0.1
 * Author: Shawn
 * Author URI: https://shawnzeng.com
 * Tags: Memory, Shawn, Wordpress
 */

html,
body,
* {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    word-wrap: break-word;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

body {
    background-color: #f5f5f5;
    color: #1a1a1a;
     -webkit-font-smoothing: antialiased;
    font-family: -apple-system,Verdana,"PingFang SC","Helvetica Neue",Arial,"Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif
}

h1 {
    font-size: 22px
}

h2 {
    font-size: 19px
}

h3 {
    font-size: 17px
}

h4 {
    font-size: 16px
}

a {
    text-decoration: none;
    cursor: pointer;
}

a:focus {
    outline: none;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #f7f4f4 inset;
    -webkit-text-fill-color: rgb(51, 51, 51);
}

::selection {
    background: #0bf;
    color: #fff;
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background-color: #f3f3f3;
}


/* 滚动条的滑轨背景颜色 */

::-webkit-scrollbar-thumb {
    background-color: #ea9595;
}


/* 滑块颜色 */

::-webkit-scrollbar-button {
    background-color: #f3f3f3;
}


/* 滑轨两头的监听按钮颜色 */

::-webkit-scrollbar-corner {
    background-color: #f3f3f3;
}


/* 横向滚动条和纵向滚动条相交处尖角的颜色 */

button,
input,
textarea {
    -webkit-appearance: none;
    outline: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

div,
a,
img {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: none;
}

a {
    text-decoration: none;
    color: #000;
}

img {
    height: auto;
}

textarea {
    resize: none;
}

.clear {
	clear: both;
}

div.lazy {
    background-image: url('img/timg.gif');
}

.message {
    max-width: 640px;
    width: auto;
    position: fixed;
	left: 10px;
    bottom: 10px;
    text-align: center;
    z-index: 1000;
}

.message-info {
    background: rgba(17, 17, 17, .9);
    color: #fff;
    border-radius: 2px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.35);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25), 0 0 1px rgba(0, 0, 0, 0.35);
    display: inline-block;
    font-size: 14px;
    margin-bottom: 0;
    padding: 12px 25px;
}

#header {
    width: 100%;
    background: rgba(255, 255, 255, 1);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    -webkit-box-shadow: 0 1px 3px rgba(26, 26, 26, .1);
    box-shadow: 0 1px 3px rgba(26, 26, 26, .1);
}

#header a {
    color: #635f5f;
}

#pc-menu {
    margin: 0 auto;
    height: 42px;
    width: 980px;
    min-width: 60%;
    max-width: 100%;
    position: relative;
    padding: 0 35px;
    z-index: 1000;
}

#pc-menu #menu-title {
    display: inline-block;
    width: auto;
    line-height: 42px;
    height: 42px;
    float: left;
    font-size: 26px;
}

#pc-menu #menu-main {
    display: inline-block;
}

#pc-menu #menu-main ul {
    list-style: none;
    display: inline-block;
    -webkit-padding-start: 0;
    line-height: 42px;
}

#pc-menu #menu-main > ul {
	margin: 0 0 0 20px;
}

#pc-menu #menu-main .menu-item {
    float: left;
    padding: 0 10px;
}

#pc-menu #menu-main .menu-item.menu-item-has-children {
	position: relative;
}

#pc-menu #menu-main .menu-item:hover > a{
	color: #1c94e0;
}

#pc-menu #menu-main .menu-item.menu-item-has-children:after {
    display: block;
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 3px;
    background: #1c94e0;
    visibility: hidden;
    opacity: 0;
}

#pc-menu #menu-main .menu-item.menu-item-has-children:hover > .sub-menu,
#pc-menu #menu-main .menu-item.menu-item-has-children:hover:after {
	visibility: visible;
	opacity: 1;
}

#pc-menu #menu-main .menu-item .sub-menu {
    position: absolute;
    top: 42px;
    left: 0;
    z-index: 2;
    visibility: hidden;
    opacity: 0;
    float: left;
    padding: 5px;
	width: 150px;
    background-color: #fff;
    transition: all .2s;
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,.2);
    box-shadow: 0 0 5px rgba(0,0,0,.2);
}

#pc-menu #menu-main .menu-item a {
    font-size: 14px;
}

#pc-menu #menu-login {
    float: right;
    right: 0;
    color: #635f5f;
    line-height: 42px;
}

#pc-menu #menu-login .memory-login {
    font-size: 30px;
}

#pc-menu #menu-login .avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin: 5px auto;
}

#pc-menu #personal-menu {
    display: none;
    max-width: 100%;
    position: absolute;
    right: 35px;
    top: 48px;
    padding: 0;
    background: white;
    z-index: 1;
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,.2);
    box-shadow: 0 0 5px rgba(0,0,0,.2);
}

#pc-menu #personal-menu ul {
    list-style: none;
}

#pc-menu #personal-menu li {
    display: block;
    line-height: 42px;
    font-size: 14px;
    text-shadow: none;
    text-decoration: none;
    color: #635f5f;
    text-align: center;
    padding: 0 16px;
}

#pc-menu #personal-menu:before {
    position: absolute;
    top: -7px;
    left: 78px;
    width: 0;
    height: 0;
    content: '';
    border-style: solid;
    border-width: 0px 7px 7px 7px;
    z-index: 1;
    border-color: #fff transparent;
}

#pc-menu #personal-menu:after {
	position: absolute;
    top: -8px;
    left: 77px;
    width: 0;
    height: 0;
    content: '';
    border-style: solid;
    border-width: 0px 8px 8px 8px;
    z-index: 0;
    border-color: #ded8d8 transparent;
}

#pc-menu #searchform {
    float: right;
    margin: 5px 10px;
    position: relative;
}

#pc-menu #searchform .memory-search {
    position: absolute;
    left: 10px;
    top: 8px;
    color: #635f5f;
}

#pc-menu #searchform #s {
    height: 32px;
    line-height: 32px;
    width: 120px;
    border-radius: 16px;
    background-color: #fbf9f9;
    border: 1px solid #e3e8e8;
    color: #635f5f;
    font-size: 14px;
    padding: 0 10px 0 30px;
    transition: width .5s;
    -moz-transition: width .5s;
    -webkit-transition: width .5s;
    -o-transition: width .5s;
    transition-delay: .1s;
    -moz-transition-delay: .1s;
    -webkit-transition-delay: .1s;
    -o-transition-delay: .1s;
}

#pc-menu #searchform #s:focus {
    width: 200px;
	border: 2px solid #00BBFF;
}

#mobile-menu,
#menu-bar,
#pc-menu #personal-menu #mobile-menu-search {
    display: none;
}

#mobile-menu {
    position: initial;
    height: 0;
    overflow: hidden;
}

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

#pc-menu #menu-title,
#foot .theme {
  font-family:"theme" !important;
  font-style:normal;
  color: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#main {
    position: relative;
    width: 980px;
    margin: 48px auto 0;
    min-width: 60%;
    max-width: 100%;
    overflow: initial;
}

#main-part {
    position: relative;
    width: 65%;
    float: left;
    padding: 0 0 0 35px;
}

#main-part .posts-list {
    list-style: none;
}

.memory-item {
    display: block;
    margin-bottom: 10px;
    margin-top: 5px;
    -webkit-box-shadow: 0 1px 3px rgba(26, 26, 26, .1);
    box-shadow: 0 1px 3px rgba(26, 26, 26, .1);
    background: #fff;
    border-radius: 5px;
}

.memory-item.breadcrumbs {
	padding: 10px;
}

.memory-item.nearby-article {
    padding: 15px;
}

.memory-item.nearby-article .nearby-article-left {
    display: inline-block;
    width: 49%;
    text-align: left;   
}

.memory-item.nearby-article .nearby-article-right {
    display: inline-block;
    width: 49%;
    text-align: right;      
}

#main-part .post-type {
    padding: 15px;
    position: relative;
}

.post-type .set-top {
    width: 40px;
    height: 24px;
    line-height: 24px;
    position: absolute;
    top: 10px;
    right: -4px;
}

.post-type .set-top > div {
    position: relative;
    background-color: #EB7351;
    color: #fff;
    -webkit-box-shadow: -3px 5px 6px -5px rgba(0, 0, 0, .5);
    box-shadow: -3px 5px 6px -5px rgba(0, 0, 0, .5);
    text-align: center;
    z-index: 2;
	font-weight: bold;
}

.post-type .set-top > div:before {
    position: absolute;
    display: block;
    content: '';
    width: 0px;
    height: 0px;
    left: -8px;
    top: 0;
    border-top: 12px solid #EB7351;
    border-right: 4px solid #EB7351;
    border-left: 4px solid transparent;
    border-bottom: 12px solid transparent;
}

.post-type .set-top > div:after {
    position: absolute;
    display: block;
    content: '';
    width: 0px;
    height: 0px;
    top: -4px;
    right: 0;
    border-top: 2px solid transparent;  
    border-right: 2px solid transparent;
    border-left: 2px solid #a53415;
    border-bottom: 2px solid #a53415;
}

.post-type .post-relative .avatar {
    position: absolute;
    left: 0;
    top: 0px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.post-type-header .post-type-author,
.post-type-header .post-type-title,
.post-type-header .post-publish {
    display: block;
    margin-left: 54px;
}

.post-type-header .post-type-title {
    height: 26px;
    overflow: hidden;
}

.post-type-header .post-type-author a,
.post-type-header .post-type-title a {
    font-weight: bold;
    color: #000;
}

.post-type-header .post-type-author .publish-time {
    color: #999;
    font-size: 14px;
}

.post-type-header img {
    max-width: 100%;
}

.post-type-header .thumbnail-link {
    border-radius: 5px 5px 0 0;
    margin: -15px -15px 5px;
    height: 100px;
    background-size: cover;
    background-position: center center;
}

.post-type.real-post .post-type-header .thumbnail-link {
    height: 150px;
}

.post-type-header .thumbnail-shadow {
    width: 100%;
    position: absolute;
    border-radius: 5px 5px 0 0;
    top: 0;
    left: 0;
    height: 100px;
    background: rgba(0, 0, 0, 0.3);
    text-align: center;
    padding: 50px 0 0;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    overflow: hidden;
}

.post-type.real-post .post-type-header .thumbnail-shadow {
    height: 150px;
}

.post-type-header .thumbnail-shadow .post-title {
    display: block;
    line-height: 25px;
    font-size: 21px;
}

.post-type-header .thumbnail-shadow .post-info {
    margin-top: 5px;
    font-size: 14px;
}

.post-type-header .thumbnail-shadow .post-info span a {
    color: #fff;
}

.post-type-header .post-relative {
    position: relative;
}

.post-type .post-content {
    font-size: 14px;
    line-height: 1.8;
	margin-top: 5px;
}

.shuoshuo.post-type .post-content {
	margin-bottom: 5px;
}

.post-type .post-content .link-category ul {
	list-style: none;
    padding-left: 0;
}

.post-type .post-content .link-category ul > li {
	float: left;
	width: 32%;
	margin: 5px 2% 0 0;
	height: 50px;
}

.post-type .post-content .link-category ul > li:nth-child(3n) {
	margin: 5px 0 0 0;
}

.post-type .post-content .link-category ul > li > a {
    display: inline-block;
    padding: 5px;
    color: #1a1a1a;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 1px 1px rgba(0, 0, 0,0.1), 1px 1px 1px rgba(0, 0, 0,0.1);
	border-radius: 3px;
	width: 100%;
	height: 50px;
}

.post-type .post-content .link-category .avatar {
    width: 40px;
    border-radius: 50%;
    margin: 0 10px 0 0;
    float: left;
}

.post-type .post-content .link-category .link-text,
.post-type .post-content .link-category .link-text p{
    line-height: 20px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.post-type .post-content .link-category .link-text .link-description {
    font-size: 12px;	
}

.post-type .post-content img {
    margin: 8px auto;
	max-width: 100%;
    border-radius: 3px;
}

.post-type .post-content form {
    margin: 10px 0;
}

.post-type .post-content form .protected {
	margin-bottom: 5px;
}

.post-type .post-content form .input {
    padding: 4px 8px;
    background: rgba(244, 246, 247, .6);
    border: 1px solid #d9d9d9;
    border-right: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 14px;
    border-radius: 3px 0 0 3px;
    font-family: inherit;
    width: 120px;
    height: 28px;
}

.post-type .post-content form .button {
    border-radius: 0 3px 3px 0;
    background: #0d93ee;
    color: #fff;
    padding: 4px 8px;
    line-height: 20px;
    height: 28px;
    vertical-align: top;
	cursor: pointer;
}

.post-type .post-content .post-tag a {
        color: #eb7350;
}

.post-type .post-content .post-tag a:before,
.post-type .post-content .post-tag a:after {
    content: '#';
}


.post-type .post-content .post-excerpt {
    width: 100%;
    vertical-align: top;

}

.post-type .post-content .post-excerpt p {
    max-height: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.post-type .post-content .post-category {
    color: #999;
    margin: 0 0 5px;
}

.post-type .post-content .post-category a {
    color: #999;
}

.post-type .post-footer .post-copyright {
    background-color: #fbf9f9;
    padding: 5px;
    font-size: 12px;
    margin: 0 0 5px;
    border-radius: 3px;
    border: 1px solid #e3e8e8;
}

.post-type .post-content a,
.post-type .post-footer a,
#comments .comment-comment p a {
    color: #eb7350;
}

.post-type .post-content a:before,
.post-type .post-copyright a:before,
#comments .comment-comment p a:before {
    font-family: "memory";
    content: "\e630";
}

.post-type .post-content a.no-des:before,
.post-type .post-category a:before{
    font-family: "memory";
    content: none;
}

.post-type .post-content a.at:before,
#comments .comment-comment p a.at:before {
    font-family: "memory";
    content: '\e69b';
}

.post-type .post-content span {
    font-weight: bold;
}

.post-type .post-content code span {
    font-weight: normal;
}

.post-type .post-content blockquote {
    background-color: #fbf9f9;
    padding: 5px 25px 5px 5px;
    margin: 0 0 5px;
    border-radius: 3px;
    position: relative;
    border: 1px solid #e3e8e8;
}

.post-type .post-content #article-index {
	background-color: #fbf9f9;
    margin: 0 0 5px 5px;
    border-radius: 3px;
    border: 1px solid #e3e8e8;
	padding: 12px;
    line-height: 160%;
    max-width: 40%;
    font-size: 12px;
    position: relative;
    float: right;
}

.post-type .post-content #article-index #show-index {
	cursor: pointer;
}

.post-type .post-content #article-index #index-ul li a:before {
	content: none;
}

.post-type .post-content #article-index #index-ul li a {
	color: #428bca;
}

.post-type .post-content #article-index #index-ul li.title-3 {
	margin-left: 10px;
}

.post-type .post-content #article-index #index-ul li.title-4 {
	margin-left: 20px;
}

.post-type .post-content blockquote:before {
    position: absolute;
    display: block;
    font-family: 'memory';
    content: '\e654';
    right: 5px;
    top: 5px;
    color: #999;
}

.post-type .post-content pre.line-numbers {
	border-radius: 3px;
}

.post-type .post-content ul,
.post-type .post-content ol {
    padding-left: 20px;
}

.like-pay {
    padding: 20px 0 10px;
    text-align: center;
}

.like-pay > span {
    display: inline-block;
    width: 60px;
    height: 24px;
    line-height: 24px;
    color: #fff;
    text-align: center;
    position: relative;
    cursor: pointer;
    font-size: 14;
    vertical-align: top;
}

.like-pay .post-like {
    background: #ea6f5a;
    border-radius: 3px 0 0 3px;	
	margin-right: 10px;
}

.like-pay .post-like:before {
    position: absolute;
    top: 0;
    right: -10px;
    display: block;
    content: '';
    border-top: 12px solid #ea6f5a;
    border-left: 5px solid #ea6f5a;
    border-right: 5px solid transparent;
    border-bottom: 12px solid transparent;
}

.like-pay .post-like a {
    color: #fff;	
}

.like-pay .post-pay {
	background: #42c02e;
    border-radius: 0 3px 3px 0;
}

.like-pay .post-pay:before {
    position: absolute;
    top: 0;
    left: -10px;
    display: block;
    content: '';
    border-bottom: 12px solid #42c02e;
    border-right: 5px solid #42c02e;
    border-left: 5px solid transparent;
    border-top: 12px solid transparent;
}

.like-pay .post-pay .memory {
	font-size: 14px;
}

.pay-box {
    display: none;
    padding: 20px 0 16px;
    border-bottom: 1px solid #e7e7e7;
    text-align: center;
    background: #fff;
	color: #000;
	z-index: 10000;
    cursor: default;
    position: fixed;
    width: 300px;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -172px;
    -webkit-box-shadow: rgba(0,0,0,.2) 0 0 5px 0;
    box-shadow: rgba(0,0,0,.2) 0 0 5px 0;
    border-radius: 4px;
}

.pay-box .pay-header {
	text-align: left;
    padding: 0 18px;
}

.pay-box .pay-header .memory-close {
    float: right;
    cursor: pointer;
    color: #999;
    font-weight: bold;
}

.pay-box .pay-body {
	margin-top: 20px;
}

.pay-box .pay-body .alipay,
.pay-box .pay-body .wechatpay {
	display: none;
    width: 200px;
    height: 200px;
}

.pay-box .pay-body .alipay.chosen,
.pay-box .pay-body .wechatpay.chosen {
	display: inline-block;
}	

.pay-box .pay-chose span {
    width: 138px !important;
	padding: 10px 0;
    height: 45px;
    text-align: center;
    border: 1px solid #e6e6e6;
    border-radius: 2px;
    display: inline-block;
    line-height: 40px;
    cursor: pointer;
}

.pay-box .pay-chose span.chosen {
	border-color: #0092ee;
}

.pay-box .pay-chose span img {
    height: 25px;
    vertical-align: middle;
}

.post-type .post-footer {
    margin: 0 -15px -15px;
    border-top: 1px solid #e3e8e8;
    overflow: hidden;
    background-color: #fcfcfc;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.post-type.real-post .post-footer {
    margin: 0;
    padding: 5px 0 0;
	border-radius: 0;
}

.post-type .post-footer>span {
    display: inline-block;
    zoom: 1;
    float: left;
    width: 25%;
    text-align: center;
    height: 35px;
    line-height: 35px;
    border-right: 1px solid #e3e8e8;
    font-size: 14px;
}

.post-type .post-footer>span,
.post-type .post-footer>span a {
    color: #635f5f;
}

.post-type .post-footer .like:before,
.like-pay .post-like a.like:before {
    font-family: "memory" !important;
    content: "\e66b";
}

.post-type .post-footer a.have-like {
    color: #d43f57;
}

.post-type .post-footer .have-like:before,
.like-pay .post-like a.have-like:before {
    content: "\eb40";
}

.post-type .post-footer>span:last-child {
    border-right: none;
}

.memory-item.tags_related #tags_related {
    padding: 10px 15px 0;
    list-style: none;
}

.memory-item.tags_related #tags_related li {
    float: left;
    width: 32%;
    margin-left: 2%;
    margin-bottom: 10px;
    overflow: hidden;
}

.post_rel {
    border: 1px solid #e3e8e8;
    border-radius: 5px;	
}

.memory-item.tags_related #tags_related li:nth-child(3n+1) {
    margin-left: 0;
}

.memory-item.tags_related #tags_related li a {
    display: block;
}

.memory-item.tags_related #tags_related .thumbnail-related {
    width: 100%;
    height: 80px;
    background-size: cover;
    background-position: center center;
}

.memory-item.tags_related #tags_related .title-related {
    display: block;
    padding: 5px;
    height: 30px;
}

.memory-item.tags_related #tags_related:after {
    display: block;
    content: '';
    clear: both;
}

.memory-item.comment-part .comment-respond .comment-form,
.memory-item.comment-part .comment-respond .login-must {
    margin: 15px;
}

.memory-item.comment-part .comment-respond .avatar {
    width: 48px;
    height: 48px;
    border-radius: 5px;
    border: 1px solid #ddd;
    padding: 2px;
    -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, .1);
    box-shadow: 1px 1px 1px rgba(0, 0, 0, .1);
}

.memory-item.comment-part .comment-respond .commentator {
    display: table-cell;
    padding: 0 10px 0 0;
}

.memory-item.comment-part .comment-respond .comment-input,
.memory-item.comment-part .comment-respond .comment-login {
    width: 100%;
    display: table-cell;
    vertical-align: top;    
}

.memory-item.comment-part .comment-respond .comment-login {
	padding-top: 4px;
    font-size: 14px;
    background-color: #fbf9f9;
    border-radius: 5px;
    border: 1px solid #e3e8e8;
    padding-left: 10px;
}

.memory-item.comment-part .comment-respond .comment-login p,
.memory-item.comment-part .comment-respond .comment-login p a {
	font-size: 14px;
}

.memory-item.comment-part .comment-respond .comment-login p .log-out-now {
	color: #eb7350;
}

.memory-item.comment-part .comment-respond .comment-input .text-input {
    border: 1px solid #e3e8e8;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 12px;
    resize: none;
    color: #657786;
    float: left;
    width: 48%;
    margin-left: 2%;
    background-color: #fbf9f9;
}

.memory-item.comment-part .comment-respond .comment-input .text-top {
	margin-bottom: 10px;
}

.memory-item.comment-part .comment-s {
    position: relative;
    padding: 0 0 5px;
    height: 110px;
}

.memory-item.comment-part .comment-s textarea {
    font-size: 12px;
    text-align: left;
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fbf9f9;
    border: 1px solid #e3e8e8;
    border-radius: 5px;
    color: #555;
    height: 72px;
    padding: 5px 10px;
    line-height: normal;
    margin: 10px 0 5px;
    width: 100%;    
}

.memory-item.comment-part .comment-s .comment-submit.push-status {
    border-radius: 3px;
    background: #0d93ee;
    color: #fff;
    padding: 4px 8px;
    line-height: 20px;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 1px -2px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 1px -2px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
    height: 28px;
    position: absolute;
    right: 0;
    bottom: 0;
}

.memory-item.comment-part .comment-s .comment-cancel a {
    border-radius: 3px;
    background: #0d93ee;
    color: #fff;
    padding: 4px 8px;
    line-height: 20px;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 1px -2px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 1px -2px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
    height: 28px;
    position: absolute;
    right: 70px;
    bottom: 0;
    font-size: 12px;
}

#sidebar {
    position: relative;
    width: 35%;
    float: left;
    padding: 0 35px 0 10px;
}

#sidebar ul {
    list-style: none;
}

#sidebar .memory-item {
    font-size: 14px;
    line-height: 1.8;
}

.memory-item .memory-item-header {
    line-height: 38px;
    margin: 0;
    background: #fcfcfc;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom: 1px solid #e3e8e8;
    padding: 0 15px;
}

.memory-item .memory-item-header h3 {
    font-size: 18px;
    font-weight: normal;
}

.memory-item .memory-item-header .memory {
    font-size: 19px;
}

#sidebar .memory-item > ul,
#sidebar .memory-item .menu,
#sidebar .memory-item .textwidget,
#sidebar .memory-item > img {
    padding: 8px;
}

#sidebar .memory-item > img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

.memory-item .recentcomments img.avatar {
    width: 36px;
    height: 36px;
    float: left;
    border-radius: 5px;
    margin: 3px 10px 0 0;
    border: 1px solid #ddd;
    padding: 2px;
    -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
    box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
}

.memory-item .recentcomments .right-box {
    word-break: break-all;
    overflow: hidden;
}

.memory-item .recentcomments .comment-content {
    background-color: #fbf9f9;
    padding: 5px;
    border-radius: 3px;
    text-indent: 2em;
    position: relative;
}

.memory-item .recentcomments .comment-content:before {
    display: block;
    font-family: 'memory';
    content: '\e655';
    position: absolute;
    left: -10px;
    top: 5px;
    color: #999;
}

.memory-item .sidebar-posts-list li, .memory-item ul.recentcomments li {
    padding: 5px 0;
    line-height: 18px;
    overflow: hidden;
    font-size: 12px;
    border-bottom: 1px solid #e3e8e8;
}

.memory-item .sidebar-posts-list li:first-child, .memory-item ul.recentcomments li:first-child {
    padding: 0 0 5px;
}

.memory-item .sidebar-posts-list li:last-child, .memory-item ul.recentcomments li:last-child {
    border-bottom: none;
}

.memory-item .sidebar-posts-list li .post-title {
    margin-bottom: 5px;
    font-size: 14px;
}

.memory-item .sidebar-posts-list li .post-info span {
    display: inline-block;
    width: 70px;
    margin-left: 10px;
}

.memory-item .sidebar-posts-list li .post-info i {
    font-size: 14px;
}

.memory-item .widget-visitor {
    height: 40px;
	display: inline-block;
	padding: 0 2px;
	margin: 0 0 5px;
}

.memory-item .widget-visitor a,
.memory-item .widget-photos li,
.memory-item .widget-photos a {
    display: inline-block;
}

.memory-item .widget-photos li {
    width: 25%;
    float: left;
}

.memory-item .widget-photos:after {
    display: block;
    content: '';
    clear: both;
}

.memory-item .widget-photos img {
    max-width: 100%;
}

.memory-item .widget-visitor a img {
    border: 1px solid #ddd;
    padding: 2px;
    -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
    box-shadow: 1px 1px 1px rgba(0, 0, 0, .15);
    border-radius: 5px;
}

#comments {
    padding: 15px;
	border-top: 1px solid #e3e8e8;
	margin-top: 5px;
}

#comments ol {
    list-style: none;
}

#comments p {
    font-size: 14px;
}

#comments .commentator-avatar {
    float: left;
    width: 50px;
}

#comments .commentator-avatar img {
    border-radius: 5px;
    border: 1px solid #ddd;
    padding: 2px;
    -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, .1);
    box-shadow: 1px 1px 1px rgba(0, 0, 0, .1);
}

#comments .author-name {
    font-size: 14px;
    font-weight: bold;
}

#comments .commentator-comment {
    margin-left: 56px;
    margin-bottom: 10px;
}

#comments .commentator-comment .userlevel {
    font-size: 14px;
    font-weight: 400;
    color: #999;
}

#comments .children li {
    list-style: none;
}

#comments .comment-comment {
    font-size: 14px;
    background-color: #fbf9f9;
    padding: 5px 10px;
    margin: 5px 0;
    border-radius: 0 15px 15px;
    border: 1px solid #e3e8e8;
    display: inline-block;
	max-width: 100%;
}

#comments .comment-comment .comment-info .comment-time {
    color: #999;
}

#comments .comment-comment .comment-info .comment-reply-link {
    float: right;
    color: #1a1a1a;
    padding-left: 10px;
}

#comments .comment-comment .comment-info .comment-reply-link:before {
    font-family: 'memory';
    content: '\e6a7\ '
}

#comments .comment-comment .comment-info:after {
    display: block;
    content: '';
    clear: both;
}

#comments > ol > li {
	margin-top: 10px;
	border-bottom: 1px solid #e3e8e8;
}

#comments .new-comment {
	border-bottom: 1px solid #e3e8e8;
}

#comments > ol > li > .children {
    margin-left: 30px;
}

#pagination {
	padding-top: 10px;
}

#pagination .memory-comments-page a,
#pagination .memory-comments-page span {
    color: #222;
    cursor: pointer;
    text-align: center;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #e3e8e8;
    background-image: none;
    -webkit-transition: all .2s;
    transition: all .2s;
    font-size: 14px;
    min-width: 15px;
    margin: 0 2px;
    padding: 0 10px;
    display: inline-block;
    height: 36px;
    line-height: 36px;	
}

#pagination .memory-comments-page .current,
#pagination .memory-comments-page a:hover {
    background: #0d93ee;
    color: #fff;
    border: 1px solid #0d93ee;
}

#index-pagination .page-more {
	text-align: center;
	margin-top: 30px;
	color: #b9bdbd;
}

.loading{
	width: 150px;
	height: 10px;
	margin: 0 auto;
	margin-top: 30px;
	text-align: center;
}
.loading span{
	display: inline-block;
	width: 10px;
	height: 100%;
	margin-right: 10px;
	background: #ddd;
	-webkit-animation: load 1.04s ease infinite;
}
.loading span:last-child{
	margin-right: 0px; 
}
@-webkit-keyframes load{
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
.loading span:nth-child(1){
	-webkit-animation-delay:0.13s;
}
.loading span:nth-child(2){
	-webkit-animation-delay:0.26s;
}
.loading span:nth-child(3){
	-webkit-animation-delay:0.39s;
}
.loading span:nth-child(4){
	-webkit-animation-delay:0.52s;
}
.loading span:nth-child(5){
	-webkit-animation-delay:0.65s;
}

.memory-item .card-bg {
	width: 100%;
	height: 100px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.memory-item .card-info {
	position: relative;
	min-height: 100px;
	text-align: center;	
}

.memory-item .card-info img {
    position: relative;
    width: 100px;
    max-width: 100%;
    border-radius: 50%;
    border: 4px solid #fff;
    display: block;
    margin: 0 auto;
    -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(0, 0, 0,0.1), 1px 1px 1px rgba(0, 0, 0,0.1);
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(0, 0, 0,0.1), 1px 1px 1px rgba(0, 0, 0,0.1);
    margin-top: -50px;
}

.memory-item .card-info-block {
	display: block;
	text-align: center;
	font-weight: bold;
}

.memory-item .catch-me, 
.memory-item .catch-me a {
    text-align: center
}

.memory-item .catch-me {
	padding-top: 10px;
}

.memory-item .catch-me a {
    display: inline-block;
    margin-bottom: 7px;
    text-decoration: none;
    width: 20%;
}

.memory-item .catch-me i {
    display: inline-block;
    font-size: 20px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 40px;
    color: rgba(0, 0, 0, .5);
    background-color: rgba(0, 0, 0, .1);
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    font-style: normal
}

.memory-item .catch-me i:hover {
	background-color: #0bf;
    color: #fff
}

.post-preview {
    max-width: 780px;
    margin: 10px auto;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: #fff;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.25);
}

.post-preview .post-preview--meta {
    width: 75%;
    padding: 10px;
}

.post-preview .post-preview--meta .post-preview--middle {
    line-height: 20px;
}

.post-preview .post-preview--meta .post-preview--title {
    font-size: 18px;
    font-size: 1.125rem;
    margin: 0;
    padding-bottom: 5px;
}

.post-preview .post-preview--meta .post-preview--title a {
    text-decoration: none;
    color: #000;
}

.post-preview .post-preview--meta .post-preview--title a:before {
	content: none;
}

.post-preview .post-preview--meta .post-preview--date {
    font-size: 12px;
    font-size: 0.75rem;
    color: #999;
}

.post-preview .post-preview--excerpt {
    font-size: 13px;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.post-preview .post-preview--excerpt p {
    margin-bottom: 0;
}

.post-preview .post-preview--image {
    width: 25%;
    float: right;
    background-size: cover;
    background-position: center center;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.rating {
    display: block;
    line-height: 15px;
    padding: 0 0 5px;
    font-size: 14px;
    font-size: 0.875rem;
    text-align: left;
}

.rating-star {
    display: inline-block;
    width: 75px;
    height: 15px;
    background-repeat: no-repeat;
    background-image: url(img/douban_star.png);
    overflow: hidden;
}

.allstar10 {
    background-position: 0px 0px;
}

.allstar9 {
    background-position: 0px -15px;
}

.allstar8 {
    background-position: 0px -30px;
}

.allstar7 {
    background-position: 0px -45px;
}

.allstar6 {
    background-position: 0px -60px;
}

.allstar5 {
    background-position: 0px -75px;
}

.allstar4 {
    background-position: 0px -90px;
}

.allstar3 {
    background-position: 0px -105px;
}

.allstar2 {
    background-position: 0px -120px;
}

.allstar1 {
    background-position: 0px -135px;
}

.allstar0 {
    background-position: 0px -150px;
}

.rating-average {
    color: #777;
    display: inline-block;
    font-size: 12px;
    margin-left: 8px;
}

.post-type .post-content .all_douban {
    overflow: hidden;
	padding: 0;
}

.douban_sum_item {
	margin: 10px 8px 10px 2px;
	text-align: center;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	min-width: 80px;
}

#main-part .memory-item .archive-douban .all_douban .douban_sum_item img {
    margin: 10px 0 5px;
	min-height: 152px;
}

.post .post-content .all_douban li {
	display: inline-block;
	width: 20%;
	vertical-align: top;
}

.post .post-content .all_douban li::before {
    content: none;
}

.post .post-content .all_douban li a::before {
    content: none;
}

.douban_sum_item h4 a {
    font-size: 13px;
    color: #494949;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
    max-width: 100%;
    line-height: 1.4;
}

#main-part .author {
    margin-bottom: 10px;
    margin-top: 5px;
    background: rgba(255, 255, 255, 1);
    position: relative;
    border-radius: 2px;
    -webkit-box-shadow: 0 1px 3px rgba(26, 26, 26, .1);
    box-shadow: 0 1px 3px rgba(26, 26, 26, .1);
    -webkit-transform: translate3d(0, -2px, 0);
    transform: translate3d(0, -2px, 0);
	overflow: hidden;
}

#main-part .author img {
    width: 100%;
    max-width: 100%;
}

#main-part .author .art-author {
    margin: 0 0 0 20px;
    position: relative;
    padding: 5px 0 0 120px;
}

#main-part .author .art-author .avatar {
    width: 100px;
    height: 100px;
    overflow: hidden;
    float: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 4px solid #fff;
    border-radius: 4px;
    margin: 0;
    -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.08);
    position: absolute;
    top: -25px;
    left: 0;
    z-index: 1
}

#main-part .author .art-author .author-info {
    position: relative;
    min-height: 80px;
}

#main-part .author .art-author .author-info .memory-birthday {
    color: #adad0f;
}

#main-part .author .art-author .author-info .author-contactmethods {
    position: absolute;
    top: 0;
    right: 10px;
    left: unset;
    bottom: unset;
}

#main-part .author .art-author .author-info .author-contactmethods a {
    text-decoration: none;
    color: #1f1d1d;
    display: inline-block;
    width: 25px;
    text-align: center;
}

#main-part .author .art-author .author-info .author-contactmethods .memory-twitter {
    color: #55acee;
}

#main-part .author .art-author .author-info .author-contactmethods .memory-facebook {
    color: #44619d;
}

#main-part .author .art-author .author-info .author-contactmethods .memory-weibo {
    color: #ff763b;
}

#main-part .author .art-author .author-info .author-contactmethods .memory-tencentweibo {
    color: #56b6e7;
}

#main-part .author .art-author .author-info .author-contactmethods .memory-bilibili {
    color: #0bf;
}

#main-part .author .art-author .author-info .author-contactmethods .memory-douban {
    color: #33b045;
}

#main-part .author .art-author .author-info .author-contactmethods .memory-qqzone {
    color: #fdbe3d;
}

#main-part .author .art-author .author-info .author-contactmethods .memory-zhihu {
	color: rgb(15, 136, 235);
}

#calendar_wrap {
    margin: 8px;
}

#calendar_wrap #wp-calendar {
    width: 100%;
}

#calendar_wrap #wp-calendar caption {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 20px;
}

#calendar_wrap #wp-calendar th {
    font-weight: bold;
}

#calendar_wrap #wp-calendar th, #calendar_wrap #wp-calendar td {
    text-align: center;
}

#calendar_wrap #wp-calendar tfoot td {
    padding-top: 10px;
    font-size: 16px;
}

#calendar_wrap #wp-calendar tfoot #prev {
    text-align: left;
}

#calendar_wrap #wp-calendar tfoot #next {
    text-align: right;
}

#sidebar .tag-cloud-link {
    background-color: #fbf9f9;
    height: 22px;
    padding: 0 8px;
    border: 1px solid #e3e8e8;
}

.comment-comment .OwO-img,
.recent-comment .OwO-img {
	width: 40px;
}

#foot {
    text-align: center;
    clear: both;
    padding: 60px 0 20px;
    font-size: 14px;
}

#layout-shadow {
    display: none;
    z-index: 9999;
    background-color: #000;
    opacity: .3;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
} 

#foot #back-to-top {
    display: block;
    z-index: 999;
    background: #fff;
    width: 45px;
    height: 45px;
    line-height: 45px;
    opacity: .8;
    color: rgba(111,111,111,.6);
    position: fixed;
    text-align: center;
    text-decoration: none;
    font-size: 25px;
    -webkit-box-shadow: 0 1px 3px rgba(26, 26, 26, .1);
    box-shadow: 0 1px 3px rgba(26, 26, 26, .1);
    bottom: 10px;
    right: 10px;
    cursor: pointer;
    border-radius: 5px;
}


#go-to-comment {
    display: block;
    z-index: 999;
    background: #fff;
    width: 45px;
    height: 45px;
    line-height: 45px;
    opacity: .8;
    color: rgba(111,111,111,.6);
    position: fixed;
    text-align: center;
    text-decoration: none;
    font-size: 25px;
    -webkit-box-shadow: 0 1px 3px rgba(26, 26, 26, .1);
    box-shadow: 0 1px 3px rgba(26, 26, 26, .1);
    bottom: 60px;
    right: 10px;
    cursor: pointer;
    border-radius: 5px;
}

#foot #back-to-top .memory-top,
#go-to-comment .memory-comments {
    font-size: 25px;
}

#foot .throb {
    font-size: 13px;
    color: #d43f57;
}

@media screen and (max-width: 1024px) {
	.social-share.share-component {
		display: none;
	}
}

@media screen and (max-width: 780px) {
    #header {
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    #pc-menu {
        text-align: center;
        -webkit-box-shadow: 0 1px 3px rgba(26, 26, 26, .1);
        box-shadow: 0 1px 3px rgba(26, 26, 26, .1);
    }
    #pc-menu #menu-main,
    #pc-menu #searchform,
    .memory-item.tags_related {
        display: none;
    }

    #pc-menu #personal-menu #mobile-menu-search {
        display: block;
    }
    
    #pc-menu #menu-title {
        float: none;
        font-size: 20px;
        line-height: 42px;
    }

    #mobile-menu {
        position: fixed;
        z-index: 999;
        width: 100%;
        height: 100%;
        text-align: center;
        display: none;
        top: -400px;
        left: 0;
        background-color: white;
        padding: 58px 15px 10px 15px;
        transition: all .4s;
        -moz-transition: all .4s;
        -webkit-transition: all .4s;
        -o-transition: all .4s;
    }

    #mobile-menu #mobile-searchform {
        margin: 5px auto;
        height: 40px;
        min-width: 260px;
        position: relative;
    }

    #mobile-menu #mobile-searchform #m_s {
        height: 40px;
        line-height: 40px;
        width: 100%;
        border-radius: 20px;
        background-color: #f7f4f4;
        color: #635f5f;
        font-size: 14px;
        padding: 0 10px 0 35px;
    }

    #mobile-menu #mobile-searchform .memory-search {
        position: absolute;
        left: 12px;
        top: 10px;
        font-size: 18px;
        color: #635f5f;
    }

    #mobile-menu #mobile-menu-main>ul {
        list-style: none;
    }

    #mobile-menu #mobile-menu-main>ul>li {
        display: block;
        color: #635f5f;
        overflow: hidden;
        float: left;
        width: 33.3%;
        margin: 8px 0;
        font-size: 14px;
    }

    #mobile-menu #mobile-menu-main>ul>li .memory,
    #mobile-menu #mobile-menu-main>ul>li:before {
        display: block;
        font-size: 28px;
        line-height: 48px;
    }

    #mobile-menu #mobile-menu-main>ul>li>a,
    #menu-bar {
        display: block;
    }

    #menu-bar,
    #menu-login {
        float: none;
        position: absolute;
        width: 42px;
        line-height: 42px;
        display: block;
        top: 1px;
    }

    #menu-bar {
        font-size: 25px;
        left: 0;
    }

    #menu-login {
        font-size: 30px;
        right: 0;
    }

    #pc-menu #personal-menu {
        right: 10px;
    }

    #pc-menu #personal-menu:before {
        left: 82px;
    }
	
	#pc-menu #personal-menu:after {
		left: 81px;
	}

    #main-part {
        width: 100%;
        padding: 0 3px;
    }
    
    #sidebar {
        display: none;
    }
    
}

@media screen and (max-width: 620px) {
	.post-type .post-content .link-category ul > li {
		width: 49%;
    	margin: 5px 2% 0 0;
	}
	.post-type .post-content .link-category ul > li:nth-child(3n) {
		width: 49%;
    	margin: 5px 2% 0 0;		
	}
	.post-type .post-content .link-category ul > li:nth-child(2n) {
		width: 49%;
    	margin: 5px 0 0 0;		
	}	
}

/*
 * animation
 */

.throb:before {
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: .2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-animation: xintiao 1.33s ease-in-out infinite;
    animation: xintiao 1.33s ease-in-out infinite;
}

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

@-webkit-keyframes xintiao {
    0% {
        -webkit-transform: scale(1)
    }
    50% {
        -webkit-transform: scale(.8)
    }
    to {
        -webkit-transform: scale(1)
    }
}

@keyframes xintiao {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(.8);
        transform: scale(.8)
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

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

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

@-webkit-keyframes slide {
    0% {
        -webkit-transform: scale(1);
                transform: scale(1);
    }
    50% {
        opacity: 0.3;
        -webkit-transform: scale(2);
                transform: scale(2);
    }
    100% {
        -webkit-transform: scale(1);
                transform: scale(1);
    }
}

@keyframes slide {
    0% {
        -webkit-transform: scale(1);
                transform: scale(1);
    }
    50% {
        opacity: 0.3;
        -webkit-transform: scale(2);
                transform: scale(2);
    }
    100% {
        -webkit-transform: scale(1);
                transform: scale(1);
    }
}

button[data-content]{overflow:visible}[data-content]{position:relative}[data-content]:after,[data-content]:before{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);-khtml-opacity:0;-moz-opacity:0;opacity:0;pointer-events:none;-webkit-transition:all .18s ease-out .18s;transition:all .18s ease-out .18s;bottom:100%;left:50%;position:absolute;z-index:10;-webkit-transform:translate(-50%,10px);-ms-transform:translate(-50%,10px);transform:translate(-50%,10px);-webkit-transform-origin:top;-ms-transform-origin:top;transform-origin:top}[data-content]:after{background:rgba(17,17,17,.9);border-radius:4px;color:#fff;content:attr(data-content);font-size:12px;padding:.5em 1em;white-space:nowrap;margin-bottom:11px}[data-content]:before{background:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E') no-repeat;background-size:100% auto;height:6px;width:18px;content:"";margin-bottom:5px}[data-content]:hover:after,[data-content]:hover:before,[data-content][data-content-visible]:after,[data-content][data-content-visible]:before{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;pointer-events:auto;-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0)}[data-content].font-awesome:after{font-family:FontAwesome}[data-content][data-content-break]:after{white-space:pre}[data-content-pos=down]:after,[data-content-pos=down]:before{bottom:auto;left:50%;top:100%;-webkit-transform:translate(-50%,-10px);-ms-transform:translate(-50%,-10px);transform:translate(-50%,-10px)}[data-content-pos=down]:after{margin-top:11px}[data-content-pos=down]:before{background:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E') no-repeat;background-size:100% auto;height:6px;width:18px;margin-top:5px;margin-bottom:0}[data-content-pos=down]:hover:after,[data-content-pos=down]:hover:before,[data-content-pos=down][data-content-visible]:after,[data-content-pos=down][data-content-visible]:before{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0)}[data-content-pos=left]:after,[data-content-pos=left]:before{bottom:auto;left:auto;right:100%;top:50%;-webkit-transform:translate(10px,-50%);-ms-transform:translate(10px,-50%);transform:translate(10px,-50%)}[data-content-pos=left]:after{margin-right:11px}[data-content-pos=left]:before{background:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E') no-repeat;background-size:100% auto;height:18px;width:6px;margin-right:5px;margin-bottom:0}[data-content-pos=left]:hover:after,[data-content-pos=left]:hover:before,[data-content-pos=left][data-content-visible]:after,[data-content-pos=left][data-content-visible]:before{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%)}[data-content-pos=right]:after,[data-content-pos=right]:before{bottom:auto;left:100%;top:50%;-webkit-transform:translate(-10px,-50%);-ms-transform:translate(-10px,-50%);transform:translate(-10px,-50%)}[data-content-pos=right]:after{margin-left:11px}[data-content-pos=right]:before{background:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E') no-repeat;background-size:100% auto;height:18px;width:6px;margin-bottom:0;margin-left:5px}[data-content-pos=right]:hover:after,[data-content-pos=right]:hover:before,[data-content-pos=right][data-content-visible]:after,[data-content-pos=right][data-content-visible]:before{-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%)}[data-content-length]:after{white-space:normal}[data-content-length=small]:after{width:80px}[data-content-length=medium]:after{width:150px}[data-content-length=large]:after{width:260px}[data-content-length=xlarge]:after{width:90vw}@media screen and (min-width:768px){[data-content-length=xlarge]:after{width:380px}}[data-content-length=fit]:after{width:100%}