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

/************ FONTS  ************
Immac - Serif: EB Garamond
StWen - Serif: Caudex
Sans Serif: Lato

/************ IMMAC COLORS  ************
Blue: #192e72; rgba(25,46,114,1)
Cream: #c9b8a0; rgba(201,184,160,1)
Dark Cream (Rotator overlay): #857762; rgba(133,119,98,1)
Light Cream (calendar bg): #e9e3d9
Lightest Cream (bg color): #f4f1ec

/************ STWEN COLORS  ************
Red: #ae353e; rgba(174,53,62,1)
Grey: #aaabaf; rgba(170,171,175,1)
Light Grey (calendar bg): #dddddf
Lightest Grey (bg color): #eeeeef

/************ NOTES FOR BOTH ************
-NEWS: set up 3 categories - IC, StWen or Shared News 
-Dropshadow things: menu bar, ads, news images
-Rotator text, QL text: harsher dropshadow for legibility

/************ IMMACULATE CONCEPTION NOTES ************
-'Ministerio Hispano' button in top right of Immaculate Conception homepage >>> links right to the Hispanic Ministry page
-Rotator overlay gradient: starts at 90% - rgba(133,119,98,.9)
-QLs, 'Ministero Hispano' button: rgba(25,46,114,.6)
-QL outlines: Cream

/************ ST. WENCESLAUS NOTES ************
-Rotator overlay gradien: black starts at 40% - rgba(0,0,0,.4)
-QLs: rgba(174,53,62,.6)
-QL outlines: Grey

/********** MASS TIMES TEXT ************

Mass Times at Immaculate Conception
Mon-Fri - 12:05pm
Saturday - 8:30am
Sunday - 10:15am, 12:30pm (Spanish), 5:30pm

Confession
Mon-Fri - 11:30am-12:00pm
Saturday - 7:30-8:15am
Sunday - 9:30-10:00am, 11:45am-12:15pm, 4:45-5:15pm

Adoration
Friday 12:45pm - Saturday 8:30am

Sign Up for an Hour of Adoration!


Mass Times at St. Wenceslaus
Monday - 6:30pm (Latin)
Wednesday - 5:30pm (Latin)
Saturday - 4:00pm
Sunday - 8:00am (Latin), 10:30am 

Confession
Mon, Wed - half hour before Mass
Saturday - 3:00-3:45pm
Sunday - 7:00-7:45am, 9:45-10:15am

Adoration
Saturday - 3:00-4:00pm

Sign Up for an hour of Adoration!
************/

.parish-1 {
    --primary-color: #192e72;
    --secondary-color: #c9b8a0;

    --primary-rgb: 25,46,114;
    --secondary-rgb: 201,184,160;

    --default-white: #ffffff;
    --default-black: #000000;

    --title-font-family: 'EB Garamond', serif;
    --body-font-family: 'Lato', sans-serif;

    --heading-color: var(--primary-color);
    --heading-font-family: var(--title-font-family);

    --title-border-bottom: 1px solid var(--secondary-color);

    --home-title-font: var(--title-font-family);

    --transparent: rgba(255,255,255,0);

    --default-box-shadow: 0px 0px 10px rgba(0,0,0,.5);

    --swiper-box-shadow: var(--default-box-shadow);

    --ql-bg-opacity: .6;
    --ql-bg-hover-opacity: .8;
    --ql-background-color: rgba(var(--primary-rgb),var(--ql-bg-opacity));
    --ql-background-hover: rgba(var(--primary-rgb),var(--ql-bg-hover-opacity));
    --ql-font-family: var(--title-font-family);
    --ql-title-color: var(--default-white);
    --ql-title-hover: var(--secondary-color);
    --ql-mobile-bg-color: rgba(var(--primary-rgb),.5);
    --ql-mobile-bg-hover: rgba(var(--primary-rgb),.7);
    --ql-mobile-title-color: var(--default-white);
    --ql-box-shadow: var(--default-box-shadow);
    --ql-font-size-desktop: 2vw;
    --ql-font-size-mobile: 1.2rem;
    
    --ph-title-color: var(--primary-color);
    --ph-title-hover: var(--secondary-color);
    --ph-title-font: var(--title-font-family);
    --ph-text-font: var(--body-font-family);
    --ph-content-effect-bg-1: var(--default-white);
    --ph-content-effect-bg-2: rgba(var(--primary-rgb),.1);
    --ph-box-shadow: var(--default-box-shadow);
    --ph-read-more-color: var(--primary-color);
    --ph-read-more-background: var(--transparent);
    --ph-border-bottom: 4px solid var(--secondary-color);
    --ph-background-hover: rgba(var(--primary-rgb),.2);
    --ph-pagination-background: var(--primary-color);
    --ph-pagination-background-hover: var(--secondary-color);
    --ph-title-font-size-desktop: 1.7vw;
    --ph-text-font-size-desktop: 1.2rem;
    --ph-title-font-size-mobile: 6vw;
    --ph-text-font-size-mobile: 1.1rem;

    --rok-mini-badge: var(--primary-color);
    --rok-mini-numbers: var(--default-white);
    --rok-mini-text: var(--primary-color);
    --rok-mini-timeline: var(--primary-color);
}

