/* @import "tailwindcss";
@import "./fonts.css"; */

/* initial document setup */
:root {
  --color-deeppurple: #2b0542;
  --color-indigo: #570085;
  --color-violet:#9751ae;
  --color-paleviolet: #dfb6ed;
  --color-skyblue: #4ac0e0;
  /* --color-tealgreen: #14b097; */
  --color-tealgreen: #12a58d;
  --color-yellow: #ffcf00;
  --color-scarlet: #ee3359;
  --color-orange:#ff8b00;
  --color-white: #ffffff;
  --color-black: #1a1a1a;
  --color-deepgray: #616161;
  --color-medgray: #a1a1a1;
  --color-lightgray: #c1c1c1;
  --color-superlightgray: #e1e1e1;

  --font-size-section-p: 1.4rem;
  --line-height-section-p: 2rem;

  --border-radius:16px;

  --global-ease: cubic-bezier(0.31, 0.12, 0.31, 1);

  --font-primary: "Chiron GoRound TC", sans-serif;
  --font-secondary: "Albert Sans", sans-serif;

  --max-width: 480px;
  --nav-shrink-width: 1200px;
}

* {
  box-sizing: border-box;
  font-family: var(--font-secondary);
}
/********************/
/* GENERAL ELEMENTS */
/********************/
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  padding:0;
  background: var(--color-white);
  width:100%;
  &.error404 {
    background:var(--color-indigo);
    & > footer {
      position:absolute;
      bottom:0;
      @media(max-width:480px) {
        position:initial;
      }
    }
  }
}
h1, h2, h3, h4, h5 {
  font-family: var(--font-primary);
}

h1 {
    color:transparent;
    display:block;
    width:0px;
    height:0px;
    margin:0;
    font-size:1px;
}
h2 {
  color:var(--color-tealgreen);
  text-align: center;
  text-transform: lowercase;
  font-size:4rem;
  &.white { color: var(--color-white); }
  &.purple { color: var(--color-indigo); }
  &.pink { color:var(--color-scarlet); }
}
h3 {
    color:var(--color-indigo);
    font-weight: 400;
    font-size: 2rem;
    text-align:center;
}
ul {
  &.three-column {
    column-count: 3;
    column-gap: 2rem;
  }
  &.two-column {
    column-count: 2;
    column-gap: 2rem;
  }
  &.three-column, &.two-column {
    @media(max-width: 480px) {
      column-count: 1;
    }
  }
}
ul li, ol li {
    text-align: left;
    line-height:2rem; 
    font-size: 1.4rem;
    margin:1rem 0;
}
p {
  font-size: 1.4rem;
  color: var(--color-black);
  margin-bottom: 24px;
  line-height:1.6rem;
}

h1,h2,h3,h4,h5,h6,p,div,span,li,a,strong,em {
  &.white { color: var(--color-white)}
  &.black { color: var(--color-black)}
  &.deeppurple {color:var(--color-deeppurple)}
  &.indigo {color:var(--color-indigo)}
  &.tealgreen {color:var(--color-tealgreen)}
  &.skyblue {color:var(--color-skyblue)}
  &.scarlet {color:var(--color-scarlet)}
  &.yellow {color:var(--color-yellow)}
  &.orange {color:var(--color-orange)}
  &.deepgray {color:var(--color-deepgray)}
  &.medgray {color:var(--color-medgray)}
  &.lightgray {color:var(--color-lightgray)}
  &.superlightgray {color:var(--color-superlightgray)}
}

a {
  color:var(--color-indigo);
  transition: all .2s;
  &:hover {
    color:var(--color-scarlet);
  }
  &.icon-right,
  &.icon-upright,
  &.extlink,
  &.icon-email,
  &.icon-email-white,
  &.icon-down,
  &.icon-down-white {
    padding-right:55px;
    background-repeat: no-repeat;
    background-size:20px;
    background-position:calc(100% - 28px), 50%;
    &:hover {
      padding-right:60px;
    }
  }
  &.icon-right:not(.button):not(button),
  &.icon-upright:not(.button):not(button),
  &.extlink:not(.button):not(button),
  &.icon-email:not(.button):not(button),
  &.icon-email-white:not(.button):not(button),
  &.icon-down:not(.button):not(button),
  &.icon-down-white:not(.button):not(button) {
    padding-right:25px;
    background-position:100%, 50%;
  }
  &.icon-right {
    background-image:url(../images/icon-arrow-right.svg);
  }
  &.icon-upright, &.extlink {
    background-image:url(../images/icon-arrow-upright.svg);
  }
  &.icon-right-white {
    background-image:url(../images/icon-arrow-right-white.svg);
  }
  &.icon-upright-white, &.extlink-white {
    background-image:url(../images/icon-arrow-upright-white.svg);
  }
  &.icon-email {
    background-image:url(../images/icon-link-email.svg);
  }
  &.icon-email-white {
    background-image:url(../images/icon-link-email-white.svg);
  }
  &.icon-down {
    background-image:url(../images/icon-arrow-down.svg);
  }
  &.icon-down-white {
    background-image:url(../images/icon-arrow-down-white.svg);
  }
}

a:where(.wp-block-button__link) {
  padding:0;
}

