/*
font-family: 'Open Sans', sans-serif;
300 light
400 normal
600 semi-bold
700 bold
800 extra bold
*/

:root {
  --white: #FFFFFF;
  --darkwhite: #F8F8F8;
  --black: #000000;
  --lightergray: #F1F2F2;
  --lightgray: #D7D7D7;
  --notsolightgray: #B7B7B7;
  --gray: #636363;
  --blue: #0E8DC8;
  --darkblue: #112C37;
  --red: #ED1C24;
  --darkred: #C52C3C;
  --darkerred: #410505;
  
  /* BTB */
  --green: #82C150;
  --yellow: #F5E20B;
  --orange: #F5A21C;
  --btb-red: #EE312B;
  --pink: #F171AB;
  --purple: #6B4099;
  --btb-blue: #24A6DC;

  --site-width: 1000px;

  --facebook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 896 1664'%3E%3Cpath d='M895 12v264H738q-86 0-116 36t-30 108v189h293l-39 296H592v759H286V905H31V609h255V391q0-186 104-288.5T667 0q147 0 228 12'/%3E%3C/svg%3E");

  --youtube: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1280'%3E%3Cpath d='m711 872l484-250l-484-253zM896 10q168 0 324.5 4.5T1450 24l73 4q1 0 17 1.5t23 3t23.5 4.5t28.5 8t28 13t31 19.5t29 26.5q6 6 15.5 18.5t29 58.5t26.5 101q8 64 12.5 136.5T1792 532v176q1 145-18 290q-7 55-25 99.5t-32 61.5l-14 17q-14 15-29 26.5t-31 19t-28 12.5t-28.5 8t-24 4.5t-23 3t-16.5 1.5q-251 19-627 19q-207-2-359.5-6.5T336 1256l-49-4l-36-4q-36-5-54.5-10t-51-21t-56.5-41q-6-6-15.5-18.5t-29-58.5T18 998q-8-64-12.5-136.5T0 748V572q-1-145 18-290q7-55 25-99.5T75 121l14-17q14-15 29-26.5T149 58t28-13t28.5-8t23.5-4.5t23-3t17-1.5q251-18 627-18'/%3E%3C/svg%3E");

  --instagram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1536'%3E%3Cpath d='M1024 768q0-106-75-181t-181-75t-181 75t-75 181t75 181t181 75t181-75t75-181m138 0q0 164-115 279t-279 115t-279-115t-115-279t115-279t279-115t279 115t115 279m108-410q0 38-27 65t-65 27t-65-27t-27-65t27-65t65-27t65 27t27 65M768 138q-7 0-76.5-.5t-105.5 0t-96.5 3t-103 10T315 169q-50 20-88 58t-58 88q-11 29-18.5 71.5t-10 103t-3 96.5t0 105.5t.5 76.5t-.5 76.5t0 105.5t3 96.5t10 103T169 1221q20 50 58 88t88 58q29 11 71.5 18.5t103 10t96.5 3t105.5 0t76.5-.5t76.5.5t105.5 0t96.5-3t103-10t71.5-18.5q50-20 88-58t58-88q11-29 18.5-71.5t10-103t3-96.5t0-105.5t-.5-76.5t.5-76.5t0-105.5t-3-96.5t-10-103T1367 315q-20-50-58-88t-88-58q-29-11-71.5-18.5t-103-10t-96.5-3t-105.5 0t-76.5.5m768 630q0 229-5 317q-10 208-124 322t-322 124q-88 5-317 5t-317-5q-208-10-322-124T5 1085q-5-88-5-317t5-317q10-208 124-322T451 5q88-5 317-5t317 5q208 10 322 124t124 322q5 88 5 317'/%3E%3C/svg%3E");

  --linkedin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1504'%3E%3Cpath d='M349 497v991H19V497zm21-306q1 73-50.5 122T184 362h-2q-82 0-132-49T0 191q0-74 51.5-122.5T186 20t133 48.5T370 191m1166 729v568h-329V958q0-105-40.5-164.5T1040 734q-63 0-105.5 34.5T871 854q-11 30-11 81v553H531q2-399 2-647t-1-296l-1-48h329v144h-2q20-32 41-56t56.5-52t87-43.5T1157 474q171 0 275 113.5T1536 920'/%3E%3C/svg%3E");

  --arrowdown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.68 18.24V0h-3.12v18.24H6.4L12.08 24l5.76-5.76z'/%3E%3C/svg%3E");

  --arrowleft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1536'%3E%3Cpath d='M1152 672v192q0 13-9.5 22.5T1120 896H768v192q0 14-9 23t-23 9q-12 0-24-10L393 791q-9-9-9-23t9-23l320-320q9-9 23-9q13 0 22.5 9.5T768 448v192h352q13 0 22.5 9.5t9.5 22.5m160 96q0-148-73-273t-198-198t-273-73t-273 73t-198 198t-73 273t73 273t198 198t273 73t273-73t198-198t73-273m224 0q0 209-103 385.5T1153.5 1433T768 1536t-385.5-103T103 1153.5T0 768t103-385.5T382.5 103T768 0t385.5 103T1433 382.5T1536 768'/%3E%3C/svg%3E");

  --arrowright: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1536'%3E%3Cg transform='translate(1536 0) scale(-1 1)'%3E%3Cpath d='M1152 672v192q0 13-9.5 22.5T1120 896H768v192q0 14-9 23t-23 9q-12 0-24-10L393 791q-9-9-9-23t9-23l320-320q9-9 23-9q13 0 22.5 9.5T768 448v192h352q13 0 22.5 9.5t9.5 22.5m160 96q0-148-73-273t-198-198t-273-73t-273 73t-198 198t-73 273t73 273t198 198t273 73t273-73t198-198t73-273m224 0q0 209-103 385.5T1153.5 1433T768 1536t-385.5-103T103 1153.5T0 768t103-385.5T382.5 103T768 0t385.5 103T1433 382.5T1536 768'/%3E%3C/g%3E%3C/svg%3E");

  --play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1536'%3E%3Cpath d='M1184 768q0 37-32 55l-544 320q-15 9-32 9q-16 0-32-8q-32-19-32-56V448q0-37 32-56q33-18 64 1l544 320q32 18 32 55m128 0q0-148-73-273t-198-198t-273-73t-273 73t-198 198t-73 273t73 273t198 198t273 73t273-73t198-198t73-273m224 0q0 209-103 385.5T1153.5 1433T768 1536t-385.5-103T103 1153.5T0 768t103-385.5T382.5 103T768 0t385.5 103T1433 382.5T1536 768'/%3E%3C/svg%3E");
  
  --left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23FFFFFF' d='m19.031 4.281l-11 11l-.687.719l.687.719l11 11l1.438-1.438L10.187 16L20.47 5.719z'/%3E%3C/svg%3E");

  --right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23FFFFFF' d='M12.969 4.281L11.53 5.72L21.812 16l-10.28 10.281l1.437 1.438l11-11l.687-.719l-.687-.719z'/%3E%3C/svg%3E");

  --times: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1216 1312'%3E%3Cpath d='M1202 1066q0 40-28 68l-136 136q-28 28-68 28t-68-28L608 976l-294 294q-28 28-68 28t-68-28L42 1134q-28-28-28-68t28-68l294-294L42 410q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294l294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68L880 704l294 294q28 28 28 68'/%3E%3C/svg%3E");

  --hamburger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1280'%3E%3Cpath d='M1536 1088v128q0 26-19 45t-45 19H64q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45m0-512v128q0 26-19 45t-45 19H64q-26 0-45-19T0 704V576q0-26 19-45t45-19h1408q26 0 45 19t19 45m0-512v128q0 26-19 45t-45 19H64q-26 0-45-19T0 192V64q0-26 19-45T64 0h1408q26 0 45 19t19 45'/%3E%3C/svg%3E");
}

HTML {
  scroll-behavior: smooth;

  &:has(BODY.sidemenu) { position: fixed; overflow: hidden; scrollbar-width: none; }
}

BODY {
  margin: 0; padding: 0; background: var(--white); color: var(--gray);
  font-family: 'Open Sans', sans-serif; font-size: 1.125rem; line-height: 1.4;
  transition: translate .4s ease;

  &.sidemenu {
    position: relative; translate: 480px 0;

    @media (max-width: 480px) { & { translate: 100vw 0; } }

    &:after {
      content: ''; position: absolute; z-index: 100; inset: 0;
      background: rgba(0, 0, 0, 0.4);
    }
  }
}

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

