.view3d {
	position: relative;
	width: 300px;
	z-index: 1;
	-webkit-perspective: 1800px;
	-moz-perspective: 1800px;
	perspective: 1800px;
}

.bk-book {
	position: absolute;
	top: -100px;
	width: 100%;
	height: 400px;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: -webkit-transform .5s;
	-moz-transition: -moz-transform .5s;
	transition: transform .5s;
	-webkit-transform: rotate3d(0,1,0,-25deg);
	-moz-transform: rotate3d(0,1,0,-25deg);
	transform: rotate3d(0,1,0,-25deg);
}

.bk-book:hover,
.bk-book.active
{
	-webkit-transform: rotate3d(0,1,0,0);
	-moz-transform: rotate3d(0,1,0,0);
	transform: rotate3d(0,1,0,0);
}

.bk-book > div,
.bk-front > div {
	display: block;
	position: absolute;
	left: -595px;
	top: 465px;
}

.bk-front {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin: 0% 50%;
	-moz-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
	-webkit-transition: -webkit-transform .5s;
	-moz-transition: -moz-transform .5s;
	transition: transform .5s;
	-webkit-transform: translate3d(0,0,20px);
	-moz-transform: translate3d(0,0,20px);
	transform: translate3d(0,0,20px);
	z-index: 10;
}

.bk-front > div {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.bk-page {
	-webkit-transform: translate3d(0,0,19px);
	-moz-transform: translate3d(0,0,19px);
	transform: translate3d(0,0,19px);
	display: none;
	width: 295px;
	height: 390px;
	top: 5px;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	z-index: 9;
}

.bk-front,
.bk-back,
.bk-front > div {
	width: 300px;
	height: 400px;
}

.bk-left,
.bk-right {
	width: 40px;
	left: -25px;
	
}

.bk-top,
.bk-bottom {
	width: 300px;
	height: 50px;
	top: -25px;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

.bk-back {
	-webkit-transform: rotate3d(0,1,0,-180deg) translate3d(0,0,20px);
	-moz-transform: rotate3d(0,1,0,-180deg) translate3d(0,0,20px);
	transform: rotate3d(0,1,0,-180deg) translate3d(0,0,20px);
	box-shadow: 10px 10px 30px rgba(0,0,0,0.3);
	border-radius: 3px 0 0 3px;
}

.bk-cover-back {
	background-color: #000;
	-webkit-transform: rotate3d(0,1,0,-180deg);
	-moz-transform: rotate3d(0,1,0,-180deg);
	transform: rotate3d(0,1,0,-180deg);
}

.bk-right {
	width: 50px;
	height: 400px;
	-webkit-transform: rotate3d(0,1,0,90deg) translate3d(0,0,300px);
	-moz-transform: rotate3d(0,1,0,90deg) translate3d(0,0,300px);
	transform: rotate3d(0,1,0,90deg) translate3d(0,0,300px);
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

.bk-left {
	height: 400px;
	-webkit-transform: rotate3d(0,1,0,-90deg);
	-moz-transform: rotate3d(0,1,0,-90deg);
	transform: rotate3d(0,1,0,-90deg);
}

.bk-top {
	-webkit-transform: rotate3d(1,0,0,90deg);
	-moz-transform: rotate3d(1,0,0,90deg);
	transform: rotate3d(1,0,0,90deg);
}

.bk-bottom {
	-webkit-transform: rotate3d(1,0,0,-90deg) translate3d(0,0,400px);
	-moz-transform: rotate3d(1,0,0,-90deg) translate3d(0,0,400px);
	transform: rotate3d(1,0,0,-90deg) translate3d(0,0,400px);
}

/* Fallbacks */

.no-csstransforms3d .bk-list li .bk-book > div,
.no-csstransforms3d .bk-list li .bk-book .bk-cover-back {
	display: none;
}

.no-csstransforms3d .bk-list li .bk-book > div.bk-front {
	display: block;
}

.no-csstransforms3d .bk-info button,
.no-js .bk-info button {
	display: none;
}