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

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

.animatein {visibility:hidden}
.pic {background:50% 50% no-repeat;background-size:cover;}

b {font-weight:normal;font-family:"gilroy-semibold"}

h1 {font-weight:normal;font-size:4vw;line-height:1em}
h2 {font-weight:normal;font-size:3.5vw;line-height:1.2em}
h3 {font-weight:normal;font-size:2vw;line-height:1.2em}
h5 {font-weight:normal;font-family:"gilroy-semibold";font-size:24px;line-height:1.3em}

.blackbg {background:#000}
.blackbg a:not(.buttonlink) {color:#0276fc}
.whitebg {background:#fff}
.orangegradbg {background: #ff7f01; /* Old browsers */
background: -moz-linear-gradient(135deg, #ff7f01 0%, #f20049 100%, 45deg); /* FF3.6-15 */
background: -webkit-linear-gradient(135deg, #ff7f01 0%,#f20049 100%, 45deg); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #ff7f01 0%,#f20049 100%)}
.bluegradbg {background: #0077fd; /* Old browsers */
background: -moz-linear-gradient(135deg, #0077fd 0%, #6040c0 100%, 45deg); /* FF3.6-15 */
background: -webkit-linear-gradient(135deg, #0077fd 0%,#6040c0 100%, 45deg); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #0077fd 0%,#6040c0 100%)}
.pinkgradbg {background: #f20049; /* Old browsers */
background: -moz-linear-gradient(135deg, #f20049 0%, #6040c0 100%, 45deg); /* FF3.6-15 */
background: -webkit-linear-gradient(135deg, #f20049 0%,#6040c0 100%, 45deg); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #f20049 0%,#6040c0 100%)}
.greengradbg {background: #01fb95; /* Old browsers */
background: -moz-linear-gradient(135deg, #01fb95 0%, #0276fc 100%, 45deg); /* FF3.6-15 */
background: -webkit-linear-gradient(135deg, #01fb95 0%,#0276fc 100%, 45deg); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #01fb95 0%,#0276fc 100%)}


.blacktext {color:#000}
.whitetext {color:#fff}

.sectiongap {width:100%;height:10vw}
.sectiongapmed {width:100%;height:5vw}

.iconlist img {margin:20px 0 0 0;display:block}

.buttonlink {font-family:"gilroy-semibold";color:#fff;display:inline-block;border-radius:4px;padding:10px 30px;background: #F20049;text-decoration:none;transition:background 0.2s;margin-top:10px;line-height:20px}
.orangegradbg .buttonlink.colourbutton {background:#FF7F01}
.bluegradbg .buttonlink.colourbutton {background:#0077fd}
.greengradbg .buttonlink.colourbutton {background:#0276fc}

.buttonlink:hover, .buttonlink.colourbutton:hover {background:#600CA7}

.pageheader {box-sizing: border-box;padding:2.5vw 0;min-height:50vh;display:flex;flex-direction: column;justify-content: flex-end;position:relative}
.pageheader h1 {margin:0}

.boxlist {display:flex;flex-wrap:wrap;}
.boxlist .listitem {display:flex;align-items:center;justify-content:center;box-sizing: border-box;margin:0 20px 20px 0;flex:0 0;flex-basis:calc(25% - 20px);font-size:20px;line-height:1.3em;text-align:center;flex-direction:column}

.flip-card {
  background-color: transparent;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 16vw;
  
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content: center;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  box-sizing: border-box;
  flex-direction: column;
  padding:2.5vw;
}
.blackbg .flip-card-back a {color:#fff;display:inline-block;margin-top:10px;}
.flip-card-front {
  background:rgba(255,255,255,0.3) bottom 10px right 10px no-repeat url(/img/ui/zoom.svg);
  background-size:30px auto;
  color: #fff;
  font-size:1.4em;line-height:1.2em;
}
.flip-card-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
  font-size:0.9em;
  line-height:1.2em
}
.orangegradbg .flip-card-back {background:#FF7F01}
.bluegradbg .flip-card-back {background:#0077fd}

.borderboxlist {display:flex;flex-wrap:wrap;font-family:"gilroy-semibold";box-sizing: border-box;}
.borderboxlist .listitem {display:flex;justify-content:center;justify-content:center;box-sizing: border-box;padding:2.5vw;margin:0 0 20px 0;flex:0 0;flex-basis:calc(50% - 10px);font-size:20px;line-height:1.3em;text-align:center;border:2px solid #FF7B03;flex-direction:column;min-height:12vw}
.borderboxlist .listitem:nth-child(even) {margin-left:20px}


.testiholder {text-align:center;padding:5vw 10vw;box-sizing: border-box;position:relative;}
.testiholder h2 {margin-bottom:5vw}
.testimonials {width:50%;margin:0 auto}

.testi-pager {display:flex;justify-content: center;position:absolute;bottom:20px;left:0;width:100%;}
.testi-pager span {width:10px;height:10px;display:inline-block;border-radius:5px;box-sizing: border-box;border:1px solid #fff;overflow:hidden;margin:0 0 0 5px;transition:background 0.2s;cursor:pointer}
.testi-pager span.cycle-pager-active {background:#fff}

.cycle-arrow {position:absolute;top:0;height:100%;width:45px;background:50% 50% no-repeat;background-size: contain;cursor:pointer;z-index:500}
.cycle-prev {background-image:url(/img/ui/leftarrow.svg);left:10vw}
.cycle-next {background-image:url(/img/ui/rightarrow.svg);right:10vw}

/**** nav ****/
.navholder {position:fixed;z-index:2000;width:100%}

.navbutton {display:block;position: fixed;width:40px;height:40px;padding:15px 20px;top:0px;right:0px;z-index:10000;cursor:pointer;}
.navbutton .navicon {position: relative;width:100%;height:100%}
.navbutton .navicon span {display:block;width:100%;height:2px;background:#fff;position:absolute;transition:top 0.5s 0.5s, transform 0.5s, opacity 0.5s 0.5s;box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.2);}
.navbutton .navicon span:nth-child(1) {top:10px}
.navbutton .navicon span:nth-child(2) {top:20px;transform-origin:50% 50%}
.navbutton .navicon span:nth-child(3) {top:30px;transform-origin:50% 50%}

.navhide {overflow: hidden;position:absolute;top:0;left:0;z-index:1500;width:100%;transition:height 0.5s;height:0}

.navhide img {position:absolute;top:0;left:0;z-index:2000}
.nav {position:relative;z-index:1500;background:rgba(0,0,0,0.9);width:100%;height:100vh;display:flex;align-items:center;justify-content: center;flex-direction:column;list-style-type: none;}
.nav li {margin:5px;}

.nav li:nth-child(1) a {transition-delay: 0;}
.nav li:nth-child(2) a {transition-delay: 0.1s;}
.nav li:nth-child(3) a {transition-delay: 0.2s;}
.nav li:nth-child(4) a {transition-delay: 0.3s;}
.nav li:nth-child(5) a {transition-delay: 0.4s;}
.nav li:nth-child(6) a {transition-delay: 0.5s;}
.nav li:nth-child(7) a {transition-delay: 0.6s;}
.nav li:nth-child(8) a {transition-delay: 0.7s;}
.nav li:nth-child(9) a {transition-delay: 0.8s;}
.nav li:nth-child(9) a {transition-delay: 0.9s;}
.nav li:nth-child(10) a {transition-delay: 1s;}
.nav a {color:#fff;font-size:5vh;line-height:1.3em;font-family:"gilroy-light", Arial, sans-serif;text-decoration:none;position:relative;top:-20px;transition:opacity 0.5s, top 0.5s;opacity:0}
.nav a:hover {text-decoration: underline;}
.nav .navgrad {height:100vh;width:100%;position:absolute;top:0;left:0;mix-blend-mode: multiply;pointer-events: none;z-index:100;
background: #f60046; /* Old browsers */
background: -moz-linear-gradient(top,  #f60046 0%, #600ca7 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #f60046 0%,#600ca7 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #f60046 0%,#600ca7 100%);opacity:0;transition:opacity 1s}
.s0 .nav .n0,
.s1 .nav .n1,
.s2 .nav .n2,
.s3 .nav .n3,
.s4 .nav .n4,
.s5 .nav .n5,
.s6 .nav .n6,
.s7 .nav .n7,
.s8 .nav .n8,
.s9 .nav .n9 {position: relative;z-index:2000;}

.homelogo {transition:opacity 0.5s}
.s0 .homelogo {opacity: 0;}
.s0.scrolled .homelogo {opacity: 1;}

.menuopen .navbutton .navicon span {transition:top 0.5s, transform 0.5s 0.5s, opacity 0s 0.5s, box-shadow 0.5s;box-shadow: none;}
.menuopen .navbutton .navicon span:nth-child(1) {border-color:transparent;top:20px;opacity:0}
.menuopen .navbutton .navicon span:nth-child(2) {border-color:transparent;top:20px;transform: rotate(-45deg);}
.menuopen .navbutton .navicon span:nth-child(3) {border-color:transparent;top:20px;transform: rotate(45deg);}
.menuopen .navhide {height:100vh}
.menuopen .nav li a {top:0;opacity:1}
.menuopen .nav .navgrad {opacity:1}

/**** footer ****/
.social img {margin:0 10px 10px 0}
form input {margin:0;padding:0;border:0;font-size:16px;display: inline-block;box-sizing: border-box;}
.newsletterform {display:flex}
form input[type='email'] {border:1px solid #fff;border-radius:4px 0 0 4px;background:transparent;border-right:none;padding:10px;color:#fff;font-family:"gilroy-light";flex:1 1;min-width:120px}
form input[type='submit'] {font-family:"gilroy-semibold";color:#6040C0;display:inline-block;border-radius:0 4px 4px 0;padding:10px 20px;background: #fff;text-decoration:none;transition:background 0.2s;cursor:pointer}
form input[type='submit']:hover {text-decoration: underline;}


.footer {position:relative;padding:2.5vw 0}
.footer .footerlogo {position:absolute;top:0;left:0;z-index:50}
.footer a, .contactfooter a {color:#fff}
.contactfooter .rics {display:flex;align-items:center}
.contactfooter .rics img {margin-left:10px;position:relative}

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

/**** home ****/
.homeintro {position:relative;width:100%;height:100vh;background:#000;display:flex;align-items:center;justify-content:center}
.homeintro video {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position: 50% 50%;}
.homeintro svg {position:relative;width:50vw;height:auto;min-width:220px;max-height:50vh}

.homelistings {display:flex;}
.homelistings .text {padding-right:5vw}
.homefeatured {display:flex;justify-content:space-between;flex:1 21}
.homeproperty {box-sizing: border-box;flex:0 0 30%}
.homeproperty .pic {height:15vw;margin-bottom:20px;width:100%}

.clientlogos {width:100%;height:10vw;position:relative;margin:40px 0 20px 0}
.clientlogos .slide {background: bottom left no-repeat;background-size:contain;width:100%;height:100%}
.ourclients {display:flex;justify-content: space-between;}
.client-pager {display:inline-block;text-align:right}
.client-pager span {width:10px;height:10px;display:inline-block;border-radius:5px;box-sizing: border-box;border:1px solid #fff;overflow:hidden;margin:0 0 0 5px;transition:background 0.2s;cursor:pointer}
.client-pager span.cycle-pager-active {background:#fff}


/**** occupiers ****/

.extramile {display:flex;padding:0 5vw;justify-content: space-around;}
.extramile .listitem {padding:0 20px;box-sizing: border-box;flex:0 0 33.33%;text-align:center;max-width:400px}
.extramile .icon {width:100%;height:8vw;background:bottom center no-repeat;background-size:contain;margin-bottom:20px}

/**** work & insights ****/
.workgrid {display:flex;flex-wrap:wrap}
.workgrid .griditem {background:#F2F2F2;box-sizing:border-box ;margin:0 20px 20px 0;min-height:20vw;display:flex;flex-direction:column;justify-content: flex-start;flex:0 0;flex-basis:calc((100% / 3) - 20px);}
.workgrid .gridpic {background:50% 50% no-repeat;background-size:cover;width:100%;height:16vw}
.workgrid .gridhead {padding:20px;}
.workgrid .gridfoot {padding:20px}
.workgrid .buttonlink {border:2px solid #333333;color:#333333;background:transparent}
.workgrid .buttonlink:hover {text-decoration: underline;}
.badge {color:#fff;font-size: 12px;display:inline-block;border-radius:4px;padding:2px 10px}
.badge.workbadge {background:#025ECA}
.badge.insightbadge {background:#01C977}
.badge.portfoliobadge {background:#6040C0}

.studygallery {width:100%;height:30vw;position:relative}
.studygallery .slide {width:100%;height:100%;background:50% 50% no-repeat;background-size:cover}

.study-pager {display:flex;justify-content: flex-end;width:100%;margin-top:20px}
.study-pager span {width:10px;height:10px;display:inline-block;border-radius:5px;box-sizing: border-box;border:1px solid #fff;overflow:hidden;margin:0 0 0 5px;transition:background 0.2s;cursor:pointer}
.study-pager span.cycle-pager-active {background:#fff}

.studygallery .cycle-prev {left:20px}
.studygallery .cycle-next {right:20px}

/**** listings ****/
.search form {display: flex;margin-bottom:20px}
.search input {border:1px solid #000}
.search input[type='text'] {border-radius:4px 0 0 4px;padding-left:10px}
.search input[type='submit'] {background:#000 50% 50% url(/img/ui/search.svg) no-repeat;background-size:20px auto;cursor:pointer}

.searchterm {padding:20px 0}

.listings .griditem {padding: 0;}
.griditem .pic {background:50% 50% no-repeat;background-size:cover;position:relative;width:100%;flex:0 0 20vw;display:block}
.griditem .pic .banner {padding:10px;position:absolute;bottom:0;left:0;box-sizing: border-box;width:100%;font-size:24px;line-height:1.2em}
.griditem.promo .pic .banner {opacity:1}
.listings .gridhead {padding:20px 20px 0 20px}
.listings .gridfoot {padding:0 20px 20px 20px}
.listings .gridinner {display:flex;flex-direction: column;justify-content:space-between;flex:1 1 100%}
.postcode {font-size:0.75em}

.propertytable td {padding:8px 2px;border-bottom:1px solid #fff}

.availabletable td {padding:8px 2px;border-bottom:1px solid #000}

.map {position:absolute;top:0;right:0;width:50%;height:100%}


/**** backstage ****/
.partners .griditem {border-radius:8px;color:#000;padding:2.5vw}
.partners .griditem img {max-width:200px;max-height:60px}
.partners .griditem p:last-child {margin:0}
.workgrid.partners .gridfoot {margin-top:3vw}

.boxlist.backstage .listitem {flex-basis: calc(33% - 20px);}
.backstage .flip-card-inner {height:20vw;max-height:300px;min-height:160px}
.backstage .flip-card-front {background:#F2F2F2;flex-direction:column;color:#000;text-align:center;align-items:center}
.backstage .flip-card-front b {display:none}
.backstage .logo {margin-bottom:20px;width:100%;height:5vw;background:50% 50% no-repeat;background-size:contain;max-height:80px;max-width:300px}


/**** timeline ****/
.timeline {padding:0 10vw;display:flex;flex-direction:column}
.timeline a {color:#fff}
.timeline .timelineitem {display:flex;align-items:center;margin-bottom:5vw}
.timeline .text {box-sizing: border-box;padding-left:5vw;flex:0 0 50%}
.timeline .text p:last-child {margin:0}
.timeline .pic {flex:0 0 50%;background:50% 50% no-repeat #fff;background-size:cover;height:25vw}
.timeline.team .pic {height:50vw}
.timeline .pic.contain {background-size:contain}
.timeline .timelineitem:nth-child(odd) {flex-direction:row-reverse}
.timeline .timelineitem:nth-child(odd) .text {padding:0 5vw 0 0 }

/**** contact ****/
.contact a {color:#000}

.contact .newsletterform {display:flex;max-width:350px;flex-wrap:wrap}
.contact form input[type='email'] {border:1px solid #000;color:#000;border-radius:4px;margin-bottom:10px}
.contact form input[type='submit'] {color:#fff;background: #000;border-radius:4px;margin-bottom:10px}

.s7 .contacthide {display:none}

/**** privacy ****/
.privacytable td {border:1px solid #000;padding:10px}
.privacytable tr:nth-child(odd) td {background:rgba(0,0,0,0.05)}


/****************************************************
* 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) {
		.borderboxlist .listitem, .boxlist .listitem {font-size:16px;line-height:20px}
	}
	
	/* 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) {
	
		.homelistings .text {flex:0 0 100%}
		
		.buttonlink {font-size:14px;line-height:18px}
		.footer {font-size:12px;line-height:16px}
		.griditem .pic .banner {font-size:16px;line-height:20px}
		
		.homelistings {flex-wrap:wrap}
		.homelistings .text {margin-bottom:40px}
		
		.boxlist .listitem {flex-basis: calc(33% - 20px);}
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
	
		/**** nav ****/
		.nav a {font-size:30px;line-height:30px}
		
		/**** footer ****/
		.social img {max-width:25px;margin-right:5px}
		.newsletterform {flex-wrap:wrap}
		.contact .newsletterform {flex-direction:column}
		form input[type="email"] {border-radius:5px;border-right:1px solid #fff;margin-bottom:5px}
		form input[type="submit"] {border-radius:5px}
		.search form input[type='submit'] {border-radius:0 4px 4px 0}
		
		
		h1 {font-size:36px;line-height:40px}
		h2 {font-size:30px;line-height:36px}
		h3 {font-size:24px;line-height:30px}
		h5 {font-size:20px;line-height: 24px;}
		
		.borderboxlist .listitem {padding:10px}
		.boxlist.backstage .listitem {flex-basis: calc(100% - 20px);}
		.griditem {font-size:14px;line-height:18px}
		
		.workgrid .gridpic {height:180px}

		.homeproperty .pic {height:160px}
		
		
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		
		/**** nav ****/
		.homelogo img, .navhide img {width:120px}
		
		/**** footer ****/
		.footer {padding-top:0}
		.footer .footerlogo {position:relative;margin-bottom:40px;display:block}
		
		
		.sectiongap {height:40px}
		.sectiongapmed {height:20px}
		
		/**** home ****/
		.iconlist img {max-width:50vw}
		
		.homefeatured {flex-direction:column}
		.homeproperty {margin-bottom:40px}
		
		/**** investors ****/
		.boxlist .listitem {flex:0 0 100%;margin-right:0}
		.testimonials {width:80%}
		.testimonials p {font-size:14px;line-height:20px}
		.cycle-arrow {width:30px}
		.cycle-prev {left:20px}
		.cycle-next {right:20px}
		
		/**** occupiers ****/
		.extramile {flex-direction:column}
		.extramile .icon {height:80px}
		.extramile .listitem {margin-bottom:40px}
		
		/**** work ****/
		.workgrid .griditem {margin-right:0;flex:0 0 100%}
		
		
		
		/**** listings ****/
		.griditem .pic {flex:0 0 200px}
		.studygallery {height:250px}
		
		.propertyheader {padding-bottom:82.5vw;padding-top:140px}
		.map {height:80vw;top:auto;bottom:0;width:100%}
		
		/**** timeline ****/
		.timeline .timelineitem, .timeline .timelineitem:nth-child(odd) {flex-direction:column;margin-bottom:40px}
		.timeline .timelineitem .pic {width:100%;flex:0 0 200px;margin-bottom:20px}
		.timeline .text {padding:0}
		.timeline.team .timelineitem .pic {flex:0 0 50vw}
	}

	/* 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: gilroy-light;
  src: url("../font/Gilroy-Light.woff");
}

@font-face {
  font-family: gilroy-regular;
  src: url("../font/Gilroy-Regular.woff");
}

@font-face {
  font-family: gilroy-medium;
  src: url("../font/Gilroy-Medium.woff");
}

@font-face {
  font-family: gilroy-semibold;
  src: url("../font/Gilroy-SemiBold.woff");
}