@import url(/css/reset.css);
@import url(/css/text.css);
@import url("//hello.myfonts.net/count/3922ea");
/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */
html {
	height:100%
}
body {
	font: 14px/18px 'CeraPRO-Light', Arial, sans-serif;
	color: #212529;
	background: #fff url(/img/ui/bg.gif) repeat-x top center;
	height:100%;
	font-feature-settings: 'lnum' 1;
}

.holdingholder {
	display: flex;
}

.animatein {visibility: hidden;}
.mobileshow {display:none}

.resizeimg {max-width: 100%;height: auto;}

.pic {background:50% 50% no-repeat;background-size:cover;position:relative}
.icon {background:50% 50% no-repeat;background-size:contain}

b {font-family:'CeraPRO-Medium';font-weight:normal}

.lightgreybg {background-color:#F4F4F4}
.darkgreybg {background-color:#212529}
.brownbg {background-color:#A06F4E}

.darkgreytext {color:#212529}
.browntext {color:#A06F4E}
.whitetext {color:#fff}

h1 {font-weight:normal;font-size:4vw;line-height:1.1em;text-transform: uppercase;letter-spacing:0.05em;}
h2 {font-weight:normal;font-size:3.5vw;line-height:1.1em;text-transform: uppercase;letter-spacing:0.05em;}
h3 {font-weight:normal;font-size:28px;line-height:40px;text-transform: uppercase;letter-spacing:0.05em;}
h4 {font-weight:normal;font-size:20px;line-height:24px;text-transform: uppercase;letter-spacing:0.05em;}

.borderheading {border-bottom:1px solid #A06F4E;padding-bottom:10px;margin-bottom:40px}

.bigtext {font-size:20px;line-height:28px}

.goudy {font-family: ltc-goudy-oldstyle-pro,serif;
font-weight: 400;
font-style: normal;}

.pagebanner {width:100%;height:75vh;background:#F4F4F4;position:relative;box-sizing: border-box;padding:5vw 0 5vw 5vw;display:flex;align-items:flex-end}
.pagelogo {display:block;position:absolute;top:2.5vw;left:2.5vw;width:120px;height:100px;background:50% 50% no-repeat url(/img/content/logobrown.svg);background-size:contain}

.contentpadding {padding: 5vw 10vw}

.pagebanner .pic {width:60vw;height:100%;position:absolute;top:0;right:0}
.pagebanner .pic .caption {position:absolute;bottom:0;right:0;width:100%;background: rgb(33,37,41, 0.2);
background: linear-gradient(180deg, rgba(33,37,41,0) 0%, rgba(33,37,41,0.3) 100%);height:5vw;box-sizing: border-box;padding:5px 10px 10px 20vw;text-align:right;font-size:12px;line-height:1.2em;display:flex;align-items:flex-end;justify-content:flex-end}
.pagebanner h1 {border-bottom:none;position: relative;width:100%;margin:0;padding-bottom:0px}

/**** gallery ****/
.fullgallery {width:100%;height:95vh;position:relative}
.fullgallery .slide {width:100%;height:100%}
.cycle-arrow {width:40px;height:40px;background:50% 50% no-repeat #fff;background-size:10px auto;position:absolute;top:calc(50% - 20px);z-index:1000;cursor: pointer;}
.cycle-prev {background-image:url(/img/ui/leftarrow.svg);left:0}
.cycle-next {background-image:url(/img/ui/rightarrow.svg);right:0}
.cycle-caption {box-sizing: border-box;padding:5px 20px;min-height:40px;position:absolute;bottom:0;right:0;text-align:right;background:#fff;z-index:1000;display:flex;align-items:center;max-width:600px}

/**** nav ****/
.navbutton {display:block;position: fixed;width:60px;height:60px;padding:20px 15px;top:20px;right:20px;z-index:10000;cursor:pointer;background:#fff;box-sizing: border-box;}
.navbutton .navicon {position: relative;width:100%;height:100%}
.navbutton .navicon span {display:block;width:100%;height:2px;background:#A06F4E;position:absolute;transition:top 0.2s 0.2s, transform 0.2s, opacity 0.2s}
.navbutton .navicon span:nth-child(1) {top:0px}
.navbutton .navicon span:nth-child(2) {top:9px;transform-origin:50% 50%}
.navbutton .navicon span:nth-child(3) {top:18px;transform-origin:50% 50%}

.menuopen .navbutton .navicon span {transition:top 0.2s, transform 0.2s 0.2s, opacity 0s 0.2s}
.menuopen .navbutton .navicon span:nth-child(1) {top:9px;opacity:0}
.menuopen .navbutton .navicon span:nth-child(2) {top:9px;transform: rotate(-45deg);}
.menuopen .navbutton .navicon span:nth-child(3) {top:9px;transform: rotate(45deg);}
.navicon { width: 100%; height: 100%; position: relative;}


.navholder {position: fixed;z-index: 2500;height: 100vh;top: 0;right: 0;display: flex;align-items: center;overflow: hidden;transition: width 0.5s;width: 0vw;background:rgba(255,255,255,0.95)}
.navholder:before {content:'Menu';display:block;position:absolute;top:0;left:0;width:100%;height:100px;border-bottom:1px solid #A06F4E;box-sizing: border-box;display:flex;align-items:center;padding-left:5vw;}

.nav {list-style-type: none;margin: 0;padding: 100px 3vw 0 5vw;font-size: 28px;line-height: 1em;width: 50vw;box-sizing: border-box;}
.nav li { margin: 3vh 0;}
.nav a {text-decoration: none;color: #212529;cursor: pointer;display: inline-block;transition: opacity 1s, margin 1s;margin-left: 5vw;opacity: 0;}

.menuopen .navholder {width: 50vw;}
.menuopen .nav a {opacity: 1;margin-left: 0;}
.nav a:hover {text-decoration: underline;}

.s0 .nav .n0,
.s1 .nav .n1,
.s2 .nav .n2,
.s3 .nav .n3,
.s4 .nav .n4,
.s5 .nav .n5 {
  color: #A06F4E
}


.nav .n0 {
  transition-delay: 0s;
}
.nav .n1 {
  transition-delay: 0.05s;
}
.nav .n2 {
  transition-delay: 0.1s;
}
.nav .n3 {
  transition-delay: 0.15s;
}
.nav .n4 {
  transition-delay: 0.2s;
}
.nav .n5 {
  transition-delay: 0.25s;
}

/**** footer ****/
.footer {min-height:100vh;display: flex;flex-direction:column;padding:5vw;box-sizing: border-box;}
.footer a {color:#fff}
.footer .details {flex:1 1;}
.footer .detailsinner {display:flex;justify-content:space-between}
.misrep {width:80%;font-size:11px;line-height:13px;padding-top:5vw}

.agencies {display:flex;}
.agency {padding-right:5vw}
.agentlogo {display:block;width:120px;height:60px;margin-bottom:20px;background:left top no-repeat;background-size:contain}

.footerright {text-align: center;padding-right:5vw}
.footerlogo {width:15vw;max-width:220px;height:10vw;background:top center no-repeat url(/img/content/logobrown.svg);background-size:contain}
.footerdownload {margin:20px 0 0 0;padding:20px 0 0 0;border-top:1px solid #A06F4E}
.footerdownload a {text-decoration: none;}
.footerdownload a:hover {text-decoration: underline;}

/* #Page Styles
================================================== */

.homeintro {width:100%;height:100vh;position:relative;display:flex;align-items:center;justify-content: center;background:#212529}
.introbanner {background-image:url(/img/content/home/introbanner.jpg);width:100%;height:100%;position:absolute;top:0;left:0}
.homeintro .overlay {background:#212529;width:100%;height:100%;position:absolute;top:0;left:0;opacity:0.5}
.homelogo {flex:0 0 20vw;height:20vw;max-width:280px;background:50% 50% no-repeat url(/img/content/logowhite.svg);background-size:contain;position:relative}
.homeintro .downarrow {position: absolute;left:0;bottom:60px;height:20px;width:100%;background:url(/img/ui/downarrow.svg) 50% 50% no-repeat;background-size:contain}

.homecontent {height:100vh;display:flex;}
.homecontent img {height:100%;min-height:100vh}
.homecontent .text {padding:5vw;display:flex;align-items:center;justify-content:center}
.homecontent .textinner {max-width:750px}

/**** building ****/
.buildingcontent {padding:30px;box-sizing: border-box;}
.buildingcontent .pic {width:100%;height:100%}
.buildingrow {display: flex;}
/*.herorow {min-height:55vw}*/
.buildingbox {margin:10px;box-sizing:border-box}
.building1 {flex:0 0;flex-basis:calc(((100% + 30px) - 60vw) - 10px );box-sizing: border-box}
.buildingtext {display:flex;flex-direction:column}
.buildingtext .buildingbox.text {flex:1 1;display:flex;flex-direction:column;justify-content: center;padding:30px;box-sizing: border-box;}
.herorow .buildingbox.text {padding-top:10vw;padding-bottom:10vw}
.picrow {flex:0 0 15vw;display:flex;}
.picrow .buildingbox {flex:1 1}
.picrow .smallpic {flex:0 1 30%}
.detail {padding:7.5vw 30px}
.detail h2 {margin:0}
.building2 {flex:1 1}
.building2 .picrow {height:100%;display:flex}
.lastrow .building1 {height:35vw;margin:0 10px}
.lastrow .picrow {height:100%}
.lastrow .building1 .smallpic {display: flex;flex-direction:column;}
.lastrow .building2 {height:20vw}
.nomarginright {margin-right:0}

.spec {display:flex;flex-wrap: wrap;justify-content:center}
.specitem {flex:0 0 25%;box-sizing: border-box;text-align: center;padding:0 1.5vw;margin:0 0 40px 0}
.specitem .icon {width:10vw;height:10vw;max-width:160px;max-height:160px;margin:0 auto 10px auto;}

/**** location ****/
.aerial {padding:5vw;text-align:center}

.historysection {background: bottom center no-repeat url(/img/content/location/history.png) #F4F4F4;padding:5vw 10vw 40vw 10vw ;background-size:100% auto}
.historysection .text {max-width:650px}

.amenities {display:flex;min-height:100vh;overflow-anchor: none}
.amenities .maps {flex:0 0 50%;display:flex;align-items:center;justify-content: center;}
.amenities .maps img {max-height:90vh}

.amenities .text {padding:5vw;display:flex;flex-direction:column;justify-content: center;}
.maptabs {margin-bottom:20px}
.maptabs a {display:inline-block;font-size:20px;padding-bottom:6px;margin:0 30px 20px 0;cursor:pointer}
.maptabs a:hover {color: #A06F4E}
.maptabs a.active {color: #A06F4E;padding-bottom:5px;border-bottom:1px solid #A06F4E}

.amenitylists {position:relative;overflow-x: hidden;}
.amenitylist {display:flex;position:relative;transition: max-height 0s;max-height:0px;overflow:hidden}
.amenitylist.active {max-height:800px}

.amenitylist ul {margin:0;padding:0 20px 0 0;box-sizing: border-box;flex:0 0 50%;list-style-type: none;}
.amenitylist li {margin:0 0 5px 0;display:flex;align-items:center}
.amenitylist .listnum {flex: 0 0 20px;height:20px;display:flex;align-items:center;justify-content:center;/*font-family:'CeraPRO-Medium';*/border-radius:50%;color:#fff;font-size:12px;line-height:0.8em;margin-right:5px;font-family: ltc-goudy-oldstyle-pro,serif;
font-weight: 400;
font-style: normal;}
.dining .listnum {background-color:#5b292c}
.hotels .listnum {background-color:#747367}
.occupiers .listnum {background-color:#92724d}
.galleries .listnum {background-color:#a09f93}

.connections {display:flex;justify-content:space-between}
.connectioncol {flex:0 0 25%}
.connectionicons {display:flex;margin-bottom:10px;padding-top:10px}
.connectionicons .icon {flex:0 0 40px;height:40px;margin-right:20px}

.strollrow {display:flex;align-items:center;}
.strollrow .text {flex:0 0 50%;box-sizing: border-box;padding:10vw 5vw 10vw 0;}
.stroll1 {padding:5vw 0;flex:0 0 50%;box-sizing: border-box;display:flex;flex-direction:column;height:50vw}
.strollrow .pic {flex:1 1;margin-bottom:10px}
.stroll2 {padding:0vw 10vw 0 0vw;flex:0 0 50%;box-sizing: border-box;display:flex;flex-direction:column;height:40vw}
.stroll3 {padding:5vw 0vw 5vw 0vw;flex:0 0 50%;box-sizing: border-box;display:flex;flex-direction:column;height:40vw}

/**** availability ****/
.areas {display:flex;min-height:100vh}
.availabletable {flex:0 0 50%;box-sizing: border-box;padding:5vw;display:flex;justify-content:center;flex-direction:column}
.plans {flex:0 0 50%;position:relative}

.availabletable td {padding:8px;border-bottom:1px solid #D2D3D4}
.availabletable tr:last-child td {border-bottom:none}

.availabletable thead td {border-bottom:1px solid #A06F4E !important;}
.subtotal td {font-family:'CeraPRO-Medium'}
.availabletable tfoot td {border-top:1px solid #A06F4E;border-bottom:none;font-family:'CeraPRO-Medium'}

.available td.arrow {box-sizing: border-box;width:20px;background:50% 50% no-repeat url(/img/ui/floorarrow.svg);background-size:8px auto;}
tr.active td.arrow {background-image: url(/img/ui/floorarrowselect.svg);}
tr.let td.arrow {background:none}
tr.let {color:#a09f93}
tr.available:hover td:first-child {text-decoration: underline;cursor:pointer;}


tr.active {background:#F4F4F4}

.plans {position:relative}
.plan {position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;transition:opacity 0.5s;opacity:0}
.fourth.plan {justify-content: flex-end;}
.upper.plan {justify-content: flex-end;}
.plan.active {opacity:1}
.plans .north {position:absolute;bottom:20px;right:20px;text-align:right;font-size:11px;line-height:13px}
.plans .north div {width:100%;height:30px;background:bottom right no-repeat url(/img/content/availability/north.svg);background-size:contain;margin-bottom:10px}

.planname {position:absolute;top:40px;left:20px;font-size:12px;line-height:16px;z-index:1000}
.planname h4 {margin:0}

.planname .spaceplans {list-style-type: none;margin:0;padding:0;}
.planname .spaceplans li {margin:0;padding:5px 20px 5px 0;border-bottom:1px solid #A06F4E;background:right center no-repeat url(/img/ui/floorarrow.svg);background-size:8px auto;cursor: pointer;width:120px}
.planname .spaceplans li:hover {text-decoration: underline;}
.planname .spaceplans li.active {background-image: url(/img/ui/floorarrowselect.svg)}

.plankey {position:absolute;bottom:20px;left:20px;margin:0;padding:0;list-style: none;font-size:12px;line-height:16px}
.plankey li {margin:5px 0 0 0}
.plankey li:before {content:'';display:inline-block;width:20px;height:8px;background:#aaa;margin-right:5px}
.plankey li.office:before {background:#6b919d}
.plankey li.terrace:before {background:url(/img/content/availability/terracebg.gif);background-size:50% auto}
.plankey li.reception:before {background:#e2d2b6}
.plankey li.meeting:before {background:#c2a692}

.planimg {width:80%;height:calc(100% - 220px);background:50% 50% no-repeat;background-size:contain}

/**** retail ****/
.retailcontent {display:flex;min-height:100vh}
.retailcontent .pic {flex:0 0 50%}
.retailcontent .text {flex:0 0 50%;box-sizing: border-box;display:flex;flex-direction:column;justify-content: center;padding:5vw;}

/****************************************************
* Misc
****************************/
/*hide social stuff and headings on prettyphoto*/
.ppt {display:none !important}
.pp_social {display:none !important}
.pp_description {display:none !important}

.smallText { font-size: 11px; }
.smallprint {
	font-size: 11px;
	color: #BBBDC0;
}
.smallprint a { color: #BBBDC0; }
.padTop { margin-top: 30px; }
.largeText { font-size: 13px; }

.superscript {vertical-align: baseline;
	font-size: 0.8em;
	position: relative;
	top: -0.4em;}
.subscript {vertical-align: baseline;
	font-size: 0.8em;
	position: relative;
	top: 0.4em;}
	
.vmiddle {position: relative;top: 50%;  -webkit-transform: translateY(-50%);  -ms-transform: translateY(-50%);  transform: translateY(-50%);}

.caps {text-transform:uppercase;letter-spacing:0.1em}
.num {text-align:right}



/* #Media Queries
================================================== */
	@media (max-aspect-ratio: 16/9) {
		
	}
	/* biggest desktop */
	@media only screen and (max-width: 1230px) {}
	
	/* bigger desktop */
	@media only screen and (min-width: 1100px) and (max-width: 1229px) {}

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (min-width: 959px) and (max-width:1099px) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		.pagebanner {align-items: flex-start;padding-top:200px;height:calc(50vh + 300px)}
		.pagebanner .pic {position:absolute;top:auto;bottom:0;width:100%;height:50vh}
		
		/**** nav ****/
		.navbutton {top:0;right:0}
		.navholder:before {height:61px}
		
		/**** home ****/
		.homelogo {flex:0 0 40vw;height:40vw}
		.homecontent {flex-direction:column-reverse;height:auto}
		.homecontent .text {height:auto}
		.homecontent img {width:100%;height:auto;min-height:auto}
		
		/**** building ****/
		.herorow {flex-direction:column}
		.herorow .building1 {flex:0 0 75vh}
		.picrow {flex:0 0 25vw}
		.specitem {flex:0 0 33%}
		
		/**** location ****/
		.amenities {flex-direction:column}
		.amenities .maps {flex:0 0 100vw}
}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		h1 {font-size:36px;line-height:1.2em}
		h2 {font-size:30px;line-height:1.2em}
		
		.pagebanner {padding-top:160px}
		.pagebanner .pic .caption {min-height:40px;height:auto}
		
		.mobilehide {display:none}
		.mobileshow {display:inline}
		
		/**** nav ****/
		.menuopen .navholder {width:100vw}
		
		.pagelogo {width:80px;height:80px;top:20px;left:20px}
	
		/**** footer ****/
		.footer .detailsinner {flex-direction:column-reverse}
		.footerright {padding:0 0 10vw 0}
		.footerlogo {width:40vw;height:40vw;margin-left:auto;margin-right:auto}
		.agencies {flex-direction:column}
		.misrep {width:100%}
		
		/**** building ****/
		.buildingtext .buildingbox.text {padding-left:0;padding-right:0}
		.buildingbox {margin:5px}
		.buildingcontent .buildingrow:nth-child(2) {flex-direction:column}
		.buildingcontent .buildingrow:nth-child(2) .building2 {flex:0 0 30vh}
		.buildingcontent .buildingrow:nth-child(2) .picrow .smallpic {flex:0 0 50%}
		.lastrow .building1 {margin:0}
		
		.specitem {flex:0 0 50%}
		.specitem .icon {width:100px;height:100px}
		
		.fullgallery {height:80vw}
		.cycle-caption {font-size:11px;line-height:13px}
		
		/**** location ****/
		.historysection {padding-top:40px}
		.connections {flex-direction:column}
		.connectioncol {margin-bottom:40px}
		.strollrow {flex-direction:column}
		.stroll1, .stroll2, .stroll3 {flex:0 0 80vw;width:100%}
		
		/**** availability ****/
		.areas {flex-direction: column;min-height:auto;height:auto}
		.availabletable {padding:10vw 5vw}
		.plans {flex:0 0 80vh}
		
		/**** retail ****/
		.retailcontent {flex-direction:column-reverse}
		.retailcontent .pic {flex:0 0 80vw}
		
}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		
}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/

@font-face {font-family: 'CeraPRO-Light';src: url('/webfonts/3922EA_0_0.eot');src: url('/webfonts/3922EA_0_0.eot?#iefix') format('embedded-opentype'),url('/webfonts/3922EA_0_0.woff2') format('woff2'),url('/webfonts/3922EA_0_0.woff') format('woff'),url('/webfonts/3922EA_0_0.ttf') format('truetype');}
 
  
@font-face {font-family: 'CeraPRO-Medium';src: url('/webfonts/3922EA_1_0.eot');src: url('/webfonts/3922EA_1_0.eot?#iefix') format('embedded-opentype'),url('/webfonts/3922EA_1_0.woff2') format('woff2'),url('/webfonts/3922EA_1_0.woff') format('woff'),url('/webfonts/3922EA_1_0.ttf') format('truetype');}