.block-book-notification {
	position: relative;
	z-index: 20;
	padding-right: 4px;
	margin-top: -2em;
	height: 2em;
	font-size: 2em;
	display: block;
	text-align: right;
	filter: drop-shadow(0 0 10px gold);
}

.block-book-notification img {
	opacity: 0;
	animation: jiggle 4s linear 0s infinite alternate;
	transition: opacity .5s ease-in-out;
}

.block-book-notification.visible img {
	opacity: 1;
}

.block-book {
	position: fixed;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100%;
	max-width: none !important;
	z-index: 20;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease-in-out 1.5s;
}

.block-book.open {
	pointer-events: auto;
	opacity: 1;
	transition: opacity .25s ease-in-out;
}

.block-book .book {
	transform-style: preserve-3d;
	cursor: pointer;
	backface-visibility: visible;
	max-width: none !important;
	width: 40% !important;
	height: 40vw;
	left: 30%;
	top: 10%;
	transform: scale(0.5);
	position: fixed;
	transition: transform 0.5s ease-in, left 0.5s ease-in;
	z-index: 40;
}

.block-book.open .book {
	left: 50%;
	transform: scale(1);
	transition: transform 0.5s ease-in, left 0.67s ease-in 0.5s;
}

.block-book .page {
	overflow: hidden;
	transform-style: preserve-3d;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	transform-origin: left center;
	transition: transform 1s ease-in-out, box-shadow .67s ease-in-out;
}

.block-book.open .page {
	transition: transform 1s ease-in-out 0.5s, box-shadow .67s ease-in-out 0.5s;
}

.block-book .front {
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2), inset 20px 0px 5px 0 rgba(0,0,0,0.2);;
}

.block-book .front h4 {
	margin: 0 !important;
	font-size: 3em;
	color: #fff;
}

.block-book .front,
.block-book .page1,
.block-book .page3,
.block-book .page5 {
	border-bottom-right-radius: .25em;
	border-top-right-radius: .25em;
}

.block-book .back,
.block-book .page2,
.block-book .page4,
.block-book .page6 {
	border-bottom-right-radius: .25em;
	border-top-right-radius: .25em;
}

.block-book .page1 { 
	background: #efefef;
}

.block-book .page2 {
	background: #efefef;
}

.block-book .page3 {
	background: #f5f5f5;
}

.block-book .page4 {
	background: #f5f5f5;
}

.block-book .page5 {
	background: #fafafa;
}

.block-book .page6 {
	background: #fdfdfd;
}

.block-book.open .front {
	transform: rotateY(-160deg);
	box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

.block-book.open .page1 {
	transform: rotateY(-155deg);
	box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

.block-book.open .page2 {
	transform: rotateY(-25deg);
	box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

.block-book.open .page3 {
	transform: rotateY(-153deg);
	box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

.block-book.open .page4 {
	transform: rotateY(-27deg);
	box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

.block-book.open .page5 {
	transform: rotateY(-151deg);
	box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

.block-book.open .page6 {
	transform: rotateY(-29deg);
	box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
}

.block-book.open .back {
	transform: rotateY(-20deg);
}

.block-book .new-sticker {
	top: 12%;
	left: 50%;
	z-index: 50;
	width: 1em;
	animation: float 2s ease-in-out 0s infinite alternate !important;
	filter: drop-shadow(0 0 30px gold);
	opacity: 0;
	transition: opacity .5s ease-in-out;
}

.block-book .new-sticker.visible {
	opacity: 1;
}

.block-book .sticker {
	pointer-events: none;
	position: absolute;
	font-size: 5em;
	margin-top: -0.5em;
	margin-left: -0.5em;
	display: block;
	animation: stick 0.75s ease-in 0s 1;
}

.block-book .sticker img {
	filter: drop-shadow(2px 2px 0 white)
	        drop-shadow(-2px 2px 0 white)
	        drop-shadow(2px -2px 0 white)
	        drop-shadow(-2px -2px 0 white)
	        drop-shadow(0 0 5px rgba(0,0,0,0.25));
}

.block-book .book-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100%;
	max-width: none !important;
	background: rgba(0,0,0,0.5);
	opacity: 0;
	display: none;
	transition: opacity .5s ease-in-out, display 0s ease-in-out .5s;
	z-index: 30;
}
.block-book.open .book-modal {
	opacity: 1;
	display: block;
	transition: opacity .5s ease-in-out, display 0s ease-in-out 0;
}

@keyframes float {
	0% {
		transform: perspective(500px) translate3d(0,0,50px);
	}
	100% {
		transform: perspective(500px) translate3d(0,0,70px);
	}
}

@keyframes stick {
	0% {
		transform: perspective(500px) translate3d(0,0,100px);
		opacity: 0;
	}
	100% {
		transform: perspective(500px) translate3d(0,0,0);
		opacity: 1;
	}
}

@keyframes jiggle {
	0% {
		transform: rotate(0deg);
	}
	42% {
		transform: rotate(0deg);
	}
	44% {
		transform: rotate(-10deg);
	}
	48% {
		transform: rotate(10deg);
	}
	50% {
		transform: rotate(0deg);
	}
	52% {
		transform: rotate(-10deg);
	}
	56% {
		transform: rotate(10deg);
	}
	58% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(0deg);
	}
}