A {
  color: var(--blue); text-decoration: underline; transition: all 0.2s;

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

  &.button {
    display: inline-block; border-radius: 1.5625rem; padding: 0.4em 1.2em;
    box-sizing: border-box; background: var(--blue); color: var(--white);
    font-weight: 800; font-size: 1.5rem; line-height: 1; letter-spacing: 0.15em;
    text-decoration: none; box-shadow: 0 0 0.5rem 0.0625rem rgba(0,0,0,0.4);

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

  &.learnmore {
    display: inline-flex; align-items: center; gap: 0 0.3em; text-decoration: none;

    &:after {
      content: ''; height: 0.7em; aspect-ratio: 1; background-color: currentColor;
      mask: var(--arrowdown) no-repeat center; mask-size: contain;
    }
  }

  &.watchvideo {
    display: inline-flex; align-items: center; gap: 0 0.25em; text-decoration: none;
    font-weight: 800; font-size: 1.125rem; line-height: 1;

    &:after {
      content: ''; height: 1.2em; aspect-ratio: 1; background-color: currentColor;
      mask: var(--play) no-repeat center; mask-size: contain;
    }
  }
}

H1 { font-size: 1.7em; }
H2 { font-size: 1.5em; }

HR {
  display: block; margin: 1em 0; padding: 0; height: 0;
  border: 0; border-top: 0.0625rem solid var(--gray);
}

UL { margin: 0 0 0 0.7em; padding: 0 0 0 0.7em; }
OL { margin: 0 0 0 0.6em; padding: 0 0 0 0.6em; LI { padding-left: 0.3em; } }

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

.video {
  display: flex; aspect-ratio: 16 / 9;
  IFRAME, EMBED { width: 100%; height: auto; }
}

.long-string { overflow-wrap: break-word; word-break: break-all; hyphens: auto; }

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

.smalltext {
  display: inline-block; font-weight: normal; font-size: 70%; line-height: 1.3;
}

/* HEADER */
HEADER {
  position: sticky; top: 0; z-index: 90; width: 100%;
  background: linear-gradient(90deg, var(--darkwhite) 50%, var(--blue) 50%);

  BODY.page-beyond-the-blues & { position: fixed; background: transparent; }
  BODY.page-beyond-the-blues.scrolling & { background: var(--black); }

  SECTION {
    display: flex; width: var(--site-width); margin: 0 auto;

    @media (max-width: 1024px) { & { width: 96%; } }
    @media (max-width: 768px) { & {
      justify-content: space-between;
      background: linear-gradient(90deg, var(--darkwhite) 34.6%, var(--blue) 34.6%);

      BODY.page-beyond-the-blues & { background: transparent; }
    } }

    #logo {
      width: 14.9%; padding: 1.5625rem 0; font-size: 0; line-height: 1;

      @media (min-width: 769px) {
        BODY.page-index:not(.scrolling) & { width: 22.5%; padding: 1.66rem 0; }

        BODY.page-beyond-the-blues & { width: 16.3%; }
      }

      @media (max-width: 768px) { & {
        width: 34.6%; padding: 11px 0;

        BODY.page-beyond-the-blues & { width: 23.6%; }
      } }

      IMG {
        width: 82.56%;

        @media (min-width: 769px) {
          BODY.page-index:not(.scrolling) & { width: 88%; }

          BODY.page-beyond-the-blues & { width: 84.05%; }
        }

        @media (max-width: 768px) { & {
          width: 92.4%;

          BODY.page-beyond-the-blues & { width: 88.99%; }
        } }
      }
    }

    NAV {
      width: 85.1%; background: var(--blue);

      @media (min-width: 769px) {
        BODY.page-index:not(.scrolling) & { width: 77.5%; }

        BODY.page-beyond-the-blues & { width: 83.7%; background: transparent; }
      }

      @media (max-width: 768px) { & {
        position: absolute; top: 0; left: -480px; width: 480px; height: 100vh;
        overflow: hidden; transition: translate .4s ease;
      } }

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

      UL {
        display: flex; justify-content: flex-end; gap: 1.6em 5.5%; height: 100%;
        margin: 0; padding: 0; list-style-type: none; font-weight: 700;
        font-size: 0.90625rem; line-height: 1; text-transform: uppercase;

        @media (min-width: 769px) {
          BODY.page-index:not(.scrolling) & {
            justify-content: center; font-weight: 800; font-size: 0.96875rem;

            @media (max-width: 1300px) { & { justify-content: flex-start; padding-left: 2em; } }
            @media (max-width: 1200px) { & { font-size: 1.292vw; } }
          }

          BODY.page-beyond-the-blues.scrolling & { background: rgba(0, 0, 0, 0.8); }
        }

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

        @media (max-width: 768px) { & {
          flex-direction: column; justify-content: flex-start; align-items: center;
          padding-top: 4.16em; font-weight: 800; font-size: 1.875rem;
          transition: translate .4s ease;

          NAV.has-submenu & { translate: -480px 0; }
        } }

        @media (max-width: 480px) { & {
          left: -100%; width: 100%; font-size: 5.208vw;
        } }
        
        LI {
          @media (min-width: 1200px) { BODY.page-index:not(.scrolling) &.incrisis {
            position: absolute; top: 0; right: 0; height: 100%;
            width: calc((100% - var(--site-width)) / 2); background: var(--red);

            @media (max-width: 1300px) { & { width: auto; padding-right: 1em; } }

            &:before {
              content: ''; position: absolute; width: 60px; height: 100%;
              background: linear-gradient(120deg, var(--blue) 50%, var(--red) 50%);
            }
          } }

          &.home { display: none; BODY.page-beyond-the-blues & { display: list-item; } }

          BODY.page-beyond-the-blues &.btb { display: none; }

          &.close {
            display: none; @media (max-width: 768px) { & { display: flex; } }
          }

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

            &:has(BUTTON) {
              display: flex; > A { width: 100%; padding-left: 1.7em; }
            }
          } }

          &.social {
            display: none; justify-content: center; align-items: flex-start;
            gap: 1.875rem; padding-top: 1em;

            @media (max-width: 768px) { & { display: flex; } }

            A {
              width: 3.3125rem; height: 3.3125rem; box-sizing: border-box;
              border: 0.3125rem solid var(--darkblue); border-radius: 50%;

              &:before {
                content: ''; height: 72.1%; transition: all 0.2s;
                mask-repeat: no-repeat; mask-position: center; mask-size: contain;
                background: var(--darkblue);
              }

              &.facebook:before { mask-image: var(--facebook); }
              &.youtube:before { mask-image: var(--youtube); width: 72%; margin: 0 auto; }

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

          A {
            display: flex; flex-direction: column; justify-content: center;
            height: 100%; color: var(--white); text-decoration: none;
            text-align: center; white-space: nowrap;

            LI:hover > & { color: var(--darkblue); }

            @media (min-width: 769px) {
              BODY.page-beyond-the-blues LI:hover > &,
              BODY.page-beyond-the-blues &:hover { color: var(--green); }
            }

            LI.incrisis & {
              color: var(--darkred); &:hover { color: var(--white); }

              @media (min-width: 1200px) { BODY.page-index:not(.scrolling) & {
                align-items: flex-start; margin-left: 60px; color: var(--white);
                &:hover { color: var(--darkblue); }
              } }
            }
          }

          BUTTON {
            display: none; width: 1.7em; height: 1.2em; cursor: pointer;
            border: none; background: var(--right) no-repeat center;
            background-size: contain; font-size: inherit;
            -webkit-appearance: none; appearance: none;

            &.close-sub { background-image: var(--left); }

            @media (max-width: 768px) { & { display: block; } }
          }

          UL {
            display: none; justify-content: center !important;
            position: absolute; top: 100%; left: 0; width: 100%; height: 78.32%;
            background: rgba(255,255,255,0.9); padding-left: 0 !important;
            box-shadow: inset 0 1.25rem 1.25rem -1.25rem rgba(0,0,0,0.55);

            @media (min-width: 769px) {
              BODY.page-beyond-the-blues & {
                height: 1em; padding: 0.7em 0 1.4em; background: transparent;
                box-shadow: none;

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

              LI:hover & { display: flex; }
            }

            @media (max-width: 768px) { & {
              display: flex; justify-content: flex-start !important;
              position: absolute; top: 0; left: 0; width: 480px; height: 100vh;
              background: var(--blue); padding-top: 1em; box-shadow: none;
              translate: 200vw 0; opacity: 0;
              transition: translate .4s ease, opacity 2s;

              &.submenu {
                translate: 480px 0; opacity: 1;
                transition: translate .4s ease, opacity .1s;
              }
            } }

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

            A {
              color: var(--blue);
              @media (max-width: 768px) { & { color: var(--white); } }
            }
          }
        }
      }
    }
  }
}

#menu-toggle {
  display: none; width: 2.5rem; aspect-ratio: 1; border: none; padding: 0;
  background: transparent; align-self: center; cursor: pointer;
  -webkit-appearance: none; appearance: none;

  @media (max-width: 768px) { & { display: flex; } }

  &:before {
    content: ''; display: block; width: 100%; height: 100%;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1280'%3E%3Cpath d='M1536 1088v128q0 26-19 45t-45 19H64q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45m0-512v128q0 26-19 45t-45 19H64q-26 0-45-19T0 704V576q0-26 19-45t45-19h1408q26 0 45 19t19 45m0-512v128q0 26-19 45t-45 19H64q-26 0-45-19T0 192V64q0-26 19-45T64 0h1408q26 0 45 19t19 45'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain; background: var(--white);
  }

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

  BODY.sidemenu & {
    position: absolute; left: -58px; transition: translate .4s ease;

    &:before {
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2048 2048'%3E%3Cpath d='m1169 1024l879 879l-145 145l-879-879l-879 879L0 1903l879-879L0 145L145 0l879 879L1903 0l145 145z'/%3E%3C/svg%3E");
    }
  }

  BODY.sidemenu NAV.has-submenu + & { translate: -480px 0; }
}

/* FOOTER */
FOOTER {
  .social {
    display: flex; justify-content: center; align-items: center; gap: 1.4375rem;
    padding: 3.375rem 2%;

    A {
      width: 3.3125rem; aspect-ratio: 1; box-sizing: border-box;
      border: 0.3125rem solid var(--darkblue); border-radius: 50%;

      &:after {
        content: ''; display: block; width: 100%; height: 100%;
        border-radius: inherit; background: var(--darkblue); transition: all 0.2s;
        mask-repeat: no-repeat; mask-position: center; mask-size: auto 60%;
      }

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

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

      &.facebook:after { mask-image: var(--facebook); }
      &.youtube:after { mask-image: var(--youtube); mask-size: 65% auto; }
      &.instagram:after { mask-image: var(--instagram); }
      &.linkedin:after { mask-image: var(--linkedin); }
    }
  }

  #footer-menu {
    display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
    gap: 1em 5rem; padding: 0 2%; font-weight: 700; font-size: 1rem; line-height: 1;
    text-transform: uppercase;

    @media (max-width: 860px) { & { gap: 1em 8%; } }

    A { text-decoration: none; }
  }

  #copyright { padding: 3.375rem 2%; font-size: 0.625rem; text-align: center; }
}

