/*
 * Shortcode: Icon Boxes
 * -----------------------------------------------
*/
.icon-box {
	$icon-box: &;
	position: relative;
	//margin-bottom: 30px;
	z-index: 0;
	@include transition(all .3s ease);
	.icon-wrapper {
		margin-bottom: 20px;
	}

	.icon {
		$icon: &;
		display: inline-block;
		height: 70px;
		margin-bottom: 15px;
		@include transition(all .3s ease);
		width: 70px;
		text-align: center;
		font-weight: normal;

		i {
			display: inline-block;
			font-size: 40px;
			line-height: 70px;
		}

		i[class*="pe-7s-"] {
			vertical-align: text-bottom;
		}

		// Icon Default
		&.icon-default {
			height: auto;
			width: auto;
			margin-bottom: 5px;
			i {
				line-height: 1;
			}
		}

		// Icon gray
		&.icon-gray {
			background-color: $gray-eee;
			color: $black-333;

			//icon bordered
			&.icon-bordered {
				background-color: transparent;
				border: 3px solid $gray-eee;

			}
			
			@at-root {
				#{$icon-box}:hover .icon {
					&.icon-gray {
						background-color: darken($gray-eee, 10%);
						color: $black-111;

						//icon bordered
						&.icon-bordered {
							background-color: $gray-eee;
							color: $black-555;
						}
					}
				}
			}
		}

		// Icon dark
		&.icon-dark {
			background-color: $black-111;
			color: $white-base;

			//icon bordered
			&.icon-bordered {
				background-color: transparent;
				border: 3px solid $black-111;
				color: $black-111;
			}
			
			@at-root {
				#{$icon-box}:hover .icon {
					&.icon-dark {
						background-color: $gray-eee;
						color: $black-111;

						//icon bordered
						&.icon-bordered {
							background-color: $black-111;
							border-color: $black-111;
							color: $white-base;
						}
					}
				}
			}
		}

		// Icon dark
		&.icon-white {
			background-color: $white-base;
			color: $black-333;

			//icon bordered
			&.icon-bordered {
				background-color: transparent;
				border: 3px solid $white-base;
			}
			
			@at-root {
				#{$icon-box}:hover .icon {
					&.icon-white {
						background-color: darken($white-base, 20%);
						color: darken($black-333, 20%);

						//icon bordered
						&.icon-bordered {
							background-color: $white-base;
							border-color: $white-base;
							color: $black-111;
						}
					}
				}
			}

			// Icon white border effect
			&.icon-border-effect {
				position: relative;

				&::after {
					box-shadow: 0 0 0 3px $white-base;
				}
			}
		}

		// Icon bordered
		&.icon-bordered {
			border: 3px solid $gray-eee;
			
			@at-root {
				#{$icon-box}:hover .icon {
					&.icon-bordered {
						background-color: $gray-eee;
						color: $black-111;
					}
				}
			}
		}

		// Icon rounded
		&.icon-rounded {
			border-radius: 3px;		
		}

		// Icon rounded
		&.icon-circled {
			border-radius: 50%;
		}

		//icon type iamge
		&.icon-type-image {
			&.icon-bordered {
				padding: 5px;
			}
		}

		// Icon xs
		&.icon-xs {
			height: 30px;
			width: 30px;

			i {
				font-size: 18px;
				line-height: 30px;
			}
		}

		// Icon sm
		&.icon-sm {
			height: 50px;
			width: 50px;

			i {
				font-size: 22px;
				line-height: 50px;
			}
		}

		// Icon md
		&.icon-md {
			height: 75px;
			width: 75px;

			i {
				font-size: 36px;
				line-height: 75px;
			}
		}

		// Icon lg
		&.icon-lg {
			height: 90px;
			width: 90px;

			i {
				font-size: 48px;
				line-height: 90px;
			}
		}

		// Icon xl
		&.icon-xl {
			height: 120px;
			width: 120px;

			i {
				font-size: 60px;
				line-height: 120px;
			}
		}

		// Icon border effect
		&.icon-border-effect {
			position: relative;

			&::after {
				border-radius: 50%;
				box-shadow: 0 0 0 3px ;
				box-sizing: content-box;
				content: "";
				height: 100%;
				left: -4px;
				opacity: 0;
				padding: 4px;
				top: -4px;
				transform: scale(0.8);
				transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;
				pointer-events: none;
				position: absolute;
				width: 100%;
			}

			&.effect-flat {
				&::after {
					border-radius: 0;
				}
			}

			&.effect-rounded {
				&::after {
					border-radius: 3px;
				}
			}

			&.effect-circled {
				&::after {
					border-radius: 50%;
				}
			}
			// Icon gray
			&.icon-gray {
				&::after {
					box-shadow: 0 0 0 3px $gray-lighter;
				}
			}
		}

		// Icon border effect
		&.icon-top {
			left: 0;
			margin: 0 auto;
			position: absolute;
			right: 0;
			top: -32px;
		}
	}


	//icon image type alignment
	.icon {
		&.icon-type-image {
			display: block;
			text-align: left;
		}
	}
	&.text-center {
		.icon {
			&.icon-type-image {
				text-align: center;
				display: inline-block;
			}
		}
	}
	&.text-right {
		.icon {
			&.icon-type-image {
				text-align: right;
				display: inline-block;
			}
		}
	}

	// iconbox border
	&.iconbox-border {
		border: 3px solid $gray-gainsboro;
	}

	// iconbox bg
	&.iconbox-bg {
		background-color: $white-fa;

		&.iconbox-bg-dark {
			background-color: $black-333;
		}
	}
	.content {
		p {
			margin-bottom: 0;
			a {
				color: $text-color;
				font-weight: $body-font-weight;
			}
		}
	}

	&.icon-left {
		.icon {
			float: left;
			margin-right: 20px;
			@include media-breakpoint-down(lg) {
				float: none !important;
				margin-right: 0;
				margin-bottom: 15px;
			}
			&.no-bg {
				width: auto;
				height: auto;
			}
		}
		.icon-text {
			overflow: hidden;
		}
	}

	&.icon-right {
		.icon {
			float: right;
			margin-left: 20px;
			@include media-breakpoint-down(lg) {
				float: none !important;
				margin-left: 0;
				margin-bottom: 15px;
			}
			&.no-bg {
				width: auto;
				height: auto;
			}
		}
		.icon-text {
			overflow: hidden;
		}
	}

	.icon-box-title,
	.icon-box-title a {
		@include transition(all .1s ease);
	}
	.btn-view-details {
		@include transition(all .1s ease);
		margin-top: 15px;
	}

	&:hover {
		.icon-border-effect {
			&::after {
				opacity: 1;
				transform: scale(1);
			}
		}
	}

	.icon-border-effect {
		&:hover {
			&::after {
				opacity: 1;
				transform: scale(1);
			}
		}
	}

	&.iconbox-box-shadow {
		@include box-shadow( 0px 0px 50px rgba(5, 5, 5, 0.08) );
		&:hover {
			@include box-shadow( 0px 0px 50px rgba(5, 5, 5, 0.15) );
		}
	}

	&.iconbox-default-padding {
		.icon-box-wrapper {
			padding: 50px 35px 50px 35px;
		}
	}

	&.iconbox-centered-in-responsive {
		@include media-breakpoint-down(lg) {
			text-align: center !important;
			.icon {
				&.icon-type-image {
					text-align: center !important;
				}
			}
		}
	}

	&.iconbox-title-mt-0-desktop {
		.icon-box-title {
			@include media-breakpoint-up(xl) {
				margin-top: 0;
			}
		}
	}

	&.iconbox-hover-move-up-animation {
		&:hover {
			margin-top: -15px;
		}
	}

	&.iconbox-border-radius {
		border-radius: 10px;
	}

	&.icon-position-icon-top {
		&.hanging-icon-top {
			.icon-wrapper {
				.icon {
					margin-top: -70px;
				}
			}
		}
	}

	&.icon-area-box-shadow {
		.icon-wrapper {
			.icon {
				@include box-shadow( 0px 0px 50px rgba(5, 5, 5, 0.08) );
			}
		}
	}

	&.iconbox-style1-current-theme-animation {
	}

	&.iconbox-style2-border-bottom {
		&:after {
			background-color: #aaa; 
			position: absolute;
			bottom: -3px;
			left: 0;
			width: 100%;
			height: 4px;
			content: '';
			opacity: 0;
			transition: 0.3s ease-in;
		}
		&:hover {
			&:after {
				bottom: 0;
				opacity: 1;
			}
		}
	}

	&.iconbox-style3-moving-border-bottom {
		overflow: hidden;
		&:after {
			position: absolute;
			left: -2px;
			bottom: 0px;
			width: 100%;
			height: 4px;
			content: '';
			background-image: -moz-linear-gradient(0deg, #313131 0%, #bdc0c3 100%);
			background-image: -webkit-linear-gradient(0deg, #313131 0%, #bdc0c3 100%);
			background-image: -ms-linear-gradient(0deg, #313131 0%, #bdc0c3 100%);
			-ms-transform: translateX(-100%);
			-webkit-transform: translateX(-100%);
			transform: translateX(-100%);
			visibility: hidden;
			opacity: 0;
			@include transition(all 0.5s ease-in);
		}

		&:hover:after {
			-ms-transform: translateX(0%);
			-webkit-transform: translateX(0%);
			transform: translateX(0%);
			visibility: visible;
			opacity: 1;
		}
	}

	&.iconbox-style4-bgcolor {
		overflow: hidden;

		&:before {
			position:absolute;
			content:'';
			left:0px;
			top:0px;
			width:100%;
			height:100%;
			opacity:0;
			visibility:hidden;
			background-color:#161d29;
			@include transition(all 500ms ease);
			z-index: -1;
		}

		&:hover {
			&:before {
				opacity:1;
				visibility:visible;
			}
			.icon-box-title,
			.icon-box-title a {
				color: #fff;
			}
			.content {
				color: #fff;
				p {
					color: #fff;
				}
			}
		}
	}

	&.iconbox-style5-moving-bgcolor {
		overflow: hidden;

		&:before {
			position:absolute;
			content:'';
			left:0px;
			top:0px;
			width:100%;
			height:100%;
			opacity:0;
			visibility:visible;
			background-color:#161d29;
			@include transition(all 500ms ease);
			-webkit-transform:scaleY(0);
			-ms-transform:scaleY(0);
			-moz-transform:scaleY(0);
			transform:scaleY(0);
			-webkit-transform-origin:top;
			-ms-transform-origin:top;
			-moz-transform-origin:top;
			transform-origin:top;
			z-index: -1;
		}

		&:hover {
			&:before {
				opacity:1;
				visibility:visible;
				-webkit-transform:scaleY(1);
				-ms-transform:scaleY(1);
				-moz-transform:scaleY(1);
				transform:scaleY(1);
			}
			.icon-box-title,
			.icon-box-title a {
				color: #fff;
			}
			.content {
				color: #fff;
				p {
					color: #fff;
				}
			}
		}
	}

	&.iconbox-style6-moving-double-bgcolor {
		overflow: hidden;

		&:before,
		&:after {
			position:absolute;
			content:'';
			left:0px;
			top:0px;
			width:100%;
			height:100%;
			opacity:0;
			visibility:visible;
			background-color:#475469;
			@include transition(all 400ms ease);
			-webkit-transform:scaleY(0);
			-ms-transform:scaleY(0);
			-moz-transform:scaleY(0);
			transform:scaleY(0);
			-webkit-transform-origin:top;
			-ms-transform-origin:top;
			-moz-transform-origin:top;
			transform-origin:top;
			z-index: -2;
		}
		&:after {
			background-color:#141d2b;
			z-index: -1;
		}

		&:hover {
			&:before,
			&:after {
				opacity:1;
				visibility:visible;
				-webkit-transform:scaleY(1);
				-ms-transform:scaleY(1);
				-moz-transform:scaleY(1);
				transform:scaleY(1);
			}
			&:after {
				-webkit-transition-delay: 300ms;
				-moz-transition-delay: 300ms;
				-ms-transition-delay: 300ms;
				-o-transition-delay: 300ms;
				transition-delay: 300ms;
			}
			.icon-box-title,
			.icon-box-title a {
				color: #fff;
			}
			.content {
				color: #fff;
				p {
					color: #fff;
				}
			}
		}
	}

	&.iconbox-style7-hover-moving-border {
		overflow: hidden;
		&:after,
		&:before {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			content: '';
			opacity: 0;
			-webkit-transition: opacity 0.55s,-webkit-transform 0.55s;
			transition: opacity 0.55s,transform 0.55s;
			z-index: -1;
		}
		&:after {
			border-right: 2px solid #444;
			border-left: 2px solid #444;
		}
		&:after {
			-webkit-transform: scale(1,0);
			transform: scale(1,0);
		}
		&:before {
			border-top: 2px solid #444;
			border-bottom: 2px solid #444;
		}
		&:before {
			-webkit-transform: scale(0,1);
			transform: scale(0,1);
		}

		&:hover {
			&:before,
			&:after {
				opacity: 1;
				-webkit-transform: scale(1);
				transform: scale(1);
			}
		}
	}


	&.iconbox-bg-img-on-hover {
		overflow: hidden;
		.bg-img-wrapper {
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			opacity: 0;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			@include scale(1);
			@include transition(all .3s ease);
			&:before, &:after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
			&:before {
				background-image: url("../images/shadow-overlay2.png");
				background-position: center bottom;
				z-index: 1;
				background-repeat: no-repeat;
			}
			&:after {
				background-color: rgba(0, 0, 0, 0.45);
				z-index: 2;
			}
		
			@at-root {
				#{$icon-box} {
					&.iconbox-bg-img-on-hover:hover {
						.bg-img-wrapper {
							opacity: 1;
							@include scale(1.1);
						}

						.icon {
							color: #fff;
							i {
								color: #fff;
							}
						}
						.icon-box-title,
						.icon-box-title a {
							color: #fff;
						}
						.content {
							color: #fff;
							p {
								color: #fff;
							}
						}
					}
				}
			}
		}
		.icon-box-wrapper {
			position: relative;
			z-index: 99;
		}
		&.iconbox-bg-img-on-hover-always-visible {
			.bg-img-wrapper {
				opacity: 1;
			}
			.icon {
				color: #fff;
				i {
					color: #fff;
				}
			}
			.icon-box-title,
			.icon-box-title a {
				color: #fff;
			}
			.content {
				color: #fff;
				p {
					color: #fff;
				}
			}
		}
	}

	&.tm-iconbox-icontype-svg-image {
		.tm-vivus-svg-animation {
			width: 128px;
			height: auto;
		}
	}

}

.tm-features-icon-box {
	padding: 30px 30px;
	background-color: #fff;
	border-radius: 5px;
	overflow: hidden;
	position: relative;
	transition: 300ms;

	.icon-box-wrapper {
		&:after {
		}
		.icon {
			margin-bottom: 25px;
		}
	}
	&:hover {
		.icon-box-wrapper {
			&:after {
				font-size: 6.5rem;
				transform: rotate(10deg);
				opacity: 0.08;
			}
		}
	}


	&:before {
		position: absolute;
		content: '';
		bottom: -3px;
		height: 17px;
		left: -12px;
		transform: rotate(45deg);
		width: 40px;
		background-color: #eee;
		@include transition(all 300ms ease);
	}
	&:hover:before {
		height: 22px;
	}
}