/*--------------------------------------------------------------
POSTs
----------------------------------------------------------------
# Carousel Reset
# Grid Reset
# Grid Loadmore Style
# Grid Filter Style
# Blog
# Portfolio
# Service
--------------------------------------------------------------*/

// Carousel Reset
.pxl--hide-arrow .pxl-swiper-arrow-wrap {
	opacity: 0 !important;
	visibility: hidden !important;
	position: absolute;
}

.swiper-vertical {
	touch-action: pan-x;
	> .pxl-swiper-wrapper {
		flex-direction: column;
	}
	&.swiper-backface-hidden {
		.pxl-swiper-slide {
			transform: translateZ(0);
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			height: auto !important;
		}
	}
}

.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;
		@extend .ft-theme-default;
		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(all .25s cubic-bezier(.645,.045,.355,1));
			z-index: -1;
		}
		span {
			color: #010927;
			@include transition(all .25s cubic-bezier(.645,.045,.355,1));
		}
		&.active {
			color: $primary_color;
			span {
				@extend .text-gradient;
			}
			&:before {
				opacity: 1;
				@include transform(translate(-50%, -50%) scaleY(1));
			}
		}
	}
}

.pxl-swiper-slider {
	.pxl-post--image img, .pxl-post--featured img {
		width: 100%;
	}
	.pxl-post--title, .pxl-post--category {
		a {
			color: inherit;
			&:hover {
				color: inherit;
			}
		}
	}
}

.pxl-swiper-arrow-wrap {
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    .pxl-arrow-label {
    	font-size: 16px;
  		color: #878787;
  		margin-bottom: 10px;
  		margin-top: 10px;
    }
    .pxl-swiper-arrow-prev {
    	i {
    		transform: rotate(180deg);
    	}
    }
	&.style-1 {
		justify-content: flex-start;
		margin: 30px -5px 0;
		.pxl-swiper-arrow {
			height: 60px;
			width: 60px;
			min-width: 60px;
			border: 1px solid #c1c1c1;
			border-radius: 60px;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			margin: 0 5px;
			color: #c1c1c1;
			font-size: 12px;
			i {
				display: inline-flex;
			}
			&:hover {
				color: #01062e;
			}
		}
	}
	&.style-2 {
		.pxl-swiper-arrow {
			width: 75px;
			min-width: 75px;
			height: 70px;
			color: #fff;
			background-color: $primary_color;
			font-size: 20px;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			align-items: center;
 			font-weight: normal;
			&.pxl-swiper-arrow-prev {
				transform: scaleX(-1);
			}
			&.pxl-swiper-arrow-next {
				background-color: #fff;
				color: #000;
			}
			i {
				display: inline-flex;
			}
		}
	}
	&.style-3 {
		.pxl-swiper-arrow {
			width: 59px;
			height: 65px;
			border-radius: 20px;
			background-color: #e7e7e7;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			color: #382c4d;
			font-size: 24px;
			position: relative;
			z-index: 1;
			margin: 5px;
			i {
				display: inline-flex;
			}
			&:before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border-radius: 20px;
				@include background-horizontal($gradient_color_from, $gradient_color_to);
				z-index: -1;
				opacity: 0;
				@include transition(all 300ms linear 0ms);
			}
			svg {
                height: 20px;
                width: auto;
                path {
                    fill: #fff;
                }
            }
            .hover {
                overflow: hidden;
                display: inline-flex;
                @include transition(all 200ms linear 0ms);
            }
            &.pxl-swiper-arrow-next {
                left: unset;
                right: 0;
                &:hover {
                    .hover {
                        @include animation(toRightFromLeft .3s linear 1);
                    }
                }
            }
            &.pxl-swiper-arrow-prev {
                svg {
                    transform: rotate(-180deg);
                }
                &:hover {
                    .hover {
                        @include animation(toLeftFromRight .3s linear 1);
                    }
                }
            }
			&:hover {
				color: #fff;
				&:before {
					opacity: 1;
				}
			}
		}
	}
}

.pxl-container-dots {
	text-align: center;
	margin-top: 41px;
}

