@import url("//fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&family=Raleway:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap");
/************ TEMPLATE  ************
Rotator Size: 1600x669 (super wide, 2.39:1)

/************ FONTS  ************
Sans Serif Headings: Raleway
Sans Serif: Lato

/************ COLORS  ************
Blue - #1F415D; rgba(31,65,93,1)
Gold - #908360; rgba(144,131,96,1)
Light Gold - #A69C80; rgba(166,156,128,1)
Grey - #A7A9AC, rgba(167,169,172,1)
Light Grey - #F1F2F2; rgba(241,242,242,1)

/************ FONT & COLOR NOTATIONS ************
**Fonts:
-Raleway Semibold - Picture Quicklinks
-Raleway Medium - headings, like Our Parish, Welcome, Connect, Engage
-Raleway Regular for everything else except body font under Welcome. You could probably use it there for the homepage anyway. It's a nice and unalarming font.

**Colors:
-Blue - Welcome, Connect, icon quicklinks/text, news article titles
-Gold - news image bottom border, footer
-Light Gold - Connect buttons
-Grey - Connect title lines, Engage, 'View All News' button
-Light Grey - Background for Welcome and Engage

/************ OTHER NOTES ************
*the drop shadow that I used on 'Our Parish' and play button icon was (75%,3px,3px,3px)
*the play button on the Rotator image is actually an fa icon, so you could totally code that in without need of an image file (the file is included anyway): https://fontawesome.com/v4.7.0/icon/youtube-play
*the drop shadow that I used on the news images is the normal (20%,0,0,10px). See Magdalen's site for the hover effect, or what you did with SGM-PJS was pretty nice.
*The 'Mass, Confessions & Adoration Times' button is meant to be seen at the bottom right of the screen at all times and subpages (so sticky probably). Traci mentioned it might be hard to see if not over the 'Rotator' image, so feel free to play around with it's style and opacity so that it's visible on other pages. A blue 80% might do well - rgba(31,65,93,.8)
*Picture Quicklink overlay is straight up black at 40% - rgba(0,0,0,.4)
*icon ql hover like https://www.stbens.org/
*icon ql - they are all fa icons:
 -https://fontawesome.com/v4.7.0/icon/check-square-o
 -https://fontawesome.com/v4.7.0/icon/bookmark
 -https://fontawesome.com/v4.7.0/icon/briefcase
 -https://fontawesome.com/v4.7.0/icon/heart
 -https://fontawesome.com/v4.7.0/icon/calendar
**************************************/

/* How about some variables for this site? */
.outline-19,
.homelayout {
  --primary-color: #1f415d;
}

body {
  color: #333;
  font-family: "Lato", sans-serif;
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0.75rem 0;
  line-height: 1.3;
  font-weight: normal;
}
p {
  line-height: 1.5;
}

h1 {
  color: #001940;
  font-size: 3.5rem;
}
h1.light {
  font-weight: 100;
}
.page-header h1 {
  text-transform: none;
  font-size: 3rem;
}
h2,
.page-header h2 {
  font-variant-caps: small-caps;
  color: #908360;
  font-size: 2.5rem;
  font-weight: bold;
}
h3 {
  color: #1f415d;
  font-size: 2rem;
  border-bottom: 1px solid #a69c80;
  line-height: 1.3;
  margin: 0 0 10px 0;
}
h3.caps {
  text-transform: uppercase;
  font-weight: bold;
}
h4 {
  color: #1f415d;
  font-size: 2rem;
}
h4.caps {
  font-variant-caps: small-caps;
  font-weight: bold;
}
h5 {
  background: #908360;
  font-size: 1.75rem;
  color: #ffffff;
  border-radius: 0.2rem;
  padding: 0.5rem;
}
h6 {
  color: #001940;
  font-size: 1.5rem;
  text-transform: uppercase;
  font-weight: bold;
}
a {
  color: #908360;
}
a:hover {
  color: #1f415d;
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
  h1 {
    font-size: 3rem;
  }
  h2 {
    font-size: 2.5rem;
  }
  h3 {
    font-size: 2rem;
  }
  h4 {
    font-size: 2rem;
  }
  h5 {
    font-size: 1.5rem;
  }
  h6 {
    font-size: 1.5rem;
  }
  p,
  td,
  li {
    font-size: 1rem;
    margin-bottom: 4px;
  }
  h1,
  h2,
  h3 {
    line-height: 1.2;
  }
  h4,
  h5,
  h6,
  p {
    line-height: 1.5;
  }
}

@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,
  td,
  li {
    font-size: 1rem;
    margin-bottom: 4px;
  }
  h1,
  h2,
  h3 {
    line-height: 1.2;
  }
  h4,
  h5,
  h6,
  p {
    line-height: 1.5;
  }
}

.readon,
.button,
.btn,
p.readmore .btn,
.sprocket-lists-portrait-container > li .sprocket-lists-portrait-item > a span,
.listentobutton.moduletable a {
  background: #1f415d;
}

.button {
  border-radius: 0;
}

/*Connect - made into a button that can be used throughout the site*/
.connectbuttons {
  background: none;
  border: 1px solid #a69c80;
  border-radius: 0;
  color: #a69c80;
  width: 75%;
  font-size: 1.4rem;
}

.connectbuttons:hover {
  background: #a69c80;
  color: #ffffff;
}
a.connectbtn {
  color: #a69c80;
  font-size: 1.4rem;
  text-transform: none;
  text-align: center;
  font-weight: normal;
  background: transparent;
  padding: 0.9rem 1.3rem;
  border-radius: 0;
  margin: 0;
  display: inline-block;
  width: 75%;
  line-height: 1.25rem;
  border: 1px solid #a69c80;
  transition: all 0.2s ease-in;
}
a.connectbtn:hover {
  background: #a69c80;
  color: #ffffff;
}

/*************** HOMELAYOUT ***************/
h3.decorative {
  display: grid;
  grid-template-columns: minmax(20px, 1fr) auto minmax(20px, 1fr);
  align-items: center;
  font-size: 2.2rem;
  grid-gap: 20px;
  width: 100%;
  border-bottom: none;
  text-align: center;
  font-weight: 500;
}

h3.decorative:before,
h3.decorative:after {
  content: "";
  border-top: 1px solid #a7a9ac;
}

/*************** OFFCANVAS ****************/
/*************** TOP **********************/
#g-top td {
  padding: 0;
}

@media only screen and (max-width: 767px) {
  #g-top td {
    padding: 0 0 0 10%;
  }
}

/*************** NAVIGATION ***************/

/* fixing mobile logo and link sizes */

@media only screen and (max-width: 767px) {
  .g-logo img {
    width: initial;
  }

  .g-logo {
    width: 70%;
    margin: auto;
  }
}

/*************** SLIDESHOW ****************/
#g-showcase:not(.homelayout #g-showcase) {
  position: relative;
  height: 14vw;
}
#g-showcase
  .g-container
  .g-grid:first-child:not(
    .homelayout #g-showcase .g-container .g-grid:first-child
  ) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}
#g-showcase
  .g-container
  .g-grid:nth-child(2):not(
    .homelayout #g-showcase .g-container .g-grid:nth-child(2)
  ) {
  position: absolute;
  top: 70px;
  right: 10px;
  z-index: 100;
}
#g-showcase
  .g-container
  .g-grid:last-child:not(
    .homelayout #g-showcase .g-container .g-grid:last-child
  ) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
}
#g-showcase .hero img:not(.homelayout #g-showcase .hero img) {
  width: 100%;
}
.hero img {
  opacity: 1;
}
.g-main-nav .g-sublevel {
  background: #20415d;
}

