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

body { font-family:"Poppins"; font-size:16px; margin:0; padding: 0; }

#login { background-color:#FFF; border-radius:20px; box-shadow:1px 1px 5px #CCC; margin:25px auto 0; max-width:225px; padding:50px; }
#login > .logo { border:0; display:block; height:76px; margin:0 auto 10px; width:225px; }
#login > ul { list-style:none; margin:0; padding:0; }
#login > ul > li { margin:0; padding:0; }
#login > ul > li > .alert { color:#E60004; display:block; font-size:16px; font-weight:500; margin:0 0 10px; text-align:center; width:225px; }
#login > ul > li > .field { border:1px solid #CCC; font-size:18px; font-weight:500; height:50px; line-height:50px; margin:0 0 10px; padding:0 20px; width:185px; }
#login > ul > li > .submit { background-color:#E60004; border:0; border-radius:20px; clear:both; color:#FFF; cursor:pointer; display:block; font-size:18px; font-weight:500; height:50px; line-height:50px; margin:10px 0; padding:0; width:225px; }

#topbar { background-color:#E60004; width:100%; }
#topbar::after { clear:both; content:''; display:block; }
#topbar > .container { margin:0 auto; max-width:960px; }
#topbar > .container > .logo { border:0; float:left; height:60px; margin-left:25px; width:177px; }
#topbar > .container > .logo > a > img { height:60px; width:177px; }
#topbar > .container > .burger-icon { display:none; }

#navigation { display:flex; justify-content:center; min-height:60px; max-width:758px; }
#navigation > ul { background-color:#E60004; list-style:none; margin:0; padding:0; position:relative; }
#navigation > ul > li { display:block; float:left; margin:0; padding:0; }
#navigation > ul > li > a { color:#FFF; cursor:pointer; height:60px; line-height:60px; padding:0 5px; text-decoration:none; }
#navigation > ul > li:hover > ul { opacity:1; transition-duration:0.5s; -webkit-transition-duration:0.5s; visibility:visible; }
#navigation > ul > li > ul { background-color:#E60004; list-style:none; margin:0; opacity:0; padding:0; position:absolute; visibility:hidden; }
#navigation > ul > li > ul > li { margin:0; padding:0; }
#navigation > ul > li > ul > li > a { color:#FFF; cursor:pointer; height:60px; line-height:60px; padding:0 20px 0 5px; text-decoration:none; }

#show-menu[type=checkbox] { display:none; -webkit-appearance:none; }
#show-menu[type=checkbox]:checked ~ #navigation { display: block; }

#wrapper { background-color:#FFF; margin:0 auto; padding:0; max-width:960px; }

#banner { background-position:center; background-size:cover; display:flex; height:400px; justify-content:center; text-align:center; vertical-align:middle; width:100%; }
#banner > .message { align-self:center;  }
#banner > .message > .title { color:#FFF; display:block; font-size:48px; font-weight:bold; padding:0 25px; text-shadow:1px 1px 3px #000; }
#banner > .message > .subtitle { color:#FFF; display:block; font-size:24px; font-style:italic; margin:10px 0; padding:0 25px; text-shadow:1px 1px 3px #000; }
#banner > .message > .button { display:block; }
#banner > .message > .button > a { background-color:#E60004; border:2px solid #FFF; border-radius:10px; color:#FFF; cursor:pointer; display:inline-block; padding:10px 20px; text-decoration:none; }

#featured { padding:50px 25px; max-width:910px; }
#featured > .main-content { width:100%; }
#featured > .main-content > h1 { color:#E60004; font-size:48px; font-weight:bold; margin:0; padding:0 0 10px; text-align:center; }
#featured > .main-content > .divider { background-color:#E60004; border-radius:25px; height:5px; margin:0 0 25px; padding:0; width:100%; }
#featured > .main-content > p { display:block; font-size:16px; line-height:24px; margin:0 0 25px; text-align:center; }

#featured > .main-content > .livestream { overflow:hidden; padding-bottom:56.25%; position:relative; height:0; }
#featured > .main-content > .livestream > iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


#featured > .main-content > p > .red { color:#E60004; font-size:24px; font-weight:bold; line-height:32px; }
#featured > .main-content > form > p { display:block; font-size:16px; line-height:24px; margin:0 0 25px; text-align:center; }
#featured > .main-content > form > p > .textfield { border:1px solid #CCC; border-radius:5px; margin:0; padding:5px 10px; width:380px; }
#featured > .main-content > form > p > .textarea { border:1px solid #CCC; border-radius:5px; height:380px; margin:0; padding:5px 10px; width:380px; }
#featured > .main-content > form > p > .submit { background-color:#E60004; border:0; border-radius:5px; color:#FFF; margin:0; padding:10px 20px; }

