html,
body,
#vue {
	height: 100%;
	overflow: hidden;
}

body {
	background-color: transparent;
}

#vue {
	max-width: 1312px;
	margin: 0 auto;
}

.flipbook {
	width: 100%;
	height: 100%;
	padding-top: 25px;
}

.action-bar {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
}

.action-bar i {
	cursor: pointer;
	margin: 0 4px;
}

.action-bar i.disabled {
	pointer-events: none;
	opacity: 0.25;
}

@media (min-width: 992px) {
	.flipbook .click-to-flip {
		width: 25% !important;
		z-index: 1;
		transition: all 0.3s ease-in-out;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 50px;
	}

	.flipbook .viewport.zoom .click-to-flip {
		z-index: 0;
	}

	.flipbook.can-flip-left .click-to-flip.left {
		background-image: url('arrow-right.svg');
		background-position: 15px center;
	}

	.flipbook.can-flip-left .click-to-flip.left:hover {
		background-position: 0 center;
	}

	.flipbook.can-flip-right .click-to-flip.right {
		background-image: url('arrow-left.svg');
		background-position: right 15px center;
	}

	.flipbook.can-flip-right .click-to-flip.right:hover {
		background-position: right 0 center;
	}
}