/*Styles for template e-book v0.0.34*/

html,
body,
main,
ebook,
pages {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html {
    height: 100%
}

@-ms-viewport {
    height: device-height
}

@-ms-viewport {
    width: device-width
}

#message {
    width: 300px;
    height: 150px;
    top: 30%;
    left: 40%;
    z-index: 1000;
    position: absolute;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}

#message> div:nth-child(1) {
    margin: -2px 14px 0px;
    border-bottom: 1px solid #e5e5e5;
}

#message> div:nth-child(1) h4 {
    font-size: 17px;
    margin: 0;
    line-height: 1.42857143;
    font-size: 18px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

#message div:nth-child(2) {
    padding: 14px;
}

#message div:nth-child(2) div {
    text-align: center;
}

#message div:nth-child(2) div button {
    font-size: 16px;
}

#cover {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 900;
    width: 100%;
    height: 100%;
    /*    display: none;*/
}

#ebook,
#controls {
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

body {
    background-color: #d0d0d0;
    margin: 0 auto;
    font-family: Arial, Helvetica, sans-serif;
    -ms-content-zooming: none;
    touch-action: none;
}


/*E-Book Shadows*/

#bookShadow {
    width: 900px;
    height: 600px;
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-transform: translate(450px, 0px) scaleX(0.5);
    transform: translate(450px, 0px) scaleX(0.5);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.41);
}

#bookShadow1 {
    width: 900px;
    height: 600px;
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-transform: translate(450px, 0px) scaleX(0.5);
    transform: translate(450px, 0px) scaleX(0.5);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.41);
}

.rightShadow {
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    background-image: linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    pointer-events: none;
}

.leftShadow {
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
    background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
    background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
    background-image: linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
    pointer-events: none;
}


/*Header Selectors*/

header {
    width: 100%;
    height: 30px;
    position: relative;
    display: block;
    margin: 0 auto;
    background-position: center;
    background-color: #184A93;
}

#pdfLink {
    /* outside of the header because of the z-index */
    cursor: pointer;
    height: 27px;
    width: 136px;
    float: right;
    left: 54%;
    top: 10%;
    position: absolute;
    z-index: 100;
    background-image: url(../assets/images/titlebar-link.png);
}

#c2c {
    height: 27px;
    width: 136px;
    float: left;
    left: 38%;
    top: 10%;
    position: absolute;
    background-image: url(../assets/images/titlebar.png);
}


/*Main Selectors*/

main {
    height: 600px;
    width: 900px;
    margin: auto;
    display: block;
}

#ebook {
    width: 900px;
    height: 600px;
    position: absolute;
    z-index: 10;
}

.rightSide {
    top: 0px;
    left: auto;
    right: 0px;
    bottom: auto;
    border-radius: 0 10px 10px 0;
}

.leftSide {
    top: 0px;
    left: 0px;
    right: auto;
    bottom: auto;
    border-radius: 10px 0 0 10px;
}

#pages {
    position: absolute;
    width: 900px;
    height: 600px;
    -webkit-perspective: 4000px;
    -moz-perspective: 4000px;
    -ms-perspective: 4000px;
    -o-perspective: 4000px;
    perspective: 4000px;
}

#gap {
    width: 1px;
    height: 600px;
    -webkit-transform: translate(450px, 0px) rotate(180deg);
    transform: translate(450px, 0px) rotate(180deg);
    z-index: 90;
    background-color: gray;
    position: absolute;
}

#pagesShadow {
    z-index: -1;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 900px;
    height: 600px;
    overflow: hidden;
    opacity: 0.2;
}

#pagesBendShadow {
    position: absolute;
    top: -450px;
    right: 450px;
    width: 157px;
    height: 1500px;
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    overflow: hidden;
    -webkit-transform: translate(600px, 227px) rotate(42deg) scaleX(0.3);
    transform: translate(600px, 227px) rotate(42deg) scaleX(0.3);
    opacity: 0.6;
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
    background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
    background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
    background-image: linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}

#pagesBendShadowNext {
    position: absolute;
    top: -75px;
    left: 450px;
    width: 222px;
    height: 750px;
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    overflow: hidden;
    -webkit-transform: translate(543px, 220px) rotate(42deg) scaleX(0.2);
    transform: translate(543px, 220px) rotate(42deg) scaleX(0.2);
    opacity: 0.3;
    background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
    background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
    background-image: linear-gradient(left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
}

#pages img {
    width: 100%;
    height: 100%;
}

#page0 {
    position: absolute;
    width: 450px;
    height: 600px;
    top: 0px;
    left: auto;
    right: 0px;
    z-index: 100;
    opacity: 1;
}

#page0 img {
    position: absolute;
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0px, 0px, 0px) rotate(0deg);
    transform: translate3d(0px, 0px, 0px) rotate(0deg);
    z-index: 100;
}

#p0Shadow {
    position: absolute;
    overflow: hidden;
    width: 50px;
    height: 600px;
    top: 0px;
    left: 0px;
    right: auto;
    opacity: 0.2;
}

#page1 {
    width: 450px;
    height: 600px;
    position: absolute;
    top: 0px;
    left: 0px;
    right: auto;
    z-index: 20;
    opacity: 1;
}

#p1Content {
    position: absolute;
    top: 0px;
    left: 0px;
    right: auto;
    z-index: 20;
    opacity: 1;
    width: 450px;
    height: 600px;
}

#p1Content img {
    position: absolute;
    -webkit-transform-origin: right;
    transform-origin: right;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: rotateY(90deg);
    transform: rotateY(90deg);
    width: 100%;
    height: 100%;
    z-index: 20;
    display: none;
    visibility: hidden;
}

.page2 {
    position: absolute;
    right: 50%;
    top: -75px;
    left: auto;
    width: 750px;
    height: 750px;
    overflow: hidden;
    -webkit-transform: translate(591px, -4px) rotate(42deg);
    transform: translate(591px, -4px) rotate(42deg);
}

.p2ContentStatic {
    position: absolute;
    overflow: hidden;
    width: 450px;
    height: 600px;
}

.p2Content {
    position: absolute;
    overflow: hidden;
    width: 450px;
    height: 600px;
    -webkit-transform: translate(-140.9px, 71.9px) rotate(-42deg);
    transform: translate(-140.9px, 71.9px) rotate(-42deg);
}

.p2BendShadow {
    position: absolute;
    top: -75px;
    left: 125px;
    width: 100px;
    height: 750px;
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    overflow: hidden;
    opacity: 0.1;
    -webkit-transform: translate(374.689px, 9px) rotate(27deg) scaleX(0);
    transform: translate(374.689px, 9px) rotate(27deg) scaleX(0);
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    background-image: linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

#copy {
    width: 69px;
    height: 600px;
    position: absolute;
    overflow: hidden;
}

.p2ShadowStatic {
    position: absolute;
    overflow: hidden;
    width: 50px;
    height: 600px;
    top: 0px;
    left: 0px;
    right: auto;
    opacity: 0.2;
}

.p2Shadow {
    position: absolute;
    overflow: hidden;
    width: 50px;
    height: 600px;
    top: 0px;
    left: 0px;
    right: auto;
    opacity: 0.2;
    -webkit-transform: translate(210.9px, 205px) rotate(-42deg);
    transform: translate(210.9px, 205px) rotate(-42deg);
}

.page3 {
    position: absolute;
    right: 50%;
    top: -75px;
    left: auto;
    width: 750px;
    height: 750px;
    overflow: hidden;
    -webkit-transform: translate(591px, -4px) rotate(42deg);
    transform: translate(591px, -4px) rotate(42deg);
}

.p3ContentStatic {
    position: absolute;
    overflow: hidden;
    width: 450px;
    height: 600px;
}

.p3Content {
    position: absolute;
    overflow: hidden;
    width: 450px;
    height: 600px;
    -webkit-transform: translate(863px, -21px) rotate(27deg);
    transform: translate(863px, -21px) rotate(27deg);
}

.p3BendShadow {
    position: absolute;
    top: -75px;
    left: 125px;
    width: 100px;
    height: 750px;
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    overflow: hidden;
    opacity: 0.1;
    -webkit-transform: translate(-334.689px, 22px) rotate(-27deg) scaleX(0.3);
    transform: translate(-334.689px, 22px) rotate(-27deg) scaleX(0.3);
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    background-image: linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.p3ShadowStatic {
    position: absolute;
    overflow: hidden;
    width: 50px;
    height: 600px;
    top: 0px;
    left: auto;
    right: 0px;
    opacity: 0.2;
}

.p3Shadow {
    position: absolute;
    overflow: hidden;
    width: 50px;
    height: 600px;
    top: 0px;
    left: auto;
    right: 0px;
    opacity: 0.2;
    -webkit-transform: translate(821px, 0px) rotate(27deg);
    transform: translate(821px, 0px) rotate(27deg);
}

.page4 {
    position: absolute;
    overflow: hidden;
    width: 450px;
    height: 600px;
    -webkit-transform: translate(0px, 0px) rotate(0deg);
    transform: translate(0px, 0px) rotate(0deg);
    z-index: 30;
}

.p4Content {
    width: 450px;
    height: 600px;
}


/*Controls*/


/*region*/

#controls {
    width: 900px;
    height: 200px;
    margin-top: 400px;
    position: absolute;
    z-index: 500;
}

#previousPage {
    width: 200px;
    height: 200px;
    float: left;
    text-align: left;
    cursor: pointer;
}

#play_stop {
    width: 50px;
    height: 50px;
    margin: 150px auto;
    text-align: center;
    cursor: pointer;
}

#nextPage {
    width: 200px;
    height: 200px;
    text-align: right;
    float: right;
    cursor: pointer;
}


/*endregion*/


/*Footer Selectors*/


/*region*/

footer {
    width: 900px;
    height: 25px;
    margin: 8px auto;
}

.footerClass {
    margin: auto;
}

#copyright {
    margin: auto 28%;
    text-align: center;
}


/*endregion*/

.animated {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}


/* center cover */

.centerEbookA {
    -webkit-transform: translate(-169px, 0px) scale(0.75)!important;
    transform: translate(-169px, 0px) scale(0.75)!important;
}

.centerEbook {
    -webkit-transform: translate(-225px, 0px);
    transform: translate(-225px, 0px);
    /*    left: -12%;*/
}

@-webkit-keyframes centerCoverA {
    from {
        -webkit-transform: translate(-183px, 0px) scale(0.75);
        transform: translate(-183px, 0px) scale(0.75);
    }
    to {
        -webkit-transform: translate(0px, 0px) scale(0.75);
        transform: translate(0px, 0px) scale(0.75);
    }
}

@keyframes centerCoverA {
    from {
        -webkit-transform: translate(-183px, 0px) scale(0.75);
        transform: translate(-183px, 0px) scale(0.75);
    }
    to {
        -webkit-transform: translate(0px, 0px) scale(0.75);
        transform: translate(0px, 0px) scale(0.75);
    }
}

.centerCoverA {
    -webkit-animation-name: centerCoverA;
    animation-name: centerCoverA;
}

@-webkit-keyframes leftCoverA {
    from {
        -webkit-transform: translate(0px, 0px) scale(0.75);
        transform: translate(0px, 0px) scale(0.75);
    }
    to {
        -webkit-transform: translate(-183px, 0px) scale(0.75);
        transform: translate(-183px, 0px) scale(0.75);
    }
}

@keyframes leftCoverA {
    from {
        -webkit-transform: translate(0px, 0px) scale(0.75);
        transform: translate(0px, 0px) scale(0.75);
    }
    to {
        -webkit-transform: translate(-183px, 0px) scale(0.75);
        transform: translate(-183px, 0px) scale(0.75);
    }
}

.leftCoverA {
    -webkit-animation-name: leftCoverA;
    animation-name: leftCoverA;
}

