@font-face {
  font-family: "Century Gothic";
  src: url("../fonts/GOTHIC.TTF") format("truetype");
}

@font-face {
  font-family: "Century Gothic";
  src: url("../fonts/GOTHICB.TTF") format("truetype");
  font-weight: bold;
}



html,body {margin:0; height:0;}
html, body {height:100%; font-family:"Century Gothic", "Lucida Grande", "Lucida Sans", Verdana, Arial, SimHei, sans-serif; text-transform:uppercase;}
body {position:relative;}
ul {list-style:none; margin:0; padding:0;}
#wrapper {width:100%;bottom:0; height:100%;position:absolute}
#wrapper a {color:#000; text-decoration:none;}
#wrapper a:hover {font-weight:bold;}

#ajax-loader {position:absolute; width:100%; height:100%; background:url("../images/ajax-loader.gif") no-repeat 50% 50% #ebebeb; z-index:4; }
#ajax-loader2 {position:absolute; width:100%; height:100%; background:url("../images/ajax-loader.gif") no-repeat 50% 50%; z-index:1;display:none;}

#splash{height:100%; position:relative; z-index:3;}
#splash .splash-image{background:url("../images/splash-o-big.png") 50% 46.3% no-repeat; position:absolute;top:0;bottom:160px;width:100%; }
#splash .content { height:223px; position:absolute; width:100%; height:100%; z-index:1;display:none;}
#splash .content ul {height:30px;text-align:center; position:absolute; bottom:118px; left:50%; margin-left:-50%; letter-spacing:2px; width:100%; display:block; font-size:18px; color:#3e3e3e;}
#splash ul li{display:inline-block; *display:inline; zoom:1; margin: 0 27px 0 27px;}
#splash ul li.last {margin-right:0;}
#splash .filler {width:100%;background:#ebebeb;position:absolute;bottom:0;height:160px;}

.text h1 {-webkit-text-stroke:1px transparent;}

#main {width:100%; position:absolute; bottom:160px;top:0;}
#main #title {display:none;}
#main-content {width:100%;height:100%;}
#overlay { height:100%;width:100%;position:absolute;background:url("../images/splash-o-big-transparent.png") no-repeat 50% 46.3%;}

#slideshow-overlay {height:55px; position:absolute; bottom:0; width:100%; z-index:2; background:url("../images/spacer.gif");}
.copyrighttext-holder, #slidecaption-holder {display:none; position:absolute;bottom:35px;z-index:1;}
.copyrighttext-holder {display: block; bottom:10px; left:40px; }
#slidecaption-holder {display: block; right:40px; bottom:21px; transition: opacity 2000ms ease-in-out;}
#slidecaption-holder.hidden {opacity: 0;}

#slidecaption, #wrapper .copyright a {font-size:12px; color:#FFF;}
#wrapper .copyright a {font-size: 9px;}
.inner-footer .copyright {display: none}
.inner-footer .copyright a{position:absolute;bottom:15px;left:40px;}
#dark-overlay {position:absolute;height:100%;width:100%;background:url("../images/dark-overlay.png");display:none;}
#white-overlay {position:absolute;height:100%;width:100%;background:#ebebeb;display:none;}
#contact-text {position:absolute;bottom:10px;width:100%;display:none;}
#contact-text span {width:965px; margin:0 auto;display:block;color:#FFF;text-align:right;line-height:24px;}
#contact-text span strong {float:left;}
#contact-text span strong a{font-weight:normal;font-size:24px;color:#FFF;}
#contact-text span strong a:hover{font-weight:normal;color:#CCC;}
#project-gallery {position:absolute;width:100%;height:100%;background:#000;z-index:2;display:none;}
#project-gallery .image-holder {position:absolute;width:100%;bottom:0;top:0;text-align:center;}
#project-gallery .image-holder img { object-fit: contain; width: 100%; height: 100%; }
#project-gallery .inner-footer {position:absolute;bottom:0;width:100%;text-align:center;height:30px;padding:10px 0;background:url("../images/dark-overlay.png");}
#project-gallery .inner-footer a.less {float:right;width:27px;height:27px;background:url("../images/ico-less3.png") no-repeat 0 0;text-indent:-9999px; margin-right:20px;}
#project-gallery ul li a {font-weight:bold;}
#project-gallery ul li.active a {font-size:12px;color:#fff;}
#project-gallery .image-holder img { transition: opacity 500ms ease-in-out; }

