/*
Welcome to Custom CSS!


To learn how this works, see https://wp.me/PEmnE-Bt
*/

.page-title.sm\:th-text-3xl.th-text-2xl {
    display: none;
}


/* replace header background image on portfolio pages */ 
.single-jetpack-portfolio div.page-header {
background-image: url("https://thehiddenpearl.org/wp-content/uploads/2021/02/NASS8Photo.jpeg");
}

.single-jetpack-portfolio img.th-featured-image {visibility:hidden;
}


/*tooltip used for short footnotes*/


.entry-footer .entry-author {
  display: none;
}

body {
  counter-reset: section;
}

.myInlinePar {
  display: inline;
}
.mytooltip {
  position: relative;
  display: inline;
  /*border-bottom: 1px dotted black;*/
  vertical-align: super;
  font-size: smaller;
  background-color:yellow;
}

.mytooltip .mytooltiptext {
  visibility: hidden;
	margin:0px;
  width: max-content;
	width: -moz-max-content;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%,40%);
    /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  opacity: 0;
  transition: opacity 1s;
  font-size: large;
}

.mytooltip .mytooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;

}

.mytooltip:hover .mytooltiptext {
  visibility: visible;
  opacity: 1;
}


p.mytooltip::before {
  counter-increment: section;
  content: counter(section);
}
/* Conference CSS*/

#nav_menu-29.widget_nav_menu li,
#nav_menu-30.widget_nav_menu li {
  font: 200 15px/1.5 "Libre Baskerville";
  border-bottom: 1px solid #ccc;
	height: 35px;
}

#nav_menu-29.widget_nav_menu li:last-child,
#nav_menu-30.widget_nav_menu li:last-child
{
  border: none;
}

#nav_menu-29.widget_nav_menu a,
#nav_menu-30.widget_nav_menu a
{
  text-decoration: none;
  color: #000;
  -webkit-transition: font-size 0.2s ease, background-color 0.2s ease;
  -moz-transition: font-size 0.2s ease, background-color 0.2s ease;
  -o-transition: font-size 0.2s ease, background-color 0.2s ease;
  -ms-transition: font-size 0.2s ease, background-color 0.2s ease;
  transition: font-size 0.2s ease, background-color 0.2s ease;
  display: block;
}

#nav_menu-29.widget_nav_menu,
#nav_menu-30.widget_nav_menu
{
  width: max-content;
	width: -moz-max-content;
}
#nav_menu-29.widget_nav_menu a:hover,
#nav_menu-30.widget_nav_menu a:hover
{
  font-size: 20px;
  background: whitesmoke;
}

.mySticky29 {
  position: fixed;
  top: 124px;
}

.mySticky30 {
  position: fixed;
	top: 366px; /**124+the height of .mySticky27**/
}

#eparchy td{
  border-color:#242444;
	font-size:0.8em;
	vertical-align: middle;
}

#eparchy a {
	color: var(--color-primary-base);
}

/*end Conference CSS*/

nav.syriac-nav-hor {
	width:150%;
	font-size:1.2em;
}

@media only screen and (max-width: 992px) {
	nav.syriac-nav-hor {
		width:100%;
		font-size:1.2em;
	}
	
div.menu-learning-syriac-together-vertical-container {
	margin-top: 0px;
}
	
}

.menu-syriac-grammar-top-container {
	margin-top: 124px;
	font-size:1.3em;
}

.menu-syriac-grammar-bottom-container {
	font-size:1.3em;
}

/*CSS Fade In Overlay on Image Hover*/
/*Tabs*/
article.mytabs {
	position: relative;
	display: inline-block;
	width: 95%;
	height: 17em;
	margin: 2em auto;
/*border: 2px solid red;*/
}

