/********************************************************************************************* 

x. smaller than 1260px

*********************************************************************************************/
@media only screen and (max-width:1260px) {
	
	#footer .wrapper { 
		padding: 15px;
	}
	
	#nav {
		left: 15px; right: 15px;
	}
	
	#plans {
		padding: 35px 0;
	}
	
	.wrapper { 
		width: auto;
		padding: 0 15px;
	}


	#home #top .image, #home #bottom .column.left #images .column.left .image, #home #bottom .column.left #images .column.right .image.bottom, #home #bottom .column.left #images .column.right .image.top, #home #bottom .column.right .image.bottom, #home #bottom .column.right .image.top {
		position: relative;
	}
	
	#home #top .image img, #home #bottom .column.right .image.top img {
		margin: -190px 0 0 -315px;
		position: absolute;
		top: 50%; left: 50%;
	}
	
	#home #bottom .column.left #images .column.left .image img {
		margin: -240px 0 0 -150px;
		position: absolute;
		top: 50%; left: 50%;
	}
	
	#home #bottom .column.left #images .column.right .image.bottom img {
	 	margin: -135px 0 0 -150px;
		position: absolute;
		top: 50%; left: 50%;
	}
	
	#home #bottom .column.left #images .column.right .image.top img {
	 	margin: -200px 0 0 -150px;
		position: absolute;
		top: 50%; left: 50%;
	}
	
	#home #bottom .column.right .image.bottom img {
		margin: -200px 0 0 -315px;
		position: absolute;
		top: 50%; left: 50%;
	}
	
	
}

/********************************************************************************************* 

x. smaller than 1200px

*********************************************************************************************/
@media only screen and (max-width:1200px) {
	
	#plans li {
		margin: 0 0 50px 0;
	}

}


/********************************************************************************************* 

x. smaller than 1000px

*********************************************************************************************/
@media only screen and (max-width:1000px) {
	
	#home #bottom .column.right .image.bottom {
		display: none;
	}
	
	#home #bottom .column.left .column.right, #home #bottom .column.left .image, #home #bottom .column.left .divider {
		display: none;
	}
	
	#home #bottom .column.left .column.left {
		width: auto;
		float: none;
	}
	
	#home #bottom .column.left .column.left .line {
		display: none;
	}
	
	#home #bottom .column.left .column.left .column.left {
		width: 50%;
		float: left;
	}
	
	#home #bottom .column.left .column.left .column.left .line {
		display: block;
	}
	
	#home #bottom .column.left .column.left .column.right {
		display: block;
	}
	
	#home #bottom .column.right .content {
		border-bottom: none;
	}
	
	#nav li.gap {
		width: 200px;
	}
	
}

/********************************************************************************************* 

x. smaller than 990px

*********************************************************************************************/
@media only screen and (max-width:990px) {
	
	#contact .content.top {
		width: auto;
	}
	
	#contact .content.bottom .column h5 span {
		font-size: 16px;
	}
	
	#contact #google-map {
		height: 500px;
	}
	
	h1 {
		font-size: 60px;
		line-height: 60px;
	}
	
	h2 {
		font-size: 45px;
		line-height: 45px;
	}
	
	h3 {
		font-size: 35px;
		line-height: 35px;
	}
	
	h4 {
		font-size: 30px;
		line-height: 30px;
	}
	
	h5 {
		font-size: 20px;
		line-height: 20px;
	}
	
	h6 {
		font-size: 15px;
		line-height: 15px;
	}
	
	#map #google-map {
		height: 500px;
		margin: 0 0 15px 0;
	}
	
	.pop-up {
		width: auto;
		padding: 30px;
	}
	
	.pop-up .plan {
		width: 100%; height: 555px;
		float: left;
	}
	
	.pop-up .plate {
		display: none;
	}
	
	.pop-up ul li {
		padding: 0 15px;
	}
	
	.pop-up .view {
		width: 100%; height: auto;
		padding: 30px 0;
	}
	
	.pop-up .view a {
		margin: 0 0 20px 30px;
	}
	
}

