@import url('//fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;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: 1600x669 (super wide, 2.39:1)

/************ FONTS  ************
Serif: Cinzel
Sans Serif: Montserrat
font-family: 'Cinzel', serif;
font-family: 'Montserrat', sans-serif;

/************ COLORS  ************
Black: #110702; rgba(17,7,2,1)
Grey: #cfcdcc
White: #ffffff; rgba(255,255,255,1)

/************ NOTES ************
social media icons are all og fa icons
Rotator text: each rotator slide is a segment of their mission statement (below)
Rotator, QL, Ministry button overlay: rgba(17,7,2,.3)
news paralax overlay:  rgba(255,255,255,.75)
ministries paralax overlay:  rgba(255,255,255,.85)
subtle dropshadow: header bar, circle and square picture buttons, news iamges, meet the friars images and button, news button
text dropshadow is stronger for legibility in rotator and picture buttons
************/

body {color: #333; font-family: 'Montserrat', 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: #110702; font-size: 3.5rem; font-weight: bold; font-family: 'Cinzel', serif;}
h2 {font-variant-caps: small-caps; color: #110702; font-size: 2.5rem; font-family: 'Cinzel', serif; font-weight: 400;}
.page-header h2 {padding-bottom: 0.25rem; line-height: 2.5rem;}
h3 {color: #110702; font-size: 2rem; border-bottom: 1px solid #cfcdcc;  line-height: 1.3; margin: 0 0 10px 0;}
h4 {color: #110702; font-size: 2rem; font-family: 'Montserrat', sans-serif;}
h5 {background: #cfcdcc; font-size: 1.75rem; color: #110702; border-radius: .2rem; padding: .5rem;}
h6 {color: #110702; font-size: 1.5rem; text-transform: uppercase; font-weight: bold;}
h6.mixed {text-transform: none;}
a {color: #3a6296;}
a:hover {color: black;}

h3.g-title {border-bottom: 0px solid #333; font-weight: 400; letter-spacing: 5px; font-size: 3rem;}
span.subtitle { font-family: 'Montserrat', sans-serif; text-transform: none; font-variant-caps: normal; font-size: 1.5rem;  font-style: italic;}

@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: #110702; border-radius: 0;
	box-shadow: 0px 0px 10px rgb(0 0 0 / 30%);
}

/*************** HOMELAYOUT ***************/
/*************** OFFCANVAS ****************/


/*************** TOP **********************/


/*************** NAVIGATION ***************/

@media only all and (min-width: 51rem){
#g-navigation .g-logo img {width: 80%;}
}
.g-social .g-social-items a {padding: 0 8px;}


/**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: 400;}
/*.g-main-nav .g-toplevel {text-transform: none;}
.g-main-nav {font-family: 'Montserrat', sans-serif;}**/



/*************** SLIDESHOW ****************/
.homelayout #g-slideshow .sprocket-features-content {display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; top: 0; bottom: 0; left: 0; right: 0; margin: 0; padding: 0; background: rgba(17,7,2,.3);}
.homelayout #g-slideshow .sprocket-features-desc {padding: 0; margin: 0; width: 60%;}
.homelayout #g-slideshow .sprocket-features-desc h2 {font-weight: 400; text-shadow: 2px 2px 2px rgba(0,0,0,.3); line-height: 1; font-size: 2rem;}
.homelayout #g-slideshow .sprocket-features-desc span.subtitle { font-family: 'Montserrat', sans-serif; text-transform: none; font-variant-caps: normal; font-size: 1.5rem;  font-style: italic;}

@media only screen and (max-width: 50.99rem) {
    .fullwidthrotator.superwiderotator.sidegradient .layout-slideshow .sprocket-features-img-container, .fullwidthrotator.widerotator.sidegradient .layout-slideshow .sprocket-features-img-container {padding-bottom: 0;}
    .homelayout #g-slideshow .sprocket-features-desc {width: 90%;}
    .homelayout #g-slideshow h2 {font-size: 3vw;}
    .homelayout #g-header .qloverlaybackpic .sprocket-strips .sprocket-strips-container {display: grid; grid-template-columns: 1fr 1fr;}
    .qloverlaybackpic .sprocket-strips .sprocket-strips-container::before {display: none;}
}

/*************** HEADER *******************/
#g-header .heightvw19 .sprocket-strips-item, .heightvw19 .sprocket-strips-s-item img, .heightvw19 .sprocket-strips-image-overlay img {width: 19vw; border-radius: 50%;}
#g-header .qloverlaybackpic .sprocket-strips .sprocket-strips-container > li {display: flex; justify-content: center; align-items: center;}
#g-header .qloverlaybackpic .sprocket-strips-content {border-radius: 50%;}
#g-header .qlexpandingborder h4.sprocket-strips-title {border-radius: 50%; font-family: 'Cinzel', serif; letter-spacing: 2px;}

@media only screen and (max-width: 50.99rem) {
    #g-header .heightvw19 .sprocket-strips-item, .heightvw19 .sprocket-strips-s-item img, .heightvw19 .sprocket-strips-image-overlay img {height: 40vw; width: 40vw;}
    #g-header .qlexpandingborder h4.sprocket-strips-title {font-size: 4vw;}
}

/*************** ABOVE ********************/

#g-above { background: url(/images/template/earyfriarsparallax.jpg) 50% 0 no-repeat; background-size: cover;}
#g-above .g-grid { width: 100%; background: rgba(255,255,255,.75); padding: 1rem 12%;}

.photoblocknews .sprocket-strips-item {
    background: url(/images/stories/template/default-news.jpg) 0 0 no-repeat;
	background-position: 50% 50%;
    background-size: cover;
}
.zoompics .active .portrait-image img, .zoompics.noncollapse .portrait-image img {
    height: 16vw;
    width: 30vw;
	box-shadow: 0px 0px 10px rgb(0 0 0 / 30%);
	margin: 0 1rem 1rem 0;
}
 .zoompics .sprocket-lists-portrait-container > li h4 {font-weight: 600;}

#g-above a {color: #110702;}
#g-above a:hover {color: #949494;}
#g-above a.button {color: white;}

@media only screen and (max-width: 50.99rem) {
    .zoompics .active .portrait-image img, .zoompics.noncollapse .portrait-image img {height: 33vw; width: 100vw;}
}

/*************** FEATURE ******************/


/*************** SHOWCASE *****************/
/*************** UTILITY ******************/


/*************** EXPANDED *****************/
.homelayout #g-expanded {padding: 3% 10%;}

.homelayout #g-expanded {
    background: url(../images/template/crestwatermark.jpg) 95% 95% no-repeat;
    background-size: 50%;
}


#g-expanded .layout-slideshow .sprocket-features-img-container {box-shadow: 0px 0px 10px rgb(0 0 0 / 30%);}
#g-expanded .layout-slideshow .sprocket-features-img-container img {box-shadow: 0px 0px 10px rgb(0 0 0 / 30%);}
.fwrwide .layout-slideshow .sprocket-features-img-container img {
    height: 30vw !important;
	box-shadow: 0px 0px 10px rgb(0 0 0 / 30%);
}

@media only screen and (max-width: 50.99rem) {
    .fwrwide .layout-slideshow .sprocket-features-img-container {padding-bottom: 0;}
}

/*************** EXTENSION ****************/
#g-extension { background: url(/images/template/ministries-parallax.jpg) 50% 0 no-repeat; background-size: cover; }
#g-extension .g-grid { width: 100%; background: rgba(255,255,255,.85); padding: 2rem 8%;}
#g-extension  h4.sprocket-strips-title { font-family: 'Cinzel', serif; letter-spacing: 2px;}

@media only screen and (max-width: 50.99rem) {
    .homelayout #g-extension h4 {font-size: 3vw; margin: 0;}
    .qloverlaybackpic .sprocket-strips .sprocket-strips-container > li {border-bottom: none;}
}

/*************** BOTTOM *******************/
/*************** FOOTER *******************/
#g-footer a {color: #ffffff;}
#g-footer {font-family: 'Montserrat', sans-serif;}
/*************** COPYRIGHT ****************/

/*************** MODULES ******************/
.moduletable .nav.menu, .moduletable .unstyled {background: #110702;}
.moduletable .nav.menu li.current.active a, .moduletable .nav.menu li a:hover {
    color: #110702;
    background: #cfcdcc;
}

/*************** SECTIONS *****************/
/*Garden Gallery*/

.g-imagegrid .g-imagegrid-item img {height: auto;}
.g-imagegrid .g-imagegrid-3cols .g-imagegrid-item:first-child {padding-right: 0.25rem;}
.g-imagegrid .g-imagegrid-3cols .g-imagegrid-item {width: 33.0%; padding: 0.25rem;}
.g-imagegrid .g-imagegrid-3cols .g-imagegrid-item:last-child { padding-left: 0.25rem;
}

.ministrypage .item .pull-left.item-image img {height: 20vw;}
.ministrypage.img-title .items-row .item {height: 20vw;
}



/************ BACKGROUND  ************/
body #g-page-surround  {background: white url(../images/template/crestwatermark.jpg) 95% 95% no-repeat; background-attachment: fixed;  background-size: 50%; } 
/*.sectionheader { margin-top: 2rem; }*/

@media only screen and (max-width: 50.99rem){
	body #g-page-surround  {  background-size: 110%; } 

}
/*#g-container-main {
    background: url(../images/template/crestwatermark.jpg) 95% 95% no-repeat;
    background-size: 50%;
}*/
.breadcrumb {background-color: transparent;}

.moduletable #login-form .unstyled {
    display: none;
}
.moduletable #login-form .control-group .btn a {color: #110702;}
.moduletable #login-form .control-group .btn {color: #110702;}

#g-mainbar .arrows-active .sprocket-features-list {
    margin-left: 5px;
    margin-right: 5px;
}
#g-mainbar td a:hover img {box-shadow: 0px 0px 10px rgb(0 0 0 / 30%);}


.card-strips .sprocket-strips-s-item { height: 32vw; margin-left: 5px; margin-right: 5px; position: relative;}
.card-strips .sprocket-strips-s-title {text-align: center; line-height: 1;}
.card-strips h4.sprocket-strips-s-title a {font-size: 1.25rem; color: #110702; font-weight: 600; }
.card-strips .sprocket-strips-s-content a.readon {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
}
.card-strips .sprocket-strips-s-content a.readon > span {
    display: none;
}
.card-strips .sprocket-strips-s-item { box-shadow: 0px 0px 3px rgb(0 0 0 / 30%); transition: transform .5s, box-shadow .3s;}
.cards-strips .sprocket-strips-s-content {  margin: 10px 0;}
.card-strips .sprocket-strips-s-item:hover {
	margin-top: -10px;
	margin-bottom: 10px;
	box-shadow: 0px 7px 30px rgba(0,0,0,.3);
}

/*************** MOBILE *******************/
.g-offcanvas-toggle {color: #ffffff;}


/************ FILEMAN PHOTO GALLERY - FOLDERS   ************/
.gallerycolorstrip .k-ui-namespace .koowa_media--gallery .koowa_media__item__content {
	background: none;
	border: none;
	border-radius: 0; 
}

.gallerycolorstrip .k-ui-namespace .koowa_media--gallery .koowa_media__item .koowa_media__item__content:not(.file) .koowa_media__item__link {
	box-shadow: 2px 2px 5px rgba(0,0,0,.2);
	position: relative;
	width: 20vw;
	height: 15vw;
	max-width: 400px;
	max-height: 300px;
	background: url(/images/stories/template/default-photo-gallery.jpg) 0 0 no-repeat;
    background-size: cover; 
	margin-bottom: 2vw;
	transition: all .4s ease-in-out;
}



.gallerycolorstrip .koowa_media {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.gallerycolorstrip .k-ui-namespace .koowa_media--gallery .koowa_media__item {
	padding: 0;
	width:  auto;
	max-width:  auto;
}

.gallerycolorstrip .k-ui-namespace .koowa_media--gallery .koowa_media_contents.columns-4 .koowa_media__item {
	width: auto;
}

.gallerycolorstrip .k-ui-namespace .koowa_header {     position: initial;}

.gallerycolorstrip .k-ui-namespace .koowa_media--gallery .overflow_container {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.gallerycolorstrip .k-ui-namespace .koowa_media--gallery .koowa_media__item__content img:not(.k-js-image-preview) {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	object-fit: cover;
	object-position: center;
	width: 20vw;
	height: 15vw;
	max-width: 400px;
	max-height: 300px;
	z-index: 10; 
}

.gallerycolorstrip .k-ui-namespace .koowa_media--gallery .koowa_media__item .koowa_media__item__content.file .koowa_media__item__link {
	box-shadow: 2px 2px 5px rgba(0,0,0,.2);
	position: relative;
	width: 15vw;
	max-width: 300px; 
    background-size: cover; 
	margin-bottom: 2vw;
	transition: all .4s ease-in-out; 
}

.gallerycolorstrip .k-ui-namespace .koowa_media--gallery .koowa_media__item__content img.k-js-image-preview {
	width: 15vw;
	max-width: 300px;
}

.k-ui-namespace .koowa_media--gallery .koowa_media_contents.columns-2 .koowa_media__item, .k-ui-namespace .koowa_media--gallery .koowa_media_contents.columns-3 .koowa_media__item, .k-ui-namespace .koowa_media--gallery .koowa_media_contents.columns-4 .koowa_media__item,.k-ui-namespace .koowa_media--gallery .koowa_media_contents.columns-5 .koowa_media__item, .k-ui-namespace .koowa_media--gallery .koowa_media_contents.columns-6 .koowa_media__item, .k-ui-namespace .koowa_media--gallery .koowa_media_contents.columns-7 .koowa_media__item, .k-ui-namespace .koowa_media--gallery .koowa_media_contents.columns-8 .koowa_media__item, .k-ui-namespace .koowa_media--gallery .koowa_media_contents.columns-9 .koowa_media__item {
	width: 16vw;
	max-width: 350px;
}

.gallerycolorstrip .k-ui-namespace .koowa_media--gallery .koowa_media__item .koowa_media__item__content.file .koowa_media__item__link.js-lightbox-item {
	padding: 0;
	margin: 0 auto 1.2vw auto;
	border-radius: 1vw; 
	
}

.gallerycolorstrip .k-ui-namespace .koowa_media--gallery .koowa_media__item .koowa_media__item__content.file .koowa_media__item__link.js-lightbox-item:hover {
	opacity: .8;
}


.gallerycolorstrip .k-ui-namespace .koowa_media--gallery .koowa_media__item__link {
	padding: 0; 
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	display: flex;
	align-items: flex-end;
}

.gallerycolorstrip .k-icon-document-folder.k-icon--size-medium { display: none; }

#g-page-surround .gallerycolorstrip .g-content { padding-left: 0; padding-right: 0px; margin-left: 0px; margin-right: 0px;}

/*
.gallerycolorstrip .k-ui-namespace .koowa_media--gallery .koowa_media__item .koowa_media__item__content:not(.file) .koowa_media__item__link :hover {
	opacity: 0.90;
	
}
*/

@media only screen and (max-width: 767px) {
	.gallerycolorstrip .k-ui-namespace .koowa_media--gallery .koowa_media__item .koowa_media__item__content:not(.file) .koowa_media__item__link, .gallerycolorstrip .k-ui-namespace .koowa_media--gallery .koowa_media__item__content img:not(.k-js-image-preview)	{
		width: 80vw;
		height: 60vw;
		max-width: auto;
		max-height: auto;
	}
	.gallerycolorstrip .k-ui-namespace .koowa_media--gallery .koowa_media__item .koowa_media__item__content:not(.file) .koowa_media__item__link {
		margin-bottom: 8vw;
	}
	
	.gallerycolorstrip .k-ui-namespace .koowa_media--gallery .koowa_media__item .koowa_media__item__content.file .koowa_media__item__link {
		width: 40vw;
	}

	.gallerycolorstrip .k-ui-namespace .koowa_media--gallery .koowa_media__item__content img.k-js-image-preview {
		width: 40vw;
	}

	.k-ui-namespace .koowa_media--gallery .koowa_media_contents.columns-2 .koowa_media__item, .k-ui-namespace .koowa_media--gallery .koowa_media_contents.columns-3 .koowa_media__item, .k-ui-namespace .koowa_media--gallery .koowa_media_contents.columns-4 .koowa_media__item,.k-ui-namespace .koowa_media--gallery .koowa_media_contents.columns-5 .koowa_media__item, .k-ui-namespace .koowa_media--gallery .koowa_media_contents.columns-6 .koowa_media__item, .k-ui-namespace .koowa_media--gallery .koowa_media_contents.columns-7 .koowa_media__item, .k-ui-namespace .koowa_media--gallery .koowa_media_contents.columns-8 .koowa_media__item, .k-ui-namespace .koowa_media--gallery .koowa_media_contents.columns-9 .koowa_media__item {
		width: 45vw;
	}

}
.gallerycolorstrip .k-ui-namespace .koowa_media--gallery .overflow_container > span {
	z-index: 20;
	width:  100%;
	text-align: center;
	margin-bottom: 2vw;
	padding-top: .4vw;
	padding-bottom: .4vw;
	background: rgba(17,7,2,.8);
	color: white;
	transition: all .4s ease-in-out;
	font-weight: 400 !important;
}

.gallerycolorstrip .k-ui-namespace .koowa_media--gallery .koowa_media__item .koowa_media__item__link:hover .overflow_container > span {
	margin-bottom: 3vw;
	background: rgba(17,7,2,.8);
}

/****************
/************ COLORS  ************
Black: #110702; rgba(17,7,2,1)
Grey: #cfcdcc
White: #ffffff; rgba(255,255,255,1)
*************************************/