.shin {
  padding: 2.75rem 2%; color: var(--white); text-align: center;
  font-weight: 800; position: relative; 

  &:after {
    content: ''; width: 36px; height: 18px; background: inherit;
    position: absolute; bottom: 0; left: 38%; translate: -50% 100%;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }

  H2 { font-weight: 800; line-height: 1; text-transform: uppercase; }

  A {
    color: var(--white); text-decoration: none;
    &:hover { color: var(--lightgray); }
  }
}

#footer-call {
  background: var(--darkblue); font-size: 1.625rem; line-height: 1.7; z-index: 12;

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

#footer-legacy {
  background: var(--purple); font-size: 2.5rem; line-height: 1.2; z-index: 11;
  
  H2 { margin: 0; font-size: 100%; }
}

#footer-join {
  background: var(--blue); font-weight: 400; font-size: 1.0625rem; line-height: 1;

  H2 { margin: 0 0 0.5em; font-size: 3.4375rem; }

  A:hover { color: var(--darkblue); }
}

/* MULTIPLE PAGES */
#incrisis {
  width: 960px; box-sizing: border-box; border: 0.875rem solid var(--darkerred);
  border-radius: 0.1875rem; padding: 0; background: var(--darkred);
  color: var(--darkwhite); font-weight: 700; font-size: 1.625rem; line-height: 1.8;
  box-shadow: 0 0 0.625rem 0 rgba(0,0,0,0.35); overflow: visible; position: fixed;

  @media (max-width: 1040px) { & { width: 94%; } }

  BUTTON {
    position: absolute; top: -30px; right: -30px; width: 40px; height: 40px;
    border: 0; cursor: pointer; background: var(--blue);
    mask: var(--times) no-repeat center; mask-size: contain;
  }

  > DIV {
    padding: 3.5em;
    @media (max-width: 1040px) { & { padding: 4vw 6vw; } }
  }

  STRONG, U { font-weight: 800; }

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

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 1.5em; outline: 0; border: 0;
    border-radius: 1.25rem; padding: 0.4em 1.5em; background: var(--lightgray);
    color: var(--gray); font: 700 1rem/1 'Open Sans', sans-serif;
    transition: all 0.2s; -webkit-appearance: none; appearance: none;

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

    &:is(TEXTAREA) { padding: 1.2em 1.5em; height: 14em; }

    &:is(SELECT) {
      line-height: 1.25; cursor: pointer;
      -webkit-appearance: menulist-button; appearance: menulist-button;
    }

    &:-ms-input-placeholder { color: inherit; }
    &::placeholder { color: inherit; opacity: 1; }
    &:focus:-ms-input-placeholder { color: transparent; }
    &:focus::placeholder { color: transparent; opacity: 0; }

    &.alert {
      outline: 0.125rem solid var(--red);

      &:-ms-input-placeholder { color: var(--red); }
      &::placeholder { color: var(--red); opacity: 1; }
      &:focus:-ms-input-placeholder { color: transparent; }
      &:focus::placeholder { color: transparent; opacity: 0; }
    }
  }

  INPUT[type="checkbox"],
  INPUT[type="radio"] {
    outline: 0; border: 0; border-radius: 50%; width: 1rem; height: 1rem;
    aspect-ratio: 1; margin: 0.2em 0 0; background: var(--blue);
    box-shadow: inset 0 0 0 0.25rem var(--blue); cursor: pointer;
    -webkit-appearance: none; appearance: none;

    &:checked { background: var(--white); }
  }

  LABEL:has(INPUT[type="radio"], INPUT[type="checkbox"]) {
    display: flex; align-items: flex-start; gap: 0 0.5em;
    font-weight: 700; line-height: 1.2;
  }

  LABEL:has(INPUT[type="checkbox"]) { margin-bottom: 1.5em; }

  .radio {
    display: inline-flex; justify-content: center; align-items: center;
    flex-wrap: wrap; gap: 0.6em 1.2em; margin-bottom: 1.5em;

    &:has(.alert) {
      outline: 0.125rem solid var(--red); padding: 0.5em 0;
      &:after { content: 'REQUIRED'; width: 100%; color: var(--red); }
    }

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

  .col2 {
    display: flex; justify-content: space-between; align-items: flex-start;
    flex-wrap: wrap;
  }

  BUTTON, INPUT[type="submit"] {
    display: inline-block; box-sizing: border-box; margin-top: 1.5em; outline: 0;
    border: 0; border-radius: 3.125rem; padding: 0.7em 2em; transition: all 0.2s;
    background: var(--blue); color: var(--white); text-align: center;
    font: 800 1.125rem/1 'Open Sans', sans-serif; text-transform: uppercase;
    -webkit-appearance: none; appearance: none; cursor: pointer;
    
    &:hover { background: var(--darkblue); }

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

      &:before {
        content: ""; position: absolute; top: 0; left: 50%; translate: -50% 0;
        height: 100%; aspect-ratio: 1; box-sizing: border-box; border-radius: 50%;
        border: 0.3rem solid var(--white); border-top-color: var(--blue);
        animation: spin 1s linear infinite;
      }
    }
  }
}

@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;
    padding: 0; border-radius: 50%; border: 0.125rem solid var(--blue);
    background: var(--black); color: var(--white);font-size: 1rem; line-height: 1;
    cursor: pointer;

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

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

.down {
  font-weight: 800; font-size: 1.046875rem; line-height: 1;
  letter-spacing: 0.1875rem; text-transform: uppercase;

  &:after {
    content: ''; display: inline-flex; align-items: center;
    width: 0.8em; height: 0.8em; margin-left: 0.2em; translate: 0 0.05em;
    background: currentColor;
    mask: var(--arrowdown) no-repeat center; mask-size: contain;
  }
}

/* HOME PAGE */
#home-hero {
  display: flex; justify-content: center; align-items: center; height: 700px;
  background-repeat: no-repeat; background-position: center; background-size: cover;
  box-shadow: inset 0 1.25rem 1.25rem -1.25rem rgba(0,0,0,0.55); position: relative;
  color: var(--white);

  #credit {
    position: absolute; bottom: 0; left: 0; padding: 0.5em;
    background: rgba(0,0,0,0.5); color: rgba(255,255,255,0.75);
    font-size: 0.625rem; line-height: 1;
  }

  H1 {
    margin: 0 0 2em; padding-right: 21%; font-weight: 800; font-size: 3.125rem;
    line-height: 1.2; text-transform: uppercase;
    text-shadow: 0 0 0.75rem rgba(0, 0, 0, 0.3);
    
    @media (max-width: 600px) { & { margin: 0 0 1em; padding: 0; font-size: 8vw; } }
  }

  .button { margin-right: 5%; text-transform: uppercase; }

  .learnmore {
    color: var(--white); font-weight: 600; font-size: 1.625rem; line-height: 1;
    text-transform: uppercase;

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

  #curl {
    position: absolute; bottom: 0; right: 0; width: 307px; height: 400px;
    background: url(../images/page-curl.webp) no-repeat bottom right;
    background-size: contain; font-size: var(--blue); font-weight: 700;
    font-size: 1.25rem; line-height: 1.1; text-transform: uppercase;
    text-align: center; text-decoration: none;

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

    > DIV {
      position: absolute; bottom: 2em; right: 2%; width: 50%;

      P { margin: 0; font-size: 60%; }
    }
  }
}

#home-mission {
  background: linear-gradient(90deg, var(--white) 50%, var(--lightergray) 50%);

  .site-width {
    display: flex;

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

    .left {
      width: 56.2%; box-sizing: border-box; padding: 4.5rem 5.2% 4.5rem 0;
      background: var(--white); text-align: right; font-size: 1.375rem;
      line-height: 1.8;

      @media (max-width: 700px) { & {
        width: 100%; padding: 4.5rem 2.5%; text-align: left;
      } }

      H2 {
        margin: 0 0 0.75em; color: var(--darkblue); font-weight: 800;
        font-size: 4.5rem; line-height: 1; text-transform: uppercase;
      }

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

      .learnmore {
        color: var(--darkblue); font-weight: 800; text-transform: uppercase;
        &:after { color: var(--blue); }
        &:hover { color: var(--blue); }
      }
    }

    .right {
      width: 43.8%; box-sizing: border-box;
      padding: calc(4.5rem + 2em) 0 4.5rem 7.9%; background: var(--lightergray);
      
      @media (max-width: 700px) { & { width: 100%; padding: 4.5rem 2.5%; } }

      UL {
        margin: 3em 0.2em 2.5em; list-style-type: circle; font-size: 1.375rem;
        font-weight: 700;

        LI { padding-bottom: 1em; &::marker { color: var(--blue); } }
      }

      .button {
        background: var(--darkblue); text-transform: uppercase;
        &:hover { background: var(--blue); }
      }
    }
  }
}

