@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/22px "BrownLLWeb-Regular",
    Arial,
    sans-serif;
  color: #51191a;
  font-weight: 300;
  background: #2d2d2c;
  height: 100%;
}
b {font-family: "BrownLLWeb-Bold";font-weight:normal}

.hidden {
  display: none !important;
}

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

.swsolid {
  font-family: "Southworks Solid";
  font-weight: normal;
  text-transform: uppercase;
}
.swline {
  font-family: "Southworks Line";
  font-weight: normal;
  text-transform: uppercase;
}

/**** navigation ****/
.navholder {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 9000;
  transition: height 0.5s;
}
.navlogo {
  display: block;
  position: absolute;
  width: 120px;
  top: 25px;
  left: 20px;
  z-index: 9000;
}
.navbutton {
  display: block;
  position: fixed;
  width: 20px;
  height: 20px;
  padding: 10px;
  top: 16px;
  right: 20px;
  z-index: 10000;
  cursor: pointer;
  background: #fff;
  border-radius: 50%;
}
.navbutton .navicon {
  position: relative;
  width: 100%;
  height: 100%;
}
.navbutton .navicon span {
  display: block;
  width: 20px;
  height: 1px;
  background: #51191a;
  position: absolute;
  transition:
    top 0.2s 0.2s,
    transform 0.2s,
    opacity 0.2s;
}
.navbutton .navicon span:nth-child(1) {
  top: 5px;
}
.navbutton .navicon span:nth-child(2) {
  top: 10px;
  transform-origin: 50% 50%;
}
.navbutton .navicon span:nth-child(3) {
  top: 15px;
  transform-origin: 50% 50%;
}

.menuopen .navbutton .navicon span {
  transition:
    top 0.2s,
    transform 0.2s 0.2s,
    opacity 0s 0.2s;
}
.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);
}

.navholder .socbuttons {
  position: absolute;
  top: 76px;
  right: 20px;
}
.navholder .socbutton {
  display: block;
  width: 20px;
  height: 20px;
  padding: 10px;
  margin-bottom: 20px;
  cursor: pointer;
  background: #fff 50% 50% no-repeat;
  background-size: 20px auto;
  border-radius: 50%;
  position: relative;
  z-index: 10000;
}
.navholder .socbutton.instagram {
  background-image: url(/img/content/nav/instagram.svg);
}
.navholder .socbutton.twitter {
  background-image: url(/img/content/nav/twitter.svg);
}

.navinner {
  width: 100%;
  height: 0;
  position: relative;
  padding: 0;
  display: flex;
  justify-content: space-between;
}

.navhide {
  display: flex;
  overflow: hidden;
  transition: height 0.5s;
  height: 0;
  width: 100%;
  position: relative;
}
.navhide .navlogo {
  display: block;
  position: absolute;
  width: 120px;
  top: 25px;
  left: 20px;
  z-index: 9000;
}
.navholder .nav {
  width: 100%;
  margin: 0;
  display: flex;
  z-index: 50;
  height: 100vh;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  padding: 0px;
  background: rgba(253, 239, 114, 0.95);
}

.nav ul {
  margin: 0 0 0 20px;
  padding: 0;
  list-style-type: none;
  font-family: "BrownLLWeb-Bold";
}
.nav ul li {
  margin: 0;
  padding: 10px 0;
}
.nav a {
  font-size: 4vw;
  line-height: 1em;
  transition: opacity 0.5s;
  text-decoration: none;
}

.footernav a .label:before {
  transition: none;
}
.nav a:hover .label:before,
.footernav a:hover .label:before {
  width: 100%;
}
.footernav a:hover {
  color: #2d2d2c;
}

.s0 a.n0,
.s1 a.n1,
.s2 a.n2,
.s3 a.n3,
.s4 a.n4,
.s5 a.n5,
.s6 a.n6,
.s7 a.n7,
.s8 a.n8 {
  text-decoration: underline;
}

.navdownloads {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 9000;
}
.navdownloads .opendownloads {
  font-family: "BrownLLWeb-Bold";
  font-size: 25px;
  display: inline-block;
  background: url(/img/ui/downarrow.svg) left center no-repeat;
  background-size: 16px;
  padding-left: 20px;
  cursor: pointer;
}
.navdownloads .opendownloads:hover {
  text-decoration: underline;
}
.downloadhide {
  max-height: 0px;
  transition: max-height 0.5s;
  overflow: hidden;
  display: flex;
}
.downloadhide.showdownloads {
  max-height: 60px;
}
.downloadhide a {
  margin: 20px 30px 0 0;
  color: #ea5923;
  text-decoration: none;
  background: url(/img/ui/downarrow.svg) left center no-repeat;
  background-size: 8px;
  padding-left: 10px;
}
.downloadhide a:hover {
  text-decoration: underline;
}

.intronav .navbg {
  height: 0;
}
.intronav .nav a {
  opacity: 0;
}
.intronav .navhide {
  height: 0;
}

/*.menuopen .navholder {height:100vh}*/
.menuopen .navhide {
  height: 100vh;
}





/**** footer ****/
/*.s0 .footernav {display:none}*/

.nextpage {
  background: #fdef72;
  padding: 20px 0;
  font-size: 25px;
  line-height: 25px;
  font-family: "BrownLLWeb-Bold";
  text-align: right;
}
.nextpage a {
  color: #51191a;
  display: inline-block;
  text-decoration: none;
  background: right center no-repeat url(/img/ui/rightarrow.svg);
  background-size: 12px auto;
  padding-right: 20px;
}
.nextpage a:hover {
  text-decoration: underline;
}

.footer {
  background: #39407d;
  padding: 2.5vw 0 5vw 0;
}
.footerlogo img {
  width: 240px;
  margin-bottom: 30px;
}
.footerdots img {
  width: 60px;
  margin-bottom: 30px;
}
.footersoc {
  display: flex;
}
.footersoc .socbutton {
  background: top left no-repeat;
  background-size: contain;
  width: 30px;
  height: 30px;
  margin-right: 20px;
}
.footersoc .socbutton.instagram {
  background-image: url(/img/content/nav/instagrampink.svg);
}
.footersoc .socbutton.twitter {
  background-image: url(/img/content/nav/twitterpink.svg);
}
.footerright {
  text-align: right;
}
.footer ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.footer ul li {
  margin: 0 0 10px 0;
  padding: 0;
}
.footer ul li a {
  color: #ee759b;
  text-decoration: none;
  font-size: 14px;
  line-height: 18px;
}
.footer ul li a.download {
  color: #fff;
}

/**** general page stuff ****/
b {
  font-weight: normal;
  font-family: "BrownLLWeb-Bold";
}

h1 {
  font-size: 4vw;
  line-height: 1.1em;
  font-weight: normal;
  font-family: "BrownLLWeb-Bold";
}
h2 {
  font-size: 35px;
  line-height: 1.3em;
  font-weight: normal;
  font-family: "BrownLLWeb-Bold";
}
h3 {
  font-size: 25px;
  line-height: 1.3em;
  font-weight: normal;
  font-family: "BrownLLWeb-Bold";
}
h4 {
  font-size: 16px;
  line-height: 1.3em;
}

.whitetext {
  color: #fff;
}
.browntext {
  color: #51191a;
}
.pinktext {
  color: #ee759b;
}
.orangetext {
  color: #ea5923;
}
.darkbluetext {
  color: #39407d;
}
.bluetext {
  color: #23b5ed;
}
.greentext {
  color: #18ab77;
}
.yellowtext {
  color: #fdef72;
}
.lightbluebg {
  background-color: #DEF4FC
}
.bluebg {
  background-color: #23b5ed;
}
.greenbg {
  background-color: #18ab77;
}
.brownbg {
  background-color: #51191a;
}
.pinkbg {
  background-color: #ee759b;
}
.lightpinkbg {
  background-color:#FCE8EE;
}
.orangebg {
  background-color: #ea5923;
}
.lightorangebg {
  background-color:#FBDED3;
}
.lightorangebg {
  background-color: #fbe4c4;
}
.darkbluebg {
  background-color: #39407d;
}
.yellowbg {
  background-color: #fdef72;
}
.lightyellowbg {
  background-color: #fffdea;
}
.whitebg {
  background-color: #fff;
}

