/* MOBILE
 * * * * * * * * * * * * * * * * * * * * * * * */

@media screen and (max-width: 820px) {
	
	#map {
		width: auto;
	}

	#photos .big .photo {
		width: 720px;
	}
	
	#info .roomcount ul li {
		word-spacing: -3px;
	}
}

@media screen and (max-width: 500px) {
	
	#photos .big .photo {
		display: none;
	}
	
	#photos .thumbnails {
		display: none;
	}
	
	#slideshow {
		display: block;
		margin-left: -15px;
		margin-right: -15px;
		box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
	}
	
	#slideshow .slides {
		z-index: 1;	
	}
	
	#slideshow .footer {
		display: none;
	}
	
	#slideshow .footer .button.fullscreen:hover {
		opacity: 0.0;
	}
	
	#slideshow .hand {
		position: absolute;
		bottom: 0px;
		display: inline-block;
		font-size: 40px;
		line-height: 0px;
		height: 20px;
		padding: 0px;
		font-family: "Arial";
		color: #FFF;
		text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
		z-index: 2;	
	}
	
	#slideshow .hand.left {
		left: 15px;
		display: none;
	}
	
	#slideshow .hand.right {
		right: 15px;
	}
	
	#slideshow.end .hand.left {
		display: block;
	}
	
	#slideshow.end .hand.right {
		display: none;
	}
	
	#slideshow  a.icon {
		position: absolute;
		display: block;
		bottom: -50px;
		width: 33px;
		height: 33px;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.3);
		border: 5px solid #FFF;
		border-radius: 2px;
	}
	
	#slideshow  a.icon.floorplan {
		background-image: url('../images/floorplan-icon-4b.png?101');
		right: 11px;
	}
	
	#slideshow  a.icon.brochure {
		background-image: url('../images/brochure-icon-b.png');
		right: 60px;
	}
	
	body.fp-no #slideshow  a.icon.brochure {
		right: 11px;
	}
	
	#info {
		margin-top: 10px;
	}

	#info h3 {
		font-size: 20px;
		letter-spacing: 0px;
	}
	
	body.fp-yes #info h3,
	body.br-yes #info h3 {
		margin-right: 48px;
	}
	
	body.fp-yes.br-yes #info h3 {
		margin-right: 95px;
	}
	
	#info .neighborhood {
		min-width: 0px;
		display: block;
		position: relative;
		font-size: 18px;
		letter-spacing: auto;
		font-weight: 200;
		font-variation-settings: "wdth" 125;
	}
	
	#info .data {
		margin-top: 10px;
		border-top: 1px dotted #AAA;
	}
	
	#info .data .item {
		width: 24%;
		padding-top: 4px;
		line-height: 20px;
		margin: 0px;
	}
	
	#info.rent .data .item {
		width: 24%;
	}
	
	#info.rent .data .item.term {
		width: auto;
	}
	
	#info .data .item span.label {
		font-size: 10px;
		white-space: nowrap;
	}
	
	#info .data .item span.fl {
		display: none;
	}

	#info .data .item span.measure {
		font-size: 14px;
		font-weight: 200;
		color: #777;
		padding-left: 2px;
		display: none;
	}
	
	#info .data .item.taxes span.measure,
	#info .data .item.maintenance span.measure {
		font-size: 12px;
		display: inline;
	}
	
	#info .data .item.taxes span.measure span,
	#info .data .item.maintenance span.measure span {
		display: none;
	}

	#info .data .item strong {
		display: block;
		font-size: 14px;
		font-weight: 400;
		font-variation-settings: "wdth" 75;
		letter-spacing: -1px;
		word-spacing: -3px;
	}
	
	#info .roomcount {
		margin-top: 0px;
	}
	
	#info .roomcount ul {
		margin-top: 10px;
		padding-top: 10px;
		border-top: 1px dotted #AAA;
	}
	
	#info.rent .roomcount ul {
		width: auto;
	}

	#info .roomcount ul li {
		width: 48%;
		line-height: 24px;
		font-size: 14px;
		border: 0px dotted red;
	}
	
	#info.rent .roomcount ul li {
		width: 48%;
		font-size: 14px;
	}

	#info .roomcount ul li strong {
		font-size: 14px;
		font-weight: 400;
	}
	
	#description {
		font-size: 11px;
		line-height: 18px;
		font-weight: 300;
		margin-top: 10px;
		margin-bottom: 20px;
		padding-top: 10px;
		border-top: 1px dotted #AAA;
	}	
	
	#description p {
		font-size: 11px;
		font-weight: 300;
		line-height: 18px;
		margin-top: 10px;
	}
	
	#description ul {
		margin-top: 10px;
		margin-left: 10px;
	}

	#description ul li {
		line-height: 15px;
		margin-bottom: 10px;
	}
	
	#description a.toggle {
		margin-top: 10px;
	}

	#description a.toggle:hover {
		height: auto;
	}
	
	#map {
		width: auto;
		height: 300px;
	}
	
	#table.mobile tr th {
		padding-top: 5px;
	}
	
	/* AMENITIES * * * * * * * * * * * * * * * * * */
	
	#info .amenities {
		margin-top: 15px;
		margin-bottom: 20px;
		margin-left: -15px;
		padding-left: 15px;
		margin-right: -15px;
		padding-right: 15px;
		padding-top: 0px;
		padding-bottom: 10px;
	}

	#info .amenities h4 {
		padding-top: 10px;
		font-size: 10px;
		letter-spacing: 1px;
	}
	
	#info .amenities .content {
		position: relative;
	}
	
	#info .amenities .content > .left {
		float: none;
		width: auto;
		min-height: 45px;
	}
	
	#info .amenities .content > .right {
		padding-left: 0px;
	}

	#info .amenities .content > .right .images.brochure {
		float: none;
		width: auto;
	}

	#info .amenities .content > .right .images.photos {
		height: auto;
		display: none;
	}

	#info .amenities ul {
    	width: auto;
    	float: none;
    	column-count: 2;
	}
	
	#info .amenities ul li {
		font-size: 11px;
		line-height: 15px;
		margin-bottom: 5px;
		padding-left: 6px;
	}
	
	#info .amenities ul li::before {
		font-size: 19px;
		top: -2px;
	}

	#info .amenities .images a.photo.thumbnail {
		width: 70px;
		height: 70px;
		margin-bottom: 10px;
	}
	
	/* NO BROCHURE NO PHOTOS */
	
	#info .amenities.no-brochure.no-images ul {
		column-count: 2;
	}
	
	/* HAS BROCHURE NO PHOTOS */
	
	#info .amenities.has-brochure.no-images .content > .left {
		float: left;
		width: auto;
		margin-right: 110px;
	}
	
	#info .amenities.has-brochure.no-images .content > .right {
		position: absolute;
		top: 0px;
		right: 0px;
		width: 100px;
	}
	
	#info .amenities.has-brochure.no-images ul {
		column-count: 1;
	}
	
	#info .amenities.has-brochure.no-images .images.brochure {
		
	}
	
	#info .amenities.has-brochure.no-images .images.brochure a.photo {
		width: 90px;
		height: 90px;
		margin-top: -10px;
	}
	
	#info .amenities.has-brochure.no-images.with-1-amenities .images.brochure a.photo,
	#info .amenities.has-brochure.no-images.with-2-amenities .images.brochure a.photo {
		margin-top: -40px;
	}
	
	#info .amenities.has-brochure.no-images.with-3-amenities .images.brochure a.photo {
		margin-top: -28px;
	}
	
	#info .amenities.has-brochure.no-images.with-4-amenities .images.brochure a.photo {
		margin-top: -15px;
	}
	
	#info .amenities.has-brochure.no-images.with-5-amenities .images.brochure a.photo,
	#info .amenities.has-brochure.no-images.with-6-amenities .images.brochure a.photo,
	#info .amenities.has-brochure.no-images.with-7-amenities .images.brochure a.photo,
	#info .amenities.has-brochure.no-images.with-8-amenities .images.brochure a.photo,
	#info .amenities.has-brochure.no-images.with-9-amenities .images.brochure a.photo,
	#info .amenities.has-brochure.no-images.with-10-amenities .images.brochure a.photo {
		margin-top: -0px;
	}
	
	/* HAS BROCHURE HAS PHOTOS */
	
	#info .amenities.has-brochure.has-images {
		margin-bottom: 0px;
	}
	
	#info .amenities.has-brochure.has-images .content > .left {
		float: left;
		width: auto;
		margin-right: 110px;
		margin-bottom: 0px;
	}
	
	#info .amenities.has-brochure.has-images.with-1-amenities .content > .left,
	#info .amenities.has-brochure.has-images.with-2-amenities .content > .left,
	#info .amenities.has-brochure.has-images.with-3-amenities .content > .left,
	#info .amenities.has-brochure.has-images.with-4-amenities .content > .left {
		margin-bottom: 15px;
	}
	
	#info .amenities.has-brochure.has-images .content > .right {
		position: absolute;
		top: 0px;
		right: 0px;
		width: 100px;
	}
	
	#info .amenities.has-brochure.has-images ul {
		column-count: 1;
	}
	
	#info .amenities.has-brochure.has-images .images.brochure {
		
	}
	
	#info .amenities.has-brochure.has-images .images.brochure a.photo {
		width: 90px;
		height: 90px;
		margin-top: -10px;
	}
	
	#info .amenities.has-brochure.has-images.with-1-amenities .images.brochure a.photo,
	#info .amenities.has-brochure.has-images.with-2-amenities .images.brochure a.photo {
		margin-top: -40px;
	}
	
	#info .amenities.has-brochure.has-images.with-3-amenities .images.brochure a.photo {
		margin-top: -28px;
	}
	
	#info .amenities.has-brochure.has-images.with-5-amenities .images.brochure a.photo,
	#info .amenities.has-brochure.has-images.with-6-amenities .images.brochure a.photo,
	#info .amenities.has-brochure.has-images.with-7-amenities .images.brochure a.photo,
	#info .amenities.has-brochure.has-images.with-8-amenities .images.brochure a.photo,
	#info .amenities.has-brochure.has-images.with-9-amenities .images.brochure a.photo,
	#info .amenities.has-brochure.has-images.with-10-amenities .images.brochure a.photo {
		margin-top: -0px;
	}
	
	/* NO BROCHURE HAS PHOTOS */
	
	#info .amenities.no-brochure.has-images {
		margin-bottom: 0px;
	}
	
	/* AMENITIES SLIDESHOW */
	
	#slideshow-amenities {
		position: relative;
		display: block;
		width: auto;
		height: 200px;
		top: auto;
		left: auto;
		right: auto;
		margin: auto -15px;
	}
  
 	#slideshow-amenities .button.close {
    	display: none;
  	}
}

