* {
	background-repeat: no-repeat;
	font-family: 'Ubuntu', sans-serif;
	font-size: 18px;	
}

html,
body {
  width: 100%;
  height: 100%;
}

BODY {
	font-family: Arial, sans serif;
	font-size: 16px;
	margin-top: 10px;
	position: relative;	
	margin-left: 0;
}
H1, H2, H3, H4 {
	font-family: 'Ubuntu', sans-serif;
	color: #444444;
	line-height: 130%;
}
H1 {
	font-size: 2em;
	margin-top: 2em;
	margin-bottom: 1em;
}
H1.first {
	margin-top: 1em;
}
H2 {
	font-size: 1.35em;
	margin-top: 1.25em;
	margin-bottom: 0.75em;
}
H3 {
	font-size: 1.2em;
	margin-top: 1.5em;
	margin-bottom: 0.5em;
}
P, LI, TD, DIV, A {
	font-family: 'Raleway', sans-serif;
	color: #101010;
	line-height: 130%;
}
P, LI {
	margin-top: 0.75em;
	margin-bottom: 0em;
	line-height: 150%;
}
UL {
	padding-left: 2px;
}
LI {
	margin-left: 1em;
}
A {
	color: #1a6240;
	font-weight: bold;
}
.bold {
	font-weight: bold;
}


#header {
	position:fixed;
	top:0px;
	height: 63px;
	width: 100%;
	display:block;
	/* background-image: url('../images/waterloocrc.png'); */
	background-position: 6px 12px;
	z-index: 200;
	text-align:center;
	border-bottom: 2px solid #ffffff;
}
#header.light {
	background-color: #ffffff;
}
#header.dark, #header.expanded {
	background-color: #C0D4CA;
	border-bottom: 2px solid #1a6240;
}

/* Hamburger/menu toggle */

#MobileMenuToggle {
	overflow: hidden;
	display: none;
	cursor: pointer;
	margin-top: 10px;
}
#MobileMenuToggle P {
	float: left;
	padding-top: 8px;
	color: #1a6240;
	font-size: 80%;
}
.hamburger {
	float: left;
	padding-right: 4px;
	padding-bottom: 4px;
}

#nav {
	display: block;
	position: absolute;
	top: 5px;
	overflow: hidden;
	width: 100%;
	left: 7%;
	width: auto;
}
#nav A {
	float: left;
	margin-right: 5px;	
}
.navitem {
	padding-right: 10px;	
	border-radius: 5px;	
	overflow: hidden;
}
.navitem:hover {
	background-color: #6bb492;
}
.navitem.selected {
	background-color: #281f05;  /* Formerly red: #cb0202 */
}
.navicon {
	width: 55px;
	height: 55px;
	float: left;
	margin-right: 0px;
	background-image: url('../images/navicons.png');	
}
.navtext {
	float: left;
	padding-top: 16px;
}
.navtext A {
	text-decoration: none;
	color: #404040;
}
.navitem:hover .navtext, .navitem.selected .navtext {
	
	color: #ffffff;
}
#VisitUs .navicon {
	background-position: 0px -55px;
}
#VisitUs:hover .navicon, #VisitUs.selected .navicon {
	background-position: -55px -55px;
}
#AboutUs .navicon, #Services .navicon {
	background-position: 0px 0px;
}
#AboutUs:hover .navicon, #AboutUs.selected .navicon, #Services:hover .navicon, #Services.selected .navicon {
	background-position: -55px 0px;
}
#OurPrograms .navicon {
	background-position: 0px -110px;
}
#OurPrograms:hover .navicon, #OurPrograms.selected .navicon  {
	background-position: -55px -110px;
}
#HiringNavItem .navicon {
	background-position: 0px -220px;
}
#HiringNavItem:hover .navicon, #HiringNavItem.selected .navicon  {
	background-position: -55px -220px;
}
#Contact .navicon {
	background-position: 0px -165px;
}
#Contact:hover .navicon, #Contact.selected .navicon  {
	background-position: -55px -165px;
}
#LogIn {
	margin-right: 0;
}
#LogIn .navicon {
	background-position: 0px -275px;
}
#LogIn:hover .navicon, #LogIn.selected .navicon  {
	background-position: -55px -275px;
}
#Index .navicon {
	background-position: 0px -330px;
}
#Index:hover .navicon, #Index.selected .navicon  {
	background-position: -55px -330px;
}

