/* ================================================================================== */
/* == Normalize.css v3.0.2 ========================================================== */
/* ================================================================================== */

html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background-color: transparent; } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } h1 { font-size: 2em; margin: 0.67em 0; } mark { background: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 1em 40px; } hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } textarea { overflow: auto; } optgroup { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; }

*, *:before, *:after { margin: 0; padding: 0; -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important; list-style: none; }



/* ================================================================================== */
/* == General Styles ================================================================ */
/* ================================================================================== */

html,body { background: #fff; color: #747474; font-family: 'Fira Sans', sans-serif; line-height: 1.45; overflow-x: hidden; font-size: 16px; }
/*.container { max-wid/th: 1024px; margin: 0 auto; background: #fff; position: relative; }
.container:after { content: ""; display: table; clear: both;}*/

a { text-decoration: none; color: red;
-webkit-transition: all 0.218s;
-moz-transition: all 0.218s;
-ms-transition: all 0.218s;
-o-transition: all 0.218s;
transition: all 0.218s; }
a:hover { color: blue; }

h1, h2, h3, h4, h5 { color: #535c65; }



/* ================================================================================== */
/* == Header ======================================================================== */
/* ================================================================================== */

#header { /*position: absolute; top: 0; left: 0; width: 200px; z-index: 9;*/ background: #fff; padding: 0 20px; overflow: hidden; }
.logo { display: block; width: 200px; height: 200px; background: url(img/healthy-jasper.png) no-repeat center; background-size: 107px 123px; text-indent: -9999px; margin: 0 auto; }

#menu-toggle {  display: block; width: 100%; padding: 7px 10px; margin: -10px 0 20px 0; border: 0; outline: none; background: #7AAF38; color: #fff; overflow: hidden; white-space: nowrap; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border: 1px solid #7AAF38; border-radius: 3px; cursor: pointer;  }
#menu-toggle img { float: right; width: 32px; height: 19px; }
#menu-toggle:hover, #header #menu-toggle:focus { }




/* ================================================================================== */
/* == Slideout Side Navigation ====================================================== */
/* ================================================================================== */

.container {  margin: 0 auto; max-width: 1280px; }
.container:after { content: ""; display: table; clear: both; }

#main {  }

#content, #home { margin-left: 200px; padding: 45px 60px; padding:5% 6%; /*border-left: 1px solid #E9EBEC;*/ min-height: 570px; }

#side-nav { width: 200px; position: absolute; left: -200px; top: 0; background: #fff; z-index: 99; }


/*Navigation*/
#main-nav {  }
#main-nav ul { overflow: hidden; margin: 0; font-weight: 600; text-transform: uppercase; font-size: 14px; border-top: 1px dotted #E9EBEC; }
#main-nav ul li {  border-bottom: 1px dotted #E9EBEC; }
#main-nav ul li a { display: block; padding: 10px 25px; color: #747474; background: url(img/icon-arrow-right.png) no-repeat 170px 14px; background-size: 6px 88px; }
#main-nav ul li a:hover { background-color: #f7f7f7; }
#main-nav ul li a.active {  background-color: #7AAF38; color: #fff; background-position: 170px -62px;}

.openNav #wrapper { left: 0;
-webkit-transform: translate3d(200px, 0, 0);
-moz-transform: translate3d(200px, 0, 0);
-ms-transform: translate3d(200px, 0, 0);
-o-transform: translate3d(200px, 0, 0);
transform: translate3d(200px, 0, 0);
-webkit-transition: -webkit-transform 500ms ease;
-moz-transition: -moz-transform 500ms ease;
-o-transition: -o-transform 500ms ease;
transition: transform 500ms ease;
}
#wrapper { left: 0;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 500ms ease;
-moz-transition: -moz-transform 500ms ease;
-o-transition: -o-transform 500ms ease;
transition: transform 500ms ease;
}

@media only screen and (min-width: 770px) {
	#side-nav { position: absolute; top: 0; left: 0; width: 200px; }
	#header { display: none; }
}
@media only screen and (min-width: 770px) and (min-height: 550px) {
	#wrapper, .openNav #wrapper { -webkit-transform: none !important; transform: none !important; }
	#side-nav {  -webkit-transform: none !important; transform: none !important; }
	.side-container { position: fixed; top: 0; left: 0;  z-index: 999; width: 200px;  }
}
@media only screen and (max-width: 770px) {
	#content, #home { margin: 0; border: none; padding: 7% 6%;}
	#side-nav .logo { display: none; }
}




/* ================================================================================== */
/* == Content ======================================================================= */
/* ================================================================================== */


