@import url('//fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&family=Spectral:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
/************ TEMPLATE  ************
Rotator Size: 1600x669 (super wide, 2.39:1)

/************ FONTS  ************
Serif: Spectral
Sans Serif: Lato

/************ COLORS  ************
Dark Green: #2f4422; rgba(47,68,34,1)
Hunter Green: #627c51; rgba(98,124,81,1)

/************ NOTES ************
*Menu and Rotator text background: Dark Green @ 60% - rgba(47,68,34,.6)
*Quicklinks: black @ 40% - rgba(0,0,0,.4)
*Quicklinks text - dropshadow, black at 100%, 0px, 0px, 5px
*Square buttons, News images, and mainbody white background - have the usual 20%, 0px, 0px, 10px blur dropshadow
*link for Salesian Spirituality: https://sites.google.com/view/wilsonmsfs/animation-centre
************/

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

h1 {color: #2f4422; font-size: 3.5rem; font-weight: bold; font-family: 'Spectral', serif;}
.page-header h1 {text-transform: none; font-size: 2.5rem;}
h2, .page-header h2 {font-variant-caps: small-caps; color: #627c51; font-size: 2.5rem; font-family: 'Spectral', serif; font-weight: bold;}
h3 {color: #2f4422; font-size: 2.25rem; border-bottom: 1px solid #627c51; line-height: 1.3; margin: 0 0 10px 0; font-family: 'Spectral', serif;}
h4 {color: #627c51; font-size: 2.25rem;}
h5 {background: #2f4422; font-size: 2rem; color: white; border-radius: .2rem; padding: .5rem;}
h6 {color: #2f4422; font-size: 1.75rem; text-transform: uppercase; font-weight: bold;}
a {color: #627c51;}
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, .listentobutton.moduletable a {background: #627c51;}
.sprocket-lists-portrait-container > li .sprocket-lists-portrait-item > a span {background: #627c51; border: 1px solid #627c51; color: white; padding: 5px 10px; }
.sprocket-lists-portrait-container > li .sprocket-lists-portrait-item > a span:hover {background: transparent; color: black; padding: 5px 10px;}

/*************** HOMELAYOUT ***************/
#g-page-surround {/*background-color: #2f4422!important;*/ background: url('/images/template/footer.jpg') 0% 100% no-repeat, #2f4422!important; background-size: 100%!important;}

/*************** OFFCANVAS ****************/
/*************** TOP **********************/
/*************** NAVIGATION ***************/
#g-navigation img {padding: 0.5rem 1.5rem}
/*#g-navigation .g-logo img {margin: .5vw 2vw .5vw 3vw; /*margin-left: 3vw;}*/
/*.g-main-nav ul.g-toplevel .g-menu-item {margin-right: 1vw;}*/
/*.homelayout .g-block.size-5 {align-items: flex-end; position: absolute; bottom: 1vw; right: 20px;}*/
.g-social a {margin-right: 7px; line-height: 4rem;}
/*.g-main-nav ul.g-toplevel {justify-content: flex-end; position: absolute; right: 0; top: 0;}*/


/*************** SLIDESHOW ****************/
/*alert*/


/*************** HEADER *******************/

        /*Rotator*/ 
.fwrotator .layout-slideshow .sprocket-features-content {top: 0; bottom: 0; left: 0; right: 0; padding: 0; margin: 0; width: 100%;}
.fwrsolidback .layout-slideshow .sprocket-features-desc {position: absolute; top: 15%; bottom: 5%; left: 3vw; right: 65%; padding: 0; margin: 0; width: 30%; height: 78%; background: rgba(47,68,34,.6); padding: 2vw;}
.fwrsolidback .layout-slideshow .sprocket-features-desc :is(h1,h2,h3,h4,h5,h6) {font-size: 3vw;}
.fwrsolidback .layout-slideshow .sprocket-features-desc a {color: #ffffff;}
.fwrsolidback .layout-slideshow .sprocket-features-desc p {font-size: 1.3vw;}
.fwrsolidback .layout-slideshow .sprocket-features-desc h6 {color: #ffffff; font-size: 1.5vw; margin: 0.75rem 0 0 .1rem; letter-spacing: 2px;}
.fwrbigarrows .layout-slideshow .sprocket-features-arrows .arrow {color: rgba(255,255,255,.5);}
.layout-slideshow .sprocket-features-pagination li {background: #ffffff;}

@media only screen and (max-width: 767px) {
    .homelayout #g-showcase {position: initial; height: 130vw !important; /*auto*/}
    .homelayout #g-showcase .g-grid:first-child {position: initial !important;}
    .homelayout #g-showcase .g-grid:nth-child(2) {position: initial;}
    #g-showcase .g-logo img {margin: 2vw; width: 50%;}
    .fwrsolidback .layout-slideshow .sprocket-features-desc {padding: 4vw;}
    .fwrsolidback .layout-slideshow .sprocket-features-desc p {font-size: 3.2vw;}
	.fwrsolidback .layout-slideshow .sprocket-features-desc h6 {font-size: 3.5vw;}
    .fwrotator .layout-slideshow .sprocket-features-content {top: 42vw; background: #ffffff;}
    .fwrsolidback .layout-slideshow .sprocket-features-desc {top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%;}
	.sprocket-strips-overlay .css-loader-wrapper {width: 0; height: 0; padding: 0;}
	.fwrsuperwide .layout-slideshow .sprocket-features-img-container, .fwrwide .layout-slideshow .sprocket-features-img-container, .fwrultrawide .layout-slideshow .sprocket-features-img-container {
    padding-bottom: 0;
}
}




/*************** ABOVE ********************/
/****Mass Times Table ***/
#g-above {padding: 1% 3%;}
#g-above .g-content {padding: 1rem 0;}
#g-above td {padding: 0;}
#g-above h2 {font-size: 2rem;}

/**** Create a nice looking table with alternating rows *****/
.masstable  {width: 100%;}
	
 @media only screen and (max-width: 767px){ 
   .masstable, .masstable div, .masstable tr, .masstable td, .masstable tbody { display: block; table-layout:auto; width: 100%; border: none; margin: 0;}
}	


/*************** SHOWCASE *****************
.homelayout #g-showcase:not(.outline-_error #g-showcase) {position: relative; height: 42vw; width: 100%;}
.homelayout #g-showcase:not(.outline-_error #g-showcase) .g-grid:first-child {position: absolute; width: 100%; background: rgba(47,68,34,.6); z-index: 10;}
.homelayout #g-showcase:not(.outline-_error #g-showcase) .g-grid:nth-child(2) {position: absolute; width: 100%;}*/


/*************** UTILITY ******************/
.homelayout #g-utility .sprocket-strips-nav {display: none;}

        /*Quicklinks*/
.qloverlaybackpic .sprocket-strips-content {background: rgba(0,0,0,.4);}
.qloverlaybackpic .sprocket-strips-content:hover {background: rgba(0,0,0,.6);}

@media only screen and (max-width: 767px) {
    .homelayout #g-utility {padding-top: 10px!important;}
	.qloverlaybackpic .sprocket-strips-content, .qloverlaybackpic .sprocket-strips-content:hover {background: none;}
	.qloverlaybackpic li {background: rgba(98,124,81,1);}
    .qloverlaybackpic li:hover {background: #2f4422;}
}

/*************** FEATURE ******************/
.homelayout #g-feature {/*margin-bottom: -37vw;*/ background: transparent; padding: 2vw 5%;}
.homelayout #g-feature .g-grid {background: #ffffff; box-shadow: rgba(0,0,0,.2) 0px 0px 10px;}

        /*Recent News*/
.sprocket-lists-portrait-pagination li {background: #2f4422;}
.sprocket-lists-portrait-container li {padding: 15px 0; border-bottom: 1px solid #627c51}
.zoompics .sprocket-lists-portrait-arrows .arrow {color: #2f4422;}
.zoompics .active .portrait-image img, .zoompics.noncollapse .portrait-image img {margin-right: 1vw; margin-bottom: 1vw; box-shadow: rgba(0,0,0,.2) 0px 0px 10px; height: 12vw; width: 12vw;}
.zoompics.noncollapse h4.sprocket-lists-portrait-title a {color: #2f4422; font-family: 'Spectral', serif;}

@media only screen and (max-width: 767px) {
	.zoompics .active .portrait-image img, .zoompics.noncollapse .portrait-image img {margin-bottom: 3vw;}

}
#g-feature .g-block:first-child .platform-content:nth-child(2){ padding: 0.5rem 0;}

        /*Square Links*/
.square-links {
    display: grid; 
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 1vw;
}

.s-inner-link {position: relative; height: 8.5vw; width: 8.5vw;}
.s-inner-link a {position: absolute; top: 0; bottom: 0; left: 0; right: 0; transition: all .2s; background: rgba(0,0,0,.4)}
.s-inner-link a:hover {background: rgba(0,0,0,.6); transform: scale(1.1);}
.s-inner-link img {height: 100%; width: 100%; box-shadow: rgba(0,0,0,.2) 0px 0px 10px;}

        /*Upcoming Events*/
.rme-items {display: flex; flex-direction: column; margin-right: 10%; margin-left: 10%;}
.rme-items li {margin: 0;}
.rme-item {display: flex; flex-direction: row;}
.rme-badge {height: 65px; background: #2f4422;}

@media only screen and (max-width: 767px) {
    .s-inner-link {height: 100px; width: 100%;}
}

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


/*************** CONTAINER-MAIN ***********/
/*#g-container-main .g-grid {margin-bottom: -38vw;}*/
#g-container-main {
    margin-left: 5%;
    margin-right: 5%;
}


/*************** EXPANDED *****************/
/*************** EXTENSION ****************/
/*************** BOTTOM *******************/
/*************** FOOTER *******************/
#g-footer {background: transparent;}
/*#g-footer:not(.homelayout #g-footer) {background: url('/images/template/footer-cropped.jpg') 0% 100% no-repeat; background-size: cover; padding-top: 38vw!important; margin-top: -38vw; margin-bottom: -1vw;}*/
/*.homelayout #g-footer {background: url('/images/template/footer-cropped.jpg') 0% 0% no-repeat; background-size: cover; padding-top: 38vw!important; margin-bottom: -1vw;}*/
#g-footer h2 {font-weight: 400;}
#g-footer .g-grid:last-child {padding: 2vw 10%;}
#g-footer .footertable .innerbox {display: flex; flex-direction: column; justify-content: center; width: 50%;}


/*************** COPYRIGHT ****************/
#g-copyright {background: transparent;}

/************ MODULES  ************/
.moduletable .nav.menu, .moduletable .unstyled {background: #2f4422;}
.moduletable .nav.menu li.current.active a, .moduletable .nav.menu li a:hover {
	color: #ffffff;
	background: #627c51;
}

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

/************ MOBILE  ************/
.g-offcanvas-toggle {color: white;}

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

/*************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%;}
    .adminfootericon .fa-lock {display: initial;}
} 



/***********make the parish mission statement stand out more*********************/

.mission-statement {
	padding: 1rem;
	background: white;
    margin: 0.5rem;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.6);
}

.mission-statement h2 {
	font-size: clamp(2.1rem, 2.5vw, 3rem) !important;
}


/* altar society page */
/* making the space between the columns bigger */

@media (min-width: 50.99rem) {

    .altar-society-page #g-mainbar > div > div > div > div > div > div > div > .span6:nth-child(1) {
        padding-right: 2rem;
    }

    .altar-society-page #g-mainbar > div > div > div > div > div > div > div > .span6:nth-child(2) {
        padding-left: 2rem;
    }

}

/* add a text overlay to rotators */

@media (min-width: 50.99rem) {

    .homelayout .fwrsolidback .layout-slideshow .sprocket-features-desc {
        background: rgba(47,68,34,.0);
    }

    .homelayout .fwrsolidback .layout-slideshow .sprocket-features-desc :is(p, h1,h2,h3,h4,h5,h6) {
        text-shadow: 1px 1px 3px rgba(0,0,0,.8);
    }

    .homelayout .fwrsolidback .layout-slideshow .sprocket-features-desc {
        right: initial;
        width: 100%;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 5%;
        height: 100%;
        background-color: rgba(0,0,0,.2);
    }


}

@media (max-width: 50.99rem) {

    .homelayout .fwrotator .sprocket-features-content {
        position: absolute;
        top: 0;
        height: auto;
    }

    .homelayout .fwrotator .sprocket-features-index-1 {
        position: relative;
    }

    .homelayout .fwrsolidback .layout-slideshow .sprocket-features-desc {
        background: transparent;
    }

    .homelayout .fwrotator .layout-slideshow .sprocket-features-content {
        background-color: transparent;
    }

}