#home-projects {
  padding: 4em 0; color: var(--white); font-size: 1.375rem; line-height: 1.8;
  background-image: linear-gradient(rgba(14, 141, 200, 0.9)), url(../images/home-projects.webp);
  background-repeat: no-repeat; background-position: center; background-size: cover;
  
  H2 {
    margin: 0 0 0.6em; font-weight: 800; font-size: 5.3125rem; line-height: 1;
    text-transform: uppercase;

    @media (max-width: 480px) { & { font-size: 3.875rem; } }
  }

  .button {
    margin-top: 3em; padding: 0.6em 1.2em; background: var(--darkblue);
    font-size: 1.125rem; letter-spacing: 0; text-transform: uppercase;

    @media (max-width: 480px) { & { margin-top: 2em; } }

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

.charlie-round {
  width: 400px; aspect-ratio: 1; box-sizing: border-box;
  border-radius: 50%; border: 1px solid #466E8A; position: relative;

  &::before, &::after {
    content: ''; position: absolute; top: -4.8%; left: 6%; width: inherit;
    aspect-ratio: 1; box-sizing: inherit; border-radius: inherit; border: inherit;
  }

  &::after { top: 0; left: 5.5%; }

  IMG {
    position: absolute; z-index: 3; top: 0; right: 0;
    width: 94.465%; height: auto; border-radius: inherit;
  }
}

#home-foundation {
  padding: 4em 0; color: var(--white); font-size: 1.375rem; line-height: 2;
  background: var(--darkblue) url(../images/home-foundation.webp) no-repeat center;
  background-blend-mode: multiply; background-size: cover;

  .charlie-round {
    display: none; width: 291px;
    @media (max-width: 750px) { & { display: block; width: 88vw; margin-top: 2em; }}
  }

  .site-width {
    display: flex; justify-content: space-between; gap: 1.5em 0;

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

    .left {
      display: flex; flex-direction: column; justify-content: space-between;
      align-items: flex-end; width: 45%; text-align: right;

      @media (max-width: 750px) { & { width: 100%; text-align: left; } }

      H2 {
        margin: 0; color: var(--blue); font-weight: 800; font-size: 3.875rem;
        line-height: 1; text-transform: uppercase;

        @media (751px <= width <= 1000px) { & { font-size: 6.2vw; } }
        @media (max-width: 500px) { & { font-size: 12.4vw; } }
      }

      .charlie-round {
        display: block; @media (max-width: 750px) { & { display: none; } }
      }
    }

    .right {
      width: 48.5%;

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

      .button {
        padding: 0.9em 1.2em; background: var(--white); color: var(--blue);
        font-size: 1rem; text-transform: uppercase;

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

/* FOUNDATION */
#foundation-hero {
  padding: 5em 0; background: url(../images/foundation-hero.webp) center no-repeat;
  background-size: cover; color: var(--darkwhite); font-weight: 700;
  font-size: 1.875rem; line-height: 1.8; text-align: center;
}

#foundation-menu {
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  gap: 1em 6%; margin: 0; padding: 2em 0; list-style-type: none;
  border-bottom: 1px solid #959595; font-weight: 800; font-size: 0.96875rem;
  line-height: 1; text-transform: uppercase; white-space: nowrap;

  A {
    color: var(--darkblue); text-decoration: none;
    &:hover { color: var(--blue); }
  }
}

.background-text {
  position: relative;
 
  &:before {
    content: attr(data-background); position: absolute; z-index: -1; top: 0;
    font-weight: 800; font-size: 400px; line-height: 0.7; text-transform: uppercase;
    white-space: nowrap; opacity: 0.025; width: 100%; height: 1em; overflow: hidden;
  }
}

#foundation {
  scroll-margin-top: 5rem; padding: 5em 0;

  .site-width {
    display: flex; justify-content: space-between; gap: 2em 0;

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

    .left {
      width: 45%;

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

      H1 {
        margin: 0 0 0.7em; color: var(--blue); font-weight: 800;
        font-size: 3.8125rem; line-height: 1.2; text-transform: uppercase;

        @media (701px <= width <= 950px) { & { font-size: 6.4vw; } }
        @media (max-width: 500px) { & { font-size: 12.2vw; } }
      }

      .watchvideo { color: var(--darkblue); &:hover { color: var(--blue); } }
    }

    .right {
      width: 50%; padding-top: 0.4em; font-weight: 700; font-size: 1.5rem;
      line-height: 1.3;

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

#foundation-videos {
  padding: 3.75rem 0; background: var(--blue);

  .site-width {
    display: flex; justify-content: space-between; gap: 1em 0;
  
    @media (max-width: 900px) { & { flex-direction: column; align-items: center; } }

    .watchvideo {
      color: var(--white);
      &:hover { color: var(--darkblue); }

      @media (min-width: 901px) { & { font-size: 0.9rem; } }
    }
  }
}

#charlies-story {
  padding-bottom: 6em; color: var(--white); font-size: 0.9375rem;
  background: var(--darkblue) url(../images/foundation-background-charlie.webp) no-repeat top 115px center; scroll-margin-top: 5rem;
  background-blend-mode: multiply; background-size: cover; position: relative;

  @media (max-width: 1024px) { & { background-position: top 11.23vw center; } }
  
  &:before {
    content: ''; position: absolute; inset: 0; height: 115px;
    background: var(--blue);
  }

  @media (max-width: 1024px) { &:before { height: 11.23vw; } }

  .header {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 2em 0; padding-bottom: 2em;

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

    .charlie-round {
      @media (max-width: 1024px) { & { width: 39.063vw; } }
      @media (max-width: 500px) { & { width: 88vw; } }
    }

    H2 {
      width: 50%; margin: 0 0 0.25em; font-weight: 800; font-size: 4.5rem;
      line-height: 1.2; text-transform: uppercase;

      @media (max-width: 800px) { & { font-size: 9vw; } }
      @media (max-width: 500px) { & { width: 100%; margin: 0; font-size: 14.4vw; } }
    }
  }

  STRONG { color: var(--blue); font-size: 133.3333%; }
}

#foundation-slider {
  --f-carousel-slide-width: calc(100% / 3);
  @media (max-width: 800px) { & { --f-carousel-slide-width: 50%; } }
  @media (max-width: 600px) { & { --f-carousel-slide-width: 100%; } }

  .is-prev, .is-next {
    --f-button-width: 34px; --f-button-height: 34px; --f-arrow-pos: 1%;
    background: var(--blue); opacity: 0.6;
    mask: var(--arrowleft) no-repeat center; mask-size: contain;

    &:is(.is-next) { mask-image: var(--arrowright); }

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

#faq {
  scroll-margin-top: 5rem; padding: 5.5em 0;

  &:before { left: 50%; translate: -50% 0; }

  .header {
    display: flex; justify-content: space-between;
    gap: 1em 0; padding-bottom: 2em;

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

    H2 {
      width: 41%; margin: 0; color: var(--blue); font-weight: 800;
      font-size: 3.8125rem; line-height: 1.2; text-transform: uppercase;

      @media (601px <= width <= 950px) { & { font-size: 6.421vw; } }
      @media (max-width: 600px) { & { width: 100%; } }
      @media (max-width: 425px) { & { font-size: 14.353vw; } }
    }

    .text {
      width: 53%; padding-top: 0.2em; font-size: 1.375rem; line-height: 1.8;
      @media (max-width: 600px) { & { width: 100%; } }
    }
  }

  STRONG.q { color: var(--darkblue); }
}

#board-leadership {
  scroll-margin-top: 5rem; padding: 5em 0;
  color: var(--darkwhite); line-height: 1.6;
  
  &:before {
    height: 100%; color: #0C2731; background: var(--darkblue); opacity: 1;
  }

  .site-width {
    display: flex; justify-content: space-between; gap: 2em 0;

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

    H2 {
      margin: 0 0 0.5em; color: var(--blue); font-weight: 800; font-size: 3.8125rem;
      line-height: 1.2; text-transform: uppercase;

      @media (700px <= width <= 1000px) { & { font-size: 6vw; } }
      @media (max-width: 425px) { & { font-size: 14.353vw; } }
    }

    H3 {
      display: inline; margin: 0; color: var(--blue); font-weight: 700;
      font-size: 0.75rem; text-transform: uppercase;
    }

    A {
      color: var(--darkwhite); text-decoration: none;
      &:hover { color: var(--blue); }
    }

    .sep { padding: 0 0.5em; display: none; }

    .left {
      width: 40%;

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

      .ylc {
        display: flex; justify-content: space-between; align-items: center;
        margin-top: 2em;

        IMG { width: 36.5%; }

        DIV { width: 57.5%; A { font-weight: 800; text-transform: uppercase; } }
      }
    }

    .right {
      width: 56%; padding-top: 0.8em; font-size: 0.75rem; line-height: 2;

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

      STRONG:not(.nosep):before {
        content: '//'; margin: 0 0.6em 0 0.4em; font-weight: 400;
      }
      H3 + STRONG:before { display: none; }
    }
  }
}

/* ENDOWMENT */
#endowment-hero {
  color: var(--darkwhite); text-align: center; position: relative;
  background: var(--darkblue) url(../images/endowment-billie-mike.webp) center no-repeat; background-size: contain;

  &:before, &:after {
    content: ''; position: absolute; top: 0; width: 50%; height: 100%;
    background-repeat: no-repeat; background-size: contain;
  }

  @media (max-width: 750px) { &:before, &:after { background-size: cover; } }

  &:before {
    left: 0; background-image: url(../images/endowment-joey.webp);
    background-position: left center;
  }

  &:after {
    right: 0; background-image: url(../images/endowment-charlie.webp);
    background-position: right center;
  }

  H1 {
    position: relative; z-index: 3; margin: 0 auto; padding: 3.62em 0 0.26em;
    font-size: 75px; line-height: 1.3; text-shadow: 0 0 0.1315em var(--darkblue);

    @media (max-width: 1200px) { & { font-size: 6.2vw; } }
    @media (max-width: 750px) { & { font-size: 9.067vw; padding: 1.32em 0; } }
  }
}

