/*

Theme Name:		Bibli@udio
Theme URI:		https://bibliaudio.com
Author:				LOT Grafix
Author URI:		https://lotgrafix.com
Description:	Biblia en Audio
Version:			1.0
License:			GNU General Public License v2 or later
License URI:	http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:	bibliaudio
Tested up to:	8.2
Requires PHP:	5.9

*/


/* HTML TAGS */

/* Reset (Do Not Touch) */
* {/* texts  	*/ -webkit-text-size-adjust:none !important;font-size:inherit;line-height:inherit;font-family:inherit;
	 /* align  	*/ align-items:center;align-self:center;justify-content:center;vertical-align:baseline;
	 /* spaces 	*/ margin:0 auto;padding:0;box-sizing:border-box;position:relative;
	 /* borders	*/ outline:0 none;border-width:0;border-style:solid;border-color:rgba(150,150,150,.3);
	 /* columns	*/ column-rule-width:thin;column-rule-style:solid;break-inside:avoid-column;column-rule-color:rgba(150,150,150,.3);
	 /* width		*/ max-width:100%;
	 /* other		*/ scroll-behavior:smooth;
}


/* Cross Browsing Compatibility (Do Not Touch) */
[hidden]{display:none}
path{fill-rule:evenodd}
svg:not(:root){overflow:hidden;max-width:fit-content;max-height:-webkit-fill-available}
embed,object,iframe{display:table;margin:0 auto;padding:0;max-width:100%;aspect-ratio:16 / 9;height:auto}
audio:not([controls]){display:none;height:0}
audio,video{display:block;max-width:100%;height:auto;background-color:#000}
audio{max-height:100%;max-width:100%;margin:auto;object-fit:contain;border-radius:50px;background-color:transparent;padding:0;width:220px;height:50px}
sub, sup{font-size:60%;line-height:0;vertical-align:baseline;margin:5px 0}
pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}
img{-ms-interpolation-mode:bicubic;vertical-align:middle;width:auto;height:auto;max-width:100%}
ins{float:inherit;display:block !important}
abbr,acronym{border-bottom:1px dotted;cursor:help}
legend{white-space:normal}
br{clear:both}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
button[disabled],input[disabled]{cursor:default}
button,select,input,textarea{vertical-align:baseline;text-transform:none;line-height:normal;border-style:solid}
blockquote,q,code,kbd,pre,samp{hyphens:none;-ms-hyphens:none;-moz-hyphens:none;-webkit-hyphens:none}
address,dfn{font-style:italic}


