/**
 * Theme Name: FOTFP - 2024 child
 * Template:   twentytwentyfour
 * ...other header fields
 */
/* Variables */ 
:root {
   --color-white: #fff;
   --color-black: #040404;
   --color-red: #CF5004;
   --color-red-nav: rgba(207, 80, 4, .96);
   --color-white-nav: rgba(255, 255, 255, .90);
   --color-black-nav: rgba(0, 0, 0, .6);
   --color-form-border: #707070;
}
html {
   scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}
/* Typography */
body,
:root :where(body)  {
   font-family: muli, sans-serif;
   font-weight: 600;
   font-style: normal;
   background-color: var(--color-white);
   
}
h1, h2, h3, h4, h5, h6 {
   font-family: "new-spirit", serif;
   font-weight: 700;
   font-style: normal;
}
h1,h2 {
   text-shadow: 0 0 0.4em rgba(0,0,0,0.5);
}
h2 {
   font-weight: 500;
}
h5 {
   font-family: muli, sans-serif;
   font-weight: 800;
}
h1.wp-block-heading, h2.wp-block-heading, h3.wp-block-heading {
   text-transform: none;
}
.opensans {
   font-family: "open-sans", sans-serif;
   font-style: normal;
}
.font-semibold {
   font-weight: 600;
}
.font-extrabold {
   font-weight: 800;
}
.muli {
   font-family: muli, sans-serif;
}

