@import url("https://fonts.googleapis.com/css?family=Lato:300,300italic");

/* Basic */
html {
	height: 100%;
}

body {
	background: #fff;
	height: 100%;
	min-width: 320px;
	padding: 0;
}
	body.is-preload *, body.is-preload *:before, body.is-preload *:after {
		-moz-animation: none !important;
		-webkit-animation: none !important;
		-ms-animation: none !important;
		animation: none !important;
		-moz-transition: none !important;
		-webkit-transition: none !important;
		-ms-transition: none !important;
		transition: none !important;
	}

@-moz-keyframes spinner-rotate {
	0% {
		-moz-transform: scale(1) rotate(0deg);
		-webkit-transform: scale(1) rotate(0deg);
		-ms-transform: scale(1) rotate(0deg);
		transform: scale(1) rotate(0deg);
	}

	100% {
		-moz-transform: scale(1) rotate(360deg);
		-webkit-transform: scale(1) rotate(360deg);
		-ms-transform: scale(1) rotate(360deg);
		transform: scale(1) rotate(360deg);
	}
}

@-webkit-keyframes spinner-rotate {
	0% {
		-moz-transform: scale(1) rotate(0deg);
		-webkit-transform: scale(1) rotate(0deg);
		-ms-transform: scale(1) rotate(0deg);
		transform: scale(1) rotate(0deg);
	}

	100% {
		-moz-transform: scale(1) rotate(360deg);
		-webkit-transform: scale(1) rotate(360deg);
		-ms-transform: scale(1) rotate(360deg);
		transform: scale(1) rotate(360deg);
	}
}

@-ms-keyframes spinner-rotate {
	0% {
		-moz-transform: scale(1) rotate(0deg);
		-webkit-transform: scale(1) rotate(0deg);
		-ms-transform: scale(1) rotate(0deg);
		transform: scale(1) rotate(0deg);
	}

	100% {
		-moz-transform: scale(1) rotate(360deg);
		-webkit-transform: scale(1) rotate(360deg);
		-ms-transform: scale(1) rotate(360deg);
		transform: scale(1) rotate(360deg);
	}
}

@keyframes spinner-rotate {
	0% {
		-moz-transform: scale(1) rotate(0deg);
		-webkit-transform: scale(1) rotate(0deg);
		-ms-transform: scale(1) rotate(0deg);
		transform: scale(1) rotate(0deg);
	}

	100% {
		-moz-transform: scale(1) rotate(360deg);
		-webkit-transform: scale(1) rotate(360deg);
		-ms-transform: scale(1) rotate(360deg);
		transform: scale(1) rotate(360deg);
	}
}

/* Loader */