/*************** HEADER *******************/
/*************** ABOVE ********************/
/*************** SHOWCASE *****************/
.homelayout #g-showcase .g-container {
  position: relative;
  height: 42vw;
}
.outline-_error #g-showcase .g-container {
  position: relative;
  height: 15vw;
}
.homelayout #g-showcase .g-grid {
  position: absolute;
}
.homelayout #g-showcase .g-grid:first-child {
  width: 100%;
  z-index: 100;
}
.homelayout #g-showcase .g-grid:nth-child(2) {
  width: 100%;
}
.homelayout #g-showcase .g-grid:nth-child(3) {
  bottom: 10px;
  right: 10px;
  z-index: 100;
}
#g-showcase .block-b .search {
  margin: 10px 10px 0px 0px;
}
.hero table {
  width: 100%;
}
/*.homelayout #g-showcase .g-grid:last-child {top: 60px; right: 10px; z-index: 100;}*/
.overlayitem {
  top: 26vw;
}
.overlayitem h1 {
  font-size: 5vw;
}

@media only screen and (max-width: 767px) {
  .homelayout #g-showcase .g-grid:nth-child(3) {
    bottom: -15vw;
    right: 18%;
    z-index: 100;
  }
  #g-showcase .overlayitem .fab {
    font-size: 6.5vw !important;
  }
}

#g-showcase .g-logo img {
  height: 10vw;
  margin-left: 2vw;
  margin-top: 1vw;
}
#g-showcase .g-social a {
  margin-right: 10px;
  font-size: 1.4vw;
}
#g-showcase .button {
  border-radius: 0;
  border: 1px solid #ffffff;
  background: rgba(31, 65, 93, 0.75);
  color: #ffffff;
}
#g-showcase .button:hover {
  border-color: #908360;
  color: #908360;
  background: white;
}

#g-showcase textarea,
#g-showcase input[type="text"],
#g-showcase input[type="password"],
#g-showcase input[type="datetime"],
#g-showcase input[type="datetime-local"],
#g-showcase input[type="date"],
#g-showcase input[type="month"],
#g-showcase input[type="time"],
#g-showcase input[type="week"],
#g-showcase input[type="number"],
#g-showcaseinput[type="email"],
#g-showcase input[type="url"],
#g-showcase input[type="search"],
#g-showcase input[type="tel"],
#g-showcaseinput[type="color"],
#g-showcase .uneditable-input {
  background-color: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;
}

#g-showcase
  :is(
    textarea,
    input[type="text"],
    input[type="password"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="date"],
    input[type="month"],
    input[type="time"],
    input[type="week"],
    input[type="number"],
    input[type="email"],
    input[type="url"],
    input[type="search"],
    input[type="tel"],
    input[type="color"],
    .uneditable-input
  ):hover {
  border-color: #ffffff;
}

input.search-query {
  border-radius: 7px;
}

#g-showcase .form-inline input::placeholder {
  color: #ffffff;
}

#g-showcase .overlayitem :is(i, h1) {
  text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.75);
}
#g-showcase .overlayitem .fab {
  font-size: 3.5vw;
}
#g-showcase h1 {
  font-weight: normal;
}

/*remove padding from hero and from background in main body*/
#g-showcase td {
  padding: 0;
}
.hero img {
  height: 14vw;
}

/*************** UTILITY ******************/
/*Welcome*/
#g-utility {
  padding: 0 2%;
}
#g-utility h3.g-title {
  border-bottom: none;
  font-size: 2.5rem;
}
.homelayout #g-utility p {
  font-size: 1.2rem;
}

/*Quicklinks*/
#g-utility h4.sprocket-strips-title {
  border: none;
}

.qloverlaybackpic .sprocket-strips-content {
  background: rgba(0, 0, 0, 0.4);
}
.qloverlaybackpic .sprocket-strips-content:hover {
  background: rgba(0, 0, 0, 0.6);
}
.minus10 .qloverlaybackpic h4.sprocket-strips-title a {
  align-items: self-end;
}

@media only screen and (max-width: 767px) {
  #g-utility {
    padding-top: 2rem;
  }
  .qloverlaybackpic .sprocket-strips-content,
  .qloverlaybackpic .sprocket-strips-content:hover {
    background: none;
  }
  .qloverlaybackpic li {
    background: rgba(0, 0, 0, 0.4);
  }
  .qloverlaybackpic li:hover {
    background: #1f415d;
  }
  .qloverlaybackpic .sprocket-strips .sprocket-strips-container > li {
    border-bottom: 0px solid white;
  }
  .homelayout .qloverlaybackpic h4.sprocket-strips-title a {
    font-size: 4.5vw;
    font-weight: bold;
  }
  .homelayout #g-utility {
    padding: 5% !important;
  }

  .homelayout .heightvw13 .sprocket-strips-item, .heightvw13 .sprocket-strips-s-item img, .heightvw13 .sprocket-strips-image-overlay img {
    height: 21vw;
  }

  .homelayout .qloverlaybackpic .sprocket-strips-content {
    background: rgba(0,0,0,.5) !important;
  }
}

@media only screen and (min-width: 767px) {

  .homelayout #g-utility > .g-container > .g-grid:nth-child(2) {
    padding: 3vw 5% 3vw 5% !important;
  }

  .homelayout .mass-join {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .homelayout .mass-paralax {
    width: 100%;
    max-height: 20vw;
    object-fit: cover;
    object-position: center;
  }
  .homelayout .mass-logo {
    text-align: center;
    display: flex;
    justify-content: center;
    height: 10vw;
    width: 10vw;
    margin-top: -5vw !important;
    margin-bottom: -5vw !important;
    position: relative;
  }
  .homelayout .mass-times-join {
    background: #1f415d;
    width: 100%;
    padding: 7vw 10% 4vw 10%;
  }
  .homelayout .mass-times-join :is(h1, h2, h3, h4, h5, h6, p, a) {
    color: #ffffff;
  }
  .homelayout #g-utility > .g-container > .g-grid:nth-child(3) {
    padding-bottom: 3vw !important;
  }
}

@media only screen and (max-width: 767px) {
  .homelayout .mass-join {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .homelayout .mass-paralax {
    width: 100%;
  }
  .homelayout .mass-logo {
    text-align: center;
    display: flex;
    justify-content: center;
    height: 20vw;
    width: 20vw;
    margin-top: -10vw !important;
    margin-bottom: -10vw !important;
    position: relative;
  }
  .homelayout .mass-times-join {
    background: #1f415d;
    width: 100%;
    padding: 17vw 10% 14vw 10%;
  }
  .homelayout .mass-times-join :is(h1, h2, h3, h4, h5, h6, p, a) {
    color: #ffffff;
  }
}

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

@media (min-width: 50.99rem) {

  .homelayout .picture-block .sprocket-features-container {
    flex-direction: row-reverse;
  }

}

/*************** EXPANDED *****************/
#g-expanded .g-grid:first-child .g-content {
  padding: 0;
}

#g-expanded {
  padding: 3vw 0 0 0 !important;
}
#g-expanded h3.g-title {
  border-bottom: none;
  font-size: 2.2rem;
  text-align: center;
}

/*Engage*/
.homelayout #g-expanded h4.sprocket-strips-s-title {
  font-size: 1.4rem;
  margin-top: 0vw;
}
.homelayout #g-expanded .sprocket-strips-s-container {
  padding-top: 2vw;
}
.homelayout #g-expanded .sprocket-strips-s-item img {
  height: 19vw;
  width: 19vw;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  border-bottom: 4px solid #908360;
}
.homelayout #g-expanded .readon {
  display: none;
}