#project-gallery ul {overflow:hidden;display:inline-block;*display:inline;zoom:1; margin-top:-4px;}
#project-gallery ul li {float:left;}

#project-holder, #project-list-holder, #text-holder-normal, #text-holder-principals, #contact-holder, #copyright-holder {width:970px;margin:0 auto;padding-top:30px;display:none;}
#project-list-holder {display:none;}
#project-list-holder td.name a{line-height:23px;}
.two-col .left-col, .two-col .right-col {display:inline-block;*display:inline;zoom:1;vertical-align:top; width:470px;}
.two-col .right-col { position: relative; }
#project-holder .info {margin-bottom:25px; font-size:18px;}
#project-holder .info span {display:block; color:#3e3e3e;line-height:1.2em;}
#project-holder .info .location,#main #project-holder .info .size, #main #project-holder .info .range,
#project-holder .info .location span,#main #project-holder .info .size span, #main #project-holder .info .range span {color:#939393;}
#project-holder h2, #text-holder-principals h1.heading {font-size:24px;font-weight:normal;margin-bottom:15px; color:#fff;}
#project-holder .text-box h2 {color:#434343;} 
#main .two-col .left-col {margin-right:18px;padding-left:5px; height: 100%;}
#main .two-col .description, #text-holder-normal .subhead{text-transform:none;font-size:14px;color:#434343; }
#text-holder-normal .subhead {color:#FFF;}
#main .two-col .description p {margin-bottom:10px;}
#main .two-col .description p:last-child {margin-bottom: 30px;}
#main .content {height:500px; max-height: calc(100% - 30px);}
#content-item, #content-sneak {width:100%;height:100%;display:none;position:absolute;}
#content-item {background:#ebebeb;}

#project-holder .left-col {position: relative;}
#project-holder .left-col .description { height:221px;overflow:hidden;}
#project-holder.expanded .left-col .description { height: auto !important; }


#project-holder .left-col .viewport {overflow:hidden; height:354px;position:relative; margin-bottom:13px;}
#project-holder .left-col .viewport .overview {position:absolute;left:0;top:0;}
#project-holder .left-col .text-fade {width:470px;height:35px;background:url("../images/text-fade.png") no-repeat 0 0;position:absolute;bottom:0;}
#project-holder .left-col a.more {width:39px;height:38px;display:block;background:url("../images/ico-more.gif") no-repeat 0 0;text-indent:-9999px; position: absolute; left: 20px; bottom: 20px;}
#project-holder .left-col a.less {width:39px;height:38px;display:none;background:url("../images/ico-less.gif") no-repeat 0 0;text-indent:-9999px; position: absolute; left: 20px; bottom: 20px;}
#project-holder .right-col { height: 100%; background:url("../images/ajax-loader-big.gif") no-repeat center;}
#project-holder .right-col ul li {float:left;margin-right:2px;}
#project-holder .right-col ul li a, #project-gallery ul li a{display:inline-block;*display:inline;zoom:1;font-size:10px;color:#898989;padding:4px;}
#project-holder .right-col ul li a:hover, #main #project-holder .right-col ul li.active a {color:#000; font-weight:bold;}
#project-holder .right-col .image-holder {width:470px;height:470px;position:relative;overflow:hidden; position: absolute;}
#project-holder .right-col .image-holder img { object-fit: cover; width: 100%; }
#project-holder .right-col a.more {width:39px;height:38px;display:block;background:url("../images/ico-more2.png") no-repeat 0 0;text-indent:-9999px;position:absolute;bottom:20px;right: 20px; }
#project-holder .right-col .image-loader {width:470px;height:470px;background:url("../images/ajax-loader.gif") no-repeat 50% 50% #ebebeb; position:absolute;z-index:2;}