/*NAVIGATION / header */
header.wp-block-template-part {
   position: absolute;
   z-index: 2;
   width: 100%;
   background: transparent;
   top: 8%; /* must match site.js rootMargin for sticky header */
}
header.wp-block-template-part .has-global-padding.is-layout-constrained {
   padding-right: unset;
   padding-left: unset;
}
header.wp-block-template-part .has-global-padding.is-layout-constrained > .alignwide {
   margin-block-start: 0;
   margin-block-end: 0;
   max-width: none;
   gap: unset;
}
.wp-container-core-group-layout-2.wp-container-core-group-layout-2 {
   gap: unset;
}
header .has-base-background-color {
   background-color: unset !important;
}
header .wp-block-site-logo {
   padding: 1rem;
   height: 9rem;
}
.wp-block-site-logo a {
   background-color: rgba(0,0,0,0.3);
   backdrop-filter: blur(2px);
   border-radius: 2px;
}
.wp-block-site-logo img {
   border-radius: unset;
   height: 7rem;
   width: auto;
}
header nav .wp-block-navigation__container {
   column-gap: unset;
}
header nav .wp-block-navigation__container > .wp-block-navigation-item {
   padding: 0 1rem 0 1.25rem;
   transition: background-color .25s ease;
   color: var(--color-white);

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

.wp-block-navigation-item.nav-home {
   border-radius: 2.5rem 0 0 2.5rem;
   padding-left: 2rem !important;
}
.wp-block-navigation .wp-block-navigation-item.nav-donate {
   background-color: var(--color-red-nav);
   color: var(--color-white);
}
.nav-donate > a {
   color: var(--color-white);
   text-transform: uppercase;
}
a.wp-block-navigation-item__content {
   font-size: 1rem;
   font-weight: 700;
   padding: 1rem;
}
.wp-block-navigation .wp-block-navigation__submenu-icon {
   min-width: 22px;
   min-height: 22px;
   background-color: transparent;
   margin-left: 0;
}
.wp-block-navigation__submenu-container a.wp-block-navigation-item__content {
   font-size: 0.9rem;
   font-weight: 300;
}


 /* disable default focus outline and add to focus-visible */
a:where(:not(.wp-element-button)):focus {
   outline-width: 0;
}
a:where(:not(.wp-element-button)):focus-visible {
   outline-width: 2px;
}


/* Modify default mobile nav breakpoint */
body .wp-block-navigation__responsive-container-open:not(.always-shown) {
   display: block !important;
}
body .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
   display: none !important;
}
@media (min-width: 769px) {

   .donate-mobile {
      display: none !important;
   }

   /* Change nav dropdown subnav to open below, not to the side */
   .wp-block-navigation .wp-block-navigation-item  {
      flex-wrap: wrap;
   }
   .wp-block-navigation .has-child > .wp-block-navigation__submenu-container > .has-child .wp-block-navigation__submenu-container {
      position: relative;
      left: auto !important;
      width: auto !important;
      height: auto !important;
      visibility: visible !important;
      opacity: 1 !important;

      li {
         padding-left: 1.5rem;
      }
   }
   .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
      display: none !important;
   }
   .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
      border: none !important;
   }
   /* WP 2024 submenus open right instead of left */
   .wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container, .wp-block-navigation.items-justified-right .wp-block-page-list > .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container, .wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container, .wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
      /* left: 100% !important; */
      left: auto !important;
      right: auto !important;
   }
   .wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container, .wp-block-navigation.items-justified-right .wp-block-page-list > .has-child .wp-block-navigation__submenu-container, .wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child .wp-block-navigation__submenu-container, .wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child .wp-block-navigation__submenu-container {
      left: 0;
      right: auto;
      /* min-width: 100%; */
      min-width: 275px;
   }
   .wp-block-navigation .wp-block-navigation-item.nav-last-dropdown > ul.wp-block-navigation__submenu-container {
      left: auto !important;
      right: 0 !important;
   }

   a.wp-block-navigation-item__content {
      padding: 1rem 0.25rem;
   }
   .wp-block-navigation .has-child .wp-block-navigation__submenu-container  a.wp-block-navigation-item__content {
      padding: 0.5rem;
      outline-offset: -2px;
   }


   body .wp-block-navigation__responsive-container-open:not(.always-shown) {
      display: none !important;
   }
   body .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
      display: block !important;
   }
   /* Sticky header variations*/
   body.sticky header.wp-block-template-part {
      position: fixed;
      top: 0;
   }
   body header nav.wp-block-navigation {
      border-radius: 2.5rem 0 0 2.5rem;
      transition: box-shadow .25s ease;
   }
   body.sticky header nav.wp-block-navigation {
      box-shadow: 0 0 10px rgba(0,0,0,0.5);
   }
   body.sticky header nav .wp-block-navigation__container > .wp-block-navigation-item {
      background-color: var(--color-black-nav);

      &:hover, &:focus {
         background-color: var(--color-black);
      }
   }
   body.sticky header nav .wp-block-navigation .wp-block-navigation-item.nav-donate {
      background-color: var(--color-red);

      &:hover, &:focus {
         background-color: var(--color-black);
      }
   }
}
/* Breakpoints: 576px, 768px, 992px,1200px, 1400px  */
@media screen and (max-width: 1400px) {
   header .wp-block-site-logo {
      padding: 1rem;
   }
   .wp-block-navigation-item.nav-home {
      padding-left: 1rem !important;
   }
   header nav .wp-block-navigation__container > .wp-block-navigation-item {
      padding: 0 0.25rem 0 0.75rem;
   }
   .wp-block-navigation .wp-block-navigation-item.nav-donate {
      padding-right: 0.75rem;
   }
}
@media screen and (max-width: 1179px) {
   header .wp-block-site-logo {
      padding: 0.5rem;
      height: 6rem;
   }
   .wp-block-site-logo img {
      border-radius: unset;
      height: 5rem;
      width: auto;
   }
   a.wp-block-navigation-item__content {
      font-size: .9rem;
   }
   header nav .wp-block-navigation__container > .wp-block-navigation-item {
      padding: 0 0.1rem 0 0.25rem;
   }
   .wp-block-navigation .wp-block-navigation-item.nav-donate {
      padding-right: 0.25rem;
   }
}

