@import url('//fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/************ TEMPLATE  ************
Rotator Size: 1000x563 (wide, 16:9)

/************ FONTS  ************
Serif: Cinzel
Sans Serif: Lato

/************ COLORS  ************
Dark Blue: #0A1655; rgba(10,22,85,1)
Light Blue: #6C83BA; rgba(108,131,186,1)

/************ NOTES ************
*Icon quicklinks and menu social media icons are all fa icons
*Mass Times background image overlay is light blue at 80% - rgba(108,131,186,.8)
*Quicklinks are dark blue at 70% - rgba(10,22,85,.7)
*Drop shadow on news images
*15 Mintues with Fr. Greg: background image overlay is light blue at 85% - rgba(108,131,186,.85). The background image can be paralax or not depending on what you think looks good. I also thought that the darker version of the picture looked better (paralax2), but it didn't make it into the final mockup. I'm fairly certain that was something not specified by the client, and can be changed depending on what you think looks better
*Our Mission title uses letter spacing
************/

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 {color: #0A1655; font-size: 3.5rem; font-weight: bold; font-family: 'Cinzel', serif;}
h2, .page-header h2 {font-variant-caps: small-caps; color: #6C83BA; font-size: 2.2rem; font-family: 'Cinzel', serif;  font-weight: bold;}
h3 {color: #0A1655; font-size: 1.8rem; border-bottom: 1px solid #6C83BA; margin: 0 0 10px 0; font-family: 'Cinzel', serif;}
h4 {color: #6C83BA; font-size: 1.8rem; font-family: 'Cinzel', serif;}
h5 {background: #0A1655; font-size: 1.75rem;color: white; border-radius: .2rem; padding: .5rem;}
h6 {color: #6C83BA; font-size: 1.4rem; text-transform: uppercase; font-weight: bold;}
a {color: #6C83BA;}
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: #0A1655;
	border-radius: 2px;
}

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

@media only screen and (max-width: 767px) {
	h3.g-title {font-size: 1.9rem;}
}

/*************** OFFCANVAS ****************/
/*************** TOP **********************/
		/*LOGO*/
#g-top .g-logo img {margin-bottom: -40px; margin-left: 1vw;}

        /*TOP ICONS*/
#g-top .toplinks {display: flex; align-items: center; justify-content: flex-end;}
#g-top .align-y {display: flex; align-items: center;}
#g-top .align-right.icons {display: flex; justify-content: flex-end;}
#g-top .g-iconmenu {display: flex; width: 100%;  margin: 0 0 0 auto;}
#g-top .g-iconmenu > a  {color: #6C83BA;  flex:1; border-left: 2px #6C83BA solid; padding: 2vw;}
#g-top .g-iconmenu > a:hover {color: rgba(108,131,186,.25);}
#g-top .g-iconmenu > a:first-child {border-left: none;}
#g-top .g-iconmenu span {display: block; text-align: center;}
#g-top .g-iconmenu .g-iconmenu-text {line-height: 1.1; font-size: 1rem; font-weight: bold;}
#g-top .g-iconmenu .g-iconmenu-icon {font-size: 1.3rem; padding-bottom: 10px;}
#g-top .g-iconmenu img {height: 3vw; padding-bottom: 20px;}
#g-top .g-iconmenu img:hover {opacity: 0.25;}

@media only screen and (max-width: 767px) {
	#g-top .g-logo img {margin-top: 5vw; margin-bottom: 5vw; margin-left: 0;}

	#g-top .toplinks {display: initial;}
	#g-top .icons .g-content.g-particle {margin: 0px; padding-top: 1rem;}
	#g-top .align-y {display: flex; align-items: center; justify-content: center;}
	#g-top .align-right.icons {justify-content: center;}
	#g-top .g-iconmenu {width: 100%;}
	#g-top .g-iconmenu img {height: 10vw;}
	#g-top .g-iconmenu .g-iconmenu-text {font-size: 1rem;}

	#g-top:not(.homelayout #g-top) {border-bottom: 2px solid #6C83BA;}
}

/*************** NAVIGATION ***************/
.g-social a {margin-right: 5px;}

#g-navigation {
	background: #0A1655;
}

/*************** SLIDESHOW ****************/
/*************** HEADER *******************/
/*************** ABOVE ********************/
/*************** SHOWCASE *****************/
.ffshowcase {margin-left: 1%!important; margin-right: 1%!important;}
.layout-showcase {margin: 0;}
.layout-showcase .sprocket-features-content, .layout-showcase .sprocket-features-img-container {padding: 0;}
.ffcontentback .sprocket-features-content {background: url('/images/stories/template/masstimes.jpg'); position: relative; background-size: cover; object-fit: cover; object-position: center;}
.ffimgleft .sprocket-features-desc {position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(108,131,186,.8); margin-top: 0;}
.layout-showcase .sprocket-features-arrows .next {right: 10px;}
.layout-showcase .sprocket-features-arrows .prev {left: 10px;}
.sprocket-features-desc :is(h1,h2,h3,h4,h5,h6) {color: #ffffff; border-bottom: none; margin-bottom: 0.125rem; font-family: 'Cinzel', serif; font-size: 2.0vw; line-height: 1;}
.sprocket-features-desc p {color: #ffffff; font-size: 1.1vw; margin-bottom: 0.5rem;}
.ffimgleft .sprocket-features-desc {padding: 2vw; overflow: scroll;}

@media only screen and (max-width: 767px) {
	.ffshowcase {margin: 0!important;}
	.ffcontentback .sprocket-features-content {height: 72vw; margin-left: 0; max-height: 80vw!important; margin-bottom: 2vw;}
	.sprocket-features-desc :is(h1,h2,h3,h4,h5,h6) {font-size: 5vw; margin-bottom: 0.25rem;}
	.sprocket-features-desc p {font-size: .9rem;}
}


/*************** UTILITY ******************/
.qloverlaybackpic .sprocket-strips-content {background: rgba(10,22,85,.7);}
.qloverlaybackpic .sprocket-strips-content:hover {background: rgba(10,22,85,.9);}

@media only screen and (max-width: 767px) {
	.qloverlaybackpic .sprocket-strips-content, .qloverlaybackpic .sprocket-strips-content:hover {background: none;}
	.qloverlaybackpic h4.sprocket-strips-title a {justify-content: left;}
	.qloverlaybackpic li {background: rgba(10,22,85,.7);}
    .qloverlaybackpic li:hover {background: black;}
	.heightvw13 .sprocket-strips-item, 
	.heightvw13 .sprocket-strips-s-item img, 
	.heightvw13 .sprocket-strips-image-overlay img {height: 25vw;}
	.sprocket-strips-container > li {margin: 0;}
}

/*************** FEATURE ******************/
		/*Mission*/
.homelayout .g-mission {margin: 2vw 10%;}
.homelayout .g-mission h3.g-title {border-bottom: none; font-family: 'Cinzel', serif; font-size: 2.4rem; letter-spacing: 2px; line-height: 1.2;}

        /*Headlines*/
.homelayout h4.sprocket-strips-s-title {font-size: 1.2rem;}
.homelayout .sprocket-strips-s-container {padding-top: 2vw;}
.homelayout .sprocket-strips-s-item img {height: 15vw; width: 25vw; box-shadow: 0px 0px 10px rgba(0,0,0,0.3); border-bottom: 4px solid #0A1655;}
.homelayout #g-feature .readon {display: none;}

.homelayout .sprocket-strips-s-item {position: relative; transition: all .3s ease-in-out;}
.homelayout .sprocket-strips-s-item:hover {transform: scale(1.1);}
.homelayout .sprocket-strips-s-content {margin: 0 0 50px 0;}
.homelayout .sprocket-strips-s-content h4.sprocket-strips-s-title a {position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding-top: 15vw;}


@media only screen and (max-width:767px){
	.homelayout #g-feature .sprocket-strips-s-item {
		display: flex; flex-direction: column;
	}

	.homelayout #g-feature .sprocket-strips-s-item img{
		order: 1;
		width: 100vw;
	}

	.homelayout #g-feature .sprocket-strips-s-content{
		order: 2;
	}

	.sprocket-strips-s-container li {padding-bottom: 0;}
	.homelayout .sprocket-strips-s-content h4.sprocket-strips-s-title a {padding-top: 42vw;}
}

/*************** EXPANDED *****************/
.homelayout #g-expanded {background: url('/images/template/paralax2.jpg') 100% 100% no-repeat; background-size: cover;}
.homelayout #g-expanded .g-grid {background: rgba(108,131,186,.85); padding: 1vw 10%!important;}
.homelayout #g-expanded h3.g-title {color: #ffffff; font-family: 'Cinzel', serif; border-bottom: 1px solid #ffffff; font-weight: 400;}
.homelayout #g-expanded p {color: #ffffff;}
.homelayout #g-expanded a {color: #ffffff;}
.homelayout #g-expanded a:hover {color: black;}

@media only screen and (max-width: 767px) {
	.homelayout #g-expanded h3.g-title {font-size: 1.7rem; text-align: center;}
}

/*************** EXTENSION ****************/
#g-extension {padding: 0 8%;}

/*************** BOTTOM *******************/
/*************** FOOTER *******************/
#g-footer .g-content {margin: 0; padding: 0;}
#g-footer :is(h1,h2,h3,h4,h5,h6,p) {color: #ffffff;}

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

/*************** MODULES ******************/
.moduletable .nav.menu, .moduletable .unstyled {background: #0A1655;}
.moduletable .nav.menu li.current.active a, .moduletable .nav.menu li a:hover {
    color: #ffffff;
    background: #6C83BA;
}

/*************** SECTIONS *****************/
#g-bottom a {color: #ffffff;}
#g-footer a {color: #ffffff;}

/*************** MOBILE *******************/
.g-offcanvas-toggle {color: #0A1655;}

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