@charset "UTF-8";

.container{
max-width:1000px;
margin:2em auto;
padding:2em 0;
}

#all h2{
text-align:center;
margin:0;
padding:0.5em;
border:none;

}

#all h2:before,
#all h2:after{
display:none;
}

.item{
display:flex;
flex-wrap:wrap;
margin:0 0.5em;
}

.item a{
flex:0 0 90%;
margin:2%;
padding:10px;
border:solid 1px #CCC;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
text-decoration:none;
color:#333;
}

.thumbnail{
position:relative;
}

.thumbnail:after{
position:absolute;
right:4%;
top:50%;
content:'\f138';
font-family:FontAwesome;
font-style:normal;
font-weight:normal;
font-size:200%;
color:rgba(255,255,255,0.8);
line-height:1;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
transform:translateY(-50%);
-moz-transition:0.25s linear;
-webkit-transition:0.25s linear;
-o-transition:0.25s linear;
transition:0.25s linear;
}

.item a:hover .thumbnail:after{
color:rgba(255,201,38,0.8);
-moz-transition:0.25s linear;
-webkit-transition:0.25s linear;
-o-transition:0.25s linear;
transition:0.25s linear;
}


.item a:hover{
background-color:#FEFAE7;
}

.item a .title{
font-size:24px;
margin-bottom:10px;
}

.comment{
padding:0 !important;
}



@media all and (min-width:500px) {
	
/* .item
------------------------------ */
.item a{
margin:2%;
flex:0 0 40%;
}


}


@media all and (min-width:960px) {

/* .item
------------------------------ */
.item a{
margin:2%;
flex:0 0 27%;
}

}