@import url('//fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Rufina:wght@400;700&display=swap');

/************ TEMPLATE  ************
Rotator Size: 1600x669 (super wide, 2.39:1)

/************ FONTS  ************
Serif: Rufina
Sans Serif: Open Sans
font-family: 'Open Sans', sans-serif;
font-family: 'Rufina', serif;

/************ COLORS  ************
Blue: #2d3c7f; rgba(45,60,127,1)
Red: #924249; rgba(146,66,73,1)
Light Cream: faf6f1; rgba(250,246,241,1)

*Red things: Menu bar, 'Weekend', 'Weekday', bulletin links, news article titles and read mores, side ql

/************ NOTES ************
logo/ql background: rgba(45,60,127,.8)
Flocknote bg overlay: rgba(250,246,241,.8)
Subtle Drop/box shadow things: menu, both ads, buttons (not rotator ones), side ql, news images, mass video imbed, flocknote logo and signup

School Layout:
	- Mimicking Parish side 'Welcome/Mass Times' section: Letter from Principal, School office hours & contact info, then important docs with link/button to 'More Documents'
	- left column - ads then keep the calendar 
	- at bottom - facebook and Instagram like StWalter-Ros (elf-sight)
	- School QL: SchoolSpeak, Athletics, Guardian Angel Fund, Scrip, Admissions, Church 

Welcome
The Church of St. Mary, is a Roman Catholic Church whose Mission is that of Jesus Christ: The conversion of sinners and the salvation of souls. This is accomplished by preaching and living the Gospel, celebrating Sacraments and evangelizing the world around us.

Weekend Mass
Saturday - 5:00pm
Sunday - 8:00am, 9:30am (Español), 11:00am

Weekday Mass
Mon-Fri - 8:15am
Saturday - 8:00am

Confession
Saturday - after 8:00am Mass, 3:15-4:30pm
Anytime by appointment
************/

