@import url('//fonts.googleapis.com/css?family=Lato:400,700|Montserrat:400,500|EB+Garamond:ital,wght@0,400;1,500&display=swap');

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

-- Use Parallax on the photo behind Welcome to our Parish Family section; set up this text arrangement similar to the About Us section on ABBGI homepage
-- Footer background photo does not need to be parallax
-- Video is from facebook -  https://www.facebook.com/crclincoln/ 

Rotator Size: 1200x675 (wide, 16:9)

Sans Serif: Montserrat Medium
Montserrat MediumSerif: EB Garamond Italic; use italic for h3 and regular/normal uppercase for h5
Sans Serif (body): Lato

Light Blue: #48748C; rgba(72,116,140,1)
Dark Blue: #1B1B44; rgba(27,27,68,1) -- 80% opacity on most overlays
replacing dark blue with #4E87A0  rgba(78,135,160,1)   9.2.21

Cream: #E5E4DF; rgba(229,228,223,1) - Welcome background color, readmore buttons

outline-9 = church
outline-10 = school
-- for the school--
Green: #789D4A; rgba(120,157,74,1)
Link colors HEX #D0D1AB or RGBA (208,209,171,1)

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

body {
  color: #333;
  font-size: 1.1rem;
  font-family: 'Lato', sans-serif;
}

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

p {
  line-height: 1.3;
  font-size: 1.1rem;
  font-family: 'Lato', sans-serif;
}

.outline-9 h1 {
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  color: #01426A;
  letter-spacing: 2px;
  font-size: 2.8rem;
}

.outline-10 h1 {
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  color: #4E5B31;
  letter-spacing: 2px;
  font-size: 2.8rem;
}

.page-header h1 {
  text-transform: none;
  font-size: 3rem;
}

h2,
.page-header h2 {
  font-family: Lato, san-serif;
  letter-spacing: 1px;
  font-weight: 700;
  color: #01426A;
  font-size: 2rem;
  border-bottom: 1px solid #333;
  line-height: 1.3;
  margin: 0;
  padding: 0;
}

h2.plain {
  font-weight: 400;
  border-bottom: 2px solid #E2EDE9;
  font-size: 1.7rem;
}

.outline-10 h2,
.outline-10 .page-header h2 {
  font-family: Lato, san-serif;
  letter-spacing: 1px;
  font-weight: 700;
  color: #4E5B31;
  font-size: 2rem;
  border-bottom: 1px solid #333;
  line-height: 1.3;
  margin: 0;
  padding: 0;
}

h3.g-title,
h3 {
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  color: #01426A;
  font-size: 2rem;
  padding-bottom: 0px;
}

.outline-10 h3.g-title,
.outline-10 h3 {
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  color: #789D4A;
  font-size: 2rem;
  padding-bottom: 0px;
}

h4 {
  font-family: 'EB Garamond', serif;
  background: #01426A;
  font-size: 1.75rem;
  color: white;
  border-radius: .2rem;
  padding: .1rem .4rem;
}

.outline-10 h4 {
  font-family: 'EB Garamond', serif;
  background: #4E5B31;
  font-size: 1.75rem;
  color: white;
  border-radius: .2rem;
  padding: .1rem .4rem;
}

h5 {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.8rem;
  padding-top: 0px;
  margin-top: 0px;
  line-height: 1;
}

.outline-10 h5 {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.8rem;
  padding-top: 0px;
  margin-top: 0px;
  line-height: 1;
}

h6 {
  color: #01426A;
  font-size: 1.6rem;
  font-style: italic;
}

.outline-10 h6 {
  color: #4E5B31;
  font-size: 1.6rem;
  font-style: italic;
}

.homelayout #g-feature h4 {
  background-color: #497c93;
}

.schoollayout #g-feature h4 {
  background-color: #789d4a;
}

/* a { color: #A01D21; }
a:hover { color: #203B71; } */

@media only screen and (max-width: 767px) {
  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.3rem;
  }

  h3 {
    font-size: 1.3rem;
  }

  h4 {
    font-size: 1.3rem;
  }

  h5 {
    font-size: 1rem;
  }

  h6 {
    font-size: 1rem;
  }

  p {
    font-size: .9rem;
    margin-bottom: 4px;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    line-height: 1.1;
  }
}

blockquote {
  color: #333;
  padding: 0 0 0 15px;
  margin: 0 0 20px;
  border-left: 5px solid #d5d5d5;
  font: italic 16px/22px Georgia, Serif;
  line-height: 1.2;
  font-size: 1.3rem;
}