@media screen and (max-width: 380px) {
	
	#info h3 {
		font-size: 18px;
	}
	
	#info .neighborhood {
		font-size: 16px;
	}
	
	#slideshow .hand {
		position: absolute;
		right: 10px;
	}
	
	#info .data .item span.label {
		font-size: 9px;
		word-spacing: -3px;
	}
	
	#info .data .item span.measure {
		display: none;
		font-size: 13px;
		letter-spacing: -1px;
	}
	
	#info .data .item span.fl {
		display: none;
	}
	
	#info .data .item span.label {
		line-height: 12px;
	}
	
	#info .data .item strong {
		font-size: 13px;
	}
	
	#info .roomcount ul li {
		line-height: 20px;
		font-size: 12px;
	}
	

	#info .roomcount ul li strong {
		font-size: 12px;
	}
}

@media screen and (max-width: 340px) {
	
	#info .data .item span.measure {
		font-size: 12px;
		letter-spacing: -1px;
	}
	
	#description {
		line-height: 17px;
	}
	
	#description p {
		line-height: 17px;
	}
	
	body.fp-yes.br-yes #info h3 {
		font-size: 16px;
	}
	
	body.fp-yes.br-yes #info .neighborhood {
		font-size: 15px;
	}
	
	#info .amenities ul {
    	column-count: 1;
	}
	
	#info .amenities.no-brochure.no-images ul {
		column-count: 1;
	}
	
	#info .amenities.has-brochure.has-images .content > .left {
		margin-right: 100px;
	}
	
	#info .amenities.has-brochure.has-images .content > .right {
		width: 90px;
	}
	
	#info .amenities.has-brochure.has-images .images.brochure a.photo {
		width: 80px;
		height: 80px;
	}
	
}