@import url('//fonts.googleapis.com/css2?family=Marcellus&family=Questrial&display=swap');
/************ TEMPLATE  ************
Fonts - Questrial
-------------------------
Parish Colors:
Red: #831618 rgba(131,22,24,1)
Grey: #58595B rgba(88,89,91,1)
Lightest Grey: #F1F2F2 rgba(241,242,242,1)
White
Burgandy (the other red in the logo, not used in mockup) - #540E0F rgba(84,14,15,1)
--------------------------
School Colors:
Navy: #001940 rgba(0,25,64,1)
Red: #831618 rgba(131,22,24,1)
Grey: #58595B rgba(88,89,91,1)
Lightest Grey: #F1F2F2 rgba(241,242,242,1)
White
--------------------------

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

.site-1 {
    --primary-color: #831618;
    --secondary-color: #58595B;

    --primary-rgb: 131,22,24;
    --secondary-rgb: 88,89,91;

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

    --title-font-family: 'Marcellus', serif;
    --body-font-family: 'Questrial', 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: rgba(0,0,0,.3);
    --mt-header-color: BCBEC0;
    --mt-para-color: var(--default-white);

    --ql-title-color: var(--default-white);
    --ql-background-color: rgba(0,0,0,.3);
    --ql-background-hover: rgba(0,0,0,.5);

    --rok-mini-badge: var(--primary-color);

    --info-title-size: 2vw;
}
.site-2 {
    --primary-color: #831618;
    --secondary-color: #58595B;
    --third-color: #001940;

    --primary-rgb: 131,22,24;
    --secondary-rgb: 88,89,91;
    --thrid-rgb: 0,25,64;
    

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

    --title-font-family: 'Marcellus', serif;
    --body-font-family: 'Questrial', 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: rgba(0,0,0,.3);
    --mt-header-color: BCBEC0;
    --mt-para-color: var(--default-white);

    --ql-title-color: var(--default-white);
    --ql-background-color: rgba(0,0,0,.3);
    --ql-background-hover: rgba(0,0,0,.5);

    --rok-mini-badge: var(--primary-color);

    --info-title-size: 2vw;
}

.site-1 .ql-fa-toplinks {
    --ql-title-color: var(--primary-color);
    --ql-background-hover: rgba(0,0,0,.15);
}
.site-2 .ql-fa-toplinks {
    --ql-title-color: var(--primary-color);
    --ql-background-hover: rgba(0,0,0,.15);
}
.site-landing .grid-link-tiles {
    --grid-bg: rgba(0,0,0,.3);
    --grid-bg-hover: rgba(0,0,0,.5);
}

@media only screen and (max-width: 50.99rem) {
    .grid-tiles {
        --grid-title-color: var(--primary-color);
    }
    .site-landing .grid-dm {
        --grid-title-color: var(--primary-color);
        --grid-title-font-size-mobile: 6vw;
    }
}

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

.item-image {
    display: none;
}

a.bigbutton { 
  color: var(--primary-color); 
  font-size: 1.75rem;
  text-transform: none;
  text-align: center;
  font-weight: normal;
  background: transparent; 
  padding: .7rem 1.3rem; 
  border-radius: .5rem; 
  margin: 0;
  display:inline-block;
  font-weight: 500;
  line-height: 1.125rem;
  border: 2px solid var(--primary-color);
  transition: all .2s ease-in;
}
.bigbutton:hover {background: var(--primary-color); color: white; }


/*************** 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) {
    .site-1 #g-navigation {
        background: url('/images/template/header.jpg') 50% 0% no-repeat;
        background-size: cover;
        padding-bottom: 2vw!important;
    }
    .site-1-sub #g-navigation {
        padding-bottom: 0!important;
    }
    .site-2 #g-navigation {
        background: url('/images/template/header-school.jpg') 50% 0% no-repeat;
        background-size: cover;
        padding-bottom: 2vw!important;
    }
    .site-2-sub #g-navigation {
        padding-bottom: 0!important;
    }
}
@media only screen and (max-width: 50.99rem) {
    .ql-fa-toplinks .g-blockcontent-subcontent-block-content > .g-blockcontent-subcontent-title {
        display: flex;
    }
    .ql-fa-toplinks .g-blockcontent-subcontent-block {
        align-items: flex-start;
    }
}

/*************** SLIDESHOW ****************/ 
.site-1 .mass-times-block {
    background: url('/images/template/masstimes1.jpg') 50% 50% no-repeat;
    background-size: cover;
}