@-moz-keyframes spinner-show {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-webkit-keyframes spinner-show {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-ms-keyframes spinner-show {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes spinner-show {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@-moz-keyframes spinner-hide {
	0% {
		-moz-transform: scale(1) rotate(0deg);
		-webkit-transform: scale(1) rotate(0deg);
		-ms-transform: scale(1) rotate(0deg);
		transform: scale(1) rotate(0deg);
		color: #e5e6e7;
		z-index: 100001;
	}

	99% {
		-moz-transform: scale(0.5) rotate(360deg);
		-webkit-transform: scale(0.5) rotate(360deg);
		-ms-transform: scale(0.5) rotate(360deg);
		transform: scale(0.5) rotate(360deg);
		color: #e5e6e7;
		z-index: 100001;
	}

	100% {
		-moz-transform: scale(0.5) rotate(360deg);
		-webkit-transform: scale(0.5) rotate(360deg);
		-ms-transform: scale(0.5) rotate(360deg);
		transform: scale(0.5) rotate(360deg);
		color: #e5e6e7;
		z-index: -1;
	}
}

@-webkit-keyframes spinner-hide {
	0% {
		-moz-transform: scale(1) rotate(0deg);
		-webkit-transform: scale(1) rotate(0deg);
		-ms-transform: scale(1) rotate(0deg);
		transform: scale(1) rotate(0deg);
		color: #e5e6e7;
		z-index: 100001;
	}

	99% {
		-moz-transform: scale(0.5) rotate(360deg);
		-webkit-transform: scale(0.5) rotate(360deg);
		-ms-transform: scale(0.5) rotate(360deg);
		transform: scale(0.5) rotate(360deg);
		color: #e5e6e7;
		z-index: 100001;
	}

	100% {
		-moz-transform: scale(0.5) rotate(360deg);
		-webkit-transform: scale(0.5) rotate(360deg);
		-ms-transform: scale(0.5) rotate(360deg);
		transform: scale(0.5) rotate(360deg);
		color: #e5e6e7;
		z-index: -1;
	}
}

@-ms-keyframes spinner-hide {
	0% {
		-moz-transform: scale(1) rotate(0deg);
		-webkit-transform: scale(1) rotate(0deg);
		-ms-transform: scale(1) rotate(0deg);
		transform: scale(1) rotate(0deg);
		color: #e5e6e7;
		z-index: 100001;
	}

	99% {
		-moz-transform: scale(0.5) rotate(360deg);
		-webkit-transform: scale(0.5) rotate(360deg);
		-ms-transform: scale(0.5) rotate(360deg);
		transform: scale(0.5) rotate(360deg);
		color: #e5e6e7;
		z-index: 100001;
	}

	100% {
		-moz-transform: scale(0.5) rotate(360deg);
		-webkit-transform: scale(0.5) rotate(360deg);
		-ms-transform: scale(0.5) rotate(360deg);
		transform: scale(0.5) rotate(360deg);
		color: #e5e6e7;
		z-index: -1;
	}
}

@keyframes spinner-hide {
	0% {
		-moz-transform: scale(1) rotate(0deg);
		-webkit-transform: scale(1) rotate(0deg);
		-ms-transform: scale(1) rotate(0deg);
		transform: scale(1) rotate(0deg);
		color: #e5e6e7;
		z-index: 100001;
	}

	99% {
		-moz-transform: scale(0.5) rotate(360deg);
		-webkit-transform: scale(0.5) rotate(360deg);
		-ms-transform: scale(0.5) rotate(360deg);
		transform: scale(0.5) rotate(360deg);
		color: #e5e6e7;
		z-index: 100001;
	}

	100% {
		-moz-transform: scale(0.5) rotate(360deg);
		-webkit-transform: scale(0.5) rotate(360deg);
		-ms-transform: scale(0.5) rotate(360deg);
		transform: scale(0.5) rotate(360deg);
		color: #e5e6e7;
		z-index: -1;
	}
}

@-moz-keyframes overlay-hide {
	0% {
		opacity: 1;
		z-index: 100000;
	}

	15% {
		opacity: 1;
		z-index: 100000;
	}

	99% {
		opacity: 0;
		z-index: 100000;
	}

	100% {
		opacity: 0;
		z-index: -1;
	}
}

@-webkit-keyframes overlay-hide {
	0% {
		opacity: 1;
		z-index: 100000;
	}

	15% {
		opacity: 1;
		z-index: 100000;
	}

	99% {
		opacity: 0;
		z-index: 100000;
	}

	100% {
		opacity: 0;
		z-index: -1;
	}
}

@-ms-keyframes overlay-hide {
	0% {
		opacity: 1;
		z-index: 100000;
	}

	15% {
		opacity: 1;
		z-index: 100000;
	}

	99% {
		opacity: 0;
		z-index: 100000;
	}

	100% {
		opacity: 0;
		z-index: -1;
	}
}

@keyframes overlay-hide {
	0% {
		opacity: 1;
		z-index: 100000;
	}

	15% {
		opacity: 1;
		z-index: 100000;
	}

	99% {
		opacity: 0;
		z-index: 100000;
	}

	100% {
		opacity: 0;
		z-index: -1;
	}
}

body {
	text-decoration: none;
}

	body:before {
		-moz-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important;
		-webkit-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important;
		-ms-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important;
		animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-hide 0.25s ease-in-out forwards !important;
		-moz-transform-origin: 50% 50%;
		-webkit-transform-origin: 50% 50%;
		-ms-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
		font-family: FontAwesome;
		font-style: normal;
		font-weight: normal;
		text-transform: none !important;
		color: #e5e6e7;
		content: '\f1ce';
		cursor: default;
		display: block;
		font-size: 2em;
		height: 2em;
		left: 50%;
		line-height: 2em;
		margin: -1em 0 0 -1em;
		opacity: 0;
		position: fixed;
		text-align: center;
		top: 50%;
		width: 2em;
		z-index: -1;
	}

	body:after {
		-moz-animation: overlay-hide 1.5s ease-in forwards !important;
		-webkit-animation: overlay-hide 1.5s ease-in forwards !important;
		-ms-animation: overlay-hide 1.5s ease-in forwards !important;
		animation: overlay-hide 1.5s ease-in forwards !important;
		background: #fff;
		content: '';
		display: block;
		height: 100%;
		left: 0;
		opacity: 0;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: -1;
	}

	body.is-preload:before {
		-moz-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
		-webkit-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
		-ms-animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
		animation: spinner-show 1.5s 1 0.25s ease forwards, spinner-rotate 0.75s infinite linear !important;
		z-index: 100001;
	}

	body.is-preload:after {
		-moz-animation: none !important;
		-webkit-animation: none !important;
		-ms-animation: none !important;
		animation: none !important;
		opacity: 1;
		z-index: 100000;
	}

@media (-webkit-min-device-pixel-ratio: 2) {

	body:before {
		line-height: 2.025em;
	}

}

section .button,
section button {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
	-moz-transition: background-color 0.2s ease-in-out;
	-webkit-transition: background-color 0.2s ease-in-out;
	-ms-transition: background-color 0.2s ease-in-out;
	transition: background-color 0.2s ease-in-out;
	background-color: #98c593;
	border: 0;
	border-radius: 3.5em;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	height: 3.5em;
	line-height: 3.5em;
	outline: 0;
	padding: 0 2em 0 2em;
	position: relative;
	text-align: center;
	text-decoration: none;
	box-shadow: none;
}
	section .button.down,
	section button.down {
		width: 5em;
		height: 5em;
		line-height: 4.5em;
		padding: 0;
		background-image: url("https://cdn.thejoyfulrich.org/img/dark-arrow.svg");
		background-position: center center;
		background-repeat: no-repeat;
		text-indent: -10em;
		overflow: hidden;
	}
		section .button.down.right,
		section button.down.right {
			transform: rotate(-90deg);
		}

		section input[type="button"].down.anchored,
		section input[type="submit"].down.anchored,
		section input[type="reset"].down.anchored,
		section .button.down.anchored,
		section button.down.anchored {
			bottom: 0;
			border-bottom: 0;
			border-radius: 3em 3em 0 0;
			height: 4.5em;
			margin-left: -2.5em;
		}

	section input[type="button"].anchored,
	section input[type="submit"].anchored,
	section input[type="reset"].anchored,
	section .button.anchored,
	section button.anchored {
		position: absolute;
		left: 50%;
	}

	section input[type="button"]:hover,
	section input[type="submit"]:hover,
	section input[type="reset"]:hover,
	section .button:hover,
	section button:hover {
		background-color: #a8cea4;
	}

	section input[type="button"]:active,
	section input[type="submit"]:active,
	section input[type="reset"]:active,
	section .button:active,
	section button:active {
		background-color: #88bc82;
	}

	section .button.style2,
	section button.style2 {
		background-color: transparent;
		border: solid 2px #e5e6e7;
		color: inherit;
	}

		section input[type="button"].style2:hover,
		section input[type="submit"].style2:hover,
		section input[type="reset"].style2:hover,
		section .button.style2:hover,
		section button.style2:hover {
			background-color: rgba(255, 255, 255, 0.375);
		}

		section input[type="button"].style2:active,
		section input[type="submit"].style2:active,
		section input[type="reset"].style2:active,
		section .button.style2:active,
		section button.style2:active {
			background-color: rgba(255, 255, 255, 0.5);
		}

		section input[type="button"].style2.down,
		section input[type="submit"].style2.down,
		section input[type="reset"].style2.down,
		section .button.style2.down,
		section button.style2.down {
			background-color: rgba(0, 0, 0, 0.1);
			background-image: url("https://cdn.thejoyfulrich.org/img/arrow.svg");
		}



section {
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
} 

	section.text {
		background: radial-gradient(ellipse farthest-corner at 75% 50%, #666660, transparent), radial-gradient(circle farthest-side at 37% 29%, #888880 17%, #33332d);
	}

	section#intro {
		background-image: url("https://cdn.thejoyfulrich.org/img/hp/hp.jpg");
		background-position: center center;
		line-height: 0.7
	}
		section#intro > div:first-child {

		}
	section#intro video {
		width: 100vw;
		height: 100vh;
		object-fit: cover;
	}
	section#intro #intro-text {
		position: absolute;
		width: 100%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		white-space: nowrap;
		padding: 3.25em 4em 3em;
		padding: 5em 0;
		border: 1px solid #fff;
		border-left: none;
		border-right: none;
		background: rgb(0,0,0,0.3);
	}
	section#two {
		background-image: url("https://cdn.thejoyfulrich.org/img/hp/three.jpg");
		background-position: 59% top;
	}
	section#three {
		background-image: url("https://cdn.thejoyfulrich.org/the-7/unreached.jpg");
		background-position: 15% bottom;
	}
	section#four {
		background-image: url("https://cdn.thejoyfulrich.org/the-7/bible.jpg");
		background-position: center bottom;
	}
	section#five {
		background-image: url("https://cdn.thejoyfulrich.org/the-7/us-poor.jpg");
		background-position: 41% top;
	}
	section#six {
		background-image: url("https://cdn.thejoyfulrich.org/the-7/hunger.jpg");
		background-position: 25% top;
	}
	section#seven {
		background-image: url("https://cdn.thejoyfulrich.org/the-7/child-mortality.jpg");
		background-position: left top;
	}
	section#eight {
		background-image: url("https://cdn.thejoyfulrich.org/the-7/trafficking.jpg");
		background-position: right top;
	}
	section#ten {
		background-image: url("https://cdn.thejoyfulrich.org/img/hp/two.jpg");
		background-position: center bottom;
	}
	section#eleven {
		background-image: url("https://cdn.thejoyfulrich.org/img/hp/four.jpg");
		background-position: center top;
	}
	section#twelve {
		background-image: url("https://cdn.thejoyfulrich.org/img/hp/five.jpg");
		background-position: right top;
	}

	section header {
		margin-bottom: 1em;
	}
		section header p {
			display: block;
			margin: 1em 0 0 0;
			padding: 0 0 0.5em 0;
		}
	section footer {
		margin-top: 3em;
	}

