@charset "UTF-8";
/* variables */
.row.filter {
	position: relative;
	height: -moz-fit-content;
	height: fit-content;
	z-index: 3;
}

.filter-prewrap .filter-wrap {
	position: relative;
	width: auto;
	max-width: 500px;
	height: 50px;
	min-height: 50px;
	margin-bottom: 30px;
	border: 1px solid white;
	border-radius: 25px;
	overflow: hidden;
	transition:
		height 300ms ease,
		background-color 300ms ease;
	transition-delay: 50ms;
	max-width: 245px !important;
	margin-right: 20px;
}
.filter-prewrap .filter-wrap label.main {
	cursor: pointer;
	width: 100%;
	padding: 15px 30px;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 14px;
}
.filter-prewrap .filter-wrap label.main:after {
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	right: 28px;
	top: 19px;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 8px solid white;
	transition: transform 300ms ease;
	transition-delay: 100ms;
}
.filter-prewrap .filter-wrap.active {
	height: -moz-max-content;
	height: max-content;
	max-width: 500px;
	background-color: black;
}
.filter-prewrap .filter-wrap.active label.main:after {
	transform: rotate(180deg);
}

#mobile-filter-open {
	position: relative;
	display: block;
	padding-left: 30px;
	display: flex;
	align-items: center;
	text-transform: uppercase;
	font-weight: 600;
	cursor: pointer;
	font-size: 15px;
}
@media (min-width: 992px) {
	#mobile-filter-open {
		font-size: 18px;
	}
}
@media (min-width: 1200px) {
	#mobile-filter-open {
		display: none;
	}
}
#mobile-filter-open:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 20px;
	height: 100%;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:v='https://vecta.io/nano' viewBox='0 0 100 98.1'%3E%3Cpath d='M42.5 91.1c-.4 0-.7-.1-1.1-.2-1.2-.4-1.9-1.6-1.9-2.8v-38L10.2 15.8c-.8-.9-.9-2.1-.4-3.2s1.6-1.7 2.7-1.7h75.1c1.2 0 2.2.7 2.7 1.7.5 1.1.3 2.3-.4 3.2L60.5 50.1v21.4c0 .7-.3 1.5-.8 2L44.7 90c-.6.8-1.4 1.1-2.2 1.1zM18.9 16.9l25.8 30.2c.5.5.7 1.2.7 1.9v31.3l9-9.9V49c0-.7.3-1.4.7-1.9l25.8-30.2h-62 0z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	filter: invert(1);
}

#mobile-filter-close {
	position: absolute;
	display: block;
	padding-left: 40px;
	display: flex;
	align-items: center;
	top: 60px;
	left: 50%;
	transform: translateX(-55%);
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
@media (min-width: 1200px) {
	#mobile-filter-close {
		display: none;
	}
}
#mobile-filter-close:before,
#mobile-filter-close:after {
	position: absolute;
	left: 15px;
	content: " ";
	height: 22px;
	width: 2px;
	background-color: white;
	transition: transform 300ms ease;
}
#mobile-filter-close:before {
	transform: rotate(45deg);
}
#mobile-filter-close:after {
	transform: rotate(-45deg);
}
#mobile-filter-close:focus:before,
#mobile-filter-close:hover:before {
	transform: rotate(225deg);
}
#mobile-filter-close:focus:after,
#mobile-filter-close:hover:after {
	transform: rotate(135deg);
}

.filter-prewrap {
	visibility: hidden;
	display: none;
}
.filter-prewrap.show {
	visibility: visible;
	display: flex;
	align-items: center;
	flex-direction: column !important;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: auto;
	min-height: 100vh;
	z-index: 666;
	background-color: black;
	flex-direction: row-reverse;
	padding: 115px 25px 50px 25px;
}
@media (min-width: 1200px) {
	.filter-prewrap.show {
		padding: 285px 25px 50px 25px;
	}
}
@media (min-width: 1200px) {
	.filter-prewrap {
		visibility: visible;
		display: flex;
		flex-wrap: wrap;
	}
}

.filter-order {
	height: 54px;
}

#applica-filtro {
	cursor: pointer;
	font-size: 15px;
	padding: 16px 55px 16px 65px;
	width: 255px;
	display: none;
}
@media (min-width: 576px) {
	#applica-filtro {
		display: block;
	}
}

#applica-filtro-mobile {
	z-index: 66;
	display: block;
}
@media (min-width: 1200px) {
	#applica-filtro-mobile {
		display: none;
	}
}

