/*
Theme Name: Kent Racing
Author: Foresite Group
Author URI: https://foresitegrp.com
Version: 1.0

font-family: "Oswald", sans-serif;
font-family: "Inter", sans-serif;
[Regular: 400, Medium: 500, SemiBold: 600, Bold: 700, Extra Bold 800]
*/

:root {
  --black: #000000;
  --white: #FFFFFF;
  --lightgray: #F6F6F6;
  --gray: #E4E4E4;
  --darkgray: #B7B7B7;
  --blue: #0A2342;
  --green: #79CB00;

  --site-width: 1290px;
  --toggle-width: 44px;
  --toggle-height: 44px;
  --toggle-bar-height: 0.4rem;
  --toggle-color: var(--white);

  --play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cpath fill='currentColor' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2M9.5 14.67V9.33c0-.79.88-1.27 1.54-.84l4.15 2.67a1 1 0 0 1 0 1.68l-4.15 2.67c-.66.43-1.54-.05-1.54-.84'/%3E%3C/svg%3E");

  --external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='65 65 510 510'%3E%3Cpath d='M384 64c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L265.3 329.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L512 173.3V256c0 17.7 14.3 32 32 32s32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-240 96c-44.2 0-80 35.8-80 80v256c0 44.2 35.8 80 80 80h256c44.2 0 80-35.8 80-80v-80c0-17.7-14.3-32-32-32s-32 14.3-32 32v80c0 8.8-7.2 16-16 16H144c-8.8 0-16-7.2-16-16V240c0-8.8 7.2-16 16-16h80c17.7 0 32-14.3 32-32s-14.3-32-32-32z'/%3E%3C/svg%3E");

  --facebook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131c.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951'/%3E%3C/svg%3E");

  --instagram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cpath d='M13.61 12.243a1.6 1.6 0 1 1-1.56-1.63a1.62 1.62 0 0 1 1.56 1.63'/%3E%3Cpath d='M14.763 7.233H9.338a2.024 2.024 0 0 0-2.024 2.024v5.547a2.024 2.024 0 0 0 2.024 2.024h5.425a2.024 2.024 0 0 0 2.024-2.024V9.267a2.026 2.026 0 0 0-2.024-2.034m-2.713 7.723a2.703 2.703 0 1 1 2.642-2.703a2.67 2.67 0 0 1-2.642 2.703m2.936-5.405a.496.496 0 0 1-.496-.506a.506.506 0 1 1 1.012 0a.496.496 0 0 1-.557.506z'/%3E%3Cpath d='M12.05 2a10 10 0 1 0-.1 20a10 10 0 0 0 .1-20m6.073 12.702a3.39 3.39 0 0 1-3.41 3.411H9.389a3.39 3.39 0 0 1-3.411-3.41V9.378a3.39 3.39 0 0 1 3.41-3.411h5.325a3.39 3.39 0 0 1 3.41 3.41z'/%3E%3C/svg%3E");

  --sailboat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='28 72 456 368'%3E%3Cpath d='M199.256 74.5v285H27.744l25.998 78h326.513l104-78h-267v-285h-18zm18 18c36.787 88.85 64.94 216 0 250h208c22-34-11.905-164.76-208-250m-36 0c-33.046 69.333-50 200-144 250h144z'/%3E%3C/svg%3E");

  --finish: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 0C.9 0 0 .9 0 2c0 .7.4 1.4 1 1.7V16h2V3.7c.6-.3 1-1 1-1.7c0-1.1-.9-2-2-2m10 2c-2.1 0-1.8-1-4.4-1S4 4 4 4v8s.7-2 3-2c2.7 0 2.8 1 5 1c3.3 0 4-2 4-2V1s-1.6 1-4 1m3 2.5c-.2.2-.8.4-2 .6V2.9c.8-.1 1.5-.2 2-.4zM5 7.9V5.3c.4-.6 1.1-1.1 2-1.1V2.1c.2-.1.4-.1.6-.1c1.2 0 1.6.2 2.1.4c.1.1.2.2.3.2v2.2c.5.2 1.1.4 2 .4c.4 0 .7 0 1-.1v2.6c-.3 0-.6.1-1 .1c-1.1 0-1.5-.2-2-.5v2.3C9.3 9.3 8.5 9 7 9V6.8c-.9.2-1.5.6-2 1.1m8 2V7.7c1.1-.2 1.7-.6 2-.8v1.8c-.2.3-.7 1-2 1.2'/%3E%3Cpath d='M10 7.2V4.8s-1.2-.6-3-.6v2.6c1.7-.4 3 .4 3 .4'/%3E%3C/svg%3E");

  --angle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 23' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1.5 21.5 11.5 12 1.5 1.5' /%3E%3C/svg%3E");

  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 44 44'%3E%3Cg fill='none' stroke='currentColor' stroke-linejoin='round' stroke-width='4'%3E%3Cpath d='M24 44a19.94 19.94 0 0 0 14.142-5.858A19.94 19.94 0 0 0 44 24a19.94 19.94 0 0 0-5.858-14.142A19.94 19.94 0 0 0 24 4A19.94 19.94 0 0 0 9.858 9.858A19.94 19.94 0 0 0 4 24a19.94 19.94 0 0 0 5.858 14.142A19.94 19.94 0 0 0 24 44Z'/%3E%3Cpath stroke-linecap='round' d='m16 24l6 6l12-12'/%3E%3C/g%3E%3C/svg%3E");

  --cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='14 12 224 224'%3E%3Cpath d='M233.21 56.31A12 12 0 0 0 224 52H66l-5.47-30.15A12 12 0 0 0 48.73 12H24a12 12 0 0 0 0 24h14.71l24.91 137a28 28 0 0 0 4.07 10.21A32 32 0 1 0 123 196h34a32 32 0 1 0 31-24H91.17a4 4 0 0 1-3.93-3.28L84.92 156H196.1a28 28 0 0 0 27.55-23l12.16-66.86a12 12 0 0 0-2.6-9.83M100 204a8 8 0 1 1-8-8a8 8 0 0 1 8 8m88 8a8 8 0 1 1 8-8a8 8 0 0 1-8 8m12-83.28a4 4 0 0 1-3.9 3.28H80.56L70.38 76h139.24Z'/%3E%3C/svg%3E");

  --share: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 20 20'%3E%3Cg fill='none'%3E%3Ccircle cx='12' cy='8' r='3' stroke='currentColor' stroke-linecap='round' stroke-width='2'/%3E%3Cpath stroke='currentColor' stroke-width='2' d='M15.268 8a2 2 0 1 1 3.464 2a2 2 0 0 1-3.464-2Zm-10 0a2 2 0 1 1 3.464 2a2 2 0 0 1-3.464-2Z'/%3E%3Cpath fill='currentColor' d='m16.882 18l-.98.197l.16.803h.82zm3.838-1.096l.943-.334zm-5.94-2.193l-.604-.797l-1.157.879l1.234.767zM19.868 17h-2.985v2h2.985zm-.09.238a.2.2 0 0 1-.005-.103a.2.2 0 0 1 .043-.097c.032-.04.059-.038.052-.038v2c1.146 0 2.274-1.08 1.796-2.43zM17 15c1.642 0 2.403 1.181 2.778 2.238l1.885-.668C21.198 15.259 19.948 13 17 13zm-1.614.507C15.77 15.215 16.282 15 17 15v-2c-1.162 0-2.097.362-2.824.914zm-1.133.053c1.039.646 1.474 1.772 1.648 2.637l1.96-.394c-.217-1.083-.824-2.867-2.552-3.942zm-5.033-.85l.527.85l1.234-.767l-1.157-.879zm-5.94 2.194l.942.334zM7.118 18v1h.819l.162-.803zM7 15c.718 0 1.23.215 1.614.507l1.21-1.593C9.097 13.362 8.162 13 7 13zm-2.778 2.238C4.597 16.181 5.358 15 7 15v-2c-2.948 0-4.198 2.259-4.663 3.57zM4.132 17c-.006 0 .02-.002.053.038a.2.2 0 0 1 .042.097a.2.2 0 0 1-.005.103l-1.885-.668C1.86 17.92 2.987 19 4.133 19zm2.986 0H4.133v2h2.985zm.98 1.197c.175-.865.61-1.991 1.65-2.637l-1.058-1.7c-1.728 1.075-2.335 2.86-2.553 3.942z'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-width='2' d='M12 14c3.572 0 4.592 2.551 4.883 4.009c.109.541-.33.991-.883.991H8c-.552 0-.992-.45-.883-.991C7.408 16.55 8.428 14 12 14Z'/%3E%3C/g%3E%3C/svg%3E");

  --direct: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 44 44'%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='4'%3E%3Cpath d='m20 33l6 2s15-3 17-3s2 2 0 4s-9 8-15 8s-10-3-14-3H4'/%3E%3Cpath d='M4 29c2-2 6-5 10-5s13.5 4 15 6s-3 5-3 5M16 18v-8a2 2 0 0 1 2-2h24a2 2 0 0 1 2 2v16'/%3E%3Cpath d='M25 8h10v9H25z'/%3E%3C/g%3E%3C/svg%3E");
}