button, .button, .wp-block-buttons .wp-block-button, :root :where(.wp-element-button, .wp-block-button__link) {
  padding: 1rem 2rem;
  font-size: 1.2rem;
  font-weight:700;
  border: none;
  border-radius: var(--border-radius);
  background: var(--color-yellow);
  color: var(--color-indigo);
  cursor: pointer;
  text-decoration:none;
  transition: .2s all ease-in-out;
  display:inline-block;

  a {
    text-decoration:none;
  }

  &.deeppurple {background: var(--color-deeppurple);color: var(--color-yellow); a {color: var(--color-yellow);}}
  &.indigo {background: var(--color-indigo);color: var(--color-white); a {color: var(--color-white);}}
  &.scarlet {background: var(--color-scarlet);color: var(--color-white); a {color: var(--color-white);}}
  &.tealgreen {background: var(--color-tealgreen);color: var(--color-white); a {color: var(--color-white);}}
  &.white {background: var(--color-white);color: var(--color-indigo); a {color: var(--color-indigo);}}

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  &.center {
    position:relative;
    left:50%;
    transform: translateX(-50%);
    display:inline-block;
  }

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

}

figure.photo {
  margin-top:1rem;
  img {
    border-radius: var(--border-radius);
  }
  figcaption {
    font-size:.9rem;
    font-style:italic;
  }
}

/**************/
/* NAVIGATION */
/**************/

nav#MainMenu {
  position: fixed;
  width:100vw;
  z-index: 999;
  height:100px;
  top:0px;
  transition:.2s height var(--global-ease);
  background-color:var(--color-white);

  .nav-logo {
    height:60px;
    position:absolute;
    top:50%;
    left:2rem;
    transform:translateY(-50%);
    transition:.2s height var(--global-ease);
  }

  div.menu-main-menu-container {
    position:absolute;
    right:2rem;
    top:50%;
    transform:translateY(-50%);
    @media (width < 1000px) {
      right:0;
      opacity:0;
      visibility:hidden;
      bottom:0px;
      transition:.2s all var(--global-ease);
    }
  }

  ul {
    margin: 0;
    padding: 0px;
    display:flex;
    /* align-items: right; */
    flex-direction: row;

    & > li {
      list-style: none;
      padding: 0 .5rem;
      display:inline-block;
      position:relative;
      margin:0px;

      a {
        color: var(--color-indigo);
        display: flex;
        align-items: center;
        background-color: transparent;
        font-weight: 600;
        font-size: 1.2rem;
        text-decoration:none;
        padding: .5rem 1rem .5rem 1rem;
        border-radius: var(--border-radius);
        /* transition:.35s all var(--global-ease); */

        &:hover {
          background-color:var(--color-scarlet);
          color:var(--color-white);
        }
      }
      
      &.menu-item-has-children > a {
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
      }

      &:hover {
        a {
          background-color:var(--color-scarlet);
          color:var(--color-white);
        }
        ul {
          max-height: 400px;
          opacity: 1;
          transform: translateY(0);
          pointer-events: auto;
        }
      }

      /* Giving button */
      &.giveButton a {
        background-color: var(--color-tealgreen);
        color:var(--color-white);

        &:hover {
          background-color: var(--color-yellow);
          color:var(--color-deeppurple);
        }
      }

      /* sub menu */
      ul {
        min-width: 230px;
        margin:0px;
        padding:.5rem;
        position:absolute;
        /* top:99%; */
        background-color: var(--color-scarlet);
        border-radius: var(--border-radius);
        border-top-left-radius: 0px;
        display:flex;
        flex-direction: column;
        list-style: disc;

        overflow: hidden;
        max-height: 0;
        opacity: 0;
        pointer-events: none;
        transform: translateY(0);
        transition:
          max-height 0.35s var(--global-ease),
          /* opacity    0.25s var(--global-ease), */
          transform  0.3s  var(--global-ease);

        li {
          margin:0px;
          padding:0;
          list-style: disc;

          &::marker {
            color:var(--color-white);
          }

          a {
            color: var(--color-white);
            display: inline-block;
            background-color: transparent;
            font-weight: 400;
            font-size: 1.1rem;
            text-decoration:none;
            padding: .5rem 1rem .5rem 1rem;
            border-radius: var(--border-radius);
            transition:.2s all var(--global-ease);
            text-wrap: nowrap;
            width:100%;

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

  &.small {
    height:60px;

    .nav-logo {
      height:40px;
      position:absolute;
      top:50%;
      left:2rem;
      transform:translateY(-50%);
    }
  }

  .menu-icon {
    display:none;
    height:40px;
    position:absolute;
    right:1rem;
    top:50%;
    transform:translateY(-50%);
    transition: transform,rotate .2s ease-in-out;
    transform-origin: 75% 25%;

    /* &.active {
      transform: rotate(90deg);
    } */

    rect {
      fill: var(--color-indigo);
    }

    &.active .hamburger-line {
      transform-box: fill-box;
      transform-origin: center;
      transition: all .3s var(--global-ease);
      &.line-top {
        rotate: 60deg;
        transform: translate(15px, 35px);
      }
      &.line-middle {
        rotate: 90deg;
      }
      &.line-bottom {
        rotate: -60deg;
        transform: translate(39px, 4px);
      }
    }

  }

  &.open {

    
    @media (width < 1000px) {

      div.menu-main-menu-container {
        background-color: var(--color-white);
        visibility: visible;
        transform:none;
        right:0px;
        position:absolute;
        width:30%;
        height:auto;
        top:100px;
        min-width:300px;
        border-bottom-left-radius: var(--border-radius);
        opacity:1;
        display:inline-table;
        /* transition:.2s all var(--global-ease); */

        ul#menu-main-menu {
          position:relative;
          padding:1rem;
          transform:none;
          top:0;
          right:0px;
          bottom:0px;
          width:100%;

          & > li {
            &.menu-item-has-children a {
              border-bottom-left-radius: var(--border-radius);
              border-bottom-right-radius: var(--border-radius);
            }
            & > ul {
              display:none;
            }
          }
        }
      }
      &.small {
        div.menu-main-menu-container {
          top:60px;
        }
      }
    }
  }
}

/*******************/
/* HEADER / SLIDER */
/*******************/

header:not(.header):not(.entryheader) {
  background-color: var(--color-indigo);
  position:relative;
  width:100%;
  height:100vh;
  min-height:800px;
  overflow:hidden;

  .logo-tagline {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 101;

    .logo {
      width: 300px;
    }

    h2 {
      color:var(--color-white);
      text-align: center;
      font-weight:500;
      font-size:2rem;
      margin:0 0 2rem;
    }

    button, .button {
      position:relative;
      background-color: var(--color-yellow);
      color: var(--color-indigo);
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      margin-top:3rem;
      img {
        display:inline-block;
      }
    } 
  }
  .slider-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-indigo);
    z-index: 100;
    background-blend-mode: multiply;
    opacity: 75%;
  }

  .slider-image {
    position: absolute;
    top: 50%;
    left: 50%;
    min-height: 100%;
    opacity: 0%;
    transition: opacity 1s;
    transform: translate(-50%, -50%);
    width:auto;
    object-fit: cover;
    &.visible {
      opacity:100%;
    }
    @media (max-width:800px) {
      visibility: hidden;;
    }
  }

  #MobileCollage {
    display:none;
    width:100%;
    position:absolute;
    top:100px;
    &.visible {
      display:block;
    }
    @media (max-width:800px) {
      display:block;
    }
  }
}

