@import url('//fonts.googleapis.com/css2?family=Caudex:ital,wght@0,400;0,700;1,400;1,700&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Bellefairfamily=Gelasio:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');


/************ TEMPLATE  ************

------------------
Fonts: Caudex, Lato
Colors: 
Black #000000 rgba(0,0,0,1) 
Red #E82C0C rgba(232,44,12,1)
Cream #FAECC8 rgba(250,236,200,1)
Light Cream (bg color) #FDF7E9 rgba(253,247,233,1)
-----------------------------


11/10/22 - from Jeremy
add a quicklink for "Our Program" --- needs to link to "Our Program" page
Opening word header logo - The title font needs to match the provided logo font (the book one)
updated images for the rotator are in a dropbox folder

************/



.site-1 {
    --primary-color: #E82C0C;
    --secondary-color: #FAECC8;
    --third-color: #FDF7E9;

    --primary-rgb: 232,44,12;
    --secondary-rgb: 250,236,200;
    --third-rgb: 253,247,233;

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

    --title-font-family: 'Caudex', serif;
    --body-font-family: 'Gelasio', 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);

    --mt-background-color: rgba(var(--secondary-rgb),.8);
    --mt-header-color: var(--default-black);
    --mt-para-color: var(--primary-color);

    --ql-title-color: var(--default-black);
    --ql-background-color: rgba(var(--secondary-rgb),.8);
    --ql-background-hover: rgba(var(--secondary-rgb),.6);
}

.readon, .button:not(.site-1-home #g-showcase .button, .site-1-home #g-expanded .button, .site-1-home #g-extension .button), .btn, p.readmore .btn, .sprocket-lists-portrait-container > li .sprocket-lists-portrait-item > a span {
    color: var(--primary-color); 
	font-size: 1rem;
	text-transform: none;
	background: transparent; 
	padding: .7rem 1.3rem; 
	border-radius: 5px; 
	margin: 0;
	display: inline-block;
	font-weight: 500;
	line-height: 1.125rem;
	border: 2px solid var(--primary-color);
	transition: all .2s ease-in;
    font-family: 'Lato', sans-serif;
} 
.readon:hover, .button:hover, .btn:hover,  p.readmore .btn:hover {background: var(--primary-color); color: white; border: 2px solid var(--primary-color); }

p, ul, ol {font-size: 1.1rem;}

h6 {color: var(--default-black);}

/*******HIDES THE FEATURE IMAGE IF HEROS ARE USED*********/
.newspage .item-image {
	display: none;
}

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

/*************** TOP **********************/ 
/*************** NAVIGATION ***************/
@media only screen and (min-width: 50.99rem) {
    #g-navigation {
        background: url('/images/template/header.jpg') 0% 0% no-repeat, var(--third-color);
        background-size: 70%;
        margin-bottom: -54vw!important;
        padding-bottom: 54vw!important;
    }
    #g-navigation > .g-container > .g-grid:nth-child(1) > .g-block > .g-content {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    #g-navigation > .g-container > .g-grid:nth-child(1) {
        padding: 1rem;
    }
    #g-navigation .g-logo {
        width: 50%;
    }
    #g-navigation .g-logo img {
        width: 100%;
    }
    #g-navigation > .g-container > .g-grid:nth-child(2) {
        border-top: 1px solid var(--primary-color);
        border-bottom: 1px solid var(--primary-color);
        box-shadow: 0px 0px 15px rgba(0,0,0,.25);
    }
    #g-navigation .g-social-items a {
        margin-right: 1vw;
    }
}
@media only screen and (max-width: 50.99rem) {
    #g-navigation {
        background: var(--third-color);
    }
    #g-navigation .g-logo {
        max-width: 70%;
        margin: 1rem auto;
    }
}

/*************** SLIDESHOW ****************/ 
.mass-times-block {
    background: none;
}




@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-slideshow > .g-container > .g-grid > .g-block {
        box-shadow: 0px 0px 15px rgba(0,0,0,.25);
    }
	.homelayout.swiper-box #g-slideshow > .g-container {
    padding: 2vw 8vw!important;
}
}
@media only screen and (max-width: 50.99rem) {
    .site-1-home #g-slideshow > .g-container > .g-grid {
        display: flex;
        flex-direction: column;
    }
    .site-1-home  #g-slideshow > .g-container > .g-grid > .mass-times-block {
        order: 2;
        width: 100%;
    }
    .site-1-home #g-slideshow > .g-container > .g-grid > .fullwidth-swiper {
        order: 1;
        width: 100%;
    }
}

/*************** HEADER *******************/
/*************** ABOVE ********************/
/*************** SHOWCASE *****************/
@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-showcase {
        box-shadow: 0px 0px 15px rgba(0,0,0,.25);
    }
    .ql-inner-box .g-blockcontent-subcontent-title > .g-blockcontent-subcontent-title-text {
        border: 1px solid var(--primary-color);
    }
}
@media only screen and (max-width: 50.99rem) {

}
/*************** UTILITY ******************/
.site-1-home :is(#g-utility, #g-extension) .g-title {
    color: var(--default-black);
    font-size: 3vw;
}
@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-utility {
        background: url('/images/template/mission.png') 100% 0% no-repeat, var(--third-color);
        background-size: 50%;
        padding: 5vw 5%!important;
    }
}
@media only screen and (max-width: 50.99rem) {
    .site-1-home #g-utility {
        padding: 1rem!important;
    }
    .site-1-home :is(#g-utility, #g-extension) .g-title {
        color: var(--default-black);
        font-size: 7vw;
        text-align: center;
    }
    .site-1-home #g-utility .g-content-array {
        margin: 0;
        padding: 0;
    }
}


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

