.bb-bookblock{width:400px;height:300px;margin:0 auto;position:relative;z-index:100;-webkit-perspective:1300px;perspective:1300px;-webkit-backface-visibility:hidden;backface-visibility:hidden}.bb-page{position:absolute;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition-property:-webkit-transform;transition-property:transform}.bb-vertical .bb-page{width:50%;height:100%;left:50%;-webkit-transform-origin:left center;transform-origin:left center}.bb-horizontal .bb-page{width:100%;height:50%;top:50%;-webkit-transform-origin:center top;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%;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.bb-vertical .bb-back{-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}.bb-horizontal .bb-back{-webkit-transform:rotateX(-180deg);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{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.bb-bookblock.bb-horizontal>div.bb-page:first-child,.bb-bookblock.bb-horizontal>div.bb-page:first-child .bb-back{-webkit-transform:rotateX(180deg);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{-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}.bb-vertical .bb-flip-prev{-webkit-transform:rotateY(0);transform:rotateY(0)}.bb-horizontal .bb-flip-initial,.bb-horizontal .bb-flip-next{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}.bb-horizontal .bb-flip-prev{-webkit-transform:rotateX(0);transform:rotateX(0)}.bb-vertical .bb-flip-next-end{-webkit-transform:rotateY(-15deg);transform:rotateY(-15deg)}.bb-vertical .bb-flip-prev-end{-webkit-transform:rotateY(-165deg);transform:rotateY(-165deg)}.bb-horizontal .bb-flip-next-end{-webkit-transform:rotateX(15deg);transform:rotateX(15deg)}.bb-horizontal .bb-flip-prev-end{-webkit-transform:rotateX(165deg);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}.bb-bookblock{width:400px;height:300px;margin:0 auto;position:relative;z-index:100;-webkit-perspective:1300px;perspective:1300px;-webkit-backface-visibility:hidden;backface-visibility:hidden}.bb-page{position:absolute;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition-property:-webkit-transform;transition-property:transform}.bb-vertical .bb-page{width:50%;height:100%;left:50%;-webkit-transform-origin:left center;transform-origin:left center}.bb-horizontal .bb-page{width:100%;height:50%;top:50%;-webkit-transform-origin:center top;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%;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.bb-vertical .bb-back{-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}.bb-horizontal .bb-back{-webkit-transform:rotateX(-180deg);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{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.bb-bookblock.bb-horizontal>div.bb-page:first-child,.bb-bookblock.bb-horizontal>div.bb-page:first-child .bb-back{-webkit-transform:rotateX(180deg);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{-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg)}.bb-vertical .bb-flip-prev{-webkit-transform:rotateY(0);transform:rotateY(0)}.bb-horizontal .bb-flip-initial,.bb-horizontal .bb-flip-next{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}.bb-horizontal .bb-flip-prev{-webkit-transform:rotateX(0);transform:rotateX(0)}.bb-vertical .bb-flip-next-end{-webkit-transform:rotateY(-15deg);transform:rotateY(-15deg)}.bb-vertical .bb-flip-prev-end{-webkit-transform:rotateY(-165deg);transform:rotateY(-165deg)}.bb-horizontal .bb-flip-next-end{-webkit-transform:rotateX(15deg);transform:rotateX(15deg)}.bb-horizontal .bb-flip-prev-end{-webkit-transform:rotateX(165deg);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;animation:loading linear 1s 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:initial}.fw-book .fw-bookitem.right{left:initial;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:initial;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:initial;left:5px}.fw-book .fw-bookitem.right-hidden{z-index:99!important;transform-origin:right;animation:right-hidden linear 1s 1 both}.fw-book .fw-bookitem.right-visible{z-index:100!important;transform-origin:right;animation:right-visible linear 1s 1 both}.fw-book .fw-bookitem.left-hidden{z-index:99!important;transform-origin:left;animation:left-hidden linear 1s 1 both}.fw-book .fw-bookitem.left-visible{z-index:100!important;transform-origin:left;animation:left-visible linear 1s 1 both}@keyframes right-hidden{0%{opacity:1;transform:rotate3d(0,1,0,0deg)}50%{opacity:1;box-shadow:0 0 20px #333;transform:rotate3d(0,1,0,90deg)}50.1%{opacity:0;transform:rotate3d(0,1,0,90deg)}100%{opacity:0;box-shadow:none;transform:rotate3d(0,1,0,180deg)}}@keyframes right-visible{0%{opacity:0;transform:rotate3d(0,1,0,0deg)}50%{opacity:0;box-shadow:0 0 20px #333;transform:rotate3d(0,1,0,90deg)}50.1%{opacity:1;transform:rotate3d(0,1,0,90deg)}100%{opacity:1;box-shadow:none;transform:rotate3d(0,1,0,180deg)}}@keyframes left-hidden{0%{opacity:1;transform:rotate3d(0,1,0,0deg)}50%{opacity:1;box-shadow:0 0 20px #333;transform:rotate3d(0,1,0,-90deg)}50.1%{opacity:0;transform:rotate3d(0,1,0,-90deg)}100%{opacity:0;box-shadow:none;transform:rotate3d(0,1,0,-180deg)}}@keyframes left-visible{0%{opacity:0;transform:rotate3d(0,1,0,0deg)}50%{opacity:0;box-shadow:0 0 20px #333;transform:rotate3d(0,1,0,-90deg)}50.1%{opacity:1;transform:rotate3d(0,1,0,-90deg)}100%{opacity:1;box-shadow:none;transform:rotate3d(0,1,0,-180deg)}}@keyframes loading{from{transform:rotateZ(0)}to{transform:rotateZ(360deg)}}