@import url(/css/reset.css);
@import url(/css/text.css);
/*
* 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: 1.125rem/1.5rem "aktiv-grotesk", Arial, sans-serif;
	color: #30180E;
	background: #fff url(/img/ui/bg.gif) repeat-x top center;
	height:100%;
}

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

.mobile {display:none}
.force-unstick {
    position: static !important;
}

h1 {font-weight:normal;font-size:3.125rem;line-height:1.1em;margin-bottom:3rem}
h2 {font-weight: normal;font-size:1.25rem;margin-bottom:2rem}
h3 {font-weight: normal;font-size:1rem;margin-bottom:2rem}
b {font-family: "aktiv-grotesk", sans-serif;
font-weight: 500;
font-style: normal;}
.lightfont {font-family: "aktiv-grotesk", sans-serif;
font-weight: 300;
font-style: normal;}
.victor {font-family: 'Victor', serif}

.pic {background: 50% 50% no-repeat;background-size: cover;position:relative;}
.bigpic {width:100%;height:90vh;}
.icon {background: 50% 50% no-repeat;background-size: contain;position:relative;}

.wholepage {position:relative}
.stickysection {position:sticky;top:80px;left:0}
.paddingsection {padding:6vw 4vw 4vw 4vw}
.picsection {position: relative;z-index:600;}
.notsticky {position: relative;z-index:500;top:0}
.midheading {text-align: center;margin-bottom:5rem}
.midheading p {max-width:50ch;margin-left:auto;margin-right:auto}

/**** navigation ****/

