/* #Blog list
================================================== */
@post-meta-font-style: normal;
@post-meta-font-weight: normal;
@post-meta-text-transform: none;
@post-content-font-style: normal;
@post-content-font-weight: normal;
@post-content-text-transform: none;
@post-title-font-style: normal;
@post-title-font-weight: normal;
@post-title-text-transform: none;

@import "inline-mixin.less";

// DYNAMIC_IMPORT_TOP

.rollover-background-gradient(@firstColor, @gradient) when (isstring(~"@gradient")) {
	background: @firstColor;
	background: -webkit-linear-gradient(@gradient);
	background: linear-gradient(@gradient);
}

.paginator {
	.@{unique-shortcode-class-name} & {
		.custom-mixin-pagination-gap (@shortcode-pagination-gap);
	}
}
.filter {
	.@{unique-shortcode-class-name} & {
		.custom-mixin-filter-gap (@shortcode-filter-gap);
		& a,
		& a * {
			.custom-mixin-color (@shortcode-filter-color);
		}
	}
}
.paginator {
	.@{unique-shortcode-class-name} & {
		& a,
		& a * {
			.custom-mixin-color (@shortcode-filter-color);
		}
		& .button-load-more {
			.custom-mixin-fade-border (@shortcode-filter-color, @opacity:10%);
			&:hover {
				.custom-mixin-fade-border (@shortcode-filter-color, @opacity:21%)
			}
		}
	}
}
.filter-categories a {
	.@{unique-shortcode-class-name} .filter:not(.filter-bg-decoration):not(.filter-underline-decoration) & {
		&:hover,
		&.act {
			.custom-mixin-filter-color (@shortcode-filter-accent, 100%);
		}
		
	}
	.@{unique-shortcode-class-name} .filter-bg-decoration & {
		&:not(.act):hover {
			.custom-mixin-filter-color (@shortcode-filter-accent, 100%);
		}
		&.act {
			color: #fff;
		}
	
		&.act:after {
			.custom-mixin-fade-bg (@shortcode-filter-accent);
		}
	}
	.@{unique-shortcode-class-name} .filter-underline-decoration & {
		&:after {
			.custom-mixin-fade-bg (@shortcode-filter-accent);
		}
	}
}

.paginator:not(.paginator-more-button) a {
	.@{unique-shortcode-class-name} & {
		&:after {
			.custom-mixin-fade-bg (@shortcode-filter-accent, 100%);
		}
	}
}
.filter-switch {
	#page .@{unique-shortcode-class-name} & {
		.custom-mixin-fade-bg (@shortcode-filter-accent, 20%);
	}
}
.filter-switch-toggle {
	.@{unique-shortcode-class-name} & {
		.custom-mixin-fade-bg (@shortcode-filter-accent);
	}
}
//Gap between posts
article {
	.@{unique-shortcode-class-name}:not(.mode-masonry) & {
		margin-top: @gap-between-posts;
		&:first-of-type,
		&.visible.first {
			margin-top: 0;
		}
	}
	.@{unique-shortcode-class-name}.dividers-on:not(.mode-masonry) & {
		margin-top: 0;
		padding-top: @gap-between-posts;
		&:first-of-type,
		&.visible.first {
			margin-top: 0;
			padding-top: 0;
		}
	}
	.@{unique-shortcode-class-name}.hover-scale & {
		&:after {
			.custom-mixin-bg (@portfolio-rollover-bg);
			.rollover-background-gradient (@portfolio-rollover-bg, @portfolio-rollover-bg-gradient);
		}
	}
	.@{unique-shortcode-class-name}.gradient-overlay-layout-list & {
		border-radius: @portfolio-image-border-radius;
	}
}

//Thumbnail
.post-thumbnail-wrap {
	.@{unique-shortcode-class-name} & {
		padding: @post-thumb-padding-top @post-thumb-padding-right @post-thumb-padding-bottom @post-thumb-padding-left;
		border-radius: @portfolio-image-border-radius;
	}
}
.post-thumbnail,
.post-thumbnail-wrap a,
.post-thumbnail-wrap a img,
.album-rollover,
//.post-thumbnail .rollover i,
.post-thumbnail-rollover:after {
	.@{unique-shortcode-class-name} & {
		border-radius: @portfolio-image-border-radius;
	}
}
//.post-thumbnail .rollover i,
.post-thumbnail-rollover:after {
	.@{unique-shortcode-class-name}.enable-bg-rollover & {
		.custom-mixin-bg (@portfolio-rollover-bg);
		.rollover-background-gradient (@portfolio-rollover-bg, @portfolio-rollover-bg-gradient);
	}
}
.album-rollover {
	.@{unique-shortcode-class-name} & {
		margin-top: @icon-gap-before;
		margin-bottom: @icon-gap-below;

	}
	.@{unique-shortcode-class-name}.enable-bg-rollover:not(.content-rollover-layout-list) & {
		.bottom-overlap-layout-list& {
			height: calc(100% ~'-' @post-content-top-overlap);
		}
	}

}