.homelayout #g-expanded .sprocket-strips-s-item {
  position: relative;
  transition: all 0.3s ease-in-out;
  text-align: center;
}
.homelayout #g-expanded .sprocket-strips-s-item:hover {
  transform: scale(1.1);
}
.homelayout #g-expanded .sprocket-strips-s-content {
  margin: 0 0 50px 0;
}
.homelayout
  #g-expanded
  .sprocket-strips-s-content
  h4.sprocket-strips-s-title
  a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding-top: 19.5vw;
  color: #1f415d;
}

@media only screen and (max-width: 767px) {
  .homelayout
    #g-expanded
    .bigarrows
    .sprocket-strips-s
    .sprocket-strips-s-container {
    margin: 0 10%;
  }
  .homelayout #g-expanded h4.sprocket-strips-s-title {
    font-size: 4.4vw;
    margin-top: 13vw;
  }
}

/*View All News Button*/
.homelayout #g-expanded .button {
  background: none;
  border: 1px solid #a69c80;
  border-radius: 0;
  color: #a69c80;
  font-size: 1.4rem;
}

.homelayout #g-expanded .button:hover {
  background: #a69c80;
  color: #ffffff;
}

@media only screen and (max-width: 767px) {
  .homelayout #g-expanded .sprocket-strips-s-item {
    display: flex;
    flex-direction: column;
  }

  .homelayout #g-expanded .sprocket-strips-s-content {
    margin: 0;
  }

  .homelayout #g-expanded .sprocket-strips-s-item img {
    order: 1;
    width: 100vw;
  }

  .homelayout #g-expanded .sprocket-strips-s-content {
    order: 2;
  }
  [class^="heightvw"] .sprocket-strips-item,
  [class^="heightvw"] .sprocket-strips-s-item img,
  .coverimgarea .sprocket-strips-s-item img {
    height: 80vw !important;
  }
  .qloverlaybackpic .sprocket-strips-content {
    /* position: fixed; */
  }

  #g-expanded .sprocket-strips-s-container li {
    padding-bottom: 0;
  }
  /*.homelayout #g-expanded .sprocket-strips-s-content h4.sprocket-strips-s-title a {padding-top: 65vw; left: 20px;}*/
  .homelayout
    #g-expanded
    .sprocket-strips-s-content
    h4.sprocket-strips-s-title
    a {
    padding-top: 0;
    padding-left: 2vw;
    padding-bottom: 6vw;
    align-items: flex-end;
  }
}

/*************** EXPANDED *****************/
#g-expanded .g-grid:last-child {
  padding: 2vw;
  border-top: 2px solid #1f415d;
  background: #1f415d;
}
#g-expanded .g-grid:last-child .g-content {
  padding: 0;
}
#g-expanded .g-grid:last-child .platform-content {
  padding: 0;
}

.homelayout .picture-block .sprocket-features-desc h6 {
  font-weight: 600;
  margin-bottom: 0.15rem;
}
.picture-block h2 {
  font-weight: 400;
  margin-bottom: 0.15rem;
}
.picture-block h4 {
  color: #1f415d;
  font-size: 3rem;
  margin-top: 0.25rem;
}
.picture-block h5 {
  background: transparent;
  color: rgba(168, 169, 173, 1);
  font-size: 1.25rem;
  font-family: "Lato", sans-serif;
}
.picture-block .sprocket-features-desc {
  padding: 1vw;
}
#g-expanded .picture-block .layout-showcase {
  margin: 0;
}
#g-expanded .picture-block .layout-showcase .sprocket-features-content {
  width: 60%;

}
#g-expanded .picture-block .layout-showcase .sprocket-features-img-container {
  width: 60%;
}

#g-expanded .layout-showcase .sprocket-features-content,
.layout-showcase .sprocket-features-img-container {
  padding: 10px;
}

@media only screen and (min-width: 51rem) {
  #g-expanded .picture-block .layout-showcase .sprocket-features-content {
    /* margin-right: -2vw; */
  }
}

@media only screen and (max-width: 51rem) {
  .homelayout #g-expanded .g-content {
    margin: 0;
    padding: 0;
  }
  #g-expanded .layout-showcase {
    margin: 0;
  }
  #g-expanded .picture-block .layout-showcase .sprocket-features-content {
    width: 90%;
    margin: 1rem;
  }
  #g-expanded .picture-block .layout-showcase .sprocket-features-img-container {
    width: 100%;
  }
}

/*************** EXTENSION ****************/
@media only screen and (min-width: 50.99rem) {
  .homelayout #g-extension > .g-container > .g-grid:nth-child(1) {
    padding: 2vw 10% !important;
  }
  .homelayout #g-extension > .g-container > .g-grid:nth-child(2) img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 30vw;
  }
}

.homelayout #g-extension h3 {
  border-bottom: none;
  font-size: 2.2rem;
  text-align: center;
  margin-bottom: calc(2vw + 0.625rem);
  margin-top: 1vw;
}

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

.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: none;
}
.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 0.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 0.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(31, 65, 93, 0.5);
}
.fa-quicklinks .sprocket-strips-s-text span {
  font-size: 3vw;
  transition: all 0.4s linear;
  text-shadow: 2px 2px rgba(0, 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: 767px) {
  .fa-quicklinks .sprocket-strips-s-container {
    grid-template-columns: 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;
  }
  .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 span {
    margin-left: auto;
    margin-right: auto;
  }
  .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;
  }
}

/*************** BOTTOM *******************
#g-bottom:not(.homelayout #g-bottom) {position: fixed; bottom: 30px; right: 15px; background: transparent;}*/
#g-bottom {
  position: fixed;
  bottom: 65px;
  z-index: 99999;
  right: 0px;
  background: transparent;
}
.fixedbutton .button {
  border-radius: 10px 0 0 10px;
  background: #f0edd6;
  border: 2px solid #1f415d;
  color: #1f415d;
}
.fixedbutton .button:hover {
  border-color: #1f415d;
  background: #1f415d;
  color: #ffffff;
}

#g-bottom .fixedbutton p {
  margin: 0;
}

@media only screen and (max-width: 767px) {
  #g-bottom {
    position: fixed;
    bottom: 5px;
    right: 10px;
    background: transparent;
  }
}

/*************** FOOTER *******************/
.icon-button a {
  font-size: 1.5rem;
}
/* .icon-button {margin-right: 10px;} */

.social-icons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.social-icons > .icon-button {
  width: initial;
  height: initial;
}

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

@media only screen and (min-width: 50.99rem) {
  .footer-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 3rem;
  }
  .footer-box :is(h1, h2, h3, h4, h5, h6) {
    text-transform: none;
    font-variant-caps: normal;
    font-weight: 400;
  }
  .footer-box :is(h1, h2, h3, h4, h5, h6, p) {
    color: #ffffff;
  }
  .footer-image img {
    height: 10vw;
    width: auto;
  }
  .footer-box a:hover {
    color: #908360 !important;
  }
}
@media only screen and (max-width: 50.99rem) {
  .footer-image img {
    height: 30vw;
    width: auto;
  }
}

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

/*************** MODULES ******************/
.moduletable .nav.menu,
.moduletable .unstyled {
  background: #1f415d;
}
.moduletable .nav.menu li.current.active a,
.moduletable .nav.menu li a:hover {
  color: #1f415d;
  background: #908360;
}
/*ministry strips modules*/
.noreadmore .sprocket-strips-content .readon {
  display: none;
}
.noreadmore .sprocket-strips-content {
  padding: 0;
}
.noreadmore .sprocket-strips-title {
  font-size: 1.3rem;
  margin-bottom: 0.25rem;
}
.noreadmore .sprocket-strips-text p {
  margin-bottom: 0.5rem;
}

