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

// Grid Reset
.pxl-grid {
	.pxl-item--image img, .pxl-item--featured img {
		width: 100%;	
	}
	.pxl-item--title a, .item--title a {
		color: inherit;
		&:hover {
			color: inherit;
		}
	}
	.item--category { 
		a {
			color: inherit;
		}
	}
	&.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 {
	.btn {
		padding: 10px 38px;
		color: #fff;
		margin-top: 70px;
		&:after {
			content: '';
			width: 20px;
			height: 20px;
			@include border-radius(100%);
			border-color: transparent #fff transparent #fff;
			border-width: 1px;
			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 {
	height: 100%;
	.pxl--filter-inner {
		display: flex;
		align-items: end;
		justify-content: end;
		flex-wrap: wrap;							
		height: 100%;
	}
	.filter-item {
		font-weight: bold;
		color: #fff;		
		font-size: 14px;
		display: inline-block;
		margin-right: 10px;
		background: rgba(255, 255, 255, .1);
		margin-bottom: 19px;
		cursor: pointer;
		position: relative;
		padding: 3px 20px;	
		border-radius: 6px;
		text-transform: uppercase;
		transition: .3s;
		&:hover {
			background: rgba(255, 255, 255, .2);
		}
		&.active {
			box-shadow: 0 0 40px 0px rgba($primary_color_hex, 1);
			@include background-gradient-rotate(to right, $gradient_color_from, $gradient_color_to);    			
		}
	}
}


// Start Blog
//--------------------------------------------------
.pxl-blog-style1 {
	&.pxl-post-carousel1 {
		.pxl-item--image {
			border-radius: 10px;
		}
	}
	&.pxl-post-carousel2 {
		.pxl-item--inner {
			padding: 0;
			overflow: hidden;
			box-shadow: 0px 20px 30px 10px rgba(189, 192, 222, 0.15);
			&:hover {
				box-shadow: 0px 20px 30px 10px rgba(127, 126, 171, 0.17);	
				.pxl-item--holder {
					border-color: transparent;
				}
			}
			.pxl-item--image {
				margin-bottom: 0;	
				border-radius: 15px 15px 0px 0px;			
			}
			.pxl-item--holder {
				padding: 28px 28px 39px 41px;
				border: 1px solid #ECF6FA;
				@media (max-width: 1024px) {
					padding: 28px 15px 39px;					
				}
				.pxl-item--title {
					margin-top: 0;
				}
				.pxl-item--readmore {
					.btn {
						background-color: #FFEAE6;
						border-radius: 200px;
						color: $primary_color;
						font-size: 12px;
						font-weight: 600;
						line-height: 20px;
						padding: 10px 33px;
						&:before {
							color: #fff;
						}
						&:hover {
							background-color: $primary_color;
							box-shadow: none;
						}
					}
				}
			}
		}
		.pxl-item--image .pxl-item--category a {
			color: #818BFF;
			border-radius: 100px;
			text-transform: capitalize;
		}
		.pxl-item--image .pxl-item--date {
			background-color: $secondary_color;
			border-radius: 4px 0 0 4px;
			color: #fff;
			i {
				color: #fff;
			}
		}
	}
	&.has-post-thumbnail {
		.pxl-item--holder {
			width: 100%;				
		}
	}
	.pxl-item--inner {
		padding: 31px 31px 51px;
		border-radius: 15px;
		background-color: #fff;
		border: 1px solid #ECF6FA;
		box-shadow: 0px 20px 30px 10px rgba(200, 208, 214, 0.25);
		transition: 0.5s;
		&:hover {
			border-color: transparent;
			.pxl-item--image {
				img {
					@include transform(scale(1.1)rotate(3deg));
				}
			}
			.pxl-item--title {
				a {
					&:hover {
						color: $four_color;						
					}
				}
			}
			.pxl-item--author {
				&:before {
					width: 100%;
				}
			}
		}
	}
	.pxl-item--image {
		position: relative;
		overflow: hidden;
		width: 100%;						
		margin-bottom: 20px;
		border-radius: 10px;
		img {
			transition: 0.5s;
		}
		.pxl-item--date {			
			position: absolute;		
			right: 0;
			bottom: 0;
			background-color: $primary_color;
			border-radius: 4px 4px 10px 4px;
			padding: 4px 13px;
			color: $secondary_color;
			font-size: 14px;
			font-weight: 500;
			display: flex;
			line-height: 24px;
			align-items: center;
			gap: 7px;					
			i {
				color: $secondary_color;
			}
		}
		.pxl-item--category {
			display: block;			
			position: absolute;
			top: 16px;
			left: 18px;
			line-height: 1em;	
			a {
				font-size: 14px;
				color: $four_color;
				line-height: 22px;
				font-weight: 500;
				text-transform: capitalize;
				display: inline-block;
				background: #fff;
				margin-left: 5px;
				padding: 4px 10px 4px 10px;
				@include border-radius(4px);						
			}
		}
	}
	.pxl-item--holder {
		width: 100%;
		position: relative;
		.pxl-item--author {
			position: relative;
			display: flex;
			align-items: center;
			color: #687799;
			padding-bottom: 20px;
			border-bottom: 1px solid #E1E1E9;
			font-weight: 500;
			&:before {
				content: '';
				position: absolute;
				background-color: $primary_color;
				transition: .3s;
				width: 0;
				height: 1px;
				left: 0;
				bottom: -1px;
			}
			span {
				color: $secondary_color;
			}
			img {
				width: 36px;
				height: 36px;
				border-radius: 50%;
				margin-right: 10px;
			}
			a {
				font-weight: 500;
				color: $secondary_color;												
			}
		}
		.pxl-item--excerpt {
			margin-bottom: 24px;
		}
		.pxl-item--title {
			margin-bottom: 22px;
			margin-top: 30px;
			a {
				color: $secondary_color;	
				text-transform: capitalize;
				-ms-word-wrap: break-word;
				word-wrap: break-word;	
				&:hover {
					color: $primary_color;
				}	
			}
		}
		.pxl-item--readmore {

		}
	}
}

.pxl-blog-style2 {
	.pxl-pagination-wrap .pxl-pagination-links {
		margin-top: 52px;
	}
	.pxl-item--inner {
		margin-bottom: 40px;
		background-color: $secondary_color;		
		overflow: hidden;
		display: flex;
		flex-wrap: wrap;
	}
	.pxl-item--image {
		position: relative;
		overflow: hidden;
		min-height: 400px;
		max-height: 400px;
		width: 100%;
		.pxl-item--date {
			position: absolute;
			top: 50%;
			right: -45px;
			transform: rotate(90deg) translateX(-50%);
			margin-top: -22px;
			clip-path: polygon(0 0, 100% 0, 88% 100%, 0% 100%);
			background-color: $primary_color;				
			height: 40px;
			display: inline-flex;
			align-items: center;
			padding: 0 28px 0 16px;
			font-family: 'Inter';
			font-size: 15px;
			font-style: normal;
			font-weight: 700;
			line-height: 26px;
			letter-spacing: 0.45px;
			color: #fff;
		}
		a {
			display: block;
			background-position: 50%;
			background-repeat: no-repeat;
			background-size: cover;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			&:hover {
				@include transform(scale(1.1)rotate(3deg));
			}
			img {
				opacity: 0;
				position: absolute;
				z-index: -999;
			}
		}
	}
	.pxl-item--holder {
		width: 100%;
		padding-left: 30px;
		padding-top: 19px;
		padding-bottom: 49px;
		position: relative;
		border: 1px solid #272727;		
		@media (max-width: 767px) {			
			padding-left: 15px;
			padding-top: 20px;
		}
		&:before {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: #000000;
			-webkit-backdrop-filter: blur(10px);
			backdrop-filter: blur(10px);
			opacity: 0;
			@include transition(200ms all linear 0ms);
			content: '';
			visibility: hidden;
		}
		&.active {
			&:before {
				visibility: visible;
				z-index: 1;
				opacity: .9;
			}
			.pxl-social {
				opacity: 1;
				visibility: visible;
				z-index: 2;
				top: 50%;
				left: 50%;
				bottom: auto;
				@include transform(translate(-50%,-50%));
			}
		}
		.pxl-item--title {
			font-family: 'Outfit';			
			font-style: normal;
			font-weight: 400;
			line-height: 30px;
			letter-spacing: 0.4px;
			text-transform: uppercase;
			margin-bottom: 27px;
			a {
				color: #fff;			
			}
			@media #{$max-sm} {
				font-size: 16px;
			}
		}
		.pxl-item--category {
			display: block;
			margin-bottom: 7px;
			a {
				font-family: 'Inter';
				font-size: 14px;
				font-style: normal;
				font-weight: 700;
				line-height: 15.96px;
				letter-spacing: 0.21px;
				text-transform: uppercase;
			}
		}
		.pxl-item--author {
			font-family: 'Outfit';
			font-size: 12px;
			font-style: normal;
			font-weight: 400;
			line-height: 22px; 
			color: $primary_color;
			text-transform: uppercase;
			margin-left: 30px;
			a {
				color: $third_color;
				font-family: 'Outfit';
				font-size: 12px;
				font-style: normal;
				font-weight: 400;
				line-height: 22px;
				text-transform: uppercase;
			}
		}
		.pxl-social {
			position: absolute;
			top: 25%;
			left: 50%;
			padding: 10px 10px 5px;
			background-color: var(--primary-color);
			z-index: 2;			
			@include transform(translateX(-50%));
			@include transition(all 300ms ease-in-out);			
			opacity: 0;
			visibility: hidden;
			a {
				color: #fff;
				margin: 0 10px;
			}
		}
		.pxl-item--meta {
			position: absolute;
			bottom: 0;
			right: 0;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-bottom: 0;
			z-index: 3;
			width: 100%;
			border-top: 1px solid #272727;	
			.pxl--social {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				padding: 0 22px;
				cursor: pointer;
				a {
					display: none;
				}
			}
			.pxl-item-meta-right {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
			}
			.pxl-item--comments {
				padding: 6px 20px 8px 0;			
				position: relative;
				font-family: 'Inter';
				font-size: 12px;
				font-style: normal;
				color: $third_color;
				font-weight: 400;
				line-height: 22px;
				text-transform: lowercase;
				display: flex;
				align-items: center;
				@media (max-width: 450px) {
					opacity: 0;
				}
				svg {
					margin-right: 7px;
				}
				&:after {
					content: '';
					position: absolute;
					height: 100%;
					width: 1px;
					background-color: #272727;
					top: 0;
					right: 0;
				}
			}
		}
	}
}
// End Blog
//--------------------------------------------------
// Start Service
//--------------------------------------------------
.pxl-service-grid {
	.container-custom {
		@media (max-width: 1024px) {
			display: flex;
			flex-direction: column;
			>div {
				width: 100%;
				max-width: 100%;
			}
			.pxl-grid-filter {
				.pxl--filter-inner {
					justify-content: flex-start;
					flex-wrap: wrap;					
					.filter-item {
						margin-bottom: 5px;
					}
				}
			}
		}
	}	
}
.pxl-service-grid-layout1,.pxl-service-carousel1 {
	.pxl-pagination-wrap .pxl-pagination-links {
		margin-top: 0;
	}
	.pxl-item--title {
		margin-bottom: 27px;
		position: relative;	
	}
	.pxl-item--excerpt {
		margin-bottom: 20px;
	}
	.pxl-icon {
		position: relative;
		display: inline-block;
		margin-bottom: 27px;
		@include transition(all .5s);		
		i {
			font-size: 50px;
			color: $four_color;
			line-height: 1;
		}							
		&:after {
			position: absolute;
			content: '';
			bottom: 9px;
			left: 9px;
			z-index: -1;
			width: 54px;
			height: 54px;
			border-radius: 21.92px 0 21.92px 0;
			background-color: #DBF5E5;
		}
	}
	.pxl-item--holder {
		@include transition(all .5s);	
		padding-bottom: 64px;	
		.arrow {
			opacity: 0;
			@include transition(all .5s);	
			@media (max-width: 767px) {
				opacity: 1;	
			}						
		}
	}
	.pxl-item--inner {
		position: relative;				
		@include transition(all .5s);							
		&:hover {
			.pxl-item--holder {
				.pxl-icon {
					@include transform(scale(-1)rotate(180deg));
				}
				.arrow {
					opacity: 1;
				}
			}
		}
	}
}

.pxl-service-grid-layout2 {
	.pxl-grid-filter {
		margin-bottom: 60px;
		@media (max-width: 1024px) {
			margin-bottom: 10px;
		}
	}
	.pxl-icon {
		position: absolute;
		top: -36px;
		left: 34px;
		width: 64px;
		height: 64px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		border: 1px solid #C1E9D2;
		box-shadow: 0 40px 100px 0 rgba(95,95,103,0.17);
		background-color: #EEFCF4;
		i {
			font-size: 30px;
			color: $four_color;
			line-height: 1;
		}
	}
	.pxl-item--title {
		margin-bottom: 2px;
		position: relative;	
		padding-bottom: 15px;
	}
	.btn {
		padding: 19.5px 40px;
		border-top: 1px solid #E6EEFF;
		background-color: #fff; 		
		width: 100%;	
		text-align: left;
		@include transition(all .5s);
		border-radius: 0;	
		&:hover,&:active {
			background-color: #fff;
		}
		>a {
			position: relative;
			display: inline-block;
			@include transition(all .5s);
			left: 0;
		}
		span {
			margin-left: 3px;
			color: $secondary_color;
		}
	}
	.pxl-item--excerpt {
		font-size: 15px;
	}
	.pxl-item--holder {
		position: relative;
		@include transition(all .5s);
		background-color: #fff;
		padding: 46px 23px 23px 40px;
		z-index: 1;
	}
	.pxl-item--featured {
		position: relative;
		overflow: hidden;
		img {
			@include transition(all .5s);			
		}	
		&:before {
			position: absolute;
			content: '';
			width: 100%;
			height: 100%;
			z-index: 1;
			background: -moz-linear-gradient(0deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .0) 50%);
			background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .0) 50%);
			background: linear-gradient(0deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .0) 50%);
		}
	}
	.pxl-item--inner {
		position: relative;		
		@include transition(all .5s);			
		@include border-radius( 0 0 6px 6px);	
		box-shadow: 0 20px 30px 0 rgba(200,208,214,0.25);		
		overflow: hidden;			
		&:hover {			
			.btn {
				background-color: $four_color;
				>a {
					transform: translateX(-50%);					
					left: 50%;				
				} 
				span {
					color: #fff;
				}
				svg {
					path {
						fill: #fff;
					}
				}
			}			
			.pxl-item--featured {
				img {
					transform: scale(1.2) rotate(3deg);
				}
			}
		}
	}
}