/******************/
/* SECTION PANELS */
/******************/

section {
  &.panel {
    background-color:var(--color-white);
    width:100%;
    padding:10vh 10vw;

    &.error404 {
      padding-top:10rem;
    }
    
    &.pink, &.scarlet {
      background-color:var(--color-scarlet);
      button,.button,.wp-element-button {
        &:hover {
          background-color:var(--color-indigo);
        }
      }
    }
    &.cyan, &.skyblue {
      background-color:var(--color-skyblue);
    }
    &.teal, &.tealgreen {
      background-color:var(--color-tealgreen);
    }
    &.purple, &.indigo {
      background-color:var(--color-indigo);
    }
    &.lightpurple, &.violet {
      background-color:var(--color-violet);
    }
    &.deeppurple {
      background-color:var(--color-deeppurple);
    }

    &.pink,&.scarlet,&.teal,&.tealgreen,&.purple,&.indigo,&.deeppurple,&.lightpurple,&.violet
    {
      p {
        font-size:var(--font-size-section-p);
        line-height: var(--line-height-section-p);
        color:var(--color-white);        
      }
      ul li, ul.wp-block-list li {
        color:var(--color-white);
      }
      h2, h3 {
        color: var(--color-white);
      }
      
      a:not(.wp-element-button):not(.button) {
        color:var(--color-paleviolet);
        text-decoration:underline;
        &:hover {
          color:var(--color-white);
        }
      }
    }

    &.pink,&.scarlet,&.tealgreen,&.teal,&.purple,&.indigo,&.deeppurple,&.lightpurple,&.pink,&.scarlet,&.teal,&.tealgreen,&.purple,&.indigo,&.deeppurple,&.lightpurple {
        color:var(--color-white);
    }

    .steps-todo {
      display:flex;
      justify-content: center;
      align-items: center;
      & > div {
        display: inline-block;
        background-color: var(--color-white);
        color: var(--color-indigo);
        font-size: 4rem;
        font-weight: 700;
        border-radius: 50%;
        border: 1rem solid var(--color-violet);
        width: 150px;
        height: 150px;
        text-align: center;
        line-height: 115px;
        -webkit-transform: scale(1.5);
            transform: scale(1.5);
        -webkit-filter: blur(4px);
            filter: blur(4px);
        opacity: 0;
      }
    }
    &.pink,&.scarlet,&.violet,&.lightpurple {
      .steps-todo > div {
        border-color: var(--color-deeppurple);
        color:var(--color-violet);
      }
    }

  }

  h2, &.panel h3:first-child {
    margin: 0 0 2rem;
    line-height:110%;
  }

  p {
    font-size: var(--font-size-section-p);
    line-height: var(--line-height-section-p);
  }

}

/******************/
/* PAGE TEMPLATES */
/******************/

body.page, body.archive {
  main {
    .page-head {
      position:relative;
      background-color: var(--color-orange);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
      margin-top: 80px;
      width:100vw;
      height:auto;
      min-height:400px;
      padding: 10vh 10vw;

      @media (width < 480px) {
        padding:5vh 5vw;
        margin-top:100px;  
      }
      
      div.overlay {
        width:100%;
        height:100%;
        opacity:75%;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-blend-mode: multiply;
        z-index:100;

        &.indigo {background-color:var(--color-indigo);}
        &.deeppurple {background-color:var(--color-deeppurple);}
        &.violet {background-color:var(--color-violet);}
        &.skyblue {background-color:var(--color-skyblue);}
        &.yellow {background-color:var(--color-yellow);}
        &.tealgreen {background-color:var(--color-tealgreen);}
        &.orange {background-color:var(--color-orange);}
        &.scarlet {background-color:var(--color-scarlet);}
        &.white {background-color:var(--color-white);}
        &.black {background-color:var(--color-black);}
        
      }

      div.title-block {
        position:absolute;
        top:50%;
        transform:translateY(-50%);
        z-index:900;

        @media(width < 480px) {
          width:90vw;
        }


        h1 {
          font-size:4rem;
          color:var(--color-deeppurple);
          width:auto;
          height:auto;
          color:var(--color-white);
          text-transform: lowercase;

          @media (width < 480px) {
            line-height:3.6rem;
            margin-bottom:1.4rem;
            font-size:3.2rem;
          }

        }
        p {
          color:var(--color-deeppurple);
          font-size:1.4rem;
          font-weight: 200;
          
          @media (width < 480px) {
            line-height:2rem;
          }
        }

        &.indigo, &.deeppurple, &.violet, &.black, &.scarlet {h1 {color:var(--color-white);} p {color: var(--color-white);}}
        &.skyblue, &.yellow, &.tealgreen, &.orange, &.white {h1 {color:var(--color-black);} p {color: var(--color-black);}}

      }
    }
  }
}


