@import url('//fonts.googleapis.com/css2?family=Caudex:ital,wght@0,400;0,700;1,400;1,700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/************ TEMPLATE  ************
Feedback Build Notes
-make bio left justified, remove comma after Learner, & he will send a new headshot
-qualities of sages in service - Joyfulness only needs one L
-Respect and Integrity has the same blurb under Our Values
-"I have developed a lot of presentations since we first began work on the website and I’ll send those to you as well in the next week so they can be listed." 
primary color: #316da1 rgb(49,109,161)
secondary color: #89af56 rgb(137,175,86)
************/

.site-1 {
    --primary-color: #316da1;
    --secondary-color: #89af56;

    --primary-rgb: 49,109,161;
    --secondary-rgb: 137,175,86;

    --default-white: #ffffff;
    --default-black: #000000;

    --title-font-family: 'EB Garamond', serif;
    --body-font-family: 'Lato', sans-serif;

    --heading-color: var(--primary-color);
    --heading-font-family: var(--title-font-family);

    --title-border-bottom: 1px solid var(--secondary-color);

    --home-title-font: var(--title-font-family);

    --transparent: rgba(255,255,255,0);

    --default-box-shadow: 0px 0px 10px rgba(0,0,0,.5);

    --swiper-box-shadow: var(--default-box-shadow);

    --ql-title-color: var(--default-white);
    --ql-background-color: rgba(0,0,0,.3);
    --ql-background-hover: rgba(0,0,0,.5);
    --ql-flex: calc(100%/5);
	--ql-font-size-desktop: 2vw;
	--ql-font-size-mobile: 1.5rem;
	
	 --hero-title-font-size-mobile: 9vw;
}

.readon, .button, .btn, p.readmore .btn, .sprocket-lists-portrait-container > li .sprocket-lists-portrait-item > a span, .listentobutton.moduletable a {
    background: var(--primary-color);
    font-family: 'Lato', sans-serif;
	font-size: 1.4rem;
} 
h4 {color: #89af56;}

p {font-size: 1.4rem;}
blockquote {font-size: 1.7rem;}

@media only screen and (max-width:  50.99rem) {
    h1 {font-size: 2.75rem;}
    h2 {font-size: 2.25rem;}
    h3 {font-size: 2.25rem;}
    h4 {font-size: 2.25rem;}
    h5 {font-size: 1.65rem;}
    h6 {font-size: 1.65rem;}
    p {font-size: 1.4rem; margin-bottom: 4px;}
    h1, h2, h3 {line-height: 1.3;}
    h4, h5, h6, p {line-height: 1.2;}
}


/*************** ALL SITE *****************/
.item-image {display: none;}

.site-1-home #g-top :is(.alert, .parish-alert, .school-alert) .g-item-title {
    pointer-events: none;
}

#g-top .alert-fix .g-joomla-articles > div {
    padding: 0% 3%;
}

#g-top .alert-fix .g-item-title {
    font-size: clamp(2rem, 2.75vw, 4rem);
}

#hero-grab::before {
    content: "";
    position: absolute;
    z-index: 9;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, white, transparent);
}

/*************** HOMELAYOUT ***************/ 
/*************** OFFCANVAS ****************/
.g-offcanvas-toggle {color: var(--primary-color);} 
.g-offcanvas-toggle .fa-fw {text-shadow: none;}

/*************** TOP **********************/ 
/*************** NAVIGATION ***************/

.g-main-nav .g-toplevel>li>.g-menu-item-container>.g-menu-item-content {
	font-size: 1.25rem;}

@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-navigation > .g-container {
        position: relative;
        height: 56vw;
        width: 100%;
    }
    .site-1-home #g-navigation > .g-container > .g-grid:nth-child(2) {
        position: absolute;
        top: 5%;
        left: 0;
        right: 0;
        height: auto;
        width: 100%;
        z-index: 11;
    }
    .site-1-home #g-navigation > .g-container > .g-grid:nth-child(3) {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        z-index: 10;
    }
    .site-1-home #g-navigation .gear-logo-icon img {
        width: 100%;
    }
    .site-1-home #g-navigation .g-toplevel > li:first-child {
        margin: 0;
        padding: 0;
        width: 15%;
    }
    .site-1-home #g-navigation .g-toplevel img {
        margin-top: -6vw!important;
        margin-bottom: -6vw!important;
    }
    .site-1 .flame-leaf img {
        width: 15vw;
    }
}

