6-filters.css

@charset "UTF-8";
/** Holberton Practice Styles
 * ------ Filters
 */

.container .filters {
	height: 70px;
	background-color: #FFFFFF;
	width: 100%;
	border: 1px solid #DDDDDD;
	border-radius: 4px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: stretch;
	z-index: 2;
	position: relative;
}

.container .filters .locations {
	width: 25%;
	border-right: 1px solid #DDDDDD;
}

.container .filters .amenities {
	width: 25%;
}

.container .filters button {
	font-size: 18px;
	background-color: #FF5A5F;
	height: 48px;
	width: 20%;
	border: none;
	border-radius: 4px;
	margin: auto 30px auto auto;
}

.container .filters button:hover {
	opacity: 0.9;
}

/**
 * ------ HEADERS
 */

.container .filters h2 {
	font-size: 16px;
	margin: 10px 0 5px 0;
}

.container .filters h3 {
	font-weight: 600;
	margin: 12px 0 4px 40px;
}

.container .filters h4 {
	font-weight: 400;
	font-size: 14px;
	margin: 7px 0 3px 40px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 75%;
}

/**
 * ------ POPOVER
 */

.container .filters .locations:hover .popover {
	display: list-item;
}

.container .filters .amenities:hover .popover {
	display: list-item;
}

.container .filters .popover {
	max-height: 300px;
	overflow: scroll;
	display: none;
	list-style-type: none;
	background-color: #FAFAFA;
	border: 1px solid #DDDDDD;
	border-radius: 4px;
	padding: 30px 40px 40px 30px;
	margin: 15px -1px 0 -1px;
}

.container .filters .popover ul {
	list-style-type: none;
	padding-left: 20px;
}

.container .filters .popover li {
	margin: 5px 0 5px 0;
}

@media screen and (max-width: 600px) {

	.container .filters {
		flex-direction: column;
		height: auto;
		width: 90%;
		margin: auto;
	}

	.container .filters .locations {
		border-bottom: 1px solid #DDDDDD;
	}

	.container .filters .locations,
	.container .filters .amenities {
		width: 100%;
		border-right: none;
		border-bottom: 1px solid #DDDDDD;
	}

	.container .filters button {
		width: 80%;
		margin: 5px auto;
	}

}