@import url('//fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
/************ TEMPLATE  ************
Rotator Size: 1000x563 (wide, 16:9)

/************ FONTS  ************
Serif: Libre Baskerville
Sans Serif: Lato

/************ COLORS  ************
Red: #af1228; rgba(175,18,40,1)
Grey: #a7a9ac; rgba(167,169,172,1)

/************ NOTES ************
*Red:
  - menu bar - 90% - rgba(175,18,40,.9)
  - rotator text background - 90% - rgba(175,18,40,.9)
  - Our Mission title
  - quicklink text
  - module title text
  - links
  - footer background
*Grey:
  - rotator button
  - module buttons
  - title sidelines
*include images of shrine in rotator
**********************************/

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: #af1228; font-size: 3.5rem; font-weight: bold; font-family: 'Libre Baskerville', serif;}
h2, .page-header h2 {font-variant-caps: small-caps; color: #af1228; font-size: 2.2rem; font-family: 'Libre Baskerville', serif; font-weight: bold;}
h3 {color: #af1228; font-size: 1.8rem; border-bottom: 1px solid #a7a9ac; line-height: 1.3; margin: 0 0 10px 0;}
h4 {color: #af1228; font-size: 1.8rem;}
h5 {background: #a7a9ac; font-size: 1.75rem; color: white; border-radius: .2rem; padding: .5rem;}
h6 {color: #af1228; font-size: 1.4rem; text-transform: uppercase; font-weight: bold;}
a {color: #af1228;} 
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: #a7a9ac;
}

/*************** HOMELAYOUT ***************/
/*************** OFFCANVAS ****************/
/*************** TOP **********************/
/*************** NAVIGATION ***************/
#g-navigation {background: url('/images/template/header.jpg') 100% 0% no-repeat; padding-bottom: 2vw!important;}
#g-navigation .g-logo img {margin: 1vw;}
#g-navigation .g-container .g-grid:last-child {background: rgba(175,18,40,.9); color: #ffffff;}
.g-main-nav .g-toplevel>li>.g-menu-item-container {color: #ffffff;}
.g-main-nav .g-toplevel > li:hover, .g-main-nav .g-toplevel > li.active {color: #ffffff;}

@media only screen and (max-width: 767px) {
  #g-navigation .g-logo img {margin: 6vw;}
  #g-navigation { background: white; }
}

/*************** SLIDESHOW ****************/
/*************** HEADER *******************/
/*************** ABOVE ********************/
/*************** SHOWCASE *****************/
        /*Rotator*/
.fwshowcase {margin-top: 0!important;}
.fwshowcase .sprocket-features-content {
    background: url('/images/stories/template/rotator-text.jpg') 0% 0% no-repeat;
    background-size: cover;
}

.fwshowcase .sprocket-features-desc {
	background: rgba(175,18,40,.9);
}

@media only screen and (max-width: 767px) {
  .fwshowcase .sprocket-features-img-container {padding-bottom: 80vw;}
  .fwshowcase .layout-showcase .sprocket-features-img-container img {height: 56vw;}
  .fwshowcase .sprocket-features-content {height: 80vw; top: -80vw;}
  .fwshowcase .sprocket-features-desc {height: 80vw;}
}

/*************** UTILITY ******************/
        /*Quicklinks*/
#g-utility {padding: 0 7%;}

#g-utility .platform-content {
	background: #ffffff; 
	padding: 1.5rem 2.5rem;
	/*box-shadow: 0px 0px 10px rgba(0,0,0,0.3);*/
}
.sprocket-strips-s-content {margin: 40px 0;}
.homelayout #g-utility .readon {display: none;}
.sprocket-strips-s-title {text-align: center;}
.standrew .sprocket-strips-s-title a {color: #C11E1E;}
.stmary .sprocket-strips-s-title a {color: #6893AD;}
#g-utility .sprocket-strips-s-item:hover {box-shadow: 0px 0px 10px rgba(0,0,0,0.3);}

.sprocket-strips-s-item {
	display: flex;
	flex-direction: column;
}
.sprocket-strips-s-item img {order: 0;}
.sprocket-strips-s-content {order: 1;}
.sprocket-strips-s-item img {box-shadow: 0px 0px 10px rgba(0,0,0,0.3);}

@media only screen and (max-width: 767px) {
	#g-utility h3.g-title {font-size: 2rem;}
	#g-utility.standrew .sprocket-strips-s-title a {color: #ffffff;}
	.stmary .sprocket-strips-s-title a {color: #ffffff;}
	.sprocket-strips-s-item img {height: 4vw;}
	#g-utility, #g-extension, #g-footer {padding: 0 0;}

  .separatedquicklinks > .sprocket-strips-s > .sprocket-strips-s-container > .sprocket-strips-s-block > .sprocket-strips-s-item {background: #af1228;}
}

/*************** FEATURE ******************/
/*************** EXPANDED *****************/
/*************** EXTENSION ****************/
/************ move ads higher on mobile  ************/
/***reorder columns in a container***/
@media only screen and (max-width: 767px) {
	#g-extension .g-block:first-child  { order: 2; }
	#g-extension .g-block:last-child { order: 1; }
	#g-extension .g-block:nth-child(2) { order: 3; }
}

/*************** BOTTOM *******************/
#g-bottom {padding: 2vw 0!important;}

/*************** FOOTER *******************/
/*************** COPYRIGHT ****************/

/*************** MODULES ******************/
.moduletable .nav.menu, .moduletable .unstyled {background: #af1228;}
.moduletable .nav.menu li.current.active a, .moduletable .nav.menu li a:hover {
    color: #ffffff;
    background: #a7a9ac;
}

/*************** SECTIONS *****************/
#g-footer a {color: #ffffff;}

/*************** MOBILE *******************/
.g-offcanvas-toggle {color: #bf4052;}

/*************** ADS **********************/


/* .moduletable  ul.latestnews { list-style-position: inside; } */
.moduletable  ul.latestnews li{  list-style-type: disc; border: none; padding: 0; margin: 0; border-bottom: 1px rgba(0,0,0,.2) solid; }

.mod_placehereparish-alert { padding-left: 35px;}