html,body { height:100%; color: var(--darkest); font-family: 'Titillium Web', sans-serif;font-size: 16px; font-weight: 400; }

@media screen and (max-width:500px) {
    html, body { font-size:14px; }
}
:root {

    --green: #139D9C;
    --dark: #3A4356;
    --darkest: #112145;
    --grey: #F4F4F4;
    --highlight: #36CFE4; 
}
@media screen and (max-width:500px) {
.hideMobile {display:none;}
}

.icon-circle { width:80px; height:80px; line-height:80px!important;border-radius:100%; display:block!important; background:#00acae;  color:#fff; font-size:30px;  text-align:center; margin:0 auto 10px auto; }


.number {
    width: 50px;
    height: 50px;
    background: #00ACAE;
    color: #fff;
    display: block;
    float: left;
    border-radius: 40px;
    font-size: 26px;
    text-align: center;
    line-height: 50px;
    margin-right: 10px;
}


/* =========== PDC LOVE ============= */

.loveAlbum { display:flex; justify-content:space-evenly; flex-wrap:wrap; } 
.loveAlbum div {   transform:rotate(-2deg);margin-bottom:40px; width:300px;box-shadow: 5px 5px 20px rgba(0,0,0,0.2); padding:20px; background:#efefef; }
.loveAlbum div img { width:100%; height:250px; object-fit:cover; }
.loveAlbum div a { text-decoration:none; }
.loveAlbum div p { text-align:center; padding-top:10px; margin:0; }
.loveAlbum div:nth-child(2n) { transform:rotate(3deg); }
.hearts { width:100%; height:100%; position:fixed; left:0; top:0; pointer-events:none; }
.heart { z-index:100;width:40px; height:40px; opacity:0.6; position:absolute; bottom:-20%;  animation:floatUp;animation-duration: 2s; animation-delay:2s;   animation-iteration-count: infinite;  }
@keyframes floatUp { 
    0% { bottom:-20%; transform:rotate(0deg);}
    100% { bottom:110%; transform:rotate(365deg); }
}
.heart:nth-child(2) {  animation-delay:1s; left:10%; }
.heart:nth-child(3) {  animation-delay:1.8s; left:33%;}
.heart:nth-child(4) {  animation-delay:2.2s; left:50%; }
.heart:nth-child(5) {  animation-delay:3s; left:68%; }
.heart:nth-child(6) {  animation-delay:1.3s; left:90%; }
.template-17 .hero h1 { max-width:850px; margin:50px auto 0 auto; font-size:70px; padding:0 40px; font-family: 'Playball', cursive; font-weight:normal; }
.template-17  h2 { font-size:34px; line-height:130%; margin-bottom:20px; padding-top:20px;}

@media screen and (max-width:768px) { 
.template-17 .hero h1 { margin:0 auto;font-size:30px; padding:0 20px;  }
.template-17  h2 { font-size:22px; }


}

/* =========== Accordian ============== */
.noWin { margin-bottom:40px; }
.accordionContent         {  overflow:hidden; padding:7px 0; max-width:700px; display:none; }
.accordionButton p { margin:0; }
.accordionButton         {     transition: opacity 0.3s ease; color:#fff; background:#338C7F; border:none; border-radius:5px; cursor:pointer; font-size:20px; font-weight: 300; line-height: 140%; margin:0 0 8px 0; padding:20px 60px 20px 20px; position:relative; }
.accordionButton:hover { opacity:0.8; }
.accordionButton:after { transition: transform 0.3s ease; content:""; width:12px; height:12px; transform: rotate(45deg);position:absolute; right:20px; top:20px; border-right:5px solid #fff;  border-bottom:5px solid #fff; }
.accordionButton.on:after { transform: rotate(-135deg); }
.accordionContent p { font-size:18px; line-height: 140%;  }



/* ===== boxes ===== */

.box { aspect-ratio: 1 / 1; display: block;  object-fit: cover;  }
.boxSml { width:16.66665%;}
.boxMed { width:33.3333%;}
.boxBig { width:50%;}
.boxWide { aspect-ratio: 4 / 3; }

@media screen and (max-width:500px) {
    .boxSml img { width:50%;}
    .boxSml { width:100%;}
    .boxMed {width:100%; aspect-ratio: 19 / 9;}
}


/* ======== header =========== */

header { z-index:100;padding:0 40px; background:#fff; position:fixed; top:0; width:100%; left:0;display:flex; align-items:center; justify-content:space-between;box-shadow:0 0 20px rgba(0,0,0,0.1);   }

        
        
.mobileSubButton { display:none; }
.burger { display:none; }


header nav ul { display:flex; }
header nav ul li { position:relative; }
header nav ul li a { font-size:16px; position:relative; display:block; padding:20px 10px; color:var(--dark); text-decoration:none; }
header nav ul ul { display:none; }
header nav ul ul li a { color:var(--darkest); }

nav ul li a:hover { color:var(--highlight); }
nav ul li.active > a { color:var(--highlight); }

.logo { transition:all 0.3s ease; width:320px; height:50px; display:block; position:relative; top:4px;}
.logo img { display:block; object-fit:contain;  width:100%; }


@media screen and (max-width:768px) {
header { padding:10px 20px; }
header nav ul li a { padding:14px 10px; color:#fff; }
.logo { width:220px;  top:8px;}
 header nav ul ul li a {
        padding: 8px 10px;
        color: var(--green);
    }
}

@media screen and (min-width:769px) {

/* === dropdown ===== */
header nav ul ul { transition:all 0.3s ease;background:#fff; white-space: nowrap;display:block; opacity:0; pointer-events:none; padding:0 0; position:absolute; left:0; top:70px; box-shadow:0 0 5px rgba(0,0,0,0.2); border-radius:5px; }
header nav ul li:hover ul { opacity:1; pointer-events:auto;top:50px;}
header nav ul ul li a { padding:12px 12px;  }
header nav ul ul li { border-bottom:1px solid #ccc;}
header nav ul ul li:last-child { border-bottom:none;}

}


@media screen and (max-width:767px) {
    
header nav { transition:all 0.3s ease; display:flex; width:100%; overflow-y:scroll; height:100%; left:0; top:0; opacity:0; pointer-events:none; position:fixed; background:var(--dark); background-size: 150%;
background-position: -200px -100px; z-index:200;padding:80px 24px 20px; }
header nav ul { display:flex; flex-direction:column; justify-content:flex-start; align-items:center; width:100%; height:100%; }
header nav li a { color:#fff; display:block; text-decoration:none; font-size:24px; padding:10px; text-decoration:none;text-transform: uppercase;
letter-spacing: 3px;font-size: 12px; font-weight:400;}

.menuOpen nav { opacity:1; pointer-events:auto; }


/* mobile dropdown */
.mobileSubButton { display:inline-block; width:26px;height:26px; line-height:24px; color:#fff; cursor:pointer;  background:var(--green); text-align:center; border-radius:50%;  }   
.subMenuenuOpen + ul { display:block; margin-bottom:20px; }

header nav ul li { display:flex; align-items:center; flex-wrap:wrap;justify-content: space-between; width: 100%;  }
header nav li li a { letter-spacing:1px; text-transform:capitalize; padding:6px 10px;  color:#ccc;}


.burger { display:block;background:none; border:none; cursor: pointer; transition: all 0.3s ease; position: fixed; width:50px; height:50px;  right:10px; top:5px;  z-index: 300; }
.burger span {  transition: all 0.4s ease; display: block;  background: var(--green);  width:60%;  height: 4px;  margin-top: -2px;  position: absolute;  left: 20%;  top: 50%; }
.scrolled .burger span,
.scrolled .burger:before,
.scrolled .burger:after { background:  var(--green); }

.burger:before,
.burger:after {  content: "";  display: block;  background: var(--green);  width: 60%;  height: 4px;  position: absolute;  left: 20%;
  transform-origin: center center;  transform: rotate(0deg);  transition: all 0.3s ease;}

.burger:before {  top: 30%;  margin-top: -2px;}
.burger:after {  bottom: 30%;  margin-bottom: -2px;}


/* == burger onclick ==== */

.menuOpen .burger span { left:100%; opacity: 0;  background: var(--green);}
.menuOpen .burger:before {  top: 50%;  transform: rotate(45deg); background: var(--green); }
.menuOpen .burger:after {  bottom: 50%;  transform: rotate(-45deg);  background: var(--green);}

}

/* ==== structure ====== */


main section { padding:40px 0; }
.content p { margin-bottom:12px; }
p a,
li a{ color:var(--green); }
.content p a { color:inherit; }


.greyBg { background:var(--grey); }
.greenBg { background:var(--green);color:#fff;  }
.greenBg a { color:inherit; }
.greenBg .btn { background:#fff; color:var(--darkest); }
.darkBg { background:var(--dark); color:#fff; }

.offsetGreenBg { color:#fff; position:relative; }
.offsetGreenBg:before { content:""; background:var(--green); display:block; z-index:-1; width:100%; height:70%; position:absolute; left:0; top:0; }

.callout { background:#efefef; padding:40px; }

@media screen and (max-width:768px) {
.content { padding:20px; }
.s-p0 { padding:0;}

}


/* ======= CARDS ========== */
.card { display:block; background:#fff;box-shadow:0 0 20px rgba(0,0,0,0.1); border-radius:10px; text-decoration:none; color:inherit; 
     display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; height:100%; }
.card > div {   height:100%;  padding:20px; display:flex; flex-direction:column; align-items:flex-start; }
.card .btn { margin-top:auto; }
.card img { border-radius:10px 10px 0 0; }

.cards li a { display:block; background:#fff; box-shadow:0 0 20px rgba(0,0,0,0.1); text-decoration:none; color:inherit; 
     display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; height:100%; padding-bottom:20px;
     
}
.cards li { width:50%; }
.cards li img { aspect-ratio:16/9; object-fit:cover; }

/* ==== CTA ====== */
.cta {  }

.wave {
  position: absolute;
  top: 10%;
  left: 0;
  width: 100%;
  height: 20vh;
  z-index:-1;
  
  background: url(/assets/images/waves-01.png);
  background-size: 100vw 20vh;
}
.wave1 {
  animation: animate 20s linear infinite;
  z-index: -1;
  opacity: 1;
  animation-delay: 0s;
    top: 20%;

}
.wave2 {
    top: 30%;

  animation: animate2 15s linear infinite;
  z-index: -1;
  opacity: 1;
  animation-delay: -5s;
}
.wave3 {
  animation: animate 10s linear infinite;
  z-index: -1;
  opacity: 1;
  animation-delay: -2s;

}
@keyframes animate {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: 100vw;
  }
}
@keyframes animate2 {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: -100vw;
  }
}

/* ===== HOME PAGE  ========== */
.homeCarousel { height:100%; max-height:600px;  }

.homeHero {position:relative; }
.homeHero img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; }
.heroPanels { width:33.3333%; height:100%; color:#fff;position:relative;display: flex;  flex-direction: column;  justify-content: flex-end; }
.heroPanels h1 { padding:40px; font-size:3.6vw; line-height:100%;}
.heroPanels h1 span { color:var(--highlight);}
.heroTintPanel { width:33.3333%; background:var(--dark); height:100%; opacity:0.7; position:absolute; left:0; top:0; z-index:0; mix-blend-mode:multiply;  }

.solidPanel { background:var(--dark); width:100%;  padding:40px;}
.solidPanel p { margin-bottom:0; font-size:18px; }
.solidGreen { background:var(--green);}

.circleArrowBtn { position:absolute; right:-25px; bottom:40px; width:50px; height:50px; border-radius:50%; background:var(--green) url(/assets/images/arrow-right.svg) no-repeat center; font-size:0; }
.circleArrowBtn:hover { background-color:var(--highlight);}

.section250 { background:url(/assets/images/250bg.jpg) no-repeat center / cover; }


@media screen and (max-width:768px) {
    
.homeCarousel { max-height:500px; padding-top:0; }
.homeHero img { width:100%; height:500px; object-fit:cover; }
.heroTintPanel { opacity:0.2; width:100%; }
.circleArrowBtn { right:20px; bottom:26px; width:40px; height:40px;  }

.heroPanels h1 { font-size:10vw;background:none; width:100%; display:block; padding:20px;}
.heroPanels { width:100%;  }
    .solidPanel { padding:20px 80px 20px 20px; }
}


/* ==== page hero ====== */


#pageHero { width:100%; }
#pageHero .parallax-window { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; z-index:-1; }
#pageHero h1 { max-width:800px; text-align:center; }
#pageHero:before { content:"";height:120px; position:fixed; top:0; left:0; width:100%; z-index:10;
background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%); }


/* ==== breadcrumbs ======= */

#breadcrumb { display:flex; justify-content:center; margin-bottom:40px; padding:20px;  }
#breadcrumb a { color:#000; font-size:14px;}
#breadcrumb a:hover { color:var(--highlight); }

#breadcrumb li { color:#000; font-size:14px;padding:0 2px;}
#breadcrumb li:after { content:" /" ;}
#breadcrumb li:last-child:after { content:"" ;}

/* ==== fonts ======= */
h1, .h1 { font-size:50px; line-height:110%;}

h2, .h2 { font-size:32px; line-height:130%; color:var(--green); }
h3, .h3 {font-size:24px; line-height:130%;}
.story h3 { margin-bottom:12px; }

h4, .h4 {font-size:18px; line-height:130%; color:var(--green); margin-bottom:20px;}
.textGreen { color:var(--green); }
.textWhite { color:#fff; }
.textHighlight { color:var(--highlight); }
p, .p { font-size:16px; line-height:130%; margin-bottom:12px; }
p a, .p a { color:var(--green);}

.heading-large { font-size:300%; }

.faqs-for-residents .content,
.faqs-for-clients .content{ text-align:center; }

.justifyleft { text-align:left; }

.textlist { padding-left:15px; list-style-type: disc; margin-bottom:20px;}
.textlist li { margin-bottom:10px; }

ol { padding-left:20px; }
ol li { list-style:numeric; margin-bottom:6px; }

.acc-content ul {  padding-left:20px; }
.acc-content ul li { list-style:disc; margin-bottom:6px; }


@media screen and (max-width:768px) {
h1, .h1 { font-size:40px; line-height:110%;}
h2, .h2 { font-size:28px; line-height:110%;}
h3, .h3 {font-size:21px; line-height:130%;}
p, .p { font-size:15px; line-height:130%; }

}
/* === 250 million ====== */

.numberCounter { font-size:20vw; line-height:80%; font-weight:700; letter-spacing:-5px; }
.million { text-transform:uppercase; font-size:9vw; font-weight:700; line-height:80%; }


@media screen and (max-width:1200px) {
    .numberCounter { font-size:22vw; text-align:center; }
    .million { font-size:10vw; text-align:center;}
}
@media screen and (max-width:500px) {
    .numberCounter { font-size:50vw; text-align:center; }
    .million { font-size:22vw; text-align:center;}
}
/* ===== icons ====== */

.icons { display:flex; flex-wrap:wrap;align-items:flex-start; }
.icons li { width:50%; text-align:center; padding:40px; }
.icons li img { width:70px; height:70px; object-fit:contain; }

.iconsCenter { justify-content:center;}

@media screen and (max-width:768px) {
.icons { padding-top:30px; }
.icons h3 { line-height:110%; margin-bottom:20px;}
.icons li { padding:10px; }
.icons li img  { width:50px; height:50px;}
    
}


/* === Video on Home ===== */

.videoContainer { height:100%; width:100%;max-width:100%; padding-bottom:40px;}
.videoContainer iframe {  box-shadow:0 10px 30px rgba(0,0,0,0.3);}

@media screen and (max-width:768px) {
.videoContainer { }
.videoContainer iframe { aspect-ratio: 16/9; width: 100%; height: auto;}
.offsetGreenBg { padding-bottom:0; }

}

/* ===== buttons ====== */

.btn { cursor:pointer; background:var(--green); display:inline-block; text-transform:uppercase; letter-spacing:2px; font-weight:700; padding:8px 30px;color:#fff; text-decoration:none; border-radius:40px; }
.btn:hover { background:var(--highlight); }

@media screen and (max-width:768px) {
.btn { font-size:14px; }

}


/* ======== tables ================= */
table { width:100%; }
th { background:#000; padding:10px; color:#fff; text-align:center; }
td { background:#fff; padding:10px;  text-align:center;}
tbody tr:nth-child(odd) td { background:#efefef;  }
tbody td { border-right:1px solid #fff; }
th:first-child,
td:first-child { text-align:left; }
thead td { background:#00ACAE; font-size:24px; color:#fff; }

.greyBg table { margin:20px 0; }
.greyBg tbody tr:nth-child(odd) td { background:#ccc;  }
.greyBg td { padding:6px;  font-size:14px;}

    
    

table.textTable { width:100%; margin-bottom:30px; }
table.textTable td,table.textTable th { text-align:left; vertical-align:middle; }
table.textTable td:first-child { width:5%;text-align:center; }
table.textTable td:last-child { width:70%; }

/* ======== stats tables ================= */

table.stats { margin-bottom:40px;border-top:1px solid #ccc; width:99%!important; }
table.stats td:first-child { background:#000; color:#fff; border-bottom:1px solid #444;}
table.stats td { text-align:left; width:40%; padding:13px;border-right:1px solid #ccc; border-bottom:1px solid #ccc; }
table.stats td:first-child { width:60%; }

/* ==== forms ====== */

    
    .form { display:flex; flex-direction:column; max-width:500px; margin:0 auto;}
    .form > div { margin-bottom:10px; display:flex; flex-direction:column; justify-content:space-between; width:100%;}
    .form label { width:100%; text-align:left; margin-bottom:3px;}
    .form input[type="text"],
    .form textarea { width:100%; padding:14px; border:1px solid #ccc; background:#efefef;}
    
    .form button { padding:20px; }
    
    
/* ===== teamList ======== */
.teamList li:nth-child(even) div { flex-direction:row-reverse; }
.teamList li img { box-shadow:0 0 20px rgba(0,0,0,0.2); border-radius:50%; border:12px solid #fff; }

/* ===== testimonialsList ======== */
.testimonialsList li img { aspect-ratio:1/1; object-fit:contain; padding:40px; }
@media screen and (max-width:500px) {

.testimonialsList li img { width:100%; aspect-ratio:4/2;padding:20px; }

}
/* ==== footer ====== */

footer { background:var(--darkest); color:#fff; }
footer a { color:var(--green); }

@media screen and (max-width:500px) {
    footer h3 a { display:block; }
}