.head-bg {
	background-image: url('../img/img_head_amenities.jpg');
	/* to cover white space at the bottom of the picture */
	margin-bottom: -2px
}

.row.top {
	background-color: #535049
}

.row.bottom {
	background-color: #ebebeb;
	color: #535049
}

.row .left-side {
	/* fix white line at the top of the image */
	margin-top: -1px;
	min-height: 0
}

.row .right-side {
	padding-top: 30px;
	padding-bottom: 30px
}

.row.top .left-side {
	background-image: url('../img/img_community.jpg');
	background-size: cover;
	background-position: center center
}

.row.bottom .left-side {
	background-image: url('../img/img_interior.jpg');
	background-size: cover;
	background-position: center center
}

.middle-section {
	border-bottom: none
}

.middle-section.top {
	border-top: 1px solid #43403b
}

.row .amenties-row-title h2 {
	font-weight: 600;
	padding: 10px 20px
}

article.right-side section[class*='-features'] {
	font-size: 16px
}

article.right-side section[class*='-features'] > div {
	padding-top: 8px;
	padding-bottom: 8px
}

@media screen and (min-width: 768px) {
	.row article {
		padding-left: 3%
	}
	.row .amenties-row-title {
		position: absolute;
		float: none;
		top: 0;
		bottom: 0
	}
	.row.top .amenties-row-title {
		left: 0;
		right: 50%
	}
	.row.bottom .amenties-row-title {
		left: 50%;
		right: 0
	}
	.row.top .right-side {
		margin-left: 50%;
	}
	.middle-section .row {
		position: relative;
		overflow: hidden;
		min-height: 400px
	}
}

@media screen and (min-width: 992px) {
	.row.top .amenties-row-title {
		right: calc(100% / 3)
	}
	.row.bottom .amenties-row-title {
		left: calc((100% / 3) * 2)
	}
	.row.top .right-side {
		margin-left: calc(100% / 3);
	}
}