#endowment-hero-caption {
  display: flex; justify-content: space-between; padding: 0 2%; font-size: 0.75rem;
}

#endowment-gift {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; padding: 5em 0; line-height: 1.9;

  H2 {
    width: 100%; margin: 0 0 0.1em; color: var(--darkblue); font-weight: 800;
    font-size: 3.125rem; line-height: 1; text-transform: uppercase;
  }

  > .text {
    width: calc(100% - 440px); font-weight: 700;
    @media (max-width: 800px) { & { width: 100%; } }
  }

  .legacy-link {
    width: 400px; margin-top: 0.4em; background: var(--purple); color: var(--white);
    text-decoration: none; font-weight: 700; font-size: 1.625rem; line-height: 1;

    @media (max-width: 800px) { & {
      width: 474px; font-size: 1.875rem; margin-top: 2rem;
    } }

    &:hover { color: #CCCCCC; }

    .text {
      box-sizing: border-box; padding: 3rem 2%; text-align: center;

      DIV { text-transform: uppercase; padding-bottom: 0.25em; }
    }

    .image {
      display: flex; justify-content: flex-end; align-items: center;
      background: url(../images/legacy-giving.webp) no-repeat center;
      background-size: cover; aspect-ratio: 474 / 178;

      &:after {
        content: attr(data-text); font-size: 2.4rem; text-transform: uppercase;
        width: 50%; text-align: center;
        text-shadow: 0.0625rem 0.0625rem 0.0625rem var(--black);
      }
    }
  }
}

#endowment-tribute {
  padding: 0 0 5em; line-height: 1.9;

  H2 {
    width: 100%; margin: 0 0 0.1em; color: var(--darkblue); font-weight: 800;
    font-size: 3.125rem; line-height: 1; text-transform: uppercase;
  }

  IMG {
    float: right; max-width: 40%; margin-left: 2em;

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

/* Legacy Giving */
.legacy-hero {
  padding: 5.625rem 0; background: var(--purple); color: var(--white);
  text-transform: uppercase; position: relative;
  
  @media (max-width: 700px) { & { padding: 4rem 0 0; } }
  @media (max-width: 480px) { & { margin-top: 105px; } }

  H1, H2 {
    width: 48%; margin: 0; font-size: 2.4rem; line-height: 1;
    position: relative; z-index: 3;

    &:is(H2) { margin-top: 0.25em; font-size: 2rem; }

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

  .image {
    position: absolute; z-index: 2; inset: 0 0 0 50%;
    background: url(../images/legacy-giving.webp) no-repeat left center;
    background-size: cover;

    @media (max-width: 700px) { & {
      position: static; width: 100%; aspect-ratio: 1200 / 432; margin-top: 4rem;
    } }
  }
}

#legacy-content {
  padding: 2.5rem 0 5rem;
  H3 { margin: 0; color: var(--darkblue); font-size: 1.375rem; }
}

/* SIGNS & FACTS */
#signs-and-facts-hero {
  display: flex; flex-direction: column; justify-content: center; height: 650px;
  background: rgba(17,44,55,0.5) url(../images/signs-and-facts-hero.webp) center no-repeat;
  background-size: cover; background-blend-mode: multiply; color: var(--white);
  text-align: center; text-transform: uppercase;

  @media (max-width: 480px) { & { height: 104.167vw; } }

  H1 {
    margin: 0 auto; font-weight: 800; font-size: 5.1875rem; line-height: 1.2;

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

    &:after {
      content: ''; display: block; height: 18px; margin-top: 1em;
      background: var(--blue); mask: var(--arrowdown) no-repeat center;
      mask-size: contain;
    }
  }
}

#depression {
  .site-width {
    display: flex; justify-content: space-between; align-items: flex-start;
    font-weight: 700;

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

    .left {
      width: 51.2%; font-size: 1.375rem;

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

      .box {
        border: 0.75rem solid var(--lightgray); padding: 3em 0.5em 1em;
        box-sizing: border-box; color: var(--blue); font-weight: 800;
        font-size: 2.3125rem; line-height: 1.3; text-transform: uppercase;
        position: relative; top: -2em;

        H2 {
          margin: 0; color: var(--darkblue); font-weight: 800; font-size: 4.375rem;
          line-height: 1;

          @media (751px <= width <= 1040px) { & { font-size: 6.7vw; } }
          @media (max-width: 550px) { & { font-size: 12.727vw; } }
        }

        P {
          margin: 0;

          &:after {
            content: ''; display: block; height: 18px; margin-top: 1em;
            background: var(--blue); mask: var(--arrowdown) no-repeat left center;
            mask-size: contain;
          }
        }
      }

      UL {
        margin-left: 0.2em; list-style-type: circle; line-height: 1.5;
        LI { padding-bottom: 1.5em; &::marker { color: var(--blue); } }
      }
    }

    .right {
      width: 40%; font-size: 1rem;

      @media (max-width: 750px) { & { width: 100%; padding: 4rem 0; } }

      #facts-images {
        position: relative; aspect-ratio: 400 / 568;

        IMG {
          position: absolute; box-shadow: 0 0 1.875rem 0 rgba(0,0,0,0.25);
          opacity: 0; animation: fade-in 1s ease-in forwards;

          &.facts1 { z-index: 1; top: -2em; right: 0; width: 90%; }
          &.facts2 { z-index: 2; top: 35%; left: 0; width: 67%; animation-delay: 0.75s; }
          &.facts3 { z-index: 3; bottom: 0; right: 0; width: 65%; animation-delay: 1.5s; }
        }
      }
    }
  }
}

@keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }

@keyframes roll-in { 0% {} 100% { opacity: 1; translate: none; rotate: none; } }

@keyframes pulse { 0% {} 50% { scale: 1.2; } 100% { scale: 1; } }

#call-circle {
  height: 287px; overflow: hidden; position: relative; z-index: 1;

  > DIV {
    display: flex; justify-content: center; align-items: center; gap: 0.75em 0;
    flex-direction: column; width: 287px; aspect-ratio: 1; border-radius: 50%;
    position: absolute; left: calc((100vw - var(--site-width)) / 2);
    background: var(--darkblue); color: var(--white); font-weight: 800;
    font-size: 1.5625rem; line-height: 1; text-align: center;
    text-transform: uppercase; opacity: 0; translate: 300% 0; rotate: 270deg;

    @media (max-width: 1040px) { & { left: 2%; } }

    P { margin: 0; }

    SPAN, DIV { font-size: 13px; text-transform: none; }

    A { color: var(--white); text-transform: none; text-decoration: none; }
  }

  &.roll-in > DIV { animation: roll-in 1s both; }
}

