:root{
   --bg-color:#353535;
   --book-disp-width:calc(100% - 120px);
   --flip-btnX:60px;
}

body { 
  position:absolute; 
  margin: 0px; 
  background: var(--bg-color);
  width: 100%;
  height: 100%;
  min-height: 100%;
  font-family: 'Open Sans', sans-serif;
}

::-webkit-scrollbar {
  width:6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #b1b1b1;
}
::-webkit-scrollbar-thumb:hover {
  background: #9b9b9b;
}

.ebook-player { 
    background: var(--bg-color); 
    display: block; 
    position: absolute;
    left:0px;
    top:0px;            
    padding: 0px; 
    font-family: 'Open Sans', sans-serif;  
    min-width: 300px; 
    width:100%;
    height:calc(100% - 0px); 
    margin:0;  
}
.ebook-player a i{
  text-shadow: 1px 2px #76767614;
}

#ebook {
   width: 100%;height:100%;
}
#webGL{ position: absolute; left:0px; top:0px; height:100%; width: 100%; overflow: hidden;  }
.player-ctrls{    position: absolute;
    max-height: 48px;   
    max-width: calc(100% - 120px);  
    width:  var(--book-disp-width);                               
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 450px;
}

  .flip-btn{position: absolute;top: 50%;transform: translateY(-50%);z-index: 1000;}
  .flip-btn a i{ font-size:50px; color:#fff;text-shadow: 0px 2px 5px rgb(63 63 63);}
  .flip-btn.next {right:var(--flip-btnX); }
  .flip-btn.prev {left: var(--flip-btnX);} 
  .player-ctrls a,.thumb-box a,.flip-btn a{cursor: pointer;}
  .hidden {display: none !important;} 
  
  .ctrl-menu { width: calc(100% - 20px); padding: 10px; background: #ffffff; font-size: 22px; box-shadow: 0 4px 12px 0px rgb(0 0 0 / 15%); z-index: 1001; max-width: 450px; margin: 0 auto; display: flex; }
  .ctrl-menu .col { width:33.333%; float:left; margin:0px; display:block;}
  .ctrl-menu .left { text-align:left;}
  .ctrl-menu .center {  text-align: center; font-size: 14px; margin-top: 3px; color: #3c3c3c; text-shadow: 1px 2px #76767614;}
  .ctrl-menu .center input { color: #3c3c3c; padding: 4px; outline: 0px; width: 70px; text-align: center; border-radius: 3px; text-shadow: 1px 2px #76767614; border: 1px solid #d9d9d9;}
  .ctrl-menu .right { text-align:right;}
  .ctrl-menu .col a { color: #3c3c3c; text-decoration: none; margin: 1px 10px; line-height: 26px}
  .ctrl-menu .col a:hover { color: #959595; text-decoration: none;}
  .ctrl-menu .separator { margin:0px 10px; border-right:1px solid #d9d9d9;}
  .ctrl-menu .search { border: 1px solid #d9d9d9; color: #3c3c3c; padding: 4px; outline: 0px; width:150px; text-align:left; border-radius:3px; position:relative; top:-3px;}

  .btnZoomBox i:nth-child(2),.btnFullScreen i:nth-child(2) {display: none;}
  .btnZoomBox.out i:nth-child(1),.fScreen .btnFullScreen i:nth-child(1) {display: none;}
  .btnZoomBox.out i:nth-child(2),.fScreen .btnFullScreen i:nth-child(2){display: unset;}

  .zoom-box { background: #fff; padding: 5px 10px; border-radius: 2px; box-shadow: 0 4px 12px 0px rgb(0 0 0 / 25%); position: absolute; left:calc(50% - 112px); bottom: 80px; z-index:1001;}
  .zoom-box .zoom-bar { width:150px; height:10px; background:#e5e5e5; margin:4px 10px; cursor: pointer;}
  .zoom-box .zoom-progress { display:block; width:50px; height:10px; background:#b1b1b1;}
  .zoom-box .zoom-align { display:block; float:left;}
  .zoom-box .btnZoomIn,.zoom-box .btnZoomOut{width: 16px; display: flex;  height: 16px; float: left;  padding-top: 1px;}
  .zoom-box .btnZoomIn{ padding-top: 2px;}

  .thumb-box { width: 230px; height: calc(100% - 40px); padding: 10px; background:#ffffffeb; position: absolute; top: 10px; left: 10px; z-index: 1001; }  
  .thumb-box.s-page{width: 134px;}
  .thumb-list { margin: 0px auto; padding: 0px; height: calc(100% - 52px); overflow-y: scroll; overflow-x: hidden; }
  .thumb-list li { margin: 15px; text-align: center; font-size: 13px; letter-spacing: 2px; color: #919191; list-style: none; }
  .thumb-list li img { margin: 0px auto; display: block; width: 96px;}
  .thumb-list.lpnc li:last-child img{width: 192px;}
  .thumb-box .img-box{ position: relative; display: flex; margin: 0px 0px 3px; overflow: hidden; width: 100%; cursor: pointer; box-shadow: rgb(0 0 0 / 8%) 0px 5px 10px; }
  .thumb-box .gradient-left {​​ background: -webkit-gradient(linear, left top, right top, color-stop(.90, rgba(0, 0, 0, 0)), color-stop(1, rgba(0, 0, 0, .07))); background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, .07) 100%); background-image: -webkit-gradient(linear, left top, right top, color-stop(90%, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, .07))); background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 90%, rgb(0 0 0 / 7%) 100%); position: absolute; width: 100%; height: 100%; z-index: 2; pointer-events: none; left: 0px; }​​


  .thumb-box .gradient-right { background: -webkit-gradient(linear, right top, left top, color-stop(.90, rgba(0, 0, 0, 0)), color-stop(1, rgba(0, 0, 0, .06))); background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, .06) 100%); background-image: -webkit-gradient(linear, right top, left top, color-stop(90%, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, .06))); background-image: linear-gradient(to left, rgba(0, 0, 0, 0) 90%, rgb(0 0 0 / 6%) 100%); position: absolute; width: 100%; height: 100%; z-index: 2; pointer-events: none; left: 0px;}

  .thumb-box h5 { padding: 0px; margin: 5px; font-size: 16px; font-weight: 400; border-bottom: 1px solid #e5e5e5; padding-bottom: 10px; }
   li.active .img-box{outline: 2px solid rgb(102 102 102);}
  .thumb-close { position: absolute; top: 15px; right: 15px; color: #666; }
  .single-img-box .img-box, .thumb-list.single .img-box{box-shadow: none !important;}
  .single-img-box img, .thumb-list.single img{box-shadow: rgb(0 0 0 / 30%) 0px 7px 10px;}
  .thumb-box .img-box:hover {box-shadow: rgb(0 0 0 / 20%) 0px 5px 10px;}

  #hp-links, #hp-links div, #hp-links section {position: absolute;}
  #hp-links #l-links, #hp-links #r-links, .s-l a {width:50%; height: 100%; position: absolute; top:0px; left:0px;}
  #hp-links #r-links {left:50%; }
  #hp-links.s-page #hp-links, #hp-links.s-page #l-links, #hp-links.s-page #r-links, .s-l a {width:100% !important; left:0px !important;}


  #emp-result, #emp-result div {position: absolute;}
  #emp-result #l-empr, #emp-result #r-empr {width:50%; height: 100%; position: absolute; top:0px; left:0px;}
  #emp-result #r-empr {left:50%; }
  #emp-result.s-page #emp-result, #emp-result.s-page #l-empr, #emp-result.s-page #r-empr {width:100% !important; left:0px !important;}
  #emp-result .empr {background-color: rgb(255, 233, 33); opacity: .6;}

  .loading .player-ctrls, .loading .flip-btn , .loading .thumb-box , .loading .search-box{display: none;}
  .loading .pre-book, .loading .load-prog-txt{  display: inline-block !important; }
  .loading #webGL canvas{opacity: 0;}
  .load-prog-txt{position: absolute;  display: none;top: calc(50% - 10px); left: calc(50% - 48px); width: 100px; height: 20px; text-align: center;color: #bbbbbb; font-size: 14px; font-family:'Open Sans', sans-serif;}
  .freez .flip-btn{display: none;}
  .p-start .flip-btn.prev{display: none;}
  .p-end .flip-btn.next{display: none;}
  .btnDownLoad{display:none;} 
  .landscape .player-ctrls,.landscape .search-box,.landscape .thumb-box{display: none;}  
  .flipping #emp-result{display: none;} 
  .resizing #ebook{opacity: 0;}
  .resizing .flip-btn, .resizing .player-ctrls, .resizing .thumb-box, .resizing .search-box{display: none;}
  .resizing .pre-loader{display: block;}

  @media only screen and (max-width: 600px) {   
    .ctrl-menu .center span {display:none;}    
    .ctrl-menu {max-width: 270px;}

    .thumb-box{  width: calc(100% - 0px) !important; height: 103px; padding:0px; top: unset; bottom: 66px; left: 50%; transform: translateX(-50%); /*background: #aaa0;*/ background: #ffffffc4; overflow: hidden;}           
    .thumb-box h5, .thumb-close {display: none;}
    .thumb-list{overflow-x: scroll; overflow-y: hidden;height: calc(100% - 0px);display: flex; padding: 2px;}
    .thumb-list li{float: left;margin: 9px;font-size: 10px;}
    .thumb-list li img{max-width: 52px;}
    .flip-btn a i {font-size: 36px;}
    ::-webkit-scrollbar { width:4px; height: 4px; }        
  }


  :root{
      --pre-width: 60px;
      --pre-height: calc(var(--pre-width)*.75);
      --pre-rad: calc(var(--pre-width)/10);
      --pre-border: 2px;
      --pre-start-deg: -20deg;
      --pre-stop-deg: -160deg;
      --pre-bg-color:#353535;   
    }
    .pre-loader{  
      display: none;      
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .pre-book{  
      display: none;
      width:var(--pre-width);
      height: var(--pre-height);
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .pre-bC{
      border: 0px solid white;
      width: var(--pre-width);
      height: var(--pre-height);
      position: absolute;
      top: 0px;
      left: 0px;
      border-radius: 2px;
      background-color: var(--pre-bg-color);
      perspective: 90px;
      perspective-origin: 50% 50%;
      transform-style: preserve-3d;
      box-sizing: border-box;  
    }
    .b-anim{
      animation-name: anim-book;
    }
    #pre-bC > div {      
      border: var(--pre-border) solid #808080;
      border-left: 0px solid rgba(255, 255, 255, 0.6);
      box-sizing: border-box;
      width: calc(var(--pre-width)/2);
      height: var(--pre-height);
      position: absolute;
      left: calc(var(--pre-width)/2);
      top: 0px;
      animation-name: inherit;
      animation-duration: 1.1s;
      transform-origin: 0 50%;
      animation-iteration-count: 1;
      background-color: var(--pre-bg-color);
      border-radius: 0 var(--pre-rad) var(--pre-rad) 0;
    }
    #pre-bC div:nth-child(1) {
      animation-name: none;
      transform: rotateY(var(--pre-stop-deg));
      display: block;
    }
    #pre-bC div:nth-child(2) {
     animation-delay: 2.25s;
    }
    #pre-bC div:nth-child(3) {
     animation-delay: 2.1s;
    }
    #pre-bC div:nth-child(4) {
     animation-delay: 1.95s;
    }
    #pre-bC div:nth-child(5) {
     animation-delay: 1.8s;
    }
    #pre-bC div:nth-child(6) {
     animation-delay: 1.65s;
    }
    #pre-bC div:nth-child(7) {
     animation-delay: 1.5s;
    }
    #pre-bC div:nth-child(8) {
     animation-delay: 0.9s;
    }
    #pre-bC div:nth-child(9) {
     animation-delay: 0.75s;
    }
    #pre-bC div:nth-child(10) {
     animation-delay: 0.6s;
    }
    #pre-bC div:nth-child(11) {
     animation-delay: 0s;
    }
    #pre-bC div:nth-child(12) {
     animation-name: none;
      transform: rotateY(var(--pre-start-deg));
      display: block;
    }


    @keyframes anim-book {
        0% { 
          transform: rotateY(1deg);
        }
        35% {          
          background-color: #252525;
        }
        85% {
          background-color: var(--pre-bg-color);
        }
        100% { 
          transform: rotateY(-162deg);
        }
    }
   
    .search-box{position: absolute;right: 20px; top: 0px; max-height: 100vh; height: calc(100% - 100px); z-index: 1001;}
    .search-box .search-in i:nth-child(2) {display: none;}
    .search-box.step1 .search-in, .search-in:hover{width: 300px;cursor: pointer;  border-radius: 5px;}
    .search-box.step1 .search-in .search-input, .search-in:hover .search-input{display: block;}
    .search-box.step1 .search-in .search-light, .search-in:hover .search-light{color: #464646;}    
    .search-box.step1 .search-out, .search-box.step1 .search-in i:nth-child(2) {display: block !important;}
    .search-box.step1 .search-in i:nth-child(1) {display: none;}  

    .search-in {position: absolute; top: 10px; right:0px; transition: all 1s; width: 50px; height: 50px; background: #fff; box-sizing: border-box; border-radius: 25px; border: 4px solid #fff; padding: 5px; z-index: 1001;}
    .search-in .search-input{position: absolute; top: 1px; left: 0; width: 100%;; height: 42.5px; line-height: 30px; outline: 0; border: 0; display: none; font-size: 1em; border-radius: 20px; padding: 0 20px;}
    .search-in .search-light{box-sizing: border-box; padding: 10px; width: 42.5px; height: 42.5px; position: absolute; top: 0; right: 0; border-radius: 50%; color: #07051a; text-align: center; font-size: 1.4em; transition: all 1s;}
    .search-in .search-close { box-sizing: border-box; padding: 10px; width: 42.5px; height: 42.5px; position: absolute; top: 0px; right: 0; border-radius: 50%; color: #07051a; background: #fff; text-align: center; font-size: 1.4em; line-height: 24px; transition: all 1s;}
    .sr-head { margin-top: 0px; font-size: 12px; color: #6e6e6e; background: #f9f9f9; padding: 10px; border-bottom: 1px solid #d9d9d9; width: 100%; display: block; min-height: 17px; position: relative;}    
    .sr-head img{ width: 22px;position: absolute; right: 30px; display: none; top: 8px;}
    .searching .sr-head img{display: inline-block;}

    .search-out {display:none; background: #fff; margin-top: 70px; width: 300px; overflow: hidden; min-height: calc(100% - 80px); height: calc(100% - 54px);}    
    .sr-list { margin: 0px auto; padding: 0px; overflow-y: scroll; max-height:calc(100% - 30px); font-family: 'Open Sans', sans-serif;}
    .sr-list li {margin: 15px; text-align:left; font-size: 14px; letter-spacing:0px; color: #464646; list-style: none; font-weight: 400; border-bottom: 1px solid #d9d9d9; padding-bottom: 15px; cursor: pointer; }
    .sr-list li p { margin-bottom: 5px; margin-top: 5px;}
    .sr-list li span { display: block; margin-top: 5px; font-size: 12px; color: #a7a7a7;}
    .sr-list li strong {background: #feffc7; color: #464646; padding: 0px 4px;}
 
    @media only screen and (max-width: 600px) {
      .search-in {height: 40px; width: 40px; }
      .search-in .search-input {top:0px; height: 32.5px; font-size: .9em;}
      .search-in .search-close{width: 38.5px; height: 38.5px; padding: 8px; top:-3px;}
      .search-in .search-light{width: 38.5px; height: 38.5px; padding: 6px; right: -4px;}
      .search-out {margin-top:54px;}
      .sr-list li{font-size: 12px;}
    }

    .fade-in {
        animation: fadeIn ease 1s;
        -webkit-animation: fadeIn ease 1s;
        -moz-animation: fadeIn ease 1s;
        -o-animation: fadeIn ease 1s;
        -ms-animation: fadeIn ease 1s;
      }
      @keyframes fadeIn {
        0% {
          opacity:0;
        }
        100% {
          opacity:1;
        }
      }

      @-moz-keyframes fadeIn {
        0% {
          opacity:0;
        }
        100% {
          opacity:1;
        }
      }

      @-webkit-keyframes fadeIn {
        0% {
          opacity:0;
        }
        100% {
          opacity:1;
        }
      }

      @-o-keyframes fadeIn {
        0% {
          opacity:0;
        }
        100% {
          opacity:1;
        }
      }

      @-ms-keyframes fadeIn {
        0% {
          opacity:0;
        }
        100% {
          opacity:1;
      }