#project-holder .contianer-image {position: absolute;top: 0;left: 50%;transform: translateX(-50%);}
#project-holder .contianer-image .image-holder img{margin-left:0 !important;width: 100vw;height: 100vh;object-fit: cover;}
#project-holder	.text-box {max-width: 500px;background: #ffffff !important;opacity: 0.8;padding: 20px;margin-top: -40px;margin-left: 25px;}
#project-holder .more-images a.more {width: 39px;height: 38px;display: block;background: url(../images/ico-more.gif) no-repeat 0 0;text-indent: -9999px;position: absolute;bottom: 20px;right: 20px;}
@media (max-width: 768px) {#project-holder .text-box {position: absolute;top: 0;left: 20%;width: 50%;margin-top: 0;}}

.text-holder h1.heading, .text-holder h1.heading2 {font-weight:normal;font-size:28px;color:#FFF;line-height:1.1em;margin-bottom:10px;}
#content-sneak .text-holder h1.heading a, #content-sneak .text-holder h1.heading a:hover {color:#FFF;}
#content-sneak .left-col {width:500px;}
#content-sneak .left-col.wide .text {width:500px;margin:0}
#content-sneak .left-col.wide .text .description a {color:#FFF; /*text-shadow:2px 2px 2px #000;*/}
#content-sneak .description {color:#FFF;}
.text-holder .left-col .viewport {height:442px;overflow:hidden;position:relative;} /* if height is adjusted, adjust height of: #project-list-holder .viewport AND #project-list-holder .viewport */
.text-holder .left-col .viewport .overview, #project-list-holder .viewport .overview {position:absolute;top:0;left:0;}
.text-holder .left-col a.more {width:39px;height:38px;background:url("../images/ico-more2.png") no-repeat 0 0;text-indent:-9999px;}
.text-holder .left-col a.less {width:39px;height:38px;background:url("../images/ico-less2.png") no-repeat 0 0;text-indent:-9999px;margin-top:10px;}
#main .text-holder .description {color:#FFF;}
#main .text-holder .description ul { list-style:  outside; padding-left: 1em; margin-top: .5em}
#main .text-holder .description li { margin-bottom: .5em}
#main .text-holder .description li { margin-bottom: .5em}

#text-holder-principals .new-text .description {display:block;}
#text-holder-normal .left-col.special .viewport {height:425px;} /* this height must be 17px less than standard viewport. For career descriptions to buffer against Milestone Design Studio contact info */


#text-holder-principals .new-text .accreditations {margin:15px 0;}
#text-holder-principals .new-text .accreditations li {color:#fff;}
#text-holder-principals .new-text .description {text-transform:none;font-size:14px;color:#434343; text-align:justify; }
#main .expand .description, #main .expand .hidden {display:none;}
#main .wide .expand .description, #main .expand .description.visible{display:block;}
#main #content-sneak .wide .text a:hover {font-weight:normal;color:#CCC;}
#text-holder-normal .expand a.more, #text-holder-normal .left-col a.less, #copyright-holder a.more, #copyright-holder a.less {display:block;}

#project-list-holder .header span {font-size:18px;color:#959595;cursor:pointer;display:table-cell;padding:0 15px 25px 0;}
#project-list-holder .header span:hover { font-weight: bold; color: #000;}
#project-list-holder .viewport {height:394px;overflow:hidden;position:relative;} /* this height must be 17px less than standard viewport.  */
#project-list {border-collapse:collapse;}

#project-list thead {display:none;}
#project-list td {text-transform:none;color:#363636;font-size:12px; padding:0 15px 25px 0;vertical-align:bottom;}
#project-list-holder .name {font-size:18px;text-transform:uppercase;width:210px;color:#666;}
#project-list .name .type {display:block;font-size:12px;text-transform:none;color:#363636;}
#project-list-holder .category{width:200px;}
#project-list-holder .location{width:165px;}
#project-list-holder .scope{width:240px;}
#project-list-holder .range{width:60px;}

#text-holder-normal .left-col.wide h1 {margin:0 0 15px;}
#text-holder-normal .left-col.wide ul{margin-bottom:30px;}
#text-holder-normal .left-col.wide li {margin:0 0 15px;}
#text-holder-normal .left-col.wide li h1 {margin:0 0 5px;}

#copyright-holder h1, #copyright-holder .new-text .description {color:#434343;}
#copyright-holder h1 {margin-bottom:10px; font-weight:normal;}
#copyright-holder .description {margin-top:40px;}
#copyright-holder .left-col {width:500px;}
#copyright-holder h2 {font-weight:normal;}
#copyright-holder a.more {background:url("../images/ico-more.gif") no-repeat 0 0;}
#copyright-holder a.less {background:url("../images/ico-less.gif") no-repeat 0 0;}

#footer-container {position:absolute; bottom:0;z-index:1; font-size:11px; height:130px;padding:15px 0; width:100%; background:url("../images/footer-bg.png") no-repeat 50% 0;}
#footer-container a{line-height:14px;}
#footer-bg {background:url("../images/footer-bg-solid.png") no-repeat 50% 0;position:absolute;top:0;width:100%;height:100%;display:none;}
#footer {width:965px;padding-left:5px; height:130px;margin:0 auto; overflow:hidden;position:relative;z-index:1;}
#footer .navigation {float:left; width:810px; height: 100%; position:relative;}
#footer .navigation ul li {padding-bottom:5px; width:51px;line-height:14px;}
#footer .navigation ul li a.active, .sidebox a.active{font-weight:bold;}
#footer .navigation .nav-col{position:absolute; height: 100%; padding-left: 11px;}
#footer .navigation .nav-col ul{position:absolute;top:0;}
#footer .navigation .nav1 {width: 70px;}
#footer .navigation .nav2 {left:124px; width:160px;}
#footer .navigation .nav2 li {width:150px;}
#footer .navigation .nav2 .careers li {width:160px;}
#footer .navigation .nav3 {left:300px;width:170px;}
#footer .navigation .nav3 li {width:170px;}
#footer .navigation .nav4 {left:474px; width: 150px; }
#footer .navigation .nav4 ul {position: static;}
#footer .navigation .nav4 li {width:150px;}
#footer .navigation .nav5 {left:644px;width:150px;}
#footer .navigation .nav5 li {width:150px;}

#footer .sidebox {position: absolute; right: 0;}
#footer .sidebox h1.logo {margin-bottom:20px; width:172px;}
#footer .sidebox h1.logo a { display:block; height:41px; text-indent:-9999px;}
#footer .sidebox ul {text-align:center;}
#footer .sidebox ul li {display:inline-block; *display:inline; zoom:1; vertical-align:top; padding:0 5px; line-height:11px; }
#footer .sidebox ul li.last {border-left:1px solid black;}
#footer-container a.fullscreen {width:14px;height:13px;display:block;position:absolute;background:url('../images/ico-fullscreen.png') no-repeat;text-indent:-9999px; right:20px;bottom:18px;}

.sidebox-links {text-align: right; padding-right: 15px; padding-top: 20px}
#social-links {margin-bottom: 10px;}
#social-links .social-links__link {width:25px; height:25px; border-radius: 3px; overflow: hidden; display: inline-block;}
#social-links .social-links__link img {display: block; max-width: 100%}

#supersized-loader {display:none;}

/* scrollbar */
.nav-scrollbar { width: 220px; position:absolute;top:0;clear:both;left:-11px;}
.nav-scrollbar .viewport { width: 200px; height: 114px; position: relative; margin-left:11px;overflow:hidden;}
.nav-scrollbar .overview { list-style: none; position: absolute; left: 0; top: 0; }
.nav-scrollbar .scrollbar {margin-left:-5px;}
.scrollbar .thumb .end, .scrollbar .thumb { background: url("../images/scrollbar-thumb.gif") no-repeat 50% 100%}
.scrollbar { position: relative; float: left; width: 6px; background:none;}
.scrollbar .track { height: 100%; width:6px; position: relative; padding: 0 1px; background:none;}
.scrollbar .thumb { height: 20px; width:3px; cursor:pointer; overflow:hidden; position:absolute; top:0; padding:0 4px; }
.scrollbar .thumb .end { overflow: hidden; height: 5px; width: 3px; background-position:top center; }
.scrollbar.disable{ display: none; }
.text .scrollbar {margin-left:-20px;}
.text-holder .scrollbar .thumb .end, .text-holder .scrollbar .thumb {background: url("../images/scrollbar2-thumb.png") no-repeat 50% 100%;overflow:visible;}
.text-holder .scrollbar .thumb {margin-top:5px; padding:0 3px;}
.text-holder .scrollbar .thumb .end {background-position:center top;position:absolute;top:-5px;}
.text-holder .scrollbar { background:none;}
.text-holder .scrollbar .track { background:none; overflow:hidden;}

#main-content .last {margin-bottom:0 !important;}

/* contact */
#main #contact-holder {color:#666;width:1280px;height:100%;position:relative;z-index:2;padding-top:0;}
#contact-holder .text-holder {width:970px;margin:0 auto;position:relative;z-index:1;padding-top:30px; max-height: 100%; overflow-y: auto;}
#contact-holder h1 {font-weight:normal;}
#contact-holder .information {font-size:18px;margin-top:40px;}
#contact-holder .information + .information {margin-top: 27px;}
#contact-holder .information .o-text {background:url("../images/o-text.gif") 0 60% no-repeat;display:inline-block;text-indent:-9999px;width:19px;}
#contact-holder .telephone {display:block}
#contact-holder .information2 {margin-top:27px;}
#contact-holder .social {overflow:hidden; margin-bottom:15px;}
#contact-holder .social a {float:left;width:26px;height:26px;background:url("../images/ico-social.gif") no-repeat; text-indent:-9999px; margin-right:5px;}
#contact-holder .social a.architizer {background-position:0 -26px;}
#contact-holder .social a.linkedin {background-position:0 -52px;}
#contact-holder .email {clear:both; position:relative;bottom:0;margin-bottom:80px;}
#contact-holder .email a {color:#666; font-size:18px; line-height:24px;}
#contact-holder .email a:hover {font-weight:normal;}
#contact-holder a.copyright {color:#666; font-size:14px;}
#contact-holder .image-holder {position:absolute;top:0;height:100%;width:1280px;text-align:center; }
#contact-holder a.wow-location {background:url("../images/ico-o.gif") no-repeat; width:30px;height:28px;display:block;text-indent:-9999px; position:absolute;z-index:1; transition: opacity 500ms ease-in-out;}
#contact-holder a.wow-location.world-map--singapore {top:288px;right:355px;}
#contact-holder a.wow-location.world-map--uk {top:110px;left:584px;right: auto;cursor: default}
#contact-holder a.wow-location.local-map {top:144px;right:417px;opacity: 0}
#contact-holder a.wow-location.is-hidden {opacity: 0; visibility: hidden;transition: opacity 500ms ease-in-out, visibility 0ms 500ms;}
#contact-holder .world-map {width:1075px;height:582px;}
#contact-holder .local-map {display:none;width:1075px;height:582px;}
.map-wrap { width: 1075px; margin: 0 auto;}
.map-wrap img { display: block; margin: 0 auto; position: relative; z-index: -1; }
img.world-map { top: -75px; }
img.local-map { top: -38px; }

/* language selector */
#footer .sidebox .languages a {display: inline-block; }
.language-selector {border-left: 1px solid #000; padding: 0 0.5em;}
.language-selector:first-child {border-left: none;}
.language-selector-english {font-weight: bold}

.language-chinese .language-selector-chinese {font-weight: bold}
.language-chinese .language-selector-english {font-weight: normal}

.language-english .display-chinese {display: none;}
.language-chinese .display-english {display: none;}

.language-english #project-holder .display-chinese {display: none;}
.language-chinese #project-holder .display-english {display: none;}

a:hover .display-chinese, a.display-chinese:hover { text-shadow: 0px 0px 0px black; }

/* project sub-images */
.imageset-switcher {
  position: absolute;
  bottom: 0;
  padding: 0 0 20px 20px;
}

#project-holder ul.imageset-switcher li {
  border-right: 1px solid #fff;
  line-height: 6px;
}

#project-holder ul.imageset-switcher li:last-child {
  border-right: none;
}

#project-holder ul.imageset-switcher li a {
  color: #fff;
}