.breadcrumb {
  background: transparent;
}

/***********Custom Scrollbar****************/

/* Hide the default scrollbar */
::-webkit-scrollbar {
  width: 0.75rem;
}

::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}

::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 5px;
}

/* Style the scrollbar on hover */
::-webkit-scrollbar-thumb:hover {
  background-color: #999;
}

/* Style the scrollbar when it's being dragged */
::-webkit-scrollbar-thumb:active {
  background-color: #666;
}

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

#g-container-main {
  margin: 0;
  padding: 0 10%;
}
.minus10,
.platform-content .moduletable.minus10 {
  margin: 0 calc(-10vw - 32px);
}
.plus10,
.platform-content .moduletable.plus10 {
  margin: 0 13%;
}
.fullwidthpic {
  width: 100%;
}

@media only screen and (max-width: 50.99rem) {
  #g-container-main {
    padding: 0;
  }
}

.grayback {
  background: #f1f2f2;
  padding: 20px 0;
  margin-top: 20px;
  margin-bottom: 20px;
}
.grayback h6 {
  text-align: center;
}
h1.pagetitle {
  margin-bottom: 0px;
  z-index: 1;
  position: relative;
}
h6.pagetitle {
  line-height: 0.01;
  margin-top: -6px;
  color: rgba(176, 177, 181, 0.6);
  font-size: 3.7rem;
  z-index: -3;
}
.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.cross {
  background: url(../images/template/fraternal-cross.png) 50% 50% no-repeat;
  background-size: contain;
  width: 100%;
  height: 50px;
  border: none;
  margin: 0.5rem 0;
}
/*#g-container-main {background: none; }*/

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

.search #searchForm .btn:hover,
#searchForm .btn:hover {
  color: #908360 !important;
}

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

/*************** SUBPAGE GRID LAYOUT ******/
.subgrid .sprocket-strips-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.subgrid .sprocket-strips-container li {
  width: 95%;
}
.subgrid .sprocket-strips-container::before {
  display: none;
}

.k-ui-namespace .mod_docman.mod_docman--documents {
  justify-content: left;
}

@media only screen and (max-width: 767px) {
  .subgrid .sprocket-strips-container {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/*************make news images smaller*****************/
@media only screen and (min-width: 767px) {
  .newslayout2 .pull-right.item-image img {
    max-width: 25vw;
  }
  .newslayout2 .pull-left.item-image img {
    max-width: 25vw;
  }
}
@media only screen and (max-width: 767px) {
  .newslayout2 .pull-left.item-image img {
    width: 100% !important;
  }
  .newslayout2 .pull-right.item-image img {
    width: 100% !important;
  }
  #g-container-main .equaltable img.icon {
    width: 20%;
  }
}

/********************* News/engage page ************************/

/*****making all the images on the news page a square ratio ******/

.news-page .item-image img {
  height: 25vw;
  width: 25vw;
  object-fit: cover;
}

.job-opening .page-header > h2 {
  text-align: center;
}


.news-page #g-extension {
  padding: 0;
  background-color: #9f9477;
}

.news-page #g-extension p {
  margin-bottom: 0;
  line-height: 1.5;
}

.news-page #g-extension h2 {
  color: white;
  font-variant: normal;
  font-size: clamp(1.2rem, 2.2vw, 3.5rem);
}

.news-page #g-extension .button {
  margin-top: 1rem;
  font-size: 1.3rem;
  padding: 15px 25px;
}

.news-page #g-extension .button:hover {
  background-color: #46556c;
  transform: scale(1.05);
}

.news-page #g-extension > div > div > div > div > div > div > div {
  overflow: visible !important;
}

.news-page #g-extension {
  margin-bottom: 4%;
}

.news-page.blognewslayout2 > div:nth-child(1) .page-header h2 {
  margin-top: 0;
}

.news-page .page-header h2 {
  padding-bottom: 0;
  margin-top: 3rem;
  margin-bottom: 0;
  line-height: 1;
  font-size: clamp(2.3rem, 3vw, 4rem);
}

@media (max-width: 50.99rem) {
  .news-page .item-image {
    display: contents;
  }

  .news-page .item-image img {
    height: auto;
  }
}

/************** Sub pages quicklinks mobile ****************/
@media only screen and (max-width: 50.99rem) {
  .sub-ql.qloverlaybackpic .sprocket-strips .sprocket-strips-container > li {
    border-bottom: none;
  }
  .sub-ql.qloverlaybackpic .sprocket-strips-image-overlay {
    width: 100%;
    height: 100%;
  }
  .sub-ql.qloverlaybackpic .sprocket-strips-image-overlay img {
    object-position: center;
    object-fit: cover;
  }
  .sub-ql.qloverlaybackpic .sprocket-strips-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }
  .sub-ql.qloverlaybackpic .h4.sprocket-strips-title {
    margin-bottom: 0 !important;
  }
  /*.sub-ql.qloverlaybackpic .sprocket-strips-item {height: 25vw;}*/
}

.outline-14 #g-showcase {
  background: url(/images/stories/template/background.jpg) 0 0 no-repeat;
  background-size: cover;
}

/* ************ ********************** **************** */
/* ************ Begin Template Section **************** */
/* *************** And Sub page Stuff ***************** */
/* Be careful delting sub page css - check to ensure that other pages
dont use the same classes before deleting */

/******devotions image css /sacraments-devotions *******/
/* delete soon */

.devotions-flex-sections {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.devotions-flex-sections > div:nth-child(1) {
  width: 40%;
  max-width: 1080px;
}

.devotions-flex-sections > div:nth-child(2) {
  width: 55%;
  display: flex;
  flex-wrap: wrap;
}

.devotions-flex-sections img {
  width: initial !important;
}

.devotions-flex-section-2 h2 {
  font-size: clamp(2rem, 2.5vw, 2.5rem);
  text-align: center;
}

.devotions-flex-section-2 p {
  text-align: center;
}

.devotions-flex-section-2 > div {
  width: 33%;
}

.devotions-flex-section-2 {
  display: flex;
  flex-wrap: wrap;
  gap: 0rem;
  align-content: center;
  justify-content: center;
}

.devotions-flex-sections h2 {
  font-size: clamp(2rem, 2.5vw, 2.5rem);
}

@media only screen and (max-width: 50.99rem) {
  .devotions-flex-sections > div:nth-child(1) {
    width: 385px;
  }

  .devotions-flex-sections > div:nth-child(2) {
    width: 90%;
  }

  .devotions-flex-section-2 > div {
    width: 100%;
  }

  .devotions-flex-section-2 h2 {
    font-size: 1.75rem;
  }

  .devotions-flex-sections h2 {
    font-size: 1.75rem;
  }
}
/* end of delete section */

/*********************raise right sub page***********************/

/* Hero Image */

.full-width-img {
  object-fit: cover !important;
  object-position: center !important;
  width: 100% !important;
  height: 28vw !important;
}

.raise-right-page .platform-content {
  margin: 0%;
  padding: 0%;
}

.white-text {
  color: white;
}

.blue-background {
  background-color: #1f415d;
}

.paddings {
  padding: 5% 15%;
}

.align-center {
  text-align: center;
}

.align-right {
  text-align: right;
}

.raise-right-page #g-container-main {
  padding: 0% !important;
}

.raise-right-page #g-showcase {
  height: 14vw !important;
}