/* Social Media Sidebar */

#SocialMediaSidebar {
	margin-top: 22%;
	width: 50px;
	position: fixed;
	right: -60px;
	border: 1px solid #999999;	
	z-index: 1000;
}
.SocialMediaIcon {
	width: 50px;
	height: 50px;
	background-image: url('../images/SocialMediaIcons.png');
}
#SocialMediaSidebar .SocialMediaIcon.Facebook {
	background-position: 0px 0px;
}
#SocialMediaSidebar .SocialMediaIcon.Twitter {
	background-position: 0px -50px;
}
#SocialMediaSidebar .SocialMediaIcon {
	margin-top: 10px;
	margin-bottom: 10px;
}

/* structural elements */

#section1 {
	margin-top: 100px;	
}
#SectionHeaderImage {
	height: 220px;
	width: 100%;
	background-image: url('../images/HeaderSection.png');
	background-position: center center;
	border-bottom: 10px solid #444444;
	background-color: #ffffff;
}
#SectionHeaderContent {
	width: 86%;
	margin-left: auto;
	margin-right: auto;	
}
#SectionHeaderContent H1 {
	margin-top: 1em;
	font-size: 2.5em;
}

.section {
	
}
.section.prefooter {
	border-bottom: 0px;
}
.section.shaded {
	background-color: #e6efea;
}
.SectionImage {
	margin-top: 80px;
	width: 100%;
	height: 25%;
	background-position: center center;
	background-repeat:  no-repeat;
	background-size:  cover;
	background-color: #999;  
}
.SectionImage.Top {
	height: 30%;
	position: relative;
}
#PageTitle {
	position: absolute;
	left: 7%;
	bottom: 0px;
	color: #ffffff;
	font-size: 3.5em;
	margin-bottom: 0.25em;
	text-shadow: 2px 2px #000000;	
}
.content {
	padding-left: 7%;
	padding-right: 7%;
	padding-bottom: 7%;
}
.content.no-top-margin {
	margin-top: 0;
}
.PartialWidth {
	width: 60%;
}

.grid {
	display: grid;
	grid-gap: 20px;	
}
.grid.two {
	grid-template-columns: auto auto;
}
.grid.three {
	grid-template-columns: auto auto auto;
}
.grid.four {
	grid-template-columns: auto auto auto auto;
}
.grid.five {
	grid-template-columns: auto auto auto auto auto;
}
.griditem {
	background-color: #C0D4CA;
	padding: 0;
	position: relative;
	border-radius: 9px;
	/* make this a flex column so banner + content stack and content can grow */
	display: flex;
	flex-direction: column;
	overflow: hidden; /* prevents any child from visually overflowing the card */
}
.griditembanner {
	background-color: #1a6240;
	border-top-left-radius: 9px;
	border-top-right-radius: 9px;	
}
.griditembanner H3 {
	margin: 0;
	padding: 15px;
	padding-left: 20px;
	color: #ffffff;
}
.griditemcontent {
	display: flex;
	flex-direction: column;
	padding: 20px;
	box-sizing: border-box;
	flex: 1 1 auto; /* shorthand for flex-grow:1; flex-shrink:1; flex-basis:auto; */
}
.griditemcontent a.buttonLink {
	margin-top: auto;  /* push to the bottom */
	text-decoration: none;
	display: block;
	align-self: center; /* centers the link (and its .button) horizontally */
}
.griditemcontent a.buttonLink .button {
	margin: auto;
}
.griditem UL {
	margin-top: 0.25em;
}
.griditem LI {
	margin-top: 0;
	margin-bottom: 0.25em;
}
.ContentCategoryIcon {
	position: absolute;
	right: -2px;
	top: 0;
	width: 100px;
	height: 100px;
	background-image: url('../images/ContentCategoryIcons.png');
}
.ContentCategoryIcon.sermon {
	background-position: -0px 0px;
}
.ContentCategoryIcon.clock {
	background-position: -100px 0px;
}
.ContentCategoryIcon.university {
	background-position: 0px -100px;
}
.ContentCategoryIcon.sundayschool {
	background-position: -100px -100px;
}
.griditemcontent P:first-child {
	padding-right: 80px;
	margin-top: 0;
}
.lastTileElement {
	margin-bottom: 1em;
}