.main {
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	position: relative;
	margin: 0;
	overflow-x: hidden;
}

	.main > .content {
		width: 82%;
		max-width: 1200px;
		margin: 0 auto;
		padding: 4.3em 0;
	}
		.main > .content > :last-child {
			margin-bottom: 0;
		}

	.main.fullscreen {
		min-height: 100%;
	}

	.main p {
		font-size: 33px;
		font-weight: 300;
		line-height: 1.4;
		margin-left: auto;
		margin-right: auto;
		color: #f0f0f0;
	}
		.text.main p {
			font-size: 30px;
		}
		section#eight.main p {
			font-size: 27px;
		}
		section#ten.main p {
			font-size: 27px;
		}
		section#twelve.main p {
			font-size: 27px;
		}
		.main p sup { font-size:57%; top:-0.8em }
			.main p sup a { color: #aaa }

	.main.style1 {
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		text-align: center;
	}

		.main.style1 h1 {
			font-size: 3.75em;
			line-height: 1em;
			color: #fff;
			margin: 0 0 0.7em;
			padding: 0;
			text-transform: none;
		}
			.main.style1 h1:after { border: none }
			#intro.main.style1 h1 {
				font-size: 4.25em;
				text-shadow: 1px 1px 3px #000;
			}
				#intro.main.style1 h1 span {
					font-size: 0.97em;
					font-weight: 300;
					display: block;
					margin: -0.05em;
				}

		.main.style1 > .content {
			-moz-transition: opacity 1s ease;
			-webkit-transition: opacity 1s ease;
			-ms-transition: opacity 1s ease;
			transition: opacity 1s ease;
			-moz-transform: translateZ(0);
			-webkit-transform: translateZ(0);
			-ms-transform: translateZ(0);
			transform: translateZ(0);
			opacity: 1;
			margin: 0;
		}
			#intro.main.style1 > .content {
				width: 100%;
				max-width: 100%;
				padding: 0;
			}

		.main.style1.inactive > .content {
			opacity: 0;
		}

	.main.style2 {
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		padding: 3em 0 3em 0;
		overflow: hidden;
	}

		.main.style2 > .content {
			-moz-transition: -moz-transform 1s ease;
			-webkit-transition: -webkit-transform 1s ease;
			-ms-transition: -ms-transform 1s ease;
			transition: transform 1s ease;
			-moz-transform: translateZ(0);
			-webkit-transform: translateZ(0);
			-ms-transform: translateZ(0);
			transform: translateZ(0);
			position: relative;
			width: 49%;
			margin: 0;
		}
			section#three.main.style2 .content {
				width: 42%;
			}
			section#five.main.style2 .content {
				width: 42%;
			}
			section#eight.main.style2 .content {
				width: 55%;
			}
			section#ten.main.style2 .content {
				width: 57%;
			}
			section#twelve.main.style2 .content {
				width: 70%;
			}

		.main.style2.left {
			-moz-justify-content: -moz-flex-start;
			-webkit-justify-content: -webkit-flex-start;
			-ms-justify-content: -ms-flex-start;
			justify-content: flex-start;
		}

		.main.style2.right {
			-moz-justify-content: -moz-flex-end;
			-webkit-justify-content: -webkit-flex-end;
			-ms-justify-content: -ms-flex-end;
			justify-content: flex-end;
		}

		.main.style2.inactive.left > .content {
			-moz-transform: translateX(-100%);
			-webkit-transform: translateX(-100%);
			-ms-transform: translateX(-100%);
			transform: translateX(-100%);
		}

		.main.style2.inactive.right > .content {
			-moz-transform: translateX(100%);
			-webkit-transform: translateX(100%);
			-ms-transform: translateX(100%);
			transform: translateX(100%);
		}

	.main.dark {
		color: #fff;
	}

		.main.dark p > a {
			color: inherit;
			border-bottom: 1px solid #cbdc00;
		}

		.main.dark .button.style2 {
			border-color: #fff;
			background-color: rgba(0, 0, 0, 0.3);
		}

			.main.dark .button.style2:hover {
				background-color: rgba(0, 0, 0, 0.6);
			}

			.main.dark .button.style2:active {
				background-color: rgba(0, 0, 0, 0.8);
			}

			.main.dark .button.style2.down {
				background-image: url("https://cdn.thejoyfulrich.org/img/dark-arrow.svg");
			}

	body.is-touch .main {
		background-attachment: scroll !important;
	}

	.main .content.box {
		padding: 2em 2.5em 2em 2.25em;
		background: #fff;
		background: rgba(0, 0, 0, 0.75);
		border: 1px solid #555;
		border-right: none;
    }
		.main.left .content.box {
			padding: 2em 2.25em 2em 2.5em;
			border: 1px solid #555;
			border-left: none;
		}
		.main .content.box p {
			color: #fff;
		}