article.mytabs section {
	position: absolute;
	display: inline-block;
	top: 1.8em;
	left: 0;
	height: 110%;
	width: 90%;
	padding: 10px 20px;
	background-color: black;
	color: white;
	border-radius: 0 10px 10px 10px;
	box-shadow: 0 5px 5px rgba(0,0,0,0.1);
	z-index: 0;
/*border: 2px solid lightblue;*/
}

article.mytabs section:first-child {
	z-index: 1;
/*border: 2px solid lightgreen;*/
}

article.mytabs section h2 {
	position: absolute;
	font-size: 1em;
	font-weight: normal;
	width: 150px;
	height: 1.8em;
	top: -1.8em;
	left: 0;
	padding: 0;
	margin: 0;
	color: white;
	background-color: black;
	border-radius: 10px 10px 0 0;
	border: 0 solid white;
}

article.mytabs section:nth-child(2) h2 {
	left: 151px;
}

article.mytabs section:nth-child(3) h2 {
	left: 302px;
}

article.mytabs section h2 a {
	display: block;
	width: 100%;
	line-height: 1.8em;
	text-align: center;
	text-decoration: none;
	color: inherit;
	outline: 0 none;
}

article.mytabs section:target {
	color: white;
	background-color: black;
	z-index: 2;
/*border: 5px solid #004d47;*/
/*border-top: 0px;
    border-left: 0px;*/
/*border-radius: 0px 10px 10px 10px;*/
}

article.mytabs section:target h2 {
	color: coral;
	background-color: black;
	z-index: 2;
/*border: 5px solid #004d47;
    border-bottom: 0px;
    border-radius: 0px 0px 0px 0px;*/
}

article.mytabs table a {
	text-decoration: none;
	color: white;
}

article.mytabs table a:hover {
	text-decoration: none;
	color: #d3d3d3;
}

article.mytabs table {
	width: 100%;
	border-collapse: collapse;
}

article.mytabs table td {
	border-bottom: 1px solid #ddd;
	padding-top: 5px;
}

article.mytabs table tr:last-child {
	border-bottom: 2px solid black;
}

article.mytabs table th {
	padding-top: 0;
	padding-bottom: 25px;
	text-align: center;
}

article.mytabs table td {
	width: 150px;
}

@media only screen and (max-width: 600px) {
	article.mytabs {
		height: 440px;
	}
}

/*FootnoteDisplay*/
a.myFootnote {
	vertical-align: super;
	font-size: small;
	text-decoration: none;
	color: red;
}

.displayMyFootnote {
	display: none;
	position: fixed;
	width: 100%;
	left: 0;
	top: 0;
	background-color: rgba(0,0,0,0.7);
	animation-name: myFootnoteDisplay;
	animation-duration: 1s;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	z-index: 1000;
}

.displayMyFootnoteText {
	position: relative;
	background-color: white;
	color: black;
	padding: 20px;
	width: 80%;
	max-width: 980px;
	height: auto;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	animation-name: myFootnoteDisplay;
	animation-duration: 1s;
	border-radius: 5px;
}

.displayMyFootnote:target {
	display: block;
	height: 100%;
}

.displayMyFootnote a {
	color: black;
	font-size: 24px;
	padding: 3.5px 9px;
	text-align: center;
	text-decoration: none;
	border-radius: 10px;
	animation-name: myFootnoteDisplay;
	animation-duration: 1s;
	float: right;
	margin-right: -20px;
	margin-top: -20px;
}

.displayMyFootnote a:hover {
	color: lightgrey;
	border-color: lightgrey;
}

.displayMyFootnote a, .displayMyFootnote span {
	display: table;
}

.displayMyFootnoteHeading {
	display: none;
	margin-left: 0;
	width: 300px;
	border-top-style: solid;
	border-top-width: thin;
	border-top-color: black;
	padding-top: 10px;
	color: black;
}

/*@media screen and (max-width: 2000px) {*/
@media print {
	.displayMyFootnote {
		display: contents;
	}
	
	.displayMyFootnoteText {
		display: contents;
	}
	
	.displayMyFootnote a {
		display: none;
	}
	
	.displayMyFootnoteHeading {
		display: block;
	}
}