#content { 
background: -webkit-linear-gradient(90deg, #3F6C38 10%, #5E943A 90%);
background:    -moz-linear-gradient(90deg, #3F6C38 10%, #5E943A 90%);
background:     -ms-linear-gradient(90deg, #3F6C38 10%, #5E943A 90%);
background:      -o-linear-gradient(90deg, #3F6C38 10%, #5E943A 90%);
background:         linear-gradient(90deg, #3F6C38 10%, #5E943A 90%); }

article p { margin: 1.5em 0; }
article h1 { font-size: 2.8em; margin: 0 0 .13em 0; font-weight: 600; }
article h2 { font-size: 2em; margin: 2em 0 .5em 0; font-weight: 400; color: #7AAF38; }
article h3 { font-size: 1.5em; margin: 2.5em 0 .5em 0; }
article h4 { font-size: 1em; margin: 1.33em 0; }
article h5 { font-size: .83em; margin: 1.67em 0; }
article h6 { font-size: .75em; margin: 2.33em 0; }

h2 + h3 { margin-top: 0; }

blockquote { display: none; padding: 5px 20px; background: #f7f7f7; border: 1px solid #e5e5e5; font-size: 13px; margin: 2em 0; position: relative; border-radius: 4px;}
blockquote h4 { color: #7AAF38; margin-bottom: -0.5em; position: absolute; top: -30px; left: 10px; font-size: 12px; background: #7AAF38; color: #fff; padding: 3px 10px; border-radius: 3px; box-shadow: 0px 1px 2px rgba(0,0,0,0.15); }
blockquote h4.warning { background: #F85A5C; }


.post-content { background: #fff url(img/line-height.gif); padding: 45px 60px; border-radius: 8px; box-shadow: 0px 2px 10px rgba(0,0,0,0.35); z-index: 999; position: relative; line-height: 1.5em;
/*padding: 45px 35% 45px 60px ;*/
}

.post-content header { border-bottom: 1px solid #E9EBEC; }
.post-content header h1 { margin: 0 0 .35em 0; }

.post-content a { text-decoration: underline; color: #7AAF38; }
.post-content a:hover { color: #008bce; }

.lead { display: none; font-family: 'Merriweather', serif; font-size: 1.3em; line-height: 1.5em; font-style: italic; }

.bible-text { overflow: hidden; }
.bible-text p { color: #7AAF38; }
.bible-text  cite { float: right; font-family: 'Fira Sans', sans-serif; font-style: normal; font-weight: 500; }

.lead.bible-text { border-bottom: 1px solid #E9EBEC; padding-bottom: 1em; }

article ul { margin: 1em; }
article ul li { padding-left: 23px; background: url(img/icon-circle-outline.svg) no-repeat left 5px; background-size: .8em; }

article img.right { float: right; width: 50%; }

/*article .aside-right { float: right; background: #eee; width: 50%; margin-right: -60%; padding: 25px; font-size: 13px; border-bottom: 1px solid #E9EBEC; }
article .aside-right h4 { font-family: 'Merriweather', serif; font-weight: 400; color: #7AAF38; border-bottom: 1px solid #E9EBEC;}*/

.secondary-lead { margin: -1em 0 0 0; }


ul.list-with-pics {  }
ul.list-with-pics img { width: 90px; float: left; margin-right: 15px; }
ul.list-with-pics li { overflow: hidden; }


/* ================================================================================== */
/* == Sidebar ======================================================================= */
/* ================================================================================== */

#sidebar { }



/* ================================================================================== */
/* == Footer ======================================================================== */
/* ================================================================================== */

#footer {  clear: both;  overflow: hidden; padding: 25px; background: #fff; font-size: 12px; color: #989898; border-top: 1px solid #ddd; position: relative; z-index: 2; }
#footer p { margin: 0; }
#footer .copyright { float: left; }
#footer p.citizens { float: right; }
#footer a { text-decoration: underline; color: #7AAF38; }
#footer a:hover { color: #008bce; }

@media only screen and (max-width: 550px) {
	#footer p { float: none !important; text-align: center; margin-bottom: 5px; }
}



/* ================================================================================== */
/* == Homepage ====================================================================== */
/* ================================================================================== */

#home { padding: 0 !important; background: #C1B1A9 url(img/pics/family-walking4.jpg); /*background: url(img/pics/cutting-board.jpg);*/ /*background: #C1B1A9 url(img/pics/dirt.jpg);*/ background-size: 100% auto; overflow: hidden; }


.home-grid { overflow: hidden; padding: 2%;}
.home-grid li { float: left ; background: #fff; background: rgba(255,255,255,0.75); border: 1px solid #fff; width: 21%; margin: 2%;  box-shadow: 0px 2px 5px rgba(0,0,0,0.3); position: relative; }
.home-grid li a { display: block; color: #535c65; padding: 0.6em; }
.home-grid li a:hover {	background: #fff; }
.home-grid li a:hover:after { content: "Read More"; position: absolute; right: .7em; bottom: 16px; color: #7AAF38; border-radius: 5px; font-size: 12px; text-transform: uppercase; }
.home-grid img { display: block; width: 100%; margin-bottom: 0.6em; }
.home-grid h3 {	font-size: 22px; font-weight: 600; }

@media only screen and (max-width: 700px) {
	.home-grid li { width: 29%;	}
}
@media only screen and (max-width: 480px) {
	.home-grid li { width: 46%;	}
	.home-grid h3 { font-size: 18px; }
}


.hero { margin: 100px auto 70px auto; width: 650px; border: 1px solid rgba(255,255,255,0.6); color: #fff; font-weight: 700; font-size: 2.4em; font-style: italic;  background: rgba(123,178,59,0.75); background: rgba(89,148,54,0.75); position: relative; text-align: center; box-shadow: 0px 3px 15px rgba(0,0,0,0.35); }
.hero h1 { color: #fff; text-shadow: 0px 2px 4px rgba(0,0,0,0.5); margin: .45em 0 .7em 0; }
.hero h2 { position: absolute; width: 550px; text-align: center; font-size: 24px; font-weight: 600; background: #fff; border-top: 4px solid #7AAF38; padding: 5px; left: 50%; bottom: -20px; margin-left: -275px; box-shadow: 0px 4px 8px rgba(0,0,0,0.3); }

@media only screen and (max-width: 900px) {
	.hero { width: 85%;	}
	.hero h1 { font-size: 1.5em; margin: .45em 0; }
	.hero h2 { width: 100%; margin: 0; position: static; font-size: 20px; padding: 5px 10px; }
}
@media only screen and (max-width: 500px) {
	.hero { margin: 3em auto 0 auto; width: 93%; background: rgba(255,255,255,0.85); border: 1px solid #fff; }
	.hero h1  { font-size: 1.25em; line-height: 1em; display: none;}
	.hero h2 { font-size: 18px; padding: 1em 1.25em; background: none; border: none; }
}





/* ================================================================================== */
/* == Pages ========================================================================= */
/* ================================================================================== */

/*#content.post-water {
background: -webkit-linear-gradient(90deg, #4b6cb7 10%, #182848 90%);
background:    -moz-linear-gradient(90deg, #4b6cb7 10%, #182848 90%);
background:     -ms-linear-gradient(90deg, #4b6cb7 10%, #182848 90%);
background:      -o-linear-gradient(90deg, #4b6cb7 10%, #182848 90%);
background:         linear-gradient(90deg, #4b6cb7 10%, #182848 90%); }

#content.post-air {background: url(img/pics/clouds.jpg); background-size: 100% auto;}
#content.post-air:after { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.7; margin-left: 200px;
  background: -webkit-linear-gradient(90deg, #7474BF 10%, #348AC7 90%);
  background:    -moz-linear-gradient(90deg, #7474BF 10%, #348AC7 90%);
  background:     -ms-linear-gradient(90deg, #7474BF 10%, #348AC7 90%);
  background:      -o-linear-gradient(90deg, #7474BF 10%, #348AC7 90%);
  background:         linear-gradient(90deg, #7474BF 10%, #348AC7 90%);
}


#content.post-nutrition {  background: url(img/pics/lettuce.jpg); background-size: 100% auto;}
#content.post-nutrition:after {  content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.7; margin-left: 200px;
background: -webkit-linear-gradient(90deg, #3F6C38 10%, #5E943A 90%);
background:    -moz-linear-gradient(90deg, #3F6C38 10%, #5E943A 90%);
background:     -ms-linear-gradient(90deg, #3F6C38 10%, #5E943A 90%);
background:      -o-linear-gradient(90deg, #3F6C38 10%, #5E943A 90%);
background:         linear-gradient(90deg, #3F6C38 10%, #5E943A 90%);
}




@media only screen and (max-width: 770px) {
	#content:after { margin-left: 0 !important; }
}*/

#content { background: url(img/pics/dirt.jpg) fixed; background-size: 100% auto; }
#content:after {  content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.2; margin-left: 200px; z-index: 1;
background: -webkit-linear-gradient(90deg, #3F6C38 10%, #5E943A 90%);
background:    -moz-linear-gradient(90deg, #3F6C38 10%, #5E943A 90%);
background:     -ms-linear-gradient(90deg, #3F6C38 10%, #5E943A 90%);
background:      -o-linear-gradient(90deg, #3F6C38 10%, #5E943A 90%);
background:         linear-gradient(90deg, #3A251B 10%, #57433A 90%);}




@media only screen and (max-width: 500px) {
	#content{ padding: 0; border-top: 1px solid #E9EBEC;}
	.post-content { border-radius: 0; box-shadow: none; padding: 7%; }
}


/* ================================================================================== */
/* == Contact Page ================================================================== */
/* ================================================================================== */

#contact input,#contact textarea {
	border: 2px solid #e5e5e5;
	border-radius: 5px;
	padding: 12px 18px;
	display: block;
	width: 100%;
	margin-bottom: 1em
}

#contact input:focus, #contact textarea:focus {
	outline: 0;
	border-color: #4072B9
}

#contact textarea {
	min-height: 120px
}

#contact input.submit-button {
	border-radius: 5px;
	padding: 18px 18px;
	display: inline-block;
	text-transform: uppercase;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	background: #3996C9;
	border: none;
	color: #fff
}

#contact input.submit-button:hover {
	background: #72BA1C
}