#the-facts {
  position: relative; top: -67px;

  .site-width {
    display: flex; justify-content: space-between; align-items: flex-start;
    flex-wrap: wrap; gap: 50px 0; font-weight: 800; text-transform: uppercase;

    H2 {
      margin: 0; padding: 1em 0.5em; border: 0.75rem solid var(--lightgray);
      box-sizing: border-box; color: var(--darkblue); font-weight: 800;
      font-size: 4.875rem; line-height: 1.3;

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

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

    .left {
      width: 46%; color: var(--blue); font-size: 3.625rem; line-height: 1.2;

      @media (701px <= width <= 900px) { & { font-size: 6.4vw; } }
      @media (max-width: 700px) { & { width: 100%; } }
      @media (max-width: 450px) { & { font-size: 12.889vw; } }

      IMG { box-shadow: 0 0 1.875rem 0 rgba(0,0,0,0.25); }
    }

    .right {
      width: 49%; padding-top: 0.25em; font-size: 1.375rem; line-height: 1.5;
      @media (max-width: 700px) { & { width: 100%; } }

      .button {
        margin-top: 2em; padding: 0.7em 1.2em; background: var(--darkblue);
        font-size: 1.375rem; letter-spacing: 0.1em;

        &.pulse { animation: pulse 1s both; }

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

/* GRANTS */
#grant-priorities {
  z-index: 1; padding: 5em 0; background: var(--darkblue); color: var(--darkwhite);
  font-weight: 700; line-height: 1.9;

  &:before { z-index: 2; left: -100px; color: var(--gray); opacity: 0.08; }

  .site-width { position: relative; z-index: 3; }

  H1 {
    margin: 0 0 0.5em; font-weight: 800; font-size: 4rem; line-height: 1;
    text-transform: uppercase;

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

  H2 {
    margin: 0 0 1em; color: var(--blue); font-weight: 800; font-size: 2.75rem;
    line-height: 1.2; text-transform: uppercase;

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

  OL LI {
    padding-bottom: 1.5em; &::marker { color: var(--blue); font-weight: 800; }
  }

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

#grant-guidelines {
  padding: 5em 0; font-weight: 700; line-height: 1.9;

  &:before { left: -100px; opacity: 0.08; }

  H2 {
    margin: 0 0 0.5em; color: var(--darkblue); font-weight: 800;
    font-size: 3.8125rem; line-height: 1; text-transform: uppercase;

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

  H3 {
    margin: 0 0 2em; color: var(--blue); font-weight: 800;
    font-size: 1.375rem; line-height: 1; text-transform: uppercase;
  }

  STRONG { color: var(--darkblue); font-weight: 800; }

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

  OL LI {
    padding-bottom: 1.5em; &::marker { color: var(--blue); font-weight: 800; }
  }

  UL { list-style-type: circle; LI::marker { color: var(--blue); } }

  .button {
    margin-top: 3em; padding: 0.7em 1.2em; font-size: 1.125rem; letter-spacing: 0;
    text-transform: uppercase;
  }
}

/* PROJECTS FUNDED */
#projects-hero {
  display: flex; justify-content: center; align-items: center; height: 700px;
  background: rgba(17,44,55,0.6) url(../images/projects-funded-hero.webp) center no-repeat;
  background-size: cover; background-blend-mode: multiply; color: var(--darkwhite);
  font-weight: 800; font-size: 1.4375rem; line-height: 1.8; text-align: center;

  .col2 {
    display: flex; align-items: flex-start; gap: 0 10%; text-transform: uppercase;

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

    .watchvideo {
      width: 45%; text-align: right; color: var(--white); font-size: 1.5rem;
      letter-spacing: 0.125em;

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

      @media (max-width: 500px) { & { width: 80%; margin: 0 auto 1em; } }
    }

    .down {
      font-size: 1.5rem; &:after { color: var(--blue); }

      @media (max-width: 500px) { & { margin: 0 auto; } }
    }
  }
}

#funding-current-header {
  margin: 0; padding: 1em calc((100% - var(--site-width)) / 2);
  background: var(--darkwhite); color: var(--darkblue); font-weight: 800;
  font-size: 3.1875rem; line-height: 1.1; text-align: center;
  text-transform: uppercase;

  @media (max-width: 1040px) { & { padding: 1em 2%; } }
}

#funding-current {
  flex-direction: column-reverse; margin: 0;

  .f-carousel__dots {
    position: static; display: flex; justify-content: flex-end; align-items: center;
    gap: 0.5em 1em; border-top: 1px solid var(--lightgray);
    border-bottom: 1px solid var(--lightgray);
    padding: 2em calc((100% - var(--site-width)) / 2); color: var(--notsolightgray);
    font-weight: 800; font-size: 0.875rem; line-height: 1;

    @media (max-width: 1040px) { & { padding: 2em 2%; } }
    
    &:before {
      content: "Current Projects Funded:"; justify-self: flex-start;
      margin-right: auto; text-transform: uppercase;
    }

    BUTTON {
      outline: 0; border: 0; padding: 0; background: transparent;
      color: var(--notsolightgray); font-family: 'Open Sans', sans-serif;
      font-weight: 800; font-size: 0.875rem; line-height: 1; cursor: pointer;

      &[aria-current="true"], &:hover { color: var(--blue); }

      &[data-carousel-go-to="0"]:before, &[data-carousel-go-to="1"]:before,
      &[data-carousel-go-to="2"]:before, &[data-carousel-go-to="3"]:before,
      &[data-carousel-go-to="4"]:before, &[data-carousel-go-to="5"]:before,
      &[data-carousel-go-to="6"]:before, &[data-carousel-go-to="7"]:before,
      &[data-carousel-go-to="8"]:before { content: '0'; }
    }
  }

  .f-carousel__viewport {
    transition: height 0.8s; padding: 4.5rem 0; font-weight: 700;
    font-size: 1.375rem; line-height: 1.6;

    H3 {
      margin: 0 0 0.5em; color: var(--darkblue); font-weight: 800;
      font-size: 1.625rem; line-height: 1; text-transform: uppercase;

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

    A { text-decoration: none; }
  }

  .is-prev { display: none; }

  .is-next {
    inset: 0; transform: none; top: 9rem; left: auto;
    right: calc((100% - var(--site-width)) / 2);
    width: 1.5625rem; height: 1.5625rem; background: var(--blue);
    mask: var(--arrowright) no-repeat center; mask-size: contain;

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

    @media (max-width: 1040px) { & { right: 2%; } }
  }
}

#projects-header {
  margin: 0; padding: 2.5em 2%; background: var(--darkblue); text-align: center;
  color: var(--darkwhite); font-weight: 800; font-size: 1.5rem; line-height: 1.4;
}

#filter-list {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 2em 5%; padding: 4em 0 1em;

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

  #toggle-filter {
    display: none;

    + LABEL {
      display: none; align-items: center; gap: 0 0.375rem; cursor: pointer;
      color: var(--darkblue); font-weight: 800; font-size: 1.5rem; line-height: 1;
      text-transform: uppercase;

      &:before {
        content: ''; width: 0.85em; height: 0.85em; background: var(--blue);
        mask: var(--hamburger) no-repeat center; mask-size: contain;
      }

      @media (max-width: 600px) { & {
        display: inline-flex;
        + .filter { display: none; }
      } }
    }

    &:checked + LABEL {
      &:before { mask-image: var(--times); }
      + .filter { display: block; }
    }
  }

  .filter {
    width: 150px; text-align: right;

    @media (max-width: 600px) { & {
      position: absolute; top: calc(4em + 2rem); padding: 1em 1em 0;
      background: rgba(19, 154, 210, 0.9);
    } }

    H3 {
      margin: 0 2em 1em 0; font-weight: 800; font-size: 0.75rem; line-height: 1;
      text-transform: uppercase;

      @media (max-width: 600px) { & { display: none; } }
    }

    LABEL {
      display: flex; justify-content: flex-end; align-items: center; gap: 0 0.5em;
      margin-bottom: 1em; color: var(--blue); font-weight: 800; font-size: 1rem;
      line-height: 1; text-transform: uppercase;

      @media (max-width: 600px) { & { color: var(--white); } }

      &:after {
        content: ''; display: inline-block; width: 1em; height: 1em;
        aspect-ratio: 1; border-radius: 50%; background: var(--lightgray);
        cursor: pointer;
      }

      &:has(INPUT[type="checkbox"]:checked):after {
        background: var(--darkblue); box-shadow: inset 0 0 0 3px var(--lightgray);
      }

      INPUT[type="checkbox"] { display: none; }
    }

    HR { border-top-color: var(--lightgray); }
  }

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

  #list .list-item, #list .list-item-r {
    transition: all 0.2s linear, opacity 0.05s linear;
    padding-bottom: 3em; font-weight: 700; line-height: 1.8;

    H4 {
      margin: 0 0 1em; color: var(--darkblue); font-weight: 800;
      font-size: 1.5rem; line-height: 1.1; text-transform: uppercase;
      text-decoration: underline;
    }

    A {
      display: inline-block; margin-top: 1em; font-size: 0.875rem;
      text-decoration: none;
    }
  }

  #list .list-item:not(.active), #list .list-item-r:not(.active.loc-active) {
    height: 0; padding: 0; opacity: 0; user-select: none; pointer-events: none;
    transition: all 0.2s linear, opacity 0.05s linear;
  }
}

/* BEYOND THE BLUES */
#btb-hero {
  display: flex; justify-content: center; flex-direction: column;
  aspect-ratio: 1 / 0.5739; color: var(--white);
  background: rgba(0,0,0,0.7) url(../images/btb-hero.webp) center no-repeat;
  background-size: cover; background-blend-mode: multiply;

  @media (max-width: 768px) { & { aspect-ratio: 1 / 0.78; } }
  @media (max-width: 600px) { & { aspect-ratio: 1; } }
  
  .site-width {
    display: flex; justify-content: space-between; align-items: center; gap: 3em 0;
    padding-top: 2.75rem;

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

    .header {
      width: 50%; text-transform: uppercase;

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

      H1 {
        margin: 0 0 0.3em; color: var(--btb-blue); font-weight: 800; font-size: 6.875rem; line-height: 0.85;

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

        .btb-green { color: var(--green); }
        .btb-yellow { color: var(--yellow); }
        .btb-orange { color: var(--orange); }
        .btb-red { color: var(--btb-red); }
        .btb-pink { color: var(--pink); }
        .btb-purple { color: var(--purple); }

        DIV {
          padding-left: 0.25em;

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

    .content {
      width: 50%; font-weight: 700; font-size: 1.25rem; line-height: 1.5;
      padding-top: 4rem;

      @media (max-width: 1040px) { & { font-size: 1.923vw; } }
      @media (max-width: 600px) { & { width: 100%; font-size: 3vw; } }
      
      .blue { color: var(--btb-blue); text-transform: uppercase; }
      .button { text-transform: uppercase; }
      SUP { font-size: 50%; }
    }
  }
}

#sponsors {
  scroll-margin-top: 5rem; padding: 6em 0; background: var(--darkblue);
  color: var(--darkwhite); font-weight: 700; font-size: 0.75rem;

  H2 {
    margin: 0 0 2em; width: 100%; font-weight: 800; font-size: 1.875rem;
    line-height: 1; text-align: center; text-decoration: underline;
    text-transform: uppercase;
  }

  .site-width {
    display: flex; justify-content: space-between; align-items: flex-start;
    flex-wrap: wrap;

    H3 {
      margin: 1em 0 0.4em; color: var(--blue); font-weight: 800; font-size: 1rem;
      line-height: 1; text-decoration: underline;
    }

    .col {
      width: 21.3%; &:first-of-type { width: 31.3%; }

      @media (max-width: 750px) {&{ width: 48%; &:first-of-type { width: 48%; }}}
      @media (max-width: 500px) {&{ width: 100%; &:first-of-type { width: 100%; }}}

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

        LI { padding-bottom: 0.6em; line-height: 1.5em; }
      }
    }
  }
}

