@font-face {
  font-family: "UnicodeBMPFallback.ttf";
  font-style: normal;
  font-weight: normal;
  src: url(../fonts/UnicodeBMPFallback.ttf);
  }
  
  @font-face {
    font-family: "MyFontRegular2.otf";
    font-style: normal;
    font-weight: normal;
    src: url(../fonts/MyFontRegular2.otf);
    }
  
  @font-face {
  font-family: "NotoSansTibetan-Regular.ttf";
  font-style: normal;
  font-weight: normal;
  src: url(../fonts/NotoSansTibetan-Regular.ttf);
  }
  
  @font-face {
  font-family: "Monlam_Uni_OuChan2.ttf";
  font-style: normal;
  font-weight: normal;
  src: url(../fonts/Monlam_Uni_OuChan2.ttf);
  }
  
  @font-face {
  font-family: "Monlam_Uni_OuChan3.ttf";
  font-style: normal;
  font-weight: normal;
  src: url(../fonts/Monlam_Uni_OuChan3.ttf);
  }
  
  @font-face {
  font-family: "Monlam_Uni_OuChan4.ttf";
  font-style: normal;
  font-weight: normal;
  src: url(../fonts/Monlam_Uni_OuChan4.ttf);
  }
  
  @font-face {
  font-family: "NotoSansTibetan-Regular.ttf";
  font-style: normal;
  font-weight: bold;
  src: url(../fonts/NotoSansTibetan-Bold.ttf);
  }
  

ul.nav {
    list-style-type: none !important;
    margin: 0;
    padding: 0;
}

li.nav {
    float: left;
    padding: 5px 5px;
}

li.nav a {
    display: block;
}

body {
margin: 0 auto;
background-image: url("../img/PAPER.png");
width: 100%;
font-family: "MyFontRegular2.otf";
}

div.body {
margin: 0 auto;
padding: 0px 50px 16px 50px;
-webkit-align-content: center;
align-content: center;
}

div.footer {max-width: 1200px;}

p {
    font-size: 26pt;
    font-weight: normal;
    font-family: "MyFontRegular2.otf";
    letter-spacing: normal;
    line-height: normal;
    -webkit-margin-before: 0.5em;
    -webkit-margin-after: 0.5em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

.clickme-font {
    font-size: 26pt;
    font-weight: normal;
    color: #434343;
    cursor: pointer;
}

.clickme-font:hover {
  text-shadow: 2px 1px 2px grey;
	font-weight: bold;
	font-size: 27pt;
	line-height: 190%;
	color: #434343;
}

.clickme-font:active {
  text-shadow: 1px 1px black;
	font-weight: bold;
	font-size: 27pt;
	line-height: 190%;
	color: #434343;
}

.p1 {
font-size: 20pt;
font-weight: normal;
font-family: "MyFontRegular2.otf";
line-height: 20pt;
text-shadow: 1px 1px 2px grey;
}

#.p1:hover {
  text-shadow: 2px 1px 2px grey;
	font-weight: bold;
	font-size: 21pt;
	line-height: 190%;
	color: #434343;
}

#.p1:active {
  text-shadow: 1px 1px black;
	font-weight: bold;
	font-size: 21pt;
	line-height: 190%;
	color: #434343;
}

p.en {
font-size: 12pt; 
font-family: Arial; 
margin-bottom:10pt;
line-height:1.38;
}

span.en {
font-size: 14pt; 
font-family: Arial; 
margin-bottom:10pt;
line-height:1.38;
}


p.k { 
color: rgb(39, 141, 161); 
font-size: 26pt;
font-weight: normal;
font-family: "MyFontRegular2.otf";
}


p.kh { 
color: rgb(221, 195, 40); 
font-size: 26pt;
font-weight: normal;
font-family: "MyFontRegular2.otf";
}

table.table3 {
width: 100%;
margin-left:auto; 
margin-right:auto;
max-width: 830px;
vertical-align: top;
}

table.table4 {
width: 100%;
margin-left:auto; 
margin-right:auto;
max-width: 830px;
vertical-align: top;
box-shadow: 10px 10px 5px grey;
border-bottom: 3px solid grey;
border: 2px solid black;
border-radius: 14px;
border-collapse: unset;
}