address {
  font-style: italic;
  font-weight: bold;
  font-size: 1.2rem;
  line-height: 1.2;
}

/************ BUTTONS  ************/
/************ BUTTONS  ************/
.readon,
.button,
.btn,
p.readmore .btn {
  font-size: 1rem;
  text-transform: none;
  font-weight: normal;
  background: #E5E4DF;
  padding: .7rem 1.3rem;
  border-radius: .5rem;
  margin: 0;
  display: inline-block;
  line-height: 1.125rem;
  border: none;
  transition: all .2s ease-in;
}

.outline-9 .readon,
.outline-9 .button,
.outline-9 .btn,
.outline-9 p.readmore .btn {
  color: #48748C;
}

.outline-10 .readon,
.outline-10 .button,
.outline-10 .btn,
.outline-10 p.readmore .btn {
  color: #789D4A;
}



.readon:hover,
.button:hover,
.btn:hover,
p.readmore .btn:hover {
  background: #777;
  color: white;
}

.readon a,
.button a,
.btn a,
p.readmore a,
.btn a {
  color: white;
}

.btn .icon-chevron-right {
  display: none;
}


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

a.whitebutton {
  color: #4E87A0 !important;
  font-size: 1rem;
  text-transform: none;
  font-weight: normal;
  background: transparent;
  padding: .5rem 1rem;
  border-radius: .5rem;
  margin: 0;
  display: inline-block;
  font-weight: 500;
  line-height: 1.125rem;
  border: 1px solid #4E87A0;
  transition: all .2s ease-in;
}

a.schoolwhitebutton {
  color: #789D4A !important;
  font-size: 1rem;
  text-transform: none;
  font-weight: normal;
  background: transparent;
  padding: .5rem 1rem;
  border-radius: .5rem;
  margin: 0;
  display: inline-block;
  font-weight: 500;
  line-height: 1.125rem;
  border: 1px solid #789D4A;
  transition: all .2s ease-in;
}

a.bluebutton {
  color: white !important;
  font-size: 1rem;
  text-transform: none;
  font-weight: normal;
  background: #4E87A0;
  padding: .5rem 1rem;
  border-radius: .5rem;
  margin: 0;
  display: inline-block;
  font-weight: 500;
  line-height: 1.125rem;
  border: 1px solid #4E87A0;
  transition: all .2s ease-in;
}

a.greenbutton {
  color: white !important;
  font-size: 1rem;
  text-transform: none;
  font-weight: normal;
  background: #789D4A;
  padding: .5rem 1rem;
  border-radius: .5rem;
  margin: 0;
  display: inline-block;
  font-weight: 500;
  line-height: 1.125rem;
  border: 1px solid #789D4A;
  transition: all .2s ease-in;
}

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

a.blueblockbtn {
  color: #4E87A0 !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 #4E87A0;
  transition: all .2s ease-in;
}

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

a.greenblockbtn {
  color: #789D4A !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 #789D4A;
  transition: all .2s ease-in;
}


.bluebutton:hover {
  background: transparent;
  color: #014E78 !important;
  border: 1px solid #014E78;
}

.blackbutton:hover {
  background: transparent;
  color: #000000 !important;
  border: 1px solid #000000;
}

.whitebutton:hover {
  background: #4E87A0;
  color: white !important;
  border: 1px solid #4E87A0;
}

.bluebutton:hover {
  background: transparent;
  color: #4E87A0 !important;
  border: 1px solid #4E87A0;
}

.greenbutton:hover {
  background: transparent;
  ;
  color: #789D4A !important;
  border: 1px solid #789D4A;
}

.schoolwhitebutton:hover {
  background: #789D4A;
  color: white !important;
  border: 1px solid #789D4A;
}

.blueblockbutton:hover {
  background: transparent;
  color: #4E87A0 !important;
  border: 1px solid #4E87A0;
}

.greenblockbutton:hover {
  background: transparent;
  color: #789D4A !important;
  border: 1px solid #789D4A;
}

.blueblockbtn:hover {
  background: #4E87A0;
  color: white !important;
}

.greenblockbtn:hover {
  background: #789D4A;
  color: white !important;
}



/************ TABLES  ************/
.fancytable th {
  color: white;
  background: #182A47;
  border: 1px solid #182A47;
}

.fancytable td {
  border: 1px solid #182A47;
}

