/* presale-info.css | Jarvis Wong | 2024 */
/* ------------ base overwrite --------------*/
.block-content {
	padding: 80px 20px;
}
/* ------------ hero --------------*/
.hero {
	position: relative;
	height: calc(75vh - 100px);
	width: 100%;
}
.hero-content {
	width: 100%;
	height: 100%;
}
.hero-container {
	height: 100%;
	width: 100%;
	margin: auto;
}
.hero-container img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.hero-container video {
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.hero-gradient {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-image: radial-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2));
}
.hero-gradient-light {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-image: radial-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.6));
}
.title {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40%;
}
@media (max-width:900px) {
	.title {
		width: 80%;
	}
}
/* ------------ building info --------------*/
.building-grid{
	display: grid;
	grid-template-columns: 3fr 1fr;
	gap: 1rem;
	padding-bottom: 50px;
}
.building-info {
	grid-column: span 1;
	padding-right: 50px;
	border-right: solid 1px;
}
.completion-date{
	grid-column: span 1;
	text-align: center;
}
@media (max-width:700px) {
	.building-info {
		grid-column: span 2;
		padding-right: 0;
		border-right: none;
	}
	.building-info h2 {
		text-align: center;
	}
	.completion-date{grid-column: span 2;}
}
/* ------------ developer --------------*/
.developer-grid{
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap: 1rem;
}
.developer-logo {
	grid-column: span 1;
	text-align: center;
}
.developer-logo img{
	width: 90%;
	padding: 25px 0;
}
.developer-info{
	grid-column: span 1;
}
@media (max-width:700px) {
	.developer-logo {grid-column: span 2;}
	.developer-info{grid-column: span 2;}
}
/* ------------ units --------------*/
.suites-grid {
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap: 1rem;
}
.suites {
	grid-column: span 1;
}
.suites li {
	padding: 1em 0;
}
.suites-image{
	grid-column: span 1;
}
.suites-image .image {
	object-fit: cover;
	height: 40vh;
	box-shadow: 0px 0px 20px #888888;
}
@media (max-width:700px) {
	.suites {grid-column: span 2;}
	.suites-image{grid-column: span 2;}
}
/* ------------ panorama view --------------*/
.panorama {
	height: 60vh;
	background-size: auto 100%;
	background-repeat: repeat-x;
	background-position: 0px center;
	cursor: move;
	
}
.panorama-overlay{
	width: 100%;
	height: 100%;
	background-color:rgba(0, 0, 0, 0.5);
	color: rgba(255, 255, 255, 0.5);
	font-size: 5vh;
	text-align: center;
	padding-top: 20vh;
	transition: 0.5s ease;
}
.panorama-overlay:hover{
	background-color:rgba(0, 0, 0, 0);
	color:rgba(0, 0, 0, 0);
}
@media (max-width:700px) {
	.panorama-overlay {
		background-color:rgba(0, 0, 0, 0);
		color:rgba(0, 0, 0, 0);
	}
}
/* ------------ neighborhood --------------*/
.neighborhood-grid {
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap: 3rem;
}
.neighborhood-map{
	grid-column: span 1;
}
.mapouter{
	box-shadow: 0px 0px 20px #888888;
}
.neighborhood {
	grid-column: span 1;
}
@media (max-width:1000px) {
	.neighborhood-map{
		grid-column: span 2;
	}
	.neighborhood {
		grid-column: span 2;
	}
}
/* ------------ deposit structure --------------*/
.deposit{
	width: 100%;
}
.deposit-structure{
	width: 100%;
	border-collapse: collapse;
}
.deposit-structure td {
	border-top: 1px solid;
	padding: 15px;
}
.deposit-structure tr:first-child td {
	border-top: none;
}
/* ------------ color scheme --------------*/
.color-grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	text-align: center;
}
.color-left{
	grid-column: span 1;
}
.color-right{
	grid-column: span 1;
}
@media (max-width:700px) {
	.color-left {grid-column: span 2;}
	.color-right {grid-column: span 2;}
}
/* ------------ appliances --------------*/

/* ------------ facilities --------------*/

/* END */