#featured > .main-content > p > a { color:#000; text-decoration:underline; }
#featured > .main-content > p > a:hover { color:#E60004; text-decoration:underline; }
#featured > .map { height:400px; margin:50px 0; position:relative; text-align:right; width:100%; } 
#featured > .map > .canvas { height:400px; width:100%; }
#featured > .sub-content { margin:25px 0 0; width:100%; }
#featured > .sub-content::after { clear:both; content:''; display:block; }
#featured > .sub-content > .divider { background-color:#E60004; border-radius:25px; height:5px; margin:0 0 25px; padding:0; width:100%; }
#featured > .sub-content > .photo { float:left; margin:0 25px 0 0; max-height:250px; max-width:250px; }
#featured > .sub-content > .photo > img { border-radius:50%; height:100%; width:100%; }
#featured > .sub-content > .post { float:right; margin:0; padding:0; max-width:585px; text-align:center; }
#featured > .sub-content > .post > p { font-size:16px; line-height:24px; margin:0 0 25px; padding:0; }#featured > .main-content > p > a { color:#000; text-decoration:underline; }
#featured > .sub-content > .post > p > a { color:#000; text-decoration:underline; }
#featured > .sub-content > .post > p > a:hover { color:#E60004; text-decoration:underline; }

#leaders { margin:0; max-width:910px; padding:0; }
#leaders > ul { display:flex; flex-wrap:wrap; justify-content:center; list-style:none; margin:0 0 -25px 5px; padding:0; width:100%; }
#leaders > ul > li { display:block; float:left; height:100%; margin:0 10px 25px 0; padding:0; text-align:left; width:280px; }
#leaders > ul > li > img { height:280px; width:280px; }
#leaders > ul > li > .name { color:#E60004; display:block; font-size:24px; font-weight:bold; margin:5px 0; text-align:center; width:280px; }
#leaders > ul > li > .title { color:#000; display:block; font-size:16px; font-style:italic; text-align:center; width:280px; }

#gallery { margin:0; max-width:910px; padding:0; }
#gallery > ul { display:flex; flex-wrap:wrap; justify-content:center; list-style:none; margin:0 0 -25px 5px; padding:0; width:100%; }
#gallery > ul > li { margin:0; padding:0; }
#gallery > ul > li > a { background-size:400px 225px; display:block; float:left; height:225px; margin:0 10px 25px 0; padding:0; position:relative; width:400px; }
#gallery > ul > li:hover { cursor:pointer; }
#gallery > ul > li > a > .gallery-title { background-color:#000; bottom:0; color:#FFF; font-size:16px; font-weight:bold; left:0; opacity:0.8; padding:10px; position:absolute; text-align:center; width:380px; }

#footer { background-color:#E60004; padding:25px 0; width:100%; }
#footer > .container { margin:0 auto; max-width:960px; }
#footer > .container > .content-block { align-items:center; display:flex; justify-content:center; width:100%; }
#footer > .container > .content-block > .church-information { padding:0 25px; text-align:center; max-width:430px; }
#footer > .container > .content-block > .church-information > .name { color:#FFF; display:block; font-size:24px; font-weight:bold; line-height:28px; }
#footer > .container > .content-block > .church-information > .address, .email, .phone { color:#FFF; display:block; font-size:16px; font-style:italic; line-height:20px; }
#footer > .container > .content-block > .social-media { padding:0 25px; text-align:center; max-width:430px; }
#footer > .container > .content-block > .social-media > ul { display:flex; justify-content:center; list-style:none; margin:0; padding:0; }
#footer > .container > .content-block > .social-media > ul > li { float:left; margin:0; padding:0; }
#footer > .container > .content-block > .social-media > ul > li > img { border:0; display:block; height:91px; width:100px; }
#footer > .container > .content-block > .copyright { color:#FFF; display:block; font-size:16px; line-height:20px; margin:25px 0 0; padding:0 25px; text-align:center; max-width:100%; }
#footer > .container > .content-block > .views-counter { margin:25px 0 0; padding:0 25px; text-align:center; max-width:100%; }
#footer > .container > .content-block > .views-counter > .total-views, .unique-views { color:#FFF; display:block; font-size:16px; line-height:20px; }
#footer a { color:#FFF; text-decoration:none; }

.clearfix { clear:both; }