/************ ALERT ************/
.alert .g-content {
  padding: 0;
  margin: 0;
}

.alert {
  border: none;
  padding: 0;
  margin: 0;
  background-color: #FFCFCF;
  color: #FF0000;
}

.alert h1,
.alert h2,
.alert h3,
.alert h4,
.alert h5,
.alert h6,
.alert p {
  margin-left: 20px;
  color: red;
  background: transparent;
}

/************ HERO IMAGE ************/
.hero p {
  margin: 0;
}

.hero img {
  height: 24vh;
  object-fit: cover;
  width: 100%;
  opacity: 1;
}

.outline-10 .hero img {
  height: 24vh;
  object-fit: cover;
  width: 100%;
  opacity: 1;
}

@media only screen and (max-width: 767px) {
  .hero img {
    height: 24vh;
  }
}

/************ HOMELAYOUT  ************/
.homelayout .hiddenhome {
  display: none;
}

p.buttonheading {
  margin: 0;
  padding: 0;
}

.aligncenter .g-grid {
  align-items: center;
}

/************ MENU  ************/
#g-top .g-content {
  margin: 0;
  padding: 0;
}

#g-top .g-content img {
  padding: 15px 0;
  width: 50%;
}

.alert h2.contentheading {
  padding-top: 20px;
}

#g-navigation .g-content {
  padding: 0 10%;
}

#g-navigation {
  padding-bottom: 0px;
}

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

#g-slideshow .g-block:last-child .g-content {
  padding-top: 6px;
}

.homelayout #g-slideshow {
  /*background: #1b1b44d9;*/
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
}

#g-slideshow {
  padding: 0 5%;
}

.g-main-nav .g-toplevel>li:hover>.g-menu-item-container,
.g-main-nav .g-toplevel>li.active>.g-menu-item-container {
  background: rgba(255, 255, 255, .7);
}

.g-main-nav .g-sublevel>li:hover>.g-menu-item-container,
.g-main-nav .g-sublevel>li.active>.g-menu-item-container {
  background: rgba(255, 255, 255, .15);
}

/*.g-main-nav .g-dropdown {  background: #25254b;}*/

.g-main-nav .g-standard>.g-dropdown,
.g-main-nav .g-fullwidth>.g-dropdown {
  margin-top: 0px;
}

.g-main-nav .g-toplevel>li:hover,
.g-main-nav .g-toplevel>li.active {
  background: rgba(0, 0, 0, .1);
}

.g-main-nav .g-sublevel>li:hover,
.g-main-nav .g-sublevel>li.active {
  background: rgba(0, 0, 0, .1);
}

.g-main-nav .g-toplevel>li>.g-menu-item-container {
  text-align: center;
  padding: 1rem 0.75rem;
}

.g-main-nav .g-toplevel>li.g-parent .g-menu-parent-indicator {
  display: none;
}

.g-main-nav .g-toplevel>li>.g-menu-item-container,
.g-main-nav .g-sublevel>li>.g-menu-item-container {
  font-size: 1rem;
}

.g-main-nav ul.g-toplevel {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
}

.g-main-nav .g-standard .g-fade.g-dropdown {
  z-index: 10;
}

.g-main-nav .g-dropdown {
  border-radius: 0 0 6px 6px;
}

.g-main-nav .g-standard>.g-dropdown.g-dropdown-right,
.g-main-nav .g-fullwidth>.g-dropdown.g-dropdown-right {
  left: 0;
}

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

  .g-offcanvas-toggle {
    top: 20px;
    left: 20px;
  }
}

/************ SEARCH  ************/
#g-slideshow input[type="search"] {
  background-color: rgba(0, 0, 0, 0);
  border: 2px white solid;
  color: white;
}

#g-slideshow input[type="text"] {
  background-color: rgba(0, 0, 0, 0.0);
  border: 2px white solid;
  color: white;
}

#g-slideshow form {
  margin-bottom: 0px;
}

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

form {
  margin: 0.02rem 0;
}

input[type="text"] {
  margin: 0.25rem;
}


@media only screen and (max-width: 767px) {
  #g-slideshow form {
    margin: 0px 10px 0px 10px;
  }

  #g-slideshow .g-block:last-child .g-content {
    padding-top: 0;
  }

}





/************ SIDE MENU  ************/
#g-aside .moduletable[class*="box"] {
  padding: 0;
}

#g-aside .g-content {
  padding-left: 0;
  padding-right: 0px;
}