.pxl-swiper-dots {
	&.pxl-swiper-pagination-bullets span {
        display: inline-flex;
        cursor: pointer;
        @include transition(all 300ms linear 0ms);
    }
    &.pxl-swiper-pagination-progressbar {
    	height: 1px;
    	background-color: #454545;
    	width: 100%;
    	position: relative;
    	margin-top: 45px;
    	.swiper-pagination-progressbar-fill {
    		height: 3px;
    		background-color: $primary_color;
    		display: inline-flex;
    		width: 100%;
    		position: absolute;
			left: 0;
			bottom: 0;
			transform-origin: left top;
    	}
    }

    &.style-1 {
    	&.pxl-swiper-pagination-bullets {
    		display: flex;
			flex-wrap: wrap;
			justify-content: center;
			padding-top: 16px;
    		.pxl-swiper-pagination-bullet {
    			width: 10px;
    			height: 10px;
    			background-color: #c2c2c2;
    			border-radius: 10px;
    			margin: 0 11px;
    			&.swiper-pagination-bullet-active {
    				background-color: #060606;
    			}
    		}
    	}
    	&.pxl-swiper-pagination-fraction {
    		margin-top: 34px;
    		font-size: 0px;
    		color: #797979;
    		font-weight: 700;
    		text-align: center;
    		position: relative;
    		z-index: 1;
    		&:before {
    			content: '';
    			width: 50px;
    			height: 1px;
    			background-color: #bbbbbb;
    			position: absolute;
    			top: 50%;
    			left: 50%;
    			@include transform(translate(-50%, -50%));
    			z-index: -1;
    		}
    		span {
    			display: inline-flex;
    			margin: 0 36px;
    			font-size: 22px;
    		}
    	}
    }

    &.style-2 {
    	&.pxl-swiper-pagination-bullets {
    		left: 50%;
			position: relative;
			transform: translate(-50%, 0);
			background-color: #fff;
			border-radius: 38px;
			padding: 13px 30px;
			display: inline-flex;
			box-shadow: 0 4px 46px rgba(#17191a, 0.09);
			z-index: 99;
			margin-top: 40px;
    		.pxl-swiper-pagination-bullet {
    			width: 12px;
    			height: 12px;
    			background-color: #e0e0e0;
    			border-radius: 10px;
    			margin: 0 5px;
    			&.swiper-pagination-bullet-active {
    				background-color: $third_color;
    			}
    		}
    	}
    }
    &.style-3 {
    	background-color: rgba(#393939, 0.141);
    	border-radius: 6px;
    	display: inline-flex;
		z-index: 99;
		position: relative;
    	.pxl-swiper-pagination-bullet {
    		height: 13px;
    		width: 170px;
    		padding: 0;
    		border-radius: 6px;
    		background-color: unset;
    		&.swiper-pagination-bullet-active {
				background-color: $primary_color;
			}
			@media (max-width: 991px) {
				width: 80px;
			}
			@media (max-width: 676px) {
				width: 50px;
			}
    	}
    }
}

// Grid Reset
.pxl-grid, .pxl-post-carousel, .pxl-post-modern {
	.pxl-post--featured {
		position: relative;
	}
	.pxl-post--link {
		@extend .pxl-spill;
		z-index: 99;
	}
	.pxl-post--image img, .pxl-post--featured img {
		width: 100%;
	}
	.pxl-post--title a {
		color: inherit;
		&:hover {
			color: inherit;
		}
	}
	.pxl-post--category { 
		position: relative;
		&.link-none:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 99;
		}
		a {
			color: inherit;
		}
	}
	&.pxl-grid-nogap {
		.pxl-grid-masonry {
			margin: 0 !important;
			.pxl-grid-item {
				padding: 0 !important;
			}
			.pxl-post--inner {
				margin-bottom: 0;
			}
		}
	}
}

// Grid Loadmore Style
.pxl-load-more {
	.pxl-load-icon {
		width: 20px;
		height: 20px;
		@include border-radius(100%);
		border-color: transparent #fff transparent #fff;
		border-width: 1px;
		border-style: solid;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -10px;
		animation: pxl_spin .6s infinite linear;
        -webkit-animation: pxl_spin .6s infinite linear;
        box-sizing: border-box;
        z-index: 2;
        margin-top: -10px;
        opacity: 0;
	}
	.pxl-loadmore-text {
		@include transition(all 300ms linear 0ms);
	}
	&.loading {
		.pxl-load-icon {
			opacity: 1;
		}
		i {
			opacity: 0.5;
		}
		.pxl-loadmore-text {
			opacity: 0.5;
		}
	}
}

// Grid Filter Style
.pxl-grid-filter {
	.filter-item {
		cursor: pointer;
        @include transition(all 300ms linear 0ms);
        position: relative;
	}
	.pxl--filter-inner {
		display: inline-flex;
		flex-wrap: wrap;
		@media (max-width: 480px) {
			display: contents;
		}
	}
	&.style-1 {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 30px;
		.filter-item {
			font-size: 17px;
			color: #494949;
			font-weight: 400;
			margin: 0;
			margin-right: 22px;
			border: 1px solid #494949;
			@include border-radius(4px);
			padding: 9.4px 22px;
			@media (max-width: 1200px) {
				margin: 5px 10px 5px 0;
			}
			@media (max-width: 1024px) {
				font-size: 15px;
				padding: 8px 18px;
			}
			@media (max-width: 480px) {
				width: 100%;
				margin-right: 0;
			}
			&:last-child {
				margin-right: 0;
			}
			&.active {
				color: #fff;
				background-color: $primary_color;
				border-color: $primary_color;
			}
		}
	}
	&.style-2 {
		margin-bottom: 0;
		font-size: 16px;
		color: #828282;
		font-weight: 500;
		text-align: left;
		text-transform: uppercase;
		@include ft_theme_default($ft_theme_default);
		margin-top: 0;
		line-height: 0.9;
		letter-spacing: 0.7px;
		@media (max-width: 1700px) {
			font-size: 15px;
		}
		@media (max-width: 1280px) {
			font-size: 14px;
		}
		.pxl--filter-inner {
  			@media (max-width: 575px) {
  				display: block;
  			}
			.filter-item {
				margin: 0;
				margin-right: 63px;
				position: relative;
				&:last-child {
					margin-right: 0;
				}
				@media (max-width: 1750px) {
					margin-right: 40px;
				}
				@media (max-width: 1500px) {
					margin-right: 20px;
				}
				@media (max-width: 575px) {
	  				margin-right: 0;
	  				margin-bottom: 0px;
	  				display: block;
	  				&:last-child {
	  					margin-bottom: 0;
	  				}
	  			}
	  			.cat-name {
	  				padding-left: 14px;
	  				position: relative;
	  				&:before {
						content: '';
						position: absolute;
						bottom: 2px;
						left: 0;
						width: 3px;
						height: 11px;
						background-color: $primary_color;
						opacity: 0;
						@include transition(all 0.3s);
					}
	  			}
				&:hover {
					.cat-name {
						&:before {
							opacity: 1;
						}
					}
				}
				&.active {
					color: #fff;
					background-color: unset;
					@media (max-width: 767px) {
						background-color: unset;
					}
					.cat-name {
						&:before {
							opacity: 1;
						}
					}
				}
			}
		}
	}
}

// Start Blog
.title-hover-line a {
	background-repeat: no-repeat;
	background-position-y: -1px;
	background-image: linear-gradient(transparent calc(100% - 1px), $link_color 1px);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	animation: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) pxl-wide-menu-underline forwards;
	&:hover {
		animation: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) pxl-wide-menu-underline-hover forwards;
	}
}
.pxl-blog-style1 {
	.pxl-carousel-inner {
		padding: 0 15px;
  		margin: 0 -15px;
	}
	.pxl-pagination-wrap {
		justify-content: center;
	}
	.pxl-swiper-arrow-wrap {
		margin: 0;
		position: absolute;
		top: 30%;
		left: 50%;
		transform: translate(-50%,-30%);
		justify-content: space-between;
		transition: all .3s;
		width: 105%;
 		z-index: 1;
		@media (max-width: 1250px) {
			position: relative;
			top: unset;
			left: unset;
			transform: unset;
			width: unset;
			justify-content: center;
		}
		.pxl-swiper-arrow {
			@media (max-width: 1250px) {
				margin: 10px;
			}
		}
		.pxl-swiper-arrow-prev {
			position: absolute;
			left: 0;
			@media (max-width: 1250px) {
				position: relative;
			}
		}
		.pxl-swiper-arrow-next {
			position: absolute;
			right: 0;
			@media (max-width: 1250px) {
				position: relative;
			}
		}
	}
	.pxl-post--inner  {
		@include border-radius(0px);
		overflow: hidden;
		margin: 47px 0;
		@include transition(all 200ms linear 0ms);
		position: relative;
		&:hover {
			.pxl-post--featured {
				.pxl-img-link {
					transform: perspective(600px) rotateX(0.06deg) rotateY(0deg) scaleX(1.1) scaleY(1.1);
				}
			}
		}
		.pxl-post--featured {
			position: relative;
			overflow: hidden;
			.pxl-img-link {
				position: relative;
				display: block;
				transition: transform 500ms;
				transform: perspective(0px) rotateX(0deg) rotateY(0deg) scaleX(1) scaleY(1);
				transform-origin: center center;
				background-color: #d9d9d9;
				img {
					mix-blend-mode: luminosity;
				}
			}
			.pxl-item--tags {
				position: absolute;
				top: 20px;
				right: 20px;
				a {
					font-family: Outfit;
					font-size: 16px;
					font-style: normal;
					font-weight: 500;
					text-transform: uppercase;
					color: #fff;
					background-color: $primary_color;
					padding: 3px 8px;
					@media (max-width: 676px) {
						font-size: 14px;
					}
				}
			}
			.pxl-item-video {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				@include transition(all 300ms linear 0ms);
				opacity: 1;
			}
			.post-button-video {
				width: 60px;
				height: 60px;
				@include border-radius(50%);
				display: inline-flex;
				align-items: center;
				position: relative;
				color: $link_color;
				justify-content: center;
                @include transition(all 200ms linear 0ms);
			    background-size: 300% 100%;
			    background-color: #fff;
			    font-size: 13px;
			    @media (max-width: 575px) {
			    	width: 60px;
			    	height: 60px;
			    }
			    &:hover {
			    	color: $primary_color;
			        background-position: 100% 0;
			        @include transition(all .4s ease-in-out);
			    }
                &:before {
		            content: "";
		            position: absolute;
		            z-index: 0;
		            left: 0;
		            top: 0;
		            display: block;
		            width: 100%;
		            height: 100%;
		            background-color: rgba(#fff, 0.63);
		            border-radius: 50%;
		            animation: pxl_pulse_border 1500ms ease-out infinite;
		            -webkit-animation: pxl_pulse_border 1500ms ease-out infinite;
		            z-index: -2;
		            border-radius: inherit;
		        }
			}
		}
		.pxl-post--title {
			font-family: Outfit;
			font-size: 24px;
			font-style: normal;
			font-weight: 500;
			margin-bottom: 34px;
			z-index: 2;
			display: block;
			position: relative;
			letter-spacing: -0.96px;
			margin-top: 21px;
  			line-height: 1.4;
			@media (max-width: 1024px) {
				font-size: 20px;
			}
			@media (max-width: 767px) {
				margin-bottom: 20px;
			}
			a {
				color: $link_color;
				@include transition(all 0.3s);
				.char {
        			transition: transform 0.1s ease, color 0.1s ease;
					transition-delay: calc(var(--char-index) * 0.01s);
        		}
				&:hover {
					.char {
						color: $link_color_hover;
						@include transform(translateY(-10px));
					}
				}
			}
		}
		.pxl-post--meta {
			display: flex;
  			align-items: center;
  			.pxl-item--date {
  				font-family: Outfit;
				font-size: 14px;
				font-style: normal;
				font-weight: 400;
				color: #666;
  			}
  			span {
  				color: #999;
  				font-family: Outfit;
				font-size: 14px;
				font-style: normal;
				font-weight: 400;
				margin: 0 3px;
  			}
  			.pxl-author-meta {
  				a {
  					font-family: Outfit;
					font-size: 14px;
					font-style: normal;
					font-weight: 600;
					color: $link_color;
					&:hover {
						color: $primary_color;
					}
  				}
  			}
		}
	}
}
.pxl-post-carousel1 {
	.pxl-swiper-container {
		margin: 0 -15px;
	}
	.pxl-swiper-slide {
		padding: 0 15px;
	}
	.pxl-swiper-arrow-wrap {
		margin-top: 0;
		position: absolute;
		top: 52%;
		left: 50%;
		transform: translate(-50%,-50%);
		z-index: 1;
		width: 100%;
  		justify-content: space-between;
  		min-width: 1486px;
  		@media (max-width: 1550px) {
  			min-width: 1440px;
  		}
  		@media (max-width: 1470px) {
  			display: none;
  		}
		.pxl-swiper-arrow {
			background-color: $primary_color;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 46px;
			height: 129px;
			position: absolute;
			top: 50%;
			left: 0;
			transform: translate(0%,-50%);
			svg {
				fill: #fff;
				height: 14px;
				width: auto;
				path {
					fill: #fff;
				}
			}
			.hover {
                @include transition(all 200ms linear 0ms);
            }
			&.pxl-swiper-arrow-next {
				right: 0;
				left: unset;
				&:hover {
                    .hover {
                        @include animation(toRightFromLeft .3s linear 1);
                    }
                }
			}
			&.pxl-swiper-arrow-prev {
				svg {
					transform: rotate(-180deg);
				}
				&:hover {
                    .hover {
                        @include animation(toLeftFromRight .3s linear 1);
                    }
                }
			}
		}
	}
	.pxl-post--inner {
		margin: 0;
		@include transition(all 0.3s);
		.pxl-post--featured {
			position: relative;
			overflow: hidden;
			.pxl-item--date {
				text-align: center;
				position: absolute;
				top: 0;
				left: 0;
				background-color: #fff;
				padding: 12px 24px 13px 23px;
				z-index: 1;
				.pxl-item--date1 {
					font-size: 45px;
					font-weight: 500;
					color: $primary_color;
					@include ft_theme_default($ft_theme_default);
					line-height: 1;
					border-bottom: 2px solid #d9d9d9;
					padding-bottom: 4px;
				}
				.pxl-item--date2 {
					font-size: 14px;
					color: $link_color;
					margin-top: 19px;
				}
			}
			.pxl-item--tags {
				position: absolute;
				left: 0;
				bottom: 0;
				display: flex;
  				align-items: center;
  				background-color: $link_color;
  				padding: 13px 35px 13px 20px;
  				clip-path: polygon(96% 0, 100% 25%, 100% 100%, 0 100%, 0 0);
  				.pxl-tag-icon {
  					display: flex;
  					svg {
  						height: 23px;
  						width: auto;
  						line-height: 1;
  						fill: $primary_color;
  					}
  				}
  				.pxl-tag {
  					line-height: 1;
 					padding-bottom: 5px;
  				}
  				a {
  					font-size: 12px;
					letter-spacing: 1.8px;
					text-transform: uppercase;
					color: #c2c2c2;
					position: relative;
					padding-right: 6px;
					margin-right: 5px;
					&:after {
						content: '/';
						position: absolute;
						top: 50%;
						right: 0;
						transform: translate(0,-50%);
						color: #c2c2c2;
					}
					&:last-child {
						padding-right: 0px;
						margin-right: 0px;
						&:after {
							display: none;
						}
					}
					&:hover {
						color: $primary_color;
					}
  				}
			}
		}
		.pxl-img-link {
			display: inline-block;
			background-color: #707070;
			img {
				@include transition(all 0.3s);
				transform: scale(1);
			}
		}
		.pxl-item-content {
			padding-top: 28px;
			overflow: hidden;
			.pxl-post--title {
				font-size: 22px;
				font-weight: 500;
				margin-bottom: 27px;
				padding-bottom: 27px;
				line-height: 1.45;
				border-bottom: 1px solid #d9d9d9;
				position: relative;
				@include transition(all 0.3s);
				@media (max-width: 676px) {
					font-size: 20px;
				}
				&:after {
					content: '';
					position: absolute;
					bottom: -1px;
					right: 0;
					height: 3px;
					width: 86px;
					background-color: $primary_color;
					@include transition(all 0.3s);
					transform: translateX(0%);
				}
				a {
					color: $link_color;
				}
			}
			.pxl-item--excerpt {
				font-size: 16px;
				color: #666666;
				max-width: 95%;
			}
		}
		&:hover {
			.pxl-img-link {
				img {
					transform: scale(1.1);
				}
			}
		}
	}
	
}

// End Blog

// Start Portfolio
.pxl-portfolio-grid-layout1 {
	.pxl-grid-filter {
		&.style-2 {
			margin-bottom: 55px;
			color: $link_color;
			text-align: center;
			@media (max-width: 1199px) {
				margin-bottom: 30px;
			}
			.pxl--filter-inner {
				.filter-item {
  					&.active {
  						color: $link_color;
  					}
  					@media (max-width: 767px) {
  						margin: 15px;
  					}
  				}
			}
		}
	}
	.pxl-load-more {
		margin-top: 54px;
		@media (max-width: 575px) {
			margin-top: 30px;
		}
	}
	.pxl-load-more {
		.btn-grid-loadmore {
			position: relative;
			display: inline-flex;
			align-items: center;
			cursor: pointer;
			&:hover {
				.pxl-arrow {
					svg {
						transform: rotate(0);
					}
				}
			}
			.pxl-loadmore-text {
				font-size: 14px;
				letter-spacing: 0.7px;
				text-transform: uppercase;
				color: $link_color;
				font-weight: 500;
				@include ft_theme_default($ft_theme_default);
				border: 1px solid #d9d9d9;
				line-height: 53px;
				padding: 0 38px;
				@media (max-width: 767px) {
					font-size: 12px;
					padding: 0 27px;
				}
			}
			.pxl-arrow {
				width: 55px;
				min-width: 55px;
				height: 55px;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: $primary_color;
				svg {
					height: 17px;
					width: auto;
					transform: rotate(90deg);
					@include transition(all 0.3s);
					path {
						fill: #fff;
					}
				}
			}
			.pxl-load-icon {
				border-color: transparent $primary_color transparent $primary_color;
			}
		}
	}
	.pxl-grid-item {
		padding: 25px 15px;
	}
	.pxl-post--inner {
		position: relative;
		clip-path: polygon(90% 0, 100% 9%, 100% 100%, 0 100%, 0 0);
		@include transition(all 0.3s);
		&:hover {
			.pxl-post--holder {
				transform: translateY(0);
			}
		}
		.pxl-post--holder {
			position: absolute;
			left: 0;
			bottom: 0;
			padding-right: 71px;
			transform: translateY(57%);
			@include transition(all 0.3s);
			@media (max-width: 1280px) {
				padding-right: 50px;
			}
			@media (max-width: 1199px) {
				padding-right: 30px;
			}
			@media (max-width: 676px) {
				padding-right: 15px;
			}
			.holder-content {
				background-color: $link_color;
				padding: 47px 22px 35px 31px;
				clip-path: polygon(90% 0, 100% 10%, 100% 100%, 0 100%, 0 0);
				@media (max-width: 1199px) {
					padding: 45px 15px 35px 15px;
				}
				@media (max-width: 676px) {
					padding: 45px 15px 15px 15px;
				}
			}
			.pxl-category {
				margin-bottom: 15px;
				.pxl-post--category {
					display: flex;
  					align-items: center;
					&:before {
						display: none;
					}
				}
				a {
					font-size: 12px;
					letter-spacing: 1.8px;
					text-transform: uppercase;
					color: #999999;
					line-height: 1.2;
					cursor: pointer;
					position: relative;
					padding-right: 13px;
  					margin-right: 5px;
  					@media (max-width: 1199px) {
  						font-size: 11px;
  					}
  					@media (max-width: 676px) {
  						padding-right: 7px;
  					}
  					&:hover {
  						color: #fff;
  					}
					&:after {
						content: '/';
						position: absolute;
						top: 50%;
						right: 0;
						transform: translate(0, -50%);
						color: #c2c2c2;
						@media (max-width: 676px) {
	  						display: none;
	  					}
					}
					&:last-child {
						padding-right: 0;
						margin-right: 0;
						&:after {
							display: none;
						}
						@media (max-width: 676px) {
	  						display: none;
	  					}
					}
				}
			}
			.pxl-post--title {
				font-size: 20px;
				color: #fff;
				font-weight: 500;
				@include ft_theme_default($ft_theme_default);
				line-height: 1.45;
				margin-bottom: 17px;
				padding-bottom: 20px;
				position: relative;
				&:before {
					content: '';
					position: absolute;
					bottom: 0;
					left: 0;
					width: 86px;
					height: 2px;
					background-color: $primary_color;
				}
				a {
					font-size: 20px;
					color: #fff;
					font-weight: 500;
					@include ft_theme_default($ft_theme_default);
					line-height: 1.2;
					&:hover {
						color: $primary_color;
					}
				}
			}
			.pxl-item--content {
				color: #c2c2c2;
				margin-bottom: 32px;
				@media (max-width: 1199px) {
					font-size: 15px;
				}
				@media (max-width: 676px) {
					margin-bottom: 15px;
				}
			}
			.pxl-post--icon {
				text-align: right;
			}
			.pxl-item-link {
				display: inline-flex;
				svg {
					height: 42px;
					width: auto;
					path {
						fill: #fff;
					}
				}
				&:hover {
					transform: rotate(45deg);
				}
			}
		}
	}
}

.pxl-portfolio-grid-layout2 {
	.pxl-grid-filter {
		&.style-2 {
			margin-bottom: 55px;
			color: $link_color;
			text-align: center;
			@media (max-width: 1199px) {
				margin-bottom: 30px;
			}
			.pxl--filter-inner {
				.filter-item {
  					&.active {
  						color: $link_color;
  					}
  					@media (max-width: 767px) {
  						margin: 15px;
  					}
  				}
			}
		}
	}
	.pxl-load-more {
		margin-top: 49px;
		@media (max-width: 575px) {
			margin-top: 30px;
		}
	}
	.pxl-load-more {
		.btn-grid-loadmore {
			position: relative;
			display: inline-flex;
			align-items: center;
			cursor: pointer;
			&:hover {
				.pxl-arrow {
					svg {
						transform: rotate(0);
					}
				}
			}
			.pxl-loadmore-text {
				font-size: 14px;
				letter-spacing: 0.7px;
				text-transform: uppercase;
				color: $link_color;
				font-weight: 500;
				@include ft_theme_default($ft_theme_default);
				border: 1px solid #d9d9d9;
				line-height: 53px;
				padding: 0 38px;
				@media (max-width: 767px) {
					font-size: 12px;
					padding: 0 27px;
				}
			}
			.pxl-arrow {
				width: 55px;
				min-width: 55px;
				height: 55px;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: $primary_color;
				svg {
					height: 17px;
					width: auto;
					transform: rotate(90deg);
					@include transition(all 0.3s);
					path {
						fill: #fff;
					}
				}
			}
			.pxl-load-icon {
				border-color: transparent $primary_color transparent $primary_color;
			}
		}
	}
	.pxl-grid-item {
		padding: 30px 15px;
		@media (max-width: 676px) {
			padding: 15px;
		}
	}
	.pxl-post--inner {
		position: relative;
		@include transition(all 0.3s);
		padding-bottom: 60px;
		overflow: hidden;
		&:hover {
			.pxl-post--holder {
				transform: translateY(0);
				.holder-content {
					padding: 47px 35px 61px 42px;
					@media (max-width: 1199px) {
						padding: 32px 30px 61px 30px;
					}
					@media (max-width: 1024px) {
						padding: 40px 30px;
					}
					@media (max-width: 880px) {
						padding: 40px 15px;
					}
					@media (max-width: 480px) {
						padding: 20px 15px;
					}
				}
				.pxl-content-top {
					padding-bottom: 22px;
					@media (max-width: 480px) {
						padding-bottom: 10px;
					}
				}
			}
		}
		.pxl-post--featured {
			clip-path: polygon(92% 0, 100% 11%, 100% 100%, 0 100%, 0 0);
		}
		.pxl-post--holder {
			position: absolute;
			bottom: 0;
			left: 0;
			padding: 0 23px;
			transform: translateY(169px);
			@include transition(all 0.3s);
			@media (max-width: 767px) {
				transform: translateY(0);
				padding: 0 15px;
			}
			.holder-content {
				background-color: $link_color;
				padding: 32px 35px 61px 42px;
				@include transition(all 0.3s);
				@media (max-width: 1199px) {
					padding: 32px 30px 61px 30px;
				}
				@media (max-width: 1024px) {
					padding: 40px 30px;
				}
				@media (max-width: 880px) {
					padding: 40px 15px;
				}
				@media (max-width: 480px) {
					padding: 20px 15px;
				}
			}
			.pxl-content-top {
				margin-bottom: 22px;
				padding-bottom: 37px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;
				@include transition(all 0.3s);
				@media (max-width: 1024px) {
					padding-bottom: 22px;
				}
				@media (max-width: 480px) {
					margin-bottom: 10px;
					padding-bottom: 10px;
				}
				&:before {
					content: '';
					position: absolute;
					bottom: 0;
					left: 0;
					width: 86px;
					height: 2px;
					background-color: $primary_color;
				}
				&:after {
					content: '';
					position: absolute;
					bottom: 0px;
					left: 0;
					width: 100%;
					height: 1px;
					background-color: rgba(#fff, 0.149);
				}
			}
			.pxl-category {
				margin-bottom: 13px;
				.pxl-post--category {
					display: flex;
  					align-items: center;
					&:before {
						display: none;
					}
				}
				a {
					font-size: 12px;
					letter-spacing: 1.8px;
					text-transform: uppercase;
					color: #999999;
					line-height: 1.2;
					cursor: pointer;
					position: relative;
					padding-right: 13px;
  					margin-right: 5px;
  					@media (max-width: 1199px) {
  						font-size: 11px;
  					}
  					@media (max-width: 676px) {
  						padding-right: 7px;
  					}
  					&:hover {
  						color: #fff;
  					}
					&:after {
						content: '/';
						position: absolute;
						top: 50%;
						right: 0;
						transform: translate(0, -50%);
						color: #c2c2c2;
						@media (max-width: 880px) {
	  						display: none;
	  					}
					}
					&:last-child {
						padding-right: 0;
						margin-right: 0;
						&:after {
							display: none;
						}
						@media (max-width: 880px) {
	  						display: none;
	  					}
					}
				}
			}
			.pxl-post--title {
				font-size: 22px;
				color: #fff;
				font-weight: 500;
				@include ft_theme_default($ft_theme_default);
				line-height: 1.45;
				position: relative;
				margin-bottom: 0;
				@media (max-width: 575px) {
					font-size: 20px;
				}
				a {
					font-size: 22px;
					color: #fff;
					font-weight: 500;
					@include ft_theme_default($ft_theme_default);
					line-height: 1.45;
					@media (max-width: 575px) {
						font-size: 20px;
					}
					&:hover {
						color: $primary_color;
					}
				}
			}
			.pxl-item--content {
				color: #c2c2c2;
				@media (max-width: 1024px) {
					font-size: 15px;
				}
			}
			.pxl-post--icon {
				.pxl-item-link {
					display: inline-flex;
					svg {
						height: 35px;
						width: auto;
						path {
							fill: #fff;
						}
					}
					&:hover {
						transform: rotate(45deg);
					}
				}	
			}
		}
	}
}

.pxl-portfolio-grid-layout3 {
	.pxl-grid-filter {
		&.style-2 {
			margin-bottom: 55px;
			color: $link_color;
			text-align: center;
			@media (max-width: 1199px) {
				margin-bottom: 30px;
			}
			.pxl--filter-inner {
				.filter-item {
  					&.active {
  						color: $link_color;
  					}
  					@media (max-width: 767px) {
  						margin: 15px;
  					}
  				}
			}
		}
	}
	.pxl-load-more {
		margin-top: 49px;
		@media (max-width: 575px) {
			margin-top: 30px;
		}
		.btn-grid-loadmore {
			position: relative;
			display: inline-flex;
			align-items: center;
			cursor: pointer;
			&:hover {
				.pxl-arrow {
					svg {
						transform: rotate(0);
					}
				}
			}
			.pxl-loadmore-text {
				font-size: 14px;
				letter-spacing: 0.7px;
				text-transform: uppercase;
				color: $link_color;
				font-weight: 500;
				@include ft_theme_default($ft_theme_default);
				border: 1px solid #d9d9d9;
				line-height: 53px;
				padding: 0 38px;
				@media (max-width: 767px) {
					font-size: 12px;
					padding: 0 27px;
				}
			}
			.pxl-arrow {
				width: 55px;
				min-width: 55px;
				height: 55px;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: $primary_color;
				svg {
					height: 17px;
					width: auto;
					transform: rotate(90deg);
					@include transition(all 0.3s);
					path {
						fill: #fff;
					}
				}
			}
			.pxl-load-icon {
				border-color: transparent $primary_color transparent $primary_color;
			}
		}
	}
	.pxl-grid-item {
		padding: 36px 15px;
		&:nth-child(2) {
			padding-top: 0;
		}
	}
	.pxl-post--inner {
		.pxl-post--featured {
			clip-path: polygon(94% 0, 100% 11%, 100% 100%, 0 100%, 0 0);
		}
		.pxl-post--holder {
			.pxl-content-list {
				display: flex;
  				align-items: center;
  				flex-wrap: wrap;
  				background-color: $link_color;
  				padding: 20px 30px 24px 48px;
  				@media (max-width: 1280px) {
  					padding: 20px 30px;
  				}
  				@media (max-width: 480px) {
  					padding: 18px 15px;
  				}
  				.pxl-item-list {
  					font-size: 15px;
					letter-spacing: 0px;
					color: #c4c4c4;
					position: relative;
					margin-right: 22px;
  					padding-right: 27px;
  					@media (max-width: 1199px) {
  						margin-right: 15px;
  						padding-right: 19px;
  						font-size: 14px;
  					}
					.pxl-item-name {
						color: #fff;
					}
					&.tags {
						font-size: 16px;
						@media (max-width: 1199px) {
							font-size: 14px;
						}
					}
					&:after {
						content: '';
						width: 4px;
						height: 4px;
						background-color: $primary_color;
						position: absolute;
						right: 0;
						top: 50%;
						transform: translate(0,-50%);
					}
					&:last-child {
						&:after {
							display: none;
						}
						margin-right: 0;
						padding-right: 0;
					}
  				}
			}
			.holder-content {
				border: 1px solid #d9d9d9;
				padding: 28px 49px 0 45px;
				@media (max-width: 1280px) {
					padding: 28px 30px 0 30px;
				}
				@media (max-width: 480px) {
					padding: 28px 15px 0 15px;
				}
				.pxl-post--title {
					font-size: 25px;
					font-weight: 500;
					line-height: 1.2;
					margin-bottom: 23px;
					padding-bottom: 27px;
					position: relative;
					@media (max-width: 575px) {
						font-size: 22px;
					}
					&:before {
						content: '';
						position: absolute;
						bottom: 0;
						left: 0;
						width: 86px;
						height: 2px;
						background-color: $primary_color;
						z-index: 1;
					}
					&:after {
						content: '';
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						height: 1px;
						background-color: #d9d9d9;
					}
					a {
						color: $link_color;
						font-size: 25px;
						line-height: 1.2;
						@media (max-width: 575px) {
							font-size: 22px;
						}
						&:hover {
							color: $primary_color;
						}
					}
				}
				.pxl-item--content {
					margin-bottom: 41px;
					@media (max-width: 480px) {
						font-size: 15px;
					}
				}
				.pxl-post--btn {
					text-align: right;
					margin-bottom: -28px;
					.pxl-item-btn {
						display: inline-flex;
						align-items: center;
						justify-content: space-between;
						font-size: 14px;
						letter-spacing: 0.8px;
						text-transform: uppercase;
						font-weight: 500;
						@include ft_theme_default($ft_theme_default);
						background-color: $primary_color;
						color: #fff;
						height: 60px;
						padding: 0 28px 0 36px;
						@media (max-width: 1024px) {
							padding: 0 20px 0 28px;
							font-size: 13px;
							height: 55px;
						}
						&:hover {
							background-color: $link_color;
							.pxl-btn-icon {
								svg {
									transform: rotate(45deg);
								}
							}
						}
						.pxl-btn-title {
							&.pxl-mr-44 {
								@media (max-width: 1024px) {
									margin-right: 30px;
								}
							}
						}
						.pxl-btn-icon {
							line-height: 1;
							svg {
								height: 23px;
								width: auto;
								transform: rotate(0);
								@include transition(all 0.3s);
								path {
									fill: #fff;
								}
							}
						}
					}
				}
			}
		}
	}
}

.btn-hover-divider {
	font-size: 16px;
	font-weight: 700;
	color: #000000;
	position: relative;
	display: inline-flex;
	letter-spacing: 0.3em;
	&:before {
		content: '';
		width: 0;
		position: absolute;
		bottom: 2px;
		height: 1px;
		background-color: #a3a3a3;
		@include transition(width 300ms linear 0ms);
		left: 0;
	}
	&:hover {
		color: #000;
	}
}

.pxl-portfolio-carousel1 {
	.pxl-grid-filter {
		.pxl--filter-inner .filter-item {
			.cat-name {
				display: block;
				@media (max-width: 767px) {
					padding: 0 10px;
				}
				&:before {
					bottom: 0;
				}
			}
		}
	}
    .pxl-carousel-inner {
        display: flex;
        background-color: #edefed;
        @media (max-width: 767px) {
        	display: block;
        }
        .pxl-swiper-arrow-wrap {
            margin-top: 0;
            align-items: inherit;
            @media (max-width: 1200px) {
            	align-items: inherit;
            }
            .pxl-swiper-arrow {
                background-color: $primary_color;
                padding: 119px 27px 114px 27px;
                align-content: center;
                @media (max-width: 1366px) {
                	padding: 123px 27px;
				}
				@media (max-width: 1318px) {
					padding: 125px 27px;
				}
				@media (max-width: 1200px) {
					align-content: center;
				}
				@media (max-width: 767px) {
					padding: 26px 20px 22px 20px;
					width: 50%;
					text-align: center;
				}
				.hover {
					overflow: hidden;
					display: inline-flex;
				}
                svg {
                    height: 20px;
                    width: auto;
                    @media (max-width: 767px) {
                    	height: 18px;
                    }
                    path {
                        fill: #fff;
                    }
                }
                .hover {
                    @include transition(all 300ms linear 0ms);
                }
                &.pxl-swiper-arrow-next {
                    margin-bottom: 3px;
                    @media (max-width: 767px) {
                    	order: 2;
                    	margin-bottom: 0;
                    	border-left: 1px solid rgba(#fff, 0.3);
                    }
                    &:hover {
                        .hover {
                            @include animation(toRightFromLeft .3s linear 1);
                        }
                    }
                }
                &.pxl-swiper-arrow-prev {
                    svg {
                        transform: rotate(-180deg);
                    }
                    &:hover {
                        .hover {
                            @include animation(toLeftFromRight .3s linear 1);
                        }
                    }
                }
            }
        }
    }
	.pxl-swiper-slide {
		padding: 0;
	}
	.pxl-swiper-container {
		margin: 0;
	}
	.pxl-swiper-wrapper {
		align-items: center;
	}
	.pxl-inner-top {
		margin-bottom: 49px;
		@media (max-width: 1024px) {
			margin-bottom: 40px;
		}
		@media (max-width: 767px) {
			margin-bottom: 0;
		}
		.swiper-filter {
			width: 67,99%;
			@media (max-width: 1200px) {
  				width: 100%;
  			}
  			.pxl-grid-filter {
  				&.style-2 {
  					padding-left: 160px;
  					@media (max-width: 1366px) {
  						padding-left: 52px;
  					}
  					@media (max-width: 1200px) {
  						padding-left: 15px;
  					}
  					@media (max-width: 767px) {
  						padding: 0 15px;
  					}
  					.pxl--filter-inner {
		  				@media (max-width: 767px) {
		  					display: block;
		  				}
		  				.filter-item {
		  					@media (max-width: 767px) {
			  					display: inline-block;
								width: 100%;
								text-align: center;
								border-bottom: 1px solid rgba(#fff, 0.149);
								padding: 20px 15px;
								margin-right: 0;
			  				}
		  				}
		  			}
  				}
  			}
		}
	}
	.pxl-post--inner {
		position: relative;
		display: flex;
		@media (max-width: 1200px) {
			display: block;
			padding: 30px 30px 0 30px;
		}
		@media (max-width: 767px) {
			padding: 30px 15px 0 15px;
		}
		.pxl-content-meta {
			width: 39.1%;
			align-content: end;
			@media (max-width: 1200px) {
				width: 100%;
				margin-bottom: 30px;
			}
		}
		.pxl-post--holder {
			padding: 38px 45px 0 85px;
			@media (max-width: 1750px) {
				padding: 38px 45px 0 60px;
			}
			@media (max-width: 1550px) {
				padding: 38px 45px 0 40px;
			}
			@media (max-width: 1450px) {
				padding: 37px 30px 0 40px;
			}
			@media (max-width: 1200px) {
				padding: 0;
			}
		}
		.pxl-btn-icon {
			text-align: right;
			margin-bottom: 27px;
			@media (max-width: 1318px) {
				margin-bottom: 0;
			}
			.btn-icon {
				display: inline-block;
				svg {
					height: 60px;
					width: auto;
					fill: rgba(#0d0d0d, 0.129);
					transform: rotate(0);
					@include transition(all 0.3s);
					path {
						fill: rgba(#0d0d0d, 0.129);
						@include transition(all 0.3s);
					}
				}
				&:hover {
					svg {
						transform: rotate(45deg);
						path {
							fill: $primary_color;
						}
					}
				}
			}
		}
		.pxl-post--title {
			margin-bottom: 22px;
			@media (max-width: 1318px) {
				line-height: 1;
			}
			a {
				color: #000;
				font-size: 25px;
				font-weight: 500;
				@include ft_theme_default($ft_theme_default);
				line-height: 1.3;
				@media (max-width: 1318px) {
					line-height: 1;
				}
			}
		}
		.pxl-post--content {
			font-size: 16px;
			color: #666666;
			line-height: 1.62;
			max-width: 90%;
			padding-left: 1px;
			@media (max-width: 1650px) {
				max-width: 100%;
  				padding-left: 0;
			}
		}
		.pxl-content-list {
			margin-top: 25px;
			margin-bottom: 72px;
			@media (max-width: 1460px) {
				margin-bottom: 49px;
			}
			.pxl-item-list {
				font-size: 16px;
				color: #000000;
				position: relative;
				padding-left: 18px;
  				margin-bottom: 7px;
  				&:last-child {
  					margin-bottom: 0;
  				}
				&:before {
					content: '';
					position: absolute;
					top: 50%;
					left: 0;
					width: 4px;
					height: 4px;
					transform: translate(0,-50%);
					background-color: $primary_color;
				}
			}
		}
		.pxl-post--category {
			line-height: 56px;
			display: inline-flex;
			align-items: center;
			background-color: $link_color;
			padding: 0 37px;
			a {
				position: relative;
				padding-right: 11px;
  				margin-right: 7px;
  				color: #cdcdcd;
  				font-size: 12px;
  				text-transform: uppercase;
  				&:hover {
  					color: $primary_color;
  					&:after {
  						color: #cdcdcd;
  					}
  				}
				&:after {
					content: '/';
					position: absolute;
					right: 0;
					top: 50%;
					color: #cdcdcd;
					transform: translate(0,-50%);
					font-size: 12px;
				}
				&:last-child {
					padding-right: 0;
  					margin-right: 0;
					&:after {
						display: none;
					}
				}
			}
		}
		.pxl-item--image {
			width: 60.9%;
			position: relative;
			@include transition(all 0.3s);
			overflow: hidden;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			@media (max-width: 1200px) {
				width: 100%;
			}
			img {
				@include transition(all 0.3s);
				opacity: 0;
				@media (max-width: 575px) {
					width: 100%;
				}
			}
		}
		
	}
}

.pxl-portfolio-carousel2 {
	display: flex;
	@media (max-width: 1200px) {
		display: block;
	}
	.pxl-swiper-slide {
		padding: 0;
	}
	.pxl-swiper-container {
		margin: 0;
	}
	.pxl-inner-top {
		width: 19.9%;
		align-content: center;
  		padding-left: 85px;
  		padding-right: 30px;
  		@media (max-width: 1366px) {
  			padding: 0 15px;
  		}
  		@media (max-width: 1200px) {
			width: 100%;
			border-top: 1px solid rgba(#fff, 0.3);
		}
		.pxl-grid-filter {
			font-size: 16px;
			text-transform: uppercase;
			font-weight: 500;
			.pxl--filter-inner {
				display: block;
				@media (max-width: 1200px) {
					text-align: center;
  					margin: 30px 0;
				}
				.filter-item {
					width: 100%;
					margin-right: 0;
					display: block;
					margin-bottom: 41px;
					&:last-child {
						margin-bottom: 0;
					}
					.cat-name {
						&:before {
							bottom: 4px;
						}
					}
				}
			}
		}
	}
	.pxl-carousel-inner {
		position: relative;
		width: 80.1%;
		display: flex;
        background-color: #edefed;
        @media (max-width: 1200px) {
			width: 100%;
		}
        @media (max-width: 1200px) {
        	display: block;
        }
        .pxl-swiper-arrow-wrap {
            margin-top: 0;
            align-items: inherit;
            background-color: $link_color;
            @media (max-width: 1200px) {
            	padding: 30px 0;
            }
            .pxl-swiper-arrow {
                background-color: $primary_color;
                padding: 70px 27px;
                align-content: center;
                @media (max-width: 1200px) {
                	padding: 0;
                	display: inline-flex;
                	align-items: center;
                	justify-content: center;
                	width: 50px;
                	height: 50px;
                }
				.hover {
					overflow: hidden;
					display: inline-flex;
				}
                svg {
                    height: 20px;
                    width: auto;
                    @media (max-width: 1200px) {
                    	height: 18px;
                    }
                    path {
                        fill: #fff;
                    }
                }
                .hover {
                    @include transition(all 300ms linear 0ms);
                }
                &.pxl-swiper-arrow-next {
                    margin-bottom: 3px;
                    @media (max-width: 1200px) {
                    	order: 2;
                    	margin-bottom: 0;
                    	border-left: 1px solid rgba(#fff, 0.3);
                    }
                    &:hover {
                        .hover {
                            @include animation(toRightFromLeft .3s linear 1);
                        }
                    }
                }
                &.pxl-swiper-arrow-prev {
                    svg {
                        transform: rotate(-180deg);
                    }
                    &:hover {
                        .hover {
                            @include animation(toLeftFromRight .3s linear 1);
                        }
                    }
                }
            }
        }
        .pxl-post--inner {
        	@include transition(all 0.3s);
        	overflow: hidden;
        	&:hover {
        		.pxl-content-meta {
        			transform: translateY(0px);
        			opacity: 1;
        			transform: translate(0,-50%);
        		}
        	}
        	.pxl-content-meta {
				position: absolute;
				top: 0;
				left: 0;
				padding: 0 41px;
				z-index: 1;
				opacity: 0;
				top: 50%;
				transform: translate(0,-45%);
				@include transition(all 0.3s);
				@media (max-width: 1700px) {
					padding: 15px;
				}
				.pxl-post--holder {
					background-color: #fff;
					padding: 56px 37px 33px 37px;
					clip-path: polygon(0 0, 100% 0, 100% 100%, 9% 100%, 0 93%);
					@media (max-width: 1700px) {
						padding: 30px;
					}
				}
			}
			.pxl-item--image {
				position: relative;
				background-repeat: no-repeat;
  				background-size: cover;
				&:before {
					content: '';
					position: absolute;
					width: 100%;
					height: 100%;
					background-color: rgba(#000, 0.09);
					top: 0;
					left: 0;
				}
				img {
					opacity: 0;
				}
			}
			.pxl-post--category {
				margin-bottom: 26px;
				display: flex;
	  			align-items: center;
	  			overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 1;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                @media (max-width: 767px) {
                	margin-bottom: 15px;
                }
				a {
					font-size: 12px;
					letter-spacing: 2px;
					text-transform: uppercase;
					color: #666666;
					line-height: 1.1;
					position: relative;
					padding-right: 10px;
					margin-right: 6px;
					&:hover {
						color: $primary_color;
					}
					&:after {
						content: '/';
						position: absolute;
						right: 0;
						top: 50%;
						color: #666666;
						transform: translate(0,-50%);
						font-size: 12px;
					}
					&:last-child {
						padding-right: 0;
	  					margin-right: 0;
						&:after {
							display: none;
						}
					}
				}
			}
			.pxl-post--title {
				position: relative;
				line-height: 0.7;
				border-bottom: 1px solid #d9d9d9;
				margin-bottom: 28px;
	  			padding-bottom: 33px;
	  			@media (max-width: 767px) {
                	margin-bottom: 15px;
  					padding-bottom: 20px;
                }
				&:before {
					content: '';
					position: absolute;
					bottom: -1px;
					left: 0;
					background-color: $primary_color;
					width: 86px;
					height: 3px;
				}
				a {
					font-size: 22px;
					color: #000;
					font-weight: 500;
					@include ft_theme_default($ft_theme_default);
					&:hover {
						color: $primary_color;
					}
				}
			}
			.pxl-post--content {
				font-size: 16px;
				color: #666666;
				padding-left: 2px;
	  			max-width: 93%;
			}
			.pxl-meta-top {
				margin-bottom: 106px;
				@media (max-width: 1700px) {
					margin-bottom: 50px;
				}
				@media (max-width: 991px) {
					margin-bottom: 30px;
				}
				@media (max-width: 767px) {
                	margin-bottom: 20px;
                }
			}
			.pxl-btn-icon {
				text-align: right;
				margin-right: -2px;
				.btn-icon {
					display: inline-flex;
					align-items: center;
					line-height: 55px;
					font-size: 14px;
					letter-spacing: 1px;
					text-transform: uppercase;
					color: #000000;
					font-weight: 500;
					@include ft_theme_default($ft_theme_default);
					z-index: 1;
  					position: relative;
  					@media (max-width: 767px) {
  						line-height: 45px;
  					}
					&:hover {
						color: #fff;
						.pxl--btn-text {
							&:before {
								width: 100%;
								opacity: 1;
							}
						}
						.pxl-btn-icon {
							svg {
								transform: rotate(45deg);
							}
						}
					}
					.pxl--btn-text {
						border: 1px solid #d9d9d9;
						padding: 0 38px;
						line-height: 53px;
						position: relative;
						@include transition(all 0.3s);
						@media (max-width: 767px) {
	  						padding: 0 30px;
  							line-height: 45px;
	  					}
						&:before {
							content: '';
							width: 0;
							height: 100%;
							position: absolute;
							top: 0;
							left: 0;
							background-color: $primary_color;
							@include transition(all 0.3s);
							opacity: 0;
							z-index: -1;
						}
					}
					.pxl-btn-icon {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 55px;
						height: 55px;
						min-width: 55px;
						background-color: $primary_color;
						@media (max-width: 767px) {
	  						width: 45px;
							height: 45px;
							min-width: 45px;
	  					}
						svg {
							height: 21px;
							width: auto;
							line-height: 1;
							@include transition(all 0.3s);
							transform: rotate(0);
							path {
								fill: #fff;
							}
						}
					}
				}
			}
        }
	}
}

.pxl-portfolio-carousel3 {
	display: flex;
	border: 1px solid #d9d9d9;
	border-top: none;
	@media (max-width: 1024px) {
		display: block;
	}
	.pxl-swiper-arrow-wrap {
        margin: 0;
        margin-left: 88px;
        margin-top: 25px;
        align-items: inherit;
        @media (max-width: 1600px) {
        	margin-left: 50px;
        }
        @media (max-width: 1199px) {
        	margin: 0;
        	margin-bottom: 10px;
        }
        @media (max-width: 767px) {
        	margin-bottom: 30px;
        }
        .pxl-swiper-arrow {
            background-color: $primary_color;
            padding: 62px 22px;
            margin: 5px 0;
            align-content: center;
            @media (max-width: 1199px) {
            	padding: 15px 50px;
            	margin: 0 5px;
            }
			.hover {
				overflow: hidden;
				display: inline-flex;
			}
            svg {
                height: 20px;
                width: auto;
                @media (max-width: 1199px) {
                	height: 18px;
                }
                path {
                    fill: #fff;
                }
            }
            .hover {
                @include transition(all 300ms linear 0ms);
            }
            &:hover {
            	background-color: $link_color;
            }
            &.pxl-swiper-arrow-next {
                @media (max-width: 767px) {
                	order: 2;
                	margin-bottom: 0;
                	border-left: 1px solid rgba(#fff, 0.3);
                }
                .hover {
                	transform: rotate(90deg);
                }
            }
            &.pxl-swiper-arrow-prev {
                .hover {
                	transform: rotate(-90deg);
                }
            }
        }
    }
    .pxl-swiper-slide {
    	height: 521px !important;
    	transition-property: transform;
    	transform: translateZ(0);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		padding: 20px 15px;
		overflow: hidden;
		@media (max-width: 767px) {
			height: 440px !important;
		}
    }
    .pxl-swiper-wrapper {
    	height: 783px;
		transform: translate3d(0px,0px, 0px);
		flex-direction: column;
		transition-property: transform;
		box-sizing: content-box;
		transition-timing-function: var(--swiper-wrapper-transition-timing-function,initial);
		@media (max-width: 767px) {
			
		}
    }
    .pxl-inner-top {
    	border-right: 1px solid #d9d9d9;
    	height: auto;
    	width: 32.2%;
    	padding: 133px 0 50px 239px;
    	@media (max-width: 1600px) {
    		padding: 130px 0 50px 100px;
    	}
    	@media (max-width: 1400px) {
    		padding: 70px 0 50px 50px;
    	}
    	@media (max-width: 1366px) {
  			width: 25%;
  			padding: 70px 0 50px 30px;
  		}
  		@media (max-width: 1199px) {
  			padding: 70px 0 50px 15px;
  		}
  		@media (max-width: 1024px) {
			width: 100%;
			border-right: none;
			border-bottom: 1px solid #d9d9d9;
		}
    	.pxl-heading {
    		margin-bottom: 299px;
    		@media (max-width: 1400px) {
	    		margin-bottom: 200px;
	    	}
	    	@media (max-width: 1024px) {
	    		margin-bottom: 70px;
	    	}
    		.title-box {
    			font-size: 15px;
				letter-spacing: 0.7px;
				text-transform: uppercase;
				color: #666666;
				font-weight: 500;
				line-height: 1.2;
				position: relative;
				padding-left: 16px;
				margin-bottom: 0;
				&:before {
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					transform: translate(0,-50%);
					width: 4px;
					height: 14px;
					background-color: $primary_color;
				}
    		}
    	}
    	.pxl-grid-filter {
			font-size: 18px;
			text-transform: uppercase;
			font-weight: 500;
			color: #999999;
			letter-spacing: 0px;
			@include ft_theme_default($ft_theme_default);
			@media (max-width: 1280px) {
				font-size: 15px;
			}
			.pxl--filter-inner {
				display: block;
				.filter-item {
					width: 100%;
					margin-right: 0;
					display: block;
					margin-bottom: 64px;
					position: relative;
					&:after {
						content: '';
						position: absolute;
						height: 1px;
						width: 0;
						right: 0;
						top: 50%;
						transform: translate(0,-50%);
						background-color: #d9d9d9;
						@include transition(all 0.3s);
					}
					&:last-child {
						margin-bottom: 0;
					}
					&:hover {
						&:after {
							width: 49%;
						}
					}
					&.active {
						color: $link_color;
						&:after {
							width: 49%;
						}
					}
					.cat-name {
						padding: 0;
						padding-bottom: 12px;
						&:before {
							bottom: 0px;
							width: 100%;
							height: 3px;
						}
					}
				}
			}
		}
    }
    .pxl-carousel-inner {
    	width: 67.8%;
    	display: flex;
  		align-items: center;
  		padding: 115px 87px 0 80px;
  		@media (max-width: 1366px) {
  			width: 75%;
  		}
  		@media (max-width: 1600px) {
  			padding: 115px 50px 0 50px;
  		}
  		@media (max-width: 1400px) {
  			padding: 50px 15px 0 15px;
  		}
  		@media (max-width: 1199px) {
  			display: inline-grid;
  		}
  		@media (max-width: 1024px) {
			width: 100%;
		}
  		.pxl-swiper-container {
  			@media (max-width: 1199px) {
  				order: 2;
  			}
  		}
    }
    .pxl-post--inner {
    	height: 100%;
    	background-color: #edefed;
    	clip-path: polygon(93% 0, 100% 12%, 100% 100%, 0 100%, 0 0);
    	@include transition(all 0.3s);
    	&:hover {
    		.pxl-item--image {
    			img {
    				transform: scale(1.1);
    			}
    		}
    	}
    	.pxl-content-meta {
    		height: 100%;
    		position: relative;
  			display: flex;
    	}
    	.pxl-item--image {
    		height: 100%;
    		width: 61.4%;
    		clip-path: polygon(63% 0, 63% 74%, 94% 74%, 100% 81%, 100% 100%, 0 100%, 0 0);
    		@media (max-width: 767px) {
    			width: 50%;
    		}
    		@media (max-width: 575px) {
    			display: none;
    		}
    		img {
    			height: 100%;
    			transform: scale(1);
    			@include transition(all 0.3s);
    		}
    	}
    	.pxl-post--holder {
    		width: 38.6%;
    		@media (max-width: 767px) {
    			width: 50%;
    		}
    		@media (max-width: 575px) {
    			width: 100%;
    			padding: 40px 30px;
    		}
    		@media (max-width: 360px) {
    			padding: 40px 15px;
    		}
    		.pxl-meta-top {
    			margin-left: -143px;
    			padding-top: 77px;
    			@media (max-width: 1199px) {
    				padding-top: 50px;
					padding-left: 20px;
    			}
    			@media (max-width: 767px) {
	    			padding-left: 55px;
	    		}
	    		@media (max-width: 575px) {
	    			margin-left: 0;
	    			padding-left: 0;
	    			padding-top: 0;
	    		}
    		}
    	}
    	.pxl-post--category {
			margin-bottom: 14px;
			display: flex;
  			align-items: center;
			a {
				font-size: 12px;
				letter-spacing: 2px;
				text-transform: uppercase;
				color: #666666;
				line-height: 1.1;
				position: relative;
				padding-right: 10px;
				margin-right: 6px;
				&:hover {
					color: $primary_color;
				}
				@media (max-width: 575px) {
					font-size: 11px;
				}
				&:after {
					content: '/';
					position: absolute;
					right: 0;
					top: 50%;
					color: #666666;
					transform: translate(0,-50%);
					font-size: 12px;
				}
				&:last-child {
					padding-right: 0;
  					margin-right: 0;
					&:after {
						display: none;
					}
				}
			}
		}
		.pxl-post--title {
			position: relative;
			line-height: 0.7;
			margin-bottom: 21px;
			padding-bottom: 31px;
			@media (max-width: 575px) {
				margin-bottom: 15px;
				padding-bottom: 15px;
			}
			&:before {
				content: '';
				position: absolute;
				bottom: -1px;
				left: 0;
				background-color: $primary_color;
				width: 86px;
				height: 3px;
			}
			a {
				font-size: 26px;
				color: $link_color;
				font-weight: 500;
				@include ft_theme_default($ft_theme_default);
				&:hover {
					color: $primary_color;
				}
			}
		}
		.pxl-post--content {
			font-size: 16px;
			color: #666666;
			padding-left: 2px;
  			max-width: 93%;
  			@media (max-width: 1366px) {
  				max-width: 98%;
  			}
		}
		.pxl-btn {
			text-align: right;
			padding-right: 60px;
 			margin-top: 129px;
 			@media (max-width: 1600px) {
 				padding-right: 30px;
 				margin-top: 100px;
 			}
 			@media (max-width: 767px) {
 				margin-top: 50px;
 			}
 			@media (max-width: 575px) {
 				padding-right: 0;
 			}
 			@media (max-width: 480px) {
 				margin-top: 30px;
 			}
			.btn-icon {
				display: inline-flex;
				align-items: center;
				line-height: 55px;
				font-size: 14px;
				letter-spacing: 1px;
				text-transform: uppercase;
				color: #000000;
				font-weight: 500;
				@include ft_theme_default($ft_theme_default);
				z-index: 1;
					position: relative;
				&:hover {
					color: #fff;
					.pxl--btn-text {
						&:before {
							width: 100%;
							opacity: 1;
						}
						&:after {
							opacity: 0;
						}
					}
					.pxl-btn-icon {
						svg {
							transform: rotate(45deg);
						}
					}
				}
				.pxl--btn-text {
					border: 1px solid #d9d9d9;
					padding: 0 38px;
					line-height: 53px;
					position: relative;
					@include transition(all 0.3s);
					&:before {
						content: '';
						width: 0;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
						background-color: $primary_color;
						@include transition(all 0.3s);
						opacity: 0;
						z-index: -1;
					}
					&:after {
						content: '';
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
						background-color: #fff;
						@include transition(all 0.3s);
						opacity: 1;
						z-index: -1;
					}
				}
				.pxl-btn-icon {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 55px;
					height: 55px;
					min-width: 55px;
					background-color: $primary_color;
					svg {
						height: 21px;
						width: auto;
						line-height: 1;
						@include transition(all 0.3s);
						transform: rotate(0);
						path {
							fill: #fff;
						}
					}
				}
			}
		}
    }
}

.pxl-portfolio-carousel4 {
	display: flex;
	border: 1px solid #d9d9d9;
	@media (max-width: 1199px) {
		display: block;
	}
	.pxl-inner-top {
		width: 19%;
  		border-right: 1px solid #d9d9d9;
  		@media (max-width: 1199px) {
            width: 100%;
            border-bottom: 1px solid #d9d9d9;
            border-right: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        @media (max-width: 767px) {
        	justify-content: space-between;
        }
        @media (max-width: 480px) {
        	display: block;
        }
  		.swiper-filter {
			padding: 77px 30px 79px 58px;
			@media (max-width: 1280px) {
				padding: 60px 15px;
			}
		}
		.pxl-grid-filter {
			font-size: 16px;
			text-transform: uppercase;
			font-weight: 500;
			.pxl--filter-inner {
				display: block;
				.filter-item {
					width: 100%;
					margin-right: 0;
					display: block;
					margin-bottom: 30.5px;
					color: #c6c6c6;
					&:last-child {
						margin-bottom: 0;
					}
					.cat-name {
						&:before {
							bottom: 4px;
						}
					}
					&.active, &:hover {
						color: $link_color;
					}
				}
			}
		}
		.pxl-item-btn {
			padding: 0 30px;
			@media (max-width: 1280px) {
				padding: 0 15px;
			}
			.pxl-button-link {
				background-color: $primary_color;
				font-size: 16px;
				text-transform: uppercase;
				font-weight: 500;
				color: #fff;
				display: block;
				padding: 25px 18px 28px 34px;
				@media (max-width: 1280px) {
					padding: 25px 15px;
				}
				@media (max-width: 1199px) {
					display: inline-block;
				}
				&:hover {
					background-color: $link_color;
					svg {
						transform: rotate(45deg);
					}
				}
				.pxl-btn-icon {
					line-height: 1;
  					display: block;
  					text-align: right;
  					margin-bottom: 56px;
  					@media (max-width: 1280px) {
						margin-bottom: 30px;
					}
				}
				svg {
					height: 40px;
					width: auto;
					@include transition(all 0.3s);
					path {
						fill: #fff;
					}
				}
			}
		}
	}
	.pxl-carousel-inner {
        display: flex;
        width: 81%;
        position: relative;
        @media (max-width: 1199px) {
            width: 100%;
        }
        @media (max-width: 991px) {
        	display: block;
        }
        .pxl-swiper-arrow-wrap {
            margin-top: 0;
            align-items: inherit;
            z-index: 2;
            .pxl-swiper-arrow {
                background-color: $primary_color;
                padding: 50px 26px 50px 27px;
                align-content: center;
				@media (max-width: 1200px) {
					align-content: center;
				}
				@media (max-width: 991px) {
					padding: 26px 20px 22px 20px;
					width: 50%;
					text-align: center;
				}
				.hover {
					overflow: hidden;
					display: inline-flex;
				}
                svg {
                    height: 20px;
                    width: auto;
                    @media (max-width: 991px) {
                    	height: 18px;
                    }
                    path {
                        fill: #fff;
                    }
                }
                .hover {
                    @include transition(all 300ms linear 0ms);
                }
                &.pxl-swiper-arrow-next {
                    margin-bottom: 3px;
                    @media (max-width: 991px) {
                    	order: 2;
                    	margin-bottom: 0;
                    	border-left: 1px solid rgba(#fff, 0.3);
                    }
                    &:hover {
                        .hover {
                            @include animation(toRightFromLeft .3s linear 1);
                        }
                    }
                }
                &.pxl-swiper-arrow-prev {
                    svg {
                        transform: rotate(-180deg);
                    }
                    &:hover {
                        .hover {
                            @include animation(toLeftFromRight .3s linear 1);
                        }
                    }
                }
            }
        }
    }
    .pxl-post--inner {
    	padding: 80px 30px 40px 86px;
    	@media (max-width: 1280px) {
    		padding: 50px 30px 40px 30px;
    	}
    	@media (max-width: 1024px) {
    		padding: 50px 15px;
    	}

    	.pxl-content-meta {
    		display: flex;
    		@media (max-width: 767px) {
    			display: block;
    		}
    		.pxl-item--image {
    			min-width: 442px;
    			@media (max-width: 1280px) {
		    		min-width: 400px;
		    	}
		    	@media (max-width: 480px) {
		    		min-width: 290px;
		    	}
    			img {
    				@include border-radius(50%);
    			}
    		}
    		.pxl-post--holder {
    			padding: 38px 30px 79px 82px;
    			@media (max-width: 1280px) {
		    		padding: 20px 15px 50px 30px;
		    	}
		    	@media (max-width: 1024px) {
		    		padding: 0 30px;
		    	}
		    	@media (max-width: 767px) {
		    		padding: 30px 0;
		    		padding-bottom: 0;
		    	}
    			.pxl-post--category {
					display: inline-flex;
					align-items: center;
					margin-bottom: 15px;
					a {
						position: relative;
						padding-right: 11px;
		  				margin-right: 7px;
		  				color: #666666;
		  				font-size: 12px;
		  				text-transform: uppercase;
		  				letter-spacing: 2px;
		  				&:hover {
		  					color: $primary_color;
		  					&:after {
		  						color: #666666;
		  					}
		  				}
						&:after {
							content: '/';
							position: absolute;
							right: 0;
							top: 50%;
							color: #666666;
							transform: translate(0,-50%);
							font-size: 12px;
						}
						&:last-child {
							padding-right: 0;
		  					margin-right: 0;
							&:after {
								display: none;
							}
						}
					}
				}
				.pxl-post--title {
					font-size: 26px;
					text-transform: uppercase;
					font-weight: 500;
					line-height: 1.3;
					margin-bottom: 25px;
					a {
						color: $link_color;
						&:hover {
							color: $primary_color;
						}
					}
				}
				.pxl-post--content {
					max-width: 81%;
					@media (max-width: 991px) {
						max-width: 100%;
					}
				}
				.pxl-content-list {
					margin-top: 25px;
					margin-bottom: 46px;
					@media (max-width: 1460px) {
						margin-bottom: 30px;
					}
					.pxl-item-list {
						font-size: 16px;
						color: #000000;
						position: relative;
						padding-left: 18px;
		  				margin-bottom: 7px;
		  				&:last-child {
		  					margin-bottom: 0;
		  				}
						&:before {
							content: '';
							position: absolute;
							top: 50%;
							left: 0;
							width: 4px;
							height: 4px;
							transform: translate(0,-50%);
							background-color: $primary_color;
						}
					}
				}
				.pxl-btn-portfolio {
					.btn-icon {
						display: flex;
  						align-items: center;
  						font-size: 14px;
  						text-transform: uppercase;
  						font-weight: 500;
  						color: $link_color;
  						letter-spacing: 0.7px;
  						@include ft_theme_default($ft_theme_default);
  						&:hover {
  							svg {
  								transform: rotate(45deg);
  							}
  						}
  						.pxl-btn-icon {
  							line-height: 0;
  						}
						svg {
							height: 25px;
							width: auto;
							@include transition(all 0.3s);
							transform: rotate(0);
							path {
								fill: $primary_color;
							}
						}
					}
				}
			}
    	}
    }
}

.pxl-portfolio-carousel5 {
	.pxl-swiper-arrow-wrap {
        margin-top: 0;
        align-items: inherit;
        z-index: 2;
        .pxl-swiper-arrow {
            background-color: $primary_color;
            padding: 50px 26px 50px 27px;
            align-content: center;
			@media (max-width: 1200px) {
				align-content: center;
			}
			@media (max-width: 991px) {
				padding: 26px 20px 22px 20px;
				width: 50%;
				text-align: center;
			}
			.hover {
				overflow: hidden;
				display: inline-flex;
			}
            svg {
                height: 20px;
                width: auto;
                @media (max-width: 991px) {
                	height: 18px;
                }
                path {
                    fill: #fff;
                }
            }
            .hover {
                @include transition(all 300ms linear 0ms);
            }
            &.pxl-swiper-arrow-next {
                margin-bottom: 3px;
                @media (max-width: 991px) {
                	order: 2;
                	margin-bottom: 0;
                	border-left: 1px solid rgba(#fff, 0.3);
                }
                &:hover {
                    .hover {
                        @include animation(toRightFromLeft .3s linear 1);
                    }
                }
            }
            &.pxl-swiper-arrow-prev {
                svg {
                    transform: rotate(-180deg);
                }
                &:hover {
                    .hover {
                        @include animation(toLeftFromRight .3s linear 1);
                    }
                }
            }
        }
    }
    .pxl-post--inner {
    	.pxl-content-meta {
    		display: flex;
			flex-direction: row;
			gap: 52px;
			@media (max-width: 1200px) {
				gap: 30px;
			}
			@media (max-width: 880px) {
				flex-direction: column;
			}
			.pxl-item--image {
				width: 50%;
				@media (max-width: 1024px) {
					width: 70%;
				}
				@media (max-width: 880px) {
					width: 100%;
				}
			}
			.pxl-post--holder {
				width: 47%;
				border-top: 1px solid #d9d9d9;
				padding-top: 47px;
				@media (max-width: 991px) {
					padding-top: 30px;
				}
				@media (max-width: 880px) {
					width: 100%;
				}
				.pxl-post--category {
					line-height: 42px;
					display: inline-flex;
					align-items: center;
					background-color: $link_color;
					padding: 0 36px;
					margin-bottom: 74px;
					@media (max-width: 1024px) {
						margin-bottom: 30px;
					}
					a {
						position: relative;
						padding-right: 11px;
		  				margin-right: 7px;
		  				color: #cdcdcd;
		  				font-size: 12px;
		  				text-transform: uppercase;
		  				&:hover {
		  					color: $primary_color;
		  					&:after {
		  						color: #cdcdcd;
		  					}
		  				}
						&:after {
							content: '/';
							position: absolute;
							right: 0;
							top: 50%;
							color: #cdcdcd;
							transform: translate(0,-50%);
							font-size: 12px;
						}
						&:last-child {
							padding-right: 0;
		  					margin-right: 0;
							&:after {
								display: none;
							}
						}
					}
				}
				.pxl-post--title {
					font-size: 30px;
					font-weight: 500;
					line-height: 1.32;
					margin-bottom: 19px;
				}
				.pxl-post--content {
					max-width: 60%;
					@media (max-width: 1200px) {
						max-width: 100%;
					}
				}
				.pxl-content-list {
					margin-top: 25px;
					margin-bottom: 54px;
					@media (max-width: 1460px) {
						margin-bottom: 49px;
					}
					.pxl-item-list {
						font-size: 16px;
						color: #000000;
						position: relative;
						padding-left: 18px;
		  				margin-bottom: 7px;
		  				&:last-child {
		  					margin-bottom: 0;
		  				}
						&:before {
							content: '';
							position: absolute;
							top: 50%;
							left: 0;
							width: 4px;
							height: 4px;
							transform: translate(0,-50%);
							background-color: $primary_color;
						}
					}
				}
				.pxl-btn-portfolio {
					.btn {
						display: inline-flex;
						gap: 6px;
						.pxl-btn-icon {
							margin: 0;
						}
						.pxl--btn-text {
							width: unset;
							padding: 0 38px;
						}
					}
				}
			}
    	}
    }
}
// End Portfolio

// Start Service
.pxl-service-grid {
	&.pxl-service-grid-layout1 {
		.pxl-grid-filter1 {
			font-size: 16px;
			letter-spacing: 1px;
			text-transform: uppercase;
			color: #b8b8b8;
			font-weight: 500;
			@include ft_theme_default($ft_theme_default);
			position: relative;
			margin: 0;
			@media (max-width: 991px) {
				font-size: 14px;
			}
			&:before {
				content: '';
				position: absolute;
				top: 0;
				left: 50%;
				transform: translate(-50%,0);
				width: 200%;
				height: 100%;
				background-color: $link_color;
			}
			.pxl--filter-inner {
				@media (max-width: 767px) {
					display: block;
				}
			}
			.filter-item {
				margin: 0 40px;
				line-height: 91px;
				position: relative;
				@media (max-width: 1200px) {
					margin: 0 15px;
  					line-height: 80px;
				}
				@media (max-width: 767px) {
					width: 100%;
					display: block;
					margin: 0;
				}
				&:before {
					content: '';
					position: absolute;
					width: 100%;
					height: 3px;
					background-color: $primary_color;
					bottom: 0;
					left: 0;
					opacity: 0;
					transform-origin: center;
					transform: scaleX(0);
					@include transition(all 0.3s);
				}
				&:hover {
					&:before {
						opacity: 1;
						transform: scaleX(1);
					}
				}
				&.active {
					color: #fff;
					&:before {
						opacity: 1;
						transform: scaleX(1);
					}
				}
			}
		}
		.pxl-grid-item {
			border-right: 1px solid #d9d9d9;
			&:last-child {
				border-right: none;
			}
			@media (max-width: 767px) {
				border-bottom: 1px solid #d9d9d9;
				border-right: none;
				&:last-child {
					border-bottom: none;
				}
			}
		}
		.pxl-item--inner {
			padding: 135px 50px 161px 50px;
			@media (max-width: 1280px) {
				padding: 100px 40px;
			}
			@media (max-width: 1024px) {
				padding: 50px 30px;
			}
			.pxl-item--icon {
				height: 95px;
				width: 96px;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: $primary_color;
				@media (max-width: 1024px) {
					height: 85px;
  					width: 85px;
				}
				img {
					height: 40px;
					width: auto;
					filter: invert(100%) sepia(48%) saturate(0%) hue-rotate(315deg) brightness(111%) contrast(101%);
					@media (max-width: 1024px) {
						height: 32px;
					}
				}
				i {
					font-size: 40px;
					color: #fff;
					@media (max-width: 1024px) {
						font-size: 32px;
					}
				}
			}
			.pxl-inner-content {
				.pxl-item--title {
					font-size: 22px;
					font-weight: 500;
					color: $link_color;
					@include ft_theme_default($ft_theme_default);
					margin-bottom: 26px;
					position: relative;
					border-bottom: 1px solid #d9d9d9;
					margin-top: 43px;
					line-height: 1.5;
					padding-bottom: 25px;
					&:before {
						content: '';
						position: absolute;
						bottom: -1px;
						left: 0;
						width: 53px;
						height: 3px;
						background-color: $primary_color;
					}
				}
				.pxl-item--content {
					font-size: 16px;
					color: #666666;
				}
			}
		}
	}
}

//service-carousel
.pxl-service-carousel {
	&.pxl-service-carousel1 {
		border: 1px solid #d9d9d9;
		position: relative;
		border-bottom: none;
		&:before {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 1px;
			background-color: #d9d9d9;
			z-index: -1;
		}
		.pxl-swiper-slide {
			padding: 0;
		}
		.pxl-swiper-container {
			margin: 0;
			margin-left: -1px;
		}
		.pxl-carousel-inner {
	        display: flex;
	        @media (max-width: 767px) {
	        	display: block;
	        }
	        .pxl-swiper-arrow-wrap {
	            margin-top: 0;
	            align-items: inherit;
	            .pxl-swiper-arrow {
	                background-color: $primary_color;
	                padding: 50px 26px 50px 27px;
	                align-content: center;
					@media (max-width: 1200px) {
						align-content: center;
					}
					@media (max-width: 767px) {
						padding: 26px 20px 22px 20px;
						width: 50%;
						text-align: center;
					}
					.hover {
						overflow: hidden;
						display: inline-flex;
					}
	                svg {
	                    height: 20px;
	                    width: auto;
	                    @media (max-width: 767px) {
	                    	height: 18px;
	                    }
	                    path {
	                        fill: #fff;
	                    }
	                }
	                .hover {
	                    @include transition(all 300ms linear 0ms);
	                }
	                &.pxl-swiper-arrow-next {
	                    margin-bottom: 3px;
	                    @media (max-width: 767px) {
	                    	order: 2;
	                    	margin-bottom: 0;
	                    	border-left: 1px solid rgba(#fff, 0.3);
	                    }
	                    &:hover {
	                        .hover {
	                            @include animation(toRightFromLeft .3s linear 1);
	                        }
	                    }
	                }
	                &.pxl-swiper-arrow-prev {
	                    svg {
	                        transform: rotate(-180deg);
	                    }
	                    &:hover {
	                        .hover {
	                            @include animation(toLeftFromRight .3s linear 1);
	                        }
	                    }
	                }
	            }
	        }
	    }
	    .pxl-item--inner {
	    	border-left: 1px solid #d9d9d9;
	    	height: 100%;
	    	@include transition(all 0.3s ease-in-out);
	    	&:hover {
	    		.pxl-item-top {
	    			.pxl-item--image {
	    				img {
	    					transform: scale(1.1);
	    				}
	    			}
	    		}
	    	}
	    	.pxl-item--holder {
	    		padding: 56px 40px 40px 45px;
	    		@media (max-width: 1280px) {
	    			padding: 50px 30px 40px 30px;
	    		}
	    		.pxl-item--title {
	    			font-size: 22px;
	    			font-weight: 500;
	    			text-transform: uppercase;
	    			color: $link_color;
	    			line-height: 1.2;
	    			margin-bottom: 20px;
	    		}
	    		.pxl-btn-service {
	    			display: inline-flex;
  					align-items: center;
  					font-size: 14px;
					letter-spacing: 0.7px;
					text-transform: uppercase;
					font-weight: 500;
					color: $link_color;
					@include ft_theme_default($ft_theme_default);
					margin-top: 36px;
					.pxl-btn-icon {
						line-height: 1;
					}
					svg {
						height: 24px;
						width: auto;
						transform: rotate(0);
						@include transition(all 0.3s);
						path {
							fill: $primary_color;
						}
					}
					&:hover {
						svg {
							transform: rotate(45deg);
						}
					}
	    		}
	    	}
	    	.pxl-item-top {
	    		position: relative;
	    		margin: 0 21px 0 19px;
	    		padding-bottom: 17px;
	    		.pxl-item--image {
	    			clip-path: polygon(88% 0, 100% 17%, 100% 100%, 0 100%, 0 0);
	    			position: relative;
	    			@include transition(all 0.3s ease-in-out);
	    			img {
	    				@include transition(all 0.3s ease-in-out);
	    				transform: scale(1);
	    			}
	    			a {
	    				position: absolute;
	    				width: 100%;
	    				height: 100%;
	    				top: 0;
	    				left: 0;
	    				z-index: 2;
	    			}
	    		}
	    		.pxl-post--icon {
	    			position: absolute;
	    			top: 19px;
  					left: 17px;
	    			width: 97px;
					height: 97px;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: $primary_color;
					svg {
						height: 36px;
						width: auto;
						fill: #fff;
						path {
							fill: #fff;
						}
					}
					img {
						width: auto;
 						height: 40px;
 						filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(64deg) brightness(103%) contrast(101%);
					}
	    		}
	    	}
	    }
	}
}
// End Service

//Portfolio Click
.pxl-portfolio-click1 {
	.pxl-post-image--track {
		border-top: 1px solid #DEDEDE;
		.pxl-post-item {
			border-bottom: 1px solid #DEDEDE;
			.pxl-item-post-click {
				display: flex;
  				align-items: center;
  				justify-content: space-between;
  				cursor: pointer;
  				padding-top: 46px;
  				padding-bottom: 46px;
				.pxl-post--category {
					font-family: Outfit;
					font-size: 16px;
					font-style: normal;
					font-weight: 500;
					text-transform: uppercase;
					color: $primary_color;
					margin-bottom: 5px;
					@media (max-width: 575px) {
						font-size: 14px;
					}
					a {
						font-family: Outfit;
						font-size: 16px;
						font-style: normal;
						font-weight: 500;
						text-transform: uppercase;
						color: $primary_color;
						@media (max-width: 575px) {
							font-size: 14px;
						}
					}
				}
				.pxl-post--title {
					font-family: Outfit;
					font-size: 48px;
					font-style: normal;
					font-weight: 500;
					letter-spacing: -1.92px;
					color: $link_color;
					line-height: 1.2;
					@media (max-width: 1199px) {
						font-size: 40px;
					}
					@media (max-width: 767px) {
						font-size: 35px;
					}
					@media (max-width: 575px) {
						font-size: 30px;
					}
				}
				.pxl-icon--post {
					width: 50px;
					height: 50px;
					border: 1px solid #DEDEDE;
					border-radius: 50%;
					position: relative;
					@media (max-width: 480px) {
						width: 42px;
						height: 42px;
					}
					&:before {
						content: '';
						position: absolute;
						width: 1px;
						height: 11px;
						background-color: $link_color;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);
						@include transition(all 0.3s);
						opacity: 1;
					}
					&:after {
						content: '';
						position: absolute;
						width: 11px;
						height: 1px;
						background-color: $link_color;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);
					}
				}
			}
			.pxl-item-bottom {
				display: none;
				padding-bottom: 49px;
				.pxl-inner-meta {
					.row {
						@media (max-width: 991px) {
							display: block;
						}
					}
					.col-lg-6 {
						@media (max-width: 991px) {
							flex: 0 0 100%;
    						max-width: 100%;
						}
					}
					.pxl-item-meta {
						height: 100%;
						align-content: space-between;
						display: flex;
						flex-wrap: wrap;
						padding-left: 20px;
  						padding-right: 35px;
  						@media (max-width: 1199px) {
  							padding: 0;
  						}
  						@media (max-width: 991px) {
  							padding-top: 30px;
  						}
						.pxl-item--content {
							font-family: Inter;
							font-size: 18px;
							font-style: normal;
							font-weight: 400;
							color: #666;
							line-height: 1.54;
							@media (max-width: 991px) {
								margin-bottom: 40px;
							}
						}
					}
					.pxl-post-list {
						display: flex;
  						align-items: center;
  						@media (max-width: 480px) {
  							display: block;
  						}
  						.pxl-item-list {
  							display: grid;
  							font-family: Outfit;
							font-size: 24px;
							font-style: normal;
							font-weight: 500;
							color: $link_color;
							line-height: 1.2;
							margin-right: 44px;
							&:last-child {
								margin-right: 0 !important;
							}
							@media (max-width: 1199px) {
								font-size: 20px;
							}
							@media (max-width: 676px) {
								margin-right: 30px;
							}
							@media (max-width: 480px) {
								margin-right: 0;
								margin-bottom: 20px;
								&:last-child {
									margin-bottom: 0 !important;
								}
							}
  							.pxl-item-name {
  								color: #999;
								font-family: Outfit;
								font-size: 14px;
								font-style: normal;
								font-weight: 400;
								text-transform: uppercase;
								margin-bottom: 14px;
  							}
  						}
					}
				}
			}
			&.active {
				border-color: $primary_color;
				.pxl-item-post-click {
					.pxl-icon--post {
						border-color: $primary_color;
						&:before {
							opacity: 0;
						}
					}
				}
			}
		}
	}
}

// Grid Filter Style
.pxl-grid-filter {
	.filter-item {
		cursor: pointer;
        @include transition(all 300ms linear 0ms);
        position: relative;
	}
	.pxl--filter-inner {
		display: inline-flex;
		flex-wrap: wrap;
	}
	font-size: 17px;
	color: #252932;
	@extend .ft-theme-default;
	font-weight: 700;
	text-align: center;
	margin-bottom: 50px;
	.filter-item {
		justify-content: center;
		margin: 0 15px;
		&.active {
			color: $primary_color;
			@media #{$max-sm} {
				color: #fff;
				background-color: $primary_color;
			}
		}
	}
}

.pxl-load-more {
	.button-style1 {
		font-size: 17px;
		line-height: 60px;
		height: 60px;
		padding: 0 35px;
		border-radius: 100px;
		color: #fefefe;
		font-weight: 700;
		font-family: "Barlow Semi Condensed";
		display: inline-flex;
  		align-items: center;
  		background-color: $primary_color;
  		cursor: pointer;
  		position: relative;
  		@include transition(all .25s cubic-bezier(.645,.045,.355,1));
  		i {
  			margin-left: 10px;
  			font-size: 20px;
  		}
  		&:hover, &:focus, &:active {
  			outline: medium none;
        	text-decoration: none;
        	background-color: $link_color;
  		}
	}
}

//BR Porfolio Single
.pxl-porfolio-single1 {
	.pxl-meta-inner {
		border: 1px solid #DEDEDE;
		padding: 15px 19px 40px 19px;
		&:hover {
			.pxl-item--img {
				img {
					transform: perspective(600px) rotateX(0.06deg) rotateY(0deg) scaleX(1.1) scaleY(1.1);
				}
			}
		}
		.pxl-item--img {
			position: relative;
			overflow: hidden;
			a {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				z-index: 1;
			}
			img {
				transition: transform 500ms;
				transform: perspective(0px) rotateX(0deg) rotateY(0deg) scaleX(1) scaleY(1);
				transform-origin: center center;
			}
		}
		.pxl-categories-button {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 15px;
			.pxl-item-categories {
				font-family: Outfit;
				font-size: 16px;
				font-style: normal;
				font-weight: 500;
				text-transform: uppercase;
				color: $primary_color;
			}
			.pxl-item-button {
				svg {
					height: 16px;
					path {
						fill: $link_color;
					}
				}
				a {
					svg {
						path {
							fill: $link_color;
							@include transition(all 0.3s);
						}
					}
					&:hover {
						svg {
							path {
								fill: $primary_color;
							}
						}
					}
				}
			}
		}
		.pxl-item-content {
			display: flex;
  			align-items: baseline;
  			padding-top: 32px;
  			margin-bottom: 12px;
  			.pxl-item-title {
  				font-family: Outfit;
				font-size: 80px;
				font-style: normal;
				font-weight: 500;
				letter-spacing: -3.3px;
				color: $link_color;
				line-height: 1.2;
				@media (max-width: 1280px) {
					font-size: 60px;
				}
				a {
					font-family: Outfit;
					font-size: 80px;
					font-style: normal;
					font-weight: 500;
					letter-spacing: -3.3px;
					color: $link_color;
					line-height: 1.2;
					&:hover {
						color: $primary_color;
					}
					@media (max-width: 1280px) {
						font-size: 60px;
					}
					@media (max-width: 1024px) {
						font-size: 45px;
					}
					@media (max-width: 575px) {
						font-size: 35px;
					}
				}
  			}
  			.pxl-item-number {
  				font-family: Outfit;
				font-size: 16px;
				font-style: normal;
				font-weight: 400;
				letter-spacing: -0.64px;
				color: #666;
  			}
		}
		.pxl-item-desc {
			font-family: Inter;
			font-size: 18px;
			font-style: normal;
			font-weight: 400;
			color: #666;
			line-height: 1.55;
		}
	}
}

body.rtl {
	.pxl-grid-filter.style-1 .filter-item:last-child {
		margin-right: 0;
		margin-left: 0;
	}
	.pxl-grid-filter.style-1 .filter-item {
		margin-right: 0;
		margin-left: 22px;
		@media (max-width: 1200px) {
			margin: 5px 10px 5px 0;
		}
		@media (max-width: 480px) {
			margin-right: 0;
		}
	}
}