.pagesection {position:relative}
.paddingsection {padding:5vw 0}
.nopaddingbottom {padding-bottom:0}

/*.pagecontent {padding-top:170px}*/

.cgi {
  position: relative;
}
.cgi:before {
  content: "Computer generated image. Indicative only.";
  display: block;
  color: #fff;
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 500;
  font-size: 12px;
  line-height: 12px;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.75);
}

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

/**** home ****/
.homeintro {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: #23b5ed;
}
.homeintro video {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position: 50% 50%;}

.videofallback {position:absolute;top:0;left:0;width:100%;height:100vh;}
.videofallback .pic {width:100%;height:100vh;background:50% 50% no-repeat;background-size:cover}

.homeintro .introtext {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  padding:0 10vw;
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  color: var(--white, #FFF);
  text-shadow: 0 4px 21px rgba(0, 0, 0, 0.50);
}
.homeintro .introtext h1 {font-size:7vw;line-height:1.1em;text-align: center;}
.homeintro .introtext h3 {text-align: center;}
.downarrow {background:url(/img/ui/downarrowwhite.svg) 50% 50% no-repeat;background-size:contain;width:100%;height: 25px;position:absolute;bottom:30px;left:0;}

/*.homeintro .introtext h1 {font-size:6vh;line-height:1em}*/

.bridgebg {background:url(/img/content/home/bridgebg.png) no-repeat bottom center #fff;background-size:100% auto;padding-bottom:20vw}

.yellowbox {
  padding: 1.25vw;
  background: #fdef72;
  color: #51191a;
  display: flex;
  position: relative;
  flex-wrap: wrap;
}
.yellowbox.firstbox {
  width: 70%;
  float: right;
}

.yellowbox.secondbox {
  width: 45%;
}
.yellowbox .thirdcol {
  width: calc(33.333333% - 2.5vw);
  padding: 2.5vw;
}

.yellowbox .halfcol {
  width: calc(50% - 2.5vw);
  padding: 2.5vw;
}
.yellowbox .fullcol {
  width: calc(80% - 2.5vw);
  padding: 2.5vw;
}

.homefoot {padding-bottom:5vw}
.homefoot .yellowbox {margin-top:-5vw}
.homefoothead {width:100%;padding-top:1vw}
.centretext {text-align: center;}
.goodpoints {display:flex}
.goodpoints p {margin-bottom:5vw}
.goodpoints .thirdcol {display:flex;flex-direction: column;justify-content: space-between;align-items: flex-start;border-right:1px solid #51191A;padding-top:0;padding-bottom:0;margin:2.5vw 0}
.goodpoints .thirdcol:last-child {border:none}

.portraitgallery {
  width: 100%;
  height: 75vh;
  position: relative;
}
.portraitgallery .pic {
  width: 100%;
  height: 75vh;
  background: 50% 50% no-repeat;
  background-size: cover;
}

@media (min-aspect-ratio: 2/1.15) {
  .portraitgallery, .portraitgallery .pic {
    height: 90vh;
  }
}

.bannergallery {
  width: 60vw;
  height: 100vh;
  position: relative;
}
.bannergallery .pic {
  width: 60vw;
  height: 100vh;
  background: 50% 50% no-repeat;
  background-size: cover;
}

.homegallery,
.buildinggallery,
.spacegallery {
  width: 100%;
  height: 95vh;
  position: relative;
}
.homegallery .pic,
.buildinggallery .pic,
.spacegallery .pic {
  width: 100%;
  height: 95vh;
  background: 50% 50% no-repeat;
  background-size: cover;
}

.spacegallery, .spacegallery .pic {height:60vh}

.slick-arrow {
  width: 40px;
  height: 40px;
  border: 0;
  background: #fff 50% 50% no-repeat;
  background-size: 12px auto;
  position: absolute;
  top: calc(50% - 20px);
  cursor: pointer;
  overflow: hidden;
  text-indent: -9999px;
  z-index: 1000;
}
.slick-arrow:hover {
  background-color: #fdef72;
}
.slick-arrow.slick-prev {
  background-image: url(/img/ui/leftarrow.svg);
  left: 0px;
  background-color: #fdef72;
}
.slick-arrow.slick-prev:hover {
  background-color: #fff;
}
.slick-arrow.slick-next {
  background-image: url(/img/ui/rightarrow.svg);
  right: 0px;
}
.portraitgallery .slick-arrow.slick-prev, .bannergallery .slick-arrow.slick-prev {left:auto;right:40px;top:auto;bottom:0}
.portraitgallery .slick-arrow.slick-next, .bannergallery .slick-arrow.slick-next {left:auto;right:0px;top:auto;bottom:0}
.slick-dots {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  position: absolute;
  bottom: 40px;
  left: 40px;
  flex-wrap: wrap;
}
.slick-dots li {
  margin: 0 20px 0 0;
  padding: 0;
}

.slick-dots li button {
  background: transparent;
  border: 1px solid #fff;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  font-size: 0;
  position: relative;
  border-radius: 50%;
}
.slick-dots li.slick-active button {
  background: #fff;
}

/**** building ****/
.buildingintro {
  color: #fff;
  display: flex;
  align-items: flex-start;
  width:100%;
}

.plantgirlbg {background:#00B67B url(/img/content/building/plantgirl.gif) right bottom no-repeat;background-size:auto 27.5vh}

.buildingintro .text {
  padding: 0 5vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 5vw + 1px);
  border-bottom: 5vw #fff solid;
  flex-basis:calc(100% - 60vw)
}
.buildingintro p {max-width:400px}
.buildingintro .pic {
  flex: 0 0 60vw;
  height: 100vh;
  background: url(/img/content/building/banner/1.jpg) 50% no-repeat;
  background-size: cover;
}

.bikebg {padding-bottom:12.5vw}
.bikeholder {position:absolute;bottom:2.5vw;left:0;width:100%;height:7.5vw;overflow: hidden;}
.bikeholder img {height:100%;width:auto}

.bikeman {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 150px;
  animation: slideAcross 15s linear infinite; /* adjust duration as needed */
}

@keyframes slideAcross {
  0% {
    left: -200px; /* start off screen left */
  }
  100% {
    left: 100vw; /* move past the right edge of the viewport */
  }
}

.speclist {display: flex;text-align: center;flex-wrap: wrap;justify-content: center;}
.speclist.fivespec {justify-content: center;}
.specitem {box-sizing: border-box;padding:0 0.75vw;margin-bottom:30px}
.twospec .specitem {flex:0 0 50%;}
.fourspec .specitem {flex:0 0 25%;}
.fivespec .specitem {flex:0 0 20%;}
.speclist .icon {background:50% 50% no-repeat;background-size:contain;width:8vw;height:8vw;margin:0 auto 0px auto}
.speclist .specname {margin-bottom:8px}
.speclist .text {font-size:14px;line-height:1.3em}
.specdownload {text-align: center;padding-top:20px}

.heart {position:absolute;top:2.5vw;left:0;width:35vw;height:35vw;background:url(/img/content/building/heart.png) top left no-repeat;background-size: contain;z-index:500}
.people {position:absolute;bottom:0;right:53vw;width:30vw;height:18vw;background:url(/img/content/building/people.png) bottom right no-repeat;background-size: contain;}

.gradoverlay {
  position: relative;
}
.gradoverlay:before {
  content: "";
  opacity: 0.2;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#545454+0,545454+100&1+0,0+100 */
  background: -moz-linear-gradient(top, rgba(84, 84, 84, 1) 0%, rgba(84, 84, 84, 0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    top,
    rgba(84, 84, 84, 1) 0%,
    rgba(84, 84, 84, 0) 100%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    to bottom,
    rgba(84, 84, 84, 1) 0%,
    rgba(84, 84, 84, 0) 100%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#545454', endColorstr='#00545454',GradientType=0 ); /* IE6-9 */
}

.spec {
  padding: 10vw 0;
}

.cyclebg {
  background: #fff;
  position: relative;
  margin-top: -1px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cyclebg:before {
  content: "";
  display: block;
  background: #fae4c5;
  width: 100%;
  height: 50%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.cyclebg .pic {
  position: relative;
  flex: 1 1 40%;
  padding: 0 5vw;
}
.cyclebg .pic img {
  display: block;
}
.cyclebg .text {
  position: relative;
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 14px;
  line-height: 18px;
}
.cyclebg h2 {
  position: absolute;
  top: -50px;
}
.cyclebg .text h4 {
  margin-bottom: 10px;
}

.bikeitems {
  display: flex;
  flex-wrap: wrap;
}
.bikeitem {
  flex: 0 0 40%;
  margin: 1.25vw 10% 1.25vw 0;
}
.bikeitem .icon {
  background: #000 50% 50% no-repeat;
  width: 5vw;
  height: 5vw;
  margin-bottom: 20px;
  border-radius: 10px;
}
.bikeitem p {
  margin: 0;
}

.trophies {
  padding: 5vw 0;
}
.awards {
  display: flex;
  width: 80%;
  justify-content: center;
  height: auto;
  margin: 0 auto;
  flex-wrap: wrap;
}
.awards .award {
  background: 50% 50% no-repeat;
  background-size: contain;
  height: 10vw;
  flex: 0 0 30%;
  margin: 0 auto 20px auto;
}

.flexspace {
  padding-bottom: 10vw;
}
.flex1 {
  padding-top: 5vw;
  position: relative;
  display: flex;
  align-items: flex-start;
}
.flex1 .yellowbox {
  width: 80vw;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
}
.flex1 .text {
  position: relative;
  margin: 0 2.5vw 0 10vw;
}
.flex1 .text h1 {
  margin: 0;
}
.flex1 .pic {
  position: relative;
  top: 10vw;
  width: 35vw;
  height: 35vw;
  background: url(/img/content/building/pic1.jpg) no-repeat 50% 50%;
  background-size: cover;
}
.flex2 {
  margin: 2.5vw 0 0 10vw;
  width: 35vw;
}

/**** esg ****/

.yogagirlbg {background:#23B5ED url(/img/content/esg/yogagirl.gif) right 0px bottom 20px no-repeat;background-size:auto 27.5vh}

.yogapeoplebg {background:url(/img/content/esg/yogapeople.gif) no-repeat 30% 100% #fff;background-size:30vw auto;padding-bottom:5vw}

.awardwinners {background:url(/img/content/icons/star.svg) 50% 50% no-repeat;background-size:contain;position:absolute;top:2.5vw;right:2.5vw;text-align: center;width:140px;height:140px;display:flex;align-items: center;justify-content: center;}
.specline {width:100%;height:1px;background:#51191A;margin:20px 0}

.materialscarousel {width:95%;margin-left:5%;height:50vh;margin-top:2.5vw}
.materialscarousel .slide, .materialscarousel .slideinner {width:35vw;height:50vh;margin:0 20px 0 0}
.materialscarousel .slideinner {display:flex;background:50% 50% no-repeat;background-size:cover;align-items:flex-end;flex-direction: column;}
.slidepic {width:100%;flex:1 1 100%;background:50% 50% no-repeat;background-size:cover}
.matcaption {background:#fff;width:100%;box-sizing: border-box;padding:16px;display: flex;justify-content: space-between;align-items:center}
.matcaption p {margin:0}
.matcaption .buttonlink {margin:0;top:auto}

/**** availability ****/
.spacebanner {
  width: 100%;
  height: 60vh;
  background: url(/img/content/availability/banner.jpg) 50% 50% no-repeat;
  background-size: cover;
}

.space {
  padding: 5vw 0;
  color: #fff;
}
.availabletable {
  width: 100%;
}
.floornum {display:inline-block;width:40px}
.availabletable td {
  border-bottom: 1px solid #fff;
  padding: 10px;
}
.bordercell {border-right:1px dotted #fff}
.availabletable .holdingcell {
  padding: 0;
  height: 10px;
  vertical-align: top;
}
.availabletable tr td:first-child {
  text-align: left;
}
.availabletable tr td:last-child {
  border-right: 0;
}
.availabletable thead .boldhead {
  font-family: "BrownLLWeb-Bold";
}
.availabletable thead .boldhead td {border-right:none;border-bottom:1px solid #fff}

.availabletable tfoot td {
  border-bottom: none;
  background:#fff;color:#23b5ed;border-right-color: #23b5ed;
}

.available td {background:#fff;color:#EE759B;border-right-color: #23b5ed}


.plans {
  position: relative;
  padding-bottom: 250px;
}
.plans .smallText {
  position: absolute;
  bottom: 20px;
  left: 20px;
}

.plans .elevation {
  position: absolute;
  bottom: 60px;
  right: 0;
  width: 100%;
  text-align: right;
}
.plans .elevationinner {width:100%;height:100%;position: relative;display:flex;justify-content: flex-start;;}
.plans .elevation .highlight {
  background: #fbe5c5;
  position: absolute;
  z-index: -1;
  transition: all 0.2s;
  top: 90px;
  left: 0;
  width: 200px;
  height: 10px;
}

.floorpager {list-style-type: none;margin:0;padding:0;display:flex;position: relative;z-index:1000;cursor: pointer;margin-top:40px}
.floorpager li {width:30px;height:30px;border-radius:20px;box-sizing: border-box;border: 1px solid #EE759B;display:flex;align-items:center;justify-content:center;color:#EE759B;transition:color 0.2s, background 0.2s;margin:0 10px 0 0}
.floorpager li.active {background:#EE759B;color:#fff}
.floorpager li:hover {background:#39407D;border-color:#39407D;color:#fff}

.plans .elevation.basement .highlight {
  top: 90px;
  left: 0;
  width: 200px;
  height: 10px;
}
.plans .elevation.ground .highlight {
  top: 80px;
  left: 0;
  width: 200px;
  height: 10px;
}
.plans .elevation.first .highlight {
  top: 70px;
  left: 0;
  width: 200px;
  height: 10px;
}
.plans .elevation.second .highlight {
  top: 61px;
  left: 0;
  width: 200px;
  height: 10px;
}
.plans .elevation.typical .highlight {
  top: 31px;
  left: 0;
  width: 200px;
  height: 30px;
}
.plans .elevation.fifth .highlight {
  top: 31px;
  left: 0;
  width: 200px;
  height: 11px;
}
.plans .elevation.sixth .highlight {
  top: 24px;
  left: 11px;
  width: 182px;
  height: 6px;
}
.plans .elevation.seventh .highlight {
  top: 14px;
  left: 11px;
  width: 116px;
  height: 10px;
}
.plans .elevation.eighth .highlight {
  top: 6px;
  left: 33px;
  width: 94px;
  height: 10px;
}
.plans .elevation .line {
  width: 100%;
  height: 1px;
  background: #000;
  position: absolute;
  top: 90px;
}
.plans .elevation .pic {
  width: 200px;
  height: 100px;
  position: relative;
  z-index: 10;
  margin-right: 30px;
  margin-left:40px;
}

.plansgallery {
  width: 100%;
  height: calc(100vh - 250px);
  position: relative;
}

.north {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 20px;
  left: 20px;
  background: top right no-repeat url(/img/content/availability/north.svg);
}

.plansgallery .slick-arrow {
  background-color: #39407d;
}
.plansgallery .slick-arrow.slick-prev {
  background-image: url(/img/ui/leftarrowwhite.svg);top:calc(50vh - 20px)
}
.plansgallery .slick-arrow.slick-next {
  background-image: url(/img/ui/rightarrowwhite.svg);top:calc(50vh - 20px)
}
.plansgallery .slick-arrow:hover {background-color: #EE759B;}

.floorinner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100vh;
  padding: 0 0 0 5vw;
}
.floorinner .text {
  flex: 0 0 12.5vw;
}
.floorname {
  font-size: 20px;
  font-family: "BrownLLWeb-Bold";
  border-bottom: 1px solid #51191a;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.keyitem {
  display: flex;
  font-size: 14px;
  line-height: 18px;
  margin-bottom: 10px;
  padding-bottom:10px;
  border-bottom:1px solid #51191a
}

.keyitem:last-child {border:none}

.blend {width:120px;height:auto;margin:10px 0 5px 0}
.keyitem .symbol {
  flex: 0 0 16px;
  height: 16px;
  /*border: 1px solid #000;*/
  border-radius: 50%;
  margin-right: 10px;
  position: relative;
  top: 4px;
  background: 50% 50% no-repeat;
  background-size: cover;
}
.keyitem .symbol.retail {
  background-image: url(/img/content/availability/key/retail.svg);
}
.keyitem .symbol.flex {
  background-image: url(/img/content/availability/key/flex.svg);
}
.keyitem .symbol.workspace, .keyitem .symbol.office {
  background-image: url(/img/content/availability/key/office.svg);
}
.keyitem .symbol.reception {
  background-image: url(/img/content/availability/key/reception.svg);
}
.keyitem .symbol.terrace {
  background-image: url(/img/content/availability/key/terrace.svg);
}
.keyitem .symbol.clubroom {
  background-image: url(/img/content/availability/key/clubroom.svg);
}
.keyitem .symbol.urbanvillagehall {
  background-image: url(/img/content/availability/key/urbanvillagehall.svg);
}
.keyitem .symbol.cycle {
  background-image: url(/img/content/availability/key/cycle.svg);
}

.floorinner .pic {
  height: 100%;
  max-height: calc(100vh - 140px);
  flex: 0 0 60vw;
  background: center right no-repeat;
  background-size: contain;
}

/**** location ****/
.locationintro {
  position: relative;
}
.locationintro .blackbox {
  background: #000;
  position: relative;
  width: calc(100% - 25vw);
  height: calc(100vh - 5vw);
  margin-bottom: 5vw;
}
.locationintro .blackbox .text {
  float: left;
  height: 100%;
  width: calc(100% - 55vw);
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  padding: 0 5vw 0 10vw;
}
.locationprev {overflow:hidden;position:relative;display:flex;justify-content: center;align-items: flex-end;box-sizing: border-box;padding-bottom:5vw;}
.locationprev video {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position: 50% 50%;}

.streetfood {margin-top:-5vw}
.streetfood .blend {width:140px;margin-bottom:16px}
.streetfood .van {width:75%;height:auto;margin-top:40px}

.mapsection {
  padding: 5vw 0;
}

.locationmap {
  width: 100%;
  height: 90vh;
  position: relative;
}
.locationmap .mapholder {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#map {
  width: 100%;
  height: 100%;
}

.locationmap .mapcategories {position:absolute;top:20px;left:20px;width:25vw}
.locationmap .mapcategories .mapheader {background:#2D2D2C;color:#fff;padding:30px 20px}
.locationmap .mapcategories .mapheader h2 {margin:0}

.amenitylist {border:2px solid #2D2D2C;font-weight:normal;font-size:14px;transition:background 0.4s}
.amenitylist.active {background-image:url(/img/ui/downarrowblack.svg)}
#leisurelist {background-color:#EA5923;border-color:#EA5923}
#foodlist {background-color:#23B5ED;border-color:#23B5ED}
#cafelist {background-color:#00B67B;border-color:#00B67B}
#hotelslist {background-color:#2D2D2C;border-color:#2D2D2C}
#culturelist {background-color:#CD7F58;border-color:#CD7F58}
#conveniencelist {background-color:#39407D;border-color:#39407D}

#leisurelist.active {background-color:#fff}
#foodlist.active {background-color:#fff}
#cafelist.active {background-color:#fff}
#hotelslist.active {background-color:#fff}
#culturelist.active {background-color:#fff}
#conveniencelist.active {background-color:#fff}

#leisurelist.active h4 {color:#EA5923}
#foodlist.active h4 {color:#23B5ED}
#cafelist.active h4 {color:#00B67B}
#hotelslist.active h4 {color:#2D2D2C}
#culturelist.active h4 {color:#CD7F58}
#conveniencelist.active h4 {color:#39407D}


#occupierlist {background-color:#ED6B1C}
.amenitylist h4 {cursor:pointer;cursor:hand;padding:10px;margin:0;font-weight:normal;font-size:20px;line-height:1em;color:#fff;position: relative;transition:color 0.4s}
.amenitylist h4:after {content:'+';display: block;position:absolute;right:10px;top:8px;font-size:1.3em;line-height:1em;}
.amenitylist.active h4:after {content:'–'}
.amenitylist h4:hover {text-decoration:underline}
.amenitylist ul {margin:5px 0 0 0;padding:0;list-style-type: none;overflow:hidden;max-height:0;transition:max-height 0.4s;display:flex;flex-direction:row;flex-wrap: wrap;}
.amenitylist ul li {margin:0;box-sizing:border-box;padding:0 10px 0 10px;cursor:pointer;cursor:hand;line-height:1.2em;margin-bottom:5px;flex:0 0 50%}
.amenitylist ul li:hover {text-decoration: underline;}
.amenitylist#occupierlist ul li:hover {background-color:#EFC33E}
.amenitylist ul li.active, .amenitylist#occupierlist ul li.active {background:#fff}
.amenitylist.active ul {max-height:800px}

.amenitylist#occupierlist {padding-bottom:10px}
.amenitylist#occupierlist ul {display:flex;flex-wrap:wrap;justify-content:center;width:calc(100% - 40px);margin-left:20px;overflow:hidden}
.amenitylist#occupierlist ul li {
margin:0;padding:0;height:60px;flex:0 0;flex-basis:calc((100% / 3) - 1px);display:flex;align-items:center;justify-content:center;border-right:1px solid #2D2D2C;border-bottom:1px solid #2D2D2C}
.amenitylist#occupierlist ul li.longlogo {flex-basis:calc(50% - 1px)}
.amenitylist#occupierlist ul li .logo {background:50% 50% no-repeat;background-size:contain;width:80%;height:80%}


.gm-style .gm-style-iw-c {box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.25) !important;}
.gm-style .gm-style-iw-t::after {box-shadow: -2px 5px 0px 0 rgba(0,0,0,0.25)}
.infowindowinner p {margin:10px}


.gm-style .gm-style-iw-c {
  box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.25) !important;
  background: #fff;
  padding-bottom:0;
}
.gm-style .gm-style-iw-t::after {
  box-shadow: -2px 5px 0px 0 rgba(0, 0, 0, 0.25);
  background: #fff;
}

.gm-style-iw-ch {display:none}
.gm-ui-hover-effect {position:absolute !important;top:4px;right:4px;width:24px !important;height:24px !important}
.gm-style .gm-style-iw-d {padding:5px 10px 5px 10px;}
.gm-ui-hover-effect > span {margin:0 !important}


.infowindowinner.leisure {color:#EA5923}
.infowindowinner.food {color:#23B5ED}
.infowindowinner.cafe {color:#00B67B}
.infowindowinner.hotels {color:#2D2D2C}
.infowindowinner.culture {color:#CD7F58}
.infowindowinner.convenience {color:#39407D}

.middlecontainer {display:flex;align-items: center;}

.aerial {display:block;margin:0 auto}

/*.locationmap .mapcategories {
  position: absolute;
  top: 40px;
  left: 40px;
  width: 25vw;
}
.locationmap .mapcategories .mapheader {
  background: #2d2d2c;
  color: #fff;
  padding: 30px 20px;
}
.locationmap .mapcategories .mapheader h2 {
  margin: 0;
}

.gm-style .gm-style-iw-c {
  box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.25) !important;
  background: #ee759b;
}
.gm-style .gm-style-iw-t::after {
  box-shadow: -2px 5px 0px 0 rgba(0, 0, 0, 0.25);
  background: #ee759b;
}
.infowindowinner p {
  margin: 10px;
}
.infowindowinner.leisure p.swsolid {
  color: #48a150;
}
.infowindowinner.food p.swsolid {
  color: #4da7ab;
}
.infowindowinner.culture p.swsolid {
  color: #856ca6;
}
.infowindowinner.occupier p.swsolid {
  color: #ed6b1c;
}

.infowindowinner.occupier .logo {
  width: 140px;
  height: 60px;
  margin: 0px;
  background: 50% 50% no-repeat;
  background-size: contain;
}
.amenitylist#occupierlist ul li.bae .logo,
.infowindowinner.bae .logo {
  background-image: url(/img/content/location/logos/white/bae.svg);
}
.amenitylist#occupierlist ul li.bodyshop .logo,
.infowindowinner.bodyshop .logo {
  background-image: url(/img/content/location/logos/white/bodyshop.svg);
}
.amenitylist#occupierlist ul li.cbre.logo,
.infowindowinner.cbre .logo {
  background-image: url(/img/content/location/logos/white/cbre.svg);
}
.amenitylist#occupierlist ul li.ey .logo,
.infowindowinner.ey .logo {
  background-image: url(/img/content/location/logos/white/ey.svg);
}
.amenitylist#occupierlist ul li.grainger .logo,
.infowindowinner.grainger .logo {
  background-image: url(/img/content/location/logos/white/grainger.svg);
}
.amenitylist#occupierlist ul li.heinz .logo,
.infowindowinner.heinz .logo {
  background-image: url(/img/content/location/logos/white/heinz.svg);
}
.amenitylist#occupierlist ul li.justgiving .logo,
.infowindowinner.justgiving .logo {
  background-image: url(/img/content/location/logos/white/justgiving.svg);
}
.infowindowinner.norton .logo {
  background-image: url(/img/content/location/logos/white/norton.svg);
}
.amenitylist#occupierlist ul li.ogilvy .logo,
.infowindowinner.ogilvy .logo {
  background-image: url(/img/content/location/logos/white/ogilvy.svg);
}
.amenitylist#occupierlist ul li.omnicom .logo,
.infowindowinner.omnicom .logo {
  background-image: url(/img/content/location/logos/white/omnicom.svg);
}
.amenitylist#occupierlist ul li.pwc .logo,
.infowindowinner.pwc .logo {
  background-image: url(/img/content/location/logos/white/pwc.svg);
}
.amenitylist#occupierlist ul li.sage .logo,
.infowindowinner.sage .logo {
  background-image: url(/img/content/location/logos/white/sage.svg);
}
.amenitylist#occupierlist ul li.zoopla .logo,
.infowindowinner.zoopla .logo {
  background-image: url(/img/content/location/logos/white/zoopla.svg);
}*/

.satnav {
  margin-top: 20px;
  color: #fff;
}

/**** news ****/
.featurednews {
  position: relative;
  height: 60vh;
  display: flex;
  align-items: flex-end;
}
.featurednews:before {
  content: "";
  opacity: 0.2;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px;
  z-index: 100;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#545454+0,545454+100&1+0,0+100 */
  background: -moz-linear-gradient(top, rgba(84, 84, 84, 1) 0%, rgba(84, 84, 84, 0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    top,
    rgba(84, 84, 84, 1) 0%,
    rgba(84, 84, 84, 0) 100%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    to bottom,
    rgba(84, 84, 84, 1) 0%,
    rgba(84, 84, 84, 0) 100%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#545454', endColorstr='#00545454',GradientType=0 ); /* IE6-9 */
}
.featurednews:after {
  content: "";
  opacity: 0.8;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 90%;
  z-index: 100;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,1+100 */
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 100%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
.newstitle {
  font-family: "BrownLLWeb-Bold";
}
.featurednews.newspageheader:after {
  display: none;
}
.newsitem {
  color: #fff;
  text-decoration: none;
}
.featurednews .pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 50% 50% no-repeat;
  background-size: cover;
}
.pic.contain {
  background-size: contain !important;
}
.featurednews .text {
  position: relative;
  z-index: 200;
  margin: 0 0 2.5vw calc(5vw + 31vw + 20px);
  width: 30vw;
}
.featurednews .newsdate {
  display: inline-block;
  background: #39407d;
  padding: 8px 5px;
  font-size: 12px;
  line-height: 1em;
  color: #fff;
  margin-bottom: 20px;
}
.featurednews .newstitle {
  font-size: 25px;
  line-height: 30px;
  font-family: "BrownLLWeb-Bold";
  margin-bottom: 20px;
}
.featurednews .readmore,
.newsbutton {
  display: inline-block;
  color: #fff;
  background: #23b5ed;
  font-size: 14px;
  text-decoration: none;
  padding: 15px 20px;
}
.featurednews .newsitem:hover .readmore,
.newsbutton:hover {
  text-decoration: underline;
}

.newshomebody {
  display: flex;
}
.allnews {
  flex: 1 1;
  flex-basis: calc(100% - 20vw);
  padding: 2.5vw 0 10vw 6vw;
  display: flex;
  flex-wrap: wrap;
}
.allnews .newsitem {
  border-bottom: 1px solid #fff;
  margin: 0 20px 2.5vw 0;
  flex: 0 0;
  flex-basis: calc(15vw - 20px);
  padding-bottom: 5vw;
}
.allnews .newsitem:hover .newstitle {
  text-decoration: underline;
}
.allnews .newsdate {
  font-size: 12px;
  line-height: 1em;
  margin-bottom: 20px;
}
.allnews .newstitle:after {
  content: " »";
}
.allnews .readmore {
  display: none;
}

.allnews .newsitem:first-child,
.allnews .newsitem:nth-child(2) {
  display: flex;
  flex-basis: calc(60vw + 20px);
  border: 0;
  padding-bottom: 0;
  margin-bottom: 5vw;
}
.allnews .newsitem:nth-child(2) {
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.allnews .newsitem:first-child .pic,
.allnews .newsitem:nth-child(2) .pic {
  height: 22vw;
  flex: 0 0 30vw;
  margin-right: 20px;
  background: 50% 50% no-repeat;
  background-size: cover;
}
.allnews .newsitem:first-child .text,
.allnews .newsitem:nth-child(2) .text {
  min-height: 20vw;
  flex: 0 0 30vw;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.allnews .newsitem:first-child .newstitle,
.allnews .newsitem:nth-child(2) .newstitle {
  margin-bottom: 20px;
  font-size: 25px;
  line-height: 30px;
}
.allnews .newsitem:first-child:hover .newstitle,
.allnews .newsitem:nth-child(2):hover .newstitle {
  text-decoration: none;
}
.allnews .newsitem:first-child .readmore,
.allnews .newsitem:nth-child(2) .readmore {
  display: inline-block;
  color: #fff;
  background: #23b5ed;
  font-size: 14px;
  text-decoration: none;
  padding: 15px 20px;
}
.allnews .newsitem:first-child:hover .readmore,
.allnews .newsitem:nth-child(2):hover .readmore {
  text-decoration: underline;
}

.newsright {
  flex: 0 0 24vw;
  display: flex;
  flex-direction: column;
}

.newsletter {
  background: #fdef72;
  padding: 2vw;
  font-size: 14px;
  line-height: 18px;
  color: #51191a;
}
/*.newsletterheading {margin:1vw;min-height:30px;}*/
.newsletter a {
  color: #ea5923;
}
.newsletterlisting {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 20px;
}
.newsletterlisting .newsletterdate {
  flex: 1 1;
  display: flex;
  align-items: flex-end;
}
.newsletterlisting .newsletterdate:after {
  content: "";
  display: block;
  flex: 1 1;
  margin: 0 5px;
  background: transparent;
  border-bottom: 1px dotted #ea5923;
  margin-bottom: 0.2em;
}
.newsletterdownload {
  color: #ea5923;
  text-decoration: none;
  padding-right: 30px;
  background: right center no-repeat url(/img/ui/download.svg);
  background-size: 20px auto;
}
.newsletterdownload:hover {
  text-decoration: underline;
}

.igfeed {
  background: #4c538a;
  flex: 1 1;
  padding: 1vw;
}
.igheading {
  margin: 1vw;
  min-height: 30px;
  background: top right no-repeat url(/img/content/news/igpink.svg);
  background-size: auto 30px;
}
.igheading a {
  text-decoration: none;
}
.igheading a:hover {
  text-decoration: underline;
}

.instabackup {
  display: flex;
  flex-direction: column;
}
.instabackup a {
  flex: 0 0 20vw;
  margin: 1vw;
  width: 20vw;
  background: 50% 50% no-repeat;
  background-size: cover;
}

.newspagebody {
  padding: 5vw 0;
  font-size: 15px;
  line-height: 20px;
}
.newspagebody .newsdate {
  font-size: 12px;
  line-height: 1em;
  margin-bottom: 20px;
}
.newspagebody .newstitle {
  font-size: 25px;
  line-height: 30px;
  margin-bottom: 20px;
}
.newspagebody a {
  color: #fff;
}
.newsbutton {
  margin-top: 40px;
}

/**** newsletters ****/
.newsletterpage {
  padding-top: 50px;
  background: #00b67b;
}
.newsletterpage .heart {
  align-items: center;
}
.newsletterlist {
  padding: 20px 0;
}

/**** contacts ****/

.contactpage {
  position: relative;
  background: url(/img/content/contact/bg.jpg) 50% 50% no-repeat;
  background-size: cover;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
}
.contactpage:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(57, 64, 125, 0.8);
}

.contactdownloads {
  position: relative;
  text-align: center;
  padding: calc(30vh - 100px) 0;
}
.contactdownloads ul {
  list-style-type: none;
  margin: 40px 0 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
}
.contactdownloads ul li {
  margin: 0 2.5vw;
  padding: 0;
}
.contactdownloads a {
  color: #fff;
  text-decoration: none;
}
.contactdownloads a:hover {
  text-decoration: underline;
}
.contactdownloads a:before {
  content: "";
  display: block;
  margin: 0 auto 20px auto;
  width: 50px;
  height: 50px;
  background: #fff url(/img/ui/downarrowpink.svg) 50% 50% no-repeat;
  background-size: 16px auto;
  border-radius: 50%;
}

.contactdownloads a:hover:before {
  background-color: #fdef72;
}

.contactpage .container {
  font-size: 16px;
  padding-bottom: 2.5vw;
}

.cbrelogo img {
  height: 30px;
  margin-bottom: 20px;
}
.rxlogo img {
  height: 50px;
  margin-bottom: 20px;
}
.forelogo,
.landidlogo {
  display: block;
}
.forelogo img {
  width: 200px;
  margin-bottom: 10px;
}
.landidlogo img {
  width: 51px;
  margin-bottom: 10px;
}

.agents {
  display: flex;
}
.agent {
  font-size: 12px;
  line-height: 16px;
  margin-right: 40px;
}
.agent a {
  color: #fff;
}

.contactsoc {
  float: right;
  display: flex;
  flex-direction: column;
}
.contactsoc .socbutton {
  display: block;
  width: 30px;
  height: 30px;
  margin-bottom: 20px;
  cursor: pointer;
  background-size: 30px auto;
  position: relative;
  z-index: 10000;
}
.contactsoc .socbutton.instagram {
  background-image: url(/img/content/contact/instagram.svg);
}
.contactsoc .socbutton.twitter {
  background-image: url(/img/content/nav/twitterwhite.svg);
}

.disclaimer {
  padding: 1.25vw 0;
  color: #fff;
  font-size: 12px;
  line-height: 16px;
}

.indicates-required {
  font-size: 10px;
}
.contactform form {
  display: flex;
  width: 50%;
  max-width: 300px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}
.contactform #mc_embed_signup_scroll {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.contactform input {
  border: 1px solid #fff;
  background: rgba(0, 0, 0, 0.1);
  color: #fff;
  padding: 10px;
  flex: 0 0 100%;
  font-family: "BrownLLWeb-Regular";
  margin: 10px 0;
  font-size: 14px;
}
.contactform input[type="submit"] {
  flex: 0 0 50%;
  background: #fff right 10px center url(/img/ui/rightarrow.svg) no-repeat;
  background-size: 12px auto;
  color: #ee759b;
  padding-right: 35px;
  cursor: pointer;
}
.contactform input[type="submit"]:hover {
  border-color: #ee759b;
}

/**** sign up ****/
.signuppage {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: space-around;
  justify-content: center;
  background: #24b5eb;
}
.leftcloud {
  position: absolute;
  left: 0;
  top: 20vh;
  width: 10vw;
}
.rightclouds {
  position: absolute;
  right: 0;
  top: 15vh;
  width: 15vw;
}
.signuptext {
  width: 50%;
  max-width: 400px;
  margin: 0 auto;
  padding: 5vw 0;
}
.boatfloat {
  width: 100%;
  height: auto;
  overflow-x: hidden;
}
.boatfloat img {
  float: right;
  width: 100vw;
}

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

.mobileshow {
  display: none;
}
/*.mobilehide {
    display: none;
  }*/

/* VIDEO POPUP */
.video-button {
  cursor: pointer;
}

.video-overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-overlay-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #39407d;
  opacity: 0.6;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
}

.video-overlay-content {
  width: 80%;
  height: 80%;
  background-color: white;
  position: relative;
  z-index: 11000;
  border-radius: 3px;
  overflow: hidden;
}

.video-overlay-close {
  background-image: url("../img/ui/close-icon.svg");
  width: 57px;
  height: 57px;
  background-color: #fdef72;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  border-radius: 1000px;
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}

.video-overlay-close:hover {
  background-color: white;
}

.video-overlay-gallery {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 25px;
  padding-right: 25px;
  flex-wrap: wrap;
}

.video-thumb {
  width: calc(50% - 10px);
  cursor: pointer;
  margin-right: 10px;
}

.video-img {
  width: 100%;
  height: 305px;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 30vh;
}

.play-icon {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  width: 58px;
  height: 58px;
  background-image: url("../img/ui/play-icon.svg");
}

.video-thumb:hover .play-icon {
  background-image: url("../img/ui/play-icon-hover.svg");
}

.video-1 {
  background-image: url("../img/content/home/vid-1.jpg");
}

.video-2 {
  background-image: url("../img/content/home/vid-2.jpg");
}
.video-3 {
  background-image: url("../img/content/home/vid-3.jpg");
}
.video-4 {
  background-image: url("../img/content/home/vid-4.jpg");
}
.video-5 {
  background-image: url("../img/content/home/vid-5.jpg");
}

.video-label {
  font-size: 12px;
  margin-top: 10px;
}

.video-overlay-player {
  width: 100%;
  height: 100%;
  background-color: #000;
  position: relative;
}

.video-overlay-back {
  font-size: 14px;
  background-color: rgba(253, 239, 114, 0.95);
  padding-top: 9px;
  padding-bottom: 10px;
  padding-left: 14px;
  padding-right: 14px;
  position: absolute;
  top: 25px;
  left: 25px;
  border-radius: 100px;
  cursor: pointer;
}

.video-overlay-back:hover {
  background-color: white;
}

.video,
.video-full {
  width: 100%;
  height: 100%;
}

.video-button, .buttonlink {
  background-color: #fdef72;
  color: #3a417e;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 16px;
  padding-right: 16px;
  border-radius: 20px;
  font-size: 15px;
  line-height: 1.2em;
  /*top: 20px;*/
  margin-top:20px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: inline-block;
  font-family: "BrownLLWeb-Bold";
  letter-spacing: 0.1em;
  transition:color 0.2s, background 0.2s;
  /*display:block;margin-bottom:10px;width:230px;*/
}

.buttonlink.pinkbg {background-color:#EE759B;color:#fff}
.buttonlink.greenbg {background-color:#00B67B;color:#fff}
.buttonlink.orangebg {background-color:#EA5923;color:#fff}
.buttonlink.pinkbg:hover {background-color:#fff;color:#EE759B}
.buttonlink.greenbg:hover {background-color:#fff;color:#00B67B}
.buttonlink.orangebg:hover {background-color:#fff;color:#EA5923}

.video-button:hover {
  background-color: rgba(57, 64, 125, 0.8);
  color: rgba(253, 239, 114, 0.95);
}

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

/* biggerest desktop */
@media only screen and (max-width: 1620px) {
  /*.contactpage {flex-direction:column}
		.professional {display:flex;}
		.professionaltop {flex:0 0 45%}*/
}

/* biggest desktop */
@media only screen and (max-width: 1480px) {
  .allnews .newsitem .newstitle {
    font-size: 14px;
  }
}

/* bigger desktop */
@media only screen and (max-width: 1229px) {
  h1,
  .nav a {
    font-size: 36px;
    line-height: 1.3em;
  }
  h2 {
    font-size: 24px;
    line-height: 1.3em;
  }
  h3,
  .featurednews .newstitle,
  .allnews .newsitem:first-child .newstitle,
  .allnews .newsitem:nth-child(2) .newstitle,
  .nextpage,
  .navdownloads .opendownloads {
    font-size: 20px;
    line-height: 1.3em;
  }
  h4 {
    font-size: 14px;
    line-height: 1.3em;
  }
  .north {
    top: 20px;
    right: 20px;
    width: 20px;
    height: 20px;
  }
  
  .fivespec .specitem {
    flex:0 0 25%;
  }
  .awardwinners {width:120px;height:120px;top:20px;right:20px}
  
  .materialscarousel .slide, .materialscarousel .slideinner {width:45vw}
  .locationmap .mapcategories {min-width:340px}
}

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 1099px) {
  .allnews .newsitem {
    flex-basis: 20vw;
  }
  .contactpage {
    padding: 100px 0;
  }

  .agents {
    flex-wrap: wrap;
    padding-left: 0;
  }
  .agent p {
    font-size: 12px;
    line-height: 1.8em;
  }
  
  
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
  body {
    font-size: 14px;
    line-height: 18px;
  }

  h1,
  .nav a {
    font-size: 28px;
    line-height: 1.3em;
  }
  h2 {
    font-size: 20px;
    line-height: 1.3em;
  }
  h3,
  .featurednews .newstitle,
  .allnews .newsitem:first-child .newstitle,
  .allnews .newsitem:nth-child(2) .newstitle,
  .nextpage,
  .navdownloads .opendownloads {
    font-size: 18px;
    line-height: 1.3em;
  }
  h4 {
    font-size: 14px;
    line-height: 1.3em;
  }

  
  
  .video-button, .buttonlink {font-size:13px;padding:8px}
  .buttonlink.caps {letter-spacing: 0;}
  
  /**** home ****/
  .homeintro .introtext h1 {font-size:7vh}
  .portraitgallery, .portraitgallery .pic {
    height: 50vh;
  }


  /**** building ****/
  .buildingintro {
    flex-direction: column;
    background: #fff;
  }
  
  .buildingintro .text {
    min-height: auto;
    padding: 15vh 5vw;
    box-sizing: border-box;
    border: 0;
    width:100%;
  }
  .buildingintro .pic {
    width: 90%;
    flex: 0 0 50vh;
    margin-left: 10%;
    margin-top: -10vh;
  }
  
  .plantgirlbg {background-position:right 0 bottom 10vh;background-size:40vw auto}
  .yogagirlbg {background-position:right 0 bottom 10.5vh;background-size:auto 22vh}
  
  .bannergallery, .bannergallery .pic {width:90vw;height:50vh}
  .bannergallery .pic {margin:0 !important}
  
  .speclist .icon {width:12vw;height:12vw}
  
  .twospec .specitem {flex:0 0 100%}
  
  .fourspec .specitem, .fivespec .specitem {flex:0 0 33.333333%}
  
  .awardwinners {width:100px;height:100px;top:10px;right:10px}
  
  .materialscarousel .slide, .materialscarousel .slideinner {width:65vw}

  /**** availability ****/
  .floorinner {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-bottom:10vh;
    box-sizing: border-box;
  }
  .key {display:flex;flex-direction: row;flex-wrap: wrap;}
  .keyitem {border:none;box-sizing: border-box;padding-right:40px;}
  .floorinner .key .text {flex:1 1;font-size:12px}
  .north {right:20px;left:auto}
  
  .floorinner .pic {
    width: 100%;
    flex:0 0 50vh
  }

  /**** location ****/
  
  .locationgallery2holder {
    top: 50vh;
  }
  .locationgallery2,
  .locationgallery2 .pic {
    height: 30vh;
  }
  
  .streetfood .van {width:100%}
  
  .locationmap .mapcategories {top:0;left:0}

  /**** news ****/
  .newshomebody {
    flex-direction: column;
  }
  .featurednews .text {
    margin-left: 6vw;
    width: 60vw;
  }
  .allnews .newsitem:first-child,
  .allnews .newsitem:nth-child(2) {
    flex-basis: calc(80vw + 20px);
  }
  .allnews .newsitem:first-child .pic,
  .allnews .newsitem:nth-child(2) .pic {
    flex-basis: 40vw;
    height: 30vw;
  }
  .allnews .newsitem:first-child .text,
  .allnews .newsitem:nth-child(2) .text {
    flex-basis: 40vw;
  }
  .allnews .newsdate {
    font-size: 10px;
  }
  .allnews .newsitem .newstitle {
    font-size: 12px;
  }
  .igheading {
    background: none;
  }
  .newsletter,
  .igfeed {
    padding: 6vw;
  }
  .instabackup {
    margin-left: -1vw;
    flex-direction: row;
    flex-wrap: wrap;
    width: 88vw;
  }
  .instabackup a {
    flex-basis: 42vw;
    height: 42vw;
  }

  /**** contact ****/
  /*.agents {padding-left:20px}*/
  .agentcontacts {
    flex-wrap: wrap;
  }
  .agent {
    flex-basis: 45%;
    margin-right: 20px;
  }

  .middleprof {
    flex-direction: column;
  }

  .midcapproject .pic {
    height: 20vw;
  }

  .professional,
  .middlecap {
    padding-left: 20px;
  }

  .video-overlay-content {
    width: 90%;
    height: 90%;
  }

  .video-overlay-gallery {
    flex-direction: column;
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .video-thumb {
    width: 100%;
    height: 19%;
  }
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {

  .mobileshow {display:unset}
  .mobilehide {display:none}
  
  .paddingsection {padding:10vw 0}
  
  h1 {
    font-size: 24px;
    line-height: 1.3em;
  }

  /**** nav ****/
  .navbutton {
    right: 10px;
  }
  .navholder .socbuttons {
    right: 10px;
  }

  /**** footer ****/
  .footer {
    padding: 20px 0;
  }
  .footerright {
    text-align: left;
    padding-top: 40px;
  }

  /**** intro ****/
  .homeintro {
    flex-direction: column;
    /*padding-top: 100px;*/
    /*min-height: auto;*/
  }
  .homeintro .introtext {
    position: relative;
    
    width: 90vw;
    padding: 5vw;
  }
  .yellowbox {
    flex-direction: column;
  }
  .yellowbox.firstbox {
    margin-top: 20px;
    width: 90%;
  }
  .yellowbox .halfcol {
    width: calc(100% - 5vw);
  }
  .yoga {
    flex-direction: column;
    align-items: flex-start;
  }
  .yellowbox.secondbox {
    width: 90%;
  }
  .yogagirl {
    position: relative;
    height: 70vh;
    background-size: auto 100%;
  }
  .heart {
    height: auto;
    flex-direction: column;
  }
  .heart .pic {
    position: relative;
    height: 50vh;
  }
  .slick-dots {
    bottom: 20px;
    left: 20px;
  }
  
  .bridgebg {padding-bottom:20vh;background-size:auto 18vh;background-position:bottom center}
  
  .homegallery, .buildinggallery, .spacegallery, .homegallery .pic,
.buildinggallery .pic,
.spacegallery .pic {height:50vh}

.homefoot .yellowbox {margin-top:-5vh;padding:5vw}
.goodpoints {flex-direction:column}
.goodpoints .thirdcol {width:100%;box-sizing: border-box;border-right:none;border-bottom:1px solid #51191A;padding-bottom:20px}
.goodpoints .thirdcol:last-child {padding-bottom:0}

  /**** building ****/
  .buildingintro .text {padding-bottom:25vh}
  .plantgirlbg {background-position:right 0 bottom 10vh;background-size:auto 15vh}
  .yogagirlbg {background-position:right 0 bottom 10.5vh;background-size:auto 22vh}
  
  .speclist {justify-content: center;}
  .twospec .specitem,
  .fourspec .specitem,
  .fivespec .specitem {flex:0 0 50%;padding:0 15px}
  
  .communal {padding:40vh 0 20vh 0}
  .heart {height:35vh;width:100vw}
  .people {height:21vh;width:75vw;right:10vw}
  
  .speclist .icon {width:120px;height:120px}
  
  .bikebg {padding-bottom:120px}
  .bikeholder {height:100px}
  
  .materialscarousel {width:100vw;margin-left:0}
  .materialscarousel .slide, .materialscarousel .slideinner {width:85vw}
  .materialscarousel .slide {margin:0 10px}
  .materialscarousel .slideinner {margin:0}
  
  
  .cyclebg:before {
    background: #fff;
  }
  .cyclebg .pic {
    display: none;
  }
  .cyclebg h2 {
    position: relative;
    top: 0;
    margin-left: 5vw;
  }
  .cyclebg .text p {
    font-size: 14px;
    line-height: 18px;
  }
  .bikeitems {
    width: 90vw;
    padding: 2.5vw;
  }
  .bikeitem {
    margin: 2.5vw;
    flex: 0 0 calc(50% - 5vw);
  }
  .bikeitem .icon {
    width: 60px;
    height: 60px;
  }

  .awards {
    flex-wrap: wrap;
    height: auto;
  }
  .awards .award {
    flex: 0 0 40%;
    height: 100px;
  }

  .flex1 {
    flex-direction: column;
  }
  .flex1 .pic {
    width: 90vw;
    margin: 5vw;
    height: 40vh;
    top: 0;
  }
  .flex2 {
    width: 90vw;
    margin: 5vw;
  }
  
  /**** sustainability ****/
  .yogapeoplebg {padding-bottom:20vh;background-size:auto 18vh}

  /**** availability ****/
  .availabletable {
    font-size: 11px;
  }
  .availabletable td {
    padding: 5px 2px;
  }

  .floorinner .pic {
    height: 40vh;
    max-height: none;
  }

  .plans .elevation {
    display: none;
  }

  /**** location ****/
  .locationintro .blackbox .text {
    float: none;
    width: 100%;
    height: auto;
    padding-top: 100px;
  }
  
  .locationgallery2holder {
    position: relative;
    top: 0;
    margin-left: 40vw;
  }
  .locationgallery2holder,
  .locationgallery2,
  .locationgallery2 .pic {
    width: 60vw;
    height: 70vh;
  }
  
  .allnews .newsitem {
    flex-basis: 42.5vw;
    margin-right: 2.5vw;
  }
  
  .locationmap {display:flex;flex-direction: column;}
  .locationmap .mapcategories, .locationmap .mapholder {position:relative}
  .locationmap .mapcategories {width:100%}
  .amenitylist {box-sizing: border-box;}
  .amenitylist h4 {font-size:16px;line-height:1em;padding:6px}
  .amenitylist h4::after {top:2px}
  .amenitylist ul li {font-size:12px}
  
  .middlecontainer {flex-direction: column;}
  .middlecontainer .five {margin-top:20px}
  
  

  /**** news ****/
  .featurednews {
    height: 60vh;
  }
  .featurednews .text {
    margin: 5vw;
    width: 90vw;
    padding-top: 200px;
  }

  .newshomebody {
    flex-direction: column;
  }
  .allnews {
    padding: 5vw;
    width: 90vw;
  }

  .allnews .newsitem:first-child,
  .allnews .newsitem:nth-child(2) {
    flex-basis: 100%;
    margin: 0 0 40px 0;
    width: 100%;
    flex-direction: column;
    width:100%;
    height:auto;
  }
  .allnews .newsitem:first-child .pic,
  .allnews .newsitem:nth-child(2) .pic {
    flex: 0 0 60vw;
    width: 100%;
    margin: 0 0 10px 0;
    height: 40vw;
  }
  .allnews .newsitem:first-child .text,
  .allnews .newsitem:nth-child(2) .text {
    height: auto;
    flex:1 1
  }

  /*.instabackup {flex-direction:row}
	.instabackup a {height:20vw}*/

  /**** contact ****/
  .agents {
    padding-left: 0;
    margin-bottom: 20px;
  }
  .contactsoc {
    flex-direction: row;
    justify-content: flex-start;
    float: none;
  }
  .contactsoc a {
    margin: 0 20px 0 0;
  }
  .video-overlay-content {
    width: 95%;
    height: 95vh;
  }
  .video-overlay-gallery {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
  }
  .video-img {
    height: 80%;
  }
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
  /**** nav ****/
}

/* 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: "CircularXXWeb-Regular";
  src: url("/fonts/CircularXXWeb-Regular.woff") format("woff");
}

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

@font-face {
	    font-family: 'Noe Display Bold';
	    src: url('/fonts/Noe Display Bold.eot');
	    src: url('/fonts/Noe Display Bold.eot?iefix') format('eot'),
	         url('/fonts/Noe Display Bold.woff') format('woff');
	    font-weight: normal;
	    font-style: normal; }*/

@font-face {
  font-family: "BrownLLWeb-Regular";
  src: url("/fonts/BrownLLWeb-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "BrownLLWeb-Regular";
  src: url("/fonts/BrownLLWeb-Regular.woff") format("woff");
}

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

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