#filters { max-width: max-content; }
#filters > .selection {
	position: relative;
	
	font-weight: 600;
	color: #FFF;
	
	cursor: pointer;
}
@media (min-width: 900px)	 { #filters > .selection { font-size: 30px; } }
@media (max-width: 899.99px) { #filters > .selection { font-size: 25px; } }
#filters > .selection:after {
	content: '';
	display: inline-block; width: 14px; height: 8px;
	margin-left: 15px;
	vertical-align: middle;
	
	background-color: var(--off-color);
	
	-webkit-mask-image: url("../../images/icons/arrow.down.svg");
	mask-image: url("../../images/icons/arrow.down.svg");
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
.loaded #filters > .selection:after { transition: transform .2s ease-out; }
#filters > .selection.open:after { transform: scale(-1); }
#filters > .filters {
	position: absolute; top: 100%;
	display: flex; width: 350px;
	flex-direction: column;
	align-items: flex-start;
	row-gap: 10px;
	padding: 20px 25px;
	
	background-color: #FFF;
	
	color: var(--main-color);
	
	opacity: 0;
	pointer-events: none;
}
@media (min-width: 1300px)							 { #filters > .filters { left: 50%; transform: translateX(-50%); } }
@media (max-width: 1299.99px) and (min-width: 900px) { #filters > .filters { right: -25px; } }
@media (max-width:  899.99px)						 { #filters > .filters { left: 0; } }
.loaded #filters > .filters {
	transition:
		top		.2s ease-out,
		opacity .2s ease-out;
}
#filters > .selection.open + .filters {
	top: 160%;
	opacity: 1;
	pointer-events: auto;
}
#filters > .filters > .filter { font-size: 14px; }