@-webkit-keyframes centerCover {
    from {
        -webkit-transform: translate(-225px, 0px);
        transform: translate(-225px, 0px);
    }
    to {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
}

@keyframes centerCover {
    from {
        -webkit-transform: translate(-225px, 0px);
        transform: translate(-225px, 0px);
    }
    to {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
}

.centerCover {
    -webkit-animation-name: centerCover;
    animation-name: centerCover;
}

@-webkit-keyframes leftCover {
    from {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
    to {
        -webkit-transform: translate(-225px, 0px);
        transform: translate(-225px, 0px);
    }
}

@keyframes leftCover {
    from {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
    to {
        -webkit-transform: translate(-225px, 0px);
        transform: translate(-225px, 0px);
    }
}

.leftCover {
    -webkit-animation-name: leftCover;
    animation-name: leftCover;
}


/* Cover Moving from right to left*/


/*region*/


/*region cross-browser*/

@-webkit-keyframes coverRightMiddle {
    from {
        -webkit-transform: rotateY(-10deg);
        transform: rotateY(-10deg);
        display: block;
        visibility: visible;
    }
    to {
        -webkit-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
        display: none;
        visibility: hidden;
    }
}


/* endregion */

@keyframes coverRightMiddle {
    from {
        -webkit-transform: rotateY(-10deg);
        transform: rotateY(-10deg);
        display: block;
        visibility: visible;
    }
    to {
        -webkit-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
        display: none;
        visibility: hidden;
    }
}

.coverRightMiddle {
    -webkit-animation-name: coverRightMiddle;
    animation-name: coverRightMiddle;
}


/*region cross-browser*/

@-webkit-keyframes page1MiddleLeft {
    from {
        -webkit-transform: rotateY(90deg);
        transform: rotateY(90deg);
        display: none;
        visibility: hidden;
    }
    to {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
        display: block;
        visibility: visible;
    }
}


/* endregion */

@keyframes page1MiddleLeft {
    from {
        -webkit-transform: rotateY(90deg);
        transform: rotateY(90deg);
        display: none;
        visibility: hidden;
    }
    to {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
        display: block;
        visibility: visible;
    }
}

.page1MiddleLeft {
    -webkit-animation-name: page1MiddleLeft;
    animation-name: page1MiddleLeft;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}


/*endregion*/


/*Cover Moving from left to right*/


/*region*/


/*region cross-browser*/

@-webkit-keyframes coverMiddleRight {
    from {
        -webkit-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
        display: none;
        visibility: hidden;
    }
    to {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
        z-index: 100;
        display: block;
        visibility: visible;
    }
}


/* endregion */

@keyframes coverMiddleRight {
    from {
        -webkit-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
        display: none;
        visibility: hidden;
    }
    to {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
        z-index: 100;
        display: block;
        visibility: visible;
    }
}

.coverMiddleRightMac {
    -webkit-animation-name: coverMiddleRight;
    animation-name: coverMiddleRight;
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

.coverMiddleRight {
    -webkit-animation-name: coverMiddleRight;
    animation-name: coverMiddleRight;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}


/*region cross-browser*/

@-webkit-keyframes page1LeftMiddle {
    from {
        -webkit-transform: rotateY(10deg);
        transform: rotateY(10deg);
        display: block;
        visibility: visible;
    }
    to {
        -webkit-transform: rotateY(90deg);
        transform: rotateY(90deg);
        display: none;
        visibility: hidden;
    }
}


/* endregion */

@keyframes page1LeftMiddle {
    from {
        -webkit-transform: rotateY(90deg);
        transform: rotateY(10deg);
        display: block;
        visibility: visible;
    }
    to {
        -webkit-transform: rotateY(90deg);
        transform: rotateY(90deg);
        display: none;
        visibility: hidden;
    }
}

.page1LeftMiddle {
    -webkit-animation-name: page1LeftMiddle;
    animation-name: page1LeftMiddle;
}


/*endregion*/


/*Book Shadow Animation*/


/*region*/


/*region cross-browser*/

@-webkit-keyframes bookShadowCloseCover {
    from {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
    to {
        -webkit-transform: translate(450px, 0px) scaleX(0.5);
        transform: translate(450px, 0px) scaleX(0.5);
    }
}


/* endregion */

@keyframes bookShadowCloseCover {
    from {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
    to {
        -webkit-transform: translate(450px, 0px) scaleX(0.5);
        transform: translate(450px, 0px) scaleX(0.5);
    }
}

.bookShadowCloseCover {
    -webkit-animation-name: bookShadowCloseCover;
    animation-name: bookShadowCloseCover;
}


/*region cross-browser*/

@-webkit-keyframes bookShadowOpenCover {
    from {
        -webkit-transform: translate(450px, 0px) scaleX(0.5);
        transform: translate(450px, 0px) scaleX(0.5);
    }
    to {
        -webkit-transform: translate(0px, 0px) scaleX(1);
        transform: translate(0px, 0px) scaleX(1);
    }
}


/* endregion */

@keyframes bookShadowOpenCover {
    from {
        -webkit-transform: translate(450px, 0px) scaleX(0.5);
        transform: translate(450px, 0px) scaleX(0.5);
    }
    to {
        -webkit-transform: translate(0px, 0px) scaleX(1);
        transform: translate(0px, 0px) scaleX(1);
    }
}

.bookShadowOpenCover {
    -webkit-animation-name: bookShadowOpenCover;
    animation-name: bookShadowOpenCover;
}

.bookShadowOpenCoverIos {
    -webkit-animation-name: bookShadowOpenCover;
    animation-name: bookShadowOpenCover;
}

.animated.bookShadowOpenCover {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

.animated.bookShadowOpenCoverIos {
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
}


/*endregion*/


/*Right page to left Animation*/


/*region*/


/*region cross-browser*/

@-webkit-keyframes page3LeftMiddle {
    from {
        -webkit-transform: translate(560px, -34px) rotate(42deg);
        transform: translate(560px, -34px) rotate(42deg);
    }
    3% {
        -webkit-transform: translate(550px, -36px) rotate(37.8deg);
        transform: translate(550px, -36px) rotate(37.8deg);
    }
    6% {
        -webkit-transform: translate(538px, -38px) rotate(33.6deg);
        transform: translate(538px, -38px) rotate(33.6deg);
    }
    9% {
        -webkit-transform: translate(525px, -40px) rotate(29.4deg);
        transform: translate(525px, -40px) rotate(29.4deg);
    }
    12% {
        -webkit-transform: translate(511px, -42px) rotate(25.2deg);
        transform: translate(511px, -42px) rotate(25.2deg);
    }
    15% {
        -webkit-transform: translate(492px, -37px) rotate(21deg);
        transform: translate(492px, -37px) rotate(21deg);
    }
    18% {
        -webkit-transform: translate(474px, -35px) rotate(16.8deg);
        transform: translate(474px, -35px) rotate(16.8deg);
    }
    21% {
        -webkit-transform: translate(454px, -31px) rotate(12.6deg);
        transform: translate(454px, -31px) rotate(12.6deg);
    }
    24% {
        -webkit-transform: translate(435px, -31px) rotate(8.4deg);
        transform: translate(435px, -31px) rotate(8.4deg);
    }
    27% {
        -webkit-transform: translate(411px, -7px) rotate(4.2deg);
        transform: translate(411px, -7px) rotate(4.2deg);
    }
    30% {
        -webkit-transform: translate(390px, 0px) rotate(0deg);
        transform: translate(390px, 0px) rotate(0deg);
    }
    to {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
        transform: translate(0px, 0px) rotate(0deg);
    }
}


/* endregion */

@keyframes page3LeftMiddle {
    from {
        -webkit-transform: translate(560px, -34px) rotate(42deg);
        transform: translate(560px, -34px) rotate(42deg);
    }
    3% {
        -webkit-transform: translate(550px, -36px) rotate(37.8deg);
        transform: translate(550px, -36px) rotate(37.8deg);
    }
    6% {
        -webkit-transform: translate(538px, -38px) rotate(33.6deg);
        transform: translate(538px, -38px) rotate(33.6deg);
    }
    9% {
        -webkit-transform: translate(525px, -40px) rotate(29.4deg);
        transform: translate(525px, -40px) rotate(29.4deg);
    }
    12% {
        -webkit-transform: translate(511px, -42px) rotate(25.2deg);
        transform: translate(511px, -42px) rotate(25.2deg);
    }
    15% {
        -webkit-transform: translate(492px, -37px) rotate(21deg);
        transform: translate(492px, -37px) rotate(21deg);
    }
    18% {
        -webkit-transform: translate(474px, -35px) rotate(16.8deg);
        transform: translate(474px, -35px) rotate(16.8deg);
    }
    21% {
        -webkit-transform: translate(454px, -31px) rotate(12.6deg);
        transform: translate(454px, -31px) rotate(12.6deg);
    }
    24% {
        -webkit-transform: translate(435px, -31px) rotate(8.4deg);
        transform: translate(435px, -31px) rotate(8.4deg);
    }
    27% {
        -webkit-transform: translate(411px, -7px) rotate(4.2deg);
        transform: translate(411px, -7px) rotate(4.2deg);
    }
    30% {
        -webkit-transform: translate(390px, 0px) rotate(0deg);
        transform: translate(390px, 0px) rotate(0deg);
    }
    to {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
        transform: translate(0px, 0px) rotate(0deg);
    }
}

.page3LeftMiddle {
    -webkit-animation-name: page3LeftMiddle;
    animation-name: page3LeftMiddle;
}


/*region cross-browser*/

@-webkit-keyframes p3ContentLeftMiddle {
    from {
        -webkit-transform: translate(824px, 4px) rotate(27deg);
        transform: translate(824px, 4px) rotate(27deg);
    }
    3% {
        -webkit-transform: translate(816.9px, 10.9px) rotate(24.3deg);
        transform: translate(816.9px, 10.9px) rotate(24.3deg);
    }
    6% {
        -webkit-transform: translate(807.2px, 19.9px) rotate(21.6deg);
        transform: translate(807.2px, 19.9px) rotate(21.6deg);
    }
    9% {
        -webkit-transform: translate(797.5px, 29.2px) rotate(18.9deg);
        transform: translate(797.5px, 29.2px) rotate(18.9deg);
    }
    12% {
        -webkit-transform: translate(787.2px, 39.8px) rotate(16.2deg);
        transform: translate(787.2px, 39.8px) rotate(16.2deg);
    }
    15% {
        -webkit-transform: translate(775.8px, 42.8px) rotate(13.5deg);
        transform: translate(775.8px, 42.8px) rotate(13.5deg);
    }
    18% {
        -webkit-transform: translate(764.2px, 50.8px) rotate(10.8deg);
        transform: translate(764.2px, 50.8px) rotate(10.8deg);
    }
    21% {
        -webkit-transform: translate(751.5px, 58.8px) rotate(8.1deg);
        transform: translate(751.5px, 58.8px) rotate(8.1deg);
    }
    24% {
        -webkit-transform: translate(739.5px, 72.5px) rotate(5.4deg);
        transform: translate(739.5px, 72.5px) rotate(5.4deg);
    }
    27% {
        -webkit-transform: translate(723.5px, 63.5px) rotate(2.7deg);
        transform: translate(723.5px, 63.5px) rotate(2.7deg);
    }
    30% {
        -webkit-transform: translate(691.5px, 74.5px) rotate(0deg);
        transform: translate(691.5px, 74.5px) rotate(0deg);
    }
    to {
        -webkit-transform: translate(300px, 74.5px) rotate(0deg);
        transform: translate(300px, 74.5px) rotate(0deg);
    }
}


/* endregion */

@keyframes p3ContentLeftMiddle {
    from {
        -webkit-transform: translate(824px, 4px) rotate(27deg);
        transform: translate(824px, 4px) rotate(27deg);
    }
    3% {
        -webkit-transform: translate(816.9px, 10.9px) rotate(24.3deg);
        transform: translate(816.9px, 10.9px) rotate(24.3deg);
    }
    6% {
        -webkit-transform: translate(807.2px, 19.9px) rotate(21.6deg);
        transform: translate(807.2px, 19.9px) rotate(21.6deg);
    }
    9% {
        -webkit-transform: translate(797.5px, 29.2px) rotate(18.9deg);
        transform: translate(797.5px, 29.2px) rotate(18.9deg);
    }
    12% {
        -webkit-transform: translate(787.2px, 39.8px) rotate(16.2deg);
        transform: translate(787.2px, 39.8px) rotate(16.2deg);
    }
    15% {
        -webkit-transform: translate(775.8px, 42.8px) rotate(13.5deg);
        transform: translate(775.8px, 42.8px) rotate(13.5deg);
    }
    18% {
        -webkit-transform: translate(764.2px, 50.8px) rotate(10.8deg);
        transform: translate(764.2px, 50.8px) rotate(10.8deg);
    }
    21% {
        -webkit-transform: translate(751.5px, 58.8px) rotate(8.1deg);
        transform: translate(751.5px, 58.8px) rotate(8.1deg);
    }
    24% {
        -webkit-transform: translate(739.5px, 72.5px) rotate(5.4deg);
        transform: translate(739.5px, 72.5px) rotate(5.4deg);
    }
    27% {
        -webkit-transform: translate(723.5px, 63.5px) rotate(2.7deg);
        transform: translate(723.5px, 63.5px) rotate(2.7deg);
    }
    30% {
        -webkit-transform: translate(691.5px, 74.5px) rotate(0deg);
        transform: translate(691.5px, 74.5px) rotate(0deg);
    }
    to {
        -webkit-transform: translate(300px, 74.5px) rotate(0deg);
        transform: translate(300px, 74.5px) rotate(0deg);
    }
}

.p3ContentLeftMiddle {
    -webkit-animation-name: p3ContentLeftMiddle;
    animation-name: p3ContentLeftMiddle;
}


/*region cross-browser*/

@-webkit-keyframes p3ShadowLeftMiddle {
    from {
        -webkit-transform: translate(821px, 0px) rotate(27deg);
        transform: translate(821px, 0px) rotate(27deg);
    }
    30% {
        -webkit-transform: translate(840.689px, 75px) rotate(0deg);
        transform: translate(840.689px, 75px) rotate(0deg);
    }
    to {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
        /*        -webkit-transform: translate(0px, 75px) rotate(0deg);*/
        transform: translate(0px, 0px) rotate(0deg);
        /*        transform: translate(0px, 75px) rotate(0deg);*/
    }
}


/* endregion */

@keyframes p3ShadowLeftMiddle {
    from {
        -webkit-transform: translate(821px, 0px) rotate(27deg);
        transform: translate(821px, 0px) rotate(27deg);
    }
    30% {
        -webkit-transform: translate(840.689px, 75px) rotate(0deg);
        transform: translate(840.689px, 75px) rotate(0deg);
    }
    to {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
        /*        -webkit-transform: translate(0px, 75px) rotate(0deg);*/
        transform: translate(0px, 0px) rotate(0deg);
        /*        transform: translate(0px, 75px) rotate(0deg);*/
    }
}

.p3ShadowLeftMiddle {
    -webkit-animation-name: p3ShadowLeftMiddle;
    animation-name: p3ShadowLeftMiddle;
}


/*region cross-browser*/

@-webkit-keyframes p3BendShadowLeftMiddle {
    from {
        opacity: 0.1;
        -webkit-transform: translate(-335.689px, 0px) rotate(-27deg) scaleX(0.3);
        transform: translate(-335.689px, 0px) rotate(-27deg) scaleX(0.3);
    }
    3% {
        -webkit-transform: translate(-320.689px, 0px) rotate(-24.3deg) scaleX(0.33);
        transform: translate(-320.689px, 0px) rotate(-24.3deg) scaleX(0.33);
    }
    6% {
        -webkit-transform: translate(-303.689px, 0px) rotate(-21.6deg) scaleX(0.36);
        transform: translate(-303.689px, 0px) rotate(-21.6deg) scaleX(0.36);
    }
    9% {
        -webkit-transform: translate(-287.689px, 0px) rotate(-18.9deg) scaleX(0.39);
        transform: translate(-287.689px, 0px) rotate(-18.9deg) scaleX(0.39);
    }
    12% {
        -webkit-transform: translate(-272.689px, 0px) rotate(-16.2deg) scaleX(0.42);
        transform: translate(-272.689px, 0px) rotate(-16.2deg) scaleX(0.42);
    }
    15% {
        -webkit-transform: translate(-257.689px, 0px) rotate(-13.5deg) scaleX(0.45);
        transform: translate(-257.689px, 0px) rotate(-13.5deg) scaleX(0.45);
    }
    18% {
        -webkit-transform: translate(-243.689px, 0px) rotate(-10.8deg) scaleX(0.48);
        transform: translate(-243.689px, 0px) rotate(-10.8deg) scaleX(0.48);
    }
    21% {
        -webkit-transform: translate(-228.689px, 0px) rotate(-8.1deg) scaleX(0.51);
        transform: translate(-228.689px, 0px) rotate(-8.1deg) scaleX(0.51);
    }
    24% {
        -webkit-transform: translate(-215.689px, 0px) rotate(-5.4deg) scaleX(0.54);
        transform: translate(-215.689px, 0px) rotate(-5.4deg) scaleX(0.54);
    }
    27% {
        -webkit-transform: translate(-198.689px, 0px) rotate(-2.7deg) scaleX(0.57);
        transform: translate(-198.689px, 0px) rotate(-2.7deg) scaleX(0.57);
    }
    30% {
        -webkit-transform: translate(-165.689px, 0px) rotate(0deg) scaleX(0.6);
        transform: translate(-165.689px, 0px) rotate(0deg) scaleX(0.6);
        opacity: 0.2;
    }
    to {
        opacity: 0;
        -webkit-transform: translate(225px, 0px) rotate(0deg) scaleX(1.6);
        transform: translate(225px, 0px) rotate(0deg) scaleX(1.6);
    }
}


/* endregion */

@keyframes p3BendShadowLeftMiddle {
    from {
        opacity: 0.1;
        -webkit-transform: translate(-335.689px, 0px) rotate(-27deg) scaleX(0.3);
        transform: translate(-335.689px, 0px) rotate(-27deg) scaleX(0.3);
    }
    3% {
        -webkit-transform: translate(-320.689px, 0px) rotate(-24.3deg) scaleX(0.33);
        transform: translate(-320.689px, 0px) rotate(-24.3deg) scaleX(0.33);
    }
    6% {
        -webkit-transform: translate(-303.689px, 0px) rotate(-21.6deg) scaleX(0.36);
        transform: translate(-303.689px, 0px) rotate(-21.6deg) scaleX(0.36);
    }
    9% {
        -webkit-transform: translate(-287.689px, 0px) rotate(-18.9deg) scaleX(0.39);
        transform: translate(-287.689px, 0px) rotate(-18.9deg) scaleX(0.39);
    }
    12% {
        -webkit-transform: translate(-272.689px, 0px) rotate(-16.2deg) scaleX(0.42);
        transform: translate(-272.689px, 0px) rotate(-16.2deg) scaleX(0.42);
    }
    15% {
        -webkit-transform: translate(-257.689px, 0px) rotate(-13.5deg) scaleX(0.45);
        transform: translate(-257.689px, 0px) rotate(-13.5deg) scaleX(0.45);
    }
    18% {
        -webkit-transform: translate(-243.689px, 0px) rotate(-10.8deg) scaleX(0.48);
        transform: translate(-243.689px, 0px) rotate(-10.8deg) scaleX(0.48);
    }
    21% {
        -webkit-transform: translate(-228.689px, 0px) rotate(-8.1deg) scaleX(0.51);
        transform: translate(-228.689px, 0px) rotate(-8.1deg) scaleX(0.51);
    }
    24% {
        -webkit-transform: translate(-215.689px, 0px) rotate(-5.4deg) scaleX(0.54);
        transform: translate(-215.689px, 0px) rotate(-5.4deg) scaleX(0.54);
    }
    27% {
        -webkit-transform: translate(-198.689px, 0px) rotate(-2.7deg) scaleX(0.57);
        transform: translate(-198.689px, 0px) rotate(-2.7deg) scaleX(0.57);
    }
    30% {
        -webkit-transform: translate(-165.689px, 0px) rotate(0deg) scaleX(0.6);
        transform: translate(-165.689px, 0px) rotate(0deg) scaleX(0.6);
        opacity: 0.2;
    }
    to {
        opacity: 0;
        -webkit-transform: translate(225px, 0px) rotate(0deg) scaleX(1.6);
        transform: translate(225px, 0px) rotate(0deg) scaleX(1.6);
    }
}

.p3BendShadowLeftMiddle {
    -webkit-animation-name: p3BendShadowLeftMiddle;
    animation-name: p3BendShadowLeftMiddle;
}


/*region cross-browser*/

@-webkit-keyframes pagesBendShadowLeftMiddle {
    from {
        opacity: 0.6;
        -webkit-transform: translate(454px, 227px) rotate(42deg) scaleX(0.3);
        transform: translate(454px, 227px) rotate(42deg) scaleX(0.3);
    }
    3% {
        -webkit-transform: translate(446px, 227px) rotate(37.8deg) scaleX(0.33);
        transform: translate(446px, 227px) rotate(37.8deg) scaleX(0.33);
    }
    6% {
        -webkit-transform: translate(437px, 227px) rotate(33.6deg) scaleX(0.36);
        transform: translate(437px, 227px) rotate(33.6deg) scaleX(0.36);
    }
    9% {
        -webkit-transform: translate(430px, 227px) rotate(29.4deg) scaleX(0.39);
        transform: translate(430px, 227px) rotate(29.4deg) scaleX(0.39);
    }
    12% {
        -webkit-transform: translate(424px, 227px) rotate(25.2deg) scaleX(0.42);
        transform: translate(424px, 227px) rotate(25.2deg) scaleX(0.42);
    }
    15% {
        -webkit-transform: translate(417px, 227px) rotate(21deg) scaleX(0.45);
        transform: translate(417px, 227px) rotate(21deg) scaleX(0.45);
    }
    18% {
        -webkit-transform: translate(412px, 227px) rotate(16.8deg) scaleX(0.48);
        transform: translate(412px, 227px) rotate(16.8deg) scaleX(0.48);
    }
    21% {
        -webkit-transform: translate(406px, 227px) rotate(12.6deg) scaleX(0.51);
        transform: translate(406px, 227px) rotate(12.6deg) scaleX(0.51);
    }
    24% {
        -webkit-transform: translate(401px, 227px) rotate(8.4deg) scaleX(0.54);
        transform: translate(401px, 227px) rotate(8.4deg) scaleX(0.54);
    }
    27% {
        -webkit-transform: translate(395px, 227px) rotate(4.2deg) scaleX(0.57);
        transform: translate(395px, 227px) rotate(4.2deg) scaleX(0.57);
    }
    30% {
        -webkit-transform: translate(389px, 227px) rotate(0deg) scaleX(0.6);
        transform: translate(389px, 227px) rotate(0deg) scaleX(0.6);
        opacity: 1;
    }
    to {
        opacity: 0.5;
        -webkit-transform: translate(0px, 227px) rotate(0deg) scaleX(6);
        transform: translate(0px, 227px) rotate(0deg) scaleX(6);
    }
}


/* endregion */

@keyframes pagesBendShadowLeftMiddle {
    from {
        opacity: 0.6;
        -webkit-transform: translate(454px, 227px) rotate(42deg) scaleX(0.3);
        transform: translate(454px, 227px) rotate(42deg) scaleX(0.3);
    }
    3% {
        -webkit-transform: translate(446px, 227px) rotate(37.8deg) scaleX(0.33);
        transform: translate(446px, 227px) rotate(37.8deg) scaleX(0.33);
    }
    6% {
        -webkit-transform: translate(437px, 227px) rotate(33.6deg) scaleX(0.36);
        transform: translate(437px, 227px) rotate(33.6deg) scaleX(0.36);
    }
    9% {
        -webkit-transform: translate(430px, 227px) rotate(29.4deg) scaleX(0.39);
        transform: translate(430px, 227px) rotate(29.4deg) scaleX(0.39);
    }
    12% {
        -webkit-transform: translate(424px, 227px) rotate(25.2deg) scaleX(0.42);
        transform: translate(424px, 227px) rotate(25.2deg) scaleX(0.42);
    }
    15% {
        -webkit-transform: translate(417px, 227px) rotate(21deg) scaleX(0.45);
        transform: translate(417px, 227px) rotate(21deg) scaleX(0.45);
    }
    18% {
        -webkit-transform: translate(412px, 227px) rotate(16.8deg) scaleX(0.48);
        transform: translate(412px, 227px) rotate(16.8deg) scaleX(0.48);
    }
    21% {
        -webkit-transform: translate(406px, 227px) rotate(12.6deg) scaleX(0.51);
        transform: translate(406px, 227px) rotate(12.6deg) scaleX(0.51);
    }
    24% {
        -webkit-transform: translate(401px, 227px) rotate(8.4deg) scaleX(0.54);
        transform: translate(401px, 227px) rotate(8.4deg) scaleX(0.54);
    }
    27% {
        -webkit-transform: translate(395px, 227px) rotate(4.2deg) scaleX(0.57);
        transform: translate(395px, 227px) rotate(4.2deg) scaleX(0.57);
    }
    30% {
        -webkit-transform: translate(389px, 227px) rotate(0deg) scaleX(0.6);
        transform: translate(389px, 227px) rotate(0deg) scaleX(0.6);
        opacity: 1;
    }
    to {
        opacity: 0.5;
        -webkit-transform: translate(0px, 227px) rotate(0deg) scaleX(6);
        transform: translate(0px, 227px) rotate(0deg) scaleX(6);
    }
}

.pagesBendShadowLeftMiddle {
    -webkit-animation-name: pagesBendShadowLeftMiddle;
    animation-name: pagesBendShadowLeftMiddle;
}


/*region cross-browser*/

@-webkit-keyframes pagesBendShadowNextLeftMiddle {
    from {
        opacity: 0.3;
        -webkit-transform: translate(458px, 220px) rotate(42deg) scaleX(0.2);
        transform: translate(458px, 220px) rotate(42deg) scaleX(0.2);
    }
    3% {
        -webkit-transform: translate(471px, 194px) rotate(37.8deg) scaleX(0.207);
        transform: translate(471px, 194px) rotate(37.8deg) scaleX(0.207);
    }
    6% {
        -webkit-transform: translate(476px, 169px) rotate(33.6deg) scaleX(0.214);
        transform: translate(476px, 169px) rotate(33.6deg) scaleX(0.214);
    }
    9% {
        -webkit-transform: translate(430px, 227px) rotate(29.4deg) scaleX(0.221);
        transform: translate(430px, 227px) rotate(29.4deg) scaleX(0.221);
    }
    12% {
        -webkit-transform: translate(475px, 118px) rotate(25.2deg) scaleX(0.228);
        transform: translate(475px, 118px) rotate(25.2deg) scaleX(0.228);
    }
    15% {
        -webkit-transform: translate(459px, 118px) rotate(21deg) scaleX(0.235);
        transform: translate(459px, 118px) rotate(21deg) scaleX(0.235);
    }
    18% {
        -webkit-transform: translate(458px, 74px) rotate(16.8deg) scaleX(0.242);
        transform: translate(458px, 74px) rotate(16.8deg) scaleX(0.242);
    }
    21% {
        -webkit-transform: translate(440px, 74px) rotate(12.6deg) scaleX(0.249);
        transform: translate(440px, 74px) rotate(12.6deg) scaleX(0.249);
    }
    24% {
        -webkit-transform: translate(423px, 74px) rotate(8.4deg) scaleX(0.256);
        transform: translate(423px, 74px) rotate(8.4deg) scaleX(0.256);
    }
    27% {
        -webkit-transform: translate(406px, 73px) rotate(4.2deg) scaleX(0.263);
        transform: translate(406px, 73px) rotate(4.2deg) scaleX(0.263);
    }
    30% {
        -webkit-transform: translate(390px, 23px) rotate(0deg) scaleX(0.27);
        transform: translate(390px, 23px) rotate(0deg) scaleX(0.27);
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate(0px, 23px) rotate(0deg) scaleX(3);
        transform: translate(0px, 23px) rotate(0deg) scaleX(3);
    }
}


/* endregion */

@keyframes pagesBendShadowNextLeftMiddle {
    from {
        opacity: 0.3;
        -webkit-transform: translate(458px, 220px) rotate(42deg) scaleX(0.2);
        transform: translate(458px, 220px) rotate(42deg) scaleX(0.2);
    }
    3% {
        -webkit-transform: translate(471px, 194px) rotate(37.8deg) scaleX(0.207);
        transform: translate(471px, 194px) rotate(37.8deg) scaleX(0.207);
    }
    6% {
        -webkit-transform: translate(476px, 169px) rotate(33.6deg) scaleX(0.214);
        transform: translate(476px, 169px) rotate(33.6deg) scaleX(0.214);
    }
    9% {
        -webkit-transform: translate(430px, 227px) rotate(29.4deg) scaleX(0.221);
        transform: translate(430px, 227px) rotate(29.4deg) scaleX(0.221);
    }
    12% {
        -webkit-transform: translate(475px, 118px) rotate(25.2deg) scaleX(0.228);
        transform: translate(475px, 118px) rotate(25.2deg) scaleX(0.228);
    }
    15% {
        -webkit-transform: translate(459px, 118px) rotate(21deg) scaleX(0.235);
        transform: translate(459px, 118px) rotate(21deg) scaleX(0.235);
    }
    18% {
        -webkit-transform: translate(458px, 74px) rotate(16.8deg) scaleX(0.242);
        transform: translate(458px, 74px) rotate(16.8deg) scaleX(0.242);
    }
    21% {
        -webkit-transform: translate(440px, 74px) rotate(12.6deg) scaleX(0.249);
        transform: translate(440px, 74px) rotate(12.6deg) scaleX(0.249);
    }
    24% {
        -webkit-transform: translate(423px, 74px) rotate(8.4deg) scaleX(0.256);
        transform: translate(423px, 74px) rotate(8.4deg) scaleX(0.256);
    }
    27% {
        -webkit-transform: translate(406px, 73px) rotate(4.2deg) scaleX(0.263);
        transform: translate(406px, 73px) rotate(4.2deg) scaleX(0.263);
    }
    30% {
        -webkit-transform: translate(390px, 23px) rotate(0deg) scaleX(0.27);
        transform: translate(390px, 23px) rotate(0deg) scaleX(0.27);
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate(0px, 23px) rotate(0deg) scaleX(3);
        transform: translate(0px, 23px) rotate(0deg) scaleX(3);
    }
}

.pagesBendShadowNextLeftMiddle {
    -webkit-animation-name: pagesBendShadowNextLeftMiddle;
    animation-name: pagesBendShadowNextLeftMiddle;
}


/*region cross-browser*/

@-webkit-keyframes page2LeftMiddle {
    from {
        -webkit-transform: translate(560px, -34px) rotate(42deg);
        transform: translate(560px, -34px) rotate(42deg);
    }
    3% {
        -webkit-transform: translate(550px, -36px) rotate(37.8deg);
        transform: translate(550px, -36px) rotate(37.8deg);
    }
    6% {
        -webkit-transform: translate(538px, -38px) rotate(33.6deg);
        transform: translate(538px, -38px) rotate(33.6deg);
    }
    9% {
        -webkit-transform: translate(525px, -40px) rotate(29.4deg);
        transform: translate(525px, -40px) rotate(29.4deg);
    }
    12% {
        -webkit-transform: translate(511px, -42px) rotate(25.2deg);
        transform: translate(511px, -42px) rotate(25.2deg);
    }
    15% {
        -webkit-transform: translate(492px, -37px) rotate(21deg);
        transform: translate(492px, -37px) rotate(21deg);
    }
    18% {
        -webkit-transform: translate(474px, -35px) rotate(16.8deg);
        transform: translate(474px, -35px) rotate(16.8deg);
    }
    21% {
        -webkit-transform: translate(454px, -31px) rotate(12.6deg);
        transform: translate(454px, -31px) rotate(12.6deg);
    }
    24% {
        -webkit-transform: translate(435px, -31px) rotate(8.4deg);
        transform: translate(435px, -31px) rotate(8.4deg);
    }
    27% {
        -webkit-transform: translate(411px, -7px) rotate(4.2deg);
        transform: translate(411px, -7px) rotate(4.2deg);
    }
    30% {
        -webkit-transform: translate(390px, 0px) rotate(0deg);
        transform: translate(390px, 0px) rotate(0deg);
    }
    to {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
        transform: translate(0px, 0px) rotate(0deg);
    }
}


/* endregion */

@keyframes page2LeftMiddle {
    from {
        -webkit-transform: translate(560px, -34px) rotate(42deg);
        transform: translate(560px, -34px) rotate(42deg);
    }
    3% {
        -webkit-transform: translate(550px, -36px) rotate(37.8deg);
        transform: translate(550px, -36px) rotate(37.8deg);
    }
    6% {
        -webkit-transform: translate(538px, -38px) rotate(33.6deg);
        transform: translate(538px, -38px) rotate(33.6deg);
    }
    9% {
        -webkit-transform: translate(525px, -40px) rotate(29.4deg);
        transform: translate(525px, -40px) rotate(29.4deg);
    }
    12% {
        -webkit-transform: translate(511px, -42px) rotate(25.2deg);
        transform: translate(511px, -42px) rotate(25.2deg);
    }
    15% {
        -webkit-transform: translate(492px, -37px) rotate(21deg);
        transform: translate(492px, -37px) rotate(21deg);
    }
    18% {
        -webkit-transform: translate(474px, -35px) rotate(16.8deg);
        transform: translate(474px, -35px) rotate(16.8deg);
    }
    21% {
        -webkit-transform: translate(454px, -31px) rotate(12.6deg);
        transform: translate(454px, -31px) rotate(12.6deg);
    }
    24% {
        -webkit-transform: translate(435px, -31px) rotate(8.4deg);
        transform: translate(435px, -31px) rotate(8.4deg);
    }
    27% {
        -webkit-transform: translate(411px, -7px) rotate(4.2deg);
        transform: translate(411px, -7px) rotate(4.2deg);
    }
    30% {
        -webkit-transform: translate(390px, 0px) rotate(0deg);
        transform: translate(390px, 0px) rotate(0deg);
    }
    to {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
        transform: translate(0px, 0px) rotate(0deg);
    }
}

.page2LeftMiddle {
    -webkit-animation-name: page2LeftMiddle;
    animation-name: page2LeftMiddle;
}


/*region cross-browser*/

@-webkit-keyframes p2ContentLeftMiddle {
    from {
        -webkit-transform: translate(-98.2px, 73.2px) rotate(-42deg);
        transform: translate(-98.2px, 73.2px) rotate(-42deg);
    }
    3% {
        -webkit-transform: translate(-88.5px, 72.4px) rotate(-37.8deg);
        transform: translate(-88.5px, 72.4px) rotate(-37.8deg);
    }
    6% {
        -webkit-transform: translate(-77.4px, 72.1px) rotate(-33.6deg);
        transform: translate(-77.4px, 72.1px) rotate(-33.6deg);
    }
    9% {
        -webkit-transform: translate(-64.9px, 72.7px) rotate(-29.4deg);
        transform: translate(-64.9px, 72.7px) rotate(-29.4deg);
    }
    12% {
        -webkit-transform: translate(-51.6px, 74.6px) rotate(-25.2deg);
        transform: translate(-51.6px, 74.6px) rotate(-25.2deg);
    }
    15% {
        -webkit-transform: translate(-35.8px, 70.4px) rotate(-21deg);
        transform: translate(-35.8px, 70.4px) rotate(-21deg);
    }
    18% {
        -webkit-transform: translate(-19.2px, 71.8px) rotate(-16.8deg);
        transform: translate(-19.2px, 71.8px) rotate(-16.8deg);
    }
    21% {
        -webkit-transform: translate(-0.8px, 73.2px) rotate(-12.6deg);
        transform: translate(-0.8px, 73.2px) rotate(-12.6deg);
    }
    24% {
        -webkit-transform: translate(17.8px, 81.3px) rotate(-8.4deg);
        transform: translate(17.8px, 81.3px) rotate(-8.4deg);
    }
    27% {
        -webkit-transform: translate(39.1px, 67.9px) rotate(-4.2deg);
        transform: translate(39.1px, 67.9px) rotate(-4.2deg);
    }
    30% {
        -webkit-transform: translate(60.2px, 74.8px) rotate(0deg);
        transform: translate(60.2px, 74.8px) rotate(0deg);
    }
    to {
        -webkit-transform: translate(450px, 75.1px) rotate(0deg);
        transform: translate(450px, 75.1px) rotate(0deg);
    }
}


/* endregion */

@keyframes p2ContentLeftMiddle {
    from {
        -webkit-transform: translate(-98.2px, 73.2px) rotate(-42deg);
        transform: translate(-98.2px, 73.2px) rotate(-42deg);
    }
    3% {
        -webkit-transform: translate(-88.5px, 72.4px) rotate(-37.8deg);
        transform: translate(-88.5px, 72.4px) rotate(-37.8deg);
    }
    6% {
        -webkit-transform: translate(-77.4px, 72.1px) rotate(-33.6deg);
        transform: translate(-77.4px, 72.1px) rotate(-33.6deg);
    }
    9% {
        -webkit-transform: translate(-64.9px, 72.7px) rotate(-29.4deg);
        transform: translate(-64.9px, 72.7px) rotate(-29.4deg);
    }
    12% {
        -webkit-transform: translate(-51.6px, 74.6px) rotate(-25.2deg);
        transform: translate(-51.6px, 74.6px) rotate(-25.2deg);
    }
    15% {
        -webkit-transform: translate(-35.8px, 70.4px) rotate(-21deg);
        transform: translate(-35.8px, 70.4px) rotate(-21deg);
    }
    18% {
        -webkit-transform: translate(-19.2px, 71.8px) rotate(-16.8deg);
        transform: translate(-19.2px, 71.8px) rotate(-16.8deg);
    }
    21% {
        -webkit-transform: translate(-0.8px, 73.2px) rotate(-12.6deg);
        transform: translate(-0.8px, 73.2px) rotate(-12.6deg);
    }
    24% {
        -webkit-transform: translate(17.8px, 81.3px) rotate(-8.4deg);
        transform: translate(17.8px, 81.3px) rotate(-8.4deg);
    }
    27% {
        -webkit-transform: translate(39.1px, 67.9px) rotate(-4.2deg);
        transform: translate(39.1px, 67.9px) rotate(-4.2deg);
    }
    30% {
        -webkit-transform: translate(60.2px, 74.8px) rotate(0deg);
        transform: translate(60.2px, 74.8px) rotate(0deg);
    }
    to {
        -webkit-transform: translate(450px, 75.1px) rotate(0deg);
        transform: translate(450px, 75.1px) rotate(0deg);
    }
}

.p2ContentLeftMiddle {
    -webkit-animation-name: p2ContentLeftMiddle;
    animation-name: p2ContentLeftMiddle;
}


/*region cross-browser*/

@-webkit-keyframes p2ShadowLeftMiddle {
    from {
        -webkit-transform: translate(253px, 207.7px) rotate(-42deg);
        transform: translate(253px, 207.7px) rotate(-42deg);
    }
    3% {
        -webkit-transform: translate(253px, 195.7px) rotate(-37.8deg);
        transform: translate(253px, 195.7px) rotate(-37.8deg);
    }
    6% {
        -webkit-transform: translate(255.4px, 182.7px) rotate(-33.6deg);
        transform: translate(255.4px, 182.7px) rotate(-33.6deg);
    }
    9% {
        -webkit-transform: translate(260.4px, 170.7px) rotate(-29.4deg);
        transform: translate(260.4px, 170.7px) rotate(-29.4deg);
    }
    12% {
        -webkit-transform: translate(267.4px, 159.7px) rotate(-25.2deg);
        transform: translate(267.4px, 159.7px) rotate(-25.2deg);
    }
    15% {
        -webkit-transform: translate(277.4px, 141.7px) rotate(-21deg);
        transform: translate(277.4px, 141.7px) rotate(-21deg);
    }
    18% {
        -webkit-transform: translate(289px, 129.7px) rotate(-16.8deg);
        transform: translate(289px, 129.7px) rotate(-16.8deg);
    }
    21% {
        -webkit-transform: translate(304px, 116.7px) rotate(-12.6deg);
        transform: translate(304px, 116.7px) rotate(-12.6deg);
    }
    24% {
        -webkit-transform: translate(320px, 110.7px) rotate(-8.4deg);
        transform: translate(320px, 110.7px) rotate(-8.4deg);
    }
    27% {
        -webkit-transform: translate(340px, 83.7px) rotate(-4.2deg);
        transform: translate(340px, 83.7px) rotate(-4.2deg);
    }
    30% {
        -webkit-transform: translate(360px, 74.7px) rotate(0deg);
        transform: translate(360px, 74.7px) rotate(0deg);
    }
    to {
        -webkit-transform: translate(750px, 75.1px) rotate(0deg);
        transform: translate(750px, 75.1px) rotate(0deg);
    }
}


/* endregion */

@keyframes p2ShadowLeftMiddle {
    from {
        -webkit-transform: translate(253px, 207.7px) rotate(-42deg);
        transform: translate(253px, 207.7px) rotate(-42deg);
    }
    3% {
        -webkit-transform: translate(253px, 195.7px) rotate(-37.8deg);
        transform: translate(253px, 195.7px) rotate(-37.8deg);
    }
    6% {
        -webkit-transform: translate(255.4px, 182.7px) rotate(-33.6deg);
        transform: translate(255.4px, 182.7px) rotate(-33.6deg);
    }
    9% {
        -webkit-transform: translate(260.4px, 170.7px) rotate(-29.4deg);
        transform: translate(260.4px, 170.7px) rotate(-29.4deg);
    }
    12% {
        -webkit-transform: translate(267.4px, 159.7px) rotate(-25.2deg);
        transform: translate(267.4px, 159.7px) rotate(-25.2deg);
    }
    15% {
        -webkit-transform: translate(277.4px, 141.7px) rotate(-21deg);
        transform: translate(277.4px, 141.7px) rotate(-21deg);
    }
    18% {
        -webkit-transform: translate(289px, 129.7px) rotate(-16.8deg);
        transform: translate(289px, 129.7px) rotate(-16.8deg);
    }
    21% {
        -webkit-transform: translate(304px, 116.7px) rotate(-12.6deg);
        transform: translate(304px, 116.7px) rotate(-12.6deg);
    }
    24% {
        -webkit-transform: translate(320px, 110.7px) rotate(-8.4deg);
        transform: translate(320px, 110.7px) rotate(-8.4deg);
    }
    27% {
        -webkit-transform: translate(340px, 83.7px) rotate(-4.2deg);
        transform: translate(340px, 83.7px) rotate(-4.2deg);
    }
    30% {
        -webkit-transform: translate(360px, 74.7px) rotate(0deg);
        transform: translate(360px, 74.7px) rotate(0deg);
    }
    to {
        -webkit-transform: translate(750px, 75.1px) rotate(0deg);
        transform: translate(750px, 75.1px) rotate(0deg);
    }
}

.p2ShadowLeftMiddle {
    -webkit-animation-name: p2ShadowLeftMiddle;
    animation-name: p2ShadowLeftMiddle;
}


/*endregion*/


/* Hover Right Page */


/*region*/


/*Elements going up/in */


/*region cross-browser*/

@-webkit-keyframes hoverRightP2ContentIn {
    from {
        -webkit-transform: translate(-140.9px, 71.9px) rotate(-42deg);
        transform: translate(-140.9px, 71.9px) rotate(-42deg);
    }
    to {
        -webkit-transform: translate(-97.8px, 73.8px) rotate(-42deg);
        transform: translate(-97.8px, 73.8px) rotate(-42deg);
    }
}


/* endregion */

@keyframes hoverRightP2ContentIn {
    from {
        -webkit-transform: translate(-140.9px, 71.9px) rotate(-42deg);
        transform: translate(-140.9px, 71.9px) rotate(-42deg);
    }
    to {
        -webkit-transform: translate(-97.8px, 73.8px) rotate(-42deg);
        transform: translate(-97.8px, 73.8px) rotate(-42deg);
    }
}

.hoverRightP2ContentIn {
    -webkit-animation-name: hoverRightP2ContentIn;
    animation-name: hoverRightP2ContentIn;
}

.animated.hoverRightP2ContentIn {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
}


/*region cross-browser*/

@-webkit-keyframes hoverRightP2ShadowIn {
    from {
        -webkit-transform: translate(210.9px, 205px) rotate(-42deg);
        transform: translate(210.9px, 205px) rotate(-42deg);
    }
    to {
        -webkit-transform: translate(253px, 207.7px) rotate(-42deg);
        transform: translate(253px, 207.7px) rotate(-42deg);
    }
}


/* endregion */

@keyframes hoverRightP2ShadowIn {
    from {
        -webkit-transform: translate(210.9px, 205px) rotate(-42deg);
        transform: translate(210.9px, 205px) rotate(-42deg);
    }
    to {
        -webkit-transform: translate(253px, 207.7px) rotate(-42deg);
        transform: translate(253px, 207.7px) rotate(-42deg);
    }
}

.hoverRightP2ShadowIn {
    -webkit-animation-name: hoverRightP2ShadowIn;
    animation-name: hoverRightP2ShadowIn;
}

.animated.hoverRightP2ShadowIn {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
}


/*region cross-browser*/

@-webkit-keyframes hoverRightPage3In {
    from {
        -webkit-transform: translate(591px, -4px) rotate(42deg);
        transform: translate(591px, -4px) rotate(42deg);
    }
    to {
        -webkit-transform: translate(560px, -34px) rotate(42deg);
        transform: translate(560px, -34px) rotate(42deg);
    }
}


/* endregion */

@keyframes hoverRightPage3In {
    from {
        -webkit-transform: translate(591px, -4px) rotate(42deg);
        transform: translate(591px, -4px) rotate(42deg);
    }
    to {
        -webkit-transform: translate(560px, -34px) rotate(42deg);
        transform: translate(560px, -34px) rotate(42deg);
    }
}

.hoverRightPage3In {
    -webkit-animation-name: hoverRightPage3In;
    animation-name: hoverRightPage3In;
}

.animated.hoverRightPage3In {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
}


/*region cross-browser*/

@-webkit-keyframes hoverRightP3ContentIn {
    from {
        -webkit-transform: translate(859px, -18px) rotate(27deg);
        transform: translate(859px, -18px) rotate(27deg);
    }
    to {
        -webkit-transform: translate(824px, 4px) rotate(27deg);
        transform: translate(824px, 4px) rotate(27deg);
    }
}


/* endregion */

@keyframes hoverRightP3ContentIn {
    from {
        -webkit-transform: translate(859px, -18px) rotate(27deg);
        transform: translate(859px, -18px) rotate(27deg);
    }
    to {
        -webkit-transform: translate(824px, 4px) rotate(27deg);
        transform: translate(824px, 4px) rotate(27deg);
    }
}

.hoverRightP3ContentIn {
    -webkit-animation-name: hoverRightP3ContentIn;
    animation-name: hoverRightP3ContentIn;
}

.animated.hoverRightP3ContentIn {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
}


/*region cross-browser*/

@-webkit-keyframes hoverRightP3BendShadowIn {
    from {
        opacity: 0;
        -webkit-transform: translate(-334.689px, 22px) rotate(-27deg) scaleX(0);
        transform: translate(-334.689px, 22px) rotate(-27deg) scaleX(0);
    }
    to {
        opacity: 0.1;
        -webkit-transform: translate(-335.689px, 0px) rotate(-27deg) scaleX(0.3);
        transform: translate(-335.689px, 0px) rotate(-27deg) scaleX(0.3);
    }
}


/* endregion */

@keyframes hoverRightP3BendShadowIn {
    from {
        opacity: 0;
        -webkit-transform: translate(-334.689px, 22px) rotate(-27deg) scaleX(0);
        transform: translate(-334.689px, 22px) rotate(-27deg) scaleX(0);
    }
    to {
        opacity: 0.1;
        -webkit-transform: translate(-335.689px, 0px) rotate(-27deg) scaleX(0.3);
        transform: translate(-335.689px, 0px) rotate(-27deg) scaleX(0.3);
    }
}

.hoverRightP3BendShadowIn {
    -webkit-animation-name: hoverRightP3BendShadowIn;
    animation-name: hoverRightP3BendShadowIn;
}

.animated.hoverRightP3BendShadowIn {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
}


/*region cross-browser*/

@-webkit-keyframes hoverRightPagesBendShadowIn {
    from {
        opacity: 0;
        -webkit-transform: translate(511px, 227px) rotate(42deg) scaleX(0);
        transform: translate(511px, 227px) rotate(42deg) scaleX(0);
    }
    to {
        opacity: 1.6;
        -webkit-transform: translate(454px, 227px) rotate(42deg) scaleX(0.3);
        transform: translate(454px, 227px) rotate(42deg) scaleX(0.3);
    }
}


/* endregion */

@keyframes hoverRightPagesBendShadowIn {
    from {
        opacity: 0;
        -webkit-transform: translate(511px, 227px) rotate(42deg) scaleX(0);
        transform: translate(511px, 227px) rotate(42deg) scaleX(0);
    }
    to {
        opacity: 1.6;
        -webkit-transform: translate(454px, 227px) rotate(42deg) scaleX(0.3);
        transform: translate(454px, 227px) rotate(42deg) scaleX(0.3);
    }
}

.hoverRightPagesBendShadowIn {
    -webkit-animation-name: hoverRightPagesBendShadowIn;
    animation-name: hoverRightPagesBendShadowIn;
}

.animated.hoverRightPagesBendShadowIn {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
}


/*region cross-browser*/

@-webkit-keyframes hoverRightPagesBendShadowNextIn {
    from {
        opacity: 0;
        -webkit-transform: translate(517px, 220px) rotate(42deg) scaleX(0);
        transform: translate(517px, 220px) rotate(42deg) scaleX(0);
    }
    to {
        opacity: 1.3;
        -webkit-transform: translate(458px, 220px) rotate(42deg) scaleX(0.2);
        transform: translate(458px, 220px) rotate(42deg) scaleX(0.2);
    }
}


/* endregion */

@keyframes hoverRightPagesBendShadowNextIn {
    from {
        opacity: 0;
        -webkit-transform: translate(517px, 220px) rotate(42deg) scaleX(0);
        transform: translate(517px, 220px) rotate(42deg) scaleX(0);
    }
    to {
        opacity: 1.3;
        -webkit-transform: translate(458px, 220px) rotate(42deg) scaleX(0.2);
        transform: translate(458px, 220px) rotate(42deg) scaleX(0.2);
    }
}

.hoverRightPagesBendShadowNextIn {
    -webkit-animation-name: hoverRightPagesBendShadowNextIn;
    animation-name: hoverRightPagesBendShadowNextIn;
}

.animated.hoverRightPagesBendShadowNextIn {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
}


/* Elements going down/out */


/*region cross-browser*/

@-webkit-keyframes hoverRightPage2Out {
    from {
        -webkit-transform: translate(572px, -67px) rotate(42deg);
        transform: translate(572px, -67px) rotate(42deg);
    }
    to {
        -webkit-transform: translate(617px, -26px) rotate(42deg);
        transform: translate(617px, -26px) rotate(42deg);
    }
}


/* endregion */

@keyframes hoverRightPage2Out {
    from {
        -webkit-transform: translate(572px, -67px) rotate(42deg);
        transform: translate(572px, -67px) rotate(42deg);
    }
    to {
        -webkit-transform: translate(617px, -26px) rotate(42deg);
        transform: translate(617px, -26px) rotate(42deg);
    }
}

.hoverRightPage2Out {
    -webkit-animation-name: hoverRightPage2Out;
    animation-name: hoverRightPage2Out;
}

.animated.hoverRightPage2Out {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
}


/*region cross-browser*/

@-webkit-keyframes hoverRightP2ContentOut {
    from {
        -webkit-transform: translate(-96.9px, 72.2px) rotate(-42deg);
        transform: translate(-96.9px, 72.2px) rotate(-42deg);
    }
    to {
        -webkit-transform: translate(-157.9px, 72.2px) rotate(-42deg);
        transform: translate(-157.9px, 72.2px) rotate(-42deg);
    }
}


/* endregion */

@keyframes hoverRightP2ContentOut {
    from {
        -webkit-transform: translate(-96.9px, 72.2px) rotate(-42deg);
        transform: translate(-96.9px, 72.2px) rotate(-42deg);
    }
    to {
        -webkit-transform: translate(-157.9px, 72.2px) rotate(-42deg);
        transform: translate(-157.9px, 72.2px) rotate(-42deg);
    }
}

.hoverRightP2ContentOut {
    -webkit-animation-name: hoverRightP2ContentOut;
    animation-name: hoverRightP2ContentOut;
}

.animated.hoverRightP2ContentOut {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
}


/*region cross-browser*/

@-webkit-keyframes hoverRightP2ShadowOut {
    from {
        -webkit-transform: translate(355px, 206px) rotate(-42deg);
        transform: translate(355px, 206px) rotate(-42deg);
    }
    to {
        -webkit-transform: translate(293px, 206px) rotate(-42deg);
        transform: translate(293px, 206px) rotate(-42deg);
    }
}


/* endregion */

@keyframes hoverRightP2ShadowOut {
    from {
        -webkit-transform: translate(355px, 206px) rotate(-42deg);
        transform: translate(355px, 206px) rotate(-42deg);
    }
    to {
        -webkit-transform: translate(293px, 206px) rotate(-42deg);
        transform: translate(293px, 206px) rotate(-42deg);
    }
}

.hoverRightP2ShadowOut {
    -webkit-animation-name: hoverRightP2ShadowOut;
    animation-name: hoverRightP2ShadowOut;
}

.animated.hoverRightP2ShadowOut {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
}


/*endregion*/


/* Hover left page */


/*region*/


/* Elements going in/up */


/*region cross-browser*/

@-webkit-keyframes hoverLeftPage3In {
    from {
        -webkit-transform: translate(158px, -6px) rotate(-42deg);
        transform: translate(158px, -6px) rotate(-42deg);
    }
    to {
        -webkit-transform: translate(194px, -36px) rotate(-42deg);
        transform: translate(194px, -36px) rotate(-42deg);
    }
}


/* endregion */

@keyframes hoverLeftPage3In {
    from {
        -webkit-transform: translate(158px, -6px) rotate(-42deg);
        transform: translate(158px, -6px) rotate(-42deg);
    }
    to {
        -webkit-transform: translate(194px, -36px) rotate(-42deg);
        transform: translate(194px, -36px) rotate(-42deg);
    }
}

.hoverLeftPage3In {
    -webkit-animation-name: hoverLeftPage3In;
    animation-name: hoverLeftPage3In;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

.animated.hoverLeftPage3In {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
}


/*region cross-browser*/

@-webkit-keyframes hoverLeftP3ContentIn {
    from {
        -webkit-transform: translate(140.1px, 74.1px) rotate(42deg);
        transform: translate(140.1px, 74.1px) rotate(42deg);
    }
    to {
        -webkit-transform: translate(92.9px, 72.2px) rotate(42deg);
        transform: translate(92.9px, 72.2px) rotate(42deg);
    }
}


/* endregion */

@keyframes hoverLeftP3ContentIn {
    from {
        -webkit-transform: translate(140.1px, 74.1px) rotate(42deg);
        transform: translate(140.1px, 74.1px) rotate(42deg);
    }
    to {
        -webkit-transform: translate(92.9px, 72.2px) rotate(42deg);
        transform: translate(92.9px, 72.2px) rotate(42deg);
    }
}

.hoverLeftP3ContentIn {
    -webkit-animation-name: hoverLeftP3ContentIn;
    animation-name: hoverLeftP3ContentIn;
}

.animated.hoverLeftP3ContentIn {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
}


/*region cross-browser*/

@-webkit-keyframes hoverLeftP3ShadowIn {
    from {
        -webkit-transform: translate(-211.1px, 208px) rotate(42deg);
        transform: translate(-211.1px, 208px) rotate(42deg);
    }
    to {
        -webkit-transform: translate(-258.1px, 206.1px) rotate(42deg);
        transform: translate(-258.1px, 206.1px) rotate(42deg);
    }
}


/* endregion */

@keyframes hoverLeftP3ShadowIn {
    from {
        -webkit-transform: translate(-211.1px, 208px) rotate(42deg);
        transform: translate(-211.1px, 208px) rotate(42deg);
    }
    to {
        -webkit-transform: translate(-258.1px, 206.1px) rotate(42deg);
        transform: translate(-258.1px, 206.1px) rotate(42deg);
    }
}

.hoverLeftP3ShadowIn {
    -webkit-animation-name: hoverLeftP3ShadowIn;
    animation-name: hoverLeftP3ShadowIn;
}

.animated.hoverLeftP3ShadowIn {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
}


/*region cross-browser*/

@-webkit-keyframes hoverLeftP2ContentIn {
    from {
        -webkit-transform: translate(-863px, -21px) rotate(-27deg);
        transform: translate(-863px, -21px) rotate(-27deg);
    }
    to {
        -webkit-transform: translate(-820px, 4px) rotate(-27deg);
        transform: translate(-820px, 4px) rotate(-27deg);
    }
}


/* endregion */

@keyframes hoverLeftP2ContentIn {
    from {
        -webkit-transform: translate(-863px, -21px) rotate(-27deg);
        transform: translate(-863px, -21px) rotate(-27deg);
    }
    to {
        -webkit-transform: translate(-820px, 4px) rotate(-27deg);
        transform: translate(-820px, 4px) rotate(-27deg);
    }
}

.hoverLeftP2ContentIn {
    -webkit-animation-name: hoverLeftP2ContentIn;
    animation-name: hoverLeftP2ContentIn;
}

.animated.hoverLeftP2ContentIn {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
}


/*Position of the p2 shadow out of the book*/

.hoverLeftP2ShadowIn {
    -webkit-transform: translate(-821px, 0px) rotate(-27deg)!important;
    transform: translate(-821px, 0px) rotate(-27deg)!important;
}


/*region cross-browser*/

@-webkit-keyframes hoverLeftP2BendShadowIn {
    from {
        opacity: 0;
        -webkit-transform: translate(374.689px, 9px) rotate(27deg) scaleX(0);
        transform: translate(374.689px, 9px) rotate(27deg) scaleX(0);
    }
    to {
        opacity: 0.1;
        -webkit-transform: translate(359.689px, 9px) rotate(27deg) scaleX(0.3);
        transform: translate(359.689px, 9px) rotate(27deg) scaleX(0.3);
    }
}


/* endregion */

@keyframes hoverLeftP2BendShadowIn {
    from {
        opacity: 0;
        -webkit-transform: translate(374.689px, 9px) rotate(27deg) scaleX(0);
        transform: translate(374.689px, 9px) rotate(27deg) scaleX(0);
    }
    to {
        opacity: 0.1;
        -webkit-transform: translate(359.689px, 9px) rotate(27deg) scaleX(0.3);
        transform: translate(359.689px, 9px) rotate(27deg) scaleX(0.3);
    }
}

.hoverLeftP2BendShadowIn {
    -webkit-animation-name: hoverLeftP2BendShadowIn;
    animation-name: hoverLeftP2BendShadowIn;
}

.animated.hoverLeftP2BendShadowIn {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
}


/*region cross-browser*/

@-webkit-keyframes hoverLeftPagesBendShadowIn {
    from {
        opacity: 0;
        -webkit-transform: translate(-696px, 23px) rotate(138deg) scaleX(0);
        transform: translate(-696px, 23px) rotate(138deg) scaleX(0);
    }
    to {
        opacity: 1.6;
        -webkit-transform: translate(-688px, -39px) rotate(138deg) scaleX(0.3);
        transform: translate(-688px, -39px) rotate(138deg) scaleX(0.3);
    }
}


/* endregion */

@keyframes hoverLeftPagesBendShadowIn {
    from {
        opacity: 0;
        -webkit-transform: translate(-696px, 23px) rotate(138deg) scaleX(0);
        transform: translate(-696px, 23px) rotate(138deg) scaleX(0);
    }
    to {
        opacity: 1.6;
        -webkit-transform: translate(-688px, -39px) rotate(138deg) scaleX(0.3);
        transform: translate(-688px, -39px) rotate(138deg) scaleX(0.3);
    }
}

.hoverLeftPagesBendShadowIn {
    -webkit-animation-name: hoverLeftPagesBendShadowIn;
    animation-name: hoverLeftPagesBendShadowIn;
}

.animated.hoverLeftPagesBendShadowIn {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
}


/*region cross-browser*/

@-webkit-keyframes hoverLeftPagesBendShadowNextIn {
    from {
        opacity: 0;
        -webkit-transform: translate(-596px, 134px) rotate(138deg) scaleX(0);
        transform: translate(-596px, 134px) rotate(138deg) scaleX(0);
    }
    to {
        opacity: 1.3;
        -webkit-transform: translate(-533px, 134px) rotate(138deg) scaleX(0.2);
        transform: translate(-533px, 134px) rotate(138deg) scaleX(0.2);
    }
}


/* endregion */

@keyframes hoverLeftPagesBendShadowNextIn {
    from {
        opacity: 0;
        -webkit-transform: translate(-596px, 134px) rotate(138deg) scaleX(0);
        transform: translate(-596px, 134px) rotate(138deg) scaleX(0);
    }
    to {
        opacity: 1.3;
        -webkit-transform: translate(-533px, 134px) rotate(138deg) scaleX(0.2);
        transform: translate(-533px, 134px) rotate(138deg) scaleX(0.2);
    }
}

.hoverLeftPagesBendShadowNextIn {
    -webkit-animation-name: hoverLeftPagesBendShadowNextIn;
    animation-name: hoverLeftPagesBendShadowNextIn;
}

.animated.hoverLeftPagesBendShadowNextIn {
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
}


/* Elements going out/down */

.hoverLeftPage3Out {
    -webkit-transform: translate(158px, -6px) rotate(-42deg)!important;
    transform: translate(158px, -6px) rotate(-42deg)!important;
}

.hoverLeftP3ContentOut {
    -webkit-transform: translate(140.1px, 74.1px) rotate(42deg)!important;
    transform: translate(140.1px, 74.1px) rotate(42deg)!important;
}

.hoverLeftP3ShadowOut {
    -webkit-transform: translate(-211.1px, 208px) rotate(42deg)!important;
    transform: translate(-211.1px, 208px) rotate(42deg)!important;
}

.hoverLeftP2ContentOut {
    -webkit-transform: translate(-863px, -21px) rotate(-27deg)!important;
    transform: translate(-863px, -21px) rotate(-27deg)!important;
}


/*Position of the p2 shadow out of the book*/

.hoverLeftP2ShadowOut {
    -webkit-transform: translate(-821px, 0px) rotate(-27deg)!important;
    transform: translate(-821px, 0px) rotate(-27deg)!important;
}

.hoverLeftP2BendShadowOut {
    opacity: 0;
    -webkit-transform: translate(374.689px, 9px) rotate(27deg) scaleX(0)!important;
    transform: translate(374.689px, 9px) rotate(27deg) scaleX(0)!important;
}

.hoverLeftPagesBendShadowOut {
    opacity: 0;
    -webkit-transform: translate(-759px, 23px) rotate(138deg) scaleX(0)!important;
    transform: translate(-759px, 23px) rotate(138deg) scaleX(0)!important;
}

.hoverLeftPagesBendShadowNextOut {
    opacity: 0;
    -webkit-transform: translate(-596px, 134px) rotate(138deg) scaleX(0)!important;
    transform: translate(-596px, 134px) rotate(138deg) scaleX(0)!important;
}


/*endregion*/


/* Left page to right animation */


/* region */


/*region cross-browser*/

@-webkit-keyframes page3RightMiddle {
    from {
        -webkit-transform: translate(194px, -36px) rotate(-42deg);
        transform: translate(194px, -36px) rotate(-42deg);
    }
    3% {
        -webkit-transform: translate(204px, -38px) rotate(-37.8deg);
        transform: translate(204px, -38px) rotate(-37.8deg);
    }
    6% {
        -webkit-transform: translate(216px, -42px) rotate(-33.6deg);
        transform: translate(216px, -42px) rotate(-33.6deg);
    }
    9% {
        -webkit-transform: translate(228px, -46px) rotate(-29.4deg);
        transform: translate(228px, -46px) rotate(-29.4deg);
    }
    12% {
        -webkit-transform: translate(246px, -42px) rotate(-25.2deg);
        transform: translate(246px, -42px) rotate(-25.2deg);
    }
    15% {
        -webkit-transform: translate(261.5px, -45px) rotate(-21deg);
        transform: translate(261.5px, -45px) rotate(-21deg);
    }
    18% {
        -webkit-transform: translate(281.5px, -40px) rotate(-16.8deg);
        transform: translate(281.5px, -40px) rotate(-16.8deg);
    }
    21% {
        -webkit-transform: translate(301.5px, -39px) rotate(-12.6deg);
        transform: translate(301.5px, -39px) rotate(-12.6deg);
    }
    24% {
        -webkit-transform: translate(323.5px, -28px) rotate(-8.4deg);
        transform: translate(323.5px, -28px) rotate(-8.4deg);
    }
    27% {
        -webkit-transform: translate(345.5px, -16px) rotate(-4.2deg);
        transform: translate(345.5px, -16px) rotate(-4.2deg);
    }
    30% {
        -webkit-transform: translate(367.8px, 0px) rotate(0deg);
        transform: translate(367.8px, 0px) rotate(0deg);
    }
    to {
        -webkit-transform: translate(750px, 0) rotate(0deg);
        transform: translate(750px, 0) rotate(0deg);
    }
}


/* endregion */

@keyframes page3RightMiddle {
    from {
        -webkit-transform: translate(194px, -36px) rotate(-42deg);
        transform: translate(194px, -36px) rotate(-42deg);
    }
    3% {
        -webkit-transform: translate(204px, -38px) rotate(-37.8deg);
        transform: translate(204px, -38px) rotate(-37.8deg);
    }
    6% {
        -webkit-transform: translate(216px, -42px) rotate(-33.6deg);
        transform: translate(216px, -42px) rotate(-33.6deg);
    }
    9% {
        -webkit-transform: translate(228px, -46px) rotate(-29.4deg);
        transform: translate(228px, -46px) rotate(-29.4deg);
    }
    12% {
        -webkit-transform: translate(246px, -42px) rotate(-25.2deg);
        transform: translate(246px, -42px) rotate(-25.2deg);
    }
    15% {
        -webkit-transform: translate(261.5px, -45px) rotate(-21deg);
        transform: translate(261.5px, -45px) rotate(-21deg);
    }
    18% {
        -webkit-transform: translate(281.5px, -40px) rotate(-16.8deg);
        transform: translate(281.5px, -40px) rotate(-16.8deg);
    }
    21% {
        -webkit-transform: translate(301.5px, -39px) rotate(-12.6deg);
        transform: translate(301.5px, -39px) rotate(-12.6deg);
    }
    24% {
        -webkit-transform: translate(323.5px, -28px) rotate(-8.4deg);
        transform: translate(323.5px, -28px) rotate(-8.4deg);
    }
    27% {
        -webkit-transform: translate(345.5px, -16px) rotate(-4.2deg);
        transform: translate(345.5px, -16px) rotate(-4.2deg);
    }
    30% {
        -webkit-transform: translate(367.8px, 0px) rotate(0deg);
        transform: translate(367.8px, 0px) rotate(0deg);
    }
    to {
        -webkit-transform: translate(750px, 0) rotate(0deg);
        transform: translate(750px, 0) rotate(0deg);
    }
}

.page3RightMiddle {
    -webkit-animation-name: page3RightMiddle;
    animation-name: page3RightMiddle;
}

@-webkit-keyframes p3ContentRightMiddle {
    from {
        -webkit-transform: translate(92.9px, 72.2px) rotate(42deg);
        transform: translate(92.9px, 72.2px) rotate(42deg);
    }
    3% {
        -webkit-transform: translate(83.9px, 71.9px) rotate(37.8deg);
        transform: translate(83.9px, 71.9px) rotate(37.8deg);
    }
    6% {
        -webkit-transform: translate(71.8px, 73.5px) rotate(33.6deg);
        transform: translate(71.8px, 73.5px) rotate(33.6deg);
    }
    9% {
        -webkit-transform: translate(59.5px, 76.8px) rotate(29.4deg);
        transform: translate(59.5px, 76.8px) rotate(29.4deg);
    }
    12% {
        -webkit-transform: translate(45.1px, 72.1px) rotate(25.2deg);
        transform: translate(45.1px, 72.1px) rotate(25.2deg);
    }
    15% {
        -webkit-transform: translate(29.8px, 77.1px) rotate(21deg);
        transform: translate(29.8px, 77.1px) rotate(21deg);
    }
    18% {
        -webkit-transform: translate(12.9px, 75.3px) rotate(16.8deg);
        transform: translate(12.9px, 75.3px) rotate(16.8deg);
    }
    21% {
        -webkit-transform: translate(-6.3px, 80.1px) rotate(12.6deg);
        transform: translate(-6.3px, 80.1px) rotate(12.6deg);
    }
    24% {
        -webkit-transform: translate(-25.6px, 77.2px) rotate(8.4deg);
        transform: translate(-25.6px, 77.2px) rotate(8.4deg);
    }
    27% {
        -webkit-transform: translate(-46.1px, 76.4px) rotate(4.2deg);
        transform: translate(-46.1px, 76.4px) rotate(4.2deg);
    }
    30% {
        -webkit-transform: translate(-67.9px, 74.9px) rotate(0deg);
        transform: translate(-67.9px, 74.9px) rotate(0deg);
    }
    to {
        -webkit-transform: translate(-450px, 74.9px) rotate(0deg);
        transform: translate(-450px, 74.9px) rotate(0deg);
    }
}

@keyframes p3ContentRightMiddle {
    from {
        -webkit-transform: translate(92.9px, 72.2px) rotate(42deg);
        transform: translate(92.9px, 72.2px) rotate(42deg);
    }
    3% {
        -webkit-transform: translate(83.9px, 71.9px) rotate(37.8deg);
        transform: translate(83.9px, 71.9px) rotate(37.8deg);
    }
    6% {
        -webkit-transform: translate(71.8px, 73.5px) rotate(33.6deg);
        transform: translate(71.8px, 73.5px) rotate(33.6deg);
    }
    9% {
        -webkit-transform: translate(59.5px, 76.8px) rotate(29.4deg);
        transform: translate(59.5px, 76.8px) rotate(29.4deg);
    }
    12% {
        -webkit-transform: translate(45.1px, 72.1px) rotate(25.2deg);
        transform: translate(45.1px, 72.1px) rotate(25.2deg);
    }
    15% {
        -webkit-transform: translate(29.8px, 77.1px) rotate(21deg);
        transform: translate(29.8px, 77.1px) rotate(21deg);
    }
    18% {
        -webkit-transform: translate(12.9px, 75.3px) rotate(16.8deg);
        transform: translate(12.9px, 75.3px) rotate(16.8deg);
    }
    21% {
        -webkit-transform: translate(-6.3px, 80.1px) rotate(12.6deg);
        transform: translate(-6.3px, 80.1px) rotate(12.6deg);
    }
    24% {
        -webkit-transform: translate(-25.6px, 77.2px) rotate(8.4deg);
        transform: translate(-25.6px, 77.2px) rotate(8.4deg);
    }
    27% {
        -webkit-transform: translate(-46.1px, 76.4px) rotate(4.2deg);
        transform: translate(-46.1px, 76.4px) rotate(4.2deg);
    }
    30% {
        -webkit-transform: translate(-67.9px, 74.9px) rotate(0deg);
        transform: translate(-67.9px, 74.9px) rotate(0deg);
    }
    to {
        -webkit-transform: translate(-450px, 74.9px) rotate(0deg);
        transform: translate(-450px, 74.9px) rotate(0deg);
    }
}

.p3ContentRightMiddle {
    -webkit-animation-name: p3ContentRightMiddle;
    animation-name: p3ContentRightMiddle;
}


/*region cross-browser*/

@-webkit-keyframes p3ShadowRightMiddle {
    from {
        -webkit-transform: translate(-554.1px, 0px) rotate(0deg);
        transform: translate(-554.1px, 0px) rotate(0deg);
    }
    to {
        /*        -webkit-transform: translate(-750px, 74.9px) rotate(0deg);*/
        -webkit-transform: translate(0px, 0px) rotate(0deg);
        transform: translate(0px, 0px) rotate(0deg);
        /*        transform: translate(-750px, 74.9px) rotate(0deg);*/
        /*        opacity: 0;*/
    }
}


/* endregion */

@keyframes p3ShadowRightMiddle {
    from {
        -webkit-transform: translate(-554.1px, 0px) rotate(0deg);
        transform: translate(-554.1px, 0px) rotate(0deg);
    }
    to {
        /*        -webkit-transform: translate(-750px, 74.9px) rotate(0deg);*/
        -webkit-transform: translate(0px, 0px) rotate(0deg);
        transform: translate(0px, 0px) rotate(0deg);
        /*        transform: translate(-750px, 74.9px) rotate(0deg);*/
        /*        opacity: 0;*/
    }
}

.p3ShadowRightMiddle {
    -webkit-animation-name: p3ShadowRightMiddle;
    animation-name: p3ShadowRightMiddle;
}


/*region cross-browser*/

@-webkit-keyframes p2ContentRightMiddle {
    from {
        -webkit-transform: translate(-820px, 4px) rotate(-27deg);
        transform: translate(-820px, 4px) rotate(-27deg);
    }
    3% {
        -webkit-transform: translate(-813px, 12px) rotate(-24.3deg);
        transform: translate(-813px, 12px) rotate(-24.3deg);
    }
    6% {
        -webkit-transform: translate(-803px, 23px) rotate(-21.6deg);
        transform: translate(-803px, 23px) rotate(-21.6deg);
    }
    9% {
        -webkit-transform: translate(-792.9px, 35.6px) rotate(-18.9deg);
        transform: translate(-792.9px, 35.6px) rotate(-18.9deg);
    }
    12% {
        -webkit-transform: translate(-781.9px, 38.6px) rotate(-16.2deg);
        transform: translate(-781.9px, 38.6px) rotate(-16.2deg);
    }
    15% {
        -webkit-transform: translate(-771.1px, 50.9px) rotate(-13.5deg);
        transform: translate(-771.1px, 50.9px) rotate(-13.5deg);
    }
    18% {
        -webkit-transform: translate(-759.4px, 55.9px) rotate(-10.8deg);
        transform: translate(-759.4px, 55.9px) rotate(-10.8deg);
    }
    21% {
        -webkit-transform: translate(-746.4px, 66.9px) rotate(-8.1deg);
        transform: translate(-746.4px, 66.9px) rotate(-8.1deg);
    }
    24% {
        -webkit-transform: translate(-733.4px, 68.9px) rotate(-5.4deg);
        transform: translate(-733.4px, 68.9px) rotate(-5.4deg);
    }
    27% {
        -webkit-transform: translate(-711.4px, 72.2px) rotate(-2.7deg);
        transform: translate(-711.4px, 72.2px) rotate(-2.7deg);
    }
    30% {
        -webkit-transform: translate(-678px, 74.9px) rotate(0deg);
        transform: translate(-678px, 74.9px) rotate(0deg);
    }
    to {
        -webkit-transform: translate(-300px, 74.9px) rotate(0deg);
        transform: translate(-300px, 74.9px) rotate(0deg);
    }
}


/* endregion */

@keyframes p2ContentRightMiddle {
    from {
        -webkit-transform: translate(-820px, 4px) rotate(-27deg);
        transform: translate(-820px, 4px) rotate(-27deg);
    }
    3% {
        -webkit-transform: translate(-813px, 12px) rotate(-24.3deg);
        transform: translate(-813px, 12px) rotate(-24.3deg);
    }
    6% {
        -webkit-transform: translate(-803px, 23px) rotate(-21.6deg);
        transform: translate(-803px, 23px) rotate(-21.6deg);
    }
    9% {
        -webkit-transform: translate(-792.9px, 35.6px) rotate(-18.9deg);
        transform: translate(-792.9px, 35.6px) rotate(-18.9deg);
    }
    12% {
        -webkit-transform: translate(-781.9px, 38.6px) rotate(-16.2deg);
        transform: translate(-781.9px, 38.6px) rotate(-16.2deg);
    }
    15% {
        -webkit-transform: translate(-771.1px, 50.9px) rotate(-13.5deg);
        transform: translate(-771.1px, 50.9px) rotate(-13.5deg);
    }
    18% {
        -webkit-transform: translate(-759.4px, 55.9px) rotate(-10.8deg);
        transform: translate(-759.4px, 55.9px) rotate(-10.8deg);
    }
    21% {
        -webkit-transform: translate(-746.4px, 66.9px) rotate(-8.1deg);
        transform: translate(-746.4px, 66.9px) rotate(-8.1deg);
    }
    24% {
        -webkit-transform: translate(-733.4px, 68.9px) rotate(-5.4deg);
        transform: translate(-733.4px, 68.9px) rotate(-5.4deg);
    }
    27% {
        -webkit-transform: translate(-711.4px, 72.2px) rotate(-2.7deg);
        transform: translate(-711.4px, 72.2px) rotate(-2.7deg);
    }
    30% {
        -webkit-transform: translate(-678px, 74.9px) rotate(0deg);
        transform: translate(-678px, 74.9px) rotate(0deg);
    }
    to {
        -webkit-transform: translate(-300px, 74.9px) rotate(0deg);
        transform: translate(-300px, 74.9px) rotate(0deg);
    }
}

.p2ContentRightMiddle {
    -webkit-animation-name: p2ContentRightMiddle;
    animation-name: p2ContentRightMiddle;
}


/*region cross-browser*/

@-webkit-keyframes p2BendShadowRightMiddle {
    from {
        opacity: 0.1;
        -webkit-transform: translate(359.689px, 9px) rotate(27deg) scaleX(0.3);
        transform: translate(359.689px, 9px) rotate(27deg) scaleX(0.3);
    }
    3% {
        -webkit-transform: translate(347.689px, 9px) rotate(24.3deg) scaleX(0.33);
        transform: translate(347.689px, 9px) rotate(24.3deg) scaleX(0.33);
    }
    6% {
        -webkit-transform: translate(333.689px, 9px) rotate(21.6deg) scaleX(0.36);
        transform: translate(333.689px, 9px) rotate(21.6deg) scaleX(0.36);
    }
    9% {
        -webkit-transform: translate(317.689px, 9px) rotate(18.9deg) scaleX(0.39);
        transform: translate(317.689px, 9px) rotate(18.9deg) scaleX(0.39);
    }
    12% {
        -webkit-transform: translate(302px, 9px) rotate(16.2deg) scaleX(0.42);
        transform: translate(302px, 9px) rotate(16.2deg) scaleX(0.42);
    }
    15% {
        -webkit-transform: translate(297px, 9px) rotate(13.5deg) scaleX(0.45);
        transform: translate(297px, 9px) rotate(13.5deg) scaleX(0.45);
    }
    18% {
        -webkit-transform: translate(285px, 9px) rotate(10.8deg) scaleX(0.48);
        transform: translate(285px, 9px) rotate(10.8deg) scaleX(0.48);
    }
    21% {
        -webkit-transform: translate(274px, 9px) rotate(8.1deg) scaleX(0.51);
        transform: translate(274px, 9px) rotate(8.1deg) scaleX(0.51);
    }
    24% {
        -webkit-transform: translate(262px, 9px) rotate(5.4deg) scaleX(0.54);
        transform: translate(262px, 9px) rotate(5.4deg) scaleX(0.54);
    }
    27% {
        -webkit-transform: translate(243px, 9px) rotate(2.7deg) scaleX(0.57);
        transform: translate(243px, 9px) rotate(2.7deg) scaleX(0.57);
    }
    30% {
        -webkit-transform: translate(213.689px, 9px) rotate(0deg) scaleX(0.6);
        transform: translate(213.689px, 9px) rotate(0deg) scaleX(0.6);
        opacity: 0.2;
    }
    to {
        opacity: 0;
        -webkit-transform: translate(-65px, 9px) rotate(0deg) scaleX(1.6);
        transform: translate(-65px, 9px) rotate(0deg) scaleX(1.6);
    }
}


/* endregion */

@keyframes p2BendShadowRightMiddle {
    from {
        opacity: 0.1;
        -webkit-transform: translate(359.689px, 9px) rotate(27deg) scaleX(0.3);
        transform: translate(359.689px, 9px) rotate(27deg) scaleX(0.3);
    }
    3% {
        -webkit-transform: translate(347.689px, 9px) rotate(24.3deg) scaleX(0.33);
        transform: translate(347.689px, 9px) rotate(24.3deg) scaleX(0.33);
    }
    6% {
        -webkit-transform: translate(333.689px, 9px) rotate(21.6deg) scaleX(0.36);
        transform: translate(333.689px, 9px) rotate(21.6deg) scaleX(0.36);
    }
    9% {
        -webkit-transform: translate(317.689px, 9px) rotate(18.9deg) scaleX(0.39);
        transform: translate(317.689px, 9px) rotate(18.9deg) scaleX(0.39);
    }
    12% {
        -webkit-transform: translate(302px, 9px) rotate(16.2deg) scaleX(0.42);
        transform: translate(302px, 9px) rotate(16.2deg) scaleX(0.42);
    }
    15% {
        -webkit-transform: translate(297px, 9px) rotate(13.5deg) scaleX(0.45);
        transform: translate(297px, 9px) rotate(13.5deg) scaleX(0.45);
    }
    18% {
        -webkit-transform: translate(285px, 9px) rotate(10.8deg) scaleX(0.48);
        transform: translate(285px, 9px) rotate(10.8deg) scaleX(0.48);
    }
    21% {
        -webkit-transform: translate(274px, 9px) rotate(8.1deg) scaleX(0.51);
        transform: translate(274px, 9px) rotate(8.1deg) scaleX(0.51);
    }
    24% {
        -webkit-transform: translate(262px, 9px) rotate(5.4deg) scaleX(0.54);
        transform: translate(262px, 9px) rotate(5.4deg) scaleX(0.54);
    }
    27% {
        -webkit-transform: translate(243px, 9px) rotate(2.7deg) scaleX(0.57);
        transform: translate(243px, 9px) rotate(2.7deg) scaleX(0.57);
    }
    30% {
        -webkit-transform: translate(213.689px, 9px) rotate(0deg) scaleX(0.6);
        transform: translate(213.689px, 9px) rotate(0deg) scaleX(0.6);
        opacity: 0.2;
    }
    to {
        opacity: 0;
        -webkit-transform: translate(-65px, 9px) rotate(0deg) scaleX(1.6);
        transform: translate(-65px, 9px) rotate(0deg) scaleX(1.6);
    }
}

.p2BendShadowRightMiddle {
    -webkit-animation-name: p2BendShadowRightMiddle;
    animation-name: p2BendShadowRightMiddle;
}


/*region cross-browser*/

@-webkit-keyframes p2ShadowRightMiddle {
    from {
        -webkit-transform: translate(-617px, 41px) rotate(-27deg);
        transform: translate(-617px, 41px) rotate(-27deg);
    }
    30% {
        -webkit-transform: translate(-306px, 75px) rotate(0deg);
        transform: translate(-306px, 75px) rotate(0deg);
    }
    to {
        -webkit-transform: translate(0px, 75px) rotate(0deg);
        transform: translate(0px, 75px) rotate(0deg);
    }
}


/* endregion */

@keyframes p2ShadowRightMiddle {
    from {
        -webkit-transform: translate(-617px, 41px) rotate(-27deg);
        transform: translate(-617px, 41px) rotate(-27deg);
    }
    30% {
        -webkit-transform: translate(-306px, 75px) rotate(0deg);
        transform: translate(-306px, 75px) rotate(0deg);
    }
    to {
        -webkit-transform: translate(0px, 75px) rotate(0deg);
        transform: translate(0px, 75px) rotate(0deg);
    }
}

.p2ShadowRightMiddle {
    -webkit-animation-name: p2ShadowRightMiddle;
    animation-name: p2ShadowRightMiddle;
}


/*region cross-browser*/

@-webkit-keyframes pagesBendShadowRightMiddle {
    from {
        opacity: 0.6;
        -webkit-transform: translate(-688px, -39px) rotate(138deg) scaleX(0.3);
        transform: translate(-688px, -39px) rotate(138deg) scaleX(0.3);
    }
    3% {
        -webkit-transform: translate(-647px, -39px) rotate(142.2deg) scaleX(0.33);
        transform: translate(-647px, -39px) rotate(142.2deg) scaleX(0.33);
    }
    6% {
        -webkit-transform: translate(-608px, -39px) rotate(146.4deg) scaleX(0.36);
        transform: translate(-608px, -39px) rotate(146.4deg) scaleX(0.36);
    }
    9% {
        -webkit-transform: translate(-574px, -39px) rotate(150.6deg) scaleX(0.39);
        transform: translate(-574px, -39px) rotate(150.6deg) scaleX(0.39);
    }
    12% {
        -webkit-transform: translate(-542px, -39px) rotate(154.8deg) scaleX(0.42);
        transform: translate(-542px, -39px) rotate(154.8deg) scaleX(0.42);
    }
    15% {
        -webkit-transform: translate(-513px, -39px) rotate(159deg) scaleX(0.45);
        transform: translate(-513px, -39px) rotate(159deg) scaleX(0.45);
    }
    18% {
        -webkit-transform: translate(-485px, -39px) rotate(163.2deg) scaleX(0.48);
        transform: translate(-485px, -39px) rotate(163.2deg) scaleX(0.48);
    }
    21% {
        -webkit-transform: translate(-458px, -39px) rotate(167.4deg) scaleX(0.51);
        transform: translate(-458px, -39px) rotate(167.4deg) scaleX(0.51);
    }
    24% {
        -webkit-transform: translate(-433px, -39px) rotate(171.6deg) scaleX(0.54);
        transform: translate(-433px, -39px) rotate(171.6deg) scaleX(0.54);
    }
    27% {
        -webkit-transform: translate(-407px, -39px) rotate(175.8deg) scaleX(0.57);
        transform: translate(-407px, -39px) rotate(175.8deg) scaleX(0.57);
    }
    30% {
        -webkit-transform: translate(-382px, -39px) rotate(180deg) scaleX(0.6);
        transform: translate(-382px, -39px) rotate(180deg) scaleX(0.6);
        opacity: 1;
    }
    to {
        opacity: 0.5;
        -webkit-transform: translate(0px, -39px) rotate(180deg) scaleX(6);
        transform: translate(0px, -39px) rotate(180deg) scaleX(6);
    }
}


/* endregion */

@keyframes pagesBendShadowRightMiddle {
    from {
        opacity: 0.6;
        -webkit-transform: translate(-688px, -39px) rotate(138deg) scaleX(0.3);
        transform: translate(-688px, -39px) rotate(138deg) scaleX(0.3);
    }
    3% {
        -webkit-transform: translate(-647px, -39px) rotate(142.2deg) scaleX(0.33);
        transform: translate(-647px, -39px) rotate(142.2deg) scaleX(0.33);
    }
    6% {
        -webkit-transform: translate(-608px, -39px) rotate(146.4deg) scaleX(0.36);
        transform: translate(-608px, -39px) rotate(146.4deg) scaleX(0.36);
    }
    9% {
        -webkit-transform: translate(-574px, -39px) rotate(150.6deg) scaleX(0.39);
        transform: translate(-574px, -39px) rotate(150.6deg) scaleX(0.39);
    }
    12% {
        -webkit-transform: translate(-542px, -39px) rotate(154.8deg) scaleX(0.42);
        transform: translate(-542px, -39px) rotate(154.8deg) scaleX(0.42);
    }
    15% {
        -webkit-transform: translate(-513px, -39px) rotate(159deg) scaleX(0.45);
        transform: translate(-513px, -39px) rotate(159deg) scaleX(0.45);
    }
    18% {
        -webkit-transform: translate(-485px, -39px) rotate(163.2deg) scaleX(0.48);
        transform: translate(-485px, -39px) rotate(163.2deg) scaleX(0.48);
    }
    21% {
        -webkit-transform: translate(-458px, -39px) rotate(167.4deg) scaleX(0.51);
        transform: translate(-458px, -39px) rotate(167.4deg) scaleX(0.51);
    }
    24% {
        -webkit-transform: translate(-433px, -39px) rotate(171.6deg) scaleX(0.54);
        transform: translate(-433px, -39px) rotate(171.6deg) scaleX(0.54);
    }
    27% {
        -webkit-transform: translate(-407px, -39px) rotate(175.8deg) scaleX(0.57);
        transform: translate(-407px, -39px) rotate(175.8deg) scaleX(0.57);
    }
    30% {
        -webkit-transform: translate(-382px, -39px) rotate(180deg) scaleX(0.6);
        transform: translate(-382px, -39px) rotate(180deg) scaleX(0.6);
        opacity: 1;
    }
    to {
        opacity: 0.5;
        -webkit-transform: translate(0px, -39px) rotate(180deg) scaleX(6);
        transform: translate(0px, -39px) rotate(180deg) scaleX(6);
    }
}

.pagesBendShadowRightMiddle {
    -webkit-animation-name: pagesBendShadowRightMiddle;
    animation-name: pagesBendShadowRightMiddle;
}


/*region cross-browser*/

@-webkit-keyframes pagesBendShadowNextRightMiddle {
    from {
        opacity: 0.3;
        -webkit-transform: translate(-533px, 134px) rotate(138deg) scaleX(0.2);
        transform: translate(-533px, 134px) rotate(138deg) scaleX(0.2);
    }
    3% {
        -webkit-transform: translate(-512px, 134px) rotate(142.2deg) scaleX(0.207);
        transform: translate(-512px, 134px) rotate(142.2deg) scaleX(0.207);
    }
    6% {
        -webkit-transform: translate(-492px, 134px) rotate(146.4deg) scaleX(0.214);
        transform: translate(-492px, 134px) rotate(146.4deg) scaleX(0.214);
    }
    9% {
        -webkit-transform: translate(-476px, 134px) rotate(150.6deg) scaleX(0.221);
        transform: translate(-476px, 134px) rotate(150.6deg) scaleX(0.221);
    }
    12% {
        -webkit-transform: translate(-461px, 134px) rotate(154.8deg) scaleX(0.228);
        transform: translate(-461px, 134px) rotate(154.8deg) scaleX(0.228);
    }
    15% {
        -webkit-transform: translate(-446px, 134px) rotate(159deg) scaleX(0.235);
        transform: translate(-446px, 134px) rotate(159deg) scaleX(0.235);
    }
    18% {
        -webkit-transform: translate(-433px, 134px) rotate(163.2deg) scaleX(0.242);
        transform: translate(-433px, 134px) rotate(163.2deg) scaleX(0.242);
    }
    21% {
        -webkit-transform: translate(-419px, 134px) rotate(167.4deg) scaleX(0.249);
        transform: translate(-419px, 134px) rotate(167.4deg) scaleX(0.249);
    }
    24% {
        -webkit-transform: translate(-423px, 23px) rotate(171.6deg) scaleX(0.256);
        transform: translate(-423px, 23px) rotate(171.6deg) scaleX(0.256);
    }
    27% {
        -webkit-transform: translate(-402px, 29px) rotate(175.8deg) scaleX(0.263);
        transform: translate(-402px, 29px) rotate(175.8deg) scaleX(0.263);
    }
    30% {
        -webkit-transform: translate(-383px, -1px) rotate(180deg) scaleX(0.27);
        transform: translate(-383px, -1px) rotate(180deg) scaleX(0.27);
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate(0px, 0px) rotate(180deg) scaleX(3);
        transform: translate(0px, 0px) rotate(180deg) scaleX(3);
    }
}


/* endregion */

@keyframes pagesBendShadowNextRightMiddle {
    from {
        opacity: 0.3;
        -webkit-transform: translate(-533px, 134px) rotate(138deg) scaleX(0.2);
        transform: translate(-533px, 134px) rotate(138deg) scaleX(0.2);
    }
    3% {
        -webkit-transform: translate(-512px, 134px) rotate(142.2deg) scaleX(0.207);
        transform: translate(-512px, 134px) rotate(142.2deg) scaleX(0.207);
    }
    6% {
        -webkit-transform: translate(-492px, 134px) rotate(146.4deg) scaleX(0.214);
        transform: translate(-492px, 134px) rotate(146.4deg) scaleX(0.214);
    }
    9% {
        -webkit-transform: translate(-476px, 134px) rotate(150.6deg) scaleX(0.221);
        transform: translate(-476px, 134px) rotate(150.6deg) scaleX(0.221);
    }
    12% {
        -webkit-transform: translate(-461px, 134px) rotate(154.8deg) scaleX(0.228);
        transform: translate(-461px, 134px) rotate(154.8deg) scaleX(0.228);
    }
    15% {
        -webkit-transform: translate(-446px, 134px) rotate(159deg) scaleX(0.235);
        transform: translate(-446px, 134px) rotate(159deg) scaleX(0.235);
    }
    18% {
        -webkit-transform: translate(-433px, 134px) rotate(163.2deg) scaleX(0.242);
        transform: translate(-433px, 134px) rotate(163.2deg) scaleX(0.242);
    }
    21% {
        -webkit-transform: translate(-419px, 134px) rotate(167.4deg) scaleX(0.249);
        transform: translate(-419px, 134px) rotate(167.4deg) scaleX(0.249);
    }
    24% {
        -webkit-transform: translate(-423px, 23px) rotate(171.6deg) scaleX(0.256);
        transform: translate(-423px, 23px) rotate(171.6deg) scaleX(0.256);
    }
    27% {
        -webkit-transform: translate(-402px, 29px) rotate(175.8deg) scaleX(0.263);
        transform: translate(-402px, 29px) rotate(175.8deg) scaleX(0.263);
    }
    30% {
        -webkit-transform: translate(-383px, -1px) rotate(180deg) scaleX(0.27);
        transform: translate(-383px, -1px) rotate(180deg) scaleX(0.27);
        opacity: 1;
    }
    to {
        opacity: 0;
        -webkit-transform: translate(0px, 0px) rotate(180deg) scaleX(3);
        transform: translate(0px, 0px) rotate(180deg) scaleX(3);
    }
}

.pagesBendShadowNextRightMiddle {
    -webkit-animation-name: pagesBendShadowNextRightMiddle;
    animation-name: pagesBendShadowNextRightMiddle;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

.animated.pagesBendShadowNextRightMiddle {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
}


/* endregion */


/* Back cover / Restart */


/* region */

.lastPage {
    -webkit-transform: translate(300px, 74.1px) rotate(0deg)!important;
    transform: translate(300px, 74.1px) rotate(0deg)!important;
}

.lastPageShadow {
    -webkit-transform: translate(0px, 0px) rotate(0deg)!important;
    transform: translate(0px, 0px) rotate(0deg)!important;
}


/* endregion */


/* Media queries - Responsive E-Book */


/* region */

@media only screen and (min-device-width: 769px) and (max-device-width: 800px) {
    /*WIN8 TABLET*/
    html {
        width: 1200px;
        height: 900px;
        background-color: #d0d0d0;
        position: fixed;
        overflow: hidden;
    }
    body {
        background-color: rgba(208, 208, 208, 0);
        background-image: none;
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
        margin: -70px 0px 0px -425px;
        overflow: hidden;
    }
}

@media only screen and (max-device-width: 768px) {
    /*IPAD L&P, ANDROID P*/
    html {
        width: 1200px;
        height: 100%;
        background-color: #d0d0d0;
        position: fixed;
        overflow: hidden;
    }
    body {
        background-color: rgba(208, 208, 208, 0);
        background-image: none;
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
        margin: -70px 0px 0px -190px;
        overflow: hidden;
    }
}

@media only screen and (min-device-width: 801px) and (max-device-width: 1024px) {
    /*ANDROID P*/
    html {
        width: 1200px;
        height: 900px;
        background-color: #d0d0d0;
        position: fixed;
        overflow: hidden;
    }
    body {
        background-color: rgba(208, 208, 208, 0);
        background-image: none;
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
        margin: -70px 0px 0px -190px;
        overflow: hidden;
    }
}

@media screen and (min-width:2000px) {
    #c2c {
        left: 39%;
    }
}

@media screen and (min-width:2200px) {
    #c2c {
        left: 40%;
    }
}