/* #Filter
================================================== */
.filter {
	position: relative;
	&.iso-filter {
		z-index: 1;
	}
	.flex-display(@display: flex);
	.align-items(@align: center);
	.justify-content(@justify: center);
	.filter-align-left & {
		.justify-content(@justify: flex-start);
		.flex-flow( row wrap);
	}
	.filter-align-right & {
		.justify-content(@justify: flex-end);
		.flex-flow( row wrap);
	}
}
	.filter:before {
		content: "";
		display: table;
	}
	.filter:after {
		content: "";
		display: table;
		clear: both;
	}
	.filter-categories,
	.filter-extras,
	.filter-by,
	.filter-sorting,
	.filter-categories a {
		 display: inline-block;
		.box-sizing (border-box);
	}
	.filter-by,
	.filter-sorting,
	.filter-categories {
		.flex-display(@display: inline-flex);
		.align-items(@align: center);
	}
	.filter-categories,
	.filter-extras {
		.flex-display(@display: flex);
		.align-items(@align: center);
		.justify-content(@justify: center);
		.flex-flow( row wrap);
		.filter-align-left & {
			.justify-content(@justify: flex-start);
		}
		.filter-align-right & {
			.justify-content(@justify: flex-end);
		}
	}
	.filter-categories {
		position: relative;
		 & .hasCustomSelect {
		 	display: none;
		 	left: 0;
		 	z-index: 1;
		 }
		 #page & {
		 	& .customSelect {
		 		position: relative;
		 		padding: 0;
		 		background: none;
		 		display: none !important;
		 		&:after {
		 			position: relative;
		 			right: 0;
		 			width: 20px;
		 			height: 20px;
		 			font-family: 'Font Awesome 5 Free';
				  	font-weight: 900;
				  	font-size: 14px;
				  	line-height: 1;
		 			content: "\f0dc";
		 		}
	 			& .customSelectInner {
	 				background: none;
	 			}
		 	}
		 }
	}
	
		.filter .filter-categories a,
		.filter .filter-extras a {
			position: relative;
			text-decoration: none;
		}
		.filter .filter-extras a {
			.flex-display(@display: inline-flex);
		}
		
		//Categorization & sorting -> Style
		.filter-categories a {
			white-space: nowrap;
			.filter-bg-decoration & {
				overflow: hidden;
				&:after {
					position: absolute;
					z-index: -1;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					content: "";
					opacity: 0;
				}
				&.act:after {
					opacity: 1;
				}
			}
			.filter-underline-decoration & {
				&:after {
					position: absolute;
					left: 0;
					bottom: 0;
					width: 100%;
					content: "";
					opacity: 0;
				 	transition: opacity 0.3s ease;
				}
				&.act:after,
				&:hover:after {
					opacity: 1;
				}
			}
		}
		.filter .filter-extras a svg {
			width: 16px;
		}
		.filter-popup {
			.filter & {
				position: absolute;
				left: 50%;
              	z-index: 999;
				bottom: 100%;
				padding: 2px 6px;
				margin-bottom: 15px;
				background: #000;
				color: #fff !important;
				font: normal  10px / 14px Arial, Verdana, sans-serif;
				letter-spacing: 0.3px;
				white-space: nowrap;
				opacity: 0;
				visibility: hidden;
				    transform: translate3d(-50%,10px, 0);
				    transition: all .25s ease-out;
				.static-border-radius (@radius: 2px);
				/* CSS Triangle*/
				&:after {
					position: absolute;
					left: 50%;
					bottom: -5px;
					margin-left: -5px;
					width: 0; 
					height: 0; 
					border-left: 5px solid transparent;
					border-right: 5px solid transparent;
				  
					border-top: 5px solid #000;
					content: "";
				}
				/* This bridges the gap so you can mouse into the tooltip without it disappearing */
				&:before {
				 	position: absolute;
				 	left: 0;
					bottom: -20px;
				  	content: " ";
				  	display: block;
				  	width: 100%;
				  	height: 20px;
				}  

			}
		}


		/* IE can just show/hide with no transition */
		.lte8 .filter-popup {
		  display: none;
		}

		.lte8 .filter-extras a:hover .filter-popup {
		  display: block;
		}
		.filter-extras > div > a:hover {
			cursor: default;
		}
		.filter-extras > div > a > i:hover {
			cursor: pointer;
		}
		.filter-extras > div > a > i:hover + .filter-popup,
		.filter-extras > div > a > svg:hover + .filter-popup {
			visibility: visible;
			opacity: 1;
			transform: translate3d(-50%,0, 0);
			&:before {
				bottom: 0;
			}
		}
		
	

		.filter-switch {
			position: relative;
			display: inline-block;
			width: 19px;
			height: 7px;
			margin: 0 10px;
			&:hover {
				cursor: pointer;
			}
		}

		.filter-switch,
		.filter-switch-toggle {
			.static-border-radius (@radius: 8px);
		}
		.filter-switch-toggle {
			position: absolute;
			top: -1px;
			left: 0;
			width: 9px;
			height: 9px;
			background-color: #fff;
			content: "";
			transition:			left 300ms ease-out;
		}
		.filter-switch.right-act .filter-switch-toggle {
			left: 9px;
		}

			.pressed .filter-switch-toggle:after,
			.filter-extras a.pressed:after {
				animation: anim-effect-boris 0.450s ease-out forwards;
			}


		@keyframes anim-effect-boris {
			0% {
				transform: scale(0);
			}
			25%, 50% {
				opacity: 1;
			}
			to {
				opacity: 0;
				transform: scale(1);
			}
		}