.jw-animated-box {
	position: relative;

	&__front,
	&__back {
		position: absolute;
		width: 100%;
		height: 100%;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: stretch;
	}

	&__front {
		background-color: #6ec1e4;
	}

	&__back {
		background-color: #54595f;
	}

	&__overlay {
		position: absolute;
		width: 100%;
		height: 100%;
		display: block;
		top: 0;
		left: 0;
		z-index: 1;
	}

	&__inner {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-content: center;
		align-items: stretch;
		min-width: 100%;
		z-index: 2;
	}

	&__icon {
		min-width: 100%;
		display: flex;
		justify-content: center;

		.jw-animated-box-icon-inner {
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	&__content {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		align-content: center;
		align-items: stretch;
	}

	.jw-animated-box__button {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.jw-animated-box__button--icon-before {
		.jw-animated-box__button-text {
			order: 2;
		}
		.jw-animated-box__button-icon {
			order: 1;
		}
	}

	.jw-animated-box__button--icon-after {
		.jw-animated-box__button-text {
			order: 1;
		}
		.jw-animated-box__button-icon {
			order: 2;
		}
	}

	&.jw-box-effect-1 {
		perspective: 1000px;

		.jw-animated-box__front {
			transform-style: preserve-3d;
			transform: rotateY(0deg);
			backface-visibility: hidden;
			z-index: 2;
			transition: all 0.7s cubic-bezier(.11,.6,.24,.89);
		}

		.jw-animated-box__back {
			transform-style: preserve-3d;
			transform: rotateY(-180deg);
			backface-visibility: hidden;
			z-index: 1;
			transition: all 0.7s cubic-bezier(.11,.6,.24,.89);
		}

		&.flipped {

			.jw-animated-box__front {
				transform: rotateY(180deg);
				transition: all 0.7s cubic-bezier(.11,.6,.24,.89);
			}

			.jw-animated-box__back {
				transform: rotateY(0deg);
				transition: all 0.7s cubic-bezier(.11,.6,.24,.89);
			}
		}
	}

	&.jw-box-effect-2 {
		perspective: 1000px;

		.jw-animated-box__front {
			transform-style: preserve-3d;
			transform: rotateX(0deg);
			backface-visibility: hidden;
			z-index: 2;
			transition: all 0.7s cubic-bezier(.11,.6,.24,.89);
		}

		.jw-animated-box__back {
			transform-style: preserve-3d;
			transform: rotateX(-180deg);
			backface-visibility: hidden;
			z-index: 1;
			transition: all 0.7s cubic-bezier(.11,.6,.24,.89);
		}

		&.flipped {

			.jw-animated-box__front {
				transform: rotateX(180deg);
				transition: all 0.7s cubic-bezier(.11,.6,.24,.89);
			}

			.jw-animated-box__back {
				transform: rotateX(0deg);
				transition: all 0.7s cubic-bezier(.11,.6,.24,.89);
			}
		}
	}

	&.jw-box-effect-3 {
		perspective: 1000px;

		.jw-animated-box__front {
			transform-style: preserve-3d;
			transform: rotateX(0deg) translateY(0) scale(1);
			z-index: 2;
			transition: all 0.7s cubic-bezier(.11,.6,.24,.89);
		}

		.jw-animated-box__back {
			transform-style: preserve-3d;
			transform: rotateX(-90deg) translateY(150%) scale(0);
			z-index: 1;
			transition: all 0.5s cubic-bezier(.63,.07,.78,.55);
		}

		&.flipped {

			.jw-animated-box__front {
				transform: rotateX(90deg) translateY(-150%) scale(0);
				transition: all 0.5s cubic-bezier(.63,.07,.78,.55);
				z-index: 1;
			}

			.jw-animated-box__back {
				transform: rotateX(0deg) translateY(0) scale(1);
				transition: all 0.7s cubic-bezier(.11,.6,.24,.89);
				z-index: 2;
			}
		}
	}

	&.jw-box-effect-4 {
		perspective: 1000px;

		.jw-animated-box__front {
			transform-style: preserve-3d;
			transform: rotateY(0deg) translateX(0) scale(1);
			z-index: 2;
			transition: all 0.7s cubic-bezier(.11,.6,.24,.89);
		}

		.jw-animated-box__back {
			transform-style: preserve-3d;
			transform: rotateY(-90deg) translateX(-150%) scale(0);
			z-index: 1;
			transition: all 0.5s cubic-bezier(.63,.07,.78,.55);
		}

		&.flipped {

			.jw-animated-box__front {
				transform: rotateY(90deg) translateX(150%) scale(0);
				transition: all 0.5s cubic-bezier(.63,.07,.78,.55);
				z-index: 1;
			}

			.jw-animated-box__back {
				transform: rotateY(0deg) translateX(0) scale(1);
				transition: all 0.7s cubic-bezier(.11,.6,.24,.89);
				z-index: 2;
			}
		}
	}

	&.jw-box-effect-5 {
		overflow: hidden;

		.jw-animated-box__front {
			transform: translateY(0%);
			transition: all 0.7s cubic-bezier(.5,.12,.46,.88);
		}

		.jw-animated-box__back {
			transform: translateY(-100%);
			transition: all 0.7s cubic-bezier(.5,.12,.46,.88);
		}

		&.flipped {

			.jw-animated-box__front {
				transform: translateY(100%);
				transition: all 0.7s cubic-bezier(.5,.12,.46,.88);
			}

			.jw-animated-box__back {
				transform: translateY(0%);
				transition: all 0.7s cubic-bezier(.5,.12,.46,.88);
			}
		}
	}

	&.jw-box-effect-6 {
		overflow: hidden;

		.jw-animated-box__front {
			transform: translateX(0%);
			transition: all 0.7s cubic-bezier(.5,.12,.46,.88);
		}

		.jw-animated-box__back {
			transform: translateX(-100%);
			transition: all 0.7s cubic-bezier(.5,.12,.46,.88);
		}

		&.flipped {

			.jw-animated-box__front {
				transform: translateX(100%);
				transition: all 0.7s cubic-bezier(.5,.12,.46,.88);
			}

			.jw-animated-box__back {
				transform: translateX(0%);
				transition: all 0.7s cubic-bezier(.5,.12,.46,.88);
			}
		}
	}

	&.jw-box-effect-7 {
		perspective: 1000px;

		.jw-animated-box__front {
			transform-style: preserve-3d;
			transform: rotateY(0deg);
			backface-visibility: hidden;
			z-index: 2;
			transition: all 0.7s cubic-bezier(.5,.12,.46,.88);

			.jw-animated-box__inner {
				transform: translateZ(0px);
				transition: all 0.4s cubic-bezier(.5,.12,.46,.88) 0.2s;
				backface-visibility: hidden;
			}
		}

		.jw-animated-box__back {
			transform-style: preserve-3d;
			transform: rotateY(-180deg);
			backface-visibility: hidden;
			z-index: 1;
			transition: all 0.7s cubic-bezier(.5,.12,.46,.88);

			.jw-animated-box__inner {
				transform: translateZ(125px);
				transition: all 0.4s cubic-bezier(.5,.12,.46,.88);
				backface-visibility: hidden;
			}
		}

		&.flipped {

			.jw-animated-box__front {
				transform: rotateY(180deg);
				transition: all 0.7s cubic-bezier(.5,.12,.46,.88);

				.jw-animated-box__inner {
					transform: translateZ(125px);
					transition: all 0.4s cubic-bezier(.5,.12,.46,.88);
					backface-visibility: hidden;
				}
			}

			.jw-animated-box__back {
				transform: rotateY(0deg);
				transition: all 0.7s cubic-bezier(.5,.12,.46,.88);

				.jw-animated-box__inner {
					transform: translateZ(0px);
					transition: all 0.4s cubic-bezier(.5,.12,.46,.88) 0.2s;
					backface-visibility: hidden;
				}
			}
		}
	}

	&.jw-box-effect-8 {
		perspective: 1000px;

		.jw-animated-box__front {
			transform-style: preserve-3d;
			transform: rotateX(0deg);
			backface-visibility: hidden;
			z-index: 2;
			transition: all 0.7s cubic-bezier(.5,.12,.46,.88);

			.jw-animated-box__inner {
				transform: translateZ(0px);
				transition: all 0.4s cubic-bezier(.5,.12,.46,.88) 0.2s;
				backface-visibility: hidden;
			}
		}

		.jw-animated-box__back {
			transform-style: preserve-3d;
			transform: rotateX(-180deg);
			backface-visibility: hidden;
			z-index: 1;
			transition: all 0.7s cubic-bezier(.5,.12,.46,.88);

			.jw-animated-box__inner {
				transform: translateZ(125px);
				transition: all 0.4s cubic-bezier(.5,.12,.46,.88);
				backface-visibility: hidden;
			}
		}

		&.flipped {

			.jw-animated-box__front {
				transform: rotateX(180deg);
				transition: all 0.7s cubic-bezier(.5,.12,.46,.88);

				.jw-animated-box__inner {
					transform: translateZ(125px);
					transition: all 0.4s cubic-bezier(.5,.12,.46,.88);
					backface-visibility: hidden;
				}
			}

			.jw-animated-box__back {
				transform: rotateX(0deg);
				transition: all 0.7s cubic-bezier(.5,.12,.46,.88);

				.jw-animated-box__inner {
					transform: translateZ(0px);
					transition: all 0.4s cubic-bezier(.5,.12,.46,.88) 0.2s;
					backface-visibility: hidden;
				}
			}
		}
	}
}