@media screen and (max-width: 992px) {
   a.wp-block-navigation-item__content {
      font-size: .8rem;
   }
   header nav .wp-block-navigation__container > .wp-block-navigation-item {
      padding: 0 0.1rem;
   }
   .wp-block-navigation .wp-block-navigation-item.nav-donate {
      padding-right: 0.1rem;
   }
}
/* Mobile nav */
@media screen and (max-width: 768px) {
   .wp-block-navigation__responsive-container-open {
      color: var(--color-red);
      margin-right: 1rem !important;
   }
   .wp-block-navigation__responsive-container-open::after {
      content: "";
      display: block;
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      z-index: -1;
      background-color: var(--color-white);
      height: 6rem;
      width: 5rem;
      border-radius: 3rem 0 0 3rem;
   }
   header nav >  .wp-block-navigation__responsive-container  {
      background-color: #49702d !important;
   }
   header nav .wp-block-navigation__container {
      width: 100%;
   }
   .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content,
   .wp-block-navigation__responsive-container-close {
      color: var(--color-white);
   }
   header nav .wp-block-navigation__container > .wp-block-navigation-item {
      min-height: 1rem;
      padding: 5px 0 0;
      border-top: solid 1px var(--color-white-nav);
      width: 100%;
      align-items: center !important;
      border-radius: 0;
   }
   .wp-block-navigation__submenu-container.wp-block-navigation-submenu {
      align-items: center !important;
      padding-top: 0 !important;
      gap: .25rem !important;
   }
   a.wp-block-navigation-item__content {
      font-size: 1.1rem;
      width: 100%;
      text-align: center;
      display: block !important;
   }
   .wp-block-navigation-item.nav-home {
      padding-left: 0 !important;
   }

   .donate-mobile {
      margin-left: auto !important;
      margin-right: 3em !important;
   }
   
   .nav-donate a {
      width: auto;
      margin-top: 0.5rem;
      padding: 0.5rem 2rem !important;
      background-color: var(--color-red);
      border-radius: 3rem;
      color: var(--color-white);
      text-transform: uppercase;
      font-size: 1.4rem;
      font-family: "open-sans", sans-serif;
      font-weight: 800;
      font-style: normal;
      letter-spacing: 0.1rem;
      border: solid #fff 1px;
      transition: background-color .25s ease, border-color .25s ease;

      &:hover, &:focus {
         background-color: var(--color-black);
         border-color: var(--color-red);
      }
   }

}
@media screen and (max-width: 576px) {
   header.wp-block-template-part {
      position: absolute;
   }
}
@media screen and (max-width: 400px) {
   .wp-block-navigation__responsive-container-open::after {
      height: 2.5rem;
      width: 2.5rem;
   }
   .donate-mobile {
      margin-right: 1.5em !important;
   }
   .donate-mobile.cta a {
      padding: 0.5rem 1rem !important;
   }
   .wp-block-navigation__responsive-container-open {
      margin-right: 0.25rem !important;
   }
}


/* Home down ARROW nav  */
.button-arrow-down a {
   position: relative;
   height: 3em;
   width: 9rem;
   display: inline-block;
   background-color: transparent;
}
.button-arrow-down a::before, .button-arrow-down a::after {
   content: "";
   position: absolute;
   background-color: var(--color-white);
   border-radius: 0.3rem;
   display: block;
}
.button-arrow-down a:hover::before, .button-arrow-down a:hover::after {
   background-color: var(--color-red);
}
.button-arrow-down a:hover {
   background-color: transparent;
}
.button-arrow-down a::before {
   left: 55%;
}
.button-arrow-down a::after {
   right: 55%;
}
.button-arrow-down a::before, .button-arrow-down a::after {
   top: -5%;
   height: 110%;
   width: 8%;
}
.button-arrow-down a::before, .button-arrow-down a::after {
   transform: rotate(45deg);
}
.button-arrow-down a::after {
   transform: rotate(-45deg);
}
/* Misc Utility classes for Part and content tweaks*/
/* 2 col text overlay with blur / image class hooks */
.cover-text-left::after, .cover-text-right::after {
   content: "";
   display: block;
   position: absolute;
   top: 0;
   bottom: 0;
   backdrop-filter: blur(3px);
}
.col-blur {
   backdrop-filter: blur(3px);
}
.col-3-callouts {
   gap: 4rem;
}