@media only screen and (min-width: 50.99rem) {
    .site-1-sub #g-navigation {
        position: fixed;
        background: transparent;
        z-index: 1000;
    }
    .site-1-sub #g-navigation > .g-container {
        position: relative;
        height: 6vw;
        width: 100%;
    }
    .site-1-sub #g-navigation > .g-container > .g-grid:nth-child(2) {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        height: auto;
        width: 100%;
        z-index: 11;
    }
    .site-1-sub #g-navigation > .g-container > .g-grid:nth-child(3) {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        z-index: 10;
    }
    .site-1-sub #g-navigation .gear-logo-icon img {
        width: 100%;
    }
    .site-1-sub #g-navigation .g-toplevel > li:first-child {
        margin: 0;
        padding: 0;
        width: 15%;
    }
    .site-1-sub #g-navigation .g-toplevel img {
        margin-top: -6vw!important;
        margin-bottom: -6vw!important;
    }
    .site-1-sub .flame-leaf img {
        width: 15vw;
    }
}


@media only screen and (max-width: 50.99rem) {
    .site-1 #g-navigation .g-logo {
        max-width: 65%;
        margin: 1rem auto;
    }
    .gear-logo-icon {
        display: none!important;
    }
    .flame-leaf {
        display: none!important;
    }
}

/*************** SLIDESHOW ****************/ 
/*************** HEADER *******************/
/*************** ABOVE ********************/
@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-above {
        padding: 3vw 5%!important;
    }
    .site-1-home #g-above .g-array-item-text {
        margin: 0;
        padding: 0;
    }
    .sage-definition {
        display: flex;
        flex-direction: row;
    }
    .sage-leaf-icon {
        flex: 15%;
    }
    .sage-def-desc {
        flex: 85%;
        color: var(--default-black);
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        border-bottom: 3px solid var(--secondary-color);
        padding: 0 10%;
    }
    .sage-def-desc p {
        font-size: 1.75vw;
        font-family: var(--body-font-family);
        font-weight: 500;
    }
    .sage-def-desc .sage-1 {
        font-size: 2.75vw;
        font-weight: 900;
    }
    .sage-def-desc .sage-2 {
        font-size: 2.75vw;
        font-style: italic;
        font-weight: 900;
    }
}

@media only screen and (max-width: 50.99rem) {
    .site-1-home #g-above {
        padding: 3vw 5%!important;
    }
    .site-1-home #g-above .g-array-item-text {
        margin: 0;
        padding: 0;
    }
    .sage-definition {
        display: flex;
        flex-direction: row;
    }
    .sage-leaf-icon {
        flex: 15%;
    }
    .sage-def-desc {
        flex: 85%;
        color: var(--default-black);
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        border-bottom: 3px solid var(--secondary-color);
        padding: 0 8%;
    }
    .sage-def-desc p {
        font-size: 3.75vw;
        font-family: var(--body-font-family);
        font-weight: 500;
    }
    .sage-def-desc .sage-1 {
        font-size: 4.75vw;
        font-weight: 900;
    }
    .sage-def-desc .sage-2 {
        font-size: 3.75vw;
        font-style: italic;
        font-weight: 900;
    }
}

@media only screen and (max-width: 50.99rem) {

    .sage-definition {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sage-leaf-icon {
        flex: 100%;
    }

    .sage-leaf-icon img {
        width: 25%;
        display: grid;
        margin: auto;
        padding-bottom: 1rem;
    }

    .sage-def-desc {
        margin-bottom: 1rem;
    }

}

/***********Custom Scrollbar****************/

/* Hide the default scrollbar */
::-webkit-scrollbar {
    width: .75rem;
  }
  
  ::-webkit-scrollbar-track {
    background-color: #f5f5f5;
  }
  
  ::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 5px;
  }
  
  /* Style the scrollbar on hover */
  ::-webkit-scrollbar-thumb:hover {
    background-color: #bbbbbb;
  }
  
  /* Style the scrollbar when it's being dragged */
  ::-webkit-scrollbar-thumb:active {
    background-color: #8c8c8c;
  }

  @-moz-document url-prefix() {
    * {
      scrollbar-width: thin;
      scrollbar-color: #ccc #f5f5f5;
    }
  }