#ordina {
	position: relative;
	padding-right: 30px;
	text-transform: uppercase;
	font-weight: 600;
	cursor: pointer;
	font-size: 15px;
}
@media (min-width: 992px) {
	#ordina {
		font-size: 18px;
	}
}
#ordina:after {
	content: "↓";
	display: block;
	font-size: 23px;
	position: absolute;
	right: 0;
	top: 0;
}
#ordina:hover:after,
#ordina:focus:after {
	animation: upanddown;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}
@keyframes upanddown {
	from {
		top: -5px;
	}
	to {
		top: 5px;
	}
}

#load-more {
	cursor: pointer;
	position: relative;
	display: block;
}
#load-more:before {
	background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33.81 33.83'%3E%3Cpath d='M16.9.91a3,3,0,0,0-3,3v10H3.9a3,3,0,0,0,0,6h10v10a3,3,0,1,0,6,0v-10h10a3,3,0,0,0,0-6h-10v-10A3,3,0,0,0,16.9.91Z'/%3E%3C/svg%3E");
	background-size: 20px;
	filter: invert(1);
}
#load-more:hover .no-more {
	transform: scale(1.1);
}

#no-more {
	display: flex;
	justify-content: center;
	margin-bottom: 25px;
	text-transform: uppercase;
	transition: transform 300ms ease;
}

/* =============================== */
/* ===== VARI CAMPI FILTRO ===== */
/* =============================== */
/* ===== ANNO ===== */
.anno-from,
.anno-to {
	width: 125px;
	font-family: pfs-bold;
	color: white;
	text-transform: uppercase;
	position: relative;
	transition: width 0.5s;
	will-change: width;
}
.anno-from .option,
.anno-to .option {
	padding: 1em;
	width: 100%;
	font-size: 14px;
	cursor: pointer;
	background-color: transparent;
}
.anno-from .option:not(.active),
.anno-to .option:not(.active) {
	display: none;
	opacity: 0;
	transform: translateY(-50%);
}
.anno-from.visible,
.anno-to.visible {
	animation: bounce 1s;
}
.anno-from.visible:before,
.anno-from.visible:after,
.anno-to.visible:before,
.anno-to.visible:after {
	border-color: #fff;
}
.anno-from.visible:before,
.anno-to.visible:before {
	opacity: 0;
}
.anno-from.visible:after,
.anno-to.visible:after {
	opacity: 1;
}
.anno-from.visible .option,
.anno-to.visible .option {
	color: #fff;
	display: block;
}
.anno-from.opacity .option,
.anno-to.opacity .option {
	transform: translateZ(0);
	opacity: 1;
}
.anno-from.opacity .option:nth-child(0),
.anno-to.opacity .option:nth-child(0) {
	transition:
		opacity 0.5s 0s,
		transform 0.5s 0s;
}
.anno-from.opacity .option:nth-child(1),
.anno-to.opacity .option:nth-child(1) {
	transition:
		opacity 0.5s 0.1s,
		transform 0.5s 0.1s;
}
.anno-from.opacity .option:nth-child(2),
.anno-to.opacity .option:nth-child(2) {
	transition:
		opacity 0.5s 0.2s,
		transform 0.5s 0.2s;
}
.anno-from.opacity .option:nth-child(3),
.anno-to.opacity .option:nth-child(3) {
	transition:
		opacity 0.5s 0.3s,
		transform 0.5s 0.3s;
}
.anno-from.opacity .option:nth-child(4),
.anno-to.opacity .option:nth-child(4) {
	transition:
		opacity 0.5s 0.4s,
		transform 0.5s 0.4s;
}
.anno-from.opacity .option:nth-child(5),
.anno-to.opacity .option:nth-child(5) {
	transition:
		opacity 0.5s 0.5s,
		transform 0.5s 0.5s;
}
.anno-from.opacity .option:nth-child(6),
.anno-to.opacity .option:nth-child(6) {
	transition:
		opacity 0.5s 0.6s,
		transform 0.5s 0.6s;
}
.anno-from.opacity .option:nth-child(7),
.anno-to.opacity .option:nth-child(7) {
	transition:
		opacity 0.5s 0.7s,
		transform 0.5s 0.7s;
}
.anno-from.opacity .option:nth-child(8),
.anno-to.opacity .option:nth-child(8) {
	transition:
		opacity 0.5s 0.8s,
		transform 0.5s 0.8s;
}
.anno-from.opacity .option:nth-child(9),
.anno-to.opacity .option:nth-child(9) {
	transition:
		opacity 0.5s 0.9s,
		transform 0.5s 0.9s;
}
.anno-from.withBG .option,
.anno-to.withBG .option {
	transition: background-color 0.1s;
}
.anno-from:after,
.anno-from:before,
.anno-to:after,
.anno-to:before {
	content: "";
	position: absolute;
	pointer-events: none;
	top: 1.5em;
	right: 1em;
	width: 0.75em;
	height: 0.75em;
	border: 0.2em solid white;
	transform: rotate(45deg);
	transform-origin: 50% 50%;
	transition: opacity 0.2s;
}
.anno-from:before,
.anno-to:before {
	border-left: none;
	border-top: none;
	top: 1.2em;
}
.anno-from:after,
.anno-to:after {
	border-right: none;
	border-bottom: none;
	opacity: 0;
}

