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

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

/************ COLORS  ************
Purple: #4a266c; rgba(74,38,108,1)
Gold: #e8b934; rgba(232,185,52,1)
Cream (background color): #faedd3; rgba(250,237,211,1)

/************ NOTES ************
*menu bar and quicklinks - 80% purple overlay - rgba(74,38,108,.8)
*Rotator overlay - black at 30% - rgba(0,0,0,.3)
*Rotator text has dropshadow

/*********** SCHOOL NOTES **********
*see new gold to use: update the parish side with this gold, too
*I updated the logo file in their dropbox/images created/website images folder with the new gold and placed the older logo file in an archive folder there
*Menu bar is gold at 80% - rgba(232,185,52,.8)
*Rotator overlay is same as parish - rgba(0,0,0,.3)
*Quicklinks overlay are same as parish - rgba(74,38,108,.8)
*School calendar is a paralax image, and the badges and button have a dropshadow since their gold. It helped them stand out against the cream paralax image
*Facebook feed is same as parish
*the documents modules there were a shot in the dark on how they might want to organize them. They didn't really confirm what they should be, so don't sweat what goes there as long as those titles are present and the same


.outline-14 - Parish
.outline-15 - School

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

:root {
	--primary-color: #4a266c;
	--secondary-color: #e8b934;
	--background-color: #faedd3;
	--opacity-color: rgba(74,38,108,.8);
	--opacity-hover: rgba(74,38,108,.9);
	--subsite-opacity-color: rgba(232,185,52,.8);
	--subsite-opacity-hover: rgba(232,185,52,.9);

	--default-white: #ffffff;

	--primary-font: 'Cardo', serif;
	--secondary-font: 'Lato', sans-serif;
}

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: #4a266c; font-size: 3.5rem; font-weight: bold; font-family: 'Cardo', serif;}
h2, .page-header h2 {font-variant-caps: small-caps; color: #4a266c; font-size: 2.5rem; font-family: 'Cardo', serif;  font-weight: bold;}
h3 {color: #4a266c; font-size: 2rem; border-bottom: 1px solid #e8b934;  line-height: 1.3; margin: 0 0 10px 0;}
h4 {color: #4a266c; font-size: 2rem; font-family: 'Cardo', serif; font-variant: small-caps;}
h4.lato { font-family: 'Lato', sans-serif; font-variant: small-caps;}
h5 {background: #e8b934; font-size: 1.75rem;color: white; border-radius: .2rem; padding: .5rem;}
h6 {color: #4a266c; font-size: 1.5rem; text-transform: uppercase; font-weight: bold;}
a {color: #4a266c;}
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.25rem;}
    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: var(--primary-color);
}
.readon:hover, .button:hover, .btn:hover, p.readmore .btn:hover, .listentobutton .moduletable a:hover {
    background: var(--secondary-color);
    color: var(--primary-color);
}

/*************** HOMELAYOUT ***************/
.homelayout.outline-14 h3.g-title {background: var(--primary-color); color: var(--default-white); font-family: var(--primary-font); border-bottom: none; border-radius: 6px; font-variant: small-caps;}
.schoollayout.outline-15 h3.g-title {background: var(--secondary-color); color: var(--primary-color); font-family: var(--primary-font); border-bottom: none; border-radius: 6px; font-variant: small-caps;}
.g-social a {margin-right: 10px;}
.outline-15 .g-social a {color: var(--primary-color);}

/*************** OFFCANVAS ****************/
/*************** TOP **********************/
/*************** NAVIGATION ***************/
	/*****Parish-&-School*****Background and Logo*****Parish-&-School*****/
#g-navigation {background: url('/images/template/bg-church.jpg') 0% 0% no-repeat; background-color: var(--background-color);}
#g-navigation .g-logo img {height: 7vw; width: auto; margin: 2vw 3vw;} 

	/*****Parish*****Contact Box*****Pairsh*****/
#g-navigation a {color: var(--primary-color);}

@media only screen and (max-width: 767px) {
	#g-navigation {padding-top: 4vw!important;}
	#g-navigation .g-logo img {height: 9vw;}
}

