* {margin: 0;padding: 0;left: 0;top: 0;right: 0;bottom: 0;}

body{
  background-color: #50A4AE;
}

.logo{
  left: 15px;
  top: 15px;
  width: 200px;
  height: 70px;
  position: absolute;
}

#flipbook-container {
    -webkit-perspective: 1000px;
       -moz-perspective: 1000px;
         -o-perspective: 1000px;
            perspective: 1000px;            
    position: absolute;
    margin: 100px 200px;
    width: 600px;
    height: 500px;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-transform: rotateX(40deg) rotateY(0deg) rotateZ(-20deg) skew(0deg,0deg) scale(1.2) translate3d( 0px,-800px,0px );
       -moz-transform: rotateX(40deg) rotateY(0deg) rotateZ(-20deg) skew(0deg,0deg) scale(1.2) translate3d( 0px,-800px,0px );
         -o-transform: rotateX(40deg) rotateY(0deg) rotateZ(-20deg) skew(0deg,0deg) scale(1.2) translate3d( 0px,-800px,0px );
            transform: rotateX(40deg) rotateY(0deg) rotateZ(-20deg) skew(0deg,0deg) scale(1.2) translate3d( 0px,-800px,0px );
}
.component {
    position: absolute;
    left: 300px;
    top: 0;
    width: 200px;
    height: 100%;
    text-align: center;            
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-transform-origin: 0 50%;
       -moz-transform-origin: 0 50%;
         -o-transform-origin: 0 50%;
            transform-origin: 0 50%;
    -webkit-transition: -webkit-transform 1s ease-in 0.5s;
       -moz-transition:    -moz-transform 1s ease-in 0.5s;
         -o-transition:      -o-transform 1s ease-in 0.5s;
            transition:         transform 1s ease-in 0.5s;
} 
.cover-front, .cover-back{
    width: 300px;
    height: 500px;
    position: absolute;
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
         -o-backface-visibility: hidden;
            backface-visibility: hidden;
}
.cover{
}
.cover-front {
    z-index: 1;
    background-color: #E5B991;
    box-shadow: 1px 1px 4px 4px rgba(0,0,0,0.1) inset ;
   
}
.cover-back {
    z-index: 0;
    background-color: #A77D59;
    -webkit-transform: rotateY(180deg);
       -moz-transform: rotateY(180deg);
         -o-transform: rotateY(180deg);
            transform: rotateY(180deg);
     box-shadow: -1px -1px 4px 4px rgba(0,0,0,0.1) inset ;
}

.turn-off {
    -webkit-transform: rotateY(0);
       -moz-transform: rotateY(0);
         -o-transform: rotateY(0);
            transform: rotateY(0);
}
.turn-on {
    -webkit-transform: rotateY(-190deg) skew(0deg,5deg);
       -moz-transform: rotateY(-190deg) skew(0deg,5deg);
         -o-transform: rotateY(-190deg) skew(0deg,5deg);
            transform: rotateY(-190deg) skew(0deg,5deg);
}