.col-inner-borders > div {
   position: relative;
}
.col-inner-borders > div:not(:last-child)::after {
   content: '';
   display: block;
   position: absolute;
   top: 0;
   right: -1em;
   height: 100%;
   width: 1px;
   background-color: var(--color-white);
}

.photo-portrait-to-landscape {
   overflow: hidden;
   position: relative;
}
.justify-center {
   justify-content: center;
}
.constrain-m-auto {
   max-width: 1080px;
   margin-left: auto !important;
   margin-right: auto !important;      
}
.callout-left-border {
   border-radius: 0 3rem 3rem 0;
}
.callout-group {
   margin-left: -40px;
   padding-left: 40px;
}
.relative {
   position: relative;
}
.z-1 {
   z-index: 1;
}
.trans-50y {
   transform: translateY(50%);
}
.trans-neg50y {
   transform: translateY(-50%);
}
.mt-0 {
   margin-top: 0;
}
.mt-neg-3 {
   margin-top: -3rem;
}
.mv-0,
main > .wp-block-post-content > .wp-block-cover {
   margin-block-start: 0;
   margin-block-end: 0;   
}
.gap-0 {
   gap: 0;
}
.texttrans-none {
   text-transform: none;   
}
.overflow-hidden {
   overflow: hidden;
}

.wp-block-columns.is-not-stacked-on-mobile.columns-wrap,
.columns-wrap {
   flex-wrap: wrap !important;
}
.flex-33 > div {
   flex: 0 1 calc(33.33% - 0.8rem) !important;
}
.link-video-thumb {
   display: block;
   position: relative;
}
.link-video-thumb::before {
   content: "";
   width: 56px;
   height: 54px;
   background-color: var(--color-red);
   position: absolute;
   right: 0;
   bottom: 20px;
   z-index: 0;
   border-radius: 27px 0 0 27px;
}
.link-video-thumb::after {
   content: "";
   width: 0; 
   height: 0; 
   border-top: 12px solid transparent;
   border-bottom: 12px solid transparent;
   border-left: 20px solid var(--color-white);
   position: absolute;
   right: 10px;
   bottom: 35px;
   z-index: 1;
}
.link-video-thumb:focus::before,
.link-video-thumb:hover::before {
   background-color: var(--color-black);
}
@media screen and (min-width: 782px) {
   .cover-text-left::after {
      left: 0;
      right: 50%;
   }
   .cover-text-right::after {
      left: 50%;
      right: 0;
   }
   .cover-text-left .wp-block-cover__background, .cover-text-right .wp-block-cover__background {
      width: 50%;
   }
   .cover-text-right .wp-block-cover__background {
      left: 50%;
      right: 0;
   }
   .cover-text-left .wp-block-columns, .cover-text-right .wp-block-columns {
      gap: 20%;
   }
   .col-extra-height {
      margin-top: -3rem !important;
      margin-bottom: -3rem !important;
   }
   .photo-portrait-to-landscape {
      height: 100%;
   }
   .photo-portrait-to-landscape img {
      max-width: none;
      position: absolute;
      height: 100%;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
   }
   .photo-portrait-to-landscape-2 img {
      left: 50%;
      transform: translateX(-50%);
   }
   .photo-portrait-to-landscape-3 img {
      left: 50%;
      transform: translateX(-47%);
   }
   .photo-portrait-to-landscape-4 img {
      left: 50%;
      transform: translateX(-65%);
   }
   .photo-portrait-to-landscape-5 img {
      left: 50%;
      transform: translateX(-68%);
   }
   .photo-portrait-to-landscape-6 img {
      left: 50%;
      transform: translateX(-50%);
      object-fit: contain !important;
   }
   .callout-over-30 {
      position: absolute;
      top: 1rem;
      left: 1rem;
      right: 1rem;
   }
}
@media screen and (max-width: 781px) {
   .cover-text-left::after, .cover-text-right::after {
      left: 0;
      right: 0;
      backdrop-filter: blur(2px);
   }
   .cover-text-left .wp-block-columns {
      padding-right: 30%;
   }
   .cover-text-right .wp-block-columns {
      padding-left: 30%;
   }
   .col-3-callouts {
      gap: 2.5rem;
   }
   .photo-row-x4 {
      overflow: hidden;
   }
   .photo-row-x4 img {
      width: 200% !important;
      max-width: none;
   }
   .photo-portrait-to-landscape {
      overflow: hidden;
      height: 50vw;
      position: relative;
   }
   .photo-portrait-to-landscape img {
      max-width: none;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
   }
   .photo-portrait-to-landscape-2 img,
   .photo-portrait-to-landscape-4 img,
   .photo-portrait-to-landscape-5 img {
      top: 0;
   }
   .photo-portrait-to-landscape-6 img {
      bottom: -50%;
   }
   .row-reverse-mobile > .wp-block-column:first-child {      
      order: 1;
   }
   .flex-33 > div {
      flex: 0 1 calc(50% - 0.6rem) !important;
   }
}
@media screen and (max-width: 500px) {
   .flex-33 > div {
      flex: 0 1 100% !important;
   }
}
/*CTA button treatment*/
.cta a {
   padding: 1.2rem 4rem !important;
   background-color: var(--color-red);
   border-radius: 3rem;
   color: var(--color-white);
   text-transform: uppercase;
   font-size: 1.4rem;
   font-family: "open-sans", sans-serif;
   font-weight: 800;
   font-style: normal;
   letter-spacing: 0.1rem;
   border: solid transparent 1px;
   transition: background-color .25s ease, border-color .25s ease;

   &:hover, &:focus {
      background-color: var(--color-black);
      border-color: var(--color-red);
   }
}
.cta-full, .cta-full a {
   width: 100%;
}
.cta-white a {
   background-color: var(--color-white);
   color: var(--color-red);

   &:hover, &:focus {
      color: var(--color-white);
   }
}

