/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');

.roundedCorners div, .roundedCorners td {
  border-radius: 40px 40px 0 0!important;
  overflow: hidden;

}
.WaGadgetLoginButton .loginContainer.authenticated.loginContainer.authenticated .loginLink::before {
  font: normal 22px/45px 'WA-theme-icons';
}
.WaGadgetLoginButton .loginContainer.authenticated.loginContainer.authenticated .loginLink {
  width: 50px;
  height: 43px;
  background: #b9c972;
  color: #000;

}
/* Default body/site text */
html,
body {
  font-family: "Poppins", sans-serif;
  text-transform: none !important;
}
h1.promo  {
  font-size: 75px!important;
  font-weight: 400!important;
}

h1 {
  font-size: 52px!important;
}
h2 {
font-size: 31px!important;
}
h3 {
  font-size: 30px!important;
}
/* Headings throughout the site */
h1,
h2,
h3,
h4,
h5,
h6,
.WaGadgetBlog .boxHeaderTitle,
.WaGadgetEvents .boxHeaderTitle,
.WaGadgetUpcomingEvents .boxHeaderTitle,
.WaGadgetRecentBlogPosts .boxHeaderTitle,
.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a,
.WaGadgetMenuVertical .menuInner ul.firstLevel > li > .item > a,
.gadgetStyleTitle,
.pageTitle,
.pageHeader,
.captionOuterContainer .captionContainer .fieldBody h1,
.captionOuterContainer .captionContainer .fieldBody h2,
.captionOuterContainer .captionContainer .fieldBody h3 {
  font-family: "Cormorant Garamond", serif !important;
  text-transform: none !important;
}

/* Common Wild Apricot text areas */
.zonePlace,
.zonePlace p,
.zonePlace span,
.zonePlace div,
.WaGadgetContent,
.WaGadgetContent p,
.WaGadgetContent span,
.WaGadgetContent div,
.WaGadgetBlog,
.WaGadgetEvents,
.WaGadgetMemberDirectory,
.WaGadgetLoginButton,
.WaGadgetMenuHorizontal,
.WaGadgetMenuVertical {
  font-family: "Poppins", sans-serif;
  text-transform: none !important;
}

/* Buttons and forms */
button,
input,
textarea,
select,
input[type="submit"],
input[type="button"],
a.stylizedButton,
.stylizedButton,
.functionalButton,
.WaGadgetAuthorizationRequired .loginBoxLinkContainer a {
  font-family: "Poppins", sans-serif !important;
  text-transform: none !important;
}

/* =========================================
   Wild Apricot Navigation Links
   Hamburger + Right-to-Left Flyout
========================================= */

/* Right-align the hamburger inside the existing gadget area */
.WaGadgetNavigationLinks.sos-hamburger-ready .gadgetStyleBody {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

/* Hamburger button */
.sos-menu-toggle {
  width: 54px;
  height: 54px;
  border: 0;
  background: #3265CD;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
  z-index: 999997 !important;
}

.sos-menu-toggle span {
  display: block;
  width: 28px;
  height: 2px;
  background: #ffffff;
  transition: all 0.3s ease;
}

/* Animate hamburger into X */
body.sos-menu-open .sos-menu-toggle span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

body.sos-menu-open .sos-menu-toggle span:nth-child(2) {
  opacity: 0;
}

body.sos-menu-open .sos-menu-toggle span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* Overlay behind flyout */
.sos-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 999998;
}

body.sos-menu-open .sos-menu-overlay {
  opacity: 1;
  visibility: visible;
}

/* Turn the existing WA menu UL into the flyout panel */
.WaGadgetNavigationLinks.sos-hamburger-ready ul.orientationHorizontal {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;

  width: min(390px, 88vw) !important;
  height: 100vh !important;

  margin: 0 !important;
  padding: 86px 32px 40px !important;

  background: #ffffff !important;
  list-style: none !important;
  box-shadow: -12px 0 35px rgba(0, 0, 0, 0.18) !important;
  box-sizing: border-box !important;

  transform: translateX(105%) !important;
  transition: transform 0.35s ease !important;

  z-index: 999999 !important;
  overflow-y: auto !important;
}