body {color: #333; font-family: 'Open Sans', 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;}
h1 {color: #2d3c7f; font-size: 3.5rem; font-weight: bold; font-family: 'Rufina', serif;}
h2 {font-variant-caps: small-caps; color: #2d3c7f; font-size: 2.5rem; font-family: 'Rufina', serif; font-weight: bold;}
.page-header h2 { padding-bottom: 0.25rem; line-height: 2.5rem;}
h3 {color: #2d3c7f; font-size: 2rem; border-bottom: 1px solid #2d3c7f; line-height: 1.3; margin: 0 0 10px 0;}
h3.opensans {font-family: 'Open Sans', sans-serif;}
h4 {color: #2d3c7f; font-size: 2rem; font-family: 'Rufina', serif} 
h4.opensans {font-family: 'Open Sans', sans-serif;}
h5 {background: #924249; font-size: 1.75rem; color: white; border-radius: .2rem; padding: .5rem; font-family: 'Open Sans', sans-serif;} 
h6 {color: #924249; font-size: 1.5rem; text-transform: uppercase; font-weight: bold;}
h6.mixed {text-transform: none;}
a {color: #924249;} 
a:hover {color: black;}

@media only screen and (min-width: 50.99rem) 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: 50.99rem) { 
    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: #2d3c7f;  
    font-family: 'Open Sans', sans-serif;
} 


/*************** HOMELAYOUT ***************/ 

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

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

/*************** NAVIGATION ***************/
@media only screen and (min-width: 51rem) {
    .homelayout #g-navigation .size-75 {flex: 1; width: 100%;}
}

@media only screen and (max-width: 50.99rem) {
    .overlayrotatorarea .g-container .g-grid, .overlayrotatorarea > .g-grid {left: 0!important;}   
    .homelayout #g-navigation {background: #924249;}
}
#g-navigation:not(.homelayout #g-navigation) {background: #924249;}


/**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;
}

.g-toplevel > li > .g-menu-item-container {height: 100%; display: flex; align-items: center; justify-content: center;}
.g-main-nav .g-toplevel>li.active>.g-menu-item-container {border-bottom: none;}

/*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: 'Open Sans', sans-serif;}

@media only screen and (max-width: 50.99rem) {
    #g-navigation .g-logo img {margin: 1rem 0;}
    .g-toplevel > li > .g-menu-item-container {justify-content: flex-start;}
}


/*************** SLIDESHOW ****************/ 

.overlayrotatorarea .g-container .g-grid, .overlayrotatorarea > .g-grid {left: 70%;}

.verticalcolumnoverlay div, .verticalcolumnoverlay #quicklogo:hover {background: rgba(45,60,127,.8);}
.verticalcolumnoverlay div:hover:not(.verticalcolumnoverlay div:last-child) {background: rgba(45,60,127,.95);}
.verticalcolumnoverlay div a {color: white; font-size: 1.5rem;}

#quicklogo img {margin: 2vw auto; height: 7vw; width: auto;}

@media only screen and (max-width: 50.99rem) {
    .verticalcolumnoverlay {padding: 0;}
	.verticalcolumnoverlay div {background: rgba(45,60,127,1);}
	.verticalcolumnoverlay div:hover {background: rgba(45,60,127,.75);}

    .verticalcolumnoverlay #quicklogo {display: none;}
    .verticalcolumnoverlay div:last-child {display: none;}
}

/*************** HEADER *******************/ 
#g-header {padding: 0 5%;}
#g-header .g-content {padding: 1.5rem 0.5rem;}
.w-box {display: flex; flex-direction: row;}
.w-box div:not(.w-box div:last-child) {margin-right: 1vw;}
.w-box div:nth-child(1) {flex: 2;}
.w-box div:nth-child(2) {flex: 1;}
.w-box div:nth-child(3) {flex: 1;}

#g-header h6 {margin-bottom: 0.15rem;}

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

/*************** ABOVE ********************/ 
/*************** SHOWCASE *****************/ 
/*************** UTILITY ******************/ 
/*************** FEATURE ******************/ 
.homelayout #g-feature {padding: 0 5%;}
        /*Side Quicklinks*/
.side-links .sprocket-strips-container {display: flex; flex-direction: column; margin: 0; align-items: center; justify-content: center;}
.side-links .sprocket-strips-container li {width: 98%; height: 5vw;}
.side-links .sprocket-strips-content {display: flex; justify-content: center; align-items: center; position: relative; height: 100%; width: 100%;}
.side-links .sprocket-strips-item {height: 100%; width: 100%;}
.side-links h4.sprocket-strips-title {margin: 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%;}
.side-links h4.sprocket-strips-title a {
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 100%; 
    width: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: #ffffff;
    background: rgba(146,66,73,1);
}
.side-links h4.sprocket-strips-title a:hover {
    background: rgba(146,66,73,.7);
}
.side-links a.readon {display: none;}

        /*Recent News*/
.sprocket-lists-portrait-pagination li {background: #2d3c7f;}
.zoompics .sprocket-lists-portrait-arrows .arrow {color: #2d3c7f;}
h4.sprocket-lists-portrait-title a {color: #924249;}
.sprocket-lists-portrait-container li {border-bottom: 1px solid #2d3c7f;}

.zoompics .active .portrait-image img, .zoompics.noncollapse .portrait-image img {
    height: 12vw;
    width: 12vw;
	margin: 0 10px 10px 0;}

@media only screen and (min-width: 51rem) {
    .side-links h4.sprocket-strips-title {font-size: 1.7vw;}
}

@media only screen and (max-width: 50.99rem) {
    .side-links .sprocket-strips-container li {height: 4rem;}
    .side-links h4.sprocket-strips-title {padding: 1rem 0;}
}
 
/*************** EXPANDED *****************/ 
.homelayout #g-expanded .g-block {display: flex; align-items: center; justify-content: center;}
#g-expanded {padding: 1% 5%;}

/*************** EXTENSION ****************/
/*************** BOTTOM *******************/
.homelayout #g-bottom button {background: #2d3c7f;}
.homelayout #g-bottom {background: url('/images/template/paralax.jpg') 0% 0% no-repeat; background-size: cover; background-attachment: fixed;}
#g-bottom:not(.homelayout #g-bottom) {background: #2d3c7f;}
.homelayout #g-bottom .g-container { width: 100%; background: rgba(250,246,241,.8); padding: 1rem 2%;}
.homelayout #g-bottom .g-container { padding: 2rem 8%;}

.homelayout #g-bottom a {color: #2d3c7f;}

/*************** FOOTER *******************/
#g-footer a {color: #ffffff;} 
#g-footer a:hover {color: #924249;} 
#g-footer {font-family: 'Open Sans', sans-serif;}

.footer-box {display: flex; flex-direction: row; justify-content: center; align-items: center;}
.footer-box > div {display: flex; flex-direction: column;}
.footer-box :is(div:nth-child(1), div:nth-child(2), div:nth-child(3), div:nth-child(5)) {flex: 1;}
.footer-box div:nth-child(4) {flex: 2;}
.footer-box img {width: 90%; height: auto;}

.social-footer {display: flex; flex-direction: row; justify-content: flex-start; width: fit-content; margin: 0 0 1.3rem 0;}
.social-footer div {margin-right: 1rem;}

@media only screen and (max-width: 50.99rem) {
    .footer-box {flex-direction: column;}
    .footer-box :is(div:nth-child(2), div:nth-child(3), div:nth-child(5)) {display: none;}
}

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

#g-copyright {font-family: 'Open Sans', sans-serif;}
/*************** MODULES ******************/
.moduletable .nav.menu, .moduletable .unstyled {background: #2d3c7f;} 
.moduletable .nav.menu li.current.active a, .moduletable .nav.menu li a:hover {    
    color: #ffffff; 
    background: #924249; 
} 


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



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


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

/* buleting widget - 4/30 */

.homelayout .bulletin-picture-list .bulletin-variables {
    --bulletin-container-padding: 1rem 2rem 0 2rem;
}

.homelayout #g-feature > div > div.g-block.size-25 > div > div:nth-child(2) > div > h3 {
    text-align: center;
}