/****************/
/* PEOPLE CARDS */
/****************/

ul.people-cards {
  list-style: none;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  padding:0px;

  @media (width < 480px) {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position:relative;
    left:50%;
    transform:translateX(-50%);
    padding-left:0;
  }
  li {
    display:inline-block;
    padding:1rem;
    background-color:var(--color-indigo);
    color:var(--color-white);
    border-radius: var(--border-radius);
    font-size:1.4rem;
    line-height:2rem;
    text-align: center;
    width:300px;
    img {
      border-radius: var(--border-radius);
      margin-bottom: .5rem;
    }


  }
}

/**********/
/* FOOTER */
/**********/

footer {
  background-color:var(--color-superlightgray);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  align-content: stretch;
  gap: 50px;
  padding:3rem 2rem;
  width:100vw;

  div {

    p {
      color:var(--color-violet);
      font-size:1rem;
      line-height:1.4rem;
      margin-bottom:.8rem;
    }

    img.footer-logo {
      width:100px;
      margin:0;
      position:relative;
      top: 20%;
      left: 50%;
      transform:translate(-50%, -50%);
    }

    .menu-footer-container ul {
      margin:0;
      li {
        list-style:circle;
        margin-bottom:0px;
        margin-top:.2rem;
        a {
          font-size:1.1rem;
          color: var(--color-indigo);
          display: block;
          background-color: transparent;
          font-weight: 600;
          font-size: 1.1rem;
          text-decoration:none;
          padding: .2rem 1rem .2rem 1rem;
          border-radius: var(--border-radius);
          transition:.2s all var(--global-ease);
          &:hover {
            background-color:var(--color-scarlet);
            color:var(--color-white);
          }
          @media(width < 480px) {
            padding:.1rem;
          }
        }
      }

    }

    &.left {
      text-align: left;
      @media(width < 480px) {
        text-align:center;
      }
    }
    &.center {
      border-left:1px solid var(--color-violet);
      padding-left:.5rem;
      ul {
        display:block;
        margin:0px;
        li {
          list-style: none;
        }
      }
      @media(width < 480px) {
        ul {
          display:none;
        }
      }
    }
    &.right {
      width:400px;
    }

    .social-icons {
      flex-direction: row;
      gap:1rem;
      div {
        width:30px;
        @media(width < 480px) {
          left:initial;
          transform:none;
        }
        a {
          svg {
            width:30px;
            height:30px;
          }
        }
      }
    }

  }
}



.logo {
  width: 300px;
  display:block;
  margin:0px auto 20px;
}

.eventcards, .contactcards {
  display: grid;
  position: relative;
  width: 100%;
  column-gap: 1rem;
  row-gap: 1rem;
  grid-template-columns: 45% 45%;
  justify-content: center;
  margin:2rem 0;
  
  @media(max-width: 480px) {
    grid-template-columns: 100%;
  }

  div, p {
    display:inline-block;
    visibility: hidden;
    padding: 90px .5rem .5rem;
    background-color: var(--color-scarlet);
    border-radius: var(--border-radius);
    border: 4px solid var(--color-darkpurple);
    background-repeat: no-repeat;
    background-size: 60px;
    background-position: center 20px;
    text-align: center;
    font-weight: 700;
    font-size: 1.2rem;
    color:var(--color-white);
  }
}
.contactcards {
  div, p {
    padding:.5rem;
    background-color: var(--color-white);
    color:var(--color-deeppurple);
    a {
      color:var(--color-scarlet) !important;
      &:hover {
        color:var(--color-violet) !important;
      }
    }
    img {
      position:relative;
      width:50px;
      height:50px;
      display:inline-block;
      margin:0 1rem;
      top:50%; 
      transform:translateY(-50%);
    }
  }
}


/* CALLOUTS */

.callout, p.callout {
  font-size:2rem !important;
  line-height:2.8rem !important;
  font-weight:400;
  padding:1rem 2rem;
  position:relative;
  text-align: center;
  margin:3rem 0 1rem;

  &:before, &:after {
    background-color: var(--color-violet);
    height: 1px;
    content: "";
    display: block;
    width: 75%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    position:absolute;
  }
  &:after {
    top: 100%;
  }
  &.dark:before, &.dark:after {
      background-color: var(--color-indigo);
  }
  &.light:before, &.light:after {
      background-color: var(--color-white);
      opacity:.5;
  }
  @media (max-width:430px) {
    padding:1rem 0;
  }
}
p.callout {
  margin-bottom:2rem;
}

/*****************
/* EVENTS 
 *****************/