.moduletable .nav.menu li a {
  width: 100%;
  border-radius: 0;
  padding: 10px 20px;
  color: white;
  font-weight: normal;
}

.moduletable .nav.menu li {
  transition: all .2s ease-in;
  border-radius: 3px;
  width: 100%;
  padding: 0;
  margin: 0;
}

.moduletable .nav.menu,
.moduletable .unstyled {
  border: none;
  padding: 0;
  margin: 0;
  display: block;
  background: #4E87A0;
  border-radius: 0;
}

.outline-10 .moduletable .nav.menu,
.outline-10 .moduletable .unstyled {
  border: none;
  padding: 0;
  margin: 0;
  display: block;
  background: #718A42;
  border-radius: 0;
}

.moduletable .nav.menu li:last-child {
  padding-bottom: 0;
  margin-bottom: 20px;
}

.moduletable .nav.menu .nav-child li:last-child {
  margin-bottom: 0px;
}

.moduletable .nav .nav-child {
  margin-top: 0px;
}

.moduletable .nav.menu .nav-child li {
  border: none;
  margin-left: 20px;
  padding-right: 20px;
}

.moduletable .nav.menu li.current.active a,
.moduletable .nav.menu li a:hover {
  color: white;
  background: #316378;
  font-weight: normal;
}

.outline-10 .moduletable .nav.menu li.current.active a,
.outline-10 .moduletable .nav.menu li a:hover {
  color: white;
  background: #374B15;
  font-weight: normal;
}

/************ SIDE DOCUMENT MODULES ************/
#g-aside .g-title {
  padding: 0;
}

#g-aside h3.g-title {
  font-size: 1.75rem;
}


/************ SOCIAL MEDIA ICONS WHITE ************/
.g-social a {
  color: white;
}

.g-social a:hover {
  color: #108093 !important;
}

/************ CENTER SOCIAL MEDIA VERTICALLY  ************/
.g-block.size-5 {
  display: flex;
  justify-content: center;
  align-items: center;
}

/************ OFFCANVAS MENU  ************/
.g-offcanvas-toggle {
  color: black;
}

#g-offcanvas #g-mobilemenu-container .g-toplevel>li>.g-menu-item-container>.g-menu-item-content,
#g-offcanvas #g-mobilemenu-container .g-sublevel>li>.g-menu-item-container>.g-menu-item-content {
  font-weight: normal;
}

#g-offcanvas .g-menu-item-title {
  color: white;
}

#g-offcanvas #g-mobilemenu-container ul>li>a.g-menu-item-container:hover {
  background: rgba(0, 0, 0, 0.15);
}

#g-offcanvas #g-mobilemenu-container ul>li.g-menu-item-link-parent>.g-menu-item-container>.g-menu-parent-indicator {
  border: none;
  background: none;
}

#g-offcanvas #g-mobilemenu-container ul>li.g-menu-item-link-parent>.g-menu-item-container>.g-menu-parent-indicator:hover {
  border: none;
  background: none;
}

#g-feature:before {
  border: none;
}

/************ ADMIN FOOTER  ************/
#g-copyright .g-block {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#g-copyright .g-content {
  margin: 0;
  padding: 0;
}

#g-copyright {
  margin: 0 0 0 0;
  padding: 0;
  height: 0;
}

#g-copyright a .fa.fa-lock {
  color: #e5e5e5;
}

#g-copyright a:hover .fa.fa-lock {
  color: #c71833;
}

@media only screen and (max-width: 767px) {
  #g-copyright {
    display: none !important;
  }
}

/************ ROTATOR  ************/
.layout-slideshow .sprocket-features-img-container img {
  object-fit: cover;
  object-position: center center;
  height: 70vh;
}

@media only screen and (min-width: 768px) {
  .layout-slideshow .sprocket-features-img-container img {
    height: 70vh !important;
  }
}

.sprocket-features {
  position: relative;
}

.outline-9 .layout-slideshow .sprocket-features-content {
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding-right: 40%;
  padding-left: 10%;
  text-shadow: 4px 4px 5px rgba(0, 0, 0, .5);
}

.layout-slideshow h2.sprocket-features-title {
  border: none;
  margin: 0;
  padding-bottom: 0;
  padding-top: 0;
}

.layout-slideshow .sprocket-features-title,
.layout-slideshow .sprocket-features-desc {
  background: none;
  color: white
}

