@import url('//fonts.googleapis.com/css2?family=Cardo:wght@400;700&family=Lato:wght@400;700&display=swap');
/************ 
************ TEMPLATE  ************
Rotator Size: 1600x900 (wide, 16:9)

************ FONTS  ************
Serif: Cardo
Sans Serif: Lato

************ COLORS  ************
Red: #820018; rgba(130,0,24,1)
Gold: #B58808; rgba(181,136,8,1)
Light Gold (only used for menu): #D1A20D; rgba(209,162,13,1)
Grey: #808285; rgba(128,130,133,1)
Light Grey: #F1F2F2; rgba(241,242,242,1)

************ NOTES ************
Menu: Light Gold @ 90% opacity - rgba(209,162,13,.9)
Our Mission: background is straight up white @ 80% opacity - rgba(255,255,255,.8)
Quicklinks: Red @ 80% opacity - rgba(130,0,24,.8)
************/

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: #820018; font-size: 4rem; font-weight: normal; font-family: 'Cardo', serif;}

h2, .page-header h2 { font-variant-caps: small-caps; color: #B58808; font-size: 2.5rem; font-family: 'Cardo', serif;  font-weight: bold;}
h3 { color: #820018; font-size: 2.2rem; border-bottom: 1px solid #cdbe79;  line-height: 1.3; margin: 0 0 10px 0; font-family: 'Cardo', serif;}
h4 { color: black; font-size: 1.8rem;}
h5 {background: #820018; font-size: 1.75rem;color: white; border-radius: .2rem; padding: .5rem;}
h6 {color: #B58808; font-size: 1.4rem; font-family: 'Lato', sans-serif; font-weight: bold;}
a { color: #B58808; }
a:hover { color: #820018; }


@media only screen and (min-width: 768px) and (max-width: 1199px) {
	h1 { font-size: 3rem; }  
	h2 { font-size: 2.3rem; }
	h3 { font-size: 2.3rem; }
	h4 { font-size: 2.3rem; }
	h5 { font-size: 1.75rem; }
	h6 { font-size: 1.75rem; }
	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: 2rem;}
}

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

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

/************ MENU ************/
.homelayout #g-navigation { position: relative; }
#g-navigation  { padding: 0; }
.homelayout #g-navigation .g-grid {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10;
    background: rgba(209,162,13,.9);
}
.g-logo img {padding-left: 2vw; padding-bottom: 1vw;}
#g-navigation.sticky { position: fixed; left: 0; right:0; top: 0; z-index: 10; }
.homelayout #g-showcase {top: 0; margin-top: 0;}

.g-main-nav ul.g-toplevel {margin-top: 2vw; margin-bottom: 2vw;}
.g-menu-item-title {font-size: 1.4rem; text-transform: bold; text-shadow: 3px 2px 4px black;}

/************* ERROR MENU ************/
.outline-_error #g-slideshow {padding-top: 12vw;}
.outline-_error #g-slideshow {padding-top: 12vw;}

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

/************ 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: #820018;
}

.fwrsolidback .layout-slideshow .sprocket-features-title, .fwrsolidback .layout-slideshow .sprocket-features-desc {
	background: rgba(255,255,255,.8);
	color: #820018;
}

.layout-slideshow .sprocket-features-desc {
    font-size: 1.3em;
    line-height: 1.3em;
    margin: 0;
    min-height: 30vw;
    width: 35vw;
    padding: 50px;
    color: #820018;
    margin-top: 10vw;
    margin-left: 55vw;
    display: inline-block;
}

.layout-slideshow .sprocket-features-desc p {
    font-size: 1.5vw;
}
.sprocket-features-desc h2 { font-size: 3vw;}

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

    .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: #820018;
    }
    
    .fwrsolidback .layout-slideshow .sprocket-features-title, .fwrsolidback .layout-slideshow .sprocket-features-desc {
        background: #ffffff;
        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 {
        height: -webkit-fill-available;
        font-size: 1.1em;
        line-height: 1.3em;
        margin: 0;
        width: inherit;
        padding: 0;
        color: #820018;
        margin-top: none;
        margin-left: none;
        display: fit-content;
        overflow: hidden;
    }
	
	.layout-slideshow .sprocket-features-desc p {
		font-size: 3vw;
	}
	.sprocket-features-desc h2 { font-size: 6vw;}
}

/************ QUICKLINKS  ************/
#g-utility {margin: 1vw 1vw 0 1vw;}
.qloverlaybackpic .sprocket-strips-content {background: rgba(130,0,24,.8);}
.qloverlaybackpic .sprocket-strips-content:hover {background: rgba(130,0,24,.9);}


@media only screen and (max-width: 767px) {
	.qloverlaybackpic .sprocket-strips-content, .qloverlaybackpic .sprocket-strips-content:hover { background: none; }
	.qloverlaybackpic li { background: rgba(126,20,22,1);; }
    .qloverlaybackpic li:hover {background: black;}
	.coverimgarea .sprocket-strips-s-item img {height: 50vw!important; width: 65vw;}
}

/***************** STRIPS NEWS - PARISH *******************/
.homelayout #g-expanded .readon {display: none;}
#g-expanded .coverimgarea .sprocket-strips-s-item img {border-bottom: 5px solid #820018 !important; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 0px 7px 0 rgba(0,0,0,0.19);}
#g-expanded .sprocket-strips-s-title a {font-family: 'Libre Baskerville', serif; font-size: 1.3rem;}
#g-expanded .sprocket-strips-s-arrows .arrow {color: white;}

@media only screen and (max-width: 767px) {
    #g-expanded .sprocket-strips-s-item {display: flex; flex-wrap: wrap; flex-direction: column;}
    #g-expanded .sprocket-strips-s-container .sprocket-strips-s-block > .sprocket-strips-s-item img {flex: 1;}
    #g-expanded .sprocket-strips-s-container .sprocket-strips-s-block > .sprocket-strips-s-item > .sprocket-strips-s-content {flex: 2; margin-left: none;}
    #g-expanded .sprocket-strips-s-content {margin-left: 0;}
}

/************ EXTENSION A - UPCOMING EVENTS CALENDAR ***********/
.rme-badge {background: #820018; border-radius: 7px;}
.rme-timeline-point:hover, .rme-timeline-point.active, .rme-timeline-point span {background: #820018;}
.rme-arrow {color: #820018;}

.viewcalendar {text-align: right;}
.calbutton {background: #820018;}

@media only screen and (max-width: 767px) {
    #g-extension .viewcalendar {text-align: center;}
    .calbutton {float: center;}
}

/************ EXTENSION B - FR TODDS BLOG ***********/
#g-extension .sprocket-strips-s-container {display: flex;}
#g-extension .cols-3 .sprocket-strips-s-block {background: #F1F2F2; width: 30%; margin: 1.5%; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 10px 7px 0 rgba(0,0,0,0.19);}
#g-extension .cols-3 .sprocket-strips-s-block .readon {background:none;}
#g-extension .cols-3 .sprocket-strips-s-block a.readon {color: #333; float: right; text-transform: uppercase;}
#g-extension .cols-3 .sprocket-strips-s-block a.readon:hover {color: #808285;}

.sprocket-strips-s-title h4 {font-size: 1.5vw;}
.sprocket-strips-s-text p {font-size: 1rem;}

@media only screen and (max-width: 767px) {
    #g-extension .sprocket-strips-s-container {display: flex; flex-wrap: wrap; flex-direction: column;}
    #g-extension .cols-3 .sprocket-strips-s-block {width: auto; box-shadow: none;}
}

/************ MODULES  ************/
.moduletable .nav.menu, .moduletable .unstyled { background: #820018; }
.moduletable .nav.menu li.current.active a, .moduletable .nav.menu li a:hover {
	color: white;
	background: #B58808;
}

/************ SECTIONS  ************/
#g-extension {background: url('/images/stories/template/background.png') 80% 100% no-repeat; background-size: auto 100%;}
#g-extension img {display: none;}
#g-bottom {background: none;}
#g-copyright a { color: white; }
#g-copyright a:hover { color: #ddd; }
#g-footer {border-top: none;}

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

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

/************ QUICKLINKS  ************/

@media only screen and (max-width: 767px) {
	#g-utility .mobilewrap .sprocket-strips-item {
		width: 100vw; 
		background-position: 0 0;
		background-size: 30%;
		background-repeat: no-repeat; 
	}
	.qlexpandingborder h4.sprocket-strips-title{
		margin-left: 30vw;
	}
}


/**** Create a nice looking table with alternating rows *****/
.alternaterows  {width: 100%;}
.alternaterows tr:nth-child(even) {background: #fff; border-bottom: 1px solid #ddd;}
.alternaterows tr:nth-child(even):hover {background: #fafafa; border-bottom: 1px solid #ddd;}
.alternaterows tr:nth-child(odd) {background: #fafafa; border-bottom: 1px solid #ddd;}
.alternaterows tr:nth-child(odd):hover {background: #fff; border-bottom: 1px solid #ddd;}
	
 @media only screen and (max-width: 767px){ 
   .alternaterows, .alternaterows div, .alternaterows tr, .alternaterows td, .alternaterows tbody { display: block; table-layout:auto; width: 100%; border: none; margin: 0;}
   .alternaterows img { display: block; margin: 0 auto; width: 100%;}  
   .alternaterows { display:block; }
 }