/* Minification failed. Returning unminified contents.
(271,15): run-time error CSS1039: Token not allowed after unary operator: '-lt-color'
(275,15): run-time error CSS1039: Token not allowed after unary operator: '-dark-color'
(283,15): run-time error CSS1039: Token not allowed after unary operator: '-blue-color'
(482,27): run-time error CSS1039: Token not allowed after unary operator: '-green-color'
(493,27): run-time error CSS1039: Token not allowed after unary operator: '-green-color'
(504,27): run-time error CSS1039: Token not allowed after unary operator: '-green-color'
(2593,7): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2594,7): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2595,7): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2596,7): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2597,7): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2598,7): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2599,7): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2600,7): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2601,7): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2602,7): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2603,7): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2605,7): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
 */
html {
    /* overflow: hidden; */
    overflow-x: hidden;
    /* overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
    overflow-x: hidden; */
 /*   scroll-behavior: smooth;   */
 
}

/**/ svg {
    shape-rendering: auto;
  } 
  
html, body {
    overscroll-behavior-y: none;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeSpeed;
    border-color: #fff;
  }

  * { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

body{
  background-color: white;
  overflow-x: hidden;
 
}

.willChangeTransform{
  will-change: transform;
}

.gpuLight{
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}

.gpu {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }


#debug{
  position: fixed;
  font-size: 15px;
  font-weight: 800;
  color:white;
  top:50%;
  left:20px;
  pointer-events: none;
  text-shadow: 1px 1px #000000;
  z-index: 9999;
}

#uiContainer{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  pointer-events: none;
}

#siteDisclaimer{
  width: 100%;
  padding-top: 3%;
  padding-bottom: 3%;
  background: #01080e;
}

.footerDisclaimerPos{
  position: relative;
  width: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.footerDisclaimerText{
  font-family: 'Tofino Personal', Geneva, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 11px; 
  line-height: 13px;
  font-style: italic;
  color: #4c5b62;
}

.footerDisclaimerBold{
  font-family: 'Tofino Medium Italic Personal' !important;
  font-weight: 500 !important;
}

.orientationContainer{
  width: 80%;
  display: flex;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); 
}

.orientationText{
  font-family: 'Tofino Ultra Personal';
  font-weight: 900;
  font-style: normal;
/*  font-size: 220px; */
  color: white;
  font-size: 3vw;
  padding: 20px;
  text-transform: uppercase;

}

.orientationLeftCol{
  height: 100px;
}


.lRball{
  font-size: 1.5rem;
  position: relative;
  top: -0.8rem;
}

.disclaimerText{
  font-family: 'Tofino Personal', Geneva, Helvetica, sans-serif;
  font-weight: bold;
  font-style: italic;
  font-size: 12px; 
  line-height: 12px; 
  text-transform: uppercase;
}

.neighborhoodDisclaimerPos{
  position: absolute;
  left: 72%;
  top: 74%;
}

.bbqBox2DisclaimerPos{
  position: absolute;
  left: 40%;
  top: 95%;
  color: #a8b8c4;
}

.topWhiteGraident{
  background: rgb(255,255,255);
  background: linear-gradient(0deg, rgba(255,255,255,0) 33%, rgba(255,255,255,1) 54%, rgba(255,255,255,1) 100%);
/*  background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 70%, rgba(255,255,255,1) 100%); */
}

.transitionLogoWrapper{
  width: 80%;
  height: 126px;
  max-width: 986px;
}

.topNavGradient{
  background: rgb(0,0,0);
  background: linear-gradient(180deg, rgba(0,0,0,0.4374063375350141) 0%, rgba(0,0,0,0) 100%);
}

.scrollDownAnim{
  position: absolute;
  left: 90%;
  top: 100%;
  transform: translate(0px, -207%);
  width: 49px;
  height: 89px;
}

.scrollDownAnimLeft{
  position: absolute;
  left: 7%;
  top: 100%;
  transform: translate(0px, -207%);
  width: 49px;
  height: 89px;
}

.logoTest{
  width:500px;
  height: 100%;

  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
}

.removeSelect{
  -webkit-touch-callout : none;
  -webkit-user-select:none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

section{
  padding:0;
  margin: 0;
}

.selectDisable{
   user-select: none;
   -moz-user-select: none;
   -webkit-user-drag: none;
   -webkit-user-select: none;
   -ms-user-select: none; 
}

.pinCircle{
  border-radius: 50%;
}

#uiOverlay{
  width:100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  background: rgb(0,0,0);
  background: linear-gradient(180deg, rgba(0,0,0,1) 25%, rgba(0,0,0,0.1737015845070422) 100%);
  opacity:0;
}

#whiteout{
  width:100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  opacity:0;
  background-color: #ffffff;
  pointer-events: none;
}

.courtsImageContainer{
  width: 500px;
  height: 500px;
  position: absolute;
  overflow: hidden;
  background-color : rgba(0, 255, 0, 1);
}

.fontColorLight{
  color: var(--lt-color);
}

.fontColorDark{
  color: var(--dark-color);
}

.fontColorGray{
  color: #939eaa;
}

.fontColorBlue{
  color: var(--blue-color);
}

.disclaimerPopUp{
  width: 90%;
  /* height: 210; */
  max-width: 650px;
  padding: 20;
}

.popupDisclaimerLeftCol{
  position: relative;
  width: 30%;
  max-width: 150px;
  margin-right: 5px;
  padding:5px;
  float: left;
}

.popupDisclaimerRighttCol{
  position: relative;
  width: 100%;
  height: auto;
  padding: 20px;
  float: right;
}