.layout-slideshow .sprocket-features-desc h1,
.layout-slideshow .sprocket-features-desc h2,
.layout-slideshow .sprocket-features-desc h3,
.layout-slideshow .sprocket-features-desc h4,
.layout-slideshow .sprocket-features-desc h5,
.layout-slideshow .sprocket-features-desc h6 {
  background: none;
  color: white;
}

.layout-slideshow .sprocket-features-desc p {
  font-size: 1.4rem;
}

.sprocket-features-img-list li .sprocket-features-content {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.sprocket-features-content .readon {
  background: #E5E4DF;
  color: #1B1B44;
  transition: all .4s ease-in-out;
  text-shadow: none;
}

.sprocket-features-content .readon:hover {
  color: #E5E4DF;
  background: #1B1B44;
}

@media only screen and (max-width: 767px) {
  .outline-9 .sprocket-features-img-container {
    padding-bottom: 70vw;
  }

  .outline-9 .layout-slideshow .sprocket-features-content {
    position: absolute;
    top: 54vw;
    bottom: auto;
    left: 0;
    right: 0;
    min-height: 70vw;
    padding: 0;
    background: #4E87A0;
    width: 100%;
    display: block;
  }

  .layout-slideshow .sprocket-features-title,
  .layout-slideshow .sprocket-features-desc {
    padding-right: 10px;
  }

  .layout-slideshow .sprocket-features-title,
  .layout-slideshow .sprocket-features-desc p {
    margin-bottom: 7x;
  }

}

/************ BIGGER ARROWS ON SLIDESHOW ************/
.layout-slideshow .sprocket-features-arrows .arrow span {
  font-size: 6rem;
  line-height: 0px;
  width: 25px;
}

.sprocket-features.layout-slideshow.arrows-onhover .sprocket-features-arrows .arrow {
  background: none;
  box-shadow: none;
  color: white;
}

.sprocket-features.layout-slideshow.arrows-onhover .sprocket-features-arrows .arrow {
  font-size: 5rem;
}

.arrows-active .sprocket-features-img-list {
  margin: 0px;
}

.arrows-onhover .sprocket-features-arrows .arrow.prev span {
  margin-left: 0;
}

.arrows-onhover .sprocket-features-arrows .arrow.next span {
  margin-right: 0;
}

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

  .sprocket-features-pagination,
  .sprocket-features-arrows {
    display: none;
  }
}


/************ UTILITY ************/
#g-utility .g-content {
  padding: 0;
  margin: 0;
}

#g-utility {
  padding: 5px 0 0 0;
}

/************ QUICKLINKS ************/
.quicklinks .g-content {
  margin-left: 0px;
  padding-left: 0px;
  margin-right: 0px;
  margin-left: 0px;
}

.quicklinkpics {
  display: flex;
}

.quicklinkpics>div {
  flex: 1;
  position: relative;
  transition: all .35s ease-in-out;
  margin: 5px;
}

.quicklinkpics>div:first-child {
  margin-left: 0px;
}

.quicklinkpics>div:last-child {
  margin-right: 0px;
}

.quicklinkpics>div>a {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  font-size: 1.5rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.1;
  color: white;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.85);
  transition: all .35s ease-in-out;
}

.outline-9 .quicklinkpics>div>a {
  background: rgba(78, 135, 160, 0.75);
}

.outline-10 .quicklinkpics>div>a {
  background: rgba(98, 125, 45, 0.75)
}

.quicklinkpics>div>a>div {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: 8%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all .35s ease-in-out;
}

.quicklinkpics>div:hover>a>div {
  margin: 0;
}

.outline-9 .quicklinkpics>div:hover>a {
  background: rgba(78, 135, 160, 0.25);
}

.outline-10 .quicklinkpics>div:hover>a {
  background: rgba(98, 125, 45, 0.25)
}