.mini-hack {
	opacity: 0;
	transform: translateY(-50%);
}

/* ===== KM / € / CV ===== */
.chilometraggio-filter-wrap,
.price-filter-wrap,
.potenza-filter-wrap {
	width: 100%;
}
.chilometraggio-filter-wrap .filter-label,
.price-filter-wrap .filter-label,
.potenza-filter-wrap .filter-label {
	position: relative;
	cursor: pointer;
}
.chilometraggio-filter-wrap .filter-label:before,
.chilometraggio-filter-wrap .filter-label:after,
.price-filter-wrap .filter-label:before,
.price-filter-wrap .filter-label:after,
.potenza-filter-wrap .filter-label:before,
.potenza-filter-wrap .filter-label:after {
	position: absolute;
	left: 11px;
	top: 0;
	transform: translateY(-50%);
	color: #999999;
	font-size: 14px;
}
.chilometraggio-filter-wrap .filter-input,
.price-filter-wrap .filter-input,
.potenza-filter-wrap .filter-input {
	height: 35px;
	border: none;
	padding: 0 10px 0 13px;
	width: 95px;
	cursor: pointer;
	color: white;
	background-color: transparent;
}

.chilometraggio-filter-wrap .filter-label:nth-child(1):after {
	content: "km";
	left: 11px;
	top: 0;
}
.chilometraggio-filter-wrap .filter-label:nth-child(2):after {
	content: "km";
	left: 11px;
	top: 0;
}

.price-filter-wrap .filter-label:nth-child(1):after {
	content: "€";
	right: 14px;
}
.price-filter-wrap .filter-label:nth-child(2):after {
	content: "€";
	right: 14px;
}

.potenza-filter-wrap .filter-label:nth-child(1):after {
	content: "cv";
	right: 34px;
}
.potenza-filter-wrap .filter-label:nth-child(2):after {
	content: "cv";
	right: 34px;
}

/* custom styles for UiSlider */
#sliderChilometraggio.noUi-target,
#sliderPrice.noUi-target,
#sliderPotenza.noUi-target {
	cursor: pointer;
}
#sliderChilometraggio.noUi-target :focus,
#sliderPrice.noUi-target :focus,
#sliderPotenza.noUi-target :focus {
	outline: none;
}
#sliderChilometraggio.noUi-horizontal,
#sliderPrice.noUi-horizontal,
#sliderPotenza.noUi-horizontal {
	height: 3px;
	border-radius: 0;
	border: none;
}
#sliderChilometraggio .noUi-connect,
#sliderPrice .noUi-connect,
#sliderPotenza .noUi-connect {
	background: white;
}
#sliderChilometraggio .noUi-base,
#sliderPrice .noUi-base,
#sliderPotenza .noUi-base {
	background: gray;
}
#sliderChilometraggio .noUi-handle,
#sliderPrice .noUi-handle,
#sliderPotenza .noUi-handle {
	top: -6px;
	right: -7px;
	width: 15px;
	height: 15px;
	background: white;
	border: 1px solid black;
	box-shadow: unset;
	cursor: pointer;
	transition: transform 300ms ease;
}
#sliderChilometraggio .noUi-handle:before,
#sliderChilometraggio .noUi-handle:after,
#sliderPrice .noUi-handle:before,
#sliderPrice .noUi-handle:after,
#sliderPotenza .noUi-handle:before,
#sliderPotenza .noUi-handle:after {
	content: none;
}
#sliderChilometraggio .noUi-handle:hover,
#sliderPrice .noUi-handle:hover,
#sliderPotenza .noUi-handle:hover {
	transform: scale(1.1);
}

.heading-filtro-container p {
	font-size: 20px;
	font-weight: 500;
}