/* START TOP LISTINGS */
.topListings {
	margin-top: 						60px;
	margin-bottom: 						115px;
}

.topListings .title {
	font-family: 						"DM Sans";
	font-weight: 						700;
	background: 						var(--gold) text;
	-webkit-text-fill-color: 			transparent;
	letter-spacing: 					3px;
	text-transform: 					uppercase;
	margin-bottom: 						10px;
}

.topListings .subtitle {
	margin-bottom: 						15px;
}

.topListings .subtitle cc {
	font-family: 						"Refoke";
	color: 								var(--brown);
}

.topListings .filtersAndSearch {
	display: 							flex;
	flex-flow: 							row nowrap;
	align-items: 						center;
	gap: 								25px;
	margin-bottom: 						15px;
}

.topListings .filtersAndSearch .filters {
	flex: 								1 0 0;
	display: 							flex;
	flex-flow: 							row nowrap;
	align-items: 						center;
	gap: 								5px;
	padding: 							10px;
	background-color: 					#FFFFFF;
	border-radius: 						20px;
}

.topListings .filtersAndSearch .filters > * {
	flex:								0 0 calc(100% / 5 - (5px * 4 / 5));
	width:								calc(100% / 5 - (5px * 4 / 5));
}

.topListings .filtersAndSearch .filters .dropdown .dropdown-toggle:before {
	content: 							"";
	width: 								30px;
	height: 							30px;
}

.topListings .filtersAndSearch .filters .dropdown:nth-of-type(1) .dropdown-toggle::before {
	background: 						url("../images/bathIcon.svg") center center no-repeat;
	background-size: 					25px 25px;
}

.topListings .filtersAndSearch .filters .dropdown:nth-of-type(2) .dropdown-toggle::before {
	background: 						url("../images/bedIcon.svg") center center no-repeat;
	background-size: 					25px 25px;
}

.topListings .filtersAndSearch .filters .dropdown:nth-of-type(3) .dropdown-toggle::before {
	background: 						url("../images/sizeIcon.svg") center center no-repeat;
	background-size: 					25px 25px;
}

.topListings .filtersAndSearch .filters .dropdown:nth-of-type(4) .dropdown-toggle::before {
	background: 						url("../images/locationFilters.svg") center center no-repeat;
	background-size: 					25px 25px;
}

.topListings .filtersAndSearch .filters .dropdown:nth-of-type(5) .dropdown-toggle::before {
	background: 						url("../images/price.svg") center center no-repeat;
	background-size: 					25px 25px;
}

.topListings .filtersAndSearch .filters .dropdown .dropdown-toggle .optionSelected {
	text-overflow: 						ellipsis;
	overflow: 							hidden;
}

.topListings .filtersAndSearch .filters .dropdown .dropdown-menu .btnSlider {
	display: 							block;
	width: 								fit-content;
	margin: 							0 auto;
	padding: 							5px 10px;
	font-size: 							12px;

	&::before {
		padding: 						5px 10px;
	}
}

.topListings .filtersAndSearch .search {
	position: 							relative;
	flex: 								0 0 335px;
	padding: 							10px;
	background-color: 					#FFFFFF;
	border-radius: 						20px;
}

.topListings .filtersAndSearch .search::after {
	content: 							"";
	width: 								25px;
	background: 						url("../images/searchIcon.svg") center center no-repeat;
	background-size: 					initial;
	position: 							absolute;
	top: 								0;
	right: 								30px;
	bottom: 							0;
	margin: 							auto 0;
	pointer-events: 					none;
}

.topListings .filtersAndSearch .search > form {
	margin: 							0;
}

.topListings .filtersAndSearch .search > input,
#is-search-input-211,
#is-search-input-293 {
	font-family: 						"DM Sans";
	font-size: 							16px !important;
	height: 							56px;
	color: 								var(--brown);
	margin: 							0;
	padding: 							15px 20px;
}