/********************************************************************************************* 

x. smaller than 860px

*********************************************************************************************/
@media only screen and (max-width:860px) {
	
	#nav a {
		width: 130px;
	}
	
	#nav li.gap {
		width: 160px;
	}
	
}

/********************************************************************************************* 

x. smaller than 880px

*********************************************************************************************/
@media only screen and (max-width:880px) {

	#contact .content.top #contact-information li {
		padding: 0 20px;
	}
	
}

/********************************************************************************************* 

x. smaller than 800px

*********************************************************************************************/
@media only screen and (max-width:800px) {
	
	#apartments {
		padding: 0 0 15px 0;
	}
	
	#apartments .column p {
		padding: 0 0 15px 0;
	}
	
	#apartments .content h3 {
		padding: 0 0 30px 0;
	}
	
	#apartments .content.bottom {
		padding: 15px 0 0 0;
	}
	
	#apartments .content.bottom .column p:last-of-type, #apartments .content.middle .column p:last-of-type, #apartments .content.top .column .divider:last-of-type {
		padding: 0 0 15px 0;
	}
	
	#apartments .content.bottom .column .padding {
		padding: 0 15px;
	}
	
	#apartments .content.middle .column.left .column {
		width: auto;
		float: none;
	}
	
	#apartments .content.middle .column.left .column.left .line {
		display: none;
	}
	
	#apartments .content.middle .column.left .column.left .padding, #apartments .content.middle .column.left .column.right .padding {
		padding: 0;
	}
	
	#apartments .content.middle .column.left .padding, #apartments .content.middle .column.right .padding {
		padding: 15px 15px 0 15px;
	}
	
	#apartments .content.top {
		border-top: none;
		margin: 0;
		padding: 30px 0 0 0;
	}
	
	#apartments .content.top .column .divider {
		margin: 0 0 15px 0;
	}
	
	#apartments .content.top .column .padding {
		padding: 0 15px;
	}
	
	#apartments .wrapper .bx-wrapper {
		max-width: none !important;
		margin: 0 -15px !important;
	}
	
	#contact {
		padding: 30px 0 15px 0;
	}
	
	#contact .content.top #contact-information {
		margin: 25px 0;
	}
	
	#contact .divider:nth-child(2), #contact .divider:nth-child(4) {
		display: none;
	}
	
	#contact #google-map {
		border-left: none;
		border-right: none;
		margin: 0 -15px 10px -15px;
	}
	
	#filters {
		border-bottom: none;
		margin: 0;
		padding: 10px 0 30px 0;
	}
	
	#map .column h3 {
		padding: 15px 0 30px 0;
	}
	
	#map .column.left .column, #map .column.right .column {
		width: auto;
		float: none;
	}
	
	#map .column.left .column .divider, #map .column.right .column .divider {
		margin: 15px 0 30px 0;
	}
	
	#map .column.left .column.left .padding, #map .column.right .column.right .padding, #map .column.right .column.left .padding, #map .column.right .column.right .padding {
		padding: 0;
	}
	
	#map .column.left .column .line, #map .column.right .column .line {
		display: none;
	}
	
	#map .column.left .column.right, #map .column.right .column.right {
		border-top: 1px solid #d7d5cd;
		margin: 15px 0 0 0;
		padding: 30px 0 0 0;
	}
	
	#map #google-map {
		border-left: none;
		border-right: none;
		margin: 0 -15px 15px -15px;
	}
	
	#neighborhood {
	    padding: 30px 0 15px 0;
	}

}

