@import "_animations_base";

.wpb_animate_when_almost_visible.unfold-3d-to-left,
.wpb_animate_when_almost_visible.unfold-3d-to-right,
.wpb_animate_when_almost_visible.unfold-3d-to-top,
.wpb_animate_when_almost_visible.unfold-3d-to-bottom,
.wpb_animate_when_almost_visible.unfold-3d-vertical,
.wpb_animate_when_almost_visible.unfold-3d-horizontal {
	position: relative;
	opacity: 0;
	transition: opacity 0.7s;
}

// Top margins cause an unwanted top gap in the animation, get rid of it
.unfold-3d-to-left,
.unfold-3d-to-right,
.unfold-3d-horizontal,
.unfold-3d-to-bottom,
.unfold-3d-to-top,
.unfold-3d-vertical {
	.unfolder-container .unfolder-content {
		.wpb_text_column:first-child {
			> .wpb_wrapper {
				> *:first-child {
					margin-top: 0;
				}
				> *:first-child > *:first-child {
					margin-top: 0;
				}
				> *:first-child > *:first-child > *:first-child {
					margin-top: 0;
				}
			}
		}
	}
}

.unfold-3d-to-left .unfolder-container,
.unfold-3d-to-right .unfolder-container,
.unfold-3d-horizontal .unfolder-container {
	position: absolute;
	overflow: hidden;
	top: 0;
	width: 50%;
}
.unfold-3d-to-bottom .unfolder-container,
.unfold-3d-to-top .unfolder-container,
.unfold-3d-vertical .unfolder-container {
	position: absolute;
	overflow: hidden;
//	top: 0;
	width: 100%;
}

.unfold-3d-to-left,
.unfold-3d-to-right,
.unfold-3d-horizontal {
	.unfolder-container.right {
		left: 50%;
		.unfolder-content {
			position: relative;
			left: -100%;
		}
	}
	.unfolder-container.left {
		left: 0;
		.unfolder-content {
			left: 0;
		}
	}
}
.unfold-3d-to-bottom,
.unfold-3d-to-top,
.unfold-3d-vertical {
	.unfolder-container.left { // top
		top: 0%;
		.unfolder-content {
			position: relative;
		}
	}
	.unfolder-container.right { // bottom
		top: 50%;
		.unfolder-content {
			position: relative;
			top: -100%;
		}
	}
}

.wpb_start_animation.gambit-css-animation.unfold-3d-to-left {
	animation: unfold-3d-main-opacity 1.5s 0s 1 ease-in-out;
	animation-fill-mode: forwards;
	.unfolder-container.left {
		animation: unfold-3d-to-left-flap 1.5s 0s 1 ease-in-out;
		animation-fill-mode: forwards;
	}
	.unfolder-container.right {
		animation: unfold-3d-to-left-opacity 1.5s 0s 1 ease-in-out;
		animation-fill-mode: forwards;
	}
	.real-content {
		animation: unfold-3d-real-content-opacity 1.5s 0s 1 linear;
		animation-fill-mode: forwards;
	}
}


@keyframes unfold-3d-main-opacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes unfold-3d-real-content-opacity {
	0%, 99.999% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}


@keyframes unfold-3d-to-left-flap {
	0% {
		transform-origin: 100% 50%;
		opacity: 0;
		left: 0;
		width: 50%;
		transform: perspective(1300px) rotateY(180deg);
		z-index: 2;
	}
	99.999% {
		opacity: 1;
		z-index: 2;
	}
	100% {
		width: 50%;
		left: 0;
		transform-origin: 100% 50%;
		transform: perspective(1300px) rotateY(0deg);
		z-index: -1000;
		opacity: 0;
	}
}
@keyframes unfold-3d-to-left-opacity {
	0% {
		opacity: 0;
		left: 50%;
		width: 50%;
		z-index: 1;
	}
	99.999% {
		opacity: 1;
		z-index: 1;
	}
	100% {
		left: 50%;
		width: 50%;
		opacity: 0;
		z-index: -1000;
	}
}