.topListings .menusAndMap {
	height: 							750px;
	display: 							flex;
	flex-flow: 							row nowrap;
}

.topListings .menusAndMap .listingList {
	width: 								0;
	flex: 								0 0 0;
	overflow: 							hidden;
	height: 							100%;
	background-color: 					#FFFFFF;
	border-radius: 						30px;
	padding: 							15px 0 0;
	display: 							flex;
	flex-flow: 							column nowrap;
	gap: 								10px;
	overflow: 							hidden;
	transition: 						all 0.3s ease-in-out;
}

.topListings .menusAndMap .listingList.show {
	width: 								25%;
	flex: 								0 0 25%;
	margin-right: 						25px;
}

.topListings .menusAndMap .listingList .hideMenu {
	width: 								fit-content;
	font-weight: 						300;
	font-size: 							12px;
	display: 							flex;
	flex-flow: 							row nowrap;
	align-items: 						center;
	gap: 								5px;
	background: 						var(--gold) text;
	-webkit-text-fill-color: 			transparent;
	margin-left: 						10px;
	cursor: 							pointer;
	text-overflow: 						ellipsis;
    overflow: 							hidden;
    text-wrap: 							nowrap;
}

.topListings .menusAndMap .listingList .hideMenu::before {
	content: 							"";
	width: 								10px;
	height: 							10px;
	mask: 								url("../images/greaterThanIcon.svg") center center no-repeat;
	mask-size: 							initial;
	background: 						var(--gold);
	transform: 							rotate(180deg);
}

.topListings .menusAndMap .listingList .list {
	flex: 								1 0 0;
	padding: 							0 5px;
	overflow:							auto;
	background: 						linear-gradient(to bottom, #FFFFFF, #FFFFFF), 
										linear-gradient(to bottom, #FFFFFF, #FFFFFF), 
										linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 1)), 
										linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 1));
    background-attachment: 				local, local, scroll, scroll;
    background-position: 				top, bottom, top, bottom;
    background-repeat: 					no-repeat;
    background-size: 					100% 40px, 100% 40px, 100% 40px, 100% 40px;
}

.topListings .menusAndMap .listingList .list .listingCard {
	position: 							relative;
	width: 								100%;
	padding: 							15px;
	border: 							0.5px solid transparent;
	cursor: 							pointer;
	border-radius: 						20px;
	transition: 						all 0.3s ease-in-out;
}

.topListings .menusAndMap .listingList .list .listingCard.active {
	background: 						linear-gradient(var(--white), var(--white)) padding-box, var(--gold) border-box;
	transition: 						all 0.3s ease-in-out;
}

.topListings .menusAndMap .listingList .list .listingCard .favoriteContainer {
	width: 								35px;
	height: 							30px;
	border-radius: 						5px;
	padding: 							5px 10px;
	background-image: 					url("../images/unfavorite.svg");
	background-color: 					var(--transparency);
	background-position: 				center center;
	background-repeat: 					no-repeat;
	background-size: 					20px 25px;
	position: 							absolute;
	top: 								25px;
	right: 								25px;
	cursor: 							pointer;
	transition: 						all 0.3s ease-in-out;
}

.topListings .menusAndMap .listingList .list .listingCard .favoriteContainer.added {
	background-image: 					url("../images/favorite.svg");
}

.topListings .menusAndMap .listingList .list .listingCard .getImage {
	width: 								100%;
	height: 							110px;
	object-fit: 						cover;
	object-position: 					center center;
	border-radius: 						10px;
	margin-bottom: 						15px;
}

.topListings .menusAndMap .listingList .list .listingCard .titleAndPrice {
	display: 							flex;
	flex-flow: 							row nowrap;
	align-items: 						center;
	justify-content:  					space-between;
	margin-bottom: 						15px;
}

.topListings .menusAndMap .listingList .list .listingCard .titleAndPrice .getListingTitle {
	text-overflow: 						ellipsis;
    overflow: 							hidden;
    text-wrap: 							nowrap;
}