/********************************************************************************************* 

x. smaller than 750px

*********************************************************************************************/
@media only screen and (max-width:750px) {
	
	#header {
		height: auto;
		padding: 5px 0 15px 0;
	}
	
	#logo {
		margin: 0 auto;
		position: relative;
		top: 0; left: 0;
	}
	
	#nav {
		margin: 15px 0 0 0;
		position: relative;
		top: 0; 
		left: 0; right: 0;
	}
	
	#nav li.gap {
		display: none;
	}
	
}

/********************************************************************************************* 

x. smaller than 720px

*********************************************************************************************/
@media only screen and (max-width:720px) {
	
	#apartments .content.top .column {
		width: auto;
		float: none;
	}
	
	#apartments .content.top .column .divider, #apartments .content.top .column .line {
		display: none;
	}
	
	#contact .content.bottom .column.left, #contact .content.bottom .column.middle, #contact .content.bottom .column.right {
		width: auto; height: auto !important;
		float: none;
	}
	
	#contact .content.bottom .column.left .line, #contact .content.bottom .column.middle .line {
		display: none;
	}
	
	#contact .content.bottom .column.left .padding, #contact .content.bottom .column.middle .padding, #contact .content.bottom .column.right .padding {
		padding: 0;
	}
	
	#contact .content.bottom .column.middle, #contact .content.bottom .column.right {
		border-top: 1px solid #d7d5cd;
		margin: 20px 0 0 0;
	}
	
	#contact .content.top #contact-information li {
		display: block;
	}
	
	#contact .content.top #contact-information .line {
		display: none;
	}
	
	#contact #google-map {
		margin: 0 -15px;
	}
	
	#contact-methods {
		text-align: center;
		float: none;
	}
	
	#contact-methods li {
		margin: 0 5px;
		display: block;
		float: none;
	}
	
	#contact-methods li.divider {
		display: none;
	}
	
	#contact-methods li.social-media {
		display: inline-block;
		zoom: 1; 
		*display: inline;
	}
	
	#credits {
		text-align: center;
		float: none;
	}
	
	#footer .clearfloat {
		display: none;
	}
	
	.pop-up .plan {
		width: auto; height: auto;
		float: none;
	}
	
	.pop-up .plan img {
		max-width: 100%;
		max-height: none;
	}
	
	.pop-up ul a {
		display: none;
	}
	
	.pop-up ul h4 {
		line-height: 30px;
		padding: 0;
	}
	
	.pop-up ul li {
		height: auto;
		border: none;
		padding: 0;
		display: block;
	}
	
	.pop-up ul span.square-feet {
		margin: 5px 0 15px 0;
	}
	
	.pop-up ul span.type {
		margin: 15px 0 0 0;
	}
	
}

/********************************************************************************************* 

x. smaller than 670px

*********************************************************************************************/
@media only screen and (max-width:670px) {

	#neighborhood .content {
		width: auto;
	}

}

/********************************************************************************************* 

x. smaller than 660px

*********************************************************************************************/
@media only screen and (max-width:660px) {

	#home #bottom .column.left, #home #bottom .column.right, #home #top .column.left {
		width: auto;
		float: none;
	}
	
	#home #bottom .column.left .content.bottom, #home #bottom .column.left .content.top {
		text-align: center;
	}
	
	#home #bottom .column.left #flats .column {
	    max-height: none;
	    min-height: 0;
	}
	
	#home #bottom .column.left #flats .column h1 {
	    padding: 0 0 20px 0;
	}
	
	#home #bottom .column.left .line, #home #top .column.left .line {
		display: none;
	}
	
	#home #bottom .image, #home #top .image {
		width: 100% !important; height: auto !important;
	}
	
	#home #bottom .image img, #home #top .image img {
		width: 100% !important; height: auto !important;
	    margin: 0 !important;
	    position: relative !important;
	    top: 0 !important; left: 0 !important;
	}
	
	#home #bottom .column.right .content {
		text-align: center;
	    margin: 0;
	    padding: 30px 0 0 0;
	}
	
	#home #bottom .column.left .padding, #home #bottom .column.right .padding, #home #top .column.left .padding {
		padding: 0;
	}
	
	#home #top .column.right {
		display: none;
	}
	
	#home #bottom .clearfloat, #home #top .clearfloat {
		display: none;
	}

}	

