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

/************ FONTS  ************
Serif: Quattrocento
Sans Serif: Lato

/************ COLORS  ************
Blue: #18187C; rgba(24,24,124,1)
Gold: #BBA161; rgba(187,161,97,1)
Light Grey: #EEEFEF; rgba(238,239,239,1)

/************ NOTES ************
Reduced Opacities:
-Mass Times background - blue @ 80% - rgba(24,24,124,.8)
-Quicklinks overlay - gold @ 85% - rgba(187,161,97,.85)

The images in Headlines and Formed/Daily Readings/Prayer Resources use a drop shadow

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

.gantry {
    --grid-bg: rgba(24,24,124,.4);
}

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

h1 {color: #18187C; font-size: 3.5rem; font-weight: bold; font-family: 'Quattrocento', serif;}
.page-header h1 {text-transform: none; font-size: 3rem;}
h2, .page-header h2 { font-variant-caps: small-caps; color: #18187C; font-size: 2.5rem; font-family: 'Quattrocento', serif;  font-weight: bold;}
h3 { color: #18187C; font-size: 2.5rem; border-bottom: 2px #BBA161 solid; font-family: 'Quattrocento', serif; line-height: 1.3; margin: 0 0 10px 0; }
h4 { color: #18187C; font-size: 1.9rem; font-family: 'Quattrocento', serif; }
h5 {background: #BBA161; font-size: 1.75rem; color: white; border-radius: .2rem; padding: .5rem; font-family: 'Quattrocento', serif;}
h6 {color: #BBA161; font-size: 1.4rem; text-transform: uppercase; font-weight: bold; }
a { color: #BBA161; }
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: #BBA161;
    padding-right: 3vw;
    padding-left: 3vw;
}

.centerreadmore p:last-child {text-align: center;}


/************ HEADER  ************/
h3.g-title {font-size: 2.0rem; font-weight: 700;}

/************ NAVIGATION ************/
#g-navigation .g-menu-item-title {/*color: #ffffff;*/ font-family: 'Lato', sans-serif; font-weight: bold;}
.g-main-nav .g-toplevel > li > .g-menu-item-container, .g-main-nav .g-sublevel > li > .g-menu-item-container { font-size: 1.1rem;}

