@import url('//fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
/************ TEMPLATE  ************
Serif: Libre Baskerville
Sans Serif: Lato

/************ COLORS  ************
Blue: #173a70; rgba(23,58,112,1)
Red: #7a0a12; rgba(122,10,18,1)
Lightest Blue-grey: #edeff3; rgba(237,239,243,1) >>> background color
************/

.site-1 {
    --primary-color: #173a70;
    --secondary-color: #7a0a12;
    --tertiary-color: #edeff3;

    --primary-rgb: 23,58,112;
    --secondary-rgb: 122,10,18;
    --tertiary-rgb: 237,239,243;

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

    --title-font-family: 'Libre Baskerville', 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-border-radius: 1rem;

    --mt-para-color: var(--default-white);

    --hero-title-left-position: 3.65%;

    --mt-para-desktop: 1vw;

    --ql-background-color: rgba(var(--primary-rgb),0.7);

    --info-box-gap-mobile: 5rem;
}

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

.item-image {
    display: none!important;
}

.section-5-paddings {
    padding: 0 5%;
}

.padding-2-top {
    padding-top: 2%;
}

.moduletable .nav.menu li.current.active a, .moduletable .nav.menu li a:hover {
    color: var(--default-white) !important;
}

.site-1-sub #g-container-main {
    min-height: 36vh;
}

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

/*************** TOP **********************/ 

#g-top .parish-alert .g-array-item {
    padding-left: 5%;
}

#g-top .g-item-title {
    pointer-events: none;
}

.site-1-home .modern-alert-padding {
    padding: 2% 5% !important;
}

@media (max-width: 50.99rem) {
    .site-1-home .modern-alert-padding {
        padding: 2% 5% 2% 15% !important;
    }

    .g-offcanvas-toggle {
        background: white;
        border-radius: 50%;
        display: grid;
        justify-content: center;
        align-items: center;
    }
}

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

.site-1-home .g-social-items a:hover {
    color: #949494 !important;
}

@media only screen and (min-width: 50.99rem) {
    .site-1 #g-navigation {
        background: url('/images/template/bg-header3.png') 0% 15% no-repeat;
        background-size: cover;
    }
    .site-1 #g-navigation .g-logo img {
        width: 70%;
		padding: 2% 3%;
    }
}

@media only screen and (max-width: 50.99rem) {
    .site-1 #g-navigation .g-logo {
        max-width: 75%;
        margin: 1rem auto!important;
    }
}

/*************** SLIDESHOW ****************/
@media only screen and (min-width: 50.99rem) {
    .mass-times-block {
        background: url('/images/stories/template/masstimes.jpg') 50% 50% no-repeat;
    }
}

@media only screen and (max-width: 50.99rem) {
    .fullwidth-swiper {
        order: 1;
    }
    .mass-times-block {
        order: 2;
    }
}

/*************** HEADER *******************/
/*************** ABOVE ********************/
/*************** SHOWCASE *****************/
/*************** UTILITY ******************/

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

@media only screen and (min-width: 50.99rem) {
    .ql-inner-box .g-blockcontent-subcontent-block-content {
        box-shadow: var(--default-box-shadow);
    }
}

/*************** FEATURE ******************/
/*************** MAIN *********************/

@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-container-main > .g-grid > .g-block:last-child {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .site-1-home #g-container-main {
        padding: 2vw 5%!important;
    }
    .site-1-home .ph-lower-title .g-content-array {
        flex-wrap: wrap;
    }
    .site-1-home .ph-lower-title .g-content-array > .g-grid {
        flex: unset;
        width: 48%;
    }
}

@media only screen and (max-width: 50.99rem) {
    .ph-sidebyside-mobile .g-array-item-read-more {
        opacity: 0;
    }
    .ph-sidebyside-mobile .g-array-item-title {
        padding: 1rem;
    }
}
/*************** EXPANDED *****************/ 
@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-expanded {
        padding: 2vw 5%!important;
    }
}

/*************** EXTENSION ****************/
/*************** BOTTOM *******************/
@media only screen and (min-width: 50.99rem) {
    .site-1 #g-bottom {
        padding: 2vw 0!important;
    }
    #g-bottom .admod td {
        padding: 0;
    }
}

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

@media only screen and (min-width: 50.99rem) {
    .footer-wrapper :is(h1,h2,h3,h4,h5,h6) {
        color: var(--default-white);
        font-weight: 600;
    }
    .footer-parishes {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        text-align: center;
        gap: 5vw;
    }
    .footer-info {
        text-align: center;
    }
}

@media (max-width: 50.99rem) {
    .footer-parishes, .footer-info {
        display: grid;
        align-items: center;
        justify-content: center;
    }

    .footer-info {
        padding: 0 5%;
    }

    .footer-info h6 {
        color: white;
    }
}


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

/* fixing the mass times font size */

.site-1-home .mass-times-block :is(h1,h2,h3,h4,h5,h6) {
    font-size: clamp(1.5rem, 2vw, 3rem) !important;
}

.site-1-home .mass-times-block p {
    margin-bottom: 1.2rem;
}

@media (min-width: 50.99rem) {
    .site-1-home .mass-times-block .g-array-item {
        padding-top: 1.75vw;
        padding-bottom: 1.75vw;
    }
}

.g-content-array .g-array-item-text, .g-content-array .g-array-item-read-more {
    margin: 0;
}

/*  Info Boxes */

.site-1-home #contentarray-8507-particle > div > div:nth-child(3) > div > div > div > div.g-array-item-title {
    padding: 0;
    margin-bottom: 1rem;
}
.site-1-home #g-extension {
    padding: 5%;
}

@media (max-width: 50.99rem) {
    .site-1-home #g-extension {
        padding: 10% 5%;
    }
}

/* homepage news */

@media (min-width: 50.99rem) {

    .ph-rec-row-hover .g-content-array.g-joomla-articles {
        justify-content: space-evenly;
    }

    #g-container-main > div > div.g-block.size-19 {
        flex: 0;
        min-width: initial;
    }

}

#ph-addpic > h2 {
    font-size: clamp(2rem, 3vw, 5rem);
    margin-bottom: 2rem;
}

/* resources page */

.link-container {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    width: fit-content;
    padding: 0.5rem 1.5rem;
    background-color: #f1f1f1;
    margin: 0.5rem 0;
    border-left: 10px solid var(--primary-color);
    box-shadow: var(--default-box-shadow);
    min-width: 40%;
}

.link-container p {
    margin: 0;
}

.link-text-container {
    display: grid;
    align-items: center;
}

.link-container a {
    font-size: clamp(1.2rem, 2.5vw, 4rem);
}

.image-picture img {
    border-radius: 50%;
    aspect-ratio: 1/1;
    width: 6vw;
    max-width: 250px;
}

@media (max-width: 50.99rem) {
    .image-picture img {
        width: 100px;
    }

    .link-container {
        min-width: 100%;
        gap: 1rem;
        padding: 0.5rem;
    }
}