HTML { scroll-behavior: smooth; }

BODY {
  margin: 0; padding: 0; background-color: var(--white); color: var(--black);
  font-family: "Inter", sans-serif; font-weight: 600; font-size: 1rem;
  line-height: 1;
}

IMG { border: 0; max-width: 100%; height: auto; }

A {
  color: var(--green); text-decoration: none; transition: all 0.2s;

  &:hover { color: var(--black); }

  &.button, .donate-button & {
    display: inline-block; border-radius: 0.3125rem;
    border: 0.125rem solid var(--green); box-sizing: border-box;
    padding: 0.69em 1.56em; background: var(--green); color: var(--blue);
    font-weight: 700; font-size: 1rem; line-height: 1; text-align: center;
    text-transform: uppercase; font-family: "Oswald", sans-serif;

    &.outline {
      background: transparent; &:hover { background: transparent; }

      &.white {
        border-color: var(--white); color: var(--white);
        &:hover { border-color: var(--green); color: var(--green); }
      }

      &.blue {
        border-color: var(--blue); color: var(--blue);
        &:hover { background: var(--blue); color: var(--white); }
      }
    }
    
    &.external {
      display: inline-flex; justify-content: center;

      &:after {
        content: ''; height: 1em; width: 1em; margin-left: 0.5em;
        mask: var(--external) no-repeat center; background: currentColor;
      }
    }

    &:hover {
      border-color: var(--blue); background: var(--blue); color: var(--white);
    }
  }
}

H1, H2, H3, H4 {
  margin: 0; font-family: "Oswald", sans-serif; line-height: 1;
  text-transform: uppercase;

  &:not(H1) { margin-bottom: 0.5em; font-weight: 600; }
  &:is(H2) { font-size: 3rem; }
  &:is(H3) { font-size: 2rem; }
  &:is(H4) { margin: 0 0 0.75em; font-size: 1.5rem; }
}

.site-width {
  width: var(--site-width); margin: 0 auto;
  @media (max-width: 1340px) { & { width: 96%; } }
}

/* MULTIPLE PAGES */
#page-header {
  background: var(--blue); color: var(--white); padding: 3.3rem 0 3.7rem;

  H1 { font-size: 4rem; }
}

#page-content { padding: 3rem 0; }

