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

body {margin:0; font-family:arial;}

header, header ul, header ol, nav, figure, footer, footer div:first-child ul, footer div:first-child ol {display:block; padding:0; margin:0; list-style:none;}

header 			{background:url("../images/commons/header_bgd.jpg"); background-size:100%; text-align:center;}
header div 	{display:inline-block; width:240px; }

nav 						{padding:20px 0;}
nav ol					{display:none;}
nav li 					{display:inline-block;}
nav li a 				{display:inline-block; padding:3px 12px; border-radius:15px; margin:0 1px; text-decoration:none; font-size:10pt; color:#fff;}
nav li a:hover 	{background:#f70; color:#025;}

main {}

article h2 							{padding-bottom:5px; border-bottom:solid 1px #f70; margin:30px 0; text-transform:uppercase; font-weight:normal; font-size:16pt; color:#f70;}
article h2:first-child 	{margin-top:0;}
article i 							{text-align:left; color:#aaa;}

aside 									{display:block; width:100%; box-sizing:border-box; font-size:11pt; color:#777;}

footer 							{display:block; text-align:center; font-size:12px; color:#555;}
footer div 					{background:#ccc; padding:60px;}
footer ol 					{display:block; margin-top:20px; font-size:12px;}
footer ol li 				{display:inline-block; width:30px; opacity:0.7; margin:0 10px;}
footer ol li:hover 	{opacity:1;}
footer small 				{display:block; background:#025; padding:25px; text-align:center; font-size:10px; color:#fff;}

img, iframe {display:block; width:100%;}
iframe 			{height:50vh; border:solid 1px #fff; border-radius:10px;}

input, select, textarea {display:block; width:100%; padding:8px 10px; border:solid 1px #ccc; margin:2px 0; box-sizing:border-box; border-radius:5px;}

textarea {height:200px;}

input[type="radio"], input[type="checkbox"],  input[type="submit"] {display:inline-block; width:auto;}
input[type="submit"] 				{background:#025; padding:8px 20px; border:0; cursor:pointer; color:#fff;}
input[type="submit"]:hover 	{background:#f70;}

label b {font-size:10px;}

h1 							{background:#f70; padding:20px 30px; border-radius: 0 0 10px 10px; margin:0; text-transform:uppercase; font-size:20pt; color:#fff;}
h1 i 						{display:block; font-weight:lighter; font-style:normal; letter-spacing:1px; font-size:14pt; color:#620;}
h3 							{margin:30px 0; text-transform:uppercase; font-weight:normal; font-size:14pt; color:#999;}
h3:first-child 	{margin-top:0;}
h4 							{margin:20px 0; font-size:12pt; color:#777;}
h4:first-child 	{margin-top:0;}

p 						{margin:25px 0; text-align:justify; font-size:11pt; color:#444;}
p:first-child {margin-top:0;}
p:last-child 	{margin-bottom:0;}

ul {margin:0 0 0 10px; padding-left:10px; list-style:outside; color:#444;}

#info ul 					{display:flex; width:100%;}
#info ul span			{display:block; width:100%; padding:0 10px; margin-bottom:20px; box-sizing:border-box; text-align:left !important;}
#info ul span:first-child i {text-align:right;}
#info ul i 				{display:block; margin:0 0 5px 0; font-size:12px; font-style:normal;}
#info ul a 				{text-decoration:none; color:#025;}
#info ul a:hover 	{color:#f70;}

#aside {background:#eee; padding:25px; border-radius:10px; position:sticky; top:40px;}

#flex {display:flex;}

#block_a {display:none; background:#fff; padding:0 40px; transition:200ms;}

#button 			{display:inline-block; background:#025; padding:10px 20px; border:0; border-radius:5px; text-decoration:none; color:#fff;}
#button:hover {background:#f70;}

.padding {padding:0 15%;}

.midle, .step {padding:25px;}

.sermon 			{background:#f70; padding:15px; border-radius:10px 10px 0 0; margin:0 15%; position:relative; z-index:900; text-align:center; font-weight:normal; 										font-size:14px; color:#025;}
.sermon b 		{display:block; text-transform:uppercase; font-size:20px; color:#fff;}
.sermon span 	{display:block; text-transform:uppercase; font-size:18px; color:#fff;}
.sermon i 		{font-style:normal;}

.bible 							{padding-bottom:20px; border-bottom:solid 1px #eee; text-align:center;}
.bible em a 				{display:inline; width:auto; margin:0; font-style:normal; font-size:11px; color:#f70;}
.bible em a:hover 	{color:#f95;}
.bible a 						{width:150px; margin:auto;}
.bible a:last-child {width:auto;}

.book {display:inline-block; width:50px; opacity:0.4; margin-bottom:10px;}

@media(max-width:800px)
{
	header figure ol a {box-sizing:border-box;}
	
	aside:last-child {width:auto; text-align:center;}
	
	#info ul {display:block;}
	#info ul span i {text-align:center;}
	#info ul span:first-child i {text-align:center;}
	
	h1 		{font-size:18pt;}
	h1 i 	{font-size:13pt;}
	
	#flex {display:block;}
	
	.midle, .step {padding:20px;}
	
	.sermon {margin:0 40px;}

	.padding {padding:0 40px;}
}

@media(max-width:500px)
{
  nav ol {display:block; padding:0; margin:0;}
  nav ol button {background:none; padding:0; border:0; margin:0; cursor:pointer; font-stretch:extra-expanded; font-size:24pt; color:#fff;}
  nav ol button:focus {color:#f70;}
  nav ol button:hover {color:#f70;}
  nav ul {display:none; background:rgba(0,34,85,0.85); padding:8px 0; border-top:solid 1px #f70; border-bottom:solid 1px #f70; border-radius:10px;}
  nav ul {margin-top:10px; position:absolute; right:40px; left:40px; z-index:950;}
  nav ul li {display:block; margin:8px 0;}
  nav ul li a {padding:10px 80px;}
}