.seemore a {
   font-family: "new-spirit", serif;
   font-weight: 700;
   font-style: normal;
   font-size: 48px;
   position: relative;
   display: inline-block;
   border-radius: 3rem;
   padding-right: 40px;
}
.seemore a:hover {
   text-decoration: underline;
}
.seemore a::before, .seemore a::after {
   content: "";
   position: absolute;
   background-color: var(--color-red);
   border-radius: 0.3rem;
   display: block;
   top: 32px;
   height: 25px;
   width: 5px;
   right: 10px;
}
.seemore a::before {
   transform: translateY(-8%) rotate(-45deg);
}
.seemore a::after {
   transform: translateY(50%) rotate(45deg);
}


@media screen and (max-width: 1179px) {
   .cta a {
      padding: 1rem 2rem !important;
      font-size: 1.1rem;
   }
}
@media screen and (max-width: 781px) {
   .cta a {
      padding: 0.9rem 2rem !important;
      font-size: 0.9rem;
   }
   .buttons-center-mobile {
      display: flex;
      justify-content: center;
   }
   .center-text-mobile {
      text-align: center;
   }
}

/* Footer */
.site-footer {
   background: url(/wp-content/uploads/2024/03/footer-background.jpg) center/cover no-repeat;
   padding-top: 6rem;
   margin-top: 0;
}
.site-footer h4 {
   color: var(--color-white);
   font-size: clamp(27.894px, 1.743rem + ((1vw - 3.2px) * 2.094), 48px);
}
.form-section {
   background-color: rgba(51,99,78,.7);
   backdrop-filter: blur(4px);
   max-width: 1280px;
   margin: 0 auto 6rem;
   padding: 2rem 3rem 3rem;
   color: var(--color-white);
   text-align: center;
}
.footer-info {
   padding: 6rem 1rem 2rem;
   text-align: center;
   background-color: rgba(255,255,255,0.8);
   font-size: 1rem;
}
.footer-logo {
   margin-bottom: 2rem;
   max-width: 250px;
}
.footer-social {
   list-style: none;
   display: flex;
   margin: 0 auto 1rem;
   padding: 0;
   justify-content: center;
   align-items: center;
   gap: 1.5rem;
}
@media screen and (max-width: 781px) {
   .site-footer {
      padding-top: 2rem;
   }
   .form-section {
      padding: 1rem;
      margin-bottom: 2rem;
   }
   .footer-info {
      padding: 2rem 1rem 1rem;
      font-size: 0.9rem;
   }
   
}

