@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: 16px/24px 'acherusgrotesque-regular', Arial, sans-serif;
	color: rgba(59, 64, 79, 1);
;
	background: rgba(248, 247, 246, 1);
	height:100%;
	font-variant-numeric:lining-nums;
}

.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;
}

.animatein {visibility: hidden;}

.cera {font-family: 'CeraStencilPRO';}
.ceramed {font-family: 'CeraStencilMed'}
.cerabold {font-family: 'CeraStencilPROBold'}
.pic {position:relative;background:50% 50% no-repeat;background-size:cover}

.greybg {background: rgba(242, 240, 238, 1);}
.brownbg {background:rgba(243, 236, 232, 1);
}

.bluetext {color: rgba(83, 166, 198, 1);}

.buttonlink {display:inline-block;border: 1px solid rgba(83, 166, 198, 1);padding:16px 24px;border-radius:2px;line-height:1em;cursor:pointer ;transition:color 0.2s, background 0.2s;}
.buttonlink:hover, .buttonlink.cycle-pager-active {color:rgba(248, 247, 246, 1);background: rgba(83, 166, 198, 1);}

.footer .buttonlink {text-decoration: none;border-color:rgba(95, 100, 115, 1);margin:20px 0}

h1 {font-weight:normal;font-size:7vw;line-height:0.9em;margin-bottom:20px}
h2 {font-weight:normal;font-size:56px;line-height:56px;margin-bottom:20px}
h3 {font-weight:normal;font-size:24px;line-height:26px;margin-bottom:20px;font-family:'CeraStencilMed'}
h4 {font-weight:normal;font-size:36px;line-height:36px;margin-bottom:20px}
h5 {font-weight:normal;font-size:20px;line-height:20px;margin-bottom:5px}

.pagesection {padding:0 20px;position: relative;}
.pagesection.fullwidth {padding:0}
.inner {padding:0 20px;box-sizing: border-box;}
.sectionbreak {clear: both;width:100%;height:5vw;}