article.event-block {
  width:100%;
  position:relative;
  justify-content: space-evenly;
}
article.event-block div.event-date {
  width:100px;
  height:100px;
  position:absolute;
  top:10px;
  left:10px;
  padding:0.2rem;
  border-radius: var(--border-radius);
  border:4px solid var(--color-scarlet);
}
article.event-block div.event-date span.d {
    font-weight: 700;
    display: block;
    width: 100%;
    background-color: var(--color-indigo);
    border-radius: 12px;
    text-align: center;
    font-size: 55px;
    color: var(--color-white);
}
article.event-block div.event-date span.m {
  font-weight:700;
  display:block;
  color:var(--color-scarlet);
  text-align: center;
  font-size:18px;
}

article.event-block div.event-details {
  width:calc(100% - 140px);
  height:auto;
  position:relative;
  top:10px;
  left:70px;
}
article.event-block div.event-details h3 {
  text-align: left;
  margin-bottom:0;
}
article.event-block div.event-details p.event-datetime {
  font-size:1rem;
  margin-top:.5rem;
  font-weight:300;
  line-height:1.6em;
}

@media (max-width: 480px) {
  article.event-block div.event-date {
        position: relative;
        left: 0;
        margin-bottom: 1rem;
  }
  article.event-block div.event-details {
    width:100%;
    left:initial;
  }
}

/*********/
/* FORMS */
/*********/

form {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: 14px;
  max-width:420px;
  margin:0 auto;
}

.checkboxes {
  flex-wrap: nowrap;
  column-gap: 1rem;

  div {
    visibility: hidden;
    padding: .75rem .75rem .75rem 4.8rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    background-color: var(--color-violet);
    background-image: url(../images/checkbox-unchecked.svg);
    background-repeat: no-repeat;
    background-size: 40px;
    background-position: 5% 50%;
    margin: 1rem 0;
    color:var(--color-white);
  }

  div.active {
    background-color: var(--color-yellow);
    background-image: url(../images/checkbox-checked.svg);
    color:var(--color-indigo);
  }
}


.pleasewait {
  background-color: var(--color-indigo);
  opacity: .9;
  font-size:1.8rem;
  font-weight:700;
  text-align: center;
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  display:none;
  z-index:100;

  p {
    position: relative;
    top: 40%;
    font-size: 2rem !important;
    color: var(--color-white);
    line-height: 2.6rem !important;
  }

  img {
    position:relative;
    width:100px;
    animation: spin 1s linear infinite;
    /* Optional: Ensure the image displays correctly */
    display: block; 
    margin: auto;
  }
}

input,textarea {
  padding: 1rem;
  border-radius: var(--border-radius);
  border: none;
  font-size: 1.4rem;
  background-color: var(--color-white);

  /* &[type=checkbox] {
    visibility: hidden;
    margin:0;
    padding:0;
    height:0px;
  } */
}


/* constant contact forms */
.ctct-form-wrapper {
  margin:1rem;
  .ctct-form-description {
    display:none;
  }

  form {
    background-color: var(--color-yellow);
    border-radius: var(--border-radius);
    padding:2rem;
    margin: 2rem auto;
    max-width:none;
  }
  /* home page newsletter form */
  form.ctct-form-609 {
    display: flex;
    flex-direction: row;
    background-color: transparent;
    justify-content: center;
    align-items: flex-end;
    @media (max-width: 975px) {
      flex-direction: column;
      align-items: baseline;
    }
  }

  p:not(.ctct-form-field-submit) {
    width:100%;
    min-width:230px;
  }

  input:not(.ctct-submit):not(.ctct-submitted), textarea {
    width:100%;
  }
  p.ctct-form-field-submit {
    text-align:center; 
    input[type="submit"] {
      background-color:var(--color-indigo);
      font-weight:bold;
      color:var(--color-white);
      transition: all 0.2s;
      &:hover {
        background-color:var(--color-scarlet);
      }
    }
  }

  label {
    font-size:1.2rem;
    padding:.4rem;
  }
  .ctct-textarea-warning-label {
    font-size:1rem;
    font-style:italic;
  }
  .ctct-disclosure {
    hr {
      display: none;
    }
    small {
      opacity: .7;
    }
  }
  p.ctct-message {
    border-color:var(--color-white) !important;
    border-width: 2px;
    border-radius: var(--border-radius);
    text-align: center;
    color:var(--color-white) !important;
    &.ctct-success {
      font-weight:700;
    }
    button.ctct-dismiss-ajax-notice {
      line-height: 0 !important;
      padding: 0 !important;
      text-decoration: none;
      width: 30px !important;
      height: 30px !important;
      text-align: center;
      font-weight: 700;
      display: inline-block;
      &:hover {
        border:2px solid var(--color-white);
      }
    }
  }
}
.form-dark {
  .ctct-form-wrapper {
    form {
      background-color: rgba(255,255,255,0.1);
    }
  }

  p.ctct-form-field-submit {
    input[type="submit"] {
      background-color:var(--color-yellow);
      color:var(--color-indigo);
      &:hover {
        color:var(--color-white);
      }
    }
  }

}

