//ALBUM

.filter {
	text-align: center;
	padding: 0 15px;

	ul {
		margin: 63px 0;
	}

	ul li {
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 1.8px;
		display: inline-block;
		margin: 8px;
		text-transform: uppercase;
		cursor: pointer;
		opacity: 1;
		color: var(--c-grey);
		-webkit-transition: all 300ms ease;
		transition: all 300ms ease;

		&.is-checked {
			color: var(--c-dark);
			opacity: 1;
		}

		&:hover {
			opacity: .7;
		}
	}
}

.whizzy-portfolio-wrapper {
	.portfolio {
		.portfolio-title a {
			text-align: center;
			display: block;
			font-size: 24px;
			line-height: 1.4;
			font-weight: 400;
			color: var(--c-dark);
			text-decoration: none;
			margin-bottom: 0;
		}

		&::before,
		&::after {
			content: '';
			display: table;
			clear: both;
		}

		&.col-4 .item {
			width: calc(25% - 22.5px);
		}

		&.col-3 .item {
			width: calc(33.33% - 20px);
		}

		&.col-6 .item {
			width: calc(50% - 15px);
		}

		.item {
			margin-bottom: 10px;
		}

		.item .item-link {
			position: relative;
			height: 100%;

			&:hover::before {
				opacity: .3;
			}
		}

		&.grid .item .item-link {
			position: absolute;
		}

		.item .item-link::before {
			content: '';
			position: absolute;
			height: 100%;
			width: 100%;
			top: 0;
			left: 0;
			background-color: var(--c-dark);
			opacity: 0;
			-webkit-transition: opacity 0.5s ease;
			transition: opacity 0.5s ease;
		}
	}

	&.grid {
		.portfolio-title a {
			text-align: left;
			font-size: 16px;
			letter-spacing: 2px;
			margin-top: 3px;
		}

		.item .item-link.default::before {
			z-index: 9;
		}

		.item-link {
			overflow: hidden;
		}

		.img-wrap {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-size: cover;
			background-position: center;
		}
	}

	.item .item-link {
		display: block;

		img {
			max-width: 100%;
		}
	}

	+ .text-center {
		button {
			color: var(--c-light);
			text-transform: uppercase;
			background-color: var(--c-dark);
			margin-top: 65px;
			font-weight: 400;
			letter-spacing: 2px;
			padding: 11px 28px;
			-webkit-transition: all 350ms ease;
			-moz-transition: all 350ms ease;
			-ms-transition: all 350ms ease;
			-o-transition: all 350ms ease;
			transition: all 350ms ease;

			&:hover {
				opacity: .7;
			}
		}
	}

}

@media only screen and (max-width: 992px) {
	.whizzy-portfolio-wrapper .portfolio.col-3 .item,
	.whizzy-portfolio-wrapper .portfolio.col-4 .item,
	.whizzy-portfolio-wrapper .portfolio.col-6 .item {
		width: calc(50% - 15px);
	}
	.whizzy-portfolio-wrapper + .text-center button {
		margin-top: 50px;
	}
}

@media only screen and (max-width: 767px) {
	.filter ul {
		margin: 30px 0;
	}
	.whizzy-portfolio-wrapper .portfolio.col-3 .item,
	.whizzy-portfolio-wrapper .portfolio.col-4 .item,
	.whizzy-portfolio-wrapper .portfolio.col-6 .item {
		width: 100%;
	}
	.whizzy-portfolio-wrapper + .text-center button {
		margin-top: 30px;
	}
}

//GALLERY
.portfolio-single-content.whizzy-plugin {
	.item-single {
		width: -webkit-calc(25% - 20px);
		width: calc(25% - 20px);
		margin: 0 10px 20px;
		position: relative;

		&:hover .info-content {
			top: 0;
		}
	}

	.gallery-item {
		display: block;
		max-width: 100%;
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: relative;

		.img-wrap {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-position: center;
			background-size: cover;
		}
	}

	.info-content {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		background-color: rgba(19, 19, 19, 0.3);
		height: 100%;
		-webkit-transition: all 350ms ease;
		-moz-transition: all 350ms ease;
		-ms-transition: all 350ms ease;
		-o-transition: all 350ms ease;
		transition: all 350ms ease;

		.vertical-align {
			position: absolute;
			top: 50%;
			width: 100%;
			padding: 0 15px;
			text-align: center;
			-webkit-transform: translateY(-50%);
			-moz-transform: translateY(-50%);
			-ms-transform: translateY(-50%);
			-o-transform: translateY(-50%);
			transform: translateY(-50%);

			h5 {
				font-size: 20px;
				line-height: 1.3;
				color: var(--c-light);
				font-weight: 600;
				letter-spacing: 1px;
			}
		}
	}
}