.topListings .menusAndMap .listingList .list .listingCard .titleAndPrice .getListingPrice {
	font-weight: 						900;
	color: 								var(--brown);
	padding: 							10px;
	background-color: 					var(--beige);
	border-radius: 						10px;
	text-overflow: 						ellipsis;
    overflow: 							hidden;
    text-wrap: 							nowrap;
}

.topListings .menusAndMap .listingList .list .listingCard > iframe {
	display: 							none;
}

.topListings .menusAndMap .listingList .list .listingCard .amenities {
	display: 							flex;
	flex-flow: 							row nowrap;
	align-items: 						center;
}

.topListings .menusAndMap .listingList .list .listingCard .amenities .icon {
	object-fit: 						contain;
	object-position: 					center center;
	margin-right: 						5px;
}

.topListings .menusAndMap .listingList .list .listingCard .amenities .value {
	font-size: 							14px;
	text-overflow: 						ellipsis;
    overflow: 							hidden;
    text-wrap: 							nowrap;
}

.topListings .menusAndMap .listingList .list .listingCard .amenities .vr {
	opacity: 							1;
	margin: 							0 15px;
}

.topListings .menusAndMap .mapContainer {
	position: 							relative;
	flex: 								1 0 0;
	height: 							100%;
	border-radius: 						30px;
	display: 							flex;
	align-items: 						center;
	overflow: 							hidden;
}

.topListings .menusAndMap .mapContainer .showMenu {
	font-size: 							12px;
	display: 							flex;
	flex-flow: 							row nowrap;
	align-items: 						center;
	gap: 								5px;
	font-weight: 						300;
	color: 								var(--beige);
	padding: 							10px;
	background-color: 					var(--transparency);
	border-radius: 						10px;
	position: 							absolute;
	top: 								10px;
	left: 								10px;
	cursor: 							pointer;
	visibility: 						hidden;
	opacity: 							0;
	transition: 						all 0.3s ease-in-out;
}

.topListings .menusAndMap .mapContainer .showMenu.show {
	visibility: 						visible;
	opacity: 							1;
	z-index: 							9;
}

.topListings .menusAndMap .mapContainer .showMenu::before {
	content: 							"";
	width: 								7px;
	height: 							7px;
	mask: 								url("../images/greaterThanIcon.svg") center center no-repeat;
	mask-size: 							initial;
	background-color: 					var(--beige);
}

.topListings .menusAndMap .mapContainer .showMenu:hover {
	background: 						var(--gold) text, var(--transparency) padding-box;
	-webkit-text-fill-color: 			transparent;
}

.topListings .menusAndMap .mapContainer .showMenu:hover::before {
	background: 						var(--gold);
}

.topListings .menusAndMap .mapContainer > iframe {
	width: 								100%;
	height: 							145%;
}

.topListings .menusAndMap .mapContainer .noMap {
	width: 								100%;
    height: 							100%;
    text-align: 						center;
    align-content: 						center;
    background: 						var(--transparency);
    color: 								var(--white);
	position: 							absolute;
	top: 								0;
	left: 								0;
	opacity: 							1;
	visibility: 						visible;
	transition: 						all 0.3s ease-in-out;
}

.topListings .menusAndMap .mapContainer .noMap.hide {
	opacity: 							0;
	visibility: 						hidden;
}

.topListings .menusAndMap .listingInformation {
	position: 							relative;
	width: 								0px;
	flex: 								0 0 0;
	overflow: 							hidden;
	height: 							100%;
	background-color: 					#FFFFFF;
	border-radius: 						30px;
	padding-block: 						15px 20px;
	padding-inline: 					0;
	display: 							flex;
	flex-flow: 							column nowrap;
	transition: 						all 0.3s ease-in-out;
}

.topListings .menusAndMap .listingInformation.show {
	width: 								33%;
	flex: 								0 0 33%;
	padding-inline: 					20px;
	margin-left: 						25px;
}