/* WP FORMS */
.wpforms-container {
  label,legend {
    font-size:1.2rem;
    margin-bottom:.2rem;
  }
  form:not(.ctct-form) {
    background-color: var(--color-yellow);
    max-width: 606px;
    padding: 2rem;
    box-sizing: border-box;
    border-radius: var(--border-radius);

    .wpforms-field-container {
      fieldset {
        padding:0;
        border:none;
        .wpforms-field-row {
          display:flex;
          flex-direction:row;
          gap:1rem;
          @media (max-width: 480px) {
            flex-direction:column;
            .wpforms-field-row-block {
              input{
                width:100%;
              }
            }
          }
          .wpforms-field-row-block {
            label {
              display:block;
              font-size:1rem;
              padding-left:.4rem;
              margin-top:.2rem;
            }
          }
        }
      }
      .wpforms-field {
        margin-bottom:1rem;
        &.wpforms-field-text,&.wpforms-field-email,&.wpforms-field-textarea {
          label {
            display:block;
          }
          input,textarea {
            width:100%;
          }
        }
        .wpforms-field-label {
          &.wpforms-label-hide {
            display:none;
          }
        }
        &.wpforms-field-checkbox {
          background-color: rgba(255, 255, 255, 0.4);
          border-radius: var(--border-radius);
          padding: 1rem;
          fieldset {
            ul {
              padding: 0 0 0 1rem;
              list-style: none;
              margin: 0;
              li {
                input[type="checkbox"] {
                  position: relative;
                  vertical-align: top;
                  margin-top: .3rem;
                  transform:scale(1.3);
                }
                label {
                  padding-left: .5rem;
                  display: inline-block;
                  width: calc(100% - 2rem);
                  line-height: 1.4rem;
                }
              }
            }
            .wpforms-field-description {
              text-align: center;
              font-style: italic;
            }
          }
        }

      }
    }
    .wpforms-submit-container {
      button[type="submit"] {
        background-color:var(--color-indigo);
        color:var(--color-white);
        &:hover {
          background-color:var(--color-scarlet);
        }
      }
    }
    em.wpforms-error {
      display:inline-block;
      background-color: var(--color-scarlet);
      padding:.3rem;
      margin: .2rem 0;
      color: var(--color-white);
      background-image: url(../images/icon-arrow-up-white.svg);
      background-position:10px center;
      background-repeat:no-repeat;
      background-size: 13px;
      padding: 6px 12px 6px 26px;
      border-radius: var(--border-radius);
    }
  }

  .wpforms-confirmation-container {
    text-align: center;
    border-radius: var(--border-radius);
    background-color: var(--color-yellow);
    font-weight: 500;
    max-width:606px;
    padding:2rem;
    margin:0 auto;
  }

  &.dark {

    form:not(.ctct-form) {
      background-color:rgba(255, 255, 255, 0.1);;
      .wpforms-submit-container {
        button[type="submit"] {
          background-color:var(--color-yellow);
          color:var(--color-indigo);
          &:hover {
            background-color:var(--color-scarlet);
          }
        }
      }
    }

    .wpforms-confirmation-container {
      background-color: rgba(255, 255, 255, 0.1);
    }
  }

}

.disclaimer {
  font-size:.8rem;
  line-height:1rem;
  padding:1rem 0;
  color:var(--color-white);
}


#message {
  position: relative;
  margin-top: 24px;
  margin-left:auto;
  margin-right:auto;
  font-size: 1.8rem;
  line-height: 2.2rem;
  font-weight:400;
  text-align: center;
  display: block;
  border-radius: var(--border-radius);
  background-color: var(--color-scarlet);
  padding: 1rem;
  color: var(--color-white);
  max-width: 800px;
  -webkit-transform: scale(0);
    transform: scale(0);
  -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}

.bg-moving-background {
  background-repeat: no-repeat;
  background-position:200% 0%;
  background-size: 50%;
}
.bg-dir-left {
  background-position:-100% 0%;
}
.star-background {
  background-image:url('../images/AdventureAutism-Star-Faded.svg');
}
.questions-background {
  background-image:url('../images/questions-background.svg');
}
.breathe-background {
  background-image:url('../images/breathe-background.svg');
}
.grieving-background {
  background-image:url('../images/sunrise-background.svg');
}
.shiningheart-background {
  background-image:url('../images/shiningheart-background.svg');
}
.selfcare-background {
  background-image:url('../images/selfcare-background.svg');
}
.bgpattern-indigo-on-white {
  background-image:url('../images/indigo-on-white-logobg.png');
  background-repeat: repeat-x;
  background-size:40px;
}
.bgpattern-white-on-transparent {
  background-image:url('../images/white-on-transparent-logobg.png');
  background-repeat: repeat-x;
  background-size:40px;
}

.social-icons {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  align-content: stretch;
  gap: 100px;
  position:relative;
  left:50%;
  height:auto;
  transform:translateX(-50%);
  margin-bottom:2rem;

  @media (width < 480px) {
    flex-direction: column;
    gap:1rem;
    div {
      width:100px;
      position:relative;
      left:50%;
      transform:translateX(-50%);
    }

  }

  div {
    display:inline-block;
    a {
      opacity:0;
      display:inline-block; 

      svg {
        
        transition: scale .3s ease-in-out;
        width:100px;
        height:100px;

        rect {
          transition: fill .3s ease-in-out;

          &.icon-facebook-fill,
          &.icon-insta-fill,
          &.icon-linkedin-fill {
            fill: #000000;
          }
        }
      }

      &:hover svg {
        scale:1.1;

        rect.icon-facebook-fill {
          fill:#1877F2; /* facebook blue */
        }
        rect.icon-insta-fill {
          fill:#d62976; /* insta pink */
        }
        rect.icon-linkedin-fill {
          fill:#0A66C2; /* linked in blue */
        }
      }
    }
  }

}


