@import "compass/css3";

html {height: 100%; width: 100%;}
body{ height: 100%; width: 100%; display: block;
background: radial-gradient(#1f1f1f, #000 );}

h1 {font-family: 'Open Sans', sans-serif; font-size: 30px; color: #fff; text-align:center; position: absolute; width: 100%; top: 0px; background: #000; margin: 0px; padding: 15px 0px; z-index:200;}

a {text-align: center; color: #fff; text-transform: uppercase; line-height: 150px;font-family: 'Open Sans', sans-serif;}

.frame {
  position: absolute; left: 50%; margin-left: -112px; top: 50%; margin-top: -150px;
  border-top: 25px solid #784320; 
  border-right: 25px solid #6a3919;
  border-bottom: 25px solid #945a33; 
  border-left: 25px solid #8f4b1e; 
  width: 200px; height: 300px;}


.book {
display: block;
float: left;
width: 200px;
height: 300px;
margin: 0;
padding: 0;
background: #333;
transform: translate3d(0,0,0);
}

.book ul {
display: block;
position: relative;
width: 200px;
height: 300px;
margin: 0px;
padding: 0;
list-style: none;
perspective-origin: 0 50% 0;
perspective: 800px;
-webkit-transform: translate3d(0,0,0);
}

.book ul>li {
display: block;
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 300px;
padding: 0;
margin: 0;
background-color: #000000; // Old browsers
@include filter-gradient(#000000, #ededed, horizontal); // IE6-9
@include background-image(linear-gradient(left,  #000000 0%,#000000 90%,#ededed 100%));
transform-origin: 0 50% 0;
transform-style: preserve-3d;
transition: all .5s cubic-bezier(0.25,1,.25,1);
}

.cover {
 z-index: 2 !important;
display: block;
 width: 200px; height: 300px;
 background:#333 !important;
transform: rotateY(0deg) translateZ(0px);
}
.page1 {
display: none;
transform: rotateY(20deg) translateZ(-1px);
}
.page2 {
display: none;
transform: rotateY(30deg) translateZ(-2px);
}
.page3 {
display: none;
transform: rotateY(40deg) translateZ(-3px);
}



.book:hover .page1 {
transform: rotateY(-34deg);
}

.book:hover .page2 {
transform: rotateY(-27deg);
}

.book:hover .page3 {
transform: rotateY(-15deg);
}

.book:hover .cover {
transform: rotateY(-40deg);
}