.c-flipbook {
    perspective: 2200px;
    transform-style: preserve-3d;
    opacity: 1;
    height: 200px;
    position: absolute;
    left: 0;
    transition: left .7s;
    top: 0
}

.c-flipbook.at-front-cover {
    left: -25%
}

.c-flipbook.at-rear-cover {
    left: 25%
}

.c-flipbook:not(.is-ready) * {
    transition: none !important
}

.c-flipbook:after {
    content: '';
    display: table;
    clear: both
}

.c-flipbook[data-useragent*='MSIE 10.0'] .c-flipbook__page {
    opacity: 0
}

.c-flipbook[data-useragent*='MSIE 10.0'] .c-flipbook__page.is-active {
    transition: opacity .9s ease, transform .9s ease;
    opacity: 1
}

.c-flipbook[data-useragent*='MSIE 10.0'] .c-flipbook__page.was-active {
    transition-delay: 2s;
    transition: opacity .9s ease, transform .9s ease;
    opacity: 0
}

.is-calling {
    transform: rotateY(-20deg) !important
}

.c-flipbook__page {
    cursor: pointer;
    overflow: hidden;
    position: absolute;
    width: 50%;
    background: #efeef4;
    backface-visibility: hidden;
    transform: rotateY(0);
    user-select: none;
    transition: transform .9s ease
}

.c-flipbook__page.is-active {
    z-index: 2
}

.c-flipbook__page.was-active {
    z-index: 1
}

.c-flipbook__page.is-animating:nth-child(odd) {
    z-index: 4
}

.c-flipbook__page.is-animating:nth-child(odd) ~ .c-flipbook__page.is-animating {
    z-index: 3
}

.c-flipbook__page.is-animating + .c-flipbook__page:not(.is-animating):nth-child(odd) {
    z-index: 1
}

.c-flipbook__page:nth-child(2n) {
    transform-origin: 100%;
    left: 0;
}

.c-flipbook__page:nth-child(2n).is-active {
    transform: rotateY(10deg)
}

.c-flipbook__page:nth-child(2n).is-active:hover {
    transform: rotateY(15deg)
}

.c-flipbook__page:nth-child(2n):not(.last-page) {
    border-right: none
}

.c-flipbook__page:nth-child(2n).is-active:hover {
    transform: rotateY(5deg)
}

.c-flipbook__page:nth-child(odd) {
    transform-origin: 0;
    right: 0;
    transform: rotateY(-180deg);
}

.c-flipbook__page:nth-child(odd).is-active {
    transform: rotateY(-10deg)
}

.c-flipbook__page:nth-child(odd).is-active:hover {
    transform: rotateY(-15deg)
}

.c-flipbook__page:nth-child(odd):not(.first-page) {
    border-left: none
}

.c-flipbook__page:nth-child(odd).is-active ~ .c-flipbook__page:nth-child(2n) {
    transform: rotateY(180deg)
}

.c-flipbook__page:nth-child(odd).is-active ~ .c-flipbook__page:nth-child(odd) {
    transform: rotateY(0)
}

.c-flipbook__page:nth-child(odd).is-active:hover {
    transform: rotateY(-5deg)
}

.c-flipbook__page.is-active:not(:hover) {
    transform: rotateY(0)
}

.c-flipbook__page:before {
    content: '';
    position: absolute;
    z-index: 3;
    right: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 100%
}

.no-csstransforms3d .c-flipbook__page {
    display: none
}

.no-csstransforms3d .c-flipbook__page.is-active {
    display: block;
    position: relative;
    float: left
}

.c-flipbook-image {
    position: relative;
    z-index: 2;
    height: auto;
    width: 100%;
    display: block;
    pointer-events: none
}

.c-flipbook__page .ss-loading {
    font-size: 2rem;
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    width: 100%;
    display: flex
}

.c-flipbook__page .ss-loading:before {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%
}

@supports (transition:transform 0.9s ease) and (not (-ms-ime-align:auto)) {
    .c-flipbook__page {
        transition: transform .9s ease;
        box-shadow: 0 0 5px rgba(0,0,0,.2);
    }
}