FORM {
  INPUT[name="username"] { position: absolute; left: -999999999px; }

  INPUT:not([type="submit"]):not([type="radio"]):not([type="checkbox"]),
  TEXTAREA, SELECT {
    width: 100%; box-sizing: border-box; margin: 0 0 2rem; outline: 0;
    border: 0.125rem solid var(--darkgray); border-radius: 0.375rem;
    padding: 1.25em 1em 1.15em; background: var(--white); color: var(--black);
    font-family: "Inter", sans-serif; font-weight: 600; font-size: 1.25rem;
    line-height: 1; -webkit-appearance: none; appearance: none;

    &:is(TEXTAREA) { height: 11em; }

    &:-ms-input-placeholder { color: #868686; text-transform: uppercase; }
    &::placeholder { color: #868686; opacity: 1; text-transform: uppercase; }
    &:focus:-ms-input-placeholder { color: transparent; }
    &:focus::placeholder { color: transparent; opacity: 0; }

    &.alert {
      border-color: var(--green) !important;

      &:-ms-input-placeholder { color: var(--green); }
      &::placeholder { color: var(--green); opacity: 1; }
      &:focus:-ms-input-placeholder { color: transparent; }
      &:focus::placeholder { color: transparent; opacity: 0; }
    }
  }
  
  LABEL:has(INPUT[type="checkbox"]) {
    display: flex; align-items: center; gap: 0.5em; margin-bottom: 1em;
  }

  INPUT[type="checkbox"] {
    -webkit-appearance: none; appearance: none; cursor: pointer;
    display: flex; justify-content: center; align-items: center;
    flex-direction: column; place-content: center; width: 0.9em; height: 0.9em;
    box-sizing: border-box; margin: 0; border: 0.125rem solid var(--black);
    border-radius: 0.125rem; font-size: inherit;
    
    &:before {
      content: ""; width: 0.5em; height: 0.5em;
      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    }

    &:checked:before { background-color: var(--black); }
  }

  BUTTON {
    display: inline-block; width: 100%; outline: 0; border-radius: 0.3125rem;
    border: 0.125rem solid var(--green); box-sizing: border-box;
    padding: 1em 1.56em; background: var(--green); color: var(--blue);
    font-family: "Oswald", sans-serif; font-weight: 600; font-size: 1.5rem;
    line-height: 1; text-align: center; text-transform: uppercase; cursor: pointer;
    transition: all 0.2s;

    &:hover {
      border-color: var(--blue); background: var(--blue); color: var(--white);
    }

    &.loader {
      border-color: #A0A0A0; background: #A0A0A0; color: #D8D8D8;
      pointer-events: none; position: relative;

      &:before {
        --loader-size: 2em; animation: spin 1s linear infinite;
        content: ""; position: absolute; top: 50%; left: 50%; translate: -50% -50%;
        box-sizing: border-box; width: var(--loader-size);
        height: var(--loader-size); border-radius: 50%;
        border: 0.2em solid var(--white); border-top-color: var(--green);
      }
    }
  }
}

@keyframes spin { 0% { rotate: 0deg; } 100% { rotate: 360deg; } }

DIALOG {
  border: 0; width: 31.25rem; padding: 0; box-sizing: border-box;
  font-size: 1.5rem; line-height: 1.2; overflow: visible;

  @media (max-width: 550px) { & { width: 96%; } }

  &::backdrop { background: rgba(0,0,0,0.8); }

  > BUTTON {
    position: absolute; top: -1rem; right: -1rem; width: 2rem; height: 2rem;
    outline: 0; border-radius: 50%; border: 0.125rem solid var(--white);
    padding: 0; background: var(--green); color: var(--white); font-size: 1rem;
    line-height: 1; cursor: pointer;

    &:hover { background: var(--blue); }
  }

  > DIV { padding: 1.75rem 2rem; }
}

/* HEADER */
HEADER {
  position: sticky; top: 0; z-index: 9999; width: 100%; background: var(--blue);
  color: var(--white); font-family: "Oswald", sans-serif; font-weight: 700;
  text-transform: uppercase; transition: background 0.5s;

  BODY.home-page:not(.scroll) & {
    position: fixed; background: transparent;

    &:has(#toggle-menu:checked) {
      background: linear-gradient(to right, transparent, var(--blue) 50%, transparent 100%);
    }
  }

  @media (max-width: 750px) { & { position: relative; } }

  SECTION { display: flex; justify-content: space-between; align-items: center; }
}

#logo { margin: 40px 0; line-height: 1; IMG { width: 190px; } }

#toggle-menu {
  display: none;

  + LABEL {
    position: relative; display: none; cursor: pointer;
    width: var(--toggle-width); height: var(--toggle-height);
    background: linear-gradient(transparent, transparent calc(var(--toggle-height) / 2 - (var(--toggle-bar-height) / 2)), var(--toggle-color) var(--toggle-bar-height), var(--toggle-color) calc(var(--toggle-height) / 2 + (var(--toggle-bar-height) / 2)), transparent calc(var(--toggle-height) / 2 + (var(--toggle-bar-height) / 2)), transparent); transition: all 0.3s ease-in-out;

    @media (max-width: 900px) { & { display: block; margin-left: auto; } }

    &:before, &:after {
      content: ""; width: 100%; height: var(--toggle-bar-height);
      background: var(--toggle-color); position: absolute;
      top: calc(50% - (var(--toggle-bar-height) * 2.5)); left: 0;
      transition: all 0.15s ease-in-out;
    }

    &:after { top: calc(50% + (var(--toggle-bar-height) * 1.5)); }

    + NAV {
      @media (max-width: 900px) { & {
        position: absolute; top: -9999999px; left: 0; width: 100%;
        background: var(--blue); transition: background 0.5s;

        BODY.home-page:not(.scroll) & {
          background: linear-gradient(to right, transparent, var(--blue) 50%, transparent 100%);
        }
      } }

      UL {
        display: flex; justify-content: flex-end; gap: 1.5rem 3em; margin: 0;
        padding: 0; list-style-type: none; transition: background 0.5s;

        @media (max-width: 900px) { & {
          flex-direction: column; padding-bottom: 2rem; font-size: 2rem;
        } }

        LI {
          position: relative;

          @media (max-width: 900px) { & { text-align: center; } }

          &:hover A { color: var(--green); }

          A {
            display: flex; justify-content: center; flex-direction: column;
            height: 100%; color: var(--white); &:hover { color: var(--green); }
            white-space: nowrap;
          }

          &.donate-button A {
            color: var(--blue);
            &:hover { border-color: var(--white); background: var(--white); }

            @media (max-width: 900px) { & {
              display: inline-block; font-size: 1.5rem;
            } }
          }

          UL {
            display: none; flex-direction: column; gap: 0; position: absolute;
            top: 100%; left: 0; font-size: 90%; text-transform: none;
            box-shadow: 0 0.25rem 0.25rem 0 rgba(0,0,0,0.25);

            LI:not(.no-sub):hover & { display: flex; }

            @media (min-width: 901px) {
              &:before {
                content: ''; display: block; width: 31px; height: 15px;
                translate: 1rem 0; background: var(--white);
                clip-path: polygon(50% 0, 100% 100%, 0 100%);
              }
            }

            @media (max-width: 900px) { LI:not(.no-sub) & {
              display: flex; position: static; padding: 0; box-shadow: none;
            } }

            LI {
              padding: 0;

              &.footer-only { display: none; }

              @media (min-width: 901px) {
                background: var(--white);
                &:first-of-type { padding-top: 0.6em; }
                &:last-of-type { padding-bottom: 0.6em; }
              }

              A {
                display: block; padding: 0.6em 1.38em; white-space: nowrap;
                color: var(--black);

                @media (max-width: 900px) { & {
                  color: var(--white); &:hover { color: var(--green); }
                  white-space: wrap; padding: 1rem 0 0;
                } }

                LI:hover UL & {
                  color: var(--black); &:hover { color: var(--green); }

                  @media (max-width: 900px) { & {
                    color: var(--white); &:hover { color: var(--green); }
                  } }
                }
              } /* NAV UL LI UL LI A */
            } /* NAV UL LI UL LI */
          } /* NAV UL LI UL */
        } /* NAV UL LI */
      } /* NAV UL */
    } /* NAV */
  }

  &:checked + LABEL {
    background: transparent;

    &:before, &:after { top: 50%; translate: 0 -50%; rotate: 45deg; }

    &:after { rotate: -45deg; }

    + NAV { top: 100%; }
  }
}

/* FOOTER */
FOOTER {
  padding: 3.75rem 0 2rem; background: var(--blue); color: var(--white);

  A { color: var(--white); &:hover { color: var(--green); } }

  .site-width {
    display: flex; justify-content: flex-end; gap: 3rem 3.75rem;

    @media (max-width: 900px) { & { flex-direction: column; align-items: center; } }

    #footer-logo {
      justify-self: flex-start; margin-right: auto; IMG { width: 190px; }
      @media (max-width: 900px) { & { justify-self: center; margin: 0 auto; } }
    }

    NAV {
      UL {
        display: flex; gap: 0.5rem 3rem; margin: 0; padding: 0;
        list-style-type: none; text-transform: uppercase;
        font-family: "Oswald", sans-serif; font-weight: 700;

        @media (901px <= width => 1340px) { & { gap: 0.5rem 3.582vw; } }

        @media (max-width: 660px) { & {
          flex-direction: column; A { white-space: nowrap; }
        } }

        LI {
          &.donate-button { display: none; }
          UL { flex-direction: column; margin-top: 0.5rem; }
        }
      }
    }

    #form-subscribe {
      width: 23.2558%; box-sizing: border-box;

      @media (max-width: 900px) { & { width: 300px; } }

      H2 { margin: 0 0 1rem; font-size: 1.5rem; }

      INPUT:not([type="submit"]) {
        border: 0.125rem solid var(--green); border-radius: 0;
        margin-bottom: 1rem; padding: 0.67em 1em; font-size: 1rem;
      }

      BUTTON {
        width: auto; padding: 0.69em 1.56em; font-size: 1rem;

        &:hover {
          border-color: var(--white); background: var(--white); color: var(--blue);
        }
      }
    }
  }

  #copyright {
    justify-content: space-between; align-items: center; padding-top: 3rem;
    font-size: 0.875rem; text-transform: uppercase;

    A { font-size: 70%; }
  }
}

