/*RESET*/
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, font, 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 {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}

/* Reset */
*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

html, body {
	position: relative;
	width:100%;
	height: 100%;
	overflow:hidden;	
}

body {
	background: rgba(255,255,255,1);
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 31%, rgba(212,212,212,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(31%, rgba(255,255,255,1)), color-stop(100%, rgba(212,212,212,1)));
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 31%, rgba(212,212,212,1) 100%);
	background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 31%, rgba(212,212,212,1) 100%);
	background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 31%, rgba(212,212,212,1) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 31%, rgba(212,212,212,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d4d4d4', GradientType=0 );
}

body, a, td, div, span, button { font-family:Arial, Helvetica, sans-serif; }
button { -webkit-appearance: none; border-radius: 0; background: transparent; border: 0 none; outline: 0 none; }
a { text-decoration:none; color: #000; }
nav { text-align: center; margin: 20px 0; }
nav a { color: #666; }
.owl-carousel>div { overflow: hidden; }
.owl-carousel .owl-dots { position: absolute; margin: 0 auto; left: 0; right:0; bottom:0; }

.announce-box { position:absolute; top:0; right:0; botton:0; left:0; width:100%; height:100%; display: none; z-index: 99; }
.announce-box.show { display: block; }
.announce-box .announce-bg { width:100%; height:100%; background-color: rgba(0,0,0,0.7); }
.announce-box .announce-msg { position: absolute; top:0; bottom:0; right:0; left:0; margin:auto; background-color: #FFFFFF; width:90%; height:70%; }
.announce-box .announce-msg .btn-close { position: absolute; right:0; top:0; margin:10px; }
.announce-box .announce-msg .content { position: absolute; text-align:left; margin: 50px 20px; }

#container { position: relative; width: 100%; height: 100%; text-align: center; overflow: auto; -webkit-overflow-scrolling: touch; }
.wrapper { width: 95%; text-align: left; display: inline-block; }

header { position: relative; width: 100%; height: 70px; margin: 10px 0; }
    header #site_logo { position: absolute; height: 100%; }
    header #site_logo img { width: auto; height: 100%; }
    header #btnHome { position: absolute; right: 10px; top:10px; border: 1px solid #000; border-radius: 4px; padding: 6px; }

.main-content {  }
footer { height: 30px; }
footer #copyright { line-height: 30px; text-align: center; font-size: 12px; }

.home .owl-carousel .item { display: block; }
.home .pagelist { 
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -o-flex;
    display: flex;
	flex-wrap: wrap; margin-top: 10px; }
.home .pagelist .btnMeun { position: relative; overflow: hidden; 
	width: calc(50% - 5px);
	-webkit-flex: 1 1 calc(50% - 5px); 
	-moz-box-flex:: 1 1 calc(50% - 5px); 
	-ms-flex: 1 1 calc(50% - 5px); 
	flex: 1 1 calc(50% - 5px); 
	text-align: center; margin-bottom:4px; }
.home .pagelist .btnMeun:before{
    content: "";
    display: block;
    padding-top: 42%;
}
.home .pagelist .btnMeun:nth-child(odd) { margin-right: 5px; }
.home .pagelist .btnMeun:nth-child(even) { margin-left: 5px; }
.home .pagelist .btnMeun img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.home .pagelist .btnMeun .item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: #666 1px solid; background: #FFFFFF; }
.home .pagelist .btnMeun .item .icon { display: inline-block; width: 35%; }
.home .pagelist .btnMeun .item .itemName { display: inline-block; width: 65%; line-height:80px; font-size: 24px; }


.sub-page { line-height: 27px; margin-bottom: 20px; padding: 0 10px 30px; background: rgba(255,255,255, 0.6); }
.sub-page .page-title { margin: 30px 0 10px; font-size: 24px; }
.sub-page .content p { margin-bottom: 20px; }
.sub-page .btnRecord, .sub-page .btnNav, .sub-page .btnDetail { border: 1px solid #000; border-radius: 4px; font-size: 14px; display: inline-block; line-height: 14px; padding: 6px 8px; }
.sub-page .nav-buttons { text-align: right; margin-bottom: 10px; }
.sub-page .thumbnail { position: relative; }
.sub-page .thumbnail img { width: 100%; height: auto; }

.subNav { display: flex; }
.subNav .item { flex-grow: 1; text-align: center; border: #000 solid 1px; cursor: pointer; } 
.subNav .item.active { color: #FFFFFF; background-color: #000000; } 

.tab_page { display: none; padding: 20px 10px; }
.tab_page.active { display: block; }

.heading { font-size: 20px; }
.videoToChurch {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	width: 100%;
	height: 0;
}
.my-video-dimensions {
    width: 100%;
    height: 100%;
    position: absolute !important;
}
.yt-video {
  aspect-ratio: 16 / 9;
  width: 100%;
}
.video-item {
  margin: 20px 0 30px;
}