html {
	background-color: #fff;
	-webkit-font-smoothing: antialiased;
}

body {
	color: rgba(0, 0, 0, 0.5);
	font-family: 'PingHei', 'PingFang SC', Helvetica Neue, 'Work Sans', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif;
	font-size: 15px;
	width: 100%;
	margin: 0 auto 30px auto;
	background-color: #fff;

}
p {
	line-height: 1.9em;
	font-weight: 400;
	font-size: 14px;
}

a {
	text-decoration: none;
}

a:link, a:visited {
	opacity: 1;
	-webkit-transition: all .15s linear;
	-moz-transition: all .15s linear;
	-o-transition: all .15s linear;
	-ms-transition: all .15s linear;
	transition: all .15s linear;
	color: #424242;

}

a:hover, a:active {
	color: #4786D6;

}

/*basic styles ends*/



/*animation starts*/

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

.animated.hinge {
	-webkit-animation-duration: 1s;
	-moz-animation-duration: 1s;
	-ms-animation-duration: 1s;
	-o-animation-duration: 1s;
	animation-duration: 1s;
}

@-webkit-keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes fadeInDown {
	0% {
		opacity: 0;
		-moz-transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@-o-keyframes fadeInDown {
	0% {
		opacity: 0;
		-o-transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		-o-transform: translateY(0);
	}
}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.fadeInDown {
	-webkit-animation-name: fadeInDown;
	-moz-animation-name: fadeInDown;
	-o-animation-name: fadeInDown;
	animation-name: fadeInDown;
}

/*animation ends*/




.content {
	height: auto;
	float: right;
	width: 70%;
	margin-top:60px;
}

.page-top{
	width: 70%;
	position: fixed;
	right: 0;
	z-index: 3;
	background-color: #fff;
	height: 60px;
	border-bottom: 1px solid #f2f2f2;

	.nav{
		list-style:none;
		padding:18px 30px;
		float: left;
		font-size:12px;

	 	li{
			position: relative;
			display: initial;
			padding-right:20px;
		}
		a {
			color:#5A5A5A;
		}
		a:hover{
			color:#4786D6;
		}
		a.current{
			color:#5A5A5A;
			padding-bottom: 22px;
			border-bottom: 1px solid #5A5A5A;
		}
	}

	.information{
		float: right;
		padding-top: 12px;
		padding-right: 20px;

		.avatar{
			float: right;

		img{
			width: 32px;
			height: 32px;
			border-radius: 300px;
			}
		}
		.back_btn{
			float: left;
			padding-top: 5px;
			margin-right:-10px;

		 li{
			display: initial;
			padding-right:40px;
			}
		}
	}

}
.sidebar {
	width: 30%;
	-webkit-background-size: cover;
	background-size: cover;
	background-color: #fff;
	height: 100%;
	transition:0.8s;
	top: 0;
	left:0;
	position: fixed;
	z-index: 4;
	border-right: 1px solid #f2f2f2;

	.logo-title{
		text-align: center;
		padding-top:240px;


		.description {
			font-size: 14px;
			color: #565654;
		}


		.logo {
			margin: 0 auto;
		}

		.title{
			h3 {
				text-transform: uppercase;
				font-size: 2rem;
				font-weight: bold;
				letter-spacing: 2px;
				line-height: 1;
				margin:0;
			}

			a {
				text-decoration: none;
				color: #464646;
				font-size: 2rem;
				font-weight: bold;
			}
		}

	}

	.social-links {
		list-style: none;
		padding: 0;
		font-size: 14px;
		text-align: center;

		i{
			margin-right: 3px;
		}

		li {
			display: inline;
			padding: 0 4px;
			line-height: 0;
		}

		a {
			color: #565654;
		}
		a:hover{
			color: #4786D6;
		}
	}
}


.post {
	background-color: #FFF;
	margin: 30px;

	.post-title{
		h1 {
			text-transform: uppercase;
			font-size: 30px;
			letter-spacing: 5px;
			line-height: 1;
		}

		h2 {
			text-transform: uppercase;
			letter-spacing: 1px;
			font-size: 28px;
			line-height: 1;
			font-weight: 600;
			color: #5f5f5f;

		}

		h3 {
			text-transform: uppercase;
			letter-spacing: 1px;
			line-height: 1;
			font-weight: 600;
			color: #464646;
			font-size: 22px;
			margin:0;

		}
		a {
			text-decoration: none;
			letter-spacing: 1px;
			color: #5f5f5f;
			&:hover{
				text-decoration: underline;
			}

		}
	}

	.post-content{
		a {
			text-decoration: none;
			letter-spacing: 1px;
			color: #4786D6;
		}
		a:hover{
			color: #2F69B3;
		}
		h3{
			color: #5F5F5F;
			font-size:22px;
			font-weight:600;
		}
		h4 {
			color: #5F5F5F;
			font-size:16px;
		}
	}

	.post-footer {
		padding: 0 0 30px 0;
		border-bottom: 1px solid #f2f2f2;


		.meta {
			max-width: 100%;
			height: 25px;
			color: #bbbbbb;

			.info {
				float: left;
				font-size: 12px;
				.date{
					margin-right: 10px;
				}
			}

			a {
				text-decoration: none;
				color: #bbbbbb;
				padding-right: 10px;
				&:hover{
					color: #4786D6;
				}
			}
			i{
				margin-right: 6px;
			}
		}



		.tags{
			padding-bottom: 15px;
			font-size: 13px;

			ul {
				list-style-type: none;
				display: inline;
				margin: 0;
				padding: 0;

				li {
					list-style-type: none;
					margin: 0;
					padding-right: 5px;
					display: inline;
				}
			}

			a{
				text-decoration: none;
				color: rgba(0, 0, 0, 0.44);
				font-weight: 400;

				&:hover{
					text-decoration: none;
				}
			}
		}
	}


}




.pagination {
	margin: 30px;
	padding: 0px 0 56px 0;
	border-bottom: 1px solid #f2f2f2;

	ul {
		list-style: none;
		margin: 0;
		padding: 0;
		height: 13px;

		li {
			margin: 0 2px 0 2px;
			display: inline;
			line-height: 1;

			 a {
				text-decoration: none;
			}
		}
	}

	.pre {
		float: left;
	}

	.next {
		float: right;
	}
}








.like-reblog-buttons {
	float: right;
}

.like-button {
	float: right;
	padding: 0 0 0 10px;
}

.reblog-button {
	float: right;
	padding: 0;
}

#install-btn {
	position: fixed;
	bottom: 0px;
	right: 6px
}

#disqus_thread {
	margin: 30px;
	border-bottom: 1px solid #f2f2f2;
}