/*************** SLIDESHOW ****************/
#g-slideshow {position: relative;}
.homelayout.outline-14 #g-slideshow .g-container .g-grid:first-child {position: absolute; top: 0; z-index: 10; width: 100%; background: var(--opacity-color); padding: 0 2.5%; align-items: center;}
.outline-14 #g-slideshow .g-container .g-grid:first-child:not(.homelayout.outline-14 #g-slideshow .g-container .g-grid:first-child) {position: initial; background: var(--primary-color); padding: 0 5%; align-items: center;}
.schoollayout.outline-15 #g-slideshow .g-container .g-grid:first-child {position: absolute; top: 0; z-index: 10; width: 100%; background: var(--subsite-opacity-color); padding: 0 0; align-items: center;}
.outline-15 #g-slideshow .g-container .g-grid:first-child:not(.schoollayout.outline-15 #g-slideshow .g-container .g-grid:first-child) {position: initial; background: var(--secondary-color); padding: 0 0; align-items: center;}
.outline-15 .g-menu-item-title {color: var(--primary-color);}

		/*Parish and School Rotator*/
.layout-slideshow .sprocket-features-desc :is(h1,h2,h3,h4,h5,h6) {
	font-family: 'Cardo', serif;
	font-weight: 400;
	font-size: 2.5rem;
	font-variant-caps: normal;
	border-bottom: none;
	line-height: 1.3;
	background: none;
	text-transform: none;
	text-shadow: 2px 2px #000000;
}

.layout-slideshow .sprocket-features-desc p {text-shadow: 2px 2px #000000;}

		/*Parish Rotator*/
.outline-14 .layout-slideshow .sprocket-features-content {top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.4); width: 100%;}
.outline-14 .layout-slideshow .sprocket-features-desc {width: 35%; bottom: 10vw; left: 10vw; position: absolute;}
.outline-14 .fwrbigarrows .layout-slideshow .sprocket-features-arrows .arrow {margin-top: -100px; color: var(--default-white);}
.outline-14 .sprocket-features-desc {position: relative; padding-bottom: 50px!important;}
.outline-14 .sprocket-features-desc a {position: absolute; bottom: 5px; right: 5px; background: var(--default-white); color: var(--primary-color);}
.outline-14 .sprocket-features-desc a:hover {background: rgba(255,255,255,.5); color: var(--primary-color);}

		/*School Rotator*/
.outline-15 .layout-slideshow .sprocket-features-content {top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.4); width: 100%;}
.outline-15 .layout-slideshow .sprocket-features-desc {width: 35%; bottom: 2vw; right: 10vw; position: absolute;}
.outline-15 .fwrbigarrows .layout-slideshow .sprocket-features-arrows .arrow {margin-top: -100px; color: var(--default-white);}
.outline-15 .sprocket-features-desc {position: relative; padding-bottom: 50px!important;}
.outline-15 .sprocket-features-desc a {position: absolute; bottom: 5px; right: 5px; background: var(--default-white); color: var(--primary-color)!important;}
.outline-15 .sprocket-features-desc a:hover {background: rgba(255,255,255,.5); color: var(--primary-color)!important;}
@media only screen and (max-width: 767px) {
			/*Parish Rotator*/
	.outline-14 .fwrsuperwide .layout-slideshow .sprocket-features-img-container, 
	.outline-14 .fwrwide .layout-slideshow .sprocket-features-img-container, 
	.outline-14 .fwrultrawide .layout-slideshow .sprocket-features-img-container {padding-bottom: 85vw;}
	.outline-14 .layout-slideshow .sprocket-features-content {top: initial!important; bottom: 0!important; left: 0!important; right: 0!important; height: 85vw!important; width: 100%; background: var(--primary-color)!important;}
	.outline-14 .layout-slideshow .sprocket-features-content :is(.button, .readon) {background: var(--secondary-color);}
	.outline-14 .layout-slideshow .sprocket-features-desc {top: initial!important; bottom: 0!important; left: 0!important; right: 0!important; height: 85vw!important; width: 100%;}

			/*School Rotator*/
	.outline-15 .fwrsuperwide .layout-slideshow .sprocket-features-img-container, 
	.outline-15 .fwrwide .layout-slideshow .sprocket-features-img-container, 
	.outline-15 .fwrultrawide .layout-slideshow .sprocket-features-img-container {padding-bottom: 85vw;}
	.outline-15 .layout-slideshow .sprocket-features-content {top: initial!important; bottom: 0!important; left: 0!important; right: 0!important; height: 85vw!important; width: 100%; background: var(--primary-color)!important;}
	.outline-15 .layout-slideshow .sprocket-features-content :is(.button, .readon) {background: var(--secondary-color);}
	.outline-15 .layout-slideshow .sprocket-features-desc {top: initial!important; bottom: 0!important; left: 0!important; right: 0!important; height: 85vw!important; width: 100%;}
}
/*************** HEADER *******************/
/*************** ABOVE ********************/
/*************** SHOWCASE *****************/
		/*Church Welcome*/
