@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: 15px/1.3em "Carisma-med", Arial, sans-serif;
	color: #888;
	background: #e4d8cc;
	height:100%;
}

.emailshort {display:none}

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

.darkgreentext {color:#21402E}
.lighttext {color:#F2E5D9}
.lightgreentext {color:#BED3B3}

.lightbg {background:#F2E5D9;}
.lightgreenbg {background: #BED3B3;}
.darkgreenbg {background:#21402E;}

.hatton {font-family: "Hatton";font-weight: normal;}
.light {font-family: 'Carisma-light';}
.reg {font-family: 'Carisma-reg';}
.animatein {visibility: hidden;}
h1 {font-size:3.5vw;line-height:1.3em;font-weight:normal}
h2 {font-size:2.2vw;line-height:1.4em;font-weight:normal}
h3 {font-size:30px;line-height:1.3em;font-weight:normal}
h4 {font-size:20px;line-height:1.3em;font-weight:normal}

.linebutton {display:inline-block;border-top:1px solid #21402E;border-bottom:1px solid #21402E;padding:8px 0 8px 0;font-size:15px;line-height:0.9em;color:#21402E;text-decoration: none;transition:border 0.2s;pointer-events: all;}
.linebutton:hover {/*border-color:#F2E5D9;*/text-decoration: underline;}
.linebutton.lightbutton {border-color:#F2E5D9;;color:#F2E5D9;}
.linebutton.lightbutton:hover {border-color:#21402E}
.linebutton.lightgreenbutton {border-color:#BED3B3;color:#BED3B3;}
.linebutton.lightgreen:hover {border-color:#F2E5D9}

/**** borders ****/
.pageborder {position: relative; height:1px;width:calc(100% - 180px);z-index:1500;border: 1px solid #21402E; border-left: none; border-right: none; transition:background 0.5s; display: flex; justify-content: space-between; 

@media screen and (max-width: 959px) {
	display: none;
}
	
}



.homesliders .topborder, .topborder.navborder {top:calc(5vh + 58px);transition:top 0.5s}

.pageborder.lightborder {background:#F2E5D9}
.pageborder.lightgreenborder {border-color:#BED3B3}
.lightgreenborder.pageborder:after{background-color:#BED3B3}
.topborder {position:absolute;top:5vh;left:90px; height: 12px;}
.topborderinner svg{border:#21402E 1px solid; border-top: none; border-left: none; padding: 10px; left: -51px; position: relative;}
.topborderinner:nth-child(2) svg{ padding: 10px; right: 0; position: relative; left: unset; right: -51px; transform: scaleX(-1);}
.lightgreenborder {.topborderinner svg {border-color: #BED3B3;}}
.lightgreenborder {.topborderinner svg path{fill: #BED3B3;}}
.bottomborder {position:absolute;bottom:5vh;left:90px; height: 12px;}
.homesliders .topborder, .topborder.navborder {top:calc(5vh + 58px);transition:top 0.5s; position: absolute;}
.homesliders .bottomborder {top:calc(95vh - 18px); transform: scaleY(-1);}
.contactslides .bottomborder {top:calc(95vh - 18px); transform: scaleY(-1);}

/**** nav ****/
.nav {position:fixed;z-index:2000;width:100%;height:126px;top:5vh;left:0;display:flex;align-items:center;justify-content: center;transition:height 0.2s, opacity 0.5s;box-sizing: border-box;font-size:18px;line-height:1.3em}
.nav.slowchange {transition:height 2s, opacity 0.5s;}
.hidenav .nav {opacity:0;pointer-events: none;}
.hidenav.menuopen .nav {opacity:1}
.s0 .nav.playintro {height:90vh;pointer-events: none;z-index:500}
.nav .homelink {width:178px;height:126px;scale:1;text-align: center;}
.staticlogo {height:100%}
.staticlogo .st0 {fill:#21402E;transition:fill 0.2s}
.staticlogo .st1 {fill:#F2E5D9;transition:fill 0.2s}
.navbg {overflow:hidden;position:fixed;top:0;left:0;width:100vw;height:0}


.nav a {margin:0 3vw;color:#21402E;text-decoration: none;transition:opacity 0.5s 2s;}
.s1 .nav .p1,
.s2 .nav .p2,
.s3 .nav .p3,
.s4 .nav .p4 {text-decoration: underline;}
.nav a:hover {text-decoration: underline;}
.nav .navlink {height:100%;flex:0 0 140px;display: flex;align-items:flex-start;justify-content: center;}
.s0 .nav.playintro a.navlink {opacity: 0;}

.scrolled .nav {background:rgba(242,229,217,0.9);top:0;padding:20px;height:80px;}
.scrolled .homelink,
.s0.scrolled .nav .homelink,
.scrolled .nav .homelink {top:25px;height:100px;position:relative}
.scrolled .navlink {align-items: center;}

/**** page stuff ****/
.pageintro {background:#F2E5D9;min-height:100vh;box-sizing: border-box;padding:calc(5vh + 58px) 10vw 40px 10vw;position:relative;display:flex;flex-direction: column;text-align: center;}
.pageintrotext {flex:1 1;display:flex;flex-direction: column;justify-content: center;align-items: center;}
.pageintro .downarrow {flex:40px 0 0;width:100%;background:url(/img/ui/downarrowgreen.svg) 50% 50% no-repeat}
.textdiamond {display:inline-block;height:1em;vertical-align:text-top;margin:0 0.5em}
.textdiamond.lightdiamond path {fill:#F2E5D9;}
.textdiamond.darkgreendiamond path {fill:#21402E;}

/**** contact ****/
.footer {min-height:100vh;display:flex;width:100%;text-align: center; position: relative;}
.footer .pageborder{z-index: 20;}
.footer {.pageborder .topborder .navborder {top: 5vh;}}
.s0 .footer {margin-top:-2px}
.footer p {margin:20px 0}
.footerhalf {flex:0 0 50%;display:flex;flex-direction: column;justify-content: center;align-items: center;padding:10vw 0}
.footerleft, .homeleft .slide5 {background: #21402E;font-size:24px;line-height:1.3em}
.footerlogo {margin-bottom:40px}
.footerbuttons {display:flex;flex-wrap: wrap;margin-top:20px;justify-content: center;flex-direction: column;align-items: center;}
.footerbuttons a {margin:0 15px 15px 15px}
.footerright, .homewrapper .slide5 {background:url(/img/content/textures/greentexture.jpg) 50% 50% no-repeat;background-size:cover;font-size:16px;line-height:1.3em}
.footerborder {margin:20px 0 40px 0}
.agencies {display:flex;align-items:flex-start;gap:2rem;justify-content: center;}
.agentlogo {margin-bottom:20px;display:inline-block}
.slide5 .slideinner {justify-content: center;direction:ltr;}

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

/**** home ****/

.animlogo {display:none}
.s0 {overflow: hidden;}
.s0 .animlogo {display:block}
.s0 .staticlogo {display:none}
.homesliders {width:100%;height:100vh;position:relative;}
.homesliders .slide:not(.slide1) * {opacity:0;transition:opacity 1.5s 0.5s}
.homesliders .slide:not(.slide1).slick-active * {opacity:1}
.introbg {position:fixed;top:0;left:0;width:100%;height:100vh;background:url(/img/content/textures/whitetexture.jpg) 50% 50% no-repeat;background-size: cover;z-index:400;pointer-events: none;}

.homewrapper {height:101vh;width:100%;margin-top:-2px;margin-bottom:-2px;font-size:30px;line-height:1.3em}
.homewrapper .slide {height:101vh;width:50% !important;margin-left:50%;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content: center;box-sizing: border-box;padding:10vw}
.homewrapper .slide1 {background:url(/img/content/textures/whitetexturefade.jpg) 50% 50% no-repeat;background-size:cover;padding:calc(5vh + 76px) 10vw calc(5vh + 20px) 10vw}
.homewrapper .slide1 .linebutton {margin-top:20px}
.homewrapper .downarrow {font-size:20px;line-height: 1.3em;padding-bottom:60px;background:url(/img/ui/downarrowgreen.svg) bottom center no-repeat;background-size: auto 40px;margin-top:60px}

.homewrapper .slide2 {background: #D5DBC4;}
.slideinner {height:55vh;display:flex;flex-direction: column;justify-content: flex-start;align-items:center}
.homewrapper .slide2 .slideinner, .homewrapper .slide3 .slideinner, .homewrapper .slide4 .slideinner {padding-bottom:40px;justify-content: space-between;box-sizing: border-box;}
.homewrapper .slide3 {background:#21402E}
.homewrapper .slide4  {background:url(/img/content/textures/whitetexturefade.jpg) 50% 50% no-repeat;background-size:cover}




.homeleft {height:101vh;width:50%;position:absolute;top:0;left:0;pointer-events: none;}
.homeleft .slide {height:101vh;width:100% !important;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content: center;box-sizing: border-box;}
.homeleft .slide1 {background:#F2E5D9;padding:calc(5vh + 88px) 20px calc(5vh + 32px) 100px}
.homeleft .slide1 .homehero {background:url(/img/content/home/hero.jpg) 50% 50% no-repeat;background-size:cover;height:100%;width:100%;}
.homeleft .slide1 .homehero .slide {width:100%;height:100%}
.homeleft .slide2 {background:#BED3B3;padding:5vh 0}
.borderpic {width:20vw;padding:10px 0;border-top:1px solid #21402E;border-bottom:1px solid #21402E;}
.borderpic .pic {width:20vw;height:20vw}
.homeleft .slide3 {background:url(/img/content/textures/greentexture.jpg) 50% 50% no-repeat;background-size:cover}
.homeleft .slide3 .slideinner {justify-content: space-between;}
.homeleft .slide3 .slideinner svg {height:70%}
.homeleft .slide4 {background: #F2E5D9;}

.homeleft.slick-slider{ transform: rotate(180deg); margin-top:-0.5vh}
.homeleft .slick-slide { transform: rotate(-180deg); }

.s0 .footer {display:none}


/**** building ****/
.buildingpics {position: relative;width:100%;box-sizing: border-box;padding:40px 40px 10vw 40px;}
.buildingpics .pic1 {width:50vw;height:60vw;margin-bottom:5vw}
.buildingpics .textpic {width:75vw;display:flex;align-items:center;justify-content: space-between;margin-bottom:10vw}
.buildingpics .textpic .text {padding:0 5vw 0 40px} 
.buildingpics .pic4 {height:18vw;width:25vw;margin:0 5vw 0 10vw;z-index:300}
.buildingpics .pic5 {width:50vw;height:40vw}

.buildingpics .col1 {position:relative;z-index:10}
.buildingpics .col2 {position:absolute;top:-10vw;right:0;box-sizing: border-box;padding-top:15vw;padding-right:40px;z-index:5;z-index:200}
.buildingpics .pic2 {width:40vw;height:25vw}
.buildingpics .pic3 {width:30vw;height:22vw;margin:-10vw 20vw 0 -15vw;z-index:100}
.buildingpics .pic6 {width:20vw;height:34vw;margin:15vw 0 0 20vw}

.features, .akatuki {box-sizing: border-box;position: relative;padding:5vw 40px 0 5vw}
.features .slide {min-height:calc(90vh - 5vw);width:100%}
.features .slideinner, .akatuki-inner {display:flex;flex-direction: row;min-height: calc(90vh - 5vw);width:100%;justify-content: space-between;align-items:stretch}

.features .text {position:relative}
.gallerycontrols, .explore .gallerycontrols {position:absolute;bottom:5vw;left:0;display:flex;align-items: center;height:40px;z-index:1200;}

.cycle-arrow {flex:0 0 40px;width:40px;height:40px;background:50% 50% no-repeat;background-size:contain;cursor: pointer;}
.cycle-prev {background-image:url(/img/ui/leftarrowlight.svg)}
.cycle-next {background-image:url(/img/ui/rightarrowlight.svg)}
.cycle-pager {height:100%;display:flex;align-items:center;padding:0 20px;flex:1 1}
.cycle-pager .slick-dots {margin:0;padding:0;list-style: none;display:flex;align-items:center}
.cycle-pager .slick-dots li {margin:0;padding:0;}

.cycle-pager span, .cycle-pager .slick-dots li button {flex:0 0 5px;width:5px;height:22px;background:url(/img/ui/diamondlight.svg) 50% 50% no-repeat;background-size:contain;margin:0 15px;cursor: pointer ;overflow: hidden;text-indent: -9999px;opacity:0.2;transition:opacity 0.5s;border:0}
.cycle-pager span.cycle-pager-active, .cycle-pager .slick-dots li.slick-active button {opacity: 1;}

.darkcontrols .cycle-prev {background-image:url(/img/ui/leftarrowgreen.svg)}
.darkcontrols .cycle-next {background-image:url(/img/ui/rightarrowgreen.svg)}
.darkcontrols .cycle-pager span, .darkcontrols .cycle-pager .slick-dots li button {background-image:url(/img/ui/diamondgreen.svg)}

.features h2, .akatuki h2 {margin:0}
.features .icon, .spec .icon, .akatuki .icon {width:7vw;height:7vw;margin:2vw 0;max-width:160px;max-height:160px}
.features p, .akatuki p {max-width:300px}
.features .pic, .akatuki .pic {flex:0 0 60vw;margin-left:5vw}

.spec {position:relative;display:flex;align-items: flex-start;flex-direction:column}
.specside {padding:5vw;box-sizing: border-box}
.specleft {position:relative;top:0;flex:1 1 40%}
.specright {flex:1 1 60%;padding-top:0}

.spec ul {list-style: none;display:flex;flex-wrap:wrap;margin:0;padding:0;text-align:center;justify-content: center;}
.spec ul li {flex:0 0 20%;box-sizing: border-box;padding:0 2vw;margin:0 0 2.5vw 0}
.spec .icon {margin:0 auto 30px auto}


/**** areas ****/
.fullgallery {box-sizing: border-box;padding:5vw 40px calc(60px + 5vw) 40px;position: relative;}
.fullgallery .cycle-slideshow {width:100%;height:calc(85vh - 60px)}
.fullgallery .slide, .fullgallery .pic {width:100%;height:100%}
.fullgallery .gallerycontrols {bottom:5vw;left:auto;right:40px}
.fullgallery .cycle-caption {padding-top:20px;position: absolute;bottom:calc(5vw + 20px);}
.fullgallery .caption {color:#fff;text-shadow: 2px 2px 5px rgba(0,0,0,0.65);position:absolute;bottom:10px;right:10px;font-size:12px}

.availabletable {padding:5vw}
thead .hatton {text-align: center;}
.availabletable table {width:100%;margin:0;font-size:24px;line-height:100%}
.availabletable table td {border:1px solid #21402E;padding:15px}
.availabletable table tr td:nth-child(1),
.availabletable table tr.hatton td:nth-child(2),
.availabletable table tr td:nth-child(3) {border-right-width: 2px;}
.availabletable table h2 {margin:0}
.availabletable table tr td:first-child {border-left:none}
.availabletable table tr td:last-child {border-right:none}
.availabletable table tr:last-child td {border-bottom:none}
.availabletable table thead td {border-top:none;font-size:30px;line-height:1.3em}



.spacer{height: 100px; width: 100%; background-color: #F2E5D9; @media screen and (max-width: 959px) {display: none;}}
.plansection {padding:7vw 5vw 10vw; position: relative;}
.plansection {.homesliders .topborder, .topborder.navborder{top: 5vh}}
.plansection .cycle-slideshow {position:relative;overflow:hidden;width:80vw;margin-left:auto;margin-right:auto}
.plantabs {display:flex;justify-content: space-between;box-sizing: border-box;width:100%;margin-bottom:5vw}
.plansection .slide {width:100%}
.planslideinner {display:flex;width:100%;height:100%}
.plansection .text {flex:0 0 300px;display:flex;flex-direction: column;justify-content: center;box-sizing: border-box;align-items:flex-start}
.planholder {height:60vh;flex:1 1 80vh;padding:0px;box-sizing: border-box;}
.plan {width:100%;height:100%;background:50% 50% no-repeat;background-size:contain}
.north {position:absolute;bottom:0;left:0vw;font-size:12px;line-height: 1.1em;padding-left:60px;background:url(/img/content/areas/north.svg) top left no-repeat;background-size:50px auto}
.key {margin-bottom:20px}
.key p {margin-bottom:5px}
.key ul {margin:0;padding:0;list-style-type: none;}
.key ul li {margin:0 0 5px 0;padding:0 0 0 22px;position:relative}
.key ul li:before {content:'';display:block;box-sizing: border-box;position:absolute;top:2px;left:0;width:15px;height:15px;border:1px solid #21402E;}
.key ul li.core:before {background:#C9D9B8}
.key ul li.office:before {background:#FFFFFF}
.key ul li.wcs:before {background:#AFB8B2}
.key ul li.terrace:before {background:#4D6658}

.downloadplans {padding:5vw;text-align: center;}


/**** location ****/
.locationintro {box-sizing: border-box;display: flex;justify-content: space-between;padding:5vh 40px 10vh 40px;height:105vh}
.locationintro .pic {flex:0 0;flex-basis:calc(50% - 10px)}

.locationmap {position:relative;box-sizing: border-box;padding:0 7.5vw;}
.locationmap {.homesliders .topborder, .topborder.navborder{top: -50px}}
.locationmap {.bottomborder{bottom: -50px}}
.maptabs {width:100%;position:relative; padding: 0 50px;}
.locationmap .maptabs{padding: 0;}


@media screen and (max-width: 959px) {
	.maptabs {padding: 0 0px;}
}
.maptabs ul {list-style: none;margin:0;padding:0;display:flex;justify-content: center;}
.maptabs ul li {margin:0 20px;border-top:1px solid #21402E;border-bottom:1px solid #21402E;padding:8px 0 6px 0;flex:0 0 140px;text-align: center;transition:background 0.2s;background: rgba(190, 211, 179, 0);cursor:pointer;box-sizing: border-box;height:36px;}
.maptabs ul li.active, .maptabs ul li.cycle-pager-active {background: rgba(190, 211, 179, 1);}
.maptabs ul li:hover {text-decoration: underline;}

.maplist {display:flex;margin-top:2.5vw}
.maplist .listcolumn {flex:0 0 40%;position:relative}
.amenitylist {height:100%;width:100%;display:flex;align-items:center;opacity:0;pointer-events: none;transition: opacity 0.5s;position:absolute;top:0;left:0;}
.amenitylist.active {opacity: 1;pointer-events: all;}
.amenitylist ul {list-style: none;display:flex;flex-wrap:wrap;width:100%}
.amenitylist ul li {flex: 0 0 50%;box-sizing: border-box;padding:0 20px;margin:0 0 5px 0;background:url(/img/ui/arrowbulletgreen.svg) left 3px no-repeat;background-size:10px auto;cursor: pointer;}
.amenitylist ul li:hover {text-decoration: underline;}

.mapcolumn {flex:0 0 60%}
.mapholder, #map {width:100%;height:70vh}

.gm-style .gm-style-iw-c {border-radius:0}
.gm-style-iw-chr {position:absolute;top:0;right:0}
.gm-ui-hover-effect {width:24px !important;height:24px !important}
.gm-ui-hover-effect > span {margin:0 !important;width:16px !important;height:16px !important;position:relative;right:-4px}
.gm-style .gm-style-iw-c, .gm-style .gm-style-iw-tc::after {background:#F2E5D9}
.infotext {padding:20px 12px 8px 12px;font-family: "Carisma-med", Arial, sans-serif;color:#21402E;}

.connectintro {display: flex;box-sizing: border-box;padding:10vw 5vw 0 5vw}
.connectside {box-sizing: border-box;flex:0 0 50%;padding-right:5vw}
.connectintro p {max-width:600px}
.connectmap {padding:5vw 7.5vw 10vw 7.5vw;text-align: center;}
.connectmap img {width:100%;max-width:1200px;margin:0 auto}

.explore {position:relative}
.explore .connectintro {padding-top:5vw}
.explore .gallerycontrols {left:5vw}
.explorecaro {padding:2.5vw 0 calc(5vw + 60px) 5vw}
.explorecaro .slide {width:20vw;margin-right:20px}
.explorecaro img {margin-bottom:20px}
.explorecaro .text {padding-left:25px;background:url(/img/ui/uparrowgreen.svg) top left no-repeat;background-size:15px auto}


/**** contact ****/
.s4 .staticlogo .st0, .lightnav .staticlogo .st0 {
  fill: #BED3B3;
}
.s4 .staticlogo .st1, .lightnav .staticlogo .st1 {
  fill: #21402E;
}
.s4 .nav a, .lightnav a {color:#BED3B3}
.s4 .topborder, .s4 .bottomborder {position:absolute}
.s4 .footerlogo {display:none}
.contacttext {display:none}
.s4 .contacttext {display:block}
.s4 .footer .pageborder.topborder {display: none;}




/****************************************************
* 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;}*/
.caps {text-transform:uppercase;letter-spacing:0.1em}
.num {text-align:right}



/* #Media Queries
================================================== */
	
	/* biggest desktop */
	@media only screen and (max-width: 1300px) {
		.nav {font-size:15px}
		.nav .navlink {flex:0 0 100px}
		
		.features .gallerycontrols .cycle-pager {display:none}
		.features .gallerycontrols .cycle-prev {margin-right:40px}
		
		/**** areas ****/
		.availabletable table {font-size:16px;line-height:1.3em}
		.availabletable table thead td {font-size:24px;line-height:1.3em}
		.maptabs ul li {margin:0 10px}
		
		/**** location ****/
		.explorecaro .slide {width:30vw}
		
		/**** footer ****/
		.footer p {font-size:16px;line-height:1.3em}
		.agency p {font-size:14px}
	}
	
	/* bigger desktop */
	@media only screen and (max-width: 1229px) {}

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width:1099px) {
		.plansection .text {padding-left:0}
		.north {left:0}
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		
		/**** nav ****/
		.nav {top:40px;height:106px}
		.nav .homelink {width:150px;height:106px;scale:1;text-align: center;}
		.nav .navlink {display:none}
		.homesliders .topborder, .topborder.navborder {top: 93px;}
		.navbutton {width:40px;height:40px;background:rgba(242, 229, 217,0.8) 50% 50% no-repeat url(/img/ui/menu.svg);background-size:20px auto;position: fixed;top:40px;right:40px;z-index:3000;cursor: pointer;}
		.menuopen .navbutton {background-image:url(/img/ui/close.svg);background-size:18px auto}
		.navbg {background:rgba(242, 229, 217,0.9);transition: height 0.5s;z-index:1500}
		.menuopen .navbg {height:100vh}
		.mobilenav {width:100vw;height:100vh;display:flex;align-items:center;justify-content:center}
		.mobilenavinner {display: flex;flex-direction:column;align-items:center;font-size:30px;line-height:1em}
		.mobilenav .footerborder {margin:5vw 0}
		.mobilenav a {margin:10px 0;color:#21402E;text-decoration: none;}
		
		.s4.menuopen .staticlogo .st0, .lightnav.menuopen .staticlogo .st0 {
		fill: #21402E;
		}
		.s4.menuopen .staticlogo .st1, .lightnav.menuopen .staticlogo .st1 {
		fill: #BED3B3;
		}
		.menuopen .pageborder.lightgreenborder {
		background: #21402E;
		}
		.hidenav .nav {pointer-events: none;}
		.menuopen .nav .navlink {opacity: 1 !important;pointer-events: all;}
		.s4 .nav a, .lightnav a {color:#21402E}
		
		.scrolled .nav {background:transparent;top:40px;padding:0px;height:106px;opacity:0;pointer-events: none;}
		.menuopen.scrolled .nav {opacity:1;pointer-events: all}
		.scrolled .homelink,
		.s0.scrolled .nav .homelink,
		.scrolled .nav .homelink {top:0;height:106px;position:relative}
		.scrolled .navlink {align-items: center;}
		/**** home ****/
		
		h1 {font-size:40px;line-height:1.3em}
		h2 {font-size:30px;line-height:1.3em}
		
		
		.homewrapper {height:51vh;width:100vw;padding:50vh 0 0 0}
		.homewrapper .slide {height:51vh;width:100vw !important;margin:0%;}
		
		.homewrapper .slide1 a {display:none}
		.homewrapper .downarrow {background-image:url(/img/ui/swipe.svg);background-size:auto 30px}
		.homewrapper .slide2 .slideinner, .homewrapper .slide3 .slideinner, .homewrapper .slide4 .slideinner {padding-bottom:0}
		
		.slideinner {width:100%;height:42vh}
		.borderpic {width:35vw}
		.borderpic .pic {width:35vw;height:35vw}
		
		[dir='rtl'] .slick-slide
		{
			float: left;
		}
		.homeleft {height:50vh;width:100vw;direction:ltr;/*pointer-events: all;*/}
		.homeleft .slide {height:50vh;width:100vw !important;}
		.homeleft.slick-slider {
		/*transform: rotate(0deg);*/
		margin-top: 0vh;
		}
		/*.homeleft .slick-slide { transform: rotate(0deg); }*/
		.homeleft .slide1 {padding:0}
		
		.homeleft .footerlogo {display:none}
		.homeleft .footerborder {display:none}
		/*.homeleft .footersqft {display:none}*/
		
		.homeleft .slide5 .slideinner {justify-content: flex-end;}
		
		/*.hidenav[rel='show0'] .nav {opacity:1}
		body[rel='show4'] .nav {opacity:0}*/
		body[rel='show1'] .nav,
		body[rel='show2'] .nav,
		body[rel='show3'] .nav,
		body[rel='show4'] .nav {opacity:0}
		
		body[rel='show1'] .homesliders .pageborder,
		body[rel='show2'] .homesliders .pageborder,
		body[rel='show3'] .homesliders .pageborder,
		body[rel='show4'] .homesliders .pageborder {opacity:0;/*transition:opacity 0.2s*/}
		
		
		/**** building ****/
		.features .slide, .features .slideinner, .akatuki-inner {
		min-height: 70vw;
		}
		.cycle-arrow {flex:0 0 30px;width:30px;height:30px}
		.cycle-pager {padding:10px 0}
		.cycle-pager span, .cycle-pager .slick-dots li button {margin:0 10px}
		.buildingpics .textpic {flex-direction: column;align-items: flex-start;}
		.buildingpics .pic4 {margin-top:0vw}
		
		.spec ul li {flex:0 0 33%}
		
		/**** areas ****/
		.fullgallery .cycle-slideshow {height:80vw}
		
		.maptabs {align-items: center;}
		.maptabs ul {flex-wrap: wrap;flex:1 1;}
		.maptabs ul li {margin:10px;flex:0 0 110px}
		.maptabs.plantabs ul li {flex:0 0 75px}
		.plansection .cycle-slideshow {width:100%}
		.planslideinner {flex-direction: column;padding-bottom:40px}
		.plansection .text {flex-direction:row;width:100%;justify-content: space-between;flex-wrap:wrap;flex:1 1}
		.plansection .text h2, .plansection .text p, .plansection .text .key {flex:0 0 50%}
		.plansection .text p {order:3}
		.plansection .text a {order:4}
		.planholder {padding:0;flex:60vw}
		
		/**** location ****/
		.locationintro {height:50vw}
		.maplist {flex-direction: column-reverse;}
		.mapholder, #map {height:70vw}
		.mapholder {padding-bottom:20px}
		.maplist .listcolumn {flex:0 0 350px}
		.amenitylist {align-items: flex-start;}
		.explorecaro .slide {width:40vw}
		
		/**** footer ****/
		.footer {flex-direction: column;}
		.footerhalf {padding:20px 0;flex:1 1 50vh;box-sizing: border-box;}
		.footer .footerleft {justify-content: center}
		.footerlogo {margin-bottom:40px}
		.s4 .footerleft {padding-top:200px}
		.footerright {justify-content: flex-start;}
		 .s4 .bottomborder {display:none}

	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		
		h2 {font-size: 20px;line-height:1.3em;}
		h3 {font-size:18px;line-height: 1.3em;}
		h4 {font-size:16px;line-height: 1.3em;}
		
		.light {font-family: 'Carisma-reg';}
		
		.pageintro {padding:5vw;min-height:80vh;padding-top:20vh}
		
		/**** nav ****/
		.navbutton {top:20px;right:20px}
		.mobilenavinner {font-size: 24px;line-height:1em;}
		
		/**** home ****/
		.homewrapper {font-size:20px;line-height:1.3em}
		.homewrapper .slide1 {padding:5vw}
		.homewrapper .downarrow {margin-top:30px;background-size:auto 25px}
		.homesliders .bottomborder {display:none}
		
		.homeleft .slideinner {justify-content: center;}
		
		.borderpic {
			width: 50vw;
		}
		.borderpic .pic {
			width: 50vw;
			height: 50vw;
		}
		.footerleft, .homeleft .slide5 {font-size:20px;line-height:1.3em;padding:5vw}
		.footer .footerleft {padding-top:10vw}
		.footerborder {margin:10px auto 20px auto}
		.s0 .footerborder {display:none}
		.s0 .slide5 .caps {font-size:16px;line-height:1.2em;display:none}
		.s0 .emaillong {display:none}
		.s0 .emailshort {display:unset}
		.linebutton {font-size:13px;line-height:0.9em}
		.homewrapper .slide5 {padding-left:5vw;padding-right:5vw}
		.agencies {flex-direction: column;}
		.agency {width:100%}
		.agents {display:flex;width:100%;justify-content: space-around;flex-wrap: wrap;}
		.agentlogo {margin-bottom:5px}
		.agent {margin:10px;font-size:14px;line-height:1.2em;margin-top:0}
		
		
		/**** building ****/
		.buildingpics {position: relative;width:100%;box-sizing: border-box;padding:0px 0px 10vw 0px;}
		.buildingpics .pic1 {width:70vw;height:80vw;margin-left:5vw}
		.buildingpics .textpic {width:100vw;margin-bottom:10vw}
		.buildingpics .textpic .text {width:100%;text-align: center;padding:0; }
		.buildingpics .textpic .text h3, .spec h2 {font-size:24px;line-height:1.3em}
		.buildingpics .pic4 {width:55vw;height:45vw;margin-left:40vw}
		.buildingpics .pic5 {width:100vw;height:60vw}
		.buildingpics .col2 {position:relative;padding:0}
		.buildingpics .pic2 {width:60vw;height:40vw}
		.buildingpics .pic3 {width:60vw;height:50vw;margin:5vw 20vw}
		.buildingpics .pic6 {width:60vw;height:90vw;margin:-40vw 0 0 0vw}
		.features, .akatuki {padding:0 0 40px 0}
		.features .slideinner, .akatuki-inner {flex-direction:column-reverse}
		.features .pic, .akatuki .pic {flex:0 0 60vw;width:100%;margin:0 0 5vw 0}
		.features .text {padding:0 5vw 80px 5vw}
		.akatuki .text {padding-left:5vw}
		.gallerycontrols {left:5vw}
		.features .icon, .spec .icon, .akatuki .icon {width:90px;height:90px;margin-top:20px;margin-bottom:20px}
		.features .slide, .features .slideinner, .akatuki-inner {height:auto;}
		
		
		.spec {flex-direction:column}
		.specside {width:100%}
		.specleft {position: relative;text-align: center;padding-top:10vw;}
		.spec ul li {padding:0 20px}
		.spec ul li {flex:0 0 50%}
		
		/**** areas ****/
		.fullgallery {padding-left:0;padding-right:0;padding-bottom:130px}
		.fullgallery .cycle-caption {bottom:90px;padding:10px;text-align:center;box-sizing:border-box ;width:100%;height:40px}
		.fullgallery .gallerycontrols {bottom:40px;right:0;width:100%;justify-content: space-around;padding:0 20px;box-sizing: border-box;}
		.fullgallery .cycle-pager{justify-content: center;}
		
		.availabletable table h4 {font-size:14px;line-height:1.3em;margin:0}
		.availabletable table td {padding:8px}
		.availabletable table thead td, .availabletable table h2 {font-size:15px;line-height:1.3em}
		
		
		.plansection {padding-bottom:15vw}
		.maptabs {font-size:13px}
		.maptabs .cycle-arrow {display:none}
		.maptabs ul li {flex:1 1;margin:0 2px;height:auto;display:flex;align-items:center;justify-content: center;}
		.maptabs.plantabs ul li {flex:1 1}
		.plantabs ul {padding:10vw 0}
		.planholder {padding-top:10vw}
		.plansection .text h2 {flex:0 0 65%}
		.plansection .text .key {flex:1 1}
		
		/**** location ****/
		.locationintro {padding:10px 10px 10vw 10px;height:70vw}
		.locationintro .pic {flex-basis:calc(50% - 5px)}
		.locationmap {padding-left:10px;padding-right:10px}
		.amenitylist ul {font-size:13px;line-height:1.3em}
		
		.gm-style .gm-style-iw-d {overflow:hidden !important}
		
		.connectsection {position: relative;}
		.connectintro {flex-direction: column;}
		.connectmap {height:75vw;overflow-x:scroll;position:relative;padding-bottom:60px}
		.connectmap img {height:75vw;width:auto;display:block}
		.connectsection:after {content:'';display:block;width:100%;height:40px;background:50% 50% no-repeat url(/img/ui/drag.svg);background-size:auto 30px;position:absolute;bottom:0px;left:0;}
		
		.explorecaro .slide {width:80vw}
		.akatuki {padding-bottom:10vw}
		
		/**** contact ****/
		.s4 .footerleft {padding-top:180px}
		.s4 .footerbuttons {margin-top:0}
		
		
		.footerlogo {margin-bottom:20px;width:150px}
		
		
	}

	/* 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: 'Hatton';
	        src: url('/fonts/PPHatton-Medium.woff') format('woff');
	    font-weight: 500;
	    font-style: normal; }
		
@font-face {
	    font-family: 'Carisma-light';
	        src: url('/fonts/carismaclassic-300-light-2016.02.05-webfont.woff') format('woff');
	    font-weight: normal;
	    font-style: normal; }
		
@font-face {
	    font-family: 'Carisma-reg';
	        src: url('/fonts/carismaclassic-400-regular-2016.02.05-webfont.woff') format('woff');
	    font-weight: normal;
	    font-style: normal; }
		
@font-face {
	    font-family: 'Carisma-med';
	        src: url('/fonts/Carisma-Medium.woff') format('woff');
	    font-weight: normal;
	    font-style: normal; }