.full-width-wrap .dt-shortcode .filter {
	width: @content-width;
}
@filter-border-radius: 100px;
@filter-decoration-line-size: 2px;
/* #FILTER
================================================== */
.filter {
	margin-bottom: @navigation-margin;
}
.paginator {
	margin-top: @navigation-margin;
}
	/*Theme Options -> Categorization, sorting & pagination style -> Font size*/
	.filter-categories {
		& a,
		& .customSelect {
			font: @filter-font-style @filter-font-variant @filter-font-weight @filter-font-size~"/"@filter-font-size + 4 @filter-font-family;
			text-transform: @filter-text-transform;
		}
	}
	.filter a,
	.filter a *,
	.filter .customSelect {
		.header-color;
	}
	.filter-categories a,
	.filter-extras > div {
		padding: @filter-item-padding-top @filter-item-padding-right @filter-item-padding-bottom @filter-item-padding-left;
		margin: @filter-item-margin-top @filter-item-margin-right @filter-item-margin-bottom @filter-item-margin-left;
	}
	
	.filter-categories a {
		.filter:not(.filter-bg-decoration):not(.filter-underline-decoration) & {
			&:hover,
			&.act {
				color: @accent-bg-color;
			}
			.accent-gradient & {
				&:hover,
				&.act {
					.text-gradient (@startColor: @accent-bg-color, @endColor: @accent-bg-color-2);
				}
			}
		}
		.filter-bg-decoration & {
			&:not(.act):hover {
				color: @accent-bg-color;
			}
			.accent-gradient & {
				&:not(.act):hover {
					.text-gradient (@startColor: @accent-bg-color, @endColor: @accent-bg-color-2);
				}
			}
			&.act {
				color: #fff;
			}
			.border-radius(@filter-border-radius);
			&.act:after {
				.accent-bg-mixin;
				.border-radius(@filter-border-radius);
			}
		}
		.filter-underline-decoration & {
			&:after {
				.accent-bg-mixin;
				height: @filter-decoration-line-size;
			}
		}
	}
/*Sorting*/
.filter-switch {
	/*Style -> Material design style*/
	#page & {
		background-color: fade(@accent-bg-color, 20%);
	}
	.accent-gradient #page & {
		.background-fade-gradient (@startColor: @accent-bg-color, @endColor: @accent-bg-color-2, @opacity: 20%);
	}
}

.filter .filter-categories a.act:after,
.filter-switch-toggle {
	background-color: @accent-bg-color;
	.accent-gradient & {
		.background-gradient (@startColor: @accent-bg-color, @endColor: @accent-bg-color-2);
	}
}
/* #PAGINATOR
================================================== */

/*pagination style -> color*/
.paginator a,
.paginator a * {
	.header-color;
}
/*!-Load more*/

.paginator .button-load-more,
.paginator .loading-ready {
	// color: @h5-color;
	// font: @h5-font-style @h5-font-variant @h5-font-weight @h5-font-size~"/"@h5-line-height @h5-font-family;
	.text-normal;
}
.paginator .button-load-more {
	border-color: fade(@h5-color, 10%);
	.stripe-style-1 & {
		border-color: fade(@strype-1-header-color, 10%);
	}
	.stripe-style-2 & {
		border-color: fade(@strype-2-header-color, 10%);
	}
	.stripe-style-3 & {
		border-color: fade(@strype-3-header-color, 10%);
	}
	.stripe-style-4 & {
		border-color: fade(@strype-4-header-color, 10%);
	}
	.stripe-style-5 & {
		border-color: fade(@strype-5-header-color, 10%);
	}
	&.animate-load,
	&:hover {
		border-color: fade(@h5-color, 21%);
		.stripe-style-1 & {
			border-color: fade(@strype-1-header-color, 21%);
		}
		.stripe-style-2 & {
			border-color: fade(@strype-2-header-color, 21%);
		}
		.stripe-style-3 & {
			border-color: fade(@strype-3-header-color, 21%);
		}
		.stripe-style-4 & {
			border-color: fade(@strype-4-header-color, 21%);
		}
		.stripe-style-5 & {
			border-color: fade(@strype-5-header-color, 21%);
		}
	}
    .text-normal;
	&.animate-load,
	&.button-lazy-loading {
		& .stick {
			border-top-color: fade(@h5-color, 100%);
			border-right-color: fade(@h5-color, 100%);
			.stripe-style-1 & {
				border-top-color: @strype-1-header-color;
				border-right-color: @strype-1-header-color;
			}
			.stripe-style-2 & {
				border-top-color: @strype-2-header-color;
				border-right-color: @strype-2-header-color;
			}
			.stripe-style-3 & {
				border-top-color: @strype-2-header-color;
				border-right-color: @strype-2-header-color;
			}
			.stripe-style-4 & {
				border-top-color: @strype-2-header-color;
				border-right-color: @strype-2-header-color;
			}
			.stripe-style-5 & {
				border-top-color: @strype-2-header-color;
				border-right-color: @strype-2-header-color;
			}
		}
	}
}

/*Load more:end*/
//Pagination

.paginator:not(.paginator-more-button) a {
	.text-big;
	.header-color;
	&:after {
		.accent-bg-mixin;
	}
}