/* HOME */
#home-hero {
  display: flex; flex-direction: column; justify-content: center; position: relative;
  height: 825px; box-sizing: border-box; background-color: var(--blue);
  background-repeat: no-repeat; background-position: center right;
  color: var(--white);

  @media (max-width: 900px) { & { background-position: center; } }

  &:before {
    content: ''; position: absolute; inset: 0;
    background-image: linear-gradient(to right, var(--blue), var(--blue) 33%, transparent), linear-gradient(var(--blue), transparent 221px);
  }

  .site-width {
    translate: 0 0 1px; padding-top: 4em; font-size: 1.25rem; line-height: 1.3;
    
    H1 {
      max-width: 16ch; font-weight: 800; font-size: 5.5rem;

      @media (max-width: 550px) { & { font-size: 16vw } }

      SPAN { color: var(--green); }

      &:after {
        content: attr(data-attr); display: block; padding-top: 0.5em;
        font-size: 0.875rem; line-height: 1;
      }
    }

    P {
      width: 340px;

      &:has(.button) {
        display: flex; flex-wrap: wrap; gap: 1em 1.5em;
        width: auto; padding-top: 1em;
      }

      .button:not(.outline):hover {
        border-color: var(--white); background: var(--white); color: var(--blue);
      }

      .button.white {
        display: inline-flex; align-items: center;

        &:after {
          content: ''; height: 0.9375em; width: 0.9375em; margin: 0.125em 0 0 0.5em;
          mask: var(--play) no-repeat center; background: var(--white);
          transition: inherit;
        }

        &:hover:after { background: var(--green); }
      }
    }
  }
}

#home-about {
  display: flex; justify-content: space-between; align-items: center; gap: 2em 0;
  padding: 2.5rem 0;

  @media (max-width: 750px) { & { flex-direction: column-reverse; } }

  IMG {
    width: 57%;
    @media (max-width: 900px) { & { width: 50%; } }
    @media (max-width: 750px) { & { width: 100%; } }
  }

  .text {
    .has-image & {
      width: 40%;
      @media (max-width: 900px) { & { width: 46%; } }
      @media (max-width: 750px) { & { width: 100%; } }
    }

    line-height: 1.8;

    H2 { color: var(--blue); font-size: 3.5rem; }

    P { margin: 0 0 1.5em; &:last-of-type { margin: 0; } }
  }
}

#home-gsc {
  background: var(--blue); color: var(--white);

  .site-width {
    display: flex; justify-content: space-between; align-items: center; gap: 2em 0;
    padding: 4rem 0;

    @media (max-width: 750px) { & { flex-direction: column; } }

    .text {
      .has-image & {
        width: 41%;
        @media (max-width: 900px) { & { width: 46%; } }
        @media (max-width: 750px) { & { width: 100%; } }
      }

      line-height: 1.8;

      P { margin: 0 0 1.5em; &:last-of-type { margin: 0; } }

      .button.outline {
        color: var(--white);
        &:hover { border-color: var(--green); background: var(--green); }
      }
    }

    IMG {
      width: 54%;
      @media (max-width: 900px) { & { width: 50%; } }
      @media (max-width: 750px) { & { width: 100%; } }
    }
  }
}

#home-partners {
  padding: 6.25rem 0;

  H2 { margin: 0 2% 1em; color: var(--blue); text-align: center; }

  #home-partners-carousel {
    --f-carousel-gap: 62px;

    .f-carousel__viewport {
      align-items: center;

      .f-carousel__slide {
        max-height: 160px; width: auto; max-width: 250px; height: auto;
      }
    }
  }
}

#home-support {
  padding: 3.625rem 0; background: var(--lightgray);

  .site-width {
    display: flex; flex-wrap: wrap; gap: 2rem;

    .button { min-width: 11.875rem; }

    .header {
      display: flex; align-items: center; gap: 2em 3rem; width: 100%;

      @media (max-width: 600px) { & { flex-direction: column; } }

      H2 { margin: 0; color: var(--blue); text-align: center; }

      .button:hover {
        border-color: var(--green); background: var(--green);
        color: var(--white);
      }
    }

    .item {
      display: flex; flex-direction: column; width: 220px; box-sizing: border-box;
      border: 0.0625rem solid var(--darkgray); border-radius: 0.625rem;
      padding: 1.25rem; background: var(--white); color: var(--blue);
      font-family: "Oswald", sans-serif; font-weight: 700; line-height: 1.1;
      text-transform: uppercase;

      @media (max-width: 600px) { & { width: 100%; } }

      .image {
        margin-bottom: 2em; aspect-ratio: 178 / 104; background-repeat: no-repeat;
        background-position: center; background-size: contain;
      }

      .price { margin: 0.5em 0 2em; font-size: 1.25rem; }

      A { margin-top: auto; font-weight: 600; }
    }

    .text {
      align-self: flex-start;

      H3 { margin-bottom: 0.75em; font-weight: 700; }

      P { margin: 0 0 1.5em; line-height: 1.8; }

      .button:not(.outline) { margin-right: 1.25rem; }
      .button.outline { min-width: 0; }
    }
  }
}

#instagram {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1.875rem 2em; flex-wrap: wrap; padding: 6.25rem 0 3.625rem;
  font-family: "Oswald", sans-serif; font-weight: 600; text-transform: uppercase;

  H2 { margin: 0; color: var(--blue); }

  A { font-size: 1.5rem; }

  #sb_instagram { width: 100%; }
}

/* ABOUT */
#about-content {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 4rem 0;

  @media (max-width: 800px) { & { flex-direction: column-reverse; } }

  #about-gallery {
    width: 48.8372%; @media (max-width: 800px) { & { width: 100%; } }

    --f-arrow-width: 2.4375rem; --f-arrow-height: 3.0625rem;
    --f-arrow-svg-height: 1.1875rem; --f-arrow-svg-width: 1.1875rem;
    --f-arrow-svg-stroke-width: 3; --f-arrow-color: var(--white);
    --f-arrow-bg: var(--blue); --f-arrow-hover-bg: var(--green);

    .f-carousel__slide {
      aspect-ratio: 630 / 543; border: 0.5em solid var(--lightgray);
      background-repeat: no-repeat; background-position: center;
      background-size: cover;
    }

    .f-carousel__dots {
      gap: 0 1rem; top: calc((100% + var(--f-carousel-dots-height)) - 0.1875rem);

      BUTTON {
        width: 2.4375rem; height: 0.1875rem; background: var(--darkgray); opacity: 1;

        &.is-selected, &:hover { background: var(--green); }

        &:after { display: none; }
      }
    }
  }

  .text {
    width: 48%; line-height: 1.3; @media (max-width: 800px) { & { width: 100%; } }
    
    H2 { font-size: 3.5rem; }
    H3 { font-size: 1.5rem; }

    P { margin: 0 0 1.5em; }
  }
}

