/*
FONTS

font-family: goldenbook;
font-family: tt-norms-pro; 
font-family: indivisible;
*/

@font-face {
   font-family: tt-norms-pro; 
  src: url("fonts/ttnormspro.woff2") format("woff2"), url("fonts/ttnormspro.woff") format("woff");
}

/* VARIABLES */

:root {
  /*--default-font: indivisible, tt-norms-pro;*/
  --default-font:  "tt-commons-pro", sans-serif;
  --default-font-size: 30px;
  --default-line-height: 1.5;

  --default-input-font: indivisible;
  --default-input-font-size: 20px;
  --dim-input-height: 78px;
  
  --button-input-font: garamond;
  --button-font-size: 30px;
  --button-height: 80px;

  --col-primary: #DDD5C8;
  --col-accent: #F5F1E9;
  --col-burger: #fff;
  --col-text: #000;
  --col-page-bg: #fff;
  --col-border: #000;
  --col-input: #fff;
  --col-placeholder: #fff;
  --col-input-bg: transparent;
  --col-button: #000;
  --col-button-bg: #fff;
  --col-link: #000;
  --col-link-hover: #000000;

  --col-error: #ff6633;
  --col-attention: #ff6633;
  --col-warning: #f5b00e;
  --col-missing: #ff6633;

  --col-primary-rgb: 0, 0, 0;
  --col-accent-rgb: 0, 0, 0;
  --col-button-rgb: 255, 255, 255;
  --col-link-rgb: 0,0,0;
  --col-link-hover-rgb: 0, 0, 0;
  --col-error-rgb: 255, 51, 0;
  --col-attention-rgb: 255, 51, 0;
  --col-warning-rgb: 245, 176, 14;
  --col-border-rgb: 190, 190, 190;
  --col-missing-rgb: 255, 51, 0;

  --dim-site-width: 1920px;
  --dim-site-inner-width: 1600px;
  --dim-default-space: 100px;

  --vh: 1vh;

--iti-arrow-color: #fff;
--iti-arrow-padding: 10px;
--iti-path-flags-2x;
  --iti-flag-height: 24px;
  --iti-flag-width: 32px;
  --iti-flag-sprite-width: 7808px;
  --iti-flag-sprite-height: 24px;

/*--iti-flag-height: 15px;*/
/*  --iti-flag-width: 20px;*/
}

/* THEME */


/*CORE HTML*/

