@import url('//fonts.googleapis.com/css2?family=Merienda:wght@400;700&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

/************ TEMPLATE  ************
Rotator Size: 1000x563 (wide, 16:9)

/************ FONTS  ************
Serif: Merienda   font-family: 'Merienda', cursive;
Sans Serif: Montserrat   font-family: 'Montserrat', sans-serif;


/************ COLORS  ************
Blue: #00657C; rgba(0,101,124,1)
Gold: #F8BD09; rgba(248,189,9,1)
Black: #000000; rgba(0,0,0,1)

/************ DROPSHADOWS ************
(50%, 0, 0, 10px blur)
(100%, 0, 0, 5px blur)


/************ OVERLAY ************
-rotator - black at 20%: rgba(0,0,0,.2)
-rotator's 'people who can help' button - gold at 80%: rgba(248,189,9,.8)
-partial overlay for 'It may seem...' section - black at 50%: rgba(0,0,0,.5)
-group picture (PLEASE CALL 911) - blue at 50%; rgba(0,101,124,.5)
-row of 3 gold boxes - let's make those 90%: rgba(248,189,9,.9)

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

body {color: #333; font-family: 'Montserrat', 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: #000000; font-size: 3.5rem; font-weight: bold; font-family: 'Merienda', cursive;}
h2 { color: #00657c; font-size: 2.5rem; font-family: 'Merienda', cursive;  font-weight: 400;}
.page-header h2 { padding-bottom: 0.25rem; line-height: 2.5rem;}
h3 {color: #000000; font-size: 2rem; border-bottom: 1px solid #cdbe79;  line-height: 1.3; margin: 0 0 10px 0;}
h3.mont {font-family: 'Montserrat', sans-serif;}
h4 {color: #F8BD09; font-size: 2rem;}
h4.mont {font-family: 'Montserrat', sans-serif;}
h5 {background: #F8BD09; font-size: 1.75rem;color: white; border-radius: .2rem; padding: .5rem;}
h6 {color: #00657c; font-size: 1.5rem; text-transform: uppercase; font-weight: bold;}
h6.mixed {text-transform: none;}
a {color: #00657c;}
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: #00657C; margin: 0.25rem; font-family: 'Montserrat', sans-serif; letter-spacing: 1px; font-size: 0.9rem;
}

/*************** PHOENIX TEMPLATE *********/
html body #g-page-surround {margin: 0;}

/*************** HOMELAYOUT ***************/
/*************** OFFCANVAS ****************/
#g-offcanvas #g-mobilemenu-container {font-weight: 500;}

/*************** TOP **********************/
.parish-alert {background-color: rgba(0,0,0);}

@media only screen and (max-width: 51rem) {
#g-top {padding: 0  0 0 3rem;}
.parish-alert .g-content {padding: 0 0 0 3rem;}
}

.g-social .g-social-items a {font-size: inherit;}


/*************** NAVIGATION ***************
#g-navigation .g-container .g-grid:first-child {background: #F8BD09;}
#g-navigation .g-container .g-grid:last-child {background: #00657C;}*/

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



/*************** SLIDESHOW ****************/
#g-slideshow {clip-path: none;}
.g-slideshow .g-slideshow-slider .swiper-slide {clip-path: none;}

.slideshow-overlay {position: relative; height: 85vh;}
.slideshow-overlay .g-grid {position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 85vh; width: 100%;}
.slideshow-overlay .g-grid:first-child {z-index: 20; background: rgba(0,0,0,.2);}
.slideshow-overlay .g-grid:first-child .g-block {display: flex; justify-content: center; align-items: center;}
.slideshow-overlay h2 {color: #ffffff; text-shadow: 0px 0px 10px rgba(0,0,0,.5); font-size: 2rem;}
.slideshow-overlay a.button {background: rgba(248,189,9,.8); border-radius: 0; font-size: 1.5rem; color: #00657C; text-transform: uppercase; padding: 1vw; 
	box-shadow: 0px 0px 10px rgba(0,0,0,.5); 
	font-weight: 500; 
	letter-spacing: 2px;
	 border: 1px solid #f8bd09;}
.slideshow-overlay a.button:hover {background: #00657C;  border: 1px solid #f8bd09; color: #f8bd09; }

@media only screen and (min-width: 768px) and (max-width: 959px) { 
	.slideshow-overlay {height: 50vh;}
	.slideshow-overlay .g-grid {height: 50vh;}
}

@media only screen and (min-width: 500px) and (max-width: 767px) {	
	.slideshow-overlay {height: 50vh;}
	.slideshow-overlay .g-grid {height: 50vh;}
	.slideshow-overlay h2 {font-size: 1.5rem;}
	.slideshow-overlay a.button  {font-size: 1.25rem;}
}
@media only screen and (max-width: 499px) {  
	.slideshow-overlay {height: 50vh;}
	.slideshow-overlay .g-grid {height: 50vh;}
	.slideshow-overlay h2 {font-size: 1.5rem;}
	.slideshow-overlay a.button  {font-size: 1.25rem;}
}


/*************** HEADER *******************/
.homelayout #g-header {background-attachment: fixed; box-shadow: inset 0px 0px 10px rgba(0,0,0,.5);}
.homelayout #g-header h2 {color: inherit;}

/*************** ABOVE ********************/
#g-above {clip-path: none; padding: 0 7%;}
.homelayout #g-above {background: url('/images/stories/template/vine.jpg') 0% 0% no-repeat; background-size: cover;}
.homelayout #g-above .picture-block .sprocket-features-img-container img {margin: 0; width: 100%; box-shadow: 0px 0px 10px rgba(0,0,0,.5); float: left;}
.homelayout #g-above .picture-block .sprocket-features-content {padding: 3vw 4vw; margin-left: -5vw; width: 100%;}
.homelayout #g-above .picture-block h2 {color: #F8BD09;}
.homelayout #g-above .picture-block p {color: #00657c; font-size: 1.3rem;}


@media only screen and (max-width: 767px) {
	#g-above {padding: 0 3%;}
    .homelayout #g-above .picture-block .sprocket-features-content {margin: 0; padding: 0; margin-top: -20vw;}
    .homelayout #g-above .picture-block .sprocket-features-desc {padding: 4vw;}
}

/*************** FEATURE ******************/
.homelayout #g-feature {background: url('/images/stories/template/paralax2.jpg') 0% 0% no-repeat; background-size: cover; background-attachment: fixed;}
.homelayout #g-feature .g-content {background: rgba(0,0,0,.5); height: 35vh; display: flex; align-items: center; justify-content: center; box-shadow: 0px 0px 5px rgba(0,0,0,.5);}
.homelayout #g-feature h2 {color: #F8BD09;}
.homelayout #g-feature p {font-size: 1.4rem; font-weight: 500;}

@media only screen and (min-width: 500px) and (max-width: 767px) {
	.homelayout #g-feature .g-content { height: 55vh;}
}
@media only screen and (max-width: 499px) {
	.homelayout #g-feature .g-content { height: 75vh;}
}

/*************** SHOWCASE *****************/
.homelayout #g-showcase {background: url('/images/stories/template/resources-bg.jpg') 0% 0% no-repeat; background-size: cover; padding: 4%;}
.homelayout #g-showcase .picture-block .sprocket-features-img-container img {margin: 0; width: 100%; box-shadow: 0px 0px 10px rgba(0,0,0,.5);}
.homelayout #g-showcase .picture-block .sprocket-features-content {margin-right: -7vw; order: 1; width: 105%;}
.homelayout #g-showcase .picture-block .sprocket-features-img-container {order: 2;}
.homelayout #g-showcase .picture-block .sprocket-features-desc {padding: 5vw 4vw 3vw 4vw;}
.homelayout #g-showcase p {font-size: 1.4rem; color: #00657C; }
.homelayout #g-showcase a {color: #f8bd09; }
.homelayout #g-showcase .picture-block .button {background: #f8bd09; border: 1px solid #f8bd09; color: #00657C; border-radius: 0; font-size: 1.5rem;}
.homelayout #g-showcase .picture-block .button:hover {background: transparent; color: #00657C; border: 1px solid #00657C; border-radius: 0; font-size: 1.5rem;}

@media only screen and (max-width: 76rem) {
	#g-showcase {padding: 2%;}
    .homelayout #g-showcase .picture-block .sprocket-features-content {margin: 0; padding: 0;}
    .homelayout #g-showcase .picture-block .sprocket-features-desc {padding: 4vw; }
}

/*************** UTILITY ******************/
.homelayout #g-utility {background: url('/images/stories/template/paralax3.jpg') 0% 0% no-repeat; background-size: cover; background-attachment: fixed; height: 50vh;}
.homelayout #g-utility .g-grid {height: 100%; width: 100%; background: rgba(0,101,124,.5);}
.homelayout #g-utility .g-grid .g-block {display: flex; align-items: center; justify-content: center;}
.homelayout #g-utility p {font-size: 1.5rem; font-weight: 500;}
.homelayout #g-utility h6 {color: #F8BD09;}

@media only screen and (max-width: 51rem) {
	.homelayout #g-utility {background: url('/images/stories/template/paralax3.jpg') 50% 50% no-repeat; background-attachment: fixed; height: 45vh;}
}

/**************main container****************/
#g-container-main {padding: 0 5%; }


/*************** EXPANDED *****************/
.homelayout #g-expanded {height: 15vh;}
.homelayout #g-expanded .g-content {padding: 0; margin: 0;}
.homelayout #g-expanded .g-grid {margin-top: -2vh;}
.homelayout #g-expanded .sprocket-strips-container li {margin: 0; padding: 1vh;}
.homelayout #g-expanded .qloverlaybackpic .sprocket-strips .sprocket-strips-container {margin: 0; margin-top: -6vh;}
.homelayout #g-expanded :is(.heightvw13 .sprocket-strips-item, .heightvw13 .sprocket-strips-s-item img, .heightvw13 .sprocket-strips-image-overlay img) {
    height: 30vh;
}
.homelayout .widthvw15 .sprocket-strips-item {width: 80%; box-shadow: 0px 0px 5px rgba(0,0,0,.5);}
.homelayout #g-expanded .qloverlaybackpic .sprocket-strips-content {background: rgba(248,189,9,.9); color: #00657C;}
.homelayout #g-expanded .qloverlaybackpic .sprocket-strips-content h4.sprocket-strips-title a {color: #00657C;  font-family: 'Montserrat', sans-serif; font-weight: 600;}

@media only screen and (min-width: 768px) and (max-width: 959px) {
.homelayout #g-expanded :is(.heightvw13 .sprocket-strips-item, .heightvw13 .sprocket-strips-s-item img, .heightvw13 .sprocket-strips-image-overlay img) {
height: 25vh;}
}

@media only screen and (max-width: 767px) {
	.homelayout #g-expanded {height: auto;}
}

/*************** EXTENSION ****************/
/*************** BOTTOM *******************/
.homelayout #g-bottom {background: url('/images/stories/template/paralax4.jpg') 0% 0% no-repeat; background-size: cover; background-attachment: fixed; height: 60vh; display: flex; align-items: flex-end; justify-content: center;}
.homelayout #g-bottom h2 {color: #ffffff; text-shadow: 0px 0px 10px rgba(0,0,0,.5);}


@media only screen and (max-width: 51rem) {
	.homelayout #g-bottom {background: url('/images/stories/template/paralax4.jpg') 50% 50% no-repeat; background-attachment: fixed; height: 45vh;}
}

/*************** FOOTER *******************/
#g-footer {padding: 1vw 0;}
#g-footer .foot-menu td {text-align: center; text-transform: uppercase;}
#g-footer .g-container .g-grid:last-child .g-content .platform-content:last-child p {font-size: .9rem;}
#g-footer .g-container .g-grid:last-child .g-content .platform-content {padding: 0 5%;}
#g-footer .g-container .g-grid:last-child .g-content .platform-content:first-child {margin-bottom: 1vw;}
#g-footer .g-container .g-grid:first-child {padding: 0 5%; margin-bottom: 1vw;}
#g-footer .g-container .g-grid:first-child h2 a {color: #F8BD09;}
#g-footer .g-container .g-grid:first-child h5 {background: none;}
#g-footer .g-container .g-grid:first-child h5 a {color: #F8BD09; background: none;}
#g-footer .g-container .g-grid:first-child .g-block .g-content {padding: 0; margin: 0;}
#g-footer .g-container .g-grid:last-child .g-block .g-content {padding: 0; margin: 0;}

.foot-menu tr {display: flex; justify-content: space-between;}
.foot-menu td {width: auto; padding: 0; margin: 0;}

#g-footer a {color: #ffffff;}
#g-footer a:hover {color: #F8BD09;}

@media only screen and (max-width: 767px) {
	.foot-menu tr, .foot-menu td  {display: block; table-layout:auto; width: 100%; border: none; margin: 0;}
}

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

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

/*************** SECTIONS *****************/
.contact .form-actions .btn, .login .btn, .logout .btn, .registration .btn, .profile-edit .btn, .remind .btn,
 .reset .btn, .profile .btn, .search #searchForm .btn, .finder #finder-search .btn, .print-mode #pop-print.btn,
 .edit.item-page .btn-toolbar .btn, .pager.pagenav a, .moduletable #login-form .control-group .btn, #searchForm .btn, #finder-search .btn {background: #00657c;}
.contact .form-actions .btn:hover, .login .btn:hover, .logout .btn:hover, .registration .btn:hover, .profile-edit .btn:hover, .remind .btn:hover,
 .reset .btn:hover, .profile .btn:hover, .search #searchForm .btn:hover, .finder #finder-search .btn:hover, .print-mode #pop-print.btn:hover,
 .edit.item-page .btn-toolbar .btn:hover, .pager.pagenav a:hover, .moduletable #login-form .control-group .btn:hover, #searchForm .btn:hover, #finder-search .btn:hover {color: #f8bd09; border: 1px solid #f8bd09;}

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

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

/*************** GRIDS ********************/
.sprocket-grids-b-title {
    margin: 0 0 15px 0;
}

.sprocket-grids-b-title h2 {
    color: #00657C;
    font-size: 1.5rem;
    font-family: 'Montserrat', serif;
    font-weight: 400;
}
.sprocket-grids-b-content {color: #333;}

	
.sprocket-grids-b-item.panel-color {
    background: #F1F2F2;
}

/************************ SUBPAGES ***********************/
        /*Title and Hero*/
.hero img {height: 18vw;}
.hero-heading .subheading-category {position: absolute; top: 25vw; font-family: 'Cinzel', serif; font-size: 4rem; color: #064373;}
        
@media only screen and (max-width: 767px) {
    .hero-heading .subheading-category {
        top: 40vw; 
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        text-align: center;
        width: 100%;
        font-size: 2.5rem;
    }
}

.sprocket-tabs {display: flex; padding-bottom: 30px;}
.sprocket-tabs-nav { float: none; background: #00657c; }
.sprocket-tabs ul { flex: 1;}
.sprocket-tabs .sprocket-tabs-panels { flex: 4;}
.nav-tabs.nav-stacked { display: none;}
.sprocket-tabs-nav li .sprocket-tabs-inner {color: white;}
.layout-left .sprocket-tabs-nav li.active > .sprocket-tabs-inner, .layout-left .sprocket-tabs-nav li.active > .sprocket-tabs-inner:hover {color: #333;}

@media only screen and (max-width: 767px) {
	#g-page-surround .g-content { padding-left:0; padding-right: 0px; margin-left: 5px; margin-right: 5px;}
	.layout-left .sprocket-tabs-nav { margin-right: 5px;}
}