Upload 6 files

flipbook.book3.js

@@ -0,0 +1,1230 @@
+/*
+ * Real3D FlipBook [https://real3dflipbook.com]
+ * @author creativeinteractivemedia [https://codecanyon.net/user/creativeinteractivemedia/portfolio]
+ * @version 4.10
+ * @date 2025-05-15
+ */
+'use strict';
+var FLIPBOOK = FLIPBOOK || {};
+
+FLIPBOOK.Book3 = function (el, main, options) {
+    this.options = options;
+    this.main = main;
+
+    this.singlePage = options.singlePageMode;
+    this.pageWidth = options.pageWidth;
+    this.pageHeight = options.pageHeight;
+
+    // Set up the wrapper and parent container
+    this.wrapper = el;
+    this.wrapper.classList.add('flipbook-book3');
+    this.bookLayer = this.wrapper.parentNode;
+
+    this.flipEasing = 'easeOutQuad';
+    this.translateZ = '';
+
+    // Initialize IScroll with options
+    this.iscroll = new FLIPBOOK.IScroll(this.bookLayer, {
+        zoom: true,
+        scrollX: true,
+        scrollY: true,
+        scrollbars: true,
+        keepInCenterV: true,
+        keepInCenterH: true,
+        freeScroll: true,
+        preventDefault: false,
+    });
+
+    // Event listeners for enabling/disabling IScroll
+    main.on('disableIScroll', this.disableIscroll.bind(this));
+    main.on('enableIScroll', this.enableIscroll.bind(this));
+
+    // Handle zoom end event
+    this.iscroll.on('zoomEnd', () => {
+        if (isNaN(this.iscroll.scale)) {
+            return this.zoomTo(options.zoomMin);
+        }
+
+        options.main.onZoom(this.iscroll.scale / this.ratio);
+        this.updateVisiblePages();
+
+        const zoomed = options.main.zoom > 1;
+
+        if (this.zoomed !== zoomed) {
+            const scrollOptions = this.iscroll.options;
+            scrollOptions.eventPassthrough = zoomed ? '' : 'vertical';
+            scrollOptions.freeScroll = zoomed;
+            this.iscroll.refresh();
+            this.zoomed = zoomed;
+        }
+    });
+
+    // Set wrapper and center container dimensions
+    this.wrapper.style.width = `${2 * this.pageWidth}px`;
+    this.wrapper.style.height = `${this.pageHeight}px`;
+
+    this.centerContainer = document.createElement('div');
+    this.centerContainer.className = 'flipbook-center-container3';
+    this.centerContainer.style.width = `${2 * this.pageWidth}px`;
+    this.centerContainer.style.height = `${this.pageHeight}px`;
+    this.wrapper.appendChild(this.centerContainer);
+
+    // Set perspective based on options or view mode
+    const perspective = this.options.perspective || (this.options.viewMode === '3d' ? 3 * this.pageHeight : 200000);
+    this.centerContainer.style.perspective = `${perspective}px`;
+
+    // Initialize pages
+    this.pagesArr = [];
+    this.animating = false;
+
+    let numSheets = this.options.pages.length;
+    if (!this.options.cover) numSheets += 1;
+
+    for (let i = 0; i < numSheets; i++) {
+        const page = new FLIPBOOK.Page3(this, i);
+        this.pagesArr.push(page);
+        this.centerContainer.appendChild(page.wrapper);
+    }
+};
+
+FLIPBOOK.Book3.prototype = Object.create(FLIPBOOK.Book.prototype);
+
+FLIPBOOK.Book3.prototype.constructor = FLIPBOOK.Book3;
+
+FLIPBOOK.Book3.prototype.enableIscroll = function () {
+    if (this.iscrollDisabled) {
+        this.iscroll.enable();
+        this.iscrollDisabled = false;
+    }
+};
+
+FLIPBOOK.Book3.prototype.disableIscroll = function () {
+    if (!this.iscrollDisabled) {
+        this.iscroll.disable();
+        this.iscroll.initiated = false;
+        this.iscrollDisabled = true;
+    }
+};
+
+FLIPBOOK.Book3.prototype.enableMouseWheelZoom = function () {
+    this.iscroll.options.eventPassthrough = 'vertical';
+    this.iscroll.refresh();
+};
+
+FLIPBOOK.Book3.prototype.disableMouseWheelZoom = function () {
+    this.iscroll.options.eventPassthrough = '';
+    this.iscroll.refresh();
+};
+
+FLIPBOOK.Book3.prototype.enablePrev = function (val) {
+    this.prevEnabled = val;
+};
+
+FLIPBOOK.Book3.prototype.enablePan = function () {
+    this.iscroll.enable();
+};
+
+FLIPBOOK.Book3.prototype.disablePan = function () {
+    this.iscroll.disable();
+};
+
+FLIPBOOK.Book3.prototype.setRightIndex = function (val) {
+    this.rightIndex = val;
+};
+
+FLIPBOOK.Book3.prototype.enableNext = function (val) {
+    this.nextEnabled = val;
+};
+
+FLIPBOOK.Book3.prototype.isZoomed = function () {
+    return this.options.main.zoom > this.options.zoomMin && this.options.main.zoom > 1;
+};
+
+FLIPBOOK.Book3.prototype.getNumPages = function () {};
+
+FLIPBOOK.Book3.prototype.move = function (direction) {
+    if (this.zoom <= 1) {
+        return;
+    }
+
+    var iscroll = this.iscroll;
+    var offset2 = 0;
+
+    if (iscroll) {
+        var posX = iscroll.x;
+        var posY = iscroll.y;
+        var offset = 20 * this.zoom;
+        switch (direction) {
+            case 'left':
+                posX += offset;
+                break;
+            case 'right':
+                posX -= offset;
+                break;
+            case 'up':
+                posY += offset;
+                break;
+            case 'down':
+                posY -= offset;
+                break;
+        }
+
+        if (posX > 0) {
+            posX = offset2;
+        }
+        if (posX < iscroll.maxScrollX) {
+            posX = iscroll.maxScrollX - offset2;
+        }
+        if (posY > 0) {
+            posY = offset2;
+        }
+        if (posY < iscroll.maxScrollY) {
+            posY = iscroll.maxScrollY - offset2;
+        }
+
+        iscroll.scrollTo(posX, posY, 0);
+    }
+};
+
+FLIPBOOK.Book3.prototype.zoomTo = function (zoom, time, x, y) {
+    if (!this.enabled) {
+        return;
+    }
+
+    x = x || 0;
+    y = y || 0;
+    time = time || 0;
+    this.zoom = zoom;
+
+    time = 0;
+
+    var iscroll = this.iscroll;
+    if (iscroll) {
+        iscroll.zoom(zoom * this.ratio, x, y, time);
+    }
+};
+
+FLIPBOOK.Book3.prototype.setWrapperW = function (w) {
+    if (this.wrapperW != w) {
+        this.wrapper.style.width = w + 'px';
+        this.wrapperW = w;
+    }
+};
+
+FLIPBOOK.Book3.prototype.updateBookPosition = function () {
+    if (this.singlePage) {
+        this.setWrapperW(this.pageWidth);
+        if (this.iscroll) {
+            this.iscroll.refresh();
+        }
+        this.view = 1;
+        this.focusRight();
+        return;
+    }
+
+    if (this.view == 1) {
+        this.setWrapperW(this.pageWidth);
+    } else {
+        this.setWrapperW(2 * this.pageWidth);
+    }
+    if (this.iscroll) {
+        this.iscroll.refresh();
+    }
+
+    if (this.view == 2) {
+        if (this.isCover()) {
+            this.focusRight();
+        } else if (this.isBackCover()) {
+            if (!this.options.cover) {
+                this.focusBoth();
+            } else {
+                this.focusLeft();
+            }
+        } else {
+            this.focusBoth();
+        }
+    } else if (this.view == 1) {
+        if (this.isCover()) {
+            this.focusRight();
+        } else if (this.isBackCover()) {
+            this.focusLeft();
+        }
+    }
+};
+
+FLIPBOOK.Book3.prototype.focusLeft = function (time, delay) {
+    var pos = this.view == 1 || this.singlePage ? 0 : this.pageWidth / 2;
+
+    this.setBookPosition(pos, time, delay);
+};
+
+FLIPBOOK.Book3.prototype.focusRight = function (time, delay, updatePageNumber) {
+    var pos = this.view == 1 || this.singlePage ? -this.pageWidth : -this.pageWidth / 2;
+
+    this.setBookPosition(pos, time, delay, updatePageNumber);
+};
+
+FLIPBOOK.Book3.prototype.focusBoth = function (time, delay) {
+    var pos = this.view == 1 ? -this.pageWidth / 2 : 0;
+
+    this.setBookPosition(pos, time, delay);
+};
+
+FLIPBOOK.Book3.prototype.setBookPosition = function (pos, time, delay, updatePageNumber) {
+    if (this.centerContainerPosition == pos) {
+        return;
+    }
+    var start = this.centerContainerPosition;
+
+    if (time) {
+        var self = this;
+        delay = delay || 0;
+
+        const animationParams = {
+            from: start,
+            to: pos,
+            delay,
+            duration: time,
+            step(now) {
+                self.centerContainer.style.transform = 'translateX(' + now + 'px) ' + self.translateZ;
+            },
+            complete() {
+                self.centerContainerPosition = pos;
+                if (updatePageNumber) {
+                    self.updateFlipped();
+                    self.options.main.turnPageComplete();
+                }
+            },
+        };
+
+        this.animate(animationParams);
+    } else if (this.centerContainerPosition != pos) {
+        this.centerContainerPosition = pos;
+        this.centerContainer.style.transform = 'translateX(' + pos + 'px) ' + this.translateZ;
+
+        this.updateFlipped();
+        this.options.main.turnPageComplete();
+    }
+};
+
+FLIPBOOK.Book3.prototype.updateSinglePage = function (singlePage) {
+    this.singlePage = singlePage;
+    let ri = this.rightIndex;
+    if (ri > 0) {
+        if (this.singlePage) {
+            ri--;
+        } else if (ri % 2 == 1) {
+            ri++;
+        }
+        this.setRightIndex(ri);
+    }
+    this.resetLoadedPages();
+    this.onResize();
+    this.updateVisiblePages();
+};
+
+FLIPBOOK.Book3.prototype.resetLoadedPages = function () {
+    this.pagesArr.forEach(function (page) {
+        if (page.bgFront) page.bgFront.replaceChildren();
+        if (page.bgBack) page.bgBack.replaceChildren();
+        page.sizeFront = 0;
+        page.sizeBack = 0;
+
+        if (page.html.front) page.html.front.replaceChildren();
+        if (page.html.back) page.html.back.replaceChildren();
+        if (page.htmlContent) {
+            page.htmlContent.front = null;
+            page.htmlContent.back = null;
+        }
+        if (page.htmlLoaded) {
+            page.htmlLoaded.front = null;
+            page.htmlLoaded.back = null;
+        }
+    });
+};
+
+FLIPBOOK.Book3.prototype.updateVisiblePages = function (loadNextPrev) {
+    if (typeof loadNextPrev == 'undefined') {
+        loadNextPrev = true;
+    }
+    var self = this;
+
+    var index = this.rightIndex;
+    if (!this.singlePage) {
+        index /= 2;
+    }
+
+    // if (!this.options.backCover && this.options.rightToLeft) {
+    //     index--;
+    // }
+
+    let numPages = this.options.pages.length;
+    let numSheets = this.singlePage ? numPages : numPages / 2;
+    if (!this.options.cover) numSheets++;
+    this.visibleSheets = [];
+    for (let i = 0; i < numSheets; i++) {
+        this.visibleSheets.push(this.pagesArr[i]);
+    }
+
+    var right = this.visibleSheets[index];
+    var next = this.visibleSheets[index + 1];
+    var left = this.visibleSheets[index - 1];
+    var prev = this.visibleSheets[index - 2];
+
+    if (left) {
+        left._setAngle(180);
+    }
+    if (right) {
+        right._setAngle(0);
+    }
+
+    for (var i = 0; i < this.pagesArr.length; i++) {
+        if (this.pagesArr[i] == right) {
+            this.pagesArr[i].show();
+            this.pagesArr[i].unpauseHtml('front');
+            this.pagesArr[i].pauseHtml('back');
+        } else if (this.pagesArr[i] == left && !this.singlePage) {
+            this.pagesArr[i].show();
+            this.pagesArr[i].unpauseHtml('back');
+            this.pagesArr[i].pauseHtml('front');
+        } else {
+            this.pagesArr[i].hide();
+            this.pagesArr[i].pauseHtml('front');
+            this.pagesArr[i].pauseHtml('back');
+        }
+
+        this.pagesArr[i]._setZIndex(0);
+    }
+    this.updateBookPosition();
+
+    if (left && !this.singlePage) {
+        self.options.main.setLoadingProgress(0.1);
+        left.load('back', function () {
+            self.options.main.setLoadingProgress(1);
+            left.startHTML('back');
+            if (right) {
+                self.options.main.setLoadingProgress(0.1);
+                right.load('front', function () {
+                    self.options.main.setLoadingProgress(1);
+                    right.load('back', null, true);
+                    if (next) {
+                        next.load('front', null, true);
+                    }
+                    if (!self.options.doublePage || self.view != 2) {
+                        right.startHTML('front');
+                    }
+                });
+            } else {
+                left.load('front', null, true);
+                if (prev) {
+                    prev.load('back', null, true);
+                }
+            }
+        });
+    } else {
+        self.options.main.setLoadingProgress(0.1);
+        right.load('front', function () {
+            self.options.main.setLoadingProgress(1);
+            if (!self.singlePage) {
+                right.load('back', null, true);
+            } else {
+                if (left) {
+                    left.load('front', null, true);
+                }
+            }
+            if (next) {
+                next.load('front', null, true);
+            }
+            right.startHTML('front');
+        });
+    }
+};
+
+FLIPBOOK.Book3.prototype.enable = function () {
+    this.onResize();
+    this.enabled = true;
+};
+
+FLIPBOOK.Book3.prototype.disable = function () {
+    this.enabled = false;
+};
+
+FLIPBOOK.Book3.prototype.getLeftPage = function () {
+    return this.pagesArr[this.flippedleft - 1];
+};
+
+FLIPBOOK.Book3.prototype.getRightPage = function () {
+    return this.pagesArr[this.flippedleft];
+};
+
+FLIPBOOK.Book3.prototype.getLeftBackPage = function () {
+    return this.pagesArr[this.flippedleft - 2];
+};
+
+FLIPBOOK.Book3.prototype.getRightBackPage = function () {
+    return this.pagesArr[this.flippedleft + 1];
+};
+
+FLIPBOOK.Book3.prototype.getNextPage = function () {
+    return this.pagesArr[this.flippedleft + 2];
+};
+
+FLIPBOOK.Book3.prototype.getPrevPage = function () {
+    return this.pagesArr[this.flippedleft - 3];
+};
+
+FLIPBOOK.Book3.prototype.nextPage = function () {
+    if (!this.nextEnabled) {
+        return;
+    }
+
+    if (this.view == 1 && this.isFocusedLeft() && !this.singlePage) {
+        var duration = 700;
+        var d = (this.options.pageFlipDuration * duration) / 2;
+        this.focusRight(d, 0, true);
+        return;
+    }
+    this.goToPage(this.rightIndex + 2);
+};
+
+FLIPBOOK.Book3.prototype.prevPage = function () {
+    if (!this.prevEnabled) {
+        return;
+    }
+
+    if (this.view == 1 && this.isFocusedRight() && !this.singlePage) {
+        var duration = 700;
+        var d = (this.options.pageFlipDuration * duration) / 2;
+        this.focusLeft(d, 0, true);
+        return;
+    }
+    var target = this.singlePage ? this.rightIndex : this.rightIndex - 2;
+    this.goToPage(target);
+};
+
+FLIPBOOK.Book3.prototype.goToPage = function (index, instant) {
+    if (!this.enabled || this.flipping || isNaN(index)) {
+        return;
+    }
+
+    if (this.singlePage || index % 2 != 0) {
+        index--;
+    }
+
+    if (index < 0) {
+        index = 0;
+    }
+
+    if (index > this.options.pages.length) {
+        index = this.options.pages.length;
+    }
+
+    if (index == this.rightIndex) {
+        return;
+    }
+
+    if (instant || this.options.instantFlip) {
+        this.setRightIndex(index);
+        this.updateFlipped();
+        this.updateVisiblePages();
+        this.options.main.turnPageComplete();
+    } else {
+        var self = this;
+        var end;
+        var duration = 600;
+        var d = this.options.pageFlipDuration * duration;
+        var easing = this.flipEasing;
+
+        if (index > this.rightIndex) {
+            end = 180;
+            if (self.angle <= 0 || self.angle >= 180 || !self.angle) {
+                self.angle = 1;
+            }
+        } else if (index < this.rightIndex) {
+            end = -180;
+            if (self.angle >= 0 || self.angle <= -180 || !self.angle) {
+                self.angle = -1;
+            }
+        }
+
+        this.flipping = true;
+
+        if (!this.singlePage) {
+            if (this.view == 1) {
+                if (index < this.rightIndex) {
+                    this.focusRight(d);
+                } else {
+                    this.focusLeft(d);
+                }
+            } else {
+                if (index == 0) {
+                    this.focusRight(d);
+                } else if (index == this.visibleSheets.length * 2) {
+                    this.focusLeft(d);
+                } else {
+                    this.focusBoth(d);
+                }
+            }
+        }
+
+        this.goingToPage = index;
+
+        if (this.singlePage) {
+            d /= 2;
+        }
+
+        const animationParams = {
+            from: self.angle,
+            to: end,
+            duration: d,
+            easing: easing,
+            step(now) {
+                self._setPageAngle(now);
+            },
+            complete() {
+                self.setRightIndex(self.goingToPage);
+                self.angle = 0;
+                self.flipping = false;
+
+                self.updateFlipped();
+                self.updateVisiblePages();
+                self.options.main.turnPageComplete();
+            },
+        };
+        this.animate(animationParams);
+
+        this.options.main.turnPageStart();
+    }
+};
+
+FLIPBOOK.Book3.prototype.animate = function (params) {
+    FLIPBOOK.animate(params);
+    // const jq = true;
+    // if (!jq) {
+    //     FLIPBOOK.animate(params);
+    // } else {
+    //     jQuery({
+    //         someValue: params.from,
+    //     }).animate(
+    //         {
+    //             someValue: params.to,
+    //         },
+    //         params
+    //     );
+    // }
+};
+
+FLIPBOOK.Book3.prototype.updateFlipped = function () {
+    if (this.singlePage) {
+        this.flippedleft = this.rightIndex;
+        this.flippedright = this.options.pages.length - this.rightIndex;
+    } else {
+        this.flippedleft = (this.rightIndex + (this.rightIndex % 2)) / 2;
+        this.flippedright = this.options.pages.length / 2 - this.flippedleft;
+    }
+};
+
+FLIPBOOK.Book3.prototype.onSwipe = function (event, phase, distanceX, distanceY, duration, fingerCount) {
+    if (this.isZoomed() || event.target.className === 'flipbook-page-link' || this.flipping) {
+        return;
+    }
+
+    const angle = (-distanceX * 180) / this.main.wrapperW;
+    const threshold = 5;
+    const distance = Math.abs(distanceX);
+
+    if (phase === 'start') {
+        this.dragging = true;
+        return;
+    }
+
+    if ((phase === 'end' || phase === 'cancel') && fingerCount <= 1 && distance > threshold) {
+        angle > 0 ? this.nextPage() : this.prevPage();
+        this.dragging = false;
+        return;
+    }
+
+    if (phase === 'move' && fingerCount <= 1 && this.dragging && distance > threshold) {
+        let increment = angle > 0 ? (this.singlePage ? 1 : 2) : this.singlePage ? -1 : -2;
+        if ((angle > 0 && !this.nextEnabled) || (angle < 0 && !this.prevEnabled)) {
+            return;
+        }
+
+        this.goingToPage = this.rightIndex + increment;
+
+        if (
+            this.goingToPage !== this.rightIndex &&
+            this.goingToPage >= 0 &&
+            this.goingToPage <= this.pagesArr.length * 2 &&
+            !this.options.instantFlip
+        ) {
+            this._setPageAngle(angle);
+        }
+    }
+};
+
+FLIPBOOK.Book3.prototype.pauseHtml = function () {
+    for (var i = 0; i < this.pagesArr.length; i++) {
+        this.pagesArr[i].pauseHtml();
+    }
+};
+
+FLIPBOOK.Book3.prototype._setPageAngle = function (angle) {
+    if (this.angle == angle) {
+        return;
+    }
+
+    this.angle = angle;
+
+    var prev;
+    var next;
+    var left;
+    var right;
+    this.angle = angle;
+    // this.pauseHtml();
+
+    var ri = this.rightIndex;
+    var ri2 = this.goingToPage;
+    // if (this.options.rightToLeft && !this.options.backCover) {
+    //     ri--;
+    //     ri2--;
+    // }
+
+    var flippping;
+
+    if (this.singlePage) {
+        right = this.visibleSheets[ri];
+        left = this.visibleSheets[ri - 1];
+        if (angle > 0) {
+            right._setAngle(angle / 2);
+            next = this.visibleSheets[ri2];
+            if (next) {
+                next.show();
+                next.load('front');
+            }
+        } else {
+            left = this.visibleSheets[ri2];
+            left.show();
+            left.load('front');
+            left._setAngle(angle / 2 + 90);
+        }
+
+        if (next) {
+            next._setAngle(0);
+        }
+        if (prev) {
+            prev._setAngle(90);
+        }
+    } else {
+        right = this.visibleSheets[ri / 2];
+        left = this.visibleSheets[ri / 2 - 1];
+        var newRight = this.visibleSheets[ri2 / 2 - 1];
+        var newLeft = this.visibleSheets[ri2 / 2];
+        if (angle > 0) {
+            if (this.view == 1 && this.isFocusedLeft()) {
+                return;
+            }
+            //flipping from right to left
+            //angle 0 -> 180
+
+            if (angle < 90) {
+                flippping = right;
+                if (newRight) newRight.hide();
+            } else {
+                flippping = newRight;
+                right.hide();
+            }
+            flippping.show();
+            flippping._setAngle(angle);
+            next = this.visibleSheets[ri2 / 2];
+            flippping.load(
+                'back',
+                function () {
+                    if (next) {
+                        next.show();
+                        next.load('front', null, true);
+                    }
+                },
+                true
+            );
+        } else {
+            if (this.view == 1 && this.isFocusedRight()) {
+                return;
+            }
+            //flipping from left to right
+            //angle 0 -> -180
+
+            if (angle > -90) {
+                flippping = left;
+                if (newLeft) newLeft.hide();
+            } else {
+                flippping = newLeft;
+                left.hide();
+            }
+            flippping.show();
+            flippping._setAngle(180 + angle);
+            prev = this.visibleSheets[ri2 / 2 - 1];
+            flippping.load(
+                'front',
+                function () {
+                    if (prev) {
+                        prev.show();
+                        prev.load('back', null, true);
+                    }
+                },
+                true
+            );
+        }
+
+        if (next) {
+            next._setAngle(0);
+        }
+        if (prev) {
+            prev._setAngle(180);
+        }
+    }
+};
+
+FLIPBOOK.Book3.prototype.isCover = function () {
+    return this.rightIndex == 0;
+};
+
+FLIPBOOK.Book3.prototype.isBackCover = function () {
+    return this.rightIndex == this.options.pages.length;
+};
+
+FLIPBOOK.Book3.prototype.onPageUnloaded = function (index) {
+    var pageIndex = index;
+
+    if (this.options.rightToLeft) {
+        pageIndex = this.options.pages.length - index - 1;
+    }
+
+    if (this.pagesArr[pageIndex]) {
+        this.pagesArr[pageIndex].unload();
+    }
+};
+
+FLIPBOOK.Book3.prototype.onResize = function () {
+    var self = this;
+
+    var main = this.main;
+    var w = main.wrapperW;
+    var h = main.wrapperH;
+    var bw = main.bookW;
+    var bh = main.bookH;
+    var pw = main.pageW;
+    var ph = main.pageH;
+    var r1 = w / h;
+    var r2 = pw / ph;
+    var options = this.options;
+
+    function fitToHeight() {
+        self.ratio = h / bh;
+        fit();
+    }
+
+    function fitToWidth() {
+        self.ratio = self.view == 1 ? w / pw : w / bw;
+        fit();
+    }
+
+    function fit() {
+        if (self.iscroll) {
+            self.iscroll.options.zoomMin = self.ratio * options.zoomMin;
+        }
+        if (self.iscroll) {
+            self.iscroll.options.zoomMax = self.ratio * options.zoomMax;
+        }
+
+        self.updateBookPosition();
+        if (self.iscroll) {
+            self.iscroll.zoom(self.ratio * options.main.zoom, w / 2, h / 2, 0);
+        }
+
+        self.bookScale = self.iscroll.scale;
+    }
+
+    var s = Math.min(this.zoom, 1);
+
+    var zoomMin = Number(this.options.zoomMin);
+
+    if (
+        this.singlePage ||
+        (this.options.responsiveView &&
+            w <= this.options.responsiveViewTreshold &&
+            r1 < 2 * r2 &&
+            r1 < this.options.responsiveViewRatio)
+    ) {
+        this.view = 1;
+
+        if (r2 > r1) {
+            this.sc = (zoomMin * r1) / (r2 * s);
+        } else {
+            this.sc = 1;
+        }
+
+        if (w / h > pw / ph) {
+            fitToHeight();
+        } else {
+            fitToWidth();
+        }
+    } else {
+        this.view = 2;
+
+        if (r1 < 2 * r2) {
+            this.sc = (zoomMin * r1) / (2 * r2 * s);
+        } else {
+            this.sc = 1;
+        }
+
+        if (w / h >= bw / bh) {
+            fitToHeight();
+        } else {
+            fitToWidth();
+        }
+    }
+
+    this.updateBookPosition();
+    this.updateFlipped();
+    this.options.main.turnPageComplete();
+};
+
+FLIPBOOK.Book3.prototype.isFocusedRight = function () {
+    var center = this.view == 1 ? -this.pageWidth / 2 : 0;
+    if (this.singlePage) {
+        return this.rightIndex % 2 == 0;
+    } else {
+        return this.centerContainerPosition < center;
+    }
+};
+
+FLIPBOOK.Book3.prototype.isFocusedLeft = function () {
+    var center = this.view == 1 ? -this.pageWidth / 2 : 0;
+
+    if (this.singlePage) {
+        return this.rightIndex % 2 == 1;
+    } else {
+        return this.centerContainerPosition > center;
+    }
+};
+
+FLIPBOOK.Page3 = function (book, index) {
+    this.book = book;
+    this.main = book.main;
+    this.options = book.options;
+
+    this.index = index;
+
+    this.wrapper = document.createElement('div');
+    this.wrapper.className = 'flipbook-page3';
+    this.wrapper.style.width = book.options.pageWidth + 'px';
+    this.wrapper.style.height = book.options.pageHeight + 'px';
+    this.angle = 0;
+    this.wrapper.dataset.sheet = index;
+
+    var options = book.options;
+
+    let preloaderSrc = options.pagePreloader || options.assets.spinner;
+    let preloaderClass = options.pagePreloader ? 'flipbook-page-preloader-image' : 'flipbook-page-preloader';
+
+    this.front = document.createElement('div');
+    this.wrapper.appendChild(this.front);
+    this.front.className = 'flipbook-page3-inner flipbook-page3-inner-front';
+
+    this.bgFront = document.createElement('div');
+    this.front.appendChild(this.bgFront);
+    this.bgFront.className = 'flipbook-page3-bg';
+
+    this.htmlFront = document.createElement('div');
+    this.front.appendChild(this.htmlFront);
+    this.htmlFront.className = 'flipbook-page3-html page_' + String(2 * index);
+    this.htmlFront.style.width = (1000 * options.pageWidth) / options.pageHeight + 'px';
+
+    var transform = 'scale(' + this.options.pageHeight / 1000 + ')';
+    if (this.options.doublePage && this.index > 0) {
+        this.htmlFront.style.transform = transform + ' translateX(-100%)';
+    } else {
+        this.htmlFront.style.transform = transform;
+    }
+
+    this.html = { front: this.htmlFront };
+
+    this.frontHtmlContentVisible = false;
+
+    this.preloaderFront = new Image();
+    this.preloaderFront.src = preloaderSrc;
+    this.preloaderFront.className = preloaderClass;
+    this.front.appendChild(this.preloaderFront);
+
+    if (!book.singlePage) {
+        this.back = document.createElement('div');
+        this.wrapper.appendChild(this.back);
+        this.back.className = 'flipbook-page3-inner flipbook-page3-inner-back';
+        this._setVisibility(this.back, false);
+
+        this.bgBack = document.createElement('div');
+        this.back.appendChild(this.bgBack);
+        this.bgBack.className = 'flipbook-page3-bg';
+
+        this.htmlBack = document.createElement('div');
+        this.back.appendChild(this.htmlBack);
+        this.htmlBack.className = 'flipbook-page3-html page_' + String(2 * index + 1);
+        this.htmlBack.style.width = (1000 * options.pageWidth) / options.pageHeight + 'px';
+
+        this.htmlBack.style.transform = transform;
+
+        this.html.back = this.htmlBack;
+
+        this.backHtmlContentVisible = false;
+
+        this.preloaderBack = new Image();
+        this.preloaderBack.src = preloaderSrc;
+        this.preloaderBack.className = preloaderClass;
+        this.back.appendChild(this.preloaderBack);
+    }
+
+    this.htmlPaused = { front: false, back: false };
+
+    this.hide();
+    this.zIndex = 0;
+
+    if (this.options.rightToLeft && !this.options.backCover) {
+        index++;
+    }
+    this.wrapper.style.left = String(this.book.options.pageWidth - 1) + 'px';
+};
+
+FLIPBOOK.Page3.prototype = {
+    load: function (side, callback, thumb) {
+        var pageSize = this.book.pageHeight * this.book.iscroll.scale * window.devicePixelRatio;
+        var o = this.options;
+        var size = pageSize < o.pageTextureSizeSmall ? o.pageTextureSizeSmall : o.pageTextureSize;
+        var isFront = side == 'front' || this.book.singlePage;
+
+        var pageIndex = this.book.singlePage ? this.index : isFront ? this.index * 2 : this.index * 2 + 1;
+        var index = o.rightToLeft ? o.pages.length - pageIndex - 1 : pageIndex;
+
+        if (
+            (this.sizeFront == size && isFront && this.indexFront == index) ||
+            (this.sizeBack == size && !isFront && this.indexBack == index)
+        ) {
+            if (!thumb) {
+                this.loadHTML(side);
+            }
+            if (callback) {
+                callback.call(this);
+            }
+        } else {
+            if (isFront) {
+                this.sizeFront = size;
+            } else {
+                this.sizeBack = size;
+            }
+
+            var self = this;
+
+            if (isFront) this.indexFront = index;
+            else this.indexBack = index;
+
+            o.main.loadPage(index, size, function (page) {
+                if (page && page.image) {
+                    var img = page.image[size] || page.image;
+                    var page = o.pages[index];
+                    if (
+                        (isFront && page && page.side == 'right') ||
+                        (o.rightToLeft && isFront && page && page.side == 'left')
+                    ) {
+                        if (!img.clone) {
+                            img.clone = new Image();
+                            img.clone.src = img.src;
+                        }
+                        img = img.clone;
+                        img.style.transform = 'translateX(-50%)';
+                    }
+
+                    if (isFront) {
+                        if (self.bgFront) self.bgFront.replaceChildren(img);
+                        if (self.preloaderFront) self.preloaderFront.style.display = 'none';
+                    } else {
+                        if (self.bgBack) self.bgBack.replaceChildren(img);
+                        if (self.preloaderBack) self.preloaderBack.style.display = 'none';
+                    }
+
+                    if (!thumb) {
+                        self.loadHTML(side);
+                    }
+                }
+
+                if (callback) {
+                    callback.call(self);
+                }
+            });
+        }
+    },
+
+    loadHTML: function (side) {
+        var self = this;
+
+        var isFront = side == 'front';
+
+        var pageIndex = this.book.singlePage ? this.index : isFront ? this.index * 2 : this.index * 2 + 1;
+
+        var o = this.options;
+        var index = o.rightToLeft ? o.pages.length - pageIndex - 1 : pageIndex;
+
+        if (index < 0) {
+            return;
+        }
+
+        if (this.htmlContent && this.htmlContent[side]) {
+            this.updateHtmlContent(side);
+        } else {
+            this.options.main.loadPageHTML(index, function (html) {
+                self.htmlContent = this.htmlContent || {};
+                self.htmlContent[side] = html;
+                self.updateHtmlContent(side);
+            });
+        }
+    },
+
+    startHTML: function (side) {
+        this.book.startPageItems(this.html[side]);
+    },
+
+    unload: function () {
+        this.size = null;
+        this.mat = false;
+        this.pageSize = null;
+    },
+
+    pauseHtml: function (side) {
+        if (!this.htmlPaused[side]) {
+            this.htmlPaused[side] = true;
+            const htmlContainer = this.html[side];
+            if (!htmlContainer) {
+                return;
+            }
+            this.main.trigger('hidepagehtml', { page: this });
+
+            var mediaElements = htmlContainer.querySelectorAll('video, audio');
+            mediaElements.forEach(function (media) {
+                media.pause();
+            });
+
+            var iframes = htmlContainer.querySelectorAll('iframe');
+            for (var i = 0; i < iframes.length; i++) {
+                var iframe = iframes[i];
+                var src = iframe.src;
+                var youtubeRegex = /(?:youtube\.com\/embed\/|youtu\.be\/)/;
+                // var youtubeRegex =
+                //     /(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
+
+                // if (youtubeRegex.test(src)) {
+                //     var youtubeVideo = iframe.contentWindow;
+                //     youtubeVideo.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
+                // } else {
+                this.removedIframes = this.removedIframes || [];
+                this.removedIframes.push({
+                    iframe: iframe,
+                    parentNode: iframe.parentNode,
+                });
+                iframe.parentNode.removeChild(iframe);
+                // }
+            }
+        }
+    },
+
+    unpauseHtml: function (side) {
+        this.htmlPaused[side] = false;
+        if (this.removedIframes && this.removedIframes.length) {
+            this.removedIframes.forEach(function (obj) {
+                obj.parentNode.appendChild(obj.iframe);
+            });
+        }
+        this.removedIframes = [];
+    },
+
+    showHtml: function () {
+        if (!this.htmlContentVisible) {
+            this.htmlContentVisible = true;
+        }
+    },
+
+    updateHtmlContent: function (side) {
+        this.htmlLoaded = this.htmlLoaded || {};
+        if (!this.htmlLoaded[side]) {
+            var c = this.htmlContent[side];
+            if (c.jquery) {
+                c = c[0];
+            }
+
+            this.htmlLoaded[side] = true;
+            var container = this.html[side];
+            if (container) container.appendChild(c);
+
+            this.main.trigger('showpagehtml', { page: this });
+        }
+        this.startHTML(side);
+    },
+
+    show: function () {
+        if (this.hidden) {
+            this.wrapper.style.display = 'block';
+            this.setShadowOpacity(0);
+            this.showHtml();
+        }
+        this.hidden = false;
+    },
+
+    setShadowOpacity: function (val) {
+        if (this.shadowOpacity != val && !this.hidden) {
+            this.wrapper.style.setProperty('--page3-shadow-opacity', val);
+            this.shadowOpacity = val;
+        }
+    },
+
+    hide: function () {
+        if (!this.hidden) {
+            this.wrapper.style.display = 'none';
+            this.setShadowOpacity(0);
+        }
+
+        this.hidden = true;
+    },
+
+    _setVisibility: function (div, visible) {
+        if (div && div.dataset.visible != visible) {
+            div.dataset.visible = visible;
+            div.style.opacity = visible ? '1' : '0';
+            div.style.pointerEvents = visible ? 'auto' : 'none';
+        }
+    },
+
+    _setAngle: function (angle) {
+        angle = -angle;
+
+        if (angle != this.angle) {
+            this.setShadowOpacity((1 - Math.abs(angle + 90) / 90) * 0.2);
+            this.wrapper.style.setProperty('--page3-rotate-y', String(angle + 'deg'));
+            this._setVisibility(this.front, angle > -90);
+            this._setVisibility(this.back, angle < -90);
+            this.angle = angle;
+            var i;
+            var max = 0;
+            for (i = 0; i < this.book.pagesArr.length; i++) {
+                if (i != this.index && this.book.pagesArr[i].zIndex > max) {
+                    max = this.book.pagesArr[i].zIndex;
+                }
+            }
+            this._setZIndex(max + 1);
+        }
+    },
+
+    _setZIndex: function (val) {
+        if (this.zIndex != val) {
+            this.wrapper.style['z-index'] = val;
+        }
+        this.zIndex = val;
+    },
+};

