#wb_flipbook {
    position: relative;
    background-color: rgba(17,17,17, 0.05);
    padding-top: 1rem;
}

/* =========================== Flipbook Images ============================== */
.current-image,
.next-image,
.prev-image,
.preview-section .preview-image,
.temp-image {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.preview-section .preview-image {
    background-position: left !important;
}
.current-image,
.temp-image,
.next-image,
.prev-image {
    position: relative;
    height: 100%;
    width: 100%;
    z-index: 5;
    margin-left: auto;
    margin-right: auto
}
.next-image,
.prev-image{
    position: absolute;
    top: 0;
    z-index: 3;
}
.current-image {
    z-index: 6 !important;
}
.current-image:hover {
    cursor: zoom-in;
}
.current-image.zoom-mode:hover {
    cursor: grab;
}
.current-image.dragging:hover {
    cursor: grabbing;
}
.current-image.zoom-mode ~ div {
    opacity: 0 !important;
}
.prev-image {
    /* z-index: 40 !important; */
    opacity: 0;
}

/* ========================= Preview Section ============================== */
.preview-section {
    border-top: 0.5px solid rgba(17,17,17, 0.5);
    margin-top: 1rem;
    padding: 0rem 4rem;
    overflow-x: scroll;
    white-space: nowrap;
}
.preview-section .preview-image {
    display: inline-block;
    padding-bottom: 15%;
    max-width: 300px;
    width: 30%;
    margin-top: 1rem;
    opacity: 0.5;
}
.preview-image.active-preview {
    opacity: 1 !important;
}
.preview-image:not(.active-preview) {
    cursor: pointer;;
}



/* ============================== Arrows =================================== */
.nextArrow,
.backArrow {
    position: absolute;
    top: 50%;
    z-index: 8;
    padding:20px;
}
.nextArrow:hover, .backArrow:hover {
    cursor: pointer;
}
.nextArrow {
    right: 60px;
}
.backArrow {
    left: 60px;
}


/* =============================== Animations ============================== */
.slider-section {
    position: relative;
    height: 500px;
    perspective: 6000px;
    overflow: hidden;
}
.flipbook_block.orient_portrait .slider-section{
    height: 1000px;
}
.flipbook_block.orient_portrait .preview-image{
    padding-bottom: 18%;
    width: 20%;
}
@keyframes moveleft {
    0% {opacity: 1; transform: translateX(-50%);}
    100% {opacity: 0; transform: translateX(-100%);}
}
@keyframes moveright {
    0% {opacity: 0; transform: translateX(-100%);}
    100% {opacity: 1; transform: translateX(-50%);}
}
.slide-left {
    animation-name: moveleft;
    animation-duration: 1s;
}
.slide-right {
    z-index: 7;
    animation-name: moveright;
    animation-duration: 1s;
}

/* ========================= Mobile Devices ================================= */

@media screen and (max-width: 500px) {
    .current-image,
    .next-image,
    .prev-image {
        padding-bottom: 100% !important;
    }
}