.FanShuBook {
    position: relative;
    width: 100%;
    height: 220px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}



.FanShuFront,
.FanShuEmptyPage1,
.FanShuEmptyPage2,
.FanShuEmptyPage3,
.FanShuEmptyPage4,
.FanShuEmptyPage5,
.FanShuEmptyPage6 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transition: all 0.8s ease, z-index 0.6s;
    -moz-transition: all 0.8s ease, z-index 0.6s;
    transition: all 0.8s ease, z-index 0.6s;
    background: -webkit-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
    background: -moz-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
    background: -ms-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
}


.FanShuFront {
    -webkit-transform: rotateY(0deg) translateZ(10px);
    -moz-transform: rotateY(0deg) translateZ(10px);
    transform: rotateY(0deg) translateZ(10px);
    z-index: 100;
}

.FanShuEmptyPage1,
.FanShuEmptyPage2,
.FanShuEmptyPage3,
.FanShuEmptyPage4,
.FanShuEmptyPage5,
.FanShuEmptyPage6 {
    -webkit-transform: rotateY(0deg) translateZ(0px);
    -moz-transform: rotateY(0deg) translateZ(0px);
    transform: rotateY(0deg) translateZ(0px);
    z-index: 50;
}



.FanShuBook:hover > .FanShuFront {
    -webkit-transform: rotateY(-145deg) translateZ(0);
    -moz-transform: rotateY(-145deg) translateZ(0);
    transform: rotateY(-145deg) translateZ(0);
    z-index: 0;
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    transition-duration: 0.4s;
}

.FanShuBook:hover > .FanShuEmptyPage1 {
    -webkit-transform: rotateY(-144deg) translateZ(0);
    -moz-transform: rotateY(-144deg) translateZ(0);
    transform: rotateY(-144deg) translateZ(0);
    z-index: 0;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

.FanShuBook:hover > .FanShuEmptyPage2 {
    -webkit-transform: rotateY(-134deg) translateZ(0);
    -moz-transform: rotateY(-134deg) translateZ(0);
    transform: rotateY(-134deg) translateZ(0);
    z-index: 0;
    -webkit-transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;
    transition-duration: 0.6s;
}

.FanShuBook:hover > .FanShuEmptyPage3 {
    -webkit-transform: rotateY(-124deg) translateZ(0);
    -moz-transform: rotateY(-124deg) translateZ(0);
    transform: rotateY(-124deg) translateZ(0);
    z-index: 0;
    -webkit-transition-duration: 0.7s;
    -moz-transition-duration: 0.7s;
    transition-duration: 0.7s;
}

.FanShuBook:hover > .FanShuEmptyPage4 {
    -webkit-transform: rotateY(-114deg) translateZ(0);
    -moz-transform: rotateY(-114deg) translateZ(0);
    transform: rotateY(-114deg) translateZ(0);
    z-index: 0;
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}

.FanShuBook:hover > .FanShuEmptyPage5 {
    -webkit-transform: rotateY(-104deg) translateZ(0);
    -moz-transform: rotateY(-104deg) translateZ(0);
    transform: rotateY(-104deg) translateZ(0);
    z-index: 0;
    -webkit-transition-duration: 0.9s;
    -moz-transition-duration: 0.9s;
    transition-duration: 0.9s;
}

.FanShuBook:hover > .FanShuEmptyPage6 {
    -webkit-transform: rotateY(-94deg) translateZ(0);
    -moz-transform: rotateY(-94deg) translateZ(0);
    transform: rotateY(-94deg) translateZ(0);
    z-index: 0;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    transition-duration: 1s;
}



.FanShuDesign {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
    padding:0px;
    color:white;
    text-align: center;
}



/*.FanShuDesign h1 {
    color: #fff;
    font-size: 2.2em;
    letter-spacing: 0.05em;
    text-align: center;
    margin: 40% 0 0 0;
    text-shadow: -1px -1px 0 rgba(0,0,0,0.1);
}

.FanShuDesign p {
    color: #f8f8f8;
    font-size: 1em;
    text-align: center;
    text-shadow: -1px -1px 0 rgba(0,0,0,0.1);
}*/

.FanShuContent {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
    padding: 8px;
}

.FanShuYellow {
    background-color: #f1c40f;
}

.FanShuBlue {
    background-color: #3498db;
}

.FanShuGrey {
    background-color: #f8e9d1;
}

.FanShuColor0 {
    background-color: #CC9933;
}

.FanShuColor1 {
    background-color: #336666;
}

.FanShuColor2 {
    background-color: #336633;
}
.FanShuColor3 {
    background-color: #333366;
}
.FanShuColor4 {
    background-color: #993333;
}
.FanShuColor5 {
    background-color: #663366;
}
.FanShuColor6 {
    background-color: #996600;
}
 


.FanShuRibbon {
    background: #c0392b;
    color: #fff;
    display: block;
    font-size: 0.7em;
    position: absolute;
    top: 11px;
    right: 1px;
    width: 40px;
    height: 20px;
    line-height: 20px;
    letter-spacing: 0.15em;
    text-align: center;
    -webkit-transform: rotateZ(45deg) translateZ(1px);
    -moz-transform: rotateZ(45deg) translateZ(1px);
    transform: rotateZ(45deg) translateZ(1px);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 10;
}