/* Afternoon: page layout (shared styles live in styles.css) */

/* Inline text styles */
.fs-1-25rem { font-size: 1.25rem; }
.fw-200 { font-weight: 200; }
.fw-500 { font-weight: 500; }

/* Section 1: background photo */
.s1 { min-height: 100vh; }
.bg.s1-bg { background-image: url("../images/otoh_the_island_ext_rooftop_pool_draft03.7729aea46364.jpg"); background-position: 50% 50%; }
.s1-row { grid-template-columns: minmax(0, 24fr); column-gap: 30px; }
.s1-c1 { padding: 13.0479vh 0 0 0; justify-content: flex-end; }

/* Section 2: Afternoon */
.s2 { min-height: 152.03px; background-color: rgb(227, 222, 209); }
.s2-row { grid-template-columns: minmax(0, 24fr); column-gap: 30px; }
.s2-c1 { padding: 30.3516px 0 0 0; justify-content: center; text-align: center; --ha: center; }
.s2-c1-g1 { margin-bottom: 0.0273px; }
.s2-c1-h1 { font-size: 3.5rem; font-weight: 200; line-height: 0; letter-spacing: 1em; color: rgb(0, 0, 0); margin-bottom: 0.55em; text-align: center; }

/* Section 3: Poolside Sun And Fun */
.s3 { min-height: 847.89px; background-color: rgb(255, 255, 255); }
.bg.s3-bg { background-image: url("../images/bayhousepool.ae14ecb3db6a.jpg"); background-position: 50% 0%; }
.s3-row { grid-template-columns: minmax(0, 12fr) minmax(0, 12fr); column-gap: 30px; }
.s3-c1 { padding: 0 0 0 3.4722vw; justify-content: flex-end; }
.s3-c2 { padding: 0 6.9406vw; justify-content: center; background-color: rgba(34, 49, 30, 0.75); }
.s3-c2-h1 { font-size: 4.5rem; font-weight: 200; line-height: 1em; letter-spacing: 0.2em; color: rgb(255, 255, 255); margin-bottom: 0.55em; text-align: center; }
.s3-c2-p { font-size: 1.125rem; font-weight: 300; line-height: 2em; color: rgb(255, 255, 255); margin-bottom: 0.55em; text-align: left; }

/* Section 4: Savory Alfresco Socials */
.s4 { min-height: 886.55px; background-color: rgb(227, 222, 209); padding: 50px; }
.s4-row { grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); column-gap: 0; }
.s4-c1 { padding: 0 6.3853vw 0 3.8867vw; justify-content: center; }
.s4-c1-g1 { margin-bottom: 25.9639px; }
.s4-c1-h3 { font-size: 3.75rem; font-weight: 200; line-height: 1em; letter-spacing: 0.2em; color: rgb(0, 0, 0); margin-bottom: 0.55em; text-align: center; }
.s4-c1-p { font-size: 1.125rem; font-weight: 200; line-height: 2em; color: rgb(0, 0, 0); margin-bottom: 0.875em; text-align: center; }
.s4-c2 { padding: 0 6.9444vw 0 0; justify-content: center; text-align: center; --ha: center; }
.bg.s4-c2-bg { background-image: url("../images/island-west-bay-lifestyle-beach-club-bar-122020-min.53e3610fa0c3.jpg"); background-position: 50% 50%; }

/* Section 5: background photo */
.s5 { min-height: 100vh; background-color: rgb(255, 255, 255); }
.bg.s5-bg { background-image: url("../images/adobestock_811908969.ff6924414af1.jpeg"); background-position: 50% 0%; }
.s5-row { grid-template-columns: minmax(0, 24fr); column-gap: 30px; }
.s5-c1 { padding: 0 0 0 3.4722vw; justify-content: flex-end; }