body.sos-menu-open .WaGadgetNavigationLinks.sos-hamburger-ready ul.orientationHorizontal {
  transform: translateX(0) !important;
}

/* Close button inside flyout */
.sos-menu-close {
  position: absolute;
  top: 24px;
  right: 28px;
  border: 0;
  background: transparent;
  color: #3265CD;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

/* Reset Wild Apricot's horizontal layout */
.WaGadgetNavigationLinks.sos-hamburger-ready ul.orientationHorizontal,
.WaGadgetNavigationLinks.sos-hamburger-ready ul.orientationHorizontal ul {
  float: none !important;
}

.WaGadgetNavigationLinks.sos-hamburger-ready ul.orientationHorizontal > li {
  display: block !important;
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid rgba(50, 101, 205, 0.16) !important;
  background: #ffffff !important;
}

/* Main menu links */
.WaGadgetNavigationLinks.sos-hamburger-ready ul.orientationHorizontal > li > a {
  display: block !important;
  padding: 15px 0 !important;

  font-family: "Poppins", sans-serif !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;

  color: #3265CD !important;
  background: #ffffff !important;
  text-decoration: none !important;
  text-transform: none !important;
}

.WaGadgetNavigationLinks.sos-hamburger-ready ul.orientationHorizontal > li > a:hover {
  color: #ffffff !important;
  background: #3265CD !important;
  padding-left: 12px !important;
}

/* Submenu */
.WaGadgetNavigationLinks.sos-hamburger-ready ul.orientationHorizontal ul {
  display: block !important;
  position: static !important;
  visibility: visible !important;
  opacity: 1 !important;

  width: 100% !important;
  margin: 0 !important;
  padding: 0 0 14px 18px !important;

  list-style: none !important;
  background: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
}

.WaGadgetNavigationLinks.sos-hamburger-ready ul.orientationHorizontal ul li {
  display: block !important;
  float: none !important;
  width: 100% !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.WaGadgetNavigationLinks.sos-hamburger-ready ul.orientationHorizontal ul li a {
  display: block !important;
  padding: 8px 0 !important;

  font-family: "Poppins", sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;

  color: #3265CD !important;
  background: #ffffff !important;
  text-decoration: none !important;
  text-transform: none !important;
}

.WaGadgetNavigationLinks.sos-hamburger-ready ul.orientationHorizontal ul li a:hover {
  color: #ffffff !important;
  background: #3265CD !important;
  padding-left: 12px !important;
}

/* Prevent page scroll when menu is open */
body.sos-menu-open {
  overflow: hidden !important;
}


/* SEARCH BOX */
.WaGadgetSiteSearch,
.WaGadgetSiteSearch .gadgetStyleBody,
.WaGadgetSiteSearch .searchBoxOuter,
.WaGadgetSiteSearch .searchBox,
.WaGadgetSiteSearch .generalSearchBox {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

.WaGadgetSiteSearch .searchBoxFieldContainer {
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

.WaGadgetSiteSearch .searchBoxField {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

.WaGadgetSiteSearch .searchBoxButton {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.WaGadgetSiteSearch .autoSuggestionBox {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}


/* BUTTON STYLES */
/* =========================================
   Wild Apricot Button Styles
   Society of Sponsors Button Styling
========================================= */

:root {
  --sos-blue: #3265CD;
  --sos-blue-dark: #244fa8;
  --sos-white: #ffffff;
  --sos-green: #b9c972;
  --sos-dark: #333333;
}

/* Shared Wild Apricot button base */
a.stylizedButton,
a.stylizedButton:link,
a.stylizedButton:visited,
.WaGadgetContent a.stylizedButton,
.WaGadgetContent a.stylizedButton:link,
.WaGadgetContent a.stylizedButton:visited,
.functionalButton,
input[type="submit"],
input[type="button"],
button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 43px;
  padding: 8px 15px !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  text-align: center !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  cursor: pointer !important;

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease !important;
}

/* =========================================
   Button Style 001
   Primary solid blue button
========================================= */

a.stylizedButton.buttonStyle001,
a.stylizedButton.buttonStyle001:link,
a.stylizedButton.buttonStyle001:visited,
.WaGadgetContent a.stylizedButton.buttonStyle001,
.functionalButton,
input[type="submit"],
input[type="button"] {
  color: #333 !important;
  background-color: var(--sos-green) !important;
  border: 2px solid var(--sos-green) !important;
  box-shadow: none !important;
}

a.stylizedButton.buttonStyle001:hover,
a.stylizedButton.buttonStyle001:focus,
.WaGadgetContent a.stylizedButton.buttonStyle001:hover,
.functionalButton:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  color: #fff !important;
  background-color: #333 !important;
  border-color: #333 !important;
  transform: translateY(-1px) !important;
}

/* =========================================
   Button Style 002
   Outline blue button
========================================= */

a.stylizedButton.buttonStyle002,
a.stylizedButton.buttonStyle002:link,
a.stylizedButton.buttonStyle002:visited,
.WaGadgetContent a.stylizedButton.buttonStyle002 {
  color: var(--sos-blue) !important;
  background-color: transparent !important;
  border: 2px solid var(--sos-blue) !important;
  box-shadow: none !important;
}

a.stylizedButton.buttonStyle002:hover,
a.stylizedButton.buttonStyle002:focus,
.WaGadgetContent a.stylizedButton.buttonStyle002:hover {
  color: var(--sos-white) !important;
  background-color: var(--sos-blue) !important;
  border-color: var(--sos-blue) !important;
  transform: translateY(-1px) !important;
}

/* =========================================
   Button Style 003
   White button for dark/blue sections
========================================= */

a.stylizedButton.buttonStyle003,
a.stylizedButton.buttonStyle003:link,
a.stylizedButton.buttonStyle003:visited,
.WaGadgetContent a.stylizedButton.buttonStyle003 {
  color: var(--sos-blue) !important;
  background-color: var(--sos-white) !important;
  border: 2px solid var(--sos-white) !important;
  box-shadow: none !important;
}

a.stylizedButton.buttonStyle003:hover,
a.stylizedButton.buttonStyle003:focus,
.WaGadgetContent a.stylizedButton.buttonStyle003:hover {
  color: var(--sos-white) !important;
  background-color: transparent !important;
  border-color: var(--sos-white) !important;
  transform: translateY(-1px) !important;
}

/* =========================================
   Button Style 004
   Text/link style button
========================================= */

a.stylizedButton.buttonStyle004,
a.stylizedButton.buttonStyle004:link,
a.stylizedButton.buttonStyle004:visited,
.WaGadgetContent a.stylizedButton.buttonStyle004 {
  min-height: auto !important;
  padding: 0 !important;

  color: var(--sos-blue) !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;

  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  box-shadow: none !important;
}

a.stylizedButton.buttonStyle004:hover,
a.stylizedButton.buttonStyle004:focus,
.WaGadgetContent a.stylizedButton.buttonStyle004:hover {
  color: var(--sos-blue-dark) !important;
  background-color: transparent !important;
  transform: none !important;
}

/* =========================================
   Button Style 005
   Small secondary blue button
========================================= */

a.stylizedButton.buttonStyle005,
a.stylizedButton.buttonStyle005:link,
a.stylizedButton.buttonStyle005:visited,
.WaGadgetContent a.stylizedButton.buttonStyle005 {
  min-height: 38px !important;
  padding: 9px 18px !important;

  color: var(--sos-white) !important;
  background-color: var(--sos-blue) !important;
  border: 2px solid var(--sos-blue) !important;

  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

a.stylizedButton.buttonStyle005:hover,
a.stylizedButton.buttonStyle005:focus,
.WaGadgetContent a.stylizedButton.buttonStyle005:hover {
  color: var(--sos-white) !important;
  background-color: var(--sos-blue-dark) !important;
  border-color: var(--sos-blue-dark) !important;
  transform: translateY(-1px) !important;
}

/* =========================================
   Disabled states
========================================= */

a.stylizedButton.disabled,
a.stylizedButton[disabled],
.functionalButton[disabled],
input[type="submit"][disabled],
input[type="button"][disabled],
button[disabled] {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  transform: none !important;
}

/* Mobile button adjustment */
@media screen and (max-width: 600px) {
  a.stylizedButton,
  .WaGadgetContent a.stylizedButton {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* LOGIN */
.WaGadgetLoginButton .loginContainer.loginContainer .loginLink {
  background: var(--sos-green);
  color: var(--sos-dark);
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size: 18px;
text-transform: none;
}
.WaGadgetLoginButton .loginContainer.loginContainer .loginLink:hover {
  color: #fff !important;
  background-color: #333 !important;
  border-color: #333 !important;
}

/* =========================================
   Wild Apricot Mobile Panel Menu
   Green Background / White Menu Items
========================================= */

:root {
  --sos-green: #b9c972;
}

/* Mobile panel wrapper */
.mobilePanel {
  background: var(--sos-green) !important;
}

/* Top mobile buttons */
.mobilePanel .mobilePanelButton,
.mobilePanel .buttonMenu,
.mobilePanel .buttonLogin {
  background-color: var(--sos-green) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  text-transform: none !important;
}

/* Menu dropdown area */
.mobilePanel .menuInner {
  background: var(--sos-green) !important;
  border: none !important;
}

/* Main menu list */
.mobilePanel .menuInner ul,
.mobilePanel .menuInner li,
.mobilePanel .menuInner .item {
  background: var(--sos-green) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

/* Main menu links */
.mobilePanel .menuInner a,
.mobilePanel .menuInner a:link,
.mobilePanel .menuInner a:visited,
.mobilePanel .menuInner a span {
  color: #ffffff !important;
  background: transparent !important;
  text-transform: none !important;
  text-decoration: none !important;
}

/* Main menu item spacing */
.mobilePanel .menuInner .firstLevel > li > .item > a {
  display: block !important;
  padding: 14px 18px !important;
  color: #ffffff !important;
  background: var(--sos-green) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
}

/* Hover and selected state */
.mobilePanel .menuInner .firstLevel > li > .item > a:hover,
.mobilePanel .menuInner .firstLevel > li.sel > .item > a {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.16) !important;
}

/* Second-level submenu */
.mobilePanel .menuInner .secondLevel {
  background: rgba(255, 255, 255, 0.08) !important;
  padding: 0 !important;
}

/* Second-level links */
.mobilePanel .menuInner .secondLevel li .item a {
  display: block !important;
  padding: 11px 18px 11px 34px !important;
  color: #ffffff !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
}

/* Second-level hover */
.mobilePanel .menuInner .secondLevel li .item a:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.16) !important;
}

/* Direction arrows / menu indicators if present */
.mobilePanel .menuInner .dir > .item > a::after,
.mobilePanel .menuInner .dir > .item::after {
  color: #ffffff !important;
  border-color: #ffffff !important;
}


/* Hide anything with .non-mobile on mobile */
@media screen and (max-width: 768px) {
  .non-mobile {
    display: none !important;
  }
}

/* ================================
   Wild Apricot Timeline
   Parent layout gadget ID: timeline
   Each content gadget class: timeline-item
================================ */

#timeline {
  --timeline-navy: #12345c;
  --timeline-blue: #2f6f9f;
  --timeline-light: #f6f8fb;
  --timeline-border: #d8e0e8;
  --timeline-text: #263238;
  --timeline-muted: #64748b;
  --timeline-progress: 0px;

  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 50px 20px;
  box-sizing: border-box;
}

/* Gray center timeline bar */
#timeline::before {
  content: "";
  position: absolute;
  top: 40px;
  bottom: 40px;
  left: 50%;
  width: 2px;
  background: var(--timeline-border);
  transform: translateX(-50%);
  z-index: 0;
}

/* Blue animated progress bar */
#timeline::after {
  content: "";
  position: absolute;
  top: 40px;
  left: 50%;
  width: 3px;
  height: var(--timeline-progress, 0px);
  background: var(--timeline-blue);
  transform: translateX(-50%);
  z-index: 1;
  transition: height 0.08s linear;
}

/* Each timeline item/card */
#timeline .timeline-item {
  position: relative;
  width: calc(50% - 46px);
  margin: 0 0 42px;
  padding: 26px 28px;
  background: #ffffff;
  border: 1px solid var(--timeline-border);
  box-shadow: 0 16px 35px rgba(18, 52, 92, 0.08);
  box-sizing: border-box;
  z-index: 2;
}

/* Auto-added by JS */
#timeline .timeline-item.timeline-left {
  margin-right: auto;
}

