@import url('//fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Merriweather+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
@import url('//fonts.googleapis.com/css2?family=Satisfy&display=swap');
/************ TEMPLATE  ************
Green: #006548 rgba(8,76,55,1)
Orange: #AC772F rgba(172,119,47,1)

serif: 'Libre Baskerville', serif
sans-serif: 'Merriweather Sans', sans-serif
************/

body { color: #333;  font-family: 'Lato', sans-serif;}
.g-main-nav { font-family: 'Lato', sans-serif;}

.parish-1 {
    --primary-color: #084C37;
    --secondary-color: #AC772F;

    --primary-rgb: 8,76,55;
    --secondary-rgb: 172,119,47;

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

    --title-font-family: 'Libre Baskerville', serif;
    --body-font-family: 'Merriweather Sans', 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-para-color: var(--default-white);
    --mt-fixed-height: 36vw;
    --mt-background-color: rgba(var(--secondary-rgb),.8);

    --ql-title-color: var(--default-white);
    --ql-background-color: rgba(var(--primary-rgb),.5);
    --ql-background-hover: rgba(var(--primary-rgb),.7);
    --ql-icon-size-desktop: 1vw;
    --ql-icon-size-mobile: 2rem;
    --ql-font-size-desktop: 1.5vw;
    --ql-font-size-mobile: 4vw;
    --ql-right-border-size: 4px;
    --ql-right-border-color: var(--default-white);

    --ph-title-color: var(--default-white);
    --ph-width: 20vw;
    --ph-height: calc(var(--ph-width) * 4/3);
    --ph-title-font-size-desktop: 1.5vw;
}
.ql-fa-toplinks-2 {
    --ql-background-color: rgba(var(--secondary-rgb),.2);
    --ql-icon-size-mobile: 5vw;
    --ql-font-size-desktop: 1vw;
    --ql-font-size-mobile: 3vw;
    --ql-box-shadow: 0px 0px 5px rgba(0,0,0,.25);
}

p.spanish {line-height: 1.3; font-family: 'Lato', sans-serif; font-size: 1.15rem; margin-left: 0 !important;  min-height: 10px !important;}
ul.spanish {line-height: 1.3; font-family: 'Lato', sans-serif; font-size: 1.15rem; margin: 1rem 0 1rem 1.5rem !important; width: 95%;}

h6.satisfy {font-family: 'Satisfy', cursive; font-size: 1.5rem; text-transform: none; font-weight: 400; }

.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: 'Merriweather Sans', sans-serif;
} 

a {color: #07855F;}

/*************** HOMELAYOUT ***************/ 
@media only screen and (min-width: 50.99rem) {
    .parish-home .fullwidth-swiper {box-shadow: var(--default-box-shadow);}
    .parish-home .mass-times-block {box-shadow: var(--default-box-shadow);}
    .parish-home .ql-inner-box .g-blockcontent-subcontent-block-content {box-shadow: var(--default-box-shadow);}
}

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

@media only screen and (max-width: 50.99rem) {
    #g-offcanvas .g-menu-item-title {font-size: 4vw;}
}

/*************** TOP **********************/ 
/*************** NAVIGATION ***************/
.g-main-nav .g-toplevel {padding-left: 7%;}
.g-logo-icon img {width: 85%; height: auto; margin-left: 1vw; margin-bottom: -1.5vw; z-index: 20; position: relative;}
.g-logo-text img {width: 80%; height: auto;}
#g-navigation {background: url('/images/template/mary-header.jpg') 100% 0% no-repeat; background-size: 42%; margin-bottom: -18vw!important; padding-bottom: 18vw!important;}
#g-navigation > .g-container > .g-grid {align-items: stretch;}
#g-navigation > .g-container > .g-grid > .g-block:nth-child(2) {align-items: center;}
.ql-fa-toplinks-2 {margin-top: 1vw;}

@media only screen and (max-width: 50.99rem) {
    #g-navigation {background: #ffffff; margin: 0!important; padding: 0!important;}
    #g-navigation .g-logo {margin: 1rem auto; max-width: 70%;}
}

/********** MOBILE OPTION ***************/
@media only screen and (max-width: 50.99rem) {
    #g-slideshow .fullwidth-swiper > .g-content {padding: 1rem; border-radius: 1rem;}
    #g-slideshow .fullwidth-swiper .swiper-container {border-radius: 1rem; box-shadow: var(--default-box-shadow);}
    #g-slideshow .fullwidth-swiper .swiper-slide {border-radius: 1rem;}
    #g-slideshow .fullwidth-swiper .swiper-slide > img {border-radius: 1rem;}
    #g-slideshow .mass-times-block {padding: 1rem;}
    #g-slideshow .mass-times-block > .g-content {border-radius: 1rem; overflow: hidden; box-shadow: var(--default-box-shadow);}
    #g-above .ql-dm {padding: 1rem;}
    #g-above .ql-dm .g-blockcontent-subcontent-block {box-shadow: var(--default-box-shadow);}
    #g-mainbar .ph-photoblocknews {padding: 1rem;}
    #g-mainbar .ph-photoblocknews > .g-content {margin: 0; padding: 0;}
    #g-mainbar .ph-default-mobile .g-content-array > .g-grid > .g-block > .g-content {box-shadow: none;}
    #g-mainbar .ph-default-mobile .g-content-array > .g-grid .g-array-item {border-radius: 1rem; overflow: hidden; box-shadow: var(--ph-box-shadow);}
}

/*************** SLIDESHOW ****************/ 
.mass-times-block {background: none;}
.mass-times-block .g-array-item-text p {margin-bottom: .5vw;}

.hero img {opacity: 0.85;}

/*************** HEADER *******************/
/*************** ABOVE ********************/
@media only screen and (min-width: 50.99rem) {
    .ql-inner-box .g-blockcontent-subcontent-title > .g-blockcontent-subcontent-title-text {border: none;}
}

/*************** SHOWCASE *****************/
/*************** UTILITY ******************/
/*************** FEATURE ******************/
/*************** MAIN *********************/
.parish-home #g-container-main {margin-top: 2vw;}

@media only screen and (max-width: 50.99rem) {
    .parish-home #g-container-main > .g-grid > .g-block:nth-child(1) {order: 2;}
    .parish-home #g-container-main > .g-grid > .g-block:nth-child(2) {order: 1;}
    .parish-home #g-aside > .g-grid {flex-direction: row; flex-wrap: nowrap;}
}

/*************** EXPANDED *****************/ 
.parish-home #g-expanded h3.g-title {border-bottom: none; font-size: 2.5vw;}
.jp-img img {height: auto; width: 100%; max-width: 800px;}

@media only screen and (max-width: 50.99rem) {
    .parish-home #g-expanded {background: rgba(var(--secondary-rgb),.2);}
    .parish-home #g-expanded h3.g-title {font-size: 10vw;}
    .jp-img img {width: 100%; height: auto;}
}

/*************** EXTENSION ****************/
.parish-home #g-extension .g-title {background: var(--primary-color); color: var(--default-white)}

@media only screen and (max-width: 50.99rem) {
    .parish-home #g-extension > .g-grid > .g-block:nth-child(2) > .g-content {margin: 0; padding: 0;}
    .parish-home #g-extension > .g-grid > .g-block:nth-child(2) > .g-content > .g-content-array > .g-grid > .g-block > .g-content {margin: 0; padding: 0;}
    .parish-home #g-extension > .g-grid > .g-block:nth-child(2) > .g-content > .g-content-array {margin-left: 0; margin-right: 0;}
    .jp-img {margin: 0; padding: 0;}
}

/*************** BOTTOM *******************/
#g-bottom {padding: 1vw!important;}

/*************** FOOTER *******************/
#g-footer .g-content-array {margin: 0;}
#g-footer a {color: #ffffff;} 
.footer-box {display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 2vw;}

@media only screen and (max-width: 50.99rem) {
    #g-footer {text-align: center;}
    #g-footer .g-logo {text-align: center;}

    .footer-box {flex-direction: column; justify-content: center; text-align: center;}
}

/*************** 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(--default-white); 
    background: var(--secondary-color);
} 
/*************** SECTIONS *****************/
#g-top-nav {display: none;}
#g-mobile-fixed-nav {display: none;}
/*************** MOBILE *******************/ 
body {background-color: var(--primary-color);}
@media only screen and (max-width: 50.99rem) {
@media (display-mode: standalone) {
    body {background-color: var(--primary-color);}
    #g-offcanvas {height: calc(100% - 120pt); top: 40pt; bottom: 80pt;}
    #g-top {margin-top: 40pt!important;}
    #g-navigation .g-logo {display: none;}
    #g-top-nav .g-logo {text-align: center; display: flex; align-items: center; justify-content: center; width: 100%;}
    #g-top-nav .g-logo img {height: 80%; width: auto;}
    #g-page-surround .g-offcanvas-toggle {display: none;}
    #g-page-surround {background: var(--primary-color);}
    #g-top-nav {display: flex; position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 40pt; background: var(--primary-color); z-index: 100; box-shadow: var(--default-box-shadow);}
    .g-offcanvas-toggle {position: fixed!important; z-index: 101; top: 0; left: 10pt; height: 40pt; font-size: 23pt; display: flex; justify-content: center; align-items: center;}
    .g-offcanvas-toggle {color: var(--default-white);} 
    .g-offcanvas-toggle .fa-fw {text-shadow: none;}
    #g-footer {padding-bottom: 80pt;}
    #g-mobile-fixed-nav {display: flex; height: 80pt; background: var(--primary-color); color: var(--default-white); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 100; position: fixed; bottom: 0; left: 0; right: 0; width: 100%; box-shadow: var(--default-box-shadow)}
    .mobile-nav-link {color: var(--default-white); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 60pt;}
    .mobile-nav-link:hover {color: var(--secondary-color);}
    .mobile-fixed-nav {display: flex; flex-direction: row; flex-wrap: nowrap; width: 100%; height: 60pt;}
    .mobile-nav-button {flex: 1;}
}
}


/*************** ADS **********************/