//@import "/theme/fonts/Baskerville/styles.css";
//@import url('https://fonts.googleapis.com/css?family=PT+Serif:400,700');
@import url('https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre:300,400,500,700');
@import "/theme/fonts/EdwardianScriptITC/styles.css";
@import "/theme/fonts/Baskerville-Italic/styles.css";
@base_font_color: #5a5a5a;
@base_font: ~'"Frank Ruhl Libre", Helvetica, Arial, "Microsoft JhengHei", serif;';
@base_font_hover_color: #4992ab;
//@base_font_hover_color: #343f4d;
@container-width-md: 950px;
@container-width-lg: 1100px;
@container-width-xl: 1300px;

.transition-duration (@transition) {
    transition-duration:         @transition;
	-webkit-transition-duration: @transition;
	-moz-transition-duration:    @transition;
	-ms-transition-duration:     @transition;
	-o-transition-duration:      @transition;
}
.transition(@property:all; @duration:0.3s;){
	-webkit-transition-property: @property;
	-moz-transition-property: @property;
	-o-transition-property: @property;
	transition-property: @property;
	transition-duration: @duration;
}

@screen-xl: ~"screen and (min-width: 1600px)";
@screen-lg: ~"screen and (min-width: 1400px)";
@screen-md: ~"screen and (min-width: 1200px)";
@screen-sm: ~"screen and (min-width: 900px)";

@screen-max-xl: ~"screen and (max-width: 1600px)";
@screen-max-lg: ~"screen and (max-width: 1280px)";
@screen-max-sm: ~"screen and (max-width: 1024px)"; // iPad H
@screen-max-xs: ~"screen and (max-width: 768px)"; // iPad V
@screen-max-ipplus: ~"screen and (max-width: 414px)"; // Iphone Plus
@screen-max-ip: ~"screen and (max-width: 375px)"; // Iphone