#btb-gallery {
  padding: 8em 0 6.5em; background: var(--purple); color: var(--white);

  H2 { margin: 0 0 1.125rem; font-size: 1.40625rem; text-align: center; text-transform: uppercase; }

  .site-width {
    display: flex; flex-wrap: wrap; gap: 20px 2%;

    @media (max-width: 1040px) { & { gap: 1.923vw 2%; } }

    A {
      width: 23.5%; aspect-ratio: 1 / 0.5879; background-repeat: no-repeat; background-position: center;
      background-size: cover;

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

/* CONNECT */
#connect-hero {
  background: linear-gradient(to right, transparent 66%, var(--darkblue) 66%), url(../images/connect-hero.webp) no-repeat left center;
  
  .site-width {
    display: flex; align-items: center; min-height: 550px; text-align: center;
    background: linear-gradient(to right, transparent 57.6%, var(--darkblue) 57.6%);

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

    @media (max-width: 768px) { & {
      flex-direction: column; min-height: 0;
    } }

    .image {
      width: 57.6%; box-sizing: border-box; padding: 3.4375rem 2%; color: var(--blue); font-size: 1.375rem; font-weight: 800;
      text-transform: uppercase;

      @media (max-width: 768px) { & { width: 100%; background: url(../images/connect-hero.webp) no-repeat center; background-size: cover; } }

      H1 {
        margin: 0 0 0.5em; color: var(--white); font-size: 4.625rem; line-height: 1;
        font-weight: 800;

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

      .arrow {
        height: 2.0625rem; margin-top: 2.5em; background: var(--white);
        mask: var(--arrowdown) no-repeat center; mask-size: contain;
      }
    }

    .text {
      width: 42.4%; box-sizing: border-box; padding: 2.05rem 2%; background: var(--darkblue); color: var(--white); font-weight: 700;

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

      .button {
        font-size: 1.125rem; line-height: 1; letter-spacing: 0;
        text-transform: uppercase;

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

#connect-form {
  width: 650px; margin: 0 auto; padding: 5.5rem 0; font-size: 1rem;

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

  H2 { margin: 0 0 3em; font-size: 1.375rem; text-align: center; }

  .required {
    padding: 0 2em 0.5em; color: var(--blue); font-weight: 700; font-size: 0.75rem;
  }
}

.shin-connect {
  font-weight: 700; font-size: 1rem !important;

  FORM {
    display: flex; justify-content: space-between; align-items: center;
    gap: 2.25rem; width: 825px; margin: 2rem auto 0; text-align: center;

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

    INPUT[type="email"] {
      margin: 0 !important; background: var(--black) !important;
      color: var(--white) !important;
    }

    INPUT[type="submit"] {
      margin: 0; background: var(--white); color: var(--blue);
      &:hover { background: var(--blue); color: var(--white); }
    }
  }
}

/* RESOURCES */
#resources-hero {
  display: flex; justify-content: center; align-items: center; text-align: center;
  flex-direction: column; height: 700px; color: var(--darkwhite);
  background: rgba(17,44,55,0.6) url(../images/resources-hero.webp) center no-repeat;
  background-size: cover; background-blend-mode: multiply; 
  
  H1 {
    margin-bottom: 1.5em; font-weight: 800; font-size: 2.75rem; line-height: 1.5;

    @media (max-width: 500px) { & { margin-bottom: 1em; line-height: 1.25; } }
  }

  .down {
    color: var(--blue); font-size: 1.5rem;

    @media (max-width: 500px) { & { margin: 0 auto; } }
  }
}

#resources-content {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 3em 0; padding: 4em 0;

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

  .left {
    width: 43.2%; font-weight: 700; font-size: 0.9375rem; line-height: 1.9;

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

    H2 {
      margin: 0 0 0.4em; color: var(--blue); font-weight: 800; font-size: 3.8125rem;
      line-height: 1.2; text-transform: uppercase;

      @media (600px <= width <= 950px) { & { font-size: 6.421vw; } }
      @media (max-width: 400px) { & { font-size: 15.25vw; } }
    }

    .down { color: var(--blue); font-size: 2em; &:after { margin: 0; } }
  }

  .right {
    width: 50%; font-weight: 700; font-size: 1.5rem; line-height: 2;

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

  P {
    display: flex; justify-content: center; align-items: center; gap: 3em;
    width: 100%; margin: 0;

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

    A {
      IMG {
        max-height: 100px; width: auto; filter: grayscale(1);

        &.tall { max-height: 130px; }

        @media (max-width: 600px) { & {
          max-height: 130px;
          &.tall { max-height: 175px; }
        } }

        A:hover & { filter: grayscale(0); }
      }
    }
  }
}

#resources-header {
  margin: 0; padding: 2.5em calc((100% - var(--site-width)) / 2);
  background: var(--darkblue); text-align: center; color: var(--darkwhite);
  font-weight: 800; font-size: 1.5rem; line-height: 1.4;

  @media (max-width: 1040px) { & { padding: 2.5em 2%; } }

  DIV {
    margin-top: 1.5em; color: var(--blue); font-weight: 700; font-size: 0.75rem;
    line-height: 1.3;
  }
}

#donate {
  padding: 4em 0; background: var(--darkblue); color: var(--white);
  font-weight: 700; line-height: 1.8;

  .site-width {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 2em 0;

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

    .left {
      width: 44.6%;

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

      H1 {
        margin: 0 0 0.5em; font-weight: 800; font-size: 4rem; line-height: 1;
        text-transform: uppercase;

        @media (601px <= width <= 870px) { & { font-size: 7.356vw; } }
      }
    }

    .right {
      width: 52%;

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

      H2 {
        margin: 0 0 2em; color: var(--blue); font-weight: 700; font-size: 1rem;
        line-height: 1;
      }

      UL {
        margin-left: 0.25em; font-size: 1.3125rem; line-height: 1.3;

        LI { padding-bottom: 1em; &::marker { color: var(--blue); } }
      }
    }
  }

  #donate-form {
    width: 620px; margin: 3em auto 0; text-align: center;

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

    H3 {
      margin: 0; color: var(--blue); font-weight: 800; font-size: 0.9375rem;
      text-transform: uppercase;
    }

    INPUT:not([type="submit"]):not([type="radio"]):not([type="checkbox"]) {
      background: var(--white); color: var(--blue); text-align: center;
      font-weight: 800; font-size: 1.25rem;
    }

    LABEL { display: inline-flex; margin: 0 1em; }

    BUTTON:hover { background: var(--white); color: var(--darkblue); }
  }
}

#thankyou {
  width: 960px; box-sizing: border-box; outline: 0; border: 0;
  border-radius: 1.25rem; padding: 0; background: var(--blue);
  color: var(--darkwhite); font-weight: 800; font-size: 1.125rem;
  text-align: center; overflow: visible; position: fixed;
  box-shadow: 0 0 0.625rem 0 rgba(0,0,0,0.35);

  @media (max-width: 1040px) { & { width: 94%; } }

  BUTTON {
    position: absolute; top: -20px; right: -20px; width: 40px; height: 40px;
    border: 0; cursor: pointer; background: var(--darkwhite);
    mask: var(--times) no-repeat center; mask-size: contain;
  }

  > DIV {
    padding: 3.5em;
    @media (max-width: 1040px) { & { padding: 4vw 6vw; } }

    H3 {
      margin: 0 0 0.5em; color: var(--darkblue); font-weight: 800;
      font-size: 150%; line-height: 1;
    }
  }

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

#donate-contact {
  padding: 4em 0; font-weight: 700; line-height: 1.8; text-align: center;

  H2 {
    margin: 0 0 1.5em; color: var(--blue); font-weight: 800; font-size: 1.125rem;
    text-transform: uppercase;
  }

  .nonprofit {
    padding-top: 2em; color: #A1A1A1; font-size: 0.875rem; line-height: 1.4;
  }
}

/* STIGMA */
#stigma-banner {
  background: url(../images/green-ribbon.webp) no-repeat left 25% center;
  background-size: auto 95%; position: relative;

  @media (max-width: 700px) { & { background-position: center top 2vw; background-size: auto 40%; } }

  &:before {
    content: ''; position: absolute; inset: 0 48% 0 0;
    background: rgba(23,44,54,0.74);
  }

  @media (max-width: 700px) { &:before { inset: 0; } }

  .site-width {
    display: flex; justify-content: space-between; align-items: center;
    width: 1164px; box-sizing: border-box; position: relative; z-index: 2;

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

    H1 {
      width: 52%; box-sizing: border-box; margin: 0; color: var(--white);
      font-weight: 800; font-size: 4.1875rem; line-height: 1.2;
      text-transform: uppercase;

      @media (max-width: 700px) { & {
        width: 100%; padding: 0.5em 2%; text-align: center;
      } }
    }

    .text { background: var(--white);
      display: flex; justify-content: center; align-items: flex-start;
      flex-direction: column; gap: 1.5em; width: 48%; min-height: 550px;
      box-sizing: border-box; padding-left: 3.125rem; font-weight: 700;
      font-size: 1.3125rem; line-height: 1.4;
      
      @media (701px <= width <= 900px) { & { padding-left: 3%; font-size: 2.3vw; } }
      @media (max-width: 700px) { & {
        width: 100%; min-height: 0; padding: 1.5em 2%;
      } }

      .button {
        text-transform: uppercase;
        @media (701px <= width <=  900px) { & { font-size: 2.6vw; } }
      }
    }
  }
}

