@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/22px 'Aeonik', Arial, sans-serif;
	color: #353535;
	background: #fff;
	height:100%;
}

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

.s0 .animatein {visibility: hidden;}

h1 {font-weight:normal;font-size:7vw;line-height:1em}
h2 {font-size:36px;line-height:1.3em;font-weight:normal}
h3 {font-size:24px;line-height:1.3em;font-weight:700}
h4 {font-size:20px;line-height:1.3em;font-weight:normal}

/**** nav ****/
.navholder {position:fixed;top:0;left:0;height:68px;overflow:hidden;transition:height 0.5s, background 0.2s;background:rgba(250,250,248,0.8);z-index:1000;width:100%;display:flex;justify-content:space-between;align-items:center;box-sizing: border-box;padding:0 2.5vw;font-weight:bold}

.navlogo {transition:opacity 0.5s;}

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

.s0 .nav a.n0,
.s1 .nav a.n1,
.s2 .nav a.n2,
.s3 .nav a.n3,
.s4 .nav a.n4,
.s5 .nav a.n5 {color:#7850F9}



/**** footer ****/
.footer {background:#032E4B;color:#fff;padding:1.25vw;display:flex}
.footer .footercol {box-sizing:border-box;padding:1.25vw;flex:0 0 25%}
.footer a {color:#fff}
.footer p {margin-bottom:40px}
.footer .footerlabel {display:inline-block;width:25px}
.footer .address {color:#FC7AD5}
.footerdownloads {list-style-type: none;margin:0;padding:0;}
.footerdownloads li {margin:0 0 10px 0;padding:0}
.footer .instagram {background:url(/img/content/footer/instagram.svg) top left no-repeat;background-size:contain;display:block;width:40px;height:40px;margin-bottom:20px}
.development {margin-bottom:40px}
.development img {max-height:60px}
.year {padding:10px 2.5vw;text-align:right}


.pagebanner {
    background: #7850f9;
    background-size: 200% 200%;
	min-height:70vh;
	box-sizing:border-box;
	padding:2.5vw;
	color:#EBEBEB;
	display:flex;align-items:flex-end;
	position:relative;
	overflow:hidden;

    /*-webkit-animation: AnimationName 10s ease infinite;
    -moz-animation: AnimationName 10s ease infinite;
    animation: AnimationName 10s ease infinite;*/
}

.floatgradient {position:absolute;top:0;width:200%;height:150%;animation: AnimationName 20s ease infinite;transform-origin: 50% 50%;transform:skewX(-45deg);display:flex}

.floatgradient.gradient2 {animation: AnimationName2 30s ease infinite; animation-delay: -10s;width:300%}

.floatgradient.gradient3 {animation: AnimationName3 40s ease infinite; animation-delay: -35s;width:250%}

.leftgradient {flex:0 0 45%;height:100%;
background: linear-gradient(90deg, 
  rgba(252,122,213, 0) 0%,
  rgba(252,122,213, 1) 100%)}
  
.rightgradient {flex:0 0 45%;height:100%;
background: linear-gradient(-90deg, 
  rgba(252,122,213, 0) 0%,
  rgba(252,122,213, 1) 100%)}

.s2 .pagebanner {background:#11998E}
.s2 .leftgradient {background: linear-gradient(90deg, rgba(56,239,125, 0) 0%, rgba(56,239,125, 1) 100%)}
.s2 .rightgradient {background: linear-gradient(-90deg, rgba(56,239,125, 0) 0%, rgba(56,239,125, 1) 100%)}

.s3 .pagebanner {background:#3561F3}
.s3 .leftgradient {background: linear-gradient(90deg, rgba(84,211,253, 0) 0%, rgba(84,211,253, 1) 100%)}
.s3 .rightgradient {background: linear-gradient(-90deg, rgba(84,211,253, 0) 0%, rgba(84,211,253, 1) 100%)}

.s4 .pagebanner {background:#FA7057}
.s4 .leftgradient {background: linear-gradient(90deg, rgba(245,167,92, 0) 0%, rgba(245,167,92, 1) 100%)}
.s4 .rightgradient {background: linear-gradient(-90deg, rgba(245,167,92, 0) 0%, rgba(245,167,92, 1) 100%)}

@keyframes AnimationName {
    0%{right:-220%}
	75%{opacity:1}
	95% {opacity:0}
    100%{right:100%;opacity:0}
}

@keyframes AnimationName2 {
    0%{right:-320%}
	75%{opacity:1}
	95% {opacity:0}
    100%{right:100%;opacity:0}
}

@keyframes AnimationName3 {
    0%{right:-270%}
	75%{opacity:1}
	95% {opacity:0}
    100%{right:100%;opacity:0}
}

/*@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}*/
.pagebanner h1 {margin:0;position:relative}
.pagebanner img {height:0.85em}
.s3 .pagebanner img {height:0.7em}



/*.s2 .pagebanner {background-image: linear-gradient(307deg, #11998E, #38EF7D);}
.s3 .pagebanner {background-image: linear-gradient(307deg, #3561F3, #54D3FD);}
.s4 .pagebanner {background-image: linear-gradient(307deg, #FA7057, #F5A75C);}*/

.pageintro {padding:10vw}

.iconlist {display:flex;padding:0 5vw 5vw 5vw;box-sizing:border-box;width:100%;text-align:center;justify-content: center;}
.iconlist .iconitem {box-sizing:border-box;padding:0 20px;flex:0 0;flex-basis:calc(100% / 9)}
.iconlist .icon {width:100%;height:5vw;min-width:100px;min-height:100px;background:50% 50% no-repeat;background-size:contain;margin:0 auto 20px auto}

.fullpic {width:100%;margin:5vw 0;height:90vh;background:50% 50% no-repeat;background-size:cover}
.squarepic {width:60%;margin:5vw auto;height:50vw;background:50% 50% no-repeat;background-size:cover}

.text12 {font-size:12px;line-height:18px}
.text16 {font-size:16px;line-height:24px}
.text20 {font-size:20px;line-height:26px}

.orangegrad {background: linear-gradient(118.36deg, #FA7057 12.26%, #F5A75C 81.35%)}
.bluegrad {background: linear-gradient(120.47deg, #3561F3 14.36%, #54D3FD 95.67%);}
.purplegrad {background: linear-gradient(118.36deg, #7850F9 12.26%, #FC7AD5 81.35%);}
.greengrad {background: linear-gradient(118.36deg, #11998E 12.26%, #38EF7D 81.35%);}

.orangetext {color:#FA7057}
.greentext {color:#11998e}
.whitetext {color:#fff}

.slick-list {cursor:grab}

.cgi {position:relative}
.cgi:before {content:'CGI. Indicative only.';color:#fff;position:absolute;bottom:20px;left:20px;font-weight:bold;z-index:500;font-size:12px;line-height:16px;text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.75);}

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

/**** home ****/
.s0 .navlogo {opacity:0}
.s0 .scrolled .navlogo {opacity:1}

.s0 .nav ul li a {color:#fff}
.s0 .scrolled .nav ul li a {color:#353535}

.s0 .navholder {background:rgba(250,250,248,0)}
.s0 .navholder.scrolled {background:rgba(250,250,248,0.8)}

.homeintro {width:100%;height:100vh;display:flex;align-items:center;justify-content:center;background:#000}

.homeintro .bg {position:absolute;top:0;left:0;width:100%;height:100%;background-size: 200% 200%;}

.homeintro .bg.bg1 {
	background: linear-gradient(47deg, #FC7AD5, #7850F9);
	animation: homegrad1 20s ease infinite;
	z-index:4;
}

.homeintro .bg.bg2 {
	background: linear-gradient(47deg, #54D3FD, #3561F3);
	animation: homegrad2 20s ease infinite;
	z-index:3;
}

.homeintro .bg.bg3 {
	background: linear-gradient(47deg, #38EF7D, #11998E);
	animation: homegrad3 20s ease infinite;
	z-index:2;
}

.homeintro .bg.bg4 {
	background: linear-gradient(47deg, #54D3FD, #3561F3);
	animation: homegrad4 20s ease infinite;
	z-index:1;
}

@keyframes homegrad1 {
    0%{background-position:0% 49%;opacity:1}
	20% {opacity:0}
    50%{background-position:100% 52%}
	80% {opacity:0}
    100%{background-position:0% 49%;opacity:1}
}

@keyframes homegrad2 {
    0%{background-position:0% 49%;opacity:1}
	20% {opacity:1}
	40% {opacity:0}
    50%{background-position:100% 52%;opacity:0}
    100%{background-position:0% 49%}
}

@keyframes homegrad3 {
    0%{background-position:0% 49%;opacity:1}
	40% {opacity:1}
    50%{background-position:100% 52%;}
	60% {opacity:0}
    100%{background-position:0% 49%;opacity:1}
}

@keyframes homegrad4 {
    0%{background-position:0% 49%}
    50%{background-position:100% 52%}
    100%{background-position:0% 49%}
}

.homeintro svg {width:65%;min-width:240px;position:relative;z-index:10}
.homeintro path, .homeintro line {stroke-dasharray: 480 480;}

.homeintro .downarrow {position:absolute;bottom:20px;left:0;width:100%;z-index:10;text-align:center;color:#fff}
.homeintro .downarrow img {width:25px;margin-top:10px}

line, path {stroke-dashoffset: 10;}

.homegallery {width:100%;height:100vh;position:relative}
.homegallery .slick-slider {width:100%;height:100%}
.homegallery .slick-slider .slide {background:50% 50% no-repeat;background-size:cover;width:100%;height:100vh}
.homegallery .controls {position:absolute;bottom:2.5vw;right:2.5vw;display:flex;align-items:center;justify-content:flex-end}
.homegallery .controls .pagingInfo {color:#fff;font-size:16px;margin:0;letter-spacing:0.5em;text-align:center;flex:0 0 40px;margin-left:12px}
.homegallery svg {width:20px;cursor:pointer}

.homeabout {width:100%;min-height:100vh;font-weight:bold;color:#fff;display:flex;flex-direction:column;justify-content:center;box-sizing: border-box;padding:5vw 10vw;text-align:center;font-size:4vw;line-height:1.2em;}
.homeabout .text12 {margin-bottom:2.5vw}

.homecards {padding:2.5vw 0}
.homecards .homecard {color:#fff;border-radius:16px;box-sizing:border-box;display:flex;flex-direction:column;height:80vh;overflow:hidden;width:30vw;align-items:flex-start}
.homecards .homecard .pic {flex:1 1 80%;width:100%;background:#aaa 50% 50% no-repeat;background-size:cover}
.homecards .homecard .text {padding:30px;box-sizing: border-box;}
.homecards .homecard .text p {width:85%}

.morebutton {display:inline-block;align-items:center;height:44px;border-radius:22px;background:#fff;box-sizing: border-box;padding:14px 20px;font-size:16px;line-height:16px;font-weight:bold;text-decoration:none}
.morebutton:hover {color:#353535 !important}
.morebutton svg {width:14px;margin-left:10px}

.homecards .slick-slide {
    margin: 0 20px;
  }
.homecard .morebutton {margin-top:20px}
.orangegrad .morebutton {color:#FA7057;box-shadow: 0px 0px 12px #F82C07;}
.orangegrad path {fill:#FA7057}
.purplegrad .morebutton {color:#FC7AD5;box-shadow: 0px 0px 12px #5F30F8;}
.purplegrad path {fill:#FC7AD5}
.greengrad .morebutton {color:#38EF7D;box-shadow: 0px 0px 12px #0A7970;}
.greengrad path {fill:#38EF7D}
.bluegrad .morebutton {color:#54D3FD;box-shadow: 0px 0px 12px #0E3DDD;}
.bluegrad path {fill:#54D3FD}

.homeaccordion {color:#fff}
.homeaccordion h2 {cursor:pointer;position:relative;margin:0;transition:margin 0.2s;width:100%}
.homeaccordion h2:hover {text-decoration: underline;}
.homeaccordion .hidecontent {overflow:hidden;max-height:0;transition:max-height 1s, opacity 0.5s;width:100%;padding-left:10px;position:relative;left:-10px;opacity:0}
.homeaccordion p {position:relative;width:40%;min-width:300px}
.homeaccordion .panel {box-sizing: border-box;padding:20px 2.5vw;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;position:relative;overflow:hidden;transition:padding 0.5s, height 0.5s;height:80px}
.homeaccordion .panel:before {content:'';display:block;position:absolute;width:30px;height:30px;border-radius:50%;background:rgba(53,53,53,0.5) 50% 50% no-repeat url(/img/ui/downarrow.svg);background-size:14px auto;top:25px;right:2.5vw;transition: opacity 0.2s;}
.homeaccordion .morebutton {margin:40px 0 10px 0px;position:relative;}
.homeaccordion .bg {position:absolute;top:0;left:0;bottom:0;width:100%;height:600px;background:50% 50% no-repeat;background-size:cover;opacity:0;transition:0.5s}

.homeaccordion .active {height:600px;padding:2.5vw}
.homeaccordion .active:before {opacity:0}
.homeaccordion .active h2 {margin-bottom:20px}
.homeaccordion .active .bg {opacity:1}
.homeaccordion .active .hidecontent {max-height:200px;opacity:1}

/**** building ****/
.fullspec {padding:0 5vw 2.5vw 5vw;text-align:right}
.fullspec a {display:inline-block;border-radius:16px;padding:16px 16px 16px 50px;color:#fff;text-decoration:none;position:relative;transition:all 0.2s;background-size:150%}
.fullspec a:before {content:'';display:block;width:30px;height:30px;position:absolute;left:10px;top:12px;background:rgba(0,0,0,0.5) 50% 50% no-repeat url(/img/ui/downarrow.svg);border-radius:50%}
.fullspec a:hover {background-size:100%}
.buildingsection {display:flex;box-sizing: border-box;padding:2.5vw;align-items:center}
.buildingsection.carousel {padding:2.5vw 2.5vw 2.5vw 0}
.buildingsection.rightpic.carousel {padding:2.5vw 0 2.5vw 2.5vw}
.buildingsection.rightpic.twopics {padding-right:0}
.buildingsection.rightpic {flex-direction:row-reverse}
.buildingsection .pic {min-height:60vh;background:50% 50% no-repeat;background-size:cover;flex:0 0 60vw}
.buildingsection.tallpic .pic {min-height:80vh;flex:0 0 42.5vw;margin-left:7.5vw}
.buildingsection .text {padding:5vw 5vw 5vw 7.5vw}
.buildingsection .slick-slider {width:62.5vw;flex:0 0 62.5vw;height:60vh}
.buildingsection .slick-slider .pic {width:60vw;height:60vh}
.buildingsection .slick-slider .slick-slide {margin:0 0 0 10px}
.buildingsection.narrowcarousel .text {padding-left:0}
.buildingsection.narrowcarousel .slick-slider {width:70vw;flex:0 0 70vw;height:60vh}
.buildingsection.narrowcarousel .slick-slider .pic {width:30vw;height:60vh}
.buildingsection.rightpic .slick-slider .slick-slide {margin:0 10px 0 0}
.buildingsection .pic2 {width:30vw;height:45vh;background:50% 50% no-repeat;background-size: cover;}

/**** amenity ****/
.amenityboxes {display:flex;color:#fff;padding:5vw 2.5vw;justify-content:space-between}
.amenitybox {border-radius:16px;box-sizing:border-box;padding:20px;display:flex;align-items:center;flex:0 0;flex-basis:calc(25% - 20px);margin:10px}
.amenitybox span {font-size:64px;line-height:1em;margin-right:20px}

/**** location ****/
.locationmap {position:relative;height:55vw;width:100%}
.mapholder {position:absolute;top:0;left:0;width:100%;height:100%}
.mapholder .map, #map_canvas {width:100%;height:100%}

.locationmap .mapcategories {position:absolute;bottom:0;left:0;width:25vw}

.amenitylist {border-top:1px solid #fff;color:#fff}


.amenitylist h4 {cursor:pointer;cursor:hand;padding:20px 15px 15px 15px;margin:0;font-weight:normal;font-size:20px;background:right 20px center no-repeat url(/img/ui/linkarrow.svg);background-size:50px auto;position:relative}
.amenitylist h4:hover {text-decoration:underline}

.amenitylist h4:after {content:'';position:absolute;right:10px;top:0;width:40px;height:100%;background:50% 50% no-repeat url(/img/ui/downarrow.svg);background-size:auto 20px}
.amenitylist.active h4:after {background-image:url(/img/ui/uparrow.svg)}

.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-wrap:wrap}
.amenitylist ul li {margin:0;padding:3px 10px 3px 15px;cursor:pointer;cursor:hand;line-height:1.2em;margin-bottom:5px;flex:0 0 40%}
.amenitylist ul li:hover, .amenitylist ul li.active {text-decoration: underline;}

.amenitylist.active ul {max-height:700px}

#occupierlist {background: linear-gradient(120.47deg, #3561F3 14.36%, #54D3FD 95.67%);}

#shopslist {background: linear-gradient(118.36deg, #FA7057 12.26%, #F5A75C 81.35%)}



div[aria-label='28 Dingwall'] {pointer-events: none;}

.gm-style .gm-style-iw-c {box-shadow: none !important;border-radius:0 !important;padding:0 !important;background:transparent !important}
.gm-style .gm-style-iw-d {background:transparent !important;margin:0 !important;padding:0 !important;overflow:hidden !important}
.gm-style .gm-style-iw-t::after {box-shadow: -2px 5px 0px 0 rgba(0,0,0,0.25);display: none;}

.infowindowinner {height:42px;padding:0 20px;display:flex;align-items:center;min-width:80px;text-align:center;color:#fff}
.infowindowinner p {margin:0px}
.infowindowinner.occupier {background:linear-gradient(120.47deg, #3561F3 14.36%, #54D3FD 95.67%)}
.infowindowinner.bars {background:#9CDBC1}
.infowindowinner.restaurants {background:#BF7C12}
.infowindowinner.shops {background: linear-gradient(118.36deg, #FA7057 12.26%, #F5A75C 81.35%)}

.infowindowinner .infotext {width:100%}



.connections {box-sizing:border-box;padding:2.5vw;color:#fff}
.connectionstop {display:flex;justify-content:space-between}
.connectionstop .text {flex:0 0 30%}
.stats {display:flex;flex:0 0 60%;margin-bottom:5vw}
.stats .stat {border-radius: 16px;padding:20px;box-sizing: border-box;background: linear-gradient(127.87deg, #FAFAF8 -0.89%, #54B4FD 100.12%);color:#353535;margin-left:20px;flex:0 0;flex-basis:calc((100% / 3) - 20px)}
.stats .stat p:last-child {margin:0}

.connectionsbottom {display:flex;justify-content:space-between;padding-bottom:5vw}
.connectionsbottom .traveltimes {flex:0 0 35%;padding-top:5vw}
.traveltimes #accordion {width:100%}
.traveltimes #accordion div {padding-bottom:20px}
.traveltimes h4 {border-bottom:1px solid #fff;padding:10px 0 10px 40px;margin-top:20px;background:left center no-repeat;background-size:30px auto;position:relative;cursor:pointer}
.traveltimes h4:hover {text-decoration:underline}
.traveltimes h4:after {position:absolute;content:'';display:block;width:50px;height:100%;top:0;right:0;background:right center no-repeat url(/img/ui/downarrow.svg);background-size:20px auto}
.traveltimes h4.ui-accordion-header-active:after {background-image:url(/img/ui/uparrow.svg)}
.traveltimes table {width:calc(100% - 80px);margin-left:40px;}
.traveltimes table td {padding:0 0 10px 0}


.plan-viewer-wrapper {
  flex:0 0 60%;
  height:60vw;
  overflow:hidden;
  position:relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow:hidden;
  
}

.floorplan {
  width: 100%;
  height: 100%;
  background:50% 50% no-repeat url(/img/content/location/connections.png);background-size:contain
}

.zoom-controls {
  position: absolute;
  top:0;right:0;
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.zoom-button {
  width: 40px;
  height: 40px;
  margin-top: 1px;
  background:50% 50% no-repeat #fff;
  background-size:25px auto;
  cursor: pointer;
}

.zoom-button:hover {
  background-color: #eee;
}

.zoom-in {background-image:url(/img/ui/zoomin.svg);border-radius:20px 20px 0 0}
.zoom-out {background-image:url(/img/ui/zoomout.svg);border-radius:0 0 20px 20px}
.zoom-reset {display:none}



/**** availability ****/
.plans {background:#EFEFEA;box-sizing:border-box;padding:5vw 7.5vw;position:relative}
.plansinner {width:100%;height:100%;position:relative}
.plans .floors {display:flex;}
.plans .floor, .floor-nav {border:1px solid #D5D5D5;box-sizing: border-box;margin-bottom:10px;padding:20px 80px 20px 20px;border-radius:8px;cursor:pointer;position:relative}
.plans .floor.active, .slick-active .floor-nav {background: linear-gradient(95.65deg, #FA7057 8.38%, #F5A75C 87.53%);color:#fff !important;transition:all 0.2s;border-color:#F5A75C}
.plans .floor:hover, .floor-nav:hover {border-color:#F5A75C;color:#FA7057}
.plans .floor:after, .floor-nav:after {content:'';position:absolute;right:10px;top:0;width:40px;height:100%;background:50% 50% no-repeat url(/img/ui/rightarrow.svg);background-size:auto 20px;transition:all 0.2s;opacity:0}
.plans .floor.active:after, .slick-active .floor-nav:after {right:0;opacity:1}

/*.floorcarousel {flex:0 0 60vw}*/

.floorinner {display:flex;padding-left:340px;justify-content:space-between;flex-wrap:wrap}
.floorname {display:none}
.floorinner .planholder {flex:1 0 30vw;margin-left:20px}
.floorinner img {max-width:30vw;max-height:calc(90vh - 10vw);margin:0 auto}
.floor-slides .slick-dots {list-style-type:none;margin:0;padding:0;position:absolute;top:0;left:0;width:300px}
/*.floor-slides .slick-dots:after {content:'For indicative purposes only.\00000aNot to scale.';white-space: pre;font-size:11px;line-height:13px}*/
.floor-slides .slick-dots li {margin:0 0 10px 0}


.plankey {padding:0 5vw;display:flex;flex-direction:column;justify-content:space-between;margin-top:0}
.key {flex:0 0 100%}
.key ul {list-style-type:none;margin:10px 0 0 0;padding:0;}
.key ul li {margin:0 20px 0 0;padding:0;position:relative;padding-left:1.5em}
.key ul li:before {content:'';display: block;position:absolute;top:0.2em;left:0;width:1em;height:1em;border-radius:50%;background:#C9CAD9}
.key ul li.office:before {background: linear-gradient(180deg, #FA7057 0%, #F5A75C 100%);}
.key ul li.terrace:before {background: linear-gradient(180deg, #11998e 0%, #38ef7d 100%);}
.key ul li.cycle:before {background: linear-gradient(180deg, #5c7ff5 0%, #54d3fd 100%);}
.key ul li.parking:before {background: linear-gradient(180deg, #7850f9 0%, #fc7ad5 100%);}
.key ul li.reception:before {background: #fdd4cd;}

.plan {flex:1 1 50%;display:flex;justify-content:center;align-items:flex-start;position:relative}
.plan img {max-height:calc(90vh - 10vw)}
.north {position:absolute;top:0;right:0;background:top right no-repeat url(/img/content/availability/north.svg);background-size:contain;width:30px;height:40px}

/*.areatext {display:none}*/
/*.areas {transition:height 0.2s}
.areas.lg .areatext.lg,
.areas.ground .areatext.ground,
.areas.firstsecond .areatext.firstsecond,
.areas.third .areatext.third,
.areas.fourth .areatext.fourth,
.areas.fifthsixth .areatext.fifthsixth,
.areas.seventh .areatext.seventh,
.areas.roof .areatext.roof {display:block}*/

.availabletable {padding:7.5vw}
/*.availabletable thead {text-align:center}*/
.availabletable table {width:100%}
.availabletable td {padding:10px}
.availabletable tr td:first-child {border-radius: 8px 0 0 8px;border-right:1px solid #D3D3D3;padding-left:20px}
.availabletable tbody tr td:nth-child(3), .rightborder {border-right:1px solid #D3D3D3}
.availabletable tr td:last-child {border-radius: 0 8px 8px 0;padding-right:20px}
.availabletable tbody tr:nth-child(even) td {background:#EFEFEA}
.availabletable .total {font-weight:bold}

.virtualtour {font-size:0.8em;line-height:1em;text-decoration: none;color:#7850F9;background:right center url(/img/ui/rightarrowdark.svg) no-repeat;background-size:6px auto;display:inline-block;padding-right:10px;margin-left:10px}
.virtualtour:hover {text-decoration: underline;}

.tours {background: #EFEFEA;box-sizing: border-box;display:flex;flex-direction: column;}

.tourtext {box-sizing:border-box;display:flex;flex-direction: column;}
.tours h2 {padding: 5vw 7.5vw 20px 7.5vw;margin:0}
.tours ul {display: flex;list-style: none;margin:0;padding:0}
.tours ul li {box-sizing: border-box;margin:0;flex:0 0;flex-basis:calc(100% / 7);text-align:center;padding:10px 0}
.tours ul li:hover {text-decoration: underline;cursor:pointer;}
.tours ul li.active {background: #fff;border-top:2px solid #7850F9;padding-top:8px}
.tourframe {flex:1 1 65%;background:#fff;display:flex;align-items:center;justify-content: center;}

.tourframe iframe {display: none;height:675px}

.tourframe.ground .ground,
.tourframe.second .second,
.tourframe.third .third,
.tourframe.fourth .fourth,
.tourframe.fifth .fifth,
.tourframe.sixth .sixth,
.tourframe.seventh .seventh {display:block}

/****************************************************
* 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; line-height:1.3em }
.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) {
		/**** building ****/
		.iconlist {flex-wrap:wrap}
		.iconlist .iconitem {flex-basis:calc(100% / 3);margin-bottom:20px}
	}
	
	/* bigger desktop */
	@media only screen and (max-width: 1229px) {
		.plans .floor, .floor-nav {padding:10px 60px 10px 10px}
	}

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width:1024px) {
		.homecards .homecard {width:80vw}
		.tourframe iframe {height:430px}
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		h1 {font-size:10vh}
		
		/**** footer ****/
		.footer {flex-wrap:wrap}
		.footer .footercol {flex-basis:50%;margin-bottom:40px}
		
		/**** home ****/
		.homeabout {font-size:4vh}
		
		.homecards .slick-slide {margin:0 5px}
		
		/**** amenity ****/
		.amenityboxes {flex-wrap:wrap}
		.amenitybox {flex-basis:calc(50% - 20px)}
		
		.buildingsection.tallpic .pic {min-height:60vh}
		
		/**** location ****/
		.locationmap {height:80vh}
		.locationmap .mapcategories {width:50vw}
		
		.buildingsection.narrowcarousel .slick-slider .pic {width:50vw;height:60vh}
		
		.connectionstop {flex-direction:column}
		.stats .stat {margin-left:0;margin-right:20px}
		.connectionsbottom {flex-direction: column;}
		.connectionsbottom .traveltimes {margin-bottom:40px}
		.plan-viewer-wrapper {width:100%;flex:0 0 60vw}
		
		/**** availability ****/
		.floor-slides {margin-top:40px}
		.floorinner {padding-left:0;display: block;}
		.floorname {display:flex;align-items:center;justify-content:center;font-weight: bold;width:100%;text-align:center;height:40px;margin-bottom:20px;font-size:20px}
		.plans .slick-arrow {width:40px;height:40px;border-radius:50%;border:0;background:rgba(0,0,0,0.4) 50% 50% no-repeat;background-size:20px auto;text-indent:-9999px;overflow:hidden;cursor:pointer;position:absolute;top:0;z-index:1000}
		.plans .slick-prev {left:0;background-image:url(/img/ui/leftarrow.svg);}
		.plans .slick-next {right:0;background-image:url(/img/ui/rightarrow.svg)}
		.areatext {display:flex;flex:0 0;flex-wrap: nowrap;}
		.areatext .areacol {flex:0 0 50%}
		.floorinner img {max-width:none;margin-bottom:20px}
		.key {margin-bottom:20px}
		
		.tourselect {font-size:14px;line-height:1.3em}
		
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
	
		h2 {font-size:28px}
		
		/**** nav ****/
		.navholder {height:48px;overflow:hidden;display:block}
		.navinner {height:100vh;}
		.nav ul {flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:28px;margin-top:48px;height:calc(100vh - 48px)}
		.nav ul li {margin:20px 0}
		.s0 .navlogo {opacity:1}
		.s0 .nav ul li a {color:#353535}
		.navlogo {position:absolute;top:8px;left:5vw}
		.navbutton {display:block;position: fixed;width:24px;height:20px;padding:15px 5vw;top:00px;right:0px;z-index:10000;cursor:pointer;border-radius:50%;transition:background 1s}
		.navbutton .navicon {position: relative;width:100%;height:100%}
		.navbutton .navicon span {display:block;width:100%;height:2px;background:#25282B;position:absolute;transition:top 0.2s 0.2s, transform 0.2s}
		.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 .navbutton .navicon span {transition:top 0.2s, transform 0.2s 0.2s}
		.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;background:rgba(255,255,255,0.8) !important}
		
		/**** footer ****/
		.footer {padding:2.5vw}
		.footer .footercol {padding:2.5vw;flex-basis:100%}
		.year {padding:10px 5vw}
		
		
		/**** home ****/
		.homegallery .controls {width:90vw;right:5vw;justify-content:space-between}
		
		.homecards .homecard .text {padding:5vw}
		.homecards .homecard .text p {width:100%}
		
		.homeaccordion .active, .homeaccordion .bg {height:80vh}
		.homeaccordion .panel {padding:20px 5vw}
		.homeaccordion .active {padding:5vw}
		.homeaccordion .panel::before {right:5vw}
		
		/**** building ****/
		.pagebanner {padding:5vw;height:90vh;align-items:center}
		.pagebanner h1 {margin-top:48px}
		.pageintro {padding:10vw 5vw}
		.iconlist .icon {min-width:auto}
		.fullspec {text-align:center;margin-bottom:40px}
		
		.buildingsection,
		.buildingsection.rightpic {flex-direction:column-reverse;padding:5vw;margin-bottom:40px}
		.buildingsection.carousel {flex-direction:column-reverse;padding-right:5vw}
		.buildingsection.rightpic.carousel {flex-direction:column-reverse;padding-left:5vw;padding-right:0}
		.buildingsection.carousel .text {padding-left:5vw}
		.buildingsection.rightpic.carousel .text {padding-right:5vw;padding-left:0}
		
		.buildingsection .text {padding:0 0 2.5vw 0}
		.buildingsection .pic {width:100%;}
		.buildingsection .slick-slider {width:100%}
		.buildingsection .slick-slider .slick-slide,
		.buildingsection.rightpic .slick-slider .slick-slide {width:85vw}
		.buildingsection.tallpic .pic {margin:0}
		.buildingsection.rightpic.twopics {padding-right:5vw}
		.buildingsection .pic2 {width:90vw}
		
		/**** amenity ****/
		.amenityboxes {padding:5vw}
		.amenitybox {flex-basis: 100%;margin:0 0 20px 0;}
		
		/**** location ****/
		.locationmap {height:auto}
		.locationmap .mapcategories,.mapholder {position:relative}
		.locationmap .mapcategories {width:100vw}
		.mapholder {height:80vh}
		
		.buildingsection.narrowcarousel .slick-slider {width:95vw}
		.squarepic {width:90vw;height:100vw}
		.fullpic {height:70vh}
		
		.connectionstop {padding:2.5vw}
		.stats {flex-wrap:wrap}
		.stats .stat {flex:0 0 100%;margin:0 0 20px 0;padding:16px}
		.stat p, .stat h2 {margin:0;}
		
		.connectionsbottom .traveltimes {padding:2.5vw}
		
		/**** availability ****/
		
		.availabletable {padding:5vw}
		.availabletable td {padding:10px 5px}
		.availabletable tr td:first-child {padding-left:10px}
		.availabletable tr td:last-child {padding-right:10px}
		
		.plan-viewer-wrapper {flex:0 0 60vh}
		
		.tourframe iframe {height:400px}
		
		.tourselect {flex-wrap: wrap;}
		.tours ul li {flex-basis:50%}
	
	}

	/* 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: 'Aeonik';
    src: url('/fonts/Aeonik-Regular.woff2') format('woff2'),
        url('/fonts/Aeonik-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Aeonik';
    src: url('/fonts/Aeonik-Bold.woff2') format('woff2'),
        url('/fonts/Aeonik-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}