body {
	overflow-x:hidden;
	background-color:#000;
}

.container {
	max-width:860px;
	margin:0 auto;
	padding:0 4%;
}

.full .container {
	max-width:none;
	margin:0 auto;
	padding:0 4%;
}

header {
	background-color:#fff;
	position:fixed;
	height:100%;
	box-shadow:0 0 10px rgba(0,0,0,0.2);
	width:80px;
	left:0;
	top:0;
	overflow:hidden;
	transition:width 300ms;
	z-index:10;
}

header.on {
	width:250px;
}

header h1 {
	text-align:center;
	border-bottom:solid 1px #ddd;
	line-height:0;
}

header h1 a {
	display:inline-block;
	width:80px;
	height:0;
	padding-top:80px;
	overflow:hidden;
	background-image:url('../images/encounter-church.png');
	background-size:50px 50px;
	background-position:center center;
	background-repeat:no-repeat;
	line-height:1em;
}

header .navicon {
	display:block;
	padding:20px 0 30px;
	cursor:pointer;
	text-align:center;
	border-bottom:solid 1px #ddd;
}

header .navicon a {
	display:inline-block;
	position:relative;
	width:30px;
	transition: all 300ms ease-in-out;
}

header .navicon a span, header .navicon a span:before, header .navicon a span:after {
	cursor: pointer;
	border-radius: 1px;
	height: 2px;
	width: 30px;
	background-color: #db4800;
	position: absolute;
	display: block;
	content: '';
}

header .navicon a span:before {
	top: -12px;
}

header .navicon a span:after {
	top: 12px; 
}

header .navicon a span, header .navicon a span:before, header .navicon a span:after {
	transition: all 300ms ease-in-out;
}

header .navicon.on a {
	transform:rotate(180deg);
	-webkit-transform:rotate(180deg);
}

header .navicon.on a span {
	background-color: transparent;
}

header .navicon.on a span:before, header .navicon.on a span:after {
	top: 0;
}

header .navicon.on a span:before {
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}

header .navicon.on a span:after {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}

header nav {
	opacity:0;
	transition:opacity 300ms;
}

header.on nav {
	opacity:1;
}

header nav ul li a {
	display:block;
	white-space:nowrap;
	text-align:center;
	padding:1.5em 0;
	font-size:1.25em;
	transition:background-color 250ms;
}

header nav ul li a:hover {
	background-color:#eee;
}

header nav ul.social {
	position:absolute;
	bottom:0;
	width:100%;
}

header nav ul.social li a {
	display:inline-block;
	width:50%;
	opacity:0.8;
	transition:opacity 200ms;
}

header nav ul.social li a:hover {
	opacity:1;
}

header nav ul.social li a.facebook {
	background-color:#3b579d;
}

header nav ul.social li a i {
	display:inline-block;
	width:25px;
	height:25px;
	background-image:url('../images/social.png');
	background-size:50px 25px;
}

header nav ul.social li a i.twitter {
	background-position:-25px 0;
}

header nav ul.social li a.twitter {
	background-color:#5ea9dd;
}

.main {
	margin-left:80px;
	transition:margin 300ms, opacity 300ms;
	position:relative;
}

.main.on {
	margin-left:250px;
	margin-right:-170px;
	opacity:0.4;
}

footer {
	background-color:#f3f3f3;
	position:relative;
}

footer ul {
	display:inline;
}

footer ul li {
	display:inline-block;
}

footer ul li a {
	display:block;
	text-transform:uppercase;
	padding:1.5em 2em;
	font-size:0.875em;
	transition:background-color 250ms;
}

footer ul li a:hover {
	background-color:#fff;
}

footer img {
	width:120px;
	float:right;
	margin:1.25em 1em 0;
}

.overlay {
	position:fixed;
	left:-9999px;
	width:96%;
	height:100%;
	background-color:#002e3a;
	background-color:rgba(255,255,255,0.8);
	opacity:0;
	height:0;
	top:50%;
	padding:0 2%;
	overflow-y:scroll;
	transform:scale(2);
	z-index:20;
	-webkit-transform:scale(2);
	transition:
		opacity 300ms,
		transform 300ms;
	-webkit-transition:
		opacity 300ms,
		-webkit-transform 300ms;
}

.overlay.on {
	left:0;
	top:0;
	height:100%;
	opacity:1;
	transform:scale(1);
	-webkit-transform:scale(1);
}

.overlay a.close {
	position:fixed;
	top:2em;
	right:2%;
	width:40px;
	opacity:0.7;
	border:none;
	z-index:100;
}

.overlay a.close:hover  {
	opacity:1;
}

.overlay article {
	max-width:1200px;
	margin:0 auto;
	padding:0 2%;
	position: relative;
	top: 50%;
	text-align:center;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}

.overlay .video {
	position:relative;
	max-width:1200px;
	padding-top:56.25%;
	margin:0 auto;
}

.overlay .video iframe {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}


@media only screen and (max-width: 960px) {
	
	header {
		background-color:#fff;
		position:static;
		height:auto;
		box-shadow:0 0 10px rgba(0,0,0,0.2);
		width:auto;
		left:auto;
		right:auto;
		z-index:10;
	}
	
	header.on {
		width:auto;
	}
	
	header h1 {
		width:50%;
		float:left;
		border:none;
	}
	
	header h1 a {
		display:block;
		width:100%;
		border-right:solid 1px #eee;
	}
	
	header .navicon {
		width:50%;
		float:right;
		border:none;
		padding:30px 0 30px;
	}
	
	header nav {
		display:none;
	}
	
	header.on nav {
		display:block;
		border-top:solid 1px #eee;
	}

	header nav ul.social {
		position:static;
	}
	
	.main {
		margin:0;
	}
	
	.main.on {
		margin:0;
	}
	
	footer {
		text-align:center;
	}
	
	footer ul {
		text-align:center;
	}
	
	footer ul li {
		display:block;
	}
	
	footer img {
		float:none;
		margin:1.5em 0;
	}

}