.medizin-flip-box {
	min-height: 280px;
	position: relative;
	-webkit-perspective: 1000px;
	perspective: 1000px;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;

	.layer {
		position: absolute;
		width: 100%;
		height: 100%;
		-webkit-transition: all .6s ease-in-out;
		-o-transition: all .6s ease-in-out;
		transition: all .6s ease-in-out;
		text-align: center;
	}

	.overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.layer-inner {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
	}

	.layer-content {
		padding: 35px;
		width: 100%;
	}

	.image {
		margin: 0 0 20px 0;
		display: inline-block;
		width: 100%;

		img {
			width: 50%;
		}
	}

	.medizin-icon-wrap,
	.heading-wrap {
		line-height: 0;
	}

	.medizin-icon-wrap {
		margin-bottom: 30px;
	}

	.medizin-icon-view {
		display: inline-block;
		font-size: 60px;
	}

	.icon {
		color: #fff;
	}

	.medizin-svg-icon {
		width: 60px;
	}

	.heading {
		display: inline-block;
		color: #fff;
		font-size: 26px;
		margin-bottom: 0;
	}

	.description-wrap {
		margin-top: 20px;
	}

	.description {
		color: #fff;
		font-size: 16px;
		line-height: 1.875;
	}

	.tm-button-wrapper {
		margin: 40px 0 0;
	}

	/**
	 * Default back side background is dark then
	 * Reset all buttons style to light skin.
	 */
	.tm-button {
		&.style-flat {
			color: #111;

			&:hover {
				color: #fff;
			}

			&:before {
				background: #fff;
			}
		}

		&.style-text {
			color: #fff;
			padding-bottom: 0;
		}

		&.style-left-line,
		&.style-bottom-line {
			color: #fff;

			.button-content-wrapper {
				&:before {
					background: rgba(255, 255, 255, .4);
				}

				&:after {
					background: #fff;
				}
			}
		}

		&.style-border,
		&.style-thick-border {
			border-color: #fff;
			color: #fff;

			&:hover {
				color: #111;
			}

			&:after {
				background: #fff;
			}
		}
	}
}

@media (max-device-width: 1024px) {
	.medizin-flip-box {
		cursor: pointer;
	}
}

.front-side {
	background-color: #111;
}

.back-side {
	background-color: #5758e0;
	box-shadow: 0 40px 40px -40px rgba(51, 51, 51, .13);
	display: block;
}

.elementor-flip-box__button.elementor-button {
	cursor: pointer;
	-ms-flex-item-align: center;
	align-self: center;
	margin-left: auto;
	margin-right: auto;
	border: solid 2px white;
	color: white;
	background: transparent;
}

.elementor-flip-box__button.elementor-button:hover {
	background: transparent;
	text-decoration: none;
}

.medizin-flip-box--3d {
	.layer-inner {
		-webkit-transform: translateZ(90px) scale(0.91);
		transform: translateZ(90px) scale(0.91);
	}

	.overlay {
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
		-webkit-transform: translateZ(0.1px);
		transform: translateZ(0.1px);
	}
}

.medizin-flip-box--effect-flip {
	.medizin-flip-box {
		-webkit-perspective: 1000px;
		perspective: 1000px;
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;

		&:hover {
			.back-side {
				-webkit-transform: none;
				-ms-transform: none;
				transform: none;
			}
		}
	}

	.layer {
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}

	.front-side {
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
		z-index: 1;
	}

	&.medizin-flip-box--direction-right {
		.back-side {
			-webkit-transform: rotateX(0) rotateY(-180deg);
			transform: rotateX(0) rotateY(-180deg);
		}

		.medizin-flip-box {
			&:hover {
				.front-side {
					-webkit-transform: rotateX(0) rotateY(180deg);
					transform: rotateX(0) rotateY(180deg);
				}
			}
		}
	}

	&.medizin-flip-box--direction-left {
		.back-side {
			-webkit-transform: rotateX(0) rotateY(180deg);
			transform: rotateX(0) rotateY(180deg);
		}

		.medizin-flip-box {
			&:hover {
				.front-side {
					-webkit-transform: rotateX(0) rotateY(-180deg);
					transform: rotateX(0) rotateY(-180deg);
				}
			}
		}
	}

	&.medizin-flip-box--direction-up {
		.back-side {
			-webkit-transform: rotateX(-180deg) rotateY(0);
			transform: rotateX(-180deg) rotateY(0);
		}

		.medizin-flip-box {
			&:hover {
				.front-side {
					-webkit-transform: rotateX(180deg) rotateY(0);
					transform: rotateX(180deg) rotateY(0);
				}
			}
		}
	}

	&.medizin-flip-box--direction-down {
		.back-side {
			-webkit-transform: rotateX(180deg) rotateY(0);
			transform: rotateX(180deg) rotateY(0);
		}

		.medizin-flip-box {
			&:hover {
				.front-side {
					-webkit-transform: rotateX(-180deg) rotateY(0);
					transform: rotateX(-180deg) rotateY(0);
				}
			}
		}
	}
}

