/* FLIPBOOK CSS */

.flipbook {
	position: relative;
	margin: 0 auto;
	-webkit-perspective: 5000px;
	perspective: 5000px;
	max-width: 100%;
	width: 100%;
	/*max-height: 80vh;*/
	-webkit-transform: scale3d(1, 1, 1) !important;
	transform: scale3d(1, 1, 1) !important;
}

.flipbook > .page {
	position: absolute;
	width: 100%;
	height: 100%;
	text-align: center;
	background-color: white;
	-webkit-transform-origin: 0% 0%;
	transform-origin: 0% 0%;
	cursor: move;
	background: rgba(255, 255, 255, 0);
	-webkit-user-select: none; /* Chrome/Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */

	/* Rules below not implemented in browsers yet */
	-o-user-select: none;
	user-select: none;
	display: none;
	
	-webkit-transform: scale3d(1, 1, 1) !important;
	transform: scale3d(1, 1, 1) !important;
}

.flipbook img {
	max-width: 100%;
	max-height: 100%;
}

.flipbook video {
	max-width: 100%;
	max-height: 100%;
}

.slider-background {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: -1;
	background-size: cover;
	background-repeat: no-repeat;
}

.flipbook > .current {
	z-index: 200 !important;
	display: block;
}
/* Wenn FLip Effekt genutzt wird, dann muss nextPage auf 199 z-index. */
.flipbook .next-page{
	z-index: 201 !important;
	display: block;
	background: none;
}

/********************************* Klassen für Flip Animationen **********************************/

.flip-left, .flip-right, .flip-up, .flip-down {
	-webkit-transform: scale3d(1, 1, 1) !important;
	transform: scale3d(1, 1, 1) !important;
}

.flipbook > .flip-left {
	-webkit-animation-name: flipLeft;
	animation-name: flipLeft;
}

@-webkit-keyframes flipLeft{
    from {
		-webkit-transform: rotate3d(0, 0, 0, 0deg);
		transform: rotate3d(0, 0, 0, 0deg);
	}
    to {
		-webkit-transform: rotate3d(0, 1, 0, -90deg); 
		transform: rotate3d(0, 1, 0, -90deg); 
	}
}

@keyframes flipLeft {
	from {
		-webkit-transform: rotate3d(0, 0, 0, 0deg);
		transform: rotate3d(0, 0, 0, 0deg);
	}
    to {
		-webkit-transform: rotate3d(0, 1, 0, -90deg); 
		transform: rotate3d(0, 1, 0, -90deg); 
	}
}
	
.flipbook > .flip-right {
	z-index: 220 !important;
	-webkit-animation-name: flipRight;
	animation-name: flipRight;
}

@-webkit-keyframes flipRight{
    from {
		-webkit-transform: rotate3d(0, 1, 0, -90deg); 
		transform: rotate3d(0, 1, 0, -90deg); 
	}
    to {
		-webkit-transform: rotate3d(0, 0, 0, 0deg);
		transform: rotate3d(0, 0, 0, 0deg);
	}
}

@keyframes flipRight{
    from {
		-webkit-transform: rotate3d(0, 1, 0, -90deg); 
		transform: rotate3d(0, 1, 0, -90deg); 
	}
    to {
		-webkit-transform: rotate3d(0, 0, 0, 0deg);
		transform: rotate3d(0, 0, 0, 0deg);
	}
}

.flipbook > .flip-up {
	-webkit-animation-name: flipUp;
	animation-name: flipUp;
}

@-webkit-keyframes flipUp{
    from {
		-webkit-transform: rotate3d(0, 0, 0, 0deg);
		transform: rotate3d(0, 0, 0, 0deg);
	}
    to {
		-webkit-transform: rotate3d(1, 0, 0, 90deg);
		transform: rotate3d(1, 0, 0, 90deg);
	}
}

@keyframes flipUp{
    from {
		-webkit-transform: rotate3d(0, 0, 0, 0deg);
		transform: rotate3d(0, 0, 0, 0deg);
	}
    to {
		-webkit-transform: rotate3d(1, 0, 0, 90deg);
		transform: rotate3d(1, 0, 0, 90deg);
	}
}
	
.flipbook > .flip-down {	
	z-index: 220 !important;
	-webkit-animation-name: flipDown;
	animation-name: flipDown;
}

@-webkit-keyframes flipDown{
    from {
		-webkit-transform: rotate3d(1, 0, 0, 90deg);
		transform: rotate3d(1, 0, 0, 90deg);
		
	}
    to {
		-webkit-transform: rotate3d(0, 0, 0, 0deg);
		transform: rotate3d(0, 0, 0, 0deg);
		
	}
}

@keyframes flipDown{
    from {
		-webkit-transform: rotate3d(1, 0, 0, 90deg);
		transform: rotate3d(1, 0, 0, 90deg);
		
	}
    to {
		-webkit-transform: rotate3d(0, 0, 0, 0deg);
		transform: rotate3d(0, 0, 0, 0deg);
		
	}
}

/************************************** Klassen für Slide-Animationen ***************************************/

/**************************** Horizontal **********************************************/

