@font-face{font-family: Vazir;src: url('../css/fonts/vazir/Vazir-FD.eot');src: url('../css/fonts/vazir/Vazir-FD.eot?#iefix') format('embedded-opentype'),url('../css/fonts/vazir/Vazir-FD.woff2') format('woff2'),url('../css/fonts/vazir/Vazir-FD.woff') format('woff'),url('../css/fonts/vazir/Vazir-FD.ttf') format('truetype');font-weight: normal;}
@font-face{font-family: Vazir-bold;src: url('../css/fonts/vazir/Vazir-Bold-FD.eot');src: url('../css/fonts/vazir/Vazir-Bold-FD.eot?#iefix') format('embedded-opentype'),url('../css/fonts/vazir/Vazir-Bold-FD.woff2') format('woff2'),url('../css/fonts/vazir/Vazir-Bold-FD.woff') format('woff'),url('../css/fonts/vazir/Vazir-Bold-FD.ttf') format('truetype');font-weight: bold;}
body{height: 100vh;background-color: #202020;direction: rtl;margin: 0;padding: 0;overflow: hidden;font-family: Vazir;}
div,a,h1,h2,h3,h4,h5,h6,select,input,textarea,table,tr,td,ul,li{font-family: Vazir;}
.container{width:90%;margin:0 auto;position: relative;}
a{text-decoration:none;}
a.linked{width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 2;}
.clear{clear: both;display: block;}

#body{display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;overflow: hidden;}
.book{width: 500px;height: 843px;position: relative;transition: transform 0.5s;}
.flipBtn{width: 55px;height: 55px;margin: 10px;cursor: pointer;transition: transform 0.5s;z-index: 9;}
#next-btn{background: url('j1/arrow-left.png') no-repeat center center/50px;}
#prev-btn{background: url('j1/arrow-right.png') no-repeat center center/50px;display: none;}
.flipPaper{height: 100%;width: 100%;position: absolute;top: 0;left: 0;}
.front{backface-visibility: hidden;}
.front, .back{position: absolute;width: 100%;height: 100%;top: 0;left: 0;display: flex;justify-content: center;align-items: center;background-color: white;transform-origin: right;transition: transform 1s;color: #FFF;overflow: hidden;}
.front{z-index: 1;}
.back{z-index: 0;}
.front-content, .back-content {width: 100%;height: 100%;overflow: hidden;}
.back-content{transform: rotateY(-180deg)}
.flipped .front, .flipped .back {transform: rotateY(180deg)}
#p1{z-index: 20;}
#p2{z-index: 19;}
#p3{z-index: 18;}
#p4{z-index: 17;}
#p5{z-index: 16;}
#p6{z-index: 15;}
#p7{z-index: 14;}
#p8{z-index: 13;}
#p9{z-index: 12;}
#p10{z-index: 11;}
#p11{z-index: 10;}
#p12{z-index: 9;}
#p13{z-index: 8;}
#p14{z-index: 7;}
#p15{z-index: 6;}
#p16{z-index: 5;}
#p17{z-index: 4;}
#p18{z-index: 3;}
#p19{z-index: 2;}
#p20{z-index: 1;}
.book-title{font-size: 30px;margin-bottom: 40px;}
.cover-img{width: 200px;height: 270px;object-fit: cover;border-radius: 30px;}
#sudio_tag{display: none;}

/*loading*/
.loading-start{width: 100%;height: 100%;position: fixed;top: 0;left: 0;background-color: #000;z-index: 9999;transition: all 1s ease-in-out 0s;overflow: hidden;}
.loading{width: 46px;position: absolute;top: 45%;left: 50%;transform: translate(-50%, -50%);z-index: 2;}
.loading-bar{animation-name: bar-growth;animation-duration: 1.5s;animation-iteration-count: infinite;background-color: #da9156;border-radius: 8px;height: 30px;margin-right: 3px;position: absolute;top: 20px;width: 9px;}
@keyframes bar-growth{
  0% { height: 30px; top: 20px; }
  5% { height: 34px; top: 18px; }
  10% { height: 38px; top: 16px; }
  15% { height: 42px; top: 14px; }
  25% { height: 46px; top: 12px; }
  30% { height: 50px; top: 10px; }
  35% { height: 54px; top: 8px; }
  40% { height: 58px; top: 6px; }
  45% { height: 62px; top: 4px; }
  50% { height: 66px; top: 2px; }
  55% { height: 66px; top: 2px; }
  60% { height: 62px; top: 4px; }
  65% { height: 58px; top: 6px; }
  70% { height: 54px; top: 8px; }
  75% { height: 50px; top: 10px; }
  80% { height: 46px; top: 12px; }
  85% { height: 42px; top: 14px; }
  90% { height: 38px; top: 16px; }
  95% { height: 34px; top: 18px; }
  100% { height: 30px; top: 20px; }
}
.loading-1{left: 0;animation-delay: 0s;}
.loading-2{left: 12px;animation-delay: 0.3s;}
.loading-3{left: 24px;animation-delay: 0.6s;}
.loading-4{left: 36px;animation-delay: 0.9s;}
.loading-5{left: 48px;animation-delay: 1.2s;}

/*modal*/
.modal{top: 0;left: 0;right: 0; bottom: 0; letter-spacing: normal; display: none; overflow: auto; overflow-y: scroll; position: fixed; z-index: 999; background: rgba(0,0,0,0.7);}
.modal-dialog{width: 700px; position: absolute;top: 45%;left: 50%;transform: translate(-50%, -50%);z-index: 2;}
.modal-content{position: relative; background-color: #000;border-radius: 16px;}
.modal-header{padding: 15px 30px; position: relative;background-color: #d3a918;border-radius: 16px 16px 0 0;}
.modal-header h4{color: #000; padding: 0; margin: 0; font-size: 20px;font-weight: normal;}
.modal-header .close{cursor: pointer; background:url('j1/white-close.png') no-repeat center center/23px;width: 30px;height: 30px;border: 0;position: absolute;top: 14px;left: 30px;}
.modal-title{margin: 0; line-height: 1.42857143; }
.modal-body{padding: 30px;border: 2px solid #393939;border-top: 0;min-height: 120px;border-radius: 0 0 16px 16px;}
.modal-txt{position: relative; direction: rtl; font-size: 16px;color: #D2D2D2;text-align: justify;line-height: 26px;}
.modal-txt p{margin: 0 0 5px;}
.modal-proimg{width: 28%;float: right;}
.modal-proimg img{display: block;width: 100%;}
.modal-procnt{width: 66%;float: left;}
.modal-procnt > span{font-size: 28px;margin-bottom: 15px;font-family: Vazir-bold;display: block;border-bottom: 1px solid #d3a918;padding-bottom: 10px;}
.modal-address{font-size: 15px;line-height: 26px;color: #FFF;text-align: justify;margin-bottom: 30px;}
.modal-social{display: table;margin: 0 auto 60px;}
.modal-social a{display: block;width: 35px;margin: 0 15px;float: right;}
.modal-social a img{width: 100%;display: block;}
.modal-btn{margin: 30px auto 0;display: table;}
.modal-btn a{padding: 8px 25px;font-size: 15px;color: #FFF;cursor: pointer;margin-left: 10px;float: right;border-radius: 5px;text-align: center;
min-width: 100px;}
.modal-exit{background-color: #b51414;display: table;}
.modal-click{background-color: #1d6a1d;display: none;}

@media only screen and (max-width:539px){
    body{background-color: #000;}
    #body{display: block;top: 0;left: 0;position: absolute;}
    .flipPaper{overflow: hidden;}
    .flipBtn{width: 35px;height: 35px;} 
    #next-btn, #prev-btn{background-size: 28px;margin: 0 7px;position: absolute;top: 48%; z-index: 99;}
    #prev-btn{right: 1%;}
    #next-btn{left: 1%;}
}