/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*SITE GLOBAL STYLES*/

body{font-family: "Quicksand", sans-serif;line-height:1.5;min-width:320px;}

header{background:#fff;width:100%;float:left;height:140px;position:relative;z-index:2000;}

.restrict{width:100%;max-width:960px;margin: 0 auto;display:block;position:relative;}

header h1{;margin-top:10px;line-height:140px;}
header h1:hover{opacity:0.6;}
header h1 a{display:block;width:100%;height:100%;cursor:pointer;}
header p{position:absolute;top:40px;right:0px;}
header p a{margin-right:20px;}
header nav{position:absolute;top:48px;right:0px;z-index:1000;}
header nav ul{position:relative;z-index:2000;}
header nav ul li{display:inline-block;margin-left:40px;position:relative;line-height:32px;}
header nav ul li ul{display:none;}
header nav ul li:hover ul{display:block;position:absolute;top:32px;left:0px;width:200px;background:#f1f2f2;box-shadow:0px 0px 20px #ccc;}
header nav ul li:hover ul li{display:block;width:100%;height:32px;margin-left:0px;text-indent:20px;line-height:32px;}

.hero{width:100%;height:400px;background:url('/assets/images/gracechurch.jpg') top center no-repeat;background-size:900px;float:left;}
.VOY{width:25%;float:right;background:url('/assets/images/trans.png');padding:20px;box-sizing:border-box;}
.VOY h2{text-align: right;color:#222;font-size:26px;margin-bottom:20px;}
.VOY p{text-align: right;font-size:12px;color:#222;float:right;}

.intro{width:100%;float:left;min-height:120px;}
.intro .welcome{float:left;width:48%;margin:20px 2% 20px 0px;}
.intro .welcome p{}
.intro .sermon{width:48%;float:right;margin:20px 0% 20px 2%;}
.intro .sermon .audio{margin:0;border-bottom:none;padding:0px;padding-top:0px;}
.intro .sermon .audio img{margin-bottom:20px;}
.intro .sermon .audio h2{margin-top:0px;}

h1{font-size:28px;margin-bottom:20px;}
h2{font-size:22px;margin-bottom:20px;}
h3{font-size:20px;margin-bottom:20px;}
p{margin-bottom:20px;}

.restrict img{max-width:100%;height:auto;}

a{color:#565454;}
a:hover{color:#333;}

.social{width:100%;float:left;border-bottom:1px solid #ccc;}
.socialmedia{width:48%;margin:20px 2% 20px 0px;float:left;}
.socialmedia p{font-size:32px;}
.socialmedia ul{background:url('/assets/images/connect.jpg') top right no-repeat;height:110px;margin:20px 0px;}
.socialmedia li{height:90px;float:left;margin-right:40px;text-indent:-1000000px;}
.socialmedia li.facebook{background:url('/assets/images/facebook-white.png') center center no-repeat;background-size:contain;width:90px;height:90px;}
.socialmedia li.twitter{background:url('/assets/images/twitter.png') center center no-repeat;background-size:contain;width:90px;height:90px;}
.socialmedia li a{display:block;width:100%;height:100%;cursor:pointer;}
.socialmedia .address{background:#ccc;text-align: right;padding:0px;width:180px;float:right;margin-right:-6%;margin-top:-80px;margin-bottom:0px;display:none;}
.socialmedia .address p{font-size:14px;color:#fff;margin-bottom:0px;}
.social #map{width:48%;float:right;min-height:300px;background:#f1f2f2;}

.things{text-align: center;background:#ccc;float:left;width:100%;margin-top:20px;margin-bottom:20px;}
.things h2{color:#fff;margin-bottom:0px;font-size:32px;}
.things-cols{width:100%;float:left;margin-bottom:100px;}
.thing{width:33.3%;padding:20px;box-sizing:border-box;float:left;text-align: center;margin-bottom:20px;}
.thing h3{color:#222;margin-bottom:0px;font-size:24px;}
.thing a{background:#ccc;border-radius:3px;padding:8px 12px;color:#fff;text-decoration: none;}
.thing a:hover{background:#222;}
.thing img{max-width:100%;height:auto;margin-bottom:20px;}


.primary img{max-width:100%;height:auto;margin-bottom:40px;}

.secondary .thing{padding:0px;text-align: left;width:100%;}
.secondary .thing img{float:right;margin:0px 0px 20px 20px;max-width:30%;height:auto;}

.full-strong{width:100%;float:left;padding:40px; 0px;background:#ccc;text-align: center;margin-bottom:40px;box-sizing: border-box;}
#calendar{max-width:100%;width:960px;margin:0 auto;display:block;margin-bottom:40px;}

.restrict.contact ul{text-align: center;font-size:32px;margin-bottom:40px;}
.restrict.contact p{text-align: center;margin-bottom:20px;padding-bottom:70px;}

.primary{width:48%;float:left;margin-right:4%;padding:20px;box-sizing: border-box;}
.primary .strong{background:#ccc;padding:20px 20px 1px 20px;margin-left:-20px;margin-top:-20px;margin-bottom:40px;}

.secondary{width:48%;float:right;box-sizing:border-box;padding:20px;}

#map-canvas{width:100%;height:280px;float:left;}

.article{width:100%;float:left;margin:0px 0px 40px 0px;padding:40px 20%;box-sizing:border-box;border-bottom:1px solid #ccc;}
a.newer{width:120px;float:right;background:#ccc;border-radius:3px;padding:8px 12px;color:#fff;text-decoration: none;text-align: center;margin-bottom:40px;}
a.older{width:120px;float:left;background:#ccc;border-radius:3px;padding:8px 12px;color:#fff;text-decoration: none;text-align: center;margin-bottom:40px;}
a.older:hover,a.newer:hover{background:#222;}
.article h2 a{color:#222;}
.article h2 a:hover{color:#ccc;}

.audio{float:left;width:100%;padding:20px 0px;border-bottom:1px solid #ccc;margin-bottom:40px;}
.audio p{text-align: right;font-size:12px;float:right;}
.audio h2{float:left;margin-top:12px;}
a.more{float:left;background:#ccc;color:#fff;text-decoration: none;padding:4px 8px;border-radius:4px;font-size:12px;}
a.more:hover{background:#eee;color:#ccc;}
.audio p.mp3-title{float:left;width:70%;text-align: left;}
ul.filters{margin-left:40px;list-style:disc;margin-bottom:40px;}
img.series-mini{width:100%;float:right;height:auto;}

footer{width:100%;float:left;padding:40px 0px;background:linear-gradient(#7b7b7b 0%, #686868 100%);}
footer p{color:#fff;max-width:60%;float:left;margin-bottom:40px;float:left;}
footer p.copyright{font-size:80%;clear:left;margin-bottom:0px;float:left;}
footer p.madeby{font-size:80%;clear:left;}
footer p.madeby a{color:#ccc;text-decoration: none;}
footer p.madeby a:hover{color:#eee;}
footer .address{width:25%;float:right;text-align:right;}
footer .address p{max-width:100%;float:right;margin-bottom:1rem;}

audio{width:100%;float:left;margin-bottom:20px;float:left;}
a.more{margin-top:0px;}

.menu-link,#footernav{display:none;}

@media screen and (max-width: 960px){
	.intro .welcome, .intro .sermon{width:100%;padding:0px 20px;box-sizing:border-box;}
	.social p{margin-bottom:20px;}
	.socialmedia{width:100%;padding:20px;box-sizing: border-box;}
	.social #map{width:100%;height:250px;min-height:250px;}
	.social .address{display:none;}
	.socialmedia ul{width:70%;padding-right:120px;box-sizing:border-box;}
	.VOY{width:40%;}
	.thing{width:50%;}
	.restrict{padding:20px;width:100%;box-sizing: border-box;}
	header .restrict,.hero .restrict{padding:0px;}
	.primary,.secondary{width:100%;padding:0px;box-sizing: border-box;margin-top:20px;}
	.strong{width:100%;}
	.article{padding:40px;}
	.audio{padding:20px 0px;}
	#calendar{width:90%;}
	header h1{margin:0 auto;display:block;margin-bottom:20px;}
	header p{width:80%;position:Relative;text-align: center;top:0px;margin:0 auto;display:none;}
	header{height:auto;padding:20px 0px;margin-bottom:0px;}
	header nav{display:none;}
	a.menu-link{display:block;position:fixed;bottom:0px;left:0px;width:100%;font-size:18px;height:48px;text-align:center;background:#fff;color:#222;text-decoration: none;line-height:48px;box-shadow:0px 0px 20px #222;z-index:20000;}
	#footernav{display:block;float:left;width:100%;padding:20px;box-sizing: border-box;background:#f1f2f2;}
	#footernav ul{}
	#footernav ul li{border-bottom:1px solid #ccc;line-height:32px;}
	#footernav ul li ul li{text-indent:20px;}
	#footernav ul li ul li:last-child{border-bottom:none;}
	.restrict.contact ul{font-size:21px;}
}

@media screen and (max-width:700px){
	.socialmedia ul{background:none;padding:0px;margin:0px;width:100%;}
	.socialmedia li.facebook{width:48px;height:48px;float:left;background-size:contain;}
	.socialmedia li.twitter{width:48px;height:48px;float:left;background-size:contain;background-repeat:no-repeat;background-position:center center;}
	.thing{text-align:left;width:100%;}
	.thing{}
	.thing img{width:40%;float:right;height:auto;margin:0px 0px 20px 20px;}
	.VOY{width:90%;margin:0 auto;height:auto;display:block;float:none;padding-bottom:40px;}
	.VOY p{margin-bottom:20px;float:right;display:block;}
	.hero{height:auto;}
	footer .address{width:100%;clear:both;margin-bottom:40px;}
	.article{padding:0px 20px;}
	.restrict.contact ul{font-size:14px;}
	header h1{max-width:300px;}
}