html {

  overflow-y: scroll;

}



#info {

	-webkit-border-radius:5px;

	-moz-border-radius:5px;

	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;

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

	-o-box-sizing: border-box;



}



	#info .info-wrapper {

		padding:10px;

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

	-o-box-sizing: border-box;



	}

	

	#info a {

		color:#c09853;

		text-decoration:none;

	}

	

	#info p {

		margin:5px 0 0 0;

	}





.container02 { 

	position: relative; 

	width: 960px; 

	margin: 0 auto; 

	-webkit-transition: all 1s ease;

  -moz-transition: all 1s ease;

  -o-transition: all 1s ease;

  transition: all 1s ease;	

}

 

#filters {

	margin: 0 auto 10px;

	padding: 0;

	list-style: none;

	justify-content: center;

	display: flex;

	flex-wrap: wrap;

}



	#filters li {

		float:left;

	}

	

	#filters li span {

		display: block;

		margin-bottom: 12px;

		padding: 7px 29px;

		text-decoration: none;

		cursor: pointer;

		margin-right: 9px;

		font-size: 14px;

		background: transparent;

		color: #1b4d3e;

		font-weight: 500;

		border-radius: 100px;

		border: 2px solid #1b4d3e;

	}

	

	#filters li span.active {

		background: #1b4d3e;

		color: #fff;

		border: 2px solid #1b4d3e;

	}

 

#portfoliolist .portfolio {

	width: 24.8%;

	margin: 0.1%;

	display: none;

	float: left;

	overflow: hidden;

	border: 5px solid #fff;

	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);

	border-radius: 5px;

}



	.portfolio-wrapper {

		overflow:hidden;

		position: relative !important;

		background: #666;

		cursor:pointer;

	}



	.portfolio img {

		max-width:100%;

		position: relative;

		top:0;

        -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 .label {

	width: 100%;

	bottom: 0px;

	-webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);

	transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);

	display: block;

	font-size: 14px;

	font-weight: normal;

	line-height: 20px;

	text-align: center;

	padding: 7px 0;

	color: #0c0c0c;

	font-weight: 550;

	background: #fff;

	z-index: 9;

	}

	.portfolio:hover .label {

		bottom:0;

	}



		.portfolio .label-bg {

	background: #c2797c;

	width: 100%;

	height: 100%;

	position: absolute;

	top: 0;

	left: 0;

		}

	

		.portfolio .label-text {

			color:#fff;

			position: relative;

			z-index:500;

			padding:5px 8px;

		}

			

.portfolio .text-category {

	font-size: 14px;

	min-height: 35px;

	display: flex;

	align-items: center;

	justify-content: center;

}

	



.label-text a { color:#fff; text-transform:uppercase; }	

#portfoliolist .portfolio_main_caps.portfolio   {

	background: transparent;

	box-shadow: none;

	border: none;

	width: 100%;

	text-align: center;

}

.portfolio_main_caps h2 {

	font-size: 20px;

  margin: 10px 0 20px;

}



.blog_pge #portfoliolist .portfolio {

	background: transparent;

	box-shadow: none;

	border: none;

	margin: 0.5%;

	width: 31.8%;

}



/* #Tablet (Portrait) */

@media only screen and (min-width: 768px) and (max-width: 959px) {

	.container02 {

		width: 768px; 

	}

}





/*  #Mobile (Portrait) - Note: Design for a width of 320px */

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

	.container02 { 

		width: 95%; 

	}

	

	#portfoliolist .portfolio {

		width: 100%;

		margin: 0 !important;

	}		

	#filters li span {

		margin-bottom: 7px;
		width: 100%;

	}

	#ads {

		display:none;

	}

	

}





/* #Mobile (Landscape) - Note: Design for a width of 480px */

@media only screen and (min-width: 480px) and (max-width: 767px) {

	.container02 {

		width: 70%;

	}

	

	#ads {

		display:none;

	}

	

}



/* #Clearing */



/* Self Clearing Goodness */

.container02: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;

}