.topListings .menusAndMap .listingInformation .favoriteContainer {
	width: 								35px;
	height: 							30px;
	border-radius: 						5px;
	padding: 							5px 10px;
	background-image: 					url("../images/unfavorite.svg");
	background-color: 					var(--transparency);
	background-position: 				center center;
	background-repeat: 					no-repeat;
	background-size: 					20px 25px;
	position: 							absolute;
	top: 								70px;
	right: 								40px;
	cursor: 							pointer;
	transition: 						all 0.3s ease-in-out;
}

.topListings .menusAndMap .listingInformation .favoriteContainer.added {
	background-image: 					url("../images/favorite.svg");
}

.topListings .menusAndMap .listingInformation .hideMenu {
	width: 								fit-content;
	font-weight: 						300;
	font-size: 							12px;
	display: 							flex;
	flex-flow: 							row nowrap;
	align-items: 						center;
	gap: 								5px;
	background: 						var(--gold) text;
	-webkit-text-fill-color: 			transparent;
	margin-left: 						auto;
	cursor: 							pointer;
	margin-bottom: 						10px;
	text-overflow: 						ellipsis;
    overflow: 							hidden;
    text-wrap: 							nowrap;
}

.topListings .menusAndMap .listingInformation .hideMenu::after {
	content: 							"";
	width: 								10px;
	height: 							10px;
	mask: 								url("../images/greaterThanIcon.svg") center center no-repeat;
	mask-size: 							initial;
	background: 						var(--gold);
}

.topListings .menusAndMap .listingInformation .setImage {
	width: 								100%;
	height: 							400px;
	object-fit: 						cover;
	object-position: 					center center;
	border-radius:  					20px;
	margin-bottom: 						20px;
}

.topListings .menusAndMap .listingInformation .titleAndPrice {
	display: 							flex;
	flex-flow: 							row nowrap;
	align-items: 						center;
	justify-content: 					space-between;
	margin-bottom: 						15px;
}

.topListings .menusAndMap .listingInformation .titleAndPrice .setListingTitle {
	font-size: 							20px;
	font-weight: 						900;
    text-overflow: 						ellipsis;
    overflow: 							hidden;
    text-wrap: 							nowrap;
}

.topListings .menusAndMap .listingInformation .titleAndPrice .setListingPrice {
	font-weight: 						900;
	color: 								var(--brown);
	background-color: 					var(--beige);
	padding: 							10px;
	border-radius: 						10px;
	text-overflow: 						ellipsis;
    overflow: 							hidden;
    text-wrap: 							nowrap;
}

.topListings .menusAndMap .listingInformation .setDescription {
    font-weight: 						300;
    display: 							-webkit-box;
    -webkit-line-clamp: 				4; /* Number of lines before ellipsis */
    -webkit-box-orient: 				vertical;
    overflow: 							hidden;
    max-height: 						100px;
    margin-bottom: 						15px;
}

.topListings .menusAndMap .listingInformation .setDescription.show {
	max-height: 						1000px;
}

.topListings .menusAndMap .listingInformation .setDescription .toggleMore {	
	font-weight: 						700;
	background: 						var(--gold) text;
	-webkit-text-fill-color: 			transparent;
	position: 							absolute;
	bottom: 							3px;
	right: 								10px;
	cursor: 							pointer;
}

.topListings .menusAndMap .listingInformation .amenities {
	display: 							flex;
	flex-flow: 							row nowrap;
	align-items: 						center;
	margin-bottom: 						auto;
}

.topListings .menusAndMap .listingInformation .amenities .icon {
	object-fit: 						contain;
	object-position: 					center center;
	margin-right: 						5px;
}

.topListings .menusAndMap .listingInformation .amenities .value {
	font-size: 							14px;
	text-overflow: 						ellipsis;
    overflow: 							hidden;
    text-wrap: 							nowrap;
}

.topListings .menusAndMap .listingInformation .amenities .vr {
	opacity: 							1;
	margin: 							0 15px;
}

