@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: 24px/1.3em 'brockmann', Arial, sans-serif;
	
	color: #213136;
	background: #EAE3DB;
	height:100%;
}

h1 {font-weight:normal;font-size:4.5vw;line-height:1.25em}
h2 {font-size:44px;line-height:1.3em;font-weight: normal;}
h3 {font-weight: normal;font-size:3vw;line-height:1em}
h4 {font-size:38px;line-height:1.1em;font-weight: normal;}
h5 {font-size:30px;line-height:1.1em;font-weight: normal;}
b {font-weight:700}

.animatein {visibility: hidden;}
.resizeimg {max-width: 100%;height: auto;}
.pic {background:50% 50% no-repeat;background-size:cover}
.icon {background:50% 50% no-repeat;background-size:contain}
.gazetta {font-family: "gazzetta-variable", sans-serif;font-variation-settings: "wght" 400;}
.gazettamed {font-family: "gazzetta-variable", sans-serif;font-variation-settings: "wght" 500;}

.greentext {color: #42BDA7;}
.lighttext {color: #EAE3DB;}
.darktext {color: #213136;}

.greenbg {background: #42BDA7;}
.darkbg {background: #213136;}
.lightbg {background: #EAE3DB;}

.pagesection {padding-left:90px;padding-right:90px;position:relative}
.pagesectioninner {padding:90px 0;margin:0 auto}
.centertext {text-align: center;}

/**** nav ****/
.homelogo {position:fixed;top:0;left:0;width:90px;height:100vh;border-right:0;box-sizing: border-box;z-index:5000;display:flex;justify-content: center;padding-top:40px;clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);align-items:flex-start}
.homelogo svg {position: relative;z-index:4000;}
.homelogo svg path {fill:#EAE3DB}

.rightborder, .leftborder, .logoleftborder {width:90px;height:100%;border-left:1px solid #EAE3DB;position:absolute;top:0;right:0;z-index: 1100;clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);box-sizing: border-box;pointer-events: none;}
.leftborder, .logoleftborder {left:0;right:auto;border-right:1px solid #EAE3DB;border-left:none}
.logoleftborder {position:fixed;}
.borderbottom {border-bottom:1px solid #EAE3DB}
.darkborder {border-color:#213136}
.greenborder {border-color:#42BDA7}

.nav {position:fixed;top:40px;right:0;z-index:4000;font-size:22px;line-height:1em;}
.navinner {position:relative}
.nav a {box-sizing: border-box;border:1px solid #EAE3DB;margin:0 0 10px 0;height:54px;display: flex;align-items: center;padding:0 20px 0 25px;border-radius:27px 0 0 27px;overflow:hidden;text-decoration: none;color:#EAE3DB;
transition:border 0.4s, max-width 0.4s, background 0.4s;
width: 150px;max-width:150px;border-right:none;position:absolute;right:0;top:0}
.nav .n1 {background:#213136}
.nav .n2 {background:#42BDA7;top:65px}
.nav .n3 {background:#EAE3DB;color:#213136;top:130px;border-color:#213136}
.nav .n1:hover, .nav .n2:hover, .nav .n3:hover {background:#E14C4F;color:#EAE3DB;border-color:#E14C4F;}
.navlabel {transition: opacity 0.4s;}

/*.scrolled .nav {max-width:55px}*/
.scrolled .nav a {max-width:55px}
.nav a:nth-child(1) {transition:border 0.4s, max-width 0.4s, background 0.4s;}
.nav a:nth-child(2) {transition:border 0.4s, max-width 0.4s 0.1s, background 0.4s;}
.nav a:nth-child(3) {transition:border 0.4s, max-width 0.4s 0.2s, background 0.4s;}
.scrolled .nav a:nth-child(1) {transition:border 0.4s, max-width 0.4s 0.2s, background 0.4s;}
.scrolled .nav a:nth-child(2) {transition:border 0.4s, max-width 0.4s 0.1s, background 0.4s;}
.scrolled .nav a:nth-child(3) {transition:border 0.4s, max-width 0.4s, background 0.4s;}
.scrolled .navlabel {opacity: 0;}
.scrolled .nav a:hover {max-width:150px;transition:border 0.4s, max-width 0.4s, background 0.4s;}
.scrolled a:hover .navlabel {opacity:1 ;}


/**** footer ****/
.footer {padding:90px 0;text-align: center;font-size:20px;line-height:1.3em;position:relative;z-index:3000;background:#EAE3DB}
.footer a {color: #213136;}
.footer b {font-weight:500}
.footerinner {position:relative;display:flex;flex-direction: column;border-top:1px solid #213136;border-bottom:1px solid #213136;padding:0 90px}
.agentlogo {border-bottom:1px solid #213136;padding:30px;}
.agentlogo img {width:300px}
.agents {border-bottom:1px solid #213136;display: flex;padding:60px 0}
.footer span {font-size:34px;line-height:1.3em;}
.agents p {flex:0 0 33.3333%;margin:0;box-sizing: border-box;padding:0 15px;}
.misrep {font-size:11px;line-height:13px;padding:30px 90px}
.misrep p:last-child {margin:0}
.brochure {border-bottom:1px solid #213136;padding: 2.5vw;}
.brochure h2 {margin:0}
.brochure a {transition: color 0.2s;}
.brochure a:hover {color: #42BDA7;}




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

/**** home ****/
.homebanner {width:100%;height:100vh;position: relative;background:bottom center no-repeat url(/img/content/home/banner.jpg);background-size:cover;overflow:hidden}
.homebanner video {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position: 50% 50%;}
.homebanner svg {width:100%;height:200vh;position:absolute;bottom:0;left:0}
.introtint {position:absolute;bottom:0;left:0;width:100%;height:65vh;background: linear-gradient(180deg, rgba(217, 217, 217, 0.00) 0%, #737373 100%);mix-blend-mode: multiply;}
.intrologo {position:absolute;bottom:0;width:100%;height:40vh;background:bottom center no-repeat url(/img/content/home/intrologo.svg);background-size:contain}
.downarrow {position:absolute;bottom:20px;left:0;width:100%;height:25px;background:bottom center url(/img/ui/downarrow.svg) no-repeat;background-size:contain}
.homeintro {padding-left:2.5vw;padding-right:2.5vw;;box-sizing: border-box;max-width:800px;}

.homelinks {position:relative;display: flex;}
.homelinkside {flex:0 0 50%;box-sizing: border-box;align-items: center;display:flex;padding:90px 0}
.homelinkside.building {justify-content: flex-start;padding-left:90px}
.homelinkside.location {justify-content: flex-end;padding-right:90px;}
.homelinks a {display:flex;width:calc(50vw - 300px);height:calc(50vw - 300px);align-items:center;justify-content: center;text-align:center;color:#fff;text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);font-size:3vw;line-height:1.3em;background-size:auto 105%;transition:background 0.5s}
.homelinks a:hover {background-size:auto 110%}
.homelinksshape {position:absolute;top:0;left:0;width:100%;height:100%;pointer-events: none;display:flex;align-items:center;justify-content: center;}
.shapeinner {position:relative;width:100%;height:100%;display:flex;align-items: center;justify-content: center;overflow: hidden;}
.homelinksshape svg {height:calc(50vw - 250px);width:100%;position:absolute;transition:transform 0.5s;transform:rotate(90deg)}
.location .homelinksshape .shapeinner svg {transform: rotate(180deg);}
.building .homelinksshape .shapeinner svg {transform: rotate(0deg);}
.homelinksshape .st0 {fill: none;stroke: #eae3db;}
.homelinksshape .st1 {fill: #eae3db;}
.shapelabels {position:absolute;display: flex;align-items:center;justify-content: center;}
.labelsinner {position:relative;width:30vw;height:4vw}
.labelsinner h3 {text-align: center;position:absolute;top:0;left:0;width:100%;height:100%;display: flex;align-items:center;justify-content: center;transition:all 0.4s;}

.labelsinner h3.buildinglabel {clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);}
.labelsinner h3.locationlabel {clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);}
.building .labelsinner h3.buildinglabel,
.location .labelsinner h3.locationlabel {clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}

/**** building ****/
.buildingheader {min-height:65vh;display:flex;border-bottom:1px solid #EAE3DB}
.buildingheader .text {flex:0 0 40%;display:flex;align-items: flex-end;padding-left:90px;box-sizing: border-box;}
.buildingheader h1 {margin:2.5vw}
.buildingheader .pic {flex:0 0 60%;background-image: url(/img/content/building/banner.jpg);}

.galleryholder {position:relative;padding-bottom:50px}
.buildinggallery {height:80vh;width:100%;position:relative;}
.buildinggallery .slide {height:80vh;width:100%}
.galleryholder .cycle-pager {margin-top:30px;display:flex;justify-content: center;}
.galleryholder .cycle-pager span {overflow: hidden;border:1px solid #EAE3DB;text-indent:-9999px;width:24px;height:24px;margin:0 10px;border-radius:12px 12px 0 0;transition:background 0.2s;cursor: pointer;}
.galleryholder .cycle-pager span.cycle-pager-active {background: #EAE3DB;}
.galleryholder .cycle-pager span:hover {background: #42BDA7;}
.spec {padding:90px}
.spec h2 {margin-left:2.5vw}

.speclist {display:flex;text-align: center;font-size:16px;line-height: 1.3em;padding:0 90px;flex-wrap: wrap;}
.specitem {flex:0 0 25%;box-sizing: border-box;padding:40px;display: flex;flex-direction: column;align-items:center;}
.specline {flex:0 0;flex-basis:calc(100% + 180px);height:1px;background:#EAE3DB;margin-left:-90px}
.specitem .icon {width:140px;height:140px;margin-bottom:20px}

.videosection {padding-top:90px;padding-bottom:90px;border-bottom:1px solid #EAE3DB}
.videoholder {width:100%;position:relative;padding-top:56.25%;box-sizing: border-box;max-height:90vh;}
.videosection iframe {position:absolute;top:0;left:0;width:100%;height:100%;}

.elevationsection h1 {padding:2.5vw;width:45vw}
.elevation {display:flex;align-items: center;padding-bottom:90px}
.elevation .pic {flex:0 0 65%;padding-right:2.5vw}
.availabletable {flex:1 1}
.availabletable table {margin:0}
.availabletable td {border-bottom:1px solid #EAE3DB;padding:15px 30px;font-size:14px;line-height:1em}
.availabletable tr td:first-child {padding-right:0;color:#42BDA7}
tfoot td {border:none;font-weight:700}

.plans {position:relative;padding:0 90px;box-sizing: border-box;display:flex;flex-direction: column;height:95vh}
.planshead {display:flex;justify-content: space-between;align-items: center;padding:2.5vw;border-bottom:1px solid #213136}
.planshead h1 {margin:0}
.plansbody {position: relative;flex:1 1}
.north {position:absolute;top:2.5vw;right:2.5vw;width:40px;height:40px;background:top right no-repeat url(/img/ui/north.svg);background-size:contain}
.planholder {width:100%;height:100%;display:flex;align-items: center;justify-content: center;}
.planinner {background:50% 50% no-repeat;background-size:contain;flex:0 0 90%;height:85%}
.planside {position:absolute;left:0;height:100%;display:flex;flex-direction:column;justify-content: center;}
.pager {display:flex;flex-direction:column;justify-content: center;font-size:16px;line-height:0.9em;}
.pager div {box-sizing:border-box;overflow: hidden;border:1px solid #213136;width:40px;flex:0 0 40px;display:flex;align-items: center;padding-left:8px;border-left:none;margin:5px 0;border-radius:0 20px 20px 0;cursor: pointer;transition:all 0.4s}
.pager div:hover {background:#213136;color:#EAE3DB;width:50px;padding-left:18px}
.pager div.active {background:#42BDA7}

.key {list-style-type:none;margin:0;padding:0;font-size:12px;line-height:1em;position:absolute;top:2.5vw;left:2.5vw}
.key li {margin:0;padding:0;white-space: nowrap;position:relative;display:flex;align-items: center;margin-bottom:10px}
.key li:before {content:'';height:12px;flex:0 0 12px;background:#C2EDE5;border-radius:50%;margin-right:5px}
.key li.storage:before {background-color:#85DBCB}
.key li.reception:before {background-color:#85DBCB}
.key li.core:before {background-color:#A6ACAE}
.key li.terrace:before {background-color:#AED898}

.plans.lowerground h1:after {content:'Lower Ground'}
.plans.lowerground span:after {content:'39,889 sq ft / 3,706 sq m'}
.plans.lowerground .planinner {background-image:url(/img/content/building/plans/lowerground.png)}
.plans.space.lowerground .planinner {background-image:url(/img/content/building/plans/lowerground-space.png)}
.plans.lowerground .key .reception,
.plans.lowerground .key .terrace {display:none}

.plans.ground h1:after {content:'Ground'}
.plans.ground span:after {content:'10,014 sq ft / 930 sq m'}
.plans.ground .planinner {background-image:url(/img/content/building/plans/ground.png)}
.plans.space.ground .planinner {background-image:url(/img/content/building/plans/ground-space.png)}
.plans.ground .key .storage,
.plans.ground .key .terrace {display:none}

.plans.first h1:after {content:'First'}
.plans.first span:after {content:'33,663 sq ft / 3,127 sq m'}
.plans.first .planinner {background-image:url(/img/content/building/plans/1.png)}
.plans.space.first .planinner {background-image:url(/img/content/building/plans/1-space.png)}
.plans.first .key .storage,
.plans.first .key .reception,
.plans.first .key .terrace {display:none}

.plans.second h1:after {content:'Second'}
.plans.second span:after {content:'34,011 sq ft / 3,160 sq m'}
.plans.second .planinner {background-image:url(/img/content/building/plans/2.png)}
.plans.space.second .planinner {background-image:url(/img/content/building/plans/2-space.png)}
.plans.second .key .storage,
.plans.second .key .reception,
.plans.second .key .terrace {display:none}

.plans.third h1:after {content:'Third'}
.plans.third span:after {content:'34,011 sq ft / 3,160 sq m'}
.plans.third .planinner {background-image:url(/img/content/building/plans/3.png)}
.plans.space.third .planinner {background-image:url(/img/content/building/plans/3-space.png)}
.plans.third .key .storage,
.plans.third .key .reception,
.plans.third .key .terrace {display:none}

.plans.terrace h1:after {content:'Terrace'}
.plans.terrace span:after {content:'2,539 sq ft / 236 sq m'}
.plans.terrace .planinner {background-image:url(/img/content/building/plans/terrace.png)}
.plans.space.terrace .planinner {background-image:url(/img/content/building/plans/terrace-space.png)}
.plans.terrace .key .storage,
.plans.terrace .key .reception,
.plans.terrace .key .office {display:none}

.gallery2 {padding-top:90px}

.toggle {font-size:16px;line-height:1em;display: flex;transition:opacity 0.5s}
.toggle a {padding:12px 34px;border:1px solid #213136;cursor: pointer;transition:color 0.2s, background 0.2s}
.toggle a:hover {text-decoration: underline;}
.toggle a:first-child {border-radius:21px 0 0 21px}
.toggle a:last-child {border-radius:0 21px 21px 0}
.toggle a.active {background:#213136;color:#EAE3DB}
.terrace .toggle, .lowerground .toggle {opacity:0.5;pointer-events: none;}

/**** location ****/
.pagecontainer {position:relative;overflow-x:hidden}
.locationhead {position:absolute;top:5vw;left:calc(90px + 2.5vw);z-index:1000;font-size:7vh;line-height:1.2em}
.s2 .homelogo, .s2 .logoleftborder {border-color:#42BDA7}
.s2 .homelogo svg path {fill:#213136;transition:fill 0.5s}
/*.s2.scrolled .homelogo svg path {fill:#fff}*/
.s2 .homelogo.whitelogo svg path {fill:#EAE3DB}
.locationline {width:100%;height:1px;position:absolute;top:50vh;left:0}
.sticksection {position:sticky}
.fixedsection {position:fixed}
.horizontal-section {
	display: flex;
	width: 165vw; /* 4x the viewport width for scrolling effect */
	height: 100vh;
	/*background: #f0f0f0;*/
	position:relative;
	box-sizing: border-box;
	padding:0 90px
}
.horizontal-section .pic {margin-bottom:10px;}
.pic1 {position:absolute;bottom:20px;left:calc(90px + 2.5vw)}
.pic1 .pic {width:24vw;height:55vh;border-radius: 12vw 12vw 0 0 ;}

.pic2 {position:absolute;bottom:20px;left:calc(90px + 34vw)}
.pic2 .pic {width:28vw;height:33vh;}

.pic3 {position:absolute;bottom:calc(20px + 40vh);left:calc(90px + 48vw)}
.pic3 .pic {width:38vw;height:44vh;}

.pic4 {position:absolute;bottom:20px;left:calc(90px + 69vw)}
.pic4 .pic {width:16vw;height:33vh;border-radius:8vw 8vw 0 0}

.pic5 {position:absolute;bottom:20px;left:calc(90px + 92vw)}
.pic5 .pic {width:30vw;height:33vh;}

.pic6 {position:absolute;bottom:calc(20px + 40vh);left:calc(90px + 95vw)}
.pic6 .pic {width:24vw;height:44vh;border-radius:12vw 12vw 0 0}

.pic7 {position:absolute;bottom:20px;left:calc(90px + 128vw)}
.pic7 .pic {width:20vw;height:33vh;}

.locationmap {padding:90px}
.maplist {flex:0 0;flex-basis:calc(40% - 40px)}
.mapsection {display:flex}
.mapcolumn {flex:0 0 60%;margin-right:20px}
.mapholder, .map {width:100%;height:80vh;position:relative}
.mapmask {position:absolute;top:0;left:0;width:100%;height:100%;background:left center no-repeat url(/img/content/location/mapmask.svg);background-size:auto 100%;z-index:2000;pointer-events: none;}
.listholder {font-size:16px;line-height:1.3em}
.listtype {display:flex;width:100%}
.occupierslists {display:none}
.occupiers .occupierslists {display:flex}
.occupiers .amenitieslists {display:none}
.listcolumn {flex:0 0 50%;box-sizing: border-box;padding:0 20px;}
.listcolumn li {margin-bottom:5px;cursor: pointer;}
.listcolumn li.active {font-weight:bold}
.listcolumn li:hover {text-decoration: underline;}
.occupierslists .listcolumn {flex:0 0 100%;display:flex;flex-wrap:wrap}
.occupierslists .listcolumn ul {display:flex;flex-wrap: wrap;}
.occupierslists .listcolumn ul li {flex:0 0;flex-basis:calc(50% - 20px);box-sizing: border-box;padding-right:20px;}
.amenitylist {margin-bottom:40px}

.amenitytoggle {margin:0 0 40px 20px}

.amenitylist h4 {background:0px 4px no-repeat url(/img/ui/mapmarkers/food.png);background-size:20px auto;padding-top:34px}
#occupierlist.amenitylist h4 {background-image:url(/img/ui/mapmarkers/occupier.png)}
#leisurelist.amenitylist h4 {background-image:url(/img/ui/mapmarkers/gym.png)}
#hotellist.amenitylist h4 {background-image:url(/img/ui/mapmarkers/hotel.png)}



.gm-style .gm-style-iw-c {border-radius:0}
.gm-style-iw-chr {position:absolute;top:0;right:0}
.gm-ui-hover-effect {width:24px !important;height:24px !important}
.gm-ui-hover-effect > span {margin:0 !important;width:16px !important;height:16px !important;position:relative;right:-4px}
.gm-style .gm-style-iw-c, .gm-style .gm-style-iw-tc::after {background:#EAE3DB;margin:0;padding:0}
.gm-style .gm-style-iw-d {overflow:hidden !important}
.infotext {padding: 20px 20px 12px 20px;font-family: 'brockmann', Arial, sans-serif;color:#213136;}

.tubesection {position:relative;width:100%;height:90vh;box-sizing: border-box;}
.tubesection h1 {margin-left:40px}
.tubemap {position:absolute;top:0;left:0;width:100%;height:100%}
.tubemap .station {text-align:center;display: flex;flex-direction: column;align-items: center;position:absolute}
.tubemap .station h5 {margin-top:5px}
.horzline {width:100%;height:1px;position:absolute;top:50%;left:0}
.vertline {width:1px;height:100%;position:absolute;top:0;left:50%}
.goodge {bottom:calc(50% + 10vh + 40px);left:50%;transform:translateX(-50%)}
.oxford {top:calc(50% - 81px);left:25%;}
.tottenham {top:calc(50% + 40px);left:50%;transform:translateX(-50%)}
.piccadilly {top:calc(50% - 27px);right:25%;}

.tubemap .roundel {width:60px;height:44px;background:50% 50% no-repeat;background-size:contain;margin:5px 0}
.tubemap .roundel.northern {background-image: url(/img/content/location/connections/northern.svg);}
.tubemap .roundel.bakerloo {background-image: url(/img/content/location/connections/bakerloo.svg);}
.tubemap .roundel.victoria {background-image: url(/img/content/location/connections/victoria.svg);}
.tubemap .roundel.central {background-image: url(/img/content/location/connections/central.svg);}
.tubemap .roundel.elizabeth {background-image: url(/img/content/location/connections/elizabeth.svg);}
.tubemap .roundel.piccadilly {background-image: url(/img/content/location/connections/piccadilly.svg);}
.walktime {font-size:16px;line-height:1em;padding:4px 10px;border-radius:12px}
.tubelogo {width:100%;height:10vh;background:url(/img/content/location/connections/maplogo.svg) no-repeat bottom center;background-size:auto 100%;position:absolute;bottom:50%;left:0}

.railmap {width:calc(100% + 180px);margin-left:-90px;position:relative;font-size:16px;line-height:1.3em}
.stations {display:flex;box-sizing: border-box;padding:0 90px 50px 90px;justify-content: center;position: relative;pointer-events: none;max-width:1600px;margin:0 auto}
.stationside {display:flex;flex:1 1;justify-content: space-around;}
.railmap .station {margin:0 2%}
.stationtime {margin-bottom:40px}
.raillogo {background:#213136;padding:15px}
.raillogo img {width:70px}
.rail {position:absolute;top:33px;left:0;border-bottom:1px solid #42BDA7;width:100%;height:1px}
.sleepers {background:url(/img/content/location/connections/rail.svg) repeat-x 50% 50%;height:10px;margin:0 90px;margin-top:-3px}
.extraline {height:1.1em}
.spacersection {height:90px}


/****************************************************
* Misc
****************************/

.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.05em}
.num {text-align:right}



/* #Media Queries
================================================== */
	/* too big */
	@media only screen and (min-width: 1600px) {
		h1 {font-size:72px;line-height:1.1em}
		.elevationsection h1 {width:700px}
	}
	
	/* bigger desktop */
	@media only screen and (max-width: 1245px) {
		/*body {font-size:16px;line-height:1.3em}*/
		
		h4 {font-size:30px;line-height:1.1em}
		h5 {font-size:24px;line-height:1.1em}
		
		/**** footer ****/
		.footer {font-size:16px;line-height:1.3em}
		.agentlogo img {width:200px}
		.footer span {font-size:28px;line-height:1.1em}
		.misrep {padding:30px}
		.agents p:first-child {padding-top:0}
		.agents p:last-child {padding-bottom:0}
		
		/**** home ****/
		.homelinks a {width: calc(50vw - 200px);height: calc(50vw - 200px);}
		.homelinksshape svg {height: calc(50vw - 200px);}
		
		/**** building ****/
		.speclist {padding:0 60px}
		.specitem {padding:40px 20px}
		.specline {flex-basis: calc(100% + 120px);margin-left: -60px;}
		
		.availabletable td {padding:12px 10px}
		
		/**** location ****/
		.amenitylist {margin-bottom:20px}
		.amenitytoggle {margin-left:10px}
		.listholder {font-size:14px;line-height:1.3em}
		.listcolumn {padding:0 10px}
		.occupierslists .listcolumn ul li {padding-right:10px}
		
		.oxford {left:20%}
		.piccadilly {right:20%}
		.railmap {font-size:14px;line-height:1.3em}
	
	}

	/* 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) {
		h3 {font-size:36px;line-height:1.1em}
		h4 {font-size:28px;line-height:1.1em}
		h5 {font-size:24px;line-height:1.1em}
	
		/**** footer ****/
		.agents {flex-wrap:wrap;justify-content: center;padding:20px 0}
		.agents p {padding:15px}
		
		/**** building ****/
		.buildinggallery, .buildinggallery .slide {height:60vw}
		
		.speclist {padding:0}
		.specline {display:none}
		.specitem {flex-basis:calc(100% / 3)}
		
		.elevation .pic {display: none;}
		
		.plans {height:75vh}
		.planshead {border-bottom:none;padding:0}
		.planshead .text {position:absolute;top:45px;left:120px}
		.planshead .text span {width:180px;display:inline-block}
		.plantoggle {position:absolute;bottom:105px;left:90px;width:calc(100% - 180px);display: flex;justify-content: center;z-index:1000}
		.planholder {pointer-events: none;height:60%;margin-top:20%}
		.planinner {flex-basis:100%;height:100%}
		
		.planside {bottom:0;width:100%;display:flex;height:auto;flex-direction:column}
		.key {position:relative;display:flex;width:100%;justify-content: space-around;top:auto;margin-bottom:10px;left:auto;flex-wrap:wrap}
		.key li {margin:0;font-size:10px}
		.pager {bottom:0;width:100%;flex-direction:row-reverse;justify-content: center;height:40px;margin-bottom:0px;}
		.pager div {border-radius:0;padding:8px;margin:0;border:1px solid #213136;border-right:none;text-align: center;display:flex;justify-content: center;flex:1 1}
		.pager div:last-child {border-left:none}
		.pager div:hover {padding-left:8px}
		
		/**** location ****/
		.horizontal-section {width:300vw}
		.locationhead {font-size:5vh}
		.pic1 .pic {width:50vw;border-radius:25vw 25vw 0 0}
		
		.pic2 {left:calc(90px + 60vw)}
		.pic2 .pic {width:65vw}
		
		.pic3 {left:calc(90px + 90vw)}
		.pic3 .pic {width:90vw}
		
		.pic4 {left:calc(90px + 135vw)}
		.pic4 .pic {width:30vw;border-radius:15vw 15vw 0 0}
		
		.pic5 {left:calc(90px + 175vw)}
		.pic5 .pic {width:40vw}
		
		.pic6 {left:calc(90px + 190vw)}
		.pic6 .pic {width:40vw;border-radius:20vw 20vw 0 0}
		
		.pic7 {left:calc(90px + 225vw)}
		.pic7 .pic {width:40vw}
		
		.locationmap {padding:0}
		/*.locationmap .rightborder, 
		.locationmap .leftborder {display:none}*/
		.mapsection {flex-direction:column;background:#213136}
		.maplist {background:#EAE3DB;width:calc(100% - 180px);margin:0 90px 90px 90px}
		.mapmask {display:none}
		.mapcolumn {flex:0 0 50vh;margin:0}
		.mapholder, .map {height:50vh}
		
		.amenitytoggle {margin:0 0 20px 0}
		.amenitytoggle .toggle {display:flex}
		.amenitytoggle .toggle a {flex:0 0 50%;padding:15px 0;text-align:center;border:none;background:#213136;color: #EAE3DB;}
		.amenitytoggle .toggle a:first-child,.amenitytoggle .toggle a:last-child {border-radius: 0;}
		.amenitytoggle .toggle a.active {background: #EAE3DB;color:#213136;}
		.listcolumn li {margin-bottom:3px}
		.amenitylist h4 {padding-top:28px;background-size:auto 20px;margin-bottom:10px}
		.amenitylist h4.lighttext {color:#213136}
		
		.oxford {left:10%}
		.piccadilly {right:10%}
		.goodge {bottom: calc(50% + 10vh + 20px);}
		.tottenham {top: calc(50% + 20px);}
		
		.tubesection {padding:45px 0 0 0;height:80vh}
		
		.stations {align-items: flex-start;}
		.stationside {flex-direction:column}
		.stationside:first-child {text-align: right;}
		.stationside:last-child {text-align: left;}
		.extraline {display:none}
		.stationtime {margin-bottom:5px;font-size:12px;line-height:1.3em}
		.station h5 {margin-bottom:5px}
		.railmap .station {margin-bottom:20px}
		
		.rail {border-bottom:none;border-right:1px solid #42BDA7;width:5px;height:100%;left: calc(50% - 5px);}
		.sleepers {background:url(/img/content/location/connections/railvert.svg) repeat-y;background-size:100% auto;width:10px;height:100%;border:0;margin:0}
		
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		body {font-size:16px;line-height:1.3em}
		h1 {font-size:38px;line-height:1.1em;margin-bottom:24px}
		h3 {font-size:30px;line-height:1.1em}
		h4 {font-size:22px;line-height:1.1em}
		h5 {font-size:18px;line-height:1.1em}
		
		.pagesection {padding-left:35px;padding-right:35px}
		.pagesectioninner {padding:35px 16px}
		.pagesectioninner p:last-child {margin: 0;}
	
		/**** nav ****/
		.nav {font-size:16px;top:20px}
		.nav a {height:30px;max-width:100px;margin-bottom:0;padding:0 12px 0 18px}
		.nav .n2 {top:43px}
		.nav .n3 {top:86px}
		.scrolled .nav a {max-width:30px}
		.homelogo {width:35px;padding-top:20px}
		.homelogo svg {width:16px;height:155px}
		
		/**** borders ****/
		.rightborder, .leftborder, .logoleftborder {width:35px}
		
		/**** footer ****/
		.footer {padding:35px 0}
		.footerinner {padding:0 35px}
		.agentlogo, .misrep {padding:20px}
		
		/**** home ****/
		.intrologo {width:calc(100vw - 130px);margin:auto;left:50%;transform: translateX(-50%);}
		.homelinksshape {display:none}
		.homelinks {flex-direction:column}
		.homelinkside {flex:0 0 50vh;}
		.homelinkside.building {padding:35px 35px 0 35px}
		.homelinkside.location {padding:0 35px 35px 35px}
		.homelinks a {width:100%;height:100%;font-size:32px;line-height:1.1em;flex-direction:column}
		.homelinks a:before {content:'';width:20px;height:20px;margin:0 0 16px 0;background:url(/img/content/home/building.svg) bottom center no-repeat;background-size:contain}
		.homelinks .location a:before {background-image:url(/img/content/home/location.svg)}
		
		/**** building ****/
		.buildingheader {height:90vh}
		.buildingheader .text {position:absolute;top:150px;left:0;text-align: center;padding:0 60px;}
		.buildingheader h1 {color:#213136 !important}
		.buildingheader .pic {flex:0 0 100%;background-image: url(/img/content/building/mobilebanner.jpg);}
		
		.galleryholder .cycle-pager {margin-top:20px}
		.galleryholder .cycle-pager span {width:16px;height:16px}
		.galleryholder {padding-bottom:35px}
		
		.spec {padding:35px;text-align: center;}
		.spec h2 {margin:0}
		.speclist {font-size:12px;line-height:1.3em}
		.specitem {flex:0 0 50%;padding:16px}
		.specitem .icon {width:100px;height:100px;margin-bottom:10px}
		
		.videosection {padding:35px}
		
		.elevationsection h1 {text-align: center;padding:20px 10px 0 10px;width:100%}
		.elevation {padding-bottom:35px}
		
		.plans {padding:0 35px}
		.planshead .text {left:50px}
		.planshead .text span {width:120px}
		.toggle {font-size:12px;line-height:1em}
		.toggle a {padding:8px 20px;white-space:nowrap;}
		
		.gallery2 {padding-top:35px}
		
		/**** location ****/
		.horizontal-section {padding-left:35px;width:700vw}
		.locationhead {left:55px;top:60px;width:60vw}
		.piccaption {padding-left:10px}
		
		.pic1 {left:35px}
		.pic1 .pic {width:calc(100vw - 70px);border-radius:calc(50vw - 35px) calc(50vw - 35px) 0 0;height:60vh}
		
		.pic2 {left:calc(35px + 100vw)}
		.pic2 .pic {width:calc(100vw - 70px);height:60vh}
		
		.pic3 {left:calc(35px + 200vw);bottom: 20vh;}
		.pic3 .pic {width:calc(100vw - 70px);height:60vh}
		
		.pic4 {left:calc(35px + 300vw)}
		.pic4 .pic {width:calc(100vw - 70px);border-radius:calc(50vw - 35px) calc(50vw - 35px) 0 0;height:60vh}
		
		.pic5 {left:calc(35px + 400vw)}
		.pic5 .pic {width:calc(100vw - 70px);height:60vh}
		
		.pic6 {left:calc(35px + 500vw);bottom: 20vh;}
		.pic6 .pic {width:calc(100vw - 70px);border-radius:calc(50vw - 35px) calc(50vw - 35px) 0 0;height:60vh}
		
		.pic7 {left:calc(35px + 600vw)}
		.pic7 .pic {width:calc(100vw - 70px);height:60vh}
		
		.locationmap {padding:0}
		.amenitytoggle {margin-bottom:12px}
		.mapholder {z-index:4000}
		.maplist {width: calc(100% - 70px);margin: 0 35px 35px 35px;}
		.listholder {font-size:12px;line-height:1.3em}
		.listcolumn li {margin-bottom:0}
		.amenitylist h4 {padding-left:24px;padding-top:0;background-position: top left;margin-bottom:4px}
		.occupierslists h4 {display:none}
		
		.tubesection {height:85vh}
		.tubesection h1 {text-align: center;margin:0px 10px}
		
		.tubemap .roundel {width:28px;height:21px;margin:2px 0}
		.walktime {font-size:12px;line-height: 1em;}
		
		.tubelogo {bottom:38%}
		.goodge {bottom: calc(38% + 10vh + 20px);}
		.tottenham {top: calc(62% + 20px);}
		.oxford {left:5%;top: calc(62% - 38px);}
		.piccadilly {right:5%;top: calc(62% - 13px);}
		.vertline {height:60%;top:auto;bottom:0;display:none}
		.horzline {top:auto;bottom:38%}
		
		.raillogo {padding-top:0}
		.raillogo img {width:26px}
		.station h5 {font-size:24px;line-height:1.1em}
		
		.spacersection {height:35px}
	}

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