#timeline .timeline-item.timeline-right {
  margin-left: auto;
}

/* Connector line from card to center timeline */
#timeline .timeline-item::before {
  content: "";
  position: absolute;
  top: 35px;
  width: 46px;
  height: 2px;
  background: var(--timeline-border);
  z-index: 1;
}

#timeline .timeline-item.timeline-left::before {
  right: -46px;
}

#timeline .timeline-item.timeline-right::before {
  left: -46px;
}

/* Hide older pseudo-dot if it exists from previous versions */
#timeline .timeline-item::after {
  display: none;
}

/* Plain circle marker added by JS */
#timeline .timeline-marker {
  position: absolute;
  top: 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #c9d3dd;
  box-shadow: 0 0 0 6px #ffffff;
  z-index: 5;
  box-sizing: border-box;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

/* Optional inner dot */
#timeline .timeline-marker::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #c9d3dd;
  transition: background 0.2s ease;
}

/* Marker positioning for left cards */
#timeline .timeline-item.timeline-left .timeline-marker {
  right: -58px;
}

/* Marker positioning for right cards */
#timeline .timeline-item.timeline-right .timeline-marker {
  left: -58px;
}

/* Active marker state */
#timeline .timeline-item.timeline-active .timeline-marker {
  border-color: var(--timeline-blue);
  transform: scale(1.04);
}