#about-accomplishments {
  padding: 4rem 0; background: var(--lightgray); color: var(--black);
  text-align: center; font-weight: 400; line-height: 1.3;

  .site-width {
    width: 926px; @media (max-width: 964px) { & { width: 96%; } }

    H2 { margin: 0 0 1em; }
    H3 { font-size: 2.25rem; }

    .col3 {
      display: flex; gap: 2em 0; box-sizing: border-box; margin-bottom: 4rem;

      @media (max-width: 700px) { & { flex-direction: column; } }

      > DIV {
        display: flex; justify-content: center; flex-direction: column;
        width: 39%; box-sizing: border-box; border-left: 0.125rem solid var(--blue);
        border-right: 0.125rem solid var(--blue); padding: 0 4.75%;

        &:first-of-type { width: 30.5%; border: 0; padding-left: 0; }
        &:last-of-type { width: 30.5%; border: 0; padding-right: 0; }

        @media (max-width: 700px) { & {
          width: 100%; padding: 2em 0; border-left: 0; border-right: 0;
          border-top: 0.125rem solid var(--blue);
          border-bottom: 0.125rem solid var(--blue);

          &:first-of-type, &:last-of-type { width: 100%; border: 0; padding: 0; }
        } }
      }

      H3 { font-size: 1.5rem; }
    }

    .col2 {
      margin: 0; padding: 0 0 0 1em; column-count: 2; column-gap: 2em;
      text-align: left;

      @media (max-width: 700px) { & { column-count: 1; } }
    }
  }
}

#training {
  position: relative;

  @media (min-width: 751px) { & { scroll-margin-top: 141px; } }

  .site-width {
    padding: 4.4rem 0; box-sizing: border-box; line-height: 1.4; translate: 0 0 1px;

    @media (max-width: 700px) { & { padding: 3rem 0; } }

    :has(.has-image) & .text {
      width: 50%;
      @media (max-width: 700px) { & { width: 100%; } }
    }

    H2 { margin: 0 0 0.6em; line-height: 1.3; }
  }

  .image {
    position: absolute; top: 0; right: 0; width: 49%; height: 100%;
    background-repeat: no-repeat; background-position: center;
    background-size: cover;

    &:before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(to right, var(--white), transparent 40%);
    }

    @media (max-width: 700px) { & {
      position: relative; width: 100%; height: auto; aspect-ratio: 705 / 427;
      &:before { background: linear-gradient(var(--white), transparent 33%); }
    } }
  }
}

#about-races {
  padding: 2.4em 0; background: var(--blue); color: var(--white); font-size: 1.25rem;
  text-align: center;

  @media (max-width: 600px) { & { font-size: 3.333vw; } }

  H2 { margin: 0 0 1em; font-size: 2.25rem; text-align: center; }

  .list {
    margin: 0 auto; width: 850px; max-height: 14.2em; overflow-y: auto;
    scrollbar-color: #707070 var(--blue);

    @media (max-width: 884px) { & { width: 96%; } }

    > DIV {
      display: flex; justify-content: space-between; align-items: center;
      margin-left: 3em; border-top: 1px solid #707070; position: relative;
      padding: 0.982em 0.25em 0.982em 0;

      &:before {
        content: ''; position: absolute; top: 0; left: -2.4em; width: 2px;
        height: calc(100% + 1px); background: var(--green);
      }

      &:after {
        content: ''; position: absolute; left: -3em; width: 1.3em; height: 1.3em;
        box-sizing: border-box; border-radius: 50%; border: 3px solid var(--green);
        background: var(--white);
      }

      &.past:after { background: var(--green); }

      &:first-of-type { border-top: 0; &:before { top: 50%; } }

      &:last-of-type:before { height: 50%; }

      DIV:first-of-type {
        color: var(--green); font-family: "Oswald", sans-serif;
        text-transform: uppercase;
      }
    }
  }

  .scroll {
    display: inline-flex; align-items: center; width: auto; margin: 2rem auto 0;
    color: var(--green); font-family: "Oswald", sans-serif; font-weight: 300;
    text-transform: uppercase;

    &:before {
      content: ''; width: 1.5em; height: 1.5em; position: relative; top: 2px;
      background-color: var(--green);
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='m12 15.4l-6-6L7.4 8l4.6 4.6L16.6 8L18 9.4z'/%3E%3C/svg%3E") no-repeat center;
    }
  }
}

#about-books {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 3.5rem 0;

  @media (max-width: 700px) { & { flex-direction: column; gap: 3em 0; } }

  .text {
    width: 40%; line-height: 1.3;

    @media (max-width: 1000px) { & { width: 48%; } }
    @media (max-width: 700px) { & { width: 100%; } }

    P { margin: 0 0 1.5em; &:last-of-type { margin: 0; } }
  }

  .books {
    width: 57%;
    display: flex; justify-content: space-between; align-items: flex-start;
    flex-wrap: wrap; gap: 1.5em 0;

    @media (max-width: 1000px) { & { width: 48%; } }
    @media (max-width: 700px) { & { width: 100%; } }

    > DIV {
      width: 23%; font-weight: 400;

      @media (701px <= width <= 1000px) { & { width: 46%; } }
      @media (max-width: 600px) { & { width: 48%; } }
      @media (max-width: 500px) { & { width: 100%; } }

      .image {
        background-repeat: no-repeat; background-position: center;
        background-size: cover; aspect-ratio: 165 / 255; margin-bottom: 1em;
      }

      H3 { font-size: 1.5rem; line-height: 1.2; overflow-wrap: anywhere; }
    }
  }
}

#about-tims-book {
  display: flex; justify-content: space-between; align-items: flex-end;

  @media (max-width: 1000px) { & {
    flex-direction: column-reverse; background: var(--lightgray);
  } }

  IMG { width: 41.3194%; @media (max-width: 1000px) { & { width: 100%; } } }

  .text-wrap {
    width: 58.6806%; display: flex; justify-content: flex-end;
    padding: 4rem calc((100% - var(--site-width)) / 2) 4rem 30px;
    box-sizing: border-box; background: var(--lightgray); position: relative;

    @media (max-width: 1340px) { & { padding-right: 2%; } }
    @media (max-width: 1000px) { & { width: 96%; padding-left: 0; } }

    &:before {
      content: ''; position: absolute; z-index: -1; top: 0; right: 100%;
      height: 100%; width: 100%; background: inherit;
    }

    &:after {
      content: ''; position: absolute; z-index: 2; top: 0; right: 100%;
      height: 100%; width: 41.3194%;
      background: linear-gradient(to left, var(--lightgray), transparent 40%);
    }

    .text {
      line-height: 1.3;

      P { margin: 0 0 1.5em; &:last-of-type { margin: 0; } }

      .button { margin-top: 0.75em; }
    }
  }
}

/* BOOKS */
#books-content {
  padding: 1.75rem 0; line-height: 1.3;

  .quote {
    position: relative; padding-left: 42px; color: var(--blue); font-size: 1.5rem;
    font-family: "Oswald", sans-serif; font-weight: 500; font-style: italic;

    &:before {
      position: absolute; top: 0; left: -0.1em;
      content: '\201C'; color: var(--green); font-size: 4rem; line-height: 1;
    }

    &:after {
      content: '\2013  ' attr(data-attr); display: block; padding-top: 0.5em;
      color: var(--green);
    }
  }
}

.books-divider {
  height: 48px; margin-bottom: 2.75rem; position: relative;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='none' stroke='currentColor' stroke-linejoin='round' stroke-width='4' d='M5 7h11a8 8 0 0 1 8 8v27a6 6 0 0 0-6-6H5zm38 0H32a8 8 0 0 0-8 8v27a6 6 0 0 1 6-6h13z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;

  &:before, &:after {
    content: ''; position: absolute; top: calc(50% - 1px);
    width: calc(50% - 66px); height: 2px; background: var(--green);
  }

  &:after { right: 0; }
}

