@import url('//fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');


/************ COLORS  *********
Yellow: #DFB463
Dark Green: #1E2F29
Dark Grey: #222

Titles: Lato (various weights)
Body: Libre Baskerville, Regular
Footer: Cinzel = St Mary Catholic Church; Libre Baskervill = address, phone
***/

/* DEFAULT FOR ALL */
body, p, h6 { color: #666; }
h1, h2, h3, h4, h5, h6 { margin: .75rem 0; line-height: 1.3; font-weight: normal;}

/* SIZES */
h1 {font-size: 2.5rem; }
h2, h3, h4, h5, h6 { font-size: 2rem;}

/* FONTS */
body, p, h6 { }
h1, h2, h3, h4, h5 { }

/* STYLING */

h1 {color: #1E2F29; text-transform: uppercase; font-size: 2.25rem; font-family: 'Libre Baskerville';}
.page-header h1 { font-size: 2.25rem; text-transform: none;  font-weight: 400;}
h2 {color: #1E2F29; border-bottom: 1px solid #666666; font-family: Lato, san-serif; font-size: 2rem;}
h3 {color: #DFB463; border: none; font-family: 'Libre Baskerville'; font-size: 1.75rem;}
h4 {background: #1E2F29; color: white; border-radius: .2rem; padding: .5rem 1rem;  font-size: 1.75rem;     font-family: Lato, san-serif;}
h5 {color: #0f3467; font-family: 'Libre Baskerville'; font-size: 1.5rem;}
h6 {color: #0f3467; font-family: 'Libre Baskerville'; font-size: 1.25rem;}
a { color: #DFB463; }

blockquote {
  color: #666666;     
  padding: 0 0 0 15px;
    margin: 0 0 20px;
    border-left: 5px solid #d5d5d5;
  font: italic 16px/22px Georgia, Serif;
}

/************ BUTTONS  ************/
.readon, .button { 
  color: white; 
  background: #1E2F29;
  border: 3px white solid;
  padding: .7rem 1.3rem; 
  border-radius: .5rem; 
  display: inline-block;
  font-weight: 700;
  line-height: 1.125rem;
  font-family: Lato, sans-serif;
  text-transform: none;
  font-size: 1.3rem;
}
.readon:hover, .button:hover {background: #ddd; border-color: #1e2f29; color: #1E2F29; }

.cinzel {font-family: Cinzel, serif;} 

.page-header h2 { line-height: 1.3; padding-bottom: 0px;}

/************ ALERT ************/
.alert .g-content {padding: 0; margin: 0;}
.alert {border: none; padding: 0; margin: 0; background-color: #FFCFCF; color: #FF0000;}
.alert h1, .alert h2, .alert h3, .alert h4, .alert h5, .alert h6, .alert p { margin-left: 20px; color: red; background: transparent;}

/************ HEADER AND MENU  ************/
.topright { position: absolute; top: 5px; right: 5px; width: 100%; text-align: right;}
.smallicons img {width: 32px; }
.smallicons .g-content { padding: 0; margin: 0; }
#g-navigation {background: white url(../images/solutio/washoutback.jpg) 50% 35% no-repeat; background-size: 100%;}

.g-main-nav .g-toplevel > li.g-parent .g-menu-parent-indicator {display: none; }
.goldback {background: #DFB463; }
.g-main-nav ul {padding-right: 10%; }
.g-main-nav .g-toplevel > li > .g-menu-item-container { 
	font-family: Lato, serif;
	font-weight: 900;
}
.g-main-nav .g-sublevel > li > .g-menu-item-container {font-family: Lato, serif; font-size: 1rem; }
.g-main-nav .g-toplevel > li > .g-menu-item-container { font-size: 1.1rem; }
.trimbottom { margin-bottom: -20px; z-index: 10; }
.g-main-nav .g-toplevel > li > .g-menu-item-container {z-index: 11; }
.g-main-nav .g-toplevel > li > .g-menu-item-container { color: #1E2F29; }
.g-main-nav .g-toplevel > li:hover > .g-menu-item-container, .g-main-nav .g-toplevel > li.active > .g-menu-item-container {background: rgba(0,0,0,.1); }

.g-main-nav .g-standard .g-fade.g-dropdown { z-index: 3; }
.g-main-nav .g-standard > .g-dropdown { margin-top: 0px; }
.g-main-nav .g-standard > .g-dropdown.g-dropdown-right { left: 0; }

.nav.menu .active a, .nav.menu li:hover a { color: #1E2F29; }

@media only screen and (max-width: 767px) {
	#g-navigation {background-position: 50% 0% }
	.trimbottom { margin-bottom: 10px; z-index: 10; }
	.g-logo {
		width: 68%;
		margin: 15px auto;
	}
	#g-offcanvas #g-mobilemenu-container .g-toplevel > li:hover > .g-menu-item-container > .g-menu-item-content, #g-offcanvas #g-mobilemenu-container .g-toplevel > li.active > .g-menu-item-container > .g-menu-item-content, #g-offcanvas #g-mobilemenu-container ul > li:not(.g-menu-item-type-particle):not(.g-menu-item-type-module).active > .g-menu-item-container, #g-offcanvas #g-mobilemenu-container ul > li:not(.g-menu-item-type-particle):not(.g-menu-item-type-module):hover > .g-menu-item-container { color: white; }
	.g-offcanvas-toggle { top: 1.75rem; }
	.sprocket-features-arrows {display: none;}
	.arrows-active .sprocket-features-list { margin: 0 3%;}
}


/************ ROTATOR  ************/

#g-navigation .g-grid:nth-child(4) {background: rgba(30, 47, 41, .7); }
.sprocket-features-container { display: flex; padding-top: 20px;}
.sprocket-features-content {flex: 1; order: 1;}
.sprocket-features-img-container { order: 2; flex: 2;}
.sprocket-features-content h2, .sprocket-features-content p { color: white; }
.layout-showcase .sprocket-features-pagination li span {display: block; font-size: 1.5rem;}
.layout-showcase .sprocket-features-pagination li {background: none; box-shadow: none;}


@media only screen and (min-width: 768px) {
	.sprocket-features-img-container img {
		object-fit: cover;
		object-position: center;
		width: 100%;
	}	
}

@media only screen and (min-width: 1200px) {
	.sprocket-features-img-container img{  height: 400px;}
}

@media only screen and (min-width: 960px) and (max-width:1199px) {
	.sprocket-features-img-container img{ height: 300px;}
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
	.sprocket-features-img-container img{  height: 250px;}
}

@media only screen and (max-width: 767px) {
	.sprocket-features-container { display: block; }
	.sprocket-features-pagination {display: none; }
	.sprocket-features-content { min-height: 350px;}
}

@media only screen and (max-width:1199px) {
		.size-80.expandonsmaller {  flex: 0 100%; width: 100%;}
		.shrinkonsmaller { display: none;}
}


/************ QUICKLINKS  ************/
.quicklinks {display: flex; font-family: Lato, san-serif; font-weight: 900; color: #1E2F29; font-size: 1.2rem; }
.quicklinks > div  {flex: 1; margin: 10px; background: #DFB463;  border: 1px #DFB463 solid; display: flex; align-items: center; justify-content: center; transition: all .2s ease-in;}
.quicklinks > div:hover  { background: #ddd; border: 1px #1E2F29 solid;  }
.quicklinks > div img {padding: 5px 10px; }
.quicklinks > div > div:nth-child(2)  {flex: 1;}
.quicklinks a { color: #1E2F29; text-align: center; display: block;}

@media only screen and (max-width: 767px) { .quicklinks {display: block;} }




/************ MODULES  ************/
.bigtitle h3.g-title { font-size: 2.5rem; font-weight: 900; line-height: 1.3;}
.platform-content, .moduletable, .widget, .upcomingevents {padding: 0.5rem 0}

.moduletable .nav.menu, .moduletable .nav.menu li {padding: 0.5rem 0.2rem;}


/************ HEADLINES  ************/
h4.sprocket-lists-portrait-title {
	background: none; 
	color: #1E2F29;
	font-family: 'Libre Baskerville';
	padding: 0;
	margin: 0;
	padding-left: 10px;
}
h3.g-title {    
	font-family: Lato, san-serif;
	font-weight: 700;
	border-bottom: 1px #1E2F29 solid;
	color: #1E2F29;
	padding: 0;
	text-align: center;
}
.sprocket-lists-portrait-item { padding-left: 10px; }

/**** AUTO CROP IMAGES ON HOME ****/
.portrait-image  { width: 100%; padding: 0; margin: 0; height: 0;}
.active .portrait-image { width: 100%; padding-bottom: 10px; margin: 0 10px 0 0; height: auto;}
.portrait-image img {
	object-fit: cover;
	object-position: center;
	height: 0;
	width: 100%;
	transition: all .2s ease-in;
}

.active .portrait-image img {
	height: 150px;
}

p.portrait-text { margin: .5rem 0 0 0 }

/************ HOMELAYOUT  ************/
body #g-page-surround { background: #1E2F29; }
#g-container-main { background: white; }

#g-extension .g-grid {background: white; }
#g-expanded .g-container { width: 100%; }
#g-extension .platform-content { padding-bottom: 0px; padding-top: 0px; font-size: 1.25rem;}
#g-extension .platform-content ul, ol, dl {margin-top: 0.5rem;}
#g-extension { padding: 0; }
#g-expanded { background-image: url(../images/solutio/crowd-background-bw.jpg); background-size: cover; }
#g-expanded .g-container { padding: 0; background: rgba(35, 58, 50, 0.75); }

#g-extension, #g-expanded .g-container .g-grid  { margin: 0 10%; }
#g-expanded {padding: 0; }

@media only all and (max-width: 74.938rem) and (min-width: 48rem) {
	#g-container-main {margin: 0; }
	#g-extension, #g-extension  {padding: 0; margin: 0; } 
}

@media only all and (max-width: 59.938rem) and (min-width: 48rem) {
	#g-extension, #g-extension  {padding: 0; margin: 0; } 
	#g-container-main {margin: 0; }
}
@media only all and (max-width: 47.938rem) {
	#g-extension { margin: 0; }	
}

.homelayout .hideonhome { display: none; }

/************ LANDING PAGE  ************/
.fixedtopright {     
	position: fixed;
    top: 10px;
    right: 10px;
    text-align: right;
    z-index: 1000; 
}
.fixedtopright p {padding: 0; margin: 0; }

img.logo { display: block; margin: auto; max-width: 80%; }
.fireback { background: url(../images/solutio/fireback.jpg) 50% 50% no-repeat; }
.candleback { background: url(../images/solutio/candleback.jpg) 50% 0 no-repeat;}
.weddingback { background: url(../images/solutio/weddingback.jpg) 50% 50% no-repeat; }
.washoutback { background: url(../images/solutio/washoutback.jpg) 50% 50% no-repeat;}
.fullpic { background-size: cover; height: 100vh;}

.fullheightarea { display: flex;  height: 100vh; flex-direction: column; }
.toparea {flex: 1 }
.fullheightarea .bottomarea { text-align: center; }
.fullheightarea .bottomarea h1 { 
	font-weight: 900; 
	font-family: 'Lato', sans-serif; 
	font-size: 5rem;
	text-shadow: 5px 5px 15px #000;
	color: white;
	line-height: 1.2;
}
.supernova {background: none !important; }
.fullheightarea .bottomarea p {
	font-family: 'Libre Baskerville', serif;
	font-size: 1.1rem;
	text-shadow: 2px 2px 5px #000;
	color: white;
	width: 65%;
	margin: 0 auto 10px auto;
}

.fullpic a {color: white; }
.downbutton { font-size: 5rem; opacity: .7; transition: all .3s ease-in;}
.downbutton:hover { font-size: 5.5rem; opacity: 1; }

@media only screen and (max-width: 767px) {
	.fullheightarea .bottomarea h1 {font-size: 2.5rem; line-height: 1.3; }
	.downbutton, .downbutton:hover { font-size: 2rem;}
	.bottomarea img {max-width: 100px; }
	.fixedtopright {	
		top: auto;
		bottom: 5px;
		right: 5px;
		z-index: 1010;
		opacity: .99;
	}
	.readon, .button  {font-size: 1rem; padding: .3rem .5rem;  }
	.fullheightarea .bottomarea p {
		color: white;
		width: 90%;
		margin: 0 auto 0 auto;
		font-size: .7em;
	}
	.bottomarea { margin-bottom: 4rem; z-index: 1001; }
	#feast p { background: rgba(0,0,0,.3); padding: 1rem;}
}



/************ PLAN A VISIT  ************/
.flextable { display: flex; }
.eightywide { padding: 0 10% 3rem 10%; }
.flextable > div {flex: .4; }
.flextable > .bigcell {flex: 1; }
.flexcolumn {display: flex; }
.flexcolumn {display: flex; flex-direction: column;}
.flexcolumn > div { flex: 1; }

a.bigbutton {
	background: #1E2F29; 
	color: white; 
	display: block; 
	text-align: center; 
	padding: 1.5rem; 
	margin: .5rem;
	font-size: 1.75rem;
}

a.bigbutton:hover {background: #222; }

@media only screen and (max-width: 767px) {
	.flextable {display: block; }
}

/************ FOOTER  ************/
#g-footer h3 {border: none;  color: white;}
#g-footer a {color: white; font-family: 'Cinzel'; font-weight: normal;}
#g-footer a:hover {opacity: .7; }
#g-footer {border-top: 5px #DFB463 solid; }
#g-footer h3 { border: none; font-family: 'Cinzel'; font-size: 2.25rem;}


.moduletable .nav.menu, .moduletable .nav.menu li {border: none;}

/************ FATHERS PAGE  ************/
.outline-15 #g-container-main .g-block { padding: 0 2%;}

.outline-15 #g-mainbar .moduletable {margin: 1rem 0 0 0;}

.icons { display: none;}

.popuptext {display: none;}
.category-modulebigtitle li { font-size: 1.25rem;  padding: 4px 0px;}