.quicklinkpics>div>div>img {
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.quicklinkpics>div,
.quicklinkpics>div>div>img {
  height: 15vw;
}

@media only screen and (max-width: 767px) {
  .quicklinks .g-content {
    margin: 0.625rem;
    padding: 1.5rem;
  }

  .quicklinkpics>div {
    margin: 25px 0;
  }

  .quicklinkpics>div:first-child {
    margin-top: 0px;
  }

  .quicklinkpics {
    display: block;
  }

  .quicklinkpics>div>a,
  .quicklinkpics>div>a>div {
    position: relative;
  }

  .quicklinkpics>div>div>img {
    height: 90px;
    width: 120px;
  }

  .quicklinkpics>div>a>div img {
    max-height: 90px;
    padding: 10px 0;
  }

  .quicklinkpics>div {
    display: flex;
  }

  .outline-9 .quicklinkpics>div:hover>a {
    background: #E5E4DF;
  }

  .outline-10 .quicklinkpics>div:hover>a {
    background: #627d2d;
  }

  .outline-9 .quicklinkpics>div>a {
    background: #4E87A0;
    flex: 1;
    text-shadow: none;
  }

  .outline-10 .quicklinkpics>div>a {
    background: #354914;
    flex: 1;
    text-shadow: none;
  }

  .quicklinkpics>div {
    height: auto;
    border-bottom: 1px white solid;
  }

  .quicklinkpics>div>a>div {
    border: none;
  }

  .quicklinkpics>div>a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .quicklinkpics>div>a>div {
    margin: 0 0 0 20px;
    text-align: left;
  }

  .quicklinkpics>div:hover>a>div {
    margin: 0 0 0 20px;
    border: none;
  }
}

/************ VIDEOS ON HOME PAGE  ************/
@media only screen and (min-width: 768px) {
  /*.bigvideos iframe {
		width: 54vw;
		height: auto;
	}*/
}

@media only screen and (max-width: 767px) {
  .bigvideos iframe {
    width: 100%;
    height: auto;
  }
}



/************ EXPANDED AREA  ************/

.homelayout body,
.homelayout html {
  height: 100%;
}

#g-expanded h1 {
  line-height: 1;
  padding-bottom: 0px;
  margin-bottom: 0px;
}

.outline-9 #g-expanded {
  background-color: white;
  background-image: url(../images/template/welcome.jpg);
  background-attachment: fixed;
  background-position: 50% 0%;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 30px 10%;
}

.outline-10 #g-expanded {
  background-color: white;
  background-image: url(../images/template/welcome-school-40.jpg);
  background-attachment: fixed;
  background-position: 50% 0%;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 30px 10%;
}

#g-expanded .g-grid {
  align-items: center;
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
  #g-expanded {
    padding: 30px 3%;
  }
}

.rme-badge {
  background: #718A42;
}

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

.outline-9 #g-footer {
  background: #4E87A0 url(../images/template/footer2.jpg) 50% 50% no-repeat;
  background-size: cover;
  letter-spacing: 1px;

}

#g-footer {
  padding: 0;
}

#g-footer a {
  color: white;
}

#g-footer a:hover {
  color: rgba(255, 255, 255, .8);
}


.footerlogo {
  width: 25vw;
  margin: auto;
  display: block;
  padding-bottom: 10px;
}

@media only screen and (max-width: 767px) {
  .footerlogo {
    width: 50vw;
  }

}



/************ FEATURE  ************/
#g-feature .g-grid {
  align-items: center;
}

/************ HOVER NEWS  ************/
.sprocket-strips-container {
  display: flex;
  justify-content: center;
}

.sprocket-strips .readon span {
  font-size: 1.5rem;
}

.sprocket-strips {
  position: relative;
}

.outline-9 .sprocket-strips-item {
  background: url(../images/template/article-default.jpg) 0 0 no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

.outline-10 .sprocket-strips-item {
  background: url(../images/stories/template/news-school-default.jpg);
  background-position: 50% 50%;
  background-size: cover;
}

.sprocket-strips-arrows .arrow {
  background: none;
  color: rgba(0, 0, 0, .5);
  font-size: 5rem;
  box-shadow: none;
}

.layout-slideshow .sprocket-features-pagination li,
.layout-slideshow .sprocket-features-arrows .arrow {
  box-shadow: none;
}

.layout-slideshow .sprocket-features-arrows .arrow {
  top: 50%;
}

.sprocket-strips .sprocket-strips-nav .arrow {
  position: absolute;
  top: 50%
}

.sprocket-strips .sprocket-strips-nav .arrow.next {
  right: -50px;
}

.sprocket-strips .sprocket-strips-nav .arrow.prev {
  left: -50px;
}

.sprocket-strips-content>a.readon {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sprocket-strips-item {
  position: relative;
}

.sprocket-strips-item .readon {
  padding: 0;
  margin: 0;
}

.outline-9 .sprocket-strips-item .readon:hover {
  background: rgba(78, 135, 160, 0.8);
}

.outline-10 .sprocket-strips-item .readon:hover {
  background: rgba(98, 125, 45, 0.8);
}

.sprocket-strips-item .readon span {
  flex: 1;
  text-align: center;
  transition: all .2s ease-in;
  opacity: 0;
}

.sprocket-strips-item .readon:hover span {
  opacity: 1;
}

.sprocket-strips-content h4 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 1.4rem;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, .5);
  margin-bottom: 0px;
  min-height: 72px;
  text-align: center;
  transition: all .2s ease-in;
  border-radius: 0 0 .5rem .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.outline-9 .sprocket-strips-content h4 {
  background: rgba(78, 135, 160, 0.0.8);
}

.outline-10 .sprocket-strips-content h4 {
  background: rgba(98, 125, 45, 0.8);
}

.sprocket-strips-item {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.35);
}