/* Section 6: Let The Tail-wagging Begin */
.s6 { min-height: 481.21px; background-color: rgb(34, 49, 30); padding: 50px 132px; }
.s6-row { grid-template-columns: minmax(0, 24fr); column-gap: 0; }
.s6-c1 { padding: 0; justify-content: center; }
.s6-c1-h3 { font-size: 3.75rem; font-weight: 200; line-height: 1em; letter-spacing: 0.2em; color: rgb(255, 255, 255); margin-bottom: 0.55em; text-align: center; }
.s6-c1-p { font-size: 1.125rem; font-weight: 300; line-height: 2em; color: rgb(255, 255, 255); margin-bottom: 0; text-align: center; }
.bg.s6-bg { background-image: url("../images/pexels-photo-1072179-min.bac9adc8e091.jpg"); background-position: 50% 50%; }

/* Section 7: background video */
.s7 { min-height: 807.66px; }
.video-bg.s7-video { background-image: url("https://i.ytimg.com/vi/HlPDCT1I2Ik/maxresdefault.jpg"); }
.s7-row { grid-template-columns: minmax(0, 24fr); column-gap: 30px; }
.s7-c1 { padding: 150px 0 0 100px; justify-content: center; text-align: center; --ha: center; }

/* Section 8: Let's Start Planning The Other 364 Days */
.s8 { min-height: 243.89px; background-color: rgb(227, 222, 209); }
.s8-row { grid-template-columns: minmax(0, 24fr); column-gap: 30px; }
.s8-c1 { padding: 50px 0 0 0; justify-content: center; text-align: center; --ha: center; }
.s8-c1-h1 { font-size: 3.5rem; font-weight: 300; line-height: 1.2em; letter-spacing: 0.4em; color: rgb(0, 0, 0); margin-bottom: 0.55em; text-align: center; }

/* Section 9: Exploring Nature Days */
.s9 { min-height: 287.79px; background-color: rgb(227, 222, 209); }
.s9-row { grid-template-columns: minmax(0, 8fr) minmax(0, 8fr) minmax(0, 8fr); column-gap: 30px; }
.s9-c1 { padding: 0; text-align: center; --ha: center; }
.s9-c1-img { margin: 0 0 16px 0; }
.s9-c1-h4 { font-size: 1.25rem; font-weight: 300; line-height: 1.3em; color: rgb(0, 0, 0); margin-bottom: 0.55em; }
.s9-c2 { padding: 0; text-align: center; --ha: center; }
.s9-c2-img { margin: 0 0 16px 0; }
.s9-c2-h4 { font-size: 1.25rem; font-weight: 300; line-height: 1.3em; color: rgb(0, 0, 0); margin-bottom: 0.55em; }
.s9-c3 { padding: 0; text-align: center; --ha: center; }
.s9-c3-img { margin: 0 0 16px 0; }
.s9-c3-h4 { font-size: 1.25rem; font-weight: 300; line-height: 1.3em; color: rgb(0, 0, 0); margin-bottom: 0.55em; }

/* Section 10: Sports Days */
.s10 { min-height: 319.69px; background-color: rgb(227, 222, 209); }
.s10-row { grid-template-columns: minmax(0, 8fr) minmax(0, 8fr) minmax(0, 8fr); column-gap: 30px; }
.s10-c1 { padding: 0; text-align: center; --ha: center; }
.s10-c1-img { margin: 0 0 16px 0; }
.s10-c1-h4 { font-size: 1.25rem; font-weight: 300; line-height: 1.3em; color: rgb(0, 0, 0); margin-bottom: 0.55em; }
.s10-c2 { padding: 0; text-align: center; --ha: center; }
.s10-c2-img { margin: 0 0 16px 0; }
.s10-c2-h4 { font-size: 1.25rem; font-weight: 300; line-height: 1.3em; color: rgb(0, 0, 0); margin-bottom: 0.55em; }
.s10-c3 { padding: 0; text-align: center; --ha: center; }
.s10-c3-img { margin: 0 0 16px 0; }
.s10-c3-h4 { font-size: 1.25rem; font-weight: 300; line-height: 1.3em; color: rgb(0, 0, 0); margin-bottom: 0.55em; }