#books-absm {
  display: flex; justify-content: space-between; align-items: flex-start;
  box-sizing: border-box; margin-bottom: 4rem; border: 0.125rem solid var(--gray);
  padding: 1.25rem 1.625rem; background: var(--lightgray);

  IMG { width: 8.875rem; }

  > DIV { width: calc(100% - 10.75rem); line-height: 1.6; }

  H2 { font-size: 1.5rem; line-height: 1.3; }

  H3 {
    margin-bottom: 1em; color: var(--green); font-family: "Inter", sans-serif;
    font-size: 1rem; text-transform: none;
  }

  P { margin: 0 0 1.6em; &:last-of-type { margin: 0; } }
}

#books-books {
  display: flex; flex-wrap: wrap; gap: 1.875rem 2.3256%; margin-bottom: 4rem;

  @media (700px <= width <= 1340px) { & { row-gap: 2.239vw; } }

  > DIV {
    width: 48.8372%; box-sizing: border-box; border: 0.125rem solid var(--gray);
    padding: 1.25rem 1.625rem; background: var(--lightgray); line-height: 1.6;

    @media (max-width: 700px) { & { width: 100%; } }

    H2 { font-size: 1.5rem; line-height: 1.3; }

    H3 {
      margin-bottom: 1em; color: var(--green); font-family: "Inter", sans-serif;
      font-size: 1rem; text-transform: none;
    }

    P { margin: 0 0 1.6em; &:last-of-type { margin: 0; } }
  }
}

#books-prefooter {
  padding: 3.5rem 0; background: var(--lightgray); line-height: 1.3;

  &.both .site-width {
    display: flex;

    @media (max-width: 700px) { & { flex-direction: column; } }

    > DIV {
      display: flex; justify-content: center; flex-direction: column;
      box-sizing: border-box;

      &:first-of-type {
        width: 54%; padding-right: 60px; border-right: 1px solid var(--darkgray);
        @media (max-width: 1000px) { & { width: 50%; padding-right: 6vw; } }
        @media (max-width: 700px) { & {
          width: 100%; padding: 0 0 3.5rem; border-right: 0;
          border-bottom: 1px solid var(--darkgray);
        } }
      }

      &:last-of-type {
        width: 46%; padding-left: 70px; border-left: 1px solid var(--darkgray);
        @media (max-width: 1000px) { & { width: 50%; padding-left: 6vw; } }
        @media (max-width: 700px) { & {
          width: 100%; padding: 3.5rem 0 0; border-left: 0;
          border-top: 1px solid var(--darkgray);
        } }
      }
    }
  }

  H2 { font-size: 2.25rem; line-height: 1.2; }

  P { margin: 0 0 1.5em; &:last-of-type { margin: 0; } }

  .button {
    margin-top: 1.5em; border-color: var(--blue);
    &:hover { border-color: var(--green); color: var(--green); }
  }
}

/* GLOBAL SOLO CHALLENGE */
#gsc-content {
  display: flex; justify-content: space-between; align-items: center; gap: 2rem;
  padding: 5rem 0;

  @media (max-width: 900px) { & { flex-direction: column; } }

  .text {
    flex: 1; line-height: 1.3;

    H2 {
      max-width: 17ch; font-size: 3.5rem; line-height: 1.1;
      @media (max-width: 900px) { & { max-width: none; } }
    }
  }

  IMG { width: 57.2868%; @media (max-width: 900px) { & { width: 100%; } } }
}

#gsc-at-a-glance {
  padding-bottom: 3.4rem; text-align: center;

  H3 {
    margin-bottom: 1.5em; font-size: 2.25rem;

    @media (max-width: 600px) { & { margin-bottom: 0.5em; } }
  }

  .site-width {
    display: flex; justify-content: center;

    @media (max-width: 600px) { & { flex-direction: column; } }

    DIV {
      display: flex; justify-content: center; flex-direction: column;
      box-sizing: border-box; border-left: 0.125rem solid var(--blue);
      padding: 1rem 3.2558%; text-transform: uppercase;

      &:first-of-type { border: 0; }

      @media (max-width: 600px) { & {
        border-top: 0.125rem solid var(--blue); border-left: 0; padding: 2.5rem 0;
      } }

      H4 { color: var(--blue); }
    }
  }
}

#a-race-like-no-other {
  padding: 3rem 0; background: var(--lightgray); text-align: center;

  H3 { margin-bottom: 0.75em; font-size: 2.25rem; }
  H4 { margin-bottom: 0.5em; color: var(--blue); }

  P { max-width: 860px; margin: 0 auto; line-height: 1.3; }

  .timeline {
    display: flex; justify-content: center; width: 1070px; margin: 2rem auto;
    
    @media (max-width: 1170px) { & { width: 96%; } }
    @media (max-width: 750px) { & { font-size: 2vw; } }
    
    > DIV {
      max-width: 8.75em; text-transform: uppercase; line-height: 1.3;

      &.arrow {
        height: 1.4375em; width: 7.5em; position: relative; margin-top: 4.0625em;

        &:before {
          content: ''; position: absolute; top: 50%; left: 0; translate: 0 -50%;
          height: 0.1875em; width: calc(100% - 0.1875em); background: var(--green);
        }

        &:after {
          content: ''; position: absolute; top: 0; right: 0; height: 100%;
          width: 0.8125em; mask: var(--angle) no-repeat center;
          background: var(--green);
        }
      }

      @media (max-width: 850px) { &.sailboat { margin: 0 1em; } }

      > DIV {
        width: 4.25em; height: 5.5em; margin: 0 auto 1em; position: relative;
        background: url(images/sailboat.webp) no-repeat bottom center;
        background-size: contain;

        &:after {
          position: absolute; bottom: 0; width: 1.625em; height: 1.625em;
          border-radius: 50%; background: var(--green);
        }
      }

      &.start { max-width: 5.625em;
        > DIV {
          width: 1.625em; background: transparent;
          &:after { content: ''; left: 50%; translate: -50% 0; }
        }
      }

      &.finish { max-width: 6.75em;
        > DIV {
          margin-right: 0; width: 4em; background-image: url(images/finish.webp);
          &:after { content: ''; left: -4px; }
        }
      }

      H4 { font-size: 150%; line-height: 1.2; }
    }
  }
}

#the-boat {
  position: relative; background: var(--blue); color: var(--white);

  @media (min-width: 751px) { & { scroll-margin-top: 141px; } }

  .site-width {
    padding: 4.4rem 0; box-sizing: border-box; line-height: 1.3; translate: 0 0 1px;

    @media (max-width: 700px) { & { padding: 3rem 0; } }

    :has(.has-image) & .text {
      width: 50%; margin-left: 50%;
      @media (max-width: 700px) { & { width: 100%; margin-left: 0; } }
    }
  }

  .image {
    position: absolute; top: 0; left: 0; width: 49%; height: 100%;
    background-repeat: no-repeat; background-position: center;
    background-size: cover;

    &:before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(to left, var(--blue), transparent 40%);
    }

    @media (max-width: 700px) { & {
      position: relative; width: 100%; height: auto; aspect-ratio: 705 / 427;
      &:before { background: linear-gradient(var(--blue), transparent 33%); }
    } }
  }
}

