﻿.book .btn-view {
  /*display: inline-block;
  color: #bbb;
  font-size: .9em;
  -webkit-transition: color .3s;
  transition: color .3s;
  font-weight: bold;
  text-decoration: none;
  padding: 5px;
   padding-top: 60%;
  box-sizing: border-box;
  font-family: 'GEFlow-Bold';
  position:relative;
  width:90%;
      
     bottom: 0px;*/
    width: 80px;
    height: 80px;
    border-radius: 100%;
    border: 0px solid transparent;
    border-top-color: #f44556;
    border-right-color: #f44556;
    border-left-color: #f44556;
    margin: auto;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    transform: rotate(0deg);
    /*background: none!important;*/
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    /*background: -webkit-linear-gradient(top, #f76f54 0, #dd3535 49%, #d32121 51%, #c61f1f 100%)!important;*/
    box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.40);
    
    background: url("/Style%20Library/ar-sa/New/images/bg_topicNav_pattern.png") rgba(180,151,89,0.7);
    background-origin: inherit;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    cursor:pointer;
    display:table;
    }
    .book .btn-view:before {
    content: "";
    width: 197%;
    height: 15px;
    box-shadow: 0px -18px 11px -14px rgba(0, 0, 0, 0.5) inset;
    position: absolute;
    bottom: 0;
    right: -49%;
    z-index: -5;
    }
.book .btn-view i {
  color: #bbb;
  display: block;
  
      display: block;
    width: 75%;
    height: 75%;
    line-height: 40px;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(0,0,0,0.4);
    margin: auto;
    font-size: 14px;
    font-weight: bold;
    color: #f44556;
    font-family: 'GEFlow-Bold';
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transform: rotate(0deg);
    /* box-shadow: 0 2px 5px 0 rgba(0,0,0,0.80); */
    background: none!important;
    background: #fff!important;
    
    z-index: -1;
    cursor: pointer;
}
.download-book-icon
{
	font-family: 'GEFlow-Bold';
    color: maroon;
    font-size: 14px;
    /*padding-top: 35%;*/
    float: none;
    z-index: 5555545454;
    text-align: center;
    /*padding-right: 22px;*/
    
    display: table-cell;
    vertical-align: middle;
}

@-webkit-keyframes rotateplane {
    0%   {top:20px;}
    25%  {top:24px;}
    50%  {top:29px;}
    75%  {top:34px;}
    100% {top:38px;}
}
@-moz-keyframes rotateplane {
    0%   {top:20px;}
    25%  {top:24px;}
    50%  {top:29px;}
    75%  {top:34px;}
    100% {top:38px;}
}
@-o-keyframes rotateplane {
    0%   {top:20px;}
    25%  {top:24px;}
    50%  {top:29px;}
    75%  {top:34px;}
    100% {top:38px;}
}



.book .btn-view i:before {
  /*content: "\e90e";*/
  	/*position: absolute;
   
          
    background: url("/Style Library/Images/download2.png") no-repeat 0 0 !important;
    width: 65px;
    height: 65px;
    left: 30%;
    top:30px;*/
    transition:all 0.3s ease-in;
   

    }
.book .btn-view:hover {
  color: #5d5d5d;
}
.book .btn-view:hover i {
  color: #5d5d5d;
}
.book .description {
  display: block;
  margin: 10px 5px;
  font-size: 14px;
  max-height: 85px;
  overflow: hidden;
  padding: 0 15px;
  text-align: center;
   font-family: 'GEFlow-Bold';
       padding-top: 25%;
}
.book .hardcover_front li:first-child {
  background-color: transparent;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
      display: table;
 
  
 
}
.book .hardcover_front li:first-child img {
  text-align: center;
  width: 100%;
  height: 100%;

  overflow: hidden;
  /*background: url("/Style Library/ar-sa/New/images/decoration.png") repeat 0 0 rgba(180,151,89,1)!important;*/
   padding:5px;
   outline-style: unset;
   box-sizing: border-box;
    display:none;
    }