.topListings .menusAndMap .listingInformation .options {
	display: 							flex;
	flex-flow: 							row nowrap;
	gap: 								10px;
}

.topListings .menusAndMap .listingInformation .options .btnDetails,
.topListings .menusAndMap .listingInformation .options .btnVisit {
	width: 								100%;
	padding: 							10px 15px;
	border-radius: 						10px;
}

.topListings .menusAndMap .listingInformation .options .btnDetails::after {
	background: 						var(--brown);
}

.topListings .menusAndMap .listingInformation .options .btnDetails:hover:after {
	background: 						var(--black);
}

.topListings .menusAndMap .listingInformation .options .btnVisit::before {
	padding: 							10px 15px;
}
/* END TOP LISTINGS */

@media (max-width: 991px) { 
	/* START TOP LISTINGS */
	.topListings {
		margin-top: 						20px;
		margin-bottom: 						45px;
	}

	.topListings .container {
		padding: 							0;
	}

	.topListings .title {
		text-align: 						center;
	}

	.topListings .subtitle {
		text-align: 						center;
		margin-bottom: 						20px;
	}

	.topListings .filtersAndSearch {
		display: 							none;
	}

	.topListings .filtersAndSearch .filters {
		display: 							none;
	}

	.topListings .menusAndMap {
		position: 							relative;
		height: 							700px;
		display: 							flex;
		flex-flow: 							row nowrap;
		z-index: 							0;
	}

	.topListings .menusAndMap .filtersAndSearchMobile {
		width: 								95%;
		display: 							flex;
		flex-flow: 							row nowrap;
		align-items: 						center;
		gap: 								10px;
		background-color: 					#FFFFFF;
		border-radius: 						20px;
		position: 							absolute;
		top: 								10px;
		left: 								50%;
		transform: 							translateX(-50%);
		padding: 							10px;
		z-index: 							999;
	}

	.topListings .menusAndMap .filtersAndSearchMobile .search {
		position: 							relative;
		flex: 								1 0 0;
	}
	
	.topListings .menusAndMap .filtersAndSearchMobile .search::after {
		content: 							"";
		width: 								25px;
		background: 						url("../images/searchIcon.svg") center center no-repeat;
		background-size: 					initial;
		position: 							absolute;
		top: 								0;
		right: 								30px;
		bottom: 							0;
		margin: 							auto 0;
		pointer-events: 					none;
	}
	
	.topListings .menusAndMap .filtersAndSearchMobile .search > form {
		margin: 							0;
	}
	
	.topListings .menusAndMap .filtersAndSearchMobile .search > input,
	#is-search-input-211,
	#is-search-input-293 {
		font-family: 						"DM Sans";
		font-size: 							16px !important;
		height: 							56px;
		color: 								var(--brown);
		margin: 							0;
		padding: 							15px 20px;
	}

	.topListings .menusAndMap .filtersAndSearchMobile .mobileFilters {
		flex: 								0 0 56px;
		height: 							56px;
		background-color: 					#FFFFFF;
		border: 							unset;
		border-radius: 						15px;
		border: 							0.5px solid var(--beige);
	}

	.topListings .menusAndMap .filtersAndSearchMobile .mobileListingFilters {
		display: 							flex;
		flex-flow: 							column nowrap;
		gap: 								15px;
		padding: 							15px;
		border-radius: 						20px;
		background-color: 					#FFFFFF;
		position: 							absolute;
		top: 								110%;
		right: 								0;
		left: 								0;
		margin: 							auto;
		z-index: 							9999;
		opacity: 							0;
		visibility: 						hidden;
		transition: 						all 0.3s ease-in-out;
	}

	.topListings .menusAndMap .filtersAndSearchMobile .mobileListingFilters.show {
		opacity: 							1;
		visibility: 						visible;
	}

	.topListings .menusAndMap .listingList {
		width: 								100%;
		flex: 								1 0 auto;
		height: 							0;
		border-radius: 						20px 20px 0 0;
		padding: 							0 5px 0;
		gap: 								10px;
		z-index: 							99;
		position: 							absolute;
		left: 								0;
		right: 								0;
		bottom: 							0;
	}

	.topListings .menusAndMap .listingList.show {
		width: 								100%;
		height: 							315px;
		flex: 								1 0 auto;
		margin-right: 						0;
		padding: 							25px 5px 5px;
	}

	.topListings .menusAndMap .listingList .hideMenu {
		flex: 								1 0 auto;
		margin: 							0 auto;
	}

	.topListings .menusAndMap .listingList .hideMenu::before {
		content: 							none;
	}

	.topListings .menusAndMap .listingList .hideMenu::after {
		content: 							"";
		width: 								10px;
		height: 							10px;
		mask: 								url("../images/greaterThanIcon.svg") center center no-repeat;
		mask-size: 							initial;
		background: 						var(--gold);
		transform: 							rotate(90deg);
	}

	.topListings .menusAndMap .listingList .list {
		flex: 								1 0 auto;
		display: 							flex;
		flex-flow: 							row nowrap;
		align-items: 						center;
		padding: 							0;
		background: 						linear-gradient(to right, #FFFFFF, #FFFFFF), 
											linear-gradient(to right, #FFFFFF, #FFFFFF), 
											linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 1)), 
											linear-gradient(to left, rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 1));
		background-attachment: 				local, local, scroll, scroll;
		background-position: 				left, right, left, right;
		background-repeat: 					no-repeat;
		background-size: 					40px 100%, 40px 100%, 40px 100%, 40px 100%;
	}

	.topListings .menusAndMap .listingList .list .listingCard {
		position: 							relative;
		width: 								auto;
	}

	.topListings .menusAndMap .listingList .list .listingCard .getImage {
		width: 								260px;
		height: 							135px;
	}

	.topListings .menusAndMap .listingList .list .listingCard .titleAndPrice {
		margin-bottom: 						10px;
	}

	.topListings .menusAndMap .listingList .list .listingCard .titleAndPrice .getListingPrice {
		font-size: 							12px;
		padding: 							10px;
	}

	.topListings .menusAndMap .listingList .list .listingCard .amenities .value {
		font-size: 							12px;
	}

	.topListings .menusAndMap .mapContainer {
		border-radius: 						20px;
		z-index: 							9;
	}

	.topListings .menusAndMap .mapContainer .showMenu {
		width: 								fit-content;
		position: 							absolute;
		top: 								unset;
		left: 								0;
		right: 								0;
		bottom: 							20px;
		margin: 							0 auto;
	}

	.topListings .menusAndMap .mapContainer .showMenu::before {
		content: 							none;
	}

	.topListings .menusAndMap .mapContainer .showMenu::after {
		content: 							"";
		width: 								10px;
		height: 							10px;
		mask: 								url("../images/greaterThanIcon.svg") center center no-repeat;
		mask-size: 							initial;
		background-color: 					var(--beige);
		transform: 							rotate(-90deg);
	}

	.topListings .menusAndMap .listingInformation {
		width: 								0px;
		flex: 								1 0 0;
		height: 							100%;
		border-radius: 						2px;
		padding: 							25px 0 15px;
		position: 							absolute;
		top: 								0;
		right: 								0;
		bottom: 							0;
		z-index: 							999;
	}

	.topListings .menusAndMap .listingInformation.show {
		width: 								100%;
		flex: 								0 0 100%;
		padding: 							25px 15px 15px;
	}

	.topListings .menusAndMap .listingInformation .amenities {
		margin-bottom: 10px;
	}

	.topListings .menusAndMap .listingInformation .titleAndPrice {
		margin-bottom: 						10px;
	}

	.topListings .menusAndMap .listingInformation .setDescription {
		margin-bottom: 						10px;
	}
	/* END TOP LISTINGS */
}