.wrapper-filter-controls {
	text-align: center;
	padding-bottom: 50px;

	.filter-controls {
		display: inline-block;
		border-bottom: 1px solid #ddd;
		padding: 0 10px;

		.filter {
			color: #2a2a2a;
			cursor: pointer;
			padding: 5px 10px;
			text-transform: uppercase;
			font-size: 16px;
			font-weight: 700;
			display: inline-block;
			border-bottom: 1px solid transparent;
			margin-bottom: -1px;

			&.active,
			&:hover {
 				border-color: #000;
				text-decoration: none;
			}
		}
	}
}

.wrapper-gallery-filter {
	&.row {
		margin-left: -10px;
		margin-right: -10px;
	}

	.fancybox {
		margin-bottom: 20px;
		overflow: hidden;
		position: relative;

		padding-left: 10px;
		padding-right: 10px;

		img {
			width: 100%;
			height: auto;
		}

		&:before {
			position: absolute;
			top: 0;
			left: 10px;
			right: 10px;
			bottom: 0;
			background: rgba(0, 0, 0, .5);
			content: "";
			.transition(all .2s ease-in-out 0s);
			.transform(scale(0));
			.transform(0);
		}

		&:after {
			.transition(all 0.2s ease-in-out 0s);
			.transform(scale(0));
			.transform(0);
			width: 40px;
			height: 40px;
			content: "\f002";
			color: #fff;
			font: normal normal normal 32px/1 FontAwesome;

			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -20px;
			margin-left: -20px;
			text-align: center;
			opacity: 0.8;
		}

		&:hover {
			&:before,
			&:after {
				.transform(1);
				.transform(scale(1));
			}
		}
	}
}