.navholder {position:fixed;top:0;left:0;width:100%;z-index:5000;height:80px;}
.nav {position:relative;width:100%;height:80px;display:flex;align-items:center;justify-content: center;font-size:12px;}
.nav ul {list-style-type: none;display: flex;align-items: center;justify-content: center;position:relative;z-index:20;margin:0;padding:0}
.nav li {padding:0;margin:0 2vw}
.nav li a {text-decoration: none;color:#30180E;display:inline-block;position:relative}
.nav li a:before {content:'';display:block;position:absolute;bottom:0px;left:0;width:100%;height:1px;background:#30180E;transform:scaleX(0);transform-origin:0% 0%;transition:transform 0.5s}
.nav li a:hover:before {transform:scaleX(1)}
.navbg {position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;opacity:0;transition:opacity 0.5s;z-index:0}
.navbg:before, .footer:before {content:'';display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:50% 50% no-repeat url(/img/content/intro/introbg.jpg);background-size:cover;z-index:1;opacity:0.25}
.navbg:after, .footer:after {content:'';display:block;position:absolute;top:0;left:0;width:100%;height:100%;background: rgba(217, 217, 217, 0.25);z-index:0}
.scrolled .navbg {opacity:1}

.lightbrowntext {color:#94703B}
.goldtext {color:#94703B}

.whitebg {background:#fff}
.goldbg {background:#CCBA94}
.texturebg {background:#fff url(/img/content/location/bg.svg) 50% 50% no-repeat;background-size: cover;}


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

/**** intro ****/
.stickysection.siteintro {height:100vh;top:0}
.intro {position:relative;width:100%;height:100vh;display:flex;align-items:center;justify-content: center;text-align:center;background: rgba(217, 217, 217, 0.25);}
.intro svg {position:relative;z-index:10;width:clamp(220px,14vw,600px)}
.intro .st0 {fill: #94713b;}
.introbg {position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;background: 50% 50% no-repeat url(/img/content/intro/introbg.jpg);background-size: cover;opacity:0.25}

/**** introduction ****/
.introduction {min-height:calc(100vh - 80px);display:flex;align-items:stretch;justify-content: center;}
.introduction .text {flex:0 0 50%;box-sizing: border-box;padding:4vw;display:flex;flex-direction:column;justify-content: flex-start;align-items: flex-start;}
.introduction p {max-width:50ch;margin:0}
.introduction .pic {flex:0 0 50%;background-image:url(/img/content/intro/ext.jpg);background-position:50% 75%}

.textpic {display:flex;justify-content: space-between;align-items: center;text-align: right;padding:4vw 0 0 0}
.textpic.reverse {flex-direction: row-reverse;text-align: left;}
.textpic .pic1 {flex:0 0 40vw;height:30vw}
.textpic .pic2 {flex:0 0 55vw;height:35vw;margin-bottom:4vw}
.textpic p {max-width:40ch}

/**** availability ****/
.availabletable {display:flex;margin-bottom:3rem;justify-content: space-between;}
.availabletable table {flex:0 0 50vw;margin:0}
.availabletable td {border-bottom:1px solid #30180E;padding:0.5rem 0}
.availabletable tr td:last-child {padding-right:4rem}
.availabletable tfoot td {border:none}
.key {padding:0.5rem 0;list-style-type: none;}
.key li {position:relative;padding:0.25rem 0  0.25rem 2rem}
.key li:before {content:'';display:block;position:absolute;top:0.5rem;left:0;width:1rem;height:1rem;background: #30180E;border-radius:50%}
.key li.core:before {background:#EAE9E8}
.key li.officespace:before {background:#CCBA94}
.key li.terrace:before {background:#DCE2D3}

.floorholder {border-bottom:1px solid #30180E;border-top:1px solid #30180E;padding:3vw 0 5vw 0;position:relative}
.floorholder img {width:90vw}

.floorpager tr {cursor: pointer;transition:background 0.2s}
.floorpager tr:hover {background:rgba(204, 186, 148, 0.2)}

.namepager {position:absolute;top:3vw;left:0;z-index: 500;}
.namepager div {transition:opacity 0.2s;opacity:0.1}
.namepager div:hover {cursor: pointer ;text-decoration: underline;}
.namepager div.cycle-pager-active {opacity:1}

.dotspager {position:absolute;bottom:3vw;left:0;z-index: 500;display:flex;width:100%;justify-content: center;}
.dotspager div {margin:0.25rem;box-sizing: border-box;border:1px solid #30180E;flex:0 0 12px;height:12px;border-radius:50%;transition:background 0.2s;cursor: pointer;}
.dotspager div.cycle-pager-active {background:#30180E}

.speclist {display:flex;flex-wrap: wrap;}
.specitem {border-top: 1px solid #30180E;padding:0.5rem 1rem 2rem 0;flex:0 0;flex-basis:calc((100% / 3) - 0.5rem);box-sizing: border-box;margin-right: 0.5rem;}

.specification .textpic p {max-width:30ch}

/**** location ****/
.occupiers {border-bottom:1px solid #30180E;border-top:1px solid #30180E;display:flex;flex-wrap: wrap;padding:2rem 0}
.occupier {flex:0 0;flex-basis:calc(25% - 2rem);background:50% 50% no-repeat;background-size:contain;height:4.5vw;margin:2rem 1rem}

.picrow {display:flex;justify-content: space-between;align-items: center;margin:4vw 0}
.picrow .pic1 {flex:0 0 45vw;height:30vw}
.picrow .pic2 {flex:0 0 30vw;height:20vw}

.traveltimes {display: flex;border-bottom:1px solid #30180E;padding-bottom:6vw;align-items:center}
.traveltimes .text {flex:0 0 52vw;}
.traveltimes p.travelintro {max-width:45ch;margin-bottom:3rem}
.travelinfo {display:flex;box-sizing: border-box;font-size:1rem}
.travelcol {padding-right:6rem}
.traveltimes .pic3 {flex:0 0 25vw;height:30vw}

.layout {
display:flex;
padding:4rem 0;
}
.map-container {
position: relative;
flex:0 0 60vw;
}
.map {
top: 0;
left: 0;
width: 100%;
height: 60vw;
transition: opacity 0.6s ease;
background:50% 50% no-repeat;
background-size:contain;
}

.bars .map {background-image:url(/img/content/location/maps/restaurants.jpg);}
.arts .map {background-image:url(/img/content/location/maps/arts.jpg);}
.green .map {background-image:url(/img/content/location/maps/green.jpg);}
.hotels .map {background-image:url(/img/content/location/maps/hotels.jpg);}
.gym .map {background-image:url(/img/content/location/maps/gym.jpg);}


.accordion {
padding: 40px;
overflow-y: auto;
font-size:0.875rem;
line-height:1.3em
}
.accordion h3 {
margin: 0;
padding: 0;
cursor: pointer;
border-radius: 6px;
margin-bottom: 1rem;
position:relative;
padding-left:1.5rem;
}
.accordion h3::before {
	content:'';display:block;border-radius:50%;width:1rem;height:1rem;position:absolute;top:50%;left:0;background:#30180E;color:#fff;text-align:center;line-height:1rem;font-size:0.75rem;transform:translateY(-50%);text-decoration:none;
}
.accordion h3[data-map='bars']::before {background:#30180E}
.accordion h3[data-map='arts']::before {background:#94703B}
.accordion h3[data-map='green']::before {background:#DCE2D3;}
.accordion h3[data-map='hotels']::before {background:#EAE9E8;}
.accordion h3[data-map='gym']::before {background:#CCBA94;}
.accordionitem {
margin-bottom: 1rem;
border-bottom:1px solid #30180E;
}
.accordion h3:hover {text-decoration: underline;}
.panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease, opacity 0.5s ease;
opacity: 0;
}
.panel.open {
max-height: 2000px;
opacity: 1;
}
.item-grid {
display: flex;
flex-wrap:wrap;
padding-bottom:0.5rem
}
.item {
flex:0 0 50%;
display: flex;
align-items: center;
margin-bottom:0.5rem;
box-sizing: border-box;
padding-right:1rem;
}
.item-num {
width: 2rem;
height: 2rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
color: white;
flex-shrink: 0;
margin-right: 0.5rem;
}
.panel-bars .item-num { background: #30180E; }
.panel-arts .item-num { background: #94703B; }
.panel-green .item-num { background: #DCE2D3; color: #000; }
.panel-hotels .item-num { background: #EAE9E8; color: #000; }
.panel-gym .item-num { background: #CCBA94; }

/**** contact ****/
.downloads {padding:4vw;display:flex;}
.downloads .text {flex:0 0 60vw}
.downloads p {max-width: 40ch;}
.downloads p:last-child {margin-bottom:0}

.downloads .buttons {display: flex;flex-direction: column;text-align: center;}
.buttons a {display: block;width: 220px;padding:0.5rem 2rem;margin-bottom:0.5rem;background:#30180E;color:#fff;text-decoration: none;font-size:1rem;font-size:0.875rem;transition:background 0.2s}
.buttons a:hover {background:#94703B}
.buttons a:last-child {margin-bottom:0}

.footer {padding:4vw;background:#fff;position:relative;}
.footer * {position:relative;z-index:10}
.footer1 {display:flex;padding-bottom:4vw;border-bottom:1px solid #30180E;}
.footer1 a {color:#94703B}
.footerlogo {flex:0 0 60vw}
.footerlogo img {width:105px}

.agency {display:flex;font-size:0.875rem}
.agentlogo {flex:0 0 76px;height:76px;margin-right:2rem}
.agent {margin-bottom:1.5rem}
.agent h3 {margin-bottom:0.125rem;font-size:0.875rem}

.footer2 {display:flex;justify-content: space-between;align-items: center;padding-top:1rem;font-size:0.75rem;}
.footer2 a {color:#30180E;}


/****************************************************
* 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
================================================== */
	
	/* biggest desktop */
	@media only screen and (max-width: 1230px) {}
	
	/* bigger desktop */
	@media only screen and (max-width: 1229px) {}

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width:1099px) {
		html {font-size:14px}
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		.paddingsection {padding:10vw 5vw 5vw 5vw}
	
		.mobilenostick {position:relative;top:0}
		.introduction {flex-direction:column;text-align: center;min-height:auto;height:auto}
		.introduction .text {display:flex;flex-direction: column;align-items:center;flex:1 1;padding-top:10vw}
		.introduction .pic {width:90vw;margin:5vw;flex:1 1 80vh;height:40vh;background-position:50% 50%}
		
		/**** building ****/
		.buildingpic1 {width:60vw;height:70vh;background-position:75% 50%;margin-left:30vw}
		.textpic .pic1.buildingpic2 {margin:0 0 0 0;width:100vw;flex:0 0 50vh;z-index:10}
		.textpic {flex-direction: column-reverse;}
		.textpic .text {width:100%;display:flex;justify-content: flex-end;padding:10vw 0}
		
		.textpic.reverse {flex-direction:column-reverse}
		.textpic.reverse .text {justify-content:flex-start}
		.textpic .pic2.buildingpic3 {margin:0 0vw 0 30vw;width:60vw;flex:0 0 55vw}
		.buildingpic4 {margin:0 0 0 0;width:100vw;height:50vh;margin-left:-5vw;margin-bottom:-5vw}
		
		/**** specification ****/
		.textpic .pic1.buildingpic2 {margin:0 0 0 0;width:100vw;flex:0 0 50vh;z-index:10}
		
		.textpic.spectextpic.reverse {flex-direction:column}
		.textpic .pic2.specpic1 {width:90vw;flex:0 0 80vw;z-index:10}
		
		.specpic2 {width:60vw;height:50vw;margin-left:30vw}
		
		/**** location ****/
		.occupier {flex-basis: calc(33% - 2rem);height:8vw}
		
		.picrow {flex-direction:column}
		.picrow .pic1 {width:90vw;flex:0 0 80vw;}
		.picrow .pic2 {width:60vw;flex:0 0 50vw;margin-left:30vw;margin-top:-10vw;z-index:10}
		.traveltimes {flex-direction:column}
		.traveltimes .text {flex:1 1;width:100%}
		.travelcol {width:50%;padding:0}
		.traveltimes .pic3 {width:100vw;flex:0 0 90vw}
		
		.layout {flex-direction:column}
		.map {width:90vw;height:86vw}
		.accordion {padding:20px 0}
		.item {flex-basis:33%}
		
		/**** footer ****/
		.downloads {flex-direction: column;align-items:center;text-align: center;}
		.downloads .text {flex:1 1;padding-bottom:5vw}
		
		.footer {padding:10vw 5vw 5vw 5vw}
		.footer1 {flex-direction:column}
		.footerlogo {flex:1 1;padding-bottom:5vw}
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		.stickysection {top:0}
		.paddingsection {padding: 20vw 5vw 5vw 5vw;}
		.mobile {display:unset}
		.nomobile {display: none;}
		
		/**** navigation ****/
		.navbutton {
			display: block;
			position: fixed;
			width: 31px;
			height: 20px;
			padding: 20px;
			top: 20px;
			right: 10px;
			z-index: 10000;
			cursor: pointer;
		}

		.navbutton .navicon {
			position: relative;
			width: 100%;
			height: 100%
		}

		.navbutton .navicon span {
			display: block;
			width: 100%;
			height: 1px;
			background: #30180E;
			position: absolute;
			transition: top 0.5s 0.5s, transform 0.5s, opacity 0.5s
		}

		.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.5s, transform 0.5s 0.5s, opacity 0s 0.5s
		}

		.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);
		}

		
		.navholder {height:0;overflow:hidden;transition:height 0.5s}
		.menuopen .navholder {height:100vh}
		.nav {height:100vh;width:100vw;font-size:1.2rem;align-items:flex-end;}
		.nav ul {flex-direction:column;box-sizing: border-box;width:100vw;padding:5vw;}
		.nav li {padding:0;margin:-1px 0 0 0;width:100%}
		.nav li a {text-decoration: none;color:#30180E;display:block;border-top:1px solid #30180E;padding:1.5rem 0;border-bottom:1px solid #30180E}
		.navbg {position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;opacity:1;transition:opacity 0.5s;z-index:0}
		.navbg:before {content:'';display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:50% 50% no-repeat url(/img/content/intro/introbg.jpg);background-size:cover;z-index:1;opacity:0.25}
		.navbg:after {background: #94713B}
		.scrolled .navbg {opacity:1}
		
		h1 {font-size: 30px;line-height:1.2em;}
		h2 {font-size:16px}
		
		.introduction .text {padding-top:20vw}
		
		/**** building ****/
		.textpic .text {padding:20vw 0}
		.textpic p {max-width:30ch}
		.buildingpic1 {height:95vw;z-index:10}
		
		/**** plans ****/
		.availabletable {flex-direction:column}
		.availabletable .key {display:none}
		.availabletable table, .availabletable {margin-bottom:0}
		.availabletable table td {line-height:1.2em;vertical-align:middle}
		
		.namepager {top:15vw}
		.namepager div {margin-bottom:0.5rem}
		.floorholder {height:90vh;padding:15vw 0;box-sizing: border-box;margin-bottom:10vw}
		.floorholder .slideinner {display:flex;width:90vw;height:100%;justify-content: flex-end;align-items: center;}
		.floorholder img {width:auto;height:calc(90vh - 30vw);position:relative;}
		.floorholder .key {position:absolute;bottom:15vw;left:0;margin:0;padding:0}
		
		
		/**** spec ****/
		.specification h1, .specification h2 {text-align:center}
		.specitem {flex-basis:calc(50% - 0.5rem)}
		
		/**** location ****/
		.occupier {flex-basis: calc(50% - 1rem);height:45px;margin:0.5rem}
		.item {flex-basis:50%}
		.traveltimes {padding-top:20vw}
		
		/**** footer ****/
		.downloads {padding:10vw 7.5vw}
		.downloads .text {padding-bottom:10vw}
		.footer {padding-top:20vw}
		.footerlogo {padding-bottom:10vw}
	}

	/* 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: 'Victor';
	    src: url('/fonts/VictorSerif-40Regular.woff2') format('woff');
	    font-weight: normal;
	    font-style: normal; }