/*
font-family: century-gothic

*/


:root {
	--col-main: #033087;
	--col-alt: #033087;
	--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:"century-gothic"; }

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

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


page { display: block; width: 1080px; height: 1920px;  margin: 0 auto; opacity: 0; z-index:2; position: absolute; top: 0; left: 0; 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: 100%; height: 100px; position: absolute; bottom: 0; left: 0; text-align: center; z-index: 9; background: var(--col-main); }
nav > a { display: block; position: absolute; left: 40px; top: 38px; width: 180px; z-index: 3;}
nav div { display: flex; gap: 0px; justify-content: flex-end; padding-right: 40px;}
nav div a { display: block;font-size: 12px; line-height: 100px; text-transform: uppercase; color: #fff; font-weight: 700; padding: 0 20px;}
nav div a.active { background-color: #fff; color: var(--col-main)}

img.bg { display: block; width: 100%; height: 100%; object-fit: cover;}

a.btn { line-height: 72px; display: table; margin: 0 auto; padding: 0 40px; color: #fff; background: var(--col-main); font-size: 25px; text-transform: uppercase;  width: auto; margin-top: 50px}

div.headline { display: block; position: absolute; top: 80px; left: 0; width: 100%;}
div.headline > img { display: block; width: 300px; margin: 0 auto 50px;}
h1 { margin: 0 auto; font-size: 45px; font-weight: 700; display: block; width: 100%; text-align: center; text-transform: uppercase; line-height: 1.25; color: var(--col-main); }
h2 { margin: 100px auto 30px; font-size: 45px; font-weight: 700; display: block; width: 100%; text-align: center; text-transform: uppercase; line-height: 1.25; color: var(--col-main); }

div.content { position: absolute; left: 0; top: 0; width: 100%; z-index: 5;}
div.nav { display: flex; position: absolute; width: 100%; top: 800px; left: 0; gap: 25px; flex-direction: column; justify-content: flex-start;}
div.nav a { display: block; width: 100%; text-align: center; text-transform: uppercase; line-height: 1.25; color: var(--col-main); font-size: 29px; font-weight: 700}
img.homelogo { display: block; width: 683px; top: 108px; left: 198px; position: absolute;}
img.community { display: block; width: 960px; margin: 496px auto 74px;}

div.gallery-nav { display: flex; gap: 70px; justify-content: center; margin: 0 auto 75px;}
div.gallery-nav a { color: var(--col-main); opacity: .2; font-size: 45px; font-weight: 700; text-transform: uppercase;  display: block; transition: .3s all linear}
div.gallery-nav a.active { opacity: 1; }
div.gallery-holder { display: block; width: 100%; position: absolute; opacity: 0; left: 200vw;}
div.gallery-holder.active { opacity: 1; left: 0; position: relative;}
div.slider-index { display: flex; gap: 17px; flex-wrap: wrap; width: 964px; margin: 45px auto 0;}
div.slider-index a { display: block; width: 179px; position: relative; height: 112px; display: block; transition: .3s all linear}
div.slider-index a img { display: block; width: 100%; height: 100%;  object-fit: cover; object-position: center center;}
div.slider-index a:after { content:""; display: block; position: absolute; left: 0; top:0; width: 100%; height: 100%; background: var(--col-main); opacity: 0; transition: .3s all linear}
div.slider-index a.active:after { opacity: .8}

div.slider label { position: absolute; bottom: 24px; left: 0; width: 100%; text-align: center; font-size: 30px; color: #fff; font-weight: 700; text-transform: uppercase;  display: block;}
div.slick-slide { position: relative; width: 1080px; overflow: hidden;}
div.slick-slide img { height: 878px; max-width: 9999px; position: relative; left: 0; transition: left 4s ease-in 1.2s}
div.slick-slide iframe { height: 878px; max-width: 9999px; position: relative; left: 0; transition: left 4s ease-in 1.2s}

div.floorplan-index { display: flex; gap: 50px; padding: 0 60px; margin-top: 75px;}
div.collections { width: 472px;}
div.collections a { width: 100%; display: block; margin-bottom: 9px; line-height: 118px; padding: 0 23px; position: relative; background: #fff; color: var(--col-main); font-size: 37px; font-weight: 700; text-align: left; text-transform: uppercase;}
div.collections a:after { content:""; width: 18px; display: block; height: 100%; position: absolute; top: 0; right: 38px; background: url(/img/svg/arrow2.svg) no-repeat center center; background-size: contain;}
div.collections a.active { color: #fff; background-color: var(--col-main); }
div.collections a.active:after { background-image: url(/img/svg/arrow2-white.svg) }
div.floorplan-list { width: 434px;}
div.floorplan-list a { display: none; width: 100%; justify-content: space-between; gap: 0; padding: 8px 0;}
div.floorplan-list a.active { display: flex}
div.floorplan-list a span { display: block; width: 35%; text-align: left; font-size: 20px; color: #6C736B; font-weight: 700;}
div.floorplan-list a span:last-child { width: 30%; text-align: right}
div.floorplan { display: none; background: #fff; position: absolute; top: 0; left: 0;  width: 100%; height: 100%; z-index: 7;}
div.floorplan.active { display: block;}
div.floorplan div.floorplan-plan { display: block; margin: 47px auto; width: 100%; height: 1248px;}
div.floorplan div.floorplan-plan img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center;}

div.saver {display: block; width: 100%; height: 100%; position: relative; overflow: hidden;}
div.saver > div {display: block; width: 100%; height: 100%; position: relative; }
div.saver > div img {max-width: 9999px; height: 1920px; position: relative; left: 0; transition: left linear 30s; }
.running div.saver > div img {left: -2333px; }
div.saver > img { position: absolute; display: block; top: 733px; left: 232px;  width: 616px; }

/*screensaver iframe { display: block;}*/

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: #8F4A21; color: #fff; font-size: 20px; padding: 0}
div.email-plans button:hover { background-color: #A4754F}
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: 1080px; height: 1920px; display: block; position: absolute; z-index: 100; top: 0px; left: 0}

div.video-holder { display: none; width: 100%; height: 100%; z-index: 100; position: absolute; top: 0; left: 0;  background: rgba(0,0,0,0.95)}
div.video-holder div.iframe { display: none; width: 100% !important; height: 100% !important; z-index: 100; position: absolute; top: 0; left: 0; border: 0; padding: 0 !important}
div.video-holder iframe { display: block; width: 100%!important; height: 100%!important; top: 0; left: 0; border: 0}
div.video-holder.active { display: block}
div.video-holder div.iframe.active { display: block}
a.close-gallery { position: absolute; display: block;  right: 20px; top: 20px; z-index: 5; width: 50px; height: 50px; border-radius: 25px; z-index: 101; background: var(--col-main); padding: 13px}
a.close-gallery img { width: 24px; }

@-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);
  }
}