@import url('//fonts.googleapis.com/css2?family=Cardo:wght@400;700&family=Lato:wght@400;700&display=swap');
/************ 
/************ TEMPLATE  ************
Rotator Size: 1600x900 (wide, 16:9)

/************ FONTS  ************
font-family: 'Cardo', serif;
font-family: 'Lato', sans-serif;

/************ COLORS  ************
Blue Grey: #4B5354, rgba(75,83,84,1)
Blue: #3E5586, rgba(62,85,134,1)
Light Grey: #E9EDEF, rgba(233,237,239,1)

/************ NOTES ************
Paralax Backgrounds:
-Quicklinks
-Support St. Gregory's

Overlay colors with reduced opacities:
Rotator - straight up black @ 20% - rgba(0,0,0,.2)
Support Paralax - straight up black @ 40% - rgba(0,0,0,.4)
Quicklinks - Blue @ 80% - rgba(62,85,134,.8)

************/

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: #4B5354; font-size: 3.5rem; font-weight: bold; font-family: 'Roboto Slab';}

h2, .page-header h2 { font-variant-caps: small-caps; color: #3E5586; font-size: 2.5rem; font-family: 'Cardo', serif;  font-weight: bold; border-bottom: 5px #E9EDEF  solid; padding-bottom: 2px;}
h3 { font-family: 'Cardo', serif; color: #4B5354; font-size: 2.2rem;  margin: 0 0 10px 0; }
h4 { font-family: 'Cardo', serif; /*text-transform: uppercase;*/ color: #4B5354; font-size: 2rem;}
h5 {background: #4B5354; font-size: 1.75rem;color: white; border-radius: .2rem; padding: .5rem;}
h6 {color: #3e5586; font-size: 1.4rem; text-transform: uppercase; font-weight: bold; }
a { color: #3E5586; }
a:hover { color: black; }

p.lineheightone {line-height: 1rem;}

h3.g-title { /*text-transform: uppercase;*/ color: #3E5586; font-size: 2.2rem; }
h4.sprocket-strips-s-title {  color: #3E5586; text-transform: none; }
h4.sprocket-strips-s-title a {  color: #3E5586; }

@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: #3E5586;
	text-transform: uppercase; 
	padding-left: 2rem; padding-right: 2rem;
}

.outlinebutton.button { border: 1px white solid; background: none; font-size: 1.6rem; }
.outlinebutton.button:hover { background: #3E5586; }
 
blockquote {
    color: #3E5586;
    padding: 0 0 0 15px;
    margin: 0 0 20px;
    border-left: 0px solid #d5d5d5;
    font: italic;
	font-family: 'Lato', sans-serif;
    line-height: 1.2;
    font-size: 1.1rem;
} 
 

/************ HEADER  ************/
#g-header { }
#g-navigation { padding-bottom: 0;}
#g-showcase { position: relative; }
.overlay img { position: absolute; top: 3vw; left: 3vw;  z-index: 10; width: 60vw;}
#g-showcase .g-content { padding: 0; margin: 0;}
/*.g-main-nav .g-toplevel > li > .g-menu-item-container > .g-menu-item-content { text-transform: uppercase; }*/
/*.g-main-nav .g-toplevel > li > .g-menu-item-container { color: white; }*/
.g-main-nav .g-toplevel > li:hover > .g-menu-item-container, .g-main-nav .g-toplevel > li.active > .g-menu-item-container { color: rgba(255, 255, 255, 0.8); }
.g-main-nav .g-toplevel > li { transition: all .4s ease-in-out; }
.g-main-nav .g-toplevel > li:hover, .g-main-nav .g-toplevel > li.active { background: rgba(0,0,0,.2);  padding-top: 20px; padding-bottom: 20px; }
.g-main-nav .g-toplevel > li, .g-main-nav .g-toplevel > li { padding-top: 20px; padding-bottom: 20px; }
/*.g-main-nav .g-active.g-dropdown { background: #6f6f6f;}*/
.g-main-nav .g-standard > .g-dropdown.g-dropdown-right, .g-main-nav .g-fullwidth > .g-dropdown.g-dropdown-right { left: 0; }
.g-main-nav .g-standard > .g-dropdown, .g-main-nav .g-fullwidth > .g-dropdown { margin: 0; }
.g-dropdown-column .g-menu-item:hover { background: #4b5354;  }
.g-main-nav .g-standard > .g-dropdown.g-dropdown-right, .g-main-nav .g-fullwidth > .g-dropdown.g-dropdown-right { border-radius: 0 0 5px 5px; }

#g-showcase {
	/*background: #3E5586;*/
    min-height: 15vw;
}


@media only screen and (max-width: 767px) {
	.overlay img { left:0; right: 0; margin: auto; width: 85vw; top: 8vw;}
	.g-logo {z-index: 3;}
}




/************ QUICKLINKS  ************/
/*#g-feature { 
	background: url(/images/template/paralax1.jpg) 50% 50% no-repeat; 
	background-size: cover;
}*/
.sprocket-strips-item .sprocket-strips-content { visibility: visible; opacity: 1; }
.qloverlaybackpic .sprocket-strips-content { background: transparent; }
.qloverlaybackpic .sprocket-strips-content:hover { background: none; }
.qlexpandingborder .sprocket-strips-content:hover h4.sprocket-strips-title { border: 1px white solid;}
#g-feature { padding: 0 5%;}
#g-feature .g-container { width: 100%;}
#g-expanded { padding: 0 5%;} 
#g-expanded .g-content { background: white; margin-top: 3vw; margin-bottom: 3vw; }
#g-utility .g-content { background: #E9EDEF; margin-top: 3vw; margin-bottom: 3vw; padding: 2.5rem;  }

/********** SUBPAGES ***************/

.tabstextpicoverlay .sprocket-tabs-inner .sprocket-tabs-text{ background: rgba(62,85,134,0.75);  }
.tabstextpicoverlay .sprocket-tabs-nav li.active .sprocket-tabs-text, .tabstextpicoverlay .sprocket-tabs-nav li:hover .sprocket-tabs-text { background: rgba(62,85,134,1);}
.sprocket-tabs-text { color: white; border: none;} 
.sprocket-tabs-nav li .sprocket-tabs-inner { text-transform: none; }
.sprocket-tabs-panel p { margin-bottom: .5rem; }
.tabstextpicoverlay .sprocket-tabs-nav li {padding: 10px;}
.tabstextpicoverlay .sprocket-tabs-inner .sprocket-tabs-text {position: inherit;}


@media only screen and (max-width: 767px) {
		.qlexpandingborder .sprocket-strips-content:hover h4.sprocket-strips-title { border: none;}
		.sprocket-tabs-text {	font-size: 3.4vw;}
}

/************ MODULES  ************/
.moduletable .nav.menu, .moduletable .unstyled { background: #4B5354; }
.moduletable .nav.menu li.current.active a, .moduletable .nav.menu li a:hover {
	color: white;
	background: #3E5586;
}

/************ SECTIONS  ************/
#g-footer a { color: white; }
body #g-page-surround, body, #g-feature { background: none; }
#g-feature { background: rgb(62,85,134, .8); }
#g-bottom { background: rgba(0,0,0,.4); height: 500px; }
#g-bottom { display: flex; align-items: center; justify-content: center; }
#g-copyright {padding-bottom: 0;}

/************ ROTATOR  ************/
.fwrbigarrows .layout-slideshow .sprocket-features-arrows .arrow { color: rgb(255, 255, 255, .5); }


/************ NEWS  ************/
.homelayout .sprocket-strips-s-content > a { background: none; color: #3E5586; text-transform: uppercase; padding: 0; text-align: right; font-weight: bold; font-size: 1.3rem; }
.homelayout .sprocket-strips-s-content > a:hover { background: none; color: #3E5586;}
.homelayout .sprocket-strips-s-block { margin-bottom: 0px;}
.homelayout .sprocket-strips-s-nav { display: none; }

@media only screen and (max-width: 767px) {
	.homelayout .heightvw18 .sprocket-strips-item, .heightvw18 .sprocket-strips-s-item img, .coverimgarea .sprocket-strips-s-item img {
		height: 31vw!important;
		width: 31vw;
	}
	.homelayout .sprocket-strips-s-content { margin-top: 0px;}
}


/************ HEROS  ************/
#g-showcase p { margin: 0; padding: 0; }
#g-showcase .mod_placehere  img { width: 100%; }
.hero img {opacity: 0.75; height: 26vw;}

/************ BOTTOM  ************/
#g-bottom h4 { color: white; }
@media only screen and (min-width: 767px) {
#g-bottom .g-content {padding-bottom: 15vw;}
}
@media only screen and (max-width: 767px) {
	
}

/************ FOOTER  ************/
#g-footer h4, #g-footer h3, #g-footer h2, #g-footer h1, #g-footer a, #g-footer p { color: white; }


/************ MOBILE  ************/
.g-offcanvas-toggle { color:white }