.homelayout.outline-14 .welcome-note {background: url('/images/template/paralax1.jpg') 0% 0% no-repeat; background-size: cover; padding: 5vw 5%!important; margin-top: 1vw; object-position: center; object-fit: cover; background-attachment: fixed;}
.schoollayout.outline-15 .welcome-note {background: url('/images/template/paralax-school2.jpg') 0% 0% no-repeat; background-size: cover; padding: 5vw 5%!important; margin-top: 1vw; object-position: center; object-fit: cover; background-attachment: fixed;}
.welcome-note p {color: #333333;}

.welcome-mod {display: flex; flex-direction: row;}
.welcome-title {display: flex; order: 1; flex: 2; align-items: center; justify-content: center; flex-direction: column;}
.welcome-title :is(h1,h4) {margin: 0;}
.welcome-title h4 {font-style: italic; text-transform: none; font-variant: initial;}
.welcome-message {display: flex; flex-direction: column; order: 2; flex: 3; align-items: left; justify-content: left;}
.welcome-message p {text-align: left;}

		/*Principal Welcome*/


@media only screen and (max-width: 767px) {
			/*Church Welcome*/
	.welcome-note {background-attachment: initial!important;}
	.welcome-mod {flex-direction: column;}
	.welcome-title {margin-bottom: 20px;}

			/*Principal Welcome*/
	
}

/*************** UTILITY ******************/
		/*School Quicklinks*/
.schoollayout.outline-15 .sprocket-strips-container > li {margin: 10px .25%;}
.schoollayout.outline-15 h4.sprocket-strips-title {font-size: 1.7rem;}

		/*Church and School Quicklinks*/
h4.sprocket-strips-title {font-family: var(--primary-font); border: none!important;}
.sprocket-strips-container > li:first-child {margin-left: 0!important;}
.sprocket-strips-container > li:last-child {margin-right: 0!important;}

.qloverlaybackpic .sprocket-strips-content {background: rgba(74,38,108,.8);}
.qloverlaybackpic .sprocket-strips-content:hover {background: rgba(74,38,108,.9);}

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

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


    .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: 130vw; font-size: 1.5rem;}

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

/*************** FEATURE ******************/
/*************** EXPANDED *****************/
#g-expanded {padding: 2vw 5%!important;}
#g-expanded .g-block {padding: 1vw 1vw;}
.schoollayout.outline-15 #g-expanded a:not(.schoollayout.outline-15 #g-expanded a.button, .schoollayout.outline-15 #g-expanded a.readon) {color: var(--primary-color);}

		/*Parish Headlines*/
.outline-14 h4.sprocket-lists-modern-title {font-size: 1.4rem!important; font-family: var(--secondary-font)!important; /*color: var(--secondary-color);*/ font-weight: bold; padding-left: 30px!important;}
.outline-14 .sprocket-padding {padding-left: 30px!important;}
.outline-14 .sprocket-lists-modern-title .indicator {display: none;}
.outline-14 .home-headlines h3.g-title {padding-left: 15px!important;}
.outline-14 .sprocket-lists-modern-container li {border-bottom: 1px solid var(--secondary-color);}

		/*School Headlines*/