.bookface{
    display: block;
    position: absolute;    
}
#mybookface .book-back   {
  width: 300px;
  height: 500px; 
  background: #000000;
  box-shadow: -20px -5px 40px 40px rgba(0,0,0,0.4) ;
  -webkit-transform: rotateX( -180deg ) translateZ( 200px );
     -moz-transform: rotateX( -180deg ) translateZ( 200px );
       -o-transform: rotateX( -180deg ) translateZ( 200px );
          transform: rotateX( -180deg ) translateZ( 200px );
}
#mybookface .book-right {
  width: 200px;
  height: 500px;
  background: #A77D59;
  box-shadow: -1px 1px 4px 4px rgba(0,0,0,0.1) inset ;
  -webkit-transform: rotateY(  90deg ) translate3d( 100px,0,200px );
     -moz-transform: rotateY(  90deg ) translate3d( 100px,0,200px );
       -o-transform: rotateY(  90deg ) translate3d( 100px,0,200px );
          transform: rotateY(  90deg ) translate3d( 100px,0,200px );
}
#mybookface .book-left {
  width: 200px;
  height: 500px; 
  background: #A77D59;
  box-shadow: 3px 3px 6px 6px rgba(0,0,0,0.2) inset;
  -webkit-transform: rotateY( -90deg ) translate3d( -100px,0,100px );
     -moz-transform: rotateY( -90deg ) translate3d( -100px,0,100px );
       -o-transform: rotateY( -90deg ) translate3d( -100px,0,100px );
          transform: rotateY( -90deg ) translate3d( -100px,0,100px );
}
#mybookface .book-bottom {
  width: 300px;
  height: 200px; 
  background: #DFA776;
  box-shadow: -1px 3px 6px 6px rgba(0,0,0,0.3) inset;
  -webkit-transform: rotateX( 90deg ) translate3d( 0px,-100px,-400px );
     -moz-transform: rotateX( 90deg ) translate3d( 0px,-100px,-400px );
       -o-transform: rotateX( 90deg ) translate3d( 0px,-100px,-400px );
          transform: rotateX( 90deg ) translate3d( 0px,-100px,-400px );
}
#mybookface .book-top  {
  width: 300px;
  height: 200px;
  background: #A77D59;
  -webkit-transform: rotateX( -90deg ) translate3d( 0px,100px,-100px );
     -moz-transform: rotateX( -90deg ) translate3d( 0px,100px,-100px );
       -o-transform: rotateX( -90deg ) translate3d( 0px,100px,-100px );
          transform: rotateX( -90deg ) translate3d( 0px,100px,-100px );
}

