.bb-bookblock{width:400px;height:300px;margin:0 auto;position:relative;z-index:100;perspective:1300px;-webkit-backface-visibility:hidden;backface-visibility:hidden}.bb-page{position:absolute;transform-style:preserve-3d;transition-property:transform}.bb-vertical .bb-page{width:50%;height:100%;left:50%;transform-origin:left center}.bb-horizontal .bb-page{width:100%;height:50%;top:50%;transform-origin:center top}.bb-content,.bb-inner,.bb-outer,.bb-page>div{position:absolute;height:100%;width:100%;top:0;left:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.bb-vertical .bb-content{width:200%}.bb-horizontal .bb-content{height:200%}.bb-page>div{width:100%;transform-style:preserve-3d}.bb-vertical .bb-back{transform:rotateY(-180deg)}.bb-horizontal .bb-back{transform:rotateX(-180deg)}.bb-outer{width:100%;overflow:hidden;z-index:999}.bb-flipoverlay,.bb-overlay{background-color:rgba(0,0,0,.7);position:absolute;top:0;left:0;width:100%;height:100%;opacity:0}.bb-flipoverlay{background-color:rgba(0,0,0,.2)}.bb-bookblock.bb-vertical>div.bb-page:first-child,.bb-bookblock.bb-vertical>div.bb-page:first-child .bb-back{transform:rotateY(180deg)}.bb-bookblock.bb-horizontal>div.bb-page:first-child,.bb-bookblock.bb-horizontal>div.bb-page:first-child .bb-back{transform:rotateX(180deg)}.bb-content{background:#fff}.bb-vertical .bb-front .bb-content{left:-100%}.bb-horizontal .bb-front .bb-content{top:-100%}.bb-vertical .bb-flip-initial,.bb-vertical .bb-flip-next{transform:rotateY(-180deg)}.bb-vertical .bb-flip-prev{transform:rotateY(0)}.bb-horizontal .bb-flip-initial,.bb-horizontal .bb-flip-next{transform:rotateX(180deg)}.bb-horizontal .bb-flip-prev{transform:rotateX(0)}.bb-vertical .bb-flip-next-end{transform:rotateY(-15deg)}.bb-vertical .bb-flip-prev-end{transform:rotateY(-165deg)}.bb-horizontal .bb-flip-next-end{transform:rotateX(15deg)}.bb-horizontal .bb-flip-prev-end{transform:rotateX(165deg)}.bb-item{width:100%;height:100%;position:absolute;top:0;left:0;display:none;background:#fff}.no-js .bb-bookblock,.no-js ul.bb-custom-grid li{width:auto;height:auto}.no-js .bb-item{display:block;position:relative}.fw-book{width:600px;height:350px;border:5px solid #1296db;box-sizing:border-box;border-radius:10px;position:relative;perspective:1500px}.fw-book .fw-bookitem{width:50%;height:100%;border-radius:10px;background:#fff;overflow:hidden;position:absolute;top:0;right:0}.fw-book .fw-bookitem>.loading{position:absolute;top:0;left:0;right:0;bottom:0;width:30px;height:30px;margin:auto;-webkit-animation:loading 1s linear infinite;animation:loading 1s linear infinite}.fw-book .fw-bookitem .index{position:absolute;bottom:5px;font-style:normal;width:20px;height:20px;line-height:20px;text-align:center;background:rgba(18,150,219,.4);border-radius:50%}.fw-book .fw-bookitem .index.index-left{left:5px}.fw-book .fw-bookitem .index.index-right{right:5px}.fw-book .fw-bookitem.left{left:0;right:auto}.fw-book .fw-bookitem.right{left:auto;right:0}.fw-book .fw-bookitem.rotate180.left-hidden *,.fw-book .fw-bookitem.rotate180.left-visible *,.fw-book .fw-bookitem.rotate180.right-hidden *,.fw-book .fw-bookitem.rotate180.right-visible *{transform:rotateY(180deg)}.fw-book .fw-bookitem.rotate180.left-hidden .index.index-left,.fw-book .fw-bookitem.rotate180.left-visible .index.index-left,.fw-book .fw-bookitem.rotate180.right-hidden .index.index-left,.fw-book .fw-bookitem.rotate180.right-visible .index.index-left{left:auto;right:5px}.fw-book .fw-bookitem.rotate180.left-hidden .index.index-right,.fw-book .fw-bookitem.rotate180.left-visible .index.index-right,.fw-book .fw-bookitem.rotate180.right-hidden .index.index-right,.fw-book .fw-bookitem.rotate180.right-visible .index.index-right{right:auto;left:5px}.fw-book .fw-bookitem.right-hidden{z-index:99!important;transform-origin:right;-webkit-animation:right-hidden 1s linear 1 both;animation:right-hidden 1s linear 1 both}.fw-book .fw-bookitem.right-visible{z-index:100!important;transform-origin:right;-webkit-animation:right-visible 1s linear 1 both;animation:right-visible 1s linear 1 both}.fw-book .fw-bookitem.left-hidden{z-index:99!important;transform-origin:left;-webkit-animation:left-hidden 1s linear 1 both;animation:left-hidden 1s linear 1 both}.fw-book .fw-bookitem.left-visible{z-index:100!important;transform-origin:left;-webkit-animation:left-visible 1s linear 1 both;animation:left-visible 1s linear 1 both}@-webkit-keyframes right-hidden{0%{opacity:1;transform:rotateY(0deg)}50%{opacity:1;box-shadow:0 0 20px #333;transform:rotateY(90deg)}50.1%{opacity:0;transform:rotateY(90deg)}to{opacity:0;box-shadow:none;transform:rotateY(180deg)}}@keyframes right-hidden{0%{opacity:1;transform:rotateY(0deg)}50%{opacity:1;box-shadow:0 0 20px #333;transform:rotateY(90deg)}50.1%{opacity:0;transform:rotateY(90deg)}to{opacity:0;box-shadow:none;transform:rotateY(180deg)}}@-webkit-keyframes right-visible{0%{opacity:0;transform:rotateY(0deg)}50%{opacity:0;box-shadow:0 0 20px #333;transform:rotateY(90deg)}50.1%{opacity:1;transform:rotateY(90deg)}to{opacity:1;box-shadow:none;transform:rotateY(180deg)}}@keyframes right-visible{0%{opacity:0;transform:rotateY(0deg)}50%{opacity:0;box-shadow:0 0 20px #333;transform:rotateY(90deg)}50.1%{opacity:1;transform:rotateY(90deg)}to{opacity:1;box-shadow:none;transform:rotateY(180deg)}}@-webkit-keyframes left-hidden{0%{opacity:1;transform:rotateY(0deg)}50%{opacity:1;box-shadow:0 0 20px #333;transform:rotateY(-90deg)}50.1%{opacity:0;transform:rotateY(-90deg)}to{opacity:0;box-shadow:none;transform:rotateY(-180deg)}}@keyframes left-hidden{0%{opacity:1;transform:rotateY(0deg)}50%{opacity:1;box-shadow:0 0 20px #333;transform:rotateY(-90deg)}50.1%{opacity:0;transform:rotateY(-90deg)}to{opacity:0;box-shadow:none;transform:rotateY(-180deg)}}@-webkit-keyframes left-visible{0%{opacity:0;transform:rotateY(0deg)}50%{opacity:0;box-shadow:0 0 20px #333;transform:rotateY(-90deg)}50.1%{opacity:1;transform:rotateY(-90deg)}to{opacity:1;box-shadow:none;transform:rotateY(-180deg)}}@keyframes left-visible{0%{opacity:0;transform:rotateY(0deg)}50%{opacity:0;box-shadow:0 0 20px #333;transform:rotateY(-90deg)}50.1%{opacity:1;transform:rotateY(-90deg)}to{opacity:1;box-shadow:none;transform:rotateY(-180deg)}}@-webkit-keyframes loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}