@charset "utf-8";
/* CSS Document */

body {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3b6e8f+0,94a545+50,f08b1d+100 */
	background: #3b6e8f; /* Old browsers */
	background: -moz-linear-gradient(top, #3b6e8f 0%, #94a545 50%, #f08b1d 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #3b6e8f 0%,#94a545 50%,#f08b1d 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #3b6e8f 0%,#94a545 50%,#f08b1d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b6e8f', endColorstr='#f08b1d',GradientType=0 ); /* IE6- */
	color:#3a6d8e;
	font-family: "Open Sans", Arial, sans-serif;
	text-align: justify;
	
}

h1, h2, h3, h4, strong {
	color: #3a6d8e;
	font-family: "Open Sans", Arial, sans-serif;	
}

#wrapper {
	width: 1100px;
	margin: 0 auto;
	background: #FFF;	
}

#header-wrapper {
	width: 100%;
}

 .home {
	background: url(/images/Church-Of-Christ-Kalgoorlie-Header.jpg) top no-repeat;
	background-size: contain;
	height: 755px;	
}

.normal {
	background: url(/images/Church-Of-Christ-Kalgoorlie-Cross.jpg) top no-repeat;
	background-size: contain;
	height: 527px;
	margin-bottom: -300px;	
}


#logo {
	width: 25%;
	padding: 3% 0 0 3%;
	float: left;
}

#navbar {
	width: 70%;
	float: right;
	margin-top: 50px; }

#left-col {
	width: 65%;
	margin: 0 3%;
	float: left;		
}

#right-col {
	width: 25%;
	margin: 0 3% 0 0;
	float: right;
	text-align: left;
}

#footer {
	width: 100%;
	background: #333 url(../../images/Church-of-Christ-Footer.jpg) top left no-repeat;
	height: 260px;
	color: #fff;
	padding: 20px auto;
	margin-top: 20px;
	text-align: left;
}
#footer h3 {
	text-transform: uppercase;
	color: #f08a1d;
}
#footer li {
	list-style: none;
}
#footer ul {
	padding: 0;
	margin: 0;
}
#footer li a {
	color: #fff;
	text-decoration: none;
}
#footer li a:hover {
	color: #93a445;
}

#footer img {
	margin-top: 30px;
}
.copyright {
	clear: both;
	color: #f08a1d;
	padding: 0 3%;
}

.quarter, .quarter-hide {
	width: 19%;
	margin: 1.5% 3%;
	float: left;
}

.container-slider {
	width: 96%;	
		margin: 2%;
}
.show {
	display: none; }

#livestream {
	width: 100%;
	padding: 10px 2%; 
	font-size: 18px;
	color: #FFF; 
	background: #333; text-align: center;
}

#livestream a, #livestream a:active, #livestream a:visited {
	color: #CCC; 
}
#livestream a:hover {
	color: #FFF;
}

@media only screen and (max-width: 1140px) {
	#wrapper {
		width: 96%;	
		margin: 2%;
	}

}
	
@media only screen and (max-width: 950px) {

	#footer {
		font-size: 14px; }
}
	
@media only screen and (max-width: 820px) {
	#left-col {
		width: 94%; }
	#right-col {
		width: 94%;
		padding: 0 3%; }
	.half {
		width: 44%;
		padding: 0 3%;
		float: left; }
	.normal {
		margin-bottom: -350px;	
	}
}
	
@media only screen and (max-width: 768px) {
	#navbar {
		margin: 0; 
		width: 60%;}
	.normal {
		margin-bottom: -375px;	
	}
}
			
@media only screen and (max-width: 650px) {
	.quarter-hide {
		display: none;
	}
	.quarter {
		width: 44%;
	}
	.show {
		display: inline; }
	#footer {
		height: 220px; }
	.normal {
		margin-bottom: -400px;	
	}
}
		
/* variable heights for header wrapper */	
@media only screen and (max-width: 1100px) {		 .home {	height: 700px; } }
@media only screen and (max-width: 1050px) {		 .home {	height: 686px; } }
@media only screen and (max-width: 1000px) {		 .home {	height: 652px; } }
@media only screen and (max-width: 950px) {			 .home {	height: 617px; } }
@media only screen and (max-width: 900px) {			 .home {	height: 584px; } }
@media only screen and (max-width: 850px) {			 .home {	height: 549px; } }
@media only screen and (max-width: 800px) {			 .home {	height: 515px; } }
@media only screen and (max-width: 750px) {			 .home {	height: 480px; } }
@media only screen and (max-width: 700px) {			 .home {	height: 446.5px; } }
@media only screen and (max-width: 650px) {			 .home {	height: 412px; } }
@media only screen and (max-width: 600px) {			 .home {	height: 378px; } }
@media only screen and (max-width: 550px) {			 .home {	height: 344px; } }
@media only screen and (max-width: 500px) {			 .home {	height: 309.5px; } }
@media only screen and (max-width: 450px) {			 .home {	height: 275px; } }
@media only screen and (max-width: 400px) {