body {
	//font-family: "Baskerville", Helvetica, Arial, "Microsoft JhengHei", sans-serif;
	font-family: @base_font;
	//background-color: rgba(252, 236, 224, 0.9);
	padding: 0;
	margin: 0;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5em;
	color: @base_font_color;
}
a {
	outline: none;
	border: 0;
	text-decoration: none;
}
img {
	outline: none;
	border: 0;
	max-width: 100%;
}
.clearfix {
	&:after {
		display: block;
	    content: "";
	    clear: both;
	}
}
.container {
	position: relative;
	display: block;
	width: 100%;
	padding-left: 15px;
	padding-right: 15px;
	margin: auto;
	box-sizing: border-box;
	z-index: 3;
	@media @screen-md {
		width: @container-width-md;
	}
	@media @screen-lg {
		width: @container-width-lg;
	}
	@media @screen-xl {
		width: @container-width-xl;
	}
}
.text-center {
	text-align: center;
}
.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}
.header {
	position: absolute;
	top: 0;
	width: 100%;
	height: auto;
	z-index: 100;
	text-align: center;
	margin-bottom: 45px;
	background-color: #fff;
	padding: 15px 0;
    z-index: 1000;
	@media @screen-sm {
		padding: 0;
		background-color: transparent;
		height: auto;
	}
	.container {
		//width: 100%;
		//max-width: 1300px;
	}
	.btn-menu {
		display: block;
		position: absolute;
		right: 0px;
		top: 0px;
		padding: 10px 15px;
		@media @screen-sm {
			display: none;
		}
		span {
			width: 25px;
		    height: 3px;
		    margin-bottom: 4px;
		    display: block;
			background-color: @base_font_color;
			position: relative;
			opacity: 1;
			.transition-duration (0.4s);
			-webkit-transition-property: opacity, transform;
			-moz-transition-property: opacity, transform;
			-o-transition-property: opacity, transform;
			transition-property: opacity, transform;
			&:last-child {
				margin-bottom: 0;
			}
			&:nth-child(2) {
				&:before {
					opacity: 0;
					content: "";
					position: absolute;
					display: block;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background-color: @base_font_color;
					.transition-duration (0.4s);
					-webkit-transition-property: opacity, transform;
					-moz-transition-property: opacity, transform;
					-o-transition-property: opacity, transform;
					transition-property: opacity, transform;
				}
			}
		}
		&.active {
			span {
				&:first-child {
					opacity: 0;
				}
				&:nth-child(2) {
					transform: rotate(-45deg);
					-ms-transform: rotate(-45deg);
					-moz-transform: rotate(-45deg);
					-webkit-transform: rotate(-45deg);
					-o-transform: rotate(-45deg);
					&:before {
						opacity: 1;
						transform: rotate(90deg);
						-ms-transform: rotate(90deg);
						-moz-transform: rotate(90deg);
						-webkit-transform: rotate(90deg);
						-o-transform: rotate(90deg);
					}
				}
				&:last-child {
					opacity: 0;
				}
			}
		}
	}
	.tel-wrap{
		display: none;
		position: absolute;
		right: 40px;
		top: 0px;
		padding: 10px 15px;
		a{
		    font-size: 1.4em;
		    color: #d4bf81;
		}
	}
	.lang-switch {
		display: none;
		color: @base_font_color;
		font-size: 14px;
		line-height: 1.5em;
		vertical-align: bottom;
		position: absolute;
		top: 13px;
		left: 15px;
		@media @screen-sm {
			display: block;
			top: 20px;
			right: 15px;
			left: inherit;
			text-align: right;
		}
		a {
			text-decoration: none;
			color: @base_font_color;
			letter-spacing: 0;
			padding: 0 8px;
			.transition('color');
			&:hover {
				color: @base_font_hover_color;
			}
			&:first-child {
				border-right: 1px solid @base_font_color;
			}
			&:last-child {
			}
		}
		&.white{
			a{
			    color: #ffffff;
			    &:first-child {
				    border-right: 1px solid #ffffff;
				}
			}
		}
		@media @screen-sm {
			&.light {
				a {
					border-color: #fff;
					color: #fff;
					text-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
					&:hover {
						color: @base_font_hover_color;
					}
				}
			}
		}
	}
	.logo {
		width: 140px;
		text-align: center;
		margin: auto;
		a {
			display: block;
			line-height: 0;
		}
		img {
			height: 40px;
			width: auto;
		}
	    @media @screen-sm {
		    display: inline-block;
		    width: 200px;
		    background-color: #fff;
		    position: relative;
		    border-radius: 50%;
		    margin-top: -65px;
		    margin-bottom: -45px;
			&:after {
				content: "";
				display: block;
				padding-bottom: 100%;
			}
			a {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				z-index: 2;
			}
			img {
				position: absolute;
				width: 90%;
				height: auto;
				left: 0;
				right: 0;
				top: 55px;
				bottom: 0;
				margin: auto;
			}
		}
	}

	.btn-enquires {
		display: none;
		@media @screen-sm {
			display: block;
			position: absolute;
			left: 15px;
			top: 20px;
			z-index: 2;
		}
		@media @screen-xl {
			top: 65px;
		}
		a {
			position: relative;
			padding: 5px 7px 5px 35px;
			margin: 5px 0;
			color: #d2bd7e;
			.icon {
				position: absolute;
				width: 18px;
				height: 18px;
				left: 9px;
				top: 0;
				bottom: 0;
				margin: auto;
				background-image: url('/images/icon_enquires.png');
				background-position: center center;
				background-size: contain;
				background-repeat: no-repeat;
			}
			&:before {
				position: absolute;
				content: "";
				top: 0;
				left: 0;
				right: 0;
				height: 30%;
				border-top: 1px solid #d2bd7e;
				border-left: 1px solid #d2bd7e;
				border-right: 1px solid #d2bd7e;
			}
			&:after {
				position: absolute;
				content: "";
				bottom: 0;
				left: 0;
				right: 0;
				height: 30%;
				border-bottom: 1px solid #d2bd7e;
				border-left: 1px solid #d2bd7e;
				border-right: 1px solid #d2bd7e;
			}
			@media @screen-sm {
				&.light {
					color: #fff;
					.icon {
						background-image: url('/images/icon_enquires_white.png');
					}
					&:before {
						border-color: #fff;
					}
					&:after {
						border-color: #fff;
					}
				}
			}
			&:hover {
				color: @base_font_hover_color;
				.icon {
					background-image: url('/images/icon_enquires_hover.png');
				}
				&:before {
					border-color: @base_font_hover_color;
				}
				&:after {
					border-color: @base_font_hover_color;
				}
			}
		}
		&.white{
			a{
				color:#fff;
				&:before{
					border-top: 1px solid #fff;
				    border-left: 1px solid #fff;
				    border-right: 1px solid #fff;
				}
				&:after{
			        border-bottom: 1px solid #fff;
				    border-left: 1px solid #fff;
				    border-right: 1px solid #fff;
				}
			}

		}
	}
	.main-menu {
		display: none;
		width: 100%;
		overflow: hidden;
		padding-top: 10px;
		padding-bottom: 20px;
		position: absolute;
	    left: 0;
	    right: 0;
	    top: ~"calc(100% + 15px)";
	    background-color: rgb(255, 255, 255);
	    border-top: 1px solid #efefef;
		@media @screen-sm {
			display: block!important;
			bottom: 0;
			left: 0;
			right: 0;
			top: inherit;
			position: absolute;
			padding-top: 0;
			padding-bottom: 0;
			background-color: transparent;
			border-top: 0;
		}
		.menu-item {
			display: block;
			@media @screen-sm {
				display: inline-block;
				padding: 0 10px;
			}
			@media @screen-md {
				padding: 0 10px;
			}
			@media @screen-lg {
				padding: 0 20px;
			}
			@media @screen-xl {
				padding: 0 25px;
			}
			&:first-child {
				padding-left: 0;
			}
			&:last-child {
				padding-right: 0;
			}
			a {
				padding: 10px 0;
				display: block;
				color: @base_font_color;
				font-size: 14px;
				line-height: 1.5em;
				text-decoration: none;
				.transition('a');
				&:hover {
					color: @base_font_hover_color;
				}
			}
		}
		@media @screen-sm {
			.light {
				.menu-item {
					a {
						color: #fff;
						text-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
						&:hover {
							color: @base_font_hover_color;
						    text-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
						}
					}
				}
			}
		}
		@media @screen-sm {
			.menu-left {
				float: left;
				display: block;
				width: ~"calc(50% - 120px)";
				text-align: right;
				box-sizing: border-box;
			}
			.menu-right {
				float: right;
				display: block;
				width: ~"calc(50% - 120px)";
				text-align: left;
				box-sizing: border-box;
			}
		}
		.lang-switch {
			display: block;
			position: relative;
			left: 0;
			top: 0;
			margin-top: 40px;
			margin-bottom: 15px;
			@media @screen-sm {
				display: none;
			}
		}
		.btn-enquires {
			display: block;
			a {
				display: inline-block;
			}
			@media @screen-sm {
				display: none;
			}
		}
	}
}
[lang="en"] .header .logo img{
	top: 75px;
}
.layer {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 2;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	&.bg-layer {
		z-index: 1;
	}
	&.right{
		background-position: right center;
	}
	&.left{
		background-position: left center;
	}
	&.bottom{
		background-position: bottom center;
	}
}
.full-height {
	height: 100%;
}
.main-content {
	position: relative;
	box-sizing: border-box;
	background-image: url('/images/inner_page_wave_bg.jpg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	overflow: hidden;
	padding: 120px 15px 50px;
	@media @screen-sm {
		padding: 140px 0 0 0;
		min-height: 800px;
	}
	.color-layer {
		background-color: rgba(252, 236, 224, 0.9);
		right: 15px;
		left: 15px;
		@media @screen-sm {
			right: 0;
			left: 0;
		}
		@media @screen-md {
			right: ~"calc((100% - @{container-width-md}) / 2)";
			&.left {
				right: ~"calc((100% - @{container-width-md}) / 2)";
			}
			&.right {
				right: 0;
				left: ~"calc((100% - @{container-width-md}) / 2)";
			}
			&.center {
				right: ~"calc((100% - @{container-width-md}) / 2)";
				left: ~"calc((100% - @{container-width-md}) / 2)";
			}
		}
		@media @screen-lg {
			right: ~"calc((100% - @{container-width-lg}) / 2)";
			&.left {
				right: ~"calc((100% - @{container-width-lg}) / 2)";
			}
			&.right {
				right: 0;
				left: ~"calc((100% - @{container-width-lg}) / 2)";
			}
			&.center {
				right: ~"calc((100% - @{container-width-lg}) / 2)";
				left: ~"calc((100% - @{container-width-lg}) / 2)";
			}
		}
		@media @screen-xl {
			right: ~"calc((100% - @{container-width-xl}) / 2)";
			&.left {
				right: ~"calc((100% - @{container-width-xl}) / 2)";
			}
			&.right {
				right: 0;
				left: ~"calc((100% - @{container-width-xl}) / 2)";
			}
			&.center {
				right: ~"calc((100% - @{container-width-xl}) / 2)";
				left: ~"calc((100% - @{container-width-xl}) / 2)";
			}
		}
	}
	.photo-content {
		position: absolute;
		left: 0;
		width: 50%;
		top: 0;
		bottom: 0;
		z-index: 11;
		display: none;
		@media @screen-sm {
			display: block;
		}
		> .bg-layer {
			.slider {
				.slide {
					position: relative;
					@media @screen-sm {
						min-height: 800px;
					}
				}
			}
		}
	}
	.inner-content {
		position: relative;
		z-index: 10;
		padding: 0 15px;
		box-sizing: border-box;
		width: 100%;
		@media @screen-sm {
			width: 50%;
			left: 50%;
		}
		@media @screen-md {
			width: ~"calc(@{container-width-md} / 2)";
		}
		@media @screen-lg {
			width: ~"calc(@{container-width-lg} / 2)";
		}
		@media @screen-xl {
			width: ~"calc(@{container-width-xl} / 2)";
		}
		.style-title-1 {
			text-align: center;
			text-transform: uppercase;
			width: 250px;
			margin: 0 auto 50px;
			.top-border {
				border-top: 1px solid #d2bd7e;
				border-left: 1px solid #d2bd7e;
				border-right: 1px solid #d2bd7e;
				width: 120px;
				height: 80px;
				margin: auto;
				&:after {
					content: '';
					display: block;
					border-top: 1px solid #d2bd7e;
					border-left: 1px solid #d2bd7e;
					border-right: 1px solid #d2bd7e;
					width: 110px;
					height: 75px;
					margin: 4px auto 0;
				}
			}
			h2 {
				font-weight: 200;
			    line-height: 1.2em;
			}
			.bottom-border {
				border-bottom: 1px solid #d2bd7e;
				border-left: 1px solid #d2bd7e;
				border-right: 1px solid #d2bd7e;
				width: 120px;
				height: 80px;
				margin: auto;
				&:after {
					content: '';
					display: block;
					border-bottom: 1px solid #d2bd7e;
					border-left: 1px solid #d2bd7e;
					border-right: 1px solid #d2bd7e;
					width: 110px;
					height: 75px;
					margin: 0 auto 5px;
				}
			}
		}
	}
	&.right {
		.photo-content {
			left: inherit;
			right: 0;
		}
		.inner-content {
			@media @screen-sm {
				left: 0;
				right: 50%;
			}
			@media @screen-md {
				left: ~"calc((100% - @{container-width-md}) / 2)";
			}
			@media @screen-lg {
				left: ~"calc((100% - @{container-width-lg}) / 2)";
			}
			@media @screen-xl {
				left: ~"calc((100% - @{container-width-xl}) / 2)";
			}
		}
	}
	.full-screen-slider {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		.slider {
			.slide {
				position: relative;
				height: auto;
				.bg-layer {
					transform: scale(1);
				}
				&.ken-burns {
					.bg-layer {
						transform: scale(1.2);
						transition: 15s transform;
					}
				}
				.caption {
					position: absolute;
					z-index: 10;
					text-align: center;
					width: 100%;
					height: 30%;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					margin: auto;
					@media @screen-sm {
						width: 600px;
						height: 300px;
					}
					> * {
						animation-duration: 3s;
						-webkit-animation-duration: 3s;
						-o-animation-duration: 3s;
						-moz-animation-duration: 3s;
						opacity: 0;
						visibility: hidden;
						&.animated {
							opacity: 1;
							visibility: visible;
						}
					}
					.title {
						font-family: "EdwardianScriptITC", Helvetica, Arial, "Microsoft JhengHei", sans-serif;
						color: @base_font_color;
						margin-left: -20px;
						animation-delay: 0.5s;
						-webkit-animation-delay: 0.5s;
						-o-animation-delay: 0.5s;
						-moz-animation-delay: 0.5s;
						font-size: 15vmin;
						line-height: 1.5em;
						@media @screen-sm {
							font-size: 6vmin;
							line-height: 1em;
							margin-bottom: 25px;
						}
					}
					.sub-title {
						font-family: "Baskerville-Italic", Helvetica, Arial, "Microsoft JhengHei", sans-serif;
						color: @base_font_color;
						animation-delay: 1s;
						-webkit-animation-delay: 1s;
						-o-animation-delay: 1s;
						-moz-animation-delay: 1s;
						font-size: 5vmin;
						line-height: 1.5em;
						margin-bottom: 30px;
						@media @screen-sm {
							font-size: 3vmin;
							line-height: 1.3em;
							margin-bottom: 65px;
						}
					}
					.btn-enter {
						display: inline-block;
						text-align: center;
						text-decoration: none;
						color: @base_font_color;
						border: 1px solid @base_font_color;
						font-family: "EdwardianScriptITC", Helvetica, Arial, "Microsoft JhengHei", sans-serif;
						font-size: 1.8em;
						padding: 5px 50px 5px 40px;
						animation-delay: 2s;
						-webkit-animation-delay: 2s;
						-o-animation-delay: 2s;
						-moz-animation-delay: 2s;
						-webkit-transition-property: background-color;
						-moz-transition-property: background-color;
						-o-transition-property: background-color;
						transition-property: background-color;
						transition-duration: 0.3s;
						&:hover{
							color: #fff;
							background-color: @base_font_color;
						}
					}
				}
			}
		}
	}
}
[page="home"] {
	&.main-content {
		.full-screen-slider {
			.slider {
				.slide {
					@media @screen-sm {
						min-height: 800px;
					}
					&.slide-01 {
						.bg-layer {
							background-image: url('/images/IMG_2641a-color.jpg');
						}
						.layer-01 {
							background-image: url('/images/home_page_bg_01_caption.png');
							background-size: contain;
						}
					}
					&.slide-02 {
						.bg-layer {
							background-image: url('/images/IMG_2651_cover-pink.jpg');
						}
						.layer-02 {
							background-image: url('/images/home_page_bg_01_caption.png');
							background-size: contain;
						}
					}
				}
			}
		}
	}
}
.hr-line{
	margin: 7% 0px 0px;
	text-align:center;
}
[page="apartment"] {

	&.main-content {
    	min-height: 900px;
		.photo-content {
			.bg-layer {
				.slider {
					.slide {
    					min-height: 900px;
    					&.slide-01 {
							.bg-layer {
								background-image: url('/images/retouch3/IMG_0014_4.jpg');
							}
						}
    					&.slide-02 {
							.bg-layer {
								background-image: url('/images/IMG_2651.jpg');
							}
						}
						&.slide-03 {
							.bg-layer {
								background-image: url('/images/retouch3/IMG_0037_1.jpg');
							}
						}
						&.slide-04 {
							.bg-layer {
								background-image: url('/images/retouch3/IMG_0017_2.jpg');
							}
						}
/*
						&.slide-05 {
							.bg-layer {
								background-image: url('/images/retouch3/IMG_0012_4.jpg');
							}
						}
*/
					}
				}
			}
		}
		.inner-content {
			@media @screen-sm {
				display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
				display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
				display: -ms-flexbox;      /* TWEENER - IE 10 */
				display: -webkit-flex;     /* NEW - Chrome */
				display: flex;
			    align-items: center;
			    -webkit-box-align: center;
				-moz-box-align: center;
				-ms-flex-line-pack: center;
				-webkit-align-content: center;
			    justify-content: center;
			    -webkit-box-pack: center;
				-moz-box-pack: center;
				-ms-flex-pack: center;
				-webkit-justify-content: center;
			    height: 100%;
			    -ms-flex-direction:row;
			    -ms-flex-wrap: wrap;
			    -ms-flex-align: center;
			}
			@media @screen-md {
			    align-items: flex-start;
			    -webkit-box-align: start;
				-moz-box-align: start;
				-ms-flex-line-pack: start;
				-ms-flex-align: start;
				-webkit-align-content: start;
		    }
		    @media @screen-lg {
			    align-items: center;
			    -webkit-box-align: center;
				-moz-box-align: center;
				-ms-flex-line-pack: center;
				-ms-flex-align: center;
				-webkit-align-content: center;
		    }
			.content-wrapper {
				width: 100%;
				max-width: 100%;
				margin: auto;
			    margin-top: 20%;
			    @media @screen-max-lg{
			        margin-top: 10%;
			    }
			}
			.desc {
// 				width: 100%;
				margin: 0 auto 20px;
				position: relative;
				min-height: 100px;
				padding: 0px 10% 5% 10%;
			    text-align: justify;
				[data-type] {
					visibility: hidden;
					height: 0;
					overflow: hidden;
					opacity: 0;
					&.active {
						visibility: visible;
						height: 170px;
						opacity: 1;
						@media @screen-max-lg{
					        height: 100px;
					    }

					}
				}
				ul {
					margin: 0;
				    text-align: left;
			        padding-left: 25px;
				    li{
					    margin-bottom:7px;
				    }
				}
			}
			.icon-wrapper {
				display: table;
				width: 70%;
				margin: auto;
				text-align: center;
				.icon-item {
					display: table-cell;
					width: 33%;
					vertical-align: top;
					text-align: center;
					.icon {
						height: 30px;
						position: relative;
						margin-bottom: 10px;
						> img {
							position: absolute;
							width: auto;
							height: 30px;
							margin: auto;
							left: 0;
							right: 0;
							top: 0;
							&:first-child {
								opacity: 1;
								z-index: 1;
							}
							&:last-child {
								opacity: 0;
								z-index: 2;
							}
						}
					}
					.text {
						color: #d2bd7e;
						font-size: 16px;
					}
					&:hover,
					&.active {
						.icon {
							> img {
								&:first-child {
									opacity: 0;
								}
								&:last-child {
									opacity: 1;
								}
							}
						}
						.text {
							color: @base_font_hover_color;
						}
					}
				}
			}
		}
	}
}
[page="facilities"] {
	&.main-content {
		.photo-content {
			.bg-layer {
				.slider {
					.slide {
						&.slide-01 {
							.bg-layer {
								background-image: url('/images/IMG_2658a.jpg');
								background-position: center bottom;
							}
						}
/*
						&.slide-02 {
							.bg-layer {
								background-image: url('/images/IMG_2592.jpg');
								background-position: right center;
							}
						}
*/
						&.slide-03 {
							.bg-layer {
								background-image: url('/images/IMG_2566.jpg');
							}
						}
						&.slide-04 {
							.bg-layer {
								background-image: url('/images/IMG_2603.jpg');
							}
						}
/*
						&.slide-05 {
							.bg-layer {
								background-image: url('/images/IMG_2595.jpg');
							}
						}
*/
					}
				}
			}
		}
		.inner-content {
			@media @screen-sm {
				display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
				display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
				display: -ms-flexbox;      /* TWEENER - IE 10 */
				display: -webkit-flex;     /* NEW - Chrome */
				display: flex;
			    align-items: center;
			    -webkit-box-align: center;
				-moz-box-align: center;
				-ms-flex-line-pack: center;
				-webkit-align-content: center;
			    justify-content: center;
			    -webkit-box-pack: center;
				-moz-box-pack: center;
				-ms-flex-pack: center;
				-webkit-justify-content: center;
			    height: 100%;
			    -ms-flex-direction:row;
			    -ms-flex-wrap: wrap;
			    -ms-flex-align: center;
			}
			@media @screen-md {
			    align-items: flex-start;
			    -webkit-box-align: start;
				-moz-box-align: start;
				-ms-flex-line-pack: start;
				-ms-flex-align: start;
				-webkit-align-content: start;
		    }
		    @media @screen-lg {
			    align-items: center;
			    -webkit-box-align: center;
				-moz-box-align: center;
				-ms-flex-line-pack: center;
				-ms-flex-align: center;
				-webkit-align-content: center;
		    }
			.content-wrapper {
				width: 100%;
				max-width: 100%;
				margin: auto;
			    margin-top: 20%;
			    @media @screen-md{
				    margin-top: 10%;
			    }
			    @media @screen-lg{
				    margin-top: 20%;
			    }
			    @media @screen-max-lg{
			        margin-top: 5%;
			    }
			}
			.style-title-1 {
				width: 300px;
			}
			.title {
				display: inline-block;
				margin: auto;
				margin: 0 auto 20px;
				span {
					font-size: 16px;
					line-height: 30px;
					vertical-align: top;
					@media @screen-sm {
						font-size: 18px;
					}
				}
				.icon {
					float: left;
					display: block;
					width: 30px;
					height: 30px;
					margin-right: 15px;
					img {

					}
				}
			}
			.desc {
// 				width: 100%;
				margin: 0 auto 20px;
				position: relative;
				min-height: 100px;
				padding: 0px 10% 5% 10%;
				text-align: justify;
				[data-type] {
					visibility: hidden;
					height: 0;
					overflow: hidden;
					opacity: 0;
					&.active {
						visibility: visible;
						height: 150px;
						opacity: 1;
						@media @screen-max-lg{
					        height: 100px;
					    }
					}
				}
				ul {
					margin: 0;
				}
			}
			.feature-group {
				width: 100%;
				//overflow: hidden;
				margin: auto;
				@media @screen-sm {
					width: 80%;
				}
				.feature-item {
					//width: 50%;
					//float: left;
					display: block;
					box-sizing: border-box;
					text-align: left;
					padding: 0 15px;
					cursor: pointer;
					margin-bottom: 30px;
					.title {
						margin-bottom: 0;
					}
					.desc {
						display: none;
					}
				}
			}
			.icon-wrapper {
				display: table;
				width: 70%;
				margin: auto;
				text-align: center;
				.icon-item {
					display: table-cell;
					width: 33%;
					vertical-align: top;
					text-align: center;
					.icon {
						height: 30px;
						position: relative;
						margin-bottom: 10px;
						> img {
							position: absolute;
							width: auto;
							height: 30px;
							margin: auto;
							left: 0;
							right: 0;
							top: 0;
							&:first-child {
								opacity: 1;
								z-index: 1;
							}
							&:last-child {
								opacity: 0;
								z-index: 2;
							}
						}
					}
					.text {
						color: #d2bd7e;
						font-size: 16px;
					}
					&:hover,
					&.active {
						.icon {
							> img {
								&:first-child {
									opacity: 0;
								}
								&:last-child {
									opacity: 1;
								}
							}
						}
						.text {
							color: @base_font_hover_color;
						}
					}
				}
			}
		}
	}
}
[page="floor-plan"][lang="tc"]{
	.main-content{
		.inner-content{
			.content-wrapper{
				.floor-plan-type{
					.type-item{
						.title{
						    height: 15px;
						}
					}
				}
			}
		}
	}
}

[page="floor-plan"] {
	&.main-content {
		.photo-content {
			.bg-layer {
				.slider {
					.slide {
						&.slide-01 {
							.bg-layer {
								background-image: url('/images/apartment_page_bg_img_01.jpg');
							}
						}
						&.slide-02 {
							.bg-layer {
								background-image: url('/images/demo/IMG_9222-2.jpg');
							}
						}
						&.slide-03 {
							.bg-layer {
								background-image: url('/images/demo/IMG_9208.jpg');
							}
						}
					}
				}
			}
		}
		.inner-content {
			@media @screen-sm {
				display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
				display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
				display: -ms-flexbox;      /* TWEENER - IE 10 */
				display: -webkit-flex;     /* NEW - Chrome */
				display: flex;
			    align-items: center;
			    -webkit-box-align: center;
				-moz-box-align: center;
				-ms-flex-line-pack: center;
				-webkit-align-content: center;
			    justify-content: center;
			    -webkit-box-pack: center;
				-moz-box-pack: center;
				-ms-flex-pack: center;
				-webkit-justify-content: center;
				-ms-flex-direction:row;
			    -ms-flex-wrap: wrap;
			    -ms-flex-align: center;
			    height: 100%;
			}
			.content-wrapper {
				width: 100%;
				max-width: 100%;
			    margin: auto;
			    margin-top: 30%;
			    @media @screen-max-lg{
			        margin-top: 20%;
			    }
				.floor-plan-type {
					overflow: hidden;
					width: 200px;
					text-align: center;
					margin: auto;
					@media @screen-sm {
						width: 100%;
					}
					.type-item {
						display: block;
						position: relative;
						//height: 80px;
						//width: ~"calc(50% - 5px)";
						//width: auto;
					    width: 22%;
						//margin-right: 10px;
						//padding-left: 30px;
						box-sizing: border-box;
						//margin-bottom: 20px;
						margin: 0px 10px;
					    text-align: center;
						overflow: hidden;
						@media @screen-sm {
							display: inline-block;
						}
						.border {
							position: absolute;
							left: 0;
							width: 55px;
							height: 80px;
							box-sizing: border-box;
							border-left: 1px solid #999999;
							/*&:before {
								content: "";
								position: absolute;
								top: 0;
								left: 0;
								width: 100%;
								height: 15px;
								border-top: 1px solid #999999;
								border-right: 1px solid #999999;
							}
							&:after {
								content: "";
								position: absolute;
								bottom: 0;
								left: 0;
								width: 100%;
								height: 15px;
								border-bottom: 1px solid #999999;
								border-right: 1px solid #999999;
							}*/
						}
						.icon {
							line-height: 0;
/*
						    margin-left: 2px;
						    margin-top: 12px;
*/
						    margin-bottom: 10px;
						    height: 30px;
						    width: auto;
					        text-align: center;
							img {
								max-height: 100%;
								height: 100%;
								width:auto;
							}
						}
						.title {
							color: @base_font_color;
							font-size: 17px;
							line-height: 1em;
							font-weight: bold;
						    height: 32px;
							@media @screen-sm {
								font-size: 12px;
							}
							@media @screen-md {}
							@media @screen-lg {
								font-size: 14px;
							}
							@media @screen-xl {
								font-size: 16px;
							}
						}
						.desc {
							color: @base_font_color;
							font-size: 12px;
							line-height: 1em;
							//transform-origin: left top;
							@media @screen-sm {
								transform: scale(0.8);
							}
						}
						&:hover,
						&.active {
							.border {
								border-color: #d2bd7e;
								&:before {
									border-color: #d2bd7e;
								}
								&:after {
									border-color: #d2bd7e;
								}
							}
							.title {
								color: @base_font_hover_color;
							}
							.desc {
								color: @base_font_hover_color;
							}
						}
					}
				}
			}

		}
		&.floor-plan-details-page {
			.inner-content {
				margin-bottom: 55px;
				@media @screen-sm {
					margin-bottom: 0;
				}
				.content-wrapper {
					.floor-plan-type {
						@media screen and (max-width: 899px) {
							width: 100%;
							.type-item {
								width: auto;
								display: inline-block;
								margin-right: 10px;
								.title {
									font-size: 14px;
								}
								.desc {
									transform: scale(0.8);
								}
								&.active {
									display: none;
								}
							}
						}
					}
				}
			}
		}
		.floor-plan-details {
			position: relative;
			z-index: 10;
			width: 100%;
			box-sizing: border-box;
			padding: 0 15px;
			display: none;
			.transition-duration (0.8s);
			-webkit-transition-property: opacity;
		    -moz-transition-property: opacity;
		    -o-transition-property: opacity;
		    transition-property: opacity;
			@media @screen-sm {
				display: block;
				position: absolute;
				top: 240px;
				right: 0;
				//bottom: 0;
				width: 50%;
				visibility: hidden;
				opacity: 0;
				display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
				display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
				display: -ms-flexbox;      /* TWEENER - IE 10 */
				display: -webkit-flex;     /* NEW - Chrome */
				display: flex;
			    align-items: center;
			    -webkit-box-align: center;
				-moz-box-align: center;
				-ms-flex-line-pack: center;
				-webkit-align-content: center;
			    justify-content: center;
			    -webkit-box-pack: center;
				-moz-box-pack: center;
				-ms-flex-pack: center;
				-webkit-justify-content: center;
				-ms-flex-direction:row;
			    -ms-flex-wrap: wrap;
			    -ms-flex-align: center;
			}
			&.active {
				display: block;
				@media @screen-sm {
					visibility: visible;
					opacity: 1;
					display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
					display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
					display: -ms-flexbox;      /* TWEENER - IE 10 */
					display: -webkit-flex;     /* NEW - Chrome */
					display: flex;
				    align-items: center;
				    -webkit-box-align: center;
					-moz-box-align: center;
					-ms-flex-line-pack: center;
					-webkit-align-content: center;
				    justify-content: center;
				    -webkit-box-pack: center;
					-moz-box-pack: center;
					-ms-flex-pack: center;
					-webkit-justify-content: center;
					-ms-flex-direction:row;
				    -ms-flex-wrap: wrap;
				    -ms-flex-align: center;
				}
			}
			.details-wrapper {
				max-width: 100%;
				width: 100%;
			}
			@media @screen-md {
				right: ~"calc((100% - @{container-width-md}) / 2)";
				width: ~"calc(@{container-width-md} / 2)";
			}
			@media @screen-lg {
				right: ~"calc((100% - @{container-width-lg}) / 2)";
				width: ~"calc(@{container-width-lg} / 2)";
			}
			@media @screen-xl {
				right: ~"calc((100% - @{container-width-xl}) / 2)";
				width: ~"calc(@{container-width-xl} / 2)";
			}
			.floor-plan-title {
				background-color: #49525d;
				border-left: 4px solid #d2bd7e;
				padding: 20px;
				margin-bottom: 25px;
				.title {
					color: #fff;
					font-size: 21px;
					line-height: 1.5em;
					font-weight: 600;
					margin-bottom: 0px;
				}
				.sub-title {
					color: #d2bd7e;
				    line-height: 1.5rem;
				}
			}
			.floor-plan-spec {
				padding-left: 15px;
				padding-right: 15px;
				margin-bottom: 20px;
				ul {
					margin: 0;
					padding: 0;
				}
				.table {
					display: table;
					width: 100%;
					.table-cell {
						display: table-cell;
					}
					> .table-cell {
						width: 50%;
						> .table {
							.table-cell {
								&:first-child {
									width: 40%;
									font-weight: bold;
								}
								&:last-child {
									width: 60%;
								}
							}
						}
					}
				}
				> .table {
					&:last-child {
						margin-top: 20px;
						.table-cell {
							font-weight: normal!important;
						}
						> .table-cell {
							&:first-child {
								font-weight: bold!important;
								width: 20%;
							}
							&:last-child {
								width: 80%;
								font-size: 12px;
								line-height: 1.3em;
								.table {
									.table-cell {
										width: 50%;
										padding: 0 15px;
									}
								}
							}
						}
					}
				}
			}
			.floor-plan-img-wrapper {
				width: 84%;
				margin: auto;
				position: relative;
				margin-top: 20px;
				.slider {
					.slick-dots {
						bottom: -40px;
					}
					.slick-prev,
					.slick-next {
						width: 40px;
						height: 40px;
						&:before {
							font: normal normal normal 14px/1 FontAwesome;
						    font-size: 36px;
						    text-rendering: auto;
						    -webkit-font-smoothing: antialiased;
						    -moz-osx-font-smoothing: grayscale;
						    color: @base_font_color;
						}
					}
					.slick-prev {
						left: -50px;
						&:before {
							content: "\f104";
						}
					}
					.slick-next {
						right: -50px;
						&:before {
							content: "\f105";
						}
					}
					.slide {
						text-align:center;
						img{
							display: inline-block;
							//max-width: 25%;
							height: auto;
							max-height: 140px;
						}
					}
				}
				.floor-plan-img {
					display: block;
					position: relative;
					padding-bottom: 40px;
					.caption {
						color: @base_font_color;
						position: absolute;
					    text-align: center;
					    bottom: 5px;
					    left: 0;
					    right: 0;
					}
					.img {
						min-height: 160px;
					}
/*
					&:after {
						display: block;
						font: normal normal normal 14px/1 FontAwesome;
					    font-size: 50px;
					    width: 50px;
					    height: 50px;
					    text-rendering: auto;
					    -webkit-font-smoothing: antialiased;
					    -moz-osx-font-smoothing: grayscale;
						content: "\f00e";
						color: #fff;
						opacity: 0;
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 35px;
						margin: auto;
						text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
						.transition-duration (0.5s);
					}
					&:hover {
						&:after {
							opacity: 1;
						}
					}
*/

				}
			}
			&[data-floor-plan="simplex"] {
				.floor-plan-img-wrapper {
					.slider {
						.slick-dots {
							display: none;
						}
					}
				}
			}
			&[data-floor-plan="penthouse-duplex"], &[data-floor-plan="garden-duplex"]{
				.floor-plan-img-wrapper{
					.floor-plan-img{
						padding-bottom: 0px;
					}
					.slider{
						.slide{
							img{
								max-height: 200px;
							}
						}
					}
				}
			}
		}
	}
	.fancybox-slide .fancybox-content{
		background: rgba(255,255,255,1);
		//padding: 20px;
		.fancybox-image{
			//position: unset;
			width: 90%;
			height: 90%;
			left: 5%;
			top: 5%;
		}
	}
	.btn-enlarge{
		color: #b1b1b1;
	    font-size: 0.8rem;
	    padding: 0px 1px 10px;
	    text-align: right;
	}
}
[page="gallery"] {
	&.main-content {
		@media screen and (max-width: 899px) {
			padding-top: 150px;
		}
		.photo-content {

		}
		.feature-img {
			width: 90%;
		    height: 43%;
			background-color: #fff;
			position: absolute;
			top: 0;
			left: 0;
			//right: 0;
			bottom: 0;
			margin: auto;
			background-position: center center;
			background-size: cover;
			background-repeat: no-repeat;
			@media @screen-lg {
				top: 160px;
				height: 60%;
			}
			.slider{
				.slide{
					&.video{
						.btn-play-wrap{
							    background: rgba(0, 0, 0, 0.5);
							    margin: auto;
							    position: absolute;
							    width: 100%;
							    height: 100%;
							    z-index: 2;
						    .btn-play{
							    height: 100%;
								display: flex;
								justify-content: center;
								align-items: center;
								img{
									width: 65px;
									height: auto;
								}
						    }
						}
					}
				}
			}
		}
		@media screen and (max-width: 899px) {
			display: block;
			position: relative;
			z-index: 2;
			width: 100%;
			margin-bottom: 10px;
			.feature-img {
				position: relative;
			}
		}
		.inner-content {
			@media @screen-md {
				display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
				display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
				display: -ms-flexbox;      /* TWEENER - IE 10 */
				display: -webkit-flex;     /* NEW - Chrome */
				display: flex;
			    align-items: center;
			    -webkit-box-align: center;
				-moz-box-align: center;
				-ms-flex-line-pack: center;
				-webkit-align-content: center;
			    justify-content: center;
			    -webkit-box-pack: center;
				-moz-box-pack: center;
				-ms-flex-pack: center;
				-webkit-justify-content: center;
				-ms-flex-direction:row;
			    -ms-flex-wrap: wrap;
			    -ms-flex-align: center;
			    height: 100%;
		    }
			.content-wrapper {
				width: 80%;
				max-width: 80%;
				margin: 0 auto;
				margin: 0 12% 0 auto\9;
				@media @screen-max-ipplus{
					width: 100%;
					max-width: 100%;
				}
				h1{
					font-weight: 400;
				}
				.desc {
					text-align: center;
					margin-bottom: 25px;
				}

			}
			.gallery-group {
				width: 100%;
				text-align: center;
			    height: 450px;
			    @media @screen-max-lg{
			        height: 320px;
			    }
				.gallery-thumbnail {
					width: 25%;
					display: inline-block;
					position: relative;
					margin-right: 15px;
					margin-bottom: 15px;
					&:after {
						content: "";
						display: block;
						padding-bottom: 100%;
					}
					&:nth-child(3n) {
						margin-right: 0;
					}
					&:last-child {
						margin-right: 0;
					}
					&.video{

						.btn-play-wrap{
							    background: rgba(0, 0, 0, 0.5);
							    margin: auto;
							    position: absolute;
							    width: 100%;
							    height: 100%;
							    z-index: 1;
						    .btn-play{
							    height: 100%;
								display: flex;
								justify-content: center;
								align-items: center;
								img{
									width: 45px;
									height: auto;
								}
						    }
						}
					}
				}
			}
		}
	}
}
[lang="tc"] [page="location"].main-content .popup-box .inner-wrapper .location-list [class*='item'] .desc .col-3{
    width: 17%;
}
[page="location"] {
	&.main-content {
		> .container {
			position: relative;
			height: 100%;
			text-align: center;
			padding-top: 50px;
		}
		.page-title {
			text-transform: uppercase;
			display: inline-block;
			position: relative;
			font-size: 32px;
			line-height: 1.5em;
			padding-bottom: 10px;
			color: @base_font_color;
			margin-bottom: 20px;
			&:before {
				content: "";
				position: absolute;
				background-color: #d2bd7e;
				height: 1px;
				width: 100%;
				bottom: 5px;
				left: 0;
				right: 0;
			}
			&:after {
				content: "";
				position: absolute;
				background-color: #d2bd7e;
				height: 1px;
				width: 80%;
				margin: auto;
				bottom: 0;
				left: 0;
				right: 0;
			}
		}
		.location-icon {
			color: #d2bd7e;
			font-size: 48px;
			line-height: 1em;
			margin-bottom: 30px;
		}
		.location-address {
			background-color: #333f4d;
			color: #d2bd7e;
			font-size: 18px;
			line-height: 1em;
			padding: 30px;
			display: inline-block;
			position: relative;
			margin-bottom: 30px;
			&:before {
				content: "";
				position: absolute;
				top: 6px;
				left: 0;
				right: 0;
				width: ~"calc(100% - 15px)";
				height: 10px;
				margin: auto;
				border-top: 2px solid #d2bd7e;
				border-left: 2px solid #d2bd7e;
				border-right: 2px solid #d2bd7e;
			}
			&:after {
				content: "";
				position: absolute;
				bottom: 6px;
				left: 0;
				right: 0;
				width: ~"calc(100% - 15px)";
				height: 10px;
				margin: auto;
				border-bottom: 2px solid #d2bd7e;
				border-left: 2px solid #d2bd7e;
				border-right: 2px solid #d2bd7e;
			}
		}
		.feature-group {
			width: 90%;
			margin: auto;
			overflow: hidden;
			margin-top: 30px;
			.feature-item {
				display: block;
				width: 100%;
				text-align: center;
				box-sizing: border-box;
				padding: 0 15px;
				margin-bottom: 20px;
				@media @screen-sm {
					float: left;
					width: 25%;
					margin-bottom: 0;
				}
				.circle-item {
					display: block;
					width: 80%;
					margin: auto;
					border-radius: 50%;
					background-color: #fff;
					margin-bottom: 25px;
					position: relative;
					overflow: hidden;
					&:after {
						content: "";
						display: block;
						padding-bottom: 100%;
					}
					.bg-layer {
						border-radius: 50%;
						transform: scale(1);
						.transition-duration (10s);
						-webkit-transition-property: transform;
						-moz-transition-property: transform;
						-o-transition-property: transform;
						transition-property: transform;

					}
					&:hover {
						.bg-layer {
							@media @screen-sm {
								transform: scale(1.2);
							}
						}
					}
				}
				.feature-title {
					text-transform: uppercase;
					color: @base_font_color;
					font-size: 16px;
					line-height: 1em;
					@media @screen-sm {
						font-size: 12px;
					}
					@media @screen-md {
						font-size: 14px;
					}
					@media @screen-lg {
						font-size: 16px;
					}
					@media @screen-xl {
						font-size: 18px;
					}
				}
				&.item-01 {
					.circle-item {
						.bg-layer {
							background-image: url('/images/living_shopping_img_01.png');
						}
					}
				}
				&.item-02 {
					.circle-item {
						.bg-layer {
							background-image: url('/images/shutterstock_119647393-1100X700-72dpi.jpg');
						}
					}
				}
				&.item-03 {
					.circle-item {
						.bg-layer {
							background-image: url('/images/living_shopping_img_02.png');
						}
					}
				}
				&.item-04 {
					.circle-item {
						.bg-layer {
							background-image: url('/images/living_shopping_img_03.png');
						}
					}
				}
			}
		}
		.fancybox-bg {
			background-color: #fff;
			opacity: 0;
		}
		.popup-box {
			width: 100%;
		    box-sizing: border-box;
		    border: 20px solid #333f4d;
		    background-color: rgba(255, 255, 255, 0.95);
		    position: relative;
		    overflow: visible;
		    padding: 0;
		    @media @screen-sm {
			    max-width: 1100px;
			    height: 60%;
			    max-height: 1024px;
			    min-height: 700px;
			}
		    &:before {
			    content: "";
			    position: absolute;
			    top: -5px;
			    left: -5px;
			    right: -5px;
			    height: 37px;
			    border-top: 5px solid #d2bd7e;
			    border-left: 5px solid #d2bd7e;
			    border-right: 5px solid #d2bd7e;
		    }
		    &:after {
			    content: "";
			    position: absolute;
			    bottom: -5px;
			    left: -5px;
			    right: -5px;
			    height: 37px;
			    border-bottom: 5px solid #d2bd7e;
			    border-left: 5px solid #d2bd7e;
			    border-right: 5px solid #d2bd7e;
		    }
		    .fancybox-close-small {
			    background-color: #fff;
			    @media @screen-sm {
				    background-color: transparent;
			    }
		    }
		    .inner-wrapper {
			    font-family: @base_font;
			    width: 100%;
			    height: 100%;
			    overflow: hidden;
			    .col {
				    width: 100%;
				    display: block;
				    height: auto;
				    position: relative;
				    @media @screen-sm {
					    width: 50%;
					    height: 100%;
						float: left;
				    }
				    &.content-col {
					    box-sizing: border-box;
					    padding: 50px 15px 15px;
					    .title {
						    text-transform: uppercase;
						    display: inline-block;
						    position: relative;
						    font-size: 21px;
						    line-height: 1.5em;
						    padding-bottom: 15px;
						    margin-bottom: 10px;
						    min-width: 150px;
						    @media @screen-sm {
							    font-size: 28px;
						    }
						    &:before {
							    content: "";
							    display: block;
							    position: absolute;
							    bottom: 10px;
							    left: 0;
							    right: 0;
							    margin: auto;
							    width: 140px;
							    height: 1px;
							    background-color: #d2bd7e;
						    }
						    &:after {
							    content: "";
							    display: block;
							    position: absolute;
							    bottom: 5px;
							    left: 0;
							    right: 0;
							    margin: auto;
							    width: 100px;
							    height: 1px;
							    background-color: #d2bd7e;
						    }
					    }
				    }
			    }
			    .map{
				    width: 100%;
					height: 300px;
					background-color: #fff;
					@media @screen-sm {
						height: 100%;
					}
				    .map-label-wrap {
					    font-family: @base_font;
					    text-align: center;
					    max-width: 200px;
					    font-size: 12px;
					    h6 {
						    font-size: 14px;
							margin: 0 0 10px;
					    }
				    }
			    }
			    .location-list {
				    margin-bottom:50px;
					.list-item {
						display: block;
						color: @base_font_color;
						font-size: 16px;
						line-height: 1.5em;
						margin: 10px 0;
						position:relative;
						&:hover {
							color: #d2bd7e;
						}
						/*&:before,
						&:after {
						  content: "";
						  position: absolute;
						  height: 5px;
						  border-bottom: 1px solid #eee;
						  border-top: 1px solid #eee;
						  top: 0;
						  width: 600px;
						}
						&:before {
						  right: 100%;
						  margin-right: 15px;
						}
						&:after {
						  left: 100%;
						  margin-left: 15px;
						}*/
					}
					[class*='item']{

						.desc{
							display: none;
							text-align: left;
							color: #5a5a5a;
							margin-bottom:15px;
						    line-height: 25px;
						    padding-bottom: 40px;
						    border-bottom: 1px dashed #d8d8d8;
						    a{
							    color: #5a5a5a;
							    text-decoration: underline;
						    }

						    [class*='col']:nth-child(odd){
							    padding-right: 0px;
							    padding: 10px 0px 0px;
							    font-weight: bold;
								@media screen and (max-width: 1150px){
								    width: 35%
							    }
							}
							[class*='col']:nth-child(even){
							    padding-left: 0px;
							    @media screen and (max-width: 1150px){
								    width: 65%
							    }
							}
							[class*='col']{
/*
							    margin-bottom: 5px;
							    @media screen and (max-width: 768px){
								    width:100%!important;
							    }
*/
						    }
							.map-path{
								width:100%;
								height: 300px;
								margin-top: 20px;
								display: none;
								@media screen and (max-width: 899px){
									display:inline-block;
								}
							}
						}
						&.active{
							.list-item{
								font-weight:bold;
								color: #d2bd7e;
							}
							.desc{
								display: inline-block;
								.icon{
								    width: 13px;
								    height: auto;
								    margin-bottom: -1px;
								}
							}

						}
					}

				}
		    }
		    &.chelsea-court-location {
			    .fancybox-close-small {
				    background-color: #fff;
			    }
		    }
			&.schools {
				.desc {
					font-size: 16px;
				    font-weight: 500;
				    width: 80%;
				    margin: auto;
				}
			}
			&.hiking {
				.desc {
					font-size: 16px;
					font-weight: 400;
				    width: 90%;
				    margin: auto;
				}
				.sub-title {
					text-transform: uppercase;
				    display: inline-block;
				    position: relative;
				    font-size: 18px;
				    line-height: 1.5em;
				    padding-bottom: 15px;
				    margin-bottom: 10px;
				    &:before {
					    content: "";
					    display: block;
					    position: absolute;
					    bottom: 10px;
					    left: 0;
					    right: 0;
					    margin: auto;
					    width: 80%;
					    height: 1px;
					    background-color: #d2bd7e;
				    }
				    &:after {
					    content: "";
					    display: block;
					    position: absolute;
					    bottom: 5px;
					    left: 0;
					    right: 0;
					    margin: auto;
					    width: 60%;
					    height: 1px;
					    background-color: #d2bd7e;
				    }
				}
			}
			&.shopping {
				.slider-layer {
					height: 300px;
					position: relative;
					@media @screen-sm {
						height: auto;
						position: absolute;
					}
					.slider {
						position: relative;
						.slide {
							position: relative;
							&.slide-01 {
								.bg-layer {
									background-image: url('/images/shutterstock_451867429-1100X700-72dpi.jpg');
									background-position: right bottom;
								}
							}
							&.slide-02 {
								.bg-layer {
									background-image: url('/images/shutterstock_315033494-1100X700-72dpi.jpg');
								}
							}
							&.slide-03 {
								.bg-layer {
									background-image: url('/images/shutterstock_276679007-1100X700-72dpi.jpg');
								}
							}
						}
					}
				}
				.desc {
					p {
						&:first-child {
							font-size: 16px;
							font-weight: 500;
						}
					}
				}
			}
			&.business {
				.slider-layer {
					height: 300px;
					position: relative;
					@media @screen-sm {
						height: auto;
						position: absolute;
					}
					.slider {
						position: relative;
						.slide {
							position: relative;
							&.slide-01 {
								.bg-layer {
									background-image: url('/images/shutterstock_119647393-1100X700-72dpi.jpg');
								}
							}
/*
							&.slide-02 {
								.bg-layer {
									background-image: url('https://image.shutterstock.com/z/stock-photo-western-and-chinese-businessmen-shaking-hands-in-hong-kong-180142646.jpg');
									background-size: auto 850px;
									background-position: center top;
								}
							}
							&.slide-03 {
								.bg-layer {
									background-image: url('https://image.shutterstock.com/z/stock-photo-office-building-in-hong-kong-close-up-716981671.jpg');
									background-size: auto 850px;
									background-position: center top;
								}
							}
*/
						}
					}
				}
				.desc {
					p {
						&:first-child {
							font-size: 16px;
							font-weight: 500;
						}
					}
				}
			}
		}
	}
}
[page="contact-us"] {
	&.main-content {
		min-height: 900px;
		padding: 105px 15px 35px;
		@media @screen-sm {
			padding: 120px 15px 50px;
		}
		> .bg-layer {
			//background-color: rgba(51, 63, 77, 0.3);
		}
		.contact-us-form {
			background-color: #455465;
			text-align: center;
			width: 100%;
			max-width: 900px;
			margin: 0 auto;
			padding: 5vh 0;
			@media @screen-sm {
				margin: 0 auto;
			}
			.col-3{
				@media (max-width:730px){
				    width: 40%;
				}
			}
			.col-9{
				@media (max-width:730px){
				    width: 60%;
				}
			}

			.form-wrap {
				width: 80%;
				margin: auto;
				@media @screen-sm {
					width: 70%
				}
				.title {
					position: relative;
					display: inline-block;
					color: #fff;
					text-transform: uppercase;
					font-size: 32px;
					line-height: 1.5em;
					padding-bottom: 10px;
					margin-bottom: 20px;
					font-weight: 400;
					&:after {
						content: "";
						position: absolute;
						bottom: 0;
						left: 0;
						right: 0;
						margin: auto;
						width: 80%;
						height: 2px;
						background-color: #fff;
					}
				}
				.desc {
					color: #fff;
					width: 100%;
					margin: 0 auto 30px;
					font-size: 14px;
					line-height: 1.5em;
					@media @screen-sm {
						width: 100%;
						margin: 0 auto 30px;
						font-size: 16px;
						line-height: 2em;
					}
				}
				.form-body {
					form {
						.form-input-box {
							margin-bottom: 15px;
							input {
								color: @base_font_color;
								font-family: @base_font;
								display: block;
								width: 100%;
								height: auto;
								color: #555;
								padding: 10px 15px;
								font-size: 16px;
								line-height: 1.5em;
								box-sizing: border-box;
								border: 0;
								@media @screen-sm {
									padding: 10px 30px;
								}
							}
							textarea {
								color: @base_font_color;
								font-family: @base_font;
								display: block;
								width: 100%;
								color: #555;
								padding: 10px 15px;
								font-size: 16px;
								line-height: 1.5em;
								box-sizing: border-box;
								border: 0;
								@media @screen-sm {
									padding: 15px 30px;
								}
							}
						}
						.help {
							color: #fff;
							text-align: left;
							//padding: 0px 30px;
							margin-bottom: 30px;
							margin-top: 0;
						}
						.btn-form-submit {
							display: block;
							color: #fff;
							border: 1px solid #fff;
						    padding: 10px 25px;
							font-size: 18px;
							line-height: 1em;
							text-transform: uppercase;
						    background: transparent;
					        font-family: "Frank Ruhl Libre", Helvetica, Arial, "Microsoft JhengHei", serif;
							@media @screen-sm {
								display: inline-block;
							    padding: 10px 25px;
							}
							@media (max-width: 900px) {
								width: 100%;
							}
							&:hover {
								background-color: #fff;
								color: #333f4d;
							}
						}
					}
				}
			}
		}
	}
}
.msg-wrap{
	color: #87fd71;
	text-align: center;
	font-size: 1em;
	margin: 10px 0px;
	.error{
	    color: #ff7676;
	}
}
.footer {
	padding: 20px 0 15px 0;
	background-color: #fff;
	.row {
		display: block;
		width: 100%;
		@media @screen-sm {
			display: table;
		}
		.col {
			display: block;
			vertical-align: middle;
			text-align: center;
			@media @screen-sm {
				width: 50%;
				display: table-cell;
			}
			&.col-left {
				margin-bottom: 15px;
				@media @screen-sm {
					margin-bottom: 0;
					text-align: left;
				}
				.footer-logo {
					display: inline-block;
					line-height: 0;
					vertical-align: middle;
				    margin-left: 25px;
				    margin-right: 10px;
					img {
						width: 80px;
						height: auto;
					}
					@media @screen-max-ipplus{
						display: table-cell;
					}
				}
			}
			&.col-right {
				@media @screen-sm {
					text-align: right;
				}

			}
		}
	}
	.copyright{
		display: inline;
		@media @screen-max-ipplus{
		    margin: -21px 0px 0px 30px;
		    display: block;
		}
		@media @screen-max-ip{
		    margin: -21px 0px 0px 90px;
		    display: block;
		}
	}
}
.verification-wrap{
	.hint{
		font-size:0.8rem;
		text-align: left;
	}
	img{
		width: 100%;
		height: 44px;
	}
}
.row{
	display: block;
	overflow: hidden;
	box-sizing: border-box;
	margin-left: -15px;
	margin-right: -15px;
	&:after{
		display: block;
	    content: "";
	    clear: both;
	}
}

.generate-columns(12);

.generate-columns(@n, @i: 1) when (@i =< @n) {
  .col-@{i} {
    width: (@i * 100% / @n);
    display: block;
    float: left;
    padding: 0px 15px;
    box-sizing: border-box;
  }
  .generate-columns(@n, (@i + 1));
}

.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: #d2bd7d;
    background-color: rgb(210, 189, 125);
}
.mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
    background-color: rgba(210, 189, 125,0.8);
}
.mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color: rgba(210, 189, 125,0.8); }
.mCustomScrollBox{
	height: auto;
}
.mCSB_inside > .mCSB_container {
    margin-right: 15px;
}
.btn-360-wrap{
    display: block;
	text-align: center;
	margin: 60px 0px 0px;
	a{
		position: relative;
	    padding: 5px 10px 5px 35px;
	    margin: 5px 0;
	    color: #d2bd7e;
	    &:before{
	        position: absolute;
		    content: "";
		    top: 0;
		    left: 0;
		    right: 0;
		    height: 30%;
		    border-top: 1px solid #d2bd7e;
		    border-left: 1px solid #d2bd7e;
		    border-right: 1px solid #d2bd7e;
	    }
	    &:after {
		    position: absolute;
		    content: "";
		    bottom: 0;
		    left: 0;
		    right: 0;
		    height: 30%;
		    border-bottom: 1px solid #d2bd7e;
		    border-left: 1px solid #d2bd7e;
		    border-right: 1px solid #d2bd7e;
		}
		.icon {
		    position: absolute;
		    width: 18px;
		    height: 18px;
		    left: 9px;
		    top: 0;
		    bottom: 0;
		    margin: auto;
		    background-image: url(/images/icon_earth-globe.png);
		    background-position: center center;
		    background-size: contain;
		    background-repeat: no-repeat;
		}
	}
}
.slick-slider, .slick-prev, .slick-next{
	z-index:999;
}
.slick-prev:before {
    content: '';
}
.slick-slider{
	.slide-control{
		position: absolute;
		top: 47%;
		cursor: pointer;
		opacity: 0.8;
		.transition("opacity");
		img{
	        height: 26px;
	    }
	    &:hover{
		    opacity: 1;
	    }
	}
	.btn-prev{
	    left: -35px;
	}
	.btn-next{
	    right: -35px;
	}
}
.desktop{
	display: block;
}
.desktop-inline{
	display: inline-block;
}
.mobile{
	display: none;
}
.mobile-inline{
	display: none;
}
@media screen and (max-width: 899px){
	.desktop{
		display: none!important;
	}
	.desktop-inline{
		display: none!important;
	}
	.mobile{
		display: block!important;
	}
	.mobile-inline{
		display: inline-block!important;
	}
}
[lang="tc"] .main-content .full-screen-slider .slider .slide .caption .btn-enter{
    font-size: 1.3em;
}
[lang="tc"] .main-content .full-screen-slider .slider .slide .caption .btn-enter,
[lang="sc"] .main-content .full-screen-slider .slider .slide .caption .btn-enter{
	padding: 5px 50px 5px;
}
[lang="en"] .main-content .full-screen-slider .slider .slide .caption .btn-enter{
	padding: 7px 50px 5px 40px;
}