.flipbook > .slide-out-left {
	-webkit-animation-name: slideOutLeft;
	animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutLeft{
    from {
		left: 0px;
	}
    to {
		left: -100%;
	}
}

@keyframes slideOutLeft{
    from {
		left: 0px;
	}
    to {
		left: -100%;
	}
}

.flipbook > .slide-in-left {
	-webkit-animation-name: slideInLeft;
	animation-name: slideInLeft;
}

@-webkit-keyframes slideInLeft{
    from {
		left: 100%;
	}
    to {
		left: 0px;
	}
}

@keyframes slideInLeft{
    from {
		left: 100%;
	}
    to {
		left: 0px;
	}
}

.flipbook > .slide-out-right {
	-webkit-animation-name: slideOutRight;
	animation-name: slideOutRight;
}

@-webkit-keyframes slideOutRight{
    from {
		left: 0px;
	}
    to {
		left: 100%;
	}
}

@keyframes slideOutRight{
    from {
		left: 0px;
	}
    to {
		left: 100%;
	}
}

.flipbook > .slide-in-right {
	-webkit-animation-name: slideInRight;
	animation-name: slideInRight;
}

@-webkit-keyframes slideInRight{
    from {
		left: -100%;
	}
    to {
		left: 0px;
	}
}

@keyframes slideInRight{
    from {
		left: -100%;
	}
    to {
		left: 0px;
	}
}

/**************************************** Vertikal **********************************************/

.flipbook > .slide-out-up {
	-webkit-animation-name: slideOutUp;
	animation-name: slideOutUp;
}

@-webkit-keyframes slideOutUp{
    from {
		top: 0px;
	}
    to {
		top: -100%;
	}
}

@keyframes slideOutUp{
    from {
		top: 0px;
	}
    to {
		top: -100%;
	}
}

.flipbook > .slide-in-up {
	-webkit-animation-name: slideInUp;
	animation-name: slideInUp;
}

@-webkit-keyframes slideInUp{
    from {
		top: 100%;
	}
    to {
		top: 0px;
	}
}

@keyframes slideInUp{
    from {
		top: 100%;
	}
    to {
		top: 0px;
	}
}

.flipbook > .slide-out-down {
	-webkit-animation-name: slideOutDown;
	animation-name: slideOutDown;
}

@-webkit-keyframes slideOutDown{
    from {
		top: 0px;
	}
    to {
		top: 100%;
	}
}

@keyframes slideOutDown{
    from {
		top: 0px;
	}
    to {
		top: 100%;
	}
}

.flipbook > .slide-in-down {
	-webkit-animation-name: slideInDown;
	animation-name: slideInDown;
}

@-webkit-keyframes slideInDown{
    from {
		top: -100%;
	}
    to {
		top: 0px;
	}
}

@keyframes slideInDown{
    from {
		top: -100%;
	}
    to {
		top: 0px;
	}
}

/************************************************ Styling für die Control-Buttons des Flipbooks ********************/
/* Diese sind je nach alignment unterschiedlich positioniert*/

.flipbook .flip-control {
	position: absolute;
	cursor: pointer;
	z-index: 402;
	width: 6vw;
	height: 16.8vw;
	max-width: 30px;
	max-height: 84px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	opacity: 0.8;
}

.flipbook .flip-control:hover {
	opacity: 1;
}

.flipbook .pg-next {
	background-image: url("./arrow_next.png");

}

.flipbook .pg-prev {
	background-image: url("./arrow_prev.png");
}

.flipbook .flip-control.horizontal {
	top: 50%;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	bottom: auto;
}

.flipbook .horizontal.pg-next{
	right: 10px; 
}

.flipbook .horizontal.pg-prev{
	left: 10px; 
}

.flipbook .flip-control.vertical {
	left: 0;
	right:0;
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}

.flipbook .vertical.pg-next{
	bottom: -10px; 
}

.flipbook .vertical.pg-prev{
	top: -10px; 
}

/************************Styling für die anklickbaren area im Flipbook *************/
/* Diese sind je nach alignment unterschiedlich positioniert*/
.flipbook .click-area {
	position: absolute;
	z-index: 210;
	cursor: pointer;
	display: none;
}

.flipbook .click-area.horizontal {
	height: 100%;
	width: 5%;
	min-width: 30px;
}

.flipbook .click-area.horizontal.pg-prev-area {
	left: 0;
}

.flipbook .click-area.horizontal.pg-next-area {
	right: 0;
}

.flipbook .click-area.vertical {
	width: 100%;
	height: 5%;
	min-height: 30px;
}

.flipbook .click-area.vertical.pg-prev-area {
	top: 0;
}

.flipbook .click-area.vertical.pg-next-area {
	bottom: 0;
}

/******************************** Styling für Captions ***************************/

.flipbook .captions {
	position: absolute;
	z-index: 1000;
}

.flipbook .caption {
	background: #ccc;
	border-radius: 50%;
	cursor: pointer;
}

.flipbook .caption:hover {
	background: #000;
}

.flipbook .caption.current{
	background: #000;
}

.flipbook .captions.horizontal {
	left: 0;
	right: 0;
	height: 20px;
	bottom: 0px;
	text-align: center;
}

.flipbook .captions.horizontal .caption{
	height: 20px;
	width: 20px;
	margin-right: 15px;
	display: inline-block;
}

.flipbook .captions.vertical {
	width: 20px;
	left: 0px;
	top: 50%;
	bottom: 0;
}

.flipbook .captions.vertical .caption{
	width: 10px;
	height: 15px;
	margin-bottom: 3px;

}