//.post-thumbnail .rollover i,
.post-thumbnail-rollover:after {
	.@{unique-shortcode-class-name}.enable-bg-rollover & {
		.custom-mixin-bg (@portfolio-rollover-bg);
		.rollover-background-gradient (@portfolio-rollover-bg, @portfolio-rollover-bg-gradient);
	}
}
.post-thumbnail {
	.@{unique-shortcode-class-name}:not(.gradient-overlay-layout-list) & {
		box-shadow: @portfolio-img-shadow;
	}
}
article {
	.@{unique-shortcode-class-name}.gradient-overlay-layout-list & {
		box-shadow: @portfolio-img-shadow;
	}
}
.album-zoom-ico {
	.@{unique-shortcode-class-name} & {
		
		    width: @project-icon-bg-size;
		    height: @project-icon-bg-size;
		    line-height: @project-icon-bg-size;
		    border-radius: @project-icon-border-radius;
		    border-width: @project-icon-border-width;
		  	.custom-mixin-border (@project-icon-border-color);
		    .dt-icon-bg-on& {
		    	.custom-mixin-bg (@project-icon-bg-color);
		    }
		    font-size: @project-icon-size;
		    .custom-mixin-color (@project-icon-color);
		    & > span:before {
		    	font-size: @project-icon-size;
		    	line-height: @project-icon-bg-size;
		    }
		    & > span {
		    	.custom-mixin-color (@project-icon-color);
		    }
	}
}
//Title
.entry-title {
	.@{unique-shortcode-class-name} &,
	.@{unique-shortcode-class-name}.owl-carousel & {
		& a {
			.custom-mixin-color (@post-title-color);
		}

		margin-bottom: @post-title-margin-bottom;
		.custom-mixin-font-size (@post-title-font-size);
		.custom-mixin-line-height (@post-title-line-height);
		.custom-mixin-font-style ( @post-title-font-style);
		.custom-mixin-font-weight (@post-title-font-weight);
		.custom-mixin-text-transform (@post-title-text-transform);

	}
}
//Meta
.entry-meta {
	.@{unique-shortcode-class-name} & {
		margin-bottom: @post-meta-margin-bottom;
		& * {
			.custom-mixin-font-size (@post-meta-font-size);
			.custom-mixin-line-height (@post-meta-line-height);
			.custom-mixin-color (@post-meta-color);

			.custom-mixin-font-style ( @post-meta-font-style);
			.custom-mixin-font-weight (@post-meta-font-weight);
			.custom-mixin-text-transform (@post-meta-text-transform);
		}
	}
}
.portfolio-categories {
	.@{unique-shortcode-class-name} & {
		margin-bottom: @post-meta-margin-bottom;
	}
}

		.entry-meta > a:after,
		.entry-meta > span:after {
			.@{unique-shortcode-class-name} & {
				.custom-mixin-bg (@post-meta-color);
			}
		}
//Excerpt
.entry-excerpt {
	.@{unique-shortcode-class-name} & {
		margin-bottom: @post-excerpt-margin-bottom;
		
		.custom-mixin-font-size (@post-excerpt-font-size);
		.custom-mixin-line-height (@post-excerpt-line-height);
		& * {
			.custom-mixin-color (@post-content-color);
		}

		.custom-mixin-font-style ( @post-content-font-style);
		.custom-mixin-font-weight (@post-content-font-weight);
		.custom-mixin-text-transform (@post-content-text-transform);
	}
}

//Post content
.post-entry-content {
	.@{unique-shortcode-class-name}:not(.centered-layout-list) & {
		padding: @post-content-padding-top @post-content-padding-right @post-content-padding-bottom @post-content-padding-left;
	}
	.@{unique-shortcode-class-name}:not(.centered-layout-list):not(.content-bg-on):not(.mode-list) .no-img & {
		padding: 0;
	}
	.@{unique-shortcode-class-name}.content-bg-on:not(.classic-layout-list):not(.centered-layout-list):not(.gradient-overlay-layout-list) & {
		.custom-mixin-bg (@post-content-bg);
	}
	.@{unique-shortcode-class-name}.gradient-overlay-layout-list &  {
		border-radius: @portfolio-image-border-radius;
	}
}

.post-details.details-type-link,
.post-details.details-type-link * {
	.@{unique-shortcode-class-name} & {
		.custom-mixin-color (@post-title-color);
	}
}

