/*--------------------------------------------------------------
# portfolio
--------------------------------------------------------------*/

.swiper-filter-active {
	.non-swiper-slide {
		display: none;
	}
}

.swiper-filter-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	.filter-item {
		display: inline-block;
		font-size: 13px;
		text-transform: uppercase;
		font-weight: 700;
		margin: 10px 24px;
		cursor: pointer;
		position: relative;
		z-index: 1;
		&:before {
			content: '';
			width: 11px;
			height: 41px;
			@include border-radius(11px);
			background-color: #f4f4f4;
			position: absolute;
			top: 50%;
			left: 50%;
			@include transform(translate(-50%, -50%) scaley(0));
			opacity: 0;
			@include transition(.2s cubic-bezier(.24,.74,.58,1));
			z-index: -1;
		}
		span {
			color: #010927;
			@include transition(.2s cubic-bezier(.24,.74,.58,1));
		}
		&.active {
			color: $primary_color;
			span {
				@extend .text-gradient;
			}
			&:before {
				opacity: 1;
				@include transform(translate(-50%, -50%) scaley(1));
			}
		}
	}
}

// start portfolio
//--------------------------------------------------

.pxl-portfolio-grid-layout1 {
	.item--featured img {
		@media #{$max-sm} {
			width: 100%;
			object-fit: cover;
		}
	}
	.item--content {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		right: 0;
		top: 0;
		width: 100%;
		height: 100%;	
		padding: 35px 35px 30px;
		background-color: rgba($fourth_color_hex,0.5);
		@media #{$max-xs} {
			padding: 35px 25px 30px;
			margin: 0 0 -1px;
		}
	}
	.item--title {
		margin-bottom: 7px
	}
	.pxl-item--author {
		font-size: 13px;
		font-weight: 400;
		line-height: 15px;
		letter-spacing: 0.78px;
		span {
			color: $primary_color;
		}
	}
	.item--featured {
		overflow: hidden;
		border-radius: 20px;
		img {
			width: 100%;
			object-fit: cover;
		}
	}
	.pxl-item--inner  {
		position: relative;
		>a {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 2;
		}
	}
	&.blinds_staggered {
		@extend .pxl-grid-scroll-ani;
	}
	&.pixel_stretch {
		@extend .pxl-grid-pixel-str;
	}
	&.zoom_in {
		@extend .pxl-grid-zoom-in;
	}
	&.hover_effect {
		@extend .pxl-grid-hover;
	}
}
.pxl-portfolio-grid-layout2 {
	.item--title {
		margin: 19px 0 4px;
	}
	.item--meta {
		margin: 5px 0 0;
		.item--category {
			list-style: none;
			a {
				font-size: 20px;
				font-weight: 400;
				line-height: 30px;
			}
		}
	}
	.item--featured {
		overflow: hidden;
		border-radius: 20px;
		img {
			width: 100%;
			object-fit: cover;
		}
	}
	.pxl-item--inner  {
		position: relative;
		>a {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 2;
		}
	}

	.pxl-item--author {
		font-size: 13px;
		font-weight: 400;
		line-height: 15px;
		letter-spacing: 0.78px;
		span {
			color: $primary_color;
		}
	}
	&.blinds_staggered {
		@extend .pxl-grid-scroll-ani;
	}
	&.pixel_stretch {
		@extend .pxl-grid-pixel-str;
	}
	&.zoom_in {
		@extend .pxl-grid-zoom-in;
	}
	&.hover_effect {
		@extend .pxl-grid-hover;
	}
}
.grid-align-center {
	.pxl-portfolio-grid-layout3 {
		.item--content {
			text-align: center;
		}
	}
}
.pxl-portfolio-grid-layout3 {
	.item--button {
		svg {
			height: 24px;
		}
	}
	&.style1 {
		.item--featured {
			overflow: hidden;
			img {
				transition: transform 0.3s, filter 0.3s;
				@media #{$min-xs} {
					// width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
		} 
		.pxl-item--author {
			font-size: 13px;
			font-weight: 300;
			@include transition(all 0.5s ease-in-out);
			line-height: 30px;
			opacity: 0;	
			transform: translateY(10px);
			color: $fourth_color;
			@media #{$max-md} {
				font-size: 18px;
			} 
			@media #{$max-xs} {
				font-size: 16px;
			} 
			span {
				color: $fourth_color;
			}
		}
		.item--title {
			@include transition(all 0.5s ease-in-out);
			margin-bottom: 3px;		
			transform: translateY(10px);
			font-size: 24px;
			opacity: 0;
			@media #{$max-xs} {
				font-size: 20px;
			} 
			a {
				color: $fourth_color;
				&:hover {
					color: $fourth_color;
				}
			}
		}
		.item--button {
			display: none;	
		}
		.item--content {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: start;
			overflow: hidden;
			flex-direction: column;
			justify-content: end;
			padding: 20px;
			margin-top: 0px;
			text-align: left;		
			@include transition(all 0.5s ease-in-out);
			@media #{$max-md} {
				padding: 15px;
			}
		}
		.pxl-item--inner {
			position: relative;
			border-radius: 20px;
			overflow: hidden;
			>a {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 2;
			}
			&:hover {
				.pxl-item--author,.item--title {
					transform: translateY(0px);
					opacity: 1;
				}
				.item--featured {
					img {
						transform: scale(1.15);
						transform-origin: center;
						-webkit-filter: brightness(.4) contrast(1.1) saturate(1.2) blur(3px);
						filter: brightness(.4) contrast(1.1) saturate(1.2) blur(3px);
					}
				}
			}
		}
	}
	&.df {
		.item--featured {
			overflow: hidden;
			border-radius: 20px;
			img {
				@media #{$min-xs} {
					width: 100%;
					object-fit: cover;
				}
			}
		} 
		.pxl-item--author {
			font-size: 20px;
			font-weight: 400;
			line-height: 30px;
			color: $fourth_color;
			@media #{$max-md} {
				font-size: 18px;
			} 
			@media #{$max-xs} {
				font-size: 16px;
			} 
			span {
				color: $fourth_color;
			}
		}
		.item--title {
			margin-bottom: 3px;		
			@media #{$max-md} {
				font-size: 24px;
			} 
			@media #{$max-xs} {
				font-size: 20px;
			} 
			a {
				color: $fourth_color;
				&:hover {
					color: $fourth_color;
				}
			}
		}
		.item--button {
			position: absolute;
			top: 33.5px;
			right: 39.7px;
			z-index: 1;		
			width: 55px;
			height: 55px;
			background-color: $fourth_color;
			opacity: 0;
			visibility: hidden;
			@include transition(all 0.5s ease-in-out);		
			@include transform(scale(0));
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			i {
				font-size: 38px;
				color: $secondary_color;
			}		
		}
		.item--content {
			position: absolute;
			left: 0;
			bottom: -100%;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: start;
			overflow: hidden;
			flex-direction: column;
			justify-content: end;
			border-radius: 20px;
			padding: 40px;
			margin-top: 0px;
			text-align: left;
			@include background-gradient-rotate(to bottom, rgba($fourth_color_hex,0.0) 50%, $gradient_color_from 100%);    		
			@include transition(all 0.5s ease-in-out);
			@media #{$max-md} {
				padding: 15px;
			}
		}
		.pxl-item--inner {
			position: relative;
			border-radius: 20px;
			overflow: hidden;
			>a {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 2;
			}
			&:hover {
				.item--button {
					opacity: 1;
					visibility: visible;
					@include transform(scale(1));				
				}
				.item--content {
					bottom: 0;
				}
			}
		}
		
	}
	&.blinds_staggered {
		@extend .pxl-grid-scroll-ani;
	}
	&.pixel_stretch {
		@extend .pxl-grid-pixel-str;
	}
	&.zoom_in {
		@extend .pxl-grid-zoom-in;
	}
	&.hover_effect {
		@extend .pxl-grid-hover;
	}
}