.mobile-view{
	.tel-wrap{
		display: block;
	}
	.header .logo {
	    width: 100%;
	    text-align: left;
    }
    [page="apartment"].main-content .inner-content .desc{
        padding: 0px 3% 5%;
    }
    [page="apartment"].main-content .inner-content .icon-wrapper {
	    width: 100%;
    }
    .footer{
        font-size: 0.8em;
    }
    .footer .row{
	    margin: 0px;
    }
    .footer .row .col.col-left .footer-logo{
        width: 100%;
	    margin: 20px 0px 25px;
    }
    [page="facilities"].main-content .inner-content .icon-wrapper{
        width: 100%;
    }
    [page="facilities"].main-content .inner-content .desc{
	    padding: 0px 3% 5%;
    }
}
.table-wrap{
	display: table;
}
.table-cell{
	display: table-cell;
	vertical-align: middle;
	height:100%;
}

.mobile-slider-for{
    //margin-top: 80px;
	.image{
		width: 100%;
		height: 250px;
		&.left{
			background-position: center left!important;
		}
		&.right{
			background-position: center right!important;
		}
		&.top{
			background-position: top center!important;
		}
		&.bottom{
			background-position: bottom center!important;
		}
	}
}
.mobile-slider-nav{
	margin: 10px -3px 0px;
	margin-top: 10px;
	.image{
		width: 100%;
		height: 60px;
		&.left{
			background-position: center left!important;
		}
		&.right{
			background-position: center right!important;
		}
		&.top{
			background-position: top center!important;
		}
		&.bottom{
			background-position: bottom center!important;
		}
	}
	.slick-track{
// 		height: 60px;
		.slick-slide{
			margin: 0px 5px;
			.slide-control{
				top: 34%;
			}

		}
	}
	&.slick-slider{
		.slide-control{
			top: 38%;
			img{
				height: 15px;
			}
		}
		.btn-prev{
		    left: -14px;
		}
		.btn-next {
		    right: -14px;
		}
	}
}
[data-fancybox-thumbs]{
	display: none!important;
}