#the-box-rule {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 4rem; padding: 4rem 0;

  @media (max-width: 800px) { & { flex-direction: column; } }

  .text {
    flex: 1; line-height: 1.3;

    P { margin: 2em 0; &:last-of-type { margin: 0; } }

    UL {
      margin: 0 0 1.5em; padding: 0; list-style-type: none;

      LI {
        display: flex; gap: 0 0.6875em; padding-bottom: 1em;

        &::before {
          content: ''; mask: var(--check) no-repeat center;
          background: var(--green); width: 1em; height: 1em; font-size: 125%;
        }
      }
    }
  }

  IMG { width: 46%; @media (max-width: 800px) { & { width: 100%; } } }
}

#media-and-photos {
  padding: 4rem 0;

  @media (min-width: 751px) { & { scroll-margin-top: 141px; } }

  H2 { margin-bottom: 1em; text-align: center; }

  #gsc-gallery {
    display: flex; flex-wrap: wrap; gap: 1.875rem 2.3255%;

    @media (max-width: 1340px) { & { row-gap: 2.239vw; } }
    @media (max-width: 900px) { & { gap: 1.889vw 2%; } }
    @media (max-width: 750px) { & { gap: 3.765vw 4%; } }

    .f-carousel__slide {
      width: 23.2558%; aspect-ratio: 300 / 247; background-repeat: no-repeat;
      background-position: center; background-size: cover;

      @media (max-width: 900px) { & { width: 32%; } }
      @media (max-width: 750px) { & { width: 48%; } }
      @media (max-width: 600px) { & { width: 100%; } }
    }
  }
}

#from-the-blog {
  padding: 3rem 0 5rem; background: var(--lightgray);

  .site-width {
    display: flex; justify-content: space-between;

    @media (max-width: 600px) { & { flex-direction: column; } }

    > A {
      display: flex; align-self: flex-start; gap: 0 0.25em;
      font-family: "Oswald", sans-serif; font-size: 1.5rem;
      text-transform: uppercase;

      &:after {
        content: ''; align-self: center; width: 0.5em; height: 0.5em;
        mask: var(--angle) no-repeat right center; background: var(--green);
        transition: all 0.2s;
      }

      &:hover:after { background: var(--blue); }
    }

    @media (max-width: 900px) { &.blogposts {
      flex-wrap: wrap; row-gap: 3.778vw; .blogpost { width: 48%; }
    } }
    @media (max-width: 700px) { &.blogposts .blogpost { width: 100%; } }
    @media (max-width: 600px) { &.blogposts { margin-top: 2rem; } }

    .blogpost {
      display: flex; box-sizing: border-box;
      width: 31.7829%; background: var(--white); line-height: 1.3;

      .image {
        width: 35.6098%; aspect-ratio: 146 / 183;
        background-repeat: no-repeat; background-position: center;
        background-size: cover;
      }

      .text {
        width: 64.3902%; box-sizing: border-box; padding: 1.25rem;

        P {
          margin: 0;

          &.date {
            margin: 0 0 0.5em; color: var(--green);
            font-family: "Oswald", sans-serif; font-weight: 600;
            font-size: 0.875rem; line-height: 1; text-transform: uppercase;
          }
        }

        H3 { font-size: 1.25rem; line-height: 1; }

        A {
          display: inline-block; margin: 0.8em 0 0; text-transform: uppercase;
          font-family: "Oswald", sans-serif; font-weight: 600;
        }
      }
    }
  }
}

/* PARTNERS */
#partners-content {
  padding: 4rem 0; text-align: center;

  .partners {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 1.875rem 2.3256%;
    margin: 2.5rem 0;

    .partner {
      display: flex; justify-content: space-between; align-items: center;
      flex-direction: column; width: 300px; min-height: 0; aspect-ratio: 300 / 177;
      border: 0.125rem solid var(--darkgray); border-radius: 0.375rem;
      box-sizing: border-box; padding: 1rem; line-height: 1.2;
      text-transform: uppercase;

      IMG {
        flex-shrink: 1; min-height: 0; object-fit: contain; margin-bottom: 1rem;
      }

      > DIV { text-wrap: balance; }
    }
  }
}

#partner-opportunities {
  position: relative;

  .image {
    position: absolute; inset: 0; width: 48%; height: 100%;
    background-repeat: no-repeat; background-position: center;
    background-size: cover;

    @media (max-width: 850px) { & {
      position: static; width: 100%; aspect-ratio: 16 / 9;
    } }
  }

  .text {
    width: 100%; padding: 1.5rem 0 1.5rem 51%; box-sizing: border-box;
    line-height: 1.3;

    @media (max-width: 850px) { & { padding-left: 0; } }

    .green { color: var(--green); font-weight: 700; font-size: 1.375rem; }

    H3 { font-size: 1.5rem; }

    UL {
      margin: 1em 0 0; padding: 0; list-style-type: none; columns: 2;

      LI {
        display: flex; gap: 0 0.6875em; padding: 0.5em 0;

        &::before {
          content: ''; mask: var(--check) no-repeat center; aspect-ratio: 1;
          background: var(--green); width: 1em; height: 1em; font-size: 125%;
        }
      }
    }

    .buttons {
      display: flex; flex-wrap: wrap; gap: 1em 1.5em; margin: 1.75rem 0 0;
    }
  }
}

#requests {
  margin-top: 2rem; padding: 3rem 0; background: #F0F7E6; line-height: 1.3;

  .site-width {
    display: flex; justify-content: space-between; align-items: center;
    row-gap: 1em;

    @media (max-width: 800px) { & { flex-direction: column; } }

    > DIV {
      width: 48%;

      @media (max-width: 800px) { & { width: 100%; } }

      &.buttons { display: flex; justify-content: space-between; A { width: 48%; } }
    }
  }
}

/* CONTACT */
#contact-content { padding-top: 3rem; line-height: 1.3; }

#contact-2col {
  display: flex; justify-content: space-between; margin: 4rem auto;

  @media (max-width: 800px) { & { flex-direction: column; } }

  #form-contact {
    width: 57.3643%; display: flex; justify-content: space-between; flex-wrap: wrap;

    @media (max-width: 800px) { & { width: 100%; } }

    H2 {
      width: 100%;
    }

    INPUT:not([type="submit"]):not([type="radio"]):not([type="checkbox"]) {
      width: 48%;
    }

    LABEL { width: 100%; font-size: 1.25rem; text-transform: uppercase; }

    BUTTON { margin-top: 1em; }
  }

  #contact-sidebar {
    width: 37.2%; box-sizing: border-box; padding-left: 4.7286%;
    border-left: 0.125rem solid var(--darkgray);

    @media (max-width: 800px) { & {
      width: 100%; margin-top: 3rem; border-top: 0.125rem solid var(--darkgray);
      border-left: 0; padding: 3rem 0 0;
    } }

    P { width: 90%; margin: 2em 0; line-height: 1.3; }

    .social {
      A {
        display: inline-flex; align-items: center; gap: 0 1em;
        margin: 0 1.5em 1.5em 0; color: var(--black); font-size: 1.25rem;
        text-transform: uppercase; overflow-wrap: anywhere;

        &:before {
          content: ''; width: 3.3em; height: 3.3em; background: var(--black);
          mask: var(--facebook) no-repeat center; transition: all 0.2s;
          aspect-ratio: 1;
        }

        &.instagram:before { mask-image: var(--instagram); }

        &:hover { color: var(--green); }
        &:hover:before { background: var(--green); }
      }
    }

    .support {
      margin-top: 2em; padding: 1.875rem; background: rgba(121,203,0,0.15);

      P { margin: 0 0 1.5em; }

      .button {
        width: 100%; margin-top: 0.375rem; padding: 0.69em; font-size: 1.5rem;
      }
    }
  }
}

