#filter-buttons { margin-bottom:30px; }
#portfolio-filter-list { margin:0; list-style:none; text-align:center; }
#portfolio-filter-list li { display:inline-block; margin:0 5px 10px; }
#portfolio-filter-list a { display:block; height:32px; line-height:30px; padding:0 15px; background:#f6f6f6; color:#5c5c5c; border-radius:20px; }
	#portfolio-filter-list a:hover,
	#portfolio-filter-list .selected a { background:#66ccff; color:#fff; }
#portfolio-filter-list a span.count { display:none; float:right; width:32px; height:32px; margin-left:10px; background:#00acec; border-left:1px solid transparent; border-radius:100%; font-size:0.875em; color:#fff; text-align:center; }
	#portfolio-filter-list a:hover span.count,
	#portfolio-filter-list .selected a span.count { border-left-color:#fff; }
	
#portfolio-list { margin:0 -5px; overflow:hidden; }
#portfolio-list .portfolio-item { box-sizing:border-box; float:left; padding:0 5px 10px; }
	#portfolio-list .portfolio-item.columns-4 { width:25%; }
	#portfolio-list .portfolio-item.columns-3 { width:33.3333%; }
	#portfolio-list .portfolio-item.columns-2 { width:50%; }
#portfolio-list .portfolio-item .centerimage:after { opacity:.35; display:block; content:""; position:absolute; z-index:0; top:0; left:0; width:100%; height:100%; background:#000; transition-duration:.2s; }
	#portfolio-list .portfolio-item .centerimage:hover:after { opacity:.75; }
#portfolio-list .portfolio-item img { transition-duration:.5s; }
	#portfolio-list .portfolio-item:hover img { transform:translate(-50%, -50%) scale(1.025); }
	#portfolio-list .portfolio-item:hover img.fit-top { transform:translate(-50%, 0px) scale(1.01); }
#portfolio-list .portfolio-item .valign { z-index:1; }
#portfolio-list .portfolio-item div.title { box-sizing:border-box; min-width:170px; padding:1px 15px 3px; background:rgba(255,140,52,.9); color:#fff; border-radius:20px; box-shadow:1px 1px 2px rgba(0,0,0,.3); transition-duration:.2s; }
	#portfolio-list .portfolio-item:hover div.title { background:rgba(255,140,52,.99); }
#portfolio-list .portfolio-item span.title { display:block; position:absolute; z-index:1; bottom:20px; left:0; padding:0 11px; line-height:30px; font-size:12px; background:#ffb534; border-left:7px solid #ffa100; color:#fff; transition-duration:.2s; }
	#portfolio-list .portfolio-item:hover span.title { background:#ff8c34; border-left-color:#ff6e00; }
#portfolio-list .portfolio-item span.title i.fa { float:right; width:16px; height:16px; margin:7px 0 0 10px; font-size:16px; }
	#portfolio-list .portfolio-item.viewed span.title i.fa { display:none; }

@media screen and (max-width:1023px) {
#portfolio-filter-list { display:none; }
select#portfolio-filter-select { display:block; width:100%; }
}

@media screen and (min-width:568px) and (max-width:1023px) {
#portfolio-list .portfolio-item.columns-3 { width:50%; }
}

@media screen and (max-width:567px) {
#portfolio-list .portfolio-item.columns-3 { width:100%; }
}