.portfolio-single-content.boxed_masonry .gallery-item .img-wrap {
	position: static;
}

@media only screen and (max-width: 1199px) {
	.portfolio-single-content.whizzy-plugin .item-single {
		width: -webkit-calc(33% - 20px);
		width: calc(33% - 20px);
	}
}

@media only screen and (max-width: 992px) {
	.portfolio-single-content.whizzy-plugin .item-single {
		width: -webkit-calc(50% - 16px);
		width: calc(50% - 16px);
		margin: 0 8px 16px;
	}
}

@media only screen and (max-width: 767px) {
	.portfolio-single-content.whizzy-plugin .item-single {
		width: 100%;
		margin-bottom: 15px;
		margin-left: 0;
		margin-right: 0;
	}
}


//GALLERY HOVERS

///*Hover 1 - Zoom out*/
.portfolio-single-content.whizzy-plugin.boxed_grid .item-single .gallery-item.hover1 .img-wrap,
.whizzy-portfolio-wrapper.grid .item .item-link.hover1 .img-wrap {
	width: 120%;
	height: 100%;
	-webkit-transform: scale(1.3);
	-ms-transform: scale(1.3);
	transform: scale(1.3);
	left: -10%;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.portfolio-single-content.whizzy-plugin.boxed_grid .item-single:hover .gallery-item.hover1 .img-wrap,
.whizzy-portfolio-wrapper.grid .item:hover .item-link.hover1 .img-wrap {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

/*Hover 2 - Slide*/
.portfolio-single-content.whizzy-plugin.boxed_grid .item-single .gallery-item.hover2 .img-wrap,
.whizzy-portfolio-wrapper.grid .item .item-link.hover2 .img-wrap {
	width: 120% !important;
	left: -20%;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.portfolio-single-content.whizzy-plugin.boxed_grid .item-single:hover .gallery-item.hover2 .img-wrap,
.whizzy-portfolio-wrapper.grid .item:hover .item-link.hover2 .img-wrap {
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	left: 0;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.gallery-single .gallery-item.hover2 .info-content {
	left: -7%;
}

/*Hover 3 - Rotate (+ zoom out)*/
.portfolio-single-content.whizzy-plugin.boxed_grid .item-single .gallery-item.hover3 .img-wrap,
.whizzy-portfolio-wrapper.grid .item .item-link.hover3 .img-wrap {
	-webkit-transform: rotate(15deg) scale(1.4);
	-ms-transform: rotate(15deg) scale(1.4);
	transform: rotate(15deg) scale(1.4);
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.portfolio-single-content.whizzy-plugin.boxed_grid .item-single:hover .gallery-item.hover3 .img-wrap,
.whizzy-portfolio-wrapper.grid .item:hover .item-link.hover3 .img-wrap {
	-webkit-transform: rotate(0deg) scale(1);
	-ms-transform: rotate(0deg) scale(1);
	transform: rotate(0deg) scale(1);
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

/*Hover 4 - Blur*/
.portfolio-single-content.whizzy-plugin.boxed_grid .item-single .gallery-item.hover4 .img-wrap,
.whizzy-portfolio-wrapper.grid .item .item-link.hover4 .img-wrap {
	-webkit-filter: grayscale(0%) blur(3px);
	filter: grayscale(0%) blur(3px);
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.portfolio-single-content.whizzy-plugin.boxed_grid .item-single:hover .gallery-item.hover4 .img-wrap,
.whizzy-portfolio-wrapper.grid .item:hover .item-link.hover4 .img-wrap {
	-webkit-filter: grayscale(0%) blur(0px);
	filter: grayscale(0%) blur(0px);
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

/*Hover 5 - Greyscale*/
.portfolio-single-content.whizzy-plugin.boxed_grid .item-single .gallery-item.hover5 .img-wrap,
.whizzy-portfolio-wrapper.grid .item .item-link.hover5 .img-wrap {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.portfolio-single-content.whizzy-plugin.boxed_grid .item-single:hover .gallery-item.hover5 .img-wrap,
.whizzy-portfolio-wrapper.grid .item:hover .item-link.hover5 .img-wrap {
	-webkit-filter: grayscale(0%);
	filter: grayscale(0%);
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

/*Hover 6 - Sepia*/
.portfolio-single-content.whizzy-plugin.boxed_grid .item-single .gallery-item.hover6 .img-wrap,
.whizzy-portfolio-wrapper.grid .item .item-link.hover6 .img-wrap {
	-webkit-filter: sepia(100%) grayscale(0%);
	filter: sepia(100%) grayscale(0%);
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.item-single:hover .gallery-item.hover6 .img-wrap,
.whizzy-portfolio-wrapper.grid .item:hover .item-link.hover6 .img-wrap {
	-webkit-filter: sepia(0%) grayscale(0%);
	filter: sepia(0%) grayscale(0%);
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}


/*Hover 7 - Blur + Greyscale*/
.portfolio-single-content.whizzy-plugin.boxed_grid .item-single .gallery-item.hover7 .img-wrap,
.whizzy-portfolio-wrapper.grid .item .item-link.hover7 .img-wrap {
	-webkit-filter: blur(0px) grayscale(0%);
	filter: blur(0px) grayscale(0%);
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.item-single:hover .gallery-item.hover7 .img-wrap,
.whizzy-portfolio-wrapper.grid .item:hover .item-link.hover7 .img-wrap {
	-webkit-filter: blur(3px) grayscale(100%);
	filter: blur(3px) grayscale(100%);
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

/*Hover 8 - Opacity*/
.portfolio-single-content.whizzy-plugin.boxed_grid .item-single .gallery-item.hover8 .img-wrap,
.whizzy-portfolio-wrapper.grid .item .item-link.hover8 .img-wrap {
	-webkit-filter: grayscale(0%);
	filter: grayscale(0%);
	opacity: 1;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.portfolio-single-content.whizzy-plugin.boxed_grid .item-single:hover .gallery-item.hover8 .img-wrap,
.whizzy-portfolio-wrapper.grid .item:hover .item-link.hover8 .img-wrap {
	-webkit-filter: grayscale(0%);
	filter: grayscale(0%);
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 0.7;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

/*Hover 9 - Shine*/
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}

.portfolio-single-content.whizzy-plugin.boxed_grid .item-single .gallery-item.hover9 .img-wrap,
.whizzy-portfolio-wrapper.grid .item .item-link.hover9 .img-wrap {
	-webkit-filter: grayscale(0%);
	filter: grayscale(0%);
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.portfolio-single-content.whizzy-plugin.boxed_grid .item-single .gallery-item.hover9 .img-wrap::before,
.whizzy-portfolio-wrapper.grid .item .item-link.hover9 .img-wrap::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: linear-gradient(to right, rgba(var(--ca-light), 0) 0%, rgba(var(--ca-light), 0.3) 100%);
	-webkit-transform: skewX(-25deg);
	-ms-transform: skewX(-25deg);
	transform: skewX(-25deg);
}

.portfolio-single-content.whizzy-plugin.boxed_grid .item-single:hover .gallery-item.hover9 .img-wrap,
.whizzy-portfolio-wrapper.grid .item:hover .item-link.hover9 .img-wrap {
	-webkit-filter: grayscale(0%);
	filter: grayscale(0%);
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.portfolio-single-content.whizzy-plugin.boxed_grid .item-single:hover .gallery-item.hover9 .img-wrap::before,
.whizzy-portfolio-wrapper.grid .item:hover .item-link.hover9 .img-wrap::before {
	-webkit-animation: shine .75s;
	animation: shine .75s;
}