.site-2 .mass-times-block {
    background: url('/images/stories/template/schoolhours24.jpg') 50% 50% no-repeat;
    background-size: cover;
}

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

/*************** HEADER *******************/
/*************** ABOVE ********************/
/*************** SHOWCASE *****************/
/*************** UTILITY ******************/
@media only screen and (min-width: 50.99rem) {
    .site-1-home #g-utility {
        padding: 1vw 5%!important;
    }
    .site-2-home #g-utility {
        padding: 1vw 5%!important;
    }
}

@media only screen and (max-width: 50.99rem) {
    .site-landing #g-utility {
        padding: 2rem 5%;
    }
}

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

@media only screen and (min-width: 50.99rem) {
    .ph-sidepics-3 .g-content-array > .g-grid {
        box-shadow: none;
        background: none;
    }
    .ph-sidepics-3.ph-square .g-array-item-image {
        border-radius: 50%;
        overflow: hidden;
        box-shadow: 0px 0px 15px rgba(0,0,0,.25);
    }
    .ph-sidepics-3 .g-grid:hover {
        transform: none;
    }
    .ph-sidepics-2 .g-grid:hover > .g-block {
        background: #ffffff;
        border-top-left-radius: 6vw;
        border-bottom-left-radius: 6vw;
    }
    .ph-sidepics-3 .g-title {
        border-bottom: 1px solid var(--secondary-color);
        color: var(--primary-color);
    }
}

@media only screen and (max-width: 50.99rem) {
    .ph-sidepics-3 .g-title {
        text-align: center;
    }
}

/*************** EXPANDED *****************/ 
/*************** EXTENSION ****************/
.site-1-home #g-extension {
    background: url('/images/template/marble-paralax.jpg') 50% 0% no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.site-2-home #g-extension {
    background: url('/images/template/marble-paralax.jpg') 50% 0% no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
@media only screen and (max-width: 50.99rem) {
    .site-1-home #g-extension {
        background-attachment: initial;
    }
    .site-2-home #g-extension {
        background-attachment: initial;
    }
}