.contact-email-address {
  position:relative;

  a {
    position: relative;
    font-size:2rem;
    text-decoration: none;
    font-weight:500;
    display:inline-block;
    padding:1rem;
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    left:50%;
    transform: translateX(-50%);
    margin-top:0;
    transition: all .3s ease-in-out;

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

.address-highlight {
  display:inline-block;
  background-color: var(--color-deeppurple);
  color: var(--color-white);
  border-radius: var(--border-radius);
  padding:1rem;
  position:relative;
  left:50%;
  transform: translateX(-50%);
}

/* background patterns */
.pattern-indigo-logo {
  background-image: url(../images/pattern-indigo-logo.png);
  background-position: bottom;
  background-repeat: repeat-x;
  background-size: 50px;
}
.pattern-indigo-logo-top {
  background-image: url(../images/pattern-indigo-logo-top.png);
  background-position: top;
  background-repeat: repeat-x;
  background-size: 50px;
}

.icon-divider-light {
  margin-top:4rem;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 30% 30% 30%;
  max-width: 400px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);

  img {
    width:50px;
    position:relative;
    left:50%;
    transform:translateX(-50%);
  }
}


/*********************
WORDPRESS OVERRIDES
*********************/
.wp-block-group-is-layout-flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch !important;
  align-content: stretch;
  gap: 8px;

  & > .wp-block-group:not(.event-details) {
    border:6px solid var(--color-violet);
    border-radius: var(--border-radius);
    margin: 2rem 0;
    padding: 1rem;
    width: 350px;
    flex-shrink: 0;
  }

   &.filled > .wp-block-group:not(.event-details) {
    border:none;
    background-color:var(--color-indigo);
    color:var(--color-white);

    .callout:before, .callout:after {
      background-color:rgba(255,255,255,0.5);
    }

    &:nth-child(1) {
      background-color:var(--color-violet);
    }
    &:nth-child(2) {
      background-color:var(--color-deeppurple);
    }

    p,h2,h3,li {
      color:var(--color-white);
    }
  }


  &.two-column > .wp-block-group {
    width:50%;
  }
  &.three-column > .wp-block-group {
    width:32%
  }
  &.one-third-two-third > .wp-block-group:first-child,
  &.one-third-two-third > .wp-block-image:first-child  {
    width:33%
  }
  &.one-third-two-third > .wp-block-group:nth-child(2) {
    width:67%
  }

  @media (width < 480px) {
    flex-direction:column;

    & > .wp-block-group {
      width:100%;
    }
  }

}

/* .wp-block-buttons.is-content-justification-center {
  position:relative;
  div {
    position:relative;
    left:50%;
    transform: translateX(-50%);
  }
} */

.wp-block-buttons>.wp-block-button {
    padding: 0;
}

.has-text-align-center {
  text-align:center;
}



/* Desktop enhancement */
@media (max-width: 1200px) {
  nav#MainMenu ul li {
    padding:.5rem 0;
    a {
      font-size:1rem;
    }
  }
}

@media (max-width: 1000px) {
  nav#MainMenu {
    .menu-main-menu-container 
    { 
      background-color: var(--color-white);

       ul {
        display:none;
        position: absolute;
        right:0;
        top:80px;
        li {
          display:block;
        }

      }
    }

    &.open .menu-main-menu-container ul {
      display:block;
    }

    .menu-icon {
      display: block;
    }
  }
}

@media (min-width: 768px) {
  .eventcards, .contactcards {
    grid-template-columns: 30% 30% 30%;
  }
  
}

@media (width < 1000px) {
  nav#MainMenu.open {
    

  }
}

@media (max-width: 480px) {
  h2 {
    font-size:3rem;
  }
  h3 {
    font-size:2rem;
  }
  .contact-email-address a {
    font-size:1.4rem;
    font-weight:700;
  }

}

/**************/
/* ANIMATIONS */
/**************/
.animate-text {
  visibility: hidden;
}
.animate-text.nowrap {
  white-space: nowrap;
}
.tracking-in-contract {
  visibility: visible !important; 
  -webkit-animation: tracking-in-contract 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-contract 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}
