@import url('//fonts.googleapis.com/css2?family=Bellefair&family=Lato:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
/************ TEMPLATE  ************
Rotator Size: 1400x586 (super wide, 2.39:1)

/************ FONTS  ************
Serif Headings: Bellefair 
Sans Serif Headings: Montserrat 
Sans Serif Body Font: Lato

/************ COLORS  ************
Main/text colors:
Blue: #83b8d0; rgba(131,184,208,1)
Sandy Brown: #d2c7a8; rgba(210,199,168,1)

Side/accent/potential other colors:
Goal Post Brown (lighter brown): #eee8d9; rgba(238,232,217,1)
Dark Brown: #7c7465; rgba(124,116,101,1)
Light Grey: #f1f2f2; rgba(241,242,242,1)

/************ NOTES ************
*I used Montserrat anywhere that wasn't a Bellefair heading and also wasn't body font text. Ed seemed to like that font, even tho he didn't choose it for the logo, so I took full liberty in slapping it everywhere I could in one of those revisions. You obviously don't have to do any of this
*Mass Times in the header appears on all pages 
************/

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

h1, .page-header h1 {color: #5AAED3; font-size: 3.5rem; font-weight: normal; font-family: 'Bellefair', serif; text-transform: none;}
h2, .page-header h2 {font-variant-caps: small-caps; color: #82b8d0; font-size: 2.2rem; font-family: 'Bellefair', serif; font-weight: normal;}
h3 {color: #82b8d0; font-size: 1.8rem; border-bottom: 1px solid #82b8d0; line-height: 1.3; margin: 0 0 10px 0; font-family: 'Bellefair', serif;}
h4 {color: #5AAED3; font-size: 1.8rem;}
h5 {background: #eee8d8; font-size: 1.75rem; color: #5AAED3; border-radius: .2rem; padding: .5rem;}
h6 {color: #450e09; font-size: 1.4rem; text-transform: uppercase; font-weight: bold;}
a {color: #2087b5;}
a:hover {color: black;}

#casasponsorpage h3{font-family: 'Lato', sans-serif;}

@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: #82b8d0;
}

a.blockbutton {
	background: #82b8d0;
	font-family: 'Lato', sans-serif; 
	color: white; 
	font-size: 1.1rem;
	text-transform: none;
	font-weight: normal;
	padding: .7rem 1.2rem; 
	border-radius: 0rem; 
	display: block;
	font-weight: 500;
	line-height: 1.1rem;
	border: 1px solid #82b8d0;
	transition: all .2s ease-in;
	text-align: center;
}

a.blockbutton:hover {background: transparent; color: #82b8d0;}

/*************** BACKGROUND ***************************************************
/*SINGLE 100% OPACITY* #g-page-surround {
	background: url(/images/template/mary-stainglass.jpeg)!important; 
	background-position: center top!important; 
	background-size: 2000px auto!important; 
	background-repeat: no-repeat!important; 
	background-attachment: fixed!important;
}

/*SINGLE 80% OPACITY* #g-page-surround {
	background: url(/images/template/mary-stainglass-80.jpg)!important; 
	background-position: center top!important; 
	background-size: 2000px auto!important; 
	background-repeat: no-repeat!important; 
	background-attachment: fixed!important;
}

/*SINGLE 50% OPACITY* #g-page-surround {
	background: url(/images/template/mary-stainglass-50.jpg)!important; 
	background-position: center top!important; 
	background-size: 2000px auto!important;  
	background-repeat: no-repeat!important; 
	background-attachment: fixed!important;
}

/*SINGLE 20% OPACITY*/  


#g-slideshow, .alert { background: #ffe8cf; }
.alert h1, .alert h2, .alert h3, .alert h4, .alert h5, .alert h6, .alert p {
    margin-left: 20px;
    color: #ff5400;
}
.alert a.readon { color: white !important; }

body { background: none; 
	padding: 0 10vw; 
	background: url(/content/images/side.png) 100% 0 repeat-y; 
	background-size: 5vw; 
	
	/* box-shadow: 0 0 10px rgba(0,0,0,0.3);  */
}
html {
	/* background: url(/images/template/1.jpg) no-repeat center center fixed;  
	background-size: cover; */
	background: #e2d8c0 url(/content/images/side2.png) 0 0 repeat-y; 
	background-size: 5vw; 
}
@media only screen and (max-width: 767px) {
	html {  padding: 0 3px; background-size: 3vw;  }
	body { padding: 0 3vw; background-size: 3vw; }
}

/*
	background: url(/images/template/mary-stainglass-20.jpg) no-repeat; 
	background-position: center top; 
	background-size: cover; 
	background-attachment: fixed;
*/

/*DOUBLEWIDE 80% OPACITY* #g-page-surround {
	background: url(/images/template/mary-stainglass2-80.jpg)!important; 
	background-position: center top!important; 
	background-size: 2000px auto!important; 
	background-repeat: no-repeat!important; 
	background-attachment: fixed!important;
}

/*DOUBLEWIDE 50% OPACITY* #g-page-surround {
	background: url(/images/template/mary-stainglass2-50.jpg)!important; 
	background-position: center top!important; 
	background-size: 2000px auto!important; 
	background-repeat: no-repeat!important; 
	background-attachment: fixed!important;
}

/*DOUBLEWIDE 20% OPACITY* #g-page-surround {
	background: url(/images/template/mary-stainglass2-20.jpg)!important; 
	background-position: center top!important; 
	background-size: 2000px auto!important; 
	background-repeat: no-repeat!important; 
	background-attachment: fixed!important;
}
*******************************************************************************/
/*************** OFFCANVAS **************/
#g-offcanvas .g-social a {margin-right: 10px;}

/*************** TOP ********************/
#g-top h2 {font-size: 1.75rem; margin-bottom: 0; color: #7c7465;}
#g-top a { color: #2087c6; }
#g-top a:hover { color: #82b8d0; }
#g-top .g-content {font-size: 0.5rem; margin: 0; padding: 0;}
#g-top .g-logo img {margin: 2vw 1vw 1vw 1vw;}
#g-top .masstimes {margin: 2vw 1vw 0vw 0vw;}

#g-navigation.sticky {
    position: fixed;
    top: 0;
    right: 10vw;
    left: 10vw;
    z-index: 10;
}

@media only screen and (max-width: 767px) {
	.logo-top {border-bottom: 1px solid #83b8d0;}
	#g-top .masstimes {padding: 0 10%;}
	#g-top .masstimes:not(.homelayout #g-top .masstimes) {display: none;}
	#g-page-surround {background: rgba(230, 231, 232, 0.8)!important;}
	.g-logo img {width: 70%; padding: 2rem 0;}
	.g-logo {margin: 0px;}
	.g-social {text-align: center !important;}
	.alignmiddle img {display: block; margin: 10px auto;}

}

/*************** NAVIGATION *************/
#g-navigation .g-social a {margin-right: 10px;}
.g-main-nav .g-toplevel > li > .g-menu-item-container, .g-main-nav .g-sublevel > li > .g-menu-item-container {
    font-weight: bold;   
	text-shadow: 1px 1px #7c7465;
}

/*** MAIN CONTAINER *****/
.g-container {
    width: 100% !important;
	padding: 0px; 
    /* padding: 0 5vw; */
}
.page-header h2 { padding-top: 0; margin-top: 0; }




/*************** HERO *******************/
.hero {  background: #83b9cf; }
.hero img {height: 20vw; opacity: .8;}

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

/*************** SHOWCASE ***************/
		/*Rotator*/
.fwrultrawide .layout-slideshow .sprocket-features-img-container img {height: 389px!important;}

@media only screen and (max-width: 767px) {
	.fullwidthrotator.superwiderotator.sidegradient .layout-slideshow .sprocket-features-content {height: 0;}
	.fullwidthrotator.superwiderotator.sidegradient .layout-slideshow .sprocket-features-img-container {padding-bottom: 0;}
	.fullwidthrotator.sidegradient .layout-slideshow .sprocket-features-content {background: rgba(6,46,68,0);}
}

@media only screen and (max-width: 1200px) {
	.fwrultrawide .layout-slideshow .sprocket-features-img-container img {height: 28vw!important;}
}

/*************** FEATURE ****************/
		/*A Letter from Father
.fr-letter {display: flex; flex-direction: row; align-items: center; margin: 2vw 0!important;}
.fr-letter .g-title {order: 1; flex: 1; padding-right: 4vw;}*/
#g-feature {padding: 0 2%;}

.fr-letter /*h3.g-title*/ h2 {font-size: 2.5rem; text-align: center; font-family: 'Bellefair', serif; border-bottom: none;}
.fr-letter .mod_placeherefr-letter {order: 2; flex: 3;}
/*.fr-letter p {margin: 0;}*/
.fr-letter p:last-child {text-align: right;}

table.frtable, .frtable tbody, .frtable tr {width: 100%;}
.frtable td {padding: 10px 10px 5px 10px;}
.frtable td:first-child{width: 30%;}


@media only screen and (max-width: 767px) {
	.fr-letter {flex-direction: column;}
	table.frtable, .frtable tbody, .frtable tr, .frtable td {display: block; width: 100%;}
	.frtable td:first-child{width: 100%;}
}

/*************** EXPANDED ***************/
/*************** EXTENSION **************/
#g-extension h3.g-title {font-size: 2.8rem;}
#g-extension h4.sprocket-lists-portrait-title {color: #82b8d0; font-size: 1.9rem!important;}
#g-extension .sprocket-lists-portrait-container li {border-bottom: 1px solid #82b8d0;}

.quicklinks p {margin: 0 0 .5rem 0;}

/*************** BOTTOM *****************/
/*************** FOOTER *****************/
/*************** COPYRIGHT **************/
/*************** MODULES ****************/
.moduletable .nav.menu, .moduletable .unstyled {background: #82b8d0; text-shadow: 1px 1px #7c7465; font-weight: bold;}
.moduletable .nav.menu li.current.active a, .moduletable .nav.menu li a:hover {
	color: #82b8d0;
	background: #eee8d8;
	text-shadow: 1px 1px #ffffff;
}

/*************** SECTIONS ***************/
#g-footer a {color: #ffffff;}
#g-copyright a:hover {color: black;}
#g-footer, #g-navigation, #g-top {padding: 0;}
#g-extension {padding: 0 2%;}
#g-container-main {margin-left: 0; margin-right: 0;}

/*************** MOBILE *****************/
.g-offcanvas-toggle {color: #83b8d0;}

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

.calendarpage #g-container-main .g-content {padding-right: 0; padding-left: 0;}


/************ REMOVE READMORES on NEWS STORIES  ************/
.sprocket-lists-portrait-container > li .sprocket-lists-portrait-item > a span { color: #2087b5; background: none; padding: 0; }
.sprocket-lists-portrait-container > li .sprocket-lists-portrait-item > a span:hover { background: none; color: black; padding: 0;}
.sprocket-lists-portrait-container > li .sprocket-lists-portrait-item > a {   text-align: left; }

/************ SACRAMENTS *****************/
.sacrament-pages #g-above {background: #E7F1F6;}
.sacrament-pages #g-above td {padding: 0;}