/*************** EXPANDED *****************/ 


/*************** EXTENSION ****************/
@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-extension {
        background: url('/images/template/bg.jpg') 0% 100% no-repeat, var(--third-color);
        background-size: 15%;
        padding: 5vw 10%!important;
    }
    .site-1-home #g-extension .g-content-array {
        margin: 0;
        padding: 0;
    }
    .site-1-home #g-extension .history-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .site-1-home #g-extension .history-container > .g-content {
        max-width: 1200px;
    }
    .site-1-home #g-extension .history-container .g-array-item-text {
        margin: 0;
        padding: 0;
        font-size: 0;
    }
    .site-1-home #g-extension .history-container .g-array-item-text p {
        /*font-size: 1vw;*/
        padding-bottom: 2vw;
        margin: 0;
    }
    .site-1-home #g-extension .history-container .g-array-item {
        position: relative;
    }
    .site-1-home #g-extension .history-container .g-array-item-read-more {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        background: transparent;
    }
    .site-1-home #g-extension .history-container .g-array-item-read-more a {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 1px solid transparent;
        border-radius: 0;
        background: transparent;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        color: var(--primary-color);
        font-size: 1.5vw;
        font-weight: 700;
    }
	.site-1-home #g-extension .history-container .g-array-item-read-more a:hover {
		background: rgba(255,255,255,0.25);
		border: 1px solid var(--primary-color);
	}
}
@media only screen and (max-width: 50.99rem) {
    .site-1-home #g-extension {
        padding: 1rem!important;
    }
    .site-1-home #g-extension .g-content-array {
        margin: 0;
        padding: 0;
    }
    .footer-text-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .footer-text-container > div {
        flex: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

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

@media only screen and (min-width: 50.99rem) {
    #g-footer > .g-container > .g-grid:nth-child(1) {
        border-top: 1px solid var(--primary-color);
        border-bottom: 1px solid var(--primary-color);
        box-shadow: 0px 0px 15px rgba(0,0,0,.25);
    }
    #g-footer .g-array-item-text {
        margin: 0;
        padding: 0;
    }
    .footer-text-container {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: flex-start;
        padding: 2vw 0;
        align-items: center;
    }
    .footer-text-container p {
        margin: 0;
        padding: 0;
    }
}
@media only screen and (max-width: 50.99rem) {

}

/*************** 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 *******************/ 
/*Subpages

.contact-page #g-mainbar > div > div > div > div > div > div > h3:nth-child(2) {
	display: none;
}

.contact-page .dl-horizontal dd {
	margin: 0 0 5px 0;
}

.contact-page #g-mainbar > div > div > div > div > div > div > div.page-header > h2 {
	font-size: 3rem;
}

.contact-page #contact-form > div > div {
	margin-top: 37px;
}*/

.breadcrumb {
	background-color: #FDF7E9;
}


/* popup styles */

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 9998;
  }
  
  #popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 30px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    z-index: 9999;
    max-height: 80%; /* Set the maximum height for the popup */
    overflow-y: auto; /* Enable vertical scrolling if content exceeds maximum height */
  }
  
  #popup.show {
    opacity: 1;
    visibility: visible;
    animation: fade-in 0.5s ease-out;
  }
  
  @keyframes fade-in {
    from {
      opacity: 0;
      transform: translate(-50%, -60%);
    }
    to {
      opacity: 1;
      transform: translate(-50%, -50%);
    }
  }
  
  #close-popup-button {
    position: absolute;
    top: 10px;
    right: 10px;
  }

  #popup::-webkit-scrollbar {
    width: 8px; /* Set the width of the scrollbar */
  }
  
  #popup::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* Set the background color of the scrollbar track */
    border-radius: 4px; /* Set the border radius of the scrollbar track */
  }
  
  #popup::-webkit-scrollbar-thumb {
    background-color: #888; /* Set the color of the scrollbar thumb */
    border-radius: 4px; /* Set the border radius of the scrollbar thumb */
  }
  
  #popup::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Set the color of the scrollbar thumb on hover */
  }
  
  @media only screen and (max-width: 600px) {
    /* Adjust the width for mobile devices */
    #popup {
      width: 90%;
    }
}

/*  */

/* Main CSS */
.c-parallax-section {
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 4rem 2rem;
    min-height: 400px;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    display: grid;
    align-items: center;
  }
  
  .c-parallax-content {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    color: black;
    background-color: rgba(var(--secondary-rgb), 0.85);
    padding: 2rem;
    width: 100%;
  }
  
  @media (max-width: 50.99rem) {
    .c-parallax-section {
      background-attachment: scroll;
      padding: 12% 1rem;
      min-height: 300px;
    }
  
    .c-parallax-content {
       padding: 1.5rem;
    }
  }