@import url('//fonts.googleapis.com/css2?family=Gentium+Book+Basic:ital,wght@0,400;0,700;1,400;1,700&family=Quintessential&family=Sawarabi+Gothic&display=swap');
/************ TEMPLATE  ************
Rotator Size: 1000x563 (wide, 16:9)

/************ FONTS  ************
Headings: Sawarabi Gothic Regular
font-family: 'Sawarabi Gothic', sans-serif;
Body font: Gentium Book Basic
font-family: 'Gentium Book Basic', serif;
Special font: Quintessential
font-family: 'Quintessential', cursive;

/************ COLORS  ************
Navy: #002D3F; rgba(0,45,63,1)
Gold: #9B7912; rgba(155,121,18,1)
Lightest Blue/Grey: #F4F6F8

/************ SCHOOL COLORS & NOTES *************
Red: 740A11
Gold: AA985D
Black: 231F20

-I'm imagining the header as gold, but it is up to you. Let me know if a different logo color is needed
-School Quicklinks: Lunch Menu, For Students, Newsletter, Powerschool Parent & Student Portal
-icon quicklinks in header are same as parish, just switch to school info; include link to parish side

************/
body {color: #333; font-family: 'Gentium Book Basic', serif;
	--ph-title-color: #002D3F;
	--ph-content-effect-bg-1: white ; 
	--ph-content-effect-bg-2: rgba(0,45,63,0.25);
	--ph-title-hover: #9B7912;
}

h1, h2, h3, h4, h5, h6 {margin: .75rem 0; line-height: 1.3; font-weight: normal;}
p {line-height: 1.3;}
.page-header h1 {text-transform: none; font-size: 3rem;}
h1 {color: #002D3F; font-size: 3.5rem; font-weight: bold; font-family: 'Quintessential';}
h2 {font-variant-caps: small-caps; color: #002D3F; font-size: 2.5rem; font-weight: 400; font-family: 'Quintessential'}
.page-header h2 { padding-bottom: 0.25rem; line-height: 2.5rem;}
h3 {color: #002D3F; font-size: 2rem; border-bottom: 1px solid #9B7912;  line-height: 1.3; margin: 0 0 10px 0;}
h3.gent {font-family: 'Gentium Book Basic', serif;}
h4 {color: #9B7912; font-size: 2rem;} 
h4.gent {font-family: 'Gentium Book Basic', serif;}
h5 {background: #9B7912; font-size: 1.75rem;color: white; border-radius: .2rem; padding: .5rem;} 
h6 {color: #002D3F; font-size: 1.5rem; text-transform: uppercase; font-weight: bold;}
h6.mixed {text-transform: none;}
a {color: #9B7912;} 
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: #002D3F;  font-family: 'Sawarabi Gothic', sans-serif;
} 


/*************** HOMELAYOUT ***************/ 
.school-home #g-container-main .button {background: #740A11;}
.school-home #g-container-main .button:hover {background: #777;}


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

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

/*************** NAVIGATION ***************/
/*.school-home #g-navigation .g-logo img {height: 10vw; width: auto;}
.school-sub #g-navigation .g-logo img {height: 10vw; width: auto;}*/

/*.school-home #g-navigation .g-block > .g-content {padding: .75rem; margin: .25rem;}
.school-sub #g-navigation .g-block > .g-content {padding: .75rem; margin: .25rem;}*/

.toplinks > .g-content {width: 100%;}

.parish-home .toplinks .g-iconmenu > a , .parish-sub .toplinks .g-iconmenu > a {border-left: 2px solid #9B7912;}
.school-home .toplinks .g-iconmenu > a , .school-sub .toplinks .g-iconmenu > a {border-left: 2px solid #740A11;}

.toplinks .g-iconmenu > a {justify-content: center; padding: 10px 0;}
.parish-home .g-social-items a:hover {color: #002D3F!important;}
.school-home .g-social-items a:hover {color: #AA985D!important;}

@media only screen and (max-width: 50.99rem) {
  .school-home #g-navigation .g-logo, .school-sub #g-navigation .g-logo {text-align: center;}
  .school-home #g-navigation .g-logo img, .school-sub #g-navigation .g-logo img {text-align: center;} /*{height: 40vw; width: auto;}*/

  .toplinks .g-iconmenu > a {padding: 10px 0;}
  .toplinks > .g-content {margin: 0; padding: 0;}
}

/*************** MAIN *********************/
.submod-button .g-content {padding: 0 1.5rem 1.5rem 1.5rem; margin: -1rem .625rem .625rem .625rem;}
.homelayout #g-container-main > .g-grid {padding: 0 5%;}

.parish-home #g-container-main h2.g-title {background: none; color: #002D3F; border-bottom: 1px solid #9B7912; padding-left: 0;}
.school-home #g-container-main h2.g-title {background: none; color: #740A11; border-bottom: 1px solid #AA985D; padding-left: 0;}

.parish-home .ph-sidepics-1 .g-content-array .g-item-title a {color: #002D3F;}
.school-home .ph-sidepics-1 .g-content-array .g-item-title a {color: #740A11;}

.ph-sidepics-1 .g-array-item-read-more .button {margin-bottom: .5vw;}

.parish-home .ph-sidepics-1 .g-content-array > .g-grid {border-bottom: 1px solid #9B7912;}
.school-home .ph-sidepics-1 .g-content-array > .g-grid {border-bottom: 1px solid #AA985D;}

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

  .parish-home .ph-sidepics-1 .g-content-array .g-item-title a {color: #ffffff;}
  .school-home .ph-sidepics-1 .g-content-array .g-item-title a {color: #ffffff;}
}


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


/*************** SLIDESHOW ****************/ 
.mass-times {height: 40vw!important; background: url('/images/template/masstimes.jpg') 0% 0% no-repeat; background-size: cover;}
.mass-times :is(h1,h2,h3,h4,h5,h6) {
  border-bottom: none;
  font-size: 2.5vw;
  margin: 0 0 5px 0;
}
.mass-times p {color: #333; margin-bottom: 0; font-size: 1.4vw;}
.mass-times .g-grid {background: rgba(255,255,255,.85);}
.mass-times .g-content-array {margin-left: 0; margin-right: 0;}
.mass-times .g-content-array .g-array-item .g-array-item-text {margin: 0; padding: 2vw;}
.mass-times div {height: 100%; width: 100%;}
.mass-times .button {background: #9B7912;}
.mass-times .button:hover {background: #777;}

.wel-box {height: 40vw!important; background: url('/images/stories/template/school-welcome.jpg') 0% 0% no-repeat, #ffffff; background-size: contain; background-position: center;}
.wel-box :is(h1,h2,h3,h4,h5,h6) {
  border-bottom: none;
  font-size: 3vw;
  line-height: 1.3; 
  text-shadow: 0px 0px 10px rgba(0,0,0,.2);
  /*margin: 0 0 5px 0;*/
}
.wel-box p {color: #333; font-size: 1.8vw; font-weight: 500; line-height: 1.3; text-shadow: 0px 0px 10px rgba(0,0,0,.2);  }
.wel-box h6 {font-size: 2vw;  }
.wel-box h1 {color:  ;  }
#g-slideshow .wel-box a {color: #740a11; }
.wel-box .g-grid {background: rgba(255,255,255,.85);}
.wel-box .g-content-array {margin-left: 0; margin-right: 0;}
.wel-box .g-content-array .g-array-item .g-array-item-text {margin: 0; padding: 2vw;}
.wel-box div {height: 100%; width: 100%;}

.swiper-third .swiper-slide img {object-position: center; object-fit: cover; height: 100%; width: 100%;}
.parish-home .swiper-third .slide-content {width: 80%;}
.school-home .swiper-third .slide-content {width: 80%;}

.parish-home .swiper-third .slide-content > .g-swiper-text {width: 100%; margin: 0!important; /*padding: 1vw;*/ background: rgba(0,45,63,.5); border-radius: 1rem; box-shadow: 0px 0px 10px rgba(0,0,0,.5);}
.school-home .swiper-third .slide-content > .g-swiper-text {width: 100%; margin: 0!important; /*padding: 1vw;*/ background: rgba(116,10,17,.5); border-radius: 1rem; box-shadow: 0px 0px 10px rgba(0,0,0,.5);}

.parish-home .sc-ct-third .sprocket-features-img-container img {height: 40vw!important;}

.homelayout #g-slideshow {margin-bottom: 1vw!important;}

@media only screen and (max-width: 50.99rem) {
  .parish-home.homelayout #g-slideshow > .g-container > .g-grid > .g-block:nth-child(1) {order: 2;}
  .parish-home.homelayout #g-slideshow > .g-container > .g-grid > .g-block:nth-child(2) {order: 1;}


  .parish-home .sc-ct-third .sprocket-features-img-container img {height: 57vw!important;}

  .mass-times {height: fit-content !important;}
  .mass-times :is(h1,h2,h3,h4,h5,h6) {
    font-size: 6vw;
  }
  .mass-times p {font-size: 3vw;}
  .mass-times .g-content-array .g-array-item .g-array-item-text {padding: 5vw;}

  .wel-box {height: 100% !important; background-position: center;}
  .wel-box :is(h1,h2,h3,h4,h5,h6) {
    font-size: 6vw;
  }
  .wel-box p {font-size: 4vw;}
  .wel-box .g-content-array .g-array-item .g-array-item-text {padding: 5vw;}
}

/******** School Slideshow Rotator *********/
.g-swiper.swiper-container-horizontal>.swiper-pagination-bullets {left: 1vw;
transform: translateX(0%);}

.g-swiper.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .g-swiper.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {margin: 1vw .25vw; }

.g-swiper.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .g-swiper.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {border: none; height: 5px;  width: 5px; background: #f1f2f2;  }

.g-swiper.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet::after, .g-swiper.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet::after { width: 5px; height: 5px;  background: #f1f2f2; }

.g-swiper.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active::after, .g-swiper.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet-active::after { width: 5px;  height: 5px; background: #000000; }

/*************** HEADER *******************/ 
.parish-home .ql-bc-1 h4.g-blockcontent-subcontent-title {background: rgba(0,45,63,.5);}
.parish-home .ql-bc-1 .g-blockcontent-subcontent-block-content:hover h4.g-blockcontent-subcontent-title {background: rgba(0,45,63,.7);}
.school-home .ql-bc-1 h4.g-blockcontent-subcontent-title {background: rgba(170,152,93,.5);}
.school-home .ql-bc-1 .g-blockcontent-subcontent-block-content:hover h4.g-blockcontent-subcontent-title {background: rgba(170,152,93,.7);}

/*************** ABOVE ********************/ 
/*************** SHOWCASE *****************/ 
/*************** UTILITY ******************/ 
/*************** FEATURE ******************/ 
/***************MAIN***************/
.ph-sidepics-1 .g-content-array .g-array-item .g-array-item-text {
    font-size: 1rem;
}

/*************** EXPANDED *****************/ 
/*************** EXTENSION ****************/

.parish-home #g-extension {background: url('/images/stories/template/paralax/parallax-new1.jpg') 0% 0% no-repeat; background-size: cover !important; background-position: 50% top !important;}
.parish-home.homelayout #g-extension h1 {margin-bottom: 3rem; color: #ffffff; font-weight: 400; text-shadow: 1px 1px 10px #000;}
.parish-home.homelayout #g-extension p {font-size: 1.4rem; text-shadow: 1px 1px 10px #000;}
.parish-home #g-extension > .g-grid {background: rgba(155,121,18,.8); padding: 5vw 10%;}

.school-home #g-extension {background: url('/images/stories/template/paralax/paralax4.png') 0% 0% no-repeat; background-size: cover;}
.school-home.homelayout #g-extension h1 {margin-bottom: 3rem; color: #ffffff; font-weight: 400; text-shadow: 1px 1px 10px #000;}
.school-home.homelayout #g-extension p {font-size: 1.4rem; text-shadow: 1px 1px 10px #000; color: #ffffff;}
.school-home #g-extension > .g-grid {background: rgba(116,10,17,.3); padding: 5vw 10%;}

@media only screen and (max-width: 50.99rem) {
  .parish-home #g-extension > .g-grid {padding: 5vw 0;}
  .school-home #g-extension > .g-grid {padding: 5vw 0;}
}

/*************** BOTTOM *******************/
/*************** FOOTER *******************/
#g-footer a {color: #ffffff;} 
.footer-cells {display: flex; flex-direction: row;}
.footer-cells > div {flex: 1; display: flex; justify-content: center; align-items: center; text-align: center;}
.parish-home .footer-cells img, .parish-sub .footer-cells img {width: 60%; height: auto;}

.school-home .footer-cells img, .school-sub .footer-cells img {width: 60%; height: auto;}

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

  .parish-home .footer-cells img, .parish-sub .footer-cells img {width: 80%; height: auto;}
  .footer-cells div:first-child {margin-bottom: 2rem;}
}

/*************** COPYRIGHT ****************/ 
/*************** MODULES ******************/
.parish-sub .moduletable .nav.menu, .parish-sub .moduletable .unstyled {background: #002D3F;} 
.parish-sub .moduletable .nav.menu li.current.active a, .parish-sub .moduletable .nav.menu li a:hover {    
  color: white; 
  background: #9B7912; 
} 

.school-sub .moduletable .nav.menu, .school-sub .moduletable .unstyled {background: #740A11;} 
.school-sub .moduletable .nav.menu li.current.active a, .school-sub .moduletable .nav.menu li a:hover {    
  color: white; 
  background: #AA985D; 
} 


/*************** SECTIONS *****************/
.ph-altview .g-array-item-image img {
    border-radius: 4px;
}
/**************blog archive display****************/
.moduletable .category-module {
	padding: 1rem;
	border: 0px solid white;
		}
.moduletable .category-module li {
	padding-bottom: 0.25rem;
	border-bottom: 0px solid white;
	list-style-type: circle !important;
}
.moduletable .category-module li a {
	display: block;
}


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


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

@media (min-width: 50.99rem) {
  #g-navigation .g-logo img {
    width: 60%;
    max-width: 750px;
  }

  .toplinks .g-iconmenu .g-iconmenu-text {
    font-size: 1.25rem;
  }
}