@media screen and (max-width: 980px) {

	.main.style1 h1 { font-size: 3.25em; }

	.text.main p { font-size: 28px; }

	.main p {
		font-size: 27px;
	}

	.main.style2 .content {
		width: 60% !important;
	}
		section#eight.main p {
			font-size: 22px;
		}
		section#ten.main.style2 .content {
			width: 75% !important;
		}
			section#ten.main p {
				font-size: 22px;
			}
		section#twelve.main.style2 .content {
			width: 79% !important;
		}
			section#twelve.main p {
				font-size: 22px;
			}

		section#thirteen.text.main p {
			font-size: 25px;
		}

}

@media screen and (max-width: 736px) {

	.main > .content {
		padding: 2.5em 0;
	}

	section .button.down, section button.down {
		font-size: 12px;
		background-size: 50%;
	}

	#intro-text { font-size: 11px }

	section#intro #intro-text {
		padding: 2.5em 0;
	}

	section footer {
		margin-top: 0;
	}

	.main.style1 h1 { font-size: 2.25em; }
		#intro.main.style1 h1 { margin: 0.4em }

	.text.main p { font-size: 22px; }

	.main.left .content.box {
		border: 1px solid #555;
	}

	.main p {
		font-size: 18px !important;
	}

	.main.fullscreen {
		height: auto !important;
	}

	.main.left .content.box {
		padding: 1.75em 1.875em;
	}
		section#ten.main.left .content.box {
			padding: 1.35em 1.75em;
		}

	.main.style2 {
		padding: 3em 15px;
	}
		section#ten.main.style2,
		section#twelve.main.style2 {
			padding: 1em 15px 2.5em;
		}

		.main.style2:before, .main.style2:after {
			display: none !important;
		}

		.main.style2 .content,
		section#ten.main.style2 .content,
		section#twelve.main.style2 .content {
			width: 100% !important;
			max-width: 100% !important;
		}

		.main.style2 .content {
			-moz-transition: opacity 1s ease;
			-webkit-transition: opacity 1s ease;
			-ms-transition: opacity 1s ease;
			transition: opacity 1s ease;
			opacity: 1;
			-moz-transform: none;
			-webkit-transform: none;
			-ms-transform: none;
			transform: none;
		}

		.main.style2.inactive.left > .content,
		.main.style2.inactive.right > .content {
			-moz-transform: translateX(0%);
			-webkit-transform: translateX(0%);
			-ms-transform: translateX(0%);
			transform: translateX(0%);
			-moz-transition: opacity 1s ease;
			-webkit-transition: opacity 1s ease;
			-ms-transition: opacity 1s ease;
			transition: opacity 1s ease;
			opacity: 0.15;
		}

		section#ten.main p {
			font-size: 15.5px !important;
		}
		section#twelve.main p {
			font-size: 15px !important;
		}
		section#thirteen.text.main p {
			font-size: 16px !important;
		}

}

@media screen and (max-width: 480px) {

	section#intro #intro-text {
		white-space: break-spaces;
	}

	.main.style1 h1 { font-size: 2em; }

	#intro.main.style1 h1 {
		margin: 0.4em 1.5em;
	}
		#intro.main.style1 h1 span {
			margin: 0.25em;
			display: inline-block;
		}

	.main > .content {
		width: 85%;
	}

}