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

/************ TEMPLATE  ************
Rotator Size: 1000x750 (standard, 4:3)

/************ FONTS  ************
Serif: Marcellus
Sans Serif: Lato
font-family: 'Lato', sans-serif;
font-family: 'Marcellus', serif;

/************ COLORS  ************
Dark Blue: #0f3963; rgba(15,57,99,1)
Light Blue: #aec4dd
White semi-transparent: rgba(255,255,255,1)

/************ NOTES ************
-Make News Subpage Look like Recent News of StPat-Laurie
-menu: rgba(15,57,99,.85)
-note the italicized/light blue text for spanish text in menus, buttons, etc.
Rotator overlay color is a white gradient from 85% to 0%: rgba(255,255,255,.85)-St. Joseph News background - rgba(255,255,255,.8)
-St. Joseph in Action buttons - white overlay 90% to 0%: rgba(255,255,255,.9)
-'Sign me up' button (flocknote): rgba(15,57,99,.35)
-Mass times button: rgba(15,57,99,.25)

-Rotator text:

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

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

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

p.spanish {line-height: 1.3; font-family: 'Satisfy', cursive; font-size: 1.15rem; margin-left: 0 !important;  min-height: 10px !important;}
ul.spanish {line-height: 1.3; font-family: 'Satisfy', cursive; font-size: 1.15rem; margin: 1rem 0 1rem 1.5rem !important; width: 95%;}


.page-header h1 {text-transform: none; font-size: 3rem;}
h1 {color: #0f3963; font-size: 3.5rem; font-weight: 500;}
h2 {font-variant-caps: small-caps; color: #0f3963; font-size: 2.5rem;  font-weight: bold;}
.page-header h2 { padding-bottom: 0.25rem; line-height: 2.5rem;}
h3 {color: #0f3963; font-size: 2rem; border-bottom: 1px solid #aec4dd; line-height: 1.3; margin: 0 0 10px 0;}
h3.lato {font-family: 'Lato', sans-serif;}
h4 {color: #0f3963; font-size: 2rem; font-family: 'Lato', sans-serif;} 
h4.marcellus {font-family: 'Marcellus', serif;}
h5 {background: #aec4dd; font-size: 1.75rem;color: white; border-radius: .2rem; padding: .5rem;} 
h6 {color: #0f3963; font-size: 1.5rem; text-transform: uppercase; font-weight: bold;}
h6.mixed {text-transform: none;}
h6.satisfy {font-family: 'Satisfy', cursive; font-size: 1.5rem; text-transform: none; font-weight: 400; }
a {color: #3f8ae1;} 
a:hover {color: black;}

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

@media only screen and (max-width: 767px) { 
    h1 {font-size: 2.2rem;}
    h2 {font-size: 1.75rem;}
    h3 {font-size: 1.75rem;}
    h4 {font-size: 1.75rem;}
    h5 {font-size: 1.2rem;}
    h6 {font-size: 1.2rem;}
    p {font-size: 1rem; margin-bottom: 4px;}
    h1, h2, h3 {line-height: 1.2;}
    h4, h5, h6, p{line-height: 1.1;} 
} 


.readon, .button, .btn, p.readmore .btn, .sprocket-lists-portrait-container > li .sprocket-lists-portrait-item > a span, .listentobutton.moduletable a {
    background: #0f3963;  
    font-family: 'Lato', sans-serif;
} 


/*************** HOMELAYOUT ***************/ 
.homelayout h3.g-title {border-bottom: none; color: #0f3963; font-weight: 400;}

.hidden-sub:not(.homelayout .hidden-sub) {display: none;}

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

/*************** TOP **********************/ 

/*************** NAVIGATION ***************/
#g-navigation {background: url('/images/template/header-joseph.jpg') 0% 0% no-repeat, url('/images/template/header-church.jpg') 100% 0% no-repeat; background-size: 30%;}
.homelayout #g-navigation .g-grid:nth-child(3) {padding: 2vw 3vw;}
.homelayout #g-navigation .g-grid:nth-child(3) .g-block:first-child .g-content {background: rgba(255,255,255,.8); height: 34vw!important; margin: 0 1vw 0 0; box-shadow: 0px 0px 10px rgba(0,0,0,.2);}
.homelayout #g-navigation .g-grid:nth-child(3) .g-block:nth-child(2) .g-content {padding: 0; margin: 0 0 0 1vw;}
.homelayout #g-navigation .g-grid:nth-child(3) a {color: #0f3963;}

#g-navigation h3.g-title {margin-bottom: 0;}
#g-navigation .sprocket-lists-portrait-container li {padding: 5px 0;}

/**Clarity dropdown- remove border-radius on menu dropdowns:***/
.g-main-nav .g-standard .g-dropdown {border-radius: 0px;}
.g-main-nav .g-dropdown .g-dropdown-column>.g-grid>.g-block.size-100 {border-radius: 0px;}
.g-main-nav .g-dropdown .size-100>.g-sublevel>li.g-go-back+li>.g-menu-item-container {
 border-top-left-radius: 0px;
 border-top-right-radius: 0px;
}
.g-main-nav .g-dropdown .size-100>.g-sublevel>li:last-child>.g-menu-item-container {
 border-bottom-left-radius: 0px;
 border-bottom-right-radius: 0px;
}

/*Clarity- remove top level dropdown indicatator***/
.g-main-nav .g-toplevel > li.g-parent .g-menu-parent-indicator {display: none;}
/*clarity increase menu font size, remove capitalization***/
.g-main-nav .g-toplevel>li>.g-menu-item-container>.g-menu-item-content {font-size: 1rem; letter-spacing: 0.1rem; font-weight: 500;}
.g-main-nav .g-toplevel {text-transform: none;}
.g-main-nav {font-family: 'Lato', sans-serif;}
    
    /*St. Joseph News*/
.sprocket-lists-portrait-container li {border-bottom: none;}
.zoompics h4.sprocket-lists-portrait-title {color: #0f3963;}
.homelayout #g-navigation .sprocket-lists-portrait-item a {display: none;}
.homelayout #g-navigation .portrait-text {font-size: 0.9rem;}
.zoompics .active .portrait-image img, .zoompics.noncollapse .portrait-image img {height: 9vw; width: 9vw;}



    /*Rotator*/
.sc-ct-third .sprocket-features-img-container img {height: 34vw!important;}
.sc-ct-third {box-shadow: 0px 0px 10px rgba(0,0,0,.2);}

.sc-ct-third .layout-slideshow .sprocket-features-content {height: 100%; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(to top, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 100%);}
.layout-slideshow .sprocket-features-title, .layout-slideshow .sprocket-features-desc {background: none;}
.sc-ct-third .sprocket-features-desc {height: fit-content; max-height: 50%; margin-bottom: 50px; padding: 0 2vw 0 2vw;}
.sc-ct-third a.readon {position: absolute; bottom: 0; right: 0; background: none; font-size: 1vw; font-weight: bold; color: #0f3963!important;}
.sc-ct-third a.readon:hover {color: #000000!important;}
.layout-slideshow .sprocket-features-arrows .arrow {color: #0f3963;}
.layout-slideshow .sprocket-features-pagination li {padding: 7px;}
.sc-ct-third :is(h1,h2,h3,h4,h5,h6,p,a) {color: #0f3963;}
.sc-ct-third :is(h1,h2,h3,h4,h5,h6) {font-size: 2.5vw;}
.sc-ct-third :is(p) {font-size: 1.45rem;}
.sc-ct-third :is(p.spanish) {font-size: 1.5rem;}

@media only screen and (max-width: 50.99rem) {
  #g-navigation {background: #ffffff;}
  #g-navigation .g-grid:nth-child(1) {background: #aec4dd;}

  .homelayout #g-navigation .g-grid:nth-child(3) {display: flex; flex-direction: column; padding: 0;}
  .homelayout #g-navigation .g-grid:nth-child(3) .g-block:nth-child(2) {order: 1; width: 100%;}
  .homelayout #g-navigation .g-grid:nth-child(3) .g-block:nth-child(1) {order: 2; width: 100%;}

  .homelayout #g-navigation .portrait-text {font-size: initial;}

  .sc-ct-third .sprocket-features-img-container img {height: 75vw!important;}
  .sc-ct-third .sprocket-features-desc {margin-bottom: 0;}

  .homelayout #g-navigation .g-grid:nth-child(3) .g-block:nth-child(2) .g-content {margin: 0;}
  .homelayout #g-navigation .g-grid:nth-child(3) .g-block:first-child .g-content {margin: 0; height: fit-content!important;}

  .layout-slideshow .sprocket-features-pagination {display: none;}
  .sc-ct-third a.readon {font-size: 3vw;}

  .sc-ct-third :is(h1,h2,h3,h4,h5,h6) {font-size: 6vw;}
  .sc-ct-third :is(p) {font-size: 3vw;}


  .zoompics.noncollapse .active .portrait-image img {width: 100%;}
}


/*************** SLIDESHOW ****************/ 
    /*Quicklinks*/
.qlsolidback .sprocket-strips-item {background: #0E3963; color: white;}
.qlsolidback .sprocket-strips-item a, .qlsolidback .sprocket-strips-item .sprocket-strips-title {color: white;}
.qlsolidback .sprocket-strips-item:hover {background: #aec4dd;}

.quicklinks h4.sprocket-strips-title {font-size: 1.15rem;}

@media only screen and (max-width: 50.99rem) {
  .quicklinks h4.sprocket-strips-title {font-size: 1.2rem;}
}

/*************** HEADER *******************/ 
#g-header .g-logo {
  padding: 0;
  margin: 0;
  text-align: center;
  height: auto;
}
#g-header .g-logo::after {
  background: none;
  width: 100%;
  position: initial;
}

.homelayout #g-header h3.g-title {font-size: 3rem;}
.homelayout #g-header iframe {box-shadow: 0px 0px 10px rgba(0,0,0,.2);}

    /*Videos*/
.v-home {
  display: flex; 
  flex-direction: row;
  gap: 1vw;
}

.v-home div {flex: 1;}

@media only screen and (max-width: 50.99rem) {
  .v-home {
    flex-direction: column;
  }
}

/*************** ABOVE ********************/ 
.homelayout #g-above {
  background: url('/images/template/mission-bg.jpg') 0% 0% no-repeat; 
  background-size: contain; 
  margin-top: 1vw; 
  margin-bottom: 1vw;
  box-shadow: 0px 0px 15px rgba(0,0,0,.5);
}

@media only screen and (max-width: 50.99rem) {
  .homelayout #g-above {
    background: #aec4dd;
    box-shadow: none;
  }
}

/*************** SHOWCASE *****************/ 
/*************** UTILITY ******************/ 
.a-links.a-vw14 .sprocket-strips-s-item {padding: 0.5vw;}
.a-links .sprocket-strips-s-item img {box-shadow: 0px 0px 10px rgba(0,0,0,.2)}
.a-links .sprocket-strips-s-content h4.sprocket-strips-s-title a {color: #0f3963; background: linear-gradient(to top, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 100%);}
.a-links .sprocket-strips-s-content h4.sprocket-strips-s-title a:hover {color: #000000;}
#g-utility h4 {font-size: 1.5rem;}

@media only screen and (max-width: 50.99rem) {
  .homelayout #g-utility .g-content {padding: 0; margin: 0;}

  .a-links .sprocket-strips-s-item {background: rgba(15,57,99,.5); box-shadow: none;}
  .a-links .sprocket-strips-s-content h4.sprocket-strips-s-title {font-size: 5vw;}
  .a-links .sprocket-strips-s-content h4.sprocket-strips-s-title a {background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 33%, rgba(15,57,99,.5) 33%, rgba(15,57,99,.5) 100%); color: #ffffff;}
  .a-links .sprocket-strips-s-content h4.sprocket-strips-s-title a:hover {background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 33%, rgba(15,57,99,.7) 33%, rgba(15,57,99,.7) 100%);}
}

/*************** FEATURE ******************/ 
.homelayout #g-feature .g-grid:nth-child(1) {padding: 0 8%; margin-top: 2vw;}

    /*Calendar*/
.rme-badge {background: #0f3963; box-shadow: 0px 0px 10px rgba(0,0,0,.2);}
.rme-description {color: #0f3963;}
.rme-arrow {color: #0f3963;}
.rme-timeline-point:hover, .rme-timeline-point.active, .rme-timeline-point span {background: #0f3963;}

.admond img {box-shadow: 0px 0px 10px rgba(0,0,0,.5);}

/*************** EXPANDED *****************/ 
.homelayout #g-expanded .g-grid .g-block:nth-child(2) .g-content {display: flex; flex-direction: column;}
.homelayout #g-expanded .g-grid .g-block:nth-child(2) .g-content .platform-content:nth-child(1) {flex: 4;}
.homelayout #g-expanded .g-grid .g-block:nth-child(2) .g-content .platform-content:nth-child(2) {flex: 1;}
.homelayout #g-expanded .platform-content {box-shadow: 0px 0px 10px rgba(0,0,0,.2);}
.social-banner {width: 45%; height: auto; margin-top: 2vw; margin-bottom: 1vw;}
.flock-banner {width: 50%; height: auto;}
.flock-social {justify-content: center; align-items: center;}
.flock-social div {text-align: center;}

@media only screen and (max-width: 50.99rem) {
  .homelayout #g-expanded .g-grid .g-block:nth-child(2) .g-content .platform-content:nth-child(2) {padding: 2rem;}
}

/*************** EXTENSION ****************/
/*************** BOTTOM *******************/
/*************** FOOTER *******************/
#g-footer a {color: #ffffff;} 

#g-footer a.button {background: rgba(255,255,255,.2);}
#g-footer a.button:hover {background: #777;}

.footer-box {display: flex; flex-direction: row; justify-content: space-around; align-items: center;}
.footer-social-icons {display: flex; flex-direction: row; justify-content: space-evenly; align-items: center;}

.footer-box img {width: 100%; height: auto;}

@media only screen and (max-width: 50.99rem) {
  .footer-box {
    flex-direction: column;
  }
}

/*************** COPYRIGHT ****************/ 
/*************** MODULES ******************/
.moduletable .nav.menu, .moduletable .unstyled {background: #0f3963;} 
.moduletable .nav.menu li.current.active a, .moduletable .nav.menu li a:hover {    
    color: #0f3963; 
    background: #aec4dd; 
} 


/*************** SECTIONS *****************/



/*************** MOBILE *******************/ 


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

/*************** SUBPAGES *****************/
.news-column ul.sprocket-lists-portrait-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 1vw;
  grid-column-gap: 1vw;
}

.news-column .portrait-image img {height: 7vw; width: 100%; object-fit: cover; object-position: center;}

.news-column ul.sprocket-lists-portrait-container li {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-areas: 
    "a b b b"
    "a c c c";
  column-gap: 20px;
}

.news-column .active .portrait-image {width: 100%;}

.news-column .portrait-image {grid-area: a;}
.news-column h4.sprocket-lists-portrait-title {grid-area: b;}
.news-column .sprocket-lists-portrait-item {grid-area: c;}

#custom-4198-particle {
  padding: 0;
  margin: 0;
}