table.table5 {
border: 2px solid grey; 
background-color: white;
width: 100%;
margin-left:auto; 
margin-right:auto;
max-width: 830px;
vertical-align: top;
border-radius: 14px;
box-shadow: 3px 3px 5px grey;
border-collapse: unset;
}

td.table5 {
border: 2px solid grey; 
background-color: white;
font-size: 18pt; 
font-weight: normal;
font-family: "MyFontRegular2.otf";
vertical-align: top;
border-radius: 25px;
box-shadow: 3px 3px 5px grey;
}

#table.table4:hover {
box-shadow: 10px 10px 5px grey;
border-bottom: 3px solid grey;
border: 2px solid black;
border-radius: 25px;
}

#th.th1:hover {background-color: #ffed78; border-radius: 25px;}
#th.th2:hover {background-color: #f18686; border-radius: 25px;}
#th.th3:hover {background-color: #77bdd8; border-radius: 25px;}
#th.th4:hover {background-color: #c3d884; border-radius: 25px;}

th.thY, th.thR, th.thB, th.thG {
background-image: url("../img/PAPER2.png"); 
border-radius: 25px; 
border: 0px solid grey; 
box-shadow: 1px 1px 3px black; 
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
transition:all 0.3s linear;}

th.thY:hover, th.thR:hover, th.thB:hover, th.thG:hover {
-webkit-box-shadow: 3px 3px 4px rgba(0,0, 0, 0.4);
-moz-box-shadow: 3px 3px 4px rgba(0,0, 0, 0.4);
box-shadow: 5px 5px 10px rgba(0,0, 0, 0.4);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);
}

span.Y {color: rgb(221, 195, 40)}
span.Y2 {color: rgb(239, 223, 113)}
span.R {color: rgb(182, 50, 38)}
span.R2 {color: rgb(224, 125, 125)}
span.B {color: rgb(39, 141, 161)}
span.B2 {color: rgb(119, 189, 216)}
span.G {color: rgb(144, 172, 72)}
span.G2 {color: rgb(195, 216, 132)}
span.X {color: rgb(239, 239, 239)}
span.X2 {color: rgb(239, 239, 239)}
span.XX {color: rgb(67,67,67); font-size: 20pt}
span.XX2 {color: rgb(153,153,153); font-size: 20pt}


span.tag {
color: white;
background-color: rgb(39, 141, 161);  
border-radius: 25px;
padding: 10px;
font-size: 18pt;
font-family: "MyFontRegular2.otf";
box-shadow: 4px 4px 2px grey;
}

span.tag2 {
color: black;
background-color: rgb(221, 195, 40);  
border-radius: 25px;
padding: 10px;
font-size: 18pt;
font-family: "MyFontRegular2.otf";
box-shadow: 4px 4px 2px grey;
}

span.tag3 {
color: white;
background-color: black;  
border-radius: 25px;
padding: 10px;
font-size: 18pt;
font-family: "MyFontRegular2.otf";
box-shadow: 4px 4px 2px grey;
}

span.tag4 {
color: black;
background-color: white;  
border-radius: 25px;
padding: 10px;
font-size: 18pt;
font-family: "MyFontRegular2.otf";
box-shadow: 4px 4px 2px grey;
}

span.blur {
color: transparent;
text-shadow: 0 0 20px rgba(39, 0,0,0.8);
font-size: 18pt;
}

span.blur:hover {
color: #603f18;
text-shadow: none;
}

th, td {
padding: 15px;
vertical-align: top;
}


h1
{
text-indent: 0;
margin: 50px 0 0 0;
font-size: 40px;
font-weight: normal;
font-family: "Monlam_Uni_OuChan3.ttf";
    letter-spacing: normal;
    line-height: normal;
}

h1.en 
{
font-size: 26pt; 
font-family: Arial; 
margin-bottom:10pt;
line-height:1.38;
color: rgb(182, 50, 38);
}

h2
{
font-size: 28px;
color: #999999;
font-family: "Monlam_Uni_OuChan4.ttf"; /*subtitle font */
    letter-spacing: normal;
    line-height: normal;
}