.pxl-portfolio-carousel1 {
	.item--featured img {
		@media #{$max-sm} {
			width: 100%;
			object-fit: cover;
		}
	}
	.item--content {
		width: 100%;
		padding: 23px 0 0;		
		@include transition(all 400ms ease-in-out);
		@media #{$max-xs} {		
			margin: 0 0 -1px;
		}
	}	
	.item--title {
		margin-bottom: 4px
	}
	.item--category {
		list-style: none;
		a {
			font-size: 13px;
			font-weight: 400;
			line-height: 15px;
			letter-spacing: 0.78px;
		}
	}
	.item--button {
		.btn-text {
			color: $secondary_color;
		}
		.btn-icon {
			.line, .dot {
				background-color: $secondary_color;
			}
			.circle {
				border-color: $secondary_color;
			}
		}
	}
	.pxl-item--inner  {
		position: relative;
		&:hover {
			.item--content {
				@include transform(perspective(250px) rotatey(0deg));
			}
		}
	}
	&.style2 {
		.item--featured img {
			@include border-radius(10px);
		}
		.item--content {
			opacity: 0;
			right: calc(0px - 1px);
			@include border-radius(0 0 10px 0);
		}
		&:not(.pxl--swiper-center) {
			.swiper-slide-next {
				.item--content {
					opacity: 1;
				}
			}
		}
		&.pxl--swiper-center {
			.swiper-slide-active {
				.item--content {
					opacity: 1;
				}
			}
		}
	}
}

