@charset "utf-8";

* {
	margin: 0px;
	padding: 0px;
	font-family: Poppins, sans-serif;
	box-sizing: border-box;
}

body {
	overflow-x: hidden;
}

main {
	margin: 5em 0%;
}

.splash-page {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: #000;
	z-index: 500;
}

.display-none {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	opacity: 0;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #000;
	z-index: -500;
}

.splash-page > img {
	width: 20rem;
	height: auto;
}

@keyframes splashFadeIn {
	to {
		opacity: 1;
	}
}

.splash-fade-in {
	opacity: 0;
	animation: splashFadeIn 1s ease-in forwards;
}

section.row {
	display: grid;
	grid-gap: 1em;
	max-width: 75em;
	margin: 2em auto;
	padding: 1.5em;
}

/*
	=================
	   Base Styles
	=================
*/

h1 {
	font-size: 4rem;
	text-transform: uppercase;
}

h2 {
	font-size: 1.875rem;
	text-transform: uppercase;
	margin-bottom: 25px;
}

h3 {
	font-size: 1.5rem;
}

h4 {
	font-size: 1.25rem;
}

p {
	font-size: 1rem;
	line-height: 1.5;
	font-weight: 200;
}

button {
	width: 10em;
	height: 2.5em;
	margin-top: 25px;
	background-color: #3486eb;
	color: #fff;
	border: none;
	cursor: pointer;
}

input[type="checkbox"] {
	color: #000;
	width: 2em;
	margin-right: .5em;
}

label[for="checkbox"] {
	margin-bottom: 5px;
}

.checkbox {
	display: flex;
	align-items: flex-end;
	grid-column: 1/3;
	border: none;
}

input#send-email-button {
	margin-top: .5em;
}

.row-start-10 {
	grid-row-start: 10;
}

.disabled {
	display: none;
}

.enabled {
	display: block;
}

input {
	width: 10em;
	height: 2.5em;
	margin-top: 25px;
	background-color: #3486eb;
	color: #fff;
	border: none;
}

.services-card {
	width: 350px;
}

.services-card img {
	width: 350px;
	height: 200px;
}

.services-card h4 {
	margin: 1em 0em;
}

.services-card h5 {
	margin-top: 1em;
}

.align-self-center {
	align-self: center;
}

.margin-bottom-1em {
	margin-bottom: 1em;
}

form.col-1-4 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 0em 1em;
	grid-column: 1/4;
}

input[type="text"], [type="email"] {
	font-size: 1rem;
	background-color: #f0f0f0;
	color: #000;
	outline: none;
}

label[type="title"] {
	font-size: .75rem;
	margin-top: 1em;
}

textarea.col-1-3 {
	grid-column: 1/3;
	background-color: #f0f0f0;
	border: none;
	outline: none;
}

label.col-1-2 {
	grid-column: 1/2;
}

label.col-2-3 {
	grid-column: 2/3;
}

input.col-1-2 {
	grid-column: 1/2;
	width: 100%;
	margin: 0em;
}

input.col-2-3 {
	grid-column: 2/3;
	width: 100%;
	margin: 0em;
}

input.col-1-3 {
	grid-column: 1/3;
	width: 100%;
	margin: 0em;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

p a.icons {
	font-size: 1.2rem;
	color: #000;
	text-decoration: none;
}

i.fa-home, i.fa-phone, i.fa-envelope {
	border: 2px solid #3486eb;
	border-radius: 50%;
	padding: 1em;
	margin: .5em .5em .5em 0em;
	color: #3486eb;
}

/* Header & Navbar Styles */

header.mainHeader {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100vh;
	background-color: #F0F0F0;
	background-image: url(heroImage3.png);
	background-size: cover;
	background-position: center;
	
}

.color {
    color: #000;
}

header.pageHeader {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 50vh;
	background-color: #F0F0F0;
}

header div.container {
	width: 35em;

	margin: 10em auto;
}

nav.headerNav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 15vh;
}

nav.headerNav a#logo {
	width: 16em;
	margin-left: 10%;
}

ul#slideNav {
	width: 18em;
	height: 100vh;
	background-color: #fff;
	padding: 5em 2em 0em 2em;
	position: fixed;
	box-shadow: #f0f0f0 0px 1px 5px;
	top: 0px;
	right: 0px;
	transition: .3s linear;
	z-index: 50;
}

ul#slideNav li {
	width: inherit;
	height: 3em;
	text-align: right;
	padding-right: 4em;
}

ul#slideNav a {
	font-size: 1.3rem;
	color: #000;
}

ul.slideNav-hidden {
	transform: translateX(20em);
}

ul.slideNav-displayed {
	transform: translateX(0em);
}

div#hamburger {
	font-size: 2rem;
	margin-right: 10%;
	margin-bottom: 0px;
	color: #ff5d58;
}

div#hamburger:hover {
	cursor: pointer;
}

li#hamburger-hidden {
	cursor: pointer;
}

header div.fade-in-container {
	position: relative;
	top: 30%;
	margin: 0 auto;
	text-align: center;
	color: #000;
	z-index: 1;
}

