/* Buzz Out */
@keyframes tm-animation-buzz-out {
	10% {
		transform: translateX(3px) rotate(2deg);
	}
	20% {
		transform: translateX(-3px) rotate(-2deg);
	}
	30% {
		transform: translateX(3px) rotate(2deg);
	}
	40% {
		transform: translateX(-3px) rotate(-2deg);
	}
	50% {
		transform: translateX(2px) rotate(1deg);
	}
	60% {
		transform: translateX(-2px) rotate(-1deg);
	}
	70% {
		transform: translateX(2px) rotate(1deg);
	}
	80% {
		transform: translateX(-2px) rotate(-1deg);
	}
	90% {
		transform: translateX(1px) rotate(0);
	}
	100% {
		transform: translateX(-1px) rotate(0);
	}
}

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

	.icon {
		@extend %transit;
		line-height: 1;
	}

	.image {
		margin-bottom: 35px;
	}

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

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

	.tm-svg {
		line-height: 0;

		* {
			stroke: currentColor;
		}
	}

	.heading {
		margin-bottom: 0;
	}

	.tm-box-icon__btn {
		display: block;
		margin-top: 46px;
		padding-right: 25px;

		.button-icon {
			font-size: 12px;
			left: auto;
			right: auto;
			transform: none;
			margin-left: 15px;
		}
	}

	&.style-01 {
		&:hover {
			.content-wrap {
				transform: translateY(-5px);
				box-shadow: 0 2px 30px rgba(0, 0, 0, .1);

				&:before {
					border: 2px solid #eee;
				}
			}
		}

		.content-wrap {
			@extend %transit;
			position: relative;
			padding: 60px 35px 64px;
			background: #fff;

			&:before {
				@extend %transit;
				position: absolute;
				content: '';
				top: 10px;
				left: 10px;
				right: 10px;
				bottom: 10px;
				border: 1px solid #eee;
				opacity: 1;
				visibility: visible;
			}
		}

		.content {
			position: relative;
			z-index: 1;
		}

		.icon {
			position: relative;
			z-index: 1;
			font-size: 80px;
			margin-bottom: 22px;
			color: #222;
		}

		.tm-svg {
			padding: 10px 0 12px;
			width: 60px;
		}

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

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

		.image {
			@extend %transit;
		}

		.icon {
			font-size: 40px;
			margin-right: 20px;
			display: inline-block;
			flex-shrink: 0;
		}

		.tm-svg {
			width: 40px;
		}

		.content-inner {
			display: flex;
		}

		.content {
			flex-grow: 1;
		}

		.heading {
			font-size: 18px;
			line-height: 1.4;
			margin-bottom: 21px;
		}
	}

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

		.content-wrap {
			@extend %transit;
		}

		.content {
			position: relative;
			z-index: 1;
		}

		.icon {
			font-size: 70px;
			margin-bottom: 26px;
			color: #222;
		}

		.tm-svg {
			width: 54px;
		}

		.heading {
			font-size: 18px;
			line-height: 1.38;
			margin-bottom: 25px;
		}
	}

	&.style-04 {
		&:hover {
			.content-wrap {
				transform: translateY(-5px);
				box-shadow: 0 2px 30px rgba(0, 0, 0, .1);
			}
		}

		.content-wrap {
			@extend %transit;
			padding: 39px 35px 44px;
			background: #fff;
		}

		.content {
			position: relative;
			z-index: 1;
		}

		.image {
			margin-bottom: 31px;
		}

		.icon {
			font-size: 80px;
			margin-bottom: 22px;
			color: #222;
		}

		.tm-svg {
			width: 54px;
		}

		.heading {
			font-size: 18px;
			line-height: 1.39;
			margin-bottom: 17px;
		}

		.tm-box-icon__btn {
			margin-top: 39px;
		}
	}

	&.style-05 {
		&:hover {
			.icon,
			.image {
				animation: .75s linear tm-animation-buzz-out;
			}
		}

		.content-wrap {
			@extend %transit;
		}

		.content {
			position: relative;
			z-index: 1;
		}

		.icon {
			font-size: 30px;
			margin-bottom: 27px;
		}

		.tm-svg {
			width: 30px;
		}

		.heading {
			font-size: 20px;
			font-weight: 500;
			line-height: 1.3;
			margin-bottom: 23px;
		}
	}

	&.style-06 {
		background: #111;

		&:hover {
			.content-wrap {
				background: none;
				box-shadow: 0 30px 30px -30px rgba(51, 51, 51, .25);
			}

			.icon {
				color: #fff;
			}

			.heading {
				color: #fff;
			}

			.text {
				color: #fff;
			}
		}

		.content-wrap {
			@extend %transit;
			padding: 37px 30px 34px;
			background: #fff;
			box-shadow: 0 20px 50px rgba(0, 0, 0, .05);
		}

		.content {
			position: relative;
			z-index: 1;
		}

		.image {
			margin-bottom: 31px;
		}

		.icon {
			font-size: 80px;
			margin-bottom: 22px;
		}

		.tm-svg {
			width: 54px;
		}

		.heading {
			font-size: 20px;
			font-weight: 500;
			line-height: 1.3;
			margin-bottom: 23px;
		}

		.tm-box-icon__btn {
			margin-top: 39px;
		}
	}

	&.style-07 {
		&:hover {
			.icon,
			.image {
				animation: .75s linear tm-animation-buzz-out;
			}
		}

		.content-wrap {
			@extend %transit;
			display: flex;
			flex-direction: row;
		}

		.image {
			flex-shrink: 0;
			margin-right: 35px;
		}

		.content {
			position: relative;
			z-index: 1;
			flex-grow: 1;
		}

		.icon {
			font-size: 30px;
			margin-bottom: 27px;
		}

		.tm-svg {
			width: 30px;
		}

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

	&.style-08 {
		background: #111;

		&:hover {
			.content-wrap {
				background: none;
				box-shadow: 0 0 30px -15px rgba(51, 51, 51, .25);
				background: #c75353;
			}

			.icon,
			.heading {
				transform: translateY(-50px);
				opacity: 0;
				visibility: hidden;
			}

			.text {
				transform: translateY(-75px);
			}

			.tm-box-icon__btn {
				transform: translate(-50%, -50px);
				opacity: 1;
				visibility: visible;
			}
		}

		.content-wrap {
			@extend %transit;
			padding: 70px 35px 68px;
		}

		.content {
			position: relative;
			z-index: 1;
		}

		.image {
			margin-bottom: 34px;
		}

		.icon {
			color: #fff;
			font-size: 60px;
			margin-bottom: 34px;
		}

		.tm-svg {
			width: 60px;
		}

		.heading {
			@extend %transit;
			font-size: 20px;
			font-weight: 500;
			line-height: 1.32;
			margin-bottom: 18px;
			color: #fff;
		}

		.text {
			@extend %transit;
			color: #fff;
		}

		.tm-box-icon__btn {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			z-index: 99;
			opacity: 0;
			visibility: hidden;
			width: 100%;
			color: #fff !important;
			font-size: 13px;
			font-weight: 500;
			letter-spacing: 1px;
			margin: 0;
			padding-right: 0;

			.button-icon {
				display: none;
			}
		}
	}
}
