html {font-family: matrix-ii, serif; font-display: swap; overflow-x: hidden; max-width: 100%;}
body {font-family: matrix-ii, serif; font-display: swap; background-color: #fffdfc; margin:0 auto; width:100%;  border-top: 20px solid #d05a5f; overflow-x: hidden; max-width: 100%;}
* {box-sizing: border-box;}
article {width: 90%; margin:0 auto; max-width: 850px;}
footer {width: 90%; margin:0 auto; max-width: 850px; text-align: center;margin-bottom: 20px;}
a {text-decoration: none; font-weight: bold; color:#d05a5f;}
a:hover { transition: .2s;}
h1, h1 a {font-size: 50px; line-height: 52px; margin-top: 60px; margin-bottom: 10px;}
h1 a {color:#000;}
h1 a:hover {color:#d05a5f;}
h2 {font-size: 38px; line-height: 42px; margin-top: 100px; margin-bottom: 60px;}
h3 {font-size: 30px; line-height: normal; font-weight: 300; margin-top: 50px; margin-bottom: 0; color: #000; border-bottom: 8px solid #d05a5f; display: inline-block;}
h4 {font-size: 26px; line-height: normal; font-weight: 300; margin-top: 0; margin-bottom: 0; font-style: italic;}
h5 {font-size: 20px; line-height: normal; font-weight: 300; margin-top: 10px; margin-bottom: 100px; font-style: italic;}
blockquote { font-weight: 300; border-left: 14px solid #d05a5f; color: #000; padding-left: 20px; font-size: 20px; line-height: 28px; margin-left: 0px; }
blockquote p { line-height: 28px; font-size: 20px;}
p, td {font-size: 22px; line-height: 33px; font-weight: 300;}
td, table {border-bottom: 1px solid #d05a5f;border-top: 1px solid #d05a5f;}
.arabic {font-family: "Simplified Arabic";}
.illo {text-align: center; }
.illo img {max-width: 100%;}
.coda {text-align: center; font-size: 60px; margin-top: 80px; margin-bottom: 80px;}
.first:first-letter {color: #d05a5f; float: left; font-weight: bold; font-size: 105px; line-height: 92px; padding: 0 8px 0 0;}
/*form*/
.signup { background-color: #f4e2d6; padding: 10px 20px 20px 20px; text-align: center; margin: 50px auto 0 auto;}
form input {border: 1px solid #d05a5f; line-height: 30px; font-size:14px; padding: 3px 5px; width: 200px; font-family: matrix-ii, serif;}
form .button {border: 1px solid #d05a5f; color: #acacac; font-size: 20px; line-height: 30px; font-size:14px; background-color: #d05a5f; color: #fffdfc; padding: 3px; letter-spacing: .5px; width: 100px; font-family: matrix-ii, serif;}
/*home page*/
.promo {padding: 15px 30px; background-color: #f4e2d6; margin: 20px 0;}
#letters {width: 80%; margin: 30px auto 100px auto; text-align: center;}
#letters a {font-weight: normal;}
.letter {width: 100%; border:1px solid #d05a5f; margin-bottom: 20px; text-align: center; color: #acacac; line-height: 140px;}
.number {font-size: 20px; text-align:center; float:left; width: 10%; background-color: #d05a5f; color: #fff;}
.symbol {font-size: 90px; text-align:center; float:left; width: 33%; margin-top: -20px;}
.english {font-size: 22px; text-align:left;  overflow: hidden;}
.english span {line-height: 100%; display: inline-block; vertical-align: middle;}
a.live .letter {border:2px solid #d05a5f; color: #000;}
a.live .letter .number {color: #fff; }
a.live .letter:hover {background-color: #d05a5f; color:#fff; transition: .2s;}
/*book page*/
.mySlides {display: none}
.mySlides img {width:100%;}
.slideshow-container {max-width: 90%; position: relative; margin: auto; background-color: #000;}
.prev, .next {cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -78px; color: white; font-weight: bold; font-size: 78px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none;}
.next {right: 0; border-radius: 3px 0 0 3px;}
.prev:hover, .next:hover {background-color: rgba(0,0,0,0.8);}
.dots {text-align:center; margin-top:20px; margin-bottom:100px;}
.dot {cursor: pointer; height: 25px; width: 25px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.4s ease;}
.active, .dot:hover {background-color: #d05a5f;}
.fade {animation-name: fade; animation-duration: 1s;}
@-webkit-keyframes fade {from {opacity: .4} to {opacity: 1} }
@keyframes fade { from {opacity: .4} to {opacity: 1} }
/*mobile*/
@media only screen and (max-width:480px){
#letters {width: 100%;}
}