@import url('//fonts.googleapis.com/css2?family=Bellefair&family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/************ TEMPLATE  ************
Rotator Size: 1000x563 (wide, 16:9)

/************ FONTS  ************
Serif: Bellefair
Sans Serif: Lato

/************ COLORS  ************
Blue: #32385A; rgba(50,56,90,1)
Grey: #939598; rgba(147,149,152,1)
Light Grey: #F1F2F2

/************ NOTES ************
*Icon QL in top right are all fa icons
*Menu is blue at 80% - rgba(50,56,90,.8)
*Rotator text background is blue at 60% - rgba(50,56,90,.6)
*bottom row of QL - black at 30% - rgba(0,0,0,.3) 
*bottom QL text have a dropshadow - 100%,2px,2px,2px
***********************************/

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

h1, h2, h3, h4, h5, h6 {margin: .75rem 0; line-height: 1.3; font-weight: normal;}
p {line-height: 1.3;}
.page-header h1 {text-transform: none; font-size: 3rem;}
h1 {color: #32385A; font-size: 3.5rem; font-weight: bold; font-family: 'Lato', sans-serif;}
h2, .page-header h2 {font-variant-caps: small-caps; color: #32385A; font-size: 2.2rem; font-family: 'Lato', sans-serif;  font-weight: bold;}
h3 {color: #32385A; font-size: 1.8rem; border-bottom: 1px solid #939598; line-height: 1.3; margin: 0 0 10px 0; font-family: 'Bellefair', serif;}
h4 {color: #32385A; font-size: 1.8rem;}
h5 {background: #939598; font-size: 1.75rem; color: white; border-radius: .2rem; padding: .5rem;}
h6 {color: #32385A; font-size: 1.4rem; text-transform: uppercase; font-weight: bold;}
a {color: #0722ce;}
a:hover {color: black;}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
    h1 {font-size: 2.2rem;}
    h2 {font-size: 1.75rem;}
    h3 {font-size: 1.75rem;}
    h4 {font-size: 1.75rem;}
    h5 {font-size: 1.2rem;}
    h6 {font-size: 1.2rem;}
    p {font-size: 1rem; margin-bottom: 4px;}
    h1, h2, h3 {line-height: 1.2;}
    h4, h5, h6, p {line-height: 1.1;}
}

@media only screen and (max-width: 767px) {
 h1 {font-size: 2.2rem;}
 h2 {font-size: 1.75rem;}
 h3 {font-size: 1.75rem;}
 h4 {font-size: 1.75rem;}
 h5 {font-size: 1.2rem;}
 h6 {font-size: 1.2rem;}
 p {font-size: 1rem; margin-bottom: 4px;}
 h1, h2, h3 {line-height: 1.2;}
 h4, h5, h6, p {line-height: 1.1;}
}

.readon, .button, .btn, p.readmore .btn, .sprocket-lists-portrait-container > li .sprocket-lists-portrait-item > a span, .listentobutton.moduletable a {
    background: #939598;
}

.big-blue-button {
    background: #002267;
    color: #A97B2D;
    font-size: 2.5rem;
    padding: 2rem 1rem;
    box-shadow: 0px 0px 10px rgba(0,0,0,.3);
}

/*************** HOMELAYOUT ***************/
.homelayout #g-page-surround {background: url('/images/template/bg-church.jpg') 120% 0% no-repeat; background-size: 75%;}
h3.g-title {border-bottom: none;}

@media only screen and (max-width: 767px) {
    .homelayout #g-page-surround {background: #ffffff;}
}

/*************** OFFCANVAS ****************/
/*************** TOP **********************/
#g-top:not(.homelayout #g-top) {background: url('/images/template/bg-church.jpg') 120% 0% no-repeat; background-size: 75%;}
.top-phone p {
    margin-bottom: .5vw;
}

#g-top {padding: 0 5%!important;}
        /*Logo*/
.g-logo img {margin: 2vw 0 .5vw 0; height: 6vw; width: auto;}

        /*toplinks*/
.toplinks .g-iconmenu > a  {color: #32385A; border-left: 2px #064373 solid;}
.toplinks .g-iconmenu > a:hover {color: #32385A; background: rgba(255,255,255,.8);}

@media only screen and (max-width: 767px) {
    #g-top:not(.homelayout #g-top) {background: none;}
    #g-top {padding: 0!important;}

    .g-logo img {margin: 5vw 0; height: 13vw;}
	.toplinks .g-iconmenu > a:hover {color: #32385A; background: rgba(50, 56, 90, 0.5);}
    .toplinks .g-iconmenu-text {font-size: 2vw!important;}
}

/*************** NAVIGATION ***************/
@media only screen and (max-width: 767px){
	#g-navigation {border-bottom: 1px solid rgba(50, 56, 90, 0.8);}
}

/*************** SLIDESHOW ****************/
/*************** HEADER *******************/
/*************** ABOVE ********************/
/*************** SHOWCASE *****************/
.homelayout #g-showcase {padding: 2vw 10%!important;}
.hero img {height: 19vw;}

        /*Rotator*/

        /*Mass Times*/
.mt-text {background: rgba(50,56,90,.6); padding: 1vw 4vw;}
.mt-text :is(h1,h2,h3,h4,h5,h6) {font-family: 'Bellefair', serif; font-size: 1.6vw;}
.mt-text p {font-size: .9vw;}

@media only screen and (max-width: 767px) {
    .homelayout #g-showcase {padding: 0!important;}

    .mt-text :is(h1,h2,h3,h4,h5,h6) {font-size: 7vw;}
    .mt-text p {font-size: 3vw;}
}

/*************** UTILITY ******************/
#g-utility h3.g-title {font-size: 3.0rem;}

        /*Solid Quicklinks*/
.qlsolidback .sprocket-strips-item {background: #32385A; color: #ffffff; width: 90%;}
.qlsolidback .sprocket-strips-item a, .qlsolidback .sprocket-strips-item .sprocket-strips-title {color: #ffffff;}
.qlsolidback .sprocket-strips-item:hover {background: #939598;}

/*************** FEATURE ******************/
#g-feature h3.g-title {font-size: 2.8rem;}

        /*Parish News*/
.rsphotoblocknews .sprocket-strips .sprocket-strips-nav .arrow {top: 44%; color: #939598;}
.rsphotoblocknews .sprocket-strips .sprocket-strips-nav .arrow.next {right: -29px;}
.rsphotoblocknews .sprocket-strips .sprocket-strips-nav .arrow.prev {left: -35px;}
.rsphotoblocknews .sprocket-strips-item .readon:hover {background: rgba(50,56,90,.95);}
.rsphotoblocknews .sprocket-strips-content h4 {background: rgba(50,56,90,.85);}
.rsphotoblocknews .sprocket-strips-item {background-image: url(/images/stories/template/default-news.jpg);}
.rsphotoblocknews .sprocket-strips-container {flex-wrap: wrap;}

@media only screen and (max-width: 767px) {
    .rsphotoblocknews .sprocket-strips-content h4,
    .rsphotoblocknews .sprocket-strips-item .readon:hover {top: 0; background: #174C72;}
}

/*************** EXPANDED *****************/
.homelayout #g-expanded h3.g-title {background: #32385A; border-radius: 7px; width: 100%; color: #ffffff;}

/***reorder columns in a container***/
@media only screen and (max-width: 767px) {
	#g-expanded .g-block:first-child  { order: 2; }
	#g-expanded .g-block:last-child { order: 1; }
	#g-expanded .g-block:nth-child(2) { order: 3; }
}

/*************** EXTENSION ****************/
        /*Overlay Quicklinks*/
#g-extension .sprocket-strips-container li:first-child {margin-left: 0;}
#g-extension .sprocket-strips-container li:last-child {margin-right: 0;}
.qloverlaybackpic .sprocket-strips-content {background: rgba(0,0,0,.3);}
.qloverlaybackpic .sprocket-strips-content:hover {background: rgba(0,0,0,.5);}

@media only screen and (max-width: 767px) {
    #g-extension .sprocket-strips-container li:first-child {margin-left: 1%;}
    #g-extension .sprocket-strips-container li:last-child {margin-right: 1%;}
	.qloverlaybackpic .sprocket-strips-content, .qloverlaybackpic .sprocket-strips-content:hover {background: none;}
	.qloverlaybackpic li {background: rgba(50,56,90,1);}
    .qloverlaybackpic li:hover {background: black;}
}

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

/*************** FOOTER *******************/
#g-footer :is(h1,h2,h3,h4,h5,h6) {color: #ffffff; border-bottom: none;}

#g-footer .footertable {padding: 2vw 5vw;}
#g-footer .footertable > div {display: flex; justify-content: center;}
#g-footer .innerbox {width: 60%;}
#g-footer .newsfeed {margin: 0;}
#g-footer .dr .feed-item-description {overflow: hidden; word-break: break-word; text-overflow: ellipsis; display: block; max-height: 6em; line-height: 1.5em;}
#g-footer .sod .feed-item-description {overflow: hidden; word-break: break-word; text-overflow: ellipsis; display: block; max-height: 4.5em; line-height: 1.5em;}
#g-footer .feed-item-description h4 {font-size: 1.1em; margin: 0; line-height: 1.5em;}
#g-footer .feed-item-description p {text-align: left; line-height: 1.5em;}
#g-footer .newsfeed li::marker {display: none; color: transparent;}

@media only screen and (max-width: 767px) {
    #g-footer .footertable {text-align: center;}
    #g-footer .innerbox {width: 80%;}
}

/*************** COPYRIGHT ****************/

/*************** MODULES ******************/
.moduletable .nav.menu, .moduletable .unstyled {background: #32385A;}
.moduletable .nav.menu li.current.active a, .moduletable .nav.menu li a:hover {
    color: #ffffff;
    background: #939598;
}

/*************** SECTIONS *****************/
#g-footer a {color: #ffffff;}

/*************make news images smaller*****************/
.newslayout .pull-right.item-image img { max-width: 25vw;}
.newslayout .pull-left.item-image img { max-width: 25vw;}
@media only screen and (max-width: 767px) {
	.newslayout .pull-left.item-image img { width: 100%;}
	.newslayout .pull-right.item-image img { width: 100%;}
} 

/*************** MOBILE *******************/
.g-offcanvas-toggle {color: #32385A;}

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

/*************** FR ROCKS *****************/
.frrocks {transition: .2s ease-in-out all;}
.frrocks:hover {animation-name: rocks; animation-duration: .3s; animation-iteration-count: 4; width: 95%;}

@keyframes rocks {
    0% {transform: rotate(0deg);}
    50% {transform: rotate(3deg);}
    100% {transform: rotate(-3deg);}
}

/************** GREY BOX ******************/
.greybox {background: #939598;}
.greybox h3.g-title {background: #32385A; color: #ffffff;}

/************** ERROR PAGE ****************/
.outline-_error #g-page-surround {background: #ffffff;}
.outline-_error #g-top {background: url('/images/template/bg-church.jpg') 120% 0% no-repeat; background-size: 75%;}

@media only screen and (max-width: 767px) {
    .outline-_error #g-top {background: none;}
}


#casasponsorpage h3 { font-weight: 400 !important;;}

@media only screen and (min-width: 767px) {
    .buy-button {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-bottom: 2vw;
    }
    .buy-button .button {
        background: #32385A;
        color: #ffffff;
        font-size: 1.25vw;
        line-height: 1;
        padding: 1vw 3vw;
        box-shadow: 4px 4px 5px rgba(0,0,0,.3);
        border: 3px solid #ff0000;
    }
    .buy-button .button:hover {
        transform: scale(1.05);
    }
}

@media only screen and (max-width: 767px) {
    .buy-button {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    .buy-button .button {
        background: #32385A;
        color: #ffffff;
        font-size: 4vw;
        line-height: 1;
        padding: 1rem;
        box-shadow: 4px 4px 5px rgba(0,0,0,.3);
        border: 3px solid #ff0000;
    }
    .buy-button .button:hover {
        transform: scale(1.05);
    }
}

.center-title .page-header h2 {
    text-align: center;
}

.center-title .button {
    background: #32385A;
}

.center-title .button:hover {
    background: #777777;
}

.solutio-icons {
    line-height: 0;
}

@media only screen and (min-width: 767px) {
    #g-top .g-iconmenu:has(.solutio-icons) {
        transform: translateY(50%);
    }
}