@import url("https://fast.fonts.net/t/1.css?apiType=css&projectid=e1fa1c54-73f1-4010-a915-d9f78fc57c3e");
    @font-face{
        font-family:"AvertaLight";
        src:url("Fonts/dc836390-131e-464f-91e6-f9f9cf751a35.woff2") format("woff2"),url("Fonts/dffa0023-f2da-40e3-9919-c09dcd31d1f3.woff") format("woff");
    }
    @font-face{
        font-family:"AvertaRegular";
        src:url("Fonts/166ce875-a649-4826-a5a0-a24f2dd89cd5.woff2") format("woff2"),url("Fonts/fc417db9-6d91-4c85-81b1-2ff3d583d149.woff") format("woff");
    }
    @font-face{
        font-family:"AvertaSemibold";
        src:url("Fonts/5b6b0808-79db-4639-ab19-365f715f83b9.woff2") format("woff2"),url("Fonts/0d9ceccf-0cd7-44dc-8c2a-dbc0ed90f149.woff") format("woff");
    }


:root {
	--col-main: #FDBA30;
	--col-alt: #FDBA30;
	--col-border: #CCCCCC;
	--col-text: #1A1818;
	--col-burger: #fff;
}

/* theme */
html { background: #000;}
body {	margin: 0px auto; overflow: hidden; display: block; font-size: 18px;	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-family:"AvertaRegular"; }

#container, body {width: 100%;  position: relative; overflow: auto;}
#mainbody {width: 100%;  position: relative; width: 1920px; height: 1080px; margin: 0 auto; }
div.caption { position: absolute; display: block;}

div.preload { display: none !important}
/*CUSTOM*/


page { display: block; width: 1767px; height: 100%;  margin: 0 auto; opacity: 0; z-index:2; position: absolute; top: 0; left: 153px; transition: opacity .3s ease-in .1s; background: #fff; padding-bottom: 0px; overflow: hidden;}
page section { display: block; width: 100%; height:100%; position: relative; left: 0; top: 0; background: #fff;}
page.active { opacity: 1; z-index: 3; transition: opacity .5s ease-in}

nav { display: block; width: 153px; height: 100%; position: absolute; top: 0; left: 0; text-align: center; z-index: 9; background: #ede3da; }
nav > a { display: block; width: 100%; height: 153px; overflow: hidden;}
nav > a img { display: block; width: 100%;}
nav > a.logo { position: absolute; bottom: 0; left: 0; padding: 0 25px 20px; height: auto;}
nav > a.logo img { display: block; width: 100%; }
/*a.back {display: block; position: absolute; right: 20px; top: 20px; font-size: 40px; color: #000; z-index: 9}*/

/*nav { border-right: 1px solid #000}*/
nav a { display: block; width: 100%; font-size: 19px; color: #da2032; background: #ede3da; height: 153px; padding: 97px 10px 0; text-align: center; position: relative; }
nav a.active { background-color: #da2032; color: #fff; }
nav a:after { content:""; display: block; position: absolute; width: 56px; height: 48px; top: 31px; left: 47px; background: url() no-repeat center bottom; background-size: contain; }

nav a.m-community:after { background-image: url(/img/svg/color/community.svg)}
nav a.m-siteplan:after { background-image: url(/img/svg/color/siteplan.svg)}
nav a.m-floorplans:after { background-image: url(/img/svg/color/floorplans.svg)}
nav a.m-gallery:after { background-image: url(/img/svg/color/interiors.svg)}
nav a.m-features:after { background-image: url(/img/svg/color/features.svg)}
nav a.m-compare:after { background-image: url(/img/svg/color/heart2.svg)}
nav a.active.m-community:after { background-image: url(/img/svg/community.svg)}
nav a.active.m-siteplan:after { background-image: url(/img/svg/siteplan.svg)}
nav a.active.m-floorplans:after { background-image: url(/img/svg/floorplans.svg)}
nav a.active.m-gallery:after { background-image: url(/img/svg/interiors.svg)}
nav a.active.m-features:after { background-image: url(/img/svg/features.svg)}
nav a.active.m-compare:after { background-image: url(/img/svg/color/heart-white.svg)}



div.grid { position: relative; font-size:0; width: 100%; display: block;}
div.grid > div { display: inline-block; vertical-align: middle; position:relative;}

h1 {font-size: 77px; color: #000; font-family: AvertaRegular; line-height: 1; margin-bottom: 50px}
h2 { font-family: Bebas;  font-size: 60px; color: #000; margin-bottom:20px}
h4 { font-family: MaisonBold;  font-size: 28px; color: #000; margin-bottom:20px; text-transform: uppercase;}
h6 { font-family: MaisonBold;  font-size: 18px; color: #000; margin-bottom:30px; }
h2 span { color: var(--col-main)}
p { font-size: 24px; line-height: 1.5; margin-bottom: 30px;}
p:last-child { margin-bottom: 0px}

#home img.logo {position: absolute; top: 60px;    left: 50%;    width: 1000px;    transform: translate3d(-50%, 0%, 0px); display: block}
#home img.aspen-logo {position: absolute; bottom: 50px;    right:50px;    width: 140px;    display: block}

div.overview { display: block; position: relative; padding: 320px 0 0 990px }
div.overview > img { display: block; position: absolute; top: 0; left: 0; width: 889px}
div.overview p { display: block; font-size: 18px; color: #707070; line-height: 1.2; margin-bottom: 60px;}

div.siteplan { display: block; position: absolute; width:100%; height: 100%; }
div.siteplan aside { display: block; position: absolute; width: 459px; height: 100%; top: 0; left: 0; background: #fff;}
div.siteplan div.plan-holder { display: block; position: absolute; left: 459px; width: calc(100% - 459px); height: 100%; top: 0; }
div.siteplan div.siteplan-nav-v { display: none; position: absolute; right: 0; width: 153px; height: 100%; top: 0; background: #fff;}
div.siteplan div.siteplan-nav-v.active { display: block}

a.button { display: block; width: 153px; height: 153px; position: relative; text-align: center; color: #000; background-color: #fff;}
a.button span { display: block; width: 100%; top: 50%; transform: translate3D(0, -50%, 0); text-align: center; font-size: 19px;  position: relative;}
a.button b { display: block; width: 100%; font-family:"AvertaSemibold"; font-weight: normal; font-size: 30px; margin-bottom: 30px}

div.siteplan div.title { display: block; width: 100%; height: 153px; line-height: 153px;  font-size: 38px;  text-align: center;}
div.siteplan div.siteplan-nav { display: none; font-size: 0}
div.siteplan div.siteplan-nav.active { display: block; }
div.siteplan div.siteplan-nav a.button { display: inline-block; width: 153px;}
div.siteplan div.view-all { position: absolute; bottom: 0; left: 0; display: block; width: 100%; }
div.siteplan div.disclaimer { position: absolute; bottom: 0; left: 160px; display: block; width: calc(100% - 160px); padding: 0 30px 45px; font-size: 10px; }

a.button.lot30.active { background-color: #eaded2; color: #fff;}
a.button.lot38.active { background-color: #eaded2; color: #fff;}
a.button.lot15.active { background-color: #eaded2; color: #fff;}
a.button.lot20.active { background-color: #eaded2; color: #fff;}
a.button.lot23.active { background-color: #eaded2; color: #fff;}
/*a.button.lot60.active { background-color: #eaded2; color: #fff;}*/
/*a.button.lot36.active { background-color: #98a9d7}*/
/*a.button.lot40.active { background-color: #EBD462}*/
/*a.button.lot15.active { background-color: #fdc689}*/
/*a.button.lot20.active { background-color: #fce283}*/
/*a.button.lot60.active { background-color: #98c6cb}*/


a.drone-view { position: absolute; bottom: 0; right: 0; display: block;}

div.siteplan-fp { display: none; width: 100%; }
div.siteplan-fp.active { display: block; padding-left: 30px}
div.siteplan-fp a { display: block; width: 100%; border-bottom: 1px solid #D8D8D8; position: relative;}
div.siteplan-fp a.active { color: #eaded2}
div.siteplan-fp a:after { content: ""; display: block; width: 8px; height: 100%; right: 0px; top: 0; position: absolute; background: url(/img/svg/blue/arrow.svg) no-repeat center center; background-size: contain; }
div.siteplan-fp a > div { display: block; width: 100%; font-size: 0}
div.siteplan-fp a div.thumb { display: inline-block; width: 153px; vertical-align: middle;}
div.siteplan-fp a div.thumb img { display: block; width: 100%}
div.siteplan-fp a div.info { display: inline-block; width: calc(100% - 153px); padding-left: 30px; text-align: left; padding-right: 44px; vertical-align: middle;}
div.siteplan-fp h3 {  font-size: 24px; margin-bottom: 15px; }
div.siteplan-fp p { font-size: 14px; margin-bottom: 0px; }

div.drone-view { display: none; width: 100%; position: absolute; top:0; left: 0; height: 100%;}
div.drone-view.active { display: block; }
div.drone-view img { display: block; width: 100%; }
div.drone-view a.button { position: absolute; bottom: 0; left: 0}

div.floorplan { display: block; position: absolute; width:100%; height: 100%; }
div.floorplan aside { display: block; position: absolute; width: 459px; height: 100%; top: 0; left: 0; background: #fff;}
div.fp-details  { display: block;padding: 30px 0 0 50px}
div.floorplan aside > div.title  { display: none;height: 153px; line-height: 153px;  font-size: 38px;  text-align: left; padding-left: 30px}
div.floorplan aside > div.title.active { display: block;}
div.floorplan div.thumb img { display: block; width: 100%;}
div.floorplan div.name { display: block; width: 100%; padding: 0px 0 0px 0px; font-size: 60px; line-height: 1; margin-bottom: 40px;}
div.floorplan div.name small { display: block; width: 100%; font-size: 21px; font-family:"AvertaLight"; margin-top: 10px}
div.floorplan div.plan-holder { display: block; position: absolute; left: 459px; width: calc(100% - 612px); height: 100%; top: 0; padding: 80px;}
div.floorplan div.plan-holder > div { display: block; width: 100%; height: 100%; background: url() no-repeat center center; background-size: contain;}
div.floorplan div.siteplan-nav-v { display: block; position: absolute; right: 0; width: 153px; height: 100%; top: 0; background: #fff;}
#renderings div.siteplan-nav-v .button { display: none}

div.elevation-list a { display: block; width: 100%; border-bottom: 1px solid #D8D8D8; position: relative; text-align: left; font-size: 24px;  padding: 20px 0;}
div.elevation-list a.active { color: #da2032; }
div.elevation-list a small { display: inline-block; font-size: 19px; vertical-align: bottom; position:relative; top: -3px; margin-left: 3px}
div.elevation-list a:after { content: ""; display: block; width: 8px; height: 100%; right: 35px; top: 0; position: absolute; background: url(/img/svg/blue/arrow.svg) no-repeat center center; background-size: contain; }

div.floorplan  div.disclaimer { display: block; width: 100%; font-size: 10px; line-height: 1.25; position: absolute; bottom: 0; left: 736px;padding-bottom:10px}
div.floorplan div.view-options { position: absolute; bottom: 0; left: 0; display: block; width: 100%; font-size: 0; display: none; padding-left: 20px}
div.floorplan div.view-options.active { display: block;}
div.floorplan div.view-options a.button { display: inline-block; vertical-align: bottom; width: 130px; height: 92px; background: #fff; color: #000; padding: 0px 10px 0; position: relative;font-size: 19px; text-align: center;}
div.floorplan div.view-options a.button:before { content:""; display: block; position: relative; top: 0px; left: 0px; width: 40px; height: 40px; background: url() no-repeat center bottom; background-size: contain; margin: 0 auto 20px;}
div.floorplan div.view-options a.button.show-fp-list:before { background-image: url(/img/svg/color/list.svg);}
div.floorplan div.view-options a.button.send-email:before { background-image: url(/img/svg/color/email.svg);}

div.fp-navigation  { display: block; position: absolute; right: 0; width: 153px; bottom: 0; background: #fff;}

div.floorplan div.siteplan-fp div.title   { display: block; width: 100%; height: 153px; line-height: 153px;  font-size: 38px;  text-align: center;}
div.fp-detail { display: none; width: 100%; position: relative;}
div.fp-detail.active { display: block; }

div.rendering { display: block; position: absolute; width:100%; height: 100%; }
div.rendering div.title { display: block; width: 100%; font-size: 77px; line-height: 1; position: absolute; top: 50px; left: 50px;color: #fff;}
div.rendering div.title small { display: block; width: 100%; font-size: 21px; font-family:"AvertaLight"; margin-top: 10px}
div.rendering div.siteplan-nav-v { display: block; position: absolute; right: 0; width: 153px; height: 100%; top: 0; background: #fff;}
div.rendering img#main-rendering { display: block; width: 100%; height:100%; }
div.r-elevations { display: block; position: absolute; width: 153px; left: 0; bottom: 0}
div.r-elevations a { display: block; width: 153px; background: #da2032; padding: 10px; text-align: center; color: #fff; font-size: 19px;}
div.r-elevations a div.thumb { display: block; width: 100%; margin-bottom: 20px;}
div.r-elevations a div.thumb img { display: block; width: 100%}
div.r-elevations a.active { background: #fff; color: #da2032;}
div.r-elevations a.button { padding: 0}

iframe.salefish { display: block; width: 100%; height: 100%; border: 0;}
/*div.siteplan-nav-v { display: none !important;}*/

div.slick-slide { position: relative;}
div.slideshow label { position: absolute; bottom: 30px; left: 0; width: 100%;  display: block; text-align: center; font-size: 19px; color: #fff; z-index: 3;}
#interiors a.button { position: absolute; bottom: 0; left: 0; z-index: 4;}
#features a.button { position: absolute; bottom: 0; right: 0; z-index: 4;}

div.comm-intro { position: absolute; top: 0; left: 0; width: 520px;  padding: 40px 30px 30px 40px; text-align: left}
div.comm-intro h1 { margin-bottom: 30px; font-size: 48px}
div.comm-intro p { font-size: 22px}
div.comm-intro a { font-size: 30px; position: relative; display: inline-block; padding-right: 40px; line-height: 1;font-family:"AvertaSemibold";}
div.comm-intro a:after { content:""; position: absolute; display: block; height: 24px; width: 24px; background: url(/img/svg/arrow-right.svg) no-repeat right center; background-size: 12px 18px; top: 6px; right: 0; }

div.maplegend { position: absolute; left: 0; top: 0; text-align: left; width: 360px; padding: 40px 0px 0 60px;}
div.maplegend h3 { font-size: 32px; font-family:"AvertaLight"; text-align: left; position: relative; margin-left: 0px; margin-top: 18px; color: #dec5ae;}
div.maplegend h4 { padding-left: 3px; font-size: 16px; font-family:"AvertaSemibold"; text-align: left; position: relative;}
div.maplegend h4:after { content:""; position: absolute; width: 16px; height: 16px; left: -22px; top: 0px; display: block}
div.maplegend h4.food:after { background: #242b38}
div.maplegend h4.recreation:after { background: #da2032}
div.maplegend h4.shopping:after { background: #eaded2}
div.maplegend h4.health:after { background: #b0ccdb}
div.maplegend h4.education:after { background: #69828f}
div.maplegend ol { list-style-type: outside; font-size: 14px; margin-bottom: 30px}
div.maplegend ol li { font-size: 14px; margin-bottom: 4px; }
div.areamap a.nav {display: block; position: absolute; bottom: 0; left: 0}

div.features h1 { position: absolute; top: 30px; left: 70px; text-align: left; z-index: 3; display: none; font-size: 40px;}
div.features > div img { width: 1767px; display: block;}
div.features ul.slick-dots { position: absolute; bottom: 20px; left: 0; text-align: center; width: 100%;}
ul.slick-dots li { margin: 0 10px; display: inline-block;}
ul.slick-dots li button { display: block; width: 20px; height: 20px; background-color: #da2032; border-radius: 20px; opacity: 0.3; margin: 0; padding: 0; font-size: 0;}
ul.slick-dots li.slick-active button { opacity: 1;}

div.fp-levels { display: block; margin-top: 40px;}
div.fp-levels a { display: block; font-size: 20px; font-family:"AvertaLight"; color: #000; line-height: 50px; border-bottom: 1px solid #ddd}
div.fp-levels a.active { color: #da2032; font-family:"AvertaSemibold"; }

div.overlay.active { display: block !important; background: rgba(0,0,0,0.5); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99}
div.overlay.active > div { display: block; top: 50%; left: 50%; transform: translate3D(-50%, -50%, 0); width: 980px; position: absolute; z-index: 100}
div.email-plans { width: 100%; padding: 84px 50px;text-align: left; background: #fff;  font-family:"AvertaLight";}
h6 {font-size: 48px; color: #000; margin: 0 auto 28px;  font-family:"AvertaLight";}
div.email-plans input { display: block; width: 100%; padding-left: 20px; border: 1px solid #ccc; font-size: 24px; line-height: 48px; margin-bottom: 20px;}
div.email-plans button { display: table; margin: 0 0 0 auto; width: 120px; height: 48px; text-align: center; line-height: 48px; background-color: #da2032; color: #fff; font-size: 20px; padding: 0}
div.email-plans button:hover { background-color: #eaded2}
a.close-overlay { display: block; margin: 0 0 20px auto; width: 79px; }

screensaver { display: block; z-index: 99; width: 100%; height: 100%; position: absolute; background: #000; left: -200vw; opacity: 0;}
screensaver:after { content:""; position: absolute; width: 100%; height: 100%; z-index: 105; top:0; left: 0; display: block;}
screensaver.active { left: 0; opacity: 1; transition: opacity .5s ease-in;}
screensaver iframe {width: 1920px; height: 804px; display: block; position: absolute; z-index: 100; top: 138px; width: 1640px; height: 687px; left: 140px; top: 198px;}
screensaver div.slick-slide {width: 1920px; height: 1080px; display: block; }
screensaver div.slick-slide img {width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; filter: blur(0px); opacity: 1}
screensaver p { position: absolute; color: #fff; bottom: 30px; left: 0; width: 100%; text-align: center; font-family:"AvertaLight"; font-size: 90px; animation: pulsate-fwd 5s infinite;}

a.toggle-favourite { position: absolute; bottom: 20px; right: 20px; width: 30px; height: 30px; background: url(/img/svg/color/heart2.svg) no-repeat center center; background-size: contain; display: block; z-index: 4;}
a.toggle-favourite.active { background-image: url(/img/svg/color/heart.svg);}
span.toggle-favourite2 { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; background: url(/img/svg/color/heart.svg) no-repeat center center; background-size: contain; display: block; z-index: 4;}


@-webkit-keyframes pulsate-fwd {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes pulsate-fwd {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}


div.compare-holder { width: 100%; height: 100%; padding: 20px;}
div.selected-plans { display: flex; gap: 20px; justify-content: flex-start;}
div.selected-plans a { width: 200px; display: block; position: relative;}
div.selected-plans a > img { width: 100%; display: block; }
div.selected-plans a label { width: 100%; display: block; position: absolute; left: 0; bottom: 0; padding: 10px; text-align: left; color: #fff; font-size: 14px;}
div.compare-area { display: flex; width: 100%; gap: 20px; margin-top: 20px;}
div.compare-area > div { display: block; width: calc(50% - 20px); border: 5px solid #000; height: 900px; position: relative;}
div.compare-area > div.active { border-color: #da2032;}
div.compare-area > div:empty:after { content:"Touch here to activate compare slot"; position: absolute; top: 50%; left:0; width: 100%; text-align: center; display: block; font-size: 20px; color: #000;}
div.compare-area > div.active:empty:after { content:"Select a plan from the list above"; position: absolute; top: 50%; left:0; width: 100%; text-align: center; display: block; font-size: 20px; color: #000;}
div.compare-name { font-size: 20px; color: #000; text-align: left; padding: 20px 10px; line-height: 20px;}
div.compare-plan { display: block; width: 100%; height: calc(100% - 80px); padding: 0 0 20px 0; margin-top: 20px; }
div.compare-plan div { display: block; width: 100%; height: 100%; background: url() no-repeat center center; background-size: contain;}
div.compare-levels { position: absolute; display: flex; gap: 20px; justify-content: flex-end; top: 25px; right: 20px;}
div.compare-levels a { display: block; font-size: 14px; font-family:"AvertaRegular"; text-transform: uppercase; color: #000}
div.compare-levels a.active { color: #da2032}
a.empty-compare { position: absolute; bottom: 10px; right: 10px; width: 25px; display: block}

div.selected-plans { display: flex; gap: 10px; justify-content: flex-start; flex-wrap: wrap;}
div.selected-plans a { width: 110px; display: block; position: relative;}
div.selected-plans a > img { width: 100%; display: block; }
div.selected-plans a label { width: 100%; display: block; position: absolute; left: 0px; bottom: 5px; padding: 0; padding-left: 5px; text-align: left; color: #fff; font-size: 10px; text-transform: uppercase; line-height: 1;}
a.toggle-favourite { display: none !important;}