@media screen and (max-width:959px)
{
	#topbar > .container > .logo { float:left; margin:0; margin-left:25px; }
	#topbar > .container > .burger-icon { color:#FFF; cursor:pointer; display:block; float:right; height:60px; line-height:60px; margin-right:25px; }
	#topbar > .container > .burger-icon > i { margin-left:5px; }
	
	#banner { height:300px; }
	#banner > .message > .title { font-size:36px; }
	#banner > .message > .subtitle { font-size:20px; }
	
	#navigation { clear:both; display:none; min-height:30px; max-width:959px; }
	#navigation > ul { border-top:1px solid #FFF; }
	#navigation > ul > li { float:none; text-align:center; }
	#navigation > ul > li > a { border-bottom:1px solid #FFF; display:block; height:30px; line-height:30px; padding:0; width:100%; }
	#navigation > ul > li > ul { opacity:1; position:relative; visibility:visible; width:100%; }
	#navigation > ul > li > ul > li > a { border-bottom:1px solid #FFF; display:block; height:30px; line-height:30px; padding:0; width:100%; }
	
	#featured > .main-content > h1 { font-size:36px; }
	#featured > .main-content > form > p > .textfield { width:280px; }
	#featured > .main-content > form > p > .textarea { height:280px; width:280px; }
	#featured > .map { height:300px; }
	#featured > .map > .canvas { height:300px; width:100%; }
	#featured > .sub-content > .photo { display:block; float:none; margin:0 auto 25px; }
	#featured > .sub-content > .post { float:none; max-width:100%; }
	
	#gallery { max-width:909px; }
	#gallery > ul > li > a { background-size:300px 169px; height:169px; width:300px; }
	#gallery > ul > li > a > .gallery-title { width:280px; }
	
	#footer > .container > .content-block { display:block; }
	#footer > .container > .content-block > .church-information { max-width:100%; }
	#footer > .container > .content-block > .social-media { margin:25px 0 0; max-width:100%; }
	
	.mobile-hide { display:none; }
}

@media screen and (max-width:767px)
{
	#banner { height:200px; }
	#banner > .message > .title { font-size:20px; }
	#banner > .message > .subtitle { font-size:16px; }
	
	#featured > .main-content > h1 { font-size:20px; }
	#featured > .main-content > p { font-size:12px; line-height:20px; }
	#featured > .main-content > p > .red { font-size:16px; line-height:24px; }
	#featured > .main-content > form > p > .textfield { font-size:12px; width:180px; }
	#featured > .main-content > form > p > .textarea { font-size:12px; height:180px; width:180px; }
	#featured > .map { height:200px; }
	#featured > .map > .canvas { height:200px; width:100%; }
	#featured > .sub-content > .post > p { font-size:12px; line-height:20px; }
	
	#gallery { max-width:717px; }
	#gallery > ul > li > a { background-size:200px 113px; height:113px; width:200px; }
	#gallery > ul > li > a > .gallery-title { font-size:12px; width:180px; }
	
	#footer > .container > .content-block > .church-information > .name { font-size:16px; line-height:20px; }
	#footer > .container > .content-block > .church-information > .address, .email, .phone { font-size:12px; line-height:16px; }
	#footer > .container > .content-block > .social-media > ul > li > img { height:82px; width:90px; }
	#footer > .container > .content-block > .copyright { font-size:12px; line-height:16px; }
	#footer > .container > .content-block > .views-counter > .total-views, .unique-views { font-size:12px; line-height:16px; }
}

@media screen and (max-width:319px)
{
	#topbar > .container > .logo { height:60px; overflow:hidden; width:46px; }
	#topbar > .container > .logo > img { height:60px; width:177px; }
	#topbar > .container > .burger-icon { height:60px; line-height:60px; }
	
	#navigation > ul > li > a { font-size:12px; height:20px; line-height:20px; }
	#navigation > ul > li > ul > li > a { font-size:12px; height:20px; line-height:20px; }
	
	#banner > .message > .title { font-size:16px; }
	#banner > .message > .subtitle { font-size:12px; }
	#banner > .message > .button > a { font-size:12px; }
	
	#featured > .main-content > h1 { font-size:16px; }
	#featured > .sub-content > .photo { max-height:190px; max-width:190px; }
	
	#gallery { max-width:280px; }
	#gallery > ul > li > a { background-size:190px 107px; height:107px; width:190px; }
	#gallery > ul > li > a > .gallery-title { width:170px; }
	
	#leaders { margin:0; max-width:190px; padding:0; }
	#leaders > ul { display:flex; flex-wrap:wrap; justify-content:center; list-style:none; margin:0 0 -25px 0; padding:0; width:100%; }
	#leaders > ul > li { display:block; float:left; height:100%; margin:0 0 25px 0; padding:0; text-align:left; width:190px; }
	#leaders > ul > li > img { height:190px; width:190px; }
	#leaders > ul > li > .name { color:#E60004; display:block; font-size:16px; font-weight:bold; margin:5px 0; text-align:center; width:190px; }
	#leaders > ul > li > .title { color:#000; display:block; font-size:12px; font-style:italic; text-align:center; width:190px; }
	
	#footer > .container > .content-block > .church-information > .name { font-size:16px; line-height:20px; }
	#footer > .container > .content-block > .church-information > .email { display:none; }
	#footer > .container > .content-block > .social-media > ul > li > img { height:54px; width:60px; }
}