.fade-in-bottom {
  visibility: visible !important;
	-webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
.bg-pan-from-right {
	-webkit-animation: bg-pan-right 6s both;
	        animation: bg-pan-right 6s both;
}
.bg-pan-from-left {
	-webkit-animation: bg-pan-left 6s both;
	        animation: bg-pan-left 6s both;
}
.wobble-hor-bottom {
	-webkit-animation: wobble-hor-bottom 0.8s both;
	        animation: wobble-hor-bottom 0.8s both;
}
.wobble-ver-right {
	-webkit-animation: wobble-ver-right 0.8s both;
	        animation: wobble-ver-right 0.8s both;
}
.scale-in-top {
	-webkit-animation: scale-in-top 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: scale-in-top 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.swing-in-top-fwd {
	-webkit-animation: swing-in-top-fwd 0.8s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
	        animation: swing-in-top-fwd 0.8s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;
}
.puff-in-center {
	-webkit-animation: puff-in-center 0.5s var(--global-ease) both;
	        animation: puff-in-center 0.5s var(--global-ease) both;
}


/**
 * ----------------------------------------
 * animation tracking-in-contract
 * ----------------------------------------
 */
@-webkit-keyframes tracking-in-contract {
  0% {
    letter-spacing: .15em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    letter-spacing: normal;
    opacity: 1;
  }
}
@keyframes tracking-in-contract {
  0% {
    letter-spacing: .15em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    letter-spacing: normal;
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation fade-in-bottom
 * ----------------------------------------
 */
@-webkit-keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(50px);
            transform: translateY(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation bg-pan-right
 * ----------------------------------------
 */
@-webkit-keyframes bg-pan-right {
  0% {
    background-position: 200% 0%;
  }
  100% {
    background-position: 150% 0%;
  }
}
@keyframes bg-pan-right {
  0% {
    background-position: 200% 0%;
  }
  100% {
    background-position: 150% 0%;
  }
}

/**
 * ----------------------------------------
 * animation bg-pan-left
 * ----------------------------------------
 */
@-webkit-keyframes bg-pan-left {
  0% {
    background-position: -100% 0%;
  }
  100% {
    background-position: 0% 0%;
  }
}
@keyframes bg-pan-left {
  0% {
    background-position: -100% 0%;
  }
  100% {
    background-position: 0% 0%;
  }
}


/**
 * ----------------------------------------
 * animation wobble-hor-bottom
 * ----------------------------------------
 */
@-webkit-keyframes wobble-hor-bottom {
  0%,
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  15% {
    -webkit-transform: translateX(-30px) rotate(-6deg);
            transform: translateX(-30px) rotate(-6deg);
  }
  30% {
    -webkit-transform: translateX(15px) rotate(6deg);
            transform: translateX(15px) rotate(6deg);
  }
  45% {
    -webkit-transform: translateX(-15px) rotate(-3.6deg);
            transform: translateX(-15px) rotate(-3.6deg);
  }
  60% {
    -webkit-transform: translateX(9px) rotate(2.4deg);
            transform: translateX(9px) rotate(2.4deg);
  }
  75% {
    -webkit-transform: translateX(-6px) rotate(-1.2deg);
            transform: translateX(-6px) rotate(-1.2deg);
  }
}
@keyframes wobble-hor-bottom {
  0%,
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  15% {
    -webkit-transform: translateX(-30px) rotate(-6deg);
            transform: translateX(-30px) rotate(-6deg);
  }
  30% {
    -webkit-transform: translateX(15px) rotate(6deg);
            transform: translateX(15px) rotate(6deg);
  }
  45% {
    -webkit-transform: translateX(-15px) rotate(-3.6deg);
            transform: translateX(-15px) rotate(-3.6deg);
  }
  60% {
    -webkit-transform: translateX(9px) rotate(2.4deg);
            transform: translateX(9px) rotate(2.4deg);
  }
  75% {
    -webkit-transform: translateX(-6px) rotate(-1.2deg);
            transform: translateX(-6px) rotate(-1.2deg);
  }
}

/**
 * ----------------------------------------
 * animation wobble-ver-right
 * ----------------------------------------
 */
@-webkit-keyframes wobble-ver-right {
  0%,
  100% {
    -webkit-transform: translateY(0) rotate(0);
            transform: translateY(0) rotate(0);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  15% {
    -webkit-transform: translateY(-30px) rotate(6deg);
            transform: translateY(-30px) rotate(6deg);
  }
  30% {
    -webkit-transform: translateY(15px) rotate(-6deg);
            transform: translateY(15px) rotate(-6deg);
  }
  45% {
    -webkit-transform: translateY(-15px) rotate(3.6deg);
            transform: translateY(-15px) rotate(3.6deg);
  }
  60% {
    -webkit-transform: translateY(9px) rotate(-2.4deg);
            transform: translateY(9px) rotate(-2.4deg);
  }
  75% {
    -webkit-transform: translateY(-6px) rotate(1.2deg);
            transform: translateY(-6px) rotate(1.2deg);
  }
}
@keyframes wobble-ver-right {
  0%,
  100% {
    -webkit-transform: translateY(0) rotate(0);
            transform: translateY(0) rotate(0);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  15% {
    -webkit-transform: translateY(-20px) rotate(4deg);
            transform: translateY(-20px) rotate(4deg);
  }
  30% {
    -webkit-transform: translateY(10px) rotate(-3deg);
            transform: translateY(10px) rotate(-3deg);
  }
  45% {
    -webkit-transform: translateY(-5px) rotate(2.4deg);
            transform: translateY(-5px) rotate(2.4deg);
  }
  60% {
    -webkit-transform: translateY(3px) rotate(-1.6deg);
            transform: translateY(3px) rotate(-1.6deg);
  }
  75% {
    -webkit-transform: translateY(-2px) rotate(0.8deg);
            transform: translateY(-2px) rotate(0.8deg);
  }
}

/**
 * ----------------------------------------
 * animation scale-in-top
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-top {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    opacity: 1;
  }
}
@keyframes scale-in-top {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation swing-in-top-fwd
 * ----------------------------------------
 */
@-webkit-keyframes swing-in-top-fwd {
  0% {
    -webkit-transform: rotateX(-100deg);
            transform: rotateX(-100deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 1;
  }
}
@keyframes swing-in-top-fwd {
  0% {
    -webkit-transform: rotateX(-100deg);
            transform: rotateX(-100deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
    -webkit-transform-origin: top;
            transform-origin: top;
    opacity: 1;
  }
}

/* Define the animation keyframes */
@keyframes spin {
  0% {
    transform: rotate(0deg); /* Start at 0 degrees */
  }
  100% {
    transform: rotate(360deg); /* End at 360 degrees (one full turn) */
  }
}

@-webkit-keyframes puff-in-center {
  0% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
    -webkit-filter: blur(4px);
            filter: blur(4px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes puff-in-center {
  0% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
    -webkit-filter: blur(4px);
            filter: blur(4px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}