@import url('//fonts.googleapis.com/css2?family=Caudex: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: Caudex
Sans Serif: Quicksand
font-family: 'Caudex', serif;
font-family: 'Quicksand', sans-serif;

/************ COLORS  ************
Dusty Orange: #b17422; rgba(177,116,34,1)
Green: #212f0f; rgba(33,47,15,1)
Navy: #121627; rgba(18,22,39,1)
Cream: #d3d5cf --- background color

/************ NOTES ************
-Rotator has 20% black overlay - rgba(0,0,0,.2), and then the logo's background overlay is 70% Dusty Orange - rgba(177,116,34,.7)
-Quicklinks and Online Connections are 70% green overlay - rgba(33,47,15,.7)
-Dropshadows are on Dusty Orange overlay of rotator, Menu bar, quicklinks, calendar, fb feed, Recent News images, buttons, and that's it.
-Mass Times - menu item with hover over effect, SJN-Lil, OurLady-Centerport 
-Video instead of rotator when it is ready
************/

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

h3.g-title {color: #212f0f; }

@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: #121627; font-family: 'Quicksand', sans-serif;
}

.item-image {
    display: none;
}

/*************** HOMELAYOUT ***************/
/*************** OFFCANVAS ****************/



/*************** TOP **********************/
#g-top {padding: 0 5%;}
@media only screen and (max-width: 51rem) {
	#g-top {padding: 0 5% 0 10%;}
}


/*************** NAVIGATION ***************/
.homelayout #g-navigation .sprocket-features-content {display: none;}
.homelayout #g-navigation .g-container {position: relative; height: 56vw!important; width: 100%; display: flex; justify-content: center; align-items: center;}
.homelayout #g-navigation .g-container .g-grid:first-child {position: absolute;}
.homelayout #g-navigation .g-container .g-grid:nth-child(2) {position: absolute; right: 20%; left: 20%; width: 60%; z-index: 2;}
.homelayout #g-navigation .g-container .g-grid:nth-child(2) .g-content {background: rgba(177,116,34,.7); padding: 1vw;}
.homelayout #g-navigation .g-container .g-grid:nth-child(2) .g-content img {border: 1px solid #ffffff;}
.img-overlay-bg {
    display: flex;
    justify-content: center;
    align-items: center;
}
.img-overlay-bg > div {
    background: rgba(177,116,34,.7);
}
.img-overlay-bg img {
    margin: 2vw;
    border: 1px solid #ffffff;
}

@media only screen and (max-width: 51rem) {
	.homelayout #g-navigation .g-container .g-grid:nth-child(2){left: 10%; right: 10%; width: 80%;}
}

/*************** SLIDESHOW ****************/
#g-slideshow {padding: 0;}
#g-slideshow .g-grid:nth-child(2) {justify-content: space-around;}
#g-slideshow .g-content {padding: 0;}
#g-slideshow .g-menu-item---particle-l307d >.g-menu-item-container {padding-top: 0.25rem !important;}
#g-slideshow .g-main-nav .g-toplevel>li>.g-menu-item-container, .g-main-nav .g-sublevel>li>.g-menu-item-container {padding: 0.625rem 0.775rem }
 
/**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: 400;}
/*.g-main-nav .g-toplevel {text-transform: none;}*/
.g-main-nav {font-family: 'Quicksand', sans-serif;}

#g-slideshow .g-menu-item-type-particle  h4 {font-size: 1.5rem; text-transform: none;}
#g-slideshow .g-menu-item-type-particle  p {font-size: 1rem; text-transform: none;}



/*************** HEADER *******************/
#g-header .layout-slideshow .sprocket-features-content {background: transparent;}

/*************** ABOVE ********************/

 
  /*Quicklinks*/
.hoverlinks h4.hoverlinks-title {font-family: 'Quicksand', sans-serif; text-transform: uppercase; font-size: 1.5rem; }
.sprocket-strips-content {visibility: visible; opacity: 1;}
.hoverlinks-block a {background: rgba(33,47,15,.7);}
.hoverlinks-block a:hover {background: rgba(33,47,15,.8);}
.hoverlinks .sprocket-strips-container li {position: relative;}
.hoverlinks .hoverlinks-block {height: 13vw;}

@media only screen and (max-width: 51rem) {
    .hoverlinks .sprocket-strips-item {background: rgba(33,47,15,1);}
	.qloverlaybackpic .sprocket-strips .sprocket-strips-container > li{ border-bottom: none;}
	.hoverlinks .hoverlinks-block {background-size: 25% !important;}
	.hoverlinks .hoverlinks-block a {padding-left: 25%;}


}


/*************** SHOWCASE *****************/
/*************** UTILITY ******************/
/*************** FEATURE ******************/
#g-feature {padding: 0 7%;}
#g-feature iframe {box-shadow: 2px 2px 10px rgba(0,0,0,.5);}

.zoompics .active .portrait-image img, .zoompics.noncollapse .portrait-image img {height: 14vw; width: 14vw; margin: 0 15px 10px 0; box-shadow: 2px 2px 10px rgba(0,0,0,.5); }
.sprocket-lists-portrait-container li {border-bottom: 1px solid #b17422;}
.zoompics h4.sprocket-lists-portrait-title {color: #121627; font-family: 'Quicksand', sans-serif; font-weight: 600;}
.zoompics h4.sprocket-lists-portrait-title a {color: #121627;}


/*************** EXPANDED *****************/
/*************** EXTENSION ****************/
/*************** BOTTOM *******************/
.homelayout #g-bottom {background: url('/images/template/paralax2.jpg') 50% 0% no-repeat; background-size: cover; background-attachment: fixed;}
.homelayout #g-bottom .g-container {background: rgba(33,47,15,.7); padding: 5vw 10%!important; position: relative; height: 35vw;}
.homelayout #g-bottom .g-container .g-grid {position: absolute; height: 95%; width: 98%; top: 2.5%; bottom: 2.5%; left: 1%; right: 1%; border: 1px solid #ffffff;}
.homelayout #g-bottom h3.g-title {border-bottom: none; margin-bottom: 4vw; color: #ffffff;}

@media only screen and (max-width: 51rem) {
	.homelayout #g-bottom .g-container {height: 75vw;}
}


        /*Font Awesome Quicklinks*/
.fa-quicklinks .sprocket-strips-s-title a {color: #ffffff;}
.fa-quicklinks .sprocket-strips-s-text {color: #ffffff;}

.fa-quicklinks {margin: 0 10vw 0 0vw!important;}
.fa-quicklinks .sprocket-strips-s-container {display: grid;}
.fa-quicklinks.fa-l1 .sprocket-strips-s-container {grid-template-columns: 1fr;}
.fa-quicklinks.fa-l2 .sprocket-strips-s-container {grid-template-columns: 1fr 1fr;}
.fa-quicklinks.fa-l3 .sprocket-strips-s-container {grid-template-columns: 1fr 1fr 1fr;}
.fa-quicklinks.fa-l4 .sprocket-strips-s-container {grid-template-columns: 1fr 1fr 1fr 1fr;}
.fa-quicklinks.fa-l5 .sprocket-strips-s-container {grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}
.fa-quicklinks.fa-l6 .sprocket-strips-s-container {grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;}
.fa-quicklinks.fa-l7 .sprocket-strips-s-container {grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;}
.fa-quicklinks.fa-l8 .sprocket-strips-s-container {grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;}
.fa-quicklinks.fa-l9 .sprocket-strips-s-container {grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;}
.fa-quicklinks.fa-l10 .sprocket-strips-s-container {grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;}
.fa-quicklinks {align-items: center; width: 100%; height: 100%;}
.fa-quicklinks .sprocket-strips-s-block {position: relative; width: 100%; margin: 0;}
.fa-quicklinks .sprocket-strips-s-item img {display: flex; margin-bottom: 3vw;}
.fa-quicklinks .sprocket-strips-s-item {display: flex; align-items: center; justify-content: center; position: relative;}
/*.fa-quicklinks .sprocket-strips-s-item {transition: all 1.5s ease-in-out;}*/
.fa-quicklinks .sprocket-strips-s-item:hover {top: -15px;}
.fa-quicklinks .sprocket-strips-s-item:hover .sprocket-strips-s-text span {transform: rotateY(360deg); transition: all .7s linear;}

.fa-quicklinks .sprocket-strips-s-item .sprocket-strips-s-content {display: flex; flex-direction: column; height: 9rem;}
.fa-quicklinks .sprocket-strips-s-item .sprocket-strips-s-content h4 {order: 2; text-align: center;}
.fa-quicklinks .sprocket-strips-s-item .sprocket-strips-s-content span {order: 1;}
.fa-quicklinks .sprocket-strips-s-block .sprocket-strips-s-item .sprocket-strips-s-content h4.sprocket-strips-s-title {font-size: 1.2rem;}
.fa-quicklinks .sprocket-strips-s-block .sprocket-strips-s-item .sprocket-strips-s-content h4.sprocket-strips-s-title a {position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding-top: 4rem; width: 15ch; margin-left: auto; margin-right: auto; display: flex; justify-content: center; align-items: center; z-index: 10; transition: all .05s linear;}
.fa-quicklinks .sprocket-strips-s-block .sprocket-strips-s-item .sprocket-strips-s-content h4.sprocket-strips-s-title a:hover {box-shadow: 0 8px 6px -6px rgba(255,255,255,.5);}
.fa-quicklinks .sprocket-strips-s-text span {font-size: 3vw; transition: all .4s linear; text-shadow: 2px 2px rgba(0,0,0,.2);}
.fa-quicklinks .sprocket-strips-s-container:before, .fa-quicklinks .sprocket-strips-s-container:after {content: none;}
.fa-quicklinks .readon {display: none;}

@media only screen and (max-width: 51rem) {
    .fa-quicklinks .sprocket-strips-s-container {grid-template-columns: 1fr 1fr 1fr 1fr;}
    .fa-quicklinks.fa-l1 .sprocket-strips-s-container {grid-template-columns: 1fr 1fr;}
    .fa-quicklinks.fa-l2 .sprocket-strips-s-container {grid-template-columns: 1fr 1fr;}
    .fa-quicklinks.fa-l3 .sprocket-strips-s-container {grid-template-columns: 1fr 1fr;}
    .fa-quicklinks.fa-l4 .sprocket-strips-s-container {grid-template-columns: 1fr 1fr 1fr 1fr;}
    .fa-quicklinks.fa-l5 .sprocket-strips-s-container {grid-template-columns: 1fr 1fr;}
    .fa-quicklinks.fa-l6 .sprocket-strips-s-container {grid-template-columns: 1fr 1fr;}
    .fa-quicklinks.fa-l7 .sprocket-strips-s-container {grid-template-columns: 1fr 1fr;}
    .fa-quicklinks.fa-l8 .sprocket-strips-s-container {grid-template-columns: 1fr 1fr;}
    .fa-quicklinks.fa-l9 .sprocket-strips-s-container {grid-template-columns: 1fr 1fr;}
    .fa-quicklinks.fa-l10 .sprocket-strips-s-container {grid-template-columns: 1fr 1fr;}
    .fa-quicklinks .sprocket-strips-s-content {margin-left: 0; height: 5rem;}
    .fa-quicklinks .sprocket-strips-s-item .sprocket-strips-s-content  { height: 5rem;} 
    .fa-quicklinks .sprocket-strips-s-item .sprocket-strips-s-content span {margin-left: auto; margin-right: auto; height: 5rem;} 
    .fa-quicklinks .sprocket-strips-s-block .sprocket-strips-s-item .sprocket-strips-s-content h4.sprocket-strips-s-title a {align-items: start; width: 100%;}
    .fa-quicklinks .sprocket-strips-s-container li {padding-bottom: 0;}
    .fa-quicklinks .sprocket-strips-s-nav {display: none;}
	.fa-quicklinks .sprocket-strips-s-text span {font-size: 7vw; }
	.sprocket-strips-s-item img, .sprocket-strips-s-item div {max-width: 50px;}
}

/*************** FOOTER *******************/
.footer-box {display: flex; align-items: center;}
.footer-box div:first-child {flex: 4;}
.footer-box div:last-child {flex: 1;}

#g-footer h4 {font-family: 'Quicksand', sans-serif;}
#g-footer p {font-family: 'Quicksand', sans-serif;}
#g-footer .button {background: #b17422;}
#g-footer .button:hover {background: #212f0f;}


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

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

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

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

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


/* front page rotator resizing */

.rotate-resize .layout-slideshow .sprocket-features-img-container img {
    height: 56vw !important;
}

/* st peter aurora classes */

.aurora-docs {
    padding: 0 5% !important;
}

.aurora-docs .g-title {
    text-align: center;
}