.footer {
	clear: both;
	text-align: center;
	font-size: 10px;
	margin: 0 auto;
	bottom: 0;
	position: absolute;
	width: 100%;
	padding-bottom: 20px;
	a {
		color: #A6A6A6;
	}
	a:hover{
		color: #4786D6;
	}
	span{
	}
	.by_farbox{
	}
}




/*for archive*/
.archive{
	width: 100%;
}
.list-with-title{
	font-size: 14px;
	margin: 30px;
	padding: 0;
	li {
        list-style-type: none;
        padding: 0;
    }

	.listing-title {
		font-size: 24px;
		color: #666666;
		font-weight: 600;
		line-height: 2.2em;
	}
	.listing{
        padding: 0;
		.listing-post {
			padding-bottom: 5px;

			.post-time {
				float: right;
				color: #C5C5C5;
			}

			 a {
				color: #8F8F8F;

				 &:hover{
					 color: #4786D6;
				 }
			}

		}
	}
}
/* share */
.share{
	margin: 0px 30px;
	display: inline-flex;
}
.evernote{
	width: 32px;
	height: 32px;
	border-radius: 300px;
	background-color: #3E3E3E;
	margin-right:5px;
		a{
			color: #fff;
			padding: 11px;
			font-size: 12px;
		}
 		a:hover{
			color: #ED6243;
			padding: 11px;
		}
}
.weibo{
	width: 32px;
	height: 32px;
	border-radius: 300px;
	background-color: #ED6243;
	margin-right:5px;

 	a{
	color: #fff;
	padding: 9px;
	}
	a:hover{
	color: #BD4226;
	}
}
.twitter{
	width: 32px;
	height: 32px;
	border-radius: 300px;
	background-color: #59C0FD;
	margin-right:5px;

		a{
			color: #fff;
			padding: 9px;
		}
		a:hover{
			color:#4B9ECE;
		}
}
/* about */
.about{
	margin: 30px;
	h3{
		font-size: 22px;
	}
}
/* links*/
.links{
	margin: 30px;
	h3{
		font-size: 22px;
	}
	a{
		cursor: pointer;
	}
}
/* 评论样式 */

