@import url('https://fonts.googleapis.com/css?family=EB+Garamond:400,400i,700');
@import url('http://fonts.googleapis.com/css?family=EB+Garamond:400,400i,700');

/************ COLORS  *********
971d26 - Red
686868 - Grey -school
858585 - Grey -parish

***/


/* DEFAULT FOR ALL */
body, p { }
h1, h2, h3, h4, h5, h6 { margin: .75rem 0; line-height: 1.3; font-weight: normal;}


/* STYLING */
h1 { font-size: 2.5rem; text-transform: uppercase; color: #971d26; }
h2 {font-size: 1.75rem; color: #971d26; border-bottom: 1px #ccc solid;}
h3 {background: #971d26; font-size: 1.5rem; color: white; border-radius: 5px; padding: 5px 15px;}
h4 { font-size: 1.3rem; color: #971d26; }
h5 { font-size: 1.3rem; color: #686868;}
a { color: #971d26;}
a:hover { color: #333;}

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: #971d26; 
  padding: .7rem 1.3rem; 
  border-radius: .5rem; 
  display: inline-block;
  font-weight: 500;
  line-height: 1.125rem;
  border: none;
}
.readon:hover, .button:hover {background: #ddd; color: #333 !important;}

/************  BACKGROUNDS - PARISH  ************/
body { 	
	background: #fff url(images/church-background.jpg) 0 0 no-repeat; 
	background-size: 40%;
}

body.outline-14 {background: #fff url(images/school-back.jpg) 100% 0 no-repeat; }

#g-page-surround {
	background: url(images/stjude.jpg) 100% 0 no-repeat;
	background-size: 15%;
}

.outline-14 #g-page-surround {background: none; }

#g-mainbar { background: rgba(255, 255, 255, .8); }
.homelayout #g-mainbar .g-content { padding: 0; margin: 0; }


/************ HEADER AND MENU  ************/
.headerpadding { padding: 20px; }

.g-main-nav ul.g-toplevel {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
}
#g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container .g-menu-parent-indicator:after {display:none;}
#g-navigation .g-main-nav {margin: 0;}
#g-navigation .g-main-nav .g-toplevel > li:hover > .g-menu-item-container, #g-navigation .g-main-nav .g-toplevel > li.active > .g-menu-item-container {background-color: #4c4c4c; color: white;}
.g-main-nav .g-toplevel > li > .g-menu-item-container > .g-menu-item-content {padding: 8px 15px;}
.g-main-nav .g-toplevel > li > .g-menu-item-container {font-weight: normal; font-size: 1.1rem;}
#g-navigation.g-flushed .g-container, #g-top.g-flushed .g-container {width: 75rem;}

#g-top.outline-14 {background: url(../images/solutio/header-logo/school-header-image-cropped.png) 100% 0 no-repeat;
background-size: auto 100%;
}

.outline-13 #g-top {/*background-color: #7da6d1;*/}

.g-main-nav .g-sublevel > li.g-parent .g-menu-parent-indicator:after {top: 0; }
.g-main-nav .g-sublevel > li.g-parent.g-selected > .g-menu-item-container > .g-menu-parent-indicator:after { content: "\f105"; }


@media only all and (max-width: 74.938rem) and (min-width: 60rem){#g-navigation.g-flushed .g-container, #g-top.g-flushed .g-container, #g-navigation.g-flushed .g-container, #g-top.g-flushed .g-container {width: 60rem;}
.g-main-nav .g-toplevel > li > .g-menu-item-container {font-size: 1rem;}
}

@media only all and (max-width: 59.938rem) and (min-width: 48rem){#g-navigation.g-flushed .g-container, #g-top.g-flushed .g-container, #g-navigation.g-flushed .g-container, #g-top.g-flushed .g-container {width: 48rem;}
.g-main-nav .g-toplevel > li > .g-menu-item-container {font-size: .8rem;} #g-top {background: none}
} 

@media only all and (max-width: 47.999rem) {
	#g-top {background: none}
	#g-navigation.g-flushed .g-container, #g-top.g-flushed .g-container { width:  100%;}
	.headerpadding { padding: 5% 20%; }
	body { background: white; }
	body.outline-14 {background: none; }
	.outline-14 .g-logo { padding: 5% 20%; }
}


/************ ALERT  ************/

.alert h1, .alert h2, .alert h3, .alert h4, .alert h5, .alert h6,  .alert p {padding: 0px 15px;}

/************ ROTATOR  ************/
.sprocket-features-list {
	/* background: #686868; */
	color: white;
}


#g-showcase { background: none; }

.sprocket-features-container {display: flex;}
.sprocket-features-img-container {flex:1.75; order:2;}
.sprocket-features-content {flex:1; order:1;}
/* .sprocket-features-img-container img {border-left: 9px white solid;} */
.sprocket-features-container > .sprocket-features-img-container { margin: 10px 0px 0px 0; }
.sprocket-features-container > .sprocket-features-content { margin: 10px 10px 0px 10px ; }

.pagination-active .sprocket-features-pagination { bottom: 10px; left: 20px;}
.arrows-active .sprocket-features-list { margin: 0; }
.layout-showcase .sprocket-features-pagination li { padding: 8px; }

.layout-showcase .sprocket-features-arrows .arrow { background: none; box-shadow: none; }
.layout-showcase .sprocket-features-arrows .arrow { font-size: 5rem; }

.sprocket-features-desc {line-height: 1.3; }
h2.sprocket-features-title { font-weight: bold; font-size: 2rem; line-height:  1.2; border: none;}

.semigreybackground .sprocket-features-content { 
	background: linear-gradient(to top, rgba(190,190,190,1) 0%, rgba(190,190,190, .5) 100%);  
	color: #971d26;
	text-align: center;
}
.semigreybackground h2.sprocket-features-title { color: #971d26; }

.semigreybackground .sprocket-features-content a { color: #971d26; }

.solidgreybackground .sprocket-features-content { 
	background: #858585;
	color: white;
	text-align: center;
}
.solidgreybackground .sprocket-features-content a { color: white; }

.sprocket-features-desc { padding: 0 20px; }
.solidgreybackground .sprocket-features-desc .readon { margin-top: 20px;}
.solidgreybackground .sprocket-features-desc .readon:hover { background: none; }
.solidgreybackground .sprocket-features-desc .readon span { background: #971d26; padding: 10px 20px; border-radius: 5px;  }
.solidgreybackground .sprocket-features-desc .readon span:hover { background: #555;  }
.solidgreybackground .pagination-active .sprocket-features-pagination { bottom: 10px; left: 12%;}
.solidgreybackground .layout-showcase .sprocket-features-pagination li { background: #971d26; margin: 0 10px;}
.solidgreybackground .layout-showcase .sprocket-features-pagination li span { display: block; padding: 0 3px; }

@media only screen and (max-width: 767px) {
	.sprocket-features-container {flex-direction:column;}
}

@media only screen and (max-width: 959px) {
	.solidgreybackground .layout-showcase .sprocket-features-pagination {display: none; }
}

/************ PARISH HEADLINES  ************/
.padtop { padding-top: 20px; } 
.sprocket-accordion-item { background-image:  url(images/church-background.jpg); }
.schooldefaultbackground .sprocket-accordion-item { background-image:  url(images/school-back.jpg); }
.schooldefaultbackground .sprocket-accordion-title a { color: #971d26; }
.active .sprocket-accordion-content {    position: absolute;   bottom: 0; }
.active .sprocket-accordion-title { font-size: 1.6rem; font-weight: bold ;}
.sprocket-accordion-item { opacity: 1;  border-bottom: 2px #971d26  solid;}
.sprocket-accordion-item:last-child { border-bottom: none;}
.sprocket-accordion-overlay { background: linear-gradient(to top, rgba(255,255,255,1) 10%, rgba(255,255,255,.8) 50%, rgba(255,255,255,.1) 70%); }

.sprocket-accordion-item { height:  65px;}

.sprocket-accordion-desc { color: #971d26; }
.sprocket-accordion-title {
    font-size: 1.4rem;
    line-height: 1.3;
    margin: 0;
	padding: 0;
}
.sprocket-accordion-item:not(.active) {
    background: white !important;
}
.sprocket-accordion-title a { pointer-events: none; }
h2.sprocket-accordion-title { border: none; }

/************ QUICKLINKS  ************/
.tablerow { display: flex; justify-content: space-around; }
.quicklinkbuttons.redbuttons > div  {background: #971d26; }
.quicklinkbuttons.redbuttons > div:hover  {background: #686868; }
.tablerow > div { width: 20%;  }
.tablerow { padding-top: 10px; }

.quicklinkbuttons div a {
	color: white;
}
.quicklinkbuttons div {
	background: #686868;
	display: block;
	padding: 15px 0;
	transition: all .3s ease-in;
	margin: 10px 0;
	border-radius: 5px;
	text-align: center;
	}
.quicklinkbuttons div:hover {
	background: #971d26;
}

@media only screen and (max-width: 767px) { .tablerow { display: block; } .tablerow > div { width: 80%; margin: 10px auto;  } }

/************ MODULES  ************/
td, table {border: none; }

.g-title { margin: 0 0 1rem 0; letter-spacing: 0;}

.box2 a {color: #971d26; }
.box2 a:hover {color: #333; }

.box1, .box2 {
	border-radius: 5px;
	padding: 0px;
}
.equal-height .g-content {
	width: 100%;
}
.moduletable.title1.box1 {
	padding: 0px;
	margin: 0px;
}

.box2.moduletable {
	background: #c1c1c1;
}
.box2 h3.g-title {color: #971d26; text-align: center; border: none;}

.box1 h3.g-title, .box2 h3.g-title { background: none; padding: 0;}
.box1 .readon a, .box2 .readon a { color: white; }
.box1 .readon a:hover, .box2 .readon a:hover  { color: #333; }


/************ HOMELAYOUT  ************/
.item-pagehomelayout {
		color: #515d30; 
}
/*.item-pagehomelayout .page-header h2 { 
	text-align: center;
	font-family: 'EB Garamond', serif;
	font-size: 3rem; 
	font-weight: bold;
	color: #515d30; 
	border: none;
}*/

.item-pagehomelayout .page-header h2 {display: none;}

.homemission h2 {
	text-align: center;
	font-family: 'EB Garamond', serif;
	font-size: 3rem; 
	font-weight: bold;
	color: #515d30; 
	border: none;
	margin-top: 30px;
}

.item-pagehomelayout p {
	font-family: 'EB Garamond', serif;
	font-style: italic;
	font-size: 1.75rem;
	text-align: center;
	line-height: 1.3;
}

/* SCHOOL MISSION STATEMENT */
.outline-14 .item-pagehomelayout { color: black; }
.outline-14 .item-pagehomelayout .page-header h2 { color: #971d26;  }


@media only screen and (min-width: 768px) and (max-width: 959px) {
	.moduletable[class*="box"] {
		padding: .2rem;
		margin: 0.325rem;
	}
	#g-mainbar [class*="size"] { width: 50%; flex: 0 50%;}
}

@media only screen and (max-width: 767px) {}


/************ PARISH LIFE & MINISTRY GRIDS ************/
.sprocket-grids-b-item.panel-color {background: #C8C8C8; }
h2.sprocket-grids-b-title {border-bottom: 1px #971D26 solid; font-size: 1.5rem;}


/************ FOOTER  ************/
#g-footer a {
	color: white;
}
#g-footer a:hover {
	opacity: .8;
}

#g-footer h2 { font-weight: bold ;}

@media only all and (max-width: 47.938rem) {
	#g-footer {
		background: #971d26;
	}
}