.outline-15 h4.sprocket-lists-modern-title {font-size: 1.4rem!important; font-family: var(--secondary-font)!important; color: var(--primary-color); font-weight: bold; padding-left: 30px!important;}
.outline-15 .sprocket-padding {padding-left: 30px!important;}
.outline-15 .sprocket-lists-modern-title .indicator {display: none;}
.outline-15 .home-headlines h3.g-title {padding-left: 15px!important;}
.outline-15 .sprocket-lists-modern-container li {border-bottom: 1px solid var(--secondary-color);}

		/*Latest Podcasts*
.podcast-module {display: flex; flex-direction: column;}
.podcast-module {margin-left: 2vw!important;}
.podcast-module h3 {margin-left: -2vw!important;}*/
.podcast-module p {margin-left: 20px; line-height: 1.65;}
.podcast-module img {display: none;}
.podcast-module a:nth-of-type(2) {background: var(--primary-color); color: var(--default-white); margin-left: auto; margin-right: auto; padding: .5vw; border-radius: 6px; margin-top: 10px;}
.podcast-module a:nth-of-type(2):hover {background: #7f7f7f;}

		/*Helpful Links*/
.weblinkscentertitle {list-style-type: none; margin: 0 0 0 2vw;}

		/*Ministry Schedule*/
.k-ui-namespace {margin: 0 2vw;}

/*************** EXTENSION ****************/
		/*Upcoming Events*/
.homelayout.outline-14 #g-extension {padding: 5%!important; background: url('/images/template/paralax2.jpg') 0% 45% no-repeat; background-size: cover;}
.homelayout.outline-14 #g-extension h3.g-title {font-family: var(--primary-font); background: none; color: var(--primary-color); font-size: 3rem;}
.homelayout.outline-14 #g-extension .button {background: none; border: 1px solid var(--primary-color); border-radius: 0; color: var(--primary-color); font-size: 1.2rem; text-transform: uppercase; padding-left: 4vw; padding-right: 4vw;}
.homelayout.outline-14 #g-extension .button:hover {background: var(--primary-color); color: var(--default-white);}
.homelayout.outline-14 #g-extension .button a:hover {color: white;}

		/*School Calendar*/
.schoollayout.outline-15 #g-extension {padding: 5%!important; background: url('/images/template/paralax-school.jpg') 0% 45% no-repeat; background-size: cover;}
.schoollayout.outline-15 #g-extension h3.g-title {font-family: var(--primary-font); background: none; color: var(--primary-color); font-size: 3rem;}
.schoollayout.outline-15 #g-extension .button {background: var(--secondary-color); border: 1px solid var(--secondary-color); border-radius: 0; color: var(--primary-color)!important; font-size: 1.2rem; text-transform: uppercase; padding-left: 4vw; padding-right: 4vw;}
.schoollayout.outline-15 #g-extension .button:hover {background: var(--primary-color); color: var(--default-white)!important;}

.schoollayout.outline-15 #g-extension .rok-mini-landscape :is(.rme-badge, .rme-timeline-point:hover, 
.rme-timeline-point.active, .rme-timeline-point span) {background: var(--secondary-color);}
.schoollayout.outline-15 #g-extension .rme-badge {color: var(--primary-color);}

@media only screen and (max-width: 767px) {
	.homelayout.outline-14 #g-extension {background-attachment: initial!important;}

	.schoollayout.outline-15 #g-feature {background-attachment: initial!important;}
}

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

/*************** FOOTER *******************/
#g-footer :is(h1,h2,h3,h4,h5,h6,p,a) {color: var(--default-white);}
#g-footer h4 {letter-spacing: 2px;}

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

/*************** MODULES ******************/
.moduletable .nav.menu, .moduletable .unstyled {background: var(--primary-color);}
.moduletable .nav.menu li.current.active a, .moduletable .nav.menu li a:hover {
    color: var(--secondary-color);
    background: var(--primary-color);
}
.ministries .portrait-image {width: 10vw; }
.ministries h4 {font-family: 'Lato', sans-serif; font-variant: small-caps; font-size: 1.5rem !important;}
.ministries .sprocket-lists-portrait-title {margin: 0;}

/*************** MOBILE *******************/
.g-offcanvas-toggle {color: var(--primary-color);}

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

.fancytable th, .infotables th {color: white; padding: 5px; background: #4a266c; border: 1px solid #4a266c;}
.fancytable td, .infotables td {padding: 5px 10px; border: 1px solid #4a266c;}