/*myOverlayLink*/
.myOverlayLink {
	position: relative;
	max-width: 250px;
	margin: auto;
}

.myOverlay img {
	max-width: 250px;
	border: 1px solid white;
}

.myOverlayLink img {
	max-width: 250px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.myOverlayLink div {
	color: #004d47;
	text-align: center;
}

.myOverlayLink a {
	text-decoration: none;
}

.myOverlay {
	display: none;
}

.myOverlayText p {
	margin-top: 0;
	margin-left: 20px;
	margin-right: 20px;
	text-align: justify;
}

.myOverlay img {
	float: left;
	margin-bottom: 20px;
	margin-right: 20px;
	margin-left: 20px;
}

.myOverlayText h3 {
	position: relative;
	color: white;
	column-span: all;
	font-weight: 700;
	text-align: center;
}

a.myOverlay {
	display: block;
	position: fixed;
	z-index: 1000;
	left: 92%;
	border: 3px solid #d3d3d3;
	color: #d3d3d3;
	font-size: 25px;
	padding: 3.5px 9px;
	text-align: center;
	text-decoration: none;
	border-radius: 10px;
	animation-name: myOverlayDropDown;
	animation-duration: 4s;
	animation-fill-mode: forwards;
}

a:hover.myOverlay {
	color: #fff;
	border-color: #fff;
}

@keyframes myOverlayDropDown {
	from {
		top: -100%;
	}
	
	to {
		top: 0;
		background-color: #00121a;
		color: white;
	}
}

.myOverlay:target {
	position: fixed;
	width: 100%;
	height: 100%;
	overflow: scroll;
	color: transparent;
	animation-name: myOverlayDropDown;
	animation-duration: 4s;
	animation-fill-mode: forwards;
	z-index: 999000;
	left: 0;
	display: flex;
	justify-content: center;
}

.myOverlayText {
	position: relative;
	margin: auto;
	column-count: 2;
	column-gap: 20px;
	column-fill: balance;
	width: 80%;
}

@media only screen and (max-width: 600px) {
	.myOverlayText {
		top: 0;
		left: 0;
		transform: translate(0%,0%);
	}
	
	.myOverlayText p, h3, img {
		display: block;
		column-span: all;
	}
	
	.myOverlay img {
		float: none;
		margin-right: auto;
		margin-left: auto;
	}
	
	.myOverlay a {
		border: none;
		float: right;
	}
}

/**Tables with Syriac Texts**/
.syriacTable tr:hover {
	background-color: #F0F8FF;
}


.syriacTable td:nth-child(2), .syriacTable th:nth-child(2) {
	text-align: right;
	font-size: 25px;
	font-weight: normal;
}

.syriacTable td {
	border-color: #98B7D2;
	border-top-width:0.5px;
	border-bottom-width:0.5px;
	vertical-align: top;
}

.syriacTable th {
	border-color:  #3c2133;
	border-top-width:2px;
	border-bottom-width:2px;
	vertical-align: top;
	background-color: #3c2133;
	color: white;
}


/**End of Syriac Table**/

/** Importing Syriac Fonts and applying them to all html elements **/

/*Importing Serto Urhoy*/

@font-face {
 font-family: 'Serto Urhoy'; font-style: normal; font-weight: normal;
 src: local('Serto Urhoy'), url('https://thehiddenpearl.org/wp-content/fonts/SyrCOMUrhoy.otf') format('truetype');
}

@font-face {
 font-family: 'Serto Antioch Bible'; font-style: normal; font-weight: normal;
 src: local('Serto Urhoy'), url('https://thehiddenpearl.org/wp-content/fonts/SertoAntioch.ttf') format('truetype');
}

* {
	font-family: "Libre Baskerville", serif, "Serto Antioch Bible", "Serto Urhoy";
}

/**end importing fonts**/