/* FONTS (via fonts.com)

font-family: braga;
font-family: montserrat;

*/


@font-face {
    font-family: 'saol';
    src: url('fonts/saol.woff2') format('woff2'),
         url('fonts/saol.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'sohnek';
    src: url('fonts/sohnek.woff2') format('woff2'),
         url('fonts/sohnek.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'sohnel';
    src: url('fonts/sohnel.woff2') format('woff2'),
         url('fonts/sohnel.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}



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

/* theme */
html { background: #fff;}
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: saol; }

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

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

p { font-size: 20px; line-height: 1.5; color: #000; font-family: 'sohnel';}

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

img.mainlogo { position: absolute; top: 90px; left: 422px; width: 236px; display: block; z-index: 98}
img.flower { position: absolute; bottom: 0; left: 240px; display: block; width: 586px}

nav { display: block; width: 100%; position: absolute; bottom: 0px; right: 0; text-align: center; z-index: 9; background: #D9D3C9; transition: all .1s ease-in; height: 60px}
nav > img { display: block; position: absolute;}
nav > img.logo-left { top: 15px; left: 15px; width: 292px; z-index: 3; }
nav > img.logo-right { top: 20px; right: 15px; width: 133px; z-index: 3;}
nav > div { display: block; width: 100%; text-align: center; font-size: 0 ; position: absolute; left: 0; bottom: 0; z-index: 2;}
nav > div a { display: inline-block; width: auto; line-height: 60px; font-size: 18px; color: #000; padding: 0px 20px;}
nav > div a.active { background-color: #707070; color: #fff;}
nav > div a:hover { background-color: #707070; color: #fff;}

/*body[ts-page="floorplans"] nav > div, body[ts-page="features"] nav > div { display: block;}*/
body[ts-page="home"] nav { bottom: -200px; display: none;}
body[ts-page="home"] nav > img  { display: none;}

screensaver { display: block; width: 100%; height: 100%; top: -200vh; left: 0; position: absolute; z-index: 99; opacity: 0; overflow: hidden; background: #000}
screensaver:after { display: block; width: 100%; height: 100%; position: absolute; background: url(/img/bg.png) no-repeat center top; background-size: contain; content:""; top:0; left: 0; z-index: 3;}
screensaver.active { opacity: 1; top: 0; }
screensaver img.logo { position: absolute; width: 198px; display: block; top: 1717px; left: 441px; z-index: 4;}
screensaver img.logo-jcm { position: absolute; width: 708px; display: block; top: 111px; left: 186px; z-index: 6;}
screensaver img.banner-main { position: absolute; height: 100%; left: 0; top: 0; max-width: 9999px; display: block; transition: left 30s linear}
screensaver img.banner-main.moved { left: -2808px;}
screensaver p { position: absolute; display: block; text-align: center; font-size: 40px; color: #fff; top: 1284px; text-transform: uppercase; font-weight: 500; width: 100%}

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: 60px; color: #000; font-family: saol; line-height: 1; margin-bottom: 40px; width: 100%;}
h2 {font-size: 60px; color: #000; font-family: saol; line-height: 1.2; margin-bottom: 40px; width: 100%;}
h3 {font-size: 40px; color: #000; font-family: saol; line-height: 1.2; margin-bottom: 15px; width: 100%;}
h4 { font-family: 'sohnek'; font-size: 16px; color: #000; margin-bottom:0px; 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}

button.slick-arrow { position: absolute; content:""; position: absolute; width: 60px; height: 40px; display: block; z-index: 4; background: url(/img/svg/arrow.svg) no-repeat center center; background-size: cover; font-size: 0; margin: 0; padding: 0; top: 0; transform: none;}
/*#gallery button.slick-arrow { tp}*/


div.home { display: block; gap: 0}
div.home > div { position: absolute; top: 0}
div.home > div:first-child { width: 1280px; left: 0; height: 1080px}
div.home iframe { display: block; width: 100%; height:100%; border: 0}
div.home > div:last-child { width: 640px; right: 0}
div.logo-top { margin: 128px auto 60px; display: block; width: 487px}
div.logo-top img { display: block; width: 100%;}
div.logo-bottom { display: block; width: 200px; margin: 70px auto 0}
div.logo-bottom img { display: block; width: 100%;}
div.inner-nav a {font-family: saol; font-size: 30px; color: #000; display: block; margin: 0 auto; line-height: 72px; text-align: center;}

div.bp-index { position: absolute; left: 0; top: 0; width: 640px; padding: 55px 20px 0 80px; text-align: left; height: 100%;}
div.bp-index p { font-family: 'sohnel'; font-size: 20px; color: #000; padding-right: 160px; line-height: 1.5;}
div.bp-slides { position: absolute; right: 0; top: 0; width: 1280px; }
div.bp-timer {position: absolute; left: 170px; top: 800px;font-size: 30px; color: #707070 }
div.bp-timer span {font-size: 30px; color: #707070 }
div.bp-timer span:first-child {font-size: 60px; color: #000}

#birchley-park button.slick-arrow.slick-prev { left: 0px; top: 759px;}
#birchley-park button.slick-arrow.slick-next { left: 165px; top: 759px; transform: rotate(180deg); }

.slick-slide { position: relative;}
.tile { position: relative;}
figcaption { position: absolute; font-size: 20px; color: #fff;  font-family: 'sohnel'; width: 380px; left: 40px; bottom: 40px; text-align: left;}
.tile figcaption { font-size: 12px; width: 200px; left: 10px; bottom: 10px; text-align: left;}

div.team { position: absolute; width:100%; height: 100%;}
div.team div.slick-slide { width: 1980px; height: 1020px; position: relative; background: #fff;}
div.left-side, div.right-side { position: absolute; display: block; top:0}
div.left-side {left: 0; width: 973px;}
div.right-side {right: 0; width: 937px; padding: 279px 170px 0 127px; text-align: left;}
div.right-side img { width: 267px; display: block; margin: 75px auto 34px 0}

div.team-2 { display: block; font-size:0; width: 100%;}
div.team-2 > div {font-size: 20px; vertical-align:top; display: inline-block;}
div.team-2 > div:nth-child(odd) { width: 230px; font-family: saol; text-align: left; }
div.team-2 > div:nth-child(even) { width: calc(100% - 230px); text-align: left; margin-bottom: 50px; font-size: 14px; font-family: 'sohnel'; line-height: 1.5;}
#team h1 { position: absolute; left: 1100px; top: 55px; text-align: left; }
div.team-timer {position: absolute; left: 1190px; top: 800px;font-size: 30px; color: #707070 }
div.team-timer span {font-size: 30px; color: #707070 }
div.team-timer span:first-child {font-size: 60px; color: #000}

#team button.slick-arrow.slick-prev { left: 1100px; top: 814px;}
#team button.slick-arrow.slick-next { left: 1272px; top: 814px; transform: rotate(180deg); }


div.area-image { display: block; position:absolute; left:0; width: 1280px; height: 100%;}
div.legend { display: block; position:absolute; right:0; width: 640px; height: 100%; padding: 120px 60px 0; text-align: left;}
div.legend h1 { margin-bottom: 40px;}

ol li { list-style-position: inside; padding-left: 10px; font-size: 16px; font-family: 'sohnel'; line-height: 1.33; margin-bottom: 10px ; }
h4.ui-accordion-header { padding-left: 40px; position: relative; line-height: 20px; margin: 20px auto 10px auto}  
span.ui-accordion-header-icon { position: absolute; left: 0; top: 0; height: 20px; width: 40px; }
span.ui-accordion-header-icon:before { content:"+"; font-size: 20px; width: 40px; text-align: left; height: 100%; line-height: 20px; }
.ui-accordion-header-active span.ui-accordion-header-icon:before { content:"-"; }
h4[data-id="1"] span.ui-accordion-header-icon:before { color: #C4A478}
h4[data-id="2"] span.ui-accordion-header-icon:before { color: #D1D432}
h4[data-id="3"] span.ui-accordion-header-icon:before { color: #767496}
h4[data-id="4"] span.ui-accordion-header-icon:before { color: #4D69A1}
h4[data-id="5"] span.ui-accordion-header-icon:before { color: #6C7868}
h4[data-id="6"] span.ui-accordion-header-icon:before { color: #A15A57}
div.ui-accordion-content { padding-left: 40px}

div.gallery { padding: 80px 130px; display: flex; justify-items: space-between; width: 100%; gap:20px; flex-wrap: wrap}
div.gallery > div { width: 400px; display: block;}
div.gallery > div.tile[data-gallery] { display: none;}
div.gallery > div.tile[data-gallery="1"] { display: block;}
div.gallery > div img { width: 100%; display: block;}
div.gallery-index a { width: 100%; display: block; font-size: 30px; line-height: 40px; }
div.gallery-index a.active { text-decoration: underline;}
div.gallery-index h1  { margin-bottom: 20px}

div.video-holder  { display: block; width: 1920px; height: 1020px; position: absolute; left:0; top: 300vh; opacity: 0; background: #EBE3D7}
div.video-holder.active { opacity: 1; top: 0; z-index: 4;}
div.hidden-gallery  { display: block; width: 1920px; height: 1020px; position: absolute; left:0; top: 300vh; opacity: 0; background: #EBE3D7; background: #000}
div.hidden-gallery.active { opacity: 1; top: 0; z-index: 4;}
div.hidden-gallery  div.slick-slide {width: 1920px; height: 1020px; display: block; background: transparent;} 
div.hidden-gallery  div.slick-slide img {width: 100%; height: 100%; object-fit: contain; object-position: center center; } 
div.hidden-gallery  button.slick-arrow { background-image: url(/img/svg/arrow-white.svg);}
div.hidden-gallery  button.slick-arrow.slick-prev { left: 844px; top: 922px;}
div.hidden-gallery  button.slick-arrow.slick-next { left: 1056px; top: 922px; transform: rotate(180deg); }
div.gallery-timer {position: absolute; left: 934px; top: 910px;font-size: 30px; color: #fff}
div.gallery-timer span {font-size: 30px; color: #fff }
div.gallery-timer span:first-child {font-size: 60px; color: #fff}
a.close-gallery { position: absolute; display: block;  left: 20px; bottom: 20px; z-index: 5; }
a.close-gallery img { filter: invert(100%)}
div.iframe.vimeo { display: block; width: 1920px; height: 1020px; position: absolute; top: 0; left: 0}
div.iframe.vimeo iframe { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 0}

div.floorplans { padding: 55px 70px; width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
div.floorplan-index { display: flex; gap: 40px; justify-items: flex-start; align-items: baseline; position: absolute; bottom: 70px; left: 55px;}
div.floorplan-index h1 { width: auto}
div.floorplan-index a { font-size: 30px; color: #000}
div.floorplan-index a.active { text-decoration: underline;}

div.suites-list { height: 780px; position: relative}
div.suites-list > div { display: flex; width: 100%; gap: 30px; position: relative; top: 50%; transform: translateY(-50%);}
div.suite { width: 420px; height: 500px; border: 1px solid #000; padding: 20px; display: none;}
div.suite.active { display: block;}
div.header {height: 110px; display: flex; justify-content: space-between; width: 100%;}
div.header div.name {text-align: left; font-size: 26px; }
div.header div.size {font-size: 14px;    font-family: 'sohnel'; text-align: right; line-height: 1.5; text-transform: uppercase;}
div.header div.size b {font-family: 'sohnek';}
div.suite div.image { height: 340px; width: 100%; margin: 10px auto; display: block; background: #EBE3D7;}
div.suite div.image img { display: block; width: 100%; height: 100%; mix-blend-mode: multiply}

div.floorplan { padding: 0px; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #EBE3D7; top: 300vh; opacity: 0;}
div.floorplan.active { top: 0; opacity: 1;}
div.info { height: 100%; position: absolute; top: 0; left: 0; width: 520px;text-align: left; padding: 55px 0 0 70px;}
div.info div.name {text-align: left; font-size: 80px; margin-bottom: 40px;}
div.info div.size {font-size: 24px;    font-family: 'sohnel'; line-height: 1.5; text-transform: uppercase; text-align: left; }
div.info div.size b {font-family: 'sohnek';}
div.svg { height: 100%; position: absolute; top: 0; width: 940px; left: 520px; padding: 50px 0}
div.svg > div { height: 100%; width: 100%; background: #EBE3D7; display: block}
div.svg img { height: 100%; width: 100%; object-fit: contain; object-position: center center; mix-blend-mode: multiply}
div.keyplate { height: 100%; position: absolute; top: 0; width: 180px; right: 70px; padding: 40px 0; display: block !important}
div.keyplate > div { height: 100%; width: 100%; background: #EBE3D7; display: block}
div.keyplate img { height: 100%; width: 100%; object-fit: contain; object-position: center top; mix-blend-mode: multiply}
a.return-suites { position:absolute; left: 70px; top: 860px; }
a.return-suites img { display: block; width: 60px;}