*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

html, body { width: 100%; height: 100%; scroll-behavior: smooth; position: relative;}
body { color: #5a5350; font-weight: 300; overflow-y: auto; overflow-x: hidden; font-family:"Segoe UI",Arial,sans-serif; }
body.Times {font-family: "Times New Roman", Times, serif;}
body.mono {font-family: "Courier New", monospace;}

.darkMode *:not(.btn) { color: white; background: black; text-shadow: none; }
.fa {background: transparent!important;}
.clearfix:before, .clearfix:after {	display: table; content: ' '; }
.clearfix:after { clear: both; }

main { max-width: 69em; margin: 0 auto; }

header { margin: 0 auto 3em; padding: 3em; text-align: center; }
header h1 { margin: 0; font-weight: 300; font-size: 2.625em; line-height: 1.3; color: #0044ff; }
header span { display: block; padding: 1em; font-size: 50%; font-weight: bold; color: #212121; opacity: 0.8; }
header div { display: flex; justify-content: space-between; max-height: 100px; height: 12vh; margin: 0; margin-bottom: 10vh; }
header div img {max-height: 90px; max-width: 90px;}

article {text-align: right!important; direction: rtl;}
article img {	 position: relative; max-width: 100%; height: auto; display: block; box-shadow: 2px 2px 5px gray; border-radius: 5px; }
article p + figure {margin-top: 3vh; }
article figcaption { margin-top: 10px; margin-bottom: 10vh; display: block; width: 100%;}
article h1, article h2, article h3, article h4 { font-size: 1.75em; margin: 5vh auto; padding-right: 5px; border-right: 5px solid #0044ff; color: #252525; }
article dt {font-weight: bold;}
.footer { text-align: center; margin: 3em auto; clear: both; padding: 10px; padding-top: 5em; }

.helpers { background-color: white; width: 100%; max-height: 40px; height: 8vh; display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 50px; transition: all 0.35s ease-in-out;}
.helpers > .btn { width: calc(33.33% - 5px); max-width: 125px; margin-left: 5px; height: 100%; font-size: 1rem; text-align: center;	}
.animate .helpers {background-color: transparent; margin-bottom: 0px;}
			
.btn { /* MeshugeneBrand .btn Class */
	cursor: pointer; font-weight: 800; border-radius: 10px; border: 2px dashed transparent; color: white; padding: 10px 15px; transition: 0.2s ease-in-out; font-weight: bold; text-decoration: none; text-shadow: 1px 1px black; font-size: 1rem; }
.btn { background: linear-gradient(-120deg, silver, black 90%, silver); }
.btn:disabled {opacity: 0.25; cursor: not-allowed;}
.btn.hide {display: none;}
.btn.green { background: linear-gradient(-120deg, #008030, black 90%, #008030); }
.btn.blue { background: linear-gradient(-120deg, #0044ff, black 90%, #0044ff);	 }
.btn.red { background: linear-gradient(-120deg, red, black 90%, red); }
.btn.gold { background: linear-gradient(-120deg, gold, black 90%, gold);}

.mbShow { width: 100%; height: 100%;background: #aaa; position: relative; }
.mbShow.action { position: fixed; -webkit-perspective: 1500px; perspective: 1500px; }

.page { background: #fff; min-height: 100%; position: relative; outline: 1px solid rgba(0,0,0,0); z-index: 10; -webkit-transform: translateZ(0) translateX(0) rotateY(0deg); transform: translateZ(0) translateX(0) rotateY(0deg); }
.page::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 0px; opacity: 0; background: rgba(0,0,0,0.2);	-webkit-transition: opacity 0.4s, height 0s 0.4s; transition: opacity 0.4s, height 0s 0.4s; }

.mbShow.action .page { position: absolute; overflow: hidden; width: 100%; height: 100%; cursor: pointer; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.animate .page::after { opacity: 1; height: 101vh; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; }

.wrapper { position: relative; }
.action .wrapper { transform: translateZ(-1px); -webkit-transform: translateZ(-1px);  }

.nivut { position: absolute; height: auto; }
.nivut.horizontal { left: 50%; width: 75%; max-width: 1000px; min-width: 300px; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.nivut.top { top: 25%; }

.nivut h1 { border-right: 5px inset blue; padding-right: 5px; color: black; text-shadow: 2px 2px 5px white; font-size: 1.25em; margin-top: 5vh; text-align: right;}
.nivut a { -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin-bottom: 20px; margin-bottom: 3vh; font-size: 1.2rem;}


.column { float: right; width: 50%; padding: 0 2em; min-height: 300px; position: relative; text-align: right; }
.column:nth-child(1) { box-shadow: -1px 0 0 rgba(0,0,0,0.1);}

.footer p,
dt,
ol li,
table caption,
.column p { font-weight: 300; font-size: 1.5em; padding: 0 0 0.5em; margin: 0; line-height: 1.5; }

table { width: 90%; border: 1px solid silver; font-size: 1.2em; margin-bottom: 10vh; }
table th { text-align: center; }
table td { border: 1px solid silver; padding: 10px 5px; }



/* MeshugeneBrand ARTZA Effect */
.artza { background: #aaa; }
.artza .page { -webkit-transition: -webkit-transform 0.4s; transition: transform 0.4s; -webkit-transform-origin: 50% 150%; transform-origin: 50% 150%; }
.artza.animate .page { -webkit-transform: translateZ(-1500px) rotateX(80deg); transform: translateZ(-1500px) rotateX(80deg); }
.no-csstransforms3d .artza.animate .page { top: 75%; }
.artza .nivut a { opacity: 0; -webkit-transform: translateY(-200px) translateZ(-1000px); transform: translateY(-200px) translateZ(-1000px); -webkit-transition: -webkit-transform 0.4s, opacity 0.4s; transition: transform 0.4s, opacity 0.4s; }
.artza.animate .nivut a { opacity: 1; -webkit-transform: translateY(0) translateZ(0); transform: translateY(0) translateZ(0); }
.artza.animate .nivut a:nth-child(7){ -webkit-transition-delay: 0.0s; transition-delay: 0.0s; }
.artza.animate .nivut a:nth-child(6) { -webkit-transition-delay: 0.04s; transition-delay: 0.04s; }
.artza.animate .nivut a:nth-child(5) { -webkit-transition-delay: 0.08s; transition-delay: 0.08s; }
.artza.animate .nivut a:nth-child(4) { -webkit-transition-delay: 0.12s; transition-delay: 0.12s; }
.artza.animate .nivut a:nth-child(3) { -webkit-transition-delay: 0.16s; transition-delay: 0.16s; }
.artza.animate .nivut a:nth-child(2) { -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }
.artza.animate .nivut a:first-child { margin-top: 5vh; -webkit-transition-delay: 0.24s; transition-delay: 0.24s; }


[role="dialog"] { /* MeshugeneBrand simple Dialog box */
  visibility: hidden; display: block; position: fixed; top: 0vh; right: 0vw; background-color: #f7f7f7; color: #222; width: 100vw; height: 100vh; overflow-y: auto; border: 2px double #555; z-index: 999; }

/* MeshugeneBrand simple Accessibility  */
#aAccessibilityOptions { position: fixed; top: 0; left: 0; width: 280px; height: 100%; min-height: 320px; background-color: black; z-index: 99; font-size: 14px; overflow: auto; transform: scale(0); transition: all 0.5s ease-in-out; }
#aAccessibilityOptions.show { transform: scale(1); box-shadow: 2px 2px 2px silver;}
#aAccessibilityOptions h1 { text-align: center; color: white;} 
#aAccessibilityOptions a { display: none; text-align: left; margin-top: 10px; padding-left: 10px; color: white; text-decoration: none; font-weight: bold;}
#aAccessibilityOptions ul { list-style-type: none; display: flex; flex-flow: row wrap; padding: 0; width: 260px; margin: auto;}
#aAccessibilityOptions ul li {width: 130px; margin: 0 auto; display: flex; height: 65px; position: relative;}
#aAccessibilityOptions ul li .btn {width: 100%; padding: 10px 20px;}
#aAccessibilityOptions .btn .fa { position: absolute; top: 5px; left: 5px; font-size: 20px; }

#quickNav { height: 40px; position: fixed; bottom: 0; right: 0; z-index: 99; font-size: 12px; transform: scale(0); transition: all 0.5s ease-in-out;}
.active #aTop { display: none;}
#quickNav .btn::before { font-family: 'FontAwesome'; padding-left: 5px;}
#accessMenu::before { content: '\f29b'; }
#menuTrig::before { content: '\f039'; }
.markKishurim a, .markKishurim button { text-decoration: underline; font-weight: bold;}
.markKishurim button:hover, .markKishurim a:hover { outline: 5px solid yellow!important; }
.markKishurim button:focus, .markKishurim a:focus { outline: 5px solid red!important; }
#MBSign { /* MeshugeneBrand.com  */
	position: fixed; bottom: 0; left: 0; z-index: 999; padding: 0 10px; height: 30px; line-height: 30px; background-color: black; color: white; display: block; text-align: left; font-size: 10px; font-weight: bold; letter-spacing: 2px; text-decoration: none; transform: scale(0); transition: all 0.15s ease-in-out;}

/* Media Queries */

@media screen and (max-width: 46.0625em) {
	header { margin-bottom: 0; padding-bottom: 1em; }
	.column { width: 100%; min-width: auto; min-height: 0; padding: 2em; text-align: center; }
	.footer p,
	ol li,
	dt,
	table caption,
	.column p { font-size: 1.25em; }
	.column:nth-child(2) { text-align: center; box-shadow: 0 -1px 0 rgba(0,0,0,0.1); }
}
@media screen and (max-width: 25em) {
	header { font-size: 80%; }
	#quickNav {display: flex; justify-content: center; width: 100%;}
	#quickNav .btn { margin: auto;}
	#MBSign { opacity: 0; z-index: -1!important;}
	#aAccessibilityOptions a {display: block;}
	.hideMobile { display: none!important;}
}

@media screen and (max-width: 77em) {
	.nivut.top { top: 15%; }
	article img { margin: 10vh auto;	}
}

@media screen and (max-width: 36.625em), screen and (max-height: 41.75em) {
	.nivut.top { top: 5%; }
	.nivut.horizontal { font-size: 1.7rem; width: 6.2rem; }
	.nivut.horizontal a { display: block; text-align: center; }
}

@media screen and (max-width: 31em), screen and (max-height: 36.2em) {
	.nivut.horizontal { font-size: 1.2rem; width: 6.8rem; }	
}

@media screen and (max-height: 460px) {
	body > * {display: none;}
	.minHeight {position: absolute; top: 0; left: 0; display: flex; flex-flow: column-reverse; justify-content: center; height: 80vh; width: 100vw; overflow: hidden; text-align: center; font-size: 2em;}
	.minHeight img {max-width: 100px; height: auto; margin: auto;}
}