@import url(/css/reset.css);
@import url(/css/text.css);
/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */
html {
  height: 100%;
}
body {
  font: 20px/28px "Graphik Web", Arial, sans-serif;
  color: #324a28;
  background: #fff url(/img/ui/bg.gif) repeat-x top center;
  height: 100%;
}

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

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

h2 {
  text-transform: uppercase;
  font-size: 40px;
  font-weight: 300;
  letter-spacing: 0.1em;
  line-height: 1.2em;
}
h3 {
  text-transform: uppercase;
  font-size: 28px;
  font-weight: 300;
  letter-spacing: 0.1em;
  line-height: 1.2em;
}

b {
  font-weight: 500;
}

.texture {
  background: 50% 50% no-repeat url(/img/content/home/texture.jpg);
  background-size: cover;
}

.greenbg {
  background: #95c122;
}
.darkgreenbg {
  background: #324a28;
  color: #fff;
}
.greentext {
  color: #95c122;
}

.pic {
  background: 50% 50% no-repeat;
  background-size: cover;
  position: relative;
}

.morebutton {
  display: inline-block;
  background: #a5bd9c;
  color: #324a28;
  padding: 15px 20px;
  text-decoration: none;
  transition: background 0.2s;
  margin-top: 30px;
}
.morebutton:after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: right center no-repeat url(/img/ui/right.svg);
  background-size: contain;
  margin-left: 20px;
  position: relative;
  top: 2px;
}
.morebutton.darkgreenbg {
  background: #324a28;
  color: #95c122;
}
.morebutton.darkgreenbg:after {
  background-image: url(/img/ui/right2.svg);
}
.morebutton:hover {
  background: #fff;
}

.buttonlink {
  display: inline-block;
  background: #333333;
  color: #95c122;
  padding: 15px 20px;
  font-size: 20px;
  text-decoration: none;
  line-height: 20px;
  margin: 20px;
  transition: background 0.2s;
}
.buttonlink:hover {
  background: #fff;
}

/**** nav ****/
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  z-index: 9000;
  transition: background 0.5s;
}
.scrolled .nav,
.s4 .nav {
  background: rgba(50, 74, 40, 0.7);
}
.nav a {
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  display: flex;
  align-items: center;
  height: 50px;
  box-sizing: border-box;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  margin: 0 1.5vw;
  font-size: 16px;
  line-height: 16px;
}
.nav a:hover {
  border-bottom: 2px solid rgba(255, 255, 255, 0.5);
  transition: border 0.5s;
}
.s0 .nav .n0,
.s1 .nav .n1,
.s2 .nav .n2,
.s3 .nav .n3,
.s4 .nav .n4,
.s5 .nav .n5 {
  border-bottom: 2px solid #fff;
}

/**** footer ****/
.footer {
  padding: 2.5vw;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  line-height: 18px;
}
.footer a {
  color: #fff;
}
.footer img {
  width: 100px;
  margin-bottom: 20px;
}
.footerright {
  text-align: right;
}

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

/**** home ****/
.homebanner {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.bannerbg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 50% 50% no-repeat url(/img/content/home/homebanner.jpg);
  background-size: cover;
}
.bannerbg:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}
.homelogo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  line-height: 18px;
}
.homelogo img {
  margin-bottom: 20px;
  width: 200px;
}
.homespace {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 20px;
  line-height: 28px;
  font-weight: 300;
}

.homeoverview {
  position: relative;
  padding-top: 20vw;
  display: flex;
}
.homeoverview .texture {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
}
.homeoverview .pic {
  flex: 0 0 60%;
  height: 40vw;
}
.homeoverview .text {
  margin: 0 2.5vw 7.5vw 7.5vw;
}

