@import url("//hello.myfonts.net/count/3f5cd3");
@import url("//hello.myfonts.net/count/3f5cf0");
@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%;
	overflow-x:hidden;
}
body {
	font: 16px/1.3em "VisbyCF-Regular", Arial, sans-serif;
	color: #888;
	background: #fff url(/img/ui/bg.gif) repeat-x top center;
	height:100%;
}

.resizeimg {max-width: 100%;height: auto;}
a.disabled {pointer-events: none;}
b {font-family: "VisbyCF-Bold", Arial, sans-serif;font-weight: normal;}

h1 {font-size:5vw;line-height: 1em;font-weight: normal;font-family: "VisbyCF-Heavy", Arial, sans-serif;}
h2 {font-size:30px;line-height: 1.3em;font-weight: normal;font-family: "VisbyCF-Heavy", Arial, sans-serif;} 
h4 {font-size:20px;line-height: 1.3em;font-weight: normal;font-family: "VisbyCF-Bold", Arial, sans-serif;} 

.heavy {font-family: "VisbyCF-Heavy", Arial, sans-serif;}

.bluebg {background:#031C2E;color:#fff}
.redbg {background:#E85E4A;color:#fff}
.redbg .available table tbody {color:#031C2E}
.yellowbg {background:#FFCC57;color:#031C2E}
.orangebg {background:#FFB357;color:#031C2E}
.bluetext {color:#031C2E}
.redtext {color:#E85E4A}
.whitetext {color:#FFF}
.yellowtext {color:#FFCC57}

.buttonlink {padding:20px 120px 20px 30px;font-family: "VisbyCF-Heavy", Arial, sans-serif;color:#031C2E;font-size:20px;text-decoration: none;background:url(/img/ui/whiteplay.svg) right 20px center no-repeat;background-size:15px auto;display:inline-block}
.buttonlink.borderlink {border:1px solid #031C2E;margin-top:40px;}
.buttonlink.yellowlink {background-color:#FFCC57}
.buttonlink.downloadlink {background-image:url(/img/ui/download.svg);border:1px solid #FFCC57;color:#fff}
.buttonlink:hover {text-decoration: underline;}
.buttonlink.disabled {background: none;pointer-events: none;}


/**** nav ****/
.navbutton {display:block;position: fixed;width:24px;height:20px;padding:17px 15px;top:30px;right:30px;z-index:10000;cursor:pointer;background:#031C2E;border-radius:50%;transition:background 1s}
.navbutton .navicon {position: relative;width:100%;height:100%}
.navbutton .navicon span {display:block;width:100%;height:2px;background:#FFCC57;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%}

.navholder {width:100%;height:0;overflow: hidden;position:fixed;top:0;left:0;z-index:9000;transition:height 0s 1s}
.navinner {width:100%;height:100vh;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.navbg {width:100%;height:100vh;background:rgba(3,28,46,0.9);position:absolute;top:0;left:0;transition:opacity 0.5s;opacity:0}
.nav {position:relative;height:105vh;width:105vh;background:#FFB357;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;overflow:hidden;font-size:3vh;line-height:1em;list-style-type: none;margin:0;padding:0;transition:transform 0.5s, opacity 0.5s;opacity:0;transform:scale(0.5)}
.nav li {margin:1.1vh 0;padding:0;transition:opacity 0.2s 0s;opacity:0}
.nav li a {text-decoration: none;color:#031C2E}
.nav li a:hover {text-decoration:underline}
.s0 .nav .n0,
.s1 .nav .n1,
.s2 .nav .n2,
.s3 .nav .n3,
.s4 .nav .n4,
.s5 .nav .n5,
.p1 .nav .sn1,
.p1a .nav .sn1a,
.p1b .nav .sn1b,
.p2 .nav .sn2,
.p3 .nav .sn3,
.p4 .nav .sn4,
.p5 .nav .sn5 {color:#E85E4A}

.navlogo {position:absolute;top:4vh;left:25%;width:50%;height:80px;background:url(/img/content/logo.svg) 50% 50% no-repeat;background-size:contain;z-index:9500;transition:opacity 0.5s;opacity:0}

.menuopen .navbutton {background:#FFCC57}
.menuopen .navbutton .navicon span {transition:top 0.5s, transform 0.5s 0.5s, opacity 0s 0.5s;background:#031C2E}
.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);}

.menuopen .navholder {height:100vh;transition:height 0s 0s}
.menuopen .navbg {opacity:1}
.menuopen .nav {transform:scale(1);opacity:1;transition:0.5s 0.2s}
.menuopen .nav li {opacity:1;transition:opacity 1s 0.3s}
.menuopen .nav li:nth-child(2) {transition-delay:0.4s}
.menuopen .nav li:nth-child(3) {transition-delay:0.5s}
.menuopen .nav li:nth-child(4) {transition-delay:0.6s}
.menuopen .nav li:nth-child(5) {transition-delay:0.7s}
.menuopen .nav li:nth-child(6) {transition-delay:0.8s}
.menuopen .nav li:nth-child(7) {transition-delay:0.9s}
.menuopen .nav li:nth-child(8) {transition-delay:1s}
.menuopen .nav li:nth-child(9) {transition-delay:1.1s}
.menuopen .navlogo {opacity:1}

.toplogo {position:absolute;top:40px;left:5vw;width:140px;display:block;z-index:50}

/**** footer ****/
.footer {position:relative;z-index:10;background:#031C2E;border-top:10px solid #FFCC57;padding:3vw 0 10vw 0}
.footerlogo {width:140px}
.footerlinks {list-style-type: none;margin:0;padding:0;font-size:14px}
.footerlinks li {margin:0 0 10px 0}
.footerlinks li a {color:#fff;text-decoration:none}
.footerlinks li a:hover {text-decoration:underline}


/**** page layout ****/
.pageintro {min-height:75vh;box-sizing: border-box;position:relative;padding-top:160px;display:flex;align-items:center}
.pageintro .pic {position:absolute;top:0;right:0;height:100vh;background:50% 50% no-repeat;background-size:cover;width:50%}
.pageintro .pic.bigpic {width:75%;}
.pageintro .pic.bigpic .slide:before {content:'';display:block;width:50%;height:100%;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.5+0,0+100 */
background: -moz-linear-gradient(left,  rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
}
.pageintro .pic .slide {width:100%;height:100%;background:50% 50% no-repeat;background-size:cover}
.pageintro .text {position:relative;z-index:1000;padding:2.5vw 0 2.5vw 5vw;width:30%}

.caption {position:absolute;bottom:20px;right:20px;color:#fff;text-shadow: 1px 1px 4px rgba(0, 0, 0, 1);font-family: "VisbyCF-Bold";font-size:14px}

.pagesection {min-height:100vh;position:relative;box-sizing: border-box;}
.pagesection.nomin {min-height:auto}
.pagesection.pic {background:50% 50% no-repeat;background-size:cover}



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

/**** presentation ****/
.video-background {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

.video-background iframe {
  position: absolute;
  top: calc(50% - 2px);
  left: calc(50% - 2px);
  width: calc(100vw + 2px);
  height: calc(100vh + 2px);
  transform: translate(-50%, -50%);
}

@media (min-aspect-ratio: 16/9) {
  .video-background iframe {
    /* height = 100 * (9 / 16) = 56.25 */
    height: 56.25vw;
  }
}
@media (max-aspect-ratio: 16/9) {
  .video-background iframe {
    /* width = 100 / (9 / 16) = 177.777777 */
    width: 177.78vh;
  }
}

/**** home ****/
.s0 .toplogo {display:none}
.introvideo {position:relative;width:100%;height:100vh}
.videoholder {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 0;}
.videoholder video, .videoholder .embedvideo {position: absolute; top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;object-position: 50% 50%;box-sizing: border-box;}
.pageintro .overlay {position:absolute;top:0;left:0;width:50%;height:100%;background: linear-gradient(270deg, rgba(3,28,46,0) 0%, rgba(3,28,46,1) 100%);z-index:50;opacity:50%}

.homecircle1 {position:absolute;bottom:5vh;left:-10vw;width:50vw;height:50vw;border-radius:50%;background:rgba(255,204,87,0.95)}
.homecircle2 {position:absolute;bottom:20vh;right:-5vw;z-index:10;}
.homecircle2 .innercircle {width:25vw;height:25vw;border-radius:50%;background:url(/img/content/home/shapes/shape1.svg) 50% 50% no-repeat;background-size:contain;animation:turn 60s infinite linear;transform-origin:50% 50%;}
@keyframes turn {
  0% {
    transform:rotate(0deg)
  }
  100% {
    transform:rotate(360deg)
  }
}

.hometext {position:absolute;bottom:7vh;left:0;z-index:10;padding:5vw;color:#fff}
.homelogo {width:150px;height:auto;margin-bottom:40px}

.videobuttonholder {position:absolute;right:5vw;top:0;width:20vw;height:100vh;display:flex;align-items:center;justify-content: flex-end;z-index:20}
.videobutton {height:80px;box-sizing: border-box;border-radius:40px;background:rgba(3,28,46,0.65);color:#fff;font-size:20px;text-decoration:none;display:flex;align-items:center;padding:0 120px 0 20px;position:relative}
.videobutton:after {content:'';width:80px;height:80px;border-radius:40px;position:absolute;right:0;top:0;background:#E85E4A url(/img/ui/orangeplay.svg) 55% 50% no-repeat;background-size:25px auto}
.videobutton:hover:after {background-color:#fff}

.videoholder .slide, .videoholder .pic {width:100%;height:100vh;background:50% 50% no-repeat;background-size:cover}

.homesection {min-height:100vh;position:relative;display:flex;padding:40px 0;box-sizing: border-box;}
.homesection.balls {overflow-x:hidden;}
.homesection.rightcontent {justify-content:flex-end;overflow: hidden}
.homesection .halfcontent {flex:0 0 50%;box-sizing: border-box}
.homesection .halfcontent.welcome {display:flex;flex-direction:column;align-items:flex-start;justify-content:center;position:relative;z-index:50;padding-right:5vw;flex-basis:52%}

.homebuttonheading {border-bottom:1px solid #E85E4A;font-family: "VisbyCF-Bold";color:#E85E4A;width:calc(100% - 20px);margin-top:10px}
.homebuttons {display:flex;flex-wrap:wrap;width:100%}
.homebuttons a.buttonlink.borderlink {margin:0 20px 20px 0;flex:0 0;flex-basis:calc(50% - 20px);box-sizing: border-box;padding-left:20px;padding-right:80px}
.homebuttons a span {font-family:"VisbyCF-Regular", Arial, sans-serif;font-size:12px;line-height:1.2em}

.homecircle3 {position:absolute;bottom:28vh;left:-5vw;}
.homecircle3 .innercircle {width:45vw;height:45vw;border-radius:50%;background:url(/img/content/home/shapes/shape2.svg) 50% 50% no-repeat;background-size:contain;z-index:10;animation:turn 90s infinite linear;transform-origin:50% 50%}
.homecircle4 {position:absolute;bottom:25vh;left:10vw;width:35vw;height:35vw;border-radius:50%;background:#E85E4A}
.homecircle5 {position:absolute;bottom:100vh;left:53vw;width:3vw;height:3vw;border-radius:50%;background:#E85E4A;z-index:10}
.homecircle6 {position:absolute;bottom:10vh;left:75vw;width:6vw;height:6vw;border-radius:50%;background:rgba(232,94,74,0.3);z-index:10}

.homesection .halfcontent.text {display:flex;flex-direction:column}
.homesection .halfcontent.text .number4 {background:top right no-repeat url(/img/content/home/4.svg);background-size:auto 100%;flex:0 0 50%;min-height:50vh}
.homesection .halfcontent.text .text {padding:5vw 15vw 10vw 5vw}
.homesection .halfcontent.text .text h2 {margin-bottom:5vw}

.homesection .halfcontent.pic {background:50% 50% no-repeat;background-size:cover}

.buttoncol {display:flex;flex-direction: column;max-width:250px}
.buttoncol .buttonlink {margin-bottom:20px}

/**** building 4 ****/
.inspire {padding-top:25vh}
.inspire .text {padding:10vw 0 10vw 25%;width:50%}

.b4gallery {box-sizing: border-box;padding:40px 0;height:100vh;width:100%;position:relative;}
.b4gallery .cycle-slideshow {height:100%}
.b4gallery .slide {position:relative;height:100%;width:100%;}
.b4gallery .slide .text {position:absolute;top:0;left:160px;height:100%;width:30%;display:flex;flex-direction:column;justify-content: center;text-shadow: 2px 2px 6px rgba(0, 0, 0, 1)}
.b4gallery .slide .pic {background:50% 50% no-repeat;background-size:cover;width:75%;height:100%;margin-left:25%}

.slide_arrow {width:60px;height:60px;background:#FFCC57 no-repeat;border-radius:50%;position:absolute;top:calc(50% - 30px);z-index:1000;cursor:pointer}
.slide_arrow.slide_prev {left:40px;background-image:url(/img/ui/prev.svg);background-position:45% center}
.slide_arrow.slide_next {right:40px;background-image:url(/img/ui/next.svg);background-position:55% center}
.slide_arrow:hover {background-color:#fff}

.wellness {display:flex;font-family: "VisbyCF-Bold";font-size:16px;line-height:1.3em}
.wellness h2 {margin:40px 0;text-align:center}
.wellness .halfcontent {box-sizing: border-box;flex:0 0 50%;padding:30px}

.wellnesscontent {height:50%;display:flex;align-items:center;margin-bottom:40px}
.wellnesscontent .text {box-sizing: border-box;padding:10px;flex:0 0 40%}
.wellnesscontent .pic {height:100%;background:50% 50% no-repeat;background-size:cover;margin:10px;flex:1 1 60%}

.wellness .stats {display:flex;flex-wrap:wrap;}
.wellness .stat {box-sizing: border-box;padding:10px;flex:0 0 40%}
.wellness .statnum {font-size:40px;line-height:1.3em;color:#fff;}
.wellness .stats img {margin-top:10px;height:80px}

.floorpic {box-sizing: border-box;padding:5vw;text-shadow: 2px 2px 6px rgba(0, 0, 0, 1);color:#fff;display:flex;align-items:flex-end}

.floorpic .text {display:flex;flex-wrap: wrap;justify-content:flex-end;font-size:30px;line-height:1.3em;}
.floorpic .lefttext {text-align:right;margin:0 40px 20px 0}
.floorpic .righttext {flex:0 0 60%}
.floorpic .bigtext {font-size:60px;line-height:1.3em;display:flex;align-items:flex-end;margin-bottom:20px}

.spec {padding:5vw 10vw;text-align:center;font-family: "VisbyCF-Bold";font-size:16px;line-height:1.3em}
.spec h2, .parkspace h2.borderheading {border-bottom:2px solid #FFCC57;padding-bottom:20px;margin-bottom:40px}
.speclist {display:flex;flex-wrap:wrap;justify-content:center;margin-bottom:10vw}
.p2 .speclist {margin-bottom:0}
.specitem {box-sizing: border-box;padding:20px 0;margin-bottom:40px;flex:0 0 25%}
.specitem .icon {height:5vw;width:100%;background:50% 50% no-repeat;background-size:contain;margin-bottom:20px}
.specitem .text {padding:0 10%;}

.spec ul {list-style-type: none;margin:0;padding:0;text-align:center}
.spec ul li {margin:0 0 20px 0;padding:0;width:100%}

.pagesection.areas {box-sizing: border-box;padding:5vw 0;}
.pagesection.areas h2 {margin:0 10vw 40px 10vw;border-bottom:2px solid #031C2E;padding-bottom:20px;text-align:center}

.areascontent {padding:0 5vw;display:flex;align-items:center}
.areascontent .planholder {position:relative;flex:0 0 60%;display:flex;align-items: center;justify-content: center;}
.planholder img {max-height:70vh;margin-right:auto;margin-left:auto}
.north {position:absolute;top:0;left:0;background:top left url(/img/content/building4/plans/north.svg) no-repeat;background-size:contain;width:40px;height:40px}
.areascontent .available {padding-left:5vw;font-size:16px;line-height:1.3em;flex:1 1 50%}
.areascontent .available table {width:100%}
.areascontent .available td {padding:15px 5px;border-bottom:1px solid #031C2E;transition:background 0.2s;}
.trfa td {cursor:pointer}
.areascontent .available .highlight td {background-color:#fff}
.areascontent .available .trfa td.arrow {background-image:url(/img/ui/next.svg);background-position:50% 50%;background-repeat:no-repeat;background-size:15px auto;width:30px}
.areascontent .let {opacity:0.5}

.availabletable {font-size:24px;line-height:32px;width:80%;color:rgba(3,28,46,1)}
.availabletable thead, .availabletable tfoot {font-family:"VisbyCF-Heavy";}
.availabletable tfoot td {border-bottom:0}
.availabletable td {padding:5px;border-bottom:1px solid #fff}
.availabletable .hasterrace td {border:0;padding-bottom:0}
.availabletable .terrace {color:rgba(255,255,255,0.4)}
.availabletable .let td {color:rgba(3,28,46,0.2)}

.occupiers {display:flex;flex-wrap:wrap;}
.occupiers .occupier {background:50% 50% no-repeat;background-size:contain;height:100px;margin:0 20px 20px 0;flex:0 0 45%}

.spaceplan {padding-top:10vw}
/*.spaceplan .areascontent {justify-content: center;}*/

/**** the park ****/

.shuttlepics {padding:5vw 7.5vw;display:flex;flex-wrap:wrap}
.shuttlepics .pics {box-sizing: border-box;padding-right:5vw;flex:0 0 50%;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:flex-end;align-content:center}
.shuttlepics .pic {height:17vw;margin-bottom:20px;flex:1 1;flex-basis:calc(50% - 10px);background:50% 50% no-repeat;background-size:cover;position:relative}

.shuttlepics .pic:nth-child(1) {margin-right:20px;flex:0 0;flex-basis:calc(40% - 20px)}
.shuttlepics .pic:nth-child(2) {flex:0 0 60%;height:25vw}
.shuttlepics .pic:nth-child(3) {flex:0 0 60%}
.shuttlepics .pic.bigpic {flex:0 0 100%;height:20vw}

.shuttlepics .text {padding-top:25vh;box-sizing:border-box;padding-right:10vw;flex:0 0 50%}
.shuttlepics .text p {max-width:600px}

.shuttlepics .aerial {flex:0 0 100%;margin-top:40px;display:flex}
.shuttlepics .aerialtext {padding-top:40px;text-align:right;padding-right:5vw;box-sizing: border-box;flex:0 0 25%;}
.shuttlepics .aerialpic {flex:0 0 75%;background:50% 50% no-repeat;background-size:cover}

/*.pageintro.rightpic {flex-direction:row-reverse}*/
.pageintro.leftpic .pic {right:auto;left:0}
.pageintro.leftpic .text {padding-left:55vw}
.shuttlepics.leader {align-items:center}
.shuttlepics.leader .text {padding-top:0}
.shuttlepics.rightpics {flex-direction:row-reverse}
.shuttlepics.rightpics .pics {padding:0 0 0 5vw}
.gbpcard {position:relative;left:-5vw;width:80%;height:auto}

.shuttlepics.rightpics .pic:nth-child(1) {margin-right:20px;flex:0 0;flex-basis:calc(40% - 20px);height:25vw}
.shuttlepics.rightpics .pic:nth-child(2) {flex:0 0 60%;height:17vw}
.shuttlepics.rightpics .pic:nth-child(3) {flex:0 0;flex-basis:100%;margin-right:0px;margin-left:20px}
.shuttlepics.rightpics .pic:nth-child(4) {flex:0 0 60%;margin-right:20px;height:17vw;}
.shuttlepics.rightpics .pic:nth-child(5) {flex:0 0;flex-basis:calc(40% - 20px);height:17vw}

.shuttlepics.rightpics .picstext {box-sizing: border-box;flex:0 0 60%;min-height:17vw;display:flex;align-items:center;padding:20px;margin-bottom: 20px;}
.shuttlepics.rightpics .kix {margin-left:20px;height:22vw}


.parkspace {padding:5vw;text-align:center}
.buildings {display:flex;justify-content:center;flex-wrap: wrap;}
.building {box-sizing: border-box;padding:0 20px;padding-bottom:20px;flex:0 0 27%;display:flex;flex-direction:column;align-items:center}
.building .areas {display:flex;justify-content:space-between;border-bottom:1px solid #FFCC57;padding-bottom:10px;max-width:300px;width:100%}
.buildingbutton {max-width:300px;width:100%;text-align:right}
.buildingbutton .buttonlink {color:#FFCC57;background-position:right center;padding-right:40px}


.sitemap {text-align:center;background:#ededed}
.sitemap img {display:block;margin:0 auto}

/**** guildford ****/
.guildfordpics {padding:5vw 7.5vw;display:flex}
.guildfordpics .pics {box-sizing: border-box;padding-right:5vw;flex:0 0 50%;display:flex;flex-wrap:wrap;justify-content:flex-end}
.guildfordpics .pic {height:17vw;margin-bottom:20px;flex:1 1;flex-basis:calc(50% - 10px);background:50% 50% no-repeat;background-size:cover}
.guildfordpics .pic.bigpic {flex:0 0 80%}
.guildfordpics .pic:nth-child(2) {margin-right:20px}

.guildfordpics .text {padding-top:25vh;flex:0 0 50%}
.guildfordpics .text p {max-width:600px}

.mapsection {padding:5vw;display:flex;flex-wrap:wrap}
.mapsection img {margin-bottom:20px}
.map {flex:0 0 65%}
.mapkey {flex:0 0 35%}
#accordion {padding-left:3vw}
#accordion h4 {padding-bottom:10px;border-bottom:1px solid #031C2E;position:relative;cursor:pointer}
#accordion h4:hover {text-decoration: underline;}
#accordion h4:after {content:'+';position:absolute;right:0;top:0}
#accordion h4.ui-state-active:after {content:'-'}
#accordion ul {padding-bottom:10px}
#accordion li {display:flex;margin:0 0 10px 0}
#accordion li span {margin-right:5px}

.shops .mapnum {color:#DA4A94}
.restaurants .mapnum {color:#009FE3}
.bars .mapnum {color:#931E81}
.hotels .mapnum {color:#F9B234}
.entertainment .mapnum {color:#E7332A}
.interest .mapnum {color:#DEDC00}

.mappics {display:flex;flex:0 0 100%}
.mappics .pic {background: 50% 50% no-repeat;background-size:cover;height:18vw;flex:1 1 40%;}
.mappics .pic:nth-child(2) {margin:0 20px}
.mappics .pic:nth-child(3) {flex:0 0;flex-basis:calc(35% - 20px)}

.guildfordgallery, .guildfordgallery .slide {height:100vh;width:100%;background:50% 50% no-repeat;background-size:cover}

.guildfordstats {box-sizing: border-box;padding:5vw;display:flex;align-items: center;justify-content:center;flex-wrap:wrap;align-content:center}
.guildfordstats .stat {margin:10px;border:1px solid #D76652;display: flex;flex-direction:column;align-items:center;justify-content:center;font-family: "VisbyCF-Bold";height:18vw;flex:0 0 25%;text-align: center;box-sizing: border-box;padding:0 5vw;}
.guildfordstats .stat span {font-size:40px;color:#D76652;line-height:1.3em}
.guildfordstats .stat p {margin-top:20px}

.travel {display:flex;align-items: flex-end;padding:5vw}
.travel .text {padding-top:5vw;flex:1 1 35%;box-sizing:border-box;padding-right:5vw}
.travel .text .indenttext {padding-left:2.5vw}
.travel .graphics {flex: 1 1 65%}
.travel .graphics img {margin-bottom:40px}
.traveltimes {display:flex;font-family: "VisbyCF-Bold"}
.travelitem {margin-right:10vw}
.travelitem .icon {height:6vw;width:6vw;margin-bottom:20px;background:left center no-repeat;background-size:contain}

/**** downloads ****/
.downloads li {margin-bottom:10px}
.downloads a {color:#fff}


/**** contact ****/
.contactcols {display:flex;width:100%;font-size:14px;line-height:20px}
.contactcols .col {box-sizing: border-box;flex:0 0 50%;padding-right:5vw;}
.contactcols a {color:#fff}
.agentlogo {display:block;width:180px;height:55px;background:left center no-repeat;background-size:contain;margin-bottom:20px}
.pageintro .contactheader {box-sizing: border-box;width:50%;}

.development {box-sizing: border-box;padding:5vw;}
.development .contactcols {width:50%}

.misrep {padding:40px 0 0 0;font-size:11px;line-height:13px;width:50%;box-sizing: border-box;padding-right:5vw;}

/****************************************************
* 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: 1600px) {
		.guildfordstats .stat {padding:0 20px}
	}
	
	/* bigger desktop */
	@media only screen and (max-width: 1229px) {
		.guildfordstats .stat {height:30vw;padding:20px;flex:0 0 30%}
		
		.buildings {flex-wrap:wrap;justify-content:center}
		.building {flex:0 0 40%;margin-bottom:40px}
	}

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

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		
		/**** nav ****/
		.nav {height:90vw;width:90vw}
		
		/**** footer ****/
		.buttonlink.downloadlink {padding:20px 60px 20px 10px}
		
		/**** pages ****/
		.pageintro {min-height:100vh;align-items:flex-start;justify-content:space-between;flex-direction:column}
		.pageintro .text {width:75%}
		.pageintro .pic, .pageintro .pic.bigpic {height:50vh;width:100%;top:auto;bottom:0;position:relative}
		
		/**** home ****/
		.homecircle1 {bottom:5vh;width:70vw;height:70vw}
		.homebuttons a.buttonlink.borderlink {flex-basis:100%;margin-right:0}
		.homeb4 {flex-direction:column-reverse}
		.homesection.homeb4 .halfcontent.pic {flex:0 0 60vh}
		.homesection .halfcontent.text .number4 {min-height:20vh}
		.homebuttonheading {width:100%}
		
		
		/**** the park ****/
		.shuttlepics .text {padding:0}
		.shuttlepics .aerial {flex-direction:column}
		.shuttlepics .aerialtext {text-align:left}
		.pageintro.leftpic .text {padding-left:5vw}
		.shuttlepics.rightpics .pic:nth-child(3) {flex:0 0 100%;margin-right:0;height:25vw}
		
		
		/**** building 4 ****/
		.inspire {padding:0}
		.inspire .text {padding:10vw;box-sizing: border-box;width:100%;}
		
		.wellness {flex-direction:column}
		.wellnesscontent .pic {height:60vh}
		
		.specitem {flex:0 0 30%}
		
		.areascontent {flex-direction:column}
		.areascontent .available {width:100%}
		
		/**** guildford ****/
		.guildfordpics .text {padding:0}
		
		.mapsection {flex-direction:column}
		#accordion {padding:0}
		
		.guildfordstats .stat {flex:0 0 45%}
		
		.travel {flex-direction:column}
		.travel .text {padding-bottom:10vw}
		.travel .graphics {width:100%}
		
		/**** contact ****/
		.misrep {width:100%}
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		h2 {font-size:24px}
	
		/**** nav ****/
		.toplogo {top:20px}
		.navbutton {top:10px;right:10px}
		.nav {font-size:20px}
		.nav li {margin:5px 0}
		
		/**** footer ****/
		.footer {padding:10vw}
		.footerlogo, .footerlinks {margin-bottom:40px}
		
		/**** home ****/
		/*.introvideo {overflow-x:hidden}*/
		.hometext {position:relative;top:20vh}
		.homecircle1 {bottom:30vh;width:120vw;height:120vw;left:-25vw}
		.homecircle2 {display:none}
		.videobuttonholder {width:100%;bottom:0;right:0;box-sizing: border-box;padding:10vw;align-items:flex-end;justify-content:center;}
		.videobutton {height:50px;padding-right:80px}
		.videobutton:after {width:50px;height:50px;background-size:15px auto}
		
		.balls {padding:10vw}
		.homesection .halfcontent.welcome {flex:0 0 100%;padding:0}
		
		/**** building 4 ****/
		.slide_arrow {width:40px;height:40px;background-size:15px auto}
		.slide_arrow.slide_prev {left:10px}
		.slide_arrow.slide_next {right:10px}
		.b4gallery .slide .text {width:100%;left:0;justify-content:flex-start;box-sizing: border-box;padding:20px;}
		.b4gallery .slide .pic {margin:0;width:100%}
		
		.wellnesscontent {flex-direction:column-reverse}
		.wellnesscontent .pic {width:100%;flex:0 0 50vh}
		.wellness .stat {flex:0 0 50%}
		
		.floorpic .text {font-size:22px}
		.floorpic .bigtext {font-size:40px}
		.floorpic .righttext {flex:0 0 48%}
		.floorpic .lefttext {margin-right:20px}
		.specitem {flex:0 0 50%}
		.specitem .icon {height:50px}
		.specitem .text {padding:0 10px}
		
		/**** the park ****/
		.shuttlepics.rightpics .picstext {flex:0 0 100%}
		.shuttlepics, .shuttlepics.rightpics {flex-direction:column}
		.shuttlepics.rightpics .pics, .shuttlepics .pics {padding:0}
		.shuttlepics .text {padding-top:40px}
		.shuttlepics .pic {height:35vw}
		.shuttlepics .pic:nth-child(2) {height:50vw}
		.shuttlepics .pic.bigpic {height: 50vw;}
		.shuttlepics .pics {width:100%}
		.pageintro.leftpic {padding-top:40px}
		.shuttlepics.rightpics .pic:nth-child(1) {height:35vw}
		.shuttlepics.rightpics .pic:nth-child(2) {height:45vw}
		.shuttlepics.rightpics .pic:nth-child(3) {height:50vw}
		.shuttlepics.rightpics .pic:nth-child(4) {height:35vw}
		.shuttlepics.rightpics .pic:nth-child(5) {height:35vw}
		.shuttlepics.rightpics .kix {height:50vw;margin-left:0}
		
		.building {flex:0 0 100%}
		
		
		
		
		/**** guildford ****/
		.guildfordpics {flex-direction:column-reverse}
		.guildfordpics .pic {height:35vw}
		.guildfordstats .stat {flex:0 0 100%;height:auto}
		
		.traveltimes {flex-wrap:wrap}
		.travelitem {margin-bottom:20px}
		.travelitem .icon {height:50px;width:50px}
		
		/**** contact ****/
		.contactcols {flex-direction:column}
		.contactcols .col {margin-bottom:40px}
	}

	/* 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: "VisbyCF-ExtraBold";
  src: url('/webFonts/VisbyCFExtraBold/font.woff2') format('woff2'), url('/webFonts/VisbyCFExtraBold/font.woff') format('woff');
}
@font-face {
  font-family: "VisbyCF-Regular";
  src: url('/webFonts/VisbyCFRegular/font.woff2') format('woff2'), url('/webFonts/VisbyCFRegular/font.woff') format('woff');
}
@font-face {
  font-family: "VisbyCF-Heavy";
  src: url('/webFonts/VisbyCFHeavy/font.woff2') format('woff2'), url('/webFonts/VisbyCFHeavy/font.woff') format('woff');
}
@font-face {
  font-family: "VisbyCF-Bold";
  src: url('/webFonts/VisbyCFBold/font.woff2') format('woff2'), url('/webFonts/VisbyCFBold/font.woff') format('woff');
}