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

x. Basic Setup (Body, Fonts, etc.) 

*********************************************************************************************/
@media only screen and (max-width:1500px) {
	.wrapper.large {
		margin: 0 50px;
	}
}
@media only screen and (max-width:1100px) {
	html, body {
		font-size: 18px;
	}
	h1 {
		font-size: 50px;
	}
	h2 {
		font-size: 40px;
	}
	h3,
	h4 {
		font-size: 30px;
	}
	h5 {
		font-size: 20px;
	}
	.wrapper.small {
		margin: 0 50px;
	}
}
@media only screen and (max-width:900px) {
	html, body {
		font-size: 16px;
	}
	h1 {
		font-size: 40px;
	}
	h2 {
		font-size: 30px;
	}
	h3,
	h4,
	h5 {
		font-size: 20px;
	}
}
@media only screen and (max-width:800px) {
	.wrapper.large,
	.wrapper.small {
		margin: 0 30px;
	}
}
@media only screen and (max-width:500px) {
	html, body {
		font-size: 14px;
	}
	h1 {
		font-size: 30px;
	}
	h2,
	h3,
	h4,
	h5 {
		font-size: 16px;
	}
}

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

x. Amenities

*********************************************************************************************/
@media only screen and (max-width:1100px) {
	#amenities {
		padding: 70px 0;
	}
	#amenities .columns {
		margin: -15px -25px;
	}
	#amenities .columns .column.full-information .inside {
		padding: 40px 0;
	}
	#amenities .inside {
		padding: 15px 25px;
	}
}
@media only screen and (max-width:800px) {
	#amenities {
		padding: 50px 0;
	}
	#amenities .columns {
		padding: 50px 0 0 0;
	}
	#amenities .columns .column.full-information .inside {
		padding: 30px 0;
	}
	#amenities .columns .column.full-information .inside .image {
		margin: 0 0 30px 0;
	}
	#amenities .column.width-16 {
		width: 20%
	}
	#amenities .link .image {
		margin: 0 0 10px 0;
	}
	#amenities .link .title {
		font-size: 10px;
		letter-spacing: normal;
	}
}
@media only screen and (max-width:700px) {
	#amenities .column.width-16 {
		width: 25%
	}
}
@media only screen and (max-width:500px) {
	#amenities .column.width-16 {
		width: 33.33%
	}
	#amenities .columns {
		margin: -15px;
	}
	#amenities .inside {
		padding: 15px;
	}
}
@media only screen and (max-width:400px) {
	#amenities .column.width-16 {
		width: 50%
	}
}

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

x. bxSlider

*********************************************************************************************/
@media only screen and (max-width:800px) {
	.slideshow-wrapper .slideshow-pager {
		bottom: 30px;
	}
	.slideshow-carousel .slideshow-controls-direction a,
	.slideshow-carousel .slideshow-controls-direction a svg {
		width: 60px; height: 60px;
	}
}
@media only screen and (max-width:400px) {
	.slideshow-wrapper .slideshow-pager {
		display: none;
	}
}

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

x. Button

*********************************************************************************************/
@media only screen and (max-width:1000px) {
	.button {
		font-size: 12px;
		padding: 15px 50px;
	}
}

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

x. Contact

*********************************************************************************************/
@media only screen and (max-width:800px) {
	#contact {
		padding: 50px 0;
	}
}

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

x. Features

*********************************************************************************************/
@media only screen and (max-width:1100px) {
	#features .content {
		padding: 70px 50px;
	}
}
@media only screen and (max-width:700px) {
	#features .content {
		padding: 50px 30px;
	}
	#features .column.width-50 {
		width: 100%;
	}
}


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

x. Floor Plans