.wpb_start_animation.gambit-css-animation.unfold-3d-to-right {
	animation: unfold-3d-main-opacity 1.5s 0s 1 ease-in-out;
	animation-fill-mode: forwards;
	.unfolder-container.left {
		animation: unfold-3d-to-right-opacity 1.5s 0s 1 ease-in-out;
		animation-fill-mode: forwards;
	}
	.unfolder-container.right {
		animation: unfold-3d-to-right-flap 1.5s 0s 1 ease-in-out;
		animation-fill-mode: forwards;
	}
	.real-content {
		animation: unfold-3d-real-content-opacity 1.5s 0s 1 linear;
		animation-fill-mode: forwards;
	}
}

@keyframes unfold-3d-to-right-flap {
	0% {
		transform-origin: 0% 50%;
		opacity: 0;
		left: 50%;
		width: 50%;
		transform: perspective(1300px) rotateY(-180deg);
		z-index: 2;
	}
	99.999% {
		opacity: 1;
		z-index: 2;
	}
	100% {
		width: 50%;
		left: 50%;
		transform-origin: 0% 50%;
		transform: perspective(1300px) rotateY(0deg);
		z-index: -1000;
		opacity: 0;
	}
}
@keyframes unfold-3d-to-right-opacity {
	0% {
		opacity: 0;
		left: 0%;
		width: 50%;
		z-index: 1;
	}
	99.999% {
		opacity: 1;
		z-index: 1;
	}
	100% {
		left: 0%;
		width: 50%;
		opacity: 0;
		z-index: -1000;
	}
}


.wpb_start_animation.gambit-css-animation.unfold-3d-to-bottom {
	animation: unfold-3d-main-opacity 1.5s 0s 1 ease-in-out;
	animation-fill-mode: forwards;
	.unfolder-container.left {
		animation: unfold-3d-to-bottom-opacity 1.5s 0s 1 ease-in-out;
		animation-fill-mode: forwards;
	}
	.unfolder-container.right {
		animation: unfold-3d-to-bottom-flap 1.5s 0s 1 ease-in-out;
		animation-fill-mode: forwards;
	}
	.real-content {
		animation: unfold-3d-real-content-opacity 1.5s 0s 1 linear;
		animation-fill-mode: forwards;
	}
}

@keyframes unfold-3d-to-bottom-flap {
	0% {
		transform-origin: 50% 0%;
		opacity: 0;
		top: 50%;
		height: 50%;
		width: 100%;
		transform: perspective(1300px) rotateX(180deg);
		z-index: 2;
	}
	99.999% {
		opacity: 1;
		z-index: 2;
	}
	100% {
		width: 100%;
		height: 50%;
		top: 50%;
		transform-origin: 50% 0%;
		transform: perspective(1300px) rotateX(0deg);
		z-index: -1000;
		opacity: 0;
	}
}
@keyframes unfold-3d-to-bottom-opacity {
	0% {
		opacity: 0;
		width: 100%;
		top: 0;
		height: 50%;
		z-index: 1;
	}
	99.999% {
		opacity: 1;
		z-index: 1;
	}
	100% {
		top: 0%;
		width: 100%;
		height: 50%;
		opacity: 0;
		z-index: -1000;
	}
}


.wpb_start_animation.gambit-css-animation.unfold-3d-to-top {
	animation: unfold-3d-main-opacity 1.5s 0s 1 ease-in-out;
	animation-fill-mode: forwards;
	.unfolder-container.right {
		animation: unfold-3d-to-top-opacity 1.5s 0s 1 ease-in-out;
		animation-fill-mode: forwards;
	}
	.unfolder-container.left {
		animation: unfold-3d-to-top-flap 1.5s 0s 1 ease-in-out;
		animation-fill-mode: forwards;
	}
	.real-content {
		animation: unfold-3d-real-content-opacity 1.5s 0s 1 linear;
		animation-fill-mode: forwards;
	}
}