/*************** SHOWCASE *****************/
@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-showcase {
        padding: 5vw 10%!important;
        background: url('/images/template/sunflower-2.png') -9% 121% no-repeat, url('/images/template/leafy-branch-3.png') 106% 38% no-repeat;
        background-size: 28%;
    }
    .insp-desc .g-array-item-text {
        padding: 0;
        margin: 0;
    }
    .insp-desc h1 {
        font-size: 5vw;
        text-align: center;
        font-weight: 700;
        margin-bottom: 1vw;
    }
    .insp-desc h3 {
        border: none;
        padding: 0 18%;
        margin-bottom: 3vw;
        color: var(--secondary-color);
        font-weight: 700;
        font-size: 2.25vw;
    }
    .insp-desc p {
        padding: 0 18%;
        /*font-size: 1.5vw;*/
    }
}

@media only screen and (max-width: 50.99rem) {
    .site-1-home #g-showcase {
        padding: 5vw 10%!important;
        background: url('/images/template/sunflower-2.png') -9% 121% no-repeat, url('/images/template/leafy-branch-3.png') 106% 38% no-repeat;
        background-size: 28%;
    }
    .insp-desc .g-array-item-text {
        padding: 0;
        margin: 0;
    }
    .insp-desc h1 {
        font-size: 7vw;
        text-align: center;
        font-weight: 700;
        margin-bottom: 1vw;
    }
    .insp-desc h3 {
        border: none;
        padding: 0 10%;
        margin-bottom: 3vw;
        color: var(--secondary-color);
        font-weight: 700;
        font-size: 5.75vw;
    }
    .insp-desc p {
        padding: 0 10%;
        font-size: 4.5vw;
    }
    .insp-desc > .g-content {
        margin: 0;
        padding: 0;
    }
    .insp-desc .g-content-array > .g-grid > .g-block > .g-content {
        margin: 0;
        padding: 0;
    }
}

/*************** UTILITY ******************/
@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-utility {
        padding: 0 15%!important;
        background: url('/images/template/open-white.png') 5% 50% no-repeat, url('/images/template/close-white.png') 95% 50% no-repeat, var(--secondary-color);
        background-size: 10%;
    }
    .site-1-home #g-utility > .g-grid > .g-block > .g-content {
        margin: 0;
        padding: 0;
    }
    .site-1-home #g-utility .slide-content-wrapper > .slide-content {
        display: flex;
        flex-direction: column;
    }
    .site-1-home #g-utility .slide-content-wrapper > .slide-content > .g-swiper-title {
        order: 2;
        font-weight: 700;
        font-style: italic;
    }
    .site-1-home #g-utility .slide-content-wrapper > .slide-content > .g-swiper-text {
        order: 1;   
        font-size: 1.75vw;
        font-weight: 600;
    }
}

@media only screen and (max-width: 50.99rem) {
    .site-1-home #g-utility {
        padding: 0 15%!important;
        background: url('/images/template/open-white.png') 5% 50% no-repeat, url('/images/template/close-white.png') 95% 50% no-repeat, var(--secondary-color);
        background-size: 10%;
    }
    .site-1-home #g-utility > .g-grid > .g-block > .g-content {
        margin: 0;
        padding: 0;
    }
    .site-1-home #g-utility .slide-content-wrapper > .slide-content {
        display: flex;
        flex-direction: column;
    }
    .site-1-home #g-utility .slide-content-wrapper > .slide-content > .g-swiper-title {
        order: 2;
        font-weight: 700;
        font-style: italic;
    }
    .site-1-home #g-utility .slide-content-wrapper > .slide-content > .g-swiper-text {
        order: 1;   
        font-size: 4vw;
        font-weight: 600;
    }
}

