/* Property area -------------------------------- */
.propertyDetail{
	padding:0 20px
}
@media (min-width:900px){
	.propertyDetail{
		margin:0 auto;
		padding:120px 0 0 0;
		width:900px
	}
}


/* Headings ------------------------------------ */
.propertyDetail h1{
	font-size:4rem;
	line-height:1.2em;
	margin:10px 0 0
}
.propertyDetail h1 strong{
	font-weight:200
}
.propertyDetail h2{
	font-size:3rem
}


/* Gaff header --------------------------------- */
.propertyDetail-header .propertyDetail-headerSummary{
	display:block;
	font-size:.55em;
	margin-bottom:4px
}
.propertyDetail-header .propertyDetail-headerSummary::first-letter{
	text-transform:uppercase
}


/* Information section -------------------------- */
.propertyDetail-section{
	margin-bottom:80px
}
.propertyDetail-section > h3{
	font-size:4rem;
	margin:20px 0 8px
}


/* Header --------------------------------------- */
.propertyDetail-header{
	z-index:4
}


/* Map ------------------------------------------ */
.propertyDetail-map{
	background:#272727;
	border-radius:4px;
	height:290px;
	overflow:hidden;
	padding:30px 0 0;
	position:-webkit-sticky!important;
	position:sticky;
	top:64px;
	z-index:3
}
#map{
	background:#272727;
	height:250px
}
@media (max-width:900px){
	.propertyDetail-map,
	#map{
		height:200px
	}
}


/* Aside ---------------------------------------- */
.propertyDetail-usefulLinks{
	display:none
}


/* Image strip ---------------------------------- */
.propertyDetail-images{
	background:#272727;
	margin:14px 0 0;
}
.propertyDetail-images:hover{
	z-index:4
}
.propertyImage{
	background:#000;
	float:none;
	height:200px;
	overflow:hidden;
	transform:scale(1);
	transform-origin:center center;
	transition:transform .3s
}
.propertyImage:hover{
	box-shadow:0 3px 9px #000;
	transform:scale(1.4);
	z-index:2
}
.propertyDetail-images .propertyImage{
	border-radius:2px;
	height:120px;
	margin-bottom:15px;
	margin-top:0
}
.propertyImage a{
	border-radius:2px;
	display:block;
	height:100%
}
.propertyImage img{
	border-radius:2px;
	min-height:100%;
	object-fit:cover;
	width:100%
}
.propertyImage img.loaded{
	transition:opacity 0s
}
.propertyDetail-images:hover .propertyImage img{
	opacity:.3;
	transition:.3s
}
.propertyDetail-images:hover .propertyImage a:active{
	transform:scale(.8)!important
}
.propertyDetail-images:hover .propertyImage a:hover img{
	animation:move 7s ease infinite;
	opacity:1
}
.propertyImage figcaption{
	display:none
}


/* Rich text ------------------------------------ */
.propertyDetail-details p{
	line-height:1.4em;
	margin-bottom:28px
}
.propertyDetail-details ul{
	margin-bottom:40px
}


/* Features ------------------------------------- */
.propertyDetail-features li{
	display:inline-block;
	list-style-type:circle;
	margin-left:0;
	padding:0 0 0 24px;
	vertical-align:top;
	width:50%
}
@media (min-width:900px){
	.propertyDetail-features li{
		width:33%
	}
}
.propertyDetail-features .fa{
	color:#fff;
	margin:2px 0 0 -24px;
	opacity:.2;
	position:absolute
}


/* Contact landlord details --------------------- */
.contactLandlord{
	padding:40px
}
.contactLandlord-summary::first-letter{
	text-transform:capitalize
}


/* Amenities nearby list ------------------------ */
.propertyDetail-nearbyAmenities > h3{
	font-size:4rem;
	margin-bottom:12px
}
.nearby-categoryHeading{
	border-bottom:1px rgba(255,255,255,.1) solid;
	font-size:1.6rem;
	margin-bottom:4px;
	padding-bottom:4px
}
.nearby-item:hover{
	cursor:default;
	font-weight:600
}
.nearby-categoryHeading .fa{
	margin:6px 0 0 -34px;
	opacity:.1;
	position:absolute
}
.nearby-category .nearby-categoryList{
	font-size:1rem;
	margin-bottom:20px;
	max-height:190px;
	overflow:hidden
}
.nearby-item{
	list-style-type:none;
	margin:0 0 4px;
	padding:4px 8px;
}
.nearby-item:nth-child(even){
	background:rgba(255,255,255,.05);
	border-radius:4px
}
.nearby-itemName{
	display:inline-block;
	overflow:hidden;
	text-overflow:ellipsis;
	width:70%;
	white-space:nowrap
}
.nearby-itemDistance{
	left:80%;
	padding-right:8px;
	position:absolute;
	text-align:right;
	width:20%
}
@media (max-width:900px){
	.propertyDetail-map{
		border-radius:4px;
		top:22px
	}
}
@media (min-width:900px){
	.nearby-categoryHeading{
		width:90%
	}
	.nearby-category .nearby-categoryList{
		height:200px;
		margin-bottom:40px;
		overflow:hidden;
		-webkit-overflow-scrolling:touch
	}
	.nearby-itemDistance{
		left:70%
	}
}


/* Nearby colleges ------------------------------ */
.propertyDetail-nearbyCollegesTable{
	border-collapse:collapse;
	font-size:1.2rem;
	margin:20px auto 0;
	max-width:480px;
	width:100%
}
.propertyDetail-nearbyCollegesTable thead{
	border-bottom:1px rgba(0,0,0,.1) solid;
	font-size:1.4rem;
	padding:8px 0
}
.propertyDetail-nearbyCollegesTable sup{
	font-size:.9rem;
	font-weight:100
}
.propertyDetail-nearbyCollegesTable tbody tr:active td,
.propertyDetail-nearbyCollegesTable tbody tr:hover td{
	font-weight:900
}
.propertyDetail-nearbyCollegesTable tbody tr:nth-child(even){
	background:rgba(0,0,0,.007)
}
.propertyDetail-nearbyCollegesTable tbody tr:nth-child(odd){
	background:rgba(255,255,255,.05)
}
.propertyDetail-nearbyCollegesTable td{
	border-radius:4px 0 0 4px;
	padding:4px 8px
}
.propertyDetail-nearbyCollegesTable td + td{
	border-radius:0 4px 4px 0
}


/* Tags ----------------------------------------- */
.propertyDetail-tags{
	margin-bottom:20px
}
.propertyDetail-tags h4,
.propertyDetail-tags ul,
.propertyDetail-tags li{
	display:inline-block
}


/* Landlord upgrade / remove notice ------------- */
.propertyDetail-landlordNotice{
	font-size:1.2rem
}
.propertyDetail-landlordNotice h4{
	border-bottom:1px rgba(0,0,0,.1) solid;
	font-size:2rem;
	margin-bottom:4px;
	padding-bottom:4px;
}


/* Animation ------------------------------------ */
@-webkit-keyframes move {
	0% {
		opacity:0;
		-webkit-transform-origin: bottom left;
		-moz-transform-origin: bottom left;
		-ms-transform-origin: bottom left;
		-o-transform-origin: bottom left;
		transform-origin: bottom left;
		transform: scale(1.0);
		-ms-transform: scale(1.0);
		/* IE 9 */

		-webkit-transform: scale(1.0);
		/* Safari and Chrome */

		-o-transform: scale(1.0);
		/* Opera */

		-moz-transform: scale(1.0);
		/* Firefox */
	}
	6%{
		opacity:1
	}
	96% {
		opacity:1
	}
	100% {
		opacity:0;
		transform: scale(1.2);
		-ms-transform: scale(1.2);
		/* IE 9 */

		-webkit-transform: scale(1.2);
		/* Safari and Chrome */

		-o-transform: scale(1.2);
		/* Opera */

		-moz-transform: scale(1.2);
		/* Firefox */
	}
}
