@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: 18px/26px "CircularStd-Book", Arial, sans-serif;
	color: #333694;
	background: #fff url(/img/ui/bg.gif) repeat-x top center;
	height:100%;
}

a {color: #333694;}
b {font-weight:normal;font-family: "CircularXXWeb-Bold";}
h1 {font-weight: normal;font-size:4vw;line-height:1.2em;}
h2 {font-weight: normal;font-size:3vw;line-height:1.2em;}
h3 {font-weight: normal;font-size:20px;line-height:1.2em;}

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

.pinkbg {background-color:#FF947A;color:#333694}
.bluebg {background-color:#333694;color:#FF947A}

.bluetext {color:#333694}
.pinktext {color:#FF947A}
.whitetext {color:#fff}
.bigtext {font-size:24px;line-height:1.2em}

.pic {background:50% 50% no-repeat;background-size:cover;position:relative}
.icon {background: 50% 50% no-repeat;background-size:contain;}
.centretext {text-align:center}
.boxlink {display:inline-block;border:2px solid #333694;text-decoration:none;padding:15px 25px}
.boxlink:hover {text-decoration: underline;}
.boxlink.bluebox {color:#333694;border-color:#333694}
.boxlink.pinkbox {color:#FF947A;border-color:#FF947A}
.pinkbg .boxlink:hover, .bluebg .boxlink:hover {border-color:#fff;}

.contentsection {box-sizing: border-box;padding:5vw;}

.downloadsection {padding:8vw 20%;display:flex;justify-content: space-around;}

/**** nav ****/

/*

*/
.navholder {position:fixed;top:0;right:0;width:100%;height:60px;z-index:2000;transition:width 0.5s;overflow:hidden}
.nav {width:100%;height:100%;box-sizing: border-box;padding:0;position:relative;}
.nav:before {content:'';display:block;position:absolute;top:0;right:0;width:80%;height:60px;background: linear-gradient(90deg, rgba(4,12,27,0) 0%, rgba(4,12,27,0.4) 100%);transition:opacity 0.5s;opacity:0}
.scrolled .nav:before {opacity:1}
.nav ul {margin:0;padding:0;list-style-type: none;}
.nav ul li {margin:0;padding:0;position:relative}
.nav ul li a {color:#fff;text-decoration: none;}
.nav ul li a:hover {text-decoration: underline;}

.s0 .nav .n0,
.s1 .nav .n1,
.s2 .nav .n2,
.s3 .nav .n3,
.s4 .nav .n4,
.s5 .nav .n5 {text-decoration: underline;}

.nav .links {font-size:16px;line-height:1em;display:flex;justify-content:flex-end;align-items: center;height:100%}
.nav .links li {margin:0 40px 0 0}

.nav .downloads {position:absolute;bottom:3.75vw;left:5vw;font-size:12px;line-height:16px;display:none}
.nav .downloads li {margin-top:10px}
.nav .downloads a {background:bottom left no-repeat url(/img/ui/download.svg);background-size:20px auto;display:block;padding:17px 0 3px 30px}

.navline {position:fixed;top:60px;display:flex;z-index:1000;width:100%;pointer-events: none;}
.navline a {pointer-events:all}
.navline .line {background:#fff;height:2px}
.navline .line:first-child {flex:0 0 40px}
.navline .line:last-child {flex:1 1 100%}
.navline img {margin:0 20px;flex:0 0 120px;width:120px;margin-top:-15px}
.navline .vertline {position:absolute;right:60px;height:60px;width:2px;background:#fff;top:-60px;display:none}

.navbutton {position: fixed;width:60px;height:60px;top:0px;right:0px;z-index:3000;cursor:pointer;transition:background 0.5s;display:none}
.scrolled .navbutton {background:rgba(51,54,148,0.5)}
.navbutton:hover {background:rgba(255,148,122,0.2)}
.navbutton .navicon {position: relative;width:100%;height:100%}
.navbutton .navicon span {display:block;width:26px;height:2px;background:#fff;position:absolute;border-radius:2px;transition:top 0.2s 0.2s, transform 0.2s, opacity 0.2s, background 0.4s;left:17px}
.navbutton .navicon span:nth-child(1) {top:21px}
.navbutton .navicon span:nth-child(2) {top:29px;transform-origin:50% 50%}
.navbutton .navicon span:nth-child(3) {top:37px;transform-origin:50% 50%}

.menuopen .navbutton .navicon span {transition:top 0.2s, transform 0.2s 0.2s, opacity 0s 0.2s, background 0.4s;/*background:rgba(27, 31, 35, 1)*/}
.menuopen .navbutton .navicon span:nth-child(1) {top:29px;opacity:0}
.menuopen .navbutton .navicon span:nth-child(2) {top:29px;transform: rotate(-45deg);}
.menuopen .navbutton .navicon span:nth-child(3) {top:29px;transform: rotate(45deg);}
.menuopen .navholder {width:35vw}


/**** footer ****/
.contact {background-color:#FF947A;color:#333694;padding:5vw}
.s4 .contact {padding-top:160px}
.contact h2 {margin-bottom:40px}
.contactsection {border:2px solid #333694;margin:0 0 40px 0;padding:20px}
.agencies {padding:1vw;display:flex}
.agency {padding:1vw;box-sizing: border-box;flex:0 0 50%;}
.agentlogo {display:block;width:140px;height:70px;background:left center no-repeat;background-size:contain;margin-bottom:20px}
.agents {display:flex;flex-wrap: wrap;}
.agent {box-sizing: border-box;padding-right:20px;flex:0 0 50%;}
.agent b {display:inline-block;margin-bottom:5px}

.footer {font-size:11px;line-height: 13px;padding:5vw;display:flex;align-items: flex-start;}
.footer img {width:120px;margin-right:20px}
.footer a {color:#fff}

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

/**** home ****/
.s0 .navline img, .s2 .navline img {display:none}

.homeintro {width:100%;height:100vh;position:relative;display:flex;align-items:center;justify-content:center;background:50% 50% no-repeat;background-size:cover}
.homeintro video {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position: 50% 50%;}
.homeintro .overlay {position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.37)}
.homeintro img {position: relative;max-width:400px;min-width:260px;width:20vw;}
.homeintro h1 {position:relative}

.homesection {min-height:100vh;position:relative;display:flex;align-items:center;justify-content: center;}

.homecircles {display: flex;justify-content: center;margin:40px 0}
.homecircle {flex:0 0 20vw;height:20vw;background:rgba(255,255,255,0.17);margin:20px;border-radius:50%;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.homecircle .icon {flex:0 0 5vw;width:5vw;margin-bottom:20px}

.pavintro {box-sizing: border-box;padding:5vw 0;display:flex;justify-content:space-around;width:100%;padding:5vw}
.pavintro .pic {flex:0 0 35vw;height:60vw}
.pavintro .text {flex:0 0 35vw;padding:40px 0}
.pavintro .text img {max-width:400px;margin-bottom:40px}
.pavintro .boxlink {margin-top:40px}

.crosssection {display:flex;width:100%;min-height:100vh;}
.crosssection .pic {background:center bottom 5vw no-repeat;background-size:90% auto;flex:1 1 50%;}
.crosssection .text {flex:1 1;box-sizing: border-box;padding:5vw;display:flex;flex-direction: column;align-items: flex-start;justify-content:center;}
.retailtext {margin:40px 0}

/**** location ****/
.partygate {flex-direction:column;padding:5vw 25vw}

.walkingtimes {padding:5vw 0 5vw 5vw}
.walkingtimes .homecontent {width:100%}
.walkingsliderholder {margin-top:5vw;position: relative;}
.walkingsliderholder .overlay {position:absolute;top:0;right:0;bottom:0;width:25vw;height:100%;z-index:500;background: rgb(51,54,148);
background: linear-gradient(270deg, rgba(51,54,148,1) 0%, rgba(51,54,148,0) 100%);}
.walkingtimes .slide {width:25vw;margin-right:10px}
.walkingtimes .pic {height:25vw;width:100%;background:50% 50% no-repeat;background-size:cover;margin-bottom:40px}
.walking {display:flex;align-items: center;height:40px;}
.walking .man img {height:40px;width:auto;margin-right:20px}
.walking .line {height:1px;flex:1 1;border-bottom:2px dashed #FF947A;margin-right:10px}
.walkingtimes .slick-arrow {position:absolute;top:0;z-index:600;height:25vw;background:50% 50% no-repeat;background-size:2vw auto;border:0;overflow:hidden;text-indent:-9999px;width:2vw;cursor:pointer}
.walkingtimes .slick-prev {left:-2.5vw;background-image:url(/img/ui/leftpink.svg)}
.walkingtimes .slick-next {right:2.5vw;background-image:url(/img/ui/rightpink.svg)}

.linearpark {width:100%;}
.linearpark .pic {height:80vh}
.linearpark .pic:before {content:'';width:100%;height:100%;background:rgba(0,0,0,0.2);display:block}
.linearpark .linearline {width:5px;height:100%;background:#fff;position:absolute;top:0;right:35vw;z-index:50}
.linearpark .lineinner {width:100%;height:100%;position:relative;box-sizing: border-box;padding-top:20vh;}
.linearpark h1 {margin:0}
.linearpark h1:first-child {text-align:right;position:absolute;right:20px;top:20vh}
.linearpark h1:last-child {position:absolute;left:20px;top:calc(20vh + 1.2em)}
.linearpark .text {position: relative;padding:5vw;display:flex}
.linearpark .text .linearline {height:calc(100% - 40px);background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);}
.linearpark .text .text1 {flex:0 0 55vw;margin-right:10vw}

.neighbourhood {text-align:center;padding:5vw}
.neighbourhood .cycle-slideshow {margin-top:4vw;width:60vw;margin-left:auto;margin-right:auto}
.neighbourhood .slide {background:50% 50% no-repeat;background-size:contain;width:100%;height:55vh}
.neighbourhood .caption {position: absolute;bottom:0;right:0;color:#fff;width:100%}
.neighbourhood .caption span {margin:0 auto;padding:5px 20px;background:rgba(0,0,0,0.5);display:inline-block}
.cycle-pager {display:flex;justify-content: center;margin-top:40px;}
.cycle-pager span {overflow: hidden;text-indent:-9999px;background:#fff;margin:0 5px;width:40px;height:4px;cursor: pointer;}
.cycle-pager span.cycle-pager-active {background:#333694}

.quote {padding:5vw;display:flex;align-items: center;}
.quote .text {margin-right:5vw}
.quote .pic {flex:0 0 20vw;height:20vw;border-radius:50%;margin:0 5vw}

#map {height:90vh;width:100%}

.staticmap {width:100%;height:90vh;background:#333693 url(/img/content/location/map.gif) 50% 50% no-repeat;background-size:contain}

.tubetimes {padding:5vw;font-size:14px;line-height:18px}
.traveltimes {position:relative;padding:5vw 0;display:flex;align-items:center}


.destinations {flex:1 1;display:flex;justify-content: space-between;align-items: center;position: relative;padding:0 5vw 0 2.5vw;}
.destinations:before {content: '';display:block;width:calc(100% - 2px);height:2px;background:#FF947A;position:absolute;left:0;top:calc(50% - 1px);}
.destinations:after {content: '';display:block;width:15px;height:100%;background:right center no-repeat url(/img/ui/rightpink.svg);background-size:contain;position:absolute;right:0;top:0;}
.destination {flex:0 0 40px;height:40px;background:#fff;border-radius:50%;text-align:center;position:relative;display:flex;align-items:center;justify-content:center;box-sizing: border-box;padding-top:3px;border:2px solid #FF947A}
.destination .label {position: absolute;top:50px;left:50%;transform:translateX(-50%);white-space: nowrap;}
.linename {margin-right:40px;border:none;background:50% 50% no-repeat;background-size:auto 40px;flex:0 0 60px;border-radius: 0;}

/**** offices ****/
.buildingbanner {background:50% 50% no-repeat url(/img/content/offices/banner.jpg);background-size:cover;display:flex;flex-direction:column;justify-content: space-between;position:relative;min-height:100vh;padding:100px 5vw 5vw 5vw;box-sizing:border-box}
.buildingbanner:before {content:'';display:block;position:absolute;top:0;bottom:0;left:0;width:50%;height:100%;background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);opacity:0.7;z-index:5}
.buildingbanner video {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position: 50% 50%;}
.buildingbanner .logo {position: relative;width:340px;margin-bottom:40px;z-index:10}
.buildingbanner .text {position: relative;z-index:10}
.buildingbanner h1 {margin:0}

.specsection {display:flex;}
.specsection .text {margin-right:5vw;display:flex;flex-direction: column;}
.specsection .pic {flex:0 0 30%;background-image:url(/img/content/home/tower.jpg);min-height:40vw}
.specbody {display:flex;margin-top:40px}
.speclist {flex:0 0;flex-basis:calc(50% - 2.5vw);margin-left:5vw}
.speclist ul {list-style-type:none;}
.speclist ul li {position:relative;margin-left:1.2em;margin-bottom:5px}
.speclist ul li:before {position:absolute;top:0;left:-1.2em;content:'–'}

.viewcast {padding-left:20vw;padding-right:20vw}

.officesection {flex-direction:row-reverse}

.availabletable {min-width:35vw}
.availabletable td {padding:8px 5px;border-bottom:1px solid #333694}
.availabletable thead td {color:#FF947A;border-color:#FF947A}
.availabletable tfoot td {font-family: "CircularXXWeb-Bold";border: none;}

.plansection {padding-left:10vw;padding-right:10vw}
.planbuttons {margin:40px 0 20px 0;display:flex}
.planbuttons a {margin-right:20px;cursor: pointer;}
.planbuttons a:not(.active) {opacity:0.5}
.officeplan {background:#FFFFFF;border:2px solid #FF947A}
.officeplan img {display:block}

.fullgallery {height:90vh;width:100%;position: relative;}
.fullgallery .cycle-slideshow {height:90vh;width:100%}
.fullgallery .slide {height:90vh;width:100%;background: 50% 50% no-repeat;background-size: cover;}

.cycle-caption {position:absolute;z-index:500;bottom:2.5vw;left:2.5vw}
.cycle-pager.floorpager {position:absolute;bottom:2.5vw;right:2.5vw;z-index:500}

/**** retail ****/
.retailintro {padding-left:10vw;padding-right:10vw}
.retailintro p {max-width:1000px;margin:0 auto}
.schedule2 {margin-top:40px}

.summarysection h2 {padding:0 5vw 2.5vw 5vw}
.summary {display:flex}
.summarycol {flex:1 1 50%;padding:0 5vw}


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

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

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

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



/* #Media Queries
================================================== */
	
	/* biggest desktop */
	@media only screen and (max-width: 1230px) {
		.agencies {flex-direction:column}
		
		
	}
	
	/* bigger desktop */
	@media only screen and (min-width: 1100px) and (max-width: 1229px) {}

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width:1099px) {
		.bigtext {font-size:20px;line-height:1.2em}
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		
		h1 {font-size:40px;line-height:1.2em;}
		h2 {font-size:30px;line-height:1.2em;}
		
		/**** nav ****/
		.navbutton, .navline .vertline {display:block}
		.menuopen .navholder, .nav {width:50vw}
		
		.navholder {width:0;height:100vh}
		.nav {height:100vh;padding:7.5vw 5vw;background:#333694}

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

		.nav .links {font-size:30px;line-height:1em;display:block;height:100%}
		.nav .links li {margin-bottom:30px}
		.nav ul li a {color:#FF947A;text-decoration: none;}
		.nav .downloads {display:block}
		
		.nav:before {display:none}
	
		/**** home ****/
		.homecircle {flex-basis:28vw;height:28vw}
		
		.pavintro {flex-direction:column;padding:10vw}
		.pavintro .pic {flex-basis:70vh;width:100%}
		.pavintro .text {width:80%}
		
		.crosssection {flex-direction:column-reverse}
		.crosssection .pic {flex-basis:60vh}
		.availabletable {width:100%}
		
		.downloadsection {padding:5vw}
		
		/**** location ****/
		.neighbourhood {padding:5vw}
		
		/**** offices ****/
		.specsection {flex-direction: column;}
		.specsection .pic {flex-basis:80vh;margin-top:40px}
		.viewcast {padding:5vw}
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		
		h1 {font-size:32px;line-height:1.2em;}
		h2 {font-size:22px;line-height:1.2em;}
		.bigtext {font-size:18px;line-height:1.2em}
		
		.navline .line:first-child {flex-basis:0px}
		.menuopen .navholder, .nav {width:100vw}
		
		.contentsection {padding:10vw 5vw}
		
		.downloadsection {flex-direction: column;padding:10vw 5vw}
		.downloadsection a:last-child {margin-top:20px}
		
		/**** contact ****/
		.agents {flex-direction: column;}
		.footer {flex-direction: column;padding:10vw 5vw}
		.misrep {margin-top:20px}
		
		/**** home ****/
		.homecontent {padding:10vw 5vw;box-sizing: border-box;}
		.homecircles {flex-direction: column;align-items: center;}
		.homecircle {flex-basis:70vw;width:70vw}
		.homecircle .icon {flex-basis: 80px;width:80px;}
		
		/**** location ****/
		.partygate {padding:10vw 5vw}
		
		
		.walkingsliderholder .overlay {width:10vw}
		.walkingtimes .slide {width:75vw;}
		.walkingtimes .pic {height:75vw}
		.walkingtimes .slick-arrow {background-size:20px auto;width:20px}
		.walkingtimes .slick-prev {left:-25px}
		.walkingtimes .slick-next {right:5px}
		
		.linearpark .text {flex-direction: column;}
		.linearpark .text .linearline {display:none}
		
		.quote {flex-direction: column-reverse;align-items:flex-start}
		.quote .pic {flex-basis:40vw;width:40vw;margin:0 0 40px 0}
		
		.traveltimes {flex-direction: column;}
		.destinations {flex-direction: column;padding:0}
		.destinations:before {height:100%;width:2px;top:0;left:50%}
		.destinations:after {display:none}
		.destination {height:40px;width:40px;margin:0 0 80px 0}
		.destination .label {background:rgba(255,255,255,0.8)}
		.linename {width:60px;margin-bottom:40px}
		
		/**** offices ****/
		.crosssection {padding-top:0}
		.buildingbanner .logo {width:240px}
		.specbody {flex-direction:column;margin-top:0px}
		.speclist {margin-left:0}
		.planbuttons {flex-direction: column;}
		.planbuttons a:last-child {margin-top:20px}
		.fullgallery, .fullgallery .cycle-slideshow, .fullgallery .slide {height:60vh}
		.cycle-pager.floorpager {right:auto;left:2.5vw;bottom:20px}
		.cycle-caption {bottom:40px}
		
		.summary {flex-direction: column;}
	}

	/* 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: "CircularStd-Book";
  src: url("/fonts/CircularStd-Book.woff") format("woff");
}
@font-face {
  font-family: "CircularStd-Book";
  src: url("/fonts/CircularStd-Book.woff2") format("woff2");
}

@font-face {
  font-family: "CircularXXWeb-Bold";
  src: url("/fonts/CircularXXWeb-Bold.woff") format("woff");
}
@font-face {
  font-family: "CircularXXWeb-Bold";
  src: url("/fonts/CircularXXWeb-Bold.woff2") format("woff2");
}