#stigma-green {
  padding: 1rem 0; background: #37BB39; color: var(--white);
  text-transform: uppercase; text-align: center;

  H2 {
    width: 1164px; margin: 0 auto; font-weight: 800; font-size: 2.1875rem;
    line-height: 1.4;

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

#stigma-pickup {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 2rem 1em; padding: 3rem 0;

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

  IMG {
    width: 46.7%; height: auto;
    box-shadow: 0.1875rem 0.1875rem 0.4375rem 0 rgba(0,0,0,0.35);

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

  .text {
    width: 442px; text-align: center; font-weight: 800; font-size: 1.25rem;
    line-height: 1.5;

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

    H2 {
      margin: 0; color: var(--blue); font-weight: 800; font-size: 1.875rem;
      line-height: 1; text-transform: uppercase;
    }

    .loc {
      margin-top: 1.5em; box-shadow: 0 0 0.75rem 0 rgba(0,0,0,0.16);
      border-radius: 2.25rem; padding: 0.8rem 1.5rem; box-sizing: border-box;

      > DIV { padding: 0.5em 0; }
    }
  }
}

/* YOUTH LEADERSHIP COUNCIL */
#ylc-hero {
  background: url(../images/ylc-header.webp) no-repeat center;
  background-size: cover; padding: 0 2% 0 calc((100% - var(--site-width)) / 2);

  @media (max-width: 1040px) { & { padding: 0 2%; } }

  IMG { margin: 3.9rem 0; }
}

#ylc {
  padding: 2.5em 0; background: var(--blue); color: var(--white); font-weight: 700;
  font-size: 1.5rem; line-height: 1.3;
}

#ylc-join {
  padding: 3.5em 0; background: var(--darkblue); color: var(--white);
  font-size: 1rem; line-height: 1.5;

  H2 {
    margin: 0 auto 1em; font-weight: 800; font-size: 3.75rem; line-height: 1;
    text-transform: uppercase;
  }

  FORM {
    width: 650px; margin: 0 auto;

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

    .required { margin-bottom: 0.5em; font-weight: 700; }

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

/* TICKETS */
#sponsor-link {
  display: block; box-sizing: border-box; margin: 2em auto; padding: 0 2%;
  width: max-content; font-weight: 800; font-size: 2.25rem; line-height: 1;
  text-transform: uppercase; text-decoration: none;
}

/* LEGAL */
.legal {
  padding: 4em 0; font-weight: 700; line-height: 1.8;

  H1 {
    margin: 0 0 0.5em; color: var(--darkblue); font-weight: 800;
    font-size: 3.8125rem; line-height: 1.1; text-transform: uppercase;
  }

  STRONG { color: var(--darkblue); font-weight: 800; }
}

/* BLOG */
#news-header {
  display: flex; justify-content: center; align-items: center; height: 326px;
  background: url(../images/news-header.webp) no-repeat center; position: relative;
  background-size: cover; color: var(--white); font-weight: 800;
  font-size: 1.3125rem; text-transform: uppercase; text-align: center;

  &.single {
    height: 563px; color: var(--blue);

    &:before {
      content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.2);
    }

    .site-width { transform: translateZ(0); }
  }

  H1 {
    margin: 0 0 0.2em; color: var(--white); font-weight: 800; font-size: 5.6875rem;
    line-height: 1;

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

    .single & {
      margin: 0 0 0.5em; font-size: 3.75rem; line-height: 1.2;
      text-decoration: underline; text-shadow: 0 0 0.375rem rgba(0, 0, 0, 0.5);
    }
  }
}

#featured {
  background-color: #EBEBEB; position: relative;

  .text {
    width: 50%; padding: 4em 0; font-weight: 700; font-size: 1.0625rem;
    line-height: 1.8;

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

    .cat {
      margin-bottom: 2.5em; color: #A7A9AC; font-weight: 800; font-size: 0.875rem;
      line-height: 1; text-transform: uppercase;
    }

    .date {
      color: var(--blue); font-weight: 800; font-size: 1.25rem;
      text-transform: uppercase;
    }

    H2 {
      margin: 0.25em 0 0.75em; color: var(--darkblue); font-weight: 800;
      font-size: 2.8125rem; line-height: 1.1; text-transform: uppercase;
      text-decoration: underline;
    }

    A {
      color: #707070; font-weight: 800; text-decoration: none;
      &:hover { color: var(--blue); }
    }
  }

  .image {
    position: absolute; top: 0; right: 0; bottom: 0; left: 54.5%;
    background: url(../images/news-header.webp) no-repeat center;
    background-size: cover;

    @media (max-width: 768px) { & { position: static; height: 350px; } }
  }

  .read {
    display: flex; justify-content: center; align-items: center;
    flex-direction: column; position: absolute; top: 50%; left: 54.75%;
    translate: -54.75% -50%; border-radius: 50%; width: 5.5rem; height: 5.5rem;
    background: var(--blue); color: var(--white); font-weight: 700;
    font-size: 1.25rem; line-height: 1; text-transform: uppercase;
    text-decoration: none;

    @media (max-width: 768px) { & { top: auto; bottom: 306px; left: 50%; translate: -50% 0; } }

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

#news-filter {
  border-bottom: 0.0625rem solid #959595; padding: 2em 0; text-align: center;
  color: var(--darkblue); font-weight: 800; font-size: 0.9375rem;
  text-transform: uppercase;

  A {
    margin-left: 2em; color: var(--darkblue);
    &.current, &:hover { color: var(--blue); }
    @media (max-width: 480px) { & { margin: 0 1em; } }
  }
}

#news-content {
  padding: 5em 0; font-weight: 700; font-size: 1.25rem; line-height: 1.6;

  &.index {
    display: flex; flex-wrap: wrap; gap: 3em 5.75%;

    > DIV {
      width: 29.5%; font-size: 0.9375rem;

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

      .date {
        color: var(--btb-blue); font-weight: 800; font-size: 0.875rem;
        text-transform: uppercase;
      }

      H2 {
        margin: 0.2em 0 0.5em; color: var(--darkblue); font-weight: 800;
        font-size: 1.875rem; line-height: 1.3; text-transform: uppercase;
        text-decoration: underline;
      }

      A {
        color: var(--gray); font-weight: 800; text-decoration: none;
        &:hover { color: var(--blue); }
      }

      .cat {
        margin-top: 1.5em; color: #B1B3B6; font-size: 0.625rem;
        text-transform: uppercase;

        A { color: #B1B3B6; &:hover { color: var(--blue); } }
      }
    }
  }

  STRONG { font-weight: 800; }

  H1, H2, H3, H4 {
    margin: 0; color: var(--blue); font-weight: 800; line-height: 1.6;

    &:is(H1) { font-size: 2.1875rem; }
    &:is(H2) { font-size: 1.875rem; }
    &:is(H3) { font-size: 1.5625rem; }
    &:is(H4) { font-size: 1.25rem; }
  }

  .alignleft {
    float: left; margin: 0 2.5em 1em 0; max-width: 45%; height: auto;
  }

  .alignright {
    float: right; margin: 0 0 1em 2.5em; max-width: 45%; height: auto;
  }

  .alignnone, .aligncenter { display: block; margin: 2.1875rem auto; }
}

.pagination {
  border-top: 0.3125rem solid #B1B3B6; padding: 2em 0; text-align: center;
  font-weight: 800; font-size: 1rem; text-transform: uppercase;

  .nav-links {
    position: relative; width: var(--site-width); margin: 0 auto; 

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

    A {
      color: var(--notsolightgray); text-decoration: none; padding: 0.2em;
      &.current, &:hover { color: var(--darkblue); }

      &.prev, &.next {
        position: absolute; top: 50%; translate: 0 -50%; padding: 0;
        &:is(.prev) { left: 0; }
        &:is(.next) { right: 0; }
      }
    }

    .page-numbers-container :first-child:before { content: "Page: "; color: var(--notsolightgray); }
  }
}

#newsletters {
  padding: 3.75rem 0 6.25rem; position: relative; overflow: hidden;
  background: var(--blue); color: var(--white); font-weight: 700; line-height: 2;
  text-transform: uppercase;

  &:before {
    color: #157EBF; font-size: 16.875vw; opacity: 1; top: -0.09em; z-index: 1;
  }

  .site-width {
    display: flex; justify-content: space-between; align-items: flex-start;
    position: relative; z-index: 2;

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

    .image {
      width: 40%;

      @media (max-width: 500px) { & { width: 100%; margin-bottom: 2rem; } }

      IMG { box-shadow: 0 0 1.1875rem 0 rgba(0,0,0,0.25); }
    }

    .text {
      width: 55.6%; margin-left: auto;

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

      H2 {
        margin: 0 0 0.4em; font-weight: 800; font-size: 3.8125rem; line-height: 1;
        @media (max-width: 800px) { & { font-size: 7.625vw; } }
      }

      H3 {
        margin: 0 0 0.75em; color: var(--darkblue); font-size: 1.125rem;
        line-height: 1;
      }

      H4 {
        margin: 0 0 0.4em; color: var(--darkblue); font-weight: 800;
        font-size: 0.8125rem; line-height: 1;
      }

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

      #toc {
        margin: 0 0 1em 1.7em; padding: 0;

         LI {
          padding-bottom: 1em; line-height: 1.2;
          &::marker { content: attr(data-marker) " "; color: var(--darkblue); }
         }
      }
    }
  }
}

#past-newsletters {
  width: 210px; display: flex; flex-wrap: wrap; gap: 0 40px; font-size: 0.8125rem;
  line-height: 1.6; text-transform: none;

  A {
    color: var(--white); text-decoration: none; outline: 0;
    &:hover { color: var(--darkblue); }
  }
}

#news-footer {
  padding: 2.25em 0; text-align: center; text-transform: uppercase;
  background: url(../images/news-footer.webp) no-repeat center;
  background-size: cover; color: var(--orange); font-weight: 800; font-size: 2.5rem;

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

  H2 {
    margin: 0 0 0.3em; color: var(--btb-red); font-weight: 800;
    font-size: 6.1875rem; line-height: 1;

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

  A {
    display: inline-block; margin-top: 2em; color: var(--white);
    font-size: 1.3125rem; line-height: 1;

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