.milestone-block{
	margin-bottom: 30px;    
	&.position-icon-top{
		text-align: center;
		display: block;
		width: 100%;
		padding: 45px 30px;
		background: rgba(0, 0, 0, 0.3);
		.milestone-icon{
			color: $theme-color;
			display: inline-block;
			text-align: center;
			float: none;
			margin: 0;
			margin-bottom: 15px;
			display: inline-block;
			.icon{
				color: $theme-color;
				font-size: 60px;
				line-height: 1;
			}
		}
		.milestone-right{
			display: block;
			text-align: center;
			float: none;
			width: 100%;
			margin-top: 10px;
		}
		.milestone-number{
			font-size: 26px;
			font-weight: 700;
			line-height: 1.1;
		}
		.milestone-text{
			font-size: 14px;
			font-weight: 400;
			color: $headings-color;
		} 
	}
	&.position-icon-left{
		background: $white;
		@include clearfix();
		margin-bottom: 20px;
		.milestone-icon{
			color: $theme-color;
			display: inline-block;
			text-align: center;
			float: none;
			margin: 0;
			@include size(70px, 70px);
			border: 1px solid $border-color;
			@include border-radius(50%);
			padding: 10px; 
			margin-bottom: 5px;
			display: inline-block;
			float: left;
			.icon{ 
				display: block;
				@include size(100%, 100%);
				@include border-radius(50%);
				text-align: center;
				line-height: 50px;
				color: $white;
				background: $theme-color;
				font-size: 18px;
				box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
			}
			span{
				color: $theme-color;
				font-size: 38px;
				line-height: 1;
			}
		}
		.milestone-right{
			padding-left: 85px;
			text-align: left;
			padding-top: 10px;
			.milestone-number{
				color: $black;
				text-align: left;
				font-size: 28px;
				line-height: 1;
				padding-top: 20px;
			}
		  .milestone-text{
				font-size: 18px;
				text-align: left;
				font-weight: 700;
				width: 100%;
			}
		}
	}
	&.position-no-icon{
		margin-bottom: 5px;
		.milestone-right{
			display: block;
			text-align: center;
			.milestone-number-inner{
				font-size: 60px;
				line-height: 1.2;
				color: $black;
				font-family: $headings-font-family;
				font-weight: 500;
				@include media-breakpoint-down(md){
					font-size: 38px;
				}
				.symbol{
					color: $black;
					font-size: 60px;
					@include media-breakpoint-down(md){
						font-size: 38px;
					}
				}
			}
			.milestone-text{
				font-size: 16px;
				line-height: 24px;
				margin: 2px 0 0;
				font-weight: 400;
				color: $body-color;
			}
		}
	}
	&.position-icon-box{
		background: $theme-color;
		border-radius: 4px;
		text-align: center;
		padding: 50px 30px;
		position: relative;
		margin-bottom: 0;
		.milestone-icon{
			width: 120px;
			height: 120px;
			border-radius: 50%;
			text-align: center;
			padding: 32px 10px 10px;
			background: $black;
			color: $white;
			line-height: 85px;
			position: relative;
			display: inline-block;
			.icon{
				font-size: 60px;
			}
		}
		.milestone-right{
			position: relative;
			z-index: 9;
			.milestone-number-inner{
				font-size: 90px;
				line-height: 1;
				color: $white;
				font-weight: 700;
				padding: 20px 0;
			}
			.milestone-text{
				font-size: 18px;
				color: $white;
				font-weight: 400;
				line-height: 30px;
			}
		}
		.icon-background{
			position: absolute;
			bottom: -20%;
			right: -20%;
			font-size: 290px;
			color: $black;
			opacity: 0.08;
			z-index: 1;
			transform: rotate(-30deg);
			line-height: 1;
		}
	}
	&[style*="background-color"]{
		padding: 50px 20px;
		@include media-breakpoint-down(sm){
			padding: 30px 20px;
		}
	}
	&.text-light{
		.milestone-text{
			color: #fff!important;
		}
		.milestone-icon span{
			border-color: $white;
			color: $white;
		}
	}
}