@media screen and (max-width:@switch-blog-list-to-mobile){
	article {
		.@{unique-shortcode-class-name} & {
			-webkit-flex-flow: column nowrap;
		    -moz-flex-flow: column nowrap;
		    -ms-flex-flow: column nowrap;
		    flex-flow: column nowrap;
		    margin-top: 20px;
		}
		.@{unique-shortcode-class-name}.dividers-on & {
			border: none;
		}
		.@{unique-shortcode-class-name}.content-bg-on.centered-layout-list & {
			padding: 0;
		}
	}
		.post-thumbnail-wrap,
		.post-entry-content {
			#page .@{unique-shortcode-class-name} & {
				width: 100%;
				margin: 0;
				top: 0;
			}
		}
		.post-thumbnail-wrap {
			#page .@{unique-shortcode-class-name} & {
				padding: 0;
			}
		}
			.post-entry-content:after {
				#page .@{unique-shortcode-class-name} & {
					display: none;
				}
			}
		.post-thumbnail-wrap {
			#page .@{unique-shortcode-class-name} .project-even &,
			#page .@{unique-shortcode-class-name}.centered-layout-list & {
				-webkit-order: 0;
			    -moz-order: 0;
			    -ms-flex-order: 0;
			    order: 0;
			}
		}
		.post-entry-title-content {
			#page .@{unique-shortcode-class-name}.centered-layout-list & {
				-webkit-order: 1;
			    -moz-order: 1;
			    -ms-flex-order: 1;
			    order: 1;
			    width: 100%;
			    padding: 20px 20px 0;
			 }
		}
		.post-entry-content {
			#page .@{unique-shortcode-class-name}.centered-layout-list & {
				-webkit-order: 2;
			    -moz-order: 2;
			    -ms-flex-order: 2;
			    order: 2;
			    padding-top: 0;
			 }
		}
		.post-entry-content {
			#page .@{unique-shortcode-class-name} & {
				padding: 20px;
			}
		}
			.entry-title {
				#page .@{unique-shortcode-class-name} & {
					margin: 3px 0 5px;
					font-size: 20px;
					
					.custom-mixin-mob-font-size (@post-title-font-size);
		 			line-height: 26px;
					.custom-mixin-mob-line-height (@post-title-line-height);

				}
			}
			.entry-meta {
				#page .@{unique-shortcode-class-name} & {
					margin: 5px 0 5px;
				}
			}
			.entry-excerpt {
				#page .@{unique-shortcode-class-name} & {
					margin: 15px 0 0;
				}
			}
			.post-details {
				#page .@{unique-shortcode-class-name} & {
					margin: 5px 0 10px;
					&.details-type-link {
						margin-bottom: 2px;
					}
				}
			}
}