/*************** FEATURE ******************/
@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-feature {
        padding: 0 5%!important;
    }
    .site-1-home #g-feature .g-title {
        font-style: normal;
        font-size: 3vw;
        color: var(--default-white);
        text-shadow: 1px 1px 2px #000000;
    }
}

/*************** MAIN *********************/
.parish-home #g-container-main {
    padding: 0 5%;
}

@media only screen and (min-width: 50.99rem) {
    .site-1-sub #g-container-main {
        padding: 5vw 10%!important;
        background: url('/images/template/sunflower-2.png') -9% 121% no-repeat, url('/images/template/leafy-branch-3.png') 112% 35% no-repeat;
        background-size: 28%;
    }
}

@media only screen and (max-width: 50.99rem) {
    .site-1-sub #g-container-main {
        padding: 5vw 5%!important;
        background: url('/images/template/sunflower-2.png') -9% 121% no-repeat, url('/images/template/leafy-branch-3.png') 112% 38% no-repeat;
        background-size: 28%;
    }
}


/*************** EXPANDED *****************/ 
@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-expanded {
        padding: 3vw 10%!important;
    }
    .gear-bio .g-content {
        margin: 0;
        padding: 0;
    }
    .gear-bio .g-array-item {
        display: flex;
        flex-direction: row;
        gap: 3vw;
    }
    .gear-bio .g-array-item-image {
        flex: 30%;
        margin: 0;
        padding: 0;
    }
    .gear-bio .g-array-item-image img {
        border-radius: 1rem;
    }
    .gear-bio .g-array-item-text {
        flex: 70%;
        margin: 0;
        padding: 0;
    }
    .gear-bio .g-array-item-text h1 {
        color: var(--secondary-color);
    }
    .gear-bio .g-array-item-text p {
        font-size: 1.65vw;
        font-weight: 500;
        margin-bottom: 2rem;
    }
}

@media only screen and (max-width: 50.99rem) {
    .site-1-home #g-expanded {
        padding: 3vw 10%!important;
    }
    .gear-bio .g-content {
        margin: 0;
        padding: 0;
    }
    .gear-bio .g-array-item {
        display: flex;
        flex-direction: column;
        gap: 3vw;
    }
    .gear-bio .g-array-item-image {
        flex: 30%;
        margin: 0;
        padding: 0;
    }
    .gear-bio .g-array-item-image img {
        border-radius: 1rem;
    }
    .gear-bio .g-array-item-text {
        flex: 70%;
        margin: 0;
        padding: 0;
    }
    .gear-bio .g-array-item-text h1 {
        color: var(--secondary-color);
        font-size: 2rem;
    }
    .gear-bio .g-array-item-text p {
        font-size: 3.65vw;
        font-weight: 500;
        margin-bottom: 2rem;
    }
}

/*************** EXTENSION ****************/
@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-extension {
        padding: 2vw 0!important;
    }
    .value-box {
        pointer-events: none;
    }
    .value-box img {
        width: 85%;
        height: auto;
    }
}

/*************** BOTTOM *******************/
/*************** FOOTER *******************/
#g-footer .g-content-array {margin: 0;}
#g-footer a {color: var(--default-white);} 

@media only screen and (min-width: 50.99rem) {
    .site-1 #g-footer {
        background: url('/images/template/footer.png') 50% 100% no-repeat;
        background-size: cover;
    }
    .footer-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .footer-wrapper img {
        width: 45%;
        height: auto;
    }
    .footer-wrapper .button {
        background: var(--secondary-color);
        font-size: 1.8vw;
        border-radius: 0;
        box-shadow: var(--default-box-shadow);
        padding: 1vw 4vw;
    }
    .footer-wrapper .button:hover {
        background: #777777;
    }
}

