@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: #1e5046;
	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:#1e5046}
.whitetext {color:#fff}
.lighttext {color:#F1F0EC}

.lightbg {background: url(/img/ui/lightgrad.jpg) 50% 50% repeat-y;
    background-size: 100% auto;}
.lightbgsolid {background:#F1F0EC}
.paddingbottom {padding-bottom:2.5vw}
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}
.bigtext {font-size:1.25rem;line-height:1.3em}

.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, .homelink canvas {position: absolute;top:0;left:0;width:100%;height:100%;transition:opacity 0.5s;opacity:0}
.buttonlink:hover canvas, .homelink: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,  .buttonlink.darkgreentext .buttontext:before {background:#1e5046}
.lighttext .buttontext:before {background:#F1F0EC}
.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;transition:transform 0.5s}
.scrolled .navholder {pointer-events: none;}
.scrolled .navbar {transform: translateY(-140px);pointer-events: all;}
.navbar .buttonlink {border:1px solid #1e5046;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:#1e5046;text-decoration: none;margin-right:0.5rem}
.subnav a:before {content:'';display:block;width:1rem;height:1px;background:#1e5046;margin-right:0.5rem}
.subnav a:hover {text-decoration: underline;}


/**** office nav ****/
.officenav.navholder {padding:2.5vw;box-sizing: border-box;padding-top:clamp(10px,2.5vw,40px)}
.officenav .navbar {background:#EBDCB9;height:60px;margin:0 auto;max-width:1600px}
.officenav .navbar .buttonlink {font-size:0.8rem;line-height:1em;height:60px;box-sizing: border-box;flex:1 1;}
.officenav .navbar .buttonlink:nth-child(3) {margin:0;border-left:none}
.officenav .navbar .buttonlink:nth-child(4) {margin:0;border-right:none}
.officenav .homelink.desktop {position: relative;display:flex;align-items:center;justify-content: center;border-top:1px solid #1e5046;border-bottom:1px solid #1e5046;height:60px;box-sizing: border-box;flex:1 1 20%}
.officenav .navbar .homelink .navlogo {position: relative;z-index:10;display: block;height:18px;width:100%;background:url(/img/content/elephantlogo.svg) 50% 50% no-repeat;background-size: contain}



/**** 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:#1e5046}
.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 5vw;height:1px;transform-origin: 0% 0%;}
.footer2 h2 {margin:0}
.footer2 .buttonlink {border-color: #1e5046;flex:0 0 auto;padding:0.75rem 1.5rem;background-color:transparent}

.footer3 {background:#F1F0EC;box-sizing: border-box;padding:3vw 2.5vw;}
.footer3 a {color:#1e5046}
.footer3inner {display:flex;align-items:flex-start;justify-content: space-between;border-bottom:1px solid #1e5046;padding-bottom:5vw;gap:2rem}
.elefoot {flex:1 1}
.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}
.agencies {flex: 1 1;display:flex}
.agency {display:flex;gap:2vw}
.copyright {padding:2vw 0 0 0 ;font-size:12px}

/**** office footer ****/
.officefooter1, .officefooter2 {padding:5vw 2.5vw 0vw 2.5vw;position:relative;box-sizing: border-box;}
.lineheading {display:flex;text-align: center;align-items: center;margin-bottom:4vw}
.lineheading .text {background:#F1F0EC;flex:0 0 14ch}
.lineheading .line {background:#1e5046;height:1px;flex:1 1}
.lineheading .line:first-child {transform-origin: 100% 100%;}
.lineheading .line:last-child {transform-origin: 0% 0%;}
.officefooter1buttons {display:flex;gap:2rem}
.officefooter1 .buttonlink {background:url(/img/ui/lightgrad-flip.jpg) 50% 50% repeat-y;background-size: 100% auto;border:none;flex-direction: column;padding:1rem 0 0 0;flex:1 1}
.officefooter1 .buttonlink .pic {position:relative;z-index:500;margin-top:1rem;width:100%;height:20vw}

.officefooter2buttons {display: flex;justify-content: center;gap:2rem;padding:0 10vw;padding-bottom:5vw;position:relative}
.officefooter2buttons .buttonlink {border:0;flex:1 1;max-width:300px}
.officefooter2buttons .connectedline {height:1px;width:100%;transform-origin: 50% 50%;position:absolute;bottom:0;left:0;}

.officefooter3 {padding:7.5vw 2.5vw}
.footer3clip {position:relative;}
.officefooter3inner {position:relative;overflow:hidden;}
.footer3clip:before, .footer3clip:after {content:'';display:block;height:5px;background:#F1F0EC;position:absolute;left:0;width:100%;z-index:100}
.footer3clip:before {top:-2px}
.footer3clip:after {bottom:-2px}
.footercanvas {position:absolute;top:0;left:0;width:100%;height:calc(100% + 20vw)}
.officefooter3 img {position:relative;display:block;pointer-events: none;}



/**** 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: #1e5046;}
  
  .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: #1e5046;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}
  
  .downloadsuccess {width:100%;margin-top:3rem;text-align:center;animation: fadeIn 0.5s ease-in-out}
  .downloadsuccess h2 {margin-bottom:1rem}
  .downloadsuccess p {margin-bottom:2rem}
  .downloadbuttons {display:flex;flex-direction:row;gap:1rem;align-items:center;justify-content:center;width:100%;flex-wrap:wrap}
  .download-file-btn {margin:0 !important;width:auto;min-width:200px}
  
  @keyframes fadeIn {
    from {opacity:0;transform:translateY(20px)}
    to {opacity:1;transform:translateY(0)}
  }
  
  .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: #1e5046;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 #1e5046;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:2.5vh;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:#1e5046;}
.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:#1e5046;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:#1e5046;background:url(/img/content/intro/officebg.jpg) no-repeat 50% 58%;background-size:35vh auto}
.retailcol .colreveal {color:#1e5046;background:url(/img/content/intro/retailbg2.jpg) no-repeat 50% 48%;background-size:35vh auto}
.active .colreveal {clip-path: circle(80vh at 50% 58%);background-size:55vw auto;transition:clip-path 2s, background 1s;}
.introtint {background: linear-gradient( 0deg, rgba(241, 240, 236, 0) 0%, rgba(241, 240, 236, 0.75) 65%, rgba(241, 240, 236, 0.6) 88%, rgba(241, 240, 236, 1) 100% );position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity 1s}
.coltop {position:relative}
.retailcol.active .colreveal {background-size:55vw auto;background-position:bottom center}
.retailcol.active .introtint {opacity:1}
.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 #1e5046;border-right:1px solid #1e5046;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 p {font-size:1.2rem;line-height:1.3em}
.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:auto;box-sizing: border-box;width:100%;}
.destination .picholder img {width:100%;height:auto;display: block;}
/*.destination .picholder .pic {width:100%;height:100%;background-position:50% 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:100%;position:absolute;top:0;right:0;z-index:1000;padding:2.5vw;display: flex;align-items:center;justify-content: center;}
.shopfronts:before, .shopfronts:after {content:'';height:100%;flex:1 1;background:url(/img/ui/elephantpatterndarkgreen.svg) top center;background-size:auto 10vh;box-sizing: border-box;}
.shopfronts:before {margin:0 2.5vw 0 -2.5vw;border:1px solid #1e5046;background-position:right center}
.shopfronts:after {margin:0 -2.5vw 0 2.5vw;border:1px solid #1e5046;background-position:left center}

@media (max-aspect-ratio: 13.25/9) {
  .shopfronts:before, .shopfronts:after {display:none}
}

.shopfronts img {display:block;max-width:100%;max-height:100%;}
.shopfronts .pic {width:100%;height:100%;background-position: bottom center;background-size:contain}

.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}
.smallaerial {display:none !important}

.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:#1e5046}
.connectedline.line1 {width:1px;height:5vw;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:#1e5046;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}
.assetterrace {width:100%;height:100%}
.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, 6vh, 64px);line-height:1.2em;max-width:30ch;box-sizing: border-box;padding:0 2.5vw;}
/* Portrait: height is greater than width */
@media (aspect-ratio: 1/1), (max-aspect-ratio: 1/1) {
  .assetintroholder .destination h1 {font-size:clamp(40px, 4vw, 64px)}
}

/* Landscape: width is greater than height */
@media (min-aspect-ratio: 1/1) {
  .assetintroholder .destination h1 {font-size:clamp(40px, 6vh, 64px);}
}

.retailintro .destination .text {height:calc(80vh - 140px);padding-top:25vh;padding-bottom:15vh;box-sizing: border-box;}

.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:#1e5046}
.assetline5 {transform-origin: 0% 0%;}
.linecircle {height:12px;flex:0 0 12px;border:1px solid #1e5046;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: #1e5046;background-color: transparent;}

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

.portfolio {padding:5vw 2.5vw 0 2.5vw}
.portfolio h2 {text-align: center;padding:4vw 0;/*border-top:1px solid #1e5046;border-bottom:1px solid #1e5046;*/position:relative}
.portfolio .portfoliohead1 {content:'';position:absolute;top:0;left:0%;width:100%;height:1px;transform-origin: 50% 50%;background:#1e5046}
.portfolio .portfoliohead2 {content:'';position:absolute;bottom:0;left:0%;width:100%;height:1px;transform-origin: 50% 50%;background:#1e5046}
.portfoliosubhead {text-align: center;padding:5vw 10vw;box-sizing: border-box;position:relative;margin-bottom:2.5vw}
.portfoliosubhead p {max-width:70ch;margin-left:auto;margin-right:auto}
.portfoliosubhead p:last-child {margin-bottom:0}

.portfoliogrid {display:flex;align-items: stretch;flex-wrap: wrap;}
.portfolioitem {padding:0 2.5vw;box-sizing: border-box;flex:0 0;flex-basis:calc((100% - 2px) / 3)}
.portfolioitem .pic {width:100%;height:20vw;margin-bottom:2rem}
.portfolioitem .text {padding-right:2.5vw}
.portfolioitem h4 {margin-bottom:0.5rem}
.portfolioitem .bigtext {margin-bottom:2rem}
.portfolioitem p {max-width:30ch}
.portfoliospacer {flex:0 0 1px;transform-origin: 0% 0%;background:#1e5046;transition:transform 2s;transform:scaleY(0)}
.portfoliogrid > .portfoliospacer:nth-child(4) {flex:0 0 100%;transform-origin: 50% 50%;height:1px;margin:2.5vw 0;transform:scaleX(0) scaleY(1)}
.portfoliospacer.drawn {transform:scaleY(1) scaleX(1) !important}

.portfoliogrid .portfolioitem.liberty {flex-basis:calc(((100% - 2px) / 3) * 2);display:flex}
.portfoliogrid .portfolioitem.liberty .pic {flex:0 0 50%;height:auto;margin-right:2.5vw;margin-bottom:0}
.portfoliogrid .portfolioitem.liberty .text {display: flex;justify-content: flex-end;flex-direction: column;}
.portfoliolines {width:100%;height:5vw;position:relative;margin-top: 2.5vw;}
.portfolioline1 {position:absolute;top:0;left:0%;width:100%;height:1px;transform-origin: 50% 50%;}
.portfolioline2 {position:absolute;top:0;left:50%;width:1px;height:100%;transform-origin: 0% 0%;}


/**** retail shops ****/
.s3 .retailintro, .s4 .retailintro {display:flex;flex-direction: column;align-items:center;justify-content: center;text-align: center;padding-top:15vh;padding-bottom:15vh;box-sizing: border-box;position: relative;height:calc(100vh - 140px)}
.introelephants {position:absolute;top:0;left:0%;width:100%;height:100%;pointer-events: none;z-index:400;background:url(/img/ui/elephantpatterndarkgreen.svg) top center;background-size:auto 10vh;opacity:0.5;/*transition:opacity 2s;*/}
.introelephants:before, .introelephants:after {content:'';position:absolute;top:0;left:0;width:100%;height:100%;pointer-events: none;}
.introelephants:before {background:radial-gradient(
  circle 50vw at 50% 50%,
  rgba(241, 240, 236, 1) 0%,
	rgba(241, 240, 236, 0.8) 75%,
  rgba(241, 240, 236, 0) 100%
);}
.introelephants:after {top:unset;bottom:0;height:10vw;background: linear-gradient(
  to top,
  rgba(241, 240, 236, 1) 0%,    /* opaque at the bottom */
  rgba(241, 240, 236, 0.7) 25%,
  rgba(241, 240, 236, 0.4) 50%,
  rgba(241, 240, 236, 0.15) 75%,
  rgba(241, 240, 236, 0) 100%    /* fully transparent at the top */
);
}
/*.introelephants.fading {transition:opacity 2s;}
.scrolled .introelephants {opacity:0;}*/
.retailintro p {margin-bottom:2rem;position:relative;z-index:500}
.retailintro h2 {max-width:40ch;position:relative;z-index:500}

.shopsmapholder {padding:0 1rem}

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

.shopsmap .st0, .shopsmap .st1 {
fill: #1e5046;
}

.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:10vw 2.5vw 10vw 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;gap:1rem}
.flagitem h2 {margin:0}
.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;line-height:1.3em}
.flagitem p span {font-size:0.8em}
.flagitem img {width:clamp(80px, 50%, 220px)}

/**** restaurants ****/
.mapsection {position:relative}
#map {width:100%;height:95vh;display:block}
.mapsection #list {position:absolute;top:2.5vw;left:2.5vw;z-index:900;background:#F1F0EC;padding:2vw;border:1px solid #1e5046;width:clamp(300px, 27.5vw, 480px);color:#1e5046}
#list .panel {border-top:1px solid #1e5046;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 #1e5046;}
#list .panel ul {list-style-type: none;margin:0;padding:0;max-height:0;overflow:hidden;transition: max-height 0.5s;display:flex;flex-wrap: wrap;}
#list .panel ul li {margin:0;flex:1 1 50%;}
#list .panel .listnum {display:inline-block;width:2ch;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:400px}

#restaurants .sectioncolour {background:#D5552B}
#bars .sectioncolour {background:#1e5046}
#cafes .sectioncolour, #culture .sectioncolour {background:#D58C3C}
#hotels .sectioncolour {background:#3268CA}
#comingsoon .sectioncolour, #entertainment .sectioncolour {background:#A8C099}

#test1 .sectioncolour {background:#00ff00}

.building-marker {z-index:500}
.mapboxgl-popup.show {z-index:600}

.building-bubble {pointer-events: none;width:90px;height:90px;background:#83c7ba;padding:10px;border-radius:50%;display:flex;align-items:center;justify-content: center;box-sizing: border-box;margin-top:-20px}
.building-bubble svg {width:100%;height:auto}
.building-bubble svg path {fill:#1e5046}

.officemap .building-bubble {background:#1e5046}
.officemap .building-bubble svg path {fill:#f1f0ec}



#map .marker {cursor: pointer;transition: opacity 0.25s 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:#D5552B}
#map .marker.marker-bars .markernum,
#map .marker.marker-bars .markerstem {background:#1e5046;color:#F1F0EC}
#map .marker.marker-cafes .markernum,
#map .marker.marker-cafes .markerstem,
#map .marker.marker-culture .markernum,
#map .marker.marker-culture .markerstem {background:#D58C3C}
#map .marker.marker-hotels .markernum,
#map .marker.marker-hotels .markerstem {background:#3268CA;color:#F1F0EC}
#map .marker.marker-comingsoon .markernum,
#map .marker.marker-comingsoon .markerstem,
#map .marker.marker-entertainment .markernum,
#map .marker.marker-entertainment .markerstem {background:#A8C099}
#map .marker.marker-x .markernum,
#map .marker.marker-x .markerstem {background:#D5552B}

#map .marker.marker-test1 .markernum, #map .marker.marker-test1 .markerstem {background:#00ff00}


.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:#1e5046;background:#F1F0EC !important;box-shadow: 0 1px 0px #B26300 !important;letter-spacing:0.025em;text-align:center}
.mapboxgl-popup-tip {border-top-color:#F1F0EC !important}

/**** office ****/
.so1 .wholepage {padding-top:0px;padding-bottom:100vh}
.so1:not(.scrolled) #smooth-wrapper {pointer-events: none !important;}
.so1:not(.scrolled) #smooth-wrapper a, .so1 #smooth-wrapper canvas {pointer-events: all !important;}
.officeintroholder {width:100%;height:100vh;position:fixed;overflow:hidden}
.officeintroholder .frame {width:100%;height:100vh;padding-top:calc(60px + 2.5vw);display: flex;align-items:center;justify-content: center;position:absolute;top:0;left:0;box-sizing: border-box;}
.so1.bigscroll .officeintroholder {pointer-events: none !important;}

.officeintroholder .frame1 {z-index:500;pointer-events: none}
.officeintroholder .downloadbg2 {z-index:490;background-image:url(/img/ui/lightgrad.jpg)}
.officeintroholder .downloadbg1 {z-index:480}
.officeintroholder .retailgradlightflip {z-index:470}
.officeintroholder .frame2 {z-index:460;pointer-events: none;}
.officeintroholder .canvasholder {position:absolute;top:0;left:0;width:100%;height:100%;z-index:450;}

.terracepic {width:100%;height:100vh;background:url(/img/content/office/terrace.png) top center no-repeat;background-size:100% auto;z-index:510;position:relative;top:0;left:0;will-change: transform;margin-top:100vh}
.pin-spacer {overflow: hidden !important;}

.sectionintro {text-align: center;padding:17.5vw 5vw}
.sectionintro h2 {max-width:30ch;margin:0 auto}
.sectionintro p {margin-bottom:2rem}
.sectionintro.smallpadding {padding:5vw 0 7.5vw 0}

.parapic {width:100%;box-sizing: border-box;/*height:90vh;*/box-sizing: border-box;padding:0 2.5vw;margin:2.5vw 0 0 0;overflow:hidden}
.parapic img {width:100%;height:auto}

.officecards {width:100%;height:100vh;position:relative;background:url(/img/ui/emeraldgrad.jpg) 50% 50% repeat-y;background-size:100% auto}
.mobilepic {display:none}
.officecard {position:absolute;top:0;left:0;width:100%;height:100%;display:flex;
align-items:center;justify-content: center;box-sizing: border-box;padding:0 2.5vw}
.officecard {background:url(/img/ui/emeraldgrad.jpg) 50% 50% repeat-y;background-size:100% auto;padding:7.5vw}
.officecard .text {position:relative;padding-right:7.5vw}
.officecard .text p {max-width:40ch;margin-bottom:3rem}
.officecard .pic {height:100%;aspect-ratio: 1 / 1;max-width:50vw}
.officecard .buttonlink {width:220px;border:none;margin:0 0 2rem 0;white-space: nowrap;font-size:0.8rem;padding:0.8rem 1.2rem}
.officecard .buttonlink:last-child {margin:0}
.officecard.cardgreen .buttonlink {background:url(/img/ui/lightgrad.jpg) 50% 50% repeat-y;background-size:100% auto}
.officecard1 {z-index:100}
.officecard2 {z-index:200}
.officecard3 {z-index:300}
.officecard4 {z-index:400}


.cardbg1 {background:url(/img/ui/elephantpatterndarkgreen.svg) top center;background-size:auto 10vh;position: absolute;top:0;left:0;width:100%;height:100vh;}

.cardbg2 {
  position: absolute;
  width: 100%;
  height: 100vh;
  background-size: 100% auto;
}

.officecard.cardgreen {background-image:url(/img/ui/emeraldgrad.jpg)}
.cardgreen .cardbg1 {background-image:url(/img/ui/elephantpatternwhite.svg) ;opacity:0.5}

.cardgreen .cardbg2 {
  background: url(/img/ui/emeraldgrad.jpg) 50% 50% repeat-y;
  /* Diagonal mask */
  -webkit-mask-image: linear-gradient(-135deg, black 0%, black 75%, transparent 100%);
  mask-image: linear-gradient(-135deg, black 0%, black 75%, transparent 100%);

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

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background-size:100% auto;
}

.officecard.cardlight {background-image:url(/img/ui/lightgrad.jpg);flex-direction: row-reverse;}
.officecard.cardlight .text {padding-left:7.5vw;padding-right:0}
.cardlight .cardbg1 {opacity:1}
.officecard.cardlight .buttonlink {background-image:url(/img/ui/emeraldgrad.jpg);}

.cardlight .cardbg2 {
  background: url(/img/ui/lightgrad.jpg) 50% 50% repeat-y;
  /* Diagonal mask */
  -webkit-mask-image: linear-gradient(135deg, black 0%, black 75%, transparent 100%);
  mask-image: linear-gradient(135deg, black 0%, black 75%, transparent 100%);

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

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/**** building ****/
.so2 .wholepage {padding-top:100px}
.buildingheading {text-align: center;padding:5vw 0 2.5vw 0}
.buildingheading h2 {margin:0}

.officescheme {position:relative;margin:0 2.5vw;width:calc(100% - 5vw)}
.officescheme .scheme {padding-left:17.5vw;padding-right:17.5vw}
.officescheme .assetline8 {width:100%;height:1px;position:absolute;bottom:0;left:0;transform-origin: 50% 50%;background:#1e5046;}
.schemebottom {height:5vw;position:relative;width:calc(100% - 5vw);box-sizing: border-box;margin:0 2.5vw;background:#F1F0EC}
.schemebottom.bigbottom {height:15vw}
.assetline9, .assetline10, .assetline12, .assetline14 {position:absolute;top:0;left:50%;width:1px;height:100%;transform-origin: 0% 0%;background:#1e5046;}
.assetline11, .assetline13 {width:100%;height:1px;position:absolute;bottom:0;left:0;background:#1e5046;transform-origin: 50% 50%;}
.assetline12 {z-index:500}
.assetline13 {top:0;bottom:auto;}

.schemebg1 {background:url(/img/ui/elephantpatterndarkgreen.svg) 50% 50%;background-size:auto 10vh;position:absolute;top:0;left:0;width:100%;height:100%;opacity:0.4}

.schemebg2 {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #F1F0EC;
  background-size: 100vw auto;

  /* Mask */
  -webkit-mask-image: radial-gradient(
    circle farthest-side at 50% 0%,
    black 0%,
    black 85%,
    transparent 100%
  );
  mask-image: radial-gradient(
    circle farthest-side at 50% 0%,
    black 0%,
    black 85%,
    transparent 100%
  );

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

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.togglepic {width:calc(100% - 5vw);margin:0 2.5vw;height:90vh;position:relative}
.togglepic .pic {position:absolute;top:0;left:0;width:100%;height:100%;transition:opacity 0.5s}
.toggle {cursor: pointer;display:flex;position:absolute;bottom:2.5vw;left:0;width:100%;z-index:500;justify-content: center;align-items:center;}
.togglebutton {flex:0 0 100px;height:34px;box-sizing: border-box;position:relative;border:2px solid #F1F0EC;border-radius: 18px;margin:0 1rem}
.togglebutton::before {content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;background:#1e5046;border-radius: 50%;transition: background 0.2s, left 0.5s;}
.toggle:hover .togglebutton::before {background:#EBDCB9}
.togglepic.cata .togglebutton::before {left:69px}
.togglepic.cata .fitout {opacity:0}

.areas {padding:0 2.5vw;display:flex;height:90vh;align-items: center;position:relative}
.availabletable {flex:0 0 50%;font-size:0.75rem;line-height:1.2em;text-align:center}
.availabletable .tablebig {font-size:1rem;line-height:1em;margin-bottom:0.25rem}
.availabletable .tablesmall {margin:0 0 0.25rem}
.availabletable .col1 {text-align: left;padding-left:0.5rem}
.availabletable .nib {font-size:2rem}
.availabletable .buttonlink {border:0;padding:0.75rem 1rem;width:70px;box-sizing: border-box;font-size:1rem}
.availabletable td {border-bottom: 1px solid #1e5046;vertical-align: middle;height:2rem;padding:1vh 0}
.buttoncol {width:90px;}

.availabletable tr {transition:background 0.2s}
.availabletable tr.trfa {cursor: pointer;}
.availabletable tr.trfa:hover {background:#fff}
.availabletable tr.active {background:url(/img/ui/lightgrad.jpg) 50% 50% repeat-y;background-size:100% auto;}
.floornum {width:1ch;text-align: center;}

.mobfloors {display:none}

.planside {flex:0 0 50%;height:100%;position:relative}
.floorplanholder {width:100%;height:100%;display:flex;align-items:center;justify-content: center;overflow: hidden;}
.floorplan {flex:0 0 80%;height:80%;background:url(/img/content/building/plans/third.svg) 50% 50% no-repeat;background-size: contain;}

.eighth .floorplan {background-image:url(/img/content/building/plans/eighth.svg)}
.seventh .floorplan {background-image:url(/img/content/building/plans/seventh.svg)}
.sixth .floorplan {background-image:url(/img/content/building/plans/sixth.svg)}
.fifth .floorplan {background-image:url(/img/content/building/plans/fifth.svg)}
.fourth .floorplan {background-image:url(/img/content/building/plans/third.svg)}
.third .floorplan {background-image:url(/img/content/building/plans/third.svg)}
.second .floorplan {background-image:url(/img/content/building/plans/second.svg)}
.first .floorplan {background-image:url(/img/content/building/plans/first.svg)}
.ground .floorplan {background-image:url(/img/content/building/plans/ground.svg)}

.fourth.cavendish .floorplan,
.third.cavendish .floorplan {background-image:url(/img/content/building/plans/third-cavendish.svg)}
.fourth.henrietta .floorplan,
.third.henrietta .floorplan {background-image:url(/img/content/building/plans/third-henrietta.svg)}
.fourth.oxford .floorplan,
.third.oxford .floorplan {background-image:url(/img/content/building/plans/third-oxford.svg)}
.fourth.split .floorplan,
.third.split .floorplan {background-image:url(/img/content/building/plans/third-split.svg)}


.plancontrols {position:absolute;top:2.5vw;right:2.5vw;display:inline-flex;z-index:500;background:url(/img/ui/lightgrad.jpg) 50% 50% repeat-y;background-size:100% auto;width:120px}
.plancontrols a {flex:0 0 40px;height:40px;border:1px solid #1e5046;cursor: pointer;transition: background 0.2s;background: 50% 50% no-repeat;background-size:100% auto;border-right:none;box-sizing: border-box;}
.plancontrols a:last-child {border-right:1px solid #1e5046}
.plancontrols .floorplan-zoom-in {background-image:url(/img/ui/planzoom/zoomin.svg)}
.plancontrols .floorplan-zoom-out {background-image:url(/img/ui/planzoom/zoomout.svg)}
.plancontrols .floorplan-zoom-reset {background-image:url(/img/ui/planzoom/zoomreset.svg)}
.plancontrols a:hover {background-color:#fff}
.planside .north {position:absolute;top:2.5vw;left:2.5vw;width:40px;height:40px;background:url(/img/content/building/north.svg) 50% 50% no-repeat;background-size: contain;}


.spacedropholder {position:absolute;top:0;left:0;pointer-events: none;width:100%;display:flex;justify-content: center;box-sizing: border-box;padding:2.5vw calc(5vw + 120px) 0 calc(5vw + 120px);z-index:500;opacity:0;transition: opacity 0.2s;pointer-events: none;}
.third .spacedropholder,
.fourth .spacedropholder,
.third .spacedropholder .buttonlink,
.fourth .spacedropholder .buttonlink {opacity:1;pointer-events: all}
.spacedropholder .buttonlink {background:url(/img/ui/lightgrad.jpg) 50% 50% repeat-y;background-size:100% auto;width:100%;border-color:#1e5046;position:relative;width:75%;min-width:140px;justify-content: space-between;padding:0 1rem;height:40px;box-sizing: border-box;}
.spacedropholder .buttonlink:after {content:'';width:14px;flex:0 0 14px;height:14px;background:url(/img/ui/downarrow.svg) 50% 50% no-repeat;background-size:contain;transition: transform 0.5s;z-index:100;transform:rotate(-90deg)}
.spacedropholder .buttonlink.spacedropopen:after {transform:rotate(0deg)}
.spacedropdown {position:absolute;top:38px;left:-1px;width:calc(100% + 2px);overflow:hidden;max-height:0;transition: max-height 0.5s;}
.spacedropdown ul {width:100%;list-style-type: none;margin:0;padding:0;border:1px solid #1e5046;background:#F1F0EC;display:flex;flex-direction:column;text-align:left;align-items:left;padding:1rem;pointer-events: all;box-sizing: border-box;font-size:0.75rem;line-height:1em;}
.spacedropopen .spacedropdown {max-height:300px}

.spacedropdown li {cursor: pointer;margin:0;padding:0;border-bottom:1px solid #1e5046;padding:0.5rem 0}
.spacedropdown li:hover {text-decoration: underline;}
.spacedropdown li:last-child {border-bottom:none;padding-bottom:0}
.spacedropdown li:first-child {padding-top:0}

.keybutton {position:absolute;bottom:0;left:1px;z-index:500;padding:0 0 2.5vw 0;display:flex;flex-direction: column;width:100%;background:#F1F0EC;padding-top:1rem}
.keybutton .buttonlink {border:0;width:150px;margin:0 auto}
.key {list-style-type: none;margin:0;padding:0 0 2.5vw 0;display:flex;width:100%;justify-content: center;align-items: center;}
.key li {display:flex;align-items:center;margin:0 1rem;flex:0 0 auto;display:none}
.key li:before {content:'';display:inline-block;width:1rem;height:1rem;margin-right:0.5rem;border-radius:50%}
li.officereception:before {background-color: #a8c099;}
li.retail:before {background-color: #e2ae77;}
li.gym:before {background-color: #778f9b;}
li.restaurant:before {background-color: #d58c3c;}
li.office:before {background-color: #A8C099;}
li.wintergardens:before {background-color: #e2ae77;}
li.terrace:before {background-color: #e2ae77;}
li.core:before {background-color: #F2E2CE;}

.ground .officereception,
.ground .retail,
.ground .gym,
.ground .restaurant,
.second .office,
.second .wintergardens,
.second .core,
.third .office,
.third .core,
.fourth .office,
.fourth .core,
.seventh .office,
.seventh .terrace,
.seventh .core,
.eighth .office,
.eighth .terrace,
.eighth .core {display:block}

.buildingcarousel {position:relative;width:100%;height:42vw}
.buildingcarousel .slide {height:42vw;width:65vw;margin:0 1rem}
.buildingcarousel:before,.buildingcarousel:after {content:'';display:block;background: linear-gradient(-90deg,rgba(241, 240, 236, 0) 0%, rgba(241, 240, 236, 1) 100%);width:17.5vw;height:42vw;position:absolute;top:0;left:0;pointer-events: none;z-index:1000}
.buildingcarousel:after {left:unset;right:0;background: linear-gradient(90deg,rgba(241, 240, 236, 0) 0%, rgba(241, 240, 236, 1) 100%)}
.slick-arrow {position:absolute;z-index:1100;width:60px;height:60px;border-radius: 50%;background: url(/img/ui/emeraldgrad.jpg) 50% 50% repeat-y;background-size:100% auto;cursor: pointer;border:1px solid #F1F0EC;text-indent: -9999px;overflow: hidden;top:calc(50% - 30px);transition:border 0.2s;display:flex;align-items: center;justify-content: center;}
.slick-arrow .arrow-icon {flex:0 0 75%;height:75%;background:url(/img/ui/leftarrow2.svg) 50% 50% no-repeat;background-size: contain;transition: transform 0.5s;}
.slick-arrow.slick-prev .arrow-icon {background-image:url(/img/ui/leftarrow2.svg)}
.slick-arrow.slick-next .arrow-icon {background-image:url(/img/ui/rightarrow2.svg)}
.slick-arrow.slick-prev {left:5vw;}
.slick-arrow.slick-next {right:5vw;}
.slick-arrow:hover {border-color: #B26300;}

.buildingspec {padding:5vw 7.5vw;display:flex;flex-wrap: wrap;text-align: center;}
.buildingspec .specitem {flex:0 0 25%;box-sizing: border-box;padding:2vw}
.buildingspec .specicon, .specholder .specicon {margin-bottom:3rem;width:100%;aspect-ratio: 4 / 2.5;display:flex;align-items: center;justify-content: center;}
.specicon svg, .specicon img {width:clamp(100px, 10vw, 150px)}

/**** location ****/
.so3 .wholepage {padding-top:0px}
.locintroholder {position:relative;box-sizing: border-box;width:100%;height:100vh;color:#D58C3C;padding:calc(5vw + 60px) 2.5vw 2.5vw 2.5vw}
.locintroinner {position:relative;width:100%;height:100%}
.loccol {position:absolute;top:0;width:calc(50% - 1.25vw);height:100%;display:flex;flex-direction: column;}
.locleft {left:0;}
.locright {right:0;}
.lochead {height:5vw;display:flex;padding:1vw 0;transform-origin: 50% 50%;align-items: center;}
.locheadinner {font-size:5vw;line-height:1em;display:flex;transform-origin: 50% 50%;width:100%}
.locleft .locname {padding-right:0.4em}
.locright .locname {padding-left:0.4em}
.locarrow {flex:1 1;height:1em;background:no-repeat;background-size:auto 100%;display:flex;align-items:center;position:relative}
.locarrow svg {position:absolute;top:0;height:100%;width:auto}
.locarrow svg path {stroke-width: 1px;}
.locleft .locarrow svg {left:0}
.locright .locarrow svg {right:0}
/*.locleft .locarrow {background-image:url(/img/content/location/intro/arrowheadleft.svg);background-position:left center}
.locright .locarrow {background-image:url(/img/content/location/intro/arrowheadright.svg);background-position: right center;}*/
.locarrow:before {content:'';flex:1 1;background:#D58C3C;height:1px}
.locpic {width:100%;flex:1 1;clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
.locleft .locpic {background-image:url(/img/content/location/intro/marylebone.jpg)}
.locright .locpic {background-image:url(/img/content/location/intro/mayfair.jpg)}

.extholder {position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:flex-start;justify-content: center;z-index: 100;}
.extholder .ext {background:url(/img/content/location/intro/ext.png) bottom center no-repeat;background-size:contain;flex:0 0 60%;height:60vh;transform-origin: 50% 50%;max-width:50vw}

.locintroholder .locintrofoot {position:absolute;bottom:-2.5vw;left:0;height:calc(100% - 60vh + 2.5vw);text-align:center;width:100%;}
.locintroholder .locintrofoot .locintrofootinner {width:100%;height:100%;display:flex;align-items:center;justify-content: center}
.locintroholder .connectedline {width:1px;height:calc(100% + 50px);position:absolute;top:-50px;left:50%;background: #D58C3C;transform-origin: 0% 0%;;}
.locintroholder h2 {margin:0;background:url(/img/ui/emeraldgrad.jpg) 50% 50% repeat-y #1e5046;background-size:100vw auto;position:relative}

.so3 #map {height:90vh}

.loccarousel {position:relative;width:100%;height:90vh}
.loccarousel .slide {width:100%;height:90vh}
.loccarousel .slideinner {box-sizing: border-box;padding:7.5vw;display:flex;align-items:flex-start;height:100%;width:100%}
.loccarousel h2 {margin-bottom:3rem}
.loccarousel p.goldtext {margin-bottom:2rem}
.loccarousel .text {flex:1 1;padding-right:10vw}
.loccarousel .pic {height:100%;aspect-ratio: 1 / 1;flex:1 1}
.loccarousel .slidetext {/*font-size:1.25rem;line-height:1.3em;*/max-width:35ch}
.loccarousel .slick-arrow {top:unset;bottom:10vw}
.loccarousel .slick-prev {left:7.5vw}
.loccarousel .slick-next {left:calc(7.5vw + 140px);right:unset}

.sectionintro.locsection {padding-bottom:0vw;padding-top:7.5vw}

.connections {background:url(/img/ui/lightgrad.jpg) 50% 50% repeat-y;background-size:100% auto;}
.connectionsmob {display:none}

.connections .st0 {
        stroke: #6c4796;
      }

      .connections .st0, .connections .st1, .connections .st2, .connections .st3, .connections .st4, .connections .st5, .connections .st6, .connections .st7, .connections .st8, .connections .st9, .connections .st10 {
        stroke-miterlimit: 10;
      }

      .connections .st0, .connections .st1, .connections .st6, .connections .st8, .connections .st9 {
        fill: #d58c3c;
        stroke-width: .5px;
      }

      .connections .st11, .connections .st3, .connections .st4, .connections .st5, .connections .st7, .connections .st10 {
        fill: none;
      }

      .connections .st12 {
        fill: #1e5046;
      }

      .connections .st1, .connections .st10 {
        stroke: #935629;
      }

      .connections .st2 {
        fill: #e6ba8a;
        stroke: #1e5046;
      }

      .connections .st13 {
        fill: #0097d4;
      }

      .connections .st14 {
        fill: gray;
      }

      .connections .st15 {
        fill: #f7e8d8;
      }

      .connections .st16 {
        fill: #935629;
      }

      .connections .st3 {
        stroke: #654595;
      }

      .connections .st17 {
        fill: #eed1b1;
      }

      .connections .st4, .connections .st6 {
        stroke: #0097d4;
      }

      .connections .st5, .connections .st8 {
        stroke: gray;
      }

      .connections .st18 {
        fill: #654595;
      }

      .connections .st19 {
        fill: #e42313;
      }

      .connections .st7, .connections .st9 {
        stroke: #e42313;
      }

      .connections .st20 {
        fill: #eac69e;
      }

      .connections .st21 {
        fill: #c58511;
      }

      .connections .st22 {
        fill: #1e5046;
      }

      .connections .st23 {
        fill: #f3ddc5;
      }

      .connections .st24 {
        clip-path: url(#clippath);
      }


/**** details ****/
.so4, .so3 {background:url(/img/ui/emeraldgrad.jpg) 50% 50% repeat-y #1e5046;background-size:100% auto;color:#F1F0EC}
.so4 .officenav .navbar .homelink .navlogo, .so3 .officenav .navbar .homelink .navlogo {background-image:url(/img/content/elephantlogogold.svg)}
.so4 .officenav .navbar, .so3 .officenav .navbar {/*background:url(/img/ui/emeraldgrad.jpg) 50% 50% repeat-y;background-size:100% auto;*/background:#0C342C}
.so4 .officenav .navbar .buttonlink, .so3 .officenav .navbar .buttonlink {border-color:#D58C3C;color:#D58C3C}
.so4 .officenav .darkgreentext .buttontext::before, .so3 .officenav .darkgreentext .buttontext::before {background:#D58C3C}
.so4 .officenav .homelink.desktop, .so3 .officenav .homelink.desktop {border-color:#D58C3C}
.so4 .sectionintro h2, .so3 .sectionintro h2 {max-width:40ch}
.so4 .footer3, .so3 .footer3 {color:#1e5046}

.specholder {padding:10vw 0;margin:0 auto;width:60vw}
.speccarousel {height:90vh;max-height:800px;width:60vw}
.specholder .slide {height:90vh;max-height:800px;width:20vw;box-sizing: border-box;padding:0 1.25vw;text-align:center}
.specholder .slideinner {height:100%;display:flex;flex-direction: column;align-items:center;justify-content: center;gap:1rem}
.specholder .specitem {flex:0 0;flex-basis:calc(50% - 1rem);width:100%;}
.specholder .slick-arrow {top:calc(50% - 30px)}
.specholder .slick-prev {left:-5vw}
.specholder .slick-next {right:-5vw}

.speccarousel svg {width:50%;height:100%}
.speccarousel .specicon {max-height:18vh}

.detailspec {padding: 0 2.5vw;}
.detailsholder {background:url(/img/ui/lightgrad.jpg) 50% 50% repeat-y;background-size:100% auto;padding:2.5vw;box-sizing: border-box;}


/**** office tour ****/
.officetwinholder {height:90vh;width:calc(100% - 5vw);margin:0 auto}
.detail {border-bottom:1px solid #1e5046}
.detail:first-child {border-top:1px solid #1e5046}
.detail h2 {padding:1rem;margin:0;position:relative;cursor: pointer;}
.detailhead {display:inline-block;position:relative}
.detailhead:before {content: '';display:block;position:absolute;top:1.1em;left:0;width:100%;height:1px;background:#1e5046;transform-origin: 0% 0%;transition:transform 0.5s;transform:scaleX(0)}
.detail h2:hover .detailhead:before {transform: scaleX(1);}
.detailhide {max-height:0;overflow:hidden;transition:max-height 0.5s}
.detailinner {padding:0 1rem 2rem 1rem}
.detailinner p {max-width:50ch}
.detailinner p:last-child {margin-bottom:0}

.detailspec .sectionintro {padding:12.5vw 5vw}
.detail h2:before {content:'View';font-family: 'NeueRational';font-weight:300;font-size:1rem;position:absolute;right:3rem;top:0.8em}
.detail h2:after {content:'';position:absolute;right:10px;top:0.85em;display:block;width:14px;height:14px;background:url(/img/ui/downarrow.svg) 50% 50% no-repeat;background-size:contain;transition:transform 0.5s}
.detail.active h2:after {transform:rotate(180deg)}
.detail.active .detailhide {max-height:300px}

/****************************************************
* 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}
.nocaps {text-transform:none;letter-spacing:0em}
.num {text-align:right}


.revealOnScroll.fadeInUp {
  opacity: 0;
}


/* #Media Queries
================================================== */
	
	/* biggerer desktop */
	@media only screen and (max-width: 1310px) {
		h1 {font-size:3.5rem;line-height:1.2em;}
		h2 {font-size:1.2rem;line-height:1.3em;}
		h4 {font-size:20px;line-height:1.3em;}
		
		.portfolio h2 {font-size:2rem}
	
		.footer3 {font-size:0.8rem}
		.elephantfooter {height:20px}
		.pthree {height:20px}
		.savills {height:60px}
		
		.flagitem p {font-size:0.8rem;line-height:1.3em}
		
		.officefooter2buttons {gap:1rem;padding-left:0;padding-right:0}
		
		.spacedropholder {padding-left:calc(2.5vw + 40px + 20px);justify-content: flex-start;}
		.spacedropholder .buttonlink {max-width: unset;width:100%}
		.buildingspec {justify-content: center;}
		.buildingspec .specitem {font-size:0.75rem;line-height:1.3em}
		/*.buildingspec .specitem {flex-basis:calc(100% / 3)}*/
		.specholder {width:80vw}
		.speccarousel {width:80vw}
		.specholder .slide {width:calc(80vw / 3);font-size:0.8rem;line-height:1.3em}
	}
	
	/* bigger desktop */
	@media only screen and (max-width: 1229px) {
		.retailintro p {font-size:1rem;line-height:1.3em}
		/**** nav ****/
		.navbar .buttonlink {font-size:1.2rem;width:120px}
		
		/**** footer ****/
		.footer1line1 {height: calc(10vw + 14px);}
		.footer1line2 {top: calc(10vw + 14px);}
		.footer1col .footer1buttons a, .footer2 .buttonlink, .locationbuttons a {font-size:0.8rem;padding: 0.5rem 1.25rem;flex:0 0 120px}
		
		/**** location map ****/
		.mapsection #list {padding:2vw;top:2vw;left:2vw}
		#list .panel {padding: 0.75rem}
		#list .panel h4 {font-size:1.2rem}
		#list .panel ul {font-size:0.8rem;line-height:1.3em}
		.sectioncolour {width:0.8rem;height:0.8rem}
		
		/**** office ****/
		.officefooter1buttons {gap:1rem}
		.officefooter1buttons .buttonlink {font-size:14px}
		.loccarousel .text {padding-right:5vw}
		.loccarousel h2 {margin-bottom:2rem}
		.loccarousel .slidetext {font-size: 1rem;}
		.loccarousel p.goldtext {font-size:0.8rem;line-height:1.3em;margin-bottom:1rem}
		
	}

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width:1099px) {
		.flagshipgrid {gap:1rem;}
		.flagitem {flex-basis:calc(50% - 0.5rem);padding:1rem;}
		.flagitem p span {line-height:0.6rem}
	}
	
	/* smaller nav */
	@media only screen and (max-height:1050px), (max-width: 1750px) {
		.introcol .buttonlink {padding:0.5rem 0.75rem;font-size:0.75rem;line-height:1rem;width:140px}
		
		.wholepage {padding-top:80px}
		.navholder {height:80px}
		.navbar {height:80px}
		.scrolled .navbar {transform: translateY(-80px);}
		.scrolled.officesection .navbar {transform: translateY(-100px);}
		.navbar .buttonlink {font-size:1rem;line-height:1em;width:140px}
		.navbar .homelink img {height:45px}
		.s3 .retailintro, .s4 .retailintro {height:calc(100vh - 80px)}
		.retailintroholder, .assetintroholder {padding-top:80px}
		.retailintro,
		.retailintro .destination .text,
		.destination .picholder,
		#map  {height:calc(90vh - 80px)}
		
		/*.s1 .retailintroholder, .s1 .retailintro {height:auto}*/
		.s1 .retailintro,
		.s1 .destination .picholder {height:calc(100vh - 80px)} /* was - 60px, changed to fix height of retail pic in intro */
		.retailintro .destination .text {height:calc(80vh - 80px)}
		
		#list .panel {padding:0.5rem}
		#list .panel h4 {font-size:1rem;line-height:1em}
		#list .panel h4::before {display:none}
		#list .panel h4::after {top:0.15em}
		#list .panel ul {display:flex;flex-direction:row;flex-wrap:wrap}
		#list .panel ul li {flex:0 0 50%;box-sizing: border-box;padding:0 0.25rem 0.1rem 0;display:flex;font-size:0.8rem;line-height:1rem}
		#list .panel .listnum {width:1.5em;margin-right:4px}
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		.desktop {display:none}
		.mobile {display: unset;}
		.wholepage {padding-top:60px}
	
		.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% repeat-y;background-size:100% auto;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}
		.scrolled .navbar, .scrolled.officesection .navbar {transform: unset;}
		
		.homelink {position:relative;z-index:10}
		/*.homelink.mobile svg {height:20px;width:auto;margin:20px 5vw;}
		.homelink.mobile svg path {fill:#1e5046}
		.homelink img {height:20px;margin:20px 5vw}*/
		.homelink.mobile {display:block;width:200px;height:20px;margin:20px 5vw;background:url(/img/content/elephantlogo.svg) left center no-repeat;background-size: contain}
		.navbar {position: relative;z-index:10;background:none;height:calc(100vh - 60px);box-sizing: border-box;padding-bottom:20vh;flex-direction:column;gap:2rem}
		.navbar:after {content:'';display:block;position:absolute;bottom:0;left:0;width:100%;height:20vh;background:url(/img/ui/elephantpatterndarkgreen.svg) top center;background-size:auto 10vh;}
		
		
		
		/*.subnav {opacity:1;pointer-events: all;position:relative;left:unset;display:flex;flex-direction:column;text-transform: uppercase;}
		.subnav a {border:1px solid #1e5046;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}*/
		.navbar .buttonlink {width:180px;padding:1rem;background:url(/img/ui/turquoisegrad.jpg) left center no-repeat;background-size:200% auto}
		
		.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;
		}
		
		.navbar .buttonlink:nth-child(3), .navbar .buttonlink:nth-child(4) {margin:0}

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

		.navbutton .navicon span {
			display: block;
			width: 100%;
			height: 1px;
			background: #1e5046;
			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);
		}
		
		/**** office nav ****/
		.scrolled .navholder {pointer-events: all;}
		.officenav.navholder {padding:0}
		.officenav.navholder:after {display:none}
		.officenav .homelink.desktop {display:none}
		
		.so3 .officenav .homelink.mobile, .so4 .officenav .homelink.mobile {background-image: url(/img/content/elephantlogowhite.svg);}
		.officenav.navholder:before {background-image: url(/img/ui/lightgrad.jpg)}
		.officenav .navbar {height:calc(100vh - 60px);background: url(/img/ui/lightgrad.jpg) 50% 50% repeat-y;background-size:100% auto;}
		.officenav .navbar:before {content: '';display:block;width:100%;height:1px;position:absolute;top:-1px;left:0;background:#1e5046}
		.so3 .officenav .navbar:before, .so4 .officenav .navbar:before {background:#F1F0EC}
		.officenav .navbar .buttonlink {flex:0 0;background-image:url(/img/ui/lightgrad.jpg);background-size:100% auto;font-size:1rem;line-height:1rem;width:220px}
		.officenav .navbar .buttonlink:nth-child(3) {border-left: 1px solid #1e5046}
		.officenav .navbar .buttonlink:nth-child(4) {border-right: 1px solid #1e5046}

		.so3 .homelink.mobile svg path, .so4 .homelink.mobile svg path {fill:#F1F0EC}
		.so3 .navholder:before, .so4 .navholder:before {content:'';position:absolute;top:0;left:0;width:100%;height:60px;background:url(/img/ui/emeraldgrad.jpg) 50% 50% repeat-y;background-size:100% auto;transition:opacity 0.5s}
		.so3 .navbutton .navicon span, .so4 .navbutton .navicon span {background:#F1F0EC}
		
		.so4 .officenav .navbar .buttonlink, .so3 .officenav .navbar .buttonlink {border-color:#F1F0EC !important;background-image:url(/img/ui/emeraldgrad.jpg);color:#F1F0EC}
		
		
		/**** footer ****/
		.footer1 {padding:5vw;flex-direction:column;background:#EBDCB9}
		.footer1col {display:flex;flex-direction:column;align-items:center;justify-content: center;}
		.footer1col.leftcol {margin-bottom:5vw}
		.footer1col.leftcol, .footer1col.rightcol {padding:0}
		.footer1col .pic {order:1;width:40vw;z-index:100;margin-bottom:2rem}
		.footer1buttons {order:3;width:100%;display:flex;}
		.footer1col.leftcol .footer1buttons, .footer1col.rightcol .footer1buttons {justify-content: center;gap:1rem}
		.footer1col.leftcol .footer1buttons a {margin:0 1rem}
		.footer1col h2 {order: 2;background:#EBDCB9;padding:1rem;margin:0 0 2rem 0;z-index:90}
		.footer1line1 {height:calc(100% - 5vw - 1rem)}
		.footer1line2 {display:none}
		.footer1col .footer1buttons a {background:#EBDCB9}
		
		
		
		
		.footer2 {padding:5vw}
		.footer2line {flex:1 1}
		
		.footer3 {padding:5vw}
		.footer3inner {flex-wrap:wrap}
		.elefoot {flex:0 0 200px}
		.agencies {display: flex;gap:2rem;flex-direction: column;}
		.agency {flex:0 0 calc(100% - 200px)}
		.agency:last-child {margin:2rem 0  0 0/*200px*/}
		.agentlogo {flex:0 0 130px}
		
		
		/**** intro ****/
		.introcol h1 {font-size:5vh;line-height:1.1em}
		.introcol h2 {font-size:2vh;line-height:1.3em}
		
		.introcol svg {top: calc(52% - (15vh + 20px));}
		.colreveal {clip-path: circle(15vh at 50% 52%);}
		.active .colreveal {clip-path: circle(15vh at 50% 52%);background:url(/img/content/intro/officebg.jpg) no-repeat 50% 58%;background-size:35vh auto}
		.retailcol.active .colreveal {background:url(/img/content/intro/retailbg2.jpg) no-repeat 50% 55%;background-size:35vh auto}
		
		.portrait {width:100%;height:100%;background:50% 50% no-repeat;/*background-size: contain*/background-size:cover}
		.destination .picholder img, .shopfronts img {display:none}
		
		/**** assets ****/
		.portfolioitem, .portfoliogrid  .portfolioitem.liberty {flex-basis:calc((100% - 1px) / 2)}
		.portfolioitem .pic {height:40vw;flex:0 0 40vw}
		.portfolioitem.liberty {flex-direction: column;}
		.portfoliogrid  .portfolioitem.liberty .pic {flex:0 0 40vw;margin-bottom:2rem}
		
		.portfoliogrid > .portfoliospacer:nth-child(4) {flex:0 0 1px;height:unset;margin:0;transform-origin: 0% 0%;background:#1e5046;transition:transform 2s;transform:scaleY(0)}
		.portfoliogrid > .portfoliospacer:nth-child(4), .portfoliogrid > .portfoliospacer:nth-child(8) {flex:0 0 100%;transform-origin: 50% 50%;height:1px;margin:2.5vw 0;transform:scaleX(0) scaleY(1)}
		
		
		
		/**** retail intro ****/
		.s1 .retailintro,
		.s1 .destination .picholder {height:calc(100vh - 60px)}
		.s3 .retailintro, .s4 .retailintro,.retailintro .destination .text {/*height:calc(90vh - 60px)*/padding-top:35vh;padding-bottom:25vh}
		.retailintroholder, .assetintroholder {padding-top:60px}
		.retailintroholder,  .retailintro, .destination .picholder, .s3 .retailintro, .s4 .retailintro {height:calc(100vh - 60px)}
		.retailintro p {max-width:40ch}
		/*.destination .picholder {margin-top:-12.5vh}*/
		.tubelines {flex-direction: column;align-items: center;}
		.stationpic {width:25vw;height:25vw;}
		.line2b, .line3b {height:3rem}
		
		/**** asset intro ****/
		.assetintroholder .destination h1 {max-width:24ch}
		.assetintroholder .destination .picholder {padding:0 5vw;height:55vw}
		
		/**** retail shops ****/
		.introelephants:before {background:radial-gradient(
		circle 50vh at 50% 50%,
		rgba(241, 240, 236, 1) 0%,
			rgba(241, 240, 236, 0.8) 75%,
		rgba(241, 240, 236, 0) 100%
		);}
		
		.flagship {padding:20vw 5vw}
		.flagship h3 {font-size:40px}
		.flagshiptext {padding:5vw}
		.flagshipcontent {flex-direction: column;}
		.flagshipgrid {padding:0}
		.flagitem {flex-basis:calc((100% / 3) - 0.6666rem)}
		.flagitem.double {flex-basis:calc(((100% / 3) * 2) - 0.5rem)}
		
		/**** restaurants ****/
		#map {height:calc(90vh - 60px);}
		
		
		/**** office intro ****/
		.terracepic {background-position:bottom center;background-size:auto 65vh}
		
		.officecards {box-sizing: border-box;background:url(/img/ui/emeraldgrad.jpg) 50% 50% repeat-y;background-size:100% auto;}
		.officecard .text p {margin-bottom:0}
		.mobilepic {display:unset;}
		.desktoppic {display:none}
		.officecard {top:60px;height:calc(100vh - 60px);flex-direction:column;text-align: center;align-items: center;}
		
		.officecard .text {flex:1 1;padding:0 0 7.5vw 0;display:flex;flex-direction: column;align-items:center;justify-content: center;}
		.officecard .pic {max-width:unset;width:100%;aspect-ratio: unset;flex:0 0 60vw}
		.officecard .buttonlink, .officecard .buttonlink:last-child {margin-left:auto;margin-right:auto}
		
		.officecard.cardlight {flex-direction: column-reverse;}
		.officecard.cardlight .text {padding:7.5vw 0 0 0}
		
		.parapic {padding:0;/*height:45vh*/}
		.paddingbottom {padding-bottom: 0;}
		.officefooter1buttons {flex-wrap: wrap;justify-content: center;}
		/*.officefooter1 .buttonlink {flex:0 0;flex-basis:calc(0% - 0.5rem)}*/
		.so1 .officefooter1 .buttonlink {flex:0 0;flex-basis:calc(50% - 0.5rem)}
		.officefooter1 .buttonlink .pic {height:30vw}
		
		.officefooter2buttons {flex-wrap: wrap;}
		.officefooter2buttons .buttonlink {flex:1 1 40%;box-sizing: border-box;}
		
		.footer3clip:before, .footer3clip:after {display:none}
		
		video.autocanvas {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position: 50% 50%;}
		.officeintroholder canvas, .footercanvas canvas {display:none}
		
		.officesection .elefoot {flex:0 0 100%}
		.officesection .agency {flex:0 0 40%;flex-direction:column}
		.officesection .agency:last-child {margin:0}
		.officesection .agentlogo {flex:1 1;margin-bottom:2rem}
		
		/**** building ****/
		.togglepic {height:calc(70vw + 80px);margin:0;width:100%}
		.togglepic .pic {height:70vw}
		.toggle {background:#1e5046;height:80px;bottom:0}
		.togglebutton::before {background:#D58C3C}
		
		.areas {flex-direction:column;height:auto}
		.assetline12, .assetline13, .assetline14 {display:none}
		.availabletable {padding-top:5vw;width:100%}
		.availabletable tr td:last-child {display:none}
		
		.mobfloors {display:flex;list-style-type: none;margin:5vw 0;padding:0;justify-content: center;gap:1rem}
		.mobfloors li {cursor: pointer;flex:0 0 40px;height:40px;border-radius:50%;color:#f1f0ec;background:url(/img/ui/emeraldgrad.jpg) 50% 50% repeat-y;background-size:100% auto;display:flex;align-items:center;justify-content: center;margin:0}
		.mobfloors li:hover {text-decoration: underline;}
		.mobfloors li.active {background-image:url(/img/ui/lightgrad.jpg);color:#1e5046}
		
		.planside {width:100%;flex:0 0 65vh}
		
		.buildingcarousel {height:70vw;margin-bottom:10vw}
		.buildingcarousel .slide {height:70vw;margin:0}
		.buildingcarousel::before, .buildingcarousel::after {display:none}
		
		/**** location ****/
		.loccol {width:100%;height:50%;box-sizing: border-box;flex-direction:column-reverse}
		.locleft {}
		/*.lochead {background:url(/img/ui/emeraldgrad.jpg) 50% 50% repeat-y;background-size:100vw auto;z-index:200}*/
		.lochead {height:10vw;}
		.locleft .lochead {background-position:left center;padding:4vw 0 2vw 0}
		.locright {top:unset;bottom:0;}
		.locright .lochead {background-position:right center;position:relative;top:1px;padding:2vw 0 4vw 0}
		.locright .locname {padding-left: 0;padding-right: 0.4em;}
		.locleft .locname {padding-right: 0;padding-left: 0.4em;}
		/*.locheadinner {font-size:clamp(4vw, 5vw, 5vw) !important}*/
		.locheadinner {font-size: 10vw;flex-direction:row-reverse}
		.locarrow {position:relative;z-index:300}
		.locarrow svg path {stroke-width: 2px;}
		.extholder .ext {height:55vh;background-position: center;flex:0 0 80%;max-width: unset;}
		.locintroholder .locintrofoot {height:20vh}
		.locintroholder .connectedline {height:17vh;top:unset;bottom:-5vw}
		.locintroholder .locintrofoot .locintrofootinner {align-items: flex-start;}
		
		
		
		
		.loccarousel .text {padding:0 0 5vw 0;width:100%;text-align: center;display:flex;flex-direction: column;align-items:center;justify-content: center;flex:0 0 40%;box-sizing: border-box;}
		.loccarousel .text p {margin-left:auto;margin-right:auto;padding:0 5vw}
		.loccarousel .slideinner {padding:5vw;flex-direction:column}
		.loccarousel .pic {aspect-ratio: unset;width:100%;height:80vw;flex:0 0 60%}
		.loccarousel .slick-arrow {bottom:unset;top:calc(20% - 30px - 5vw)}
		.loccarousel .slick-next {left:unset;right:7.5vw}
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		h1 {font-size:2rem;line-height:1.2em;}
		h2 {font-size:1.4rem;line-height:1.8rem;}
		h4 {font-size:1rem;}
		
		.navbar .buttonlink {height:unset}
		
		/**** 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}
		.shopfronts {padding:5vw}
		
		/**** retail intro ****/
		.s3 .retailintro, .s4 .retailintro, .retailintro .destination .text {/*height:calc(90vh - 60px)*/padding-top:15vh;padding-bottom:15vh}
		.s1 .retailintro, .s1 .destination .picholder {height:calc(100vh - 60px)}
		.retailintro p {max-width:20ch}
		.destination .picholder {padding:5vw;height:calc(100vh - 10vw - 60px)}
		.retailintro .expansive h1, .retailintro .destination .text h1 {font-size:1.75rem;padding:5vw 10vw}
		.retailintro .expansive p.caps {font-size:0.75rem;max-width:unset}
		
		.bigaerial {display:none !important}
		.smallaerial {display:block !important}
		.wellconnected {padding:20vw 5vw}
		.elevation {width:75vw}
		.logolines {width:100%;margin-bottom:27vw;flex-direction:column;align-items:center}
		.logolines img {width:60vw}
		.lineholder {width:50vw;flex:0 0 1px}
		.lineholder img {display:none !important;}
		.line2a {display:none !important}
		.line3a {position:absolute;top:10vw;left:0%}
		.line2b {top:19vw}
		.line3b {top:10vw}
		
		.line2b {left:0}
		.line3b {right:0}
		.stationpic {display:none !important}
		.line4, .line5 {display:none !important}
		.tubeline {margin:0 0 0.5rem 0;font-size:0.8rem;line-height:1.2em}
		
		/**** downloads ****/
		.downloadbuttons {flex-direction:column}
		.download-file-btn {min-width:250px}
		
		/**** asset ****/
		.scheme, .officesection .scheme {padding:20vw 5vw 0 5vw}
		.s2 .retailintro .destination .text {height:80vh;padding-top:20vh}
		.assetline1 {height:22.5vh;top:62.5vh}
		
		/*.assetline3 {display:none}
		.linerow {display: none;}*/
		/*.schemerow {flex-direction: column;}*/
		.schemeitem .number span.small {display:block;line-height:0.8em;margin-bottom:1rem}
		.schemeitem {/*border-bottom:1px solid #1e5046;*/padding:10vw 10px}
		.schemeitem .number {font-size:2rem}
		.schemeitem p {margin:0;font-size:12px;line-height:1.3em}
		.schemerow.row2 {padding-bottom:20vw}
		/*.assetline6 {top:calc(100% - 20vw);height:20vw}*/
		
		.thirdspace {position: relative;top:unset;left:unset;}
		
		.portfolio {padding:15vw 5vw 0 5vw}
		.officesection .portfolio {padding-bottom:15vw}
		.portfoliolines {height:15vw}
		
		.portfolio h4 {font-size:1.4rem}
		.portfoliogrid {padding:5vw 0}
		.portfolio h2 {margin-bottom:5vw;padding:10vw 0}
		
		.portfolioitem, .portfoliogrid .portfolioitem.liberty {flex-basis:100%;padding:0;}
		.portfolioitem .pic {height:60vw}
		.portfolioitem p:not(.bigtext) {margin-bottom:0}
		
		.portfoliogrid > .portfoliospacer:nth-child(2), .portfoliogrid > .portfoliospacer:nth-child(4), .portfoliogrid > .portfoliospacer:nth-child(6), .portfoliogrid > .portfoliospacer:nth-child(8) {flex:0 0 100%;transform-origin: 50% 50%;height:1px;margin:10vw 0;transform:scaleX(0) scaleY(1)}
		
		/**** retail shops ****/
		.retailintro h2 {padding:0 5vw}
		.shopsouter {padding:15vw 0 10vw 0;background:url(/img/ui/lightgrad.jpg) 50% 50% repeat-y;background-size:100% auto}
		.shopsmapholder {padding:0;height:calc(90vh - 60px);overflow-x: scroll;overflow-y:hidden}
		.shopsmap {height:100%}
		.shopsmob {width:100%;text-align: center;margin-bottom:15vw;height:22px;line-height:22px;display:flex;align-items: center;justify-content: center;}
		.shopsmob:before {content:'Swipe to explore';display: inline-block;padding-left:60px;background:left center no-repeat url(/img/ui/leftarrow.svg);background-size:40px auto}
		.shopsmob:after {content:'';display: inline-block;width:60px;height:100%;background:right center no-repeat url(/img/ui/rightarrow.svg);background-size:40px auto}
		
		.flagship h3 {font-size:30px}
		.flagitem {flex-basis:calc(50% - 0.5rem)}
		.flagitem.double, .flagitem.pedestrian {flex-basis:100%;aspect-ratio: 2 / 1;}
		.flagitem p {font-size:12px;line-height: 1.3em;}
		.flagitem p span {display:block;line-height:1.2em;font-size:10px;margin-top:0.5rem}
		
		/**** map ****/
		.mapsection {display:flex;flex-direction:column}
		#map {width:100%;flex:0 0 100vw}
		/*.retailmap #map {flex-basis:calc(80vh - 60px)}*/
		.mapsection #list {position:relative;top:0;left:0;width:100%;max-width:unset;padding:0;border:0}
		#list .panel h4 {font-size:1rem;line-height:1em}
		#list .panel h4::before {display:none}
		#list .panel h4::after {top:0.15em}
		#list .panel ul {display:flex;flex-direction:row;flex-wrap:wrap}
		#list .panel ul li {flex:0 0 50%;box-sizing: border-box;padding:0 0.5rem 0 0;display:flex;}
		#list .panel .listnum {width:2em}
		
		/**** downloads ****/
		.downloadform {padding:5vw}
		.downloadform h2 {font-size:2rem}
		.closeholder {top:5vw;right:5vw}
		.buttonlink {padding:0;width:44px;height:44px}
		.closebutton .buttontext {display:none}
		.checkboxes {display:flex;flex-direction:column;gap:0.5rem}
		.downloadform button {margin-left:0;margin-top:3rem;width:180px}
		.textinputs {margin-bottom:3rem}
		
		
		/**** footer ****/
		.footer1 {text-align: center;padding:10vw}
		.footer1line1 {height: calc(100% - 10vw - 1rem);}
		.footer1 h2 {text-align: center;padding:0.75rem 1rem;margin-bottom:1rem}
		.footer1col .pic {width:60vw;height:50vw;margin-bottom:1rem;margin-top:4rem}
		.footer1buttons {flex-direction: column;align-items: center;}
		.footer1col .footer1buttons a {margin:0 !important;width:120px;flex:0 0 30px}
		
		.footer2 {flex-direction:column;padding:15vw 5vw}
		.footer2line {flex:0 0 3rem;width:1px;margin:0.5rem 0}
		.footer2 .buttonlink {width:120px;flex:0 0 30px}
		
		.footer3 {text-align: center;flex-direction: column;align-items: center;padding-top:15vw;padding-bottom:15vw}
		.footer3inner {flex-direction: column;align-items: center;padding-bottom:20vw}
		.elefoot {flex:1 1;width:100%;border-bottom:1px solid #1e5046;margin-bottom:15vw}
		.elephantfooter {width:55vw;height:auto}
		.agency {flex-direction:column;align-items:center;width:100%;flex:1 1}
		.agency:last-child {margin-left:0}
		.agentlogo {flex:1 1;margin-bottom:1rem}
		.agents {margin-bottom:1rem}
		
		/**** office intro ****/
		.officeintroholder h1 {max-width:12ch;text-align: center;font-size:12vw}
		
		.sectionintro {padding:25vw 10vw}
		
		.officecard {padding-top:0;padding-bottom:0}
		.officecard h3 {font-size:4vh;line-height:1.3em}
		.officecard .buttonlink {font-size:12px;line-height:1em;margin-bottom:1rem;width:220px;height:auto;width:200px}
		/*.officecard {gap:5vh;}*/
		.officecard .text {justify-content: center;flex:0 0 100%;padding:0;gap:4vh}
		.officecard.cardlight .text {padding:0}
		/*.officecard .text p {margin-bottom:1rem}*/
		.officecard .pic {flex:0 0 50vw}
		.cardbuttons {margin-bottom:1vw}
		
		.officefooter1, .officefooter2 {padding:20vw 5vw 0vw 5vw}
		.officefooter1buttons {gap:5vw}
		.so1 .officefooter1 .buttonlink, .officefooter1 .buttonlink {flex-basis:100%;height:auto}
		.officefooter1 .buttonlink .pic {height:65vw}
		.lineheading {margin-bottom:10vw}
		
		.officefooter2buttons {padding-bottom:15vw}
		.officefooter2buttons .buttonlink {flex:0 0 75%}
		
		.officefooter3 {padding:10vw 5vw}
		.officesection .agency {margin-bottom:10vw}
		
		
		/**** building ****/
		.so2 .wholepage {padding-top:60px}
		.buildingheading {padding:20vw 25vw}
		.buildingheading h2 {font-size:2rem;line-height:1.3em;}
		.mobbreak {display:block}
		
		.officescheme {margin:0;width:100%}
		
		/*.officescheme .scheme {padding-left:5vw;padding-right:5vw}*/
		.areas {padding:0 5vw}
		.availabletable .tablebig {font-size:12px;}
		
		.mobfloors {margin:15vw 0}
		
		.planside .north {top:0;left:0}
		.plancontrols {width:90px;right:0;top:5px}
		.plancontrols a {flex:0 0 30px;height:30px}
		.spacedropholder {padding:5px 100px 0 60px}
		.spacedropholder .buttonlink {font-size:12px;line-height:1.3em;height:30px}
		.spacedropdown {top:28px}
		.key {padding-bottom:15vw}
		
		.sectionintro.smallpadding {padding:20vw 10vw}
		
		.slick-arrow {width:40px;height:40px;top:calc(50% - 20px)}
		
		.buildingspec {padding:15vw 5vw;justify-content: space-around;}
		.buildingspec .specitem {padding:5vw;flex:0 0 50%}
		.buildingspec .specicon, .specholder .specicon {margin-bottom:1rem;height:120px;aspect-ratio: unset;}
		
		
		
		/**** location ****/
		/*.locheadinner {font-size:8vw}*/
		.locintroholder {padding-left:5vw;padding-bottom:5vw;padding-right:5vw}
		.locarrow svg path {stroke-width: 4px;}
		.extholder .ext {height:50vh}
		/*.locintroholder .locintrofoot {height: calc(100% - 50vh + 2.5vw);}*/
		/*.locintroholder .connectedline {height: calc(100% + 100px);}*/
		
		.sectionintro.locsection {padding:20vw 10vw 0 10vw}
		
		.loccarousel, .loccarousel .slide {height:calc(100vh - 60px)}
		.loccarousel .slideinner {justify-content: space-between;gap:5vw;padding-top:10vw;padding-bottom:calc(10vh + 40px)}
		.loccarousel .text {flex: 1 0 50%;padding:0;justify-content: space-between;}
		.loccarousel .text p {font-size:12px;line-height:1.3em;margin-bottom:0.25rem}
		.loccarousel .pic {flex: 1 1 50%;margin:3vh 0}
		.loccarousel .slick-arrow {top:unset;bottom:5vh}
		.loccarousel .slick-prev {left:calc(50vw - 60px)}
		.loccarousel .slick-next {right:calc(50vw - 60px)}
		.loccarousel h2 {margin-bottom:2rem}
		.loccarousel h4 {font-size:1.75rem;line-height:1.3em}
		
		.connectionsfull {display:none}
		.connectionsmob {display:block;height:auto;width:100vw;overflow-x: scroll;}
		.connectionsmob svg {display:block;height:calc(100vh - 60px)}
		
		
		
		/**** details ****/
		.specholder .slide {width:80vw;font-size:12px;line-height:1.3em;padding-left:5vw;padding-right:5vw}
		
		.detailspec {padding:0 5vw}
		.detailsholder {padding:5vw}
		.detail h2 {padding-left:0;padding-right:0}
		.detailinner {padding-left:0}
		.detail h2::before {display:none}
		.slideinner {gap:1rem}
		.slideinner .specitem {display:flex;flex-direction: column;}
		.slideinner .specitem:first-child {justify-content: flex-end;}
		.specholder .slick-arrow {top:calc(50% - 30px + 0.5rem)}
		
		.detailspec .sectionintro {padding: 25vw 10vw;}
		
		/**** tour ****/
		.officetwinholder {width:90vw;margin:0 5vw}
	}

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