h1 { color: #fff; font-size: 120px; line-height: 1; margin-bottom: 70px; text-transform: uppercase; font-weight: 300; letter-spacing: 1px}
h2 { font-family: goldenbook; color: #000; font-size: 99px; line-height: 1; margin-bottom: 50px; text-transform: uppercase; }
.flat { font-family: var(--default-font) !important; font-weight: 300 !important}
h2.large { font-size: 120px;}
h2 small { font-size: .6em; display: block; margin-bottom: 10px;}
h2 small.smaller { font-size: .4em; }
h2 small.last { margin-bottom: 0px; margin-top: 10px}
h3 { font-family: goldenbook; color: #000; font-size: 40px; line-height: 1; margin-bottom: 27px; text-transform: uppercase; text-align: center;}
h4 { font-family: goldenbook; color: #000; font-size: 40px; line-height: 1; margin-bottom: 27px; text-transform: uppercase; text-align: center;}

p.short { max-width: 1440px; margin-left: auto; margin-right: auto; text-align: center;}
p.shorter { max-width: 1140px; margin-left: auto; margin-right: auto; text-align: center;}

.js-animate h2 { transform: translateY(-50px); opacity: 0}
.in-view h2 { transform: translateY(0px); opacity: 1; transition: all 1s cubic-bezier(0.250, 0.460, 0.450, 0.940); }


/*CONTAINERS*/


/*BUTTONS*/

a.btn {display: table; padding: 22px 32px; background: #fff; color: #000; font-size: 27px; line-height: 1; letter-spacing: 10px; margin: 70px auto 3px 0; position: relative;  font-family: indivisible; font-weight: 500; border: 1px solid #7C7C7C; transition: all .3s cubic-bezier(0.250, 0.460, 0.450, 0.940)}
a.btn:hover {background: var(--col-primary); color:#000; border-color:var(--col-primary)}
a.btn.tight {letter-spacing: 3px; }
a.btn.white {border: 1px solid #fff;}
a.btn.white:hover {border: 1px solid var(--col-primary); background: var(--col-primary); color: #000}
a.btn.center {margin-left: auto; margin-right: auto}
a.btn small {display: block; font-size: 0.75em; margin-top: 4px; letter-spacing: 7.5px}
a.btn.btn-yellow { background: #F5F1E9; color: #000; border: 1px solid #000; margin: 40px auto}
a.btn.download { padding-left: 91px; border: 1px solid #000; line-height: 56px; }
a.btn.download:after{content: ""; left: 41px; width: 20px; height: 100%; top: 0; position: absolute; display: block; background: url(/img/svg/download.svg) no-repeat center center; background-size: contain; }
a.btn.clipboard { padding-left: 91px; border: 1px solid #000; line-height: 56px; }
a.btn.clipboard:after{content: ""; left: 32px; width: 40px; height: 100%; top: 0; position: absolute; display: block; background: url(/img/svg/copy.svg) no-repeat center center; background-size: contain; }

span.clipboard-copied { display: block; padding: 5px 0; font-size: 14px; width: 100%; text-align: center; display: none;}
span.clipboard-copied.active { display: block; }
/*HEADER AND NAV*/

header { position: absolute; width: 100%; z-index: 9; transition: all .5s cubic-bezier(0.250, 0.460, 0.450, 0.940); }
header div.logo { display: block; position: absolute; top: 80px; left: 50%; transform: translateX(-50%); width: 80%; max-width: 430px}
header div.logo img { display: block; width: 100%}
header a.btn { background: transparent; margin: 0; font-size: 20px; padding: 15px 23px; min-height: 70px; color: #000; border-color: #000; }
header > a.btn { position: absolute; top: 20px; right: 20px; color: #fff; border-color: #fff; }

header div.burger { display: block}
header nav { display: block; position: fixed; top: 0; left: -200vw; background: #DDD5C8; width: 480px; max-width: 100vw; height: calc(100 * var(--vh)); opacity: 0; padding: 280px 0;}
header nav > a { display: block; position: absolute; top: 160px; width: 340px; max-width: 90%; left: 50%; transform: translateX(-50%); }
header nav > a img { display: block; width: 100%;}
header div.menu { display: flex; height: 100%; width: 100%; flex-direction: column; gap: 40px; justify-content: center; align-items: center;}
header div.menu > a:not(.btn){ font-size: 40px; font-family: goldenbook; text-transform: uppercase; }
header div.menu > a.btn{ }

.fully-scrolled header.attached { top: -200px; opacity: 0}
.fully-scrolled header.attached.visible div.logo { top: 15px; max-width: 258px}
.fully-scrolled header.attached.visible a.btn { top: 10px; font-size: 20px; color: #000; border-color: #000}
body.article-show-weather header.attached div.weather { display: none !important;}
.fully-scrolled header.attached.visible { top: 0; background: #DDD5C8; opacity: 1; position: fixed;  height: 90px; }
.fully-scrolled header.attached.visible div.logo { filter: invert(1)}
.fully-scrolled header.attached.visible div.burger { top: 15px; left: 15px}
.fully-scrolled header.attached.visible div.burger ul li { background-color: #000}

body div.weather {display: none}
body.article-show-weather div.weather {display: table}

body.article-dark-theme header div.logo img  { filter: invert(1);}
body.article-dark-theme.fully-scrolled header.attached.visible div.logo img  { filter: none;}
body.article-dark-theme header div.burger ul li  { background-color: #000}
body.article-dark-theme header > a.btn { color: #000; border-color: #000;}

header.active nav { left: 0; opacity: 1;}
header.active div.burger li {background-color: #000}


footer { }
footer a:hover { text-decoration: underline}
footer div.logo { margin: 0 auto 70px; }
footer div.logo img { display: block; width: 50%; max-width: 420px; margin: 0 auto; }
div.footer-content {display: flex; gap: 74px; justify-content: space-between; align-items: flex-start; max-width: 1660px; margin: 0 auto 70px; padding: 0 30px;}
div.footer-content > div:first-child {display: flex; flex-direction: column; gap: 40px}
div.footer-links {display: flex; gap: 120px; justify-content: space-between; align-items: flex-start;}
div.footer-links a { white-space: nowrap}
div.footer-content strong {font-size: 20px; display: block;  font-family: indivisible; font-weight: 500; text-transform: uppercase; font-weight: normal; white-space:nowrap; margin-bottom: 17px;}
div.footer-content p {font-size: 15px; line-height: 1.66; max-width: 340px; margin-right: auto; margin-left: 0}
div.footer-tagline { position: absolute; right: 30px; bottom: 0px; width: 420px; text-align: right;		font-size: 30px; text-transform: uppercase; font-family: goldenbook; line-height: 1; display: block}
div.footer-tools {display: flex; gap: 0px; justify-content: space-between; width: 100%;  border-top: 1px solid	#7C7C7C}
div.footer-tools > div {display: flex; gap: 0px; }
div.footer-tools div.tools-left {justify-content: flex-start;}
div.footer-tools div.tools-right {justify-content: flex-end;}
div.footer-tools div.tools-left > div {border-right: 1px solid #7C7C7C; padding: 0 20px; }
div.footer-tools div.tools-right > div {border-left: 1px solid #7C7C7C; padding: 0 23px; }
div.footer-tools p, div.footer-tools a {line-height: 50px; display: inline-block; font-size: 10px; text-transform: uppercase;}
div.footer-tools div.tools-left a { font-family: indivisible; font-weight: 500;}
div.footer-tools p.somerswest { line-height: 1.2; text-align: right; padding-top: 13px}

div.footer-disclaimers { gap: 0; border-top: 1px solid #7C7C7C}
div.footer-disclaimers > div { display: flex; justify-content: center;  max-width: 1660px; margin: 0 auto; gap: 0; padding: 0 30px}
div.footer-disclaimers p { padding: 22px 0px 22px 15px; font-size: 12px; margin: 0}
div.footer-disclaimers p:first-child { border-right: 1px solid #7C7C7C; padding-right: 15px; padding-left: 0}

div.language  { display: flex; gap: 20px; justify-content: space-between; align-items: center;}
div.language span { font-size: 10px; text-transform: uppercase; display: block; line-height: 50px;  font-family: indivisible; font-weight: 500;}
div.language div.selected-language { font-size: 10px; text-transform: uppercase; display: block; line-height: 50px;  font-family: indivisible; font-weight: 500; position: relative; padding-right: 30px; cursor:pointer;}
div.language div.selected-language:after { content:""; position: absolute; right: 0; top: 0; width: 10px; height: 100%; display: block; background: url(/img/svg/arrow-down2.svg) no-repeat center center; background-size: contain}
div.lang-selector { display: none; width: 100%; position: absolute; left: 0; bottom: 0; background:#fff; border-left: 1px solid #7C7C7C; border-right: 1px solid #7C7C7C; bottom: 50px;}
div.lang-selector.active { display: block}
div.lang-selector > div { display: block; width: 100%; padding: 0 20px; line-height: 50px; font-size: 14px; text-transform: uppercase; text-align: center; border-top: 1px solid #7C7C7C; cursor: pointer;}
div.lang-selector > div:hover {  font-family: indivisible; font-weight: 500; }
div.lang-selector > div.active { display: none;}

/*ELEMENTS*/
.c-primary { color: var(--col-primary) !important}
.c-black { color: #000 !important}
.b-primary { background-color: var(--col-primary) !important}
.b-black { background-color: #000 !important}
.b-gray { background-color: #EBEBEB !important}
.b-yellow { background-color: #DDD5C8 !important}
.b-white { background-color: #fff !important}
.c-white { color: #fff !important}

/*CONTENT*/

div.masthead { display: block; width: 100%; height: calc(100 * var(--vh)); position: relative; overflow: hidden}
div.masthead.masthead-short { height: 75vh;}
div.masthead-homes  {min-height: 780px;}
div.masthead > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center;}
div.masthead div.caption { }
div.masthead div.intro { display: block; width: 100%; padding: 0px 30px ; margin: 0 auto; text-align: center; max-width: 1520px}
div.masthead div.intro2 { padding: 0 0 13vh 12vw; opacity: 0; transition: all 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940)}
.in-view div.masthead div.intro2 { padding: 0 0 15vh 12vw; opacity: 1}

div.caption-islands { height: 80vh}
div.caption-islands img { width: 100%; height: 100%; object-fit: contain; max-width: 9999px;}

div.masthead div.caption.middle { top: 47%; opacity: 0; transition: all 2s cubic-bezier(0.250, 0.460, 0.450, 0.940)}
.in-view div.masthead div.caption.middle { top: 50%; opacity: 1; }

/*div.caption-image-overlay { display: block; width: 100%;}*/

/*div.masthead div.logo { display: block; width: 100%; }*/
/*div.masthead div.logo img { display: block; width: 80%; max-width: 420px; margin: 0 auto;}*/

div.masthead div.tagline {color: #fff; font-size: 40px; font-weight: 400; text-transform: uppercase; letter-spacing: 2px}
div.masthead a.scroll-down {color: #fff; font-size: 40px; font-weight: 400; text-transform: uppercase; letter-spacing: 7px; position: absolute; bottom: 13vh; left: 50%; transform: translateX(-50%); text-align: center;}
.in-view div.masthead a.scroll-down {bottom: 15vh; opacity: 1; transition: all 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940)}
div.masthead a.scroll-down img {display: block; margin: 20px auto 0; animation: bounce 3s linear infinite; position: relative;}
div.masthead div.masthead-video { width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; }
div.masthead-video iframe { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 0;}

div.weather { position: absolute; top: 150px; right: 40px; text-align: center; display: table;width: auto; text-transform: uppercase; opacity: 0; transform: translateX(50px); }
div.weather.active { opacity: 1; transform: translateX(0px); transition: all 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940)}
div.weather div.city { font-size: 30px; color: #fff; }
div.weather div.temp { font-size: 15px; color: #fff; line-height: 1.33; }
div.weather div.city span { font-size: .5em; display: block; margin-bottom: 3px}
div.weather img { display: block; margin: 10px auto 15px; }
/*body.article-dark-theme div.weather.active {filter: invert(1)}*/
 

div.hawaii div.caption {max-width: 1720px; bottom: -50px; transition: all 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s; opacity: 0}
.in-view div.hawaii div.caption {bottom: 0px; opacity: 1;}
div.hawaii div.caption > div {padding: 0 0 70px 70px; text-align: left; max-width: 65%;}
div.hawaii > img { display: block; width: 100%}
div.hawaii p { color: #fff; }
div.hawaii div.title {  font-family: goldenbook; color: #fff; font-size: 160px; line-height: 1; margin-bottom: 5px; text-transform: uppercase;}
div.hawaii div.subtitle {  font-family: goldenbook; color: #fff; font-size: 60px; line-height: 1; margin-bottom: 20px; text-transform: uppercase;}

div.features { display: flex; gap: 270px; justify-content: center;  align-items: flex-start; margin: 90px auto;}
div.features > div { display: flex; gap: 25px; flex-direction: column; justify-content: flex-start;  align-items: center; }
div.features p { font-family: indivisible; font-weight: 500; text-transform: uppercase; margin: 0; line-height: 2; text-align: center;}

div.stats { display: flex; gap: 100px; justify-content: space-between;  margin-top: 40px}
div.stats div.sep { width: 1px; background: #7C7C7C; }
div.stats div{ font-size: 40px; font-family: goldenbook; text-transform: uppercase; text-align: center}
div.stats div small { font-size: 0.75em; }
div.stats span { font-size: 100px; display: block; margin: 0 auto 17px}

div.stats.alternate { margin-top: 60px; margin-bottom: 70px; display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 0px}
div.stats.alternate > div { padding: 0 6%; border-left: 1px solid #7c7c7c; border-right: 1px solid #7c7c7c;}
div.stats.alternate > div:first-child { padding-left: 0; border: 0;}
div.stats.alternate > div:last-child { padding-right: 0; border: 0;}
div.stats.alternate div{ font-size: 30px; }
div.stats.alternate div small { display: block; font-size: 0.66em; max-width: 430px; margin-left: auto; margin-right: auto; margin-top: 5px; line-height: 2.5}
div.stats.alternate div small.highlight { max-width: 100%; background: #F0CC7C; }
div.stats.alternate div small:first-child { font-family: indivisible; margin-bottom: 33px; margin-top: 0}
div.stats.alternate span { font-size: 70px; }


div.homes { display: flex; gap: 60px 50px; flex-wrap: wrap; justify-content: center; align-items: flex-start;}
div.homes > div { width: calc(33.33% - 34px); }
div.home div.photo {display: block; margin-bottom: 20px}
div.home div.photo img {display: block; width: 100%;}
div.home div.details {display: block; width: 100%; padding: 0 20px; text-align: center;}
div.home div.title {font-size: 40px; font-family: goldenbook; text-transform: uppercase; margin-bottom: 10px}
div.home p {font-size: 20px;  text-transform: uppercase; margin-bottom: 0px}

div.slideshow-paradise { padding-bottom: 50px}
div.slideshow-paradise div.headline { position: absolute; top: 46%; left: 0; margin-top: -150px; width: 100%; padding: 0 30px; font-size: 160px; color: #fff; text-transform: uppercase; text-align: center;font-family: goldenbook; transform: translateY(-50%)}
div.slick-slide.paradise { height: 1080px; max-height: calc(100 * var(--vh)); width: 100vw;}
div.slick-slide.paradise > img { display: block; height: 100%; width: 100%; object-fit: cover; object-position: center}

div.paradise div.title {font-size: 50px; color: #000; letter-spacing: 3px; text-transform: uppercase; line-height: 50px; padding-top: 50px; background: #fff; width: 800px; margin: 0 auto 0px; text-align: center;}
div.paradise p {margin: 0 auto 0 0; color: #000; font-size: 0px !important;}
div.paradise div.caption {display: block; top: auto; left: 0; bottom: 0; width: 100%; }
div.paradise div.caption img {display: block; margin: 0 auto 50px}
p.slide-content {margin: 0 auto; color: #000; font-size: 20px; max-width: 660px; padding-top: 30px; text-align: center;}

/*div.paradise div.c1 {left: 15%; bottom: 10%; text-align: left; }*/
/*div.paradise div.c1 img { margin: 90px auto 0 0;}*/
/*div.paradise div.c2 {left: 65%; bottom: 10%; text-align: right; }*/
/*div.paradise div.c2 img { margin: 0px 0 90px auto;}*/
/*div.paradise div.c3 {left: 15%; bottom: 10%; text-align: left; }*/
/*div.paradise div.c3 img { margin: 0px auto 90px 0;}*/
/*div.paradise > img { display: block; width: 100%}*/

div.paradise-home img {transform: scale(1.1); transform-origin: center center; transition: all 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) .3s}
div.paradise-home div.caption.middle { top: 47%; opacity: 0; transition: all 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) .3s}
div.paradise-home div.caption.bottom { padding-bottom: 120px; bottom: -120px; opacity: 0; transition: all 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) .3s}
div.paradise-home div.caption.bottom a.btn { margin: 0 auto}
.in-view div.paradise-home div.caption.middle { top: 50%; opacity: 1; }
.in-view div.paradise-home img {transform: scale(1); }
.in-view div.paradise-home div.caption.bottom { bottom: 0px; opacity: 1}

div.registration { background: url(/img/registration.jpg) no-repeat center center; background-size: cover; padding: 280px 30px 180px;}
div.registration > div { max-width: 1320px; margin: 0 auto;}
div.registration div.title { font-size: 120px; color: #fff; text-transform: uppercase; text-align: center; margin-bottom: 20px; letter-spacing: 12px; font-weight: 300}
div.registration h2 { color: #fff; max-width: 980px; margin: 0 auto 70px}
div.registration div.form { margin-top: 50px;}
div.registration div.form-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; column-gap: 20px; row-gap: 20px;}
div.registration div.field { grid-column: span 6; display: inline-grid}
div.registration div.field.x1 { grid-column: span 1; }
div.registration div.field.x2 { grid-column: span 2; }
div.registration div.field.x3 { grid-column: span 3; }
div.registration div.field.x4 { grid-column: span 4; }
div.registration div.field.x6 { grid-column: span 6; }
div.registration div.field.x8 { grid-column: span 8; }
div.registration div.field.x9 { grid-column: span 9; }
div.form-footer { display: flex; justify-content: space-between; gap: 20px; align-items: center;}

a.toggle-sound { display: block; position: absolute; bottom: 20px; left: 20px; width: 20px; height: 20px; background: url(/img/svg/sound.svg) no-repeat left center; background-size: contain;}
a.toggle-sound.active { background-image: url(/img/svg/sound-off.svg);}

div.image { display: block; margin: 100px auto 50px}
h2 + div.image { margin-top: 0 !important}
div.image div.caption { padding: 0 20px; opacity: 0; transition: all 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) .6s; top: 47%;}
.in-view div.image div.caption { opacity: 1; top: 50%;}

div.intro3 { padding: 0px 30px 0px; max-width: 1440px; margin: 0 auto 80px; text-align: center; }
div.intro3 h1 { color: #000; margin-bottom: 20px;}

div.content {max-width: 1660px; padding: 0 30px; margin: 0 auto}
div.masthead.b-yellow {overflow: visible; } 

div.grid-4 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 200px; row-gap: 100px; max-width: 1400px; margin: 100px auto}
div.grid-4 > div { text-align: center;}

div.grid-5, div.grid-6, div.grid-7, div.grid-8, div.grid-9 { display: flex; gap: 0; align-items: flex-start; margin-bottom: 100px}
div.grid-8, div.grid-9  { align-items: center;}
div.grid-5 > div, div.grid-6 > div, div.grid-7 > div { width: 50%;}
div.grid-8 > div, div.grid-9 > div { width: 57%;}
div.grid-8 > div:last-child, div.grid-9 > div:first-child { width: 43%;}
div.grid-8 > div:last-child {padding-left: 97px;}
div.grid-9 > div:first-child { padding-right: 97px}
div.grid-5 > div:last-child { padding-left: 100px}
div.grid-6 > div:first-child { padding-right: 145px}

div.grid-7  { gap: 50px; margin: 80px auto; text-align: center;}
div.grid-7  p { max-width: 80%; margin: 50px auto 0}

div.partner-logos { padding-bottom: 140px; display: flex; justify-content: space-between; gap: 20px; margin: 160px auto 0; width: 100%; max-width: 1000px; padding: 0 30px 140px;}

section.move-up { margin-top: -50vh}
section.bring-up {margin-bottom: calc(-100 * var(--vh) + 500px)}

div.quote { background: #DDD5C8; padding: 60px 50px; text-align: center; max-width: 1600px; margin: 50px auto 80px; }
div.quote p { font-family: goldenbook; font-size: 50px;}
div.quote span { display: block; margin-top: 50px; font-family: indivisible; font-size: var(--default-font-size); text-transform: uppercase;}

div.homes-list { margin: 150px auto 0; display: flex; gap: 60px; flex-direction: column; justify-content: flex-start; align-items: flex-start;}
div.homes-list > div { display: flex; gap: 70px; align-items: center; justify-content: space-between; transform: translateY(100px); opacity: 0}
div.homes-list  > div.in-view { transform: translateY(0px); opacity: 1; transition: all .7s cubic-bezier(0.250, 0.460, 0.450, 0.940)}
div.homes-list > div > div { width: 35%;}
div.homes-list > div > div:last-child { width: calc(65% - 70px);}
div.home-details {display: flex; gap: 40px; flex-direction: column; justify-content: flex-start; align-items: flex-start;}
div.home-details div.title {font-size: 80px; font-family: goldenbook; padding-bottom: 20px; border-bottom: 1px solid #7C7C7C; text-transform: uppercase; }
div.home-details div.title small {display: block; font-size: 0.375em; margin-bottom: 10px}
div.home-details p {font-size:  20px; line-height: 1.5; text-transform: uppercase; }
div.home-details a { margin-top: 0}

div.home-header { padding: 0px 0px 0; max-width: 1600px; margin: 0 auto 110px;  display: flex; gap: 120px; align-items: center; justify-content: space-between; }
div.home-header div.title { font-size: 120px; font-family: goldenbook; text-transform: uppercase; }
div.home-header div.title small { display: block; font-size: .25em; margin-bottom: 5px}
div.home-header div.subtitle { font-size: 30px; font-family: goldenbook; text-transform: uppercase; }
div.home-header div.stats  { gap: 40px}
div.home-header div.stats  > div { font-size: 30px}
div.home-header div.stats  > div span { font-size: 70px; margin-bottom: 5px; white-space: nowrap;}


div.floorplan { display: flex; gap: 110px; align-items: flex-start; justify-content: space-between; margin-top: 150px}
div.floorplan > div { width: calc(65% - 110px);}
div.floorplan > div:first-child { width: 35%;}
div.floorplan img { width: 100%; display: block}
div.home-left {}
div.home-left div.title { font-size: 80px; font-family: goldenbook; text-transform: uppercase; }
div.home-left div.subtitle { font-size: 30px; font-family: goldenbook; text-transform: uppercase; margin-bottom: 40px}
div.home-left > p  { line-height: 2; text-transform: uppercase; padding-bottom: 36px; border-bottom: 1px solid #7C7C7C}
div.home-left a.btn { width: 100%}
div.elevations { display: flex; gap: 20px; flex-direction: column; justify-content: flex-start; align-items: flex-start; margin-bottom: 30px}
div.elevations img { display: block; width: 100%;}
div.elevations div.caption { padding: 20px; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 7px; color: #fff}

div.home-siteplan { margin-top: 60px}
div.home-siteplan img { display: block; margin-bottom: 60px}

div.floorplan-disclaimer { display: flex; gap: 30px; width: 1462px; max-width: 100%;  margin: 120px auto 0}
div.floorplan-disclaimer div { display: block; width: 65px;}
div.floorplan-disclaimer img { display: block; width: 100%;}
div.floorplan-disclaimer p { font-size: 15px; width: calc(100% - 95px); line-height: 1.33;}

div.blog-listings { display: grid; grid-template-columns: 1fr 1fr 1fr ; column-gap: 50px; row-gap: 90px;}
div.blog-listing { display: flex; justify-content: space-between; flex-direction: column; gap: 30px; align-items: flex-start;}
div.blog-listing div.info { height: 100%}
div.blog-listing img { display: block; width: 100%;}
div.blog-listing div.category { margin-bottom: 15px; font-size: 20px; font-weight: 500; font-family: indivisible; letter-spacing: 3px; text-transform: uppercase;}
div.blog-listing h2 {font-size: 60px; margin-bottom: 0}
div.blog-listing a.btn  { margin-top: 0}

div.blog-title { padding-bottom: 140px}


/*SLIDESHOWS*/


div.slideshow { margin-bottom: 70px; position: relative;}
div.slideshow-index { display: flex; justify-content: center; gap: 15px; align-items: center; padding: 30px 45px; background: #fff; position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%); z-index: 4;}
/*div.slideshow-index a:not(.square) { display: none;}*/
div.slideshow-index a.square { display: block; width: 20px; height: 20px; background: #EBEBEB; position: relative;}
div.slideshow-index a.square.active { display: block; width: 30px; height: 30px; background: #fff; border: 2px solid #7C7C7C;  }
div.slideshow-index a.square.active:after { content:""; display: block; width: 21px; height: 20px; background: #7C7C7C; top: 3px; left: 3px; position: absolute;}
div.slideshow-video { display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 3; }
div.slideshow.active div.slideshow-video { display: block;}
div.slideshow-video iframe { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 0;}

div.slideshow button.slick-arrow {background-image: url(/img/svg/arrow.svg)!important; width: 40px !important; height: 150px!important; top: 50%!important; margin-top: -75px!important}
div.slideshow button.slick-arrow.slick-prev {left: -90px; transform: rotate(180deg);}
div.slideshow button.slick-arrow.slick-next {right: -90px}

div.slideshow-paradise button.slick-arrow {background: none; width: auto; height: 150px!important; top: auto!important; margin-top: 0px!important; bottom: -130px !important; font-size: 15px;  font-family: indivisible; font-weight: 500; text-transform: uppercase; text-align: left; letter-spacing: 3px; color:#fff; line-height: 1; filter: invert(1);}
div.slideshow-paradise button.slick-arrow span {font-size: 20px;  font-family: indivisible; font-weight: 500; text-transform: uppercase; text-align: left; letter-spacing: 3px; color:#fff; display: block; margin-top: 8px;}
div.slideshow-paradise button.slick-arrow:after {content:""; width: 20px; height: 100%; background: url(/img/svg/arrow2.svg) no-repeat center center; background-size: contain; display: block; position: absolute; top: 0; }
div.slideshow-paradise button.slick-arrow.slick-prev {left: 60px; padding-left: 40px}
div.slideshow-paradise button.slick-arrow.slick-prev:after {transform: rotate(180deg);; left: 0px; }
div.slideshow-paradise button.slick-arrow.slick-next {right: 60px; text-align: right; padding-right: 40px;}
div.slideshow-paradise button.slick-arrow.slick-next span {text-align: right; ;}
div.slideshow-paradise button.slick-arrow.slick-next:after {right: 0px;}

.slick-slide { overflow: hidden;}

/*FORMS*/

input[type="text"], input[type="search"], input[type="tel"], input[type="number"], input[type="email"], input[type="password"] { border-color: #fff; padding-left: 25px;   transition:    color calc(infinity * 1s) step-end,    background-color calc(infinity * 1s) step-end;  background-color: transparent;}

div.checkbox label:before { border-color: #fff;}
div.checkbox input:checked + label:before { background-image: url(/lib/img/white/checkmark.svg);}
div.checkbox label { color: #fff; font-size: 20px}
div.checkbox label a  { color: #fff;}
form button[type="submit"], form button[type="button"] { font-family: goldenbook; text-transform: uppercase; font-size: 30px; line-height: 80px; padding: 0 45px}

*::-webkit-input-placeholder {  text-transform: uppercase; }
*::-moz-placeholder  {  text-transform: uppercase; }
*:-ms-input-placeholder  {  text-transform: uppercase; }

div.reveal-response p { color: #fff; font-size: 28px;}

div.iti__country-container {top: 10px; height: 60px;}
div.iti__country-container button { background: transparent; line-height: 1; font-size: 24px; padding: 0 45px 0 0px; border-right: 1px solid #fff}
.iti__selected-country-primary { flex-direction: row-reverse; gap: 10px;}
div.iti__country-container button:hover { background: transparent; }
div.iti__arrow { border: 0 !important; width: 20px !important; height: 10px !important; background: url(/img/svg/arrow3.svg) no-repeat center center !important; background-size: contain !important;}
#iti-0__dropdown-content input.iti__search-input { line-height: 20px; min-height: 20px; box-shadow: none !important; font-size: 15px; color:#000 !important;}
.iti__flag { background-image: url(https://cdn.jsdelivr.net/npm/intl-tel-input@25.3.1/build/img/flags@2x.webp); }
.iti--inline-dropdown .iti__dropdown-content { background: rgba(255,255,255,1); border: 0; box-shadow: 0}
.iti--inline-dropdown .iti__country-list { max-height: 240px;}

div.iti__selected-dial-code { position: absolute; right: 10px; top: 16px; color: #fff; font-size: 24px; font-family: indivisible;}

#Phone { padding-left: 150px !important;}

/*ANIMATIONS*/


.animation-waterfall > :nth-child(1) {transition-delay: .45s; }
.animation-waterfall > :nth-child(2) {transition-delay: .6s; }
.animation-waterfall > :nth-child(3) {transition-delay: .75s; }
.animation-waterfall > :nth-child(4) {transition-delay: .9s; }
.animation-waterfall > :nth-child(5) {transition-delay: 1.05s; }
.animation-waterfall > :nth-child(6) {transition-delay: 1.2s; }
.animation-waterfall > :nth-child(7) {transition-delay: 1.35s; }
.animation-waterfall > :nth-child(8) {transition-delay: 1.5s; }
.animation-waterfall > :nth-child(9) {transition-delay: 1.65s; }
.animation-waterfall > :nth-child(10) {transition-delay: 1.8s; }
.animation-waterfall > :nth-child(11) {transition-delay: 1.95s; }
.animation-waterfall > :nth-child(12) {transition-delay: 2.1s; }
.animation-waterfall > :nth-child(13) {transition-delay: 2.25s; }
.animation-waterfall > :nth-child(14) {transition-delay: 2.4s; }
.animation-waterfall > :nth-child(15) {transition-delay: 2.55s; }
.animation-waterfall > :nth-child(16) {transition-delay: 2.7s; }


.animation-waterfall-steep > :nth-child(1) {transition-delay: .45s; }
.animation-waterfall-steep > :nth-child(2) {transition-delay: .75s; }
.animation-waterfall-steep > :nth-child(3) {transition-delay: .9s; }
.animation-waterfall-steep > :nth-child(4) {transition-delay: 1.05s; }
.animation-waterfall-steep > :nth-child(5) {transition-delay: 1.2s; }
.animation-waterfall-steep > :nth-child(6) {transition-delay: 1.35s; }
.animation-waterfall-steep > :nth-child(7) {transition-delay: 1.5s; }
.animation-waterfall-steep > :nth-child(8) {transition-delay: 1.7s; }
.animation-waterfall-steep > :nth-child(9) {transition-delay: 1.9s; }
.animation-waterfall-steep > :nth-child(10) {transition-delay: 2.1s; }
.animation-waterfall-steep > :nth-child(11) {transition-delay: 2.3s; }
.animation-waterfall-steep > :nth-child(12) {transition-delay: 2.5s; }
.animation-waterfall-steep > :nth-child(13) {transition-delay: 2.7s; }
.animation-waterfall-steep > :nth-child(14) {transition-delay: 2.9s; }
.animation-waterfall-steep > :nth-child(15) {transition-delay: 3.1s; }
.animation-waterfall-steep > :nth-child(16) {transition-delay: 3.3s; }

.slide-in-bottom { transform: translateY(150px); opacity: 0;}
.slide-in-top { transform: translateY(-150px); opacity: 0;}
.in-better-view.slide-in-bottom {opacity: 1;	animation: slide-in-bottom 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
.in-better-view .slide-in-bottom {	opacity: 1; animation: slide-in-bottom 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
.in-better-view .slide-in-top {	opacity: 1;animation: slide-in-top 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}

@keyframes bounce {
	0%  { transform: translateY(0px); }
	40%  { transform: translateY(20px); }
	100%  { transform: translateY(0px); }
}

@keyframes slide-in-top {
  0% { transform: translateY(-300px); opacity: 0;}
  100% {transform: translateY(0);opacity: 1;}
}

@keyframes slide-in-bottom {
  0% {transform: translateY(300px);opacity: 0;  }
  100% { transform: translateY(0);opacity: 1;
  }


}



@media only screen and (min-width: 761px) {
	div.stats.alternate span.nobr { white-space: nowrap}
	div.stats.alternate span.nobr br { display: none;}
}


@media only screen and (max-height: 1080px) {
	header nav { padding-bottom: 0}
}



@media only screen and (max-width: 1920px),  (max-height: 1080px) {
	div.paradise div.c2 {left: 60%; }
	section.bring-up {margin-bottom: calc(-100 * var(--vh) + 300px)}
	header nav > a {top: 130px;}
	header div.menu { padding-top: 20px}
}

@media only screen and (max-height: 760px) {

	header nav { padding-top: 140px; }
	header nav > a { top: 90px; }
	header div.menu { gap: 30px}
}
@media only screen and (max-width: 1760px) {
	div.paradise div.c2 {left: 55%; }
}

@media only screen and (max-width: 1680px), (max-height: 980px) {
		:root {
		  --default-font-size: 24px;
		  --default-input-font-size: 18px;
		  --dim-input-height: 58px;
		  --button-font-size: 24px;
		  --button-height: 60px;
		  --dim-default-space: 100px;
		}

		section { padding-left: 30px; padding-right: 30px;}
		section.masthead, section.full, section.max, #registration { padding-left: 0px; padding-right: 0px;}

		div.footer-content, 
		div.masthead div.intro, 
		div.slideshow-paradise div.headline, 
		div.intro3 ,
		div.content ,
		div.partner-logos ,
		div.home-header{padding-left: 0; padding-right: 0;}

		div.slideshow-paradise { padding-bottom: 160px} 
		
		.fully-scrolled header.attached.visible div.logo { top: 10px; max-width: 180px}
		.fully-scrolled header.attached.visible a.btn { top: 8px; right: 8px;  font-size: 16px;padding: 6px 12px; }
		.fully-scrolled header.attached.visible a.btn small { letter-spacing: 1px}
		.fully-scrolled header.attached.visible { height: 60px; }
		.fully-scrolled header.attached.visible div.burger { top: 0px; left: 0px}


		h1 { font-size: 100px; margin-bottom: 40px; }
		h2 { font-size: 72px; margin-bottom: 40px; }
		h2.large { font-size: 85px;}
		h3 { font-size: 36px; margin-bottom: 20px; }
		a.btn {padding: 16px 24px; font-size: 22px; letter-spacing: 5px; margin: 50px auto 0px 0; }
		a.btn small {margin-top: 3px;letter-spacing: 3.8px; }
		a.btn.btn-yellow { margin: 30px auto}
		a.btn.download { padding-left: 48px; line-height: 46px; }
		a.btn.download:after{left: 14px; width: 16px; }
		a.btn.clipboard { padding-left: 48px; line-height: 46px; }
		a.btn.clipboard:after{left: 10px; width: 24px; }

		header a.btn { font-size: 16px; padding: 12px 16px; min-height: 0px}

		div.masthead div.caption { padding: 50px 30px ; }
		div.masthead div.logo img { max-width: 360px; }
		div.masthead div.tagline {font-size: 30px; }
		div.masthead a.scroll-down {font-size: 30px; letter-spacing: 7px; width: 100%}
		div.masthead a.scroll-down img {margin: 15px auto 0; }

		div.hawaii div.caption > div {}
		div.hawaii div.title {  font-size: 120px; }
		div.hawaii div.subtitle {  font-size: 40px; }

		div.features { gap: 150px; margin: 70px auto;}
		div.features > div { gap: 20px; }

		div.stats { gap: 15px; }
/*		div.stats div.sep { height: 100px}*/
		div.stats div{ font-size: 30px; }
		div.stats span { font-size: 72px; }

		div.stats.alternate { margin-top: 40px; margin-bottom: 50px;}
		div.stats.alternate div{ font-size: 24px; }
		div.stats.alternate div small { line-height: 1.5}
		div.stats.alternate div small:first-child { margin-bottom: 20px; }
		div.stats.alternate span { font-size: 48px; }

		div.home-header { margin-bottom: 50px}
		div.home-header div.stats  { gap: 30px}
		div.home-header div.stats  > div { font-size: 24px}
		div.home-header div.stats  > div span { font-size: 48px; }


		div.homes { gap: 60px 30px; }
		div.homes > div { width: calc(33.33% - 20px); }
		div.home div.photo {margin-bottom: 16px}
		div.home div.title {font-size: 30px; }
		div.home p {font-size: 16px;  }

		div.slideshow-paradise div.headline { font-size: 120px; }

		div.paradise div.title {font-size: 40px; margin-bottom: 0px; letter-spacing: 2px; }

/*		div.paradise div.c1 img { margin: 50px auto 0 0;}*/
/*/*		div.paradise div.c2 {left: 65%; }*/*/
/*		div.paradise div.c2 img { margin: 0px 0 50px auto;}*/
/*		div.paradise div.c3 img { margin: 0px auto 50px 0;}*/

		div.registration { padding: 150px 30px 150px;}
		div.registration div.title { font-size: 100px; }
		div.registration div.form { margin-top: 40px;}
		div.registration h2 { max-width: 1280px;}

		input[type="text"], input[type="search"], input[type="tel"], input[type="number"], input[type="email"], input[type="password"] { padding-left: 20px; }
		div.checkbox label { font-size: 18px}
		form button[type="submit"], form button[type="button"] { font-size: 24px; line-height: 60px; padding: 0 35px}

		div.iti__country-container {top: 10px; height: 40px;}
		div.iti__country-container button { font-size: 18px; padding: 0 35px 0 0px; }
		.iti__selected-country-primary { gap: 10px;}
		div.iti__arrow { width: 20px !important; height: 10px !important; }
		#Phone { padding-left: 140px !important;}
		div.iti__selected-dial-code { top: 10px; font-size: 18px}

		/*SLIDESHOWS*/


		div.slideshow { margin-bottom: 70px; }
		div.slideshow-index { gap: 15px; padding: 20px 30px; }
		div.slideshow-index a.square { width: 16px; height: 16px; }
		div.slideshow-index a.square.active { width: 22px; height: 22px; border: 2px solid #7C7C7C;  }
		div.slideshow-index a.square.active:after { width: 15px; height: 15px; top: 2px; left: 2px; }
		div.slideshow-index a.play { width: 54px}

		div.slideshow button.slick-arrow {width: 30px !important; height: 120px!important; margin-top: -60px!important; background-image: url(/img/svg/arrow2.svg) !important}
		div.slideshow button.slick-arrow.slick-prev {left: 20px; transform: rotate(180deg);}
		div.slideshow button.slick-arrow.slick-next {right: 20px}

		div.slideshow-paradise button.slick-arrow {height: 120px!important; margin-top: -60px!important; font-size: 10px; letter-spacing: 3px; }
		div.slideshow-paradise button.slick-arrow span {font-size: 16px; letter-spacing: 3px; margin-top: 10px;}
		div.slideshow-paradise button.slick-arrow:after {width: 30px; }
		div.slideshow-paradise button.slick-arrow.slick-prev {left: 30px; padding-left: 30px}
		div.slideshow-paradise button.slick-arrow.slick-next {right: 30px; padding-right: 30px;}

		footer div.logo { margin: 0 auto 50px; }
		footer div.logo img { max-width: 360px; }
		div.footer-content {gap: 80px; margin: 0 auto 50px; padding: 0 30px}
		div.footer-links {gap: 40px; }
		div.footer-content strong {font-size: 18px; margin-bottom: 15px;}
		div.footer-content p {font-size: 14px; }
		div.footer-tagline { width: 360px; font-size: 24px; }
		div.footer-tools div.tools-left > div {padding: 0 15px; }
		div.footer-tools div.tools-right > div {padding: 0 15px; }
		div.footer-tools p, div.footer-tools a {line-height: 50px; }
		div.footer-tools p.somerswest { padding-top: 13px}
		div.language  { gap: 15px; }
		div.language span { line-height: 50px; }

		div.partner-logos { padding-bottom: 50px; margin-top: 80px}

		div.quote { padding: 40px; margin: 50px auto ; }
		div.quote p { font-size: 38px;}
		div.quote span { margin-top: 30px; }

		div.grid-7 { gap: 40px;}

		div.homes-list > div { gap: 40px}
		div.home-details div.title { font-size: 60px}
		div.home-details {gap: 30px}
		div.home-details p { font-size: 18px; margin-bottom: 0}

		div.home-header { gap: 40px}
		div.home-header div.title { font-size: 80px;}
		div.home-header div.subtitle { font-size: 24px;}

		div.blog-listings { column-gap: 20px; row-gap: 50px;grid-template-columns: 1fr 1fr 1fr ; }
		div.blog-listing { gap: 24px; }
		div.blog-listing div.category { font-size: 16px; letter-spacing: 2px; }
		div.blog-listing h2 {font-size: 48px; }

		
}

@media only screen and (max-width: 1380px) {
	div.paradise div.c2 {left: auto; right: 15% }
	div.grid-5 > div:last-child { padding-left: 40px}
	div.grid-6 > div:first-child { padding-right: 60px}
		div.blog-listing div.category { font-size: 14px; letter-spacing: 1px; }
		div.blog-listing h2 {font-size: 32px; }


		header nav > a { top: 120px;}

}


@media only screen and (max-width: 1280px), (max-height: 720px) {
		:root {
		  --default-font-size: 20px;
	    --default-input-font-size: 18px;
		  --dim-default-space: 80px;
		}

		h1 { font-size: 80px; }
		h2 { font-size: 60px; }
		h2.large {font-size: 72px;} 
		h3 { font-size: 32px; }
		div.hawaii div.title {  font-size: 96px; }
		
		div.stats div{ font-size: 24px; }
		div.stats span { font-size: 60px; }

		div.stats.alternate div{ font-size: 20px; }
/*div.stats.alternate div small { line-height: 50px}*/
/*div.stats.alternate div small:first-child { margin-bottom: 33px; }*/
		div.stats.alternate span { font-size: 36px; }

		div.home-header { margin-bottom: 40px}
		div.home-header div.stats  { gap: 20px}
		div.home-header div.stats  > div { font-size: 20px}
		div.home-header div.stats  > div span { font-size: 40px; }

		div.slideshow-paradise { padding-bottom: 100px}
		div.slideshow-paradise div.headline { font-size: 96px; }
		div.paradise div.title {font-size: 30px; margin-bottom: 0px; letter-spacing: 1px; width: 400px; max-width: 80%; padding-top: 30px; line-height: 30px}
/*		div.paradise div.caption img {width: 140px}*/
		div.registration div.title { font-size: 96px; }
		
		div.hawaii div.caption > div {padding: 0 0 40px 40px; max-width: 60%;}

		input[type="text"], input[type="search"], input[type="tel"], input[type="number"], input[type="email"], input[type="password"] { padding-left: 12px; }

		footer div.logo img { max-width: 320px; }
		div.footer-content {gap: 36px; }
		div.footer-links {gap: 20px; }
		div.footer-content strong {font-size: 16px; margin-bottom: 12px;}
		div.footer-content p {font-size: 13px; }
		div.footer-tagline { width: 360px; font-size: 20px; }

		div.grid-4 { column-gap: 100px; }
		div.partner-logos { padding-bottom: 0px; margin-top: 50px}

		div.quote p { font-size: 32px;}
		div.grid-7 { gap: 20px;}
		div.homes-list > div { gap: 30px}

		div.floorplan { gap: 40px}
		div.home-left div.title { font-size: 60px}
		div.home-left div.subtitle{ font-size: 24px}
		div.elevations { margin-bottom: 20px}
		div.home-left > p { padding-bottom: 20px}

		p.slide-content { font-size: 18px}
		div.slideshow-paradise button.slick-arrow {bottom: -120px !important }

		header nav > a { top: 110px}

}

@media only screen and (max-width: 1080px), (max-height: 680px) {
    div.registration div.field {
        grid-column: span 12 !important;
    }

	body.article-show-weather div.weather, header > a.btn { display: none;}
	.fully-scrolled header.attached.visible a.btn { display: table}

	a.btn { padding: 12px 16px; font-size: 18px; letter-spacing: 1px; margin: 30px auto 0px 0; }
	a.btn small {margin-top: 3px; letter-spacing: 1px}
	a.btn.download { padding-left: 40px; line-height: 33px; }
	a.btn.download:after{left: 14px; width: 12px; }
	a.btn.clipboard { padding-left: 40px; line-height: 33px; }
	a.btn.clipboard:after{left: 10px; width: 24px; }

	div.hawaii div.title {  font-size: 48px; }
	div.hawaii div.subtitle {  font-size: 20px; }
	div.hawaii p{  font-size: 16px; }

	div.features { gap: 100px;}
	div.features > div {gap: 15px}
	div.features p {font-size: 18px}
 
	div.stats div{ font-size: 18px; }
	div.stats span { font-size: 40px; }
/*	div.stats div.sep { height: 60px; }*/

	div.home-header { flex-direction: column; align-items: flex-start; gap: 0px}
	div.home-header > div { width: 100% !important}
	div.home-header div.stats  { gap: 20px}
	div.home-header div.stats  > div { font-size: 20px}
	div.home-header div.stats  > div span { font-size: 40px; }

	div.homes { gap: 50px 20px;}    
	div.homes > div { width: calc(50% - 10px); }

	div.slideshow-paradise { padding-bottom: 0px}
	div.slideshow-paradise div.headline { font-size: 48px; top: 40%; margin-top: 0}
	div.paradise div.title {font-size: 24px; }
	div.paradise p{font-size: 16px; }
/*	div.paradise div.c1 img { margin: 20px auto 0 0;}*/
/*	div.paradise div.c2 {left: auto; right: 10% }*/
/*	div.paradise div.c2 img { margin: 0px 0 20px auto;}*/
/*	div.paradise div.c3 img { margin: 0px auto 20px 0;}*/
/*	div.paradise div.caption img {width: 80px}*/

	div.slideshow button.slick-arrow {width: 20px !important; height: 60px!important; margin-top: -30px!important; background-image: url(/img/svg/arrow2.svg) !important}
	div.slideshow button.slick-arrow.slick-prev {left: 10px; transform: rotate(180deg);}
	div.slideshow button.slick-arrow.slick-next {right: 10px}
	div.slideshow-paradise button.slick-arrow {height: 60px!important; margin-top: -30px!important; font-size: 10px; letter-spacing: 2px; font-size: 0; bottom: -90px !important }
	div.slideshow-paradise button.slick-arrow span {font-size: 14px; letter-spacing: 2px; margin-top: 5px; font-size: 0}
	div.slideshow-paradise button.slick-arrow:after {width: 20px; }
	div.slideshow-paradise button.slick-arrow.slick-prev {left: 10px; padding-left: 20px}
	div.slideshow-paradise button.slick-arrow.slick-next {right: 10px; padding-right: 20px;}

	div.registration div.title { font-size: 72px; margin-bottom: 20px}

		div.footer-content {gap: 20px; }
		div.footer-links {gap: 20px; }
		div.footer-content strong {font-size: 16px; margin-bottom: 12px; white-space: wrap;}
		div.footer-content p {font-size: 13px; }
		div.footer-tagline { width: 260px; font-size: 20px; }
		div.footer-content > div:first-child {display: flex; flex-direction: column; gap: 40px}		
		footer div.logo img { max-width: 320px; }

	div.weather div.city { font-size: 20px;}
	div.weather div.temp { font-size: 12px; }
	div.weather div.city span { font-size: .5em; margin-bottom: 2px}
	div.weather img { width: 30px}
	
	div.image { margin: 50px auto 50px;}
	
	h2.margin-top-150 { margin-top: 80px !important;}
	div.homes-list { margin-top: 80px}
}

@media only screen and (max-width: 980px), (max-height: 600px) {

	h1 { font-size: 60px;}

	.in-view div.masthead div.intro2 { padding: 0 0 6vh 6vw;}

	div.footer-content { flex-direction: column}
	div.footer-content > div { width: 100% !important;}
	div.footer-content > div:first-child { flex-direction: row; justify-content: space-between; gap: 40px}
	div.footer-content > div:first-child > div { width: 50%}

div.footer-tools {flex-direction: column};
div.footer-tools > div { width: 100%; }
div.footer-tools div.tools-left {justify-content: space-between;border-bottom: 1px solid #ebebeb; gap: 0}
/*div.footer-tools > div {display: flex; gap: 0px; }*/
/*div.footer-tools div.tools-left {justify-content: flex-start;}*/
div.footer-tools div.tools-right {justify-content: space-between; flex-direction: column; align-items: center; }
div.footer-tools div.tools-left > div { text-align: center; width: 100%}
div.footer-tools div.tools-right > div {border-left: 0; text-align: center;}
/*div.footer-tools p, div.footer-tools a {line-height: 50px; display: inline-block; font-size: 10px; text-transform: uppercase;}*/
/*div.footer-tools div.tools-left a { font-family: indivisible; font-weight: 500;}*/
div.footer-tools p.somerswest { text-align: center; }
/*div.language  { display: flex; gap: 20px; justify-content: space-between; align-items: center;}*/
/*div.language span { font-size: 10px; text-transform: uppercase; display: block; line-height: 50px;  font-family: indivisible; font-weight: 500;}*/

	div.weather { top: 30px; left: auto; right: 30px;}
	div.weather div.city { font-size: 20px;}
	div.weather div.temp { font-size: 12px; }
	div.weather div.city span { font-size: .5em; margin-bottom: 2px}
	div.weather img { width: 30px}
	div.masthead div.logo img { margin: 0 auto 0 0}

		div.hawaii div.caption { position: relative; bottom: 0; left: 0; margin-top: -180px;  transform: none; max-width: 100%; width: 100%}
		div.hawaii div.caption > div { max-width: 100%; width: 100%; padding: 40px 30px 0;}
		div.hawaii div.caption a.btn { border: 1px solid #000}
		div.hawaii p { color: #000; margin-top: 60px}

		div.blog-listings { grid-template-columns: 1fr 1fr ; }

}


@media only screen and (max-width: 760px) {
		div.masthead-homes  {min-height: 0px;}
}
@media only screen and (max-width: 760px), (max-height: 600px) {

			:root {
		  --default-font-size: 16px;
		  --default-input-font-size: 14px;
		  --dim-input-height: 40px;
		  --button-font-size: 20px;
		  --button-height: 48px;
		  --dim-default-space: 50px;
		}

		h1 { font-size: 40px;}
		h2 { font-size: 32px; margin-bottom: 30px}
		h2.large { font-size: 34px; }
		h2 small { margin-bottom: 5px}
		h2 small.smaller { font-size: .6em}
		h3 { font-size: 21px; line-height: 1.25}
		h2 + h3 { margin-top: -25px}


		section.bring-up {margin-bottom: calc(-100 * var(--vh) + 200px)}
		div.intro3 { margin-bottom: 40px}

	    a.btn { padding: 10px 15px; font-size: 16px; letter-spacing: 1px;margin: 30px auto 0px 0;    }
	    a.btn.tight { letter-spacing: 1px;}
	    a.btn small { letter-spacing: 1px;}

		.fully-scrolled header.attached.visible > a.btn { display: none}
		.fully-scrolled header.attached.visible div.weather { flex-direction: column; gap: 3px; padding: 2px 5px 0 0; transition: none !important}
		.fully-scrolled header.attached.visible div.weather img { margin: 0px auto 0px;}
/*		header.attached div.weather {display: flex !important; filter: invert(1)}*/

/*		header nav { padding: 240px 0 60px}*/
		header nav > a { top: 80px}
		header nav > a { max-width: 80%}
		header div.menu {gap: 30px} 
		header div.menu > a:not(.btn) { font-size: 32px}
	    header nav { padding: 200px 0 60px; }

	    div.footer-tools div.tools-right { align-items: stretch; gap: 10px}
		div.footer-tools div.tools-right div.disclaimer { border-top: 1px solid #ebebeb}
		div.footer-tools div.tools-left > div { border-right: 1px solid #ebebeb}
		div.footer-tools { border-top: 1px solid #ebebeb}
		div.footer-tools div.tools-left > div:last-child {border: 0}

		div.image { overflow: hidden}
		div.image div.caption h2 { font-size: 28px}

		div.masthead div.tagline { font-size: 20px; line-height: 1.5; letter-spacing: 1px}
	    div.masthead a.scroll-down { font-size: 18px; letter-spacing: 1px; padding: 0 20px;}
		div.masthead a.scroll-down img { margin: 15px auto 0; width: 12px; }
		.in-view div.masthead a.scroll-down { bottom: 5vh;}

		div.masthead-homes > img {object-position: left center;}

		div.hawaii { }
		div.hawaii div.caption > div { padding: 40px 0 0}
		div.hawaii div.caption { margin-top: -0px; text-align: center;}
/*		div.hawaii div.caption > div { padding: 40px 0 0}*/
		div.hawaii  h2 { font-size: 32px; color: #000 !important; text-align: center;}
		div.hawaii p { margin-top: 0px; text-align: center;}
		div.hawaii a.btn { margin: 0 auto}

	    .in-view div.masthead div.intro2 {padding: 0px; }

		div.features { flex-direction: column; gap: 0px; align-items: center; margin: 20px auto 40px}

		div.slideshow button.slick-arrow { display: none !important;}
	    div.slideshow-index { gap: 15px;padding: 10px 20px; bottom: -30px}

		div.stats { gap: 10px}
/*		div.stats div.sep { height: 48px}*/
		div.stats div{ font-size: 12px; }
		div.stats span { font-size: 24px; margin-bottom: 5px}

	    div.stats.alternate { margin-top: 40px; margin-bottom: 40px;}
		div.stats.alternate div { font-size: 12px;}
		div.stats.alternate span { font-size: 24px;}
		div.stats.alternate div small:first-child { margin-bottom: 10px; }

		div.home-header div.stats { gap: 10px}
		div.home-header div.stats > div { font-size: 12px; }
		div.home-header div.stats > div span{ font-size: 24px; }

		div.homes { gap: 50px 20px; margin-bottom: 40px}    
		div.homes > div { width: 100%}

		div.buttons { flex-direction: column; }


		div.paradise div.caption img {width: 120px; margin-bottom: 20px}
		div.slideshow-paradise { padding-top: 0px; }
		div.slideshow-paradise div.headline { font-size: 32px;}
		div.paradise div.title {font-size: 24px; color: #000; padding: 0; line-height: 60px; }
		div.paradise p{font-size: 16px !important; color: #000; }
		p.slide-content { display: none}
		div.paradise div.caption { width: 100%; position: relative !important; left: 0 !important; right: 0 !important; bottom: 0 !important; padding: 30px 30px 0 !important; text-align: center !important; margin-top: -235px !important}
		p.slide-content { padding: 30px 30px 0}
		div.slick-slide.paradise { height: 96vh; padding-bottom: 150px}
/*		div.paradise div.caption img { margin: 20px auto 0;}*/
/*		div.paradise div.c2 img { margin: 0px auto 20px;}*/
/*		div.paradise div.c3 img { margin: 0px auto 20px;}*/
/*		div.paradise div.caption img {width: 40px; filter: invert(100%)}*/
		div.slideshow-paradise button.slick-arrow { top: calc(96vh - 200px) !important; !important; filter: invert(0);         margin-top: 0px !important; height: 40px !important;}
/*		div.slideshow-paradise button.slick-arrow{ }*/

		div.caption-islands img { object-fit: initial; width: 160vw; height: auto; left: -60vw; position: relative;}
		div.caption-islands  {height: auto}

		div.slideshow-index { gap: 5px; padding: 0; bottom: -30px; background: transparent;}
	    div.slideshow-index a.square { width: 8px; height: 8px; ;}		
	    div.slideshow-index a.square.active { width: 8px; height: 8px; border-color: #7C7C7C; }
		div.slideshow-index a.square.active:after { top: 0; left: 0; width: 100%; height: 100%;}
		div.mobile-image > img { width: 200vw; position: relative; left: -50vw; max-width: 900vw;}
		div.slideshow-index a.play { width: 40px}

		div.registration div.form {margin-top: 0}
		div.registration div.title { font-size: 48px; margin-bottom: 20px}
		div.registration h2 small.smaller { font-size: 18px; }
		div.registration h2 { font-size: 18px; margin-bottom: 30px}
		div.registration { padding: 60px 30px 60px; }
		section.masthead div.registration { padding-top: 240px;}
		div.checkbox label { font-size: 14px}

	   form button[type="submit"], form button[type="button"] { font-size: 20px; line-height: 48px; padding: 0 25px;}

		div.registration div.form-row { row-gap: 10px;}

		div.footer-content {flex-direction: column; flex-wrap: wrap; gap: 20px 20px; justify-content: flex-start;align-items: center;text-align: center; margin-bottom: 20px}
		div.footer-content > div:first-child > div { width: 100%}
		div.footer-links {gap: 20px; justify-content: flex-start;flex-direction: column; align-items: center;text-align: center}
		div.footer-links > div:last-child { grid-column: span 1; padding-top: 20px; }
		div.footer-content strong {font-size: 16px; margin-bottom: 12px; white-space: wrap;}
		div.footer-content p {font-size: 13px; width: 100%; text-align: center; max-width: 100%}
		div.footer-tagline { width: 100%; font-size: 16px; position: relative; top: 0; text-align: center; right: 0;}
		div.footer-tagline br { display: none; }
		div.footer-content > div:first-child {flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; text-align: center}	
		footer div.logo img { max-width: 320px; }
		div.footer-disclaimers > div { flex-direction: column; gap: 20px; padding: 20px 30px}
		div.footer-disclaimers > div > p { width: 100% !important}
		div.footer-disclaimers p { padding: 0 !important; border: 0 !important; text-align: center;}

		div.footer-content > div:first-child { display: none;}
		div.footer-links p:not(.social) { display: none}
		div.footer-links { display: grid; grid-template-columns: 1fr; column-gap: 30px; row-gap: 0px}

		div.registration div.field { grid-column: span 12 !important; }
		div.form-footer {flex-direction: column; align-items: center;}

		div.masthead div.logo img {  max-width: 200px}

		div.iti__country-container {top: 2px; height: 40px;}
		div.iti__country-container button { font-size: 18px; padding: 0 35px 0 0px; line-height: 40px}
		.iti__selected-country-primary { gap: 10px;}
		div.iti__arrow { width: 20px !important; height: 10px !important; }
		#Phone { padding-left: 140px !important;}
		div.iti__selected-dial-code { top: 12px; font-size: 14px}

		div.paradise-home div.caption.bottom { padding-bottom: 20px}
		div.weather.active div.city { display: none;}
		body.article-show-weather div.weather { display: flex !important; gap: 10px; align-items: center; justify-content: flex-end; top: 0; right: 0; padding: 10px 10px 0 0}
		header.active div.weather { filter: invert(1); display: none !important}

		div.image { margin: 40px auto}
		div.grid-4 { column-gap: 50px; row-gap: 40px; grid-template-columns: 1fr;}
		div.image + div.grid-4  { margin: 0 auto}

		div.grid-5{ flex-direction: column; gap: 30px}
		 div.grid-6 { flex-direction: column-reverse; gap: 30px}
		div.grid-5 > div, div.grid-6 > div { width: 100%; padding: 0 !important}
		div.grid-8{ flex-direction: column; gap: 30px}
		div.grid-9 { flex-direction: column-reverse; gap: 30px}
		div.grid-8 > div, div.grid-9 > div { width: 100% !important; padding: 0 !important; text-align: center;}
		
		 section.move-up { margin-top: -30vh}


		div.quote { padding: 30px 30px}
		div.quote p { font-size: 24px; line-height: 1.2}

		div.grid-7 {flex-direction: column; gap: 20px}
		div.grid-7 > div { width: 100%}
		div.grid-7 p { margin-top: 20px}

		div.homes-list > div { flex-direction: column-reverse; gap: 30px}
		div.homes-list > div > div { width: 100% !important}
		div.home-details div.title { font-size: 48px}
		div.home-details {gap: 24px; align-items: center; text-align: center;}
		div.home-details a.btn { margin: 0 auto}

		div.home-header div.title { font-size: 48px;padding-top: 0px }
		div.home-header div.subtitle { font-size: 18px; }
		div.home-header > div { text-align: center;}
		div.floorplan { margin-top: 70px}
		div.floorplan-disclaimer { flex-direction: column; gap: 10px;}
		div.floorplan-disclaimer > p { width: 100% !important; font-size: 12px;}
		div.floorplan-disclaimer img { width: 40px}
		div.floorplan { flex-direction: column; gap: 100px;}
		div.floorplan > div { width: 100% !important}

		div.home-left { text-align: center;}

		div.blog-listings { grid-template-columns: 1fr; }
		div.blog-listing div.info { text-align: center; align-items: center; width: 100%}
		div.blog-listing a.btn { margin: 0 auto}

		div.elevations div.caption {letter-spacing: 1px; font-size: 14px; padding: 10px}


}

@media only screen and (max-width: 380px){
    div.slideshow-paradise div.headline {  top: 35%;    }	
	div.masthead div.intro { padding-top: 30px}
	div.masthead div.intro2 h1 { margin-bottom: 20px}

}