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

/************ FONTS  ************
Serif: Bellefair
Sans Serif: Lato

/************ COLORS  ************
Blue: #003466; rgba(0,52,102,1)
Grey: #808285; rgba(128,130,133,1)
Light Grey: #F1F2F2

/************ NOTES ************
-Menu bar, Mass times background: blue at 90% - rgba(0,52,102,.9)
-Mass Times are static:

Weekend Mass
Saturday - 5:30pm 
Sunday - 8:00am, 10:00am, 12:00pm

Daily Mass 
Mon-Fri - 7:00am, 9:00am
Saturday - 8:00am

Reconciliation
Mon-Sat - 30 minutes before Daily Mass
Saturday - 1:00-2:00pm, 4:30-5:15pm
Anytime by appointment
************/

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: #003466; font-size: 3.5rem; font-weight: bold; font-family: 'Lato', sans-serif;}
h2 {font-variant-caps: small-caps; color: #808285; font-size: 2.5rem; font-family: 'Bellefair', serif;  font-weight: 400;}
.page-header h2 { padding-bottom: 0.25rem; line-height: 2.5rem;}
h3 {color: #003466; font-size: 2rem; border-bottom: 1px solid #003466; font-family: 'Bellefair', serif; line-height: 1.3; margin: 0 0 10px 0;}
h4 {color: #003466; font-size: 2rem; font-family: 'Bellefair', serif;}
h5 {background: #808285; font-size: 1.75rem;color: white; border-radius: .2rem; padding: .5rem; font-weight: 400;}
h6 {color: #808285; font-size: 1.5rem; text-transform: uppercase; font-weight: bold;}
h6.mixed { color: #003466; text-transform: none; }
a {color: #003466;}
a:hover {color: black;}

@media only screen and (min-width: 800px) 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: 800px) {
 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: #003466; font-family: 'Lato', sans-serif;
}

/*************** HOMELAYOUT ***************/
h3.g-title {font-weight: 400;}
#g-page-surround {background: url('/images/template/bg-church.jpg') 100% 0% no-repeat; background-size: 45%;}
#g-navigation {background: transparent;}
.homelayout #g-slideshow {background: transparent;}

@media only screen and (max-width: 800px) {
	/*.homelayout #g-page-surround {background: none;}
	.homelayout #g-navigation {background-color: #ffffff; background-image: url('/images/template/bg-church.jpg') 100% 0% no-repeat;}
	.homelayout #g-slideshow {background: #ffffff;}*/
}

/*************** OFFCANVAS ****************/


/*************** TOP **********************/
/*************** NAVIGATION ***************/

#g-navigation .g-grid .g-block:first-child .g-content {margin-bottom: 0; padding-bottom: 0;}
#g-navigation .g-logo img {margin-bottom: -40px; width: 500px;}
#g-navigation .g-toplevel {padding-left: 10%;}


/**Clarity dropdown- remove border-radius on menu dropdowns:***/
.g-main-nav .g-standard .g-dropdown {border-radius: 0px;}
.g-main-nav .g-dropdown .g-dropdown-column>.g-grid>.g-block.size-100 {border-radius: 0px;}
.g-main-nav .g-dropdown .size-100>.g-sublevel>li.g-go-back+li>.g-menu-item-container {
 border-top-left-radius: 0px;
 border-top-right-radius: 0px;
}
.g-main-nav .g-dropdown .size-100>.g-sublevel>li:last-child>.g-menu-item-container {
 border-bottom-left-radius: 0px;
 border-bottom-right-radius: 0px;
}

/*Clarity- remove top level dropdown indicatator***/
.g-main-nav .g-toplevel > li.g-parent .g-menu-parent-indicator {display: none;}
/*clarity increase menu font size, remove capitalization***/
.g-main-nav .g-toplevel>li>.g-menu-item-container>.g-menu-item-content {font-size: 1rem; letter-spacing: 0.1rem; font-weight: 500;}
.g-main-nav .g-toplevel {text-transform: none;}
.g-main-nav {font-family: 'Lato', sans-serif;}



/*************** SLIDESHOW ****************/
.homelayout #g-slideshow .g-block.size-33 .platform-content {margin: 0; padding: 0;}
.homelayout #g-slideshow .g-block.size-33 .g-content {margin-right: 0; padding-right: 0; margin-left: 0; padding-left: 0;}
.homelayout #g-slideshow .g-block.size-67 .g-content {margin-right: 0; padding-right: 0;}
.homelayout #g-slideshow .img-background {background: url('/images/stories/template/rotator-text.jpg') 0% 0% no-repeat; background-size: cover; height: 28vw; width: 100%;}
.homelayout #g-slideshow .img-foreground {background: rgba(0,52,102,.9); padding: 2vw; height: 100%; width: 100%;}
.homelayout #g-slideshow .img-foreground :is(h1,h2,h3,h4,h5,h6) {
	font-size: 2vw; 
	border-bottom: none; 
	background: none; 
	color: #ffffff; 
	text-transform: none; 
	font-weight: 400; 
	line-height: 1.3; 
	font-variant-caps: normal; 
	font-family: 'Bellefair', serif;
	margin-bottom: 0.25rem;
}
.homelayout #g-slideshow .img-foreground p {
	font-size: 1.1vw;
}

.scwide .sprocket-features-img-container img {height: 28vw!important; object-position: center; object-fit: cover;}

@media only screen and (max-width: 800px) {
	.homelayout #g-slideshow .g-grid {display: flex!important; flex-direction: column!important; flex-flow: column!important;}
	.homelayout #g-slideshow .g-grid {width: 100%;}
	.homelayout #g-slideshow .g-grid .g-block.size-33 {order: 2!important; width: 100%!important;}
	.homelayout #g-slideshow .g-grid .g-block.size-67 {order: 1!important; width: 100%!important;}
	.homelayout #g-slideshow .g-block.size-67 .g-content {margin-left: 0; padding-left: 0; margin-bottom: 0; padding-bottom: 0;}
	.homelayout #g-slideshow .g-block.size-33 .g-content {margin-top: 0; padding-top: 0;}
	.scwide .sprocket-features-img-container img {height: 56vw!important;}
	.homelayout #g-slideshow :is(.sprocket-features-arrows, .sprocket-features-pagination) {display: none;}
	.homelayout #g-slideshow .img-background {height: 70vw;}
	.homelayout #g-slideshow .img-foreground {padding: 5vw;}
	.homelayout #g-slideshow .img-foreground :is(h1,h2,h3,h4,h5,h6) {font-size: 6vw; margin: 0;}
	.homelayout #g-slideshow .img-foreground p {font-size: 3.2vw;}
}

@media only screen and (min-width: 800px) {
	.homelayout #g-slideshow .g-grid {display: flex; flex-direction: row; flex-flow: row nowrap;}
	.homelayout #g-slideshow .g-grid .g-block.size-33 {flex: 1;}
	.homelayout #g-slideshow .g-grid .g-block.size-67 {flex: 2;}
}

@media only screen and (min-width: 801px) {
	.homelayout #g-slideshow {padding: 0 10%!important;}
}

/*************** HEADER *******************/
.homelayout #g-header h3.g-title {border-bottom: none; font-size: 3rem;}

/*************** ABOVE ********************/
/*************** SHOWCASE *****************/
/*************** UTILITY ******************/
/*************** FEATURE ******************/
.homelayout #g-feature .g-grid {
    background: #ffffff;
    /*box-shadow: 0px 0px 10px rgb(0 0 0 / 20%);*/
    margin-bottom: 1vw;
}
.homelayout #g-feature .zoompics h3.g-title {padding-left: 2vw;}
.homelayout .zoompics :is(.sprocket-lists-portrait-title, .sprocket-lists-portrait-item) {padding-left: 1vw;}
.homelayout .zoompics h4.sprocket-lists-portrait-title {color: #003466; font-size: 1.8rem!important;}
.homelayout .zoompics .sprocket-lists-portrait-pagination li {background: #003466;}
.homelayout .zoompics .sprocket-lists-portrait-arrows .arrow {background: rgba(0,52,102,.75); color: #003466;}
.homelayout #g-feature .zoompics .sprocket-lists-portrait-container li {border-bottom: 1px solid #003466;}

/*************** EXPANDED *****************/
#g-expanded .even {margin-right: 10%; margin-left: 10%; margin-top: 1vw;} 

.rokminievents3 {margin-right: 10%; margin-left: 10%;}
.rme-items {display: flex; flex-direction: column;}
.rme-item {display: flex; flex-direction: row;}
.rme-badge {background: #003466;}
.rme-timeline {display: none;}
.rme-items li {margin: 15px 0 0 0;}

.homelayout #g-expanded h6 {font-size: 1.2rem; margin: 0; padding: 0;}

/*************** EXTENSION ****************/
/*************** BOTTOM *******************/
/*************** FOOTER *******************/
#g-footer :is(h1,h2,h3,h4,h5,h6,p, a) {color: #ffffff;}
#g-footer h2 {font-variant-caps: normal; font-weight: 400;}

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

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

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

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

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

.holy-art > div {
	padding: 0;
	margin: 0;
	margin-bottom: 1rem;
}