#portfoliolist{display:flex; flex-wrap:wrap; gap:5rem; margin-right:-5rem}
#info {border-radius:5px;background:#fcf8e3; border:1px solid  #fbeed5; width:95%; max-width:900px; margin:0 auto 40px auto; font-family:arial; font-size:12px;}
#info .info-wrapper { padding:10px; box-sizing: border-box}
#info a {color:#c09853; text-decoration:none;}
#info p {margin:5px 0 0 0;}
.container {position: relative; width: 960px; margin: 0 auto; transition: all 1s ease;}
 
#filters {margin:1%; padding:0;	list-style:none;}
#filters li {float:left;}
#filters li span {display: block; padding:5px 20px;	text-decoration:none; color:#666; cursor: pointer;}	
#filters li span.active {background:var(--main_color);color:#fff;}
#portfoliolist .portfolio {width:calc(33% - 5rem); display:none; overflow:hidden;}

.portfolio-wrapper {overflow:hidden; position: relative !important; background: #666; cursor:pointer;}
.portfolio img {max-width:100%; width:100%; position: relative; top:0; transition:all 600ms cubic-bezier(0.645, 0.045, 0.355, 1)}
.portfolio .label {position: absolute; width: 100%; height:100%; bottom:-100%; transition:all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);}
.portfolio .label-bg {background:rgba(3,73,154,0.8); width: 100%; height:100%; position: absolute; top:0; left:0;	}
.portfolio .label-text {position: relative; z-index:500; padding:5px 8px; top:50%; left:50%; transform: translate(-50%,-50%); text-align: center;}
.portfolio .label-text a{color:#fff}
.portfolio .text-category {display:block; font-size:9px;}
.portfolio:hover .label {bottom:0;}
.portfolio:hover img { transform: scale(1.5);}  
.portfolio-bottom-title { text-align:center; padding:10px 0;}

	



/* #Tablet (Portrait) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	.container {
		width: 768px; 
	}
}


/*  #Mobile (Portrait) - Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
	.container { 
		width: 95%; 
	}
	
	#portfoliolist .portfolio {
		width:48%;
		margin:1%;
	}		

	#ads {
		display:none;
	}
	
}


/* #Mobile (Landscape) - Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.container {
		width: 70%;
	}
	
	#ads {
		display:none;
	}
	
}

/* #Clearing */

/* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0; }
.row:after,
.clearfix:after {
  clear: both; }
.row,
.clearfix {
  zoom: 1; }

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}