*********************************************************************************************/
@media only screen and (max-width:1000px) {
	#floor-plans .units .grid {
		margin: -10px;
	}
	#floor-plans .units .grid .item .inside {
		margin: 10px;
	}
}
@media only screen and (max-width:900px) {
	#floor-plans .units .grid .item.width-33 {
		width: 50%;
	}
}
@media only screen and (max-width:800px) {
	#floor-plans,
	#floor-plans .columns {
		padding: 50px 0;
	}
	#floor-plans .column.width-25 {
		width: 50%;
	}
}
@media only screen and (max-width:700px) {
	#floor-plans .column.width-33,
	#floor-plans .column.width-50 {
		width: 100%;
	}
	#floor-plans .columns {
		padding: 50px 0 0 0;
	}
	/*
	#floor-plans .units table {
		margin: 0;
	}
	#floor-plans .units table td.floor,
	#floor-plans .units table th.floor {
		display: none;
	}
	#floor-plans .units table td.view,
	#floor-plans .units table th.view {
		display: none;
	}
	*/
}
@media only screen and (max-width:600px) {
	#floor-plans .units .grid .item .inside .buttons li {
		width: calc(100% - 10px);
		margin: 0 0 10px 0;
	}
	#floor-plans .units .grid .item .inside .buttons li:last-of-type {
		margin-bottom: 0;
	}
}
@media only screen and (max-width:500px) {
	#floor-plans .units .grid .item.width-33 {
		width: 100%;
	}
}
@media only screen and (max-width:500px) {
	/*
	#floor-plans .units table td.size,
	#floor-plans .units table th.size {
		display: none;
	}
	*/
}
@media only screen and (max-width:400px) {
	/*
	#floor-plans .units table td.availability,
	#floor-plans .units table th.availability {
		display: none;
	}
	*/
}


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

x. Footer

*********************************************************************************************/
@media only screen and (max-width:1000px) {
	footer .logos.companies li:first-of-type .image img {
		max-width: 50px;
	}
	footer .logos.companies li:last-of-type .image img{
		max-width: 120px;
	}
	footer .logos.fair-housing li {
		margin: 0 0 0 40px;
	}
	footer .logos.fair-housing li svg {
		width: 20px; height: auto;
	}
}
@media only screen and (max-width:600px) {
	footer .columns:last-of-type {
		margin: 0;
	}
	footer .columns .column {
		float: none;
	}
	footer {
		padding: 30px 0;
	}
	footer .credits {
		text-align: center;
	}
	footer .logo {
		width: 110px; height: auto;
		margin: 0 auto;
		-moz-transform: none;
		-webkit-transform: none;
		-o-transform: none;
		-ms-transform: none;
		transform: none;
		position: relative;
		top: 0; left: 0;
	}
	footer .logos.companies {
		text-align: center;
		margin: 30px 0 0 0;
	}
	footer .logos.companies li img {
		margin: 0 auto;
	}
	footer .logos.companies li .label {
		text-align: center;
	}
	footer .logos.fair-housing {
		text-align: center;
		margin: 30px 0;
	}
	footer .logos.fair-housing li {
		margin: 0 10px;
		vertical-align: middle;
	}
	footer .social-media {
		text-align: center;
	}
	footer .social-media li {
		margin: 0 15px;
	}
}
@media only screen and (max-width:500px) {
	footer .logo,
	footer .logo svg {
		width: 80px; height: 80px;
	}
}

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

x. Form

*********************************************************************************************/
@media only screen and (max-width:1024px) {
	form input,
	form textarea {
	    border-radius: 0;
	    -webkit-appearance: none;
	}
}
@media only screen and (max-width:400px) {
	form input[type="email"],
	form input[type="text"],
	form label.checkbox,
	form label.filter,
	form textarea {
		margin: 0 0 15px 0;
	}
	form label.error {
		margin: -5px 0 15px 0;
	}
}


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

x. Gallery

*********************************************************************************************/
@media only screen and (max-width:800px) {
	#gallery .key {
		margin: 0 20px -20px 20px;
		padding: 30px 30px 10px 30px;
	}
	#gallery .buttons li {
		margin: 0 10px 20px 10px;
	}
	#gallery .wrapper {
		margin-bottom: 50px;
	}
}
@media only screen and (max-width:700px) {
	#gallery .buttons a {
		width: 200px;
		padding-left: 0;
		padding-right: 0;
	}
	#gallery .buttons li {
		margin: 0 0 20px 0;
		display: block;
	}
	#gallery .buttons li:last-of-type {
		margin-bottom: 0;
	}
	#gallery .key {
		margin: 0;
		padding: 30px;
	}
}
@media only screen and (max-width:500px) {
	#gallery .wrapper.large {
		margin: 0;
	}
}

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

x. Header