.grid-align-left {
	.pxl-portfolio-grid-layout3 {
		&.style1 {
			.item--content {
				align-items: start;
			}
		}
	}
}
.grid-align-center {
	.pxl-portfolio-grid-layout3 {
		&.style1 {
			.item--content {
				align-items: center;
				justify-content: center;
			}
		}
	}
}
.grid-align-right {
	.pxl-portfolio-grid-layout3 {
		&.style1 {
			.item--content {
				align-items: end;
			}
		}
	}
}

.pxl-portfolio-carousel1 {
	.pxl-swiper-slide {
		@include transition(all 500ms ease-in-out);
	}
	.pxl-item--inner {
		position: relative;
	}
	.pxl-item--image {
		position: relative;
		&:after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 33%;
			background: linear-gradient(to bottom, transparent 0%, #000 120%);
			opacity: 0;
			@include transition(all 500ms cubic-bezier(0.4, 0, 1, 1));
		}
		img {
			object-fit: cover;
			@include transition(all 500ms ease-in-out);
		}
	}
	.pxl-item-content {
		position: absolute;
		left: 40px;
		right: 40px;
		bottom: 33px;
		opacity: 0;
		pointer-events: none;
		@include transform(translatey(15px));
		@include transition(all 500ms ease-in-out);
		@media #{$max-xs} {
			left: 30px;
			right: 30px;
			bottom: 23px;
		}
	}
	.pxl-item--title {
		margin-bottom: 0;
		@extend .pxl-h4-size;
		a {
			font-weight: 500;
			color: $fourth_color;
			&:hover {
				color: $fourth_color;
			}
		}
	}
	.pxl-swiper-slide:not(.swiper-slide-active, .swiper-slide-prev, .swiper-slide-next) {
		cursor: w-resize;
	}
	.swiper-slide-active, .swiper-slide-prev:hover, .swiper-slide-next:hover {
		.pxl-item--image {
			&:after {
				opacity: 1;
			}
		}
		.pxl-item-content {
			opacity: 1;
			pointer-events: auto;
			@include transform(translatey(0));
			-webkit-transition-delay: 0.3s;
			transition-delay: 0.3s;
		}
	}
}