/* DONATE */
#donate-content {
  position: relative;

  @media (min-width: 751px) { & { scroll-margin-top: 141px; } }

  .site-width {
    padding: 4.4rem 0; box-sizing: border-box; line-height: 1.4; translate: 0 0 1px;

    @media (max-width: 700px) { & { padding: 3rem 0; } }

    :has(.has-image) & .text {
      width: 50%;
      @media (max-width: 700px) { & { width: 100%; } }
    }

    P {
      margin: 0 0 1.5em;

      &.green { color: var(--green); }

      &.buttons {
        display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem;
        A { min-width: 200px; }
      }
    }
  }

  .image {
    position: absolute; top: 0; right: 0; width: 49%; height: 100%;
    background-repeat: no-repeat; background-position: center;
    background-size: cover;

    &:before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(to right, var(--white), transparent 40%);
    }

    @media (max-width: 700px) { & {
      position: relative; width: 100%; height: auto; aspect-ratio: 705 / 427;
      &:before { background: linear-gradient(var(--white), transparent 33%); }
    } }
  }
}

#donate-starting-line {
  padding: 3rem 0; background: var(--blue); color: var(--white); line-height: 1.3;
  text-align: center;

  P { margin: 0 auto; max-width: 84ch; padding: 0 2%; }
}

#registry {
  padding: 3rem 0; background: var(--lightgray);

  @media (min-width: 751px) { & { scroll-margin-top: 141px; } }

  .intro {
    line-height: 1.3; text-align: center;
    P { margin: 0 auto 1.3em; max-width: 101ch; padding: 0 2%; }
  }

  .instructions {
    display: flex; justify-content: center; column-gap: 2%; flex-wrap: wrap;
    margin: 2.5rem auto 3.5rem;

    @media (max-width: 1000px) { & { gap: 3.7vw 4%; } }
    @media (max-width: 700px) { & { gap: 1.5em 0; } }

    > DIV {
      display: flex; align-items: center; gap: 0 1.25rem; width: 32%;
      box-sizing: border-box; border-radius: 0.625rem;
      border: 0.0625rem solid var(--darkgray); padding: 2.1875rem 1.375rem;
      background: var(--white); line-height: 1.3;

      @media (max-width: 1000px) { & { width: 48%; } }
      @media (max-width: 700px) { & { width: 100%; } }

      .icon {
        width: 110px; aspect-ratio: 1; border-radius: 50%;
        background: var(--green); position: relative;

        &:before {
          content: ''; position: absolute; inset: 0; background: var(--white);
          mask: var(--cart) no-repeat center; mask-size: 60%;
        }

        &.share:before { mask-image: var(--share); }
        &.direct:before { mask-image: var(--direct); }
      }

      .text {
        flex: 1;

        H3 { font-size: 1.25rem; line-height: 1.3; }
      }
    }
  }

  .view-the-cart {
    display: flex; justify-content: flex-end;
    .button { margin-bottom: 1rem; }
  }

  .reg_item {
    display: flex; margin-bottom: 1rem; border: 0.0625rem solid var(--darkgray);
    border-radius: 0.625rem; padding: 1.25rem 1.375rem; box-sizing: border-box;
    background: var(--white); line-height: 1.3;

    @media (max-width: 600px) { & { flex-direction: column; } }

    > DIV {
      display: flex; justify-content: center; flex-direction: column;
      box-sizing: border-box; border-left: 0.0625rem solid var(--darkgray);
      padding: 0.875rem 1.5625rem;

      &.col1 { width: 34%; padding-left: 0; border-left: 0; font-weight: 400; }
      &.col2 { width: 32%; }
      &.col3 { width: 34%; min-width: 226px; padding-right: 0; }

      @media (max-width: 600px) {
        border-top: 0.0625rem solid var(--darkgray); border-left: 0;
        padding: 1.375rem 0;
        &.col1 { width: 100%; border-top: 0; padding-top: 0; }
        &.col2 { width: 100%; }
        &.col3 { width: 100%; padding-bottom: 0; }
      }

      .header { font-weight: 600; font-size: 1.25rem; }

      .desc { min-height: 1.3em; margin: 0.3125rem 0 0.5625rem; }

      .funded { font-weight: 500; font-size: 1.25rem; SPAN { font-weight: 600; } }

      .remaining { font-size: 0.75rem; }
      
      .custom-shortcode-cart-wrapper {
        display: flex; align-items: center; flex-wrap: wrap; gap: 1rem;
        margin-top: 0.375rem;

        .quantity {
          flex: 1 1 140px;

          SELECT {
            -webkit-appearance: menulist-button; appearance: menulist-button;
            cursor: pointer; width: 100%; box-sizing: border-box; outline: 0;
            border: 0.0625rem solid var(--darkgray); border-radius: 0.125rem;
            padding: 0.75rem; background: var(--white); color: var(--black);
            font-family: "Oswald", sans-serif; font-weight: 600; font-size: 1rem;
            line-height: 1;
          }
        }

        .button {
          white-space: nowrap; border-color: var(--blue); background: var(--blue);
          color: var(--white);
          &:hover { border-color: var(--green); background: var(--green); }
        }

        .added_to_cart { display: none !important; }
      }

      .or {
        margin: 0.625rem 0; font-family: "Oswald", sans-serif; font-size: 0.875rem;
        line-height: 1; text-align: center; position: relative;

        &:before, &:after {
          content: ''; position: absolute; top: calc(50% - 0.5px);
          width: calc(50% - 1.5em); height: 1px; background: var(--black);
        }

        &:before { left: 0; }
        &:after { right: 0; }
      }

      .disabled {
        border: 0; padding: 0.815em 1.685em; background: rgba(121,203,0,0.25);
        color: var(--green);
      }
    }
  }
}

PROGRESS {
  appearance: none; -webkit-appearance: none; width: 100%; height: 10px;
  margin: 11px 0 8px; border: 0; border-radius: 5px;
  background-color: var(--lightgray);

  &::-webkit-progress-bar { border-radius: 5px; background-color: var(--lightgray); }
  &::-webkit-progress-value { border-radius: 5px; background-color: var(--green); }
  &::-moz-progress-bar { border-radius: 5px; background-color: var(--green); }
}





.woocommerce {
  .single-product {
    .product {
      SELECT {
        cursor: pointer;
        -webkit-appearance: menulist-button; appearance: menulist-button;
      }

      &:after { content: ""; display: block; clear: both; }
    }
  }
}

.wc-blocks-components-select__container SELECT {
  border: 0.125rem solid var(--green) !important;
}