/**** nav ****/
.hidenav .navbar {clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);}
.navbar {position:fixed;height:64px;width:100%;background: rgba(248, 247, 246, 1);display:flex;align-items: center;justify-content: space-between;box-sizing: border-box;padding:0 40px;z-index:1000;clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
.navbar img {display: block;}

.navlinks {display: flex;align-items: center;}
.navlinks .textlinks a {margin:0 20px;font-size:18px;line-height:64px;text-decoration: none;color: rgba(59, 64, 79, 1);
}
.navlinks .textlinks a:hover {text-decoration: underline;}
.s1 a.n1,
.s2 a.n2,
.s1 a.n1,
.s2 a.n2 {text-decoration: underline;}


.navbutton, .closebutton {display:block;width:32px;height:22px;padding:0;top:0px;right:0px;z-index:10000;cursor:pointer;margin-left:20px}
.navbutton .navicon, .closebutton .navicon {position: relative;width:100%;height:100%}
.navbutton .navicon span {display:block;width:100%;height:2px;background:#2D2D2C;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:10px;transform-origin:50% 50%}
.navbutton .navicon span:nth-child(3) {top:20px;transform-origin:50% 50%}

.navholder {position:fixed;top:0;right:0;height:100vh;width:0vw;overflow: hidden;transition:width 0.5s;z-index:1100;box-sizing: border-box;}
.menuopen .navholder {width:50vw}
.navholder .nav {position:relative;width:50vw;background: rgba(59, 64, 79, 1);height:100vh;box-sizing: border-box;padding:10vw 6vw}

.closebutton {position:absolute;top:21px;right:40px}
.closebutton .navicon span {display:block;width:100%;height:2px;position:absolute;background: rgba(248, 247, 246, 1);
}
.closebutton .navicon span:nth-child(1) {top:10px;opacity:0}
.closebutton .navicon span:nth-child(2) {top:10px;transform: rotate(-45deg);}
.closebutton .navicon span:nth-child(3) {top:10px;transform: rotate(45deg);}

.navsection {font-size:24px}
.navsection a {color: rgba(248, 247, 246, 1);text-decoration: none;}
.navsection a:hover {text-decoration: underline;}
.navsub {display: flex;flex-direction: column;font-size:26px;line-height:1.3em;margin:20px 0 40px 0}
.navsub a {margin-bottom:5px}
.nav a.active {color: rgba(83, 166, 198, 1);}
a[data-scroll="top"] {display:none}

.endlink {height:80vh;display:flex;position:relative;z-index:5;background: rgba(248, 247, 246, 1);}
.endlink .pic {flex:0 0 50%;height:100%}
.endlink .text {display:flex;align-items:center;justify-content: center;flex:0 0 50%;font-size:56px;text-decoration: none;color: rgba(59, 64, 79, 1);}
.endlink .text:hover {text-decoration: underline;}
.endlink .text div {display: flex;align-items: center;}
.endlink .text div img {margin-left:20px}

/*.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:10px;opacity:0}
.menuopen .navbutton .navicon span:nth-child(2) {top:10px;transform: rotate(-45deg);}
.menuopen .navbutton .navicon span:nth-child(3) {top:10px;transform: rotate(45deg);}*/

/**** footer ****/
.footer {background: rgba(59, 64, 79, 1);padding:5vw 20px 20px 20px;color: rgba(248, 247, 246, 1);font-size:14px;line-height:24px;position:relative;z-index:5}
.footer a {color: rgba(248, 247, 246, 1)}
.footer a:hover {text-decoration: none;}
.footer .cera {font-size:16px;line-height:24px}
.footercols {display:flex}
.footercol {box-sizing: border-box;padding:0 20px;flex:0 0 50%}
.footerlogo {border-bottom:1px solid rgba(95, 100, 115, 1);padding-bottom:20px;margin-bottom:20px}
.footerlogo img {height:80px}
.agents {display:flex;flex-wrap:wrap}
.agents p {box-sizing: border-box;flex:0 0 50%;}
.agents p:first-child {padding-right:20px}

.footerfooter {margin:5vw 20px 20px 20px;font-size:11px;line-height:15px;color: rgba(164, 169, 187, 1);}
.footerfooter a {color: rgba(164, 169, 187, 1);}
.footerfooter img {margin-bottom:40px}

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

/**** home ****/

/**** intro ****/
.intro {width:100%;height:100vh;background: rgba(59, 64, 79, 1);position:relative;display: flex;align-items: center;justify-content: center}
.intro svg {width:370px}
.cls-1 {fill: #eaeaea;stroke-width: 0px;}

.homelinks {width:100%;height:100vh;box-sizing: border-box;padding-top:64px;display: flex;position: absolute;top:0;left:0;}
.homelinks a {flex:0 0 50%;height:100%;background:50% 50% no-repeat;background-size:cover;color: rgba(248, 247, 246, 1);text-decoration: none;display: flex;align-items: center;justify-content: center;position:relative;clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);}
.homelinks a:before {content:'';display:block;position: absolute;top:0;left:0;width:100%;height:100%;background: rgba(220, 220, 220, 1);mix-blend-mode: multiply;transition: opacity 0.2s;opacity:1;}
.homelinks a:after {content:'';display:block;position: absolute;top:0;left:0;width:100%;height:100%;background: rgba(59, 64, 79, 0.85);
transition: opacity 0.2s;z-index:1;opacity:0}
.homelinks a:hover:before {opacity:0;}
.homelinks a:hover:after {opacity:1}
.homelinklabel {position:relative;z-index:2;font-size:80px;}
.homelinktext {position:absolute;top:50%;width:calc(100% - 14vw);text-align: center;font-size:16px;line-height:24px;z-index:2;padding:60px 7vw;opacity:0;transition:opacity 0.2s;max-width:500px}
.homelinks a:hover .homelinktext {opacity: 1;}
.homeview {padding:20px 0 5px 0;display:inline-block;border-bottom:1px solid rgba(248, 247, 246, 1);}

/**** design ****/
.designintro {padding:10vh 40px 0 40px;position:fixed;width:100%;height:100vh;box-sizing: border-box;z-index:1}
.videocontainer {width:100%;height:100%;position:relative}
.videocontainer video {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position: 50% 50%;}
.downarrow {position:absolute;bottom:40px;width:100%;height:20px;background:url(/img/ui/downarrow.svg) 50% 50% no-repeat;background-size:contain}
	
#features {margin-top:100vh;padding-top:5vw;
}

.design .scrollsection {position:relative;z-index:5;background: rgba(248, 247, 246, 1);}

.spec {display:flex}
.speccol {box-sizing: border-box;flex:0 0 50%;}
.spec ul {list-style-type: none;margin:0;padding:0;}
.spec ul li {margin:0;padding:16px 20px;border-bottom:1px solid rgba(59, 64, 79, 0.2)}
.spec ul li:last-child {border:none}

.bigcarousel {width:100%;position:relative;}
.bigcarousel .slide {height:80vh;width:65vw;margin:0 10px;background:50% 50% no-repeat;background-size: cover;}
.slick-track {cursor: grab}
.bigcarousel .slick-dots {list-style-type: none;margin:0;padding:0;display:flex;width:100%;margin-top:30px;justify-content: center;}
.bigcarousel .slick-dots li {overflow: hidden;text-indent: -9999px;flex:0 0 32px;height:2px;margin:0 4px;background: rgba(199, 202, 211, 1);
transition:background 0.2s, flex 0.2s}
.bigcarousel .slick-dots li.slick-active {background: rgba(59, 64, 79, 1);flex:0 0 64px}

.stats {display:flex;padding-top:20px;flex-wrap: wrap;}
.stat {flex:0 0 25%}
.statnum {font-size:56px;line-height:1em}
.statnum span {font-size:30px}

.areas {display:flex}
.areas .inner {flex:0 0 50%}
.availabletable table {width:80%;line-height:28px}
.availabletable td {padding:14px 16px 10px 16px;border-bottom:1px solid rgba(59, 64, 79, 0.2);}
.availabletable tr td:first-child {font-size:24px}
.availabletable tfoot td {background: rgba(199, 202, 211, 0.2);}
.availabletable span {font-size:0.7em}

.floorpager {margin-bottom:20px}
.floorpager li {margin:0 10px 0 0;}

.floorslider .slide {padding:20px 0;height:calc(90vh - 64px - 46px - 70px);position:relative;box-sizing: border-box;width:100%}
.floorarea {font-size:20px;line-height:1em;margin-bottom:16px}

.planholder {position:absolute;top:0;right:0;display:flex;align-items: center;justify-content: center;width:75%;height:100%;}
.planholder .plan {flex:0 0 80%;height:80%;background:50% 50% no-repeat;background-size:contain}

.plankey {position:absolute;bottom:0;left:0}
.plankey .smallText {white-space: nowrap;}
.plankey ul {list-style-type: none;margin:0 0 20px 0;padding:0;}
.plankey li {margin:0 0 8px 0;padding:0;display: flex;align-items: center;}
.plankey li:before {content:'';flex:0 0 24px;height:24px;margin-right:12px}
.plankey li.office:before {background: rgba(184, 123, 94, 1);}
.plankey li.terrace:before {background: rgba(150, 190, 148, 1);}
.plankey li.reception:before {background: #e5dfd8;}
.north {position:absolute;bottom:0;right:0}
.north img {width:50px}

/**** soho ****/
.sohointro {padding:10vh 40px 40px 40px;position:relative;display: flex;align-items: center;box-sizing: border-box;height:100vh;}
.sohointro .text {padding-right:35vw;position: relative;z-index:5;}
.sohointro .pic {position:absolute;top:10vh;right:40px;width:55vw;height:calc(90vh - 40px)}
.sohointro .pic:before {content:'';display:block;position:relative;top:0;left:0;width:100%;height:100%;background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);opacity:0.4}
.sohointrotext {padding-left:10vw}

.sohopics {width:100%;height:90vh;position:relative;display: flex;align-items:center;justify-content: space-between;}
.sohopics .pic:first-child {height:100%;flex:0 0 45%}
.sohopics .pic:last-child {height:65%;flex:0 0;flex-basis:calc(50% - 10vw)}

.map {margin:0 20px 40px 20px;border:1px solid rgba(200, 143, 114, 1)}
.map img {display:block}
.tube {display:flex;align-items: center;}
.tube:before {content:'';display:block;flex:0 0 28px;height:23px;background: url(/img/content/soho/tube.svg) 50% 50% no-repeat;background-size:contain;margin-right:8px}

.availabletable.traveltimes td {border-color: rgba(59, 64, 79, 1);}
.availabletable.traveltimes table tr:last-child td {border: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;line-height:1.2em }
.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) {}
	
	/* bigger desktop */
	@media only screen and (max-width: 1229px) {
		.stat {flex:0 0 50%;margin-bottom:40px}
	}

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width:1099px) {
		.availabletable table {width:100%}
		
		h1 {font-weight:normal;font-size:40px;line-height:40px;margin-bottom:20px}
		h2 {font-weight:normal;font-size:40px;line-height:40px;margin-bottom:20px}
		h4 {font-weight:normal;font-size:36px;line-height:36px;margin-bottom:20px}
		h5 {font-weight:normal;font-size:16px;line-height:16px;margin-bottom:5px}
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		
		.sectionbreak {height:60px}
		
		.endlink {height:80vw}
		/**** nav ****/
		.navbar {height: 54px;padding:0 20px}
		.navbar img {height:22px;width:auto}
		.closebutton {right:20px;top:15px}
		
		/**** home ****/
		.homelinks {padding-top:54px;}
		
		/**** design ****/
		.designintro {padding:120px 20px 20px  20px}
		.spec ul li {padding:16px 10px}
		.bigcarousel .slide {height:60vw}
		
		.areas {flex-direction: column;}
		.availabletable td {padding:10px}
		.availabletable tr td:first-child {padding-left:5px}
		.availabletable tr td:last-child {padding-right:5px}
		.floorslider .slide {height:auto;padding-bottom:0}
		.planholder {height:50vh;width:100%}
		.planholder .plan {flex:0 0 100%;height:100%}
		.floorpager .buttonlink {margin:0 8px 8px 0}
		.plantitle, .planholder, .plankey {position:relative;bottom:auto;left:auto}
		
		
		/**** soho ****/
		.sohointro {height:100vw;box-sizing: border-box;}
		.sohointro .pic {height:calc(100% - 10vh);box-sizing: border-box;}
		.sohopics {height:80vw}
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		.pagesection, .inner {padding:0 10px}
		.endlink {flex-direction:column;height:160vw}
		.endlink .text {font-size:40px;line-height:40px}
		.floorpager .buttonlink {font-size:14px;line-height:1em;padding:8px 12px;margin:0 4px 4px 0}
		
		/**** nav ****/
		.navbar .textlinks {display: none;}
		
		.menuopen .navholder {width:100%}
		.navholder .nav {width:100vw;background-image:url(/img/content/footer/depotfooter.svg);background-repeat:no-repeat;background-size:100px auto;background-position:20px 20px;padding:160px 20px}
		
		
		/**** footer ****/
		.footer {padding:40px 10px 10px 10px}
		.footercols {flex-direction:column}
		.footercol {padding:0 10px}
		.footercol.leftfooter {display:flex;flex-direction:column-reverse;}
		.footer .buttonlink {margin:0 0 40px 0;text-align: center;}
		.footercol.leftfooter .footerlogo {width:100%}
		.footerfooter {margin:40px 10px 40px 10px}
		
		/**** home ****/
		.intro svg {width:75%}
		.homelinks {flex-direction: column;}
		.homelinklabel {font-size:56px;line-height:1em}
		.homelinktext {padding:40px 7vw;font-size:14px;line-height:1.3em}
		
		/**** design ****/
		.designintro {height:calc(120px + 40px + 55vw);position:relative}
		.downarrow {display:none}
		#features {margin-top:0px}
		
		.planholder {height:40vh;width:100%}
		.floorarea {font-size:16px;line-height:1em}
		
		.spec {flex-direction: column;}
		.spec ul li {padding:16px 0}
		.spec ul li:last-child {border-bottom: 1px solid rgba(59, 64, 79, 0.2);}
		.bigcarousel .slick-dots {margin-top:24px}
		.bigcarousel .slide {margin:0 2px;width:90vw}
		
		.stat {flex:0 0 100%}
		.statnum {font-size:40px;line-height:40px}
		
		/**** soho ****/
		.sohointro {padding:120px 20px 20px 20px;flex-direction: column;height:auto}
		.sohointro .pic {position:relative;top:auto;right:auto;width:100%;flex:0 0 90vw}
		.sohointro .pic:before {display:none}
		.sohointro .text {padding-right:0}
		.sohopics {height:auto;flex-direction:column}
		.sohopics .pic:first-child {width:100%;flex:0 0 60vh;margin-bottom:40px}
		.sohopics .pic:last-child {width:100%;flex:0 0 100vw}	
		.map {margin:0 10px 40px 10px}
		
		/*.tube {
			font-size: 20px;
			line-height: 1.2em;
		}
		
		.traveltimes table tr td:last-child {vertical-align: middle;}*/
		
		
		.traveltimes table tr {display:flex;flex-direction: column;}
		.traveltimes table tr td:first-child {border:0}
		.traveltimes td.num {text-align: left;padding-top:0;padding-left:41px}
		.tube {align-items: flex-start;}
	}

	/* 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: 'acherusgrotesque-regular';
    src: url('/fonts/acherusgrotesque-regular-webfont.woff2') format('woff2'),
         url('/fonts/acherusgrotesque-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face	{
	font-family:'CeraStencilPRO';
	src:url(/fonts/CeraStencilPRO-Regular.eot);
	src:url(/assets/fonts/CeraStencilPRO-Regular.eot?#iefix) format("embedded-opentype"),
		url(/fonts/CeraStencilPRO-Regular.woff2) format("woff2"),
		url(/fonts/CeraStencilPRO-Regular.woff) format("woff"),
		url(/fonts/CeraStencilPRO-Regular.ttf) format("truetype");
	/*font-weight:400;
	font-style:normal;
	font-display:block*/
}

@font-face	{
	font-family:'CeraStencilPROBold';
	src:url(/fonts/CeraStencilPRO-Bold.eot);
	src:url(/fonts/CeraStencilPRO-Bold.eot?#iefix) format("embedded-opentype"),
		url(/fonts/CeraStencilPRO-Bold.woff2) format("woff2"),
		url(/fonts/CeraStencilPRO-Bold.woff) format("woff"),
		url(/fonts/CeraStencilPRO-Bold.ttf) format("truetype");
	/*font-weight:700;
	font-style:normal;
	font-display:block*/
}

@font-face	{
	font-family:'CeraStencilMed';
	src:url(/fonts/Cera-Stencil-Medium.woff2) format("woff2"),
		url(/fonts/Cera-Stencil-Medium.woff) format("woff");
	/*font-weight:700;
	font-style:normal;
	font-display:block*/
}