/************ QUICKLINKS  ************/
.qloverlaybackpic .sprocket-strips-content {	background: rgba(187,161,97,.85); }
.qloverlaybackpic .sprocket-strips-content:hover {background: rgba(187,161,97,.9);}
.qloverlaybackpic h4.sprocket-strips-title a {color: #18187C; font-size: 1.5rem;}
.qlexpandingborder h4.sprocket-strips-title {border: 2px #18187C solid;}

@media only screen and (max-width: 767px) {
	/*.qloverlaybackpic .sprocket-strips-content, .qloverlaybackpic .sprocket-strips-content:hover { background: ; }*/
	.qloverlaybackpic li { background: rgba(187,161,97,.85); }
    .qloverlaybackpic li:hover {background: rgba(187,161,97,.9);}
    .qlexpandingborder h4.sprocket-strips-title { border: none;}
}

/************ MODULES  ************/
.moduletable .nav.menu, .moduletable .unstyled { background: #18187C; }
.moduletable .nav.menu li.current.active a, .moduletable .nav.menu li a:hover {
	color: #18187C;
	background: #BBA161;
}

/************ SECTIONS  ************/
#g-top {background: url('/images/stories/template/header.jpg') 100% 0% no-repeat;}
#g-utility  {padding: 0 5%;}
#g-utility .g-content {padding: 1.5rem 0;}

#g-footer p {color: #18187C;}
#g-footer a {color: #18187C;}
#g-footer a:hover {color: #ffffff;}
#g-footer {border-top: none; padding-top: 2vw!important;}
/*#g-offcanvas .g-menu-item-title {color: #BBA161;}*/

@media only screen and (max-width: 767px) {
    #g-top {background: none;}
    #g-top:not(.homelayout) {border-bottom: 2px solid #18187C;}
}

/************ ROTATOR  ************/
.fwrotator .sprocket-features-content h1, .fwrotator .sprocket-features-content h2, .fwrotator .sprocket-features-content h3, .fwrotator .sprocket-features-content h4, .fwrotator .sprocket-features-content h5, .fwrotator .sprocket-features-content h6, .fwrotator .sprocket-features-content p {
    color: #ffffff;
}

.fwrsolidback .layout-slideshow .sprocket-features-title, .fwrsolidback .layout-slideshow .sprocket-features-desc {

	background: rgba(24,24,124,.8);
	color: #820018;
}

.layout-slideshow .sprocket-features-desc {
    font-size: 1.3em;
    line-height: 1.3em;
    margin: 0;
    min-height: 34vw;
	max-width: 30vw;
    padding-left: 3vw;
    padding-top: 3vw;
    color: #820018;
    margin-top: 0vw;
    margin-left: 4vw;
    display: inline-block;
}

/*.fwrotator .layout-slideshow .sprocket-features-content {
    
}*/

.layout-slideshow .sprocket-features-desc p {
    font-size: 1.3vw;
}
.sprocket-features-desc h4 {font-size: 1.8vw; margin: 0;}

@media only screen and (max-width: 767px) {
    .g-logo img {padding-left: 4vw; width: 100%;}

    .fwrotator .sprocket-features-content h1, .fwrotator .sprocket-features-content h2, .fwrotator .sprocket-features-content h3, .fwrotator .sprocket-features-content h4, .fwrotator .sprocket-features-content h5, .fwrotator .sprocket-features-content h6, .fwrotator .sprocket-features-content p {
        color: #ffffff;
    }
    
    .fwrsolidback .layout-slideshow .sprocket-features-title, .fwrsolidback .layout-slideshow .sprocket-features-desc {
        background: #18187C;
        color: #820018;
    }

    .fwrgradientback .layout-slideshow .sprocket-features-title, .fwrgradientback .layout-slideshow .sprocket-features-desc, .fwrotator .layout-slideshow .sprocket-features-title, .fwrotator .layout-slideshow .sprocket-features-desc {
        padding-left: 0;
    }

    .layout-slideshow .sprocket-features-desc {
        font-size: 1.1em;
        line-height: 1.3em;
        margin: 0;
        max-width: 100%;
        width: 100%;
        padding: 5vw!important;
        overflow: visible;
    }

    .fwrotator .layout-slideshow .sprocket-features-content {height: fit-content; top: 42vw; background: #18187C; color: #ffffff;}
    .fwrsuperwide .layout-slideshow .sprocket-features-img-container, .fwrwide .layout-slideshow .sprocket-features-img-container, .fwrultrawide .layout-slideshow .sprocket-features-img-container {padding-bottom: 90vw;}
	
	.layout-slideshow .sprocket-features-desc p {
		font-size: 3vw;
	}
	.sprocket-features-desc h4 {font-size: 6vw;}

	.infoblock {display: inline-block;}
}

/************ UPCOMING EVENTS **************/
.rokminievents3 {max-width: 290px; margin: auto;}
.rme-items .cols-5 {display: flex;}
.rme-title {
	white-space: nowrap;
}

.rme-badge {flex-direction: column; float: left; background: #18187C; width: 5vw; height: 6vw; padding: 1vw;}

@media only screen and (max-width: 767px) {
    .rme-badge {width: 58px; height: 58px; padding: 5px;}
}  

.rme-items li {margin: 10px 0 30px 0;}

.rme-timeline {display: none;}

/************ HEADLINES ************/
#g-expanded .sprocket-lists-portrait-item > a span {background: none; color: #18187C; text-transform: uppercase; font-weight: bold; border: #18187C 1px solid;}
#g-expanded .sprocket-lists-portrait-item > a span:hover {background: #EEEFEF; color: #18187C; text-transform: uppercase; font-weight: bold; border: #18187C 1px solid;}
#g-expanded .zoompics .active .portrait-image img, .zoompics.noncollapse .portrait-image img {margin: 0vw 1vw 5vw 1vw; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 0px 7px 0 rgba(0,0,0,0.19);}
#g-expanded .zoompics h4.sprocket-lists-portrait-title {font-size: 1.8rem!important; color: #18187C;}
#g-expanded .sprocket-lists-portrait-title > a {color: #18187C;}
#g-expanded .sprocket-lists-portrait-container li {border-bottom: 2px solid #BBA161; padding: 2vw 0vw 0vw 0vw;}
#g-expanded .zoompics .active .portrait-image img, .zoompics.noncollapse .portrait-image img { height: 12vw;   width: 12vw;}

@media only screen and (max-width: 767px) {
    #g-expanded .zoompics .active .portrait-image img, .zoompics.noncollapse .portrait-image img {height: auto!important; width: auto!important; margin: 0 0 2vw 0; box-shadow: none;}
    #g-expanded .zoompics h4.sprocket-lists-portrait-title {font-size: 1.8rem!important;}
}

/************ IMAGE LINKS ************/
.sprocket-strips-s-container {display: flex; flex-direction: row; justify-content: space-around;}
.cols-3 .sprocket-strips-s-block {width: 30%;}
.sprocket-strips-s-block {padding: 4vw 2vw 1vw 2vw}
.sprocket-strips-s-item img {box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 0px 7px 0 rgba(0,0,0,0.19);}

@media only screen and (max-width: 767px) {
    .sprocket-strips-s-container {display: flex; flex-direction: column; justify-content: space-around; align-items: center;}
    .cols-3 .sprocket-strips-s-block {width: 80%;}
    .sprocket-strips-s-container li {padding-bottom: 0;}
    .sprocket-strips-s-item {display: flex; flex-direction: column; justify-content: space-evenly;}
    .sprocket-strips-s-item > img {order: 1; box-shadow: none;}
    .sprocket-strips-s-item > .sprocket-strips-s-content {order: 2;}
}

/************ MOBILE  ************/
.g-offcanvas-toggle { color: #18187C;}

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

/************ FUNERAL NOTICES *************/
.platform-content, .moduletable, .widget {padding: 0.5rem 0;}

@media only screen and (min-width: 767px) {
    .ministrypage .item .pull-left.item-image img {
        height: auto;
        aspect-ratio: 3/4;
    }
}

@media only screen and (max-width: 767px) {
    .ministrypage .item .pull-left.item-image img {
        height: auto;
        aspect-ratio: 3/4;
    }
}