body{
	background-color: #f8f8f8;
}
.blog-list {
    padding: 10px 0;
    margin: 0 -1rem;
}

.blog-list:after {
	clear: both;
	content: "";
	display: table;
}

.blog-list li {
	display: block;
	float: left;
    width: 25%;
}
.blog-card {
	box-shadow: 0 1px 2px rgba(0,0,0,0.07);
	background: #fff;
	margin-bottom: 1rem;
	border-radius: 3px;
	margin-left: 1rem;
	margin-right: 1rem;
    padding: 0.8rem;
    height: 25rem;
}
.blog-card:hover {
	box-shadow: 0 1px 2px rgba(0,0,0,0.17);
}
.blog-thumb img{
    max-width: 100%;
}
.blog-title{
    font-size: 1.2rem;
}
.blog-description{
    font-size: 0.8rem;
    color: #888;
    line-height: 1.4rem;
    max-height: 6rem;
    overflow: hidden;
    padding-top:0.6rem; 
}
.blog-time{
    font-size: 1rem;
    padding-top:1rem; 
}
.blog-tags{
	font-size: 0.8rem;
	color: #888;
}
.blog-tags a{
	color: #888;
}
.blog-tags a:hover{
	color: #4CAF50;
}
.blog-detail{
	background-color: #FFF;
	padding: 2rem;
	box-shadow: 0 1px 2px rgba(0,0,0,0.07);
	border-radius: 3px;
}
.blog-detail-title h1{
	font-size: 1.6rem;
}
.blog-detail-meta{
	color: #888;
	font-size: 14px;
	margin: 15px 0;
}
.blog-detail-meta span{
	margin-right: 10px;
}
.blog-datail-body{
	line-height: 1.8;
	margin-bottom: 2rem;
	font-size: 14px;
}
.blog-datail-body p{
	margin-bottom: 10px;
}
.blog-datail-body img{
	max-width:100%;
}
.blog-datail-body h3,.blog-datail-body h4{
	font-weight: bold;
}
.blog-datail-body pre{
	display: block;
    overflow-x: auto;
    padding: 0.8em;
    background: #f6f6f6;
    -webkit-text-size-adjust: none;
	border-radius: 4px;
	font-size: 12px;
	font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
	text-align: left;
	line-height: 1.42857143;
    word-break: break-all;
    word-wrap: break-word;
	color:#111;
}
.blog-datail-body a:link,.blog-datail-body a:visited{
	color:#2196F3;
}
.blog-datail-tags{
	color: #888;
}
@media only screen and (max-width: 1440px) {
	.blog-list li {
		width: 33.33%;
	}
}

@media only screen and (max-width: 1024px) {
	.blog-list li {
		width: 33.33333333%;
	}
}

@media only screen and (max-width: 980px) {
	.blog-list li {
		width: 50%;
	}
}

@media only screen and (max-width: 768px) {
	.blog-list li {
        width: 100%;  
    }
    .blog-card{
        height: auto;
    }
}