*********************************************************************************************/
@media only screen and (max-width:1300px) {
	header {
		height: 0;
	}
	header .hamburger {
		display: block;
	}
	header .navigation {
		background: #273744;
		width: 239px; height: auto;
		border-left: 1px solid white;
		padding: 20px 0;
		position: fixed;
		top: 0; bottom: 0;
		right: -240px;
	}
	header .navigation a,
	header.shrink .navigation a,
	header .navigation li:last-of-type a,
	header.shrink .navigation li:last-of-type a {
		color: white;
		padding: 20px;
	}
	header .navigation li,
	header.shrink .navigation li {
		display: block;
	}
	header .navigation li:last-of-type,
	header.shrink .navigation li:last-of-type {
		margin-left: 0;
	}
	header .navigation li:first-of-type {
		display: none;
	}
	header .navigation .label,
	header.shrink .navigation .label {
		border: 1px solid white;
		padding: 15px;
	}
}
@media only screen and (max-width:800px) {
	header .callout {
		font-size: 12px;
	}
	header .hamburger {
		border-width: 15px;
		margin: 30px;
	}
}
@media only screen and (max-width:500px) {
	header .callout {
		display: none;
	}
	header .navigation a,
	header.shrink .navigation a,
	header .navigation li:last-of-type a,
	header.shrink .navigation li:last-of-type a {
		padding: 15px 20px;
	}
}

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

x. Home

*********************************************************************************************/
@media only screen and (max-width:800px) {
	#home {
		padding: 50px 0;
	}
}

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

x. jSlider

*********************************************************************************************/
@media only screen and (max-width:500px) {
	.jslider {
		margin-bottom: 50px;
	}
}


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

x. Logo

*********************************************************************************************/
@media only screen and (max-width:1300px) {
	#logo .logo svg {
		width: 300px; height: auto;
	}
}
@media only screen and (max-width:1000px) {
	#logo .logo svg {
		width: 250px; height: auto;
	}
}
@media only screen and (max-width:800px) {
	#logo .logo svg {
		width: 200px; height: auto;
	}
}
@media only screen and (max-width:600px) {
	#logo .logo svg {
		width: 150px; height: auto;
	}
}
@media only screen and (max-width:500px) {
	#logo .logo svg {
		width: 125px; height: auto;
	}
}

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

x. Neighborhood

*********************************************************************************************/
@media only screen and (max-width:1100px) {
	#neighborhood .content {
		padding: 70px 50px;
	}
}
@media only screen and (max-width:1000px) {
	#neighborhood .buttons a {
		width: 200px;
	}
}
@media only screen and (max-width:700px) {
	#neighborhood .column.width-50 {
		width: 100%;
	}
	#neighborhood .content {
		padding: 50px 30px;
	}
}
@media only screen and (max-width:500px) {
	#neighborhood .column.width-50:first-child {
		display: none;
	}
}


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

x. Newsroom

*********************************************************************************************/
@media only screen and (max-width:1100px) {
	#newsroom .link {
		padding: 0 25px;
	}
}
@media only screen and (max-width:800px) {
	#newsroom {
		padding: 50px 0;
	}
	#newsroom .slideshow-wrapper {
		padding: 20px 50px 0 50px;
	}
}
@media only screen and (max-width:600px) {
	#newsroom {
		display: none;
	}
}

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

x. Pop-Up

*********************************************************************************************/
@media only screen and (max-width:600px) {
	.pop-up .buttons li.width-33 {
		width: 100%;
		margin: 0 0 10px 0;
	}
	.pop-up .buttons li.width-33:last-of-type {
		margin: 0;
	}
}

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

x. Unit

*********************************************************************************************/
@media only screen and (max-width:800px) {
	#unit {
		margin: 0 0 50px 0;
		padding: 50px 0;
	}
}
@media only screen and (max-width:700px) {
	#unit .buttons.top {
		text-align: left;
		padding: 10px 0 0 0;
	}
	#unit .buttons.top a {
		width: auto;
		padding: 10px;
	}
	#unit .column.width-20,
	#unit .column.width-40 {
		width: 100%;
	}
	#unit .column:first-of-type {
		margin: 0 0 10px 0;
	}
}
@media only screen and (max-width:600px) {
	#unit .buttons.bottom li {
		width: 100%;
		float: none;
	}
	#unit .buttons.bottom .inside {
		margin: 2px 0;
	}
}
@media only screen and (max-width:400px) {
	#unit .images .image {
		padding: 20px;
	}
}