.dislcaimerPopupText1{
  font-family: 'Tofino Ultra Personal';
  font-weight: 900;
  font-style: normal;
  color: white;
  text-transform: uppercase;
}

.dislcaimerPopupText2{
  font-family: 'Tofino Semibold Personal';
  font-weight: 600;
  font-style: normal;
}

.disclaimerPopupSize{
  font-size: 22px;
  line-height: 23px;
}

#preloader{
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top: 0px;
  left: 0px;
 /* background-color: #1c1e1f; */
}

.preloaderContainer{
  width: 57%;
  max-width: 680px;
}

.preloaderLeftCol{
  height: 90px;
  width: 25%;
}

.preloaderRightCol{
  width: 55%;
}

.preloaderT1{
  font-family: 'Tofino Ultra Personal';
  font-weight: 900;
  font-style: normal;
  font-size: 30px;
  line-height: 30px;
  color: white;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.preloaderT1 sup{
  font-size: 17px;
}

.preloaderT2{
  font-family: 'Tofino Semibold Personal';
  font-weight: 600;
  font-style: normal;
  font-size: 16px;
  line-height: 16px;
  color: white;
  margin-bottom: 15px;
}

.preloaderT3{
  font-family: 'Tofino Semibold Personal';
  font-weight: 600;
  font-style: normal;
  font-size: 13px;
  color: #5d5d5e;
  text-transform: uppercase;
}

.lakesidePopup{
  position: absolute;
  width: 70%;
  height: 210px;
  max-width: 1240px;
  background-color: red;
  left: 50%;
  top: 50%;

  /*
  padding: 25px;
  display: "inline-flex";
*/
  transform: translate(-50%, -50%);
  background-image: url(./assets/section_lakeside/popup-texture.jpg);
}

.navHomeMainWrapper{
  height: 100%;
}

.navHomeDivider{
  height: 100%;
  background: rgb(255,255,255);
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
}

.navHomeRightImage{
  background-position: 69% 50%;
  background-size: 310%;
}

.navHomeLeftImage{
  background-position: 48% 50%;
  background-size: cover;
}

.navHomeBottomShape{
  top: 30%;
}

.footerMainImage{
  background-size: cover;
  background-position: 50% 50%;
}


.footerTitle{
  font-family: 'Tofino Ultra Personal';
  font-weight: 900;
  font-style: normal;
  text-transform: uppercase;
}

.footerTitleSize{
  font-size: clamp(35px, 6vw, 90px); /* */
  line-height:  clamp(35px, 5vw, 90px);
}

.footerTitlePos{
  left: 20%;
  top: 70%;
}

.spinnerArrowUp {
  width: 0; 
  height: 0; 
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 12px solid black;
}

.spinnerArrowRight {
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid black;
}

.navCourtsBallWidth{
  width: 100%;
}

/*
  Standard CTA Button
*/

.ctaCarretStandard {
  width: 0; 
  height: 0; 
  position: relative;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 12px solid;
  border-left-color: var(--green-color);
  margin-right: 6px;
}

.ctaCarretMedium {
  width: 0; 
  height: 0; 
  position: relative;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 9px solid;
  border-left-color: var(--green-color);
  margin-right: 6px;
}

.ctaCarretSmall {
  width: 0; 
  height: 0; 
  position: relative;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 5px solid;
  border-left-color: var(--green-color);
  margin-right: 4px;
}

.ctaStyleStandard{
  padding: 16px;
  border-style: solid;
  border-width: 4px;
  border-radius: 12px;
}

.ctaStyleMedium{
  padding: 14px;
  border-style: solid;
  border-width: 3px;
  border-radius: 9px;
}

.ctaStyleSmall{
  padding: 13px;
  border-style: solid;
  border-width: 2px;
  border-radius: 1px;
}

.ctaStyleExtended{
  padding-top:11px;
  padding-bottom:11px;
  text-align: center;
  border-style: solid;
  border-width: 2px;
  border-radius: 1px;
}

.ctaLabel{
  font-family: 'Tofino Semibold Personal';
  font-weight: 600;
  font-style: italic;
  color: white;
  text-transform: uppercase;
}

.ctaFontStandard{
  font-size: 14px; 
  line-height: 14px;
  top: -2px;
}

.ctaFontMedium{
  font-size: 12px; 
  line-height: 12px;
  top: 0px;
}

.ctaFontSmall{
  font-size: 10px; 
  line-height: 10px;
  top: 0px;
}


/*========================================================================
  Font definitions
=========================================================================*/

h1{
  font-family: 'Tofino Ultra Personal';
  font-weight: 900;
  font-style: normal;
/*  font-size: 220px; */
  font-size: 5vw;
  line-height: 200px;
}

h2 {
  font-family: 'Tofino Semibold Personal';
  font-weight: 600;
  font-style: normal;
  font-size: 220px;
  line-height: 200px;
}

.pin-spacer{
  overflow: hidden !important;
}

.lakesideText{
  font-family: 'Tofino Personal', Geneva, Helvetica, sans-serif;
  font-weight: bold;
  font-style: italic;
  font-size: clamp(35px, 4vw, 50px); /* */
  line-height:  clamp(35px, 4vw, 50px);
  text-transform: uppercase;
}

.lakesideTextCenter{
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.lakesideTextLeft{
  left: 50%;
  text-align: left;
}

.lakesideTextF2{
  top: 18%;
  width: 37%;
}

.lakesideTextF1{
  left: 4%;
  top: 10%;
  width: 44%;
}

.calloutText{
  font-family: 'Tofino Personal', Geneva, Helvetica, sans-serif;
  font-weight: bold;
  font-style: italic;
  font-size: clamp(22px, 2vw, 30px); /* */
  line-height:  clamp(22px, 2vw, 30px);
  text-transform: uppercase;
}

.poolCalloutText{
  font-family: 'Tofino Personal', Geneva, Helvetica, sans-serif;
  font-weight: bold;
  font-style: italic;
  text-transform: uppercase;
}

.calloutTextLarge{
  font-size: clamp(16px, 3vw, 30px); 
  line-height:  clamp(16px, 3vw, 30px); 
}

.calloutTextXL{
  font-size: clamp(30px, 3vw, 80px); 
  line-height:  clamp(30px, 3vw, 80px); 
}

.siteTextXL{
  font-size: clamp(30px, 3.5vw, 80px); 
  line-height:  clamp(30px, 3.5vw, 80px); 
}

.calloutTextXL sup{
  font-size: 1rem;
  margin-left: 0.25rem;
}

.interimTextPos{
  top: 36%;
  left: 50%;
  width: 55%;
}


/* .neighborhoodInterm{
  font-family: 'Tofino Personal', Geneva, Helvetica, sans-serif;
  font-weight: bold;
  font-size: clamp(15px, 6vw, 60px); 
  line-height:  clamp(15px, 6vw, 60px);
  text-transform: uppercase;
} */

.neighborhoodInterm{
  font-family: 'Tofino Personal', Geneva, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 25px; 
  line-height:  25px;
  text-transform: uppercase;
}

.interimChunky{
  font-family: 'Tofino Ultra Personal';
  font-weight: 900;
  font-style: italic;
}

.lowercase{
  text-transform: lowercase;
}

.courtTextPos{
  left: 56%;
  top: 96%;
  transform: translateY(-180%);
}

.XLText{
  font-size: clamp(16px, 3vw, 30px); 
}

.clubhouseText{
  font-family: 'Tofino Personal', Geneva, Helvetica, sans-serif;
  font-weight: bold;
  font-style: italic;
  font-size: clamp(25px, 3.5vw, 60px); 
  line-height:  clamp(25px, 3.5vw, 60px);
  text-transform: uppercase;
}

.clubhouseDisclaimer{
  font-size: 12px; 
  line-height: 12px;
  margin-left: 12px;
}

.chTextPos1{
  left: 19%;
  top: 16%;
  width: 90%
}

.chTextPos2{
  left: 38%;
  top: 45%;
  width: 30%
}

.chTextPos3{
  left: 18%;
  top: 60%;
  width: 30%
}

.chTextPos4{
  left: 23%;
  top: 15%;
  width: 40%
}
.chPortraitText {
  top: 87% !important;
 /* left: 50% !important;
  transform: translateX(-50%);*/
}

.chBgPos2{
  background-position: 23% 0%;
}


.bbqTextPos1{
  left: 11%;
  top: 57%;
  width: 90%
}

.bbqTextPos2{
  left: 62%;
  top: 9%;
  width: 28%;
}

.bbqTextPos3{
  left: 83%;
  top: 30%;
  width: 16%;
}

 
.bbqTextPos4{
  left: 67%;
  top: 6%;
  width: 30%;
}

.textShadow{
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7);
}

.testClass {
  font-size: 30px;
}

.centerText{
  text-align: center;
}

.interimText{
  width: 80%;
}

.lakesideFrameBGZoom{
  background-size: 250%;
  background-position: center center;
}

.lakesideFrame1Bg{
  background-size: 137%;
  background-position: 58% center;
  background-repeat: no-repeat;
}

.lakesideFrame2Bg{
  background-size: cover;
  background-position: 58% center;
  background-repeat: no-repeat;
}

.lakesideFrame3Bg{
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.navHomeRightImage{
  background-position: 69% 50%;
  background-size: 310%;
}

.navHomeEndFramePos{
  top: 33%;
  left: 62%;
  width: 20%;
}

.poolCalloutPos1{
  width: 100%;
  left: 37%
}

.poolCalloutPos2{
  width: 100%;
  left: 39%
}

.poolCalloutPos3{
  width: 100%;
  left: 36%
}

.courtsBallTextPos1{
  width: 100%;
  left: -14%
}

.courtsBallTextPos2{
  width: 100%;
  left: -28%
}

.courtsBallTextPos3{
  width: 100%;
  left: -34%
}

.spinnerTitle{
  font-family: 'Tofino Personal', Geneva, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 18px; 
  text-transform: uppercase;
  white-space: nowrap;
}

.navBufferGradient{
  background: rgb(152,187,217);
background: linear-gradient(180deg, rgba(152,187,217,1) 0%, rgba(152,187,217,1) 53%, rgba(255,255,255,1) 100%);
}

.courts_s1_css, .courts_s2_css, .courts_s3_css , .courts_s4_css{
  background-position: 0% 0%;
}

.courtsTitle{
  width: 70%;
}

.courtsSlide4Text{
  font-family: 'Tofino Ultra Personal';
  font-weight: 900;
  font-style: normal;
  text-transform: uppercase;
  font-size: 4vw;
  line-height: 3.5vw;
}

.courtsSlide4TextPos{
  left: 52%;
  top: 25%;
}

.bubbleLady{
  width: 85% !important;
  max-width: 310px;
}

.bubbleMan{
  width: 115% !important;
  max-width: 317px !important;
}

/*
  START ASPECT RESIZING
 */





/*
  3.4 RATIO
 */

@media (max-aspect-ratio: 34/10) { 
  .calloutTextXL{
    font-size: clamp(30px, 3vh, 40px); 
    line-height:  clamp(30px, 3vh, 40px); 
  }
}

/*
  3.0 RATIO
 */

 @media (max-aspect-ratio: 30/10) { 

  .neighborhoodDisclaimerPos{
    left: 69%;
    top: 99%;
  }

  .BBQXLText{
    font-size: 5vh !important;
    line-height: 5vh !important;
 
  }

  .courtsSlide4Text{
    font-size: 7.5vh;
    line-height: 7.5vh;
  }

  .footerTitlePos{
    left: 20%;
    top: 65%;
  }
/* 
  .bbqTextPos2{
    left: 15%;
    top: 58%;
    width: 28%;
  } */

  .courtsBallTextPos1{
    left: -28%
  }
  
  .courtsBallTextPos3{
    left: -27%
  }
  
 }

 /*
  2.9 RATIO
 */

 @media (max-aspect-ratio: 29/10) { 

 

 
 }

 /*
  2.8 RATIO
 */

 @media (min-aspect-ratio: 28/10) { 

  .navHomeEndFramePos{
    top: 20% !important;
    left: 65%;
  }
}

@media (max-aspect-ratio: 28/10) { 
  
  .lakesideTextF1{
    width: 28%;
  }

}


/*
  2.7 RATIO
 */

 @media (max-aspect-ratio: 27/10) { 
  
  .courtsSlide4TextPos{
    top: 22%;
  }


}
/*
  2.5 RATIO
 */

 @media (min-aspect-ratio: 25/10) { 

  .lakesideText{
    font-size: clamp(25px, 7vh, 60px); 
    line-height: clamp(25px, 7vh, 60px); 
  }

  .lakesideTextF2{
    width: 37%;
    top: 10%;
    left:52%
  }

 }

 @media (max-aspect-ratio: 25/10) { 

  .neighborhoodDisclaimerPos{
    left: 67%;
    top: 93%;
  }

  .courtsSlide4Text{
    font-size: 3.5vw;
    line-height: 3.5vw;
  }

  .courtsBallTextPos1{
    width: 100%;
    left: -17%
  }
  
  .courtsBallTextPos2{
    width: 100%;
    left: -33%
  }
  
  .courtsBallTextPos3{
    width: 100%;
    left: -41%
  }

  .navHomeEndFramePos{
    top: 29%;
    left: 63%;
    width: 19%;
  }

  .lakesideFrame3Bg{
    background-size: cover;
    background-position: 50% 50%;
  }

  .lakesideFrame2Bg{
    background-size: cover;
    background-position: 58% center;
  }

  .calloutText{
    font-size: clamp(22px, 2vh, 30px); /* */
    line-height:  clamp(22px, 2vh, 30px);
  }

  .calloutTextLarge{
    font-size: 3vh; 
    line-height:  3vh;
  }


  .BBQXLText{
    font-size: clamp(21px, 3vw, 30px) !important;
    line-height:  clamp(21px, 3vw, 30px) !important; 
  }

  .neighborhoodInterm{
    font-size: clamp(15px, 5vh, 60px); 
    line-height:  clamp(15px, 5vh, 60px);
  }

  .interimText{
    width: 50%;
  }

  .lakesideFrame1Bg{
    background-size: cover;
    background-position: 50% 44%;
  }

}

/*
  2.3 RATIO
 */

 @media (min-aspect-ratio: 23/10) { 

  .neighborhoodInterm{
    font-size: 6.5vh; 
    line-height: 6.5vh;
  }

  .navHomeEndFramePos{
    top: 28%;
    left: 65%;
    width: 20%;
  }

  .lakesideText{
    font-size: clamp(25px, 5vh, 60px); 
    line-height: clamp(25px, 5vh, 60px); 
  }

 }

 @media (max-aspect-ratio: 23/10) { 

  .footerTitlePos{
    left: 20%;
    top: 66%;
  }


  .lakesideText{
    font-size: clamp(25px, 6vh, 45); 
    line-height: clamp(25px, 6vh, 45px); 
  }

  .lakesideTextF2{
    top: 11%;
  }


  .neighborhoodInterm{
    font-size: clamp(15px, 5vh, 60px); 
    line-height:  clamp(15px, 5vh, 60px);
  }

  .interimText{
    width: 50%;
  }

  .lakesideFrame1Bg{
    background-size: 106%;
    background-position: 91% 50%;
  }

  .neighborhoodDisclaimerPos{
    left: 67%;
    top: 89%;
  }

 }

   /*
  2.1 RATIO
 */

 @media (max-aspect-ratio: 21/10) { 

  .lakesideTextF2{
    width: 31%;
  }

  .bbqTextPos4{
    left: 65%;
    width: 32%;
  }


 }

  /*
  2.0 RATIO
 */

 @media (min-aspect-ratio: 20/10) { 



 }

 @media (max-aspect-ratio: 20/10) { 
  
  .lakesideFrame1Bg{
    background-size: 106%;
    background-position: 64% 50%;
  }

  .lakesideTextF1{
    left: 4%;
    top: 16%;
    width: 31%;
  }

    
  .footerTitlePos{
    left: 20%;
    top: 66%;
  }

 }


  /*
  1.9 RATIO
 */
 
 @media (min-aspect-ratio: 19/10) { 

  .poolCalloutPos1{
    width: 100%;
    left: 0%;
  }
  
  .poolCalloutPos2{
    width: 100%;
    left: 0%;
  }
  
  .poolCalloutPos3{
    width: 100%;
    left: 0%;
  }

 }

 @media (max-aspect-ratio: 19/10) { 

  .bbqTextPos4{
    width:30%;
  }

  .bbqTextPos2{
    left: 64%;
    top: 8%;
    width: 23%;
  }

  .neighborhoodDisclaimerPos{
    left: 69%;
    top: 82%;
  }

  .courtsBallTextPos1{
    width: 100%;
    left: -17%;
  }
  
  .courtsBallTextPos2{
    width: 110%;
    left: -34%
  }
  
  .courtsBallTextPos3{
    width: 130%;
    left: -39%
  }

 }


  /*
  1.8 RATIO
 */

 @media (max-aspect-ratio: 18/10) { 

  .bbqTextPos4{
    width: 25%;
  }

  .bbqTextPos2{
    width: 24%;
  }

 }


  /*
  1.7 RATIO
 */
 
 @media (min-aspect-ratio: 17/10) { 


 }

 @media (max-aspect-ratio: 17/10) { 

  .bbqTextPos4{
    width: 28%;
  }

  .navHomeEndFramePos{
    width: 23%;
  }


  .neighborhoodDisclaimerPos{
    left: 74%;
    top: 77%;
  }

  .courtsBallTextPos1{
    width: 100%;
    left: -17%
  }
  
  .courtsBallTextPos2{
    width: 100%;
    left: -33%
  }
  
  .courtsBallTextPos3{
    width: 100%;
    left: -39%
  }

  .footerTitlePos{
    left: 20%;
    top: 66%;
  }

.navHomeLeftImage{
  background-position: 50% 50%;
  background-size: cover;
}

  .lakesideTextF2{
    width: 36%;
  }

  .lakesideText{
    font-size: clamp(25px, 4.5vw, 45px); 
    line-height: clamp(25px, 4.5vw, 45px); 
  }
  
  .lakesideFrame1Bg{
    background-size: 129%;
    background-position: 46% 50%;
  }

  .lakesideTextF1{
    left: 4%;
    top: 10%;
    width: 40%;
  }


 }


 /*
  1.6 RATIO
 */


 @media (max-aspect-ratio: 16/10) { 
  .neighborhoodDisclaimerPos{
    left: 74%;
    top: 84%;
 }

 .bbqTextPos2{
  left:63%;
  top: 8%;
  width: 30%;
 }

}
 /*
  1.5 RATIO
 */

 @media (max-aspect-ratio: 15/10) { 

  .bbqTextPos4{
    width:32%;
  }

  .neighborhoodDisclaimerPos{
    left: 74%;
    top: 79%;
 }

  .poolCalloutPos1{
    width: 100%;
    left: 30%
  }
  
  .poolCalloutPos2{
    width: 100%;
    left: 35%
  }
  
  .poolCalloutPos3{
    width: 100%;
    left: 30%
  }

  .navHomeEndFramePos{
    top: 34%;
    left: 65%;
    width: 25%;
  }


  .courtsBallTextPos1{
    width: 100%;
    left: -19%
  }
  
  .courtsBallTextPos2{
    width: 100%;
    left: -34%
  }
  
  .courtsBallTextPos3{
    width: 100%;
    left: -39%
  }


 }

 /*
  1.4 RATIO
 */


 @media (min-aspect-ratio: 14/10) { 

    .navHomeRightImage{
      background-position: 74% 50%;
      background-size: cover;
    }
 }

 @media (max-aspect-ratio: 14/10) { 


  .courtsBallTextPos1{
    width: 100%;
    left: -19%
  }
  
  .courtsBallTextPos2{
    width: 100%;
    left: -37%
  }
  
  .courtsBallTextPos3{
    width: 100%;
    left: -44%
  }

  .footerTitleSize{
    font-size: 6vw; 
    line-height:  5vw;
  }

  .navHomeRightImage{
    background-position: 68% 50%;
    background-size: cover;
  }

  .lakesideTextF2{
    width: 34%;

  }

  .lakesideTextF1{
    left: 4%;
    top: 10%;
    width: 43%;
  }


  .lakesideFrame2Bg{
    background-size: 154%;
    background-position: 42% 50%;
  }
  

  .interimText{
    width: 80%;
  }

  .neighborhoodInterm{
    font-size: clamp(15px, 5vw, 60px); 
    line-height:  clamp(15px, 5vw, 60px);
  }
}

/*
  1.3 RATIO
 */

@media (max-aspect-ratio: 13/10) { 

  .preloaderContainer{
    width: 57%;
  }

  .neighborhoodDisclaimerPos{
    left: 75%;
    top: 71%;
 }

  .courtsBallTextPos1{
    width: 100%;
    left: -22%
  }
  
  .courtsBallTextPos2{
    width: 100%;
    left: -40%
  }
  
  .courtsBallTextPos3{
    width: 110%;
    left: -52%
  }

  .lakesideFrame1Bg{
    background-size: 137%;
    background-position: 58% center;
  }

  .bbqTextPos1{
    left: 7%;
    top: 56%;
    width: 98%;
  }

  .bbqTextPos2{
    width: 35%;
  }

  .bbqTextPos3{
    left: 81%;
  }
  
  .bbqTextPos4{
    left: 64%;
    top: 6%;
    width: 35%;
  }
  

}

/*
  1.2 RATIO
 */

 @media (max-aspect-ratio: 12/10) { 

.preloaderContainer{
  width: 54%;
}

  .bbqTextPos2{
    width: 36%;
  }

  .bbqTextPos4{
    left:66%;
    width: 36%;
  }


  .courtsBallTextPos1{
    width: 100%;
    left: -22%
  }
  
  .courtsBallTextPos2{
    width: 100%;
    left: -39%
  }
  
  .courtsBallTextPos3{
    width: 120%;
    left: -47%
  }


    .interimText{
      width: 80%;
    }

    .neighborhoodInterm{
      font-size: clamp(15px, 5vw, 60px); 
      line-height:  clamp(15px, 5vw, 60px);
    }

    .lakesideTextF2{
      width: 38%;
      top: 13%;
      left:52%
    }
  
 }


/*
  1.1 RATIO
 */


 @media (max-aspect-ratio: 11/10) { 

  .preloaderRightCol{
    width: 70%;
  }

  .bbqTextPos4{
    width: 36%;
    left: 64%;
  }

  .neighborhoodDisclaimerPos{
    left: 75%;
    top: 66%;
 }


  .interimTextPos{
    width:68%;
  }

  .siteTextXL{
    font-size: clamp(30px, 4vw, 80px); 
    line-height:  clamp(30px, 4vw, 80px); 
  }

  .navHomeEndFramePos{
    left: 58%;
    top:21%;
    width: 37%;
  }

  .courtsBallTextPos1{
    width: 100%;
    left: -25%
  }
  
  .courtsBallTextPos2{
    width: 120%;
    left: -49%
  }
  
  .courtsBallTextPos3{
    width: 131%;
    left: -57%
  }

  .bbqTextPos1{
    left: 4%;
  }

  .bbqTextPos2{
    left: 60%;
  }

  .bbqTextPos3{
    width: 21%;
  }

  .lakesideTextF2{
    width: 40%;
    top: 13%;
    left:52%
  }
 }

/*
  1.0 RATIO
 */

 @media (min-aspect-ratio: 10/10) { 

  .lakesideText{
    font-size: clamp(25px, 5vh, 60px); 
    line-height: clamp(25px, 5vh, 60px); 
  }

 }

 @media (max-aspect-ratio: 10/10) {

  .scrollDownAnim{
    left: 86%;
    transform: translate(0px, -107%);
  }

  .scrollDownAnimLeft{
    left: 9%;
    transform: translate(0px, -107%);
  }

  .neighborhoodDisclaimerPos{
    left: 75%;
    top: 63%;
 }

  .bbqTextPos1{
    left: 43%;
    top: 17%;
  }

  .bbqTextPos2{
    top: 81%;
  }

  .bbqTextPos4{
    left:52%;
    top: 71%;
    width: 45%;
  }

  .preloaderContainer{
    width: 60%;
  }

  .courtsSlide4Text{
    font-size: 4vw;
    line-height: 4vw;
  }

  .courtTextPos{
    left: 44%;
    top: 96%;
    transform: translateY(-180%);
  }

  .poolCalloutPos1{
    width: 100%;
    left: 27%
  }
  
  .poolCalloutPos2{
    width: 100%;
    left: 27%
  }
  
  .poolCalloutPos3{
    width: 100%;
    left: 25%
  }


  .calloutTextXL{
    font-size: 4.5vw; 
    line-height: 4.5vw; 
  }
  
  .footerTitleSize{
    font-size: 7vw; 
    line-height:  6vw;
  }

  .footerTitlePos{
    left: 20%;
    top: 70%;
  }

  .navHomeEndFramePos{
    top: 18%;
    left: 26%;
    width: 50%;
  }

  .navHomeRightImage{
    background-position: 70% 50%;
    background-size: cover;
  }

  .lakesideTextF1{
    left: 6%;
    top: 15%;
    width: 38%;
  }


  .lakesideText{
    font-size: clamp(25px, 4vh, 60px); 
    line-height: clamp(25px, 4vh, 60px); 
  }

  .lakesideTextF2{
    width: 47%;
    top: 17%
  }

  .lakesideFrame3Bg{
    background-position: 78% 50%;
  }


  .lakesideFrame2Bg{
    background-size: cover;
    background-position: 28% 50%;
  }

  .interimText{
    width: 80%;
  }

  .neighborhoodInterm{
    font-size: clamp(15px, 5vw, 60px); 
    line-height:  clamp(15px, 5vw, 60px);
  }
  
  /* .bbqTextPos2{
    left: 44%;
    top: 13%;
    width: 38%;
  } */

  .bbqTextPos3{
    left: 67%;
    top: 76%;
    width: 28%;
  }

  .chTextPos1{
    left: 34%;
  }

  .chTextPos2{
    left: 26%;
    width: 70%;
  }

  .chTextPos3{
    left: 26%;
    width: 70%;
  }

  .chTextPos4{
    left: 23%;
    width: 70%;
  }

}

 /*
  0.9 RATIO
 */
 @media (max-aspect-ratio: 9/10) {

  

  .lRball{
    font-size: 1rem;
    top: -0.2rem;
  }

  .courtsTitle{
    width: 80%;
  }

  .courts_s1_css{
    background-position: 67% 0%;
  }


  .courts_s2_css{
    background-position: 31% 0%;
  }

  .courts_s3_css{
    background-position: 69% 0%;
  }

  .courts_s4_css{
    background-position: 56% 0%;
  }

  .disclaimerText{
    font-size: 10px;
    line-height: 10px;
  }

  .neighborhoodDisclaimerPos{
    left: 73%;
    top: 63%;
 }

  .preloaderLeftCol{
    width: 20%;
    margin-right: 5vw;
  }

  .preloaderT1{
    font-size: 3vw;
    line-height:3vw;
  }
  
  .preloaderT2{
    font-size: 2vw;
    line-height: 2vw;
  }

  .courtsBallTextPos1{
    width: 125%;
    left: -25%
  }
  
  .courtsBallTextPos2{
    width: 125%;
    left: -48%
  }
  
  .courtsBallTextPos3{
    width: 125%;
    left: -58%
  }

  .navHomeBottomShape{
    top: 20%;
  }

  .navHomeRightImage{
    background-position: 72% 50%;
    background-size: cover;
  }

  .navHomeMainWrapper{
    height: 80lvh;
  }

  .lakesideTextF1{
    left: 6%;
    top: 19%;
    width: 43%;
  }

  .lakesideTextF2{
    width: 59%;
    top: 21%
  }

  .lakesideFrame2Bg{
    background-size: cover;
    background-position: 46% 50%;
  }

  .bbqTextPos1{
    left: 41%;
    top: 16%;
  }

  .bbqTextPos2{
    left: 55%;
    top: 80%;
  }


  .clubhouseText{
    font-size: clamp(31px, 5.5vw, 60px); 
    line-height:  clamp(31px, 5.5vw, 60px);
  }

  .chTextPos1{
    left: 27%;
    width: 50%
  }

  .chTextPos2{
    left: 27%;
    width: 50%
  }

  .chTextPos3{
    width: 100%;
    left: 11%;
  }

  .chTextPos4{
    width: 70%
  }

  .chBgPos2{
    background-position: 27% 0%;
  }

  .chBgPos4{
    background-position: 38% 0%;
  }

  

}


 /*
  0.8 RATIO
 */
@media (max-aspect-ratio: 8/10) {

  .footerDisclaimerPos{
    width: 85%;
    transform: translate(-50%, -115%);
  }

  .bbqBox2DisclaimerPos{
    left: 17%;
  }

  .neighborhoodDisclaimerPos{
    left: 59%;
    top: 57%;
 }
  

  .courtsBallTextPos1{
    width: 100%;
    left: -24%
  }
  
  .courtsBallTextPos2{
    width: 120%;
    left: -43%
  }
  
  .courtsBallTextPos3{
    width: 131%;
    left: -53%
  }


  .poolCalloutPos1{
    width: 100%;
    left: 33%
  }
  
  .poolCalloutPos2{
    width: 100%;
    left: 31%
  }
  
  .poolCalloutPos3{
    width: 100%;
    left: 33%
  }

  .calloutTextXL{
    font-size: 4.25vw !important; 
    line-height: 4.25vw !important; 
  }

  .footerTitleSize{
    font-size: 9vw; 
    line-height: 8vw;
  }

  .footerTitlePos{
    left: 8%;
    top: 66%;
  }

  .lakesideText{
    font-size: clamp(16px, 7.0vw, 40px);
    line-height:  clamp(16px, 7.0vw, 40px);
  }

  .lakesideFrame1Bg{
    background-size: cover;
    background-position: 46% 50%;
  }

  .calloutText{
    font-size: clamp(16px, 3.0vw, 30px);
    line-height:  clamp(16px, 3.0vw, 30px);
  }


}

.bbqTextPosWidth{
  width: 165%
}

section{
  min-height: 100lvh;
}
 /*
  0.7 RATIO
 */
@media (max-aspect-ratio: 7/10) {

  .bbqBox2DisclaimerPos{
   top: 92%;
  }

  .preloaderContainer{
    width: 90%;
  }

  .preloaderLeftCol{
   height: 80px;
  }

  .courts_s1_css{
    background-position: 56% 0%;
  }

  .scrollDownAnim{
    width: 6%;
    height: 11%;
  }

  .scrollDownAnimLeft{
    width: 6%;
    height: 11%;
  }

  .interimTextPos{
    width:85%;
  }


  .courtsBallTextPos1{
    width: 100%;
    left: -24%
  }
  
  .courtsBallTextPos2{
    width: 120%;
    left: -43%
  }
  
  .courtsBallTextPos3{
    width: 131%;
    left: -53%
  }

  .bbqTextPos1{
    left: 44%;
    top: 14%;
  }

  .bbqTextPos2{
    left: 62%;
    top: 79%;
  }

  .preloaderT1{
    font-size: 5.0vw;
    line-height:5.0vw;
  }

  .preloaderT1 sup{
    font-size: 0.6rem;
  }
  
  .preloaderT2{
    font-size: 3vw;
    line-height: 3vw;
  }

  .spinnerTitle{
    font-size: 3.25vw; 
  }

  .courtsBallTextPos1{
    width: 125%;
    left: -17%
  }
  
  .courtsBallTextPos2{
    width: 125%;
    left: -34%
  }
  
  .courtsBallTextPos3{
    width: 125%;
    left: -40%
  }


  .calloutTextXL{
    font-size: 5vw; 
    line-height:  5vw; 
  }

  .footerTitlePos{
    left: 6%;
    top: 66%;
  }

  .navHomeEndFramePos{
    top: 25%;
    left: 26%;
    width: 50%;
  }


  .navHomeRightImage{
    background-position: 74% 50%;
    background-size: cover;
  }

  .lakesideTextF1{
    left: 11%;
    top: 18%;
    width: 48%;
  }

  .calloutTextLarge{
    font-size: 3vw; 
    line-height:  3vw;
  }
/* 
  .bbqTextPos4{
    min-width:auto;
    max-width: 270px;
    width: 65%;
  } */

  /* .bbqTextPos2{
    left: 48%;
    top: 14%;
  } */

  .chBgPos3{
    background-position: 34% 0%;
  }

  .neighborhoodInterm{
    font-size: 7.5vw; 
    line-height: 7.5vw;
  /**/
  }
  
}

 /*
  0.6 RATIO : IOS Safari live 
 */
 @media (max-aspect-ratio: 6/10) {

  .footerDisclaimerText{
    font-size: 10px;
  }

  .footerDisclaimerPos{
    width: 90%;
    transform: translate(-50%, -20%);
  }

  .scrollDownAnim{
    width: 8%;
    height: 14%;
  }

  .scrollDownAnimLeft{
    width: 8%;
    height: 14%;
  }


  .interimSmall{
    font-size: 6vw !important;
    line-height: 5.8vw !important;
  }

  .courtsTitle{
    width: 90%;
  }

  .courts_s1_css{
    background-position: 56% 0%;
  }

  .courts_s2_css{
    background-position: 34% 0%;
  }

  .courts_s2_css{
    background-position: 52% 0%;
  }

  .neighborhoodDisclaimerPos{
    left: 59%;
    top: 56%;
 }

  .interimTextPos{
    top: 30%;
  }

  .siteTextXL{
    font-size: 8vw; 
    line-height:  8vw; 
  }

  .disclaimerPopUp{
    padding: 15px;
  }

  .disclaimerPopupSize{
    font-size: 4.5vw;
    line-height: 4.5vw;
  }

  .bbqTextPos1{
    left: 28%;
    top: 27%;
  }

  .bbqTextPos2{
    left: 40%;
    top: 55%;
    width: 60%;
  }

  .bbqTextPos4{
    left:22%;
    top: 54%;
    width: 60%;
  }

  .courtsSlide4Text{
    font-size: 5.5vw;
    line-height: 5.5vw;
  }
  
  .courtsSlide4TextPos{
    width: 100%;
    left: 42%;
    top: 30%;
  }

  .courtsBallTextPos1{
    width: 125%;
    left: -26%
  }
  
  .courtsBallTextPos2{
    width: 125%;
    left: -50%
  }
  
  .courtsBallTextPos3{
    width: 125%;
    left: -57%
  }

  .poolCalloutPos1{
    width: 100%;
    left: 28%
  }
  
  .poolCalloutPos2{
    width: 100%;
    left: 33%
  }
  
  .poolCalloutPos3{
    width: 100%;
    left: 28%
  }


  .calloutTextXL{
    font-size: 6.5vw !important; 
    line-height: 6.5vw !important; 
  }

  .footerTitleSize{
    font-size: 10vw;
    line-height: 9vw;
  }

  .footerTitlePos{
    left: 6%;
    top: 69%;
  }

  .navHomeEndFramePos{
    top: 20%;
    left: 20%;
    width: 70%;
  }

  .lakesideTextF1{
    left: 11%;
    top: 18%;
    width: 65%;
  }

  .lakesideTextF2{
    width: 61%;
    top: 21%
  }

  .lakesideFrame3Bg{
    background-position: 73% 50%;
  }


  .neighborhoodInterm{
    font-size: 6vw; 
    line-height: 6vw;
  /**/
  }

  .courtTextPos{
    left: 52%;
  }

  /*
  .bbqTextPos1{
    left: 32%;
    top: 11%;
    width: 120%
  }
  */

  .calloutTextLarge{
    font-size: 3.25vw; /* */
    line-height:  3.25vw;
  }
/* 
  .bbqTextPos2{
    left: 51%;
    top: 14%;
  } */

  .BBQXLText{
    font-size: 4.25vw !important;
    line-height: 4.25vw !important;
  }

   .bbqTextPos3{
    left: 68%;
    top: 74%;
    width: 28%;
  }


  .chPortraitText {
    top: 82% !important;
  }

  .clubhouseText{
    font-size: 7.0vw; 
    line-height: 7.0vw;
  }

  .chTextPos1{
    left: 22%;
    width: 70%;
  }

  .chTextPos2{
    left: 17%;
    top: 42%;
    width: 70%;
  }

  .chTextPos3{
    width: 90%;
    left: 20%
  }

  .chTextPos4{
    left: 12%;
    width: 90%
  }

  .interimText{
    width: 90%;
  }

}




 /*
  0.5 RATIO - Mobile Portrait Screens
 */
 @media (max-aspect-ratio: 5/10) {

  .courtsBallTextPos1{
    width: 125%;
    left: -21%
  }
  
  .courtsBallTextPos2{
    width: 125%;
    left: -40%
  }
  
  .courtsBallTextPos3{
    width: 125%;
    left: -49%
  }

  .calloutText{
    font-size: 4.2vw;
    line-height:  4.2vw;
  }

  .calloutTextLarge{
    font-size: 3.25vw; /* */
    line-height:  3.25vw;
  }

  .courtTextPos{
    left: 45%;
    transform: translateY(-144%);
  }
/* 
  .bbqTextPos2{
    left: 61%;
    top: 14%;
    width: 35%
  } */

}

/*
  XL SCREENS
*/
@media (min-width: 1201px) and (max-width: 1600px)  {


  
}

/*
  LARGE SCREENS
*/
  @media (min-width: 1025px) and (max-width: 1200px)  {

  }

/*
  SMALL SCREENS

   .calloutText{
      font-size: clamp(16px, 3.2vw, 40px);
      line-height:  clamp(16px, 3.2vw, 40px);
    }

*/
  @media (min-width: 769px) and (max-width: 1024px)  {

   
    
  }

/*    
  TABLET SCREENS

    .calloutText{
      font-size: clamp(16px, 3.5vw, 40px);
      line-height:  clamp(16px, 3.5vw, 40px);
    }

*/

  @media (min-width: 481px) and (max-width: 768px)  {

  


  }

/*
  MOBILE SCREENS
*/

    @media (min-width: 120px) and (max-width: 480px)  {

    }

    :root{
      --lt-color: #fefefe;
      --dark-color: #231f20;
      --ltGrey-color: #e7e7e7;
      --mdGrey-color: #6e6f73;
      --darkGrey-color: #444444;
      --blue-color: #add2ef;
      --black-color: #000000;
      --yellow-color: #fae500;
      --green-color: #3cda3d;
      --roboto-font: 'Roboto Flex', sans-serif;
      --max-width-full: 1300px;
  
      --plyr-color-main: #e94229;
  }