/* Reset
------------------------------------------------------------------------------------------------------------------------------------- */

	html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,
	dfn,em,img,ins,q,small, strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,
	tbody,tfoot,thead,tr,th,td,figure,figure img,figcaption { margin: 0; padding: 0; border: 0; }
	article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object { display: block }
	a img { border: 0 }
	img { max-width: 100%; height: auto; }
	figure { position: relative }
	figure img { width: 100% }
    * { -webkit-font-smoothing: antialiased; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
    html, body { -webkit-text-size-adjust: none; }
    li { list-style: none; }

/* Globals
------------------------------------------------------------------------------------------------------------------------------------- */

    body { background: #333 url('../img/bg-wdf-m.jpg') 0 0 / 225% no-repeat; color: #56595A; }

    a, a img { -webkit-transition: opacity .2s, color .2s; -moz-transition: opacity .2s, color .2s; transition: opacity .2s, color .2s; }

	.logo { display: block; padding: 20px 20px 40px; font-family: 'Raleway', 'Helvetica Neue', Helvetica, sans-serif; color: #fff; text-transform: uppercase; font-size: 20px; font-weight: 800; line-height: 16px; }

	.closify span {
		display: inline-block; /*position: absolute; left: 0; right: 5px; width: 35px; */
		transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); vertical-align: middle;
		-o-transition: all .1s linear; -moz-transition: all .1s linear; -khtml-transition: all .1s linear; -webkit-transition: all .1s linear; -ms-transition: all .1s linear; transition: all .1s linear;
		}

	.closify span:first-of-type { opacity: 1; }
	.closify .fa-times { position: absolute; top: 13px; left: 17px; opacity: 0; transform: rotate(-135deg); -moz-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); margin-top: 4px; }
	.closify.open span:first-of-type { opacity: 0; transform: rotate(135deg); -moz-transform: rotate(135deg); -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); }
	.closify.open .fa-times { opacity: 1; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); }

		@media only screen and (min-width: 56.25em) { /* ~900px */
			body { background: url('../img/bg-wdf-alt.jpg') 0 0 / 180% no-repeat; }
			}

		@media only screen and (min-width: 68.75em) { /* ~1100px */
			body { background-size: 100%; }
			}

