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

.whitetext {
  color: #fff;
}

.resizeimg {
  max-width: 100%;
  height: auto;
}
.pic {
  background: 50% 50% no-repeat;
  background-size: cover;
}

.mob {
  display: none;
}

.wholepage {
  width: 100%;
  position: relative;
}
.header {
  position: relative;
  box-sizing: border-box;
  padding: 2.5vw;
  overflow: hidden;
  color: #fff;
  height: 70vh;
}

.navholder {
  position: absolute;
  top: 0;
  right: 0;
  box-sizing: border-box;
  padding: 2.5vw;
  display: flex;
  justify-content: flex-end;
  z-index: 1000;
  width: 50%;
}

.headercontent {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.headercontent p {
  max-width: 380px;
}
.navlogo {
  width: 220px;
  height: 65px;
  background: top left no-repeat url(/img/content/navlogo.svg);
  background-size: contain;
}
.headercontent img {
  width: 100%;
  height: auto;
}

.pageintro {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pageintro p {
  font-size: 20px;
}

.light {
  font-weight: 300;
}
.xlight {
  font-weight: 200;
}
.med {
  font-weight: 500;
}

/**** nav ****/

.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.nav li {
  margin: 0 0 0 2.5vw;
  padding: 0;
}
.nav a {
  text-decoration: none;
  color: #fff;
}
.nav a:hover {
  text-decoration: underline;
}

.s0 .nav .n0 {
  color: #cbe29c;
}
.s1 .nav .n1 {
  color: #cbe29c;
}
.s2 .nav .n2 {
  color: #bda08d;
}
.s3 .nav .n3 {
  color: #aebed7;
}

.pagesection {
  position: relative;
}
.bordersection {
  border-bottom: 1px solid #3a5551;
  padding: 0 2.5vw;
}
.innerborder {
  border-left: 1px solid #3a5551;
  border-right: 1px solid #3a5551;
}
.pageend {
  border: none;
}
.pageend .innerborder,
.pagestart .innerborder {
  height: 2.5vw;
}

h1 {
  font-size: 4vw;
  line-height: 1.2em;
}
h2 {
  font-size: 3vw;
  line-height: 1.2em;
}
h3 {
  font-weight: normal;
}

.outlinetext {
  color: #fff;
  text-shadow:
    -1px -1px 0 #3a5551,
    1px -1px 0 #3a5551,
    -1px 1px 0 #3a5551,
    1px 1px 0 #3a5551;
}

.greentext {
  color: #cbe29c;
}
.tantext {
  color: #bda08d;
}
.bluetext {
  color: #aebed7;
}
.darktext {
  color: #3a5551;
}

.lightgreenbg {
  background: #f1f5f1;
}

.greenbg {
  background: #cbe29c;
}
.lighttanbg {
  background: #fff3ea;
}
.tanbg {
  background: #bda08d;
}

.bigtext {
  font-size: 5vw;
  line-height: 1.2em;
}
.bigtext span {
  display: block;
}
.bigtext .indent {
  padding-left: 1em;
}
.bigtext .bigindent {
  padding-left: 3em;
}

/**** footer ****/
.footer {
  background: url(/img/content/bgs/texture1.jpg) 50% 50% repeat-y;
  background-size: cover;
  color: #f1f5f1;
}
.footer a {
  color: #f1f5f1;
}
.s3 .footer p {
  color: #fff;
}
.footerlogo {
  padding: 2.5vw;
  border-bottom: 1px solid #f1f5f1;
}
.footerlogo img {
  width: 100%;
}
.contactrow {
  border-bottom: 1px solid #f1f5f1;
  padding: 0 2.5vw;
  display: flex;
  align-items: stretch;
}
.contactleft {
  flex: 0 0 60%;
  border-left: 1px solid #f1f5f1;
  padding: 2.5vw 4vw;
  box-sizing: border-box;
}
.contactright {
  flex: 0 0 40%;
  border-left: 1px solid #f1f5f1;
  border-right: 1px solid #f1f5f1;
  padding: 2.5vw 4vw;
  box-sizing: border-box;
}
.agents {
  display: flex;
}
.contact p {
  margin-bottom: 32px;
}
.agency {
  flex: 1 1 50%;
  box-sizing: border-box;
  padding-right: 30px;
}
.agentlogo {
  display: block;
  height: 64px;
  width: 168px;
  background: left center no-repeat;
  background-size: contain;
  margin-bottom: 32px;
}
.endrow {
  border: none;
}
.endrow .contactleft,
.endrow .contactright {
  padding: 0;
  height: 2.5vw;
}
.misrep {
  padding-top: 5vw;
  font-size: 11px;
  line-height: 13px;
}

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

/**** home ****/

.s0 .header {
  background-image: url(/img/content/bgs/texture1.jpg);
  height: 32vw;
}
.homeintro {
  background: url(/img/content/bgs/obg.svg) fixed top 50% left 65vw no-repeat;
  background-size: 45vw auto;
}
.homeintro .innerborder {
  padding: 4vw;
}
.homeintro h1 {
  margin: 0;
}
.homeintro span {
  display: inline-block;
}

.linkhead {
  width: 100%;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 50;
  padding: 0 2.5vw;
  background: #fff;
}
.linkheadinner {
  padding: 2vw 4vw;
  font-size: 20px;
  line-height: 20px;
  display: flex;
  justify-content: space-between;
  border-right: 1px solid #3a5551;
  border-left: 1px solid #3a5551;
  transition: background-color 0.5s;
  box-sizing: border-box;
}

.linkhead[rel="retail"] {
  top: calc(4vw + 20px);
  z-index: 49;
}
.linkhead[rel="location"] {
  top: calc(8vw + 40px);
  z-index: 48;
}

.homelink {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #3a5551;
  transition: background 0.5s;
}

/*.homelink:hover {
  background: #CBE29C;
}*/

.linkbody {
  padding: 0 2.5vw;
  box-sizing: border-box;
  display: block;
  text-decoration: none;
  color: #3a5551;
  border-bottom: 1px solid #3a5551;
}

.linkbodyinner {
  height: 24vw;
  display: flex;
  padding: 0 0 0 4vw;
  box-sizing: border-box;
  border-right: 1px solid #3a5551;
  border-left: 1px solid #3a5551;
  transition: background 0.5s;
}
.linkhead.is-sticky {
  border-bottom: 1px solid #3a5551;
}
.linkhead.is-sticky .linkheadinner {
  background-image: url(/img/ui/arrow-right-solid-darkgreen.svg);
  background-repeat: no-repeat;
  background-position: top 50% right 2.5vw;
  background-size: auto 40%;
}

.linkbody .text {
  padding-right: 15vw;
  flex: 1 1;
  font-weight: 200;
  font-size: 2vw;
  line-height: 1.3em;
}

.linkbody .pic {
  height: 100%;
  flex: 0 0 47.5vw;
  background-size: 100% auto;
  transition: background 2s;
  position:relative
}

.linkarrow {
  width: 36px;
  height: 53px;
  background: url(/img/ui/arrow-right-solid-darkgreen.svg) 50% 50% no-repeat;
  background-size: contain;
  margin-top: 20px;
}
.highlight .lightgreenbg {
  background-color: #cbe29c;
}
.highlight .pic {
  background-size: 110% auto;
}

/**** office ****/
.s1 .header {
  background-image: url(/img/content/bgs/texture1.jpg);
  overflow: hidden;
}
.s1 .headerbg2 {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: url(/img/content/bgs/obgdark.svg) fixed top 0vh left 65vw no-repeat;
  background-size: 45vw auto;
}

.buildingsection {
  position: relative;
}
.pagenav {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 500;
}
.pagenav .innerborder {
  display: flex;
}
.pagenav a {
  box-sizing: border-box;
  flex: 0 0 25%;
  text-align: center;
  line-height: 0.8em;
  padding: 2vw 0;
  border-right: 1px solid #3a5551;
  color: #3a5551;
  text-decoration: none;
  cursor: pointer;
}
.pagenav a:hover {
  text-decoration: underline;
}
.pagenav a:last-child {
  border-right: none;
}

.gallerybanner {
  height: 80vh;
  width: 100%;
}
.gallerybanner .slide {
  height: 80vh;
  width: 100%;
  position:relative
}
.pic .caption {margin:0;position:absolute;bottom:20px;right:20px}
.slidecontrols {
  display: flex;
  justify-content: space-between;
  padding: 2vw 4vw;
}
.slide-arrow,
.slick-arrow {
  flex: 0 0 53px;
  height: 36px;
  background: 50% 50% no-repeat;
  background-size: contain;
  cursor: pointer;
}
.slick-arrow {
  border: none;
  overflow: hidden;
  text-indent: -9999px;
  background-color: #fff;
  width: 73px;
  height: 56px;
  background-size: 53px auto;
  z-index: 900;
}
.slick-prev {
  background-image: url(/img/ui/arrow-left-solid-tan.svg);
}
.slick-next {
  background-image: url(/img/ui/arrow-right-solid-tan.svg);
}
.slide-arrow.arrow-green.slide-prev {
  background-image: url(/img/ui/arrow-left-solid-green.svg);
}
.slide-arrow.arrow-green.slide-next {
  background-image: url(/img/ui/arrow-right-solid-green.svg);
}
.slide-arrow.arrow-tan.slide-prev {
  background-image: url(/img/ui/arrow-left-solid-tan.svg);
}
.slide-arrow.arrow-tan.slide-next {
  background-image: url(/img/ui/arrow-right-solid-tan.svg);
}

.twocols {
  display: flex;
}
.twocols .col {
  flex: 0 0 50%;
  box-sizing: border-box;
  padding: 4vw;
}
.twocols .piccol {
  padding: 0;
}
.twocols .pic {
  width: 100%;
  height: 30vw;
}
.twocols .col.midcol {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.spec {
  display: flex;
  flex-wrap: wrap;
}
.specitem {
  flex: 1 1;
  flex-basis: calc(100% / 6);
  text-align: center;
  border-right: 1px solid #3a5551;
  border-top: 1px solid #3a5551;
  box-sizing: border-box;
}
.spec .specitem:last-child,
.spec .specitem:nth-child(6),
.spec .specitem:nth-child(12) {
  border-right: none;
}
.specitem .iconholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 12vw;
  border-bottom: 1px solid #3a5551;
  overflow: hidden;
}
.specitem .icon {
  background: 50% 50% no-repeat;
  background-size: contain;
  width: 100%;
  height: 12vw;
  height: 50%;
}
.specitem .text {
  padding: 10px 20px 30px 20px;
}

.availability {
  padding: 6vw;
}
.availabletable {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 6vw;
}
.floor {
  display: flex;
  width: 100%;
  align-items: center;
  flex-wrap: wrap;
  flex: 1 1;
}
.s1 .floor {
  background: #cbe29c;
}
.floor:hover .floorcell {
  text-decoration: underline;
}
.floor.let {
  background: #fff;
}
.floor.let {
  pointer-events: none;
  color: rgba(58, 85, 81, 0.5);
}
.floorcell {
  box-sizing: border-box;
  padding: 20px;
  position: relative;
  height: 80px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.floorcell.num {
  justify-content: flex-end;
}
.floorcell.floorname {
  padding-left: 40px;
  flex: 0 0 30%;
}
.floorcell.sqft,
.floorcell.sqm {
  flex: 0 0 15%;
}
.floorcell.flooravailable {
  padding-right: 40px;
  flex: 0 0 40%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.floorcell img {
  margin-left: 20px;
}
.floorname:before {
  content: "";
  display: block;
  background: url(/img/ui/expand.svg) 50% 50% no-repeat;
  background-size: contain;
  width: 12px;
  height: 13px;
  transform-origin: 50% 50%;
  position: absolute;
  top: 32px;
  left: 16px;
  transition: transform 0.2s;
}
.let .floorname:before {
  display: none;
}
.active .floorname:before {
  transform: rotate(90deg);
}

.planhide {
  width: 100%;
  height: 0;
  overflow: hidden;
  transition: height 0.5s;
}
.active .planhide {
  height: 60vh;
}
.plansection {
  height: 60vh;
  display: flex;
  background: #fff;
  width: 100%;
}
.planbuttons {
  flex: 0 0 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding: 4vw;
}
.planbuttons a {
  font-size: 24px;
  line-height: 1.3em;
  margin: 5px 0;
  padding-left: 40px;
  text-decoration: underline;
  cursor: pointer;
}
.planbuttons a:hover {
  text-decoration: none;
}
.twod a[rel="twod"],
.threed a[rel="threed"],
.threed2 a[rel="threed2"] {
  background: left center no-repeat url(/img/ui/arrow-right-solid-green.svg);
  background-size: 25px auto;
}
.planholder {
  flex: 0 0 70%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plan {
  flex: 0 0 90%;
  height: 90%;
  background: right center no-repeat;
  background-size: contain;
}

.sixth .twod .plan {
  background-image: url(/img/content/office/plans/6.png);
}
.fifth .twod .plan {
  background-image: url(/img/content/office/plans/5.png);
}
.third .twod .plan {
  background-image: url(/img/content/office/plans/3.png);
}

.sixth .threed .plan {
  background-image: url(/img/content/office/plans/6-3d.jpg);
}
.fifth .threed .plan {
  background-image: url(/img/content/office/plans/5-3d.jpg);
}
.fifth .threed2 .plan {
  background-image: url(/img/content/office/plans/5-3d2.jpg);
}
.third .threed .plan {
  background-image: url(/img/content/office/plans/3-3d.jpg);
}

.ground .plan {
  background-image: url(/img/content/retail/plans/G.png);
}

.spacer {
  padding: 0 2.5vw;
}

.bestClass {
  padding: 6vw 0;
  .text {
    font-size: 3.5vw;
    line-height: 1.3em;
    @media screen and (max-width: 1024px) {
      font-size: 32px;
    }
  }
  .titles {
    padding: 0 0 0 6vw;
  }
  .image-wrapper {
    width: 100%;
    display: flex;
    gap: 32px;
    margin-top: -160px;
    align-items: flex-end;
    @media screen and (max-width: 1024px) {
      margin-top: -60px;
      padding-top: 40px;
    }
    .image-one {
      width: 65%;
      height: 50%;
      aspect-ratio: 16/9;
      background-size: cover;
    }
    .image-two {
      width: 35%;
      aspect-ratio: 4/6;
      background: url("/img/content/office/2.png") center center no-repeat;
      background-size: cover;
    }
  }
  .best-gallery-wrappers {
    display: flex;
    gap: 32px;
    align-items: center;
    @media screen and (max-width: 1024px) {
      flex-direction: column;
      gap: 0;
    }

    .carousel-wrapper {
      width: 60%;
      @media screen and (max-width: 1024px) {
        width: 100%;
      }
    }
    .carousel-wrapper-2 {
      width: 60%;
      @media screen and (max-width: 1024px) {
        width: 100%;
      }
    }
    .copy-block {
      width: 40%;
      display: flex;
      justify-content: center;
      @media screen and (max-width: 1024px) {
        width: 100%;
      }
      .sm-text {
        max-width: 400px;
        font-size: 20px;
        line-height: 1.5em;
        @media screen and (max-width: 1024px) {
          font-size: 16px;
          padding-top: 20px;
        }
      }
    }
    .interior-image {
      width: 40%;
      background-size: cover;
      aspect-ratio: 16/9;
      @media screen and (max-width: 1024px) {
        width: 100%;
        aspect-ratio: 4/3;
      }
    }
  }
}

.caro-title {
  font-size: 24px;
  line-height: 1.2em;
  text-align: center;
  margin: 0;

  @media screen and (max-width: 1024px) {
    font-size: 18px;
  }
}
.smart-sustainable {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 0px 120px;

  gap: 40px;
  .smart-title {
    font-size: 32px;
    line-height: 80px;
  }
  .lgGreenBox {
    width: 80%;
    background: #f2f9e7;
    background-size: contain;
    display: flex;
    border: 1px solid #3a5551;
    @media screen and (max-width: 1024px) {
      flex-direction: row;
      flex-wrap: wrap;
    }
    .specitem {
      border: none;
    }
    .iconholder {
      border: none;
    }
  }
}

/**** retail ****/
.s2 {
  color: #2e455f;
}
.s2 .header {
  background-image: url(/img/content/bgs/bluetexture1.jpg);
  overflow: hidden;
}
.s2 .headerbg2 {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: url(/img/content/bgs/mbg.svg) fixed top 150px left 40vw no-repeat;
  background-size: 65vw auto;
  mix-blend-mode: multiply;
}

.s2 .floor {
  background: #dfbca5;
}
.s2 .floor.let {
  background-color: #f7e5d9;
}
/*.s2 .planholder {
  flex: 0 0 100%;
}*/
.s2 .plan {
  background-position: 50% 50%;
}

.key {list-style-type: none;}
.key li {margin:0 0 10px 0;padding:0 0 0 24px;position:relative}
.key li:before {content:'';display:block;position:absolute;top:4px;left:0;width:16px;height:16px;box-sizing: border-box;border:1px solid #3e5066}
.key li.retail:before {background:#dfbca5}
.key li.office:before {background:#f2f9e7}

.retailspec .col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 0 0 60%;
  padding-right: 8vw;
}
.twocols .speccol {
  padding: 0;
  flex: 0 0 40%;
}
.retailspec .specitem {
  flex: 0 0 50%;
  border-right: none;
  border-left: 1px solid #2e455f;
}
.retailspec .specitem:nth-child(1),
.retailspec .specitem:nth-child(2) {
  border-top: none;
}

.s2 .specitem .iconholder,
.pagenav a,
.bordersection,
.innerborder,
.specitem {
  border-color: #2e455f;
}
.pagenav a {
  color: #2e455f;
}

/**** location ****/
.s3 {
  color: #6d6d37;
}
.s3 .header {
  background-image: url(/img/content/bgs/greentexture2.jpg);
  overflow: hidden;
}
.s3 .headerbg2 {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: url(/img/content/bgs/ssbg.svg) fixed top 150px left 40vw no-repeat;
  background-size: 65vw auto;
  mix-blend-mode: multiply;
}

#map,
#map_canvas {
  height: 80vh;
  width: 100%;
}

/* Style the custom marker image */
.sg-marker {
  background-image: url("/img/ui/mapmarker.svg");
  background-size: contain;
  width: 81px;
  height: 116px;
}

#list {
  width: 20vw;
  box-sizing: border-box;
  padding: 2vw;
  background: rgba(109, 109, 55, 0.75);
  position: absolute;
  top: 0;
  right: 2.5vw;
  color: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 500;
}

#list h2 {
  font-size: 18px;
  margin-bottom: 10px;
  font-weight: 400;
}

#list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  padding: 0.3vh 0px;
  cursor: pointer;
  transition: background 0.2s;
  margin-left: 0;
}

li:hover {
  text-decoration: underline;
  color: #cbe29c;
}

li.active {
  text-decoration: underline;
  color: #cbe29c;
}

/* Marker styling */
.custom-marker {
  width: 35px;
  height: 35px;
  background-color: #6d6d37;
  border-radius: 50%;
  color: white;
  font-weight: bold;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition:
    transform 0.15s ease,
    background 0.2s;
}

.custom-marker:hover {
  transform: scale(1.15);
}

.custom-marker.active {
  background-color: #bda08d;
  transform: scale(1.25);
}

.traveltabs {
  display: flex;
}
.traveltabs a {
  display: flex;
  flex: 0 0;
  flex-basis: calc(100% / 3);
  align-items: center;
  justify-content: center;
  border-right: 1px solid #3a5551;
  cursor: pointer;
}
.traveltabs a:last-child {
  border: none;
}
.traveltabs a.active {
  background: #ebeff5;
}
.traveltabs a:hover {
  text-decoration: none;
}
.traveltabs img {
  width: 5vw;
  height: auto;
  margin: 2vw 4vw 2vw 2vw;
}

.traveltimes {
  display: flex;
  padding: 4vw 8vw;
  background: #ebeff5;
}
.traveltable {
  display: flex;
  flex-direction: column;
  flex: 0 0 50%;
  padding: 0 20px;
  box-sizing: border-box;
}
.travelrow {
  display: flex;
  border-bottom: 1px solid #6d6d37;
  padding: 16px 0;
}
.travelcol1 {
  color: #3a5551;
  flex: 1 1 80%;
}
.travelcol2 {
  text-align: right;
  flex: 1 1 20%;
  white-space: nowrap;
}

.travelcontent .traveltimes {
  display: none; /* hide all by default */
}

.travelcontent .traveltimes.active {
  display: flex; /* show the active set */
}

.locationinfo {
  padding: 2vw 0;
}
.locationinfo .twocols {
  padding: 2vw 0;
}

.vicinity h3 {
  padding: 2.5vw 4vw;
  margin: 0;
}

.slickheader {
  display: flex;
  justify-content: space-between;
}
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.carousel-controls .slick-arrow {
  margin-right: 20px;
}

.carousel-container {
  width: 100%;
  overflow: hidden;
}

.slick-carousel {
  display: flex;
  align-items: center;
  margin-bottom: 4vw;
}

.slick-slide {
  margin: 0 10px; /* 10px margin either side */
  width: 28vw; /* slide width */
  box-sizing: border-box;
}

.slick-carousel .slide {
  background-color: #ebeff5; /* example background */
  height: 35vw; /* example height */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.slide .text p {
  margin: 0;
}
.slide .text {
  padding: 2.5vw;
  width: 100%;
  flex: 1 1;
  box-sizing: border-box;
  font-size: 14px;
}
.vicinityrow {
  display: flex;
  justify-content: space-between;
  border-bottom: #6d6d37 1px solid;
  margin-bottom: 1.5vw;
  padding-bottom: 1vw;
}
.slide .pic {
  flex: 0 0 70%;
  width: 100%;
}

/****************************************************
* Misc
****************************/
/*hide social stuff and headings on prettyphoto*/

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

.superscript {
  vertical-align: baseline;
  font-size: 0.8em;
  position: relative;
  top: -0.4em;
}
.subscript {
  vertical-align: baseline;
  font-size: 0.8em;
  position: relative;
  top: 0.4em;
}

.vmiddle {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

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

.revealOnScroll.fadeInUp {
  opacity: 0;
}

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

/* biggest desktop */
@media only screen and (max-width: 1230px) {
}

/* bigger desktop */
@media only screen and (max-width: 1229px) {
}

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 1099px) {
  body {
    font-size: 14px;
    line-height: 1.6em;
  }
  .navholder {
    width: 75%;
  }
  .s0 .header {
    height: 40vw;
  }

  /**** office ****/
  .specitem {
    flex: 0 0 25%;
  }
  .spec .specitem:last-child,
  .spec .specitem:nth-child(6),
  .spec .specitem:nth-child(12) {
    border-right: 1px solid #3a5551;
  }
  .spec .specitem:last-child,
  .spec .specitem:nth-child(4),
  .spec .specitem:nth-child(8),
  .spec .specitem:nth-child(12),
  .spec .specitem:nth-child(16) {
    border-right: none;
  }
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
  .s0 .header {
    height: 40vh;
  }
  .s0 .header .headercontent {
    justify-content: flex-end;
  }
  .s0 .header .headercontent p {
    margin-bottom: 40px;
  }
  .homelink .linkhead {
    padding: 4vw;
  }
  .homelink .linkbody {
    height: 20vh;
  }

  .agents {
    flex-direction: column;
  }
  .agentlogo {
    height: 40px;
    width: 120px;
  }

  .header {
    height: 50vh;
  }
  .s1 .header::before {
    background-position: top 25% left 65vw;
  }
  .pagenav a {
    font-size: 12px;
    line-height: 1.2em;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .gallerybanner,
  .gallerybanner .slide {
    height: 50vh;
  }
  .slide-arrow {
    flex: 0 0 40px;
  }
  .floorcell img {
    max-height: 20px;
    max-width: 100px;
  }
  .availability {
    font-size: 13px;
    line-height: 1.3em;
  }
  .floorcell {
    padding: 12px;
  }
  .floorcell.floorname {
    flex: 0 0 20%;
  }
  .floorcell.sqft,
  .floorcell.sqm {
    flex: 0 0 18%;
  }
  .floorcell.flooravailable {
    flex: 1 1;
    padding-right: 20px;
  }

  .active .planhide,
  .plansection {
    height: 50vh;
  }

  #map {
    height: 60vh;
  }
  #list {
    position: relative;
    right: auto;
    width: 100%;
  }
  #list ul {
    display: flex;
    flex-wrap: wrap;
  }
  #list ul li {
    box-sizing: border-box;
    flex: 1 1 33%;
    padding-right: 20px;
  }

  .vicinity h3 {
    padding: 4vw;
  }
  .slick-slide {
    width: 35vw;
  }
  .slick-carousel .slide {
    height: 50vw;
  }
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
  .s0 .header {
    height: 50vh;
  }
  h1 {
    font-size: 28px;
    line-height: 1.2em;
  }
  h2 {
    font-size: 24px;
    line-height: 1.2em;
  }
  .homeintro .innerborder {
    padding: 10vw 5vw;
  }

  .s0 .header .headercontent p {
    padding-right: 0px;
    box-sizing: border-box;
  }
  .linkhead {
    position: relative;
    top: 0 !important;
  }
  .linkhead.is-sticky,
  .linkhead.is-sticky .linkheadinner {
    border-bottom: 0;
    background-image: none;
  }
  .linkbody .text {
    font-size: 20px;
    line-height: 1.3em;
  }
  .linkheadinner {
    padding: 8vw 4vw;
  }
  .linkbodyinner {
    flex-direction: column;
  }
  .linkbody,
  .linkbodyinner {
    height: auto;
  }
  .linkbody .pic {
    margin-top: 5vw;
  }

  .contactrow {
    flex-direction: column;
  }
  .contactleft,
  .contactright {
    border-right: 1px solid #fff;
  }

  .header {
    padding: 10vw 5vw;
    height: 60vh;
  }
  .navlogo {
    height: 40px;
    width: 200px;
  }
  .pagenav .innerborder {
    height: 2.55vw;
  }
  .pagenav a {
    display: none;
  }

  .bigtext {
    font-size: 32px;
    line-height: 1.2em;
  }
  .twocols {
    flex-direction: column;
    padding: 4vw 0;
  }
  .twocols .col {
    padding: 8vw 6vw;
  }

  .specitem {
    flex: 0 0 50%;
  }
  .specitem .iconholder {
    height: 120px;
  }
  .specitem .text {
    font-size: 13px;
    line-height: 1.3em;
    padding: 10px 20px 20px 20px;
  }
  .spec .specitem:nth-child(even) {
    border-right: none;
  }

  .availability {
    padding: 0;
  }
  .availability .bigtext {
    padding: 12vw 6vw 6vw 6vw;
  }
  .availabletable {
    font-size: 12px;
  }
  .floorcell.floorname {
    padding-left: 20px;
  }
  .floorcell {
    padding: 4px;
  }
  .floorcell img {
    display: none;
  }
  .floorname::before {
    left: 3px;
    width: 10px;
  }
  .floorcell.sqft,
  .floorcell.sqm {
    white-space: nowrap;
  }
  .eighth.let .flooravailable:before {
    content: "Let to TransPerfect";
  }
  .seventh.let .flooravailable:before {
    content: "Let to Clarke Wilmott";
  }
  .fourth.let .flooravailable:before {
    content: "Let to Datalex";
  }
  .second.let .flooravailable:before {
    content: "Let to Ageas";
  }
  .first.let .flooravailable:before {
    content: "Let to Maxwell Bond";
  }
  .ground.let .flooravailable:before {
    content: "Let to Double Zero";
  }

  .plansection {
    flex-direction: column;
  }
  .plan {
    background-position: 50% 50%;
  }
  .active .planhide,
  .plansection {
    height: 120vw;
  }
  .planbuttons a {
    font-size: 16px;
  }

  .twocols .speccol {
    padding: 0;
    border-top: 1px solid #2e455f;
  }
  .twocols.retailspec {
    padding-bottom: 0;
  }
  .retailspec .specitem:nth-child(odd) {
    border-left: none;
  }

  .traveltabs {
    font-size: 12px;
  }
  .traveltabs img {
    display: none;
  }
  .traveltabs a {
    padding: 16px 0;
  }
  #list {
    padding: 5vw;
  }
  .travelcontent .traveltimes {
    flex-direction: column;
    padding-bottom: 8vw;
  }

  .twocols .pic {
    height: 40vh;
  }

  #list ul li {
    flex: 1 1 50%;
  }

  .vicinity h3 {
    padding: 8vw;
  }
  .carousel-controls {
    display: none;
  }
  .slick-slide {
    width: 80vw;
  }
  .slick-carousel .slide {
    height: 100vw;
  }
  .slick-carousel {
    margin-bottom: 8vw;
  }
  .slick-slide {
    margin: 0 5px;
  }

  /**** nav ****/
  .mob {
    display: block;
  }
  .navholder {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    padding: 0;
    transition: height 0.5s;
    overflow: hidden;
  }
  .menuopen .navholder {
    height: 100vh;
  }
  .nav {
    width: 100%;
    height: 100vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: url(/img/content/bgs/texture1.jpg) 50% 50% no-repeat;
    background-size: cover;
    font-size: 20px;
  }
  .nav li {
    padding: 15px;
  }

  .navbutton {
    display: block;
    position: fixed;
    width: 30px;
    height: 40px;
    padding: 5px 15px;
    top: 0px;
    right: 0px;
    z-index: 10000;
    cursor: pointer;
    background: #fff;
  }

  .navbutton .navicon {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .navbutton .navicon span {
    display: block;
    width: 100%;
    height: 2px;
    background: #2e455f;
    position: absolute;
    transition:
      top 0.2s 0.2s,
      transform 0.2s,
      opacity 0.2s;
  }

  .navbutton .navicon span:nth-child(1) {
    top: 14px;
  }

  .navbutton .navicon span:nth-child(2) {
    top: 20px;
    transform-origin: 50% 50%;
  }

  .navbutton .navicon span:nth-child(3) {
    top: 26px;
    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: 20px;
    opacity: 0;
  }

  .menuopen .navbutton .navicon span:nth-child(2) {
    top: 20px;
    transform: rotate(-45deg);
  }

  .menuopen .navbutton .navicon span:nth-child(3) {
    top: 20px;
    transform: rotate(45deg);
  }
}

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

