/*--------------------------------------------------------------
POST GRID
----------------------------------------------------------------
# Grid Reset
# Grid Loadmore Style
# Grid Filter Style
# Blog
# Portfolio
# Service
--------------------------------------------------------------*/

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

// Grid Loadmore Style
.pxl-load-more-style1 {
	margin-top: 50px;
	.btn {
		padding: 0 38px;
		&:after {
			content: '';
			width: 20px;
			height: 20px;
			@include border-radius(100%);
			border-color: transparent #fff transparent #fff;
			border-width: 2px;
			border-style: solid;
			position: absolute;
			top: 50%;
			right: 20px;
			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;
		}
	}
	&.loading .btn {
		padding-right: 60px;
		&:after {
			opacity: 1;
		}
	}
}

// Grid Filter Style
.pxl-grid-filter1 {
	margin-bottom: 59px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
    .filter-item {
        font-size: 18px;
		text-transform: uppercase;
		font-weight: 600;
		color: #1C2539;
		letter-spacing: 3px;
		@extend .ft-heading;
		padding: 17px 18px;
		margin: 0;
		cursor: pointer;
		position: relative;
		margin-right: 28px;
		@include transition(all 250ms linear 0ms);
		@media #{$max-lg} {
			margin-right: 0;
			font-size: 15px;
			padding: 12px 14px;
			letter-spacing: 2px;
		}
		@media #{$max-sm} {
			padding: 0 22px;
			line-height: 42px;
			display: inline-flex;
			background-color: #f6f6f6;
			border-radius: 5px;
			width: calc(50% - 10px);
			justify-content: center;
			margin: 0 5px 10px 5px !important;
			color: #1C2539 !important;
		}
		@media #{$max-xs} {
			width: 100%;
		}
		&:before {
			content: '';
			height: 2px;
			position: absolute;
			bottom: -2px;
			left: 0;
			right: 0;
			margin: 0 auto;
			width: 0;
			@include transition(all 250ms linear 0ms);
			background-color: $primary_color;
			@media #{$max-sm} {
				display: none;
			}
		}
		&:last-child {
			margin-right: 0;
		}
		&.active, &:hover {
			@media #{$max-sm} {
				background-color: $primary_color;
				color: #fff !important;
			}
			&:before {
				width: 100%;
			}
		}
    }
    .pxl--filter-inner {
    	display: inline-flex;
		border-bottom: 1px solid #e1e9f4;
		flex-wrap: wrap;
		justify-content: center;
		@media #{$max-sm} {
			border-bottom: none;
			justify-content: flex-start;
			margin: 0 -5px;
		}
    }
}