.pxl-service-carousel2 {
	.pxl-item--featured {
		position: relative;
		img {
			@include transition(all .5s);		
		}	
	}
	.pxl-item--inner {
		overflow: hidden;
		border-radius: 12px;
		background: #FFF;
		mix-blend-mode: luminosity;
		&:hover {
			.pxl-item--hoder {
				.pxl-item--title {
					color: $four_color;
				}
				.pxl-icon {
					color: $four_color;
				}
				.btn-white {
					&:after {
						opacity: 1;
						visibility: visible;
						transform: scale(1);
					}
					.btn-readmore--text {
						color: #fff;						
					} 								
					svg {
						path {
							fill: #fff;
						}
					}
				}
			}
		}
	}
	.pxl-item--hoder {
		position: relative;
		background-color: #fff;
		text-align: center;
		padding: 44px 0 0;
		.pxl-item--title {
			color: #242E45;
			font-size: 20px;			
			font-weight: 600;
			line-height: 24px;
			margin-bottom: 12px;
		}
		.pxl-icon {
			position: absolute;
			top: -41px;
			left: 50%;
			transform: translateX(-50%);
			font-size: 36px;
			color: $secondary_color;
			width: 80px;
			height: 80px;
			border-radius: 50%;
			background-color: #fff;
			&:after {
				position: absolute;
				content: '';
				background-color: rgba(255, 255, 255, 0.44);
				width: calc(100% + 8px);
				height: calc(100% + 8px);
				border-radius: 50%;
				top: -4px;
				left: -4px;
				z-index: -1;
			}
		}
		.pxl-item--excerpt {
			text-align: center;
			font-size: 16.898px;
			font-weight: 400;
			line-height: 31.684px;
			margin-bottom: 32px;
			padding: 0 20px;
		}
		.btn-white {
			position: relative;
			display: block;
			padding: 14.5px 40px 19.5px;
			border-top: 1px solid #e6eeff;
			background-color: #fff;
			color: #242E45;
			width: 100%;
			text-align: center;
			@include transition(all .5s ease);		
			border-radius: 0;
			&:after {
				content: '';
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				@include background-gradient-rotate(to right, $gradient_color_from, $gradient_color_to);   
				opacity: 0;
				visibility: hidden;
				transition: inherit;
				transform: scale(0);
			}
			.btn-readmore--text,svg {
				position: relative;
				z-index: 1;
			}
			.btn-readmore--text {
				transition: inherit;
				font-size: 16.898px;
				font-weight: 600;
				line-height: 27.459px;
				letter-spacing: 0.507px;
				margin-right: 7px;
			}
		}
	}
}

