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

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

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

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

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

			.image {
				img {
					transform: scale(1.1, 1.1);
				}

				&:after {
					background: #002fa6;
					opacity: .8;
				}
			}

			.heading {
				transform: translateY(-100%);
				opacity: 0;
			}

			.btn {
				transform: translateY(0);
				opacity: 1;
			}
		}

		.image-wrap {
			position: relative;
			border-radius: 5px;
			overflow: hidden;
		}

		.image {
			img {
				transition: transform 1s;
				width: 100%;
			}

			&:after {
				@extend %transit;
				@extend %ContentAbsolute;
				opacity: .5;
				background-image: linear-gradient(-180deg, rgba(28, 15, 105, 0) 0%, #1c0f69 61%);
			}
		}

		.heading-wrapper,
		.button-wrapper {
			overflow: hidden;
		}

		.heading-wrapper {
			position: absolute;
			bottom: 27px;
			left: 0;
			right: 0;
			max-width: 250px;
			margin: 0 auto;
		}

		.heading {
			font-size: 24px;
			font-weight: 500;
			line-height: 1.5;
			color: #fff;
		}

		.button-wrapper {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			border-radius: 5px;
		}

		.btn {
			background: #fff !important;
			color: #086ad8 !important;
			transform: translateY(100%);
			opacity: 0;
		}

		.text {
			margin-top: 25px;

			strong {
				color: #333;
			}
		}
	}

	&.style-02 {
		height: 100%;

		&:hover {
			.image {
				&:before {
					opacity: .8;
				}

				&:after {
					opacity: 0;
				}
			}

			.box-info {
				transform: translateY(0);
				display: flex;
				flex-direction: column;
				justify-content: center;
			}

			.heading {
				transform: translateY(0);
			}
		}

		.content {
			position: relative;
			border-radius: 5px;
			overflow: hidden;
			height: 100%;
		}

		.image {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;

			&:before,
			&:after {
				@extend %transit;
				@extend %ContentAbsolute;
				z-index: 1;
			}

			&:before {
				background: #002fa6;
				opacity: 0;
			}

			&:after {
				opacity: .5;
				background-image: linear-gradient(-180deg, rgba(28, 15, 105, 0.00) 11%, #000 80%);
			}
		}

		.box-info,
		.heading {
			transition: all .5s;
		}

		.box-info {
			position: relative;
			z-index: 2;
			padding: 30px 20px;
			text-align: center;
			transform: translateY(100%);
			height: 100%;
			min-height: 330px;
		}

		.heading {
			transform: translateY(-100%) translateY(-54px);
			font-size: 24px;
			line-height: 1.5;
			color: #fff;
		}

		.text {
			margin-top: 16px;
			color: #fff;
		}

		.btn {
			margin-top: 40px;
			display: inline-block;
			width: 56px;
			height: 56px;
			line-height: 56px;
			text-align: center;
			border-radius: 50%;
			color: #fff;
			font-size: 0;

			.button-icon {
				vertical-align: middle;
				font-size: 24px;
			}
		}
	}

	&.style-03 {
		height: 100%;

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

		&.has-button {
			.content {
				padding-bottom: 88px;
			}
		}

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

		.image {
			img {
				width: 100%;
				border-top-left-radius: 5px;
				border-top-right-radius: 5px;
			}
		}

		.content {
			padding: 32px 35px;
		}

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

		.text {
			margin-top: 12px;

			strong {
				color: #333;
			}
		}

		.btn {
			@extend %transit;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 56px;
			line-height: 56px;
			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-04 {
		height: 100%;

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

		.image {
			@extend %transit;
			margin-bottom: 30px;

			img {
				width: 100%;
			}
		}

		.content {
			padding-left: 10px;
			padding-right: 10px;
		}

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

		.text {
			margin-top: 9px;

			strong {
				color: #333;
			}
		}

		.btn {
			font-size: 14px;
			font-weight: 500;
			margin-top: 21px;

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