#timeline .timeline-item.timeline-active .timeline-marker::before {
  background: var(--timeline-blue);
}

/* Content styling */
#timeline .timeline-item h1,
#timeline .timeline-item h2,
#timeline .timeline-item h3,
#timeline .timeline-item h4 {
  margin: 0 0 12px;
  color: var(--timeline-navy);
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.15;
  font-weight: 600;
}

#timeline .timeline-item p {
  margin: 0 0 14px;
  color: var(--timeline-text);
  font-size: 16px;
  line-height: 1.7;
}

#timeline .timeline-item p:last-child {
  margin-bottom: 0;
}

/* Optional label inside item */
#timeline .timeline-label {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--timeline-blue);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Optional highlighted note */
#timeline .timeline-note {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--timeline-light);
  border-left: 4px solid var(--timeline-blue);
  color: var(--timeline-muted);
  font-size: 15px;
  line-height: 1.6;
}

/* Remove excess spacing from last item */
#timeline .timeline-item:last-child {
  margin-bottom: 0;
}

/* ================================
   Mobile Timeline
================================ */

@media screen and (max-width: 768px) {
  #timeline {
    padding: 35px 16px;
  }

  /* Move timeline bar to the left */
  #timeline::before {
    left: 22px;
    transform: none;
  }

  #timeline::after {
    left: 22px;
    transform: none;
  }

  /* Stack all cards on one side */
  #timeline .timeline-item,
  #timeline .timeline-item.timeline-left,
  #timeline .timeline-item.timeline-right {
    width: auto;
    margin-left: 46px;
    margin-right: 0;
    padding: 22px;
  }

  /* Mobile connector line */
  #timeline .timeline-item::before,
  #timeline .timeline-item.timeline-left::before,
  #timeline .timeline-item.timeline-right::before {
    left: -24px;
    right: auto;
    width: 24px;
  }

  /* Mobile marker position */
  #timeline .timeline-item.timeline-left .timeline-marker,
  #timeline .timeline-item.timeline-right .timeline-marker,
  #timeline .timeline-item .timeline-marker {
    left: -36px;
    right: auto;
  }

  #timeline .timeline-item h1,
  #timeline .timeline-item h2,
  #timeline .timeline-item h3,
  #timeline .timeline-item h4 {
    font-size: 24px;
  }

  #timeline .timeline-item p {
    font-size: 15px;
  }
}