.pxl-service-carousel1 {
	.pxl-swiper-slide {
		.pxl-item--inner {
			&:hover {
				box-shadow: none;
			}
		}
	}
	.pxl-item--holder {
		padding-top: 20px;
		padding-bottom: 0;
	}
	.pxl-swiper-pagination {
		margin-top: 3px;
	}
}

.pxl-service-grid-layout3 {
	.pxl-grid-item {
		.pxl-item--inner  {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-radius: 6px;
			background:#fff;
			box-shadow: 0px 20px 30px 0px rgba(200, 208, 214, 0.25);
			padding: 5px 25px;
			border: 1px solid #E6EEFF;
			min-height: 66px;
			@include transition(250ms all);
			.link-box {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
			.content {
				display: flex;
				align-items: center;
				justify-content: center;
				column-gap: 20px;
				.pxl-icon {
					display: flex;
					align-items: center;
					i {
						font-size: 30px;
					}
					img {
						max-height: 30px;
						width: auto;
					}
				}
				.pxl-item--title {
					margin-bottom: 0;
					color: $secondary_color;
					font-family: Inter;
					line-height: 1.5;
					@include transition(250ms all);					
				}
			}
			&:hover {
				background-color: $secondary_color;
				.pxl-item--title {
					color: #fff;
				}
				.arrow {
					svg {
						path {
							fill: #fff;
						}
					}
				}
			}
		}
	}
}

.pxl-service-grid-layout4 {
	.pxl-load-more {
		font-weight: 500;
		.btn {
			padding: 0;
			background-color: transparent;
			color: $primary_color;
			text-decoration: underline;
			font-weight: 500;
		}
	}
	.pxl-grid-inner {
		.pxl-grid-item.col-xl-3 {
			&:nth-child(2),&:nth-child(4) {
				margin-top: 50px;
			}
		}
	}
	.pxl-icon {
		@include transition(all .5s);											
		width: 50px;
		height: 50px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 15px;
		i {
			font-size: 50px;
			color: $four_color;
			line-height: 1;
		}
		svg {
			height: 50px;
		}
	}
	.pxl-item--number {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 30px;
		top: 25px;
		right: 27px;
		background-color: #fff;
		border-radius: 100px;
		color: $four_color;
		box-shadow: 0px 20px 30px 10px rgba(200, 208, 214, 0.25);
	}
	.pxl-item--title {
		margin-bottom: 2px;
		position: relative;	
		padding-bottom: 15px;
	}
	.pxl-item--button {
		font-size: 14px;
		color: #687799;
		display: flex;
		align-items: center;
		svg {
			margin-right: 7px;
		}
	}
	.pxl-item--excerpt {
		font-size: 15px;
		color: #687799;
		line-height: 26px;
		margin-bottom: 28px;
	}
	.pxl-item--holder {
		position: relative;
		@include transition(all .5s);
		background-color: #EEFCF4;
		border: 1px solid #EEFCF4;
		padding: 57px 27px 27px 40px;
		border-radius: 15px;
		z-index: 1;
	}
	.pxl-item--inner {
		position: relative;		
		@include transition(all .5s);					
		overflow: hidden;			
		&:hover {
			.pxl-item--holder {
				.pxl-icon {
					@include transform(scale(-1)rotate(180deg));
				}
			}
		}
	}
}

// End Service
//--------------------------------------------------
// Start Case
//--------------------------------------------------
.pxl-case-grid-layout1,.pxl-case-carousel2 {
	.pxl-item--inner {
		position: relative;
		border-radius: 10px;
		overflow: hidden;
		&.show-img {
			.pxl-item--holder {
				&:after {
					content: '';
				}
			}
		}
		>a {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 3;
		}
		&:hover {
			box-shadow: 0px 25px 40px 0px rgba(84, 131, 111, 0.33);
			&:before {
				height: 100%;
			}
			&:after {
				height: 0;
			}
			.pxl-item--holder {
				bottom: 4px;
				&:after {
					opacity: 1;
					visibility: visible;
				}
				.pxl-post--readmore {
					transform: scale(1);
				}
			}
		}
		&:before {
			position: absolute;
			content: '';
			width: 100%;
			height: 0%;
			z-index: 2;
			@include background-gradient-rotate(to top, $primary_color 11%, #{'rgba(var(--primary-color-rgb),0.0)'} 100%);   
			@include transition(0.5s);
			bottom: 0; 		
		}
		&:after {
			position: absolute;
			content: '';
			width: 100%;
			height: 100%;
			z-index: 1;
			@include background-gradient-rotate(to top, $secondary_color 0%, rgba($secondary_color_hex,.0) 70%);   
			@include transition(0.5s);		
			bottom: 0;			
		}
		.pxl-item--featured {
			img {
				width: 100%;
				object-fit: cover;
			}
		}
		.pxl-item--holder {
			padding: 45px;
			position: absolute;
			bottom: -65px;
			left: 0;
			@include transition(0.5s);					
			z-index: 2;
			@media (max-width: 1200px) {
				padding: 30px 15px;
			}
			&:after {				
				position: absolute;
				background-image: url(../img/group.png);		
				width: 105px;
				height: 111px;
				bottom: 0;
				@include transition(0.5s);						
				right: 0;
				opacity: 0;
				visibility: hidden;
			}
			.pxl-item--category {
				display: inline-block;
				font-size: 14px;
				line-height: 22px;
				font-weight: 500;
				background-color: $primary_color;
				border-radius: 4px;
				padding: 4px 10px;
				margin-bottom: 19px;
				a {
					color: $secondary_color;					
				}
			}
			.pxl-item--title {
				color: #fff;
				margin-bottom: 24px;
			}
			.pxl-post--readmore  {
				display: inline-flex;
				width: 42px;
				height: 42px;
				border-radius: 50%;
				justify-content: center;
				align-items: center;
				background-color: $four_color;
				transform: scale(0);
				@include transition(0.5s);					    
				a {
					height: 42px;
					line-height: 42px;
				}
			}
		}
	}
}
// End Case
//--------------------------------------------------
body.rtl {
	.pxl-load-more-style1.loading .btn {
		padding-left: 60px;
		padding-right: 38px;
		&:after {
			right: auto;
			left: 20px;
		}
	}
	.pxl-portfolio-grid-layout1 .pxl-item--inner:hover .pxl-item--button {
		transform: translate(0, -50%) rotate(-45deg);
	}
}

// pxl-meta-box-grid1
.pxl-meta-box-grid1 {
	.pxl-item--inner {
		position: relative;
		background-color: #161616;
		border: 2px solid #363636;
		padding: 10px 10px 20px;
		text-align: center;
		&:hover {
			-webkit-transition-delay: .12s;
			-moz-transition-delay: .12s;
			transition-delay: .12s;
			border-color: transparent;
			.pxl-item--title {
				&:after {
					@include transform(translate3d(100%,0,0)skew(0));
				}
			}
			.hover-lines {
				border-left-width: 2px;
				border-right-width: 2px;
				height: 100%;
				transition: width 150ms cubic-bezier(.25,.25,.75,.75),height .1s cubic-bezier(.25,.25,.75,.75)145ms,border-left-width 0s cubic-bezier(.25,.25,.75,.75)145ms,border-right-width 0s cubic-bezier(.25,.25,.75,.75)145ms;
				width: 100%;
				&:after, &:before {
					transition: width .1s cubic-bezier(.19,1,.22,1)340ms;
					width: 50%;
				}
			}
		}
		.hover-lines {			
			border-bottom: 2px solid $primary_color;
			border-left: 0 solid $primary_color;
			border-right: 0 solid $primary_color;
			bottom: 0;
			box-sizing: border-box;
			height: 0;
			left: 50%;
			position: absolute;
			transform: translate3d(-50%,0,0);
			transition: width .1s cubic-bezier(.19,1,.22,1)340ms,height .1s cubic-bezier(.25,.25,.75,.75)145ms,border-left-width 0s cubic-bezier(.25,.25,.75,.75)340ms,border-right-width 0s cubic-bezier(.25,.25,.75,.75)340ms;
			width: 0;
			&:after,&:before {				
				background-color: $primary_color;
				content: "";
				height: 2px;
				left: 0;
				position: absolute;
				top: 0; 
				transition: width 150ms cubic-bezier(.25,.25,.75,.75)0s;
				width: 0%;
			}
			&:after {
				left: auto;
				right: 0;
			}
		}
		.pxl-item--title {
			font-size: 14px;
			font-weight: 700;
			line-height: 46px;
			letter-spacing: 0.21px;
			text-transform: uppercase;
			color: #fff;
			background-color: $primary_color;
			margin-bottom: 26px;
			position: relative;
			overflow: hidden;
			z-index: 1;
			&:after {
				z-index: -1;
				position: absolute;
				top: 0;
				left: -20%;
				height: 100%;
				content: '';
				background: #363636;
				width: 150%;				
				@include transform(skew(45deg));				
				@include transition(transform .4s cubic-bezier(.3,1,.8,1));
			}
		}
		.pxl-item--day {
			font-size: 12px;
			font-weight: 600;
			line-height: 14px;
			letter-spacing: 0.6px;
			text-transform: uppercase;
			color: #fff;
			margin-bottom: 5px;
		}
		.pxl-item--time {
			font-size: 14px;
			font-weight: 500;
			line-height: 26px;
			color: #fff;
		}
	}
}

.wp-title {
	.el--title {
		&.pxl-item--gradient {
			@include background-gradient-text(0deg, #888 0%, #fff 75%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}		
	}
	.el--sub-title {
		margin-bottom: 16px;
		span {
			position: relative;
			display: inline-block;
			font-weight: bold;
			color: #ffffff;
			border: solid 2px rgba(255, 255, 255, .25);
			padding: 0 15px 2px 15px;
			border-radius: 30px;
			-moz-border-radius: 30px;
			-webkit-border-radius: 30px;
		}
	}
}