.flex-container{
	width: 100%;
	min-height: 300px;
	margin: 0 auto;
	display: -webkit-flex; /* Safari */
	display: flex; /* Standard syntax */
}

.black{
  padding: 10px;
	-webkit-flex: 1; /* Safari */
	-ms-flex: 1; /* IE 10 */
	flex: 1; /* Standard syntax */
  color:#fff!important;
  background-color:#101820!important
}

.center{
  text-align:center
}

.Logography{
  padding: 10px;
	-webkit-flex: 1; /* Safari */
	-ms-flex: 1; /* IE 10 */
	flex: 1; /* Standard syntax */
  color:#000!important;
  background-color:#676AA7!important
}

.Syllabary{
  padding: 10px;
	-webkit-flex: 1; /* Safari */
	-ms-flex: 1; /* IE 10 */
	flex: 1; /* Standard syntax */
  color:#000!important;
  background-color:#9ccc95!important
}

.Abjad{
  padding: 10px;
	-webkit-flex: 1; /* Safari */
	-ms-flex: 1; /* IE 10 */
	flex: 1; /* Standard syntax */
  color:#000!important;
  background-color:#ffaa4d!important
}

.Abugida{
  padding: 10px;
	-webkit-flex: 1; /* Safari */
	-ms-flex: 1; /* IE 10 */
	flex: 1; /* Standard syntax */
  color:#000!important;
  background-color:#F2F0A1!important
}

.Alphabet{
  padding: 10px;
	-webkit-flex: 1; /* Safari */
	-ms-flex: 1; /* IE 10 */
	flex: 1; /* Standard syntax */
  color:#000!important;
  background-color:#FF6F61!important
}

.light-grey{
  padding: 10px;
	-webkit-flex: 1; /* Safari */
	-ms-flex: 1; /* IE 10 */
	flex: 1; /* Standard syntax */
  color:#000!important;
  background-color:#DEDEDE!important
}

img.epigraphy {
	width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

img.peeps {
  display: block;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

*, h1, h2, h3, h4, h5, p {
  font-family: Futura;
}


/* Parent Container */
.content_img{
   position: relative;
   width: 125px;
   height: 125px;
   float: left;
   margin-right: 1px;
   border-radius: 10px;
   background-color:#FFFFFF;
}

/* Child Text Container */
.content_img div{
   position: absolute;
   bottom: 0;
   right: 0;
   background: black;
   color: white;
   margin-bottom: 5px;
   font-size: 12px;
   text-align: center;
   font-family: Futura;
   opacity: 0;
   visibility: hidden;
   -webkit-transition: visibility 0s, opacity 0.5s linear;
   transition: visibility 0s, opacity 0.5s linear;
}

/* Hover on Parent Container */
.content_img:hover{
   cursor: pointer;
}

.content_img:hover div{
   width: 125px;
   padding: 1px 1px;
   visibility: visible;
   opacity: 0.7;
}

.row {
  display: flex; /* Equal Height and Width using Flexbox */
  width: 100%; /* https://www.w3schools.com/howto/howto_css_equal_height.asp */
}

.column {
  flex: 1;
  padding: 16px;
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
	width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
  background-color: #333333;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

* {
	box-sizing: border-box;
}

/* Create three equal columns that floats next to each other */
.column {
	float: left;
	width: 33.33%;
	padding: 10px;
}

/* Clear floats after the columns */
.row:after {
	content: "";
	display: table;
	clear: both;
}

.bichig {
margin: 2px 1px 0px 1px;
padding: 0px;
-moz-writing-mode: vertical-lr;
writing-mode: vertical-lr;
-webkit-writing-mode: vertical-lr;
-o-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: tb-lr;
-webkit-text-orientation: sideways-right;
text-justify: inter-ideograph;
text-align:right;
}

.nomen-sacrum {
	text-decoration-line: overline;
}


.toggle-content {
    display: none;
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
  }

  .toggle-content.active {
    display: block;
  }

  button[data-target]::after {
    content: none !important;
  }



.collapsible-style {
  background-color: #f1f1f1;
  cursor: pointer;
  padding: 10px 16px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: background-color 0.3s ease;
  margin-bottom: 5px;
}

.collapsible-style:hover {
  background-color: #555;
}

/* override any unwanted symbols */
.collapsible-style::after {
  content: none !important;
}

.flipHorizontal {
            display: inline-block;
            transform: scaleX(-1);
        }


@font-face { font-family: FormeraLight; src: url('../Fonts/FormeraLight.ttf'); }
@font-face { font-family: FuturaCyrillicMedium; src: url('../Fonts/FuturaCyrillicMedium.ttf'); }
@font-face { font-family: GreekFuturaLDR; src: url('../Fonts/GreekFuturaLDR.ttf'); }

@font-face { font-family: ANGULARUncial; src: url('../Fonts/ANGULARUncial.ttf'); }
@font-face { font-family: BIBLICALUncial; src: url('../Fonts/BIBLICALUncial.ttf'); }
@font-face { font-family: COPTICUncial; src: url('../Fonts/COPTICUncial.ttf'); }
@font-face { font-family: Minuscule_IX; src: url('../Fonts/Minuscule_IX.ttf'); }
@font-face { font-family: Minuscule_XI; src: url('../Fonts/Minuscule_XI.ttf'); }
@font-face { font-family: Minuscule_XV; src: url('../Fonts/Minuscule_XV.ttf'); }
@font-face { font-family: PAPYRUSUncial; src: url('../Fonts/PAPYRUSUncial.ttf'); }
@font-face { font-family: ROUNDUncial; src: url('../Fonts/ROUNDUncial.ttf'); }
@font-face { font-family: SLAVONICUncial; src: url('../Fonts/SLAVONICUncial.ttf'); }
@font-face { font-family: SLOPINGUncial; src: url('../Fonts/SLOPINGUncial.ttf'); }