.brands-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-color: #f7edd4;
}

.brands-section > div:nth-child(1) {
  padding: 5%;
  flex-basis: 40%;
}

.brands-section > div:nth-child(2) {
  padding: 2%;
  flex-basis: 60%;
}

.no-margin {
  margin: 0;
}

.small-padding {
  padding: 2%;
}

.small-text {
  font-size: clamp(1.1rem, 3vw, 5rem);
}

.raise-right-page .brands-section .button {
  background-color: #1f415d;
  color: white;
  padding: 1rem 2rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  transition: 0.3s;
  transform: scale(1);
}

.margin-top {
  margin-top: 2rem;
}

.raise-right-page .brands-section .button:hover {
  color: white;
  transition: all 0.5s;
  transform: scale(0.98) !important;
}

.flex-box {
  display: flex;
  justify-content: center;
  padding: 5% 0;
  flex: 0 0 40%;
}

.step-section {
  padding: 2% 7%;
  border-bottom: 1px solid #001940;
}

.step-text {
  padding: 5%;
  position: relative;
}

.step-section img {
  object-fit: cover;
}

.step-section h1 {
  font-size: 2.5rem;
}

@media only screen and (max-width: 1200px) {
  .brands-section {
    flex-direction: column;
  }
}

@media only screen and (max-width: 910px) {
  .step-section {
    flex-direction: column;
  }

  .step-section img {
    max-height: 300px;
  }
}

.download-buttons > p {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.download-buttons img {
  height: clamp(2.5rem, 4.5vw, 4rem);
}

.raise-right-page #g-footer {
  padding-top: 2rem;
}

.raise-right-page .raise-right-logo {
  width: 13vw;
  overflow: visible;
}

.raise-right-page .bottom-img > img {
  width: 100%;
}

/*************Walking with purpose page /formation/walking-with-purpose ***************/

/* @media (min-width: 50.99rem) */

.walking-with-purpose #g-showcase {
  height: 14vw !important;
}

.walking-with-purpose #g-container-main {
  padding: 0;
}

.walking-with-purpose #g-mainbar .g-content {
  padding: 0;
  margin: 0;
}

.walking-with-purpose .walking-with-purpose2 {
  height: 28vw;
  width: 100%;
  padding: 3% 0 0 2%;
  background: #ffffff url(/images/stories/template/walking-with-purpose/1.jpg)
    no-repeat center center;
  background-size: cover;
}

@media only screen and (max-width: 50.99rem) {
  #g-showcase
    .g-container
    .g-grid:nth-child(2):not(
      .homelayout #g-showcase .g-container .g-grid:nth-child(2)
    ) {
    top: 16px;
  }
}

.walking-with-purpose .fill-your-cup {
  padding: 3% 5%;
  height: auto;
  width: 100%;
}

.walking-with-purpose .fill-your-cup .button {
  font-size: 1.2rem;
  padding: 1.5rem 4rem;
  border-radius: 0;
}

.coffee-picture {
  height: 28vw;
  width: 100%;
  background: url(/images/stories/template/walking-with-purpose/2.jpg) no-repeat
    center center;
  background-size: cover;
}

.fall-sessions {
  display: flex;
  flex-wrap: wrap;
}

.walking-with-purpose
  #g-mainbar
  > div
  > div
  > div
  > div
  > div
  > div
  > div
  > h1 {
  padding-top: 2%;
}

.flex-50 {
  flex-basis: 50%;
  padding: 2% 5% 2% 5%;
}

.circle-images {
  display: flex;
  flex-wrap: wrap;
  flex-basis: 100%;
  justify-content: center;
}

.circle-images > div {
  flex-basis: 30%;
  padding: 2%;
}

.fall-sessions img {
  box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.4);
}

.circle-images img {
  border-radius: 100%;
  width: 60%;
  box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.4);
}

.virtual-session {
  height: 28vw;
  width: 100%;
  background: url(/images/stories/template/walking-with-purpose/5.jpg) no-repeat
    center center;
  background-size: cover;
  position: relative;
}

.virtual-session > div {
  position: absolute;
  bottom: 5%;
  right: 50%;
  transform: translate(50%);
}
.virtual-session > div > p {
  color: black;
  font-family: Raleway;
}

.what-is-wwp {
  display: flex;
  flex-wrap: wrap;
}

.rock-img {
  box-shadow: 0 0 7px 1px rgba(0, 0, 0, 0.4);
  object-fit: cover;
  width: auto;
  height: 100%;
  background-image: url(/images/stories/template/walking-with-purpose/bible-rock.jpg);
  background-position: center right;
  background-size: cover;
}

.outdoor-rosary {
  height: 28vw;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(/images/stories/template/walking-with-purpose/6.jpg) no-repeat
    center center;
  background-size: cover;
}

.outdoor-rosary p {
  color: black;
}

.center-me {
  height: auto;
  width: auto;
  padding-bottom: 9%;
}

@media only screen and (max-width: 50.99rem) {
  .flex-50 {
    flex-basis: 100%;
  }

  .circle-images > div {
    flex-basis: 100%;
    padding: 5%;
  }

  .circle-images img {
    width: 70%;
  }

  .virtual-session {
    height: 385px;
  }

  .outdoor-rosary {
    height: 300px;
    background: url(/images/stories/template/walking-with-purpose/6.jpg)
      no-repeat 42% center;
  }

  .wwp-img {
    height: 65vw;
  }
}

/* extraordinary giving page */

.fullwidth-page #g-container-main {
  padding: 0;
}

.fullwidth-page #g-mainbar {
  padding: 0;
}

.fullwidth-page #g-container-main .g-content {
  padding: 0;
  margin: 0%;
}

/* these sections can be used on any fullwidth page without side menus */

/* title section - hero image with title in the top left hand corner */
/* .j-title-section */

.j-title-section {
  width: 100%;
  height: 25vw;
  position: relative;
  background-image: url(/images/stories/template/extraordinary-giving/extraordinary-giving-10.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center -8vw;
}

.j-title-section :is(h1, h2, h3, h4, h5, h6) {
  position: absolute;
  z-index: 10;
  top: 10%;
  left: 10%;
  font-size: clamp(1.5rem, 2.75vw, 5rem);
  color: black;
}
/* end of section */

/* centered text bar section */
/* .j-center-text */

.j-center-text {
  width: 100%;
  /* height: 12vw; */
  padding: 0 12%;
  margin: 3% 0;
  display: flex;
}

.j-center-text p {
  text-align: center;
  margin-bottom: 0;
  margin: auto;
  color: black;
}

.fullwidth-page #g-mainbar {
  background-color: rgb(250, 244, 244);
}

/* left text 50 50 - .j-left-text-50-50 */

.j-left-text-50-50 {
  display: flex;
}

.j-left-text-50-50 > div {
  flex-basis: 50%;
}

.j-left-text-50-50 > div:first-child {
  padding: 5%;
  background-color: #f7edd4;
}