.pxl-portfolio-carousel2 {
	.pxl-swiper-slide {	
		overflow: visible;
	}
	.pxl-item--inner {
		@include transition(all 300ms linear);
		position: relative;		
		border-radius: 10px;
		overflow: hidden;		
	}
	.item--featured {		
		img {
			object-fit: cover;
			@include transform(scale(1.2));				
			@include transition(all 500ms ease-in-out);
		}
	}
	.item--content {
		position: absolute;
		left: 46px;		
		bottom: 33px;
		opacity: 0;
		pointer-events: none;
		@include transform(translatey(15px));
		@include transition(all 500ms ease-in-out);
		@media #{$max-xs} {
			left: 30px;
			right: 30px;
			bottom: 23px;
		}
	}
	.item--category {
		list-style: none;
		a {
			color: $fourth_color;		
			font-size: 13px;
			font-weight: 400;
			line-height: 15px;
			letter-spacing: 0.78px;			
		}
	}
	.item--title {
		margin-bottom: 4px;		
		a {			
			color: $fourth_color;
			&:hover {
				color: $fourth_color;
			}
		}
	}
	.pxl-swiper-container {
		overflow: visible;
	}
	&:hover {
		.wp-arrow {
			&.style3 {
				opacity: 1;
				visibility: visible;
			}
		}
	}
	.wp-arrow {
		&.style3 {
			opacity: 0;
			visibility: hidden;
			@include transition(all 0.25s ease-in-out);
			@media (max-width: 767px) {
				display: none;
			}
			.pxl-swiper-arrow-prev {
				left: 34%;
			}
			.pxl-swiper-arrow-next {
				right: 34%;
			}
		}
	}
	.swiper-slide-active{
		.item--featured {
			img {
				@include transform(scale(1.05));				
			}
		}
		.pxl-item--inner {
			box-shadow: 0px 25px 60px 15px rgba(#000, 0.35);	
		}
		.item--content {
			opacity: 1;
			pointer-events: auto;
			@include transform(translatey(0));
			-webkit-transition-delay: 0.5s;
			transition-delay: 0.5s;
		}
	}
}
.pxl-portfolio-carousel3  {
	display: flex;
	flex-direction: row;
	height: 100vh;
	gap: 20px;
	@media #{$max-sm} {
		gap: 10px;
	}
	@media #{$max-xs2} {
		#showcase-slider-captions {
			display: none;
		}
		#showcase-slider,#showcase-slider-lists {
			width: 50% !important;
		}
	}
	@media #{$max-xs2} {
		#showcase-slider-captions, #showcase-slider-lists  {
			display: none;
		}
		#showcase-slider{
			width: 100% !important;
		}
	}
	.item-meta {
		position: absolute;
		bottom: 30px;	
		right: 30px;
		display: flex;
		flex-direction: column;
		align-items: baseline;
		margin-top: 15px;
		gap: 30px;
		transform: translatey(10px);
		transition: all 1s ease;
		opacity: 0;
		.social-share-buttons {
			display: flex;	
			flex-direction: column;
		}
		i {
			font-size: 20px;
			color: #fff;
			@media (max-width: 991px) {
				font-size: 16px;
			}
		}
	}
	#showcase-slider{
		padding-top: 0;
		@media #{$max-lg} {
			.pxl-swiper-container{
				height: 100% !important;	
			}
			.img-mask {
				position: absolute;
			}
		}
		.pxl-item--inner {
			height: 100%;
		}
	}
	.img-mask {
		position: relative;
		transform: none !important;
	}
	.item--content {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		right: 0;
		top: 0;
		width: 100%;
		height: 100%;	
		padding: 35px 35px 30px;
		@media #{$max-xs} {
			padding: 35px 25px 30px;
			margin: 0 0 -1px;
		}
	}
	.item--title {
		transform: translatey(10px);
		transition: 0.5s ease-in-out;
		opacity: 0;
		font-size: 24px;
		text-align: center;
		line-height: 30px;
		letter-spacing: 0px;
		@media #{$max-xs} {
			font-size: 20px;
			margin-bottom: 0;
		}
		a {
			color: $fourth_color;
		}
	}
	.item--category {
		font-size: 13px;
		padding-bottom: 0px;
		margin-bottom: 0px;
		transform: translatey(10px);
		transition: all 1s ease;
		list-style: none;
		opacity: 0;
		a {
			color: $fourth_color;
		}
	}
	.pxl-item--inner {
		height: 100%;
		width: 100%;
		overflow: hidden;
		@media #{$max-lg} {
			height: auto;
		}
		img {
			transition: 0.5s ease-in-out;
			width: 100%;
			height: 100%;
			object-fit: cover;
			@media (max-width: 1919px) {
				height: 100%;
				width: 100%;
				object-fit: cover;
			}
		}
		&:hover {
			img {
				transform: scale(1.15);
				transform-origin: center;
				-webkit-filter: brightness(.4) contrast(1.1) saturate(1.2) blur(3px);
				filter: brightness(.4) contrast(1.1) saturate(1.2) blur(3px);
			}
			.item--title,.item--category,.item-meta {
				transform: translatey(0px);
				opacity: 1;
			}
		}
	}
	#showcase-slider-captions,#showcase-slider-lists,#showcase-slider {
		position: relative;
		height: 100vh;
		width: 33.3333%;
		clip-path: none;
		transform: none;
		border-radius: 0;
		top: 0;
		pointer-events: unset;
		.pxl-carousel-inner {
			height: 100%;
			.swiper-vertical {
				.pxl-swiper-wrapper {
					transform: none;
				}
			}
		}
	}
}