/* NEWS */
.news-list {
   list-style: none;
   padding: 0;
   margin: 0;
}
.news-item {
   margin: 0 0 0.75rem;
   background-color: rgba(0,0,0,.2);
   display: flex;
   flex-direction: column;
   border-radius: 1rem;
}
.news-item-title-link {
   text-decoration: none;
   display: flex;
   flex-direction: column;
   padding: 0.5rem 1rem 0;
   border: solid 1px transparent;
   transition: border-color .25s ease;
   border-radius: 1rem;

   &:hover, &:focus {
      border-color: #fff;
   }
}
.news-item-title {
   font-size: 1.5rem;
   margin-bottom: 0.5rem;
}
.news-item-sourcedate {
   font-weight: bold;
   font-size: 0.9rem;
   margin-bottom: 0.5rem;
   font-style: italic;
}
.news-item-excerpt {
   margin-bottom: 0.5rem;
}
.news-item-extlink {
   font-style: italic;
   align-self: flex-end;
   border: solid 1px transparent;
   transition: border-color .25s ease;
   border-radius: 2rem;
   margin: 0 1rem 0.5rem;
   padding: 0.1rem 1rem;

   &:hover, &:focus {
      border-color: #fff;
   }
}
.news-template-returnlink a {
   border: solid 1px #fff;
   border-radius: 2rem;
   display: inline-block;
   padding: 0.25rem 1rem;

   &:hover, &:focus {
      background-color: #000;
   }
}
.news-template-viewlink a {
   text-decoration: none;
   display: inline-block;
}
.news-template-content {
   font-size: 1.4rem;
}