.j-left-text-50-50 > div:last-child {
  background-image: url(/images/stories/template/extraordinary-giving/extraordinary-giving-1.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.j-left-text-50-50 :is(h1, h2, h3, h4, h5, h6) {
  color: black;
  text-align: center;
}

.j-left-text-50-50 p {
  color: black;
  text-align: center;
}

@media only screen and (max-width: 50.99rem) {
  .j-left-text-50-50 > div:last-child {
    height: 350px;
  }

  .j-left-text-50-50 {
    flex-direction: column;
  }

  .j-left-text-50-50 > div {
    flex-basis: initial;
  }
}

/* .j-img-buttons - top text with buttons in a row beneith */

.j-img-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.j-img-buttons p {
  color: black;
  text-align: center;
}

.j-img-buttons :is(h1, h2, h3, h4, h5, h6) {
  text-align: center;
  font-size: clamp(1.5rem, 2.75vw, 5rem);
}

.j-img-buttons > div {
  flex-basis: 100%;
}

.j-img-buttons > div:nth-child(1) {
  padding: 0% 5% 0 5%;
  margin-top: 4%;
}

.j-img-buttons > div:nth-child(2) {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-evenly;
  margin-bottom: 6%;
}

.j-img-buttons .j-image-button {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 15vw;
  position: relative;
}

.j-image-button img {
  border-radius: 100%;
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.j-image-button a {
  padding: 5px 2rem;
  width: 100%;
  font-size: 14px;
  text-align: center;
  display: block;
  color: white;
  background-color: #3c4669;
}

.j-image-button > div:first-child {
  height: 15vw;
}

@media only screen and (max-width: 50.99rem) {
  .j-img-buttons .j-image-button {
    width: 40vw;
  }

  .j-image-button > div:first-child {
    height: 40vw;
  }
}

/* right text 50 50 - .j-right-text-50-50 */

.j-right-text-50-50 {
  display: flex;
}

.j-right-text-50-50 > div {
  flex-basis: 50%;
  /* height: fit-content; */
}

.j-right-text-50-50 > div:first-child {
  background-image: url(/images/stories/template/extraordinary-giving/extraordinary-giving-8.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.j-right-text-50-50 > div:last-child {
  padding: 5%;
  background-color: #f7edd4;
}

.j-right-text-50-50 :is(h1, h2, h3, h4, h5, h6) {
  color: black;
  text-align: center;
  font-size: clamp(1.5rem, 2.75vw, 5rem);
}

.j-right-text-50-50 p {
  color: black;
  font-size: 1rem;
  text-align: center;
}

.j-right-text-50-50 strong {
  font-style: italic;
}

@media only screen and (max-width: 50.99rem) {
  .j-right-text-50-50 > div:first-child {
    height: 350px;
  }

  .j-right-text-50-50 {
    flex-direction: column-reverse;
  }

  .j-right-text-50-50 > div {
    flex-basis: initial;
  }
}

/* go board section */

.go-board {
  padding: 0 5%;
}

/* .j-3-text-center - two images with text in the center - endowment gifts*/

.j-3-text-center {
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
  margin: 3% 5%;
}

.j-3-text-center > div:is(:first-child, :last-child) {
  flex-basis: 15%;
}

.j-3-text-center > div:nth-child(2) {
  flex-basis: 60%;
  padding: 0 5%;
}

.j-3-text-center p {
  text-align: center;
  color: black;
  font-size: 1rem;
}

.j-3-text-center strong {
  font-size: 1.05rem;
}

.j-3-text-center li {
  color: black;
}

.j-3-text-center :is(h1, h2, h3, h4, h5, h6) {
  text-align: center;
  font-size: clamp(1.5rem, 2.75vw, 5rem);
}

.j-3-text-center > div:is(:first-child, :last-child) img {
  height: 100%;
  object-fit: cover;
}

@media only screen and (max-width: 50.99rem) {
  .j-3-text-center {
    flex-direction: column;
  }

  .j-3-text-center > div:is(:first-child, :last-child) {
    flex-basis: initial;
  }

  .j-3-text-center > div:is(:first-child, :last-child) {
    height: 30vw;
  }

  .j-3-text-center > div:is(:first-child, :last-child) img {
    height: 100%;
    object-fit: cover;
    width: 100%;
  }
}

/* .j-3-img-center - Dillons community rewares - beige backgrounds */

.j-3-img-center {
  display: flex;
  flex-direction: row;
  padding: 5%;
  background-color: #f7edd4;
}

.j-3-img-center > div:is(:last-child, :first-child) {
  flex-basis: 37%;
}

.j-3-img-center > div:nth-child(2) {
  flex-basis: 24%;
}

.j-3-img-center img {
  height: 100%;
  object-fit: cover;
  padding: 0 7%;
}

.j-3-img-center :is(h1, h2, h3, h4, h5, h6) {
  font-size: clamp(1.3rem, 2.5vw, 4.5rem);
  text-align: center;
}

.j-3-img-center p {
  color: black;
}

.j-3-img-center li {
  color: #001940;
}

.j-center {
  text-align: center;
}

.j-bullets {
  list-style-type: disc;
}

.j-button {
  border-radius: 0%;
  padding: 2rem;
}

@media only screen and (max-width: 50.99rem) {
  .j-3-img-center {
    flex-direction: column;
  }
}

/* apostolate page templates */

/* .j-apostolates-text */

.j-apostolates-text {
  padding: 3% 10%;
}

.j-apostolates-text :is(h1, h2, h3, h4, h5, h6) {
  text-align: center;
  color: black;
  font-weight: initial;
  font-size: 2rem;
}

.j-apostolates-text p {
  text-align: center;
  color: black;
}

/* .j-color-cards */

.j-color-cards-bg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(335px, 1fr));
  gap: 2rem;
  justify-content: space-evenly;
  position: relative;
  padding: 0 3% 5% 3%;
}

.picture-card {
  flex-basis: 23%;
  margin: 2% 0;
  background-color: #f7edd4;
  padding: 2rem;
}

.picture-card img {
  border-radius: 100%;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.picture-card h2 {
  font-size: 1.5rem;
  text-align: center;
  color: black;
}

.picture-card p {
  text-align: center;
  color: black;
  font-size: 1rem;
}

/* .j-scroll-banner - continuous scrolling text */

.j-scroll-banner {
  padding: 2% 10%;
  background-color: #a09779;
  position: relative;
  overflow: hidden;
}

.j-gradient-overlay {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  /* margin: 0 10%; */
  z-index: 10;
  background-image: linear-gradient(
      to right,
      rgba(160, 151, 121, 1) 10%,
      rgba(160, 151, 121, 0) 40%
    ),
    linear-gradient(
      to left,
      rgba(160, 151, 121, 1) 10%,
      rgba(160, 151, 121, 0) 40%
    );
}

.j-scroll-banner :is(h1, h2, h3, h4, h5, h6) {
  color: white;
  /* background: white; */
}

.scroll-text {
  display: inline-block;
  animation: scroll 15s linear infinite;
  font-size: clamp(2rem, 3vw, 5rem);
  color: white;
  white-space: nowrap;
}

.scroll-text span {
  letter-spacing: 3px;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(
      -25%
    ); /* Adjust percentage based on number of duplicated copies */
  }
}

/* spiritual gifts inventory section */

.j-apostolates-text-2 {
  padding: 3%;
}

.j-apostolates-text-2 :is(h1, h2, h3, h4, h5, h6) {
  text-align: center;
}

.j-apostolates-text-2 p {
  text-align: center;
  color: black;
}

.j-apostolates-text-2 .j-button {
  padding: 1.5rem 2.5rem;
}

/* banner section - footer image - banner image */

.j-banner-image img {
  width: 100%;
  height: 31vw;
  object-fit: cover;
}

/* apostolates text 3 */

.j-apostolates-text-3 {
  padding: 3% 15%;
}

.j-apostolates-text-3 h1 {
  text-align: center;
  font-size: 2.5rem;
}

.j-apostolates-text-3 p {
  text-align: center;
  color: black;
  text-align: center;
}

@media (max-width: 50.99rem) {
  .j-apostolates-symbols {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }
}

/* accordion menus - apostolates page */

.j-apostolates-accordians {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(335px, 1fr));
  gap: 2rem;
  padding: 0 3% 3% 3%;
}

.j-acord-div > h1 {
  text-align: center;
  font-size: 2.5rem;
}

.j-apostolates-accordians .sprocket-lists-modern-container > li > h4 {
  color: white;
  text-align: center;
  font-size: 1.2rem !important;
  border-bottom: 1px solid white;
}

.j-apostolates-accordians .sprocket-lists-modern-container > li {
  background-color: #3c4669;
}

.j-apostolates-accordians .sprocket-lists-modern-title .indicator {
  border-top: 10px solid #ffffff;
}

.j-apostolates-accordians .sprocket-lists-modern-item {
  background-color: white;
}

.j-apostolates-symbols {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-direction: row;
}

.j-symbol-guide {
  text-align: center;
}

.j-symbol {
  width: clamp(3rem, 5vw, 6rem);
  margin: auto;
}

@media screen and (max-width: 50.99rem) {
  .j-apostolates-accordians {
    padding: 5%;
  }
}

/* j-apostolates-text-4 */

.j-apostolates-text-4 {
  background-color: #a09779;
  padding: 3% 5%;
}

.j-apostolates-text-4 h1 {
  text-align: center;
  font-size: 2rem;
  color: white;
}

.j-apostolates-text-4 .j-4-button {
  text-align: center;
  color: black;
  padding: 1.5rem 3.5rem;
  background-color: white;
  width: fit-content;
}

.j-apostolates-text-4 div {
  display: grid;
  justify-content: center;
  margin-bottom: 5%;
}

.j-apostolates-text-4 p {
  text-align: center;
  color: white;
}

.j-apostolates-text-4 a {
  color: white;
}

/*  */

/* .j-img-3 {
    margin-top: 2.5rem;
} */

/* replacing the apostolates title image */

.j-apostolates {
  background-image: url(/images/stories/template/apostolates-page/apostolates-page-1.jpg);
  background-position: center;
}

/* creating the close all button for the apostolates page drop downs */

.j-apostolates-accordians
  .sprocket-lists-modern-container
  > li:first-child
  .sprocket-padding {
  padding: 0;
}

/* rotating the arrow on the right */

.j-apostolates-accordians
  .sprocket-lists-modern-container
  > li:first-child
  .indicator {
  transform: rotate(180deg) translateY(9px);
  border-top: 10px solid #3c4669;
}

.j-apostolates-accordians .sprocket-lists-modern-container > li:first-child {
  background-color: #faf4f4;
}

/* hiding the first li title */

.j-apostolates-accordians .sprocket-lists-modern-container > li:first-child h4 {
  color: #faf4f4;
  font-size: 0 !important;
}

/* adjustment for the collapse button */

.j-acord-module {
  margin-top: -15px;
}

.j-apostolates-accordians .sprocket-lists-modern-title {
  padding-left: 12% !important;
  padding-right: 12% !important;
}

/*************************************************************************************/
/* adjust picture spacing on the homepage - semenarians section - text/photo section */

@media only screen and (min-width: 50.99rem) {
  .homelayout #g-expanded .picture-block .sprocket-features-img-container img {
    margin-left: 0vw;
  }
}

@media only screen and (max-width: 50.99rem) {
  .homelayout #g-expanded .picture-block .sprocket-features-img-container img {
    margin-bottom: 1rem;
  }
}

