 /* #Shortcode carousel
================================================== */

 @import "inline-mixin.less";

.custom-mixin-color (@customColor) when (iscolor(@customColor)) {
	color: @customColor;
	background: none;
}
.custom-mixin-bg (@customColor) when (iscolor(@customColor)) {
	background: @customColor;
}
.custom-mixin-border (@customColor) when (iscolor(@customColor)) {
	border-color: @customColor;
}
.custom-mixin-shadow ( @string: "", @customColor) when (iscolor(@customColor)) {
	-webkit-box-shadow: @string @customColor;
	box-shadow:         @string @customColor;
}
.custom-mixin-font-size (@customSize) when (isnumber(@customSize)) {
	font-size: @customSize;
}
.custom-mixin-line-height (@customSize) when (isnumber(@customSize)) {
	line-height: @customSize;
}
.custom-mixin-width(@customSize) when (isnumber(@customSize)) {
	max-width: @customSize;
}
.custom-mixin-max-width(@customSize) when (isnumber(@customSize)) {
	width: @customSize;
}
.custom-mixin-pagination-gap (@customSize) when (isnumber(@customSize)) {
	margin-top: @customSize;
}
.custom-mixin-fade-border (@customColor, @opacity:100%) when (iscolor(@customColor)) {
	border-color: fade(@customColor, @opacity);
}
.custom-mixin-fade-bg (@customColor, @opacity:100%) when (iscolor(@customColor)) {
	background: fade(@customColor, @opacity);
}
.custom-mixin-font-style (@customString) when not(@customString = ~"") {
	font-style: @customString;
}
.custom-mixin-font-weight (@customString) when not(@customString = ~"") {
	font-weight: @customString;
}
.custom-mixin-text-transform (@customString) when not(@customString = ~"") {
	text-transform: @customString;
}

.@{unique-shortcode-class-name}.content-bg-on .team-container {
	.custom-mixin-bg (@post-content-bg);
}

.team-desc {
	.@{unique-shortcode-class-name} & {
		padding: @post-content-padding-top @post-content-padding-right @post-content-padding-bottom @post-content-padding-left;
	}
}
.team-author-name,
.team-author-name a {
	.@{unique-shortcode-class-name} & {
		.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);
	}
}
.post-details.details-type-link,
.post-details.details-type-link * {
	.@{unique-shortcode-class-name} & {
		.custom-mixin-color (@post-title-color);
	}
}
.team-author p {
	.@{unique-shortcode-class-name} & {
		margin-bottom: @team-position-margin-bottom;
		.custom-mixin-font-size (@team-position-font-size);
		.custom-mixin-line-height (@team-position-line-height);
		.custom-mixin-color (@team-position-color);

		.custom-mixin-font-style ( @team-position-font-style);
		.custom-mixin-font-weight (@team-position-font-weight);
		.custom-mixin-text-transform (@team-position-text-transform);
	}
}
.team-media {
	.@{unique-shortcode-class-name}  & {
		padding: @post-thumb-padding-top @post-thumb-padding-right @post-thumb-padding-bottom @post-thumb-padding-left;
		& a,
		& > span,
		& img {
			.custom-mixin-width(@team-img-max-width);
		}
		  
	}
	.@{unique-shortcode-class-name} .dt-css-grid & {
		& img {
			.custom-mixin-max-width(@team-img-max-width);
			max-width: 100%;
		}
	}
}
.team-content {
	.@{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);
	}
}
.team-media,
.team-media a.rollover,
.team-media a.rollover *,
.team-media img {
	.@{unique-shortcode-class-name}  & {
		border-radius: @img-border-radius;
	}
}
.soc-ico  {
	.@{unique-shortcode-class-name} & {
		margin-bottom: @team-icon-gap-below;
	}
}
.soc-ico a {
	.@{unique-shortcode-class-name} & {
		min-width: @soc-icon-bg-size;
		min-height: @soc-icon-bg-size;
		&:not(:last-child) {
			margin-right: @team-icon-gap;
		}
		
		//.custom-mixin-border ( @soc-icon-border-color);
		font-size: @soc-icon-size;
		border-radius: @soc-icon-border-radius;
		//color: @soc-icon-color;
		&:before,
		&:after {
			min-width: @soc-icon-bg-size;
			min-height: @soc-icon-bg-size;
			padding: inherit;
		}
	
		&:before {
			.dt-icon-border-on& {
				border: @soc-icon-border-width solid transparent;
			}
			#main .dt-icon-bg-on& {
				.custom-mixin-bg (@soc-icon-bg-color);
			}
			#main .dt-icon-border-on& {
				.custom-mixin-border (@soc-icon-border-color);
			}
		}
		&:hover {
			font-size: @soc-icon-size;
			
			& .soc-font-icon {
				#page & {
					.custom-mixin-color (@soc-icon-color-hover);
				}
			}
		}
		
		&:after {

			.dt-icon-border-hover-on& {
				border: @soc-icon-border-width solid transparent;
			}
			#main .dt-icon-hover-bg-on& {
				.custom-mixin-bg (@soc-icon-bg-color-hover);
			}
			#main .dt-icon-border-hover-on& {
				.custom-mixin-border (@soc-icon-border-color-hover);
			}
		}
		
		&:not(:hover) .soc-font-icon {
			#page & {
				.custom-mixin-color (@soc-icon-color);
			}
		}
		& .soc-font-icon {
			font-size: @soc-icon-size;
		}
	}
}

.filter {
	.@{unique-shortcode-class-name} & {
		.custom-mixin-filter-gap (@shortcode-filter-gap);
		& a,
		& a * {
			.custom-mixin-color (@shortcode-filter-color);
		}
	}
}
.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%);
		}
	}
}
.paginator {
	.@{unique-shortcode-class-name} & {
		.custom-mixin-pagination-gap (@shortcode-pagination-gap);
	}
}
.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%)
			}
		}
	}
}
.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;
    	grid-template-columns:repeat(auto-fill, minmax(@grid-post-min-width, 1fr));
	  	.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;
		  	}
	  	}
	}
	.@{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;
	  	.cssgridlegacy.no-cssgrid &,
	  	.no-cssgridlegacy.no-cssgrid & {
	  		margin: -@grid-posts-gap;
	  		& .wf-cell {
				width: 100%/@desktop-columns-num;
				padding: @grid-posts-gap;
		  	}
	  	}
	}
}
@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;
			  	}
		  	}
		}
	}
}
@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;
			  	}
		  	}
		}
	}
}

@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);
			.cssgridlegacy.no-cssgrid &,
	  		.no-cssgridlegacy.no-cssgrid & {
		  		& .wf-cell {
					width: 100%/@phone-columns-num;
			  	}
		  	}
		}
	}

}
@media screen and (max-width: 568px){
	.mixin (@a) when (isnumber(@a)) and (@a > 528) {
		grid-template-columns:repeat(auto-fill, minmax(528px, 1fr));
	}
	.dt-css-grid {
		.@{unique-shortcode-class-name}:not(.resize-by-browser-width) & {
	    	.mixin (@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));
	}
	.dt-css-grid {
		.@{unique-shortcode-class-name}:not(.resize-by-browser-width) & {
	    	.mixin (@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));
	}
	.dt-css-grid {
		.@{unique-shortcode-class-name}:not(.resize-by-browser-width) & {
	    	.mixin (@grid-post-min-width);
		}
	}
}