flipbook.css

@@ -0,0 +1,2515 @@
+.flipbook-overlay {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(0, 0, 0, 0.71);
+    z-index: 2147483646 !important;
+    opacity: 0;
+    transition: opacity 0.3s ease-out;
+}
+
+.flipbook-wrapper {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
+    text-shadow: none;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+    background: #ffffff;
+}
+
+.flipbook-wrapper-transparent {
+    width: 100%;
+    height: 100%;
+    background: none;
+}
+
+.flipbook-main-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+    direction: ltr !important;
+    scrollbar-color: rgba(130, 130, 130, 0.5) transparent;
+    scrollbar-width: thin;
+}
+
+.flipbook-bookLayer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+
+    cursor: -webkit-grab;
+    cursor: grab;
+}
+
+.flipbook-zoomLayer-inside {
+    display: block;
+    position: relative;
+    background-size: contain;
+    text-align: center;
+}
+
+.flipbook-zoomLayer-inside .flipbook-carousel-page {
+    float: left;
+}
+
+.flipbook-book {
+    display: block;
+    position: relative;
+}
+
+.flipbook-page {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    transform: translateZ(0px);
+    will-change: transform;
+    transform-style: preserve-3d;
+}
+
+.flipbook-page3 {
+    position: absolute;
+    background: #eee;
+    will-change: transform;
+    transform: rotateY(var(--page3-rotate-y, 0));
+    transform-origin: 0 50%;
+    -webkit-transform-origin: 0 50%;
+}
+
+.flipbook-page3-html {
+    position: absolute;
+    height: 1000px;
+    transform-origin: 0 0;
+    top: 0;
+    left: 0;
+}
+
+.flipbook-page3-inner {
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    will-change: opacity;
+}
+
+.flipbook-page3-inner-back {
+    transform: scaleX(-1);
+}
+
+.flipbook-page3-bg {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+}
+
+.flipbook-page3-bg img {
+    height: 100% !important;
+}
+
+.flipbook-page3 img {
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    height: 100%;
+    margin: auto;
+    position: absolute;
+    transform-origin: 0 0;
+    -webkit-transform-origin: 0 0;
+    float: left;
+    user-select: none;
+    pointer-events: none;
+    max-width: unset;
+    width: unset;
+}
+
+.flipbook-page3 canvas {
+    width: 100%;
+    height: 100%;
+}
+
+.flipbook-page3::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: rgba(0, 0, 0, 1);
+    opacity: var(--page3-shadow-opacity, 0);
+    will-change: opacity;
+    transform: translateZ(0);
+    z-index: 1;
+    pointer-events: none;
+}
+
+.flipbook-page3-front {
+    transform-origin: 0 50%;
+    -webkit-transform-origin: 0 50%;
+}
+
+.flipbook-page3-back {
+    transform-origin: 0% 50%;
+    -webkit-transform-origin: 0% 50%;
+}
+
+.flipbook-page3-back .flipbook-page3-inner {
+    transform: rotateY(180deg);
+}
+
+.flipbook-book3 {
+    display: block;
+    position: relative;
+}
+
+.flipbook-center-container3 {
+    position: relative;
+    will-change: transform;
+    border: none;
+}
+
+.flipbook-page-htmlContent {
+    transform-origin: 0 0;
+    z-index: 50;
+    position: absolute;
+}
+
+.flipbook-page-html video,
+.flipbook-page-html iframe {
+    max-width: initial;
+}
+
+.flipbook-book canvas {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 50;
+    width: 100%;
+    height: 100%;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+    transform-style: preserve-3d;
+    -webkit-transform-style: preserve-3d;
+}
+
+.flipbook-page img {
+    width: 100%;
+    height: 100%;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+    transform-style: preserve-3d;
+    -webkit-transform-style: preserve-3d;
+}
+
+.flipbook-left-arrow {
+    display: block !important;
+    position: absolute !important;
+    top: 50% !important;
+    left: 0;
+    font-style: normal;
+    font-weight: normal;
+    -webkit-font-smoothing: antialiased;
+    text-align: center;
+    cursor: pointer;
+}
+
+.flipbook-right-arrow {
+    display: block !important;
+    position: absolute !important;
+    top: 50% !important;
+    right: 0;
+    font-style: normal;
+    font-weight: normal;
+    -webkit-font-smoothing: antialiased;
+    text-align: center;
+    cursor: pointer;
+}
+
+.flipbook-first-arrow {
+    display: block !important;
+    position: absolute !important;
+    top: 50%;
+    left: 0;
+    font-style: normal;
+    font-weight: normal;
+    -webkit-font-smoothing: antialiased;
+    text-align: center;
+    cursor: pointer;
+}
+
+.flipbook-last-arrow {
+    display: block !important;
+    position: absolute !important;
+    top: 50%;
+    right: 0;
+    font-style: normal;
+    font-weight: normal;
+    -webkit-font-smoothing: antialiased;
+    text-align: center;
+    cursor: pointer;
+}
+
+.flipbook-currentPageHolder {
+    position: relative;
+    z-index: 3;
+    pointer-events: auto;
+    display: inline-block;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    box-sizing: content-box;
+    width: max-content;
+}
+
+.flipbook-currentPageHolder form {
+    display: flex;
+    top: 0;
+    margin: 0;
+}
+
+.flipbook-currentPageNumber {
+    border-radius: 15px !important;
+    padding: 5px !important;
+    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important;
+    font-size: 14px;
+    line-height: initial;
+}
+
+.flipbook-currentPageInput {
+    line-height: 14px !important;
+    background: none !important;
+    border: none !important;
+    font-size: 14px !important;
+    max-width: initial !important;
+    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important;
+    text-align: right !important;
+    height: 100% !important;
+    padding: 0 !important;
+    border: 2px solid rgba(128, 128, 128, 0.5);
+}
+
+.flipbook-currentPageInput.digits-3 {
+    min-width: calc(3em) !important;
+}
+
+.flipbook-currentPageInput.digits-2 {
+    min-width: calc(2em) !important;
+}
+
+.flipbook-currentPageInput.digits-1 {
+    min-width: calc(1em) !important;
+}
+
+.flipbook-currentPageInput:focus {
+    outline: 2px solid #88888885;
+}
+
+.flipbook-color-transparent {
+    color: transparent !important;
+}
+
+.flipbook-browser-fullscreen {
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    z-index: 999999 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
+.flipbook-menuBottom {
+    position: absolute;
+    bottom: 0;
+    margin: 0;
+    padding: 0;
+    z-index: 2;
+    pointer-events: none;
+    display: flex;
+    overflow: visible;
+}
+
+.flipbook-menu-btn-wrapper {
+    display: inline-block;
+    position: relative;
+    overflow: visible;
+}
+
+.flipbook-tools .flipbook-menu-btn-wrapper {
+    pointer-events: auto;
+    display: flex;
+    align-items: center;
+    position: relative;
+    overflow: visible;
+    cursor: pointer;
+    padding-right: 15px;
+    min-width: 130px;
+}
+
+.flipbook-share .flipbook-menu-btn-wrapper {
+    pointer-events: auto;
+    display: inline-block;
+    align-items: center;
+    position: relative;
+    overflow: visible;
+    cursor: pointer;
+    padding: 15px;
+}
+
+.flipbook-menuBottom .flipbook-has-tooltip::before {
+    bottom: calc(100% + 5px);
+}
+
+.flipbook-menuTop .flipbook-has-tooltip::before {
+    top: calc(100% + 5px);
+}
+
+.flipbook-page-item-has-tooltip:hover {
+    z-index: 1;
+}
+
+.flipbook-page-item-has-tooltip:hover::before {
+    visibility: visible;
+    opacity: 1;
+}
+
+.flipbook-tooltip-left::before {
+    left: -20px;
+    transform: translateX(-100%) translateY(-50%);
+    top: 50%;
+}
+
+.flipbook-tooltip-right::before {
+    left: calc(100% + 20px);
+    transform: translateY(-50%);
+    top: 50%;
+}
+
+.flipbook-tooltip-top::before {
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: calc(100% + 20px);
+}
+
+.flipbook-tooltip-bottom::before {
+    left: 50%;
+    transform: translateX(-50%);
+    top: calc(100% + 20px);
+}
+
+.flipbook-tooltip-topLeft::before {
+    left: -20px;
+    transform: translateX(-100%);
+    bottom: calc(100% + 20px);
+}
+
+.flipbook-tooltip-topRight::before {
+    right: -20px;
+    bottom: calc(100% + 20px);
+}
+
+.flipbook-tooltip-bottomLeft::before {
+    left: -20px;
+    transform: translateX(-100%);
+    top: calc(100% + 20px);
+}
+
+.flipbook-tooltip-bottomRight::before {
+    right: -20px;
+    top: calc(100% + 20px);
+}
+
+.flipbook-page-item-has-tooltip::before {
+    content: attr(data-tooltip);
+    position: absolute;
+    visibility: hidden;
+    opacity: 0;
+    background-color: rgba(255, 255, 255, 0.9);
+    color: black;
+    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
+    text-align: center;
+    border-radius: 4px;
+    padding: 10px 20px;
+    font-size: 32px;
+    font-weight: normal;
+    letter-spacing: normal;
+    line-height: 1.4;
+    text-transform: none;
+    width: max-content;
+    max-width: 600px;
+    transition:
+        opacity 0.3s ease,
+        visibility 0.3s ease;
+}
+
+.flipbook-has-tooltip::before {
+    content: attr(data-tooltip);
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    visibility: hidden;
+    opacity: 0;
+    background-color: rgba(0, 0, 0, 0.8);
+    color: white;
+    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
+    font-size: 14px;
+    text-align: center;
+    border-radius: 4px;
+    padding: 5px 10px;
+    font-size: 14px;
+    font-weight: normal;
+    letter-spacing: normal;
+    line-height: 1.4;
+    text-transform: none;
+    width: max-content;
+    white-space: nowrap;
+    transition:
+        opacity 0.3s ease,
+        visibility 0.3s ease;
+}
+
+.flipbook-menu-right .flipbook-has-tooltip:last-child::before {
+    left: 100%;
+    transform: translateX(-100%);
+}
+
+.flipbook-menu-left .flipbook-has-tooltip:first-child::before {
+    left: 0%;
+    transform: translateX(0%);
+}
+
+.flipbook-has-tooltip:hover::before {
+    visibility: visible;
+    opacity: 1;
+}
+
+.flipbook-has-tooltip.disabled:hover::before {
+    visibility: hidden;
+    opacity: 0;
+}
+
+.flipbook-menu-fixed {
+    left: 0;
+    right: 0;
+}
+
+.flipbook-menu-fixed .flipbook-menu {
+    align-items: center;
+}
+
+@media only screen and (max-width: 768px) {
+    .flipbook-menu-fixed .flipbook-menu {
+        justify-content: space-around;
+        width: -webkit-fill-available;
+    }
+}
+
+.flipbook-menu-center {
+    justify-content: center;
+    align-items: center;
+}
+
+.flipbook-menu-right {
+    justify-content: flex-end;
+    align-self: center;
+    flex: 1;
+    display: flex;
+    /* min-width: -webkit-min-content; */
+    /* Workaround to Chrome bug */
+}
+
+.flipbook-menu-left {
+    justify-content: flex-start;
+    align-self: center;
+    flex: 1;
+    display: flex;
+    /* min-width: -webkit-min-content; */
+    /* Workaround to Chrome bug */
+}
+
+.flipbook-menu-floating {
+    margin-top: 5px !important;
+    margin-bottom: 5px !important;
+    left: 50%;
+    transform: translate(-50%, 0);
+    min-width: fit-content;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    border-radius: 2px;
+}
+
+.flipbook-menuTop {
+    position: absolute;
+    top: 0;
+    margin: 0;
+    padding: 0;
+    z-index: 2;
+    pointer-events: none;
+    display: flex;
+    justify-content: space-between;
+    overflow: visible;
+}
+
+.flipbook-menu {
+    position: relative;
+    text-align: center;
+    display: flex;
+}
+
+.flipbook-menu svg,
+.flipbook-nav svg {
+    box-sizing: content-box;
+}
+
+.flipbook-page-caption-btn {
+    padding: 12px;
+    background-color: rgba(255, 255, 255, 0.9);
+    fill: black;
+    display: flex;
+    justify-content: center;
+    border-radius: 6px;
+    bottom: 50px;
+    right: 50px;
+    position: absolute;
+    cursor: pointer;
+    box-sizing: content-box;
+    transform: scale(2);
+}
+
+.htmlContent > .flipbook-page-caption-btn:hover + .flipbook-page-caption {
+    opacity: 1;
+}
+
+.flipbook-page-caption {
+    opacity: 0;
+    position: absolute;
+    bottom: 120px;
+    max-width: calc(100% - 288px);
+    width: max-content;
+    padding: 24px;
+    border-radius: 12px;
+    right: 120px;
+    background-color: rgba(255, 255, 255, 0.9);
+    color: black;
+    font-size: 24px;
+    transition: opacity 0.3s;
+}
+
+.flipbook-menu-btn {
+    user-select: none;
+    display: inline-flex;
+    justify-content: center;
+    cursor: pointer;
+    background: none;
+    transition: all 0.1s ease-out;
+    pointer-events: auto;
+    box-sizing: content-box;
+}
+
+.flipbook-submenu .flipbook-menu-btn {
+    justify-content: left;
+}
+.flipbook-submenu .flipbook-menu-btn svg {
+    margin-right: 10px;
+}
+
+.flipbook-nav .disabled,
+.flipbook-menu .disabled {
+    opacity: 0.2;
+    cursor: inherit;
+    /* pointer-events: none; */
+}
+
+.flipbook-icon-reverse {
+    transform: scaleX(-1);
+    transform-origin: center;
+}
+
+.flipbook-menu .flipbook-findbar {
+    pointer-events: auto;
+    margin-top: 10px;
+}
+
+.flipbook-menu .flipbook-findbar input {
+    width: 140px;
+    margin-left: 0;
+}
+
+.flipbook-thumbHolder {
+    bottom: 0;
+    position: absolute;
+    top: 0;
+    z-index: 9;
+    min-width: 170px;
+    display: flex;
+    flex-direction: column;
+    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important;
+}
+
+.flipbook-thumbsWrapper {
+    bottom: 0;
+    left: 0;
+    top: 90px;
+    overflow: auto;
+    width: 100%;
+    height: 100%;
+}
+
+.flipbook-thumbsScroller {
+    margin: 0;
+    position: relative;
+    text-align: center;
+    display: grid;
+    justify-content: center;
+}
+
+.flipbook-thumbs-grid .flipbook-thumbsWrapper {
+    width: calc(100% - 100px);
+    max-width: 1600px;
+    margin: auto;
+    padding-top: 20px;
+    padding-bottom: 50px;
+    height: max-content;
+}
+
+.flipbook-thumbs-grid .flipbook-thumbsScroller {
+    display: block;
+}
+.flipbook-thumbs-grid {
+    background-color: rgba(0, 0, 0, 0.5) !important;
+    backdrop-filter: blur(20px);
+    width: 100%;
+    color: white;
+}
+
+.flipbook-thumbs-grid .flipbook-menu-title,
+.flipbook-thumbs-grid .flipbook-btn-close svg {
+    color: white !important;
+    fill: white !important;
+}
+
+.flipbook-thumbs-grid .flipbook-menu-header {
+    display: none;
+}
+
+.flipbook-thumbs-grid-close {
+    display: none;
+}
+
+.flipbook-thumbs-grid .flipbook-thumbs-grid-close {
+    display: flex;
+    justify-content: end;
+    top: 10px;
+    right: 40px;
+    z-index: 1;
+}
+
+.flipbook-thumbs-grid .flipbook-thumbs-grid-close svg {
+    font-size: 30px;
+    fill: #fff !important;
+    text-shadow: drop-shadow(rgb(0, 0, 0) 0px 0px 1px);
+    padding: 10px;
+}
+
+.flipbook-thumb {
+    margin: 15px 10px 10px;
+    cursor: pointer;
+    position: relative;
+    display: inline-block;
+    background: rgba(255, 255, 255, 0.5);
+    border: 1px solid rgb(0 0 0 / 25%);
+}
+
+.flipbook-thumb:hover,
+.flipbook-thumb-active {
+    border: 1px solid rgb(0 0 0 / 50%);
+    box-shadow: 0 0 0px 2px rgb(0 0 0 / 25%);
+    transition: 0.2s all;
+    opacity: 0.7;
+}
+
+.flipbook-thumb:hover .flipbook-thumb-num {
+    background: rgba(0, 0, 0, 0.8);
+    transition: 0.2s all;
+}
+
+.flipbook-search {
+    padding: 16px;
+    position: relative;
+}
+
+.flipbook-search-clear {
+    position: absolute;
+    top: 7px;
+    right: 7px;
+}
+
+.flipbook-search-match {
+    padding: 8px 16px;
+    font-size: 14px;
+    line-height: 20px;
+    cursor: pointer;
+    width: 218px;
+}
+
+.flipbook-search-match:hover {
+    text-decoration: underline;
+}
+
+.flipbook-search-match-title {
+    height: 20px;
+}
+
+.flipbook-search-match-text {
+    text-align: left;
+}
+
+.flipbook-thumb-num {
+    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
+    font-size: 14px;
+    line-height: 14px;
+    user-select: none;
+    font-weight: 600;
+    position: relative;
+    position: absolute;
+    bottom: 11px;
+    bottom: 2px;
+    right: 2px;
+    border-radius: 2px;
+    background: rgba(0, 0, 0, 0.6);
+    color: white !important;
+    padding: 4px 6px;
+    display: inline-block;
+}
+
+.flipbook-thumb img {
+    display: inline-block;
+}
+
+.flipbook-toc {
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    top: 50px;
+    bottom: 0;
+    overflow: auto;
+    width: calc(100% - 20px);
+    padding: 0 10px;
+    box-sizing: content-box;
+}
+
+.flipbook-toc ul {
+    list-style: none;
+    padding-left: 0;
+    margin: 0;
+}
+.flipbook-toc .title-container {
+    display: flex;
+    align-items: center;
+    flex: 1;
+}
+
+.flipbook-toc ul ul {
+    padding-left: 20px; /* Indent only nested lists */
+}
+
+.flipbook-toc li {
+    margin: 5px 0;
+}
+
+.flipbook-toc .toc-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 5px 0;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
+}
+
+.flipbook-toc .toc-item:hover {
+    background-color: rgba(128, 128, 128, 0.2);
+}
+
+.flipbook-toc .expand-icon,
+.flipbook-toc .spacer {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1em; /* Fixed width */
+    height: 1em; /* Fixed height to match icon size */
+    margin-right: 8px;
+    flex-shrink: 0;
+}
+
+.flipbook-toc .expand-icon svg {
+    transition: transform 0.2s ease-in-out;
+}
+
+.flipbook-toc .expand-icon.expanded svg {
+    transform: rotate(90deg);
+}
+
+.flipbook-toc .spacer {
+    visibility: hidden;
+}
+
+.flipbook-toc .title-container span.title {
+    font-size: 14px;
+    /* color: #333; */
+}
+
+.flipbook-toc .page-number {
+    font-size: 12px;
+    margin-left: 10px;
+    white-space: nowrap;
+    margin-right: 5px;
+}
+
+.flipbook-tocHolder {
+    position: absolute;
+    top: 0;
+    width: 250px;
+    bottom: 0;
+    z-index: 9;
+}
+
+.flipbook-tocItem {
+    display: block;
+}
+
+.flipbook-tocItem {
+    display: flex;
+    justify-content: space-between;
+    padding: 8px 15px; /* Adjusted padding */
+    margin: 5px 0; /* Optional for spacing between items */
+    align-items: center; /* Ensure vertical alignment of content */
+
+    cursor: pointer;
+    font-size: 14px;
+    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
+    width: 100%;
+}
+
+.flipbook-tocItem .flipbook-icon {
+    margin-right: 10px; /* Add space between icon and title */
+    display: inline-block;
+}
+
+.flipbook-tocItem .title {
+    flex-grow: 1; /* Allow the title to take up remaining space */
+    text-align: left; /* Ensure title aligns left */
+    margin-left: 10px; /* Add some space between icon and title */
+}
+
+.flipbook-tocItem .flipbook-toc-number {
+    text-align: right;
+    width: 25px; /* Ensure the width remains fixed */
+    flex-shrink: 0; /* Prevent the page number from shrinking */
+}
+
+.flipbook-tocItem .title:hover {
+    text-decoration: underline;
+}
+
+.flipbook-tocItem .right {
+    float: right;
+}
+
+.flipbook-tocItem > span {
+    vertical-align: top;
+}
+
+.flipbook-tocItem > span > span {
+    vertical-align: middle;
+}
+
+.flipbook-findbar {
+    position: relative;
+}
+
+.flipbook-findbar input {
+    width: 210px;
+    padding: 5px;
+    font-size: 14px;
+    line-height: initial;
+    border: 1px solid rgba(128, 128, 128, 0.7);
+}
+
+.flipbook-findbar input:focus {
+    outline: 1px solid rgba(128, 128, 128, 0.7);
+}
+
+.flipbook-find-info {
+    padding-left: 10px;
+    max-width: 200px;
+    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important;
+    font-size: 14px;
+    pointer-events: none;
+}
+
+.invisible {
+    opacity: 0;
+    pointer-events: none;
+    display: none;
+}
+
+/* .hidden {
+    display: none !important;
+} */
+
+.flipbook-hidden {
+    display: none !important;
+}
+
+.flipbook-overlay-visible {
+    opacity: 1;
+}
+
+.transition {
+    -webkit-transition: all 0.3s ease-out;
+    -moz-transition: all 0.3s ease-out;
+    -o-transition: all 0.3s ease-out;
+    transition: all 0.3s ease-out;
+}
+
+.flipbook-share-email {
+    background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='at' class='svg-inline--fa fa-at fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M256 8C118.941 8 8 118.919 8 256c0 137.059 110.919 248 248 248 48.154 0 95.342-14.14 135.408-40.223 12.005-7.815 14.625-24.288 5.552-35.372l-10.177-12.433c-7.671-9.371-21.179-11.667-31.373-5.129C325.92 429.757 291.314 440 256 440c-101.458 0-184-82.542-184-184S154.542 72 256 72c100.139 0 184 57.619 184 160 0 38.786-21.093 79.742-58.17 83.693-17.349-.454-16.91-12.857-13.476-30.024l23.433-121.11C394.653 149.75 383.308 136 368.225 136h-44.981a13.518 13.518 0 0 0-13.432 11.993l-.01.092c-14.697-17.901-40.448-21.775-59.971-21.775-74.58 0-137.831 62.234-137.831 151.46 0 65.303 36.785 105.87 96 105.87 26.984 0 57.369-15.637 74.991-38.333 9.522 34.104 40.613 34.103 70.71 34.103C462.609 379.41 504 307.798 504 232 504 95.653 394.023 8 256 8zm-21.68 304.43c-22.249 0-36.07-15.623-36.07-40.771 0-44.993 30.779-72.729 58.63-72.729 22.292 0 35.601 15.241 35.601 40.77 0 45.061-33.875 72.73-58.161 72.73z'%3E%3C/path%3E%3C/svg%3E");
+}
+
+.flipbook-icon {
+    font-style: normal;
+    font-weight: normal;
+    height: 100%;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    bottom: 0;
+    text-align: center;
+    display: flex;
+    box-sizing: content-box !important;
+    justify-self: left;
+}
+
+.flipbook-icon path {
+    box-sizing: content-box !important;
+}
+
+.flipbook-btn-close {
+    height: 40px;
+    width: 40px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.flipbook-btn-close .flipbook-icon {
+    width: 16px;
+}
+
+.flipbook-font {
+    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
+    font-size: 14px;
+}
+
+.flipbook-btn {
+    text-transform: uppercase;
+    font-weight: bold;
+    user-select: none;
+    cursor: pointer;
+    width: 200px;
+    line-height: 32px;
+    text-align: center;
+    margin: 5px auto;
+    border: none;
+    background: #f9f9f9;
+    background: none;
+    border-radius: 3px;
+    -webkit-transition: none;
+    -o-transition: none;
+    transition: none;
+    font-size: 12px;
+}
+
+.flipbook-bg-gradient {
+    background: #313538dd;
+}
+
+.flipbook-color-gradient {
+    color: #eee;
+    fill: #eee;
+}
+
+.flipbook-color-gradient:hover {
+    color: #eee;
+    fill: #eee;
+}
+
+.flipbook-bg-dark {
+    background: rgb(49, 53, 56);
+}
+
+.flipbook-color-dark {
+    color: rgba(255, 255, 255, 0.75);
+    fill: rgba(255, 255, 255, 0.75);
+}
+
+.flipbook-color-dark:hover {
+    color: #fff;
+    fill: #fff;
+}
+
+.flipbook-bg-light {
+    /* background: rgb(255, 255, 255); */
+}
+
+.flipbook-color-light {
+    color: rgba(50, 50, 50, 0.75);
+    fill: rgba(50, 50, 50, 0.75);
+}
+
+.flipbook-color-light:hover {
+    color: rgb(50, 50, 50);
+    fill: rgb(50, 50, 50);
+}
+
+.flipbook-bg-twilight {
+    background: #141414;
+}
+
+.flipbook-color-twilight {
+    color: #feffd3;
+    fill: #feffd3;
+}
+
+.flipbook-color-twilight:hover {
+    color: #feffd3;
+    fill: #feffd3;
+}
+
+.flipbook-bg-darkgrey {
+    background: #212121;
+}
+
+.flipbook-color-darkgrey {
+    color: #9e9e9e;
+    fill: #9e9e9e;
+}
+
+.flipbook-color-darkgrey:hover {
+    color: #bdbdbd;
+    fill: #bdbdbd;
+}
+
+.flipbook-bg-lightgrey {
+    background: #e0e0e0;
+}
+
+.flipbook-color-lightgrey {
+    color: #757575;
+    fill: #757575;
+}
+
+.flipbook-color-lightgrey:hover {
+    color: #616161;
+    fill: #616161;
+}
+
+.flipbook-sub-menu {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+}
+
+.flipbook-sub-menu-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+}
+
+.flipbook-menu-header {
+    position: relative;
+    padding: 10px;
+    font-size: 16px;
+    text-align: center;
+}
+
+.flipbook-menu-title {
+    pointer-events: none;
+    user-select: none;
+}
+
+.flipbook-sub-menu-content {
+    display: inline-block;
+    margin-top: -20px;
+    min-width: 250px;
+    padding-bottom: 10px;
+}
+
+.flipbook-carousel-slide {
+    -webkit-box-sizing: border-box;
+    -o-box-sizing: border-box;
+    box-sizing: border-box;
+    text-align: center;
+    position: absolute;
+    overflow: hidden;
+}
+
+.flipbook-carousel-slide .slide-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+.flipbook-carousel-page {
+    display: inline-block;
+    background: #f1f1f1;
+    position: relative;
+    -o-transform-origin: 0 0;
+}
+
+.flipbook-scroll-page {
+    display: block;
+    background: #f1f1f1;
+    position: relative;
+}
+
+.flipbook-carousel-page-inner,
+.flipbook-scroll-page-inner {
+    -webkit-transform-origin: 0 0;
+    -o-transform-origin: 0 0;
+    transform-origin: 0 0;
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+}
+
+.flipbook-carousel-page-inner canvas,
+.flipbook-scroll-page-inner {
+    width: 100%;
+    height: 100%;
+}
+
+.flipbook-carousel-page img,
+.flipbook-scroll-page img {
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    margin: auto;
+    position: absolute;
+    pointer-events: none;
+    user-select: none;
+    max-width: 200%;
+}
+
+.flipbook-carousel-page .page-carousel-img,
+.flipbook-scroll-page .page-scroll-img {
+    height: 100%;
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.flipbook-overflow-hidden::-webkit-scrollbar {
+    display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+
+.flipbook-overflow-hidden {
+    -ms-overflow-style: none;
+    /* IE and Edge */
+    scrollbar-width: none;
+    /* Firefox */
+    overflow: hidden;
+}
+
+/*share*/
+
+.flipbook-share .social.bottom,
+.flipbook-share .social.top {
+    -webkit-transform-origin: 0 0;
+    -o-transform-origin: 0 0;
+}
+
+.flipbook-share {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.flipbook-share [class*='entypo-']:before {
+    font-family: entypo, sans-serif;
+}
+
+.flipbook-share label {
+    font-size: 16px;
+    cursor: pointer;
+    margin: 0;
+    padding: 5px 10px;
+    border-radius: 5px;
+    background: #a29baa;
+    color: #333;
+    transition: all 0.3s ease;
+}
+
+.flipbook-share label:hover {
+    opacity: 0.8;
+}
+
+.flipbook-share label span {
+    text-transform: uppercase;
+    font-size: 0.9em;
+    font-family: Lato, sans-serif;
+    font-weight: 700;
+    -webkit-font-smoothing: antialiased;
+    padding-left: 6px;
+}
+
+.flipbook-share ul {
+    position: relative;
+    left: 0;
+    right: 0;
+    height: 46px;
+    color: #fff;
+    margin: auto;
+    padding: 0;
+    list-style: none;
+}
+
+.flipbook-share ul li {
+    font-size: 16px;
+    cursor: pointer;
+    width: 40px;
+    margin: 0;
+    padding: 9px 0;
+    text-align: center;
+    float: left;
+    height: 22px;
+    position: relative;
+    z-index: 2;
+    -webkit-box-sizing: content-box;
+    box-sizing: content-box;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.flipbook-page-preloader {
+    width: auto !important;
+    height: auto !important;
+}
+
+.flipbook-page-preloader-image {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+/** preloader*/
+
+.cssload-container {
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    text-align: center;
+    position: absolute;
+    z-index: 2147483647 !important;
+    pointer-events: none;
+}
+
+.cssload-speeding-wheel {
+    width: 24px;
+    height: 24px;
+    /* margin: 0 auto; */
+    border: 3px solid rgba(0, 0, 0, 0.4);
+    border-radius: 50%;
+    border-left-color: rgba(255, 255, 255, 0.2);
+    border-right-color: rgba(255, 255, 255, 0.2);
+    animation: cssload-spin 575ms infinite linear;
+    -o-animation: cssload-spin 575ms infinite linear;
+    -ms-animation: cssload-spin 575ms infinite linear;
+    -webkit-animation: cssload-spin 575ms infinite linear;
+    -moz-animation: cssload-spin 575ms infinite linear;
+    top: 45%;
+    position: absolute;
+    left: 50%;
+    margin-left: -15px;
+    margin-top: -15px;
+    z-index: 3;
+}
+
+@keyframes cssload-spin {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@-o-keyframes cssload-spin {
+    100% {
+        -o-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+@-ms-keyframes cssload-spin {
+    100% {
+        -ms-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+@-webkit-keyframes cssload-spin {
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+@-moz-keyframes cssload-spin {
+    100% {
+        -moz-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+/**new preloader end*/
+
+.flipbook-loading-text {
+    position: absolute;
+    top: 45%;
+    margin-top: 20px;
+    width: 100%;
+    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important;
+    font-size: 14px;
+    color: #aaa !important;
+}
+
+.flipbook-loading-bg {
+    width: 40px;
+    height: 40px;
+    border-radius: 4px;
+    top: 45%;
+    left: 50%;
+    position: absolute;
+    pointer-events: none;
+    background: rgba(0, 0, 0, 0.2);
+    margin: -20px;
+    display: none;
+}
+
+.flipbook-fillPreloader {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    display: table-cell;
+    text-align: center;
+    vertical-align: middle;
+    pointer-events: none;
+}
+
+.flipbook-fillPreloader img {
+    position: absolute;
+    margin: auto;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+
+    -webkit-transition: all 0.11s ease-out;
+    -moz-transition: all 0.1s ease-out;
+    transition: all 0.1s ease-out;
+}
+
+.thumb-btn-close {
+    right: 0;
+    margin: 3px;
+    border-radius: 2px;
+    position: absolute;
+    cursor: pointer;
+    padding: 4px 6px;
+    background: rgba(0, 0, 0, 0.6);
+}
+
+.thumb-btn-close:hover {
+    background: rgba(0, 0, 0, 0.8);
+}
+
+.flipbook-noselect {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.flipbook-btn-active {
+    background: rgba(128, 128, 128, 0.5);
+}
+
+.flipbook-move {
+    cursor: move;
+    /* fallback if move cursor is unsupported */
+    cursor: -webkit-grab;
+    cursor: grab;
+}
+
+.flipbook-page-item {
+    bottom: auto;
+    right: auto;
+    position: absolute;
+    -webkit-transition: all 0.2s ease-out;
+    -moz-transition: all 0.2s ease-out;
+    -o-transition: all 0.2s ease-out;
+    transition: all 0.2s ease-out;
+    z-index: 0;
+}
+
+.flipbook-page-item iframe {
+    width: 100%;
+    height: 100%;
+}
+
+.textLayer mark {
+    background: #ff0;
+    color: transparent !important;
+    padding: 0;
+}
+
+.textLayer .mark-blue {
+    background: blue;
+}
+
+.textLayer .mark-red {
+    background: red;
+}
+
+.textLayer .mark-green {
+    background: green;
+}
+
+/* 
+.flipbook-textLayer {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+    opacity: var(--flipbook-link-opacity);
+    line-height: 1;
+    color: #000;
+    pointer-events: none;
+}
+
+.flipbook-textLayer br {
+    user-select: none;
+}
+
+.flipbook-page-htmlContent * {
+    max-width: initial;
+}
+
+.flipbook-page-htmlContent .pageClickArea {
+    position: absolute;
+    width: 5%;
+    height: 100%;
+    top: 0;
+    cursor: pointer;
+    draggable: none;
+}
+
+.pageClickAreaLeft {
+    left: 0;
+}
+
+.pageClickAreaRight {
+    right: 0;
+}
+
+.textLayer mark {
+    background: #ff0;
+    color: transparent;
+}
+
+.textLayer .mark-blue {
+    background: blue;
+}
+
+.textLayer .mark-red {
+    background: red;
+}
+
+.textLayer .mark-green {
+    background: green;
+}
+
+.textLayer > span {
+    color: transparent !important;
+    position: absolute;
+    white-space: pre;
+    cursor: text;
+    -webkit-transform-origin: 0 0;
+    -moz-transform-origin: 0% 0%;
+    -o-transform-origin: 0% 0%;
+    -ms-transform-origin: 0% 0%;
+    transform-origin: 0 0;
+}
+
+.textLayer > span::selection {
+    color: transparent !important;
+}
+
+.textLayer > div {
+    color: transparent !important;
+    position: absolute;
+    white-space: pre;
+    cursor: text;
+    -webkit-transform-origin: 0 0;
+    -moz-transform-origin: 0% 0%;
+    -o-transform-origin: 0% 0%;
+    -ms-transform-origin: 0% 0%;
+    transform-origin: 0 0;
+}
+
+.textLayer .highlight {
+    margin: -1px;
+    padding: 1px;
+    background-color: rgb(180, 0, 170);
+    border-radius: 4px;
+}
+
+.textLayer .highlight.begin {
+    border-radius: 4px 0 0 4px;
+}
+
+.textLayer .highlight.end {
+    border-radius: 0 4px 4px 0;
+}
+
+.textLayer .highlight.middle {
+    border-radius: 0;
+}
+
+.textLayer .highlight.selected {
+    background-color: rgb(0, 100, 0);
+}
+
+.textLayer ::selection {
+    background: rgb(0, 0, 255);
+}
+
+.textLayer ::-moz-selection {
+    background: rgb(0, 0, 255);
+}
+
+.textLayer .endOfContent {
+    background: initial;
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 100%;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+    cursor: default;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    -moz-user-select: none;
+}
+
+.textLayer .endOfContent.active {
+    top: 0;
+}
+
+.flipbook-disable-text-selection {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.annotationLayer section {
+    position: absolute;
+    padding: 0;
+    margin: 0;
+    background: none;
+} */
+
+.flipbook-page-html .pageClickArea {
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    bottom: 0;
+    cursor: pointer;
+    z-index: 20;
+}
+
+.pageClickAreaLeft {
+    left: 0;
+}
+
+.pageClickAreaRight {
+    /* right: 0; */
+}
+
+.annotationLayer .linkAnnotation > a,
+.annotationLayer .buttonWidgetAnnotation.pushButton > a,
+.flipbook-page-item-link {
+    position: absolute;
+    font-size: 1em;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--flipbook-link-color);
+    animation-duration: 2000ms;
+    animation-delay: 500ms;
+    animation-name: flashLinks;
+    opacity: var(--flipbook-link-opacity);
+}
+
+.flipbook-page-auto-link {
+    background: var(--flipbook-link-color);
+    color: transparent !important;
+    animation-duration: 2000ms;
+    animation-delay: 500ms;
+    animation-name: flashLinks;
+    pointer-events: auto;
+}
+
+.flipbook-page-auto-link-hover {
+    background: var(--flipbook-link-color-hover) !important;
+    color: transparent !important;
+}
+
+@keyframes flashLinks {
+    0% {
+        background: var(--flipbook-link-color);
+    }
+
+    20% {
+        background: var(--flipbook-link-color-hover);
+    }
+
+    100% {
+        background: var(--flipbook-link-color);
+    }
+}
+
+.flipbook-tooltip {
+    position: absolute;
+    background: rgba(0, 0, 0, 0.8);
+    top: 300px;
+    left: 300px;
+    color: white;
+    padding: 6px 12px;
+    font-size: 13px;
+    line-height: 13px;
+    font-weight: normal;
+    white-space: nowrap;
+    text-align: center;
+    -webkit-transition: opacity 0.2s ease-in;
+    transition: opacity 0.2s ease-in;
+    z-index: 10000;
+}
+
+.flipbook-submenu {
+    position: absolute;
+    right: 0;
+    width: max-content;
+    text-wrap: nowrap;
+}
+
+.flipbook-menuTop .flipbook-submenu {
+    top: calc(100% + 5px);
+}
+
+.flipbook-menuBottom .flipbook-submenu {
+    bottom: calc(100% + 5px);
+}
+
+.flipbook-menuTop * {
+    box-sizing: content-box !important;
+}
+
+.flipbook-menuBottom * {
+    box-sizing: content-box !important;
+}
+
+.flipbook-add-note-rect {
+    position: absolute;
+    pointer-events: none;
+}
+
+.add-note-btn {
+    pointer-events: auto;
+}
+
+.flipbook-add-note-rect .add-note-btn {
+    background: rgba(0, 0, 0, 0.8);
+    border-radius: 0.25em;
+    color: white;
+    padding: 0.3em 1em;
+    text-shadow: 0 1px 0 #000;
+    font-weight: normal;
+    white-space: nowrap;
+    text-align: center;
+    z-index: 10000;
+    left: 50%;
+    transform: translateX(-50%) translateY(-120%);
+    pointer-events: auto;
+    cursor: pointer;
+    position: absolute;
+    opacity: 0;
+}
+
+.flipbook-add-note-rect.hover .add-note-btn {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.flipbook-note-display {
+    width: 230px;
+    height: 125px;
+    position: absolute;
+    background-color: #fafafa;
+    -webkit-box-shadow: 0 2px 10px 0 rgb(27 47 73 / 30%);
+    box-shadow: 0 2px 10px 0 rgb(27 47 73 / 30%);
+    border-radius: 5px;
+    pointer-events: auto;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.flipbook-note-display .note-content {
+    height: 76px;
+    position: absolute;
+    width: 210px;
+    margin: 11px 15px 5px 15px;
+    overflow: hidden;
+}
+
+.flipbook-note-display .note-article {
+    font-family: inherit;
+    resize: none;
+    font-size: 14px;
+    width: 200px;
+    height: 76px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    border-width: 1px;
+    border-style: solid;
+    padding: 0;
+    color: rgb(89, 97, 104);
+    border-color: transparent;
+    background-color: transparent;
+    outline: none !important;
+}
+
+.flipbook-note-display .note-article:focus {
+    box-shadow: none;
+}
+
+.flipbook-note-display .note-delete-button .svg-icon {
+    width: 22px;
+    height: 22px;
+    fill: #a6aaad;
+}
+
+.flipbook-note-display .note-button {
+    float: right;
+    font-size: 22px;
+    line-height: 22px;
+    height: 22px;
+    color: #8d8d8d;
+    cursor: pointer;
+    text-align: center;
+    margin: 5px 11px;
+}
+
+.flipbook-note-display .note-footer {
+    height: 37px;
+    width: 100%;
+    margin: 0;
+    bottom: 0;
+    position: absolute;
+}
+
+.flipbook-page-note {
+    pointer-events: auto;
+    cursor: pointer;
+}
+
+.annotationLayer .linkAnnotation > a:hover,
+.annotationLayer .buttonWidgetAnnotation.pushButton > a:hover,
+.flipbook-page-item-link:hover {
+    background: var(--flipbook-link-color-hover) !important;
+    color: transparent !important;
+}
+
+.flipbook-page-auto-link:hover {
+    background: var(--flipbook-link-color-hover) !important;
+    color: transparent !important;
+}
+
+.flipbook-note-display {
+    opacity: 1;
+}
+
+.flipbook-spotlight-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgb(0, 0, 0, 0.88);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    z-index: 10002;
+}
+
+.flipbook-spotlight-overlay img {
+    max-width: 80%;
+    max-height: 80%;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+}
+
+.flipbook-spotlight-close-button {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: rgba(0, 0, 0, 0.8);
+    border-radius: 2px;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    width: 24px;
+    height: 24px;
+    z-index: 1;
+}
+
+.flipbook-spotlight-close-button:hover {
+    opacity: 0.7;
+}
+
+.flipbook-spotlight-caption-container {
+    color: white;
+    text-align: center;
+    font-size: 16px;
+    line-height: 1.6;
+    padding: 15px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    margin-top: 10px;
+}
+
+.flipbook-spotlight-title {
+    font-weight: bold;
+    font-size: 18px;
+    margin-bottom: 5px;
+}
+
+.flipbook-spotlight-description {
+    font-size: 14px;
+    font-weight: normal;
+}
+
+.flipbook-page-html {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+}
+
+.flipbook-page-html .htmlContent {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    z-index: 4;
+    pointer-events: none;
+}
+
+.flipbook-page-html .htmlContent * {
+    pointer-events: auto;
+}
+
+.flipbook-page3-inner[data-visible='false'] .htmlContent * {
+    pointer-events: none !important;
+}
+
+.flipbook-page-html .textLayer {
+    position: absolute;
+    text-align: initial;
+    inset: 0;
+    overflow: hidden;
+    opacity: 0.25;
+    line-height: 1;
+    -webkit-text-size-adjust: none;
+    -moz-text-size-adjust: none;
+    text-size-adjust: none;
+    forced-color-adjust: none;
+    transform-origin: 0 0;
+    z-index: 2;
+    font-weight: initial;
+}
+
+.flipbook-page-html .textLayer :is(span, br) {
+    color: transparent !important;
+    position: absolute;
+    white-space: pre;
+    cursor: text;
+    transform-origin: 0% 0%;
+}
+
+/* Only necessary in Google Chrome, see issue 14205, and most unfortunately
+* the problem doesn't show up in "text" reference tests. */
+.flipbook-page-html .textLayer span.markedContent {
+    top: 0;
+    height: 0;
+}
+
+.flipbook-page-html .textLayer .highlight {
+    margin: -1px;
+    padding: 1px;
+    background-color: var(--highlight-bg-color);
+    border-radius: 4px;
+}
+
+.flipbook-page-html .textLayer .highlight.appended {
+    position: initial;
+}
+
+.flipbook-page-html .textLayer .highlight.begin {
+    border-radius: 4px 0 0 4px;
+}
+
+.flipbook-page-html .textLayer .highlight.end {
+    border-radius: 0 4px 4px 0;
+}
+
+.flipbook-page-html .textLayer .highlight.middle {
+    border-radius: 0;
+}
+
+.flipbook-page-html .textLayer .highlight.selected {
+    background-color: var(--highlight-selected-bg-color);
+}
+
+.flipbook-page-html .textLayer ::-moz-selection {
+    background: blue;
+    background: AccentColor; /* stylelint-disable-line declaration-block-no-duplicate-properties */
+}
+
+.flipbook-page-html .textLayer ::selection {
+    background: blue;
+    background: AccentColor; /* stylelint-disable-line declaration-block-no-duplicate-properties */
+}
+
+/* Avoids https://github.com/mozilla/pdf.js/issues/13840 in Chrome */
+.flipbook-page-html .textLayer br::-moz-selection {
+    background: transparent;
+}
+.flipbook-page-html .textLayer br::selection {
+    background: transparent;
+}
+
+.flipbook-page-html .textLayer .endOfContent {
+    display: block;
+    position: absolute;
+    inset: 100% 0 0;
+    z-index: -1;
+    cursor: default;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+}
+
+.flipbook-page-html .textLayer .endOfContent.active {
+    top: 0;
+}
+
+:root {
+    --annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
+    --input-focus-border-color: Highlight;
+    --input-focus-outline: 1px solid Canvas;
+    --input-unfocused-border-color: transparent;
+    --input-disabled-border-color: transparent;
+    --input-hover-border-color: black;
+    --link-outline: none;
+}
+
+@media screen and (forced-colors: active) {
+    :root {
+        --input-focus-border-color: CanvasText;
+        --input-unfocused-border-color: ActiveText;
+        --input-disabled-border-color: GrayText;
+        --input-hover-border-color: Highlight;
+        --link-outline: 1.5px solid LinkText;
+        --hcm-highligh-filter: invert(100%);
+    }
+    .annotationLayer .textWidgetAnnotation :is(input, textarea):required,
+    .annotationLayer .choiceWidgetAnnotation select:required,
+    .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required {
+        outline: 1.5px solid selectedItem;
+    }
+
+    .annotationLayer .linkAnnotation:hover {
+        -webkit-backdrop-filter: var(--hcm-highligh-filter);
+        backdrop-filter: var(--hcm-highligh-filter);
+    }
+
+    .annotationLayer .linkAnnotation > a:hover {
+        opacity: 0 !important;
+        background: none !important;
+        box-shadow: none;
+    }
+
+    .annotationLayer .popupAnnotation .popup {
+        outline: calc(1.5px * var(--scale-factor)) solid CanvasText !important;
+        background-color: ButtonFace !important;
+        color: ButtonText !important;
+    }
+
+    .annotationLayer .highlightArea:hover::after {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        -webkit-backdrop-filter: var(--hcm-highligh-filter);
+        backdrop-filter: var(--hcm-highligh-filter);
+        content: '';
+        pointer-events: none;
+    }
+
+    .annotationLayer .popupAnnotation.focused .popup {
+        outline: calc(3px * var(--scale-factor)) solid Highlight !important;
+    }
+}
+
+.annotationLayer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    transform-origin: 0 0;
+    z-index: 3;
+}
+
+.annotationLayer[data-main-rotation='90'] .norotate {
+    transform: rotate(270deg) translateX(-100%);
+}
+.annotationLayer[data-main-rotation='180'] .norotate {
+    transform: rotate(180deg) translate(-100%, -100%);
+}
+.annotationLayer[data-main-rotation='270'] .norotate {
+    transform: rotate(90deg) translateY(-100%);
+}
+
+.annotationLayer canvas {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+}
+
+.annotationLayer section {
+    position: absolute;
+    text-align: initial;
+    pointer-events: auto;
+    box-sizing: border-box;
+    transform-origin: 0 0;
+}
+
+.annotationLayer .linkAnnotation {
+    outline: var(--link-outline);
+}
+
+.annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a {
+    position: absolute;
+    font-size: 1em;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton):not(.hasBorder) > a:hover {
+    /* opacity: 0.2;
+    background-color: rgba(255, 255, 0, 1);
+    box-shadow: 0 2px 10px rgba(255, 255, 0, 1); */
+}
+
+.annotationLayer .linkAnnotation.hasBorder:hover {
+    background-color: rgba(255, 255, 0, 0.2);
+}
+
+.annotationLayer .hasBorder {
+    background-size: 100% 100%;
+}
+
+.annotationLayer .textAnnotation img {
+    position: absolute;
+    cursor: pointer;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+}
+
+.annotationLayer .textWidgetAnnotation :is(input, textarea),
+.annotationLayer .choiceWidgetAnnotation select,
+.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
+    background-image: var(--annotation-unfocused-field-background);
+    border: 2px solid var(--input-unfocused-border-color);
+    box-sizing: border-box;
+    font: calc(9px * var(--scale-factor)) sans-serif;
+    height: 100%;
+    margin: 0;
+    vertical-align: top;
+    width: 100%;
+}
+
+.annotationLayer .textWidgetAnnotation :is(input, textarea):required,
+.annotationLayer .choiceWidgetAnnotation select:required,
+.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required {
+    outline: 1.5px solid red;
+}
+
+.annotationLayer .choiceWidgetAnnotation select option {
+    padding: 0;
+}
+
+.annotationLayer .buttonWidgetAnnotation.radioButton input {
+    border-radius: 50%;
+}
+
+.annotationLayer .textWidgetAnnotation textarea {
+    resize: none;
+}
+
+.annotationLayer .textWidgetAnnotation :is(input, textarea)[disabled],
+.annotationLayer .choiceWidgetAnnotation select[disabled],
+.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input[disabled] {
+    background: none;
+    border: 2px solid var(--input-disabled-border-color);
+    cursor: not-allowed;
+}
+
+.annotationLayer .textWidgetAnnotation :is(input, textarea):hover,
+.annotationLayer .choiceWidgetAnnotation select:hover,
+.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:hover {
+    border: 2px solid var(--input-hover-border-color);
+}
+.annotationLayer .textWidgetAnnotation :is(input, textarea):hover,
+.annotationLayer .choiceWidgetAnnotation select:hover,
+.annotationLayer .buttonWidgetAnnotation.checkBox input:hover {
+    border-radius: 2px;
+}
+
+.annotationLayer .textWidgetAnnotation :is(input, textarea):focus,
+.annotationLayer .choiceWidgetAnnotation select:focus {
+    background: none;
+    border: 2px solid var(--input-focus-border-color);
+    border-radius: 2px;
+    outline: var(--input-focus-outline);
+}
+
+.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) :focus {
+    background-image: none;
+    background-color: transparent;
+}
+
+.annotationLayer .buttonWidgetAnnotation.checkBox :focus {
+    border: 2px solid var(--input-focus-border-color);
+    border-radius: 2px;
+    outline: var(--input-focus-outline);
+}
+
+.annotationLayer .buttonWidgetAnnotation.radioButton :focus {
+    border: 2px solid var(--input-focus-border-color);
+    outline: var(--input-focus-outline);
+}
+
+.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,
+.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after,
+.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before {
+    background-color: CanvasText;
+    content: '';
+    display: block;
+    position: absolute;
+}
+
+.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,
+.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after {
+    height: 80%;
+    left: 45%;
+    width: 1px;
+}
+
+.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before {
+    transform: rotate(45deg);
+}
+
+.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after {
+    transform: rotate(-45deg);
+}
+
+.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before {
+    border-radius: 50%;
+    height: 50%;
+    left: 30%;
+    top: 20%;
+    width: 50%;
+}
+
+.annotationLayer .textWidgetAnnotation input.comb {
+    font-family: monospace;
+    padding-left: 2px;
+    padding-right: 0;
+}
+
+.annotationLayer .textWidgetAnnotation input.comb:focus {
+    /*
+* Letter spacing is placed on the right side of each character. Hence, the
+* letter spacing of the last character may be placed outside the visible
+* area, causing horizontal scrolling. We avoid this by extending the width
+* when the element has focus and revert this when it loses focus.
+*/
+    width: 103%;
+}
+
+.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+}
+
+.annotationLayer .fileAttachmentAnnotation .popupTriggerArea {
+    height: 100%;
+    width: 100%;
+}
+
+.annotationLayer .popupAnnotation {
+    position: absolute;
+    font-size: calc(9px * var(--scale-factor));
+    pointer-events: none;
+    width: -moz-max-content;
+    width: max-content;
+    max-width: 45%;
+    height: auto;
+}
+
+.annotationLayer .popup {
+    background-color: rgba(255, 255, 153, 1);
+    box-shadow: 0 calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor)) rgba(136, 136, 136, 1);
+    border-radius: calc(2px * var(--scale-factor));
+    outline: 1.5px solid rgb(255, 255, 74);
+    padding: calc(6px * var(--scale-factor));
+    cursor: pointer;
+    font: message-box;
+    white-space: normal;
+    word-wrap: break-word;
+    pointer-events: auto;
+}
+
+.annotationLayer .popupAnnotation.focused .popup {
+    outline-width: 3px;
+}
+
+.annotationLayer .popup * {
+    font-size: calc(9px * var(--scale-factor));
+}
+
+.annotationLayer .popup > .header {
+    display: inline-block;
+}
+
+.annotationLayer .popup > .header h1 {
+    display: inline;
+}
+
+.annotationLayer .popup > .header .popupDate {
+    display: inline-block;
+    margin-left: calc(5px * var(--scale-factor));
+    width: -moz-fit-content;
+    width: fit-content;
+}
+
+.annotationLayer .popupContent {
+    border-top: 1px solid rgba(51, 51, 51, 1);
+    margin-top: calc(2px * var(--scale-factor));
+    padding-top: calc(2px * var(--scale-factor));
+}
+
+.annotationLayer .richText > * {
+    white-space: pre-wrap;
+    font-size: calc(9px * var(--scale-factor));
+}
+
+.annotationLayer .popupTriggerArea {
+    cursor: pointer;
+}
+
+.annotationLayer section svg {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+}
+
+.annotationLayer .annotationTextContent {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    color: transparent !important;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+    pointer-events: none;
+}
+
+.annotationLayer .annotationTextContent span {
+    width: 100%;
+    display: inline-block;
+}
+
+.annotationLayer svg.quadrilateralsContainer {
+    contain: strict;
+    width: 0;
+    height: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+}
+
+/* print.js https://github.com/crabbly/Print.js/releases/tag/v1.5.0 */
+.printModal {
+    font-family: sans-serif;
+    display: flex;
+    text-align: center;
+    font-weight: 300;
+    font-size: 30px;
+    left: 0;
+    top: 0;
+    position: absolute;
+    color: #045fb4;
+    width: 100%;
+    height: 100%;
+    background-color: hsla(0, 0%, 100%, 0.9);
+}
+
+.printClose {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+}
+
+.printClose:before {
+    content: '\00D7';
+    font-family:
+        Helvetica Neue,
+        sans-serif;
+    font-weight: 100;
+    line-height: 1px;
+    padding-top: 0.5em;
+    display: block;
+    font-size: 2em;
+    text-indent: 1px;
+    overflow: hidden;
+    height: 1.25em;
+    width: 1.25em;
+    text-align: center;
+    cursor: pointer;
+}
+
+.printSpinner {
+    margin-top: 3px;
+    margin-left: -40px;
+    position: absolute;
+    display: inline-block;
+    width: 25px;
+    height: 25px;
+    border: 2px solid #045fb4;
+    border-radius: 50%;
+    animation: spin 0.75s linear infinite;
+}
+
+.printSpinner:after,
+.printSpinner:before {
+    left: -2px;
+    top: -2px;
+    display: none;
+    position: absolute;
+    content: '';
+    width: inherit;
+    height: inherit;
+    border: inherit;
+    border-radius: inherit;
+}
+
+.printSpinner,
+.printSpinner:after,
+.printSpinner:before {
+    display: inline-block;
+    border-color: #045fb4 transparent transparent;
+    animation-duration: 1.2s;
+}
+
+.printSpinner:before {
+    transform: rotate(120deg);
+}
+
+.printSpinner:after {
+    transform: rotate(240deg);
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(1turn);
+    }
+}

flipbook.scroll.js

@@ -0,0 +1,539 @@
+/*
+ * Real3D FlipBook [https://real3dflipbook.com]
+ * @author creativeinteractivemedia [https://codecanyon.net/user/creativeinteractivemedia/portfolio]
+ * @version 4.10
+ * @date 2025-05-15
+ */
+'use strict';
+var FLIPBOOK = FLIPBOOK || {};
+
+FLIPBOOK.BookScroll = function (el, wrapper, main, options) {
+    this.options = options;
+    this.main = main;
+    this.singlePage = options.singlePageMode;
+    if (this.singlePage) {
+        this.view = 1;
+    }
+    this.view = 1;
+
+    this.pageWidth = options.pageWidth;
+    this.pageHeight = options.pageHeight;
+    this.rightIndex = 0;
+
+    this.pageGap = 16;
+
+    this.slides = [];
+    this.pagesArr = [];
+    this.leftPage = 0;
+    this.rightPage = 0;
+    this.rotation = 0;
+
+    this.verticalScroller = el;
+
+    this.verticalScroller.style.width = this.pageWidth + 'px';
+
+    options.pageGap = this.pageGap;
+
+    for (let i = 0; i < options.numPages; i++) {
+        const page = new FLIPBOOK.PageScroll(this, wrapper, main, options, i);
+        this.verticalScroller.appendChild(page.wrapper);
+        page.initObserver();
+        this.pagesArr.push(page);
+    }
+
+    //make new div that has width equal to page width, height equal to page height * number of pages
+
+    this.prevPageEnabled = false;
+
+    this.setRightIndex(0);
+    this.currentSlide = 0;
+    this.flipping = false;
+
+    this.wrapper = wrapper;
+
+    this.verticalScroller.classList.remove('book');
+    this.verticalScroller.style.paddingTop = this.pageGap / 2 + 'px';
+    this.verticalScroller.style.paddingBottom = this.pageGap / 2 + 'px';
+    this.iscroll = new IScroll(this.wrapper, {
+        freeScroll: true,
+        mouseWheel: true,
+        scrollbars: true,
+        interactiveScrollbars: true,
+        zoom: true,
+        scrollX: true,
+        scrollY: true,
+        keepInCenterV: true,
+        keepInCenterH: true,
+        preventDefault: false,
+        zoomMin: 0.01,
+        zoomMax: 10,
+        mouseWheelTimeout: 100,
+        disablePointer: false,
+        disableTouch: false,
+        disableMouse: false,
+        momentum: true,
+    });
+
+    this.main.on('disableIScroll', () => {
+        this.disableIscroll();
+    });
+    this.main.on('enableIScroll', () => {
+        this.enableIscroll();
+    });
+
+    var self = this;
+
+    this.iscroll.on('scrollStart', function () {
+        self.scrolling = true;
+    });
+
+    this.iscroll.on('zoomEnd', function () {
+        self.updateRightIndex();
+    });
+
+    this.iscroll.on('scrollEnd', function () {
+        self.updateRightIndex();
+        self.scrolling = false;
+        self.pagesArr.forEach((page) => {
+            if (page.visibility > 0) {
+                page.load();
+            }
+        });
+    });
+
+    this.zoomDisabled = false;
+
+    main.on('pageLoaded', function (_) {});
+};
+
+FLIPBOOK.BookScroll.prototype = Object.create(FLIPBOOK.Book.prototype);
+
+FLIPBOOK.BookScroll.prototype.constructor = FLIPBOOK.BookScroll;
+
+FLIPBOOK.BookScroll.prototype.enableIscroll = function () {
+    if (this.iscrollDisabled) {
+        this.iscroll.enable();
+        this.iscrollDisabled = false;
+    }
+};
+
+FLIPBOOK.BookScroll.prototype.disableIscroll = function () {
+    if (!this.iscrollDisabled) {
+        this.iscroll.disable();
+        this.iscroll.initiated = false;
+        this.iscrollDisabled = true;
+    }
+};
+
+FLIPBOOK.BookScroll.prototype.goToPage = function (value, instant) {
+    if (!this.enabled) {
+        return;
+    }
+
+    if (value > this.options.pages.length) {
+        value = this.options.pages.length;
+    }
+
+    if (this.singlePage || value % 2 != 0) {
+        value--;
+    }
+
+    if (value == this.rightIndex) {
+        return;
+    }
+
+    this.enableIscroll();
+
+    if (isNaN(value) || value < 0) {
+        value = 0;
+    }
+
+    let y = -value * (this.pageHeight + this.pageGap) * this.iscroll.scale;
+
+    let maxY = -(this.iscroll.scrollerHeight - this.main.wrapperH);
+
+    y = Math.max(y, maxY);
+
+    var duration = instant ? 0 : 600;
+
+    this.iscroll.scrollTo(0, y, duration);
+
+    this.setRightIndex(value);
+    this.main.turnPageComplete();
+};
+
+FLIPBOOK.BookScroll.prototype.setRightIndex = function (value) {
+    if (value != this.rightIndex) {
+        this.rightIndex = value;
+        this.main.turnPageComplete();
+    }
+};
+
+FLIPBOOK.BookScroll.prototype.nextPage = function (instant) {
+    this.goToPage(this.rightIndex + 2, instant);
+};
+
+FLIPBOOK.BookScroll.prototype.prevPage = function (instant) {
+    this.goToPage(this.rightIndex, instant);
+};
+
+FLIPBOOK.BookScroll.prototype.enablePrev = function (val) {
+    this.prevEnabled = val;
+};
+
+FLIPBOOK.BookScroll.prototype.enableNext = function (val) {
+    this.nextEnabled = val;
+};
+
+FLIPBOOK.BookScroll.prototype.isFocusedRight = function () {
+    return this.rightIndex % 2 == 0;
+};
+
+FLIPBOOK.BookScroll.prototype.isFocusedLeft = function () {
+    return this.rightIndex % 2 == 1;
+};
+
+FLIPBOOK.BookScroll.prototype.updateVisiblePages = function () {};
+
+FLIPBOOK.BookScroll.prototype.disable = function () {
+    this.enabled = false;
+};
+
+FLIPBOOK.BookScroll.prototype.enable = function () {
+    this.enabled = true;
+    this.onResize();
+};
+
+FLIPBOOK.BookScroll.prototype.resize = function () {};
+
+FLIPBOOK.BookScroll.prototype.onResize = function () {
+    var w = this.main.wrapperW;
+    var h = this.main.wrapperH;
+
+    if (w == 0 || h == 0 || (this.w === w && this.h === h)) {
+        return;
+    }
+
+    this.w = w;
+    this.h = h;
+
+    if (this.zoom) {
+        this.iscroll.refresh();
+        this.fit();
+        this.iscroll.scrollTo(0, this.iscroll.y, 0);
+    }
+    this.updateRightIndex();
+};
+
+FLIPBOOK.BookScroll.prototype.updateRightIndex = function () {
+    let maxVisibility = 0;
+    let currentIndex = 0;
+    this.pagesArr.forEach((page) => {
+        if (page.visibility > maxVisibility) {
+            maxVisibility = page.visibility;
+            currentIndex = page.index;
+        }
+    });
+    this.setRightIndex(currentIndex);
+};
+
+FLIPBOOK.BookScroll.prototype.zoomIn = function (value, time, e) {
+    if (e && e.type === 'mousewheel') {
+        return;
+    }
+    this.zoomTo(value);
+};
+
+FLIPBOOK.BookScroll.prototype.fitToHeight = function () {
+    this.iscroll.zoom((this.zoom * this.main.wrapperH) / this.pageHeight, 0, 0, 0);
+};
+
+FLIPBOOK.BookScroll.prototype.fitToWidth = function () {
+    this.iscroll.zoom((this.zoom * this.main.wrapperW) / this.pageWidth, 0, 0, 0);
+};
+
+FLIPBOOK.BookScroll.prototype.fit = function () {
+    if (this.options.fitToWidth) {
+        this.fitToWidth();
+    } else if (this.main.wrapperW / this.main.wrapperH < this.pageWidth / this.pageHeight) {
+        this.fitToWidth();
+    } else {
+        this.fitToHeight();
+    }
+};
+
+FLIPBOOK.BookScroll.prototype.zoomTo = function (zoom, time, x, y) {
+    if (!this.enabled || this.zoomDisabled) {
+        return;
+    }
+    var m = this.main;
+    var w = m.wrapperW;
+    var h = m.wrapperH;
+
+    if (w == 0 || h == 0) {
+        return;
+    }
+
+    this.zoom = zoom;
+    this.fit();
+
+    if (zoom > 1) {
+        this.disableFlip();
+    }
+
+    this.onZoom(zoom);
+};
+
+FLIPBOOK.BookScroll.prototype.zoomOut = function (value) {
+    this.zoomTo(value);
+};
+
+FLIPBOOK.BookScroll.prototype.onZoom = function (zoom) {
+    this.options.main.onZoom(zoom);
+};
+
+FLIPBOOK.BookScroll.prototype.enable = function () {
+    this.enabled = true;
+};
+
+FLIPBOOK.BookScroll.prototype.disable = function () {
+    this.enabled = false;
+};
+
+FLIPBOOK.BookScroll.prototype.onSwipe = function (event, phase, direction) {
+    if (phase == 'start') {
+        return;
+    }
+    if (phase == 'end' || phase == 'cancel') {
+        return;
+    }
+    if (direction == 'up' || direction == 'down') {
+        return;
+    }
+};
+
+FLIPBOOK.BookScroll.prototype.disableFlip = function () {};
+
+FLIPBOOK.BookScroll.prototype.enableFlip = function () {};
+
+FLIPBOOK.BookScroll.prototype.enablePan = function () {};
+
+FLIPBOOK.BookScroll.prototype.disablePan = function () {};
+
+FLIPBOOK.BookScroll.prototype.canFlipNext = function () {
+    return this.rightIndex + 1 < this.options.numPages;
+};
+
+FLIPBOOK.PageScroll = function (book, bookWrapper, main, options, index, texture, html) {
+    this.rotation = 0;
+    this.bookWrapper = bookWrapper;
+    this.index = index;
+    this.options = options;
+    this.texture = texture;
+    this.html = html;
+    this.index = index;
+    this.wrapper = document.createElement('div');
+    this.wrapper.className = 'flipbook-scroll-page';
+    this.wrapper.style.marginBottom = this.options.pageGap + 'px';
+    this.main = main;
+    this.book = book;
+
+    this.inner = document.createElement('div');
+    this.inner.className = 'flipbook-scroll-page-inner';
+    this.wrapper.appendChild(this.inner);
+
+    this.bg = document.createElement('div');
+    this.bg.className = 'flipbook-scroll-page-bg';
+    this.inner.appendChild(this.bg);
+
+    this.html = document.createElement('div');
+    this.html.className = 'flipbook-page3-html';
+    this.wrapper.appendChild(this.html);
+    this.html.style.width = (1000 * this.options.pageWidth) / this.options.pageHeight + 'px';
+    this.html.style.transform = 'scale(' + this.options.pageHeight / 1000 + ') translateZ(0)';
+
+    if (this.options.doublePage) {
+        if (this.index % 2 == 0 && this.index > 0) {
+            this.html.style.left = '-100%';
+        } else {
+            this.html.style.left = '0';
+        }
+    }
+
+    this.preloader = document.createElement('img');
+
+    if (options.pagePreloader) {
+        this.preloader.src = options.pagePreloader;
+        this.preloader.className = 'flipbook-page-preloader-image';
+    } else {
+        this.preloader.src = options.assets.spinner;
+        this.preloader.className = 'flipbook-page-preloader';
+    }
+
+    this.inner.appendChild(this.preloader);
+
+    this.setSize(this.pw, this.ph);
+};
+
+FLIPBOOK.PageScroll.prototype = {
+    initObserver: function () {
+        const observer = new IntersectionObserver(
+            (entries) => {
+                const entry = entries[0];
+                const visibility = entry.intersectionRatio;
+
+                if (visibility > 0) {
+                    this.show(visibility);
+                } else {
+                    this.hide();
+                }
+            },
+            { root: this.bookWrapper, threshold: [0, 0.1, 0.5] }
+        );
+        observer.observe(this.wrapper);
+    },
+
+    show: function (visibility) {
+        this.visibility = visibility;
+        if (!this.book.scrolling) {
+            this.load();
+        }
+        if (!this.isVisible) {
+            this.bg.style.display = 'block';
+            this.html.style.display = 'block';
+            this.isVisible = true;
+        }
+    },
+
+    load: function (callback, thumb) {
+        if (this.loaded) {
+            return;
+        }
+        if (this.visibility == 0) {
+            return;
+        }
+        this.loaded = true;
+        var size = this.options.pageTextureSize;
+
+        if (this.size >= size) {
+            if (!thumb) {
+                this.loadHTML();
+            }
+            if (callback) {
+                callback.call(this);
+            }
+            return;
+        }
+
+        this.size = size;
+
+        var self = this;
+
+        var index = this.options.rightToLeft ? this.options.numPages - this.index - 1 : this.index;
+
+        this.options.main.loadPage(index, size, function (page) {
+            page = page || {};
+
+            if (page && page.image) {
+                var img = page.image[size] || page.image;
+                img.classList.add('page-scroll-img');
+
+                if (
+                    self.index % 2 == 0 &&
+                    (self.options.pages[index].side == 'left' || self.options.pages[index].side == 'right')
+                ) {
+                    if (!img.clone) {
+                        img.clone = new Image();
+                        img.clone.src = img.src;
+                    }
+                    img = img.clone;
+                }
+
+                self.bg.appendChild(img);
+
+                if (self.options.doublePage && self.index > 0 && self.index % 2 == 0) {
+                    img.style.left = '-100%';
+                }
+
+                if (self.options.doublePage) {
+                    if (self.index == 0 || (self.index == self.options.pages.length - 1 && self.options.backCover)) {
+                        img.style.width = '100%';
+                    } else {
+                        img.style.width = '200%';
+                    }
+                } else {
+                    img.style.width = '100%';
+                }
+
+                self.inner.removeChild(self.preloader);
+            }
+
+            if (!thumb) {
+                self.loadHTML();
+            }
+
+            if (callback) {
+                callback.call(self);
+            }
+        });
+    },
+
+    hide: function () {
+        this.visibility = 0;
+        if (this.isVisible) {
+            this.bg.style.display = 'none';
+            this.html.style.display = 'none';
+            this.isVisible = false;
+            this.pauseHTML();
+        }
+    },
+
+    pauseHTML: function () {
+        var mediaElements = this.html.querySelectorAll('video, audio');
+        mediaElements.forEach(function (media) {
+            media.pause();
+        });
+    },
+
+    loadHTML: function () {
+        var self = this;
+
+        var index = this.options.rightToLeft ? this.options.numPages - this.index - 1 : this.index;
+
+        if (this.htmlContent) {
+            this.updateHtmlContent();
+        } else {
+            this.options.main.loadPageHTML(index, function (html) {
+                self.htmlContent = html;
+                self.updateHtmlContent();
+            });
+        }
+    },
+
+    setSize: function () {
+        this.wrapper.style.width = this.options.pageWidth + 'px';
+        this.wrapper.style.height = this.options.pageHeight + 'px';
+        this.updateHtmlContent();
+    },
+
+    updateHtmlContent: function () {
+        var c = this.htmlContent;
+
+        if (c && !this.htmlContentVisible) {
+            if (c.jquery) {
+                c = c[0];
+            }
+            this.htmlContentVisible = true;
+
+            this.html.replaceChildren();
+            this.html.appendChild(c);
+            this.startHTML();
+            this.main.trigger('showpagehtml', { page: this });
+        }
+        this.startHTML();
+    },
+
+    startHTML: function () {
+        this.book.startPageItems(this.wrapper);
+    },
+};

flipbook.swipe.js

@@ -0,0 +1,1294 @@
+/*
+ * Real3D FlipBook [https://real3dflipbook.com]
+ * @author creativeinteractivemedia [https://codecanyon.net/user/creativeinteractivemedia/portfolio]
+ * @version 4.10
+ * @date 2025-05-15
+ */
+'use strict';
+var FLIPBOOK = FLIPBOOK || {};
+
+FLIPBOOK.BookSwipe = function (el, wrapper, main, options) {
+    this.options = options;
+    this.main = main;
+    this.singlePage = options.singlePageMode;
+    if (this.singlePage) {
+        this.view = 1;
+    }
+    this.pageWidth = this.options.pageWidth;
+    this.pageHeight = this.options.pageHeight;
+    this.slides = [];
+    this.pagesArr = [];
+    this.leftPage = 0;
+    this.rightPage = 0;
+    this.rotation = 0;
+
+    this.prevPageEnabled = false;
+
+    this.setRightIndex(options.rightToLeft ? options.pages.length : 0);
+    this.currentSlide = 0;
+    this.flipping = false;
+
+    this.wrapper = wrapper;
+
+    this.scroller = el;
+    this.scroller.classList.remove('book');
+    this.scroller.classList.add('flipbook-carousel-scroller');
+
+    this.iscroll = new IScroll(this.wrapper, {
+        snap: true,
+        snapSpeed: 200 * this.options.pageFlipDuration,
+        freeScroll: true,
+        scrollX: true,
+        scrollY: false,
+        preventDefault: false,
+        eventPassthrough: 'vertical',
+    });
+
+    var self = this;
+
+    this.zoomDisabled = false;
+
+    this.iscroll.on('scrollStart', function () {
+        self.zoomDisabled = true;
+    });
+
+    this.iscroll.on('scrollEnd', function () {
+        self.zoomDisabled = false;
+    });
+
+    for (var i = 0; i < 3; i++) {
+        var slide = document.createElement('div');
+        slide.className = 'flipbook-carousel-slide';
+
+        var slideInner = document.createElement('div');
+        slideInner.className = 'slide-inner';
+
+        slide.appendChild(slideInner);
+        this.scroller.appendChild(slide);
+
+        this.slides.push(slide);
+    }
+
+    this.slides[0].iscroll = new IScroll(this.slides[0], {
+        zoom: true,
+        scrollX: true,
+        scrollY: true,
+        freeScroll: true,
+        keepInCenterV: true,
+        keepInCenterH: true,
+        preventDefault: false,
+    });
+
+    this.slides[2].iscroll = new IScroll(this.slides[2], {
+        zoom: true,
+        scrollX: true,
+        scrollY: true,
+        freeScroll: true,
+        keepInCenterV: true,
+        keepInCenterH: true,
+        preventDefault: false,
+    });
+
+    this.slides[1].iscroll = new IScroll(this.slides[1], {
+        zoom: true,
+        scrollX: true,
+        scrollY: true,
+        freeScroll: true,
+        keepInCenterV: true,
+        keepInCenterH: true,
+        preventDefault: false,
+    });
+
+    // eslint-disable-next-line no-redeclare
+    for (var i = 0; i < 3; i++) {
+        this.slides[i].iscroll.on('zoomEnd', function () {
+            var scale = options.main.zoom;
+            this.options.eventPassthrough = scale > 1 ? '' : 'vertical';
+            this.options.freeScroll = scale > 1;
+            this.refresh();
+        });
+    }
+
+    this.resizeInnerSlides();
+
+    var page;
+
+    options.pages.forEach((page, index) => {
+        if (!page.empty) {
+            const newPage = new FLIPBOOK.PageSwipe(this, index, page.src, page.htmlContent);
+            this.pagesArr.push(newPage);
+            if (options.loadAllPages) {
+                newPage.load();
+            }
+        }
+    });
+
+    if (!options.cover) {
+        page = new FLIPBOOK.PageSwipe(this, options.numPages);
+        this.pagesArr.push(page);
+    }
+
+    this.iscroll.on('scrollStart', function () {
+        if (this.distX < 0) {
+            self.loadNextSpread();
+        } else {
+            self.loadPrevSpread();
+        }
+    });
+
+    this.iscroll.on('scrollEnd', function () {
+        var sliderPage = this.currentPage.pageX;
+
+        if (self.currentSlide == sliderPage) {
+            return;
+        }
+
+        if (self.singlePage) {
+            if (sliderPage > self.currentSlide) {
+                self.setRightIndex(self.rightIndex + 1);
+            } else if (sliderPage < self.currentSlide) {
+                self.setRightIndex(self.rightIndex - 1);
+            }
+        } else {
+            if (sliderPage > self.currentSlide) {
+                self.setRightIndex(self.rightIndex + 2);
+            } else if (sliderPage < self.currentSlide) {
+                self.setRightIndex(self.rightIndex - 2);
+            }
+        }
+
+        self.currentSlide = sliderPage;
+
+        self.updateVisiblePages();
+
+        self.flipping = false;
+    });
+
+    this.flipEnabled = true;
+    this.nextEnabled = true;
+    this.prevEnabled = true;
+
+    main.on('enableIScroll', () => {
+        this.enableIscroll();
+    });
+
+    main.on('disableIScroll', () => {
+        this.disableIscroll();
+    });
+
+    main.on('pageLoaded', function (_) {});
+};
+
+FLIPBOOK.BookSwipe.prototype = Object.create(FLIPBOOK.Book.prototype);
+
+FLIPBOOK.BookSwipe.prototype.constructor = FLIPBOOK.BookSwipe;
+
+FLIPBOOK.BookSwipe.prototype.enableIscroll = function () {
+    if (this.iscrollDisabled) {
+        if (this.zoom > 1) {
+            if (this.slides[0].iscroll) {
+                this.slides[0].iscroll.enable();
+            }
+            if (this.slides[1].iscroll) {
+                this.slides[1].iscroll.enable();
+            }
+            if (this.slides[2].iscroll) {
+                this.slides[2].iscroll.enable();
+            }
+        } else {
+            this.iscroll.enable();
+        }
+
+        this.iscrollDisabled = false;
+    }
+};
+
+FLIPBOOK.BookSwipe.prototype.disableIscroll = function () {
+    if (!this.iscrollDisabled) {
+        if (this.zoom > 1) {
+            if (this.slides[0].iscroll) {
+                this.slides[0].iscroll.disable();
+                this.slides[0].iscroll.initiated = false;
+            }
+            if (this.slides[1].iscroll) {
+                this.slides[1].iscroll.disable();
+                this.slides[1].iscroll.initiated = false;
+            }
+            if (this.slides[2].iscroll) {
+                this.slides[2].iscroll.disable();
+                this.slides[2].iscroll.initiated = false;
+            }
+        } else {
+            this.iscroll.disable();
+            this.iscroll.initiated = false;
+        }
+
+        this.iscrollDisabled = true;
+    }
+};
+
+FLIPBOOK.BookSwipe.prototype.goToPage = function (value, instant) {
+    if (!this.enabled) {
+        return;
+    }
+
+    if (!this.flipEnabled) {
+        return;
+    }
+
+    if (value > this.options.pages.length) {
+        value = this.options.pages.length;
+    }
+
+    if (this.singlePage || value % 2 != 0) {
+        value--;
+    }
+
+    if (isNaN(value) || value < 0) {
+        value = 0;
+    }
+
+    if (instant) {
+        this.setRightIndex(value);
+        this.updateVisiblePages();
+        return;
+    }
+
+    if (this.singlePage) {
+        if (value > this.rightIndex) {
+            this.setSlidePages(this.currentSlide + 1, [value]);
+            this.setRightIndex(value - 1);
+            this.nextPage(instant);
+        } else if (value < this.rightIndex) {
+            this.setSlidePages(this.currentSlide - 1, [value]);
+            this.setRightIndex(value + 1);
+            this.prevPage(instant);
+        }
+    } else {
+        if (this.options.rightToLeft && !this.options.backCover && value < 2) {
+            value = 2;
+        }
+
+        if (value > this.rightIndex) {
+            if (value >= this.pagesArr.length) {
+                this.setSlidePages(2, [value - 1, value]);
+                this.setRightIndex(value - 2);
+                this.goToSlide(2, instant);
+            } else {
+                this.setSlidePages(this.currentSlide + 1, [value - 1, value]);
+                this.setRightIndex(value - 2);
+                this.nextPage(instant);
+            }
+        } else if (value < this.rightIndex) {
+            if (value == 0) {
+                this.setRightIndex(value + 2);
+                this.setSlidePages(0, [value]);
+                this.goToSlide(0, instant);
+            } else {
+                this.setRightIndex(value + 2);
+                this.setSlidePages(this.currentSlide - 1, [value - 1, value]);
+                this.prevPage(instant);
+            }
+        }
+    }
+};
+
+FLIPBOOK.BookSwipe.prototype.setRightIndex = function (value) {
+    this.rightIndex = value;
+};
+
+FLIPBOOK.BookSwipe.prototype.nextPage = function (instant) {
+    if (this.currentSlide == 2) {
+        return;
+    }
+
+    this.flipping = true;
+
+    this.goToSlide(this.currentSlide + 1, instant);
+
+    this.loadNextSpread();
+};
+
+FLIPBOOK.BookSwipe.prototype.prevPage = function (instant) {
+    if (this.currentSlide == 0) {
+        return;
+    }
+
+    this.flipping = true;
+
+    this.goToSlide(this.currentSlide - 1, instant);
+
+    this.loadPrevSpread();
+};
+
+FLIPBOOK.BookSwipe.prototype.enablePrev = function (val) {
+    this.prevEnabled = val;
+};
+
+FLIPBOOK.BookSwipe.prototype.enableNext = function (val) {
+    this.nextEnabled = val;
+};
+
+FLIPBOOK.BookSwipe.prototype.setSlidePages = function (slide, pages) {
+    var self = this;
+    var arr = [];
+    for (var i = 0; i < pages.length; i++) {
+        if (pages[i]) {
+            arr.push(pages[i].index);
+        }
+    }
+
+    if (this.slides[slide].pages && this.slides[slide].pages.length > 0) {
+        if (arr.join('') === this.slides[slide].pages.join('')) {
+            return;
+        }
+    }
+
+    this.clearSlidePages(slide);
+
+    var slideInner = this.slides[slide].firstChild;
+
+    pages.forEach((page) => {
+        let pageIndex;
+
+        if (typeof page === 'number') {
+            pageIndex = page;
+        } else {
+            pageIndex = page.index;
+        }
+
+        if (self.pagesArr[pageIndex]) {
+            slideInner.appendChild(self.pagesArr[pageIndex].wrapper);
+            self.slides[slide].pages.push(pageIndex);
+        }
+    });
+
+    this.resizeInnerSlides();
+
+    if (this.slides[slide].iscroll) {
+        this.slides[slide].iscroll.refresh();
+    }
+};
+
+FLIPBOOK.BookSwipe.prototype.clearSlidePages = function (slide) {
+    this.slides[slide].firstChild.innerHTML = '';
+    this.slides[slide].pages = [];
+};
+
+FLIPBOOK.BookSwipe.prototype.loadNextSpread = function () {
+    var index = this.rightIndex;
+
+    if (this.options.rightToLeft && !this.options.backCover) {
+        index--;
+    }
+
+    var next = this.pagesArr[index + 1];
+    if (next) {
+        next.load();
+    }
+    if (!this.singlePage) {
+        var afterNext = this.pagesArr[index + 2];
+        if (afterNext) {
+            afterNext.load();
+        }
+    }
+};
+
+FLIPBOOK.BookSwipe.prototype.loadPrevSpread = function () {
+    var index = this.rightIndex;
+    var prev;
+
+    if (this.options.rightToLeft && !this.options.backCover) {
+        index--;
+    }
+
+    if (this.singlePage) {
+        prev = this.pagesArr[index - 1];
+        if (prev) {
+            prev.load();
+        }
+    } else {
+        prev = this.pagesArr[index - 2];
+        if (prev) {
+            prev.load();
+        }
+        var beforePrev = this.pagesArr[index - 3];
+        if (beforePrev) {
+            beforePrev.load();
+        }
+    }
+};
+
+FLIPBOOK.BookSwipe.prototype.loadVisiblePages = function () {
+    var main = this.options.main;
+    var index = this.rightIndex;
+
+    if (this.options.rightToLeft && !this.options.backCover && !this.singlePage) {
+        index--;
+    }
+
+    var right = this.pagesArr[index];
+    var left = this.pagesArr[index - 1];
+    var next = this.pagesArr[index + 1];
+    var afterNext = this.pagesArr[index + 2];
+    var prev = this.pagesArr[index - 2];
+    var beforePrev = this.pagesArr[index - 3];
+
+    if (this.singlePage) {
+        if (right) {
+            right.load(function () {
+                main.setLoadingProgress(1);
+                if (left) {
+                    left.load(null, true);
+                }
+                if (next) {
+                    next.load(null, true);
+                }
+            });
+        } else if (left) {
+            left.load();
+        }
+    } else {
+        if (left) {
+            left.load(function () {
+                if (right) {
+                    right.load(function () {
+                        main.setLoadingProgress(1);
+                        if (prev) {
+                            prev.load(null, true);
+                        }
+                        if (beforePrev) {
+                            beforePrev.load(null, true);
+                        }
+                        if (next) {
+                            next.load(null, true);
+                        }
+                        if (afterNext) {
+                            afterNext.load(null, true);
+                        }
+                    });
+                } else {
+                    main.setLoadingProgress(1);
+                    if (prev) {
+                        prev.load(null, true);
+                    }
+
+                    if (beforePrev) {
+                        beforePrev.load(null, true);
+                    }
+                }
+            });
+        } else {
+            if (right) {
+                right.load(function () {
+                    main.setLoadingProgress(1);
+                    if (next) {
+                        next.load(null, true);
+                    }
+                    if (afterNext) {
+                        afterNext.load(null, true);
+                    }
+                });
+            }
+        }
+    }
+};
+
+FLIPBOOK.BookSwipe.prototype.updateVisiblePages = function () {
+    if (this.visiblePagesRightIndex === this.rightIndex) {
+        return;
+    }
+
+    this.visiblePagesRightIndex = this.rightIndex;
+
+    var index = this.rightIndex;
+
+    if (this.options.rightToLeft && !this.options.backCover && !this.singlePage) {
+        index--;
+    }
+
+    var right = this.pagesArr[index];
+    var left = this.pagesArr[index - 1];
+    var next = this.pagesArr[index + 1];
+    var afterNext = this.pagesArr[index + 2];
+    var prev = this.pagesArr[index - 2];
+    var beforePrev = this.pagesArr[index - 3];
+
+    if (next) {
+        next.hideHTML();
+    }
+    if (afterNext) {
+        afterNext.hideHTML();
+    }
+    if (prev) {
+        prev.hideHTML();
+    }
+    if (beforePrev) {
+        beforePrev.hideHTML();
+    }
+
+    if (this.singlePage) {
+        if (right) {
+            right.startHTML();
+        }
+
+        if (!left) {
+            //cover
+            this.setSlidePages(0, [right]);
+
+            if (next) {
+                this.setSlidePages(1, [next]);
+            } else {
+                this.clearSlidePages(1);
+            }
+            this.goToSlide(0, true);
+
+            this.clearSlidePages(2);
+        } else {
+            if (next) {
+                this.setSlidePages(1, [right]);
+                if (left) {
+                    this.setSlidePages(0, [left]);
+                }
+                this.setSlidePages(2, [next]);
+                this.goToSlide(1, true);
+            } else {
+                if (right) {
+                    this.setSlidePages(2, [right]);
+                }
+                if (left) {
+                    this.setSlidePages(1, [left]);
+                }
+                this.goToSlide(2, true);
+
+                this.clearSlidePages(0);
+            }
+        }
+
+        if (left) {
+            left.hideHTML();
+        }
+    } else {
+        if (!left) {
+            if (right) {
+                right.startHTML();
+            }
+            //cover
+            this.setSlidePages(0, [right]);
+
+            if (afterNext) {
+                this.setSlidePages(1, [next, afterNext]);
+            } else {
+                this.setSlidePages(1, [next]);
+            }
+
+            this.goToSlide(0, true);
+
+            this.clearSlidePages(2);
+        } else {
+            left.startHTML();
+
+            if (right) {
+                right.startHTML();
+
+                //L R
+
+                if (!next) {
+                    this.setSlidePages(2, [left, right]);
+
+                    if (beforePrev) {
+                        this.setSlidePages(1, [beforePrev, prev]);
+                    } else {
+                        this.setSlidePages(1, [prev]);
+                    }
+
+                    this.goToSlide(2, true);
+
+                    this.clearSlidePages(0);
+                } else {
+                    if (prev && !(this.rightIndex == 2 && !this.options.cover)) {
+                        this.setSlidePages(1, [left, right]);
+
+                        if (beforePrev) {
+                            this.setSlidePages(0, [beforePrev, prev]);
+                        } else {
+                            this.setSlidePages(0, [prev]);
+                        }
+
+                        if (afterNext) {
+                            this.setSlidePages(2, [next, afterNext]);
+                        } else {
+                            this.setSlidePages(2, [next]);
+                        }
+
+                        this.goToSlide(1, true);
+                    } else {
+                        this.setSlidePages(0, [left, right]);
+
+                        if (afterNext) {
+                            this.setSlidePages(1, [next, afterNext]);
+                        } else {
+                            this.setSlidePages(1, [next]);
+                        }
+
+                        this.clearSlidePages(2);
+                    }
+                }
+            } else {
+                this.setSlidePages(2, [left]);
+
+                if (beforePrev) {
+                    this.setSlidePages(1, [beforePrev, prev]);
+                } else {
+                    this.setSlidePages(1, [prev]);
+                }
+
+                this.goToSlide(2, true);
+                this.clearSlidePages(0);
+            }
+        }
+    }
+
+    this.loadVisiblePages();
+
+    this.flippedleft = (this.rightIndex + (this.rightIndex % 2)) / 2;
+    this.flippedright = this.options.pages.length / 2 - this.flippedleft;
+
+    this.options.main.turnPageComplete();
+};
+
+FLIPBOOK.BookSwipe.prototype.loadPage = function (index) {
+    if (this.pagesArr[index]) {
+        this.pagesArr[index].load();
+    }
+};
+
+FLIPBOOK.BookSwipe.prototype.disable = function () {
+    this.enabled = false;
+};
+
+FLIPBOOK.BookSwipe.prototype.enable = function () {
+    this.enabled = true;
+    this.onResize();
+};
+
+FLIPBOOK.BookSwipe.prototype.resize = function () {};
+
+FLIPBOOK.BookSwipe.prototype.updateSinglePage = function (singlePage) {
+    this.singlePageView = singlePage;
+    this.onResize(true);
+};
+
+FLIPBOOK.BookSwipe.prototype.onResize = function (force) {
+    var w = this.main.wrapperW;
+    var h = this.main.wrapperH;
+
+    if (w == 0 || h == 0) {
+        return;
+    }
+
+    if (!force && this.w === w && this.h === h) {
+        return;
+    }
+
+    this.w = w;
+    this.h = h;
+
+    var pw = this.pageWidth;
+    var ph = this.pageHeight;
+
+    var portrait = (2 * this.options.zoomMin * pw) / ph > w / h;
+    var doublePage =
+        !this.options.singlePageMode &&
+        (!this.options.responsiveView ||
+            w > this.options.responsiveViewTreshold ||
+            !portrait ||
+            w / h >= this.options.responsiveViewRatio);
+
+    if (typeof this.singlePageView != 'undefined') {
+        doublePage = !this.singlePageView;
+    }
+
+    var bw = doublePage ? 2 * pw : pw;
+    var bh = ph;
+    this.bw = bw;
+    this.bh = bh;
+
+    var scale;
+    if (h / w > bh / bw) {
+        //fit to width
+        scale = ((bh / bw) * w) / this.options.pageHeight;
+    } else {
+        scale = h / this.options.pageHeight;
+    }
+
+    var spaceBetweenSlides = 0;
+
+    for (var i = 0; i < this.slides.length; i++) {
+        this.slides[i].style.width = w + spaceBetweenSlides + 'px';
+        this.slides[i].style.height = h + 'px';
+        this.slides[i].style.left = i * w + i * spaceBetweenSlides + 'px';
+
+        if (this.slides[i].iscroll) {
+            this.slides[i].iscroll.options.zoomMin = this.options.zoomMin * scale;
+            this.slides[i].iscroll.options.zoomMax = this.options.zoomMax * scale;
+            this.slides[i].iscroll.refresh();
+        }
+    }
+
+    this.scroller.style.width = this.slides.length * (w + spaceBetweenSlides) + 'px';
+    this.iscroll.refresh();
+
+    if ((!doublePage || this.options.singlePageMode) && !this.singlePage) {
+        if (this.rightIndex % 2 == 0 && this.rightIndex > 0) {
+            this.setRightIndex(this.rightIndex - 1);
+        }
+
+        this.singlePage = true;
+        this.view = 1;
+
+        this.resizeInnerSlides();
+    } else if (doublePage && !this.options.singlePageMode && this.singlePage) {
+        if (this.rightIndex % 2 != 0) {
+            this.setRightIndex(this.rightIndex + 1);
+        }
+
+        this.singlePage = false;
+        this.view = 2;
+
+        this.resizeInnerSlides();
+    }
+
+    this.zoomTo(this.zoom);
+
+    // this.updateVisiblePages();
+};
+
+FLIPBOOK.BookSwipe.prototype.isFocusedRight = function () {
+    return this.rightIndex % 2 == 0;
+};
+
+FLIPBOOK.BookSwipe.prototype.isFocusedLeft = function () {
+    return this.rightIndex % 2 == 1;
+};
+
+FLIPBOOK.BookSwipe.prototype.resizeInnerSlides = function () {
+    var pw = (this.options.pageHeight * this.pageWidth) / this.pageHeight;
+
+    if (this.rotation == 90 || this.rotation == 270) {
+        pw = (this.options.pageHeight * this.pageHeight) / this.pageWidth;
+    }
+
+    var sw = this.singlePage ? pw : 2 * pw;
+
+    for (var i = 0; i < 3; i++) {
+        sw = this.slides[i].pages && this.slides[i].pages.length == 1 ? pw : 2 * pw;
+        this.slides[i].firstChild.style.width = `${sw}px`;
+    }
+};
+
+FLIPBOOK.BookSwipe.prototype.goToSlide = function (slideIndex, instant) {
+    if (this.iscroll.currentPage.pageX == slideIndex) {
+        return;
+    }
+
+    this.onResize();
+
+    var time = instant ? 0 : 600 * this.options.pageFlipDuration;
+    var slide = this.slides[slideIndex];
+
+    if (slide.pages && slide.pages[0]) {
+        this.pagesArr[slide.pages[0]].updateHtmlContent();
+    }
+
+    if (this.iscroll.pages.length > 0) {
+        this.iscroll.goToPage(slideIndex, 0, time);
+    }
+
+    if (instant) {
+        this.currentSlide = slideIndex;
+    }
+
+    this.zoomTo(this.options.zoomMin);
+};
+
+FLIPBOOK.BookSwipe.prototype.zoomIn = function (value, time, e) {
+    if (e && e.type === 'mousewheel') {
+        return;
+    }
+    this.zoomTo(value);
+};
+
+FLIPBOOK.BookSwipe.prototype.zoomTo = function (zoom, time, x, y) {
+    if (!this.enabled || this.zoomDisabled) {
+        return;
+    }
+
+    x = x || 0;
+    y = y || 0;
+
+    if (zoom > 1) {
+        this.disableFlip();
+    }
+
+    if (w == 0 || h == 0) {
+        return;
+    }
+
+    var m = this.main;
+    var w = m.wrapperW;
+    var h = m.wrapperH;
+    var bw = m.bookW;
+    var bh = m.bookH;
+    var pw = m.pageW;
+    var ph = m.pageH;
+    var r1 = w / h;
+    var r2 = pw / ph;
+
+    var s = Math.min(this.zoom, 1);
+
+    var zoomMin = Number(this.options.zoomMin);
+
+    var self = this;
+
+    function fitToHeight() {
+        self.ratio = h / bh;
+        fit();
+    }
+
+    function fitToWidth() {
+        self.ratio = self.view == 1 ? w / pw : w / bw;
+        fit();
+    }
+
+    function fit() {
+        for (var i = 0; i < 3; i++) {
+            if (self.slides[i].iscroll) {
+                self.slides[i].iscroll.options.zoomMin = self.ratio * self.options.zoomMin;
+                self.slides[i].iscroll.options.zoomMax = self.ratio * self.options.zoomMax;
+                self.slides[i].iscroll.zoom(self.ratio * zoom, x, y, 0);
+            }
+        }
+    }
+
+    if (
+        !this.options.singlePageMode &&
+        this.options.responsiveView &&
+        w <= this.options.responsiveViewTreshold &&
+        r1 < 2 * r2 &&
+        r1 < this.options.responsiveViewRatio
+    ) {
+        this.view = 1;
+
+        if (r2 > r1) {
+            this.sc = (zoomMin * r1) / (r2 * s);
+        } else {
+            this.sc = 1;
+        }
+
+        if (w / h > pw / ph) {
+            fitToHeight();
+        } else {
+            fitToWidth();
+        }
+    } else if (this.singlePage && r1 < 2 * r2) {
+        if (r2 > r1) {
+            this.sc = (zoomMin * r1) / (r2 * s);
+        } else {
+            this.sc = 1;
+        }
+
+        if (w / h > pw / ph) {
+            fitToHeight();
+        } else {
+            fitToWidth();
+        }
+    } else {
+        this.view = 2;
+
+        if (r1 < 2 * r2) {
+            this.sc = (zoomMin * r1) / (2 * r2 * s);
+        } else {
+            this.sc = 1;
+        }
+
+        if (w / h >= bw / bh) {
+            fitToHeight();
+        } else {
+            fitToWidth();
+        }
+    }
+
+    this.zoom = zoom;
+
+    this.onZoom(zoom);
+};
+
+FLIPBOOK.BookSwipe.prototype.zoomOut = function (value) {
+    this.zoomTo(value);
+};
+
+FLIPBOOK.BookSwipe.prototype.move = function (direction) {
+    if (this.zoom <= 1) {
+        return;
+    }
+
+    for (var i = 0; i < 3; i++) {
+        var iscroll = this.slides[i].iscroll;
+        var offset2 = 0;
+
+        if (iscroll) {
+            var posX = iscroll.x;
+            var posY = iscroll.y;
+            var offset = 20 * this.zoom;
+            switch (direction) {
+                case 'left':
+                    posX += offset;
+                    break;
+                case 'right':
+                    posX -= offset;
+                    break;
+                case 'up':
+                    posY += offset;
+                    break;
+                case 'down':
+                    posY -= offset;
+                    break;
+            }
+
+            if (posX > 0) {
+                posX = offset2;
+            }
+            if (posX < iscroll.maxScrollX) {
+                posX = iscroll.maxScrollX - offset2;
+            }
+            if (posY > 0) {
+                posY = offset2;
+            }
+            if (posY < iscroll.maxScrollY) {
+                posY = iscroll.maxScrollY - offset2;
+            }
+
+            iscroll.scrollTo(posX, posY, 0);
+        }
+    }
+};
+
+FLIPBOOK.BookSwipe.prototype.onZoom = function (zoom) {
+    if (zoom > 1) {
+        this.disableFlip();
+        this.enablePan();
+    } else {
+        this.enableFlip();
+        this.disablePan();
+    }
+
+    this.options.main.onZoom(zoom);
+};
+
+FLIPBOOK.BookSwipe.prototype.rotateLeft = function () {
+    this.rotation = (this.rotation + 360 - 90) % 360;
+
+    for (var i = 0; i < this.pagesArr.length; i++) {
+        var page = this.pagesArr[i];
+        page.setRotation(this.rotation);
+    }
+
+    this.resizeInnerSlides();
+    this.onResize();
+};
+
+FLIPBOOK.BookSwipe.prototype.rotateRight = function () {
+    this.rotation = (this.rotation + 360 + 90) % 360;
+
+    for (var i = 0; i < this.pagesArr.length; i++) {
+        var page = this.pagesArr[i];
+        page.setRotation(this.rotation);
+    }
+
+    this.resizeInnerSlides();
+    this.onResize();
+};
+
+FLIPBOOK.BookSwipe.prototype.onSwipe = function (event, phase, distanceX, distanceY) {
+    if (phase == 'start') {
+        return;
+    }
+};
+
+FLIPBOOK.BookSwipe.prototype.onPageUnloaded = function (i) {
+    var index = this.options.rightToLeft ? this.options.numPages - i - 1 : i;
+
+    this.pagesArr[index].unload();
+};
+
+FLIPBOOK.BookSwipe.prototype.disableFlip = function () {
+    this.flipEnabled = false;
+    this.iscroll.disable();
+};
+
+FLIPBOOK.BookSwipe.prototype.enableFlip = function () {
+    if (this.options.numPages == 1) {
+        this.disableFlip();
+        return;
+    }
+
+    this.flipEnabled = true;
+    this.iscroll.enable();
+};
+
+FLIPBOOK.BookSwipe.prototype.enablePan = function () {
+    if (this.slides[0].iscroll) {
+        this.slides[0].iscroll.enable();
+    }
+    if (this.slides[1].iscroll) {
+        this.slides[1].iscroll.enable();
+    }
+    if (this.slides[2].iscroll) {
+        this.slides[2].iscroll.enable();
+    }
+};
+
+FLIPBOOK.BookSwipe.prototype.disablePan = function () {
+    if (this.slides[0].iscroll) {
+        this.slides[0].iscroll.disable();
+    }
+    if (this.slides[1].iscroll) {
+        this.slides[1].iscroll.disable();
+    }
+    if (this.slides[2].iscroll) {
+        this.slides[2].iscroll.disable();
+    }
+};
+
+FLIPBOOK.PageSwipe = function (book, index, texture, html) {
+    this.rotation = 0;
+    this.index = index;
+    this.options = book.options;
+    this.texture = texture;
+    this.html = html;
+    this.index = index;
+
+    this.wrapper = document.createElement('div');
+    this.wrapper.classList.add('flipbook-carousel-page');
+    this.wrapper.dataset.page = index + 1;
+    this.main = book.main;
+    this.book = book;
+
+    this.inner = document.createElement('div');
+    this.inner.classList.add('flipbook-carousel-page-inner');
+    this.wrapper.appendChild(this.inner);
+
+    this.bg = document.createElement('div');
+    this.bg.classList.add('flipbook-carousel-page-bg');
+    this.inner.appendChild(this.bg);
+
+    this.htmlElement = document.createElement('div');
+    this.htmlElement.classList.add('flipbook-page3-html');
+    this.htmlElement.style.width = (1000 * this.options.pageWidth) / this.options.pageHeight + 'px';
+    this.htmlElement.style.transform = 'scale(' + this.options.pageHeight / 1000 + ') translateZ(0)';
+    this.inner.appendChild(this.htmlElement);
+
+    if (this.options.doublePage) {
+        if (!this.options.rightToLeft && this.index % 2 === 0 && this.index > 0) {
+            this.htmlElement.style.left = '-100%';
+        } else if (this.options.rightToLeft && this.index % 2 === 1 && this.index > 0) {
+            this.htmlElement.style.left = '-100%';
+        } else {
+            this.htmlElement.style.left = '0';
+        }
+    }
+
+    if (this.options.pagePreloader) {
+        this.preloader = document.createElement('img');
+        this.preloader.src = this.options.pagePreloader;
+        this.preloader.classList.add('flipbook-page-preloader-image');
+        this.inner.appendChild(this.preloader);
+    } else {
+        this.preloader = document.createElement('img');
+        this.preloader.src = this.options.assets.spinner;
+        this.preloader.classList.add('flipbook-page-preloader');
+        this.inner.appendChild(this.preloader);
+    }
+
+    this.setSize(this.pw, this.ph);
+};
+
+FLIPBOOK.PageSwipe.prototype = {
+    load: function (callback, thumb) {
+        var size = this.options.pageTextureSize;
+
+        if (this.size >= size) {
+            if (!thumb) {
+                this.loadHTML();
+            }
+            if (callback) {
+                callback.call(this);
+            }
+            return;
+        }
+
+        this.size = size;
+
+        var self = this;
+
+        var index = this.options.rightToLeft ? this.options.numPages - this.index - 1 : this.index;
+        var o = this.options;
+        var p = o.pages[index];
+
+        this.options.main.loadPage(index, size, function (page) {
+            page = page || {};
+
+            if (page && page.image) {
+                var img = page.image[size] || page.image;
+                img.classList.add('page-carousel-img');
+
+                if (self.index % 2 == 0 && ((p && p.side == 'left') || (p && p.side == 'right'))) {
+                    if (!img.clone) {
+                        img.clone = new Image();
+                        img.clone.src = img.src;
+                    }
+                    img = img.clone;
+                }
+
+                self.bg.appendChild(img);
+
+                if (self.options.rightToLeft) {
+                    if (self.options.doublePage && self.index < self.options.numPages - 1 && self.index % 2 == 1) {
+                        img.style.left = '-100%';
+                    }
+
+                    if (self.options.doublePage) {
+                        if (self.index == self.options.numPages - 1 || (self.index == 0 && self.options.backCover)) {
+                            img.style.width = '100%';
+                        } else {
+                            img.style.width = '200%';
+                        }
+                    } else {
+                        img.style.width = '100%';
+                    }
+                } else {
+                    if (self.options.doublePage && self.index > 0 && self.index % 2 == 0) {
+                        img.style.left = '-100%';
+                    }
+
+                    if (self.options.doublePage) {
+                        if (self.index == 0 || (self.index == self.options.numPages - 1 && self.options.backCover)) {
+                            img.style.width = '100%';
+                        } else {
+                            img.style.width = '200%';
+                        }
+                    } else {
+                        img.style.width = '100%';
+                    }
+                }
+
+                self.preloader.remove();
+            }
+
+            self.setRotation();
+
+            if (!thumb) {
+                self.loadHTML();
+            }
+
+            if (callback) {
+                callback.call(self);
+            }
+        });
+    },
+
+    loadHTML: function () {
+        var self = this;
+
+        var index = !this.options.rightToLeft ? this.index : this.options.numPages - this.index - 1;
+
+        if (this.htmlContent) {
+            this.updateHtmlContent();
+        } else {
+            this.options.main.loadPageHTML(index, function (html) {
+                self.htmlContent = html;
+                self.updateHtmlContent();
+            });
+        }
+    },
+
+    hideHTML: function () {
+        if (this.htmlContentVisible) {
+            this.htmlElement.innerHTML = '';
+            this.htmlContentVisible = false;
+            this.main.trigger('hidepagehtml', { page: this });
+        }
+    },
+
+    startHTML: function () {
+        this.book.startPageItems(this.wrapper);
+    },
+
+    unload: function () {
+        this.pageSize = 0;
+        this.size = 0;
+        this.inner.appendChild(this.preloader);
+    },
+
+    dispose: function () {
+        if (this.pageSize) {
+            this.pageSize = null;
+            this.bg.innerHTML = '';
+        }
+    },
+
+    setSize: function () {
+        var w = this.options.pageWidth;
+        var h = this.options.pageHeight;
+
+        if (this.rotation === 0 || this.rotation === 180) {
+            this.wrapper.style.width = w + 'px';
+            this.wrapper.style.height = h + 'px';
+            this.pw = w;
+            this.ph = h;
+        } else {
+            this.wrapper.style.width = h + 'px';
+            this.wrapper.style.height = w + 'px';
+            this.pw = h;
+            this.ph = w;
+        }
+
+        this.updateHtmlContent();
+    },
+
+    setRotation: function (val) {
+        this.setSize();
+
+        if (this.options.doublePage) {
+            return;
+        }
+
+        if (typeof val != 'undefined') {
+            this.rotation = val;
+        }
+        if (this.img) {
+            this.img.style.transform = 'rotate(' + this.rotation + 'deg) translateZ(0)';
+            if (this.rotation === 90 || this.rotation === 270) {
+                this.img.style.width = this.wrapper.clientHeight + 'px';
+                this.img.style.height = this.wrapper.clientWidth + 'px';
+            } else {
+                this.img.style.width = this.wrapper.clientWidth + 'px';
+                this.img.style.height = this.wrapper.clientHeight + 'px';
+            }
+        }
+    },
+
+    updateHtmlContent: function () {
+        var c = this.htmlContent;
+
+        if (c && !this.htmlContentVisible) {
+            this.htmlContentVisible = true;
+
+            this.htmlElement.innerHTML = '';
+            this.htmlElement.appendChild(this.htmlContent);
+            this.main.trigger('showpagehtml', { page: this });
+        }
+        this.startHTML();
+    },
+};