@media only screen and (max-width: 50.99rem) {
    .site-1 #g-footer {
        background: url('/images/template/footer.png') 50% 100% no-repeat;
        background-size: cover;
    }
    .footer-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 2rem;
    }
    .footer-wrapper img {
        width: 90%;
        height: auto;
        text-align: center;
    }
    .footer-wrapper .button {
        background: var(--secondary-color);
        font-size: 3.5vw;
        border-radius: 0;
        box-shadow: var(--default-box-shadow);
        padding: 1rem 4rem;
    }
    .footer-wrapper .button:hover {
        background: #777777;
    }
}

/*************** COPYRIGHT ****************/ 


/*************** MODULES ******************/
.moduletable .nav.menu, .moduletable .unstyled {background: var(--primary-color);} 
.moduletable .nav.menu li.current.active a, .moduletable .nav.menu li a:hover {    
    color: var(--primary-color); 
    background: var(--secondary-color);
} 
/*************** SECTIONS *****************/
/*************** MOBILE *******************/ 
/*************** ADS **********************/

/* General styling for the grid container */
.qualities-grid {
  display: grid;
  /* This creates a responsive grid. Columns will be at least 280px wide,
     and the grid will fit as many columns as possible.
     On wider screens, you might get 3 or more columns.
     On smaller screens, it will adjust to 2 or 1 column. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px; /* Space between the grid items */
  font-family: Arial, Helvetica, sans-serif; /* A common, readable sans-serif font */
}

/* Styling for each item in the grid */
.quality-item {
  background-color: var(--primary-color);
  min-width: 200px;
  flex-basis: calc(33.333% - 20px);
  color: #ffffff; /* White text for good contrast on the dark background */
  padding: 25px; /* Inner spacing for the content */
  border-radius: 8px; /* Slightly rounded corners for the items */
  text-align: center; /* Center align the text content */
  display: flex; /* Using flexbox to help with vertical alignment */
  flex-direction: column; /* Stack content vertically */
  justify-content: center; /* Center content vertically within the item */
  min-height: 280px; /* Ensures items have a consistent minimum height, adjust as needed */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle shadow for depth */
}

/* Styling for the title within each item */
.quality-item h2 {
  font-size: 1.6em; /* Size of the title text */
  margin-top: 0; /* Remove default top margin */
  margin-bottom: 12px; /* Space below the title */
  color: white;
}

/* Styling for the decorative line */
.quality-item .decorative-line {
  border: none; /* Remove default browser styling for hr */
  height: 1px; /* Thickness of the line */
  background-color: #ffffff; /* Color of the line (white) */
  width: 50%; /* Width of the line relative to the item's width */
  margin: 0 auto 15px auto; /* Center the line and provide space below it */
}

/* Styling for the paragraph text within each item */
.quality-item p {
  font-size: 0.95em; /* Size of the description text */
  line-height: 1.6; /* Spacing between lines of text for readability */
  margin-bottom: 0; /* Remove default bottom margin */
}


@media (min-width: 600px) {
  .qualities-grid {
    display: flex;
    justify-content: center;
    flex-flow: wrap;
  }
}

@media (min-width: 900px) {
  .qualities-grid {
    display: flex;
    justify-content: center;
    flex-flow: wrap;
  }
}

.sage-definition p {
    font-size: clamp(1.75rem, 3vw, 3.5rem);
    font-family: var(--title-font-family);
    padding-bottom: 3vw;
}

.site-1-home #g-above p {
    line-height: 1.3;
}

.about-page #g-mainbar > div > div > div {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.flex-container {
    display: flex; /* Establishes a flex container */
    align-items: flex-start; /* Aligns items to the start of the cross axis (top) */
    gap: 30px; /* Adds space between flex items */
    flex-wrap: wrap; /* Allows items to wrap to the next line on smaller screens */
}

.flex-container img {
    max-width: 100%; /* Ensures the image is responsive */
    height: auto; /* Maintains aspect ratio */
}

.text-content {
    flex: 1; /* Allows the text content to grow and shrink as needed */
    min-width: 300px; /* Sets a minimum width for the text content before wrapping */
}

.blog-page .g-item-title {
    font-size: clamp(1.5rem, 2.5vw, 2.5rem);
}

.blog-page #g-mainbar > div:nth-child(1) > div > div {
    display: none;
}

.blog-page #hero-title-text {
    left: 12% !important;
}