/********************************************************************************************* 

x. smaller than 590px

*********************************************************************************************/
@media only screen and (max-width:590px) {
	
	#apartments .content.bottom .column, #apartments .content.middle .column, #apartments .content.top .column {
		height: auto !important;
	}
	
	#apartments .content.bottom .column.left, #apartments .content.bottom .column.right, #apartments .content.middle .column.left, #apartments .content.middle .column.right {
		width: auto;
		float: none;
	}
	
	#apartments .content.bottom .column .line, #apartments .content.middle .column .line {
		display: none;
	}
	
	#apartments .content.middle .column.left .column.right {
		border: none;
		padding: 0;
	}
	
	#apartments .content.middle .column.right {
		border-top: 1px solid #d7d5cd;
		padding: 15px 0 0 0;
	}
	
	#floor-plans {
	    padding: 0;
	}
	
	#floor-plans .content {
		display: none;
	}
	
	#nav {
		border: none;
		padding: 0;
	}
	
	#nav a {
		line-height: normal;
		width: auto; height: auto;
	}
	
	#nav li {
		height: auto;
		border-right: none;	
		padding: 0 5px;
		vertical-align: middle;
	}
	
	#map .column {
		height: auto !important
	}
	
	#map .column.left, #map .column.right {
		width: auto;
		float: none;
	}
	
	#map .column.left .line {
		display: none;
	}
	
	#map .column.left .padding, #map .column.right .padding {
		padding: 0;
	}
	
	#map .column.right {
		border-top: 1px solid #d7d5cd;
		margin: 15px 0 0 0;
		padding: 15px 0 0 0;
	}
	
	#nav li.first {
		border-left: none;
	}
	
	#plans {
		display: none;
	}
	
	.pop-up {
		border-bottom: 1px solid #d7d5cd;
		margin: 0 15px;
		padding: 15px 0 0 0;
		display: block;
	}
	
	.pop-up:last-of-type {
		border: none;
	}
	
	.pop-up .clearfloat {
		display: none;
	}
	
	.pop-up .plan {
		padding: 30px 60px 0 60px;
	}
	
	.pop-up ul {
		border-top: none;
		margin: 0;
		padding: 15px 0 0 0;
	}
	
}

/********************************************************************************************* 

x. smaller than 500px

*********************************************************************************************/
@media only screen and (max-width:500px) {
	
	#contact #google-map {
		height: 400px;
	}
	
	#filters li {
		padding: 0 2px 2px 2px;
	}
	
	h1 {
		font-size: 50px;
		line-height: 50px;
	}
	
	h2 {
		font-size: 35px;
		line-height: 35px;
	}
	
	h3 {
		font-size: 25px;
		line-height: 25px;
	}
	
	h4 {
		font-size: 20px;
		line-height: 20px;
	}
	
	h5 {
		font-size: 16px;
		line-height: 16px;
	}
	
	h6 {
		font-size: 16px;
		line-height: 16px;
	}
	
	html, body {
		font: 400 16px "brandon-grotesque", Arial, Helvetica, sans-serif;
	}
	
	#map #google-map {
		height: 400px;
	}
	
}


/********************************************************************************************* 

x. smaller than 420px

*********************************************************************************************/
@media only screen and (max-width:420px) {
	
	#header {
		padding: 5px 0 0 0;
	}
	
	#header .wrapper {
		padding: 0;
	}
	
	#nav {
		background: #8a4934;
		padding: 5px 0;
	}
	
	#nav a {
		color: #c9b2aa;
		font-size: 14px;
		line-height: 22px;
	}
	
	#nav a:hover, #nav .active a {
		color: #fff;
	}
	
	#nav li {
		display: block;
	}

}