h2.en
{
font-size: 16pt; 
font-family: Arial; 
font-weight: 400; 
margin-bottom:10pt;
line-height:1.38;
color: rgb(39, 141, 161);
}

h3
{
text-indent: 0;
margin: 50px 0 0 0;
font-size: 40px;
font-weight: normal;
font-family: "Monlam_Uni_OuChan3.ttf";
    letter-spacing: normal;
    line-height: normal;
}

h3.en
{
font-size: 14pt; 
font-family: Arial; 
color: rgb(67, 67, 67); 
margin-bottom:10pt;
color: rgb(144, 172, 72);
margin: 10px 0 0 0;
}

a {
    text-decoration: none;
	color: rgb(182, 50, 38);
    padding: 5px 5px;
}

a:hover, a:active {
	color: white;
    background-color: rgb(182, 50, 38);
	border-radius: 15px;
}

a.Y {
    text-decoration: none;
	color: rgb(221, 195, 40);
    padding: 5px 5px;
}

a.Y:hover, a.Y:active {
	color: white;
    background-color: rgb(221, 195, 40);
}

a.B {
    text-decoration: none;
	color: rgb(39, 141, 161);
    padding: 5px 5px;
}

a.B:hover, a.B:active {
	color: white;
    background-color: rgb(39, 141, 161);

}

ul.en {
font-size: 12pt; 
font-family: Arial; 
margin-bottom:10pt;
}

li.en {
font-size: 12pt; 
font-family: Arial;
margin-bottom:10pt;
}

img.float {
float: left;
margin-right:15pt;
}

input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
	text-align: center;
	font-size: 26pt;
	font-weight: normal;
	font-family: "MyFontRegular2.otf";
	color: black;
	border-radius: 10px;
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
transition:all 0.3s linear;

}

input[type=text].word {
    width: 120px;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
	text-align: center;
	font-size: 18pt;
	font-weight: normal;
	font-family: "MyFontRegular2.otf";
	color: black;
	border-radius: 10px;
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
transition:all 0.3s linear;
}

input[type=text].number {
    width: 70px;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
	text-align: center;
	font-size: 18pt;
	font-weight: normal;
	font-family: "MyFontRegular2.otf";
	color: black;
	border-radius: 10px;
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
transition:all 0.3s linear;
}

input[type=text]:focus, input[type=text]:hover {
-webkit-box-shadow: 15px 15px 20px rgba(247, 235, 26, 0.4);
-moz-box-shadow: 15px 15px 20px rgba(247, 235, 26, 0.4);
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
}

input:invalid {
  background: #d0d5da;
}

input:valid {
	background: #f7eb1a;
	-webkit-box-shadow: 15px 15px 20px rgba(255, 255, 255, 0.4);
	-moz-box-shadow: 15px 15px 20px rgba(255, 255, 255, 0.4);
	box-shadow: 0px 0px 50px 10px rgba(255, 255, 255, 0.4);
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	transform: scale(1.05);
}

::-webkit-validation-bubble-message { display: none; }

.regular-checkbox {
	-webkit-appearance: none;
	background-color: #c1c6ca !important;
	border: 1px solid #9c9a9f;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
	padding: 15px !important;
	border-radius: 3px;
	display: inline-block;
	position: relative;
	-webkit-transition:all 0.3s linear;
	-moz-transition:all 0.3s linear;
	-o-transition:all 0.3s linear;
	transition:all 0.3s linear;
}

.regular-checkbox:hover, .regular-checkbox:focus
{
	-webkit-box-shadow: 7px 7px 10px rgba(0,0, 0, 0.4);
	-moz-box-shadow: 7px 7px 10px rgba(0,0, 0, 0.4);
	box-shadow: 7px 7px 10px rgba(0,0, 0, 0.4);
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	transform: scale(1.1);
}

.wrong-checkbox:checked:after {
	content: '\2718';
	font-size: 20px;
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	background-color: ;
	color: rgb(182, 50, 38);
	padding: 3px;
}

.right-checkbox:checked:after {
	content: '\2714';
	font-size: 18px;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background-color: rgb(144, 172, 72);
	color: white;
	padding: 3px;
}

