/* CSS Document */
.contentFlipbookGallery  {
	--background: #fefefe;
	--font-color: var(--font-color-dark, #444);
	--width: 50%;
}

.contentFlipbookGallery {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-bottom: 1em;
}

.contentFlipbookGallery input[type=checkbox] {
  visibility: hidden;
  widht: 0;
  height: 0;
}

.contentFlipbookGallery .book {
	width: var(--width);
	max-width: var(--maxWidth);
	aspect-ratio: var(--aspect);
	transform: translateX(50%);
	position: relative;
	perspective: 1000px;
	transform-style: preserve-3d;
}

.contentFlipbookGallery .book .pages {
	position: relative;
	width: 100%;
	aspect-ratio: var(--aspect);
}

.contentFlipbookGallery .book .pages .page {
	position: absolute;
	width: 100%;
	aspect-ratio: var(--aspect);
	transform-origin: left;
	perspective: 1000px;
	transform-style: preserve-3d;
	transform: rotateY(0deg);
	transition: transform 1.5s, z-index 0s 0.5s;
}

.contentFlipbookGallery .book .pages .page:hover {}

.contentFlipbookGallery .book .pages .front {
	position: absolute;
	backface-visibility: hidden;
	box-sizing: border-box;
}
.contentFlipbookGallery .book .pages .back {
	transform: rotateY(180deg);
	position: absolute;
	backface-visibility: hidden;
	z-index: 99;
}

.contentFlipbookGallery .book .pages .page img {
	max-width: 100%;
	height: auto;
}

.contentFlipbookGallery .book .pages > div label {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.contentFlipbookGallery nav {
	display: flex;
	justify-content: space-between;
  width: 100%;
}
.contentFlipbookGallery nav div {
	font-size: 50px;
	line-height: 0px;
  margin-top: 20px;
  cursor: pointer;
}

@media all and (max-width: 1000px) {}
@media all and (max-width: 700px) {}

@media all and (max-width: 600px) {
	.contentFlipbookGallery .book { width: 100%; aspect-ratio: auto; transform: none; overflow: scroll; }
	.contentFlipbookGallery .book .pages { position:	relative;  transform: none; }
	.contentFlipbookGallery .book .pages .page { position:	relative;  transform: none; margin-bottom: 10px; }
	.contentFlipbookGallery .book .pages .front { position:	relative; }
	.contentFlipbookGallery .book .pages .back { position:	relative; display: none; }
	.contentFlipbookGallery nav {	display: none; }
	.contentFlipbookGallery .book .pages > div label { cursor: auto; pointer-events: none; }
}