/* Typography
------------------------------------------------------------------------------------------------------------------------------------- */

    body { position: relative; font-family: 'Lora', serif; font-size: 100%; text-rendering: optimizeLegibility; }

    h1, h2, h3, h4, h5, h6,
	.hero--title__subheading, .cta--nspl,
	.devotions--featured .latest, .btn,
	.page--component span { font-family: 'Raleway', 'Helvetica Neue', Helvetica, sans-serif; }
	h1 { font-size: 42px; font-weight: 800; letter-spacing: -1px; text-transform: uppercase; color: #fff; }
	h2 { font-size:; }
	h3 { font-size:; }

	h1, h2, h3 { margin-bottom: 15px; }

	p { margin-bottom: 30px; line-height: 34px; font-size: 18px; font-weight: 300; letter-spacing: 0.5px; }

    textarea, input, select { font-family: 'Raleway', 'Helvetica Neue', Helvetica, sans-serif; }

	a, [type="submit"] {
    	text-decoration: none; -webkit-backface-visibility: hidden;
    	-o-transition: all .3s linear; -moz-transition: all .3s linear; -khtml-transition: all .3s linear;
        -webkit-transition: all .3s linear; -ms-transition: all .3s linear; transition: all .3s linear;
        opacity: 1; -webkit-appearance: none; color: #fff;
    	}

	a:hover, [type="submit"]:hover { opacity: .95; }

        @media only screen and (min-width: 30em) { /* ~480px */
			h1 { font-size: 66px; }
			}

		@media only screen and (min-width: 37.50em) { /* ~600px */
			}

		@media only screen and (min-width: 48em) { /* ~768px */
			}

		@media only screen and (min-width: 56.25em) { /* ~900px */
			h1 { font-size: 100px; }
			p { font-size: 20px; line-height: 40px; }
			}

		@media only screen and (min-width: 68.75em) { /* ~1100px */
			}

		@media only screen and (min-width: 81.25em) { /* ~1300px */
			}

/* UI Components
------------------------------------------------------------------------------------------------------------------------------------- */

	/* --- Page --- */

		.page { padding: 0; }

		.page--header { width: 100%; padding: 160px 0; text-align: center; }
		.page--header h1 { margin: 0; line-height: 70px; }
		.page--header__subtitle { display: none; font-size: 16px; color: #fff; opacity: .7; }
		.page--header__thin { width: 900px; margin: 0 auto; }
		.page--header__thin h1 { margin-bottom: 20px; }

		.page--footer { background-color: #333; color: #fff; }
		.page--footer > div { margin: 0 auto; padding: 120px 40px; }
		.page--footer h1 { font-size: 26px; }
		.page--footer p { padding-bottom: 15px; }
		.page--footer .cta { margin-bottom: 100px; }
		.page--footer .cta--nspl { border-left: 5px solid #0485ff; padding-left: 15px; font-size: 24px; font-weight: bold; }
		.page--footer .logo { padding: 0 0 30px; }
		.page--footer ul a { display: block; padding-bottom: 10px; }

			@media only screen and (min-width: 30em) { /* ~480px */
				.page--header__subtitle { display: block; }
				}

			@media only screen and (min-width: 48em) { /* ~768px */
				.page--footer > div { display: grid; grid-template-columns: 65% 15%; grid-column-gap: 20%; max-width: 650px; margin: 0 auto; padding: 125px 0; }
				.page--footer .cta { margin-bottom: 0; }
				}

			@media only screen and (min-width: 56.25em) { /* ~900px */
				.page--header { padding: 260px 0; }
				.page--header h1 { line-height: 100px; }
				.page--header__subtitle { display: inline; font-size: 20px; }
				.page--footer > div { max-width: 800px; }
				}

			@media only screen and (min-width: 68.75em) { /* ~1100px */
				.page--footer > div { max-width: 900px; }
				}


	/* --- Page Navigation --- */

		.page--nav { width: 100%; position: relative; }
		.page--nav > .home,
		.page--nav > ul { display: none; }

		.menu-btn {
			display: block; width: 50px; height: 50px; position: absolute; right: 0; top: 0; z-index: 100; font-size: 22px; line-height: 50px;
			text-align: center; color: #fff; cursor: pointer;
			-o-transition: all .3s linear; -moz-transition: all .3s linear; -khtml-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; transition: all .3s linear;
			}

		.page--nav__menu {
			position: fixed; top: 0; right: -200px; z-index: 90; width: 200px; height: 100vh; padding-top: 40px;
			background-color: #333; box-shadow: -3px 1px 12px rgba(0,0,0,.2);
			-o-transition: all .1s linear; -moz-transition: all .1s linear; -khtml-transition: all .1s linear;
	        -webkit-transition: all .1s linear; -ms-transition: all .1s linear; transition: all .1s linear;
			}

		.page--nav__menu.open { right: 0; }
		.page--nav__menu > ul { border-bottom: 1px solid rgba(75,75,75,.5); }
		.page--nav__menu > ul > li { border-top: 1px solid rgba(75,75,75,.5); }
		.page--nav__menu > ul > li > a { display: block; width: 100%; padding: 15px 20px; color: #fff; }
		.page--nav__menu > ul > li > .cta { border-left: 5px solid #0485ff; }
		.page--nav__menu .social,
		.page--nav__menu .social > li { border: 0; }
		.page--nav__menu .social { display: block; text-align: center; padding-top: 30px; }
		.page--nav__menu .social > li { display: inline; }
		.page--nav__menu .social > li > a { display: inline-block; width: 50px; height: 50px; text-align: center; border: 0; font-size: 24px; opacity: .7; }
		.page--nav__menu .social > li > a:hover { opacity: 1; }

			@media only screen and (min-width: 56.25em) { /* ~900px */
				.menu-btn { display: none; }
				.page--nav > ul { display: block; }
				.page--nav > .home { display: block; position: absolute; left: 0; top: 0; padding: 20px 60px; }
				.page--nav > .home .arrow { font-size: 32px; }
				.page--nav > ul { position: absolute; right: 0; top: 0; padding-right: 40px; }
				.page--nav > ul > li { display: inline-block; }
				.page--nav > ul > li > a { display: block; width: 100%; padding: 35px 20px; }
				}

	/* --- Sections --- */

		.section {}
		.section-- {}
		.section-- {}


	/* --- Buttons --- */

		.btn { display: block; padding: 15px 25px; background-color: #d00000; text-align: center; font-size: 18px; }


	/* --- Page Components --- */

		.page--component > * { display: block; max-width: 100%; margin: 100px auto; position: relative; padding: 0 30px; }
		.page--component > a { color: #56595A; }
		.page--component > a > .thumb { border-radius: 20px; }
		.page--component p { margin: 0; }
		.page--component h3 { font-size: 28px; }
		.page--component span { display: block; padding-bottom: 10px; font-weight: 400; text-transform: uppercase; font-size: 20px;  }
		.page--component .thumb { display: block; width: 200px; height: 200px; margin-bottom: 40px; background-color: #ddd; border-radius: 300px; }

			@media only screen and (min-width: 56.25em) { /* ~900px */
				.page--component > * { max-width: 850px; margin: 150px auto; padding-left: 250px;  }
				.page--component .thumb { position: absolute; left: 0; top: 0; margin-bottom: 0; }
				}


	/* --- Home --- */

		.page.home .page--nav > .home { display: none; }
		.page.home .page--nav > ul { position: relative; margin: 0 auto; width: 100%; text-align: center; padding: 0; }

		.page.home .page--header { padding-bottom: 160px; }
		.page.home .page--header h1 { font-size: 54px; line-height: 42px; letter-spacing: -7px; }
		.page.home .page--header__subtitle { display: inline; }

		.devotions { margin-bottom: 140px; }
		.devotions > div { max-width: 90%; margin: 0 auto; }
		.devotions .btn { max-width: 250px; margin: 50px auto; }
		.devotions--featured { display: block; position: relative; max-width: 100%; max-height: 350px; padding: 75px 40px; margin-bottom: 25px; box-shadow: 0 3px 10px 1px rgba(0, 0, 0, 0.2); background-color: #333; background-size: 175%; }
		.devotions--featured .latest { margin-left: -90px; padding-left: 15px; font-size: 16px; font-weight: normal; text-transform: uppercase; border-left: 75px solid #d00000; line-height: 20px; }
		.devotions--featured h2 { margin-bottom: 0; font-size: 36px; text-transform: uppercase; line-height: 32px; letter-spacing: -1px; }
		.devotions--featured time { opacity: .7; }
		.devotions--featured .play { display: none; }

		.devotions--list { width: 100%; margin: 0 auto; }
		.devotions--list li { background-color: #333; }
		.devotions--list--item { display: block; position: relative; width: 100%; height: 200px; margin: 0 auto 25px; padding: 50px 40px; background-color: #333; }
		.devotions--list--item time { display: block; padding-bottom: 5px; font-size: 18px; opacity: .7; }
		.devotions--list--item h3 { width: 100%; margin-bottom: 0; font-size: 36px; text-transform: uppercase; line-height: 32px; letter-spacing: -1px; }

		.about { background-color: #f5f5f5; padding: 120px 40px; }
		.about > div { max-width: 550px; margin: 0 auto; }
		.about h1 { margin-bottom: 30px; font-size: 44px; line-height: 42px; color: #56595A; }
		.about p { margin-bottom: 40px; }
		.about .btn { max-width: 175px; }

			@media only screen and (min-width: 30em) { /* ~480px */
				.devotions--featured { background-size: 100%; }
				.page.home .page--header h1 { font-size: 66px; line-height: 54px; }
				}

			@media only screen and (min-width: 48em) { /* ~768px */
				.devotions { margin-bottom: 200px; }
				.devotions > div { max-width: 650px; }
				.devotions--featured { max-width: 650px; padding: 125px 75px; background-size: 100%; }
				.devotions--featured .latest { font-size: 20px; }
				.devotions--featured h2 { font-size: 52px; line-height: 44px; }
				.devotions--list { width: 600px; }
				.devotions--list--item { width: 600px; padding: 50px 65px; }
				.devotions--list--item h3 { width: 65%; font-size: 38px; }
				.about { padding: 150px; }
				.about h1 { font-size: 52px; line-height: 46px; }
				}

			@media only screen and (min-width: 56.25em) { /* ~900px */
				.page.home .page--header { padding-bottom: 200px; }
				.page.home .page--header h1 { font-size: 148px; line-height: 114px; }
				}


    /* --- Article --- */

		.page.article .hero > div { position: relative; width: 100%; max-width: 300px; margin: 0 auto; padding: 180px 10px; }
		.page.article .hero--title time { display: block; opacity: .7; color: rgba(255,255,255,.8); }
		.page.article .hero--title h1 { margin-bottom: 0; font-size: 52px; text-transform: uppercase; letter-spacing: -2px; line-height: 44px; }
		.page.article .hero--title__subheading { font-size: 24px; font-weight: 500; text-transform: uppercase; color: #fff; }
		.page.article .hero--title__scripture { position: absolute; font-size: 20px; opacity: .7; color: rgba(255,255,255,.8); }

		.hero--social { display: grid; grid-template-columns: 50px 50px 50px; position: absolute; bottom: -20px; right: 0; }
		.hero--social a { display: block; height: 40px; line-height: 40px; background-color: #26E5DB; text-align: center; color: #fff;  }
		.hero--social .hero--social__twitter { background-color: #55C1F0; }
		.hero--social .hero--social__facebook { background-color: #1947B6; }

		.article--component { padding-bottom: 30px; background-color: #fff; }
		.article--component > div { margin: 0 auto; padding: 0 30px; }
		.article--component h2 { font-weight: normal; font-size: 30px; padding-bottom: 30px; }
		.article--component__passage { display: block; padding-bottom: 0; background-color: #fafafa; }
		.article--component__passage p { margin: 0 auto; padding: 100px 30px; font-size: 22px; line-height: 30px; font-weight: bold; letter-spacing: -.3px; }
		.article--component__passage span { font-style: italic; font-weight: normal; }
		.article--component__context { padding-top: 100px; }
		.article--component__summary { padding-bottom: 100px; }
		.article--component__summary h2 { padding: 0 0 0 10px; border-left: 30px solid #d00000; margin: 0 0 30px -40px; }
		.article--component__summary p:last-of-type { margin: 0; }
		.article--component__pursuit { padding: 100px 0; background-color: rgba(220,220,220,.2); }
		.article--component__pursuit .pursuit-introduction { font-style: normal; }
		.article--component__pursuit .pursuit-introduction > span { font-style: italic; }
		.article--component__pursuit p { padding-bottom: 30px; border-bottom: 1px solid #dedede; font-style: italic; }
		.article--component__pursuit p > span { font-style: normal; }
		.article--component__pursuit p:last-of-type { border: none; padding: 0; margin: 0; }
		.article--component__full { padding: 100px 30px; }
		.article--component__full p { max-width: 650px; margin: 0 auto; padding-bottom: 30px; }
		.article--component__full p:last-of-type { padding-bottom: 0; }
		.article.story .article--component__pursuit p { font-style: normal; }

			@media only screen and (min-width: 56.25em) { /* ~900px */
				.page.article .hero > div { max-width: 650px; margin: 0 auto; padding: 300px 0 240px; }
				.page.article .hero--title h1 { font-size: 112px; line-height: 90px; }
				.page.article .hero--title__subheading { font-size: 40px; }
				.hero--social { bottom: -20px; right: -60px; }
				.article--component { padding-bottom: 60px; }
				.article--component > div { width: 950px; margin: 0 auto; padding: 0; display: grid; grid-template-columns: 35% 60%; grid-column-gap: 5%; }
				.article--component h2 { font-size: 24px; text-align: right; padding: 0 40px 20px 0; border-right: 1px solid #dedede; }
				.article--component__passage { padding-bottom: 0; }
				.article--component__passage p { max-width: 650px; margin: 0 auto; padding: 150px 0; font-size: 26px; line-height: 36px; }
				.article--component__context { padding-top: 150px; }
				.article--component__summary { padding-bottom: 150px; }
				.article--component__summary h2 { padding: 0 40px 20px 0; border-left: 0; margin-left: 0; border-color: #d00000; }
				.article--component__pursuit { padding: 150px 0; }
				.article--component__full { padding: 150px 0; }
				}



			@media only screen and (min-width: 30em) { /* ~480px */ }
			@media only screen and (min-width: 37.50em) { /* ~600px */ }
			@media only screen and (min-width: 48em) { /* ~768px */ }
			@media only screen and (min-width: 68.75em) { /* ~1100px */ }
			@media only screen and (min-width: 81.25em) { /* ~1300px */ }