audio
{
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
transition:all 0.3s linear;
-moz-box-shadow: 0px 0px 0px 0px black;
-webkit-box-shadow:  0px 0px 0px 0px black;
box-shadow: 0px 0px 0px 0px black;
-moz-border-radius:7px 7px 7px 7px ;
-webkit-border-radius:7px 7px 7px 7px ;
border-radius:7px 7px 7px 7px ;
overflow: hidden;
opacity: 0.3;
width: 80px;
height: 80px;
}

.container {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 0 auto;
  -webkit-align-content: center;
  align-content: center;
  width: 100%;
  overflow: hidden; 
}

.center {
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
    text-align: center;
    font-size: 18px;
    z-index: +1;
}

#audio:hover, audio:focus, audio:active
{
-webkit-box-shadow: 3px 3px 4px rgba(0,0, 0, 0.4);
-moz-box-shadow: 3px 3px 4px rgba(0,0, 0, 0.4);
box-shadow: 3px 3px 4px rgba(0,0, 0, 0.4);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);
}


s, strike {
  text-decoration: none;/* replacing line-through default */
  position: relative;
  display: inline-block; /* keep it on one line */
}
s:after, strike:after {
  content: "";  /* required property */
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 3px solid black;
  height: 55%;  /* adjust depending on line thickness */
     /* or use calc() if you don't need to support IE8: */
  height: calc(60% - 1.5px); /* half the line thickness */
  width: 100%;
  transform: rotateZ(-4deg);
  -webkit-transform: rotateZ(-4deg);
   -moz-transform: rotateZ(-4deg);
}

img.rounded-corners {
border-radius: 14px;
box-shadow: 4px 4px 2px grey;
}

img.clickme {
      border-radius: 14px;
      box-shadow: 4px 4px 2px grey;
      outline: 0;
      cursor: pointe
      r;
}
img.rounded-corners-icon {
  border-radius: 20%;
  box-shadow: 4px 4px 2px grey;
  }
  
  img.clickme-icon {
        border-radius: 20%;
        box-shadow: 4px 4px 2px grey;
        outline: 0;
        cursor: pointer;
  }
 

.clickme:active {
  box-shadow: 2px 2px 2px black !important;
  transform: translateY(5px) !important;
  -webkit-transform: translateY(5px) !important;
  -moz-transform: translateY(5px) !important;
}

.clickme:hover
{
-webkit-box-shadow: 5px 5px 10px rgba(0,0, 0, 0.4);
-moz-box-shadow: 5px 5px 10px rgba(0,0, 0, 0.4);
box-shadow: 5px 5px 5px rgba(0,0, 0, 0.4);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);
}

video.GIF {
left: -12.5%;
right: -12.5%;
width: 75%;
border-radius: 14px;
box-shadow: 4px 4px 2px grey;
align: center;
object-fit: cover; 
}

#.centered-and-cropped { object-fit: cover }

#img.rounded-corners
{
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
transition:all 0.3s linear;
}

#img.other
{
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
transition:all 0.3s linear;
}

#img.other:hover
{
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);
}

.spoken { display: none; }
button:hover .literary { display: none; }
button:hover .spoken { display: inline; }
button:focus .literary { display: none; }
button:focus .spoken { display: inline; }
.diglossia, .spoken, .literary {
font-size: 26pt;
font-weight: normal;
font-family: "MyFontRegular2.otf"; 
border: none;
background-color: transparent; 
color: #434343; 
}

button.play {
  border-radius: 14px;
  box-shadow: 0 7px  4px #999;
  width: 80px;
  height: 80px;
  border: none;
  background-color: transparent; 
  outline: 0;
}

.play2 {
  border-radius: 50%;
  box-shadow: 0 7px  4px #999;
  width: 60px;
  height: 60px;
  border: none;
  background-color: transparent;
  outline: 0;
}

.invisible {
  border: none;
  color: transparent;
  background-color: transparent;
  outline: 0;
}

.invisible:hover {cursor: pointer;}

.dropdown-content {
    display: none;
    background-color: #f6f6f6;
    border: 1px solid #ddd;
    float: left;
	  position: fixed;
	  z-index: 2; 
    padding: 10px;
    box-shadow: 5px 0px 5px grey;
    min-width: 320px; 
    text-align: center; 
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
      overflow: hidden;
}