@media only screen and (min-width: 50.99rem) {
    .info-boxes .g-content-array {
        display: flex;
        flex-direction: row;
        margin: 0;
        justify-content: center;
    }
    .info-boxes .g-content-array > .g-grid {
        flex: 1;
        margin: 0;
        min-width: 0px;
        max-width: 600px;
    }
    .info-boxes .info-box-buttons {
        margin: 0;
        padding: 0;
        text-align: center;
    }
    .info-boxes .newsfeed {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    .info-boxes .newsfeed .feed-link > a {
        font-weight: 700;
    }
    .info-boxes .info-box-image {
        height: 13vw;
        max-height: 450px;
        max-width: 600px;
        overflow: hidden;
        box-shadow: var(--default-box-shadow);
    }
    .info-boxes .info-box-image img {
        width: 100%;
        height: 100%;
        object-position: center;
        object-fit: cover;
    }
    .info-boxes .info-box-outer {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .info-boxes .info-box-inner {
        max-width: 600px;
    }
    .info-boxes .info-box-title :is(h1,h2,h3,h4,h5,h6) {
        font-size: var(--info-title-size);
    }
    .info-boxes .info-box-title {
        padding: 0 1rem;
    }
    .info-boxes .info-box-desc {
        padding: 0 1rem;
        font-size: var(--info-text-size);
    }
    .info-boxes .info-box-desc p {
        padding: 0 1rem;
        font-size: var(--info-text-size);
    }
}

@media only screen and (min-width: 50.99rem) and (max-width: 3150px) {
    .info-boxes .info-box-image {
        height: 21vw;
    }
}

@media only screen and (min-width: 120rem) {
    .info-boxes .info-box-title :is(h1,h2,h3,h4,h5,h6) {
        font-size: var(--info-title-max-size);
    }
    .info-boxes .info-box-desc {
        font-size: var(--info-text-max-size);
    }
    .info-boxes .info-box-desc p {
        font-size: var(--info-text-max-size);
    }
}

@media only screen and (max-width: 50.99rem) {
    .info-boxes .info-box-outer {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .info-boxes .info-box-inner {
        max-width: 600px;
    }
}

/*************** BOTTOM *******************/
/*************** FOOTER *******************/
#g-footer .g-content-array {margin: 0;}
#g-footer a {color: var(--default-white);} 
#g-footer :is(h1,h2,h3,h4,h5,h6) {
    color: var(--default-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(--default-white); 
    background: var(--secondary-color);
} 
/*************** SECTIONS *****************/
/*************** MOBILE *******************/ 
/*************** ADS **********************/

@media only screen and (min-width: 50.99rem) {
    .social-icons-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .social-icons-container > .inner-icons {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .social-icons-container .social-icon-block {
        margin-right: .5vw;
    }
    .social-icons-container > .inner-icons img {
        height: 1.5vw;
        width: auto;
    }
}

@media only screen and (max-width: 50.99rem) {
    .social-icons-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .social-icons-container > .inner-icons {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .social-icons-container .social-icon-block {
        margin-right: 2vw;
    }
    .social-icons-container > .inner-icons img {
        height: 6vw;
        width: auto;
    }
}

.site-landing #g-expanded {
    background: url('/images/template/marble-paralax.jpg') 50% 0% no-repeat;
    background-size: cover;
    padding: 2vw 10%!important;
}

/*.site-landing #g-showcase {
    padding: 2vw 10%!important;
}*/

/*@media only screen and (max-width: 50.99rem) {
    .grid-tiles .g-content-array {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 2%;
        margin: 1vw;
        justify-content: center;
    }
    .grid-tiles .g-content-array > .g-grid {
        flex: auto;
        margin: 0;
        padding: 0;
        margin-bottom: 2%;
        overflow: hidden;
        border-radius: var(--grid-border-radius);
        box-shadow: var(--grid-box-shadow);
        transition: var(--default-transition);
    }
    .grid-tiles.grid-uw .g-content-array > .g-grid {
        flex: auto;
        height: var(--grid-tile-height-mobile);
        width: calc(var(--grid-tile-height-mobile) * 3.6/1);
        max-width: calc(var(--grid-tile-height-mobile) * 3.6/1);
    }
    .grid-tiles.grid-sw .g-content-array > .g-grid {
        flex: auto;
        height: var(--grid-tile-height-mobile);
        width: calc(var(--grid-tile-height-mobile) * 2.39/1);
        max-width: calc(var(--grid-tile-height-mobile) * 2.39/1);
    }
    .grid-tiles.grid-wide .g-content-array > .g-grid {
        flex: auto;
        height: var(--grid-tile-height);
        width: calc(var(--grid-tile-height) * 16/9);
        max-width: calc(var(--grid-tile-height-mobile) * 2.39/1);
    }
    .grid-tiles.grid-standard .g-content-array > .g-grid {
        flex: auto;
        height: var(--grid-tile-height-mobile);
        width: calc(var(--grid-tile-height-mobile) * 4/3);
        max-width: calc(var(--grid-tile-height-mobile) * 4/3);
    }
    .grid-tiles.grid-square .g-content-array > .g-grid {
        flex: auto;
        height: var(--grid-tile-height-mobile);
        width: var(--grid-tile-height-mobile);
        max-width: var(--grid-tile-height-mobile);
    }
    .grid-tiles.grid-portrait .g-content-array > .g-grid {
        flex: auto;
        height: var(--grid-tile-height-mobile);
        width: calc(var(--grid-tile-height-mobile) * 3/4);
        max-width: calc(var(--grid-tile-height-mobile) * 3/4);
    }
    .grid-tiles .g-content-array > .g-grid > .g-block {
        margin: 0;
        padding: 0;
    }
    .grid-tiles .g-content-array > .g-grid > .g-block > .g-content {
        margin: 0;
        padding: 0;
    }
    .grid-tiles .g-array-item {
        position: relative;
        overflow: hidden;
    }
    .grid-tiles .g-array-item-image {
        margin: 0;
        padding: 0;
    }
    .grid-tiles .g-array-item-image img {
        height: var(--grid-tile-height-mobile);
        width: 100%;
        object-position: center;
        object-fit: cover;
    }
    .grid-tiles .g-array-item-title {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: var(--grid-tile-height-mobile);
        width: 100%;
        margin: 0;
        padding: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        background: var(--grid-bg);
    }
    .grid-tiles .g-item-title {
        color: var(--grid-title-color-mobile);
        border-bottom: none;
        font-family: var(--grid-title-font);
        font-size: var(--grid-font-size-mobile);
    }
    .grid-tiles .g-item-title > a {
        color: var(--grid-title-color);
    }
    .grid-tiles .g-array-item-read-more {
        position: unset;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        z-index: 5;
    }
    .grid-tiles .g-array-item-read-more a {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        opacity: 0;
        background: transparent;
    }
    .grid-tiles .g-content-array > .g-grid:hover {
        transform: scale(.95);
    }
    .grid-tiles .g-content-array-pagination {
        width: 100%;
    }
}*/

@media only screen and (max-width: 50.99rem) {
    .grid-tiles {
        margin: 0;
        padding: 0;
    }
    .grid-tiles > div {
        margin: 0;
        padding: 0;
    }
    .grid-tiles .g-content-array {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 1rem;
        justify-content: flex-start;
    }
    .grid-tiles .g-content-array > .g-grid {
        margin: 0;
        padding: 0;
        width: 100%;
        max-width: 100%;
        justify-content: center;
        align-items: center;
        transition: all .3s ease-in-out;
    }
    .grid-tiles .g-content-array > .g-grid > .g-block {
        margin: 0;
        padding: 0;
    }
    .grid-tiles .g-content-array > .g-grid > .g-block > .g-content {
        margin: 0;
        padding: 0;
    }
    .grid-tiles .g-array-item {
        margin: 0;
        padding: 0;
        position: relative;
        display: flex;
        flex-direction: row;
        text-align: center;
        overflow: hidden;
        transition: var(--grid-transition);
        background: var(--default-white);
        box-shadow: var(--grid-box-shadow);
    }
    .grid-tiles .g-array-item-image {
        margin: 0;
        padding: 0;
    }
    .grid-tiles .g-array-item-image img {
        width: var(--grid-img-width-mobile);
        object-position: center;
        object-fit: cover;
        border-radius: var(--grid-border-radius);
        transition: all .3s ease-in-out;
    }
    .grid-tiles.grid-uw .g-array-item-image img {
        height: calc(var(--grid-img-width-mobile) * 1/3.6);
    }
    .grid-tiles.grid-sw .g-array-item-image img {
        height: calc(var(--grid-img-width-mobile) * 1/2.39);
    }
    .grid-tiles.grid-wide .g-array-item-image img {
        height: calc(var(--grid-img-width-mobile) * 9/16);
    }
    .grid-tiles.grid-standard .g-array-item-image img {
        height: calc(var(--grid-img-width-mobile) * 3/4);
    }
    .grid-tiles.grid-square .g-array-item-image img {
        height: var(--grid-img-width-mobile);
    }
    .grid-tiles.grid-portrait .g-array-item-image img {
        height: calc(var(--grid-img-width-mobile) * 4/4);
    }
    .grid-tiles .g-array-item-title {
        max-width: calc(100% - var(--grid-img-width-mobile));
        margin: 0;
        padding: 2vw;
        text-align: left;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: calc(var(--grid-img-width-mobile) * 9/16);
        position: unset;
    }
    .grid-tiles .g-item-title {
        font-family: var(--grid-title-font);
        font-size: var(--grid-title-font-size-mobile);
        font-weight: var(--grid-title-font-weight);
        border: none;
    }
    .grid-tiles .g-item-title a {
        color: var(--grid-title-color);
    }
    .grid-tiles:not(.grid-staff.grid-dm) .g-array-item-text {
        display: none!important;
    }
    .grid-tiles .g-array-item-read-more {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        border-radius: 0;
        background: transparent;
        color: transparent;
        opacity: 0;
    }
    .grid-tiles .g-array-item-read-more a {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        border-radius: 0;
        background: transparent;
        color: transparent;
        opacity: 0;
    }
    
    .grid-tiles .g-array-item:hover {
        transform: scale(.95);
    }
    .grid-tiles.grid-wide .g-content-array > .g-grid {
        width: 100%;
        max-width: 100%;
        height: calc(var(--grid-img-width-mobile) * 9/16);
    }
}

/* centering a footer logo */

.grid-center {
    display: grid;
    align-items: center;
    justify-content: center;
}

.grid-center img {
    width: 85%;
}

.hide-lines td,
.hide-lines tr,
.hide-lines {
    border: none;
}