.homeblake {
  display: flex;
  position: relative;
}
.homeblake .texture {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 40%;
}
.homeblake .pic {
  flex: 0 0 60%;
  height: 45vw;
  margin-bottom: 10vw;
}
.homeblake .text {
  margin: 7.5vw 5vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.buildingsize {
  font-size: 40px;
  line-height: 48px;
  margin-bottom: 30px;
  font-weight: 300;
}
.buildingsize .floor,
.buildingsize .type {
  font-size: 16px;
  line-height: 24px;
  display: block;
  text-transform: uppercase;
  font-weight: 500;
  margin: 5px 0;
}
.buildingsize .type {
  font-weight: 300;
}

.homegains {
  display: flex;
  position: relative;
}
.homegains .pic {
  flex: 0 0 60%;
  height: 45vw;
  margin-bottom: 10vw;
}
.homegains .text {
  margin: 7.5vw 5vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.homefoot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.homefoot .pic {
  flex: 0 0 40vw;
  width: 65%;
}
.homefoot .texture {
  width: 50%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
}
.homefoot .text {
  padding: 10vw 5vw;
  text-align: center;
  box-sizing: border-box;
  width: 50%;
  font-size: 30px;
  line-height: 40px;
}

/**** location ****/
.locationbanner {
  position: relative;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 75vh;
}
.locationbanner h2 {
  position: relative;
}

.locationintro {
  display: flex;
  min-height: 66vw;
}
.locationintro .texture {
  flex: 0 0;
  flex-basis: calc(100% / 3);
}
.locationintro .content {
  flex: 0 0;
  flex-basis: calc((100% / 3) * 2);
  background: #d6e2b8;
}
.locationintro .bigtext {
  text-align: center;
  font-size: 3vw;
  line-height: 1.3em;
  box-sizing: border-box;
  min-height: 33vw;
  padding: 10vw;
  font-weight: 300;
  display: flex;
  align-items: center;
}
.locationintro .text {
  min-height: 33vw;
  display: flex;
  align-items: center;
  text-align: center;
  padding: 2.5vw;
  box-sizing: border-box;
  background: #fff;
  width: 50%;
  margin-left: 50%;
}

.locationcontent {
  display: flex;
}
.locationleft {
  flex: 0 0;
  flex-basis: calc(100% / 3);
  display: flex;
  flex-direction: column;
}
.locationleft .text {
  padding: 2.5vw;
  box-sizing: border-box;
  min-height: 66vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1;
}
.locationleft .pic {
  min-height: 33vw;
  flex: 1 1;
}

.locationright {
  flex: 0 0;
  flex-basis: calc((100% / 3) * 2);
  display: flex;
  flex-direction: column;
}
.locationright .pic {
  min-height: 33vw;
  flex: 1 1;
  width: 50%;
}
.locationright .diagram {
  min-height: 66vw;
  flex: 2 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.diagrampic {
  flex: 0 0 80%;
  height: 80%;
  background: url(/img/content/location/diagram.svg) 50% 50% no-repeat;
  background-size: contain;
}

.connections {
  display: flex;
}
.connectionsleft {
  flex: 0 0;
  flex-basis: calc((100% / 3) * 2);
  display: flex;
  flex-direction: column;
}
.connectionscentre {
  min-height: 30vw;
  flex: 1 1;
  display: flex;
}
.connectionscentre .smallmap {
  flex: 0 0 50%;
  height: 100%;
  background: #e2e1e1 url(/img/content/location/smallmap.gif) 50% 50% no-repeat;
  background-size: contain;
}
.connectionscentre .stats {
  width: 50%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 20px;
  padding: .5vw 2.5vw;
  box-sizing: border-box;
  justify-content: flex-start;
}

.connectionscentre .stat {
  flex: 0 0 50%;
  text-align: center;
}
.stat .icon {
  width: 4vw;
  height: 4vw;
  background: 50% 50% no-repeat;
  background-size: contain;
  margin: 0 auto 10px auto;
}

.connectionsbigmap {
  min-height: 50vw;
  flex: 2 1;
  background: url(/img/content/location/bigmap.gif) no-repeat 50% 50% #dfdfdf;
  background-size: contain;
}

.connectionsright {
  flex: 0 0;
  flex-basis: calc(100% / 3);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 5vw;
}
.traveltimes {
  margin-bottom: 40px;
}
.traveltimes table {
  width: 100%;
}
.traveltimes table td {
  padding: 2px 0;
}
.traveltimes table .num {
  padding-left: 10px;
}

/**** building ****/
.buildingintro {
  position: relative;
  padding: 10vh 0;
  box-sizing: border-box;
  height: 100vh;
  display: flex;
  align-items: center;
}
.buildingintro h3 {
  margin-bottom: 40px;
}
.buildingintro .texture {
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
}
.buildingintro .text {
  padding: 0 5vw;
}
.buildingintro .pic {
  flex: 0 0 60%;
  height: 100%;
}
.buildingpage .bigpic {
  height: 100vh;
  width: 100%;
  background: #000;
}
.buildingpage .bigpic .cycle-slideshow {
  width: 100%;
  height: 100%;
  position: relative;
}
.buildingpage .bigpic .cycle-slideshow .slide {
  width: 100%;
  height: 100%;
}

.buildinggallery {
  display: flex;
  position: relative;
  width: 100%;
}
.buildinggallery .texture {
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
}
.buildinggallery .pics {
  flex: 0 0 65%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 10vw 0 0 0;
}
.buildinggallery .pics .pic1 {
  width: 50%;
  flex: 0 0 25vw;
  margin-bottom: 15vw;
}
.buildinggallery .pics .pic2 {
  width: 100%;
  flex: 0 0 40vw;
}
.buildinggallery .pictext {
  padding: 10vw 2.5vw 10vw 7.5vw;
}
.buildinggallery .pictext h3 {
  padding: 10vw 0;
}
.buildinggallery .pictext .pic {
  height: 35vw;
  width: 100%;
}

.floors {
  min-height: 100vh;
  display: flex;
}
.floors .text {
  flex: 0 0 35%;
  box-sizing: border-box;
  padding: 5vw 5vw 5vw 2.5vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.floors .text h2 {
  margin-bottom: 40px;
}
.floors .floorpager {
  margin: 40px 0 0 0;
  margin-right: -5vw;
}
.floors .buildingsize {
  background: rgba(255, 255, 255, 0.2);
  padding: 20px;
  margin: 0;
  cursor: pointer;
  transition: background 0.2s;
}
.floors .buildingsize:hover {
  background: rgba(255, 255, 255, 0.5);
}
.floors .buildingsize.cycle-pager-active {
  background: #fff;
}

.floorplan {
  flex: 0 0 65%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.floorplan .planslides {
  flex: 0 0 85%;
  height: 85%;
  position: relative;
}
.floorplan .slide {
  width: 80%;
  margin-left: 10%;
  height: 100%;
  background: 50% 50% no-repeat;
  background-size: contain;
  position:relative;
}
.key {position:absolute;bottom:20px;left:2px;list-style-type: none;font-weight:bold}
.key li:before {content:'';display:inline-block;width:20px;height:20px;margin-right:8px;background:#b5d464}
.key li.lightgreen:before {background:#d5e6a7}
.slide-arrow {
  position: absolute;
  top: calc(50% - 30px);
  display: block;
  width: 60px;
  height: 60px;
  background: 50% 50% no-repeat #464646;
  background-size: 20px auto;
  z-index: 500;
  cursor: pointer;
  transition: background 0.2s;
}
.slide-arrow:hover {
  background-color: #95c122;
}
.slide-prev {
  background-image: url(/img/ui/leftwhite.svg);
  left: 0;
}
.slide-next {
  background-image: url(/img/ui/rightwhite.svg);
  right: 0;
}

.spec {
  display: flex;
  min-height: 100vh;
}
.spec .specside {
  flex: 0 0 50%;
  box-sizing: border-box;
  padding: 5vw;
  text-align: center;
  font-size: 14px;
  line-height: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.spec .speclist {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
}
.specitem {
  box-sizing: border-box;
  padding: 1.25vw;
  flex: 0 0 25%;
  margin-bottom: 20px;
}
.specbreak {
  height: 0;
  flex: 0 0 100%;
}
.spec .icon {
  width: 7vw;
  height: 7vw;
  background: 50% 50% no-repeat;
  background-size: contain;
  margin: 0 auto 20px auto;
}
.spec .download {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.buildingleft .buildingintro {
  flex-direction: row-reverse;
}
.buildingleft .buildingintro .texture {
  left: 0;
  right: auto;
}
.buildingleft .buildinggallery {
  flex-direction: row-reverse;
}
.buildingleft .buildinggallery .texture {
  right: 0;
  left: auto;
}
.buildingleft .buildinggallery .pics {
  align-items: flex-start;
}
.buildingleft .buildinggallery .pictext {
  padding: 10vw 7.5vw 10vw 2.5vw;
}

/**** contact ****/
.contact {
  box-sizing: border-box;
  min-height: 100vh;
  display: flex;
}
.contact .agents {
  flex: 0 0 50%;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 7.5vw;
}
.agencies {
  display: flex;
  font-size: 14px;
  line-height: 18px;
  justify-content: space-between;
  width: 100%;
}
.agentlogo {
  display: block;
  width: 200px;
  height: 200px;
  background: left center no-repeat;
  background-size: contain;
  margin-bottom: 20px;
}

.contact .download {
  flex: 0 0 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/****************************************************
* 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) {
}

/* bigger desktop */
@media only screen and (max-width: 1229px) {
  body {
    font-size: 16px;
    line-height: 20px;
  }

  .specitem {
    flex: 0 0 30%;
  }

  .contact .agents {
    flex: 0 0 65%;
  }
  .contact .download {
    flex: 0 0 35%;
  }
}

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 1099px) {
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
  /**** location ****/
  .locationintro .text {
    width: 100%;
    margin: 0;
  }
  .locationcontent {
    flex-direction: column;
  }
  .locationleft {
    flex-direction: row;
  }
  .locationleft .text {
    flex: 0 0 50%;
  }
  .locationright .pic {
    width: 50%;
    flex: 0 0 50vw;
  }
  .locationright .diagram {
    flex: 0 0 100vw;
  }
  .connections {
    flex-direction: column;
  }
  .connectionsbigmap {
    flex: 0 0 100vw;
  }
  .connectionscentre .smallmap {
    height: 50vw;
  }
  .connectionscentre .stats {
    height: 50vw;
  }
  .traveltimes table td {
    border-bottom: 1px solid rgba(50, 74, 40, 0.3);
    padding: 5px 0;
  }

  /**** building ****/
  .buildingintro,
  .buildingleft .buildingintro {
    flex-direction: column-reverse;
    height: auto;
  }
  .buildingintro .pic {
    flex: 0 0 70vw;
    width: 100%;
    margin-bottom: 10vw;
  }
  .buildingintro .text {
    position: relative;
  }

  .buildinggallery,
  .buildingleft .buildinggallery {
    flex-direction: column-reverse;
  }
  .buildinggallery .texture {
    display: none;
  }
  .buildinggallery .pictext,
  .buildingleft .buildinggallery .pictext {
    padding: 5vw;
  }
  .buildinggallery .pictext .pic {
    height: 50vw;
  }
  .buildinggallery .pics {
    padding: 5vw;
  }
  .buildinggallery .pics .pic1 {
    margin-bottom: 5vw;
    width: 75%;
    flex: 0 0 35vw;
  }
  .buildinggallery .pics .pic2 {
    flex: 0 0 60vw;
  }

  .floors {
    flex-direction: column;
  }
  .floorplan {
    flex: 0 0 100vw;
  }
  .floors .text {
    padding: 5vw;
  }
  .floors .floorpager {
    margin-right: 0;
    margin-bottom: -5vw;
    display: flex;
  }
  .floors .buildingsize {
    flex: 0 0 50%;
    box-sizing: border-box;
  }

  .spec {
    flex-direction: column;
    min-height: auto;
  }
  .spec .download {
    padding: 10vw;
  }
  .spec .icon {
    width: 10vw;
    height: 10vw;
  }

  /**** contact ****/
  .contact {
    flex-direction: column;
  }
  .contact .agents {
    flex: 3 0 65%;
  }
  .contact .download {
    padding: 10vw;
  }
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
  h2 {
    font-size: 30px;
  }

  /**** nav ****/
  .nav,
  .scrolled .nav,
  .s4 .nav {
    height: 0vh;
    flex-direction: column;
    align-items: center;
    background: rgba(50, 74, 40, 0.95);
    overflow: hidden;
    transition: height 0.5s;
  }
  .nav a {
    opacity: 0;
    transition: opacity 0.2s;
    margin: 2.5vw 0;
  }

  .navbutton {
    display: block;
    position: fixed;
    width: 24px;
    height: 20px;
    padding: 17px 15px;
    top: 10px;
    right: 10px;
    z-index: 10000;
    cursor: pointer;
    background: #fff;
    border-radius: 50%;
    transition: background 1s;
  }
  .navbutton .navicon {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .navbutton .navicon span {
    display: block;
    width: 100%;
    height: 2px;
    background: #324a28;
    position: absolute;
    transition: top 0.5s 0.5s, transform 0.5s, opacity 0.5s, background 1s;
  }
  .navbutton .navicon span:nth-child(1) {
    top: 3px;
  }
  .navbutton .navicon span:nth-child(2) {
    top: 9px;
    transform-origin: 50% 50%;
  }
  .navbutton .navicon span:nth-child(3) {
    top: 15px;
    transform-origin: 50% 50%;
  }

  .menuopen .nav {
    height: 100vh;
  }
  .menuopen .nav a {
    opacity: 1;
    transition: opacity 0.5s 0.2s;
  }
  .menuopen .navbutton {
    background: #95c122;
  }
  .menuopen .navbutton .navicon span {
    transition: top 0.5s, transform 0.5s 0.5s, opacity 0s 0.5s;
    background: #fff;
  }
  .menuopen .navbutton .navicon span:nth-child(1) {
    top: 9px;
    opacity: 0;
  }
  .menuopen .navbutton .navicon span:nth-child(2) {
    top: 9px;
    transform: rotate(-45deg);
  }
  .menuopen .navbutton .navicon span:nth-child(3) {
    top: 9px;
    transform: rotate(45deg);
  }

  /**** footer ****/
  .footer {
    padding: 10vw;
    flex-direction: column;
  }
  .footerright {
    text-align: left;
  }
  .footer img {
    margin-bottom: 10vw;
  }

  /**** home ****/
  .homeoverview {
    flex-direction: column-reverse;
    padding-top: 0;
  }
  .homeoverview .texture {
    display: none;
  }
  .homeoverview .text {
    margin: 10vw;
  }
  .homeoverview .pic {
    flex: 0 0 100vw;
  }

  .homeblake {
    flex-direction: column;
  }
  .homeblake .text {
    margin: 10vw;
    position: relative;
  }
  .homeblake .pic {
    flex: 0 0 100vw;
    width: 80vw;
    margin: 0 10vw 10vw 10vw;
  }

  .homegains {
    flex-direction: column-reverse;
  }
  .homegains .text {
    margin: 10vw;
  }
  .homegains .pic {
    flex: 0 0 100vw;
    width: 80vw;
    margin: 0 10vw 10vw 10vw;
  }

  .homefoot .pic {
    width: 90vw;
    flex: 0 0 100vw;
  }
  .homefoot .texture {
    width: 25%;
  }
  .homefoot .text {
    width: 75%;
    font-size: 24px;
  }

  /**** location ****/
  .locationintro .texture {
    display: none;
  }
  .locationintro .content {
    flex: 0 0 100%;
  }
  .locationintro .bigtext {
    font-size: 30px;
  }
  .locationintro .text {
    padding: 10vw;
  }

  .locationleft {
    flex-direction: column;
  }
  .locationleft .text {
    padding: 10vw;
  }
  .locationleft .pic {
    flex-basis: 100vw;
  }
  .locationright .pic {
    width: 100%;
    flex: 0 0 100vw;
  }
  .diagrampic {
    flex: 0 0 90%;
    height: 90%;
  }
  .connectionscentre {
    flex-direction: column;
  }
  .connectionscentre .smallmap {
    flex: 0 0 100vw;
    width: 100vw;
  }
  .connectionscentre .stats {
    flex: 0 0 100vw;
    width: 100vw;
  }
  .stat .icon {
    width: 60px;
    height: 60px;
  }
  .connectionsright {
    padding: 10vw;
  }

  /**** buildings ****/
  .buildingintro,
  .buildingleft .buildingintro {
    padding: 0;
  }
  .buildingintro .pic {
    flex: 0 0 100vw;
    margin: 0;
  }
  .buildingintro .text {
    padding: 10vw;
  }
  .buildingsize {
    font-size: 24px;
  }

  .spec .specside {
    padding: 10vw 5vw;
  }
  .specitem {
    flex: 0 0 50%;
    padding: 0 5vw;
    margin-bottom: 10vw;
  }
  .spec .icon {
    width: 60px;
    height: 60px;
  }
  .specbreak {
    display: none;
  }

  .floorplan .planslides {
    flex: 0 0 100%;
  }
  .floorplan .slide {
    width: calc(100% - 80px);
    margin: 0 40px;
  }
  .slide-arrow {
    width: 40px;
    height: 40px;
  }

  /**** contact ****/
  .contact .agents {
    padding: 10vw;
  }
  .agencies {
    flex-direction: column;
    justify-content: flex-start;
  }
}

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

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
}

/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/

@font-face {
  font-family: "Graphik Web";
  src: url("/fonts/Graphik-Medium-Web.woff2") format("woff2"),
    url("/fonts/Graphik-Medium-Web.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
}

@font-face {
  font-family: "Graphik Web";
  src: url("/fonts/Graphik-Regular-Web.woff2") format("woff2"),
    url("/fonts/Graphik-Regular-Web.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
}

@font-face {
  font-family: "Graphik Web";
  src: url("/fonts/Graphik-Light-Web.woff2") format("woff2"),
    url("/fonts/Graphik-Light-Web.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
}