.sprocket-strips-content h4 a {
  color: white;
}

.sprocket-strips-item {
  border-radius: .5rem;
}

.sprocket-strips .cols-4>li {
  width: 19%;
}

.sprocket-strips-container>li {
  margin: 10px 3%;
}

.sprocket-strips-item:hover .sprocket-strips-content h4 {
  opacity: 0;
}

.sprocket-strips-item {
  background-position: 50% 50%;
  background-size: cover;
}

.sprocket-lists-title {
  padding: 15px 10px !important;
}

.sprocket-lists-item .sprocket-padding {
  padding-top: 0px;
}

.sprocket-strips-pagination li {
  padding: 8px !important;
  border-radius: 0;
}

.sprocket-strips .cols-3>li {
  width: 15vw;
}

.sprocket-strips-item {
  height: 20.5vw;
}

@media only screen and (max-width: 767px) {
  .sprocket-features-content img {
    display: none;
  }

  .sprocket-strips .sprocket-strips-nav .arrow.next {
    right: -20px;
  }

  .sprocket-strips .sprocket-strips-nav .arrow.prev {
    left: -20px;
  }

  .sprocket-strips-item {
    height: 45vw;
  }

  .sprocket-strips-container {
    flex-wrap: wrap;
  }

  .sprocket-strips .cols-3>li {
    width: 32vw;
  }
}



#g-mainbar .flextable img {
  border-radius: 4px;
  box-shadow: 2px 2px 5px rgb(0 0 0 / 20%);
}

/************ MINISTRY PAGE  ************/
.ministrypage .item {
  display: flex;
  flex-direction: column;
}

.ministrypage .item .pull-left.item-image {
  order: 1;
}

.ministrypage .item .pull-left.item-image img {
  border-radius: 4px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

.ministrypage .item .page-header {
  order: 2;
}

.ministrypage .item table {
  order: 3;
  margin: 5px 0 20px 0;
}

.ministrypage .item p {
  order: 4;
}

.ministrypage .pull-left.item-image {
  margin: 0;
  padding: 0;
}

.ministrypage .page-header h2 {
  line-height: 1.2;
  font-weight: 400;
  font-size: 1.7rem;
  border-bottom: 2px solid #E2EDE9;
  margin: 3px 0 0 0;
  padding: 0;
}

.ministrypage .nav.menu a {
  word-break: normal;
}

.ministrypage h2 a {
  word-break: normal;
}

.btn [class^="icon-"] {
  display: none;
}

.blogministrypage .row-fluid {
  border-bottom: solid 15px #f5f5f5;
  margin-bottom: 15px;
}

.blogministrypage .row-fluid:last-child {
  border-bottom: none;
}

@media only screen and (max-width: 767px) {
  .ministrypage .item {
    padding-bottom: 30px;
  }

  .ministrypage .item .pull-left.item-image img {
    width: 75%;
  }

  .blogministrypage .row-fluid {
    border: none;
    margin-bottom: 0px;
  }
}

/*******align homilies to the left**************/
.k-ui-namespace .mod_docman.mod_docman--documents {
  justify-content: flex-start;
}

h4.sprocket-lists-portrait-title {
  background: none;
  color: #4E87A0;
  font-size: 1.5rem !important;
}

.sprocket-lists-portrait-title {
  margin: 5px 0;
}

.sprocket-lists-portrait-container li {
  padding: 1px 0;
}

/*
.ministrypage .btn, .ministrypage .readon, .ministrypage .button, .ministrypage .btn, .ministrypage p.readmore .btn  { 
  color: #841013; 
  font-size: 1rem;
  text-transform: none;
  background: transparent; 
  padding: .5rem 1rem; 
  border-radius: .5rem; 
  margin: 0;
  line-height: 1.125rem;
  border: 1px solid #841013;
  transition: all .2s ease-in;
 }
.ministrypage .btn:hover, .ministrypage .readon:hover, .ministrypage .button:hover, .ministrypage .btn:hover, .ministrypage p.readmore .btn:hover {  color: white;   background: #841013;}
*/

.sponsorshippage h4 {
  background: none;
  color: #777;
  font-size: 1.4rem !important;
}

.sponsorshippage .sprocket-tables-link .readon {
  color: #fff;
}


/*************Flocknote embed****************/
.flocknoteform input[type="text"] {
  max-width: max-content;
  margin: 0.25rem 0;
}

.flocknoteform input[type="email"],
.flocknoteform input[type="tel"] {
  max-width: fit-content;
  margin-bottom: 0;
}

.flocknoteform button {
  background: #4E87A0;
  color: white;
  padding: 0.5rem;
  border: 1px solid #4E87A0;
}

.flocknoteform button:hover {
  background: transparent;
  color: #4E87A0;
  padding: 0.5rem;
  border: 1px solid #4E87A0;
}

.flocknotebackground {
  background-color: #e5e5e5;
  padding: 0.5rem;
}

/* rotator text */

@media (max-width: 767px) {

  .outline-9 .layout-slideshow .sprocket-features-content {
    padding: 5%;
  }

  .outline-9 .layout-slideshow a {
    color: white;
  }

  .outline-10 #g-showcase .sprocket-features-content {
    width: 90%;
  }

  .outline-10 #g-showcase .sprocket-features-content :is(h1, h2, h3, h4, h5, h6) {
    font-size: 5vw;
  }

  .outline-10 #g-showcase .sprocket-features-content {
    bottom: 30%;
    transform: translate(0) !important;
  }

}

