@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: 20px/26px "DIN Next Stencil W01 Light", 'Allerta Stencil', Arial, sans-serif;
	color: #666;
	background: #fff url(/img/ui/bg.gif) repeat-x top center;
	height:100%;
}

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

.flexmiddle {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
}

a {color:#ee771b}

h1 {font-size:72px;line-height:72px;font-weight:normal;color:#b3babe}
h2 {font-size:36px;line-height:36px;font-weight:normal;}
h3 {font-size:30px;line-height:30px;font-weight:normal;font-family:"DIN Next Stencil W01 Bold", 'Allerta Stencil', Arial, sans-serif;color:#ee771b;}

.grey {color:#b3babe}

/**** nav ****/
.navbutton, .closebutton {position:fixed;top:0;right:0;z-index:2000;display:block;background:#ee771b;width:60px;cursor:pointer;cursor:hand}
.navbutton:hover, .closebutton:hover {background:#fff}
.navbutton .menuicon, .closebutton .menuicon {display:block;width:30px;height:4px;background:#b6bdc2;margin:18px 15px 38px 15px}
.navbutton .menuicon:before, .navbutton .menuicon:after, .closebutton .menuicon:before {content:'';display:block;width:30px;height:4px;background:#b6bdc2}
.navbutton .menuicon:before, .closebutton .menuicon:before {position:relative;top:10px}
.navbutton .menuicon:after {position:relative;top:16px}
.navbutton .menulabel, .closebutton .menulabel {display:block;background:#b3babf;color:#fff;transform: rotate(-90deg); transform-origin: 100% 0%;position:absolute;height:30px;top:60px;right:60px;font-size:30px;line-height:30px;font-family:"DIN Next Stencil W01 Bold", 'Allerta Stencil', Arial, sans-serif;padding:15px 15px 16px 15px}

.navholder {position:fixed;top:0;right:calc((25vw + 60px) * -1);z-index:2100;
	-ms-webkit-transition: right 0.2s;
	-webkit-transition: right 0.2s;
    transition: right 0.2s;}
.opennav .navholder {right:0}
.closebutton {position:absolute;left:-60px;right:inherit}
.closebutton .menuicon {transform: rotate(45deg);margin:28px 0 28px 16px}
.closebutton .menuicon:before {transform: rotate(-90deg);top:0}
.menu {width:25vw;height:100vh;background:#b3babf}
.nav {list-style-type:none;width:100%;margin:0}
.nav li {padding:0 0 0 30px;margin:15px 0;font-size:30px;line-height:30px}
.nav li a {display:inline-block;background:#b3babf;color:#fff;text-decoration:none;padding:0 10px}
.nav li a:hover {text-decoration:underline}
.s0 .nav .n0,
.s1 .nav .n1,
.s2 .nav .n2,
.s3 .nav .n3,
.s4 .nav .n4,
.s5 .nav .n5,
.s6 .nav .n6 {background:url(../img/ui/stripebg.png)}

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

.nav li.download a {color:#ffe4cc}

/**** banner ****/
.pagebanner {width:100%;min-height:100vh;position:relative}
.walkthrough {display:flex;align-items:center;background:#ee771b left 10px center no-repeat url(/img/ui/walkthrough.svg);background-size:40px auto;height:60px;z-index:1000;color:#fff;text-indent:60px;text-transform: uppercase;text-decoration:none;}
.pagebanner .walkthrough {position:absolute;bottom:0;left:240px;width:calc(100% - 240px);}
.walkthrough:hover {color:#293d59}
.pagebanner .bannerbg, .pagebanner .cycle-slideshow {width:calc(100% - 115px);min-height:100vh;margin-left:115px;}
.pagebanner .bannerbg, .pagebanner .cycle-slideshow .slide {background:50% 50% no-repeat;background-size: cover}
.pagebanner .cycle-slideshow .slide {width:100%;height:100vh;}

.pagebanner .slidecontrols {position:absolute;bottom:0;right:0;background:#fff;color:#b3babe;z-index:1800;min-width:120px}
.pagebanner .slidecontrols.withcaption {min-width:30vw}
.pagebanner .textbox {padding:30px 60px 60px 150px;position:relative;}
.pagebanner .textbox h2 {margin:0}
.pagebanner .textbox:before {content:'';display:block;width:60px;position:absolute;top:0;left:0;bottom:0;background:url(../img/ui/stripebg.png)}

.slidecontrols svg {display:block;float:left}
#prev .buttonbg {fill:#b3babe}
#prev .arrow {fill:#fff}
#next .buttonbg {fill:#fff}
#next .arrow {fill:#ee771b}
.slidecontrols #prev, .slidecontrols #next {cursor:pointer;cursor:hand}
.slidecontrols #prev:hover .arrow, .slidecontrols #next:hover .arrow, #prev2:hover .arrow, #next2:hover .arrow {fill:#fff}
.slidecontrols #prev:hover .buttonbg, .slidecontrols #next:hover .buttonbg, #prev2:hover .buttonbg, #next2:hover .buttonbg {fill:#ee771b;}

.slidecontrols #caption {padding:15px 30px 0 150px;}

/**** logo bar ****/
.logoholder {position:absolute;top:0;left:0;width:240px;height:100vh;z-index:1000;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100 */
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
}
.logofill {width:100%;height:calc(100vh - 400px);background:#b6bdc2}
.logo {posiiton:absolute;bottom:0;left:0;width:100%;height:400px;background:url(/img/content/logo.svg) bottom left no-repeat;background-size:contain}

.intro {position:relative;z-index:1500;margin-top:-102px;background:#fff;padding-top:30px}
.intro.heading {height:102px;margin-top:-102px}
.intro h1, .intro h2 {background:#fff}
.intro.headingsubheading {height:150px;margin-top:-150px}
.intro {white-space: nowrap}
.intro2 {position: relative;padding-top:30px}
.intro2 p:last-child {margin:0}
.introstripes {position:absolute;top:0;left:0;bottom:0;width:60px;background:url(../img/ui/stripebg.png)}
.sectiongap {height:60px;clear:both}


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

/**** fitzrovia ****/

.dayheading {border-bottom:4px solid #ee771b;margin-bottom:30px}
.dayheading h3 {margin-bottom:5px}
.dayheading.position {margin-top:-35px}
.dayheading.night {text-align:right}
.daypics {margin-top:-30px;padding:30px 0 60px 0}
.daypics.rightborder {border-right:4px solid #ee771b;}
.daypics.leftborder {border-left:4px solid #ee771b;}

/**** connections ****/
.tubelines {position:absolute;right:0;top:-60px;bottom:0;width:200px;background:url(../img/content/connections/tubelinesbg.svg) top left repeat-y;background-size:100%;padding-top:50px;}
.tubecontent {height:100%;position:relative}
.tubecontent img {position:absolute;bottom:30px}
.bordertable {width:100%}
.bordertable td {border-bottom:2px solid #ee771b;padding:9px 3px}
.picstrip {width:100%;height:70vh;background:50% 50% no-repeat;background-size:cover;position:relative}
.picstrip .stripcontent {position:absolute;bottom:-60px;left:0;width:100%}
.picstrip .whitebg {background:#fff;padding:30px 20% 0 90px;position:relative}
.greystrip {padding:30px 0 90px 0;background:#e4e7e9}
.greystrip .bordertable td {border-bottom:2px solid #b6bdc2}

/**** availability ****/
.bordertable thead td, .bordertable tfoot td {font-family:"DIN Next Stencil W01 Bold", 'Allerta Stencil', Arial, sans-serif}
.walkthrough.areaswalkthrough {text-indent:0;padding-left:60px}
.floorplan {position:relative;padding:60px 0 30px 0}
.floorplan h2 {margin:0}
.floorplan .plan {padding-right:30px}
.floorplan .controls {position:absolute;bottom:0;left:60px;z-index:1800}
.floorplan .controls svg {float:left}
.floorplan .controls .buttonbg {fill:#b3babe;cursor:pointer;cursor:hand}
.floorplan .controls .arrow {fill:#fff}
.floorplan .slide {width:100%}
.spaceplans {padding-bottom:90px}
.bluestrip {background:#b6bdc2;padding:60px 0;color:#fff;margin-top:-90px}
.overhang {position:relative}
.overhang p {position:absolute;bottom:90px;right:60%;text-align:right;max-width:300px}
.north {position:absolute;top:0;left:80px;width:40px;height:40px;background:url(/img/content/availability/north.svg) top left no-repeat;background-size:contain}

.key {line-height:60px}
.key span {display:block;width:60px;height:60px;float:left;margin:0 15px 15px 0;clear:both}
.key span.available {background:#a4acb1}
.key span.let {background:#54687d}

/**** specification ****/
.s4 .pagebanner .bannerbg {width:100%;margin-left:0px;}
.specbox {background:#fff;position:relative;padding:60px 0}
.spec li {margin-bottom:10px}

/**** contact ****/
.s5 .pagebanner .bannerbg {width:100%;margin-left:0px;}
.s5 .logoholder {position:fixed}
.overlay {position:fixed;top:0;left:0;width:100%;height:100vh;background:rgba(255,255,255,0.8)}
.contact {min-height:80vh}
.misrep p {font-size:11px;line-height:13px}
.kier {text-align:right;}
.kier img {margin:15px 0 0 0 }

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

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

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

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


.revealOnScroll.fadeInUp {
  opacity: 0;
}


/* #Media Queries
================================================== */

/* biggest desktop */
	@media only screen and (max-width: 1500px) {
		
		.logoholder {width:180px}
		.pagebanner .walkthrough {left:180px;transform:rotate(-90deg);transform-origin:0 0;bottom:-60px;width:100vh}
		.logofill {height:calc(100vh - 300px)}
		.logo {height:300px}
		
		.pagebanner .bannerbg, .pagebanner .cycle-slideshow {width:calc(100% - 90px);margin-left:90px;}
}
	
/* biggest desktop */
	@media only screen and (max-width: 1230px) {
		
		.logoholder {width:120px}
		.pagebanner .walkthrough {left:120px}
		.logofill {height:calc(100vh - 200px)}
		.logo {height:200px}
		.pagebanner .bannerbg, .pagebanner .cycle-slideshow {width:calc(100% - 60px);margin-left:60px;}
}
	
	/* bigger desktop */
	@media only screen and (max-width: 1229px) {
		body {font-size:18px;line-height:24px}
		h1 {font-size:48px;line-height:48px}	
		h2 {font-size:26px;line-height:26px}
		
		/**** connections ****/
		.tubelines {width:150px}
	
}

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width:1099px) {
		body {font-size:16px;line-height:20px}
		
		.navholder {right:calc((50vw + 60px) * -1)}
		.menu {width:50vw}
		
		
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		body {font-size:14px;line-height:18px}
		.pagebanner .slidecontrols.withcaption {min-width:120px}
		.slidecontrols #caption {display:none !important}
		
		h1 {font-size:36px;line-height:36px}	
		h2 {font-size:22px;line-height:22px}
		
		/**** connections ****/
		.tubelines {width:120px}
}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		
		.mobilemargin {margin-bottom:20px}
		
		h1 {font-size:36px;line-height:36px}	
		h2 {font-size:18px;line-height:18px}
		
		.navholder {right:-100vw}
		.menu {width:calc(100vw - 60px)}
		.navbutton .menulabel, .closebutton .menulabel {display:none}
		.nav li {font-size:20px;margin:5px 0}
		
		.logoholder {width:60px}
		.pagebanner .walkthrough {left:60px;height:40px;bottom:-40px;background-size:20px auto;text-indent:40px}
		.logofill {height:calc(100vh - 100px)}
		.logo {height:100px}
		
		/**** pagebanner ****/
		.pagebanner .bannerbg, .pagebanner .cycle-slideshow {width:100%;margin-left:0;}
		
		.slidecontrols {display:none}
		/*.slidecontrols {width:calc(100% - 60px)}*/
		.slidecontrols h2 {font-size:18px;line-height:18px}
		/*.slidecontrols .captioncontrols {display:none}*/
		.slidecontrols .textbox {padding:15px}
		.slidecontrols .textbox:before {display:none}
		
		.introstripes {display:none}
		.intro.heading {margin-top:0px}
		.intro.headingsubheading {margin-top:0px}
		
		/**** connections ****/
		.tubelines {display:none}
		.picstrip .whitebg {background:#fff;padding:30px 0 0 0}
		.whitebg p, .whitebg table {width:90%;margin:0 5%}
		
		/**** availability ****/
		.overhang p {position:relative;bottom:0;right:0;text-align:left;max-width:300px}
		
		/**** specification ****/
		.specbox h1, .specbox ul, .specbox p {width:calc(100% - 70px);margin:0 10px 10px 60px}
		
		/**** contact ****/
		.contact {padding-top:20px}
		.contact p {width:calc(100% - 70px);margin:0 10px 0 60px}
		.contact img {margin-left:60px}
		.misrep p {width:calc(100% - 70px);margin:0 10px 0 60px}
		.kier {width:calc(100% - 70px) !important;margin:20px 10px 0 60px !important;text-align:left}
		
}

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


/*@import url("http://fast.fonts.net/t/1.css?apiType=css&projectid=ec2b4062-3a0f-45bc-89c2-0de37ffdc05a");
    @font-face{
        font-family:"DIN Next Stencil W01 Light";
        src:url("/Fonts/d204357e-00e4-40b2-bb2a-69ca19daf28c.eot?#iefix");
        src:url("/Fonts/d204357e-00e4-40b2-bb2a-69ca19daf28c.eot?#iefix") format("eot"),url("/Fonts/aea0bcd4-432d-445a-95ca-3f9583a6cf3f.woff2") format("woff2"),url("/Fonts/e7f72580-b7ac-4a8d-895b-3ac3491ceeb2.woff") format("woff"),url("/Fonts/cad1edd2-9e28-4544-937d-9514d5b46e13.ttf") format("truetype"),url("/Fonts/4248eb34-398e-4d2c-8444-dc8ee920f939.svg#4248eb34-398e-4d2c-8444-dc8ee920f939") format("svg");
    }
    @font-face{
        font-family:"DIN Next Stencil W01 Bold";
        src:url("/Fonts/9732e80a-4a4b-4a5a-a914-41516940a9fa.eot?#iefix");
        src:url("/Fonts/9732e80a-4a4b-4a5a-a914-41516940a9fa.eot?#iefix") format("eot"),url("/Fonts/97786103-1c7c-4d28-9993-6ffed2cdad56.woff2") format("woff2"),url("/Fonts/7c29cc76-3e49-438e-8019-6240221c33f3.woff") format("woff"),url("/Fonts/35e416e7-cd76-4c67-8fff-8d70b85d608f.ttf") format("truetype"),url("/Fonts/1dd543b8-221a-4280-93d8-5b305e3c0f00.svg#1dd543b8-221a-4280-93d8-5b305e3c0f00") format("svg");
    }*/

@import url("http://fast.fonts.net/t/1.css?apiType=css&projectid=7e316f77-a0c6-4f82-bcd2-0fe811f8bd4c");
    @font-face{
        font-family:"DIN Next Stencil W01 Light";
        src:url("/Fonts/d204357e-00e4-40b2-bb2a-69ca19daf28c.eot?#iefix");
        src:url("/Fonts/d204357e-00e4-40b2-bb2a-69ca19daf28c.eot?#iefix") format("eot"),url("/Fonts/aea0bcd4-432d-445a-95ca-3f9583a6cf3f.woff2") format("woff2"),url("/Fonts/e7f72580-b7ac-4a8d-895b-3ac3491ceeb2.woff") format("woff"),url("/Fonts/cad1edd2-9e28-4544-937d-9514d5b46e13.ttf") format("truetype"),url("/Fonts/4248eb34-398e-4d2c-8444-dc8ee920f939.svg#4248eb34-398e-4d2c-8444-dc8ee920f939") format("svg");
    }
    @font-face{
        font-family:"DIN Next Stencil W01 Bold";
        src:url("/Fonts/9732e80a-4a4b-4a5a-a914-41516940a9fa.eot?#iefix");
        src:url("/Fonts/9732e80a-4a4b-4a5a-a914-41516940a9fa.eot?#iefix") format("eot"),url("/Fonts/97786103-1c7c-4d28-9993-6ffed2cdad56.woff2") format("woff2"),url("/Fonts/7c29cc76-3e49-438e-8019-6240221c33f3.woff") format("woff"),url("/Fonts/35e416e7-cd76-4c67-8fff-8d70b85d608f.ttf") format("truetype"),url("/Fonts/1dd543b8-221a-4280-93d8-5b305e3c0f00.svg#1dd543b8-221a-4280-93d8-5b305e3c0f00") format("svg");
    }