/*@import url("../webfonts/Abel/stylesheet.css");*/
/*@import url("../webfonts/Bembo_Italic/stylesheet.css");*/

/* bm #portfoliolist is the container for the portfolio thumbnails. */
#portfoliolist {
	position: relative;
	top: 84px;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	z-index: 0;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
/* bm #filters are the links to filter the grid items. Currently commented out. */
#filters {
	position: relative;
	left: 96px;
	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: 24%;
	margin: 0.5%;
/*	display: none;*/
	float: left;
	overflow: hidden;
}
/* 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 {
	display: flex;
    align-items: center;
    justify-content: center;

	position: absolute;
	width: 100%;
	height: 100%;
	bottom: 0;
	opacity: 0;
	-webkit-transition: opacity 0.3s ease;
	transition: opacity 0.3s ease;
	border: 4px solid white;
}
.portfolio .label-bg {
	/*background-color: rgba(0,0,0,0.75);*/
	background-color: rgba(60,190,246,0.85);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.portfolio .label-text {
	color: #000;
	position: absolute;
	/*top: 40%;*/
	/*-webkit-transform: translateY(-40%);*/
	/*transform: translateY(-40%);*/
	z-index: 500;
	width: 100%;
	text-align: center;
	transition: all 0.3s ease;
	/*font: 24px Abel;*/
	font: 24px HurmeGeometric-SmBd;
}
.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-video #block {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0 auto;
}
.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-subtitle {
    font: 17px HurmeGeometric-SmBd;
    text-transform: uppercase;
    margin-top: 8px;
}
.portfolio .text-category {
	display: block;
	font: 17px HurmeGeometric-SmBd;
	margin-top: 8px;
}
.portfolio:hover .label {
	opacity: 1;
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}
.portfolio:hover .label-video {
	/*-webkit-transform: scale(1.1);
	transform: scale(1.1);*/
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}
.portfolio:hover .label-overlay {
	-webkit-transform: scale(1.1) translateY(-0%);
	transform: scale(1.1) translateY(-0%);
}
.portfolio:hover .label-text {
	-moz-transform: scale(0.75);
	-webkit-transform: scale(0.75) translateY(-0%);
	transform: scale(0.75) translateY(-0%);
}
.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%;
}
}

@media only screen and (max-width: 900px) {
#portfoliolist .portfolio {
	width: 31.8%;
	margin: 0.75%;
}
}

@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: 94%;
  /* margin: 1.5%; */
  margin: 0 0 24px 0;
}
}
/* #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;
}