.zoom-in-A{
  /* animation */  
  -webkit-animation: zoom-in-A 5s ease forwards;
     -moz-animation: zoom-in-A 5s ease forwards;
       -o-animation: zoom-in-A 5s ease forwards;
          animation: zoom-in-A 5s ease forwards;
}
/* Animation:  zoom-in  */
@-webkit-keyframes zoom-in-A {
  0% { -webkit-transform: rotateX(40deg) rotateY(0deg) rotateZ(-20deg) scale(1.2); }
  100% { -webkit-transform: translate3d( 0px,1000px,1000px ) rotateX(40deg) rotateY(60deg) rotateZ(70deg) scale(0.9); }
} 
@-moz-keyframes zoom-in-A {
  0% { -moz-transform: rotateX(40deg) rotateY(0deg) rotateZ(-20deg) scale(1.2); }
  100% { -moz-transform: translate3d( 0px,1000px,1000px ) rotateX(40deg) rotateY(60deg) rotateZ(70deg) scale(0.9); }
} 
@-o-keyframes zoom-in-A {
  0% { -o-transform: rotateX(40deg) rotateY(0deg) rotateZ(-20deg) scale(1.2); }
  100% { -o-transform: translate3d( 0px,1000px,1000px ) rotateX(40deg) rotateY(60deg) rotateZ(70deg) scale(0.9); }
} 
@keyframes zoom-in-A {
  0% { transform: rotateX(40deg) rotateY(0deg) rotateZ(-20deg) scale(1.2); }
  100% { transform: translate3d( 0px,1000px,1000px ) rotateX(40deg) rotateY(60deg) rotateZ(70deg) scale(0.9); }
} 
.zoom-in-B{
  /* animation */  
  -webkit-animation: zoom-in-B 5s 3s ease forwards;
     -moz-animation: zoom-in-B 5s 3s ease forwards;
       -o-animation: zoom-in-B 5s 3s ease forwards;
          animation: zoom-in-B 5s 3s ease forwards;
}
/* Animation:  zoom-in  */
@-webkit-keyframes zoom-in-B {
  0% { -webkit-transform-style: preserve-3d; -webkit-transform: translate3d( 0px,0px,0px ) scale(0.25); opacity: 1;}
  100% { -webkit-transform-style: preserve-3d; -webkit-transform: translate3d( 0px,0px,0px ) scale(1); opacity: 1; }
} 
@-moz-keyframes zoom-in-B {
  0% { transform-style: preserve-3d; -moz-transform: translate3d( 0px,0px,0px ) scale(0.25); opacity: 1;}
  100% { transform-style: preserve-3d; -moz-transform: translate3d( 0px,0px,0px ) scale(1); opacity: 1; }
} 
@-o-keyframes zoom-in-B {
  0% { transform-style: preserve-3d; -o-transform: translate3d( 0px,0px,0px ) scale(0.25); opacity: 1;}
  100% { transform-style: preserve-3d; -o-transform: translate3d( 0px,0px,0px ) scale(1); opacity: 1; }
} 
@keyframes zoom-in-B {
  0% { transform-style: preserve-3d; transform: translate3d( 0px,0px,0px ) scale(0.25); opacity: 1;}
  100% { transform-style: preserve-3d; transform: translate3d( 0px,0px,0px ) scale(1); opacity: 1; }
} 
.mytransparentA{
  /* animation */  
  -webkit-animation: mytransparentA 5s ease 0s forwards;
     -moz-animation: mytransparentA 5s ease 0s forwards;
       -o-animation: mytransparentA 5s ease 0s forwards;
          animation: mytransparentA 5s ease 0s forwards;
}
/* Animation: transparentA for book */
@-webkit-keyframes mytransparentA {
  0% {  -webkit-transform-style: preserve-3d; -webkit-transform: rotateX(40deg) rotateY(0deg) rotateZ(-20deg) scale(1.2) translate3d( 0px,0px,0px );  opacity: 1;  }
  100% { -webkit-transform-style: preserve-3d; -webkit-transform: rotateX(40deg) rotateY(0deg) rotateZ(-20deg) scale(1.2) translate3d( 0px,0px,0px ); opacity: 0.6;  }  
} 
@-moz-keyframes mytransparentA {
  0% {  -moz-transform-style: preserve-3d; -moz-transform: rotateX(40deg) rotateY(0deg) rotateZ(-20deg) scale(1.2) translate3d( 0px,0px,0px );  opacity: 1;  }
  100% { -moz-transform-style: preserve-3d; -moz-transform: rotateX(40deg) rotateY(0deg) rotateZ(-20deg) scale(1.2) translate3d( 0px,0px,0px ); opacity: 0.6;  }  
} 
@-o-keyframes mytransparentA {
  0% {  -o-transform-style: preserve-3d; -o-transform: rotateX(40deg) rotateY(0deg) rotateZ(-20deg) scale(1.2) translate3d( 0px,0px,0px );  opacity: 1;  }
  100% { -o-transform-style: preserve-3d; -o-transform: rotateX(40deg) rotateY(0deg) rotateZ(-20deg) scale(1.2) translate3d( 0px,0px,0px ); opacity: 0.6;  }  
} 
@keyframes mytransparentA {
  0% {  transform-style: preserve-3d; transform: rotateX(40deg) rotateY(0deg) rotateZ(-20deg) scale(1.2) translate3d( 0px,0px,0px );  opacity: 1;  }
  100% { transform-style: preserve-3d; transform: rotateX(40deg) rotateY(0deg) rotateZ(-20deg) scale(1.2) translate3d( 0px,0px,0px ); opacity: 0.6;  }  
} 
.mytransparentB{
  /* animation */  
  -webkit-animation: mytransparentB 5s ease 0s forwards;
     -moz-animation: mytransparentB 5s ease 0s forwards;
       -o-animation: mytransparentB 5s ease 0s forwards;
          animation: mytransparentB 5s ease 0s forwards;
}
/* Animation: transparentB for block */
@-webkit-keyframes mytransparentB {
  0% {  -webkit-transform-style: preserve-3d; -webkit-transform: translate3d( 0px,0px,0px ) scale(0.25);  opacity: 0;  }
  100% { -webkit-transform-style: preserve-3d; -webkit-transform: translate3d( 0px,0px,0px ) scale(0.25); opacity: 0.5;  }  
} 
@-moz-keyframes mytransparentB {
  0% {  -moz-transform-style: preserve-3d; -moz-transform: translate3d( 0px,0px,0px ) scale(0.25);  opacity: 0;  }
  100% { -moz-transform-style: preserve-3d; -moz-transform: translate3d( 0px,0px,0px ) scale(0.25); opacity: 0.5;  }  
} 
@-o-keyframes mytransparentB {
  0% {  -o-transform-style: preserve-3d; -o-transform: translate3d( 0px,0px,0px ) scale(0.25);  opacity: 0;  }
  100% { -o-transform-style: preserve-3d; -o-transform: translate3d( 0px,0px,0px ) scale(0.25); opacity: 0.5;  }  
} 
@keyframes mytransparentB {
  0% {  transform-style: preserve-3d; transform: translate3d( 0px,0px,0px ) scale(0.25);  opacity: 0;  }
  100% { transform-style: preserve-3d; transform: translate3d( 0px,0px,0px ) scale(0.25); opacity: 0.5;  }  
} 
.myuntransparentA{
  /* animation */  
  -webkit-animation: myuntransparentA 2s ease 0s forwards;
     -moz-animation: myuntransparentA 2s ease 0s forwards;
       -o-animation: myuntransparentA 2s ease 0s forwards;
          animation: myuntransparentA 2s ease 0s forwards;
}
/* Animation: untransparent */
@-webkit-keyframes myuntransparentA {
  0% {  -webkit-transform-style: preserve-3d; -webkit-transform: rotateX(40deg) rotateY(0deg) rotateZ(-20deg) scale(1.2) translate3d( 0px,0px,0px );   opacity: 0.6;  }
  100% { -webkit-transform-style: preserve-3d; -webkit-transform: rotateX(40deg) rotateY(0deg) rotateZ(-20deg) scale(1.2) translate3d( 0px,0px,0px );  opacity: 1;  }  
} 
@-moz-keyframes myuntransparentA {
  0% {  -moz-transform-style: preserve-3d; -webkit-transform: rotateX(40deg) rotateY(0deg) rotateZ(-20deg) scale(1.2) translate3d( 0px,0px,0px );   opacity: 0.6;  }
  100% { -moz-transform-style: preserve-3d; -webkit-transform: rotateX(40deg) rotateY(0deg) rotateZ(-20deg) scale(1.2) translate3d( 0px,0px,0px );  opacity: 1;  }  
} 
@-o-keyframes myuntransparentA {
  0% {  -o-transform-style: preserve-3d; -webkit-transform: rotateX(40deg) rotateY(0deg) rotateZ(-20deg) scale(1.2) translate3d( 0px,0px,0px );   opacity: 0.6;  }
  100% { -o-transform-style: preserve-3d; -webkit-transform: rotateX(40deg) rotateY(0deg) rotateZ(-20deg) scale(1.2) translate3d( 0px,0px,0px );  opacity: 1;  }  
} 
@keyframes myuntransparentA {
  0% {  transform-style: preserve-3d; transform: rotateX(40deg) rotateY(0deg) rotateZ(-20deg) scale(1.2) translate3d( 0px,0px,0px );  opacity: 0.6;  }
  100% { transform-style: preserve-3d; -ransform: rotateX(40deg) rotateY(0deg) rotateZ(-20deg) scale(1.2) translate3d( 0px,0px,0px ); opacity: 1;  }  
} 
.myuntransparentB{
  /* animation */  
  -webkit-animation: myuntransparentB 2s ease 0s forwards;
     -moz-animation: myuntransparentB 2s ease 0s forwards;
       -o-animation: myuntransparentB 2s ease 0s forwards;
          animation: myuntransparentB 2s ease 0s forwards;
}
/* Animation: untransparent */
@-webkit-keyframes myuntransparentB {
  0% {  -webkit-transform-style: preserve-3d; -webkit-transform: translate3d( 0px,0px,0px ) scale(0.25);  opacity: 0.4;  }
  100% { -webkit-transform-style: preserve-3d; -webkit-transform: translate3d( 0px,0px,0px ) scale(0.25); opacity: 1;  }  
} 
@-moz-keyframes myuntransparentB {
  0% {  -moz-transform-style: preserve-3d; -moz-transform: translate3d( 0px,0px,0px ) scale(0.25);  opacity: 0.4;  }
  100% { -moz-transform-style: preserve-3d; -moz-transform: translate3d( 0px,0px,0px ) scale(0.25); opacity: 1;  }  
} 
@-o-keyframes myuntransparentB {
  0% {  -o-transform-style: preserve-3d; -o-transform: translate3d( 0px,0px,0px ) scale(0.25);  opacity: 0.4;  }
  100% { -o-transform-style: preserve-3d; -o-transform: translate3d( 0px,0px,0px ) scale(0.25); opacity: 1;  }  
} 
@keyframes myuntransparentB {
  0% {  transform-style: preserve-3d; transform: translate3d( 0px,0px,0px ) scale(0.25);  opacity: 0.4;  }
  100% { transform-style: preserve-3d; transform: translate3d( 0px,0px,0px ) scale(0.25); opacity: 1;  }  
} 