/* STAFF list*/
.staff-list {
   list-style: none;
   padding: 0;
   margin: 4rem 2rem;
   display: flex;
   flex-flow: row wrap;
   gap: 2%;
   justify-content: flex-start;
}
.staff-item {
   text-align: center;
   flex: 0 0 23.5%;
}
.staff-btn {
   background: none;
   border: none;
   width: 100%;
   height: 100%;
   cursor: pointer;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 1rem;
   position: relative;
}
.staff-btn::after {
   content: "";
   display: block;
   position: absolute;
   top: 50%;
   left: 0;
   right: 0;
   top: 0;
   padding-top: 100%;
   background: url(/wp-content/uploads/2024/04/staff-photo-border.png) no-repeat bottom center;
   background-size: 100% auto;
}
.staff-btn:hover::after, .staff-btn:focus::after {
   background-image: url(/wp-content/uploads/2024/11/circle_orange.png);
}
.staff-photo-container {
   background-color: #ccc;
   padding-top: 100%;
   display: block;
   width: 100%;
   border-radius: 50%;
   display: block;
   overflow: hidden;
   position: relative;
   z-index: 1;
}
.staff-photo {
   width: 100%;
   height: auto;
   max-width: none;
   display: block;
   position: absolute;
   top: 50%;
   left: 0;
   transform: translateY(-50%);
}
.staff-name {
   font-size: 1.8rem;
   font-size: clamp(22px, calc(1.375rem + ((1vw - 7.68px) * 0.6944)), 30px);
   min-height: 0vw;
   font-family: muli, sans-serif;
   margin: 1.5rem 0 0;
}
.staff-title {
   font-size: 0.9rem;
   font-family: muli, sans-serif;
   margin: 0.5rem 0 0;
   color: var(--color-red);
}
#staff-modal {
   position: fixed;
   top: 50%;
   transform: translate(-50%, -50%);
   left: 50%;
   z-index: 1000;
   background: #fff;
   padding: 3rem;
   width: 100%;
   box-sizing: border-box;
   max-width: 680px;
   box-shadow: 0 0 30px rgba(0,0,0,0.25);
   color: var(--color-black);
   font-family: muli, sans-serif;
   margin-block-start: 0 !important;
}
#staff-modal-close {
   width: 52px;
   height: 50px;
   background: var(--color-red);
   position: absolute;
   top: 0;
   left: 0;
   cursor: pointer;
   border: none;
   border-radius: 0 25px 25px 0;

   &::before,
   &::after {
      position: absolute;
      content: '';
      width: 25px;
      height: 3px;
      left: 13px;
      background-color: var(--color-white);
   }
   &::before {
      transform: rotate(45deg);
   }
   &::after {
      transform: rotate(-45deg);
   }
}
#staff-modal .staff-photo-container {
   float: right;
   margin-top: -18%;
   width: 30%;
   padding-top: 30%;
}
#staff-modal-name {
   font-family: muli, sans-serif;
   color: var(--color-red);
   margin: 1rem 0 0.5rem;
}
#staff-modal-pronouns {
   margin: 0;
}
#staff-modal-title {
   font-family: muli, sans-serif;
   margin: 0.5rem 0;
}
#staff-modal-email {
   display: block;
   width: 44px;
   height: 44px;
   background: transparent url(/wp-content/uploads/2024/04/email-icon.png) no-repeat center center;
}
.modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   backdrop-filter: blur(3px);
   background-color: rgba(255,255,255,0.7);
   z-index: 999;
   margin: 0;
   max-width: none !important;
}
@media screen and (max-width: 992px) {
   .staff-item {
     flex: 0 0 32%;
   }
}
@media screen and (max-width: 768px) {
   .staff-item {
     flex: 0 0 49%;
   }
   #staff-modal {
      transform: none;
      left: 0;
      top: 0;
      width: 100%;
      padding: 1rem;
      max-width: none;
      max-height: 100vh;
      overflow: auto;
   }
   #staff-modal .staff-photo-container {
      margin-top: 0; 
      margin-right: -2rem;
      width: 150px;
      padding-top: 150px;
   }
}
@media screen and (max-width: 499px) {
   .staff-list {
      justify-content: center;
   }
   .staff-item {
     flex: 0 0 100%;
      max-width: 325px;
   }
   #staff-modal .staff-photo-container {
      margin: 0 auto;
      float: none;
   }
}

 /* EVENTS CALENDAR styles */
.tribe-common-c-btn {
   border-radius: 3rem !important;
   padding: 1rem 2rem !important;
   font-size: 1.2rem !important;
   font-family: "open-sans", sans-serif !important;
   font-weight: 800 !important;
   font-style: normal;
   letter-spacing: 0.1rem;
   line-height: 1 !important;
   text-transform: uppercase;
}
.tribe-events-header__events-bar {
   border: none !important;
}
#tribe-events-events-bar-keyword {
   border: solid 1px var(--color-form-border);
   padding-top: 0.8rem;
   padding-bottom: 0.8rem;
}
.tribe-common--breakpoint-medium.tribe-events .tribe-events-c-search__input-control:last-child {
   margin-right: 1rem;
}
.tribe-events-calendar-list__event {
   border: solid 1px var(--color-form-border) !important;
   padding-top: 1rem !important;
   padding-bottom: 1rem !important;
}
.tribe-common--breakpoint-medium.tribe-events .tribe-events-l-container,
.tribe-common--breakpoint-xsmall.tribe-events .tribe-events-l-container {
   padding-top: 0 !important;
   padding-bottom: 0 !important;
}
.tribe-events-calendar-list__month-separator-text {
   font-family: muli, sans-serif !important;
}
.tribe-events-calendar-list__event-title-link {
   color: var(--color-red) !important;
}
.maxwidth-match-tribe {
   max-width: 1260px;
   margin-left: auto;
   margin-right: auto;
   padding-left: 42px;
   padding-right: 42px;
}
.event-featured-image img {
   max-height: 350px;
   max-width: 50%;
   float: right;
   margin-left: 25px;
   margin-bottom: 15px;
   object-fit: scale-down;
}
h1.tribe-events-single-event-title {
   margin-top: 40px !important;
   font-size: 2.25rem !important;
}
h2.tribe-events-schedule__datetime {
   text-shadow: none;
   font-weight: bold;
}
.tribe-block__event-website {
   margin-top: 15px;
}
 /* match tribe template breakpoints  */
