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

/************ FONTS  ************
Serif Headings: Cinzel
Sans Serif Headigns: Quicksand
Sans Serif: Lato

/************ COLORS  ************
Green: #5f8a6a; rgba(95,138,106,1)
Red: #97615a; rgba(151,97,90,1)
Super Light Green (background color): #f4f6f5;

/************ NOTES ************
*Menu is Green at 80% - rgba(95,138,106,.8)
*Quicklinks are red at 80% - rgba(151,97,90,.8)
*Quicksand Medium font used for Welcome, Our mission, Headlines, Mass Times, Upcoming Events
*Quicksand Regular font used for menu text and button text
*idk what you can see as far as red or green, so I'm going to lay it out for you here:
---Green: menu, Our Mission title, Mass Times title, Headlines header/lines, Upcoming events title/scroll/button, footer
---Red: Quicklinks, news article titles/buttons, View all Headlines button, Weekdays/Weekends titles, Reconciliation button, calendar badges
*************************************/

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: #5f8a6a; font-size: 3.5rem; font-weight: bold; font-family: 'Cinzel', serif;}
h2, .page-header h2 {font-variant-caps: small-caps; color: #5f8a6a; font-size: 2.2rem; font-family: 'Cinzel', serif;  font-weight: bold;}
h3 {color: #97615a; font-size: 1.8rem; border-bottom: 1px solid #5f8a6a; font-family: 'Quicksand', sans-serif; font-weight: 500; line-height: 1.3; margin: 0 0 10px 0;}
h4 {color: #5f8a6a; font-size: 1.8rem;}
h5 {background: #5f8a6a; font-size: 1.75rem;color: #f4f6f5; border-radius: .2rem; padding: .5rem;}
h6 {color: #97615a; font-size: 1.4rem; text-transform: uppercase; font-weight: bold;}
a {color: #5f8a6a;}
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: #5f8a6a;
}
a.greenblockbtn {    
	color: #5f8a6a;
    font-size: 1rem;
    text-transform: none;
    text-align: center;
    font-weight: normal;
    background: transparent;
    padding: .7rem 1.3rem;
    border-radius: .5rem;
    margin: 0;
    display: block;
    line-height: 1.125rem;
    border: 2px solid #5f8a6a;
    transition: all .2s ease-in;
}
.greenblockbtn:hover {
	background: #5f8a6a !important;
	color: white !important;
}

/*************** HOMELAYOUT ***************/
.homelayout h3.g-title {border-bottom: none; color: #5f8a6a;}
.greybox {background: #f8f8f8;}

/*************** ERROR ********************/
.outline-_error #g-container-main {margin-top: 4vw;}

/*************** OFFCANVAS ****************/
#g-offcanvas .g-social a {margin-right: 10px;}

/*************** TOP **********************/
.g-logo img {margin: 1vw;}

#g-navigation { position: relative; }
#g-navigation > .g-grid {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10;
    background: rgba(95, 138, 106, 0.8)
}

#g-navigation.sticky {position: fixed; left: 0; right:0; top: 0;} 

@media only screen and (max-width: 767px) {
    #g-navigation.sticky {position: absolute;}
}

/*************** NAVIGATION ***************/
/*************** SLIDESHOW ****************/
/*************** HEADER *******************/
/*************** ABOVE ********************/
/*************** SHOWCASE *****************/
        /*Rotator*/
#g-showcase .fwcontenttop .layout-slideshow .sprocket-features-content {
    align-items: center;
    width: 100%;
    margin: 0 auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.2);
}

#g-showcase .layout-slideshow .sprocket-features-desc {margin: auto 0; padding: 4vw; width: 100%;}
.sprocket-features-desc :is(h1, h2, h3, h4, h5, h6) {
    font-family: 'Lato', Sans-Serif; 
    font-size: 4vw; 
    font-weight: normal; 
    border-bottom: none; 
    color: #ffffff; 
    background: none; 
    text-transform: none; 
    font-variant-caps: inherit; 
    margin: 0;
    text-shadow: 3px 3px 3px rgba(0,0,0,.3);
}

#g-showcase .layout-slideshow h2.sprocket-features-title {
    margin: auto;
    font-family: 'Lato', Sans-Serif; 
    font-size: 4vw; 
    font-weight: normal; 
    border-bottom: none; 
    color: #ffffff; 
    background: none; 
    text-transform: none; 
    font-variant-caps: inherit; 
    text-shadow: 3px 3px 3px rgba(0,0,0,.3);
}

@media only screen and (max-width: 767px) {
    .sprocket-features-desc :is(h1, h2, h3, h4, h5, h6) {font-size: 3rem;}
    #g-showcase .layout-slideshow .sprocket-features-desc {padding: 10vw;}
    #g-showcase .layout-slideshow h2.sprocket-features-title {font-size: 3rem;}

    .fwrsuperwide .layout-slideshow .sprocket-features-img-container {padding-bottom: 0!important;}
    .fwrsuperwide .layout-slideshow .sprocket-features-img-container img {height: 70vw!important;}
}

/*************** UTILITY ******************/
        /*Quicklinks*/
.qloverlaybackpic .sprocket-strips-content {background: rgba(151,97,90,.8);}
.qloverlaybackpic .sprocket-strips-content:hover {background: rgba(151,97,90,.9);}

@media only screen and (max-width: 767px) {
    #g-utility {margin: 0;}
	.qloverlaybackpic .sprocket-strips-content, .qloverlaybackpic .sprocket-strips-content:hover {background: none;}
	.qloverlaybackpic li {background: rgba(151,97,90,1);}
    .qloverlaybackpic li:hover {background: rgba(151,97,90,.8);}
    .qloverlaybackpic .sprocket-strips-item, .qloverlaybackpic .sprocket-strips-content {border-radius: 0;}

    .qloverlaybackpic .sprocket-strips .sprocket-strips-container > li {position: relative;}


    .qloverlaybackpic .sprocket-strips-content {left: calc(30vw + 20px); position: absolute;}
    .qloverlaybackpic .sprocket-strips-content a {position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin-left: calc(-30vw - 20px); padding-left: calc(30vw + 20px); padding-right: 60vw;}
    .qloverlaybackpic h4.sprocket-strips-title a {justify-content: left;}
    .qlexpandingborder h4.sprocket-strips-title {width: 125vw;}

    .qloverlaybackpic .sprocket-strips-item {width: 30vw; height: 22vw; position: initial;}
}

/*************** FEATURE ******************/
.missionbox {padding: 2vw 5vw!important;}
.missionbox p {font-size: 1.3rem;}

@media only screen and (max-width: 767px) {
    .missionbox {padding: 2vw 0!important;}
    .missionbox p {font-size: .9rem;}
}

/*************** EXPANDED *****************/
        /*Headlines*/
#g-expanded .sprocket-lists-portrait-item > a span {background: #5f8a6a; color: #ffffff; text-transform: uppercase; font-weight: normal; padding: 5px 20px;}
#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 1vw 1vw; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.1), 0 0px 7px 0 rgba(0,0,0,0.1);}
#g-expanded .zoompics h4.sprocket-lists-portrait-title {font-size: 1.3rem!important; line-height: 1.0rem!important; color: #5f8a6a;}
#g-expanded .sprocket-lists-portrait-title > a {color: #18187C;}
#g-expanded .sprocket-lists-portrait-container li {border-bottom: 2px solid #5f8a6a; padding: 1vw 0vw 0vw 0vw;}
#g-expanded .zoompics .active .portrait-image img, .zoompics.noncollapse .portrait-image img {height: 12vw; width: 18vw;}
#g-expanded .zoompics h3.g-title {background: #5f8a6a; color: #ffffff; border-radius: 5px; padding-left: 1vw;}

@media only screen and (max-width: 767px) {
    #g-expanded .zoompics .active .portrait-image img, .zoompics.noncollapse .portrait-image img {height: 40vw!important; width: 100%!important; margin: 0 0 2vw 0; box-shadow: none;}
    #g-expanded .zoompics h4.sprocket-lists-portrait-title {font-size: 1.0rem!important; line-height: 1.3rem!important;}
}
#g-expanded .g-block:last-child  p {margin: 0 0 0.75rem 0;}


/*************** EXTENSION ****************/
        /*Upcoming Events*/
.rme-badge, .rme-timeline-point:hover, .rme-timeline-point.active, .rme-timeline-point span {background: #5f8a6a;}
/*************** BOTTOM *******************/
#g-bottom .g-content {margin: 2vw 0;}

/*************** FOOTER *******************/
#g-footer .g-content {margin: 2vw 0;}

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

/*************** MODULES ******************/
.moduletable .nav.menu, .moduletable .unstyled {background: #5f8a6a;}
.moduletable .nav.menu li.current.active a, .moduletable .nav.menu li a:hover {
    color: #5f8a6a;
    background: #f4f6f5;
}

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

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

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

.g-main-nav .g-dropdown {     
    background: rgba(95, 138, 106, 1);
    box-shadow: 0 8px 8px rgb(0 0 0 / 50%);
    border-radius: 0 0 6px 6px;
    text-align: left;
    border: solid 1px black;
}

.section-paddings, #g-container-overlay, #g-top, #g-slideshow, #g-navigation, #g-header, #g-above, #g-utility, #g-feature, #g-expanded, #g-extension, #g-bottom, #g-footer, #g-copyright {
    padding: 0px 5%;
}