.view_book_back,.view_book_front{
  background-image: url('/website/images/page.png');
  background-size: cover;
}

.view_book,.view_book_start {
    display: flex;
    position: absolute;
    right: 0%;
    top: 75px;
    z-index: 9;
    width: 100%;
}

.view_book_flip-book {
    width: 100%;
    height: 400px;
    position: relative;
    perspective: 1500px;
}

.view_book_flip {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 100%;
    transform-origin: left;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    transition: .5s;
    color: #000;
}


.view_book_front {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #fafafa;
    box-sizing: border-box;
    padding: 0 13px;
    /* box-shadow: inset 20px 0 50px r; */
}

.view_book_back {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 99;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    background-color: #000;
}


.view_book #view_book_p1 {
    z-index: 3;
    animation: book1 1s ease-in-out forwards;
    animation-delay: 0s;
}
.view_book #view_book_p2 {
    z-index: 2;
    animation: book2 2s ease-in-out forwards;
    animation-delay: .3s;
}
.view_book #view_book_p3 {
    z-index: 1;
    animation: book3 3s ease-in-out forwards;
    animation-delay: .5s;
}

@keyframes book1 {
  100%{
    transform: rotateY(-180deg);
    z-index: 1;
  }
}

@keyframes book2 {
  100%{
    transform: rotateY(-180deg);
    z-index: 2;
  }
}

@keyframes book3 {
  100%{
    transform: rotateY(-180deg);
    z-index: 3;
  }
}

@media(max-width: 992px){
    .hedden{
        display: none;
    }
}

@keyframes animation_color1 {
  0%   {color: #282828;}
  50%   {color: #d1142d;}
  100% {color: #282828;}
}

.animation_color1 {
  animation-name: animation_color1;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}