/* Main */
html{background-color:#000;font-size:1em;overflow-x:hidden;overflow-y:auto;-webkit-font-smoothing:antialiased}
body{background-color:transparent;width:100%;display:table;text-align:left;line-height:150%;color:#555;font-family:serif}
code{display:block;clear:both;background-color:#eee;border:1px solid rgba(0,0,0,.5);padding:10px;margin:5px auto}
hr{box-sizing:content-box;background-color:transparent;margin:20px 0;height:0px;border-bottom-width:1px;border-style:solid}
q{font-family:serif;font-style:italic;font-size:125%;color:#aaa}
blockquote{font-family:Oswald;quotes:"" "";content:"";text-align:center;font-size:200%;padding:20px 0;max-width:80%}
blockquote::before {margin-right:20px;content:"\275D";/* unicode icon for opening mark */}
blockquote::after {margin-left:20px;content:"\275E";/* unicode icon for closing mark */}

/* Form Fields */
form *{vertical-align:top}
fieldset{border-width:1px;padding:20px;box-shadow:0 0 20px #eee}
textarea,input[type="text"]{resize:vertical;width:100%}
textarea,input{color:#555;border-width:0;background-color:#eee;border-radius:4px}
textarea{font-size:120%}
input[type="file"]{padding:0}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;height:18px;width:18px;margin:5px;border:0;background-color:transparent;cursor:pointer;vertical-align:middle}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
input[type="search"]{-webkit-appearance:textfield}


/* Button Style */
input[type="button"],input[type="submit"],input[type="reset"],button,.btn,.page-numbers,div.tnp-field-button input.tnp-submit{color:#fff;border-width:0;box-shadow:none;display:inline-block;border-radius:5px;font-weight:normal;padding-left:24px;padding-right:24px;padding-top:16px;padding-bottom:16px;background-color:#a00}


/* Button Hover/Focus */
input[type="button"]:hover,input[type="submit"]:hover,input[type="reset"]:hover,button:hover,.btn:hover,.page-numbers:hover,div.tnp-field-button input.tnp-submit:hover{cursor:pointer;color:#fff;background-color:#c00}
input[type="button"]:focus,input[type="submit"]:focus,input[type="reset"]:focus,button:focus,.btn:focus,.page-numbers:focus,div.tnp-field-button input.tnp-submit:focus{cursor:pointer;color:#fff;background-color:#c00}


/* Input/Textarea Hover/Focus */
input:hover,input:focus,textarea:hover,textarea:focus{border-color:rgba(150,150,150,.5)}


/* Other Buttons */
nav button{margin:5px}


/* Other Fields */
option{border-style:none;padding:1px 5px}
select{color:inherit;background-color:transparent;border-bottom-width:1px;margin-bottom:5px}
select,input{height:40px}
select,input,textarea{padding:8px;max-width:100%}
select option[disabled]{color:#ccc}
select option{color:#333}


/* Tables */
table{border-collapse:separate;border-spacing:0;width:100%}
table caption{letter-spacing:1px;padding:2px 4px;font-weight:bold}
table tbody{background-color:transparent}
table tbody a{color:#f00}
table tfoot a{color:#000}
table tr{}
table tr:nth-child(odd){background-color:transparent}
table th{padding:5px 10px;color:#fff;text-align:center;background-color:#b00}
table td{padding:5px 10px;text-align:left}
table ul{margin:0 !important}
table a{font-weight:bold}
table a:hover{color:#000}


/* ORDERED & UNORDERED LISTINGS */

/* Listing by Areas */
article ul, article ol		{margin:20px}

/* Listing Globals */
li {list-style-type:none;counter-increment:all; break-inside:inherit; padding:1vh}
li:before					{color:#b00;font-weight:bold}						/* CHANGE COLOR HERE */
li.post						{list-style:none;text-align:left}
li.post:before				{content:none !important}
#child-page-list li:before	{content:none !important}

/* Listing Types */
ol, ul						{counter-reset:all; list-style:none; padding:10px}

ul li {list-style-position:outside}
ul li:before {margin-right:5px}

ol li {}
ol li:before {}

/* Listing Icons */
ul > li:before				{content:'●'}											/* 1ST LEVEL UNORDERED LIST */
li ul > li:before			{content:'»'}											/* 2ND LEVEL UNORDERED LIST */
li li ul > li:before		{content:'○' !important}								/* 3RD LEVEL UNORDERED LIST */

ol > li:before				{content:counter(all) ' '}								/* 1ST LEVEL ORDERED LIST */
li ol > li:before			{content:counter(all) ' '}								/* 2ND LEVEL ORDERED LIST */
li li ol > li:before		{content:counter(all, lower-alpha) '. ' !important}		/* 3RD LEVEL ORDERED LIST */

li li li li:before			{content:'○' !important}								/* 4TH LEVEL TO INFINITE */

/***********************/


/* Text Elements */
p{}
p:first-letter{}
p+p{padding-top:20px}
small{font-size:revert}
cite{color:#200}
span{color:#c00;text-transform:inherit;font-style:inherit;vertical-align:baseline}
mark{background:#000;color:#fff;padding:2px 4px}
label{}
form p:not(li p){padding-top:10px}
::marker{color:#900}


/* Links */
a{text-decoration:none;cursor:pointer;color:inherit;opacity:1;border-bottom:1px solid transparent}
a.active{cursor:default;color:inherit}
a:hover{color:#b00}


/* Headings */
h1,h2,h3,h4,h5,h6{font-family:'Oswald';font-weight:500;line-height:initial;text-align:center;color:#000;padding:5px 0}
h1{margin-bottom:0px;font-size:1.5em;padding:0}
h2{margin-bottom:5px;font-size:1.4em}
h3{margin-bottom:5px;font-size:1.3em}
h4{margin-bottom:5px;font-size:1.2em}
h5{margin-bottom:5px;font-size:1.1em}
h6{margin-bottom:5px;font-size:1.0em}


/*************** Global Classes *****************/


/* Effect */
.rotate{transform:rotate(0deg)}
.rotate:hover{transform:rotate(360deg)}
.transition{transition-duration:0.5s}
.page-numbers{transition-duration:0.5s}
a{transition-duration:0.5s}
a ul{transition-duration:0.5s}
a ul li{transition-duration:0.5s}
img{transition-duration:0.5s}
path{transition-duration:0.5s}
input{transition-duration:0.5s}
button{transition-duration:0.5s}
textarea{transition-duration:0.5s}


/* Width */
.wf{width:100%;display:table}
.ws{width:100%;max-width:1600px;padding-left:5%;padding-right:5%;display:table}
.max{max-width:640px}

/* Alignment */
.flex{display:flex;height:min-content;min-height:100%}
.flex_T{display:inline-flex; align-items:flex-start}
.flex_B{display:inline-flex; align-items:flex-end}
.flex_C{display:inline-flex; align-items:center}

.fl{float:left;margin-right:10px;margin-left:0}
.fr{float:right;margin-left:10px;margin-right:0}
.alignleft{text-align:left;margin-left:0}
.alignright{text-align:right;margin-right:0}
.aligncenter{text-align:center;margin:auto}
.pad{padding-top:1em;padding-bottom:1em}
.nopad *{padding:0}
.top{margin-top:1em}
.btm{margin-bottom:1em}
.index{z-index:10}


/* Radius */
.r-1 {border-radius:4px !important;-webkit-border-radius:4px !important;-moz-border-radius:4px !important;-ms-border-radius:4px !important;-o-border-radius:4px !important;-khtml-border-radius:4px !important}
.r-2 {border-radius:8px !important;-webkit-border-radius:8px !important;-moz-border-radius:8px !important;-ms-border-radius:8px !important;-o-border-radius:8px !important;-khtml-border-radius:8px !important}


/* Other */
img.logo{max-width:240px;max-height:80px}
span.fas:before,span.fas:after{}
.tal{text-align:left}
.tar{text-align:right}
.tac{text-align:center}
.fa:before, .fas:before{padding-right:2px;color:inherit}
.fa:after, .fas:after{padding-left:2px}
.unlist li:before{content:none !important}
.oval{shape-outside:ellipse();background-clip:content-box;padding:10px}
.hide{overflow:hidden}
.none{display:none}
.clear{clear:both}
.dt{display:table}



/************************* Theme Layout ***************************/


/* Primary Tags Backgrounds */

body {}
body {background-color:#fff}
body.dark{background-color:#000;color:#aaa}
body.dark h1,body.dark h2,body.dark h3,body.dark h4,body.dark h5,body.dark h6{color:#fff}
body.dark .title, body.dark .subtitle{color:#fff}
body.dark #chapter_read b{color:#fff}
body.dark #chapter_read .reading{color:#fff}
body.dark #chapter_read .reading::before{color:#fff}
body.dark #chapter_text li.highlight{color:#ddd}
body.dark #random_verse b{color:#fff}

main{transition-duration:0.5s}


header {background-color:rgba(0,0,0,.9);background-image:linear-gradient(0deg, transparent, black);top:0;position:sticky;border-bottom:1px solid rgba(125, 125, 125, .25)}
header a {color:rgba(255,255,255,.75)}
header a:hover {color:rgba(255,255,255,1)}
header #site_name{font-family:serif}
header img.holy_icon {max-height:2em;opacity:0.75}
header img.holy_icon.dove{}

header #search_version {background-color:#fff;border-radius:0.5em;padding-right:0.5em}
header #search_version select {padding:0 0.5em;margin:0;border:0}

footer {background-color:rgba(0,0,0,.9);background-image:linear-gradient(0deg, black, transparent);position:sticky;color:#c00;z-index:9;bottom:0;border-top:1px solid rgba(125, 125, 125, .25)}
footer a {color:#fff; border-bottom:1px solid transparent}
footer a:hover {color:#fff; border-bottom-color:#c00}

footer button.scroll {padding:.5em .6em;position:fixed;bottom:1.5em;right:1.5em}
footer button#center {bottom:200px; position:fixed; padding:20px; text-align:center; display:none}

footer .nav > .menu ul {}
footer .nav > .menu ul li {display:inline}
footer .nav > .menu ul li a {padding:5px 0; margin-right:1em}
footer .nav > .menu ul li:last-of-type a{margin-right:0}


/* Header */

#header{padding:2vh 0}
#random_verse {max-width:768px;width:90%}
#random_verse b {color:#000}
#random_verse a {text-align:center; color:#b00;border-bottom:1px solid transparent}
#random_verse a:hover{border-bottom-color:inherit}


/* Chapter Structure */

#search_bible {column-rule:none}
#search_bible > div{max-width:90%;padding-top:1em}
#search_bible form {border-bottom-width:1px;height:2.5em}
#search_bible form div.fr{height:100%}
#search_bible input[type=text] {padding:4px 12px; border:none;background-color:transparent}
#search_bible .search-btn {padding:8px;background-color:transparent;height:100%;background-color:transparent}
#search_bible:hover .search-btn path{fill:#c00}

#search_options {columns:2;gap:2em;column-rule:none}
#book_search{column-count:2; display:grid; grid-template-columns:50% 50%}

#chapter_select #select_book select {border:none; font-size:120%; margin:0; padding:0 10px; width:100%; max-width:80%; border-bottom:1px solid rgba(0,0,0,.5)}

#chapter_list {overflow-y:auto; display:block; max-height:80px; font-size:0.75em}
#chapter_list span {color:rgba(0,0,0,.5)}
#chapter_list .chapter_btn {background-color:#222;color:#fff;display:inline-flex;margin:2px;border-radius:5px;font-family:sans-serif;aspect-ratio:3/2;height:2em}
#chapter_list .chapter_btn:hover {background-color:#c00}
#chapter_list .active{pointer-events:none;cursor:not-allowed;background-color:#b00}

#chapter_book {columns:2;column-rule-width:0; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid rgba(0,0,0,0.1)}
#chapter_book sub {opacity:0.5;bottom:0}
#chapter_book sup {opacity:0.5}
#chapter_book a {color:#930; vertical-align:baseline}
#chapter_book details {color:#200; background-image:linear-gradient(120deg, #630, #CA5, #960); padding:2px 8px; border-radius:5px}
#chapter_book [class*="book-"]{font-family:serif}

#chapter_read{padding-bottom:3em}
#chapter_read b {color:#000}
#chapter_read .reading{color:#b00 !important}
#chapter_read .reading::before{color:#000}

#chapter_read #welcome {}
#chapter_read #welcome > div {break-inside:avoid-column}
#chapter_read #welcome > div.left {text-align:justify}
#chapter_read #welcome > div.right {text-align:center}
#chapter_read #welcome > div .title {font-family:Oswald}
#chapter_read #welcome img.movil {max-width:75%; max-height:50vh; margin:20px}
#chapter_read #welcome img.qr {width:240px;margin:20px;max-width:50%}

#chapter_text ol {columns:4; column-gap:60px; padding:0}
#chapter_text ol span{color:#c50}
#chapter_text li.read{cursor:pointer; transition-duration:0.5s; border-radius:10px; line-height:150%;}
#chapter_text li.read .share-icon svg{cursor:pointer; opacity:0; transition-duration:1s; margin-left:4px; top:8px; height:12px}
#chapter_text li.read .share-icon svg path{fill:#a00}
#chapter_text li.read:hover svg{opacity:1}
#chapter_text .subtitle{font-family:'Oswald';text-align:center;z-index:1;padding-top:20px}
#chapter_text .subtitle small{font-family:sans-serif;font-weight:bold;font-size:70%;color:#c20}
#chapter_text li.highlight{background-color:rgba(150,150,150,.3);color:#000}

#chapter_note ol{counter-reset:all}
#chapter_note li:before{content:"[" counter(all, lower-alpha) "] "}
#chapter_note li{padding:3px 15px}
#chapter_note .subtitle{font-weight:bold;font-family:'Oswald'}

#chapter_info a {color:#b00}
#chapter_info a:hover {color:#c00}
#chapter_info a:before{content:" → ";color:#777}

#search_results h2 {line-height:120%}
#search_results #search_verses {columns:4; column-gap:60px}
#search_results #search_verses li{padding:5px}
#search_results #search_verses li {border-bottom:1px solid rgba(0,0,0,.5); padding-bottom:10px; margin-bottom:10px; text-align:right}
#search_results #search_verses li.read a{display:block; text-indent:15px; text-align:left}
#search_results #search_verses li.read a:hover{color:#b00}
#search_results #search_verses li:before {content:none}
#search_results #search_verses li.read b:last-of-type:before{content:':';margin:0 1px 0 -2px}


/* Paypal Donate Button */

#donate form{text-align:center}
#donate input[type="image"] {padding:0;height:3em;border-radius:3em}


/* Footer Options */

#share img {width:40px; padding:15px; box-sizing:content-box; border-radius:100%; overflow:hidden; display:table; background-color:#b00}
#page ol {counter-reset:list; page-break-inside:avoid}
#page ol li:before {
  content:counter(list, lower-alpha) ". ";
  counter-increment:list;
}


/* Page Tag Special */

#bible #content .arrows{background:url(/img/arrow-up.svg) top center, url(/img/arrow-down.svg) bottom center; background-size:40px; background-repeat:no-repeat}
#sitemap ul select{}

#book_selector li{padding:0}
#book_details a{color:#c00}


/* Player */

#holy_player {opacity:1;transition:0.5s}
#holy_player nav .play{margin:0 1em;aspect-ratio:1 / 1;border-radius:100%;padding:0;width:2.75em;height:2.75em;font-size:.75em}
#holy_player nav .small{background-color:transparent; display:inline-flex;color:#fff; font-size:2em; padding:0 .4em 0.125em; height:1em;border:none !important;}
#holy_player nav .small:hover{color:#b00}


/*************** Social Layout *****************/

/* Icon Colors */
.social.icons{text-align:center}
.social.icons a{font-size:140%;color:inherit;margin:auto 5px;border:none;display:inline-grid;text-align:center;max-height:40px;max-width:40px;height:10%;width:10%;border-radius:100%}
.social.icons a:hover{}

.share.social.icons a{font-size:clamp(16px,60%,24px);color:#fff !important}
.share.social.icons a.icon-wapp{background-color:#4ca;font-size:clamp(18px,80%,24px)}
.share.social.icons a.icon-fcbk{background-color:#3b5998}
.share.social.icons a.icon-twit{background-color:#1da1f2}
.share.social.icons a.icon-inst{background-color:#ba0055}
.share.social.icons a.icon-link{background-color:#0073b1}
.share.social.icons a.icon-pint{background-color:#e60023}
.share.social.icons a.icon-tube{background-color:#ff0000}



/*************** Specific Layout *****************/


#dark_btn{position:fixed;background-color:#222;bottom:-2em;border-radius:2em;aspect-ratio:1;z-index:1;height:2em;width:2em;left:1em;padding:5px; transition-duration:0.5s}
#keepReading {position:fixed;bottom:5.5em;right:0;left:0;padding:0.5em;z-index:99;margin:auto;width:max-content;}

#scroll2top.show {opacity:1; bottom:7em}
#scroll2top {position:fixed;border-radius:2em;font-size:80%;padding:0.5em;bottom:-40px;height:2.5em;width:2.5em;opacity:0;z-index:8;right:1em;}

#thankyou #section_element{display:none}
#thankyou #chapter_read > div{max-width:50vh;min-width:50vw}


/*************** Homepage *****************/

#homepage #welcome .grid {column-count:2; display:grid; grid-template-columns:55% 45%}
#homepage #welcome .grid > div {align-self:flex-start; padding:20px}
#homepage #welcome .grid > div:first-of-type{border-right-width:1px}



/*************** Menu Structure *****************/

footer #bookmarks{
	color:#000;
}

footer #bookmarks img{
  height:1.5em;
  width:1em;
}

footer #bookmarks {
	background-size:cover;
	cursor:pointer;
	height:1.5em;
	width:1em;
}

footer #bookmarks > .menu {
  transition-duration:.2s;
  overflow:hidden scroll;
  background-color:#fff;
  position:fixed;
  cursor:auto;
	padding:2em;
	width:100%;
	top:0;
	height:-webkit-fill-available;
}

footer #bookmarks > .menu .icon{
	cursor:pointer;
}

footer #bookmarks {
	background-image:url("img/icon-bookmarks.svg");
	right:0;
}

footer #bookmarks > .menu {
	right:-100%;
}

footer #bookmarks > .menu :is(ul,ol) {
	width:100%
}

footer #bookmarks > .menu :is(ul,ol) li {
	border-bottom-width:1px;
	display:inherit;
	color:initial;
}

footer #bookmarks > .menu li li {
	padding:0.5vh 1vh;
}

footer #bookmarks > .menu li li:first-of-type {
	border-top-width:1px;
	margin-top:1vh;
}

footer #bookmarks > .menu li li:last-of-type {
	border-bottom:none;
  padding-bottom:0;
}

footer #bookmarks > .menu li a {
  vertical-align:baseline;
  display:inline-block;
  color:#000;
  padding:0;
}

footer #bookmarks.opened {
	background-image:url("img/icon-menu-close.svg");
}


footer #bookmarks.opened > .menu {
	right:0;
}

footer #bookmarks nav h2{color:#000}
footer #bookmarks nav table tr td{padding-top:0}
footer #bookmarks nav table tr[data-folder-name] td{border-bottom-width:1px}
footer #bookmarks nav #create{margin:0;font-size:125%}
footer #bookmarks nav #folders .btn-open{width:100%}
footer #bookmarks nav .versesList{transition:height 0.25s;overflow:hidden;padding:0}
footer #bookmarks nav .versesList a{border-bottom:none}
footer #bookmarks nav .versesList li{transition:height 0.25s}
footer #bookmarks nav .versesList li:first-of-type{border-top:none}
footer #bookmarks nav #storage-status{color:#777}

#footer{min-height:2.5em}



/*************** Link Color Layout *****************/



/*************** Other Areas *****************/


/* Captcha */
input[name="check"]{position:absolute;z-index:-1}
#captcha-canvas{height:2.25em;}
#captcha-reload{cursor:pointer;font-size:2em;margin-right:5px}
#captcha-input{}


/* Modal Window */
#share_OLD{transition-duration:.2s;background-color:#fff;display:inline-flex;overflow:hidden;position:fixed;padding:2em; width:100%;left:100%;top:0;z-index:2;height:-webkit-fill-available}
#share_options{transition-duration:.2s;position:fixed;z-index:2;bottom:-4em;left:0;right:0;width:min-content}
#share_options #share_frame{border-radius:3em;overflow:hidden;background-color:#222}
#share_options.opened{bottom:5em}
#share_options #share_frame{max-width:640px;padding:0.75em}
#share_options #share_text{max-width:600px;line-height:1.5em;padding:1em 0;border-width:1px 0;margin:1em 0}
#share_options #share_text p+p{padding-top:10px}
#share_options #share_text b{color:#000}
#share_options #share_text small{line-height:normal; font-size:small}
#share_options #share_buttons svg path{fill:#fff}
#share_options #share_buttons .share{height:1.5em;background-color:transparent;padding:0;margin:0 0.75em}
#share_options #share_buttons .share:hover svg path{fill:#b00}
#share_options #share_buttons .share img{height:1.5em;width:1.5em}
#share_options #share_buttons #verse_play {background-color:#b00;aspect-ratio:1;border-radius:2em;font-size:75%;height:2em}
#share_options #share_buttons #verse_close {padding:6px;background-color:#b00;border-radius:2em}



/*************** Columns *****************/

/* by Columns */

	[class^='col_'] {display:block;gap:4em}
	[class^='col_'] > * {break-inside:avoid-column}

	.col_x2{columns:2}
	.col_x3{columns:3}
	.col_x4{columns:4}
	.col_x5{columns:5}
	.col_x6{columns:6}

	.gap_20{column-gap:1em}
	.gap_40{column-gap:2em}
	.gap_60{column-gap:3em}


/* by Width */

	[class^="width_"]{padding:0.5em;margin:0;display:inline-block}
	.width_20{width:calc(100% / 5)} /* 1 of 5 Column set */
	.width_25{width:calc(100% / 4)} /* 1 of 4 Column set */
	.width_33{width:calc(100% / 3)} /* 1 of 3 Column set */
	.width_50{width:calc(100% / 2)} /* 1 of 2 Column set */

@media (max-width:1280px) {
	.width_20{width:calc(100% / 4)}
	.width_25{width:calc(100% / 3)}
	.width_33{width:calc(100% / 2)}
	.width_50{width:calc(100% / 1)}
}

@media (max-width:1080px) {
	.width_20{width:calc(100% / 3)}
	.width_25{width:calc(100% / 2)}
	.width_33{width:calc(100% / 1)}
	.col_x2{columns:1}
	.col_x3{columns:2}
	.col_x4{columns:3}
	.col_x5{columns:4}
	.col_x6{columns:5}
}

@media (max-width:960px) {
	.width_20{width:calc(100% / 2)}
	.width_25{width:calc(100% / 1)}
	.col_x3{columns:1}
	.col_x4{columns:2}
	.col_x5{columns:3}
	.col_x6{columns:4}
}

@media (max-width:768px) {
	.width_20{width:calc(100% / 1)}
	.col_x4{columns:1}
	.col_x5{columns:2}
	.col_x6{columns:3}
}

@media (max-width:600px) {
	.col_x5{columns:1}
	.col_x6{columns:2}
}

@media (max-width:480px) {
	.col_x6{columns:1}
}


/*************** Responsive *****************/



@media (max-width:1080px), (pointer:coarse) {

	#chapter_read #welcome [class^='col_'] {text-align:justify;columns:1}
	#chapter_read #welcome [class^='col_'] > div:first-of-type {padding-top:0; margin-top:0; border-top:none}
	#chapter_read #welcome [class^='col_'] > div {padding-top:40px; margin-top:40px; border-top:1px solid rgba(0,0,0,.25)}

	#chapter_text ol {columns:2}
	#chapter_text li.read .share-icon {display:none}

	#search_results #search_verses {columns:2; column-gap:40px}


	footer .nav {
		background-size:cover;
		cursor:pointer;
		height:1.5em;
		width:1em;
	}

	footer .nav > .menu {
    transition-duration:.2s;
    background-color:#fff;
    overflow:hidden;
    position:fixed;
		padding:2em;
		width:100%;
		top:0;
		height:-webkit-fill-available;
	}

	footer .nav.fl {
		background-image:url("img/icon-menu-open.svg");
		left:0;
	}

	footer .nav.fl > .menu {
		left:-100%;
	}

	footer .nav > .menu ul {
		width:100%
	}

	footer .nav > .menu ul li {
		display:inherit;
    border-bottom-width:1px;
  }

  footer .nav > .menu ul li:first-of-type {
  	border-top-width:1px;
  }

	footer .nav > .menu ul li a {
	  vertical-align:baseline;
	  display:inline-block;
	  color:#000;
	}

	footer .nav.opened {
		background-image:url("img/icon-menu-close.svg");
	}


	footer .nav.fl.opened > .menu {
		left:0;
	}


}


@media (min-width:769px) {

	#share_options.opened{bottom:6em}

}


@media (max-width:768px) {


	#site_name{float:none}

	#chapter_search .search-btn {padding:0}
	#chapter_book cite {display:none}
	#chapter_list {max-height:84px}
	#chapter_text li.read .share-icon {display:none}
	#chapter_text .subtitle{font-size:1.2em}
	#chapter_info a {display:block}

	#search_bible {column-count:1}
	#search_results .keyword{text-align:center}
	#search_results .testament{padding-top:10px}
	#search_results #search_verses {columns:1; column-gap:40px}

	#bible #content .arrows {background-size:2.5em}
	#page .col_x2 {columns:1}

	#modal_popup #modal_close{top:0; margin-right:2em;}

	option{font-size:80%}

	footer #settings img{height:36px; padding:12px; box-sizing:content-box; border-radius:100%}
	footer #settings:hover {transform:rotate(360deg)}
	footer #settings #menu {display:none; position:absolute; right:0px; bottom:80px; background-color:#111; width:250px; text-align:left; padding:20px 40px; border:2px solid #222; border-radius:10px; box-shadow:0 0 25px #000}
	footer #settings #menu li:before {color:#c00}
	footer #settings #menu li:last-of-type {border-bottom:none}
	footer #settings #menu li {border-bottom:1px solid #777}
	footer #settings #menu li a {color:#fff}
	footer #settings:hover #menu {display:block}

	footer button.scroll {
		padding:0.5em;
		background-color:transparent;
		border-left:3px solid #c00;
		border-radius:0;
		color:#c00;
		position:relative;
		bottom:0;
		right:0;
  }

}



@media (max-width:768px) and (orientation:landscape) {

	footer .nav > .menu ul li {padding:5px}
	footer .nav > .menu ul li a {padding:0}

}


@media (max-width:768px) and (orientation:portrait) {

	#chapter_book {columns:1}
	#chapter_text ol {columns:1}

}



/*************** Keyframes *****************/


	/* Animation Styles */
	.alternate{animation-direction:alternate}
	.infinite{animation-iteration-count:infinite}
	.animate{animation-duration:0.5s;animation-timing-function:ease-in}

	/* Slide Height */
	.slideHeight { animation-name:slideHeight }
		@keyframes slideHeight {
			0% {height:0%}
			100% {height:100%}
		}

	/* FadeIn */
	.fadein { animation-name:fadein }
		@keyframes fadein {
			0% {opacity:0}
			100% {opacity:1}
		}

	/* FadeIn from Top */
	.fromtop { animation-name:fromtop }
		@keyframes fromtop {
			0% {opacity:0;margin-top:-5%}
			100% {opacity:1;margin-top:0}
		}

	/* FadeIn from Right */
	.fromright { animation-name:fromright }
		@keyframes fromright {
			0% {opacity:0;margin-right:-5%}
			100% {opacity:1;margin-right:0}
		}

	/* FadeIn from Bottom */
	.frombottom { animation-name:frombottom }
		@keyframes frombottom {
			0% {opacity:0;margin-bottom:-5%}
			100% {opacity:1;margin-bottom:0}
		}

	/* FadeIn from Left */
	.fromleft { animation-name:fromleft }
		@keyframes fromleft {
			0% {opacity:0;margin-left:-5%}
			100% {opacity:1;margin-left:0}
		}

	/* Perpetual */
	.fromleft { animation-name:fromleft }
		@keyframes fromleft {
			0% {opacity:0;margin-left:-5%}
			100% {opacity:1;margin-left:0}
		}



/*************** Variables *****************/

:root {
	--var_name:auto;
	--menuHeadH:auto;
  --menuFootH:auto;
  --menuFullH:auto;
  --menuMainH:auto;
}