.tm-box-image {
	@extend %clearfix;
	position: relative;

	.overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.content-wrap {
		@extend %transit;
		height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
	}

	&.has-image-hover {
		.images {
			position: relative;
		}

		&:hover {
			.image {
				visibility: hidden;
				opacity: 0;
			}

			.image-hover {
				opacity: 1;
				visibility: visible;
				transform: none;
			}
		}
	}

	.image {
		@extend %transit;
	}

	.image-hover {
		@extend %transit;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		visibility: hidden;
		width: 100%;
	}

	.heading {
		@extend %transit;
		word-wrap: break-word;
		margin-bottom: 0;
	}

	.text {
		@extend %transit;
	}

	.btn {
		@extend %transit;
		display: inline-block;
		margin-top: 27px;
		font-size: 14px;
		font-weight: 500;

		.button-icon {
			margin-left: 2px;

			&:before {
				@extend %FontAwesomeRegular;
				content: '\f178';
			}
		}
	}

	&.style-01 {
		height: 100%;
		padding-bottom: 28px;

		&:hover {
			.content-wrap {
				transform: translateY(-5px);
			}

			.circle-arrow {
				.middle-arrow {
					background: #086ad8;
				}

				.middle-dot {
					animation: boxImageAnimationSignal cubic-bezier(0, .55, .55, 1) 2s;
					animation-fill-mode: forwards;
					animation-iteration-count: infinite;
				}
			}
		}

		.images {
			margin-bottom: 42px;
		}

		.content-wrap {
			box-shadow: 0 18px 40px rgba(51, 51, 51, 0.1);
			background: #fff;
			border-radius: 5px;
			padding: 50px 30px 63px;
		}

		.heading {
			font-size: 24px;
			font-weight: 500;
			line-height: 1.25;
			margin-bottom: 9px;
		}

		.circle-arrow {
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translate(-50%, 50%);
			height: 56px;
			width: 56px;

			.middle-arrow {
				@extend %transit;
				position: absolute;
				top: 0;
				left: 0;
				width: 56px;
				height: 56px;
				line-height: 56px;
				text-align: center;
				border-radius: 50%;
				font-size: 24px;
				color: #fff;
				background: #d2a98e;
			}

			.middle-dot {
				pointer-events: none;
				content: '';
				position: absolute;
				top: -12px;
				left: -12px;
				width: 80px;
				height: 80px;
				border-radius: 50%;
				border: 2px solid #086ad8;
				opacity: 0;
				transform-origin: 50% 50%;
				animation-fill-mode: forwards;
				animation-iteration-count: infinite;

				&.dot-2 {
					animation-delay: .5s;
				}
			}
		}
	}

	&.style-02 {
		&:hover {
			.images {
				transform: translateY(-5px);
			}
		}

		.content {
			max-width: 340px;
			margin: 0 auto;
		}

		.images {
			@extend %transit;
			margin-bottom: 36px;
		}

		.content-wrap {
			box-shadow: 0 0 41px rgba(0, 0, 0, .03);
			background: #fff;
			padding: 40px 30px 65px;
		}

		.heading {
			font-size: 24px;
			font-weight: 500;
			line-height: 1.25;
			margin-bottom: 15px;
		}
	}

	&.style-03 {
		&:hover {
			.content-wrap {
				transform: translateY(-5px);
			}

			.heading {
				color: #2e3280;
			}
		}

		.image-wrap {
			display: flex;
			align-items: center;
		}

		.images {
			flex-shrink: 0;
			margin-right: 30px;
		}

		.content-wrap {
			box-shadow: 0 0 40px 5px rgba(51, 51, 51, .1);
			background: #fff;
			border-radius: 5px;
			padding: 30px 38px;
			min-height: 150px;
			justify-content: center;
		}

		.heading {
			font-size: 18px;
			font-weight: 500;
			line-height: 1.67;
			margin-bottom: 0;
		}

		.text {
			margin-top: 20px;
		}
	}

	&.style-04 {
		&:hover {
			.content-wrap {
				transform: translateY(-5px);
			}

			.heading {
				color: #fff;
			}

			.text {
				color: #fff;
			}
		}

		.images {
			margin-bottom: 47px;
		}

		.content-wrap {
			padding: 50px 42px 56px;
			border-radius: 5px;
			background: #fff;
			box-shadow: 0 0 25px rgba(51, 51, 51, .1)
		}

		.heading {
			font-size: 24px;
			font-weight: 500;
			line-height: 1.25;
			margin-bottom: 9px;
		}
	}

	&.style-05 {
		&:hover {
			.content-wrap {
				transform: translateY(-5px);
			}
		}

		.content {
			max-width: 340px;
			margin: 0 auto;
		}

		.images {
			@extend %transit;
			margin-bottom: 9px;
		}

		.content-wrap {
			box-shadow: 0 0 30px rgba(51, 51, 51, .05);
			background: #fff;
			padding: 25px 30px 34px;
		}

		.heading {
			font-size: 24px;
			font-weight: 500;
			line-height: 1.5;
			margin-bottom: 6px;
		}
	}

	&.style-06 {
		&:hover {
			.content-wrap {
				transform: translateY(-5px);
			}
		}

		.images {
			position: relative;
			width: 162px;
			height: 162px;
			border-radius: 50%;
			margin: 0 auto 2px;

			&:before {
				@extend %ContentAbsolute;
				background-image: linear-gradient(160deg, #fbf7f4 0%, #fefdfd 100%);
				border-radius: 50%;
				transform: translateY(-46px);
			}

			img {
				position: relative;
				z-index: 2;
				max-width: 120px;
			}
		}

		.content-wrap {
			box-shadow: 0 0 40px 5px rgba(51, 51, 51, .1);
			background: #fff;
			border-radius: 5px;
			padding: 98px 35px 88px;
			overflow: hidden;
		}

		.heading {
			font-size: 24px;
			font-weight: 500;
			line-height: 1.25;
			margin-bottom: 12px;
		}

		.btn {
			@extend %transit;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 1;
			height: 56px;
			line-height: 55px;
			text-align: center;
			font-size: 14px;
			font-weight: 500;
			border-top: 1px solid #eee;

			&:before {
				@extend %transit;
				@extend %ContentAbsolute;
				transform: translateY(100%);
				z-index: -1;
			}

			.button-icon {
				margin-left: 4px;
				position: relative;
				top: 1px;
			}
		}

		&:hover div.btn,
		a.btn:hover {
			color: #fff;

			&:before {
				transform: translateY(0);
			}
		}
	}

	&.style-07 {
		&:hover {
			.content-wrap {
				background: #fff;
				box-shadow: 0 18px 40px rgba(51, 51, 51, .1);
				transform: translateY(-5px);
			}
		}

		.images {
			margin-bottom: 24px;
		}

		.content-wrap {
			padding: 30px 35px 31px;
			border-radius: 4px;
		}

		.heading {
			font-size: 20px;
			font-weight: 600;
			line-height: 1.25;
			margin-bottom: 14px;
		}
	}

	&.style-08 {
		&:hover {
			.content-wrap {
				transform: translateY(-5px);
			}
		}

		.images {
			flex-shrink: 0;
			margin-right: 30px;
		}

		.content-inner {
			display: flex;
		}

		.content {
			flex-grow: 1;
		}

		.heading {
			font-size: 24px;
			line-height: 1.25;
			margin-bottom: 0;
		}

		.text {
			margin-top: 13px;
		}
	}

	&.style-09 {
		&:hover {
			.content-wrap {
				transform: translateY(-5px);
			}
		}

		.images {
			flex-shrink: 0;
			margin-right: 24px;
		}

		.content-inner {
			display: flex;
		}

		.content {
			flex-grow: 1;
		}

		.heading {
			font-size: 18px;
			line-height: 1.23;
			margin-bottom: 0;
		}

		.text {
			margin-top: 17px;
		}
	}

	&.style-10 {
		z-index: 1;
		zoom: 1;

		&:hover {
			.content-wrap {
				background: #fff;
				box-shadow: 0 18px 40px rgba(51, 51, 51, .1);
				transform: scale(1.03);
			}

			.btn {
				opacity: 1;
			}
		}

		.images {
			margin-bottom: 24px;
		}

		.content-wrap {
			transition: transform .3s cubic-bezier(0.645, 0.045, 0.355, 1), box-shadow .3s cubic-bezier(0.645, 0.045, 0.355, 1);
			padding: 30px 35px 31px;
			border-radius: 5px;
		}

		.heading {
			font-size: 18px;
			font-weight: 700;
			line-height: 1.67;
			margin-bottom: 9px;
		}

		.btn {
			margin-top: 15px;
			opacity: 0;
		}

		.button-icon:before {
			top: 1px;
			position: relative;
		}
	}

	&.style-11 {
		.content-wrap {
			border: 2px solid #eee;
			border-radius: 5px;
			padding: 20px;

			&:hover {
				border-color: red;

				.heading {
					color: red;
				}
			}
		}

		.images {
			margin-bottom: 23px;
		}

		.heading {
			font-size: 16px;
			font-weight: 500;
		}
	}
}

@keyframes boxImageAnimationSignal {
	0% {
		opacity: 0;
		transform: scale(0);
	}

	1% {
		opacity: .14;
	}

	20% {
		opacity: .3;
	}

	40% {
		opacity: .4;
	}

	60% {
		transform: scale(1);
		opacity: 0;
	}
}