/* Index page */

#WelcomeImageHolder {
	position: absolute;
	z-index: 0;	
	height: 100%; 
	width: 100%; 	
}
#WelcomeImage {
	background-image: url('../images/carousel1.jpg');
	height: 100%; 
	width: 100%; 
	background-position: center center;
	background-repeat:  no-repeat;
	background-size:  cover;
	background-color: #999;	
}
#WelcomeImage.loading {
	background-image: url('../images/ico_loading.gif');
	background-size: auto;
}

#WelcomeHeading {
	font-size: 3em;
	margin-top: 1.5em;
	margin-bottom: 0.5em;
	color: #ffffff;
}
#WelcomeMessage {
	z-index: 100;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%; 
	height:35%;
	bottom: 0; 
	display: block;
	position: absolute;
	background-color: rgba(0,0,0,0.6);
	color: #fff;
	padding-left: 7%;
	padding-right: 7%;
	padding-bottom: 5%;
}
#WelcomeMessage P {
	font-size: 120%;
	margin-top: 0;
	color: #ffffff;
}
#ScrollDown {
	position: absolute;
	bottom: 10px;
	width: 100%;
	height: 50px;
	background-image: url('../images/ScrollDown.png');
	background-position: center 0px;
	cursor: pointer;
	margin-left: -7%;
}
#ScrollDown.Dark {
	background-position: center -50px;
}
#ScrollDown:hover {
   filter: alpha(opacity=40); /* internet explorer */
    -khtml-opacity: 0.40;      /* khtml, old safari */
    -moz-opacity: 0.40;       /* mozilla, netscape */
    opacity: 0.40;           /* fx, safari, opera */		
}
#IndexPage #section2 {
	background-image: url('../images/largemap.jpg');	
	height: 100%; 
	width: 100%; 
	background-position: center center;
	background-repeat:  no-repeat;
	background-size:  cover;
}

/* Visit Us page */

.SectionImage#communion {
	background-image: url('../images/communion.jpg');
}
.WithBackgroundImage {
	background-position: right bottom;
}
.WithBackgroundImage.Church {
	background-image: url('../images/church.png');	
}
.WithBackgroundImage.Trees3 {
	background-image: url('../images/trees3.png');	
}
.SectionImage#piano {
	background-image: url('../images/piano.jpg');
}
.SectionImage#guitar {
	background-image: url('../images/guitar.jpg');
}

/* About Us page */
.SectionImage#candle {
	background-image: url('../images/candle.jpg');
}
#About #section2 {
	background-image: url('../images/trees.png');	
	background-position: right bottom;
}


/* Our Programs page */
.SectionImage#window {
	background-image: url('../images/window.jpg');
}
#Programs #section2 {
	background-image: url('../images/trees2.png');	
	background-position: right bottom;
}

/* Our Community page */
.SectionImage#dove {
	background-image: url('../images/dove.jpg');
}
#Community #section2 {
	background-image: url('../images/trees.png');	
	background-position: right bottom;
}

/* Login page */
.SectionImage#bread {
	background-image: url('../images/bread-sectionhead.jpg');
}
#Calendar {
	height: 1000px;
}

.ButtonHolder {
	overflow: hidden;
	margin-top: 2em;
}
.ButtonHolder .button {
	float: left;
}
.button {
	background-color: #281f05;
	color: #ffffff;
	border-radius: 12px;
	display: inline-block;
	text-align: center;
	padding-top: 0.65em;
	padding-bottom: 0.65em;
	padding-left: 1.35em;
	padding-right: 1.35em;
	margin-right: 10px;
	margin-bottom: 10px;
}
.button:hover {
   filter: alpha(opacity=70); /* internet explorer */
    -khtml-opacity: 0.70;      /* khtml, old safari */
    -moz-opacity: 0.70;       /* mozilla, netscape */
    opacity: 0.70;           /* fx, safari, opera */		
}



/* Footer */