.appearA{
  /* animation */  
  -webkit-animation: myappearA 3s ease 0s forwards;
     -moz-animation: myappearA 3s ease 0s forwards;
       -o-animation: myappearA 3s ease 0s forwards;
          animation: myappearA 3s ease 0s forwards;  
}
/* Animation:  myappear  */
@-webkit-keyframes myappearA {
  0% { -webkit-transform-style: preserve-3d; -webkit-transform: rotateX(40deg) rotateY(0deg) rotateZ(-20deg) scale(1.2) translate3d( 300px,-800px,0px );}
  100% { -webkit-transform-style: preserve-3d; -webkit-transform: rotateX(40deg) rotateY(0deg) rotateZ(-20deg) scale(1.2) translate3d( 0px,0px,0px );}
} 
@-moz-keyframes myappearA {
  0% { transform-style: preserve-3d; -moz-transform: rotateX(40deg) rotateY(0deg) rotateZ(-20deg) scale(1.2) translate3d( 300px,-800px,0px );}
  100% { transform-style: preserve-3d; -moz-transform: rotateX(40deg) rotateY(0deg) rotateZ(-20deg) scale(1.2) translate3d( 0px,0px,0px );}
} 
@-o-keyframes myappearA {
  0% { transform-style: preserve-3d; -o-transform: rotateX(40deg) rotateY(0deg) rotateZ(-20deg) scale(1.2) translate3d( 300px,-800px,0px );}
  100% { transform-style: preserve-3d; -o-transform: rotateX(40deg) rotateY(0deg) rotateZ(-20deg) scale(1.2) translate3d( 0px,0px,0px );}
} 
@keyframes myappearA {
  0% { transform-style: preserve-3d; transform: rotateX(40deg) rotateY(0deg) rotateZ(-20deg) scale(1.2) translate3d( 300px,-800px,0px );}
  100% { transform-style: preserve-3d; transform: rotateX(40deg) rotateY(0deg) rotateZ(-20deg) scale(1.2) translate3d( 0px,0px,0px );}
} 
.appearB{
  /* animation */  
  -webkit-animation: myappearB 3s ease 0s forwards;
     -moz-animation: myappearB 3s ease 0s forwards;
       -o-animation: myappearB 3s ease 0s forwards;
          animation: myappearB 3s ease 0s forwards;  
}
/* Animation:  myappear  */
@-webkit-keyframes myappearB {
  0% { -webkit-transform-style: preserve-3d; -webkit-transform: translate3d( -70px,-800px,0px ) scale(0.25);}
  100% { -webkit-transform-style: preserve-3d; -webkit-transform: translate3d( 0px,0px,0px ) scale(0.25);}
} 
@-moz-keyframes myappearB {
  0% { transform-style: preserve-3d; -moz-transform: translate3d( -70px,-800px,0px ) scale(0.25);}
  100% { transform-style: preserve-3d; -moz-transform: translate3d( 0px,0px,0px ) scale(0.25);}
} 
@-o-keyframes myappearB {
  0% { transform-style: preserve-3d; -o-transform: translate3d( -70px,-800px,0px ) scale(0.25);}
  100% { transform-style: preserve-3d; -o-transform: translate3d( 0px,0px,0px ) scale(0.25);}
} 
@keyframes myappearB {
  0% { transform-style: preserve-3d; transform: translate3d( -70px,-800px,0px ) scale(0.25);}
  100% { transform-style: preserve-3d; transform: translate3d( 0px,0px,0px ) scale(0.25);}
}