@font-face { font-family: 'newsreader'; font-style: normal; src: url(/dist/jcgm/font/newsreader.woff2) format('woff2'); font-display:block; }
/* @font-face { font-family: 'newsreader'; font-style: italic; src: url(/dist/jcgm/font/newsreader-italic.woff2) format('woff2'); } */
:root { --clr: #0c9da1; --clr2: #3299BB; } html { font-size:17px; }
body { background-color:#f5f5f5; line-height:1.4rem; position:relative; font-family:newsreader, Georgia, serif, Verdana, sans-serif, ui-sans-serif, system-ui; }

/* sizing, defaults, customizations */
header,body,footer,main,div,section,h1,h2,h3,h4,table,p,blockquote,ol,ul,figure { padding:0; margin:0; box-sizing:border-box; } body,nav,main,div,section { scrollbar-width:thin; }
table,p,blockquote,ol,ul { margin-bottom:0.7rem; } h1,h2,h3,h4,h5 { font-weight:500; padding-bottom:0.4rem; } 
header,footer { background-color:#fff; text-align:center; padding:1rem 0 0.8rem;  } header{ margin-bottom:1rem; } footer { margin-top:1rem; } input,button { max-width:100%; box-sizing: border-box; }

a { text-decoration:none; color:var(--clr); }  b,strong { font-weight:500; } ol,ul { padding-left:20px; }
h1 {font-size:1.3rem;} h2 {font-size:1.2rem;} h3,h4,h5 { font-size:1rem;}
img { max-width:100%; max-height:100%; object-fit:scale-down; border-radius:3%; object-position:center; } .yt img { border-radius:unset; }
blockquote { padding-left:0.7rem;  border-left:2px solid #eee; margin-left:0.7rem; }

table,p,blockquote,ol,ul,li { color:#151515; }
table,td, th { border: 1px solid #eee; } td {  border-width: 0px 0px 1px 0px; } th { border-width: 0px 0px 1px 1px; }
button, input[type="submit"],.btns li,.btns a { background-color:#35afb2; color:white; font-size:0.9rem; font-weight:500; border:0; padding:5px 12px 4px; margin:7px 0; white-space:nowrap; cursor:pointer; }

/* header menu */
header > a, header nav, footer nav { font-size:1.3rem; font-weight:500; } header > a { color:#000; } 
header, header nav { display:flex; white-space:nowrap;} header>a { flex:1; }  header nav, footer nav {overflow-x:overlay; } nav.open+a, header nav:not(.open) a{ display:none; }
header nav:before {content:'☰'; padding:0 0.8rem;cursor: pointer;} header nav a, footer nav a {  margin:0 0.8rem;  }

main { position:relative; display:flex; flex-wrap:wrap; justify-content:space-evenly; gap:1rem; padding:0 1rem; } .full { flex-basis:100%; }
section, .sec, main>div:not(.noSec) { min-width:0; padding:0.8em 1em 0.7em; background-color:#fff; border-radius:4px; box-shadow:0 1px 2px #ddd; border:1px solid #ddd;  }

/*  Custom specific */
.hide {display:none;}
/* text with img to right */ .timg { display:flex; /* flex-wrap:wrap; */ overflow:hidden; }  .timg>*:not(img) { z-index:10 } .timg>img { width:30%; flex-basis:100%; padding-left:0.5em; } 


/* yt videos */
.vids {display:flex;flex-wrap: wrap; gap:1rem;} .yt3 { flex-basis:100%; } .yt3 iframe { aspect-ratio:16/9; }
.yt { position:relative; } .yt:before {  width:64px; aspect-ratio:1; position: absolute; cursor: pointer; content: ''; top: 35%; left: 42.5%; opacity: 30%; background-image: url('/dist/jcgm/yt.png'); }
.yt > * { background-repeat:no-repeat; background-size:contain; aspect-ratio:16 / 9; display:flex; align-items:flex-end; }

/* loading progress animation */
.loading { pointer-events:none; background-image:linear-gradient(90deg,teal 0%,#209dd5 100%) !important; background-repeat:no-repeat !important; background-color:teal !important; animation-timing-function: ease-out; }
button.loading, input[type="submit"].loading { animation: hLoading 7s infinite; } li.loading { animation: vLoading 3s infinite;  }
@keyframes hLoading { 0% { background-size:0% 100%; }  100% { background-size:100% 100%; } } @keyframes vLoading { 0% { background-size:0% 100%; }  100% { background-size:100% 100%; } }

/* dynamic flex items width formula :root { --vidsXgap: 1rem; --vidsXcolumns:3;  } .vidsX>* { flex-basis: calc((100% - (var(--vidsXcolumns) - 2) * var(--vidsXgap)) / (var(--vidsXcolumns)-1)); }  */

@media (max-width: 767px){
  table {display:block; overflow-x:auto; } th,td { white-space:nowrap; }
  
}
@media (min-width: 768px) or (orientation: landscape){
	vids .timg>img { order:-1; padding:0.5em 0 0; }
}
@media ((min-width: 768px) or (orientation: landscape)) and (max-width:1023px) {
  .h1 { max-width:50% }  
  .vid3>*,.vi3 { flex-basis:calc((100% - (1 * 1rem))/2); }
}
@media (min-width: 1024px){
  .h1 { max-width:40% }
  .vid3>*,.vi3 { flex-basis:calc((100% - (2 * 1rem))/3); } .vid2>*,.vi2 { flex-basis:calc((100% - (1 * 1rem))/2); }
}


/* Todo:
  1. test from stich For verse color:#1e3b38; font-size: 17px; line-height: 27px;  sup: color:#64748b; font-size:13px;  font-weight:600;  h2 color:#1e3b38; font-size/line-height: 18px/28px   

*/