@charset "UTF-8";

html,body{
	width:100%; height:100%; margin:0;
	font-size:16px;
	color:#fff;
	background:#000;
	font-family:'Inter', 'Noto Sans TC', sans-serif;
	font-weight:normal;

	text-size-adjust:none;
	-webkit-text-size-adjust:none;
	-moz-text-size-adjust:none;
	-ms-text-size-adjust:none;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

img{ border:none; padding:0; margin:0;  }
a{ font-size:inherit; color:inherit; text-decoration:none; -webkit-tap-highlight-color:rgba(0,0,0,0); }
body, html, div, select, input, textarea, img, span{  /*font-family:'Avenir', sans-serif;*/ -webkit-tap-highlight-color:rgba(0,0,0,0); }


h1,h2,h3{ font-weight:inherit; font-size:inherit; line-height:inherit; margin:0; padding:0; display:inherit; }
p{ margin:0 0 1em 0; }
p:last-child{ margin-bottom:0;}

input{ background-color:transparent; border:none; color:#fff;  }
input:focus, textarea:focus{ outline:none; color:#fff;   }
input:-webkit-autofill, input:-webkit-autofill:focus, input:-webkit-autofill:hover {
    background:#111; -webkit-box-shadow:inset 0 0 0px 9999px #111; box-shadow:inset 0 0 0px 9999px #111; color:#ffffff; -webkit-text-fill-color:#ffffff !important;
}

button{ border:none; background:none; font-size:1rem; color:inherit; margin:inherit; padding:inherit; cursor:pointer; font-family:inherit, }

ul, li{  padding:0; margin-left:0.8em; list-style-type: decimal; }
ol, ol li{ margin-left:0; padding-left:0; }
ol{ margin-left:0em; margin-top:0; }
ol li{ margin-bottom:0em; list-style-position:inside;  }


/*shared*/
.clear{ clear:both; }
.inner-container{ position:relative; width:90%; max-width:1200px; margin:auto;}
/*shared*/

/*text*/
/*

.txt-large{ font-size: 2em}

.txt-blank{color:#000} */

.txt-max{ font-size: 5em; line-height: 1; font-family:'Amaline Trial', 'Noto Serif TC',serif; text-align: center;  }
.txt-title{ font-size: 2.6em; line-height:1.1; font-family:'Amaline Trial', 'Noto Serif TC',serif; }
.txt-menu{ font-size: 2em; font-family:'Amaline Trial', 'Noto Serif TC',serif; text-align: center;}
.txt-lightbox{ font-size: 1.2em; font-weight: 600; color: #D59C6A; margin-bottom: 0.6em; }

.txt-body{ font-size: 1em; }

/*disclaimer*/
.txt-head{ font-size: 1.1em; font-weight:600; }
.txt-small{ font-size: 0.9em;}
.txt-tnc{ font-size:0.7em;}

.txt-next-button{ font-size:0.7em;}



.txt-bold{ font-weight:600; }
.txt-lightgrey{ color:#ababab; }

.lightbox-copyright{ text-decoration:underline; }

.lang-chinese{  font-size: 1.75em; }
.txt-chinese{ transform:translateY(-5%)}
.txt-simchiese{ transform:translateY(-2%)}
/*text*/



/*header*/
.header-container{ position:absolute; z-index:2; width: 100%; top: 0; height:5.5em; }
.header-container-inner { position: relative; width: 100%; height: inherit; }

.logo-container{ position: relative; float: left; margin:2em 2em 0 2em ; width: 13em; height: 100%; background-position:top right; background-repeat: no-repeat; background-size: contain; background-image: url("../img/cullinan-harbour-logo.png"); opacity:0; transition: opacity 300ms linear;  }
.pages-container.active .logo-container{ opacity: 0; }
.pages-container.entered.clicked .logo-container{ opacity: 1; transition-delay:100ms;  transition-duration:500ms;}
/*header*/

/*menu icon*/
.menu-icon-container{ position:absolute; z-index:4; width: 2.5em; height: 2.5em; top: calc(50% - 1px); left:2.5vw; transform: translateX(0%) translateY(-50%); display: flex; justify-content: center; align-items: center; cursor: pointer; opacity: 1; transition-duration: 600ms; transition-timing-function: linear; pointer-events:none;  }

.menu-icon-container > div{ position: absolute; width: 2em; height: 2px; background-color: #FFF; top: calc(50% - 1px);  opacity: 1; transition-duration: 200ms; }

.menu-icon-container > div:nth-child(1){ transform: translateY(-0.6em) rotate(0deg); transform-origin:left center}
.menu-icon-container > div:nth-child(2){ transform: scale(1); transition:transform 200ms, opacity 200ms linear  }
.menu-icon-container > div:nth-child(3){ transform: translateY(0.6em) rotate(0deg); transform-origin:left center }

.menu-icon-container{ opacity: 0; transform: translateX(80%) translateY(-50%); }

.menu-icon-container.hover > div:nth-child(1), .menu-icon-container.active > div:nth-child(1){ transform: translateY(-0.7em) rotate(45deg); transition-duration: 300ms;}
.menu-icon-container.hover > div:nth-child(2), .menu-icon-container.active > div:nth-child(2){ transform: translateX(-100%); opacity:0 }
.menu-icon-container.hover > div:nth-child(3), .menu-icon-container.active > div:nth-child(3){ transform: translateY(0.7em) rotate(-45deg); transition-duration: 300ms;}
/*menu icon*/

/*menu-expanded*/
.menu-container{ position:fixed; z-index:3; top:0; left:0; width: 100%; height:calc(100% - 8em); background-color:rgba(2,31,57,0.9); transform:translateX(-200%); transition:transform 0ms 400ms, opacity 400ms linear; opacity:0; display:flex; padding:4em 0;  align-items:center; overflow:scroll}
.menu-container.active{ opacity:1; transform:translateX(0); transition:opacity 400ms linear;}
.menu-container-inner {position: relative; width: 90%; margin: auto; display: flex; flex-direction:column;  }

.menu-item-container {position: relative; width: 100%; /*display: flex; flex-direction: column; gap: 2em; justify-content: flex-end;*/ }
.menu-item{ margin-top:.8em; transition:color 300ms linear  }
.menu-item.hover, .menu-item.active{ color:#d79e6a }
a:first-child .menu-item{ margin-top:0em; }
.menu-item br{ display:none}
.lang-media-container{ position: relative; width: 100%;  margin: auto; padding-top:3em;   }
.lang-media-container-inner{ display: flex; width: auto; justify-content: center; align-items: center; gap:1.1em;  }

.lang-container, .media-container{ position: relative; display: flex; justify-content: center; align-items:center    }

.lang-container > div:nth-child(2){ width: 1px; height: 1.5em; background-color: #FFF; margin:auto 1.25em; }

.sound-icon, .instagram{ width: 1.75em; height: 1.75em; background-repeat: no-repeat; background-size: contain; margin: 0 1em; }

.sound-icon{ background-image:url("../img/sound-icon.png"); }
.instagram{ background-image:url("../img/instagram-logo-white.png"); }
/*.phase-one{border: solid;border-color: white}*/


.sound-icon.active{ background-image:url("../img/sound-icon-off.png");}


.disclaimer-container .lang-media-container{ float:left; width:calc(100% - 3em - 14em ); padding:0; margin-left:3em; }
.disclaimer-container .lang-media-container-inner{ justify-content:flex-start; height:3em; }
.disclaimer-container .lang-chinese{ font-size:1.2em}
.disclaimer-container .lang-container > div:nth-child(2){ height: 1.2em;  margin:auto 1.1em; }
.disclaimer-container .sound-icon, .disclaimer-container .instagram{ width: 1.25em; height: 1.25em; margin: 0 .9em; }

.disclaimer-container .lang-media-container:nth-last-child(5){ display:none  }

/*menu-expanded*/

/*footer*/
.footer-container{ pointer-events:none;  position:absolute; z-index:2; width: 100%; bottom:1em; opacity: 0; transition-delay: 0ms; transition-duration: 200ms; transition-timing-function: ease-out; }
.footer-container.clicked{ pointer-events:all;  opacity:1; transition-delay: 400ms; transition-duration:600ms; }
.footer-container-inner{ width: 95%; margin: auto; display: flex; align-items: center;}

.disclaimer-button-container{ width: auto; display: flex; align-items: center; gap: 8px; margin-left: 2em; }

.disclaimer-chevron{ width: 0.5em; height: 0.5em; border-right: 2px solid rgba(255, 255, 255, 0.7); border-bottom: 2px solid rgba(255, 255, 255, 0.8); transform: translateY(-0.125em) rotate(45deg); }

.disclaimer-button-label{ font-weight: 600; color: rgba(255, 255, 255, 0.7); }
/*footer*/


.landing-container{ position:absolute; top:0; left:0; width:100%; height:100%; background:rgb(26,39,66); opacity:0;  }
.landing-bg-container{ position:absolute; top:0; left:0; width:100%; height:100%;  background-position: 25% center; background-repeat:no-repeat; background-size:cover; background-image:url(../img/landing.jpg);  }



@media only screen and (min-width:1024px) and (orientation: portrait) {
.landing-bg-container{  background-position:30% center;  }
}

.tagline-container{  font-family:'Amaline Trial', 'Noto Serif TC',serif; position:absolute; left:50%; top:50%; transform:translateY(-50%); line-height:1; text-align:left; pointer-events:none; text-shadow:1px 1px 2em rgba(0,0,0,1)  }
.tagline-container > div{ opacity:0; transform:rotateX(-100deg); transition:transform 1000ms ease-out, opacity 500ms linear;}
.tagline-container > div:nth-child(1){  transition-delay:100ms}
.tagline-container > div:nth-child(2){ margin-left:1.5em; transition-delay:300ms}

.tagline-container img{ width:auto; height:.7em; line-height:1;}


.landing-logo-container{  position:absolute; left:50%; top:50%; transform:translateY(-50%);  width:6.93em; height:1.65em; opacity: 0; background-position: center; background-repeat: no-repeat; background-size:contain; background-image: url("../img/cullinan-harbour-logo.png"); }

.pages-container.init{ opacity:1; transition:opacity 800ms linear}
.pages-container.entered .menu-icon-container{ opacity:1; transform:translateY(-50%); pointer-events:all;  }
.pages-container.init .tagline-container > div{ opacity:1; transform:rotateX(0deg) }
.pages-container.init .tagline-container{ /*animation:ani-tagline .5s 2s linear 1; animation-fill-mode:forwards*/ opacity:0; transition:opacity .5s 2s linear  }

.pages-container.init .landing-logo-container{ opacity:1; transition:opacity 500ms  2500ms linear}

.enter-button-container{ position:absolute; left:50%; transform:translate(-50000%,-50%); border:1px solid #fff; line-height:1; padding:.5em 1.5em; border-radius:2em; top:80%; opacity:0;  }
.enter-button-container.hover{ border-color:rgb(26,39,66); background:rgb(26,39,66)}
.pages-container.init .enter-button-container{ transform:translate(-50%,-50%); opacity:1; transition:transform 0ms 3s, opacity 400ms 3s linear}

@keyframes ani-tagline {
    0%    { opacity:1; }
    100%  { opacity:0; }
}

/*pages*/
.pages-container{ position:relative; width:100%; height:100%; min-height:45vw; opacity:1; }

.page-container{ position:absolute; width:100%; height:100%; overflow:hidden;  }
.page-container.inactive{ opacity:0; pointer-events:none; z-index:0; transition:opacity 600ms 100ms linear; }
.page-container.active{ opacity:1; pointer-events:all; z-index:1; transition:opacity 600ms 0ms linear; }
.page-container.clicked{   }

/*original back-foreground*/ /*
.page-background-container, .page-foreground-container{ position:absolute; top:0; left:0; width:100%; height:100%; transform:scale(.95);}
.page-foreground-container{  top:-40%; height:180%; overflow:hidden; }

.page-container.active .page-background-container, .page-container.active .page-foreground-container{ transform:scale(1); transition:transform 500ms ease-out, border-radius 500ms ease-out; }
.page-container.clicked .page-foreground-container{ transform:translateX(-60%); border-radius:100%  }
.page-container.resizing .page-background-container, .page-container.resizing .page-foreground-container{ transition-duration:0s; }  */
.page-container.resizing .page-background-container, .page-container.resizing .page-foreground-container{ transition-duration:0s!important; }

/*background*/
.page-background-container, .page-foreground-container{ position:absolute; top:0; left:0; width:100%; height:100%; transform:scale(1); transition:transform 600ms linear;}
.page-foreground-container{ top:-40%; height:180%; overflow:hidden;  }
.page-container.inactive .page-background-container, .page-container.inactive .page-foreground-container{ transform: scale(0.93); transition:transform 0ms 1000ms, border-radius 0ms 1000ms;  } 
.page-container.active .page-background-container, .page-container.active .page-foreground-container{ transform:scale(1); transition:transform 1000ms cubic-bezier(0.4, 0, 0.22, 1), border-radius 600ms ease-out; }

 
.page-container.clicked .page-foreground-container{ transform:translateX(-60%); border-radius:100%;   }
.page-container.clicked.already .page-foreground-container{ transition:transform 0ms, border-radius 0ms; animation:foreground-offset .5s ease-out normal 1; animation-fill-mode:    forwards; }
@keyframes foreground-offset {
    0%    {left:-5%; }
    100%  {left:0%; }
}



.img-container{ position:absolute; height:100%; top:0; background-position:center; background-repeat:no-repeat; background-size:cover; -webkit-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0) }
.page-background-container .img-container{ width:75%; right:0; }
.page-foreground-container .img-container{ width:100%; height:55.6%; left:0; top:22.2%; }

/*pages img*/
.page-container.sales-brochure{  }
.page-container.sales-brochure .page-background-container .img-container{ background-image:url(../img/sales-brochure-back.jpg); background-position:40% 80%; }
.page-container.sales-brochure .page-foreground-container .img-container{ background-image:url(../img/sales-brochure-fore.jpg); background-position:100% 30%;  transform:scale(1,-1) }
.page-container.sales-brochure .img-pill-inner{ background-image:url(../img/sales-brochure-pill.jpg);}

.page-container.price-list{  }
.page-container.price-list .page-background-container .img-container{ background-image:url(../img/price-list-back.jpg); background-position:50% 75%; }
.page-container.price-list .page-foreground-container .img-container{ background-image:url(../img/price-list-fore.jpg); background-position:center bottom; }
.page-container.price-list .img-pill-inner{ background-image:url(../img/price-list-pill.jpg);}

.page-container.sales-arrangement{  }
.page-container.sales-arrangement .page-background-container .img-container{ background-image:url(../img/sales-arrangement-back.jpg); background-position:10% 85%; transform: scale(1); transform-origin: center bottom;}
.page-container.sales-arrangement .page-foreground-container .img-container{ background-image:url(../img/sales-arrangement-fore.jpg); background-position:center 90%; }
.page-container.sales-arrangement .img-pill-inner{ background-image:url(../img/sales-arrangement-pill.jpg);}

.page-container.register-of-transactions{  }
.page-container.register-of-transactions .page-background-container .img-container{ background-image:url(../img/register-of-transactions-back.jpg); background-position:40% 33%; }
.page-container.register-of-transactions .page-foreground-container .img-container{ background-image:url(../img/register-of-transactions-fore.jpg); background-position:left 40%; }
.page-container.register-of-transactions .img-pill-inner{ background-image:url(../img/register-of-transactions-pill.jpg);}

.page-container.deed-of-mutual-convenant{  }
.page-container.deed-of-mutual-convenant .page-background-container .img-container{ background-image:url(../img/deed-of-mutual-convenant-back.jpg); background-position:left 85%; }
.page-container.deed-of-mutual-convenant .page-foreground-container .img-container{ background-image:url(../img/deed-of-mutual-convenant-fore.jpg); background-position:center center; }
.page-container.deed-of-mutual-convenant .img-pill-inner{ background-image:url(../img/deed-of-mutual-convenant-pill.jpg);}

.page-container.aerial-photograph{  }
.page-container.aerial-photograph .page-background-container .img-container{ background-image:url(../img/aerial-photograph-back.jpg); background-position:center bottom; transform: scale(1); transform-origin: center bottom; }
.page-container.aerial-photograph .page-foreground-container .img-container{ background-image:url(../img/aerial-photograph-fore.jpg); background-position:center center; }
.page-container.aerial-photograph .img-pill-inner{ background-image:url(../img/aerial-photograph-pill.jpg); }

.page-container.tender-document{  }
.page-container.tender-document .page-background-container .img-container{ background-image:url("../img/tender-document-back.jpg"); background-position:100% 80%; }
.page-container.tender-document .page-foreground-container .img-container{ background-image:url(../img/tender-document-fore.jpg); background-position:center bottom; }
.page-container.tender-document .img-pill-inner{ background-image:url(../img/tender-document-pill.jpg);}

.page-container.sales-brouchure-for-parking-space{  }
.page-container.sales-brouchure-for-parking-space .page-background-container .img-container{ background-image:url(../img/sales-brochure-for-parking-space-back.jpg); background-position:right 55%; }
.page-container.sales-brouchure-for-parking-space .page-foreground-container .img-container{ background-image:url(../img/sales-brochure-for-parking-space-fore.jpg); background-position:right 50%; }
.page-container.sales-brouchure-for-parking-space .img-pill-inner{ background-image:url(../img/sales-brochure-for-parking-space-pill.jpg);}

.page-container.parking-space-document{  }
.page-container.parking-space-document .page-background-container .img-container{ background-image:url(../img/parking-space-document-back.jpg); background-position:60% bottom; }
.page-container.parking-space-document .page-foreground-container .img-container{ background-image:url(../img/parking-space-document-fore.jpg); background-position:center center; }
.page-container.parking-space-document .img-pill-inner{ background-image:url(../img/parking-space-document-pill.jpg);}
/*pages img*/
/*background*/

/*center-content*/
.content-container{ position:relative; width: 100%; height:100%; }
.content-container-inner{ position: absolute; width:100%; top:50%; left:0%; transform:translate(0%, -50%);  }

.img-pill-container{ position: relative; margin:auto; width:20%; max-width:600px; min-width:350px;   }
.img-pill-container-inner{ position: relative; width:100%; perspective:2000px; pointer-events:none  }
.img-pill-inner{ position:relative; width:100%; padding-bottom:145%; border-radius: 25em; background-position: center; background-repeat: no-repeat; background-size: cover; transform: rotateY(0); transition:transform 1000ms 300ms cubic-bezier(0.4, 0, 0.22, 1), opacity 500ms 300ms cubic-bezier(0.4, 0, 0.22, 1); opacity:1;  }



.page-container.inactive .img-pill-inner{ transform:rotateY(-90deg); opacity:0; }
.page-container.clicked .img-pill-inner{ transform:rotateY(100deg); opacity:0; transition-delay:100ms;  }
.page-container.active .img-pill-inner{ transition-delay:50ms; transition-duration:500ms;}

/*titles*/
.hero-title-container{ position:absolute; width: 100%; top:-2.2em; height: calc(100% + 4.4em); display: flex; flex-direction: column; justify-content: space-between; align-items: center;  perspective:2000px; pointer-events:none   }

.page-container.inactive .title-top, .page-container.inactive .title-bottom{ transform:scale(0); opacity:0;   }
.title-top, .title-bottom{ transform:scale(1); opacity:1; transform-origin: 50% 50%; white-space: nowrap;   }
.title-top {     transition:transform 600ms cubic-bezier(0.4, 0, 0.22, 1), opacity 300ms cubic-bezier(0.4, 0, 0.22, 1); }
.title-bottom {  transition:transform 1000ms 100ms cubic-bezier(0.4, 0, 0.22, 1), opacity 500ms 100ms cubic-bezier(0.4, 0, 0.22, 1);  }

.title-top-flip > div{ position:absolute; font-size:0.25em; top:0; width:100%; text-align:center; left:0;  transform:translateY(-175%) rotateX(90deg); transition:transform 400ms 200ms cubic-bezier(0.4, 0, 0.22, 1), opacity 200ms 200ms; letter-spacing:0.1em; opacity:0; }

.page-container.inactive .title-top-flip > div{  transform:translateY(-175%) rotateX(0deg) scale(0); opacity:0;  }

.page-container.active .title-top-flip > div{  transform:translateY(-175%) rotateX(0deg); opacity:1; transition:transform 400ms 200ms cubic-bezier(0.4, 0, 0.22, 1), opacity 200ms 200ms; }
.page-container.clicked .title-top-flip > div{ transform:translateY(-175%) rotateX(100deg); opacity:0; transition:transform 400ms cubic-bezier(0.4, 0, 0.22, 1), opacity 400ms 0ms; }

.page-container.active .title-top{ opacity: 1; transform: scale(1) translateY(0%);;  transition-duration:800ms;}
.page-container.active .title-top-flip{ transform:rotateX(0deg); transition:transform 700ms 0ms cubic-bezier(0.4, 0, 0.22, 1) }

.page-container.clicked .title-top{ opacity:0; transform: scale(1) translateY(0%);; transition-duration:600ms;  }
.page-container.clicked .title-top-flip{ transform: rotateX(-120deg); transition:transform 600ms 0ms cubic-bezier(0.4, 0, 0.22, 1)  }

.page-container.active .title-bottom{ opacity: 1; transform: scale(1) translateY(0%); transition-duration:800ms; }
.page-container.active .title-bottom-flip{ transform:rotateX(0deg); transition:transform 600ms 200ms cubic-bezier(0.4, 0, 0.22, 1) }

.page-container.clicked .title-bottom{ opacity:0; transform: scale(7) translateY(0%); transition-delay:200ms; transition-duration:500ms }
.page-container.clicked .title-bottom-flip{ transform: rotateX(-100deg); transition:transform 600ms 200ms cubic-bezier(0.4, 0, 0.22, 1)  }
/*titles*/  /*smaller-screen animations?*/

/*rotate-button*/
.rotate-button-container{ position: absolute; width:5em; height:5em; top: calc(50% - 2.5em); right: calc(100% + 2.5em); border-radius:5em; background-color:rgba(128,128,109,0); transform: scale(1); opacity:1; transition: background-color 200ms linear, transform 600ms 800ms cubic-bezier(0.4, 0, 0.22, 1), opacity 300ms 800ms cubic-bezier(0.4, 0, 0.22, 1), right 500ms 0ms; display:none;  }

.page-container.inactive .rotate-button-container{ transform:scale(0); opacity:0; }

.rotate-button-container.hover{ background-color:rgba(128,128,109,0.50); transition-duration:200ms; transition-timing-function: linear; }

.page-container.active .rotate-button-inner{ transform: rotate(0deg); transition-duration: 500ms; }
.page-container.clicked .rotate-button-inner{ transform: rotate(180deg); transition-duration: 500ms; }

.outer-border{ position: absolute; width:5.5em; height:5em; transform:translateX(-12%); border:.5px solid rgba(255,255,255,0.6);  border-radius:5em; animation:border-scale 1.5s ease-in-out alternate infinite;}
.rotate-button-container .outer-border:nth-child(2){  transform:translateX(0%);}
.rotate-button-container .outer-border:nth-child(2){ animation-direction: alternate-reverse;}
@keyframes border-scale {
    0%    {transform:translateX(-12%); }
    100%  {transform:translateX(0%); }
}

.rotate-button-inner{ position: relative; width: 100%; height: 100%;  }
.txt-rotate-button{ position:absolute; width:100%; line-height:1;  font-family:'Amaline Trial', 'Noto Serif TC',serif; text-align: center; }
.txt-rotate-button:nth-child(1){ bottom:50%;  }
.txt-rotate-button:nth-child(2){ top:50%; transform:rotate(180deg);  }
/*rotate-button*/

/*next-button*/
.next-button-container{ position: absolute;  width:4em; top: calc(50% - 6px); right:0%; transform:translateX(80%); align-items: center; cursor: pointer; opacity: 1; transition:opacity 200ms 700ms linear, transform 400ms 700ms ease-out, right 500ms ease 0ms; /* display: flex;*/ display:none!important;}
 
.page-container.inactive .next-button-container{ opacity:0; transform:translateX(30%); }
.page-container.active .next-button-container{}
.page-container.clicked .next-button-container{ right:100%; }

.next-button-container > div:nth-child(1){ width: calc(100% - 0.8em); height:1px; background-color:rgba(255,255,255,0.8); }
.next-button-container > div:nth-child(2){ width:0.8em; height:0.8em; background-color: #FFF; border-radius:100px; } 

.txt-next-button{  transform-origin:center; line-height:1; position:absolute; transform:rotate(90deg) translateX(0%); top:0; left:calc(100% + 1.3em); display:inline-block; display:none!important; }
.txt-next-button > span{ display:block; line-height:1; position:absolute; height:1.8em; width:1em; text-align:center; transition:transform 300ms }
.txt-next-button > span:nth-child(1){ transform:rotate(-61.5deg); transform-origin:bottom center; background:rgba(255,0,0,0)}
.txt-next-button > span:nth-child(2){ transform:rotate(-20.5deg); transform-origin:bottom center}
.txt-next-button > span:nth-child(3){ transform:rotate(20.5deg);  transform-origin:bottom center}
.txt-next-button > span:nth-child(4){ transform:rotate(61.5deg);  transform-origin:bottom center}

.txt-next-button.hover > span:nth-child(1){ transform:rotate(-78deg);}
.txt-next-button.hover > span:nth-child(2){ transform:rotate(-26deg); }
.txt-next-button.hover > span:nth-child(3){ transform:rotate(26deg);  }
.txt-next-button.hover > span:nth-child(4){ transform:rotate(78deg);   }

.next-button-container{ width:5em; }
.txt-next-button{ top:auto; left:auto; right:1.5em; bottom:.75em; transform:rotate(0deg) translateX(0%); letter-spacing:0.1em; transition:letter-spacing 300ms }
.txt-next-button.hover{ letter-spacing:0.2em}
/*next-button*/
/*center-content*/

/*side-content*/
.side-content-container{ position:absolute; width:40%;  height:100%; top:0%; transform:translateY(0%); }
.side-content-container-inner{ position: relative; height:100%; width:calc(100% - 6em); margin:0 0 0 calc(5vw + 2em);  }

.side-title-container{ position: absolute; bottom: calc(50% + 2em); width:100%;}
.side-title-container > div { opacity: 0; transition-duration: 200ms;}
.page-container.active .side-title-container > div{}
.page-container.clicked .side-title-container > div{ opacity: 1;}

.side-title-container > div:nth-child(1){ transform: scale(1,0); }
.side-title-container > div:nth-child(2){ transform: scale(1,0); }

.page-container.clicked .side-title-container > div{ opacity: 1;  transform: scale(1,1); }
.page-container.clicked .side-title-container > div:nth-child(1){ transition-delay: 350ms; transition-duration: 600ms; }
.page-container.clicked .side-title-container > div:nth-child(2){ transition-delay: 250ms; transition-duration: 400ms; }

.side-body-container{ position:absolute; width:calc(100% - 9em); /*min-width: 250px;*/ max-width:30em; top:50%; opacity: 0; transform: translateY(5%); transition-duration: 200ms; overflow:auto;}
.page-container.clicked .side-body-container{ opacity: 1; transform: translateY(0); transition-delay: 350ms; transition-duration: 600ms; transition-timing-function: ease-out; }

.doc-ele{ margin-top:1em; display:flex; justify-content:space-between;   }
.doc-ele:nth-child(1){ margin-top:0em; }

.doc-ele > div:nth-child(2){ padding-left:1.5em; margin-left:1em;  position:relative; white-space:nowrap;}

.doc-ele > div:nth-child(2)::after{ content:'';  position:absolute; left:0; width:1em; height:100%; top:0; background-repeat:no-repeat; background-position:left 0.1em; background-size:.9em auto ; background-image:url("../img/dl.svg");  }
/*side-content*/


/*pages*/

/*disclaimer*/
.disclaimer-container{ position:relative; width:100%; height:auto; background:#1a2742; display:none}
.disclaimer-container-inner{ width: 95%; padding:2em 0; margin: auto; }


.mobile-ele{ display: none;}

.disclaimer-logo-container{ position: relative; width: 13.5em; height: 3em; margin-bottom: 2em; }
.disclaimer-logo-container.desktop-ele, .disclaimer-logo-container.mobile-ele{ float:left; }
.disclaimer-logo-container .img-container{ width: 100%; background-repeat: no-repeat; background-size: contain; background-image: url("../img/sun-hung-kai-logo.png"); }



.disclaimer-txt-box{ position: relative; width: 100%; margin-bottom: 2em;}
.disclaimer-txt-box > div:nth-child(1),.disclaimer-txt-box > div:nth-child(2){ margin-bottom:1em}
.disclaimer-container-inner > div:last-child{ font-size:0.7em; color:#fff; }
/*disclaimer*/


/*lightbox*/
.lightbox-container{ position:fixed; z-index:5; top:0; left:0; width:100%; height:calc(100% - 8em); background-color:rgba(2,31,57,0.9); opacity:0; transform:translateX(-200%); display:flex; align-items:center; padding:4em 0; overflow:scroll; transition:transform 0ms 400ms, opacity 400ms linear; }
.lightbox-container.active{  transform:translateX(0%); opacity:1;  transition:transform 0ms, opacity 500ms 0ms linear;  }

.lightbox-container-inner{ position:relative; width:90%; max-width:800px; margin:auto;  /*top: 50%; transform: translateY(-50%);*/  }

.lightbox-txt-container{ position: relative; width:100%;  }

.lightbox-body{ width:100%; position:relative; } 

.cross-button-container{ position:absolute; width: 2.5em; height: 2.5em; top:-2.5em; right: -2.5em; display: flex; justify-content: center; align-items: center; cursor:pointer; }
.cross-button-container > div { position: absolute; width: 2em; height: 2px; background-color: #FFF; margin: auto; }
.cross-button-container > div:nth-child(1){ transform: rotate(-45deg); }
.cross-button-container > div:nth-child(2){ transform: rotate(45deg); }
/*lightbox*/


/* scroll plane */
.scrollbar-inner{ width:100%;   /*max-height:35em;*/ overflow:auto;  
	-ms-overflow-style: none;
    -webkit-overflow-style: none;
    scrollbar-width: none; }
.scrollbar-inner::-webkit-scrollbar {
    display: none;
  }
.scrollbar-inner > .scrollbar-inner-inner{ padding-right:1.5em;  }

.lightbox-container .scrollbar-inner{  height:40vh; min-height:15em }
.side-body-container .scrollbar-inner{  height:10em;  }
/* scroll plane */


/* PHASE II */
.phaseii .landing-bg-container{ background-image:url(../img/landing-two.jpg)}
.phaseii .landing-logo-container{ transform:translateY(-250%);background-image:url("../img/cullinan-harbour-logo-two.png")}
.phaseii .logo-container{ background-image:url("../img/cullinan-harbour-logo-two.png")}
.phaseii .tagline-container{transform:translateY(-200%)}
.phase-button-container{width: 5em;border: 1px solid;text-align:center;padding:.1em 1px}
.phase-button-container:hover{background: #FFF;color:rgba(2,31,57,0.9)}


.phaseii .page-container.sales-brochure{  }
.phaseii .page-container.sales-brochure .page-background-container .img-container{ background-image:url(../img/sales-brochure-back-two.jpg); background-position:20% 70%; }
.phaseii .page-container.sales-brochure .page-foreground-container .img-container{ background-image:url(../img/sales-brochure-fore-two.jpg); background-position:50% 20%;  transform:scale(1) }
.phaseii .page-container.sales-brochure .img-pill-inner{ background-image:url(../img/sales-brochure-pill-two.jpg);}



.phaseii .page-container.sales-arrangement{  }
.phaseii .page-container.sales-arrangement .page-background-container .img-container{ background-image:url(../img/sales-arrangement-back-two.jpg); background-position:10% 85%; transform: scale(1); transform-origin: center bottom;}
.phaseii .page-container.sales-arrangement .page-foreground-container .img-container{ background-image:url(../img/sales-arrangement-fore-two.jpg); background-position:center 90%; }
.phaseii .page-container.sales-arrangement .img-pill-inner{ background-image:url(../img/sales-arrangement-pill-two.jpg);}

.phaseii .page-container.register-of-transactions{  }
.phaseii .page-container.register-of-transactions .page-background-container .img-container{ background-image:url(../img/register-of-transactions-back-two.jpg); background-position:5% 33%; }
.phaseii .page-container.register-of-transactions .page-foreground-container .img-container{ background-image:url(../img/register-of-transactions-fore-two.jpg); background-position:left 40%; }
.phaseii .page-container.register-of-transactions .img-pill-inner{ background-image:url(../img/register-of-transactions-pill-two.jpg);}

/* PHASE II */


/* PHASE II-B */
.phaseiib .landing-bg-container{ background-image:url(../img/landing-three.jpg)}
.phaseiib .landing-logo-container{ transform:translateY(-250%);background-image:url("../img/cullinan-harbour-logo-twoB.png")}
.phaseiib .logo-container{ background-image:url("../img/cullinan-harbour-logo-twoB.png")}
.phaseiib .tagline-container{transform:translateY(-50%)}
.phase-button-container{width: 5em;border: 1px solid;text-align:center;padding:.1em 1px}
.phase-button-container:hover{background: #FFF;color:rgba(2,31,57,0.9)}


.phaseiib .page-container.sales-brochure{  }
.phaseiib .page-container.sales-brochure .page-background-container .img-container{ background-image:url(../img/sales-brochure-back-2B.jpg); background-position:50% 100%; transform:scale(1.05) }
.phaseiib .page-container.sales-brochure .page-foreground-container .img-container{ background-image:url(../img/sales-brochure-fore-2B.jpg); background-position:50% 20%;  transform:scale(1) }
.phaseiib .page-container.sales-brochure .img-pill-inner{ background-image:url(../img/sales-brochure-pill-2B.jpg);}



.phaseiib .page-container.sales-arrangement{  }
.phaseiib .page-container.sales-arrangement .page-background-container .img-container{ background-image:url(../img/sales-arrangement-back-2B.jpg); background-position:50% 50%; transform: scale(1.25); transform-origin: left bottom;}
.phaseiib .page-container.sales-arrangement .page-foreground-container .img-container{ background-image:url(../img/sales-arrangement-fore-2B.jpg); background-position:center 90%; }
.phaseiib .page-container.sales-arrangement .img-pill-inner{ background-image:url(../img/sales-arrangement-pill-2B.jpg);}

.phaseiib .page-container.register-of-transactions{  }
.phaseiib .page-container.register-of-transactions .page-background-container .img-container{ background-image:url(../img/register-of-transactions-back-2B.jpg); background-position:50% 100%;transform: scale(1.08) }
.phaseiib .page-container.register-of-transactions .page-foreground-container .img-container{ background-image:url(../img/register-of-transactions-fore-2B.jpg); background-position:left 40%; }
.phaseiib .page-container.register-of-transactions .img-pill-inner{ background-image:url(../img/register-of-transactions-pill-2B.jpg);}



/* PHASE II-B */

/*entrance*/
.phaseii .entrance .landing-logo-container {width:45%;top:20%; height:auto; background:none ; display:flex;  transform:translateY(0%);  }
.phaseii .entrance .landing-logo-container > div:nth-child(1) {transform: translateX(-0%); margin-left:0}
.phaseii .entrance .landing-logo-container > div:nth-child(2) {}
.phaseii .entrance .landing-logo-container > div{display: block; width:100%; margin-left: 3em}
.entrance-one{  padding-bottom:50%; background-image:url("../img/cullinan-harbour-logo.png"); background-size: contain;background-repeat:no-repeat;}
.entrance-two{padding-bottom: 50%; background-image:url("../img/cullinan-harbour-logo-two.png");background-size: contain;background-repeat: no-repeat;}
.entrance-three{padding-bottom: 50%; background-image:url("../img/cullinan-harbour-logo-twoB.png");background-size: contain;background-repeat: no-repeat;}
.entrance-txt { }
.entrance .txt-tnc{text-align:center}


.phaseiib .landing-logo-container { top:40%;  }
.phaseiib .landing-logo-container{ transform:translateY(-0%); }
/*entrance*/


@media only screen and (min-width:1024px) and (max-width:1599px) {
	.page-container.clicked .page-foreground-container{ transform:translateX(-50%); }

    .page-container.clicked .rotate-button-container{ right: calc(50% + 2em);  }

    .page-container.clicked .next-button-container{ right:50%; }

    .side-content-container{ width: 50%;}
}

@keyframes foreground-offset-m {
    0%    {top:5%; }
    100%  {top:0%; }
}

@media only screen and (min-width:0px) and (max-width:1023px) {
	.txt-tnc{ font-size:0.8em;}
	
    .pages-container{  min-height:130vw; }
	.page-foreground-container{  top:0%; height:100%; width:140%; left:-20%; }
	.page-container.clicked .page-foreground-container{ transform:translateY(-54%); }
	
	.page-container.clicked.already .page-foreground-container{ animation:foreground-offset-m .5s ease-out normal 1;  }

    .page-foreground-container .img-container{ height:100%; top:0%; width:71.4%; left:14.3%; }
	.page-background-container .img-container{ background-size:cover; width:100%; height:70%; top:30%  }
    
    .header-container{ height:3.6em; }
    .logo-container{ float: right; width: 10em; }
    
    .menu-icon-container{ top: calc(1.5em); transform:translateY(-.5em);  left:5vw }
	.menu-item br{ display:block } 
	
    .pages-container.entered .menu-icon-container{  transform:translateY(0%); transition:opacity 600ms linear, transform 500ms ease-out }
	.landing-gradient{ position:absolute; width:100%; top:0; height:18em; background: rgb(26,39,66); background: linear-gradient(180deg, rgba(26,39,66,1) 0%, rgba(26,39,66,1) 50%, rgba(26,39,66,0) 100%);}
    /*.landing-bg-container{ background-position:25% center;  background-size:cover; top:5em; height:calc(100% - 5em)   }*/
	.landing-bg-container{ background-image:url(../img/landing-mobile.jpg); background-size: cover; background-position: center center; top:0em; height:calc(100% - 0em); }

	
	.tagline-container{ right:2rem; left:auto; }
	.tagline-container > div:nth-child(1){ margin-left:1.15em}
	.tagline-container > div:nth-child(2){ margin-left:0em}
	
    .title-top, .title-bottom{ white-space: normal; }
    
	.enter-button-container{  top:88%;    }
	
	.landing-logo-container{  left:5%; top:1.25em; transform:translateY(-50%);  width:90%; height:1.5em;  }
	.pages-container.init .landing-logo-container{  transition:opacity 500ms 200ms linear}
	.pages-container.init .tagline-container{  animation:none; animation-fill-mode:backwards; opacity:1; transition:opacity 0s;  }
	.pages-container.init .enter-button-container{  transition:transform 0ms 1.2s, opacity 400ms 1.2s linear}

    .rotate-button-container{ top:calc(100% - 7.5em); left:calc(50% - 2.5em); transition-delay:0ms }
	.page-container.clicked .rotate-button-container{ /*transform:translateY(-12em); transition-delay:0ms;*/ }
	
	.page-container.active .next-button-container{ right:0%; }
    /*.next-button-container{ width: 28%; right: -18%; }
    .page-container.active .next-button-container{ right: -18%;}*/
	
	.side-content-container{ width:100%; top:6em; /*bottom:calc(50% + 6em);*/ height:calc(50% - 10em); z-index: 1;  }
	.side-content-container-inner{  height:100%; width:calc(100% - 3.5em); max-width:22em;  margin:0 auto; }
	
	/* scorll area height */
	.side-body-container .scrollbar-inner{  height:12em; /*background-color:rgba(255,0,0,0.5);*/ max-height:10.5em; min-height:1.5em;  }
	.page-container.sales-brochure .side-content-container .side-body-container .scrollbar-inner{  height:calc(100% - 11.6em);   }
	.page-container.price-list .side-content-container .side-body-container .scrollbar-inner{  height:calc(100% - 12em); max-height:12.6em  }
	.page-container.sales-arrangement .side-content-container .side-body-container .scrollbar-inner{  height:calc(100% - 11.6em); }
	.page-container.tender-document .side-content-container .side-body-container .scrollbar-inner{  height:calc(100% - 13em);  }
	.page-container.register-of-transactions .side-content-container .side-body-container .scrollbar-inner{  height:calc(100% - 11.6em);  }
	.page-container.deed-of-mutual-convenant .side-content-container .side-body-container .scrollbar-inner{  height:calc(100% - 14.5em); max-height:9em  }
	.page-container.aerial-photograph .side-content-container .side-body-container .scrollbar-inner{  height:calc(100% - 11.6em); }
	.page-container.sales-brouchure-for-parking-space .side-content-container .side-body-container .scrollbar-inner{  height:calc(100% - 17.5em); max-height:7em  }
	.page-container.parking-space-document .side-content-container .side-body-container .scrollbar-inner{  height:calc(100% - 11.6em);   }
	
	/* scorll area height */
	
	
	.side-title-container{ position:relative; margin:0; margin-bottom:2em; top:auto;  bottom:auto;}
    .side-body-container{ position:relative; top: auto; height:calc(100% - 1em); width:100%; max-width:none; padding-top:1em}
	
	
	.doc-ele{ display:block}
	.doc-ele > div:nth-child(2){ display:none} 
	
    /*disclaimer*/
    .footer-container, .desktop-ele{ display: none; }
    .mobile-ele{ display: block; }
    
	.disclaimer-container{ background-repeat:no-repeat; background-size:cover; background-position:center;  }
	
	
    .disclaimer-container-inner{ width: 90%;}
    .footer-notes{ margin-bottom:2em;  }
	.footer-notes.txt-head.information{ text-decoration: underline; /*max-width:19em;*/ text-align:left;  line-height:1.5; width: 90%; }
	
	.disclaimer-logo-container.mobile-ele{ margin:0 0 2.5em 0}
	.phase-disclaimer{  font-size:1rem; color:#fff; font-weight:600 }
	.phase-disclaimer > span.newline{ display:block}
	
	.hypid-disclaimer{ display:block; margin-top:2em; font-size:1rem; color:#ababab;  }
	.txt-disclaimer{ font-size:1rem; color:#ababab; font-weight:600 }
	.disclaimer-container-inner > div:last-child{ font-size:1em; color:#ababab; margin-top:1em }
    /*
    .disclaimer-container.mobile .disclaimer-logo-container{ position: relative; width: 13.5em; height: 3em; margin: 0 auto 2em; }
    
    .disclaimer-container.mobile .footer-notes.txt-head.information { width: 90%; text-decoration: underline; text-align: center; line-height: 1.8; margin-top: 2em;}
    .disclaimer-container.mobile .footer-notes.txt-body { color: rgba(255, 255, 255, 0.7); }
	*/
	
	
    /*disclaimer*/
	.hero-title-container{top:50%; height:0; padding-bottom:calc(145% + 4.4em);  transform:translateY(-50%)}
	.title-bottom{ bottom:0; position:absolute; }
	.content-container-inner{ height:100%;}
	.img-pill-container{ height:100%; display:flex; align-items:center  }
	
	.cross-button-container{ top:0em; right: calc(100% - 2.25em); }
	.lightbox-container{ display:block; padding:1.5em 0; height:calc(100% - 3em) }
	.lightbox-container-inner{ width:calc(100% - 3em); height:100% }
	
	.lightbox-txt-container{ height:100%;  }
	.lightbox-title{ padding-top:3em; }
	.lightbox-body{  height:calc(100% - 8.5em );   }
	.lightbox-container .scrollbar-inner{  height:100%;  }
	/*NEW*/
	.disclaimer-container{ background-repeat:no-repeat; background-size:cover; background-position: center;}
	/*NEW*/
	
	
	.page-container.sales-brochure .page-background-container .img-container{ background-position:70% center; transform-origin: center bottom; transform: scale(1.1); }
	.page-container.sales-brochure .page-foreground-container .img-container{ transform: rotate(0deg) scale(1,1); background-position: center center; }
	/*.disclaimer-container.sales-brochure{ background-image:url(../img/price-list-fore.jpg);  background-position:left 50%;   }*/
    .disclaimer-container.sales-brochure{ background-image:url(../img/sales-brochure-disclaimer.jpg); }
	  
	.page-container.price-list .page-background-container .img-container{ background-position:70% bottom; }
	.page-container.price-list .page-foreground-container .img-container{ background-position:40% top; transform: scale(1.2); transform-origin: center 25%; }
	.disclaimer-container.price-list{ background-image:url(../img/price-list-disclaimer.jpg); }
	
	.page-container.sales-arrangement .page-background-container .img-container{ background-position:55% top; transform: scale(1.05); }
	.page-container.sales-arrangement .page-foreground-container .img-container{ background-position:23% center; }
	.disclaimer-container.sales-arrangement{ background-image:url(../img/sales-arrangement-disclaimer.jpg); }

	.page-container.register-of-transactions .page-background-container .img-container{ background-position:50% bottom; }
	.page-container.register-of-transactions .page-foreground-container .img-container{ background-position:top right;  }
    .disclaimer-container.register-of-transactions{ background-image:url(../img/register-of-transactions-disclaimer.jpg); background-position: right center; }

	.page-container.deed-of-mutual-convenant .page-background-container .img-container{ background-position:50% 20%; }
	.page-container.deed-of-mutual-convenant .page-foreground-container .img-container{ background-position:15% center; }
    .disclaimer-container.deed-of-mutual-convenant{ background-image:url(../img/deed-of-mutual-convenant-disclaimer.jpg); background-position:center center; }

	.page-container.aerial-photograph .page-background-container .img-container{ background-position:100% 50%; transform:scale(1.07); transform-origin:100% 100%; }
	.page-container.aerial-photograph .page-foreground-container .img-container{ background-position:22% top; transform: scale(1.2); transform-origin: center 20%; }
    .disclaimer-container.aerial-photograph{ background-image:url(../img/aerial-photograph-disclaimer.jpg); }
    
	.page-container.tender-document .page-background-container .img-container{ background-position:40% 40%; transform:scale(1.3) translateY(0%); transform-origin:center bottom; }
	.page-container.tender-document .page-foreground-container .img-container{ background-position:80% top; transform:scaleY(-1); }
	.disclaimer-container.tender-document{ background-image:url(../img/tender-document-disclaimer.jpg); }

	.page-container.sales-brouchure-for-parking-space .page-background-container .img-container{ background-position:right center; transform:scale(1.1); transform-origin:right center}
	.page-container.sales-brouchure-for-parking-space .page-foreground-container .img-container{ background-image:url(../img/sales-brochure-for-parking-space-fore-mobile.jpg); background-position:70% center; transform: scale(1.1); }
    .disclaimer-container.sales-brouchure-for-parking-space{ background-image:url(../img/sales-brochure-for-parking-space-disclaimer.jpg); background-position:right center; }

	.page-container.parking-space-document .page-background-container .img-container{ background-position: 85% bottom; transform: scale(1.1); transform-origin: center bottom;}
	.page-container.parking-space-document .page-foreground-container .img-container{  background-position:45% top; }
    .disclaimer-container.parking-space-document{ background-image:url(../img/parking-space-document-disclaimer.jpg); }
	
	.disclaimer-container .lang-media-container:nth-last-child(5){ display:block  }
	.disclaimer-container .lang-media-container:nth-child(2){ display:none  }
	.disclaimer-container .lang-media-container-inner{height:auto; margin-bottom:1em }
	.disclaimer-container .lang-media-container{ float:right; width:auto;   margin-top:0.5em; }
	
	/* PHASE II */
    .phaseii .landing-bg-container{ background-image:url(../img/landing-mobile-two.jpg)}
	.phaseii .landing-logo-container{left:5%; top:1.25em; transform:translateY(-50%);  width:90%; height:1.5em;}
	.phaseii .tagline-container{ left:50%;top:75%; transform:translateX(-50%); width:100% ;overflow: hidden}
	.phaseii .tagline-container > div{ transform:translateX(-0%); text-align:center;}
	.phaseii .tagline-container > div:nth-child(1){   margin-left:0em;transform: translateX(-15%)}
	.phaseii .tagline-container > div:nth-child(2){   margin-left:0em;transform: translateX(5%);}
	.phaseii .enter-button-container{  top:93%;    }
	
	.phaseii .page-container.sales-brochure .page-background-container .img-container{ background-position:50% center; transform-origin: center bottom; transform: scale(1.1); }
	.phaseii .page-container.sales-brochure .page-foreground-container .img-container{ transform: rotate(0deg) scale(1,1); background-position: 60% 100%; }
    .phaseii .disclaimer-container.sales-brochure{ background-image:url(../img/sales-brochure-disclaimer-two.jpg); }
	  
	
	.phaseii .page-container.sales-arrangement .page-background-container .img-container{ background-position:55% top; transform: scale(1.05); }
	.phaseii .page-container.sales-arrangement .page-foreground-container .img-container{ background-position:90% center; }
	.phaseii .disclaimer-container.sales-arrangement{ background-image:url(../img/sales-arrangement-disclaimer-two.jpg); }

	.phaseii .page-container.register-of-transactions .page-background-container .img-container{ background-position:50% bottom; }
	.phaseii .page-container.register-of-transactions .page-foreground-container .img-container{ background-position:top right;  }
    .phaseii .disclaimer-container.register-of-transactions{ background-image:url(../img/register-of-transactions-disclaimer-two.jpg); background-position: right center; }
	
	.phaseii .disclaimer-logo-container{margin-bottom: 1em; }
	
	/* PHASE II-B */
	
    .phaseiib .landing-bg-container{ background-image:url(../img/landing-mobile-three.jpg)}
	.phaseiib .landing-logo-container{left:5%; top:1.25em; transform:translateY(-50%);  width:90%; height:1.5em; opacity:0; display:none}
	.phaseiib .tagline-container{ left:auto; right:5%; top:50%; transform:translate(-0%, -0%); width:100% ;overflow: hidden}
	.phaseiib .tagline-container > div{ transform:translateX(-0%); text-align:right;}
	.phaseiib .tagline-container > div:nth-child(1){   margin-left:0em;transform: translateX(-30%)}
	.phaseiib .tagline-container > div:nth-child(2){   margin-left:0em;transform: translateX(0%);}
	.phaseiib .enter-button-container{  top:93%;    }
	.phaseiib .landing-container .landing-gradient{ display:none}
	.phaseiib .page-container.sales-brochure .page-background-container .img-container{ background-position:90% center; transform-origin: right bottom; }
	.phaseiib .page-container.sales-brochure .page-foreground-container .img-container{ transform: rotate(0deg) scale(1,1); background-position: 60% 100%; }
    .phaseiib .disclaimer-container.sales-brochure{ background-image:url(../img/sales-brochure-disclaimer-2B.jpg); }
	  
	
	.phaseiib .page-container.sales-arrangement .page-background-container .img-container{ background-position:55% top; transform: scale(1); }
	.phaseiib .page-container.sales-arrangement .page-foreground-container .img-container{ background-position:50% left; }
	.phaseiib .disclaimer-container.sales-arrangement{ background-image:url(../img/sales-arrangement-disclaimer-2B.jpg); }

	.phaseiib .page-container.register-of-transactions .page-background-container .img-container{ background-position:73% bottom; }
	.phaseiib .page-container.register-of-transactions .page-foreground-container .img-container{ background-position:top right;  }
    .phaseiib .disclaimer-container.register-of-transactions{ background-image:url(../img/register-of-transactions-disclaimer-2B.jpg); background-position: right center; }
	
	.phaseiib .disclaimer-logo-container{margin-bottom: 1em; }
	
	/* PHASE II-B */
	
	
	/*entrance*/
    .phaseii .entrance .landing-logo-container {width:90%;top:2%; background: none ; display:flex; }
	.phaseii .entrance .landing-logo-container > div:nth-child(1) {transform: translateX(0%)}
    .phaseii .entrance .landing-logo-container > div:nth-child(2) {}
	.phaseii .entrance .landing-logo-container > div{margin: 2em 0 0 2em}
	
	.phaseii .entrance .tagline-container{top:80%}
	/*entrance*/
	
	.phase-button-container.mobile-ele{margin-bottom: 1em; display:inline-block; margin-right:1em; padding: .5em}
	
}

@media (orientation: portrait) and (max-aspect-ratio: 1/2.3) {
  .page-container.aerial-photograph .page-background-container .img-container{ background-position:75% 50%; transform:scale(1.0);  }
}

@media (orientation: landscape) and (min-width:0px) and (max-width:1023px) {
	.page-container.deed-of-mutual-convenant .page-background-container .img-container{ background-position:50% 30%; }
	.page-container.tender-document .page-background-container .img-container{ background-position:40% 60%; transform:scale(1) translateY(0%); }
	.page-container.parking-space-document .page-background-container .img-container{ background-position:85% 50%;}
}

@media only screen and (min-width:1800px) {
    html,body{ font-size:17px; }
    .txt-max{ font-size:5.5em; }
}

@media only screen and (min-width:768px) and (max-width:1023px) {
	 html,body{ font-size:15px; }
	.pages-container{ min-height:100vw; }
}

@media only screen and (min-width:480px) and (max-width:767px) {
     html,body{ font-size:14px; }
	.txt-max{ font-size:4em; }
	.txt-menu{ font-size:1.8em; }
	
	.title-top-flip > div{  font-size:0.3em;   }
	
    .pages-container{ min-height:150vw; }
    .img-pill-container{width: 40%; min-width: 300px;}
}
@media only screen and (min-width:0px) and (max-width:600px) {
	
	.phaseii .tagline-container > div:nth-child(1){   margin-left:0em;transform: translateX(-18%)}
	.phaseii .tagline-container > div:nth-child(2){   margin-left:0em;transform: translateX(8%);}
	
}
@media only screen and (min-width:0px) and (max-width:479px) {
     html,body{ font-size:11px; }
    .txt-max{ font-size:4em; }
	.txt-menu{ font-size:1.6em; }
	
	.title-top-flip > div{  font-size:0.3em;   }
	
	.pages-container{ min-height:150vw; }
    .img-pill-container{width: 40%; min-width: 210px;}      
	
	
}

@media only screen and (min-width:0px) and (max-width:375px) {
	/*.side-content-container{ bottom:calc(50% + 5em);  }
	.side-body-container .scrollbar-inner{  height:10em;  }*/
}