/* bm #portfoliolist is the container for the portfolio thumbnails */
#portfoliolist {
	position: relative;
	/*top: 56px;*/
	/*width: 95%;*/
	width: auto;
	max-width: 1200px;
	margin: 0 auto;
	padding-bottom: 96px;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
	/*border: 1px solid red;*/
}
/*#portfoliolist:after {
  content: "";
  display: table;
  clear: both;
}*/
/* bm #filters are the links to filter the grid items. Currently commented out. */
#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: #e95a44;
	color: #fff;
}
/* bm #portfoliolist .portfolio is the individual portfolio items */
#portfoliolist .portfolio {
	width: 20%;
	margin: 2.5%;
	display: block;
	float: left;
	overflow: hidden;
	border: 8px solid white;
}
/* bm .portfolio-wrapper contains the background img & all overlay elements */
.portfolio-wrapper {
	overflow: hidden;
	position: relative !important;
	background: none;
	/*cursor: pointer;*/
}
.portfolio img {
	max-width: 100%;
	display: block;
	position: relative;
    transition: all 0.3s ease;
}
.portfolio .label {
	position: absolute;
	width: 100%;
	height: 100%;
	bottom: 0;
	opacity: 0;
	pointer-events: none;
	-webkit-transition: opacity 0.3s ease;
	transition: opacity 0.3s ease;
}
.portfolio .label-bg {
	/*background-color:rgba(0,0,0,0.75);*/
	background-color: rgba(187, 68, 46, 0.77);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.portfolio .label-text {
  color: #fff;
  position: absolute;
  top: 45%;
  /* line-height: 120%; */
  -webkit-transform: translateY(-40%);
  transform: translateY(-40%);
  z-index: 500;
  width: 100%;
  padding: 0 12px;
  text-align: center;
  transition: all 0.3s ease;
  font: 21px Cochin;
  line-height: 140%;
}
.portfolio .label-video {
	position: absolute;
	/*top: -40%;
	left: -40%;*/
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	transition: all 0.3s ease;
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	transform: scale(1);
}
.portfolio .label-overlay {
	color: #fff;
	position: absolute;
	top: 40%;
	-webkit-transform: translateY(-40%);
    transform: translateY(-40%);
	z-index: 0;
	width: 100%;
	text-align: center;
	transition: all 0.3s ease;
	font: 24px Abel;
}
.portfolio .label-overlay img {
	width: 60%;
	margin: 0 auto;
}
.portfolio .text-category {
	display: block;
	font: 24px "Bembo Italic";
	margin-top: 8px;
}
.portfolio:hover .label {
	opacity: 1;
}
.portfolio:hover .label-video {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}
.portfolio:hover .label-overlay {
/*	-webkit-transform: scale(1.1) translateY(-40%);
	transform: scale(1.1) translateY(-40%);*/
}
.portfolio:hover .label-text {
/*	-moz-transform: scale(0.8);
	-webkit-transform: scale(0.8) translateY(-40%);
	transform: scale(0.8) translateY(-40%);*/
}
.portfolio:hover img {
/*	-moz-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	transform: scale(1.2);*/
}

@media only screen and (min-width: 1400px) {
#portfoliolist {
	max-width: 1600px;
}
}
@media only screen and (max-width: 1200px) {
#portfoliolist {
	max-width: 900px;
}
#portfoliolist .portfolio {
	/*width: 32.3%;*/
	width: 28.3%;
}
}

@media only screen and (max-width: 900px) {
#portfoliolist .portfolio {
		width: 45%;
	/*margin: 1%;*/
}
}

/*@media only screen and (max-width: 640px) {
#portfoliolist {
	width: 85%;
}
#portfoliolist .portfolio {
	width: 48%;
	margin: 1%;
}
}*/

@media only screen and (max-width: 480px) {
#portfoliolist .portfolio {
	width: 90%;
  margin: 4%;
}

}
/* #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;
}