@import url('//fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500&family=Gotu&family=Lato:wght@400;700&display=swap');

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

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

.site-1 {
    --primary-color: #00303f;
    --secondary-color: #c9b8a0;
	--tertiary-color: #7a9d96;
    
    --primary-rgb: 0, 48, 63;
    --secondary-rgb: 201, 184, 161;

    --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);

	--mt-background-color: transparent;

    --mt-fixed-height: 36vw;
    --mt-para-color: var(--primary-color);
    --mt-header-color: var(--primary-color);
    --mt-header-desktop: 2.3vw;

    --ql-title-color: var(--default-white);
	--ql-num-boxes: 2;
	--ql-flex: calc(100% / var(--ql-num-boxes));
	
}

.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: var(--body-font-family);
} 

.site-1-sub .item-image {
    display: none;
}

.box-shadow { box-shadow: var(--default-box-shadow); margin-right: 15px !important;}

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

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

.site-1 #g-navigation > .g-container > .g-grid:nth-child(1) > div {
    padding: 1%;
}

.site-1 #g-navigation h1 {
    font-size: clamp(2.5rem, 3.3vw, 5rem)
}

.site-1 #g-navigation .g-menu-item-title {
    font-size: clamp(1.2rem, 1.3vw, 2.5rem);
}

.ql-buttons-2 .g-blockcontent-subcontent {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(29%, 1fr));
    grid-auto-rows: 50px;
    column-gap: 1.5rem;
    row-gap: 1rem;
    justify-content: center;
    position: relative;
    padding: 2% 5%;
    justify-items: center;
    align-items: center;
    padding: 0;
}

.ql-buttons-2 .g-blockcontent-subcontent > div {
    text-align: center;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in;
    position: relative;
}

.ql-buttons-2 .g-blockcontent-subcontent-title {
    display: none;
}

.ql-buttons-2 .g-blockcontent-buttons {
    margin: 0;
}

.ql-buttons-2 .g-blockcontent-buttons a {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    color: var(--primary-color);
    border-radius: 0.5rem;
    background-color: var(--tertiary-color);
    border: 3px solid lightgray;
    transition: all 0.2s ease-in-out;
    overflow: hidden;
}

.ql-buttons-2 .g-blockcontent-buttons a:hover {
    transition: all 0.3s ease-in-out;
    transform: scale(1.05);
}

@media only screen and (min-width: 50.99rem) {
    .homelayout #g-header {
        display: none!important;
    }
}

@media only screen and (max-width: 50.99rem) {
 
    .site-1 #g-navigation > .g-container > .g-grid:nth-child(1) {
        padding: 5%;
    }
    
    .homelayout .hidephonehome {
        display: none!important;
    }

}

/* /*************** SLIDESHOW **************** */

.mass-times-block {
    background-image: url(/images/stories/template/mass-times-border.png);
    background-repeat: repeat-x;
    background-position: center bottom 0;
    background-size: auto 9%;
}

.mass-times-block .g-array-item {
    padding: 1% 2rem 2rem 2rem;
}


/*************** HEADER *******************/
/*************** ABOVE ********************/
/*************** SHOWCASE *****************/
/*************** UTILITY ******************/
/*************** FEATURE ******************/
/*************** MAIN *********************/

.site-1-home #g-container-main h2, 
.site-1-home #g-container-main h2.g-title, 
.site-1-home #g-container-main h3.g-title {
	 font-weight: 500;
	 font-size: 2.5rem;
	 font-variant-caps: var(--font-small-caps);
	 
}
.site-1-home #g-container-main .g-blockcontent-header {
	padding-bottom: 0;
}


#eapps-facebook-feed-1 {
    margin-bottom: 1.3rem;
}

/*.site-1-home #g-container-main .button {
    color: var(--primary-color);
    border-radius: 0;
    background-color: white;
    border: 3px solid lightgray;
    transition: all 0.2s ease-in-out;
}*/




/*************** EXPANDED *****************/ 
/*************** EXTENSION ****************/
/*************** BOTTOM *******************/

.parallax-section {
    height: 24vw;
    background: url("/images/stories/template/footer-image.jpg") center no-repeat;
    position: relative;
    background-size: cover;
}

.parallax-section::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: rgba(0,0,0,.25);
}
  

/*************** FOOTER *******************/
#g-footer .g-content-array {margin: 0;}

.site-1 #g-footer {
    padding: 0 5%;
}

.site-1 #g-footer :is(p,a) {
    color: var(--primary-color);
    font-size: clamp(1.2rem, 1.5vw, 3rem);
}

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

.need-services #g-mainbar {
    padding: 0 9% !important;
}

/* minor homepage adjustments */

@media (min-width: 769px) {
    #g-aside > div:nth-child(2) > div > div {
        padding: 0 1rem;
    }
    
    #contentarray-9050-particle {
        padding-right: 0;
    }

    .grid-staff .g-content-array {
        gap: 2rem;
    }
}

.site-1 #g-footer a:hover:not(:has(img)) {
    opacity: 0.75;
}

@media (min-width: 50.99rem) {
    :is(.site-1-home, .site-2-home) #g-top .modern-alert .g-joomla-articles {
        padding: 0 3% !important;
    }
   }

   .g-offcanvas-toggle {
    background: var(--default-white);
    display: grid;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
  }
  
.holy-art .g-content {
    margin: 0;
    padding: 0;
}