#filters {
padding:0;
list-style:none;
}

#filters li {
/*float:left;*/
margin-right:5px;
display: inline-block;
margin: 0px 1rem 10px;
}

#filters li span {
display: block;
/*padding:5px 20px;		*/
text-decoration:none;
color:#fff;
cursor: pointer;
/*background-color: #212121;
border-bottom:3px solid #585858;*/
padding: 0.75rem 2rem;
border:1px solid #c0c0c0;
-webkit-border-radius: 6px;
border-radius: 6px;
color: #000;
}

#filters li span.active {
color:#fff;
/*background-color: #585858;
border-bottom:3px solid #5baee5;*/
background-color:#448ccb;
border-color: #448ccb;
}


#portfoliolist .portfolio {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
width:23%;
margin:1%;
display:none;
float:left;
overflow:hidden;
}

.portfolio-wrapper {
overflow:hidden;
/*position: relative !important;
/*cursor:pointer;*/
background:#d2f1fd;
padding: 30px;
-webkit-border-radius: 10px;border-radius:10px;
-webkit-transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
transition:         all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);		
}

.portfolio img {
width:100%;
height:100%;
position: relative;
top:0;

}

.simplefilter-main{
	display: table;
    margin: 30px auto;
    width: auto;
}

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

.simplefilter-main{
	width:90%;
	margin:20px auto;
}
#filters li{ width:30%; text-align:center; margin-right:5px; margin-bottom:5px; float:left;}
#portfoliolist .portfolio{ width:50%; float:left; margin:0 auto;}


}

@media only screen and (min-width: 320px) and (max-width: 479px) {

.simplefilter-main{
	width:90%;
	margin:20px auto;
}
#filters li{ text-align:center; margin: 0px 0.5rem 10px;}
#portfoliolist .portfolio{ width:50%; float:left; margin:0 auto;}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
#portfoliolist .portfolio{ width:50%; float:left; margin:0 auto;}
}
@media only screen and (max-width: 767px) {
.portfolio-wrapper{padding:20px;}
}