#background3d {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#wrapper3d {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#scene3d {
    perspective: 1000px;
    position: relative;
}

#book3d {
    position: relative;
    transform-style: preserve-3d;
    transform: rotateY(40deg);
}

#book-front {
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
}

#book-back {
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
}

#book-right {
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
}

#book-left {
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
}

#book-top {
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
}

#book-bottom {
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
}

#book-bottom-shadow {
    background-color: #000000;
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(30px);
    opacity: 0.5;
}

@media (max-width: 767.98px) {
    #scene3d {
        margin-top: -100px;
    }
}

@keyframes spinbook {
    from,to  { -webkit-transform: rotateY(0deg); }
    25%      { -webkit-transform: rotateY(35deg);}
    50%      { -webkit-transform: rotateY(180deg);}
    75%      { -webkit-transform: rotateY(215deg);}
    100%      { -webkit-transform: rotateY(360deg)}
}


@-webkit-keyframes spinbook {
    from,to  { -webkit-transform: rotateY(0deg); }
    25%      { -webkit-transform: rotateY(90deg);}
    50%      { -webkit-transform: rotateY(180deg);}
    75%      { -webkit-transform: rotateY(270deg);}
    100%      { -webkit-transform: rotateY(360deg);}
}

#book3dcss {
    -webkit-animation-name: spinbook;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 12s;
    -webkit-transform-style: preserve-3d;
    animation-name: spinbook;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 20s;
    transform-style: preserve-3d;
    /* -webkit-transform-origin: 60px 60px 0; */
    zoom: 0.7;
    position: relative;
    top:15%;
    left:15%;

}

#book3dcss:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}