@media screen and (max-width: 782px) {
   .maxwidth-match-tribe {
      padding-left: 19.5px;
      padding-right: 19.5px;
   }
   .tribe-events-calendar-list__event {
      margin-left: auto !important;
      margin-right: auto !important;
   }
   .event-featured-image img {
      max-width: 100%;
      float: none;
      margin: 0 auto;
      object-fit: scale-down;
   }   
}

/* Gutena accordion plugin */
.gutena-accordion-block>.gutena-accordion-block__panel>.gutena-accordion-block__panel-title>.gutena-accordion-block__panel-title-inner>.trigger-up-down {
   transform: scale(1.75) translate(-25%,-50%);
}
.gutena-accordion-block>.gutena-accordion-block__panel>.gutena-accordion-block__panel-title>.gutena-accordion-block__panel-title-inner>.trigger-up-down > div {
   background-color: var(--color-red) !important;
}
.gutena-accordion-block>.gutena-accordion-block__panel>.gutena-accordion-block__panel-title>.gutena-accordion-block__panel-title-inner h3,
.gutena-accordion-block>.gutena-accordion-block__panel>.gutena-accordion-block__panel-title>.gutena-accordion-block__panel-title-inner h2,
.gutena-accordion-block>.gutena-accordion-block__panel>.gutena-accordion-block__panel-title>.gutena-accordion-block__panel-title-inner h4,
.gutena-accordion-block>.gutena-accordion-block__panel>.gutena-accordion-block__panel-title>.gutena-accordion-block__panel-title-inner h5,
.gutena-accordion-block>.gutena-accordion-block__panel>.gutena-accordion-block__panel-title>.gutena-accordion-block__panel-title-inner h6 {
   font-family: "new-spirit", serif;
   font-weight: 700;
   font-style: normal;
   font-size: 22px;
}
.gutena-accordion-block__panel-title {
   &:hover, &:focus {
      text-decoration: underline;
   }
}

/* FOOTER FORM */
#email-registration-form {
   label, .required-star {
      color: var(--color-white);
   }
   .field.text, .field.email {
      display: inline-block;
      margin: 5px;
   }
   label {
      text-align: left;
   }
   .field input {
      width: auto;
   }
   h3, .consent {
      display: none;
   }
   .field input, select {
      padding: .75rem .25rem;
   }
   .section.contact, .section.custom-fields {
      display: inline-block;
   }
   .section.captcha {
      display: inline-block;
      vertical-align: middle;
   }
   .btn-submit {
      margin-top: 1rem;
      padding: 1.2rem 3rem !important;
      background-color: var(--color-red);
      border-radius: 3rem;
      color: var(--color-white);
      text-transform: uppercase;
      font-size: 1.4rem;
      font-family: "open-sans", sans-serif;
      /* font-weight: 800; */
      font-style: normal;
      letter-spacing: 0.1rem;
      border: solid transparent 1px;
      transition: background-color .25s ease, border-color .25s ease;
   
      &:hover, &:focus {
         background-color: var(--color-black);
         border-color: var(--color-red);
      }
   }
}

/* Update Contact Information FORM */
#interaction-form {
   .field input, select {
      padding: .75rem .25rem;
   }
   .btn-submit {
      margin-top: 1rem;
      padding: 1.2rem 3rem !important;
      background-color: var(--color-red);
      border-radius: 3rem;
      color: var(--color-white);
      text-transform: uppercase;
      font-size: 1.4rem;
      font-family: "open-sans", sans-serif;
      /* font-weight: 800; */
      font-style: normal;
      letter-spacing: 0.1rem;
      border: solid transparent 1px;
      transition: background-color .25s ease, border-color .25s ease;
   
      &:hover, &:focus {
         background-color: var(--color-black);
         border-color: var(--color-red);
      }
   }
}