.comment-count {
	color: #666;
}

.tab-community {
	color: #666;
}

.read_more {
	font-size: 14px;
}

.back-button {
	padding-top: 30px;
	max-width: 100px;
	padding-left: 40px;
	float: left;
}
/* 默认评论样式 */

#fb_comments_container{
	margin: 30px;
}
/* 按钮样式 */
a.btn {
	color: #868686;
	font-weight: 400;

}

.btn {
	display: inline-block;
	position: relative;
	outline: 0;
	color: rgba(0, 0, 0, 0.44);
	background: rgba(0, 0, 0, 0);
	font-size: 14px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid rgba(0, 0, 0, 0.15);
	white-space: nowrap;
	font-weight: 400;
	font-style: normal;
	border-radius: 999em;
}

.btn:hover {
	display: inline-block;
	position: relative;
	outline: 0px;
	color: #464545;
	background: rgba(0, 0, 0, 0);
	font-size: 14px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid #464545;
	white-space: nowrap;
	font-weight: 400;
	font-style: normal;
	border-radius: 999em;
}

[role="back"] {
	padding: 0.5em 1.25em;
	line-height: 1.666em;
}

[role="home"] {
	padding: 0.5em 1.25em;
	line-height: 1.666em;
}

[role="navigation"] {
	padding: 0.5em 1.25em;
	line-height: 1.666em;
}

[role="tags"] {
	padding: 6px 12px;
}

/* Menu样式 */
.menu {
	float: right;
	padding-top: 30px;

	.btn-down{
		margin: 0px;
		li {
			list-style: none;
			width: 100px;

			 a {
				display: inline-block;
				position: relative;
				padding: 0.5em 1.25em;
				outline: 0;
				color: rgba(0, 0, 0, 0.44);
				background: rgba(0, 0, 0, 0);
				font-size: 14px;
				text-align: center;
				text-decoration: none;
				cursor: pointer;
				border: 1px solid rgba(0, 0, 0, 0.15);
				white-space: nowrap;
				font-weight: 400;
				font-style: normal;
				border-radius: 999em;
				margin-top: 5px;

				 &:hover{
					 position: relative;
					padding: 0.5em 1.25em;
					outline: 0;
					color: #fff;
					background: #3CBD10;
					font-size: 14px;
					text-align: center;
					text-decoration: none;
					cursor: pointer;
					border: 1px solid rgba(0, 0, 0, 0.15);
					white-space: nowrap;
					font-weight: 400;
					font-style: normal;
					border-radius: 999em;
					margin-top: 5px;
				 }
			}

		}
	}

	.btn-down div {
		position: absolute;
		visibility: hidden;
		width: 100px;
		float: right;

	}

}

.page_404{
	text-align:center;
	padding-top:50px;
}
@media screen and (max-width: 960px) {
	.sidebar {
		width: 100%;
		position:absolute;
		border-right:none;
		z-index: 1;
			.logo-title{
				padding-top: 120px;

				.title{

					img{
						width: 100px;
					}
					h3{
						font-size: 20px;
					}
				}
			}
		}
	.page-top{
		width: 100%
	}
	.post-title h3{
		line-height: 1.6;
	}
	.content{
		margin-top: 420px;
		width: 100%;
		z-index: 2;
		position: absolute;
	}
	.footer{
		display: none;
	}
	.share{
		display: grid;
	}

}