#project-holder ul.imageset-switcher li a:hover,
#project-holder ul.imageset-switcher li.selected a {
  font-weight: bold;
  color: #fff;
}
.imageset-holder {width: 100%; height: 100%; position: absolute;}

#project-holder ul.imageset-switcher.opened li {
  display: none;
}

/* perfect scrollbar */ 
.ps>.ps__scrollbar-y-rail {
  opacity: 1;
  left: 0px;
  width: 7px;
}

.ps:hover.ps--in-scrolling.ps--y>.ps__scrollbar-y-rail>.ps__scrollbar-y,
.ps>.ps__scrollbar-y-rail>.ps__scrollbar-y,
.ps>.ps__scrollbar-y-rail:hover>.ps__scrollbar-y, .ps>.ps__scrollbar-y-rail:active>.ps__scrollbar-y {
  width: 3px;
  cursor: ns-resize;
  transition: none !important;
}

.ps.ps--in-scrolling.ps--y>.ps__scrollbar-y-rail,
.ps.ps--in-scrolling.ps--y:hover>.ps__scrollbar-y-rail,
.ps:hover>.ps__scrollbar-y-rail:hover {
  background-color: transparent;
}

.ps.ps--in-scrolling.ps--y>.ps__scrollbar-y-rail:active>.ps__scrollbar-y,
.ps:hover.ps--in-scrolling.ps--y>.ps__scrollbar-y-rail:active>.ps__scrollbar-y {
  width:3px;
}

