Sid Gifari Advanced File Manager

✏️ Editing: posts.scss

/*--------------------------------------------------------------
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;
    }
	&.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-dark {
			.pxl-swiper-arrow {
				background-color: #262626;
				border-color: #262626;
				color: #616161;
				&:hover {
					border-color: $primary_color;
					background-color: $primary_color;
					color: #fff;
				}
			}
			.pxl-arrow-label {
				color: #adadad;
			}
		}
	}
	&.style-2 {
		.pxl-swiper-arrow {
			width: 75px;
			min-width: 75px;
			height: 70px;
			color: #000;
			background-color: #fff;
			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);
			}
			&:hover, &.pxl-active {
				background-color: $primary_color;
				color: #fff;
			}
			i {
				display: inline-flex;
			}
		}
	}
	&.style-3 {
		.pxl-swiper-arrow {
			width: 74px;
			height: 63px;
			font-size: 14px;
			color: #fff;
			background-color: #0f0f0f;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			&:hover, &.pxl-active {
				background-color: $primary_color;
				color: #fff;
			}
			&.pxl-swiper-arrow-prev i {
				transform: translateX(11px);
			}
			&.pxl-swiper-arrow-next i {
				transform: translateX(-11px);
			}
		}
	}
	&.style-4 {
		.pxl-swiper-arrow {
			width: 52px;
			height: 52px;
			border-radius: 52px;
			color: #fff;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			font-size: 15px;
			margin: 0 10px;
			position: relative;
			z-index: 1;
			&:after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border-radius: 100%;
				background-color: #000;
				z-index: -2;
				@include transition(all 300ms linear 0ms);
			}
			&:before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border-radius: 100%;
				@include background-horizontal($gradient_color_from, $gradient_color_to);
				z-index: -1;
				@include transition(all 300ms linear 0ms);
				opacity: 0;
			}
			&:hover {
				&:before {
					opacity: 1;
				}
				&:after {
					opacity: 0;
				}
			}
			&.pxl-swiper-arrow-prev i {
				transform: rotate(-135deg);
			}
			&.pxl-swiper-arrow-next i {
				transform: rotate(45deg);
			}
		}
	}
	&.style-5 {
		.pxl-swiper-arrow {
			position: relative;
			width: 45px;
			height: 45px;
			z-index: 1;
			font-size: 18px;
			color: #7f7d9b;
			@include transition(all 300ms linear 0ms);
			display: inline-flex;
			justify-content: center;
			align-items: center;
			margin: 0 6px;
			&:before, &:after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border-radius: 100%;
				z-index: -1;
				@include transition(all 300ms linear 0ms);
			}
			&:before {
				background-color: #ecf2fa;
			}
			&:after {
				opacity: 0;
				@include background-horizontal($gradient_color_from, $gradient_color_to);
			}
			&:hover {
				color: #fff;
				&:before {
					opacity: 0;
				}
				&:after {
					opacity: 1;
				}
			}
		}
	}
}

.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;
    			}
    		}
    	}
    	&.pxl-swiper-pagination-progressbar {
    		max-width: 1170px;
    		margin-left: auto;
    		margin-right: auto;
    		background-color: #dcdcdc;
    		margin-top: 109px;
    		.swiper-pagination-progressbar-fill {
    			height: 5px;
    			bottom: -2px;
    		}
    	}
    }
    &.style-3 {
    	&.pxl-swiper-pagination-bullets {
    		margin-top: 10px;
			justify-content: center;
			display: flex;
    		.pxl-swiper-pagination-bullet {
    			width: 12px;
    			height: 12px;
    			background-color: #c0c0c0;
    			margin: 0 4px;
    			position: relative;
    			&:before {
    				content: '';
    				width: 26px;
    				height: 26px;
    				border: 3px solid $primary_color;
    				top: -7px;
    				left: -7px;
    				position: absolute;
    				opacity: 0;
    				@include transition(all 300ms linear 0ms);
    			}
    			&.swiper-pagination-bullet-active {
    				background-color: $primary_color;
    				margin: 0 9px;
    				&:before {
    					opacity: 1;
    				}
    			}
    		}
    	}
    }

&.style-4 {
		width: 114px;
		background-color: #ededed;
		height: 3px;
		display: flex;
		flex-wrap: nowrap;
		&.pxl-swiper-pagination-bullets {
			span {
				width: 100%;
				@include transition(all 300ms linear 0ms);
				&.swiper-pagination-bullet-active {
					background-color: $primary_color;
				}
			}
		}
	}
	&.style-5 {
		padding-top: 20px;
		&.pxl-swiper-pagination-bullets {
    		display: flex;
			flex-wrap: wrap;
			justify-content: center;
			padding-top: 16px;
    		.pxl-swiper-pagination-bullet {
    			width: 7px;
    			height: 8px;
    			background-color: #b8b8b8;
    			border-radius: 7px;
    			margin: 0 6px;
    			&.swiper-pagination-bullet-active {
    				background-color: #395189;
    			}
    		}
    	}
	}
}

.pxl-swiper-fraction-first, .pxl-swiper-fraction-last {
	font-size: 20px;
	font-weight: 700;
	color: #040505;
	@extend .ft-theme-default;
	margin: 0 16px;
	display: inline-flex;
}

.pxl-swiper-dots-wrap.style-4 {
	max-width: 200px;
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

// Grid Reset
.pxl-grid, .pxl-post-carousel, .pxl-post-modern, .pxl-swiper-slider {
	.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, &.deactive-click: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;
		}
		.pxl-loadmore-text {
			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;
	}
	&.style-1 {
		justify-content: center;
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 60px;
		.filter-label {
			font-size: 16px;
			color: #969696;
			font-weight: 700;
			@extend .ft-theme-default;
			margin: 10px 17px 10px 17px;
		}
		.filter-item {
			font-size: 16px;
			color: #969696;
			font-weight: 700;
			@extend .ft-theme-default;
			margin: 10px 17px 10px 17px;
			&:before {
				content: '';
				width: 0;
				left: 0;
				right: 0;
				margin: auto;
				bottom: 1px;
				background-color: #535667;
				height: 1px;
				@include transition(all 300ms linear 0ms);
				position: absolute;
			}
			&.active {
				color: #01062e;
				&:before {
					width: 100%;
				}
			}
		}
		.pxl--filter-inner {
			border: 1px solid #e7e7e7;
			border-radius: 72px;
			width: 100%;
			max-width: 820px;
			justify-content: center;
			padding: 13px 10px;
		}
	}
}

// Start Blog
.pxl-post-carousel1, .pxl-post-carousel3 {
	.pxl-swiper-dots-wrap {
		padding-top: 35px;
	}
}
.title-hover-line {
	a {
		background-repeat: no-repeat;
		background-position-y: -1px;
		background-image: linear-gradient(transparent calc(100% - 1px), $primary_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;
		}
	}
	&.title-hover-line-dark a {
		background-image: linear-gradient(transparent calc(100% - 1px), #010101 1px);
	}
}
.pxl-blog-style1 {
	.pxl-post--featured {
		border-radius: 10px;
		margin-bottom: 16px;
	}
	.pxl-post--title {
		margin-bottom: 25px;
		font-size: 30px;
		line-height: 1.166667;
		@media #{$max-sm} {
			font-size: 24px;
		}
		a {
			background-position-y: -1px;
			background-image: linear-gradient(transparent calc(100% - 1px), #01062e 1px);
		}
	}
	.pxl-post--meta {
		font-size: 15px;
  		color: #01062e;
  		@extend .ft-theme-default;
  		display: flex;
  		flex-wrap: wrap;
  		margin: 0 -13px;
  		align-items: center;
  		> div {
  			padding: 0 13px;
  			margin-bottom: 10px;
  		}
  		.pxl-post--category {
  			a {
  				line-height: 24px;
				display: inline-flex;
				border: 2px solid $primary_color;
				border-radius: 28px;
				padding: 0 15px;
				&:hover {
					color: #fff;
					background-color: $primary_color;
				}
  			}
  		}
	}
	.pxl-post--author {
		.pxl-author--img {
			width: 36px;
  			min-width: 36px;
			img {
				border-radius: 36px;
			}
		}
		.pxl-author-meta {
			h6 {
				margin-top: -5px;
				margin-bottom: 0;
				font-size: 16px;
			}
			span {
				font-size: 14px;
				color: #717171;
			}
		}
	}
	.post-button-video {
		width: 46px;
		height: 46px;
		position: absolute;
		border: 4px solid #fff;
		right: 34px;
		bottom: 37px;
		border-radius: 46px;
		color: #fff;
		font-size: 14px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		z-index: 99;
	}
	.button-video-overlay {
		z-index: 88;
		position: absolute;
		bottom: -16px;
		right: -20px;
		width: 152px;
		height: 152px;
		background-image: url(../img/button-shadow.png);
	}
	.pxl-post--inner {
		margin-bottom: 40px;
	}
}

.pxl-blog-style2 {
	.title-hover-line a {
		background-image: linear-gradient(transparent calc(100% - 1px), #252525 1px);
	}
	.pxl-post--title {
		font-size: 28px;
		line-height: 1.25;
		@media #{$max-lg} {
			font-size: 24px;
		}
	}
	.pxl-post--meta {
		font-size: 15px;
		color: #c5cfd4;
		font-weight: 500;
		margin-bottom: 17px;
		i, span {
			color: $primary_color;
		}
		.flaticon-pen {
			font-size: 20px;
		}
		> div {
			align-items: center;
		}
	}
	.pxl-post--featured {
		background-color: #000;
		svg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			fill: $primary_color;
			opacity: 0;
			@include transition(all 300ms linear 0ms);
			.fill-dark {
				fill: #15333d;
			}
			.fill-primary {
				opacity: 0.84;
			}
			&.svg-slide-left {
				@include transform(translateX(-60%));
			}
			&.svg-slide-right {
				@include transform(translateX(60%));
			}
		}
	}
	.pxl-post--iconplus {
		font-size: 30px;
		color: #fff;
		font-weight: 600;
		width: 48px;
		height: 48px;
		background-color: $primary_color;
		text-align: center;
		line-height: 48px;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		@include transition(all 300ms linear 0ms);
		opacity: 0;
		@include transform(translateY(40px));
	}
	.pxl-post--content {
		font-size: 17px;
		color: #696969;
		font-weight: 500;
	}
	.pxl-post--holder {
		padding: 32px 40px 37px;
		@media #{$max-lg} {
			padding-left: 30px;
			padding-right: 30px;
		}
	}
	.pxl-item--inner {
		background-color: #fff;
		margin-bottom: 30px;
		box-shadow: 0 11px 16px rgba(#0c0c0c, 0.06);
		&:hover {
			.pxl-post--featured {
				img {
					opacity: 0.67;
				}
				svg {
					opacity: 1;
					&.svg-slide-left {
						@include transform(translateX(0%));
					}
					&.svg-slide-right {
						@include transform(translateX(0%));
					}
				}
			}
			.pxl-post--iconplus {
				opacity: 1;
				@include transform(translateY(0px));
			}
		}
	}
}

.pxl-blog-style3 {
	.pxl-post--featured {
		border-radius: 8px;
		margin-bottom: 32px;
		&:before {
			content: '';
			z-index: 1;
			@include transition(all 300ms linear 0ms);
			opacity: 0;
			background-color: rgba(#000, 0.67);
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border-radius: 8px;
		}
	}
	.pxl-post--button {
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		@include transform(translate(0, -50%));
		display: flex;
		justify-content: center;
		margin-top: -30px;
		@include transition(all 300ms linear 0ms);
		opacity: 0;
		z-index: 99;
	}
	.pxl-post--category {
		font-size: 12px;
		text-transform: uppercase;
		font-weight: 700;
		margin-bottom: 10px;
		@extend .ft-theme-default;
		a {
			color: $primary_color;
		}
	}
	.pxl-post--title {
		margin-bottom: 32px;
		font-size: 24px;
	}
	.pxl-post--date {
		font-size: 12px;
		font-weight: 600;
		@extend .ft-theme-default;
		color: #767676;
	}
	.pxl-item--inner:hover {
		.pxl-post--button {
			opacity: 1;
			margin-top: 0px;
		}
		.pxl-post--featured:before {
			opacity: 1;
		}
	}
}
// End Blog

// Start Portfolio
.pxl-portfolio-style1 {
	.pxl-post--icon {
		line-height: 1;
		font-size: 25px;
		color: #fff;
		margin-bottom: 18px;
		@media #{$max-sm} {
			margin-bottom: 12px;
		}
	}
	.pxl-post--title {
		margin-bottom: 16px;
		font-size: 24px;
		color: #fff;
		@media #{$max-sm} {
			margin-bottom: 10px;
		}
	}
	.pxl-post--category {
		font-size: 16px;
		color: #ffffff;
	}
	.pxl-post--holder {
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		padding: 0 30px;
		transform: translate(0, -50%);
		text-align: center;
		z-index: 99;
	}
	.pxl-post--overlay {
		background-color: rgba(#01062e, 0.72);
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		@include transition(all 300ms linear 0ms);
		transition-delay: 120ms;
	}
	.pxl-post--inner {
		position: relative;
		margin-bottom: 36px;
		&:not(.active-hover):not(.none-hover) {
			.pxl-holder--inner {
				visibility: hidden;
			}
		}
		&.active-hover {
			.pxl-holder--inner {
				visibility: visible;
				-webkit-animation-name: pxlSkewIn;
				animation-name:pxlSkewIn;
				-webkit-animation-fill-mode:both;
				animation-fill-mode:both;
				-webkit-animation-duration: 800ms;
				animation-duration: 800ms;
				-webkit-animation-timing-function:cubic-bezier(.4,0,.2,1);
				animation-timing-function:cubic-bezier(.4,0,.2,1);
				will-change:transform;
				-webkit-backface-visibility:hidden;
				backface-visibility:hidden;
			}
		}
		&.none-hover {
			.pxl-holder--inner {
				-webkit-animation-name: pxlSkewInOut;
				animation-name:pxlSkewInOut;
				-webkit-animation-fill-mode:both;
				animation-fill-mode:both;
				-webkit-animation-duration: 800ms;
				animation-duration: 800ms;
				-webkit-animation-timing-function:cubic-bezier(.4,0,.2,1);
				animation-timing-function:cubic-bezier(.4,0,.2,1);
				will-change:transform;
				-webkit-backface-visibility:hidden;
				backface-visibility:hidden;
			}
		}
		&:hover {
			.pxl-post--overlay {
				opacity: 1;
				transition-delay: 0ms;
			}
		}
	}
	@media #{$min-xl2} {
		.pxl-grid-item.col-xl-6.col-lg-6 {
			.pxl-post--icon {
				font-size: 36px;
			}
			.pxl-post--title {
				font-size: 30px;
			}
			.pxl-post--category {
				font-size: 18px;
			}
		}
	}
}

.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-post--featured {
		border-radius: 10px;
		margin-bottom: 24px;
	}
	.pxl-post--title {
		margin-bottom: 23px;
		font-size: 24px;
	}
	.pxl-post--content {
		font-size: 18px;
		color: #4f4f4f;
		margin-bottom: 15px;
	}
	.pxl-post--inner {
		padding: 17px 0;
		&:hover .btn-hover-divider {
			letter-spacing: 0px;
			&:before {
				width: 100%;
			}
		}
	}
	.pxl-swiper-dots-wrap {
		.pxl-swiper-dots {
			display: inline-flex;
			span:first-child {
				margin-left: 0;
			}
			span:last-child {
				margin-right: 0;
			}
		}
	}
	.pxl-swiper-dots.style-1.pxl-swiper-pagination-fraction {
		margin-top: 8px;
	}
}

.pxl-portfolio-carousel2 {
	.pxl-post--category {
		font-size: 15px;
		color: $primary_color;
		margin-bottom: 8px;
	}
	.pxl-post--title {
		font-size: 20px;
		color: #fff;
		margin-bottom: 0;
	}
	.pxl-post--holder {
		margin: 0 40px;
		background-color: #15333d;
		padding: 25px 34px 28px;
		position: relative;
		z-index: 99;
		box-shadow: 0 22px 38px rgba(#051b2e, 0.06);
		@include transition(all 300ms linear 0ms);
		@media #{$max-xxl} {
			margin-left: 27px;
			margin-right: 27px;
			padding-left: 22px;
			padding-right: 22px;
		}
	}
	.pxl-post--featured {
		background-color: #01050e;
		svg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			fill: $primary_color;
			@include transition(all 300ms linear 0ms);
			opacity: 0;
			.fill-dark {
				fill: #15333d;
			}
			.fill-primary {
				opacity: 0.84;
			}
			&.svg-slide-top {
				transform: translateY(-60%);
			}
			&.svg-slide-bottom {
				transform: translateY(60%);
			}
		}
		+ .pxl-post--holder {
			margin-top: -55px;
		}
	}
	.pxl-featured--overlay {
		&:before, &:after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 60%;
			@include transition(all 300ms linear 0ms);
		}
		&:before {
			@include background-gradient-bottom(rgba(#000, 0), rgba(#000, 0.95));
		}
		&:after {
			opacity: 0;
			@include background-gradient-bottom(rgba(#000, 0), $primary_color);
			height: 40%;
		}
	}
	.pxl-post--iconplus {
		font-size: 30px;
		color: #fff;
		font-weight: 600;
		width: 48px;
		height: 48px;
		background-color: $primary_color;
		text-align: center;
		line-height: 48px;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		@include transition(all 300ms linear 0ms);
		opacity: 0;
		@include transform(translateY(40px));
	}
	.pxl-post--inner {
		margin-bottom: 60px;
		&:hover {
			.pxl-post--featured {
				img {
					opacity: 0.4;
				}
				svg {
					opacity: 1;
					&.svg-slide-top {
						transform: translateY(0%);
					}
					&.svg-slide-bottom {
						transform: translateY(0%);
					}
				}
			}
			.pxl-featured--overlay {
				&:before {
					opacity: 0;
				}
				&:after {
					opacity: 0.95;
				}
			}
			.pxl-post--holder {
				background-color: #fff;
			}
			.pxl-post--title {
				color: #0e0e0e;
			}
			.pxl-post--iconplus {
				opacity: 1;
				@include transform(translateY(0px));
			}
		}
	}
}
// End Portfolio

// Start Service
.pxl-service-style1 {
	.pxl-post--icon {
		line-height: 1;
		font-size: 72px;
		opacity: 0.22;
		color: $primary_color;
		position: absolute;
		top: 25px;
		right: 25px;
		@include transition(all 300ms linear 0ms);
	}
	.pxl-icon--bottom {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 100px;
		height: 86px;
		background-color: $primary_color;
		font-size: 52px;
		color: #000;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		@include transition(all 300ms linear 0ms);
		opacity: 0;
		@include transform(scale(0));
		transform-origin: bottom right;
	}
	.pxl-post--category {
		font-size: 16px;
		color: rgba(#fff, 0.34);
		margin-bottom: 10px;
	}
	.pxl-post--title {
		font-size: 24px;
		margin-bottom: 30px;
		position: relative;
		color: #fff;
		padding-bottom: 25px;
		&:before {
			content: '';
			width: 42px;
			height: 2px;
			background-color: $primary_color;
			position: absolute;
			bottom: 0;
			left: 0;
		}
	}
	.pxl-post--content {
		font-size: 16px;
		line-height: 1.625;
		color: rgba(#fff, 0.85);
		margin-bottom: 25px;
	}
	.pxl-post--holder {
		padding: 60px 44px;
		background-color: #051c24;
		position: relative;
		@include transition(all 300ms linear 0ms);
		z-index: 1;
		@media #{$max-lg} {
			padding-left: 34px;
			padding-right: 34px;
		}
		&:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: -2;
			border: 6px solid $primary_color;
			@include transition(all 300ms linear 0ms);
			opacity: 0;
		}
	}
	.pxl-icon--arrow {
		width: 0;
		height: 0;
		position: absolute;
		left: 68px;
		bottom: 6px;
		z-index: -1;
		&:before, &:after {
			content: '';
			position: absolute;
			width: 0;
			height: 0;
			@include transition(all 300ms linear 0ms);
		}
		&:before {
			border-width: 22px;
			border-style: solid;
			border-color: #051c24 transparent transparent;
			z-index: -2;
			top: 0;
			left: 0;
		}
		&:after {
			border-width: 22px;
			border-style: solid;
			border-color: #15333d transparent transparent;
			z-index: -1;
			top: -8px;
			left: 0;
			opacity: 0;
		}
	}
	.pxl-post--inner {
		&:hover {
			.pxl-post--icon {
				opacity: 0;
				@include transform(scale(0));
			}
			.pxl-icon--bottom {
				opacity: 1;
				@include transform(scale(1));
			}
			.pxl-post--holder {
				background-color: #15333d;
				&:before {
					opacity: 1;
				}
			}
			.pxl-icon--arrow {
				&:before {
					border-color: $primary_color transparent transparent;
				}
				&:after {
					opacity: 1;
				}
			}
		}
	}
}
// End Service

// Button Readmore Style
.btn-readmore-1 {
	color: #fff;
	font-size: 15px;
	line-height: 35px;
	font-weight: 700;
	@extend .ft-theme-default;
	display: inline-flex;
	align-items: center;
	position: relative;
	padding-right: 43px;
	z-index: 1;
	&:before {
		content: '';
		background-color: $primary_color;
		position: absolute;
		left: calc(100% - 35px);
		height: 100%;
		z-index: -1;
		transition: left .3s cubic-bezier(.4, 1.7, .7, .8);
		right: 0;
	}
	i {
		width: 35px;
		height: 35px;
		position: absolute;
		top: 0;
		right: 0;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		font-size: 13px;
		color: #000;
		font-weight: 400;
	}
	&:hover, &:focus {
		color: #fff;
		padding-left: 18px;
		&:before {
			left: 0;
		}
	}
}

body.rtl {
	.pxl-swiper-dots.style-2.pxl-swiper-pagination-bullets {
		left: auto;
		right: 50%;
		transform: translate(50%, 0);
	}
	.pxl-portfolio-carousel1 .pxl-swiper-dots-wrap .pxl-swiper-dots span:first-child {
		margin-left: 36px;
		margin-right: 0;
	}
	.pxl-portfolio-carousel1 .pxl-swiper-dots-wrap .pxl-swiper-dots span:last-child {
		margin-right: 36px;
		margin-left: 0;
	}
	.btn-hover-divider::before {
		left: auto;
		right: 0;
	}
}

📁 File Manager Pro