/* Black */
@font-face {
  font-family: "Nohemi";
  src:
    url("/fonts/Nohemi-Black-BF6438cc565e67b.woff") format("woff"),
    url("/fonts/Nohemi-Black-BF6438cc5874bd2.otf") format("opentype"),
    url("/fonts/Nohemi-Black-BF6438cc58744d4.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}

/* Bold */
@font-face {
  font-family: "Nohemi";
  src:
    url("/fonts/Nohemi-Bold-BF6438cc577b524.woff") format("woff"),
    url("/fonts/Nohemi-Bold-BF6438cc5812315.otf") format("opentype"),
    url("/fonts/Nohemi-Bold-BF6438cc587b5b5.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

/* ExtraBold */
@font-face {
  font-family: "Nohemi";
  src:
    url("/fonts/Nohemi-ExtraBold-BF6438cc5761ae2.woff") format("woff"),
    url("/fonts/Nohemi-ExtraBold-BF6438cc58a4c3c.otf") format("opentype"),
    url("/fonts/Nohemi-ExtraBold-BF6438cc5881baf.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
}

/* ExtraLight */
@font-face {
  font-family: "Nohemi";
  src:
    url("/fonts/Nohemi-ExtraLight-BF6438cc581502c.woff") format("woff"),
    url("/fonts/Nohemi-ExtraLight-BF6438cc57e06d5.otf") format("opentype"),
    url("/fonts/Nohemi-ExtraLight-BF6438cc58a2634.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
}

/* Light */
@font-face {
  font-family: "Nohemi";
  src:
    url("/fonts/Nohemi-Light-BF6438cc5702321.woff") format("woff"),
    url("/fonts/Nohemi-Light-BF6438cc583f70b.otf") format("opentype"),
    url("/fonts/Nohemi-Light-BF6438cc5899919.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

/* Medium */
@font-face {
  font-family: "Nohemi";
  src:
    url("/fonts/Nohemi-Medium-BF6438cc57ddec0d.woff") format("woff"),
    url("/fonts/Nohemi-Medium-BF6438cc581a509.otf") format("opentype"),
    url("/fonts/Nohemi-Medium-BF6438cc5883899.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

/* Regular */
@font-face {
  font-family: "Nohemi";
  src:
    url("/fonts/Nohemi-Regular-BF6438cc579d934.woff") format("woff"),
    url("/fonts/Nohemi-Regular-BF6438cc58b98fc.otf") format("opentype"),
    url("/fonts/Nohemi-Regular-BF6438cc4d0e493.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

/* SemiBold */
@font-face {
  font-family: "Nohemi";
  src:
    url("/fonts/Nohemi-SemiBold-BF6438cc57db2ff.woff") format("woff"),
    url("/fonts/Nohemi-SemiBold-BF6438cc588b5e5.otf") format("opentype"),
    url("/fonts/Nohemi-SemiBold-BF6438cc588a48a.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

/* Thin */
@font-face {
  font-family: "Nohemi";
  src:
    url("/fonts/Nohemi-Thin-BF6438cc57e2011.woff") format("woff"),
    url("/fonts/Nohemi-Thin-BF6438cc577ef3b.otf") format("opentype"),
    url("/fonts/Nohemi-Thin-BF6438cc5896c67.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
}