.medizin-flip-box--effect-push {
	.front-side {
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
	}

	&.medizin-flip-box--direction-right {
		.medizin-flip-box {
			&:hover {
				.front-side {
					-webkit-transform: translateX(100%) translateY(0);
					-ms-transform: translateX(100%) translateY(0);
					transform: translateX(100%) translateY(0);
				}
			}
		}
	}

	&.medizin-flip-box--direction-left {
		.medizin-flip-box {
			&:hover {
				.front-side {
					-webkit-transform: translateX(-100%) translateY(0);
					-ms-transform: translateX(-100%) translateY(0);
					transform: translateX(-100%) translateY(0);
				}
			}
		}
	}

	&.medizin-flip-box--direction-up {
		.medizin-flip-box {
			&:hover {
				.front-side {
					-webkit-transform: translateX(0) translateY(-100%);
					-ms-transform: translateX(0) translateY(-100%);
					transform: translateX(0) translateY(-100%);
				}
			}
		}
	}

	&.medizin-flip-box--direction-down {
		.medizin-flip-box {
			&:hover {
				.front-side {
					-webkit-transform: translateX(0) translateY(100%);
					-ms-transform: translateX(0) translateY(100%);
					transform: translateX(0) translateY(100%);
				}
			}
		}
	}
}

.medizin-flip-box--effect-slide,
.medizin-flip-box--effect-push {
	.medizin-flip-box {
		overflow: hidden;

		&:hover {
			.back-side {
				-webkit-transform: none;
				-ms-transform: none;
				transform: none;
			}
		}
	}

	&.medizin-flip-box--direction-right {
		.back-side {
			-webkit-transform: translateX(-100%) translateY(0);
			-ms-transform: translateX(-100%) translateY(0);
			transform: translateX(-100%) translateY(0);
		}
	}

	&.medizin-flip-box--direction-left {
		.back-side {
			-webkit-transform: translateX(100%) translateY(0);
			-ms-transform: translateX(100%) translateY(0);
			transform: translateX(100%) translateY(0);
		}
	}

	&.medizin-flip-box--direction-up {
		.back-side {
			-webkit-transform: translateX(0) translateY(100%);
			-ms-transform: translateX(0) translateY(100%);
			transform: translateX(0) translateY(100%);
		}
	}

	&.medizin-flip-box--direction-down {
		.back-side {
			-webkit-transform: translateX(0) translateY(-100%);
			-ms-transform: translateX(0) translateY(-100%);
			transform: translateX(0) translateY(-100%);
		}
	}
}

.medizin-flip-box--effect-zoom-out {
	.medizin-flip-box {
		.front-side {
			-webkit-transition: opacity 0.35s, width 0.1ms, -webkit-transform 0.7s;
			transition: opacity 0.35s, width 0.1ms, -webkit-transform 0.7s;
			-o-transition: transform 0.7s, opacity 0.35s, width 0.1ms;
			transition: transform 0.7s, opacity 0.35s, width 0.1ms;
			transition: transform 0.7s, opacity 0.35s, width 0.1ms, -webkit-transform 0.7s;
			opacity: 1;
			-webkit-transform: scale(1);
			-ms-transform: scale(1);
			transform: scale(1);
			z-index: 1;
			width: 100%;
		}

		&:hover {
			.front-side {
				width: 0;
				opacity: 0;
				-webkit-transform: scale(0.7);
				-ms-transform: scale(0.7);
				transform: scale(0.7);
				-webkit-transition: opacity 0.7s 0.1s, width 0.1ms 0.7s, -webkit-transform 0.8s;
				transition: opacity 0.7s 0.1s, width 0.1ms 0.7s, -webkit-transform 0.8s;
				-o-transition: transform 0.8s, opacity 0.7s 0.1s, width 0.1ms 0.7s;
				transition: transform 0.8s, opacity 0.7s 0.1s, width 0.1ms 0.7s;
				transition: transform 0.8s, opacity 0.7s 0.1s, width 0.1ms 0.7s, -webkit-transform 0.8s;
			}
		}
	}
}

.medizin-flip-box--effect-zoom-in {
	.medizin-flip-box {
		.back-side {
			-webkit-transition: opacity 0.5s 0.2s, -webkit-transform 0.7s;
			transition: opacity 0.5s 0.2s, -webkit-transform 0.7s;
			-o-transition: transform 0.7s, opacity 0.5s 0.2s;
			transition: transform 0.7s, opacity 0.5s 0.2s;
			transition: transform 0.7s, opacity 0.5s 0.2s, -webkit-transform 0.7s;
			opacity: 0;
			-webkit-transform: scale(0.7);
			-ms-transform: scale(0.7);
			transform: scale(0.7);
		}

		&:hover {
			.back-side {
				-webkit-transition: opacity 0.5s, -webkit-transform 0.7s;
				transition: opacity 0.5s, -webkit-transform 0.7s;
				-o-transition: transform 0.7s, opacity 0.5s;
				transition: transform 0.7s, opacity 0.5s;
				transition: transform 0.7s, opacity 0.5s, -webkit-transform 0.7s;
				opacity: 1;
				-webkit-transform: scale(1);
				-ms-transform: scale(1);
				transform: scale(1);
			}
		}
	}
}

.medizin-flip-box--effect-fade {
	.medizin-flip-box {
		.back-side {
			opacity: 0;
		}

		&:hover {
			.back-side {
				opacity: 1;
			}
		}
	}
}