.dropdown-content a:hover {background-color: #ddd !important;}

.show {
  display: block;
  width: 350px;
  opacity: 1;
  transition:width 0.2s linear;
  -moz-transition:width 0.2s linear;
  -webkit-transition:width 0.2s linear;
  -o-transition:width 0.2s linear;
  overflow-y: scroll;
  height: 100%;
}

* {
    box-sizing: border-box;
}

/* Container for flexboxes */
.row4 {
    display: flex;
    flex-wrap: wrap;
}

/* Create four equal columns */
.data4 {
    flex: 25%;
    padding: 20px;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
    .data4 {
        flex: 50%;
    }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .row4 {
      flex-direction: column;
    }
}

/* Container for flexboxes */
.row3 {
    display: flex;
    flex-wrap: wrap;
}

/* Create three equal columns */
.data3 {
    flex: 33.33%;
    padding: 20px;
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .data3 {
      flex-direction: column;
    }
}

img.max-img {max-width: 400px;
}

.navigate {
  opacity: 0.2; 
}

.navigate:hover {
  transform: scale(1.35);
  -webkit-transform: scale(1.35);
  -moz-transform: scale(1.35);
  opacity: 1.0;
  transition:all 0.3s linear;
   -webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    cursor: pointer;
}

.navigate:active {
  transform: translateY(5px);
  -webkit-transform: translateY(5px);
  -moz-transform: translateY(5px);
}
.menu-img {
  opacity: 0.7; 
  cursor: pointer;
}

.menu-img:hover {
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  opacity: 0.9;
  transition:all 0.3s linear;
     -webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
}

.menu-img:active {
  transform: translateY(3px);
  -webkit-transform: translateY(3px);
  -moz-transform: translateY(3px);
  -o-transform: translateY(3px);
}

img.clickme2 {
border-radius: 50%;
box-shadow: 4px 4px 2px grey;
    outline: 0;
    cursor: pointer;
}

.clickme2:active {
  box-shadow: 2px 2px 2px black !important;
  transform: translateY(5px) !important;
  -webkit-transform: translateY(5px) !important;
  -moz-transform: translateY(5px) !important;
}

.clickme2:hover
{
-webkit-box-shadow: 5px 5px 10px rgba(0,0, 0, 0.4);
-moz-box-shadow: 5px 5px 10px rgba(0,0, 0, 0.4);
box-shadow: 5px 5px 5px rgba(0,0, 0, 0.4);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);
}

.navbar {
  overflow: hidden;
  position: sticky;
  top: 0;
  width: 100%;
  background-color: black; 
  z-index: 2;
}

ul.nav {
    list-style-type: none !important;
    margin: 0;
    padding: 0;
}

li.nav {
    float: left;
    padding: 5px 5px;
}

li.navR {
    float: right;
    padding: 5px 5px;
}

li.nav a {
    display: block;
}

.turn-the-page-L {
	float: left;
	position: fixed;
	bottom: 45%;
	left: 2%;
	border: none;
	color: transparent;
	background-color: transparent;
	outline: 0;
}

.turn-the-page-R {
  float: right !important;
  position: fixed; 
  bottom: 45%;
  right: 2%;
  border: none;
  color: transparent;
  background-color: transparent;
  outline: 0;
}
.initialized span[data-begin]:focus,
.initialized span[data-begin]:hover {
    background-color: #FFFFCA;
    box-shadow: 0px 0px 4px #FFFFCA;
    border-radius: 20%;
     outline: 0;
}
.initialized span[data-begin].speaking {
    background-color: yellow;
    box-shadow: 2px 2px 1px grey;
    border: 1px black;
    border-radius: 20%;
     outline: 0;
}
.initialized span[data-begin] {
    cursor: pointer;
}
.autofocus-current-word,
.playback-rate {
    font-size: smaller;
}
.autofocus-current-word label,
.playback-rate label {
    font-weight: bold;
}

button {
padding: 0px;
}

#buttons p {
  appearance:button;
  -moz-appearance:button; 
  -webkit-appearance:button;
  display: inline-block;
  padding: 2px 5px;
}

#preFooter {background-image: url("../img/PAPER.png")}
