/* MAIN */
.page-banner {
	background: url('/assets/img/page-banner-services.jpg') no-repeat scroll center center;
}
.content h3 {
	margin: 2rem 0 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid #ccc;
	font-size: 2rem;
	font-weight: 500;
}

/* SEARCH */
.search-services {
	float: right;
}
.search {
	display: inline-block;
	margin: 0;
	padding: 0.75rem 1rem;
	border: 1px solid #ccc;
	width: 50rem;
	outline: none;
}
.search-services button {
	display: inline-block;
	margin: 0;
	padding: 0.75rem 1rem;
	border: 1px solid #ccc;
	border-left: 0;
	background: #eee;
}
@media screen and (max-width:768px) {
	.search-services {
		width: 100%;
		margin-bottom: 2rem;
	}
	.search {
		width: 80%;
	}
	.search-services button {
		width: 20%;
	}
	.search-services button {
		padding: 0.75rem;
	}
}

/* COLUMN */
.services-col > div:first-child {
	width: 30%;
}
.services-col > div:last-child {
	width: 70%;
}
@media screen and (max-width:768px) {
	.services-col > div:first-child,
	.services-col > div:last-child {
		width: 100%;
	}
}

/* BRANCHES */
.branches-list {
	border-bottom: 1px solid #eee;
}
.branches-list li {
	padding: 0.8rem 1rem;
	cursor: pointer;
	border: 1px solid #eee;
	border-bottom: 0;
	font-size: 1.4rem;
}
.branches-list li.active {
	background: #ffd51a;
	font-weight: 500;
}
@media screen and (min-width:769px) {
	.branches-list li:hover {
		background: #f7f7f7;
	}
	.branches-list li.active:hover {
		background: #ffd51a;
	}
}
@media screen and (max-width:768px) {
	.branches-wrapper {
		display: none;
	}
}

/* CATEGORIES */
.categories-list {
	border-bottom: 1px solid #eee;
}
.categories-list li {
	padding: 0.8rem 1rem;
	cursor: pointer;
	border: 1px solid #eee;
	border-bottom: 0;
	font-size: 1.4rem;
}
.categories-list li.active {
	background: #ffd51a;
	font-weight: 500;
}
@media screen and (min-width:769px) {
	.categories-list li:hover {
		background: #f7f7f7;
	}
	.categories-list li.active:hover {
		background: #ffd51a;
	}
}
@media screen and (max-width:768px) {
	.categories-wrapper {
		display: none;
	}
}

/* SERVICES */
.services-list {
	border-bottom: 1px solid #eee;
}
.services-list li {
	display: none;
	padding: 1.2rem 1.6rem;
	cursor: pointer;
	border: 1px solid #eee;
	border-bottom: 0;
	font-size: 1.4rem;
}
.services-list li h4 {
	font-weight: 500;
}
.services-list li p {
	font-size: 80%;
	color: #666;
}
.services-list li .available-branches {
	margin-top: 0.8rem;
	color: #333;
}
@media screen and (min-width:769px) {
	.services-list li:hover {
		background: #f7f7f7;
	}
}