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

/************
non google font: nuptial
font-family: 'Lora', serif;

new 3.1.22
navy: #021d49 rgba(2, 29, 73, 1)
silver:  #9fa2a3 rgba(159, 162, 163, 1)


blue: #003060  rgba(0, 48, 96, 1)
light blue: #d4e8ff   rgba(212, 232, 255, 1)
pink:  #f1d3d5

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

body {color: #333; font-family: 'Lora', 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: 3.5rem;}
h1 {color: #021d49; font-size: 3.5rem;  font-family: 'Lora', serif;}
h2 { color: #021d49; font-size: 2.5rem; font-family: 'Lora', serif;  }
h2.smallcaps {font-variant-caps: small-caps; }
.page-header h2 { padding-bottom: 0.25rem; line-height: 2.5rem;}
h3 {color: #021d49; font-size: 2rem; border-bottom: 1px solid #9fa2a3;  line-height: 1.3; margin: 0 0 10px 0; font-family: 'Lora', serif;}
h3.smallcaps {font-variant-caps: small-caps; border-bottom: 0px solid #ffffff;}
h4 {color: #021d49; font-size: 2rem; font-family: 'Lora', serif;}
h5 {background: #021d49; font-size: 1.75rem;color: white; border-radius: .2rem; padding: .5rem; font-family: 'Lora', serif;}
h5.outline { border: 2px solid #021d49; color: #021d49; background: transparent; padding: .5rem; }
h6 {color: #021d49; font-size: 1.5rem; /*text-transform: uppercase;*/ font-family: 'Lora', serif;}
a {color: #021d49;}
a:hover {color: black;}

h3.g-title {border-bottom: none; font-size: 3rem; font-weight: 400;}

hr {border-bottom: 1px solid rgba(231, 232, 234, 0.5);}
hr.short { padding: 0; margin: 0 auto; width: 100px;}

blockquote {
	background: transparent /*rgba(212, 232, 255, 0.5)*/ ;
	color: #021d49;
	padding: 50px 60px;
	font-family: 'Lora', serif; 
	font-style: normal;
	border: none;
	line-height: 1.5;
	position: relative;
	margin: 30px;
	font-size: 1.5rem;
	border-radius: 0.75rem;
}

blockquote:before, blockquote:after {
	font-size: 8rem;
	position: absolute; 
	color: #ffffff;
	font-family: serif;
	font-weight: 900;
	line-height: 0;
}
blockquote:before { content: "\201C"; top: 21px; left: -20px;}
blockquote:after { content: "\201D"; bottom: -14px; right: -22px; }


@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: 6px;}
    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;}
 #g-container-main p {font-size: 1rem; margin-bottom: 6px !important;}
 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: #021d49; font-family: 'Lora', serif; color: #ffffff; 
}
.readon, .sprocket-lists-portrait-container > li .sprocket-lists-portrait-item > a span {padding: 0.5rem 1rem;  border: 1px solid #021d49;}

a.whitebutton { 
  color: #021d49 !important; 
  font-size: 1rem;
  text-transform: none;
  font-weight: normal;
  background: white; 
  padding: .5rem 1rem; 
  border-radius: .5rem; 
  margin: 0;
  display: inline-block;
  font-weight: 500;
  line-height: 1.125rem;
  border: 1px solid #021d49;
  transition: all .2s ease-in;
}
a.bluebutton { 
  color: white !important; 
  font-size: 1rem;
  text-transform: none;
  font-weight: normal;
  background: #021d49; 
  padding: .5rem 1rem; 
  border-radius: .5rem; 
  margin: 0;
  display: inline-block;
  font-weight: 500;
  line-height: 1.125rem;
  border: 1px solid #021d49;
  transition: all .2s ease-in;
}
a.bigbutton {
	font-size: 1.5rem;
	text-transform: none;
    padding: 1.25rem 3.5rem;
    box-shadow: 0px 0px 10px rgb(0 0 0 / 30%);
	line-height: 1.2;
}

a.blueblockbutton { 
  color: #ffffff !important; 
  font-size: 1rem;
  text-transform: none;
  text-align: center;
  font-weight: normal;
  background: #021d49; 
  padding: .7rem 1.3rem; 
  border-radius: .5rem; 
  margin: 0;
  display: block;
  font-weight: 500;
  line-height: 1.125rem;
  border: 1px solid #021d49;
  transition: all .2s ease-in;
}
a.blueblockbtn { 
  color: #021d49 !important; 
  font-size: 1rem;
  text-transform: none;
  text-align: center;
  font-weight: normal;
  background: transparent; 
  padding: .7rem 1.3rem; 
  border-radius: .5rem; 
  margin: 0;
  display: block;
  font-weight: 500;
  line-height: 1.125rem;
  border: 1px solid #021d49;
  transition: all .2s ease-in;
}

.whitebutton:hover {background: #021d49; color: white !important;   border: 1px solid #ffffff;}
.bluebutton:hover {background: transparent; color: #021d49!important;   border: 1px solid #021d49;}
.readon:hover, .sprocket-lists-portrait-container > li .sprocket-lists-portrait-item > a span:hover {background: transparent; color: #021d49!important;   border: 1px solid #021d49; padding: 0.5rem 1rem;}
.blueblockbutton:hover {background: transparent; color: #021d49 !important;   border: 1px solid #021d49;}
.blueblockbtn:hover {background: #021d49; color: white !important; }
.bigbutton:hover{
	font-size: 1.5rem;
    padding: 1.25rem 3.5rem;
    box-shadow: 0px 0px 10px rgb(0 0 0 / 30%);
	line-height: 1.2;
}





/************ BACKGROUND  ************/
/*body #g-page-surround  {background: white url(../images/template/background-ihm.jpg) 0% 50% no-repeat; background-attachment: fixed; } 
body #g-page-surround  {background: white url(../images/template/background-hb40lr.png) 65%; background-attachment: fixed; } 
.sectionheader { margin-top: 2rem; }
@media only screen and (max-width: 50.99rem) {
	body #g-page-surround {background: white url(../images/template/background-hb40lr.png) 80% 0% no-repeat; background-attachment: fixed; }
	
}*/


/*************** HOMELAYOUT ***************/
/*************** OFFCANVAS ****************/
.g-offcanvas-toggle {color: #ffffff;}
#g-offcanvas #g-mobilemenu-container {font-weight: 400;}

/*************** TOP **********************/
#g-top a {color: #ffffff;}
#g-top p {font-size: 1.2rem;}

#g-top .g-logo img {margin-left: 5vw; }

/**********search************/
#g-top form {margin: 50px 0 0 50px;}
#g-top input[type="text"] {border-radius: 0.5rem; background-color: rgba(255,255,255,0); color: #ffffff; border: 1px solid white;}


/*************** NAVIGATION ***************/
.hidden {display: none!important;}
.m-logo img {width: 9vw; height: 9vw; margin-top: 3vw;}

.sticky {
    position: fixed!important;
    top: 0!important;
    right: 0!important;
    left: 0!important;
    z-index: 20!important;
}

.stick-margin {margin-bottom: 5vw;}

.menu-grow {height: 5vw!important; box-shadow: 0px 0px 10px rgba(0,0,0,.5);}

#g-navigation :is(.g-container, .g-grid, .g-block, .g-content, .g-main-nav, .g-toplevel) {height: 100%;}

@media only screen and (min-width: 51rem) {
    #g-navigation {height: 3vw; width: 100%; /*position: fixed;*/ top: 0; left: 0; right: 0; z-index: 50; transition: height .1s ease-in-out;}
    #g-navigation :is(.size-80 > div, .g-main-nav, .g-toplevel, .g-toplevel > li > a) {height: 100%;}
    #g-navigation .g-toplevel > li > a {display: flex; align-items: center; justify-content: center;}
}

@media only all and (min-width: 51rem) {
	#g-navigation .g-logo img { width: 60vw;}
}
@media only screen and (max-width: 50.99rem) {
	#g-navigation .g-block:last-child .g-content { padding-bottom: 0.5rem;}
}

.sticky {
    position: fixed!important;
    top: 0!important;
    right: 0!important;
    left: 0!important;
    z-index: 20!important;
}

.stick-margin {margin-bottom: 3vw;}



/**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: 1.2rem; letter-spacing: 0.1rem; font-weight: 600;}
.g-main-nav .g-toplevel {text-transform: none;}
.g-main-nav {font-family: 'Lora', serif;}




/*************** SLIDESHOW ****************/
#g-slideshow .g-content {padding: 0;  margin: 0;}



#g-slideshow .pagination-active .sprocket-features-pagination { bottom: 0;}
#g-slideshow .pagination-active { margin-bottom: 0;}

@media only screen and (max-width: 50.99rem){
	.fwrsuperwide .layout-slideshow .sprocket-features-img-container {padding-bottom: 0;}
	.hero img {opacity: 1; height: 33vw !important;}
}

.hero img {opacity: 1; height: 27vw;}
.itemid-1151 .hero img { height: 37vw;}


/*************** HEADER *******************/
.homelayout #g-header {padding: 1% 7%; }
/*#g-header { background: url(../images/template/background-ihm.jpg) 50% 0 no-repeat; background-size: 100% !important; }*/

.homelayout #g-header .qlexpandingborder h4.sprocket-strips-title {border-radius: 50%;}
.homelayout #g-header .sprocket-strips-item {border-radius: 50%;}
/*.homelayout #g-header .sprocket-strips-content {border-radius: 50%;}*/
.homelayout #g-header .qloverlaybackpic .sprocket-strips-content  {border-radius: 50%; background: transparent;}
.homelayout #g-header .sprocket-strips-nav {display: none;}


.widthvw25 .sprocket-strips-item { width: 25vw;}
.widthvw18 .sprocket-strips-item { width: 18vw;}
.heightvw25 .sprocket-strips-item, .heightvw25 .sprocket-strips-s-item img, .heightvw25 .sprocket-strips-image-overlay img { height: 25vw;}
.heightvw18 .sprocket-strips-item, .heightvw18 .sprocket-strips-s-item img, .heightvw18 .sprocket-strips-image-overlay img { height: 18vw;}
.widthvw25 .sprocket-strips .sprocket-strips-container > li {  display: flex;  justify-content: center;}
.widthvw18 .sprocket-strips .sprocket-strips-container > li {  display: flex;  justify-content: center; padding-top: 3rem;}

@media only screen and (max-width: 50.99rem) {
	#g-header {background-size: 200% !important; }
	.widthvw25 .sprocket-strips-item { width: 60vw;}	
	.widthvw18 .sprocket-strips-item { width: 50vw;}
	.heightvw25 .sprocket-strips-item, .heightvw25 .sprocket-strips-s-item img, .heightvw25 .sprocket-strips-image-overlay img { height: 60vw;}
	.heightvw18 .sprocket-strips-item, .heightvw18 .sprocket-strips-s-item img, .heightvw18 .sprocket-strips-image-overlay img { height: 50vw;}
	.qloverlaybackpic .sprocket-strips .sprocket-strips-container > li { border-bottom: solid white 0px;}
	.widthvw18 .sprocket-strips .sprocket-strips-container > li { padding-top: 0;}
}


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


.rme-badge {background: #021d49;}
.rme-timeline-point:hover, .rme-timeline-point.active, .rme-timeline-point span {
    background: #021d49;
}


/*************** FEATURE ******************/

.homelayout #g-feature {padding: 3% 5%; }



/*************** SHOWCASE *****************/

#g-showcase h3 {color: #9fa2a3; font-size: 2.5rem;}
#g-showcase .rsphotoblocknews .sprocket-strips-item:first-child {height:25vw; width: 20vw;}
.grid-news-1 .sprocket-strips-title {margin: 0; background: #ffffff; padding: .5vw 1vw;}

.grid-news-1 .sprocket-strips-item {background-image: url('/images/stories/template/default-news.jpg');}

/*************** UTILITY ******************/
.homelayout #g-utility {padding: 3% 7%;}
#g-utility {background: url('../images/stories/template/hero/rejoice.jpg') 0% 0% no-repeat; background-size: 100% !important;}
#g-utility .g-content {background: rgba(255, 255, 255, 0.8); border-radius: 15px;}
#g-utility p, #g-utility li {font-size: 1.2rem;}
#g-utility :is(h1,h2,h3,h4,h5,h6,p,ul,a) {color: #021d49;}
#g-utility td { padding: 0.5rem;}
#g-utility .moduletable .category-module li {margin-bottom: 0.01rem; padding-bottom: 0.01rem;}



@media only screen and (max-width: 50.99rem) {
	#g-utility {background-size: cover !important;}
}


#g-utility  .moduletable .category-module {border: 0px solid #ffffff; padding: 0.5rem 1rem;}
#g-utility  .moduletable .category-module li {padding-bottom: 0.25rem; list-style-type: disc;}

/*************** EXPANDED *****************/
#g-expanded {padding: 4%;}
#g-expanded :is(h1,h2,h3,h4,h5,h6) {color: #ffffff;}
#g-expanded .layout-slideshow .sprocket-features-img-container img {border-radius: 15px;}

/*************** EXTENSION ****************/
#g-extension h1 {color: white;}
#g-extension {background: url('/images/template/immaculate2.jpg') 0% 0% no-repeat; background-size: 100% !important; background-attachment: fixed; }
@media only screen and (max-width: 50.99rem){
	#g-extension {background-position: 75% 0% !important; background-size: 200% !important;}
	
}

/*************** BOTTOM *******************/
.homelayout #g-bottom {padding: 5%;}
.homelayout #g-bottom {background: url('/images/template/masstimes.jpg') 0% 40% no-repeat; background-size: 60% !important;}
@media only screen and (max-width: 50.99rem){
	.homelayout #g-bottom {background-position: 0% 0% !important; background: none;}
}

#g-bottom p {font-size: 1.2rem;}
#g-bottom h1 {font-size: 4.5rem;}
#g-bottom :is(h1,h2,h3,h4,h5,h6) {color: #021d49;}
#g-bottom h4 { margin-bottom: 0.15rem;}
#g-bottom h6.gvibges { font-size: 2rem;}

/*************** FOOTER *******************/

#g-footer h2 {color: #ffffff;}
#g-footer a {color: #ffffff;}

#g-footer a.bluebutton {background: white; color: #021d49!important;}
#g-footer .bluebutton:hover {background: #9fa2a3; }

/*************** COPYRIGHT ****************/
#g-copyright {font-family: 'Lora', serif;}

#g-copyright {height: 0; padding-bottom: 25px;}

/*************** MODULES ******************/
.moduletable .nav.menu, .moduletable .unstyled {background: #021d49;}
.moduletable .nav.menu li.current.active a, .moduletable .nav.menu li a:hover {
    color: #021d49;
    background: #9fa2a3;
}

/*************** SECTIONS *****************/
.boxshadow {
    box-shadow: 0px 0px 8px rgb(0 0 0 / 50%);
    border-radius: 15px;
}
.imagetitle .platform-content {padding-bottom: 0;}


/**************SPROCKET STRIPS******************/
.vocationslayout .sprocket-strips-item {
	box-shadow: none;
    background: rgba(2,29,73,0.75);
	border-radius: 1rem;
}
.vocationslayout .sprocket-strips-content {color: #ffffff;}
.vocationslayout .sprocket-strips-content h3 {color: #ffffff;}
.vocationslayout .sprocket-strips-title h4 {font-size: 1.75rem; color: #ffffff;}
.vocationslayout .sprocket-strips-title { color: #ffffff;}
.vocationslayout .sprocket-strips-container {min-height: 450px;}
.vocationslayout .sprocket-strips-s-container {min-height: 350px;}
.vocationslayout .sprocket-strips-s-container {margin: 0 2% !important;}

.vocationslayout .sprocket-strips-arrows .arrow { background: none; color: #021d49; font-size: 5rem; box-shadow: none;}
.vocationslayout .sprocket-strips .sprocket-strips-nav .arrow { position: absolute; top: 50% }
.vocationslayout .sprocket-strips .sprocket-strips-nav .arrow.next { right: -50px; }
.vocationslayout .sprocket-strips .sprocket-strips-nav .arrow.prev { left: -50px; }

.vocationslayout .sprocket-strips-p-item img {border-radius: 0.5rem;}
.vocationslayout ol>li {padding-bottom: 5px;}

/**************SPROCKET TABS******************/
.sprocket-tabs {display: flex; padding-bottom: 30px;}
.sprocket-tabs-nav { float: none; background: rgba(2, 29, 73, 0.5); }
.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: #ffffff;}
.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: 50.99rem) {
	#g-page-surround #g-showcase .g-content { padding-left:0; padding-right: 0px; margin-left: 5px; margin-right: 5px;}
	#g-page-surround .g-content { padding-left:0; padding-right: 0px; margin-left: 0px; margin-right: 0px;}
	.layout-left .sprocket-tabs-nav { margin-right: 5px;}
}

.vocationslayout .sprocket-lists-title, .givelayout .sprocket-lists-title {
	padding: 15px 40px 2px 10px !important;
	border-bottom: 1px solid rgba(159, 162, 163, 0.25) !important;
	border-radius: 0;
} 

.newsmedialayout .sprocket-strips-s-title {font-size: 1.75rem;}
.newsmedialayout #g-container-main img {border-radius: 15px;}

/**************SPROCKET LISTS - separated - history page******************/
.sprocket-lists-title {background: rgba(255,255,255,0);
	border: none;
	padding: 2px 40px 2px 10px !important;
	font-size: 1.5rem !important;
	
}
.sprocket-lists-title .indicator {border: 1px solid #021d49; width: 30px; height: 30px;}

/**************SPROCKET LISTS - portrait - upcoming Events page******************/
.active .portrait-image img, .noncollapse .portrait-image img {
    object-fit: cover;
    object-position: center;
    height: 12vw;
	width: 16vw;
	border-radius: 15px;
	margin: 10px 10px;
	box-shadow: 0px 0px 10px rgb(0 0 0 / 30%);
}
.portrait-image {margin: 0 1.5rem 0 0 !important; }

@media only screen and (max-width: 50.99rem){
	.active .portrait-image img, .noncollapse .portrait-image img {
    height: 30vw;
	width: 40vw;
}
	.portrait-image {width: 50% !important;}
}


/************ SUB PAGES  ************/

#g-container-main { margin: 0; padding: 0 10%; }
.outline-10 #g-container-main { margin: 0; padding: 0 8%; }

.minus10, .platform-content .moduletable.minus10  {  margin: 0 calc(-10vw - 20px); }
.plus10, .platform-content .moduletable.plus10 {  margin: 0 10vw; }
.fullwidthpic { width: 100%;}
img.fullwidth { width: 100%;}

.mtable .sprocket-lists-pagination-hidden {display: none;}

.flexrow > .imageside { flex: 2;}
.flexrow > .moduleside { flex-basis: 35%}

.discernback {background: url(../images/stories/template/hero/discernment.jpg) 0% 50% no-repeat; }
.discernment2 {background: url(../images/stories/template/hero/discernment2.jpg) 0% 50% no-repeat; }
/*.floralback img {object-fit: cover;  width: 100%; }*/
.helpstodiscern {background: url(../images/stories/template/hero/helpstodiscern.jpg) 0% 0% no-repeat;}
.jesusinviting {background: url(../images/stories/template/hero/sacredheart-bg.jpg) 0% 0% no-repeat;}
.rpfloralback {background: url(../images/stories/template/hero/redpinkfloral-parallax.jpg) 30% 20% no-repeat;}
.faqback {background: url(../images/stories/template/hero/faqbackground.jpg) 0% 0% no-repeat;}
.prayersvd {background: url(../images/stories/template/hero/prayersback.jpg) 0% 0% no-repeat;}
.pond1 {background: url(../images/stories/template/hero/pond1.png) 0% 0% no-repeat;}
.pond2 {background: url(../images/stories/template/hero/pond2.png) 0% 0% no-repeat;}
.friendsty {background: url(../images/stories/template/hero/friends-ty.png) 0% 0% no-repeat;}
/*.sunsetrose h4, .sunsetrose h3, .sunsetrose p, .sunsetrose ul {color: white;}*/
.communityback {background: url(../images/stories/template/hero/communty-lax.jpg) 0% 0% no-repeat;}
.eucharistback {background: url(../images/stories/template/hero/eucharist-lax.jpg) 0% 0% no-repeat;}
.prayerback {background: url(../images/stories/template/hero/prayer-lax.jpg) 0% 0% no-repeat;}
.contemplative {background: url(../images/stories/template/hero/contemplative.jpg) 0% 0% no-repeat;}
.consecration {background: url(../images/stories/template/hero/consecration.jpg) 0% 0% no-repeat;}
.whatisavow {background: url(../images/stories/template/hero/whatisavow.jpg) 0% 0% no-repeat;}
.whatisavow2 {background: url(../images/stories/template/vow.png) 0% 0% no-repeat;}
.threesistersback {background: url(../images/stories/template/hero/threesisters.jpg) 0% 0% no-repeat;}
.vowpovertyback {background: url(../images/stories/template/hero/poverty.jpg) 0% 0% no-repeat;}

.publicwitness {background: url(../images/stories/template/hero/publicwitness1.jpg) 0% 0% no-repeat;}
.publicwitness2 {background: url(../images/stories/template/hero/publicwitness2.jpg) 0% 0% no-repeat;}
.publicwitness h4, .publicwitness h3, .publicwitness p, .publicwitness ul {color: white;}

@media only screen and (max-width: 51rem){
	#g-container-main .simpleparalax, #g-container-main .simpleparallax {background-position: 40% 0% !important;}
}
.br15px {border-radius: 15px;}

.blueback { background: rgba(2,29,73,0.5); padding: 20px 0; margin-top: 20px; margin-bottom: 20px; }
.blue75back { background: rgba(2,29,73,0.75); padding: 20px 0; margin-top: 20px; margin-bottom: 20px; }
.solidblueback { background: rgba(2,29,73,1); padding: 20px 0; margin-top: 20px; margin-bottom: 20px; }
.whiteback { background: rgba(255,255,255,.75); padding: 20px; margin-top: 20px; margin-bottom: 20px;}


.blueback h6, .blackback h6, .solidblueback h6, .blue75back h6 { text-align: center; color: #ffffff; margin: 0 10px;}
.blueback h4, .blackback h4, .solidblueback h4, .blue75back h4 { font-variant-caps: small-caps; color: #ffffff; font-size: 1.2rem; margin: 0 10px;}
.blueback p, .blueback li, .blueback h3, .blueback h2  {margin: 0 20px; color: #ffffff; }
.blue75back p, .blue75back li, .blue75back h3, .blue75back h2  {margin: 0 20px; color: #ffffff; }
.solidblueback p, .solidblueback li, .solidblueback h3, .solidblueback h2  {margin: 0 20px; color: #ffffff; }

.blueback p, .blue75back p, .solidblueback p {font-size: 1.1rem;}
.whiteback p {color: #021d49; }

.blueback a, .blue75back a, .solidblueback a   {color: white; }
.blueback a:hover, .blue75back a:hover, .solidblueback a:hover  {color: #9fa2a3; }


.ltblueback, .silverback { background: rgba(159, 162, 163, 0.5); padding: 20px 0; margin-top: 20px; margin-bottom: 20px; }
.ltblueback h6, .silverback h6 { text-align: center; color: #021d49; margin: 0 10px;}
.ltblueback h4, .silverback h4 { font-variant-caps: small-caps; color: #021d49; font-size: 1.25rem; margin: 0 10px;}
.ltblueback p, .ltblueback li, .ltblueback h3  {margin: 0 20px; color: #021d49; }
.silverback p, .silverback li, .silverback h3  {margin: 0 20px; color: #021d49; }



h1.pagetitle { margin-bottom: 0px; z-index: 1; position: relative; }
h6.pagetitle { 
	line-height: 0.8;
    margin-top: -0.5rem;
    color: #021d49 ;
    font-size: 2.5rem;
    z-index: -3;
	font-style: italic;
}
@media only screen and (max-width: 51rem) {
	h6.pagetitle {font-size: 1.5rem;}
}

.padright { padding-right: 30px;}
.padleft { padding-left: 30px;}
p.csscode {background-color: #f7f7f7;
	border: 1px solid rgba(0, 0, 0, 0.1);
	padding: 0.938rem; margin: 0 0 1.5rem;
	border-radius: 0.1875rem;
	font-family: "Menlo", "Monaco", monospace;
	clear: both;
} 

hr.heart {  
	background: url(../images/template/heart-white.png) 50% 50% no-repeat;
    background-size: contain;
	width: 100%;
	height: 70px;
	border: none;
	margin: .5rem 0;
}

@media only screen and (min-width: 768px) {
	.flexrow div.imageside:first-child, .flexrow div.moduleside:first-child { padding-right: 30px;}
	.flexrow div.imageside:last-child, .flexrow div.moduleside:last-child { padding-left: 30px;}
	
	.flexrow > .imageside { flex: 2;}
	.flexrow > div { order: 2; }
	/*.flexrow > div.imageside { order: 1; }*/
	.padright, .padleft { padding-right: 0px; padding-left: 0px;}
	
}

table {border: 0px solid transparent;}
td {border: 0px solid transparent; padding: 0.25rem;}
table h6 {margin: 0.25rem 0;}
table p {margin: 0 0 0.5rem 0;}


/*************** MOBILE *******************/
/************ FLEX ITEM  ************/
.flexcolumn { display: flex; flex-direction: column; }
.flexcolumn > div { flex: 1;}
.flexcenter { display: flex; align-items: center; justify-content: center;}

/************ FLEX ITEM  ************/
.flexrow { display: flex; align-items: center; justify-content: center;   }
.flexrow > div { flex: 1;}

@media only screen and (max-width: 767px) {
	.flexrow { flex-direction: column; }
}


/*************** MINISTRY PAGES -- was devotions blog layout***********/
/**************SPROCKET Strips Cards - devotions page******************/
.cols-3 .sprocket-strips-c-block { width: 30%; border-radius: 15px;}
.cols-4 .sprocket-strips-c-block { width: 22%;}
.sprocket-strips-c-block { margin: 10px; box-shadow: 0px 0px 10px rgb(0 0 0 / 30%);}
.sprocket-strips-c-extended-info {visibility: visible; position: relative;}
.sprocket-strips-c-content a {color: #ffffff;}
.sprocket-strips-c-readon {display: none;}
.sprocket-strips-c-title {font-size: 1.5rem;color: #ffffff; text-align: center;}

.sprocket-strips-c .sprocket-strips-c-image {border-color: transparent;}
.sprocket-strips-c-image {
	 border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;}
.sprocket-strips-c-block:nth-child(odd) .sprocket-strips-c-item { background: #021d49;  border-radius: 15px;}
.sprocket-strips-c-block:nth-child(even) .sprocket-strips-c-item { background: #021d49;  border-radius: 15px;}


@media (max-width: 50.99rem) {
.sprocket-strips-c-container .sprocket-strips-c-block {
    width: 43%;
    float: none;
}}


.ministrypage.img-title .blogministrypage .row-fluid {border-bottom: none; margin-bottom: 30px;}
.ministrypage.img-title #g-container-main .blogministrypage img {height: 25vw; width: 100%; object-position: center; object-fit: cover;}
.ministrypage.img-title .items-row .item {position: relative; height: 25vw; overflow: hidden;}
.ministrypage.img-title .items-row .item .page-header {
    z-index: 10; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    width: 100%; 
    height: auto; 
    text-align: center;
    margin: 0;
}
.ministrypage.img-title .items-row .item .page-header h2 {
    border-bottom: none;
    height: 100%;
    width: 100%;
    margin: 0;
    text-shadow: 1px 1px 1px rgba(0,0,0,.8);
}
.ministrypage.img-title .items-row .item .page-header h2 a {
    color: #ffffff;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    transition: all .4s;
    background: rgba(0,0,0,.2);
}
.ministrypage.img-title .items-row .item .page-header h2 a:hover {background: rgba(0,0,0,.6);}
/*.ministrypage.img-title .items-row .item .page-header h2 a:hover ~ .item-image {margin-top: -10px; transform: translate(-10px);}*/

.ministrypage.img-title .items-row .item > div {position: absolute;}
.ministrypage.img-title .items-row .item > p.readmore {display: none;} 

@media only screen and (max-width: 767px) {
    .ministrypage.img-title .blogministrypage .row-fluid {margin-bottom: 0px;}
    .ministrypage.img-title .items-row .item {margin-bottom: 10px;}
    .ministrypage.img-title .items-row .item .page-header h2 {font-size: 1.3rem; padding: 0 0 0 100px;}
    .ministrypage.img-title .items-row .item .page-header h2 a {background: rgba(0,0,0,.4);}
	.ministrypage.img-title #g-container-main .blogministrypage img {height: 25vw; width: 100%; object-position: center; object-fit: cover; }

}

.grid-news-1 .sprocket-strips-container {
    height: /*40vw;*/ 35vw;
    display: grid;
    margin: 0;

    /*grid-template-columns: 50% 1fr;*/
    grid-template-areas:
        "a a b c"
        "a a d e";
}

.grid-news-1 .sprocket-strips-container::before {display: none;}
.grid-news-1 .sprocket-strips-container::after {display: none;}

.grid-news-1 .sprocket-strips-container li {width: 100%; height: 100%; margin: 0; padding: 1vw;}
.grid-news-1 .sprocket-strips-container li:nth-child(1) {grid-area: a;}
.grid-news-1 .sprocket-strips-container li:nth-child(2) {grid-area: b;}
.grid-news-1 .sprocket-strips-container li:nth-child(3) {grid-area: c;}
.grid-news-1 .sprocket-strips-container li:nth-child(4) {grid-area: d;}
.grid-news-1 .sprocket-strips-container li:nth-child(5) {grid-area: e;}

.grid-news-1 .sprocket-strips-item-container {height: 100%;}
.grid-news-1 .sprocket-strips-item {height: 100%; position: relative; border-radius: 1rem; background-size: cover; background-position: center; background-repeat: no-repeat;}
.grid-news-1 .sprocket-strips-content {
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    top: 0; 
    height: 100%; 
    width: 100%; 
    background: none; 
    border-radius: 1rem; 
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}
.grid-news-1 .sprocket-strips-content:hover .sprocket-strips-text {height: 40%;}
.grid-news-1 .sprocket-strips-text {color: #021d49;}
.grid-news-1 .sprocket-strips-content > a.readon {
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 100%; 
    width: 100%; 
    background: transparent; 
    padding: 0; 
    margin: 0; 
    border-radius: 1rem;
    border: none;
}
.grid-news-1 :is(.sprocket-strips-title-container, .sprocket-strips-text) {background: #ffffff; padding: .5vw;}
.grid-news-1 .sprocket-strips-title-container {max-height: 50%;}
.grid-news-1 .sprocket-strips-text {border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; max-height: 40%; transition: height .4s ease-in-out;}
.grid-news-1 .sprocket-strips-content > a.readon > span {display: none;}

.grid-news-1 h4.sprocket-strips-title {font-size: 1.2vw;}
@media only screen and (max-width: 50.99rem) {
    .grid-news-1 :is(.sprocket-strips-title-container, .sprocket-strips-text) {padding: 1vw 1rem;}
	.grid-news-1 h4.sprocket-strips-title {font-size: 3vw;}
    .grid-news-1 .sprocket-strips-text {font-size: 2vw;}
}

.grid-news-1 .sprocket-strips-nav {display: none;}

@media only screen and (max-width: 50.99rem) {
    .grid-news-1 .sprocket-strips-container {
        height: 100vh;
        grid-template-areas:
        "a a"
        "a a"
        "b c"
        "d e"
    }
}

/*********** VOWED LIFE ***********/
.vowed-life #g-expanded {padding: 0;}
.subpage-rotator .sprocket-features-img-container img {height: 42vw!important; width: 100%; object-position: center; object-fit: cover; border-radius: 0!important;}
.formation-page #g-header {display: none;}

/*********** APOSTOLATE ***********/
/*.apostolate-page .apostolate-b {
    
}
.apostolate-page .apostolate-text {
    
}*/
.apostolate-page .grade-s {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 5vw calc(13% + .625rem + 1.5rem);
    background: url('/images/stories/template/grade-school.png') 0% 0% no-repeat; 
    background-position: center; 
    background-size: cover; 
    background-attachment: fixed; 
    margin: 1vw calc(-13% - .625rem - 1.5rem);
}
.apostolate-page .grade-text {
    width: 50%;
    background: rgba(2,29,73,0.75);
    border-radius: 1rem;
}
.apostolate-page .grade-text h3 {
    padding: 2vw 2vw 0 2vw;
    color: #ffffff;
}
.apostolate-page .grade-text p {
    padding: 0 2vw 2vw 2vw;
    color: #ffffff;
}
.apostolate-page .retreat-w {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 5vw calc(13% + .625rem + 1.5rem);
    background: url('/images/stories/template/retreat.png') 0% 0% no-repeat; 
    background-position: center; 
    background-size: cover; 
    background-attachment: fixed; 
    margin: 1vw calc(-13% - .625rem - 1.5rem);
}
.apostolate-page .retreat-text {
    width: 50%;
    background: rgba(2,29,73,0.75);
    border-radius: 1rem;
}
.apostolate-page .retreat-text h3 {
    padding: 2vw 2vw 0 2vw;
    color: #ffffff;
}
.apostolate-page .retreat-text p {
    padding: 0 2vw 2vw 2vw;
    color: #ffffff;
}
.apostolate-page #g-expanded {padding: 0;}

.frjm {
    display: flex; 
    flex-direction: row; 
    margin: 1vw calc(-13% - .625rem - 1.5rem);
}
.frjm > div:first-child {flex: 2; display: flex; justify-content: flex-end; align-items: center;}
.frjm > div:last-child {flex: 3; display: flex; justify-content: flex-start; align-items: center;}
.frjm > div:last-child p {width: 50%; margin-left: 2vw;}
.frjm img {height: auto; width: 50%; object-position: center; object-fit: cover;}