Na}{

File Content: _general.scss

.layout-post-1{
	.item-featured{
		@include d-flex-align-justify-center();
		overflow: hidden;
		img{
			transform: scale(1.001);
		    transform-origin: bottom left;
		    filter: grayscale(100%);
		    @include transition(transform 1.02s linear);
		}
		.pxl-overlay{
			opacity: 0;
			background-color: rgba(#000, 0.54);
			@include transform(translateY(80%));
			@include transition(all .3s linear);
		}
	}
	.item-readmore{
		position: absolute;
		margin-top: -27px;
		top: 55%;
		@include transform(translateY(-50%));
		opacity: 0;
		@include transition(all .3s linear);
	}
	.item-content{
		padding-top: 13px;
		padding-bottom: 15px;
	}
	.item-post-meta{
		font-size: 14px;
		letter-spacing: 0.05em;
		color: $primary_color;
		margin-bottom: 6px;
		a{
			color: inherit;
			&:hover{
				color: $link_color_hover;
			}
		}
		.meta-inner{
			margin-left: -27px;
			margin-right: -27px;
			@media (max-width: $sm_max){
				margin-left: -15px;
				margin-right: -15px;
			}
			>*{
				padding-left: 27px;
				padding-right: 27px;
				position: relative;
				@media (max-width: $sm_max){
					padding-left: 15px;
					padding-right: 15px;
				}
				&+*{
					&:before{
						content: "";
						width: 30px;
						height: 1px;
						position: absolute;
						top: 50%;
						left: 0;
						background-color: $primary_color;
						@include transform(translateX(-50%));
						@media (max-width: $sm_max){
							width: 10px;
						}
					}
				}
			}
		}
		
	}
	.item-title{
		font-size: 22px;
		line-height: 30px;
		letter-spacing: 0.05em;
		color: #080808;
		text-transform: uppercase;
		font-weight: 400;
		margin-bottom: 0;
		@include text-truncate-multi-line(22px, 1.36363636364, 2);
		a{
			color: inherit;
		}
	}
	.item-content-df{
		@include transform(translateY(0));
		opacity: 1;
		@include transition(all .3s linear);
	}
	.item-content-hover{
		position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    background-color: #1a1a1a;
	    padding: 25px 25px 35px 25px;
		opacity: 0;
		@include transform(translateY(0));
		@include transition(all .3s linear);
		@media (max-width: $sm_max){
			padding: 25px 15px 35px 15px;
		}
		.item-post-meta{
			color: #fff;
			margin-bottom: 8px;
			.meta-inner{
				>*{
					&+*{
						&:before{
							background-color: #fff;
						}
					}
				}
			}
		}
		.item-excerpt{
			color: #929292;
		}
	}
	.item-inner-wrap{
		&:hover{
			.item-featured{
				img{
					transform: scale(1.02);
				}
				.pxl-overlay{
					opacity: 1;
					@include transform(translateY(0));
				}
			} 
			.item-readmore{
				top: 50%;
				opacity: 1;
			}
			.item-content-df{
				@include transform(translateY(30px));
				opacity: 0;
			}
			.item-content-hover{
				opacity: 1;
				@include transform(translateY(-76px));
			}
		}
	}
	.nav-in-vertical .pxl-swiper-arrow, 
	.nav-out-vertical .pxl-swiper-arrow{
		top: 40%;
	}
}
.layout-post-2{
	.item-featured{
		position: relative;
		overflow: hidden;
		img{
			@media (max-width: $sm_max){
				width: 100%;
			}
		}
		&:before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			background-color: rgba(#000000, 0.76);
		}
	}
	.item-content{
		padding: 50px 30px 64px 45px;
		@include d-flex();
		align-items: flex-end;
		@include transition(padding .3s linear .3s);
		@media (max-width: $xs_max){
			padding: 50px 15px 64px 15px;
		}
	}
	.item-post-meta{
		position: relative;
		padding-bottom: 13px;
		&:after{
			content: "";
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 1px;
			background-color: rgba(#d4d4d4, 0.5);
			@include transition(width .3s linear);
		}
		span{
			font-size: 14px;
			letter-spacing: 0.055em;	
		}	
		a{
			color: inherit;
		}
		.meta-item{
			position: relative;
			opacity: 0;
			transform: translateX(50px);
			@include transition(all .4s ease 0s);
			&+.meta-item{
				padding-left: 36px;
				margin-left: 20px;
				&:before{
					content: "";
					position: absolute;
					left: 0;
					top: 50%;
					margin-top: -1px;
					width: 30px;
					height: 1px;
					background-color: #fff;
				}
			}
		}
		.number{
			font-size: 36px;
			line-height: 1;
			font-weight: 700;
			font-style: italic;
			letter-spacing: 0;
		}
	}
	.item-title{
		margin-top: 20px;
		margin-bottom: 0;
		font-size: 24px;
		font-weight: 700;
		line-height: 1.25;
		color: #fff;
		a{
			color: inherit;
		}
	}
	.item-excerpt{
		font-size: 16px;
		line-height: 26px;
		color: #cdcdcd;
		margin-top: 25px;
		opacity: 0;
		transform: translateX(50px);
		@include transition(all .4s ease 0s);
	}
	.item-readmore{
		position: absolute;
		left: 45px;
		bottom: 50px;
		@media (max-width: $xs_max){
			left: 50%;
			margin-left: -26px;
		}
		a:hover .pxli{
			background-color: $primary_color;
			color: #000;
		}
	}
	.item-inner-wrap{
		&:hover{
			.item-content{
				padding: 50px 30px 152px 45px;
				@include transition(padding .3s linear 0s);
				@media (max-width: $xs_max){
					padding: 50px 15px 152px 15px;
				}
			}
			.item-post-meta .meta-item{
				opacity: 1;
				transform: translateX(0);
				animation-delay: .3s;
				@include transition(all .4s ease .3s);
			}
			.item-excerpt{
				opacity: 1;
				transform: translateX(0);
				@include transition(all .4s ease .3s);
			}
		}
	}
}
.layout-post-3{
	.pxl-swiper-container{
		padding-top: 15px;
	}
	.item-inner-wrap{
		@include transition();
	}
	.item-featured{
		position: relative;
	 	overflow: hidden;
		img{
			width: 100%;
			transform: scale(1.001);
		    transform-origin: bottom left;
		    @include transition(transform 1.02s linear);
		}
		 
	}
	.item-content{
		background-color: #fff;	 
	    margin-top: -20px;
	    margin-left: 10px;
	    margin-right: 10px;
	    position: relative;
	    padding: 30px;
	    @media (max-width: $xs_max){
	    	padding: 20px 15px 0 15px;
	    }
	}
	.item-post-meta{
		position: relative;
		font-family: $heading_font_family;
		font-size: 12.83px;
		font-weight: 700;
		color: #fff;
		letter-spacing: 0.02em;
		text-transform: uppercase; 
		margin-bottom: 16px;
		a{
			color: inherit;
		}
		.meta-item{
			padding: 6px 15px;
			background-color: #000; 
			@include transition();
			&+.meta-item{
			 	margin-left: 5px;
			}
			&:hover{
				background-color: $primary_color;
			}
		}
		 
	}
	.item-title{
		font-size: 27.79px;
		line-height: 1.23;
		font-weight: 700;
		text-transform: uppercase;
		margin-bottom: 3px;
		@media (max-width: $lg_max){
			font-size: 24px;
		}
		a{
			color: inherit;
			&:hover{
				color: $link_color_hover;
			}
		}
	}
	&.truncate-title-yes{
		.item-title{
			@include text-truncate-multi-line(27.79px, 1.23, 2);
			@media (max-width: $lg_max){
				@include text-truncate-multi-line(24px, 1.23, 2);
			}
		}
	}
	.pxl-readmore{
		font-weight: 700;
    	letter-spacing: 0.1em;
    	position: relative;
    	&:before{
    		content: "";
    		position: absolute;
    		left: 0;
    		bottom: 3px;
    		width: 0;
    		height: 1px;
    		background-color: $primary_color;
    		@include transition(width .3s ease);
    	}
    	&:hover{
    		&:before{
    			width: 100%;
    		}
    	}
	}
	 
	.item-inner-wrap{
		&:hover{
			@include transform(translateY(-15px));
			.item-featured{
				img{
					transform: scale(1.02);
				}
			}
			 
			.item-post-meta .meta-item{
				background-color: $primary_color;
			}
			.item-title{
				color: $primary_color;
			}
			.pxl-readmore{
				color: $primary_color;
				&:before{
	    			width: 100%;
	    		}
			}
		}
	}
	&.dark-style{
		.item-content{
			background-color: #161616;
		}
		.item-post-meta{
			color: #fff;
			.meta-item{
				background-color: #272727;	
			}
		} 
		.item-title{
			color: #fff;
		}
		.pxl-readmore{
			color: #fff;
			&:hover{
				color: $primary_color;
			}
		}
	}
}

Name	Size	Permission
_basic.scss	103717 bytes	0644
_carousel.scss	50347 bytes	0644
_general.scss	8176 bytes	0644
_grid.scss	24430 bytes	0644
_slider.scss	14511 bytes	0644
elements.scss	150 bytes	0644