// Start Blog
//--------------------------------------------------
.pxl-sz-content {
	font-size: 16px;
	line-height: 1.625;
}
.pxl-blog-style1 {
	.pxl-item--featured {
		overflow: hidden;
		border-radius: 10px 10px 0 0;
		img {
			@include transition(all 1.2s);
		}
	}
	.pxl-item--title {
		line-height: 1.5;
		margin-bottom: 10px;
		@media #{$max-lg} {
			font-size: 18px;
		}
	}
	.pxl-item--holder {
		position: relative;
	}
	.pxl-item--content {
		margin-bottom: 8px;
	}
	.pxl-item--holder {
		padding: 17px 32px 32px;
		@media #{$max-lg} {
			padding-left: 22px;
			padding-right: 22px;
		}
	}
	.pxl-item--meta {
		padding: 14px 32px;
		border-bottom: 1px solid #F6F6F6;
		position: relative;
		@media #{$max-lg} {
			padding-left: 22px;
			padding-right: 22px;
		}
		@media #{$max-sm} {
			padding-top: 20px;
			padding-bottom: 20px;
		}
	}
	.pxl-item--inner {
		margin-bottom: 30px;
		background-color: #fff;
		border-radius: 10px;
		@include box-shadow(0 10px 60px rgba(#8997BA, 0.15));
		&:hover .pxl-item--featured img {
			@include transform(scale(1.18));
		}
	}
	&.style-2 {
		.pxl-date--box {
			background-color: $third_color;
		}
		.pxl-author--box .pxl-auhtor--img img {
			border-color: $third_color;
		}
		&.pxl-swiperarrow--middle .pxl-swiper-arrow:hover {
			color: $third_color;
		}
		.pxl-item--title {
			color: #1B2E59;
		}
		.pxl-author--box .pxl-auhtor--meta h6 {
			color: #273D71;
		}
	}
	&.style-3 {
		.pxl-author--box .pxl-auhtor--meta h6, .pxl-item--title {
			color: #012F5B;
		}
		.pxl-sz-content {
			color: #677788;
		}
		.pxl-item--date {
			color: $secondary_color;
		}
		.pxl-swiper-arrow {
			background-color: #fff;
			color: $secondary_color;
			@include box-shadow(0 10px 60px rgba(#8997BA, 0.15));
			margin-top: -36px;
			&:hover {
				background-color: $primary_color;
				color: $secondary_color;
				box-shadow: none;
			}
		}
		.btn--readmore {
			color: $secondary_color;
			.btn-readmore--icon {
				background-color: $secondary_color;
				border-radius: 100%;
				overflow: hidden;
				@include box-shadow(0 10px 20px rgba(#8997BA, 0.25));
				color: $primary_color;
				&:before {
					display: none;
				}
			}
			&:hover .btn-readmore--icon i {
				-o-animation: toRightFromLeft 0.3s forwards;
                -ms-animation: toRightFromLeft 0.3s forwards;
                -webkit-animation: toRightFromLeft 0.3s forwards;
                animation: toRightFromLeft 0.3s forwards;
			}
		}
	}
	&.style-4 {
		.pxl-swiper-slide {
			&:nth-child(1), &:nth-child(4), &:nth-child(7), &:nth-child(10) {
				--primary-color: #35E1B4;
			}
			&:nth-child(2), &:nth-child(5), &:nth-child(8), &:nth-child(11) {
				--primary-color: #9F90FF;
			}
			&:nth-child(3), &:nth-child(6), &:nth-child(9), &:nth-child(12) {
				--primary-color: #FFA698;
			}
		}
	}
}
// End Blog
//--------------------------------------------------

// Start Portfolio
//--------------------------------------------------
.pxl-portfolio-style1 {
	.pxl-item--title {
		font-size: 30px;
		margin-bottom: 18px;
		color: #fff;
		@media #{$max-lg} {
			font-size: 24px;
		}
	}
	.pxl-item--category {
		color: #fff;
		font-size: 18px;
		letter-spacing: 3px;
		text-transform: uppercase;
		font-weight: 700;
		@extend .ft-theme-default;
		@media #{$max-lg} {
			font-size: 15px;
			letter-spacing: 2px;
		}
	}
	.pxl-item--holder {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #{'rgba(var(--primary-color-rgb),0.8)'};
		text-align: center;
		padding: 30px 20px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}
	.pxl-item--meta {
		position: relative;
		z-index: 99;
	}
	.pxl-item--divider {
		display: flex;
		width: 120px;
		height: 1px;
		background-color: #fff;
		margin: 0 auto 25px auto;
	}
	.pxl-item--inner {
		position: relative;
		margin-bottom: 30px;
	}
	.pxl-item--shape1 {
		position: absolute;
		top: 0;
		right: 0;
		background-image: url(../img/portfolio-shape1.png);
		width: 165px;
		height: 115px;
	}
	.pxl-item--shape2 {
		position: absolute;
		bottom: 0;
		left: 0;
		background-image: url(../img/portfolio-shape2.png);
		width: 135px;
		height: 174px;
	}
	@media #{$max-xl} {
		.pxl-grid-item.col-xl-3, .pxl-grid-item.col-xl-20-pxl, .pxl-grid-item.col-xl-40-pxl {
			.pxl-item--title {
				font-size: 24px;
			}
			.pxl-item--category {
				font-size: 16px;
			}
		}
	}
	@media #{$max-lg} {
		.pxl-grid-item.col-xl-20-pxl, .pxl-grid-item.col-xl-40-pxl {
			.pxl-item--title {
				font-size: 20px;
			}
			.pxl-item--category {
				font-size: 14px;
			}
		}
	}
}

.pxl-portfolio-style2 {
	.pxl-item--title {
		margin-bottom: 7px;
	}
	.pxl-item--category {
		color: $primary_color;
		font-size: 14px;
	}
	.pxl-item--holder {
		background-color: #fff;
		border-radius: 9px;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		@include transition(transform 200ms linear 0ms);
		width: 100%;
		&.pxl-item--front {
			text-align: center;
			padding: 22px 25px;
			position: relative;
		}
		&.pxl-item--back {
			background-color: $primary_color;
			padding: 22px 50px 22px 25px;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			transform: rotateX(180deg);
			.pxl-item--title, .pxl-item--category {
				color: #fff;
			}
		}
		.pxl-item--readmore {
			position: absolute;
			bottom: 12px;
			background-color: #fff;
			width: 33px;
			height: 33px;
			border-radius: 6px;
			@include box-shadow(0 4px 4px rgba(#212948, 0.15));
			display: inline-flex;
			align-items: center;
			justify-content: center;
			color: $primary_color;
			font-size: 11px;
			i {
				@include transition(transform 220ms linear 0ms);
			}
			&:hover i {
				transform: rotate(45deg);
			}
		}
	}
	.pxl-flip--box {
		position: absolute;
		left: 24px;
		right: 24px;
		bottom: 25px;
		transition: transform 0.6s;
		transform-style: preserve-3d;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
	}
	.pxl-item--inner {
		position: relative;
		margin-bottom: 30px;
		overflow: hidden;
		border-radius: 15px;
		&:hover .pxl-flip--box {
			transform: rotateX(180deg);
		}
	}
	&.style-1 {
		.pxl-item--front {
			overflow: hidden;
		}
		.pxl-item--arrow {
			width: 35px;
			height: 85px;
			position: absolute;
			right: 0px;
			bottom: -38px;
			transform: rotate(52deg);
			&:before, &:after {
				content: '';
				position: absolute;
				top: 0;
				height: 100%;
			}
			&:before {
				background-color: $gradient_color_from;
				left: 0;
				width: 15px;
			}
			&:after {
				background-color: $gradient_color_to;
				left: 15px;
				width: 20px;
			}
		}
		.pxl-item--holder.pxl-item--back {
			@include background-horizontal($gradient_color_from, $gradient_color_to);
		}
	}
	&.style-2 {
		.pxl-item--category {
			color: $secondary_color;
		}
		.pxl-item--title {
			margin-bottom: 5px;
		}
		.pxl-item--holder.pxl-item--back {
			background-color: $secondary_color;
		}
		.pxl-item--holder .pxl-item--readmore {
			background-color: $primary_color;
			color: $secondary_color;
		}
	}
}
// End Portfolio
//--------------------------------------------------

// Start Service
//--------------------------------------------------
.pxl-shape--divider {
	width: 105px;
	height: 28px;
	position: absolute;
	top: -1px;
	display: flex;
	flex-wrap: nowrap;
	overflow: hidden;
	.pxl-item--divider {
		width: 11px;
		height: 64px;
		background-color: $primary_color;
		margin-right: 19px;
		transform: rotate(45deg);
		position: relative;
		top: -20px;
		left: 20px;
	}
}

.pxl-service-style1 {
	.type-service {
		padding: 0 8px;
	}
	.pxl-item--featured {
		z-index: -1;
		position: absolute;
		top: -1px;
		right: -1px;
		bottom: -1px;
		left: -1px;
		background-color: $secondary_color;
		transform-origin: right center;
		-webkit-transform-origin: right center;
		@include transform(scale(0, 1));
		@include transition(transform 0.3s cubic-bezier(0.37, 0.31, 0.2, 0.85));
		&:before {
			@extend .pxl-spill;
			background-color: $secondary_color;
			opacity: 0.9;
		}
	}
	.pxl-item--icon {
		line-height: 1;
		font-size: 65px;
		color: $primary_color;
		margin-bottom: 26px;
		@media #{$max-sm} {
			font-size: 58px;
		}
		img {
			max-height: 65px;
		}
		svg {
			height: 65px;
			fill: $primary_color;
		}
	}
	.pxl-item--title {
		margin-bottom: 16px;
		a {
			@include transition(all 250ms linear 0ms);
		}
	}
	.pxl-item--content {
		font-size: 17px;
		line-height: 1.47;
		margin-bottom: 15px;
		@include transition(all 250ms linear 0ms);
		@media #{$max-md} {
			font-size: 16px;
		}
	}
	.pxl-item--main  {
		border: 1px solid #F6F6F6;
		padding: 50px 38px 48px;
		position: relative;
		overflow: hidden;
		margin-bottom: 16px;
		background-color: #fff;
		z-index: 1;
		@media #{$max-lg} {
			padding-left: 30px;
			padding-right: 30px;
		}
		@media #{$max-sm} {
			padding: 40px 22px;
		}
	}
	.pxl-item--inner {
		position: relative;
		&:hover {
			.pxl-item--featured {
				transform-origin: left center;
		        -webkit-transform-origin: left center;
		        @include transform(scale(1, 1));
			}
			.pxl-item--title a {
				color: $primary_color;
			}
			.pxl-item--content {
				color: #E1E9F4;
			}
			.btn--readmore2 {
				color: $primary_color;
			}
		}
	}
	.pxl-grid-inner {
		margin: 0 -8px;
		.pxl-grid-item {
			padding: 0 8px;
		}
	}
	.pxl-item--shape {
		position: absolute;
		top: -30%;
		left: 0;
		width: 100%;
		height: 160%;
		z-index: -2;
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		transform: rotate(45deg);
		.pxl-shape--divider {
			width: 140px;
			height: 100%;
			@include background-gradient-bottom($primary_color, rgba(#fff,1));
			margin: 0 2px;
			opacity: 0.05;
			&.pxl-shape--divider2 {
				@include background-gradient-top($primary_color, rgba(#fff,1));
			}
		}
	}
	.pxl-item--shape2 {
		width: 104px;
		height: 28px;
		position: absolute;
		top: -1px;
		right: 0;
		display: flex;
		flex-wrap: nowrap;
		overflow: hidden;
		.pxl-shape--divider {
			width: 14px;
			height: 64px;
			@include background-gradient-top($gradient_color_from, $gradient_color_to);
			margin-right: 14px;
			transform: rotate(45deg);
			position: relative;
			top: -20px;
			left: 20px;
		}
	}
	@media #{$min-xl} {
		&.pxl-grid--6items.style-1 .pxl-grid-item.col-xl-4:nth-child(2) .pxl-item--inner {
			&:before, &:after {
				content: '';
				width: 16px;
				height: 16px;
				@include transition(all 250ms linear 0ms);
				position: absolute;
				bottom: -16px;
				background-color: $primary_color;
			}
			&:before {
				left: -16px;
			}
			&:after {
				right: -16px;
			}
		}
	}
	&.style-2 {
		text-align: center;
		.pxl-item--shape {
			display: none;
		}
		.pxl-item--main  {
			border-color: #fff;
			@include box-shadow(0 10px 60px rgba(#8997BA, 0.15));
		}
	}
	&.style-3 {
		.pxl-item--shape {
			display: none;
		}
		.pxl-item--main  {
			border-color: #fff;
			@include box-shadow(0 10px 60px rgba(#8997BA, 0.15));
		}
		.pxl-item--shape-primary {
			z-index: 2;
			opacity: 0.08;
			top: 0px;
			@include transition(all 220ms linear 0ms);
		}
	}
	.pxl-item--last {
		.pxl-item--main {
			opacity: 0;
			visibility: hidden;
		}
		.pxl-item--wg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 99;
			padding: 50px;
			align-content: space-between;
			display: flex;
			flex-wrap: wrap;
			@media #{$max-lg} {
				padding: 30px;
			}
			.pxl-wg--title {
				margin-bottom: 0px;
				font-size: 34px;
				line-height: 1.176;
				color: #fff;
				width: 100%;
			}
			.pxl-wg--image {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: -1;
			}
			.pxl-wg--button a {
				padding: 0 45px;
				line-height: 60px;
			}
			.pxl-item--inner {
				position: relative;
				z-index: 1;
				padding: 52px 45px 55px;
			}
		}
	}
}

.pxl-service-style2 {
	.pxl-item--title {
		margin-bottom: 0px;
		color: #1B2E59;
		font-size: 24px;
		@media #{$max-lg} {
			font-size: 20px;
		}
	}
	.pxl-item--holder {
		background-color: #fff;
		border-radius: 9px;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		@include transition(transform 200ms linear 0ms);
		width: 100%;
		&.pxl-item--front {
			padding: 25px 25px;
			position: relative;
			overflow: hidden;
		}
		&.pxl-item--back {
			background-color: $primary_color;
			padding: 25px 50px 25px 25px;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			transform: rotateX(180deg);
			.pxl-item--title {
				color: $third_color;
			}
		}
		.pxl-item--readmore {
			position: absolute;
			bottom: 12px;
			background-color: $third_color;
			width: 33px;
			height: 33px;
			border-radius: 6px;
			@include box-shadow(0 4px 4px rgba(#212948, 0.15));
			display: inline-flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 12px;
			i {
				@include transition(transform 220ms linear 0ms);
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
			&:hover i {
				transform: translate(-50%, -50%) rotate(45deg);
			}
		}
	}
	.pxl-flip--box {
		position: absolute;
		left: 24px;
		right: 24px;
		bottom: 25px;
		transition: transform 0.6s;
		transform-style: preserve-3d;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
	}
	.pxl-item--inner {
		position: relative;
		margin-bottom: 30px;
		overflow: hidden;
		border-radius: 15px;
		&:hover .pxl-flip--box {
			transform: rotateX(180deg);
		}
	}
	.pxl-item--arrow {
		width: 35px;
		height: 85px;
		position: absolute;
		right: 0px;
		bottom: -36px;
		transform: rotate(52deg);
		&:before, &:after {
			content: '';
			position: absolute;
			top: 0;
			height: 100%;
		}
		&:before {
			background-color: $gradient_color_from;
			left: 0;
			width: 13px;
		}
		&:after {
			background-color: $gradient_color_to;
			left: 13px;
			width: 20px;
		}
	}
}

.pxl-service-style3 {
	.pxl-item--content {
		font-size: 17px;
		color: #677788;
		line-height: 1.5888;
	}
	.pxl-item--icon {
		background-color: $secondary_color;
		color: $primary_color;
		width: 76px;
		height: 76px;
		border-radius: 76px;
		font-size: 32px;
		position: relative;
		@include box-shadow(0 6px 25px rgba(#5D6883, 0.1));
		img {
			max-height: 42px;
		}
		svg {
			height: 42px;
		}
		> i, > svg, > img {
			@extend .pxl-middle;
			z-index: 2;
		}
		&:before {
			content: '';
			width: 20px;
			height: 20px;
			z-index: 1;
			position: absolute;
			opacity: 0.5;
			border-radius: 20px;
			top: 15px;
			left: 17px;
			background-color: $primary_color;
		}
	}
	.pxl-flipbox--front {
		background-color: #fff;
		border-radius: 15px;
		overflow: hidden;
		@include box-shadow(0 10px 60px rgba(#49587C, 0.1));
		.pxl-item--icon {
			margin-bottom: 17px;
			margin-top: -66px;
			margin-left: -10px;
			margin-right: -10px;
		}
		.pxl-item--title {
			font-size: 20px;
			color: #012F5B;
			margin-bottom: 16px;
		}
		.pxl-item--holder {
			padding: 30px 30px 44px 40px;
			@media #{$max-lg} {
				padding-left: 30px;
				padding-right: 30px;
			}
		}
		.pxl-item--readmore {
			a {
				font-size: 14px;
				color: #012F5B;
				font-weight: 700;
				display: inline-flex;
				align-items: center;
				@extend .ft-theme-default;
				i {
					font-weight: 400;
					font-size: 12px;
				}
			}
		}
		.pxl-item--content {
			margin-bottom: 15px;
		}
	}
	.pxl-flipbox--back {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		background-color: $secondary_color;
		z-index: 1;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 15px;
		overflow: hidden;
		@include box-shadow(0 10px 20px rgba(#2C87DE, 0.2));
		padding: 20px 50px;
		@media #{$max-lg} {
			padding-left: 30px;
			padding-right: 30px;
		}
		.pxl-item--icon {
			background-color: #fff;
			color: $secondary_color;
			margin-bottom: 28px;
		}
		.pxl-item--title {
			margin-bottom: 15px;
			color: $primary_color;
		}
		.pxl-item--featured {
			position: absolute;
			z-index: -1;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			&:before {
				content: '';
				@extend .pxl-spill;
				background-color: $secondary_color;
				opacity: 0.9;
			}
		}
		.pxl-item--content {
			color: #fff;
			margin-bottom: 31px;
		}
		.pxl-item--holder {
			width: 100%;
		}
		.pxl-item--readmore {
			.btn {
				font-size: 14px;
				line-height: 42px;
				padding: 0 29px;
				color: $secondary_color;
				&:hover {
					color: $secondary_color;
					background-color: #fff;
				}
			}
		}
	}
	.pxl-item--inner {
		position: relative;
		margin-top: 60px;
		margin-bottom: 70px;
	}
	.pxl-swiper-arrow {
		background-color: #fff;
		color: $secondary_color;
		@include box-shadow(0 10px 60px rgba(#8997BA, 0.15));
		margin-top: -36px;
		&:hover {
			background-color: $primary_color;
			color: $secondary_color;
			box-shadow: none;
		}
	}
}
.pxl-h7-custom-arrow {
	.pxl-service-style3 .pxl-swiper-arrow {
		color: $primary_color;
		&:hover {
			color: #fff;
		}
	}
}
// End Service
//--------------------------------------------------
body.rtl {
	.pxl-load-more-style1.loading .btn {
		padding-left: 60px;
		padding-right: 38px;
		&:after {
			right: auto;
			left: 20px;
		}
	}
	.pxl-grid-filter1 .filter-item {
		margin-right: 0;
		margin-left: 28px;
		@media #{$max-lg} {
			margin-left: 0;
		}
	}
	.pxl-portfolio-style2 .pxl-item--holder.pxl-item--back {
		padding-right: 25px;
		padding-left: 50px;
	}
}