#footerimage {
	margin-top: 80px;
	height: 230px;
	background-image: url('../images/footer.png');
	background-position: center top;
}
#footer {
	background-color: #281f05;
	padding: 30px;
}
#footer P, #footer A {
	color: #ffffff;
	font-size: 15px;
}
#FooterLinks {
	position: relative;
	width: 1100px;
	height: 230px;
	margin-left: auto;
	margin-right: auto;
}
.FooterLink {
	position: absolute;
	width: 55px;
	height: 50px;
}
.FooterLink:hover {
	background-image: url('../images/FlagHover.png');
}
#FooterLink_CRC {
	left: 694px;
	top: 6px;
}
#FooterLink_CRC:hover {
	background-position: 0px 0px;
}
#FooterLink_FB {
	left: 710px;
	top: 58px;
}
#FooterLink_FB:hover {
	background-position: 0px -50px;
}
#FooterLink_Twitter {
	left: 677px;
	top: 101px;
}
#FooterLink_Twitter:hover {
	background-position: 0px -100px;
}

/* fullPage CSS overrides */

#fp-nav ul li, .fp-slidesNav ul li {
	margin-top: 20px;
}

#fp-nav ul li a span, .fp-slidesNav ul li a span{
	background-color: #ffffff;
	border: 1px solid #999999;
	height: 8px;
	width: 8px;
}
#fp-nav.dark ul li a span {
	background-color: #1a6240;
	border: 1px solid #1a6240;
}
#fp-nav ul li:hover a span, .fp-slidesNav ul li:hover a span {
	 margin-left: -3px;
	 margin-top: -3px;
}

#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span {
	height: 16px;
	width: 16px;
}

.fp-tableCell {
	vertical-align: top;
}


/* Media Queries */

@media all and (max-width: 1250px) {
	P, LI, TD { 
		color: #000000;
	}
	#nav {
		left: 2%;	
	}
	.grid.three {
		grid-template-columns: auto;
	}	
	.griditem {
		margin-right: 0;
		margin-bottom: 2em;
	}	
	.griditem p:first-child {
		margin-top: 1em;
	}
}

@media all and (max-width: 1050px) {
	.SectionImage.Top, .SectionImage {
		height: 130px;
		background-size: 100%;
		background-attachment: scroll;
	}
	#Calendar {
		display: none;
	}
}

@media all and (max-width: 1000px) {
	#MobileMenuToggle {
		display: block;	
	}
	#nav {
		display: none;
		position: relative;
		margin-right: 10%;
		top: 15px;
	}
	.navitem {
		margin-left: 20px;
	}
	.navicon {
		display: none;
	}
	.navtext {
		padding-left: 4px;
		padding-top: 8px;
		padding-bottom: 6px;
		margin-bottom: 0.25em;
	}
	.navtext A {
		text-decoration: underline;
	}
	#header {
		background-size: 128px 37px;
		background-position: right 20px;
	}
	#footerimage, #SocialMediaSidebar {
		display: none;
	}
	.WithBackgroundImage .content {
		background-image: url('../images/transparent.png');
		background-repeat: repeat;
	}
}

@media all and (max-height: 650px){
	#WelcomeMessage {
		height: 50%;
	}
	.content {
		padding-bottom: 100px;
	}	
}
@media all and (max-height: 400px){
	.WithBackgroundImage {
		background-size: 50%;
	}
}


@media all and (max-width: 800px) {
	H1 {
		font-size: 1.5em;
	}
	H2 {
		font-size: 1.3em;
	}
	IMG {
		width: 100%;
		height: auto;
	}
	#WelcomeMessage {
		padding-left: 10%;
		padding-right: 10%;
	}
	#WelcomeHeading {
		font-size: 1.5em;
		margin-top: 0.5em;
		line-height: 100%;
	}
	#WelcomeMessage P {
		font-size: 15px;
	}
	#ScrollDown {
		display: none;
	}
	#fp-nav.left {
		left: 0px;
	}
	.SectionImage.Top, .SectionImage {
		height: 60px;
	}		
	.content {
		padding-left: 10%;
		padding-right: 10%;
	}
	.griditem {
		clear: both;
		width: 100%;
		height: auto;
		margin-bottom: 30px;
	}	
	.griditembanner H3, .griditemcontent {
		padding: 8px;
	}
	.ContentCategoryIcon {
		display: none;
	}
	.griditemcontent P:first-child {
		padding-right: 0px;
		margin-top: 0;
	}	
	.ButtonHolder {
		margin-top: 1em;
		width: 200px;
		margin-left: auto;
		margin-right: auto;
	}
	#PageTitle {
		font-size: 2em;
		margin-bottom: 0;
	}
	.PartialWidth {
		width: 100%;
	}
}