@import url('https://fonts.googleapis.com/css?family=Stalemate');
*, *:before, *:after {
	box-sizing: border-box;
}
img {
	max-width: 100%;
}
body {
	background:#fff;
	font-family: 'Stalemate', cursive;
}
.book-wrapper {
	position: relative;
	width: 100%;
	height: 100vh;
}
.pages {
	box-shadow: 0px 0px 10px rgba(4, 4, 4, .3);
	overflow: hidden;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) !important;
}
.pages [class^="page-num-"] {
 position: relative;
}
.pages-content {
	text-align: center;
	position: absolute;
	width: 100%;
	height: 100%;
	display: table;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.content-inner {
	text-align: center;
	display: table-cell;
	vertical-align: middle;
}
.book-wrapper {
	user-select: none;
}
.pages:before {
	content: "";
	position: absolute;
	width: 50%;
	height: 100%;
	z-index:999;
	background: -webkit-gradient(linear, left top, right top, color-stop(0.95, rgba(0, 0, 0, 0)), color-stop(1, rgba(0, 0, 0, 0.2)));
	background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.2) 100%);
	background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.2) 100%);
	background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.2) 100%);
	background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.2) 100%);
	background-image: linear-gradient(left, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0.2) 100%);
}