.g-main-nav .g-sublevel > li {
  margin: 0;
  /* padding: 0.3125rem 0.9375rem; */
}

.g-main-nav .g-standard .g-dropdown .g-dropdown.g-dropdown-right {
  left: 91%;
}

/************************************Memorials Page*************************************************/
/* updating the title image */
.j-memorials {
  background-image: url(/images/stories/template/memorials-page/memorials-candles.jpg);
  background-size: cover;
  background-position: center;
}

.j-memorials.j-title-section h1 {
  color: white;
}

/* .j-memorials-text - memorial donation text section */

.j-memorials-text {
  background-color: #f7edd4;
  padding: 3% 10%;
}

.j-memorials-text .button {
  padding: 1.5rem 3rem;
  border-radius: 0;
}

/* j-memorials-cards */

.j-memorials-cards {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  padding: 2% calc(10% - 2rem) 0% calc(10% - 2rem);
}

.j-memorials-cards .picture-card {
  background-color: #faf4f4;
}

/* j-memorials-text-2 */

.j-memorials-text-2 {
  padding: 3% 10% 0% 10%;
}

/* Memorial Wall edits */

.j-memorial-wall .g-content-array {
  margin: initial;
}

.j-memorial-wall .ph-rec-row .g-grid {
  border-bottom: none;
}

.j-memorial-wall {
  background-color: #f7edd4;
  padding: 5% 5%;
}

.j-memorial-wall {
  --ph-title-color: black;
  --ph-background-hover: #fdfffd29;
  --ph-box-shadow: none;
  --ph-border-bottom: none;
}

@media only screen and (min-width: 50.99rem) {
  .j-memorial-wall .ph-rec-row .g-grid {
    width: 20% !important;
  }

  .j-memorial-wall .ph-rec-row .g-content-array .g-item-title {
    text-align: center;
  }
  .j-memorial-wall .g-content-array .g-array-item-details {
    justify-content: center;
  }

  .j-memorial-wall .ph-rec-row .g-array-item {
    background: #f7edd4;
  }

  .j-memorial-wall .button {
    background-color: #1f415d !important;
  }
}

@media only screen and (max-width: 50.99rem) {
  .j-memorial-wall .g-array-item-details {
    display: none;
  }
}

/* footer prayer */

.j-footer-prayer {
  width: 100%;
  height: 25vw;
  position: relative;
  background-image: url(/images/stories/template/memorials-page/memorials-eternal-rest.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 5%;
}

.j-footer-prayer :is(h1, h2, h3, h4, h5, h6, p) {
  text-align: right;
  color: white;
}

.j-all-articles .item-image img {
  max-height: 600px;
  width: auto;
}

@media only screen and (max-width: 50.99rem) {
  .j-footer-prayer {
    height: 60vw;
  }
}

/* sacraments page */

.white-background {
  background-color: white;
}

.j-sacraments-catechism img {
  aspect-ratio: 16/9;
  width: 30%;
  margin-bottom: 1rem;
  object-fit: cover;
}

.j-sacraments-catechism {
  background-color: #1f415d;
  padding: 2% 7% 2% 7%;
}

.j-sacraments-catechism :is(p, h1, h2, h3, a) {
  color: white;
}

.j-sacraments-catechism > div {
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  position: relative;
}

.j-sacraments-catechism > div > div {
  display: flex;
  width: 100%;
  gap: 2rem;
  justify-content: space-evenly;
}

.j-sacraments-catechism h1 {
  margin-bottom: 1.5rem;
}

.j-sacraments {
  background-image: url(/images/stories/template/sacraments-page/sacraments-hero.png);
  background-position: center;
}

.j-sacraments h1 {
  color: white;
}

.j-sacraments-footer img {
  height: 20vw;
}

@media only screen and (max-width: 50.99rem) {
  .j-sacraments-catechism > div > div {
    flex-direction: column;
  }

  .j-sacraments-catechism img {
    width: 100%;
  }
}

/*  */
/* devotions page */
/*  */

.devotions-page .j-sacraments-catechism img {
  aspect-ratio: 16/12;
}

.j-devotions {
  background-image: url(/images/stories/template/devotions-page/devotions-title-image.jpg);
  background-position: center;
}

.j-devotions :is(h1, h2, h3, h4, h5, h6, a, p) {
  color: white;
}

/*  */
/* youth formation page */
/*  */

/* page classes */
.youth-formation-page #g-container-main h2 {
  color: #1f415d;
  font-variant: normal;
  font-weight: normal;
  font-size: 2rem;
  margin-bottom: 1rem;
}
/*  */