.book .hardcover_front li:last-child {
  background-color: #fffbec;
	/*background: url("/Style Library/ar-sa/New/images/decoration.png") repeat 0 0 rgba(180,151,89,.9);*/
	    border-radius: 4px 2px 2px 4px;
	        background: url("/Style Library/ar-sa/Temp/Images/book-cover-2.jpg") no-repeat 0 0 rgba(180,151,89,.9);
	        background-size: 100% 100%;
    background-origin: content-box;
	
}
.book .hardcover_back li:first-child {
  		background: #fffbec;
      box-shadow: 8px 8px 31px 5px rgba(0,0,0,0.60);
      
    background: url("/Style%20Library/ar-sa/Images/pattern-1.png") repeat 0 0 rgba(180,151,89,.5)!important;
   
   }
   
.book .hardcover_back li:last-child {
  background: #fffbec;
  background: url("/Style%20Library/ar-sa/Images/pattern-1.png") repeat 0 0 rgba(180,151,89,.5)!important;
	    
}
.book .book_spine li:first-child {
  background: #eee;
}
.book .book_spine li:last-child {
  background: #333;
}
.book .hardcover_front li:first-child:after,
.book .hardcover_front li:first-child:before,
.book .hardcover_front li:last-child:after,
.book .hardcover_front li:last-child:before,
.book .hardcover_back li:first-child:after,
.book .hardcover_back li:first-child:before,
.book .hardcover_back li:last-child:after,
.book .hardcover_back li:last-child:before,
.book .book_spine li:first-child:after,
.book .book_spine li:first-child:before,
.book .book_spine li:last-child:after,
.book .book_spine li:last-child:before {
  background: #999;
}
.book .page > li {
  background: -webkit-linear-gradient(left, #e1ddd8 0, #fffbf6 100%);
  background: linear-gradient(left, #e1ddd8 0, #fffbf6 100%);
  box-shadow: inset 0 -1px 2px rgba(50, 50, 50, 0.1), inset -1px 0 1px rgba(150, 150, 150, 0.2);
  border-radius: 0 5px 5px 0;
  
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.80);
  z-index:999999999999999;
    
}
.book .hardcover_front {
  -webkit-transform: rotateY(-34deg) translateZ(8px);
  transform: rotateY(-34deg) translateZ(8px);
  z-index: 100;
  -webkit-transition: all 0.8s ease, z-index 0.6s;
  transition: all 0.8s ease, z-index 0.6s;
}
.book .hardcover_back {
  -webkit-transform: rotateY(-15deg) translateZ(-8px);
  transform: rotateY(-15deg) translateZ(-8px);
}
.book .page li:nth-child(1) {
  -webkit-transform: rotateY(-28deg);
  transform: rotateY(-28deg);
}
.book .page li:nth-child(2) {
  -webkit-transform: rotateY(-30deg);
  transform: rotateY(-30deg);
  text-align: center;
}
.book .page li:nth-child(3) {
  -webkit-transform: rotateY(-32deg);
  transform: rotateY(-32deg);
  
  
}
.book .page li:nth-child(4) {
  -webkit-transform: rotateY(-34deg);
  transform: rotateY(-34deg);
}
.book .page li:nth-child(5) {
  -webkit-transform: rotateY(-36deg);
  transform: rotateY(-36deg);
}
.book .hardcover_front,
.book .hardcover_back,
.book .book_spine,
.book .hardcover_front li,
.book .hardcover_back li,
.book .book_spine li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.book .hardcover_front,
.book .hardcover_back {
  -webkit-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  transform-origin: 0 100%;
}
.book .hardcover_front li:first-child {
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transform: translateZ(2px);
  transform: translateZ(0px);
  
  box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.40);
   /*  background: url("/Style Library/ar-sa/New/images/decoration.png") repeat 0 0 rgba(180,151,89,.9)!important;*/
  background: url("/Style Library/ar-sa/Temp/Images/book-cover-2.jpg") no-repeat 0 0 rgba(180,151,89,.9);
  border-radius: 4px 2px 2px 4px;
  background-size: 100% 100%;
      position: relative;
}
.book .hardcover_front li:last-child {
  -webkit-transform: rotateY(180deg) translateZ(2px);
  transform: rotateY(180deg) translateZ(2px);
}
.book .hardcover_back li:first-child {
  -webkit-transform: translateZ(2px);
  transform: translateZ(2px);
}
.book .hardcover_back li:last-child {
  -webkit-transform: translateZ(-2px);
  transform: translateZ(-2px);
}
.book .hardcover_front li:first-child:after,
.book .hardcover_front li:first-child:before,
.book .hardcover_front li:last-child:after,
.book .hardcover_front li:last-child:before,
.book .hardcover_back li:first-child:after,
.book .hardcover_back li:first-child:before,
.book .hardcover_back li:last-child:after,
.book .hardcover_back li:last-child:before,
.book .book_spine li:first-child:after,
.book .book_spine li:first-child:before,
.book .book_spine li:last-child:after,
.book .book_spine li:last-child:before {
  position: absolute;
  top: 0;
  left: 0;
}
.book .hardcover_front li:first-child:after,
.book .hardcover_front li:first-child:before {
  width: 2px;
  height: 100%;
}
.book .hardcover_front li:first-child:after {
  -webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
  transform: rotateY(90deg) translateZ(-2px) translateX(2px);
}
.book .hardcover_front li:first-child:before {
  -webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px);
  transform: rotateY(90deg) translateZ(158px) translateX(2px);
}
.book .hardcover_front li:last-child:after,
.book .hardcover_front li:last-child:before {
  width: 4px;
  height: 160px;
}
.book .hardcover_front li:last-child:after {
  -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
  transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
}
.book .hardcover_front li:last-child:before {
  box-shadow: 0 0 30px 5px #333;
  -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-120px) translateX(-2px) translateY(-78px);
  transform: rotateX(90deg) rotateZ(90deg) translateZ(-120px) translateX(-2px) translateY(-78px);
}
.book .hardcover_back li:first-child:after,
.book .hardcover_back li:first-child:before {
  width: 4px;
  height: 100%;
}
.book .hardcover_back li:first-child:after {
  -webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
  transform: rotateY(90deg) translateZ(-2px) translateX(2px);
}
.book .hardcover_back li:first-child:before {
  -webkit-transform: rotateY(90deg) translateZ(130px) translateX(2px);
  transform: rotateY(90deg) translateZ(130px) translateX(2px);
}
.book .hardcover_back li:last-child:after,
.book .hardcover_back li:last-child:before {
  width: 4px;
  height: 160px;
}
.book .hardcover_back li:last-child:after {
  -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
  transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
}
.book .hardcover_back li:last-child:before {
  box-shadow: 10px -1px 80px 20px #666666;
  -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-120px) translateX(2px) translateY(-78px);
  transform: rotateX(90deg) rotateZ(90deg) translateZ(-120px) translateX(2px) translateY(-78px);
}
.book .page,
.book .page > li {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.book .page {
  width: 100%;
  height: 98%;
  top: 1%;
  left: 3%;
  z-index: 10;
}
.book .page > li {
  width: 100%;
  height: 100%;
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
  
  	
  	background: url("/Style Library/Images/book-hde2.jpg") top center repeat-x, url("/Style Library/Images/book-hde.jpg") bottom center  repeat-x , linear-gradient(168deg, #f1f1f1, #fff,#fff, #f1f1f1);
  	
 
                     	
    background-size: 40px,40px;
    
}
.book .page > li:nth-child(1) {
  -webkit-transition-duration: .6s;
  transition-duration: .6s;
}
.book .page > li:nth-child(2) {
  -webkit-transition-duration: .6s;
  transition-duration: .6s;
  
  	
}
.book .page > li:nth-child(3) {
  -webkit-transition-duration: .4s;
  transition-duration: .4s;
  
  

}
.book .page > li:nth-child(4) {
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
}
.book .page > li:nth-child(5) {
  -webkit-transition-duration: .6s;
  transition-duration: .6s;
}
.book:hover > .hardcover_front,
.book.hover > .hardcover_front {
  -webkit-transform: rotateY(-145deg) translateZ(0);
  transform: rotateY(-145deg) translateZ(0);
  z-index: 0;
}
.book:hover > .page li:nth-child(1),
.book.hover > .page li:nth-child(1) {
  -webkit-transform: rotateY(-30deg);
  transform: rotateY(-30deg);
  -webkit-transition-duration: 1.5s;
  transition-duration: 1.5s;
}
.book:hover > .page li:nth-child(2),
.book.hover > .page li:nth-child(2) {
  -webkit-transform: rotateY(-35deg);
  transform: rotateY(-35deg);
  -webkit-transition-duration: 1.8s;
  transition-duration: 1.8s;
}
.book:hover > .page li:nth-child(3),
.book.hover > .page li:nth-child(3) {
  -webkit-transform: rotateY(-118deg);
  transform: rotateY(-118deg);
  -webkit-transition-duration: 1.6s;
  transition-duration: 1.6s;
  
  border-left:2px silver solid;
}

.book:hover > .page li:nth-child(3):before,.book:hover > .page li:nth-child(4):before,.book:hover > .page li:nth-child(5):before
{
	content: "عرف شعب الإمارات ومارس الشورى كنهج أصيل للعلاقة بين الحاكم والمواطنين منذ عقود طويلة قبل قيام الاتحاد، حيث شكل مجلس الحاكم أحد الأماكن التي يتم فيها تبادل الرأي والمشورة حول مختلف الأمور والوسائل، والاستماع إلى مشاكل وهموم المواطنين وتلبية متطلباتهم. ";
    padding: 16%;
    font-family: 'GEFlow-Bold';
    transform: rotatey(180deg);
    font-size: 10px;
    float: right;
    font-weight: normal;
    text-align: justify;
    color:gray;	    
}

.book:hover > .page li:nth-child(2):before
{
	content: "عرف شعب الإمارات ومارس الشورى كنهج أصيل للعلاقة بين الحاكم والمواطنين منذ عقود طويلة قبل قيام الاتحاد، حيث شكل مجلس الحاكم أحد الأماكن التي يتم فيها تبادل الرأي والمشورة حول مختلف الأمور والوسائل، والاستماع إلى مشاكل وهموم المواطنين وتلبية متطلباتهم. ";
    padding: 16%;
    font-family: 'GEFlow-Bold';
    
    font-size: 10px;
    float: left;
    font-weight: normal;
    text-align: justify;
    color:gray;	 
    position:absolute;
    top:0px;
    right:0px;
    opacity:.3;
}

.book:hover > .page li:nth-child(4),
.book.hover > .page li:nth-child(4) {
  -webkit-transform: rotateY(-130deg);
  transform: rotateY(-130deg);
  -webkit-transition-duration: 1.4s;
  transition-duration: 1.4s;
}
.book:hover > .page li:nth-child(5),
.book.hover > .page li:nth-child(5) {
  -webkit-transform: rotateY(-140deg);
  transform: rotateY(-140deg);
  -webkit-transition-duration: 1.2s;
  transition-duration: 1.2s;
}

.book-cover-title {
    /* position: absolute; */
    /* top: 35%; */
    /* left: 8%; */
    /* right: 8%; */
    font-family: 'GEFlow-Bold';
    color: maroon;
    font-size: 13px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
        width: 100%;
    box-sizing: border-box;
    padding: 10px;
    z-index: 55555;
        position: absolute;
    top: 32%;
    right: 0px;
}

.book .hardcover_front,.book .hardcover_front li:first-child,.book .hardcover_front li:last-child
{
	z-index:500;
}
.book .page
{
	z-index:10;
}
.book .hardcover_back
{
	z-index:0;
}