@keyframes unfold-3d-to-top-flap {
	0% {
		transform-origin: 50% 100%;
		opacity: 0;
		top: 0%;
		height: 50%;
		width: 100%;
		transform: perspective(1300px) rotateX(-180deg);
		z-index: 2;
	}
	99.999% {
		opacity: 1;
		z-index: 2;
	}
	100% {
		width: 100%;
		height: 50%;
		top: 0%;
		transform-origin: 50% 100%;
		transform: perspective(1300px) rotateX(0deg);
		z-index: -1000;
		opacity: 0;
	}
}
@keyframes unfold-3d-to-top-opacity {
	0% {
		opacity: 0;
		width: 100%;
		top: 50%;
		height: 50%;
		z-index: 1;
	}
	99.999% {
		opacity: 1;
		z-index: 1;
	}
	100% {
		top: 50%;
		width: 100%;
		height: 50%;
		opacity: 0;
		z-index: -1000;
	}
}



.wpb_start_animation.gambit-css-animation.unfold-3d-horizontal {
	animation: unfold-3d-main-opacity 1.5s 0s 1 ease-in-out;
	animation-fill-mode: forwards;
	.unfolder-container.left {
		animation: unfold-3d-horizontal-left-flap 1.5s 0s 1 ease-in-out;
		animation-fill-mode: forwards;
	}
	.unfolder-container.right {
		animation: unfold-3d-horizontal-right-flap 1.5s 0s 1 ease-in-out;
		animation-fill-mode: forwards;
	}
	.real-content {
		animation: unfold-3d-real-content-opacity 1.5s 0s 1 linear;
		animation-fill-mode: forwards;
	}
}

@keyframes unfold-3d-horizontal-left-flap {
	0% {
		transform-origin: 100% 50%;
		opacity: 0;
		left: 0;
		width: 50%;
		transform: perspective(1300px) rotateY(90deg);
		z-index: 2;
	}
	99.999% {
		opacity: 1;
		z-index: 2;
	}
	100% {
		width: 50%;
		left: 0;
		transform-origin: 100% 50%;
		transform: perspective(1300px) rotateY(0deg);
		z-index: -1000;
		opacity: 0;
	}
}

@keyframes unfold-3d-horizontal-right-flap {
	0% {
		transform-origin: 0% 50%;
		opacity: 0;
		left: 50%;
		width: 50%;
		transform: perspective(1300px) rotateY(-90deg);
		z-index: 2;
	}
	99.999% {
		opacity: 1;
		z-index: 2;
	}
	100% {
		width: 50%;
		left: 50%;
		transform-origin: 0% 50%;
		transform: perspective(1300px) rotateY(0deg);
		z-index: -1000;
		opacity: 0;
	}
}



.wpb_start_animation.gambit-css-animation.unfold-3d-vertical {
	animation: unfold-3d-main-opacity 1.5s 0s 1 ease-in-out;
	animation-fill-mode: forwards;
	.unfolder-container.left {
		animation: unfold-3d-vertical-top-flap 1.5s 0s 1 ease-in-out;
		animation-fill-mode: forwards;
	}
	.unfolder-container.right {
		animation: unfold-3d-vertical-bottom-flap 1.5s 0s 1 ease-in-out;
		animation-fill-mode: forwards;
	}
	.real-content {
		animation: unfold-3d-real-content-opacity 1.5s 0s 1 linear;
		animation-fill-mode: forwards;
	}
}
@keyframes unfold-3d-vertical-top-flap {
	0% {
		transform-origin: 50% 100%;
		opacity: 0;
		top: 0%;
		height: 50%;
		width: 100%;
		transform: perspective(1300px) rotateX(-90deg);
		z-index: 2;
	}
	99.999% {
		opacity: 1;
		z-index: 2;
	}
	100% {
		width: 100%;
		height: 50%;
		top: 0%;
		transform-origin: 50% 100%;
		transform: perspective(1300px) rotateX(0deg);
		z-index: -1000;
		opacity: 0;
	}
}
@keyframes unfold-3d-vertical-bottom-flap {
	0% {
		transform-origin: 50% 0%;
		opacity: 0;
		top: 50%;
		height: 50%;
		width: 100%;
		transform: perspective(1300px) rotateX(90deg);
		z-index: 2;
	}
	99.999% {
		opacity: 1;
		z-index: 2;
	}
	100% {
		width: 100%;
		height: 50%;
		top: 50%;
		transform-origin: 50% 0%;
		transform: perspective(1300px) rotateX(0deg);
		z-index: -1000;
		opacity: 0;
	}
}