div.fade-in {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

p#fade-in-first {
	font-size: 1.5rem;
	margin: 0em .5em;
	font-weight: 600;
	animation-name: reveal;
	animation-duration: 4s;
    color: #ff5d58;
}

p#fade-in-second {
	font-size: 1.5rem;
	margin: 0em .5em;
	font-weight: 600;
	animation-name: reveal;
	animation-duration: 7s;
    color: #ff5d58;
}

p#fade-in-last {
	font-size: 1.5rem;
	margin: 0em .5em;
	font-weight: 600;
	animation-name: reveal;
	animation-duration: 8s;
    color: #ff5d58;
}

@keyframes reveal {
	from {opacity: 0;}
	to {opacity: 1;}
}

/* Main Styles */

.video-section {
	width: 100%;
}

.video-info {
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: baseline;
}

.video-info h2 {
	margin: 0px;
}

img.boxShadow {
    box-shadow: rgb(51, 51, 51) 5px 5px 10px;
}

div.churchImg1 {
	width: 350px;
	height: 200px;
	background-image: url(landonpraying.png);
	background-position: center center;
	background-size: cover;
}

div.churchImg2 {
	width: 350px;
	height: 200px;
	background-image: url(bible.png);
	background-position: center center;
	background-size: cover;
}

div.churchImg3 {
	width: 350px;
	height: 200px;
	background-image: url(landonpreaching\ \(1\).png);
	background-position: center center;
	background-size: cover;
}

/* Footer Styles */

footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	padding: 2em;
	background-color: #08132f;
	box-sizing: border-box;
}

footer h3, p, a {
	letter-spacing: .05em;
}

div.footerlogo {
	background-image: url(whitelogo.png);
	background-size: cover;
	background-position: center center;
}

footer img {
	margin-bottom: 1em;
}

footer h3 {
	font-weight: 400;
	margin: .5em 0em;
	color: #fff;
}

footer p {
	color: #C5C5C5;
}

footer .a-container-1 {
	width: 30em;
}

footer ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

footer li {
	padding: 0em .25em;
	list-style: none;
}

footer a {
	font-size: 1rem;
	text-decoration: none;
	color: #C5C5C5;
}

footer div {
	margin-bottom: 1em;
}

hr {
	margin: 1em 0em 1.5em 0em;
}

.social-icons {
	display: flex;
	align-items: center;
}

.social-icons a {
	font-size: 1.5rem;
}

.social {
	  margin: 0px 20px;
	  width: 30px;
	  text-align: center;
	  text-decoration: none;
	  color: #fff;
}


/*	======================================
		Mobile Styles: 0 to 640 pixels
	======================================
*/

@media only screen and (max-width: 640px) {
	
	header {
		height: 70vh;
	}
	
	.services-card img {
	    width: 350px;
		height: auto;
	}
	
	section.row {
		grid-template-columns: 1fr;
	}
	
	h2.col-sm {
		grid-column: 1/5;
		margin-bottom: 0em;
	}
	
	p.col-sm {
		grid-column: 1/5;
		margin-bottom: 0em;
	}
	
	h3.col-sm {
		grid-column: 1/7;
		margin-bottom: 0em;
	}
	
	div.col-sm {
		grid-column: 1/7;
	}
	
	p.icons {
		font-size: 1rem;
	}
}

/*	===========================================================
	   Tablet Styles: min-width: 641px and max-width: 1007px
	===========================================================
*/

@media only screen and (min-width: 641px) {
	section.row {
		grid-template-columns: 2fr;
	}
	
	h2.col-md-1-3 {
		grid-column: 1/5;
		margin-bottom: 0em;
	}
	
	p.col-md-1-3 {
		grid-column: 1/5;
		margin-bottom: 0em;
	}
	
	h3.col-md-1-3 {
		grid-column: 1/3;
		margin-bottom: 0em;
	}
	
	div.col-md-1-2 {
		grid-column: 1/2;
	}
	
	div.col-md-1-3 {
		grid-column: 1/3;
	}
	
	div.col-md-2-3 {
		grid-column: 2/3;
	}
}

/*	===========================================================
	   Tablet Styles: min-width: 1008px
	===========================================================
*/

@media only screen and (min-width: 1008px) {

	section.row {
		grid-template-columns: repeat(6, 1fr);
	}
	
	h3.col-1-7 {
		grid-column: 1/7;
		margin-bottom: 0em;
	}
	
	h2.col-1-5 {
		grid-column: 1/5;
		margin-bottom: 0em;
	}
	
	p.col-1-7 {
		grid-column: 1/7;
		margin-bottom: 0em;
	}
	
	p.col-1-5 {
	    grid-column: 1/5;
	}
	
	div.col-1-7 {
		grid-column: 1/7;
		margin-bottom: 0em;
	}
	
	div.col-1-5 {
		grid-column: 1/5;
		margin-bottom: 0em;
	}

	div.col-1-4 {
		grid-column: 1/4;
	}

	div.col-4-7 {
		grid-column: 4/7;
	}

	div.col-1-3 {
		grid-column: 1/3;
	}

	div.col-3-5 {
		grid-column: 3/5;
	}

	div.col-5-7 {
		grid-column: 5/7;
	}
	
	form.col-1-5 {
		grid-column: 1/5;
	}
}