.j-youth-formation {
  background-image: url(/images/stories/template/youth-formation/youth-formation-header.jpg);
  background-position: center;
}

.youth-formation-50 {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  padding: 3% 8% 3% 8%;
}

.youth-formation-50 > div {
  display: grid;
}

.j-youth-formation-text {
  padding: 5%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.youth-formation-50 img {
  height: auto;
  aspect-ratio: 16/12;
  object-fit: cover;
  max-height: 450px;
  display: grid;
  margin: auto;
}

.formation-50-right {
  grid-template-columns: 1.5fr 1fr;
}

.formation-50-right > div:nth-child(2) {
  display: grid;
}

@media only screen and (min-width: 963px) {
  .j-youth-formation-text {
    padding: 5%;
    display: flex;
    flex-direction: column;
    /* max-height: 30vw; */
  }
}

@media (max-width: 50.99rem) {
  .youth-formation-50 {
    display: grid;
    grid-template-columns: 1fr;
    padding: 3% 8% 3% 8%;
  }
}

/* black background white quote */

.black-bg-text {
  padding: clamp(50px, 2vw, 15%);
  background-color: black;
}

.black-bg-text p {
  color: white;
}

/* beige background 50-50 img */

.img-50-50 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  padding: 3% 8% 3% 8%;
  background-color: #f7edd4;
}

.img-50-50 .image-container img {
  height: auto;
  aspect-ratio: 16/12;
  object-fit: cover;
  max-height: 345px;
  display: grid;
  margin: auto;
}

.image-container {
  padding: 5%;
}

.img-50-50-text {
  padding: 5%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.img-50-50 h2 {
  color: black !important;
}

@media only screen and (min-width: 963px) {
  .image-50-50-text {
    padding: 5%;
    display: flex;
    flex-direction: column;
    max-height: 30vw;
  }
}

/* Totus Tuus section */

.j-formation-section img {
  height: 100%;
  max-height: 700px;
  margin: auto;
  display: block;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.j-totus-tuus {
  padding: 3% 5% 3% 5%;
}

@media only screen and (min-width: 963px) {
  .j-formation-section .j-youth-formation-text {
    max-height: 50vw;
  }
}

/*  */
/* Adult Formation Page */
/*  */

.j-adult-formation {
  background-image: url(/images/stories/template/adult-faith-opportunities/adult-formation-header.jpg);
  background-position: center;
}

.j-adult-formation h1 {
  color: white;
}

.adult-formation-padding {
  padding: 3% 8%;
}

.top-bottom-border {
  padding: 1% 0;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

.kapauns-header-img {
  height: 35vw;
  max-height: 600px;
  background-image: url(/images/stories/template/adult-faith-opportunities/kapauns-men.jpg);
  background-size: cover;
  background-position: center;
  position: relative;
}

.shape-overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 2;
  background-image: url(/images/stories/template/adult-faith-opportunities/kapaun-overlay-2.png);
  background-position: center bottom;
  background-repeat: no-repeat;
}

.beige-overlay {
  background-color: #f7edd4;
}

.kapauns-men {
  padding: 1rem 8%;
  margin-top: -3rem;
  position: relative;
  z-index: 3;
}

.adult-faith-formation-opportunities {
  padding: 5%;
}

.border-section {
  position: relative;
}

.border-container {
  position: absolute;
  top: 0;
  height: 100%;
  left: 50%;
  transform: translatex(-50%);
  width: 80%;
  border-bottom: 1px solid black;
  pointer-events: none;
}

.rcia-section > .border-container {
  border-top: 1px solid black;
}

.Scholars-section > .border-container {
  border-bottom: none;
}

.ff-flex-sections {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.ff-flex-sections > div {
  flex-basis: 30%;
}

.digital-faith-formation img {
  max-height: 600px;
}

.digital-faith-formation h1 a {
  color: var(--primary-color);
}

@media only screen and (max-width: 50.99rem) {
  .ff-flex-sections > div {
    flex-basis: 100%;
  }

  .ff-flex-sections {
    gap: 1rem;
  }

  .digital-faith-formation img {
    height: 90vw;
  }
}

/*  bullet fix - Can be deleted after Jills position is filled - if its 2024, you can delete this*/

  .bullet-fix ul {
      margin-top: 0px;
  }

  .bullet-fix :is(#g-mainbar > div > div > div > div > div > div > div:nth-child(3) > p:nth-child(4), #g-mainbar > div > div > div > div > div > div > div:nth-child(3) > p:nth-child(6), 
  #g-mainbar > div > div > div > div > div > div > div:nth-child(3) > p:nth-child(8), #g-mainbar > div > div > div > div > div > div > div:nth-child(3) > p:nth-child(12),
  #g-mainbar > div > div > div > div > div > div > div:nth-child(3) > p:nth-child(14)) {
    margin-bottom: 0px;
  }
  
/* 


/* fixing clergy grid staff page spacing */

.grid-staff {
  --grid-border-radius: 0 !important;
  --primary-rgb: 31, 65, 93 !important;
  --grid-bg: #1f415d !important;
}

.grid-staff :is(p,h1,h2,h3,h4,h5,h6) {
  color: white;
}

.grid-staff a:hover {
  color: #b9aa81;
}

.grid-staff a {
  color: #e0ce9d;
}

.grid-staff .g-array-item {
  padding-bottom: 0 !important;
}

.grid-staff .g-content-array > .g-grid {
  margin: 0 !important;
}

.grid-staff .g-content-array {
  gap: 2vw !important;
}

.grid-staff .g-array-item-image a {
  pointer-events: none;
}

@media (min-width: 50.99rem) {
  .staff-margin.grid.grid-portrait.grid-staff {
    margin-top: 2vw !important;
  }

  .grid-staff .g-content-array {
    justify-content: center !important;
  }
}

@media (max-width: 50.99rem) {
  .grid-staff.grid.grid-portrait .g-array-item {
    background: var(--grid-bg) !important;
  }

  .grid.grid-staff.grid-dm .g-array-item {
    border-radius: var(--grid-border-radius) !important;
  }

  .grid.grid-staff.grid-dm .g-array-item-image {
    flex: 55% !important;
    width: 50% !important;
    max-width: 50% !important;
  }
}

/*  fixing the homepage and making the alert look better */


#contentarray-7910-particle > div > div > div > div > div > div.g-array-item-title > h3 {
  text-align: center !important;
  font-size: clamp(1.4rem, 1.6vw, 2rem) !important;
}

.g-content-array {
  margin: 0 !important;
}

.homelayout #g-utility .parish-alert .g-joomla-articles > div:first-child {
  padding: 3vw 5% 0 5%;
}

.homelayout #g-utility .parish-alert .g-joomla-articles > div:first-child {
  background-color: #1f415d;
  margin-bottom: 2%;
  padding-bottom: 2% !important;
}

.homelayout #g-utility .parish-alert :is(p, a, h1,h2,h3,h4,h5,h6) {
  color: white;
}


.parish-alert :is(h1, h2, h3, h4, h5, h6, p) {
  margin-left: 0 !important;
}


.homelayout #g-utility .parish-alert h3.g-item-title,
#contentarray-7910-particle > div > div > div > div > div > div.g-array-item-title > h3 {
  text-align: center !important;
  font-size: clamp(1.4rem, 1.6vw, 2rem) !important;
}