/* Section 11: background photo */
.s11 { min-height: 162.71px; background-color: rgb(0, 0, 0); }
.s11-row { grid-template-columns: minmax(0, 5fr) minmax(0, 14fr) minmax(0, 5fr); column-gap: 0; }
.s11-c1 { padding: 48.7461px 25px 0 25px; }
.s11-c1-img { margin: 0 0 16px 0; width: 188px; }
.s11-c2 { padding: 45.2461px 25px 25px 25px; }
.s11-c2-p { font-size: 1rem; font-weight: 300; line-height: 1.5em; color: rgb(255, 255, 255); margin-bottom: 0.55em; text-align: center; }
.s11-c2-p-2 { font-size: 0.875rem; font-weight: 300; line-height: 1.5em; color: rgb(255, 255, 255); margin-bottom: 0.55em; text-align: center; }
.s11-c3 { padding: 50.0312px 25px 0 25px; }
.s11-c3-img { margin: 0 0 16px 0; width: 188px; }
.bg.s11-bg { background-image: url("../images/omid-armin-fnzke3owm1o-unsplash-min.858aba037a1b.jpg"); background-position: 50% 50%; --ov: rgba(0, 0, 0, 0.3); }


@media (max-width: 999px) {
  /* Section 1: background photo */
  .s1 { min-height: 442.6px; }
  .s1-c1 { padding: 43.8169vh 39.0625vw 0 6.5vw; }

  /* Section 2: Afternoon */
  .s2-c1 { padding: 50px 6.5vw 25px 6.5vw; }
  .s2-c1-h1 { font-size: 3.125rem; letter-spacing: 0.7em; }

  /* Section 3: Poolside Sun And Fun */
  .s3 { min-height: 407.79px; }
  .s3-c1 { padding: 0 6.5vw; }
  .s3-c2 { padding: 50px 6.5104vw 50px 6.5vw; }
  .s3-c2-h1 { font-size: 3.75rem; }

  /* Section 4: Savory Alfresco Socials */
  .s4 { padding: 30px; }
  .s4-c1 { padding: 3.7936vh 3.2552vw; order: 2; }
  .s4-c1-h3 { font-size: 3.5rem; }
  .s4-c2 { padding: 450px 6.5vw 0 6.5vw; order: 1; }

  /* Section 5: background photo */
  .s5 { min-height: 322.87px; }
  .s5-c1 { padding: 43.8169vh 6.5vw 0 6.5vw; }

  /* Section 6: Let The Tail-wagging Begin */
  .s6 { padding: 30px 79.2px; }
  .s6-c1 { padding: 25px 0; }
  .s6-c1-h3 { font-size: 3.5rem; }

  /* Section 7: background video */
  .s7 { min-height: 360.22px; }
  .s7-c1 { padding: 50px 6.5vw; }

  /* Section 8: Let's Start Planning The Other 364 Days */
  .s8-c1 { padding: 50px 6.5vw 0 6.5vw; }
  .s8-c1-h1 { font-size: 3.125rem; }

  /* Section 9: Exploring Nature Days */
  .s9-c1 { padding: 50px 6.5vw; }
  .s9-c1-img { margin: 0 0 3.0625em 0; }
  .s9-c2 { padding: 0 6.5vw; }
  .s9-c2-img { margin: 0 0 3.125em 0; }
  .s9-c3 { padding: 50px 6.5vw 0 6.5vw; }
  .s9-c3-img { margin: 0 0 3.125em 0; }

  /* Section 10: Sports Days */
  .s10-c1 { padding: 50px 6.5vw; }
  .s10-c1-img { margin: 0 0 3.0625em 0; }
  .s10-c2 { padding: 0 6.5vw; }
  .s10-c2-img { margin: 0 0 3.125em 0; }
  .s10-c3 { padding: 50px 6.5vw; }
  .s10-c3-img { margin: 0 0 3.125em 0; }

  /* Section 11: background photo */
  .s11-c1 { padding: 50px 3.7257vw 0 39.0625vw; }
  .s11-c1-img { width: 167px; }
  .s11-c2 { padding: 50px 6.5vw; }
  .s11-c3 { padding: 0 6.5vw 50px 39.0625vw; }
}


