/*

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;
	/* spaces  */ margin:0 auto;padding:0;box-sizing:border-box;position:relative;
	/* borders */ outline:0 none;border-width:0;border-style:dotted;border-color:rgba(0,0,0,.5);
	/* columns */ column-rule-width:thin;column-rule-style:solid;break-inside: avoid-column;column-rule-color:rgba(0,0,0,.1);
}


/* Cross Browsing Compatibility (Do Not Touch) */
[hidden]{display:none}
path{fill-rule:evenodd}
svg:not(:root){overflow:hidden;max-width: 100%; max-height: 100%}
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,canvas,video{display:block;max-width:100%;height:auto;background-color:#000;box-shadow:0 0 50px #ccc}
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;max-width:100%;max-height: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;border-style:solid;min-height:2em}
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:#024;min-height:100%;font-size:clamp(1em, calc(100vh - 100vw), 1.5em);overflow-x:hidden;overflow-y:auto;-webkit-font-smoothing:antialiased}
body{background-color:#eee;height:100%;width:100%;display:inherit;text-align:left;line-height:150%;font-family:serif;color:#555}
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;border-color: rgba(0,0,0,.25)}
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 */}

/* Fields */
fieldset{border-width:1px;padding:20px;box-shadow:0 0 20px #eee}
option{border-style:none;padding:1px 5px}
select{color:inherit;background-color:#fff;border-bottom-width:1px;margin-bottom:5px}
select,input{height:40px}
select,input,textarea{padding:8px;max-width:100%;font-size:120%}
select option:first-of-type{color:#ccc}
textarea,input[type="text"]{resize:vertical}
textarea,input{border-width:0;border-radius:4px;color:#aaa;background-color:#ddd}
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; min-width: max-content; padding:.4em .8em; margin: .2em; background-color: #036}


/* 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{color:#000;border-color:rgba(0,0,0,.25)}


/* Tables */
table{border-collapse:collapse;border-spacing:1px;background-color:transparent;table-layout: fixed;max-width:100%;width:-webkit-fill-available}
table caption{letter-spacing:1px;padding:2px 4px;font-weight:bold}
table tbody{background-color:#fff}
table tbody a{color:#f00}
table tfoot a{color:#000}
table tr{table-layout:fixed}
table tbody:not(#theRounds) tr:nth-child(even){background-color:#f5f5f5}
table th{padding:5px 10px;border:none;color:#fff;text-align:center;background-color:#0ac}
table td{padding:5px 10px;border: 1px solid #ddd;text-align:center}
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:10px 0}
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{}
small{font-size:80%}
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: #024}


/* Headings */
h1,h2,h3,h4,h5,h6{font-family:serif;font-weight:500;line-height:150%;text-align:center;color:#000}
h1{font-size:200%}
h2{font-size:180%}
h3{font-size:160%}
h4{font-size:140%}
h5{font-size:120%}
h6{font-size:100%}


/*************** 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}
svg{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:1280px;padding-left:1em;padding-right:1em;display:table}


/* Alignment */
.flex{align-items:center;align-self:center;justify-content:center;vertical-align:middle}
.flex{display:flex;height:min-content;min-width:100%;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;margin-bottom:0}
.fr{float:right;margin-left:10px;margin-right:0;margin-bottom:0}
.alignleft{text-align:left;margin-left:0}
.alignright{text-align:right;margin-right:0}
.aligncenter{text-align:center;margin:auto}
.top{margin-top:1em}
.btm{margin-bottom:1em}
.index{z-index:10}

/* Pad */
.p-10{padding-top:.5em;padding-bottom:.5em}
.p-20{padding-top:.75em;padding-bottom:.75em}
.p-30{padding-top:1em;padding-bottom:1em}
.p-40{padding-top:1.25em;padding-bottom:1.25em}

/* 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 */
#content p+p{padding-top:20px}
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}
.taj{text-align:justify}
.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}
.pad{padding:1em}


/* by Columns */
[class^='col_'] {display: block}
[class^='col_'] > * {break-inside: avoid-column}
[class^='col_'].norule{column-rule:none}

.gap_20{column-gap:20px}
.gap_40{column-gap:40px}
.gap_60{column-gap:60px}

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



/* Website Structure */

[data-index]{cursor:pointer;transition-duration:0.5s}
[data-index]:hover{background-color:#09b}

header{background-color:#0ac;color:#fff;position:sticky;top:0;z-index:99}
footer{background-color:#0ac;color:#fff}

.bg1{background-image:linear-gradient(120deg, #012, #059)}
.bg1 > div{background-image:linear-gradient(120deg, transparent, #036 400px, white 400px, white 406px, #07a 406px, transparent)}

#home .options{background-color: #0ac;padding: 1em 2em;color: #fff;border-radius: 1em;margin-top: 2em;width: min-content;}
#home .options .links a{display:block;margin:.5em;}

.flex.start{align-items:flex-start}
#column_players{flex-basis:40%}
#column_match{flex-basis:60%}
#playerRounds input#roundFilterInput{width:5em}
#playerRounds input#nameFilterInput{width:10em}

table #playerList tr button{background-color:transparent !important;color:#000 !important;padding:0;margin:0 5px}
table #playerList tr button img{height:1.25em}
table thead tr{z-index:1}
table tr svg{height:32px;opacity:0.25}
table tr svg:hover{opacity:1}
table tr svg path{fill:#000}
table tr td.edit{cursor:pointer;transition-duration:0.5s}
table tr td.edit:hover{background-color:rgba(200, 255, 255, .5)}
table #theRounds tr:nth-child(8n+5),
table #theRounds tr:nth-child(8n+6),
table #theRounds tr:nth-child(8n+7),
table #theRounds tr:nth-child(8n+8) {background-color:#f5f5f5}

p+.title, .content p+p{margin-top:1.5em}
.clean *{background-color:transparent !important;border:none}
.sticky{position:sticky;z-index:9;color:#fff;background-color:#024;border-top:2px solid #fff;top:var(--header)}
.siteTitle{color:#fff;max-height:2.5em}
.pageTitle{font-size:180%;background-image:linear-gradient(120deg, #036, #07a);padding:10px;border-radius:10px;color:#fff}
.sectionTitle{border-bottom:1px solid #000;margin-bottom:20px;text-align:left}
.player-item {padding:5px 0}
#showhide button{margin:10px}
#printMatchups{cursor:pointer;height:2em}
#playerScore tr.versus{background-color:#b00 !important;position:absolute;z-index:1;width:min-content;top:31%;color:#fff;margin:auto;left:0;right:0;line-height:normal}

.white{color:#fff}
.red{color:#fff;background-color:#b00}
.blue{color:#fff;background-color:#024 !important}
.cyan{color:#fff;background-color:#0ac !important}

.toggleVisibility{height:1.5em}
.slidingElement {overflow:hidden}

footer button.scroll {padding: 15px 20px;background-color: transparent;border-left: 3px solid #c00;border-radius: 0;color: #c00;position: relative;bottom: 0;right: 0;}
footer .credits a:hover{border-bottom:1px solid #fff;color:inherit;}

#ad{position:sticky;bottom:0;z-index:1;background-color:#024;color:#0ac}
#ad .flex{width:fit-content;column-gap:2em}
#ad .phone{color:#fff;font-size: 125%;}
#ad a{color:#fff}



/*************** Menu *****************/

.menu .btn{background-color:#0ac;color:#fff}
.menu .btn:hover{background-color:#09b}




/*************** Fonts *****************/

	@font-face{ font-family:'Oswald';	src:url('./fonts/Oswald-Bold.ttf')}
	@font-face{ font-family:'Abel';		src:url('./fonts/Abel-Regular.ttf')}




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


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

	aside#ad{position:inherit}

}


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

	#playerScore tr.versus{top:28%}

}


@media all and (max-width: 1080px) {

	main .flex{flex-direction:column}

	.menu.sup.pl .links{left: -100%; top:var(--header);}
	.menu.sup.pr .links{right:-100%; top:var(--header);}
	.menu.sub.pl .links{left: -100%; bottom:var(--footer);}
	.menu.sub.pr .links{right:-100%; bottom:var(--footer);}

	.menu:before{content:'≡';cursor:pointer;border-radius:.1em;background-color:#0ac;color:#fff;display:table;padding:.2em;font-size:3em;font-weight:bold}
	.menu nav .links{box-shadow:0 0 40px rgba(0, 0, 0, .5);transition-delay:.25s;transition-duration:.25s;background-color:#fff;position:fixed;padding:1em;z-index:99;border-radius:.75em;margin:.5em;width:min-content;}
	.menu nav .links a{width:100%;margin:5px 0}
	.menu.pr:hover nav .links{right:0}
	.menu.pl:hover nav .links{left:0}

	.col_x2{columns:1}
	.col_x3{columns:1}
	.col_x4{columns:2}
	.col_x5{columns:2}
	.col_x6{columns:3}

}



@keyframes slideOut {
    from {
        margin-left: 0; /* Start from the center */
    }
    to {
        margin-left: 100vw; /* Move off-screen to the right */
    }
}

.overlay{
	transition: margin 0.3s cubic-bezier(0.42, 0, 0.58, 1);
    background-color: #024;
    position: fixed;
    display: block;
    z-index: 999;
    height: 100vh;
    width: 100vw;
    bottom: 0;
    top: 0;
}

.overlay.skin_1{
    animation: slideOut 0.25s ease-in-out; /* Apply the slide-out animation */
    margin-left: 100vw;
    transition-delay: 0.1s;
}

.overlay.skin_2{
    margin: 0 -100vw;
}



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

:root {



}