.dt-css-grid {
	.@{unique-shortcode-class-name}:not(.resize-by-browser-width) & {
	  	grid-row-gap: @grid-posts-gap*2;
	  	grid-column-gap: @grid-posts-gap*2;
    	//-ms-grid-columns:repeat(auto-fit, minmax(@grid-post-min-width, 1fr));
    	grid-template-columns:repeat(auto-fill, minmax(@grid-post-min-width, 1fr));
    	& .double-width {
	  		grid-column: span 2;
	  	}
	  	.cssgridlegacy.no-cssgrid &,
	  	.no-cssgridlegacy.no-cssgrid & {
	  		display: flex;
	  		flex-flow: row wrap;
	  		margin: -@grid-posts-gap;
	  		& .wf-cell {
	  			flex: 1 0 @grid-post-min-width;
				min-width: @grid-post-min-width;
				max-width: 100%;
				padding: @grid-posts-gap;
				box-sizing: border-box;
				&.double-width {
			  		//min-width: @grid-post-min-width*2;
			  	}
		  	}
	  	}
	}
	.@{unique-shortcode-class-name}.resize-by-browser-width & {
		//-ms-grid-columns: 1fr 1fr 1fr;
		grid-template-columns: repeat(@desktop-columns-num, 1fr);
	  	grid-template-rows: auto;
	  	grid-column-gap: @grid-posts-gap*2;
	  	grid-row-gap: @grid-posts-gap*2;
	  	
	  	& .double-width {
	  		grid-column: span 2;
	  	}
	  	.cssgridlegacy.no-cssgrid & {
	  		margin: -@grid-posts-gap;
	  		& .wf-cell {
				width: 100%/@desktop-columns-num;
				padding: @grid-posts-gap;
				&.double-width {
			  		width: calc(100%/@desktop-columns-num) * 2;
			  	}
		  	}
	  	}
	}

	.@{unique-shortcode-class-name}.resize-by-browser-width:not(.centered-layout-list):not(.content-bg-on) & {
  		grid-row-gap: @grid-posts-gap*2 - @post-content-padding-bottom;
	}
}
@media screen and (max-width: 1199px){
	.dt-css-grid {
		.@{unique-shortcode-class-name}.resize-by-browser-width & {
			grid-template-columns: repeat(@h-tablet-columns-num, 1fr);
			.cssgridlegacy.no-cssgrid &,
	  		.no-cssgridlegacy.no-cssgrid & {
		  		& .wf-cell {
					width: 100%/@h-tablet-columns-num;
					&.double-width {
				  		width: calc(100%/@h-tablet-columns-num)*2;
				  	}
			  	}
		  	}
		}
	}
}
@media screen and (max-width: 991px){
	.dt-css-grid {
		.@{unique-shortcode-class-name}.resize-by-browser-width & {
			grid-template-columns: repeat(@v-tablet-columns-num, 1fr);
			.cssgridlegacy.no-cssgrid &,
	  		.no-cssgridlegacy.no-cssgrid & {
		  		& .wf-cell {
					width: 100%/@v-tablet-columns-num;
					&.double-width {
				  		width: calc(100%/@v-tablet-columns-num)*2;
				  	}
			  	}
		  	}
		}
	}
}
@media screen and (max-width: 812px){
	.mixin-double-width (@a) when (isnumber(@a)) and (@a > 356) {
	  	grid-column: span 1;
	}
	.dt-css-grid {
		.@{unique-shortcode-class-name}:not(.resize-by-browser-width) & {
	    	& .double-width {
	    		.mixin-double-width (@grid-post-min-width);
	    	}
		}
	}
}
.drop-double-width (@a) when (@a < 2) {
  	grid-column: span 1;
}
@media screen and (max-width: 767px){
	.dt-css-grid {
		.@{unique-shortcode-class-name}.resize-by-browser-width & {
			grid-template-columns: repeat(@phone-columns-num, 1fr);
			& .double-width {
				 .drop-double-width (@phone-columns-num);
			}
			.cssgridlegacy.no-cssgrid &,
	  		.no-cssgridlegacy.no-cssgrid & {
		  		& .wf-cell {
					width: 100%/@phone-columns-num;
					&.double-width {
				  		width: calc(100%/@phone-columns-num)*2;
				  	}
			  	}
		  	}
		}
	}
	.mixin-double-width (@a) when (isnumber(@a)) and (@a > 350) {
	  	grid-column: span 1;
	}
	.dt-css-grid {
		.@{unique-shortcode-class-name}:not(.resize-by-browser-width) & {
	    	& .double-width {
	    		.mixin-double-width (@grid-post-min-width);
	    	}
		}
	}

}
@media screen and (max-width: 568px){
	.mixin (@a) when (isnumber(@a)) and (@a > 528) {
		grid-template-columns:repeat(auto-fill, minmax(528px, 1fr));
	}
	.mixin-double-width (@a) when (isnumber(@a)) and (@a > 264) {
	  	grid-column: span 1;
	}
	.dt-css-grid {
		.@{unique-shortcode-class-name}:not(.resize-by-browser-width) & {
	    	.mixin (@grid-post-min-width);
	    	& .double-width {
	    		.mixin-double-width (@grid-post-min-width);
	    	}
		}
	}
}
@media screen and (max-width: 420px){
	.mixin (@a) when (isnumber(@a)) and (@a > 370) {
		grid-template-columns:repeat(auto-fill, minmax(100%, 1fr));
	}
	.mixin-double-width (@a) when (isnumber(@a)) and (@a > 185) {
	  	grid-column: span 1;
	}
	.dt-css-grid {
		.@{unique-shortcode-class-name}:not(.resize-by-browser-width) & {
	    	.mixin (@grid-post-min-width);
	    	
	    	& .double-width {
		  		.mixin-double-width (@grid-post-min-width);
		  	}
		}
	}
}
@media screen and (max-width: 320px){
	.mixin (@a) when (isnumber(@a)) and (@a > 280) {
		grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
	}
	.mixin-double-width (@a) when (isnumber(@a)) and (@a > 140) {
	  	grid-column: span 1;
	}
	.dt-css-grid {
		.@{unique-shortcode-class-name}:not(.resize-by-browser-width) & {
	    	.mixin (@grid-post-min-width);
	    	
	    	& .double-width {
		  		.mixin-double-width (@grid-post-min-width);
		  	}
		}
	}
}

@media screen and (max-width:@hide-icon-after-width){
	.album-rollover {
		.@{unique-shortcode-class-name} & {
			display: none;
		}
	}
}

// DYNAMIC_IMPORT_BOTTOM