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

/************ FONTS  ************
Sans Serif Headings and Body font: Lato
Headings: Lato Black
Menu & Quicklinks: Lato Bold

/************ COLORS  ************
Red: #be1f24; rgba(190,31,36,1)
Gold: #d8a941; rgba(216,169,65,1)
Charcoal Grey: #404041; rgba(64,64,65,1)
Light Grey: #f1f2f2; rgba(241,242,242,1)
White: #ffffff; rgba(255,255,255,1)

/************ NOTES ************
*Light Grey - background color for all 3 sites
*Parish Menu - white at 80%: rgba(255,255,255,.8)
*School Menu - red at 80%: rgba(190,31,36,.8)
*ELM Menu, School & ELM Quicklinks - gold at 80%: rgba(216,169,65,.8)
*Parish Rotator Text background is a red gradient, starting from 80% to 0%, flush with the image - rgba(190,31,36,.8), rgba(190,31,36,.0)
*School & ELM Rotator Text background is a gold gradient, starting from 80% to 0%, flush with the image - rgba(216,169,65,.8), rgba(216,169,65,.0)

/******CHANGES TO MOCKUP******
*Add Facebook feed to school and ELM, just add it to the right of their calendar and make their Headlines not as wide 
*ELM Quicklinks ----change to red
*************************************/

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: #404041; font-size: 3.5rem; font-weight: bold; font-family: 'Lato', sans-serif;}
h2, .page-header h2 {font-variant-caps: small-caps; color: #be1f24; font-size: 2.2rem; font-family: 'Lato', sans-serif; font-weight: bold;}
h3 {color: #be1f24; font-size: 1.8rem; border-bottom: 1px solid #be1f24;  line-height: 1.3; margin: 0 0 10px 0;}
h4 {color: #404041; font-size: 1.8rem;}
h5 {background: #be1f24; font-size: 1.75rem; color: white; border-radius: .2rem; padding: .5rem;}
h6 {color: #404041; font-size: 1.4rem; text-transform: uppercase; font-weight: bold;}
a {color: #be1f24;}
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: #d8a941;
}

/*************** HOMELAYOUT ***************/
.outline-9.homelayout #g-page-surround {background: url('/images/template/bg-church.jpg') 120% 0% no-repeat; background-color: #f1f2f2;}
.outline-11.homelayout #g-page-surround {background: url('/images/template/bg-school.jpg') 140% -6% no-repeat; background-color: #f1f2f2; background-size: 60%;}
.outline-12.homelayout #g-page-surround {background: url('/images/template/bg-elm.jpg') 100% 0% no-repeat; background-color: #f1f2f2; background-size: 30%;}

.outline-9.homelayout h3.g-title {color: #be1f24;}
.outline-11.homelayout h3.g-title {color: #be1f24;}
.outline-12.homelayout h3.g-title {color: #d8a941;} 

h3.g-title {text-transform: uppercase; font-weight: bold; font-size: 2.1rem;}

.outline-12.homelayout #g-container-main {display: none;}

@media only screen and (min-width: 767px) and (max-width: 1500px) {
    .outline-11.homelayout #g-page-surround {background: url('/images/template/bg-school.jpg') 140% -4% no-repeat; background-color: #f1f2f2; background-size: 60%;}
}

@media only screen and (max-width: 767px) {
    .outline-9.homelayout #g-page-surround {background: #f1f2f2;}
    .outline-11.homelayout #g-page-surround {background: #f1f2f2;}
    .outline-12.homelayout #g-page-surround {background: #f1f2f2;}
}

/*************** OFFCANVAS ****************/
/*************** TOP **********************/
#g-top .g-logo img {height: 10vw; width: auto; margin-left: 1.9vw;}
.outline-9 #g-top:not(.outline-9.homelayout #g-top) {background: url('/images/template/bg-church.jpg') 120% 0% no-repeat; background-color: #f1f2f2;}
.outline-11 #g-top:not(.outline-11.homelayout #g-top) {background: url('/images/template/bg-school.jpg') 140% 30% no-repeat; background-color: #f1f2f2; background-size: 60%;}
.outline-12 #g-top:not(.outline-12.homelayout #g-top) {background: url('/images/template/bg-elm.jpg') 100% 0% no-repeat; background-color: #f1f2f2; background-size: 30%;}

@media only screen and (max-width: 767px) {
    .outline-9 #g-top .g-logo img {height: 20vw; margin: 4vw 0;}
    .outline-11 #g-top .g-logo img {height: auto; width: 70%; margin: 4vw 0;}
    .outline-12 #g-top .g-logo img {height: auto; width: 70%; margin: 4vw 0;}
	.outline-9 #g-top:not(.outline-9.homelayout #g-top) {background: url('/images/template/bg-church.jpg') 80% 40% no-repeat; background-color: #f1f2f2;}
	.outline-11 #g-top:not(.outline-11.homelayout #g-top) {background: url('/images/template/bg-school.jpg') 30% 30% no-repeat; background-color: #f1f2f2;}
	.outline-12 #g-top:not(.outline-12.homelayout #g-top) {background: url('/images/template/bg-elm.jpg') 100% 0% no-repeat; background-color: #f1f2f2; background-size: 80%;}


}

/*************** NAVIGATION ***************/
.g-social a {margin-right: 5px;}
.outline-9 .g-social a {color: #333;}
.outline-9 .g-social a:hover {color: #333;}
.outline-11 .g-social a {color: #ffffff;}
.outline-11 .g-social a:hover {color: #ffffff;}
.outline-12 .g-social a {color: #ffffff;}
.outline-12 .g-social a:hover {color: #ffffff;}
.homelayout #g-navigation {border: none;}
.outline-9 #g-navigation {border-top: 1px solid #be1f24; border-bottom: 1px solid #be1f24;}
.outline-12 #g-navigation {border-top: 1px solid #d8a941; border-bottom: 1px solid #d8a941;}

/*************** SLIDESHOW ****************/
/*************** HEADER *******************/
/*************** ABOVE ********************/
/*************** SHOWCASE *****************/
.homelayout #g-showcase {padding: 1vw 5%!important;}

        /*Rotator*/
.outline-9.homelayout .sc-ct-third .sprocket-features-desc {background: linear-gradient(to right, rgba(190,31,36,.8), rgba(190,31,36,0)); padding-left: 2vw; position: relative;}
.outline-11.homelayout .sc-ct-third .sprocket-features-desc {background: linear-gradient(to right, rgba(216,169,65,.8), rgba(216,169,65,0)); padding-left: 2vw; position: relative;}
.outline-12.homelayout .sc-ct-third .sprocket-features-desc {background: linear-gradient(to right, rgba(216,169,65,.8), rgba(216,169,65,0)); padding-left: 2vw; position: relative;}
.sc-ct-third :is(h1,h2,h3,h4,h5,h6) {text-transform: uppercase; font-size: 1.4vw; font-family: 'Lato', sans-serif; font-weight: bold; text-shadow: 1px 1px 1px rgba(0,0,0,.7)}
.sc-ct-third p {font-size: 1vw; text-shadow: 1px 1px 1px rgba(0,0,0,.7);}
.sc-ct-third .readon {background: none; text-transform: uppercase; position: absolute; bottom: 5px; right: 5px; font-size: 1vw; text-shadow: 1px 1px 1px rgba(0,0,0,.7);}

        /*Quicklinks*/
.qlvertical {margin-left: 1vw!important;}
.outline-9.homelayout .qlvertical h4.sprocket-strips-title a {background: rgba(190,31,36,.8);}
.outline-9.homelayout .qlvertical h4.sprocket-strips-title a:hover {background: rgba(190,31,36,1);}
.outline-11.homelayout .qlvertical h4.sprocket-strips-title a {background: rgba(216,169,65,.8);}
.outline-11.homelayout .qlvertical h4.sprocket-strips-title a:hover {background: rgba(216,169,65,1);}
.outline-12.homelayout .qlvertical h4.sprocket-strips-title a {background: rgba(190,31,36,.8);}
.outline-12.homelayout .qlvertical h4.sprocket-strips-title a:hover {background: rgba(190,31,36,1);}

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

        /*Rotator*/
    .sc-ct-third .sprocket-features-desc {background: linear-gradient(to right, rgba(190,31,36,.8), rgba(190,31,36,.5));}
    .sc-ct-third :is(h1,h2,h3,h4,h5,h6) {font-size: 4.2vw;}
    .sc-ct-third p {font-size: 3.5vw;}
    .sc-ct-third .readon {font-size: 3.5vw; bottom: 5px; right: 0;}

        /*Quicklinks*/
    .qlvertical {margin-right: 1vw!important;}
    .qlvertical .sprocket-strips-container li {width: 98%;}
}

/*************** UTILITY ******************/
/*************** FEATURE ******************/
#g-feature h3.g-title {border-bottom: none;}
.homelayout #g-feature h4 {font-size: 1.4rem; font-weight: bold; text-transform: uppercase;}


/*************** EXPANDED *****************/
.outline-10 #g-expanded h3.g-title, 
.outline-11 #g-expanded h3.g-title {border-bottom: none;}
.outline-9 #g-extension h3.g-title {border-bottom: none;}
.homelayout #g-expanded h4 {font-size: 1.4rem; font-weight: bold; text-transform: uppercase;}
#g-expanded {padding: 0 5%;}

#g-expanded .g-block:last-child .platform-content { padding: 0;}
#g-expanded .g-block:last-child .g-content { padding-bottom: 0;}

@media only screen and (max-width: 767px) {
	.outline-9 #g-expanded .g-block:last-child { order: 2; }
	.outline-9 #g-expanded .g-block:nth-child(2) { order: 3; }
}



/*************** EXTENSION ****************/
        /*Headlines*/
#g-extension .g-grid .g-block:first-child h3.g-title {padding-left: 1vw;}
#g-extension h3,
.outline-9 #g-expanded h3 {border-bottom: 2px solid #333;}
#g-extension h4.sprocket-lists-modern-title,
	#g-expanded h4.sprocket-lists-modern-title {font-size: 1.5rem!important; padding-left: .5vw!important;}
#g-extension .sprocket-lists-modern-item .sprocket-padding,
 #g-expanded .sprocket-lists-modern-item .sprocket-padding {padding: .5vw;}
.outline-10 #g-extension .indicator,
.outline-11 #g-extension .indicator,
.outline-9 #g-expanded .indicator {display: none;}
#g-extension  .sprocket-lists-modern-container li, #g-expanded .sprocket-lists-modern-container li {border-bottom: 1px solid #404041;}
#g-extension  .sprocket-lists-modern-pagination li, #g-expanded .sprocket-lists-modern-pagination li {border-radius: 0; padding: 7px!important; background: #d8a941;}
#g-extension .sprocket-lists-modern-arrows .arrow, #g-expanded .sprocket-lists-modern-arrows .arrow {background: rgba(216,169,65,.7); color: #d8a941;}

        /*Upcoming Events*/
.rme-items {display: flex; flex-direction: column;}
.rme-items li {margin: 5px 0 10px 0;}
.rme-item {display: flex; flex-direction: row;}
.rme-timeline {display: none;}

.outline-11.homelayout .rme-badge {background: #be1f24;}
.outline-12.homelayout .rme-badge {background: #d8a941;}

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

/*************** FOOTER *******************/
#g-footer .g-social a {padding-top: .5vw;}
#g-footer .g-logo img {height: 7vw; width: auto; margin-left: 2vw; margin-top: 1vw;}
.footer-block {display: flex; align-items: center; justify-content: flex-end;}
.footer-block p {margin: 0;}

@media only screen and (max-width: 767px) {
    #g-footer {text-align: center!important; padding: 0 10%!important;}
    #g-footer .g-logo img {height: 20vw; width: auto; margin: 2vw 0;}
    #g-footer .g-social {margin-top: 2vw;}
}

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

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

/*************** SECTIONS *****************/
#g-footer :is(h1,h2,h3,h4,h5,h6,p,a) {color: #ffffff;}
.nopdf a:before {display: none;}

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

/*************** ADS **********************/
/*************** PASTORAL CARE ************/
.p-care .hero img {object-position: top;}
.p-care #g-expanded {padding: 2vw 0!important;}
.p-care #g-expanded .g-content {padding: 0;}

.p-care .cl-strips .sprocket-strips-s-content a.readon {
    color: #be1f24;
    border-color: #be1f24;
}

.p-care .cl-strips .sprocket-strips-s-content a.readon:hover {
    color: #ffffff;
    background: #be1f24;
}

/*************** SUPPORT ST. JUDE SCHOOL***/
.support-table img {height: 8vw; width: 50vw;}