.outline-10 #g-showcase .sprocket-features-content {
  top: 50%;
  transform: translate(0, -50%);
  left: 5%;
}

/* hide the first article in drop down modules */

.hide-blank-article ul.sprocket-lists-portrait-container>li.active:first-child {
  display: none !important;
}

.platform-content:has(.holy-art) {
  padding: 0;
  margin: 0;
}

/* 1. Add a dark gradient overlay ONLY to slides containing text */
.text-rotator li:has(.sprocket-features-desc p) .sprocket-features-img-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Creates a dark fade from the left where the text sits */
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 40%, transparent 70%);
  z-index: 1;
  pointer-events: none;
  /* Allows clicks to pass through to the image link */
}

/* 2. Ensure the content stays positioned above the overlay */
.text-rotator .sprocket-features-content {
  z-index: 3 !important;
}

/* 3. Improve Text Legibility */
/* Targets the "We are hiring" link specifically when it's on an overlay slide */
.text-rotator li:has(.sprocket-features-desc p) [data-style-id="s-10"] {
  color: #ffffff !important;
  /* Change green text to white for contrast */
  font-weight: 600;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
  text-decoration: none;
}

/* 4. Read More Button Adjustment */
/* Optional: Make the button slightly more prominent */
.text-rotator li:has(.sprocket-features-desc p) .readon {
  background-color: #ffffff !important;
  color: #1b1b44 !important;
  /* Keep your dark blue brand color */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.text-rotator li:has(.sprocket-features-desc p) .readon:hover {
  background-color: #e5e4df !important;
}

/*  */

/* 1. Add the dark overlay to slides that HAVE text content */
.text-rotator li:has(.sprocket-features-desc p) .sprocket-features-img-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Gradient: Dark on the left (under text), fading to clear on the right */
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

/* 2. Style the main text (The "We are hiring" message) */
.text-rotator li:has(.sprocket-features-desc p) .sprocket-features-desc p {
  height: auto !important;
  margin-bottom: 15px !important;
}

.text-rotator li:has(.sprocket-features-desc p) .sprocket-features-desc p a {
  color: #ffffff !important;
  font-size: 32px !important;
  /* Large and clear */
  font-weight: 700 !important;
  /* Bold */
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 1) !important;
  /* Strong shadow for contrast */
  text-decoration: none !important;
  line-height: 1.2 !important;
  display: inline-block;
}

/* 3. Style the "Read More" button to stand out */
.text-rotator li:has(.sprocket-features-desc p) .sprocket-features-desc a.readon {
  background-color: #ffffff !important;
  color: #1b1b44 !important;
  /* Dark blue from your original styles */
  font-weight: 600 !important;
  border: none !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

/* 4. Ensure the text container sits on top of the new overlay */
.text-rotator .sprocket-features-content {
  z-index: 2 !important;
}