@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: 1rem/1.4rem 'NeueRational', Arial, sans-serif;
	color: #092F28;
	background: #F1F0EC;
	height:100%;
}

*::selection {
  background: #D58C3C;
  color: #EBDCB9;
}
*::-moz-selection {
  background: #D58C3C;
  color: #EBDCB9;
}
*::-webkit-selection {
  background: #D58C3C;
  color: #EBDCB9;
}

.noscroll {overflow:hidden}

.animatein {visibility: hidden;}

.nib {font-family: 'FCNib', Arial, sans-serif;}
.light {font-weight: 300;}

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

.goldtext {color:#D58C3C}
.darkgreentext {color:#092F28}
.whitetext {color:#fff}

b {font-weight:600}
h1 {font-size:clamp(42px, 4.5vw, 74px);line-height:1.2em;font-weight: unset;}
h2 {font-size:2vw;line-height:1.3em;font-weight: unset;}
h3 {font-size:3vw;line-height:1.3em;font-weight: unset;}
h4 {font-size:24px;line-height:1.3em;font-weight: unset;}


.wholepage {padding-top:140px}
.pic {position:relative;background:50% 50% no-repeat;background-size:cover}

.mobile {display:none}

.buttonlink {pointer-events: all;border:1px solid #D58C3C;padding:1rem 1.5rem;background:#1E5046;text-decoration: none;text-align:center;display:flex;align-items: center;justify-content: center;position:relative;cursor: pointer;}
.buttontext {position:relative;display:inline-block;z-index:5}
.buttonlink canvas {position: absolute;top:0;left:0;width:100%;height:100%;transition:opacity 0.5s;opacity:0}
.buttonlink:hover canvas {opacity:1}
.buttontext:before {content:'';display:block;width:100%;height:1px;background:#D58C3C;position:absolute;bottom:0;left:0;transform-origin: 0% 0%;transform: scaleX(0);transition:transform 0.5s ease-in-out}
.inactive .buttontext:before {display:none}
.darkgreentext .buttontext:before {background:#092F28}
.goldtext .buttontext:before {background:#D58C3C}
.buttonlink:hover .buttontext:before {transform: scaleX(1);}

/**** nav ****/
.navholder {width:100%;height:140px;position:fixed;z-index:8000}
.navbar {width:100%;height:140px;width:100%;display:flex;align-items:center;justify-content: center;background:url(/img/ui/lightgrad.jpg) 50% 50% no-repeat;background-size: cover;}
.navbar .buttonlink {border:1px solid #092F28;background:transparent;width:170px;padding:0.55rem;font-size:1.5rem;line-height:1em}

.navbar .buttonlink:nth-child(2) {order:1}
.navbar .buttonlink:nth-child(3) {order:2;margin-left:2rem}
.navbar .buttonlink:nth-child(4) {order:4;margin-right:2rem}
.navbar .buttonlink:nth-child(5) {order:5}

.navbar .homelink {order: 3;}
.navbar .homelink img {height:66px;margin:0 4vw}
.subnavholder {position:relative}
.subnav {position:absolute;top:0;left:100%;height:100%;display:flex;align-items:center;justify-content: flex-start;opacity:0;pointer-events: none;transition:opacity 0.5s}
.subnav.active {opacity:1;pointer-events: all;}
.subnav a {display:flex;align-items:center;color:#092F28;text-decoration: none;margin-right:0.5rem}
.subnav a:before {content:'';display:block;width:1rem;height:1px;background:#092F28;margin-right:0.5rem}
.subnav a:hover {text-decoration: underline;}



/**** footer ****/
.footer1 {padding:5vw 2.5vw 2.5vw 2.5vw;position:relative;box-sizing: border-box;background:url(/img/ui/lightgrad.jpg) 50% 50% no-repeat;background-size:cover;display:flex}
.footer1 a {background-color: transparent;}
.footer1 a canvas {opacity: 1;}
.footer1line1 {width:1px;height:calc(10vw + 22px);position:absolute;top:0;left:50%;transform-origin: 0% 0%;}
.footer1line2 {width:90%;height:1px;position:absolute;top:calc(10vw + 22px);left:5%;transform-origin: 50% 50%;}
.footer1col {flex:0 0 50%;box-sizing: border-box;}
.footer1col h2 {margin-bottom:2vw}
.footer1col .footer1buttons {display:flex;}
.footer1col .footer1buttons a {flex:0 0 140px;padding:0.75rem 1.5rem;border-color:#092F28}
.footer1pic {width:100%;height:30vw;margin-top:2rem}
.footer1col.leftcol {text-align: left;padding-right:1rem}
.footer1col.leftcol .footer1buttons {justify-content: flex-start;}
.footer1col.leftcol .footer1buttons a {margin-right:1rem}

.footer1col.rightcol {text-align: right;padding-left:1rem}
.footer1col.rightcol .footer1buttons {justify-content: flex-end;}

.footer2 {display:flex;padding:5vw 2.5vw;justify-content: center;align-items:center;background:url(/img/ui/turquoisegrad.jpg) 50% 50% no-repeat;background-size:cover;box-sizing: border-box;gap:2vw}
.footer2line {background:#fff;flex:0 0 10vw;height:1px;transform-origin: 0% 0%;}
.footer2 h2 {margin:0}
.footer2 .buttonlink {border-color: #092F28;flex:0 0 140px;padding:0.75rem 1.5rem;background-color:transparent}

.footer3 {background:#F1F0EC;box-sizing: border-box;padding:3vw 2.5vw;}
.footer3 a {color:#092F28}
.footer3inner {display:flex;align-items:flex-start;justify-content: space-between;border-bottom:1px solid #092F28;padding-bottom:5vw}
.footerpattern {height:20vh;width:100%;display:flex;flex-direction: column;}
.footerpatternrow {background:#F1F0EC url(/img/ui/elephantpatterndarkgreensingle.svg) top center;background-size:auto 100%;flex:0 0 5vh;width:100%}
.footerpatternrow:nth-child(odd) {background-image:url(/img/ui/elephantpatterndarkgreensingle-alt.svg)}
.elephantfooter {height:32px;margin-bottom:2.5vw}
.agency {display:flex;gap:2vw}
.copyright {padding:2vw 0 0 0 ;font-size:12px}

/**** downloads ****/
.downloadholder {position:fixed;top:0;left:0;width:100%;height:0;z-index:9000;transition:height 1s;overflow: hidden;}
.downloadsopen .downloadholder {height:100vh;}

.downloadinner {width:100%;height:100vh;display:flex;align-items:center;justify-content: center;flex-direction: column;position:relative;background:url(/img/ui/lightgrad-flip.jpg) 50% 50% repeat-y;background-size: 100vw auto}
.downloadinner * {position:relative}
.downloadbg1 {background:url(/img/ui/elephantpatternwhite.svg) 50% 50%;background-size:auto 9.5vh;position:absolute;top:0;left:0;width:100%;height:100vh;transition:background 5s 0.25s}
.downloadsopen .downloadbg1 {background-size:auto 10vh}
.downloadbg2 {position:absolute;width:100%;height:100vh;background:url(/img/ui/lightgrad-flip.jpg) 50% 50% repeat-y;background-size: 100vw auto;
/* Mask */
  -webkit-mask-image: radial-gradient(
    circle at center,
    black 0%,
    black 50%,
    transparent 100%
  );
  mask-image: radial-gradient(
    circle at center,
    black 0%,
    black 50%,
    transparent 100%
  );

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;}
  
  .downloadform {display:flex;align-items: flex-start;justify-content: center;flex-direction: column;transition:opacity 0.5s;opacity:0}
  .downloadsopen .downloadform {opacity:1;transition:opacity 1s 0.25s}
  .downloadform form {width:100%}
  .textinputs {display:flex;flex-direction: column;gap:0.5rem;margin-bottom:2rem}
  .downloadform input, .downloadform button {font-family:'NeueRational';font-weight:300;font-size:1rem;border:1px solid #D58C3C;background:transparent;padding:0.75rem;transition: background 0.5s;}
  .downloadform input::placeholder {opacity:1;color: #092F28;}
  
  .containercheck {margin-right:1.5rem}
  .downloadform input[type="text"]:focus {background-color: #F1F0EC;}
  
  .downloadform input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid #D58C3C;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  margin:0 0.4rem 0 0 
}

.downloadform input[type="checkbox"]::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: transform 0.15s ease;
  background: #D58C3C;
}

.downloadform input[type="checkbox"]:checked::before {
  transform: scale(1);
}
  
  .downloadform button {border-color: #092F28;background:transparent;padding:0.8rem 4rem;margin:4rem auto 0 auto;cursor: pointer;position:relative}
  .downloadform h2 {margin-bottom: 2rem;}
  .downloadform p {font-size:1.25rem}
  
  .closeholder {position:absolute;top:2.5vw;right:2.5vw;}
  .closebutton {position:relative;background:transparent;padding:0.7rem 4rem;padding-right:calc(4rem + 45px);border-color: #092F28;cursor: pointer;width:auto;height:45px;box-sizing: border-box;}
  /*.closebutton .buttontext {margin:0.70rem 4rem}*/
  .closeicon {position:absolute;top:0;right:0;border-left:1px solid #092f28;height:100%;aspect-ratio: 1 / 1;background:url(/img/ui/close.svg) 50% 50% no-repeat;background-size:auto 50%;z-index:20;flex:0 0 44px}
  


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

/**** intro ****/
.introholder {width:100%;height:100vh;position:relative;background:#EBDCB9}
.introvideo {position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events: none;z-index:1000}
video {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position: 50% 50%;opacity: 2;transition: opacity 1s ease;}
.introvideo video.fade-out {opacity: 0;}
.topbar {width:100%;height:100px;display:flex;align-items:center;justify-content:center;box-sizing: border-box;}
.topbar .logo {height:24px;width:auto}
.introcols {display:flex;height:calc(100vh - 100px);position:relative}

canvas {
  display: block;position:absolute;top:0;left:0;
  width:100%;height:100%;
}
.canvasreveal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  

  /* Start fully opaque */
  background: linear-gradient(to top, #EBDCB9 0%, #EBDCB9 100%);
}

.introcolholder {position:relative;flex:0 0 50%;height:100%;pointer-events:none;text-align:center}
.introcol {width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;box-sizing: border-box;padding:10vh 0}
.introcol h1 {font-size:8vh;line-height:1.1em}
.introcol h2 {font-size:3vh;line-height:1.3em}
.introcol svg {width:calc(30vh + 40px);height:calc(30vh + 40px);position:absolute;top:calc(58% - (15vh + 20px));transform-origin: 50% 50%;}
.introcol svg circle {fill:none;stroke-width: 0.3px;stroke-dasharray: 302px 302px;
stroke-dashoffset: 302px;transform-origin: 50% 50%;}
.officecol circle {stroke:#D58C3C;}
.retailcol circle {stroke:#092F28;}
.introcolholder h1, .introcolholder h2 {font-weight:inherit}

.officecol .buttonlink {border-color:#D58C3C;background:#1E5046;width:160px;position:relative;z-index:2000}
.retailcol .buttonlink {border-color:#092F28;background:#83C7BA;width:160px;position:relative;z-index:2000}
.colreveal {position:absolute;top:0;left:0;width:100%;height:100%;clip-path: circle(15vh at 50% 58%);transition:clip-path 2s, background 4s;pointer-events: none;}
.officecol .colreveal {color:#092F28;background:url(/img/content/intro/officebg.jpg) no-repeat 50% 58%;background-size:35vh auto}
.retailcol .colreveal {color:#092F28;background:url(/img/content/intro/retailbg.jpg) no-repeat 50% 55%;background-size:35vh auto}
.active .colreveal {clip-path: circle(80vh at 50% 58%);background-size:55vw auto;transition:clip-path 2s, background 1s;}
.retailcol.active .colreveal {background-size:55vw auto;background-position:50% 65%}
.pin-spacer {max-width:100%;overflow-x:hidden !important}
/*.pin-spacer.noscroll {overflow:hidden !important;max-height:100vh !important;padding:0 !important}*/

/**** retail ****/
.s1 .wholepage {padding-top:0px}
.retailintroholder, .assetintroholder {padding-top:140px;position:relative}
.retailintro {width:100%;height:calc(100vh - 140px);position:relative;overflow:hidden}
.patternbox {position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content: center;background:#fff url(/img/ui/elephantpatterndarkgreen.svg) 50% 50%;background-size:auto 10vh;z-index:500;mix-blend-mode: multiply;}
.patternboxwipe {width:80%;height:100%;background:#fff;border-left:1px solid #092F28;border-right:1px solid #092F28;transform-origin: 50% 50%;}
.retailgradlightflip {position:absolute;top:0;left:0;width:100%;height:100%;background:50% 50% no-repeat url(/img/ui/lightgrad.jpg);background-size:cover;z-index:530}
.retailgrad {position:absolute;top:0;left:0;width:100%;height:100%;background:50% 50% no-repeat url(/img/ui/turquoisegrad.jpg);background-size:cover;z-index:490}
.revealpattern {position:absolute;top:0;left:0;width:100%;height:100%;background:50% 50% no-repeat url(/img/ui/turquoisegrad.jpg);background-size:cover;z-index:520}
.retailgradlight {position:absolute;top:0;left:0;width:100%;height:100%;background:50% 50% no-repeat url(/img/ui/lightgrad-flip.jpg);background-size:cover;z-index:480}
.retailgradflip {position:absolute;top:0;left:0;width:100%;height:100%;background:50% 50% no-repeat url(/img/ui/turquoisegrad-flip.jpg);background-size:cover;z-index:470}
.retailintro .destination {position:absolute;top:0;left:0;width:100%;z-index:510}
.retailintro .destination .text {width:100%;height:calc(100vh - 140px);display:flex;align-items:center;justify-content: center;text-align: center;flex-direction: column;}
.retailintro .destination .text h1 {margin-bottom:3vw}
.retailintro .destination .text h1 .line {clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}
.destination .picholder {margin-top:-20vh;padding:2.5vw;height:calc(100vh - 140px);box-sizing: border-box;width:100%;}
.destination .picholder .pic {width:100%;height:100%}
.retailintro .expansive {position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction: column;align-items:center;justify-content: center;z-index:475;text-align:center}
.retailintro .expansive p {margin:0}
.retailintro .expansive h1 {margin:2.5vw 0;max-width:20ch}
.shopfronts {box-sizing: border-box;height:100%;width:200%;position:absolute;top:0;right:0;z-index:1000;padding:2.5vw}
.shopfronts .pic {width:100%;height:100%}

.aerial {position:relative;margin-top:-1px;margin-bottom:-1px}
.aerial img {display:block;max-width:100%;height:auto}
.aeriallayer {position:absolute;top:0;left:0}

.wellconnected {background:50% 50% repeat-y url(/img/ui/turquoisegrad.jpg);background-size:100% auto;box-sizing: border-box;padding:10vw 5vw;text-align:center}
.wellconnected p {max-width:40ch;margin-left:auto;margin-right:auto}
.connectedline {background:#092F28}
.connectedline.line1 {width:1px;height:12vw;margin:2rem auto;transform-origin: 0% 0%;}
.elevation {width:25vw}
.elevation path {fill: none;stroke: #f1f0ec;stroke-miterlimit: 10;}
.logolines {width:50vw;display:flex;justify-content: space-between;align-items: center;margin:2rem auto 3rem}
.logolines img {width:14vw}
.lineholder {flex:0 0 15vw;position:relative;height:1px}
.line2a, .line3a {width:100%;height:1px}
.line2a {transform-origin: 100% 0%;}
.line3a {transform-origin: 0% 0%;}
.line2b, .line3b {width:1px;height:4rem;position:absolute;top:0;transform-origin: 0% 0%;}
.line2b {left:0}
.line3b {right:0}
.lineholder img {position:absolute;bottom:0;height:4rem}
.lineholder img.walkleft {right:6vw}
.lineholder img.walkright {left:6vw}

.stations {display:flex;width:84vw;justify-content: space-between;margin:0 auto}
.station {flex:0 0 34vw}
.line4 {margin:0 auto;width:1px;height:3rem;transform-origin: 0% 0%;}
.stationpic {width:16vw;height:16vw;margin:0 auto}
.line5 {margin:0 auto 1rem auto;width:1px;height:3rem;transform-origin: 0% 0%;}
.tubelines {display:flex;justify-content: center;}
.tubeline {position:relative;margin:0 0.75rem;display:flex;align-items:center}
.tubeline::before {content:'';width:12px;height:12px;background:#092F28;border-radius: 50%;margin-right:10px}
.tubeline.elizabeth::before {background:#6950A1}
.tubeline.central::before {background:#DC241F}
.tubeline.jubilee::before {background:#838D93}
.tubeline.bakerloo::before {background:#B26300}
.tubeline.victoria::before {background:#039BE5}


/**** asset ****/
.s2 .wholepage {padding:0}
.assetintroholder {padding-top:140px;position:relative}
.assetintroholder {background:url(/img/ui/turquoisegrad.jpg) repeat-y 50% 50%;background-size:100% auto}
.assetintroholder .retailintro {height:auto;overflow:unset;}
.assetintroholder .patternbox {mix-blend-mode: unset;height:15vh;background-size:auto 10vh;background-color: transparent;background-position:bottom center;top:0}
.assetintroholder .destination h1 {font-size:clamp(40px, 4vw, 64px);line-height:1.2em;max-width:30ch}
.assetintroholder .destination p {margin-bottom:2.5vw}
.assetintroholder .destination {position:relative}
.assetintroholder .destination .picholder {padding:0 10vw;margin-top:-10vh;height:45vw}
.assetline1 {position:absolute;top:65vh;left:50%;width:1px;height:35vh;transform-origin: 0% 0%;}

.scheme {text-align: center;position:relative;box-sizing: border-box;width:100%;padding:20vw 20vw 0 20vw;}
.assetline2 {position:absolute;top:0;left:50%;width:1px;height:20vw;transform-origin: 0% 0%;}
.schemehead {padding:1rem;margin:0}

.schemerow {width:100%;position:relative;display:flex;}
.schemeitem {flex:0 0 50%;box-sizing: border-box;position:relative;padding:2.5vw;}
.schemeitem .number {font-size:4vw;line-height:1.3em;margin-bottom:0}
.schemeitem .number span.small {font-size:0.5em}
.assetline3,.assetline6,.assetline7 {position:absolute;top:0;left:50%;width:1px;height:100%;transform-origin: 0% 0%;}
.linerow {display:flex;width:100%;align-items: center;}
.assetline4,.assetline5 {flex:1 1 100%;height:1px;transform-origin: 100% 100%;background:#092F28}
.assetline5 {transform-origin: 0% 0%;}
.linecircle {height:12px;flex:0 0 12px;border:1px solid #092F28;border-radius: 50%;}
.schemerow.row2 {padding-bottom:10vw}
.thirdspace {position:absolute;top:2vw;left:90%;transform-origin: 50% 50%;transform: rotate(15deg);}

.locationbuttons {display:flex;justify-content: center;gap:10vw;background:url(/img/ui/lightgrad.jpg) 50% 50% no-repeat;background-size:100% auto;padding:10vw 0 2.5vw 0;position: relative;}
.locationbuttons a {flex:0 0 140px;border-color: #092F28;background-color: transparent;}

.twin {width:100%;height:calc(90vh - 140px);display:block}


/**** retail shops ****/
.s3 .retailintro, .s4 .retailintro {height:calc(90vh - 140px);display:flex;flex-direction: column;align-items:center;justify-content: center;text-align: center;}
.retailintro p {margin-bottom:2rem}
.retailintro h2 {max-width:40ch}

.shopsmapholder {padding:0 1rem}

.shopsmap .st0 {
fill-rule: evenodd;
}

.shopsmap .st0, .shopsmap .st1 {
fill: #092f28;
}

.shopsmap .st2 {
stroke: #6950a1;
}

.shopsmap .st2, .shopsmap .st3 {
fill: none;
stroke-miterlimit: 10;
stroke-width: 13px;
}

.shopsmap .st4 {
fill: #f1f0ec;
}

.shopsmap .st3 {
stroke: #f1f0ec;
}

.shopsmap .st5 {
fill: #83c7ba;
}
#markerline {clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}

.flagship {position: relative;overflow:hidden;padding:5vw 2.5vw 2.5vw 2.5vw}
.flagshipbg1 {background:#F1F0EC url(/img/ui/elephantpatterndarkgreen.svg) top center;background-size:auto 10vh;position: absolute;top:0;left:0;width:100%;height:200%}
.flagshipbg2 {background: linear-gradient(
  45deg,
  rgba(241, 240, 236, 0.3) 0%,
  rgba(241, 240, 236, 1) 40%,
  rgba(241, 240, 236, 1) 100%
);position: absolute;top:0;left:0;width:100%;height:100%}
.flagshipcontent {position: relative; display:flex}
.flagshiptext {box-sizing: border-box;padding:2.5vw 7.5vw;flex:0 0 50%}
.flagshiptext h3 {margin-bottom:3rem}
.flagshiptext p {max-width:40ch}

.flagshipgrid {display:flex;flex-wrap: wrap;gap:2rem;flex:0 0 50%;box-sizing: border-box;padding-left:2.5vw}
.flagitem {aspect-ratio: 1 / 1;flex:0 0;flex-basis:calc(50% - 1rem);box-sizing: border-box;padding:2rem;display:flex;flex-direction:column;justify-content: space-between;align-items:flex-start;}
.flagitem.text {background:url(/img/ui/lightgrad.jpg) 50% 50% no-repeat;background-size:cover;}
.flagitem.double {aspect-ratio: 2 / 1;flex:0 0;flex-basis:calc(100%)}
.flagitem p {margin:0}
.flagitem p span {font-size:0.8em}

/**** restaurants ****/
.mapsection {position:relative}
#map {width:100%;height:calc(90vh - 140px);display:block}
.mapsection #list {position:absolute;top:2.5vw;left:2.5vw;z-index:900;background:#F1F0EC;padding:2vw;border:1px solid #092F28;width:25vw}
#list .panel {border-top:1px solid #092F28;padding:1rem;}
#list .panel h4 {margin-bottom:0;transition:margin 0.5s;position:relative;cursor:pointer}
#list .panel h4:hover {text-decoration: underline;}
#list .panel h4:before {content:'View';font-family: 'NeueRational';font-weight:300;font-size:0.7em;position:absolute;right:3rem;top:0em}
#list .panel h4:after {content:'';position:absolute;right:10px;top:0.35em;display:block;width:14px;height:14px;background:url(/img/ui/downarrow.svg) 50% 50% no-repeat;background-size:contain;transition:transform 0.5s}
#list .panel:last-child {border-bottom:1px solid #092F28;}
#list .panel ul {list-style-type: none;margin:0;padding:0;max-height:0;overflow:hidden;transition: max-height 0.5s;}
#list .panel ul li {margin:0}
#list .panel .listnum {display:inline-block;width:2.5rem;text-align:right;margin-right:0.5rem}
.sectioncolour {display:inline-block;width:1rem;height:1rem;border-radius:50%;background:#000;margin-right:1rem}

#list .panel.active h4 {margin-bottom:1rem}
#list .panel.active h4:before {content:'Close';}
#list .panel.active h4:after {transform:rotate(180deg)}
#list .panel.active ul {max-height:300px}

#restaurants .sectioncolour {background:#83C7BA}
#bars .sectioncolour {background:#092F28}
#culture .sectioncolour {background:#D58C3C}
#entertainment .sectioncolour {background:#3268CA}
#gyms .sectioncolour {background:#A8C099}
#hotels .sectioncolour {background:#D5552B}




#map .marker {cursor: pointer;transition: opacity 0.5s ease;opacity: 1; /* default visible */}

#map .marker.is-hidden {
  opacity: 0 !important;
  pointer-events: none;
}
.styledmarker {display:flex;flex-direction: column;width:27px;height:35px;}
.markernum {text-align:center;display:flex;align-items:center;justify-content: center;width:27px;flex:0 0 27px;border-radius: 50%;transform-origin:50% 100%;transition:transform 0.2s}
.markerstem {flex:0 0 8px;width:2px;margin:0 auto;}

#map .marker.marker-restaurants .markernum, #map .marker.marker-restaurants .markerstem {background:#83C7BA}
#map .marker.marker-bars .markernum, #map .marker.marker-bars .markerstem {background:#092F28;color:#F1F0EC}
#map .marker.marker-culture .markernum, #map .marker.marker-culture .markerstem {background:#D58C3C}
#map .marker.marker-entertainment .markernum, #map .marker.marker-entertainment .markerstem {background:#3268CA;color:#F1F0EC}
#map .marker.marker-gyms .markernum, #map .marker.marker-gyms .markerstem {background:#A8C099}
#map .marker.marker-hotels .markernum, #map .marker.marker-hotels .markerstem {background:#D5552B}


.marker.hover .markernum {transform: scale(1.25);}
.marker.active.hover .markernum {transform: scale(1);}

#list li {cursor: pointer;}
#list li.hover,
#list li.active-item,
#list li:hover {
  font-weight:600;
}

.mapboxgl-popup {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  font-family: "NeueRational", Arial, sans-serif;
}

.mapboxgl-popup.show {
  opacity: 1;
}

.mapboxgl-popup-content {padding:15px 20px !important;border-radius:0 !important;color:#092F28;background:#F1F0EC !important;box-shadow: 0 1px 0px #B26300 !important;letter-spacing:0.025em}
.mapboxgl-popup-tip {border-top-color:#F1F0EC !important}

/****************************************************
* 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}


.revealOnScroll.fadeInUp {
  opacity: 0;
}


/* #Media Queries
================================================== */
	
	/* biggest desktop */
	@media only screen and (max-width: 1280px) {
		h1 {font-size:3.5rem;line-height:1.2em;}
		h2 {font-size:1.2rem;line-height:1.3em;}
	
		.footer3 {font-size:0.8rem}
		.elephantfooter {height:20px}
		.pthree {height:20px}
		.savills {height:60px}
	}
	
	/* bigger desktop */
	@media only screen and (max-width: 1229px) {}

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

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		.desktop {display:none}
		.mobile {display: unset;}
	
		.navholder {height:60px;overflow:hidden;transition:height 0.5s}
		.navholder:before {content:'';display:block;position:absolute;top:0;left:0;width:100%;height:100vh;background: url(/img/ui/lightgrad-flip.jpg) 50% 50% no-repeat;background-size:cover;z-index:0}
		.navholder:after {content:'';display:block;position:absolute;top:0;left:0;width:100%;height:100vh;background: url(/img/ui/turquoisegrad-flip.jpg) 50% 50% no-repeat;background-size:cover;z-index:0;opacity:0;transition:opacity 0.5s}
		
		.homelink {position:relative;z-index:10}
		.homelink img {height:20px;margin:20px 5vw}
		.navbar {position: relative;z-index:10;background:none;height:calc(100vh - 60px);box-sizing: border-box;padding-bottom:30vh;flex-direction:column}
		.navbar:after {content:'';display:block;position:absolute;bottom:0;left:0;width:100%;height:30vh;background:url(/img/ui/elephantpatterndarkgreen.svg) top center;background-size:100px auto;}
		
		.subnav {opacity:1;pointer-events: all;position:relative;left:unset;display:flex;flex-direction:column;text-transform: uppercase;}
		.subnav a {border:1px solid #092F28;padding:0.75rem;background:#83C7BA;text-decoration: none;text-align:center;display:flex;align-items: center;justify-content: center;position:relative;width:170px;margin:0}
		a canvas {display:none}
		.subnav a:before {display:none}
		
		.menuopen .navholder {height:100vh}
		.menuopen .navholder:after {opacity:1}
		
		.navbutton {
			display: block;
			position: fixed;
			width: 31px;
			height: 20px;
			padding: 20px;
			top: 0px;
			right: 0px;
			z-index: 10000;
			cursor: pointer;
		}

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

		.navbutton .navicon span {
			display: block;
			width: 100%;
			height: 1px;
			background: #092F28;
			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);
		}
		
		/**** footer ****/
		.footer2 {flex-direction:column}
		
		/**** retail intro ****/
		.retailintroholder {padding-top:60px}
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		
		
		/**** intro ****/
		#canvas {display:none}
		.introcols {flex-direction:column;height:calc(100vh - 100px)}
		.introcol {padding:0;justify-content: center;}
		.introcol h1 {font-size:6vh;line-height:1.1em;margin-bottom:1rem}
		.introcol h2 {font-size:1rem;line-height:1.3em;margin-bottom:2rem}
		.introcolholder {width:100%;flex:0 0 50%;height:auto;pointer-events: all;}
		.introcol svg, .introcol.colreveal {display:none}
		.officecol .colfirst {background:url(/img/ui/emeraldgrad.jpg) 50% 50% no-repeat;background-size:cover}
		.retailcol .colfirst {background:url(/img/ui/turquoisegrad.jpg) 50% 50% no-repeat;background-size:cover}
	}

	/* 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: 'NeueRational';
	src: url('/fonts/NeueRational-Light.woff') format('woff'),
			url('/fonts/NeueRational-Light.woff2') format('woff2');
	font-weight: 300;
	font-style: normal; }
	
@font-face {
	font-family: 'NeueRational';
	src: url('/fonts/NeueRational-Regular.woff') format('woff'),
			url('/fonts/NeueRational-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal; }
	
@font-face {
	font-family: 'NeueRational';
	src: url('/fonts/NeueRational-SemiBold.woff') format('woff'),
			url('/fonts/NeueRational-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal; }
	
@font-face {
	font-family: 'FCNib';
	src: url('/fonts/FCNib-Light.woff2') format('woff2');
	font-weight: 300;
	font-style: normal; }
	
@font-face {
	font-family: 'FCNib';
	src: url('/fonts/FCNib-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal; }