.project-list-text {
  position: relative;
  height: calc(100vh - 300px);
  padding-left: 15px;
}

/* new text */
.new-text {
  height: 100%;
}

.new-text .overview {
  max-height: calc(100% - 48px);
  position: relative;
  margin-left: -15px;
  padding-left: 15px;
  overflow: hidden;
}
#main #project-holder { height: 470px; }
#project-holder .new-text {
  position: relative;
  padding-left: 15px;
  margin-left: -15px;
  margin-bottom: 15px;
}
#project-holder .new-text .overview {
  height: 100%;
  max-height: 100%;
}

#project-holder.expanded .new-text .overview {
  height: auto;
  max-height: none;
}


#slidecaption-2 {
  font-size: 12px;
  color: #FFF;
  display: none;
}

#slidecaption-holder-2 {
  position: absolute;
  top: -40px;
  right: 40px;
}
#slidecaption-holder-2.hidden {
  display: none;
}

/* People gallery styles */
.people-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  overflow-y: scroll;
  max-height: 800px;
}

.people-gallery-item {
  margin: 5px;
  border: 1px solid #ccc;
  width: 280px;
}

.people-gallery-item:hover {
  border: 1px solid #777;
}

.people-gallery-item img {
  width: 100%;
  height: auto;
}

.people-gallery-item div.desc {
  padding: 15px;
  text-align: center;
}