@media (max-width: 749px) {
  /* Section 1: background photo */
  .s1 { min-height: 308.6px; }
  .s1-c1 { padding: 3.2723vh 6.667vw; }

  /* Section 2: Afternoon */
  .s2 { min-height: 11.74px; }
  .s2-c1 { padding: 25px 0 15px 0; }
  .s2-c1-h1 { font-size: 1.875rem; line-height: 1em; letter-spacing: 0.6em; }

  /* Section 3: Poolside Sun And Fun */
  .s3-c1 { padding: 0 6.667vw; }
  .s3-c2 { padding: 3.1686vh 6.667vw 3.2723vh 6.667vw; }
  .s3-c2-h1 { font-size: 2.5rem; }
  .s3-c2-p { font-size: 1.0625rem; line-height: 1.7em; }

  /* Section 4: Savory Alfresco Socials */
  .s4 { min-height: 647.27px; padding: 15px; }
  .s4-c1 { padding: 25px 0 0 0; }
  .s4-c1-h3 { font-size: 2.1875rem; }
  .s4-c1-p { font-size: 1.0625rem; line-height: 1.7em; }
  .s4-c2 { padding: 250px 6.667vw 0 6.667vw; }

  /* Section 5: background photo */
  .s5-c1 { padding: 24.3427vh 6.667vw 0 6.667vw; }

  /* Section 6: Let The Tail-wagging Begin */
  .s6 { padding: 15px 39.6px; }
  .s6-c1-h3 { font-size: 2.1875rem; }
  .s6-c1-p { font-size: 1.0625rem; line-height: 1.7em; }

  /* Section 7: background video */
  .s7 { min-height: 265.16px; }
  .s7-c1 { padding: 25px 6.667vw; }

  /* Section 8: Let's Start Planning The Other 364 Days */
  .s8 { min-height: 142.84px; }
  .s8-c1 { padding: 25px 6.667vw 0 6.667vw; }
  .s8-c1-h1 { font-size: 1.875rem; }

  /* Section 9: Exploring Nature Days */
  .s9-c1 { padding: 25px 6.667vw; }
  .s9-c1-img { margin: 0 0 1.5em 0; }
  .s9-c1-h4 { font-size: 1.0625rem; }
  .s9-c2 { padding: 0 6.667vw 25px 6.667vw; }
  .s9-c2-img { margin: 0 0 1.5em 0; }
  .s9-c2-h4 { font-size: 1.0625rem; }
  .s9-c3 { padding: 0 6.667vw; }
  .s9-c3-img { margin: 0 0 24px 0; }
  .s9-c3-h4 { font-size: 1.0625rem; }

  /* Section 10: Sports Days */
  .s10-c1 { padding: 25px 6.667vw; }
  .s10-c1-img { margin: 0 0 1.5em 0; }
  .s10-c1-h4 { font-size: 1.0625rem; }
  .s10-c2 { padding: 0 6.667vw 25px 6.667vw; }
  .s10-c2-img { margin: 0 0 1.5em 0; }
  .s10-c2-h4 { font-size: 1.0625rem; }
  .s10-c3 { padding: 0 6.667vw 25px 6.667vw; }
  .s10-c3-img { margin: 0 0 24px 0; }
  .s10-c3-h4 { font-size: 1.0625rem; }

  /* Section 11: background photo */
  .s11-c1 { padding: 25px 24px 0 26.7198vw; }
  .s11-c2 { padding: 25px 24px; }
  .s11-c3 { padding: 0 24px 25px 26.6667vw; }
}