@charset "UTF-8";
/* CSS Document */

	main {
		padding-top: 50px;
		position: relative;
	}
	main h1 {
		font-family: Prata;
		font-size: 4rem;
		line-height: 1.1;
		color: var(--steel);
		text-align: center;
		text-align: left;
		margin-bottom: 50px;
	}
	
	
	/* properties */
	
		section.properties {}

		section.properties ul {}
		section.properties ul li {}


		/* basic settings */
		
			/* basic icons */

				.basic-icons {
					display: inline-block;
					pointer-events: all;
				}
				.basic-icons > ul {
					margin: 35px 0 0 0;
				}
				.basic-icons > ul { margin-top:10px; color: var(--steel); }
				.basic-icons > ul > li {
					display: inline-block;
					vertical-align: middle;
					margin-right: 15px;
				}
				.basic-icons > ul > li i { 
					display: inline-block;
					vertical-align: middle;
					position: relative;
					margin:-2px 5px 0 0;
					font-size:      30px;
					line-height:    30px;
					width:          30px;
					height:         30px;
					color: var(--steel);
				}
				.basic-icons > ul > li em {
					display: inline-block;
					vertical-align: top;
					position: relative;
					margin: 0;
					font-weight: 500;
				}
				.basic-icons > ul > li em { font-size:1.0rem; line-height:25px; color: var(--steel); }
				.basic-icons > ul > li[data-label="bedrooms"     ] em { float:left; }
				.basic-icons > ul > li[data-label="bathrooms"    ] em { float:left; }
				.basic-icons > ul > li[data-label="bedrooms"     ] em:after { content:"×"; }
				.basic-icons > ul > li[data-label="bathrooms"    ] em:after { content:"×"; }
				.basic-icons > ul > li[data-label="bedrooms"     ] i:before { content:"\e906"; }
				.basic-icons > ul > li[data-label="bathrooms"    ] i:before { content:"\e904"; }
				.basic-icons > ul > li[data-label="property-size"] i:before { content:"\e903"; }
				.basic-icons > ul > li[data-label="land-size"    ] i:before { content:"\e939";content: "\e93d";}
				.basic-icons > ul > li[data-label="price"        ] i:before { content:"\e92f"; }
				.basic-icons > ul > li[data-label="built"        ] i:before { content:"\e93a"; }
				.basic-icons > ul > li[data-label="renovated"    ] i:before { content:"\e93b"; }
				.basic-icons > ul > li[data-label="handover"     ] i:before { content:"\e93c"; }
		
		
		/* comparison */
		
		
			#sticky-header {
				position: fixed;
				top: 0;
				z-index: 9999;
				left: 50%;
				top: 100px;
				transform:translateX(-50%);
				height: 300px;
				overflow: hidden;
			}
			html               #sticky-header,
			html[data-thp="0"] #sticky-header { display: none; }
			html[data-thp="1"] #sticky-header { display: block; }

			html[data-thp="0"] #compare-properties table thead { opacity:1; }
			html[data-thp="1"] #compare-properties table thead { opacity:0; }

			#sticky-header .compare-properties {
				box-shadow: 0 5px 10px 0 rgba(0,0,0,0.25);
			}
			.compare-properties {
				border-radius: 0;
				overflow: hidden;
			}
			#compare-properties h1,
			#sticky-header h1 {
				font-family: Prata;
				font-size: 2.5rem;
				line-height: 1.2;
				color:var(--steel);
				margin: 20px 0 0 20px;
				opacity: 0;
				transition: opacity 0.5s ease;
			}
			html[data-thp="0"] #sticky-header h1 { opacity: 0; }
			html[data-thp="1"] #sticky-header h1 { opacity: 1; }
			
			.compare-properties table {
				margin: 0; padding: 0;
				border-collapse: collapse;
				border:none;
				position: relative;
			}
			.compare-properties table thead {
				background: white;
				position: relative;
				top: 0px;
				overflow: hidden;
			}
			.compare-properties[data-count="2"] table thead { height:200px; }
			.compare-properties[data-count="3"] table thead { height:230px; }
			.compare-properties[data-count="4"] table thead { height:250px;}
			.compare-properties[data-count="5"] table thead { height:250px; }
			
			.compare-properties table thead tr {}
			.compare-properties table thead tr th {
				background-color: #F5F5F5;
				vertical-align: top;
				margin: 0; padding: 0;
				border:none;
				box-sizing: border-box;
			}
			.compare-properties table thead tr th div.container {
				background-color: #97E0C9;
				background-color: transparent;
				box-sizing: border-box;
			}
			.compare-properties                 table thead tr th.label div.container { width:calc(300px     -  0px); margin-left: 0px; margin-right:  0px; }
			.compare-properties[data-count="1"] table thead tr th.value div.container { width:calc(900px / 1 -  5px); margin-left: 0px; margin-right:  5px; }
			.compare-properties[data-count="2"] table thead tr th.value div.container { width:calc(900px / 2 -  5px); margin-left: 0px; margin-right:  5px; }
			.compare-properties[data-count="3"] table thead tr th.value div.container { width:calc(900px / 3 -  5px); margin-left: 0px; margin-right:  5px; }
			.compare-properties[data-count="4"] table thead tr th.value div.container { width:calc(900px / 4 -  5px); margin-left: 0px; margin-right:  5px; }
			.compare-properties[data-count="5"] table thead tr th.value div.container { width:calc(900px / 5 -  5px); margin-left: 0px; margin-right:  5px; }
			.compare-properties[data-count="6"] table thead tr th.value div.container { width:calc(900px / 6 -  5px); margin-left: 0px; margin-right:  5px; }
			.compare-properties[data-count="7"] table thead tr th.value div.container { width:calc(900px / 7 -  5px); margin-left: 0px; margin-right:  5px; }
			.compare-properties[data-count="8"] table thead tr th.value div.container { width:calc(900px / 8 -  5px); margin-left: 0px; margin-right:  5px; }
			.compare-properties[data-count="9"] table thead tr th.value div.container { width:calc(900px / 9 -  5px); margin-left: 0px; margin-right:  5px; }
			
			.compare-properties table thead tr th.label {}
			.compare-properties table thead tr th.value {
				position: relative;
			}
			.compare-properties table thead tr th.value figure {
				width:100%;
				height: 150px;
				background-size: cover;
				margin-top:     5px;
				margin-bottom: 10px;
				border-radius:  3px;
			}
			.compare-properties table thead tr th.value figure:before {
				content:"";
				display: block;
				position: absolute;
				z-index: 1;
				font-family: NunitoSans;
				font-weight: normal;
				font-size:     13px;
				line-height:   20px;
				width:         20px;
				height:        20px;
				border-radius: 20px;
				text-align: center;
				background-color: white;
				border:1px solid var(--steel);
				color: var(--steel);
				top:  8px;
				left: 3px;
			}
			.compare-properties table thead tr th:nth-child(2) figure:before { content:"1"; }
			.compare-properties table thead tr th:nth-child(3) figure:before { content:"2"; }
			.compare-properties table thead tr th:nth-child(4) figure:before { content:"3"; }
			.compare-properties table thead tr th:nth-child(5) figure:before { content:"4"; }
			.compare-properties table thead tr th:nth-child(6) figure:before { content:"5"; }
			.compare-properties table thead tr th:nth-child(7) figure:before { content:"6"; }
			.compare-properties table thead tr th:nth-child(8) figure:before { content:"7"; }
			.compare-properties table thead tr th:nth-child(9) figure:before { content:"8"; }
			.compare-properties table thead tr th:nth-child(10) figure:before { content:"9"; }
			
			.compare-properties table thead figcaption {
			
			}
			.compare-properties {
				margin-bottom: 50px;
			}
			.compare-properties figcaption h2.title {
				position: relative;
				/* font-family: Prata; */
				font-size: 0.85rem;
				line-height: 1.2;
				color: #4e7191;
				text-wrap:balance;
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				text-overflow: ellipsis;
			}
			.compare-properties figcaption p.price { margin: 5px 0; }
			.compare-properties figcaption p.price i:before { content:"\e92f"; color: var(--steel); }

			.compare-properties table tbody tr            { border-top: 1px solid rgba(0,0,0,0.15); }
			.compare-properties table tbody tr:last-child { border-bottom: 1px solid rgba(0,0,0,0.15); }
			.compare-properties table tbody tr:nth-child(2n+0) { background-color: #F5F5F5; }
			.compare-properties table tbody tr:nth-child(2n+1) { background-color: #FAFAFA; }
			
			.compare-properties table tbody tr td {
				box-sizing: border-box;
			}
			.compare-properties table tbody tr td.label .container {
				padding: 3px 5px 3px 15px;
				text-align: left;
				font-family: NunitoSans;
				font-size: 0.8rem;
				line-height: 1.2;
			}
			.compare-properties table tbody tr td.label {}
			.compare-properties table tbody tr td.label .container i {
				display: block;
				position: relative;
				width:          20px;
				height:         20px;
				margin-bottom: -20px;
				top: -3px;
				background-size: contain;
			}
			.compare-properties table tbody tr td.label .container em {
				display: block;
				position: relative;
				margin-left:25px;
			}
			
			.compare-properties table tbody tr td.label input { display: none; }
			.compare-properties table tbody tr td.value {}
			.compare-properties table tbody tr td.value .container {
				padding: 0;
				text-align: left;
				font-family: NunitoSans;
				font-size: 0.8rem;
				line-height: 1.2;
			}
			
			.compare-properties table tbody tr td.value .container span {}
			.compare-properties table tbody tr td.value .container span i {
				display: block;
				position: relative;
				font-size:      15px;
				line-height:    20px;
				width:          20px;
				height:         20px;
				border-radius:  20px;
				margin-bottom: -20px;
				color: white;
				text-align: center;
			}
			.compare-properties table tbody tr td.value .container span em {
				display: block;
				position: relative;
				font-size:      1rem;
				line-height:    20px;
				margin-left:    25px;
				color: var(--steel);
			}
			.compare-properties table tbody tr td.value .container span[data-val="0"] i { background-color:#BF000000; color:var(--steel_light); }
			.compare-properties table tbody tr td.value .container span[data-val="1"] i { background-color:#00BF4C22; color:#00BF4C; }
			.compare-properties table tbody tr td.value .container span[data-val="0"] i:before { content:"\e928"; }
			.compare-properties table tbody tr td.value .container span[data-val="1"] i:before { content:"\e92e"; }
			.compare-properties table tbody tr td.value .container span[data-val="0"] em:before { content:"no";  color:var(--steel_extralight); }
			.compare-properties table tbody tr td.value .container span[data-val="1"] em:before { content:"yes"; color:var(--steel); }
			
			
			
		
		/* views */
		
			/* list view */

				section.properties > ul > li {
					position: relative;
					margin:0 0 0 0;
					padding:0 0 15px 0;
					font-size:0;line-height:0;
				}
				section.properties > ul > li:after {
					display: block;
					content:"";
					height: 15px;
					border-bottom: 1px solid var(--steel_light);
				}
				section.properties > ul > li:last-child:after { display: none; }
				section.properties > ul > li a.property-details {
					position: absolute;
					left: 0; top: 0;
					right: 0;
					bottom: 0;
				}
				section.properties > ul > li figure {
					display: inline-block;
					vertical-align: top;
					position: relative;
					width:  100px;
					height: 100px;
					background-size: cover;
					background-repeat: no-repeat;
					border-top-left-radius:     15px;
					border-bottom-right-radius: 15px;
				}
				section.properties > ul > li figure a.inline-button {
					position: absolute;
					bottom:5px;
				}
				section.properties > ul > li figure a.inline-button       i { opacity: .5; }
				section.properties > ul > li figure a.inline-button:hover i { opacity: 1; }
				section.properties > ul > li figure a.inline-button i {
					display: block;
					font-size:   30px;
					line-height: 30px;
					width:       30px;
					height:      30px;
					overflow: hidden;
					border-radius: 5px 0;
					background-color: rgba(78,113,145,0.5);
					color: white;
					display: none;
				}
				section.properties > ul > li figure a.inline-button.add-to-favourites,
				section.properties > ul > li figure a.inline-button.remove-from-favourites { left:5px;}
				section.properties > ul > li figure a.inline-button.add-to-compare        { left:40px;}
				
				section.properties > ul > li figure a.inline-button.add-to-favourites      i:before { content:"\e913"; }
				section.properties > ul > li figure a.inline-button.remove-from-favourites i:before { content:"\e942"; }
				section.properties > ul > li figure a.inline-button.add-to-compare         i:before { content:"\e944"; }
				
				section.properties > ul > li[data-fav="0"] figure a.inline-button.add-to-favourites      i { display:block; opacity:1; }
				section.properties > ul > li[data-fav="1"] figure a.inline-button.remove-from-favourites i { display:block; opacity:1; }
				section.properties > ul > li[data-cmp="0"] figure a.inline-button.add-to-compare         i { display:block; opacity:1; }
				section.properties > ul > li               figure a.inline-button { opacity: 0; }
				section.properties > ul > li[data-fav="1"] figure a.inline-button.remove-from-favourites,
				section.properties > ul > li:hover         figure a.inline-button { opacity: 1; }

				section.properties > ul > li figcaption {
					display: inline-block;
					position: relative;
					width: calc(100% - 25px - 250px);
					vertical-align: top;
					padding-left: 25px;
				}
				section.properties > ul > li figcaption * {
					white-space: normal;
				}
				section.properties > ul > li figcaption .cols {
					display: block;
					width: 100%;
				}
				section.properties > ul > li figcaption .cols .col {
					display: inline-block;
					vertical-align: top;
				}
				section.properties > ul > li figcaption .cols .col:nth-child(1) { width: calc(100% - 150px);  }
				section.properties > ul > li figcaption .cols .col:nth-child(2) { width: 150px; text-align: right; }
				section.properties > ul > li figcaption h2.title {
					font-family: Prata;
					font-size: 1.5rem;
					line-height: 1.2;
					color: #4e7191;
					padding-right: 33%;
					text-wrap:balance;
				}
				section.properties > ul > li figcaption ul.types {
					margin: 0 0 15px 0;
				}
				section.properties > ul > li figcaption ul.types > li {
					display: inline-block;
					background-color: var(--steel_light);
					color: white;
					border-radius: 15px;
					padding: 2px 15px;
					margin-right: 10px;
					font-size: 0.8rem;
					line-height: 1;
					text-transform: uppercase;
					letter-spacing: 1.5pt;
				}
				
				
				

			/* grid view */

			/* large grid view */




		
	
	/* modifiers */
	
	XXXfooter .background {
		padding-bottom: 75px!important;
	}