.parish-2 {
    --primary-color: #ae353e;
    --secondary-color: #aaabaf;

    --primary-rgb: 174,53,62;
    --secondary-rgb: 170,171,175;

    --default-white: #ffffff;
    --default-black: #000000;

    --title-font-family: 'Caudex', serif;
    --body-font-family: 'Lato', sans-serif;

    --heading-color: var(--primary-color);
    --heading-font-family: var(--title-font-family);

    --title-border-bottom: 1px solid var(--secondary-color);

    --home-title-font: var(--title-font-family);

    --transparent: rgba(255,255,255,0);

    --default-box-shadow: 0px 0px 10px rgba(0,0,0,.5);

    --swiper-box-shadow: var(--default-box-shadow);

    --ql-bg-opacity: .6;
    --ql-bg-hover-opacity: .8;
    --ql-background-color: rgba(var(--primary-rgb),var(--ql-bg-opacity));
    --ql-background-hover: rgba(var(--primary-rgb),var(--ql-bg-hover-opacity));
    --ql-font-family: var(--title-font-family);
    --ql-title-color: var(--default-white);
    --ql-title-hover: var(--secondary-color);
    --ql-mobile-bg-color: rgba(var(--primary-rgb),.5);
    --ql-mobile-bg-hover: rgba(var(--primary-rgb),.7);
    --ql-mobile-title-color: var(--default-white);
    --ql-box-shadow: var(--default-box-shadow);
    --ql-font-size-desktop: 2vw;
    --ql-font-size-mobile: 1.2rem;
    
    --ph-title-color: var(--primary-color);
    --ph-title-hover: var(--secondary-color);
    --ph-title-font: var(--title-font-family);
    --ph-text-font: var(--body-font-family);
    --ph-content-effect-bg-1: var(--default-white);
    --ph-content-effect-bg-2: rgba(var(--primary-rgb),.1);
    --ph-box-shadow: var(--default-box-shadow);
    --ph-read-more-color: var(--primary-color);
    --ph-read-more-background: var(--transparent);
    --ph-border-bottom: 4px solid var(--secondary-color);
    --ph-background-hover: rgba(var(--primary-rgb),.2);
    --ph-pagination-background: var(--primary-color);
    --ph-pagination-background-hover: var(--secondary-color);
    --ph-title-font-size-desktop: 1.7vw;
    --ph-text-font-size-desktop: 1.2rem;
    --ph-title-font-size-mobile: 6vw;
    --ph-text-font-size-mobile: 1.1rem;

    --rok-mini-badge: var(--primary-color);
    --rok-mini-numbers: var(--default-white);
    --rok-mini-text: var(--primary-color);
    --rok-mini-timeline: var(--primary-color);
}

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;}
.page-header h1 {text-transform: none; font-size: 3rem;}
.page-header h2 {padding-bottom: 0.25rem; line-height: 2.5rem;}
h1 {color: var(--heading-color); font-family: var(--heading-font-family); font-size: var(--h1-font-size); font-weight: var(--h1-font-weight); font-variant-caps: var(--h1-font-variant-caps); text-transform: var(--h1-text-transform); line-height: var(--h1-line-height); margin: var(--h1-margin); padding: var(--h1-padding); border-bottom: var(--none); border-radius: var(--null); background: var(--h1-background);}
h2 {color: var(--heading-color); font-family: var(--heading-font-family); font-size: var(--h2-font-size); font-weight: var(--h2-font-weight); font-variant-caps: var(--h2-font-variant-caps); text-transform: var(--h2-text-transform); line-height: var(--h2-line-height); margin: var(--h2-margin); padding: var(--h2-padding); border-bottom: var(--none); border-radius: var(--null); background: var(--h2-background);}
h3 {color: var(--heading-color); font-family: var(--heading-font-family); font-size: var(--h3-font-size); font-weight: var(--h3-font-weight); font-variant-caps: var(--h3-font-variant-caps); text-transform: var(--h3-text-transform); line-height: var(--h3-line-height); margin: var(--h3-margin); padding: var(--h3-padding); border-bottom: var(--title-border-bottom); border-radius: var(--null); background: var(--h3-background);}
h4 {color: var(--heading-color); font-family: var(--body-font-family); font-size: var(--h4-font-size); font-weight: var(--h4-font-weight); font-variant-caps: var(--h4-font-variant-caps); text-transform: var(--h4-text-transform); line-height: var(--h4-line-height); margin: var(--h4-margin); padding: var(--h4-padding); border-bottom: var(--none); border-radius: var(--h4-border-radius); background: var(--h4-background);}
h5 {color: var(--default-white); font-family: var(--heading-font-family); font-size: var(--h5-font-size); font-weight: var(--h5-font-weight); font-variant-caps: var(--h5-font-variant-caps); text-transform: var(--h5-text-transform); line-height: var(--h5-line-height); margin: var(--h5-margin); padding: var(--h5-padding); border-bottom: var(--none); border-radius: .2rem; background: var(--primary-color);}
h6 {color: var(--secondary-color); font-family: var(--body-font-family); font-size: var(--h6-font-size); font-weight: var(--h6-font-weight); font-variant-caps: var(--h6-font-variant-caps); text-transform: var(--h6-text-transform); line-height: var(--h6-line-height); margin: var(--h6-margin); padding: var(--h6-padding); border-bottom: var(--none); border-radius: var(--null); background: var(--h6-background);}
a {color: var(--primary-color);} 
a:hover {color: var(--default-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: var(--primary-color);
    font-family: 'Lato', sans-serif;
} 

@media only screen and (min-width: 50.99rem) {
.item-page .pull-right.item-image img {max-width: 50%;}
}

/*************** HOMELAYOUT ***************/ 
.homelayout .g-title {font-family: var(--home-title-font);}

/*************** OFFCANVAS ****************/
.g-offcanvas-toggle {color: var(--primary-color);} 
.g-offcanvas-toggle .fa-fw {text-shadow: none;}

/*************** TOP **********************/ 
/*************** NAVIGATION ***************/
.g-main-nav .g-toplevel>li.active>.g-menu-item-container {border-bottom: none;}
#g-navigation .g-logo img {height: auto; width: 50%!important;}
#g-navigation .g-logo {margin: .5vw 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;}

@media only screen and (max-width: 50.99rem) {
    #g-navigation .g-logo {margin: 3vw 0; max-width: 100%;}
    #g-navigation .g-logo img {width: 66%!important;}
}

/*************** SLIDESHOW ****************/ 
.r-overlay .g-content-array {margin: 0; height: 100%;}
.r-overlay > .g-content.g-particle {height: 100%;}
.r-overlay .g-content-array > .g-grid {height: 100%;}
.r-overlay .g-content-array > .g-grid > .g-block {height: 100%;}
.r-overlay .g-content-array > .g-grid > .g-block > .g-content {height: 100%;}
.r-overlay .g-array-item-text {margin: 0; padding: 2vw;}
.r-overlay :is(h1,h2,h3,h4,h5,h6,p) {color: var(--default-white); text-shadow: 1px 1px var(--default-black); letter-spacing: 1px;}
.r-overlay :is(h1,h2,h3,h4,h5,h6) {font-size: 3vw;}
.r-overlay p {font-size: 1.4vw;}
.r-overlay a.button {background: none; border: 1px solid var(--default-white); border-radius: 0; width: 100%; font-size: 1.5vw; padding: 1vw 0;}
.r-overlay a.button:hover {background: var(--primary-color);}
.swiper-overlay-text > .g-container {position: relative; height: 42vw!important; width: 100%;}
.swiper-overlay-text > .g-container > .g-grid:nth-child(1) {position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%;}
.swiper-overlay-text > .g-container > .g-grid:nth-child(2) {
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    height: 100%; 
    width: 30%; 
    z-index: 20;
}
.parish-home.parish-1 .swiper-overlay-text > .g-container > .g-grid:nth-child(2) {
    background: linear-gradient(to right, rgba(var(--secondary-rgb),.9), rgba(var(--secondary-rgb),.5) 85%, rgba(var(--secondary-rgb),0) 100%);
}
.parish-home.parish-2 .swiper-overlay-text > .g-container > .g-grid:nth-child(2) {
    background: linear-gradient(to right, rgba(0,0,0,.4) 0%, rgba(0,0,0,.1) 85%, rgba(var(--secondary-rgb),0) 100%);
}

@media only screen and (max-width: 50.99rem) {
    .swiper-overlay-text > .g-container {position: initial; height: auto!important;}
    .swiper-overlay-text > .g-container > .g-grid:nth-child(1) {position: initial;}
    .swiper-overlay-text > .g-container > .g-grid:nth-child(2) {position: initial; width: 100%; background: var(--secondary-color)!important;}

    .r-overlay :is(h1,h2,h3,h4,h5,h6) {font-size: 2rem;}
    .r-overlay p {font-size: 1.2rem;}
    .r-overlay a.button {font-size: 1.2rem; padding: 3vw 0;}
}

/*************** HEADER *******************/
/*************** ABOVE ********************/
/*************** SHOWCASE *****************/
/*************** UTILITY ******************/
/*************** FEATURE ******************/
/*************** MAIN *********************/
.parish-home.parish-1.homelayout #g-container-main {background: url('/images/template/watermark-ic.jpg') 100% 100% no-repeat, #f4f1ec;}
.parish-home.parish-2.homelayout #g-container-main {background: url('/images/template/watermark-sw.jpg') 0% 100% no-repeat, #eeeeef;}
.homelayout #g-container-main {padding: 0 5%;}
.homelayout #g-aside {background: transparent;}

/*************** EXPANDED *****************/ 
/*************** EXTENSION ****************/
/*************** BOTTOM *******************/
/*************** FOOTER *******************/
#g-footer .g-content-array {margin: 0;}
#g-footer a {color: #ffffff;} 

/*************** COPYRIGHT ****************/ 
/*************** MODULES ******************/
.moduletable .nav.menu, .moduletable .unstyled {background: var(--primary-color);} 
.moduletable .nav.menu li.current.active a, .moduletable .nav.menu li a:hover {    
    color: var(--primary-color); 
    background: var(--secondary-color);
} 
/*************** SECTIONS *****************/
/*************** MOBILE *******************/ 
/*************** ADS **********************/