.wrapper-title-icon {
	&:after {
		clear:   both;
		content: "";
		display: table;
	}
}

.icon-left {
	.boxes-icon {
		float:        left;
		margin-right: 15px;
	}

	.content-inner {
		float: left;
	}
}

.smicon-read {
	margin-top:    15px;
	padding:       5px 30px;
	display:       inline-block;
	border-width:  1px;
	border-style:  solid;
	border-radius: 5px;
	font-weight:   bold;
	color:         #2C3339;
	i {
		font-size:   12px;
		margin-left: 5px;
		float: right;
		line-height: 24px;
	}

}

.icon-right {
	.boxes-icon {
		float:       right;
		margin-left: 15px;
	}
	.content-inner {
		float: left;
	}
}

.inner-icon {
	display:    table;
	text-align: center;
	width:      100%;
	height:     100%;
	table-layout: fixed;
}

.inner-icon .icon {
	display:            table-cell;
	vertical-align:     middle;
	-webkit-transition: background 0.2s, color 0.2s;
	-moz-transition:    background 0.2s, color 0.2s;
	transition:         background 0.2s, color 0.2s;
}

.circle {
	border-radius: 50%;
}

.text-center {
	.boxes-icon {
		margin: 0 auto;
	}
}

.icon-top {
	.icon-box-title {
		margin-top: 20px;
	}
	.boxes-icon {
		overflow: hidden;
		display:  inline-block;
	}
}

.icon-box-title {
	margin-top:    0;
	margin-bottom: 10px;
}
.desc-icon-box {
	color: #878787;
	a {
		color: #878787;
	}
}

.boxes-icon {
	color:        #333;
	border-width: 2px;
	border-style: solid;
	border-color: transparent;
	@include transition(all 0.5s);
}

.iconbox-hover {
	.thim-widget-icon-box {
		background-color: #fff;
		transition:       background-color 0.5s ease;
		padding-top:      60px;
		padding-bottom:   100px;
		.content-inner {
			padding-left:  60px;
			padding-right: 60px;
		}

	}
	&:hover {
		.thim-widget-icon-box {
			transition: background-color 0.5s ease;
			.icon-box-title, .desc-icon-box p {
				color: #fff !important;
			}
			.boxes-icon {
				border-color: #fff !important;
				i {
					color: #fff !important;
				}
			}
			.smicon-read {
				background-color: #fff;
				border-color:     #fff !important;
			}
		}
		.line-bottom {
			background-color: #fff;
		}
	}
}

.icon-box-title {
	position: relative;
	.line-bottom {
		width:            90px;
		background-color: #202020;
		height:           1px;
		display:          block;
		margin:           20px auto 30px auto;
	}
}

.text-center {
	.icon-box-title {
		.line-bottom {
			margin: 20px auto 30px auto;
		}
	}
}

.text-left {
	.icon-box-title {
		.line-bottom {
			margin: 20px auto 30px 0;
		}
	}
}

.text-right {
	.icon-box-title {
		.line-bottom {
			margin: 20px 0 30px auto;
		}
	}
}

.icon_box_4 {
  margin-top: 40px;
  .boxes-icon {
	.inner-icon {
	  .icon {
		line-height: 54px;
		width: 60px;
		height: 60px;
		padding: 0;
		border-radius: 100%;
		border: 1px solid;
		position: relative;
		&:before {
		  position: absolute;
		  left: 3px;
		  right: 3px;
		  top: 3px;
		  bottom: 3px;
		  background-color: #000000;
		  border-radius: 100%;
		  content: "";
		  @include transition();
		  @include scale(scale(0));
		}
		&:after {
		  position: absolute;
		  top: 100%;
		  left: 50%;
		  width: 1px;
		  margin-top: 7px;
		  height: 42px;
		  content: "";
		  border-left-style: dotted;
		  border-left-width: 2px;
		  border-left-color: #000;
		}
		i {
		  position: relative;
		  @include transition();
		}
	  }
	}
  }
  .content-inner {
	padding-left: 10px;
	.icon-box-title {
	  a {
		color: #2c3339;
	  }
	}
  }
  &:hover {
	.boxes-icon {
	  .inner-icon {
		.icon {
		  i {
			color: #ffffff;
		  }
		  &:before {
			@include scale(scale(1));
		  }
		}
	  }
	}
  }
  &.last {
	.boxes-icon {
	  .inner-icon {
		.icon {
		  &:after {
			display: none;
		  }
		}
	  }
	}
  }
}