.gsc-icon-box{
  position: relative;
  @include transition(all 0.35s);
  @include clearfix();
  &.icon-image{
  &.left{
	 padding-right: 30px;
	 @include media-breakpoint-down(md){
		padding-right: 0;
	 }
  }
  .fa-1x{
	 display: block;
	 width: 24px;
  }
  .fa-2x{
	 display: block;
	 width: 32px;
  }
  .fa-3x{
	 display: block;
	 width: 64px;
  }
  .fa-4x{
	 display: block;
	 width: 96px;
  }
  &.top-center{
	  .fa-3x{
		 .icon{
			img{
			  margin-top: 25px;
			}
		 }
	  }
		.fa-4x{
		  .icon{
			 img{
			  margin-top: 30px;
			 }
		  }
		}
	 }
  }
  .highlight_content{
	 margin-top: 5px;
	 .title{
		font-size: 20px;
		color: $black;
		margin: 0 0 10px;
	 }
	 .desc{
		p{
		  margin-bottom: 0;
		}
	 }
	 &.verticle-align-top{
		vertical-align: top;
	 }
	 &.verticle-align-bottom{
		vertical-align: bottom;
	 }
	 &.verticle-align-middle{
		vertical-align: middle;
	 }
 }
 .highlight-icon{
	.icon-container{
	  text-align: center;
	  line-height: 1;
	  position: relative;
		color: $black;
	  .icon{
		 position: relative;
		 z-index: 11;
		 display: inline-block;
	  }
	  &.icon-shadow{
		box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.16);
	  }
	  &.fa-stack{
		 line-height: 2.3em!important;
		 @include size(2.2em, 2.2em);
	  }
	  &.text-theme{
		 &[class*="border-"]{
			border-color: rgba(0, 0, 0, 0.1);
		 }
	  }
	  &.text-white{
		 &[class*="border-"]{
			border-color: rgba(255, 255, 255, 0.2);
		 }
	  }
	  &.text-black{
		 color: $headings-color;
		 &[class*="border-"]{
			border-color: rgba(0, 0, 0, 0.1);
		 }
	  }
	  &.radius-1x{
		 &:after{
			@include border-radius(3px);
		 }
	  }
	  &.radius-2x{
		 &:after{
			@include border-radius(5px);
		 }
	  }
	  &.radius-5x{
		 &:after{
			@include border-radius(50%);
		 }
	  }
	}
 }
 &.icon-background{
	.highlight-icon{
	  .icon-container{
		 @include transition(all 0.5s); 
		 &:after{
			top: 0px;
			left: 0px;
			z-index: 1;
			position: absolute;
			width: 100%;
			height: 100%;
			content: '';
			@include scale(1);
			@include opacity(1);
			@include transition(all 0.5s); 
		 }
		 &.bg-black{
			&:after{
			  background: $black;
			}
		 }
		 &.bg-theme{
			&:after{
			  background: $theme-color;
			}
		 }
	  }
	}
	&.icon-border{
	  .highlight-icon{
		 .icon-container{
			&.bg-black{
			  border-color: $black;
			}
			&.bg-theme{
			  border-color: $theme-color;
			}
		 }
	  }
	}
 }
 &.icon-border:not(.icon-background){
	.highlight-icon{
	  .icon-container{
		 color: $theme-color;
	  }
	}
 }
 &.top-center{ //Top center
	text-align: center;
	max-width: 550px;
	margin-right: auto;
	margin-left: auto;
	.highlight-icon{
	  text-align: center;
	  padding-right: 0!important;
	  margin-bottom: 15px;
	  .icon-container{
		 display: inline-block;
		 &.fa-1x{
			font-size: 1.4em;
		 }
	  }
	}
	.title{
	  position: relative;
	  margin: 18px 0 16px;
	}
	.highlight_content{
	  text-align: center;
	  max-width: 300px;
	  margin: 0 auto; 
	  .desc{
		 text-align: center;
		 font-weight: 400;
		 text-transform: normal;
	  }
	}
 }  

 &.top-left{
	 text-align: left;
	 clear: both;
	 .title{
		margin: 16px 0 20px;
	 }
  }
 &.top-right{
	text-align: right;
	clear: both;
	float: right;
	.title{
	  margin: 16px 0 20px;
	}
	.highlight-icon{
		width: 100%;
		text-align: right;
	  .icon-container{
		 display: inline-block;
	  }
	}
 }

 &.right, &.left{
	display: table;
	max-width: 600px;
	.highlight-icon{
	 display: table-cell;
	 vertical-align: top;
	}
	.highlight_content{
	  display: table-cell;
	  .title{
		margin: 0 0 15px;
	  }
	  .desc{
		margin-top: 8px;
	  }
	}
	&.icon-background{
	 .highlight-icon{
		padding-top: 0;
	 }
	}
 }
 &.right{
	text-align: right;
	.highlight-icon{
	  padding-left: 20px;
	}
 }
 &.left{
	text-align: left;
	.highlight-icon{
	  padding-right: 20px;
	}
 }

  @include media-breakpoint-down(md){
	 &.responsive-1{
		margin: 0 auto;
		float: none;
		.highlight-icon{
		  width: 100%;
		  display: block;
		  margin-bottom: 10px;
		}
		.highlight_content{
		  width: 100%;
		  display: block;
		  padding: 0;
		}
	 }
  }
  @include media-breakpoint-down(sm){
	 &.responsive-2{  
		margin: 0 auto;
		float: none;
		.highlight-icon{
		  width: 100%;
		  display: block;
		  margin-bottom: 20px;
		}
		.highlight_content{
		  width: 100%;
		  display: block;
		  padding: 0;
		}
	 }
  }

  &.box-background{
	 padding: 30px 40px;
	 @include transition(all 0.35s);
	 @include border-radius(6px);
	 box-shadow: 1px 5px 30px rgba(0, 0, 0, 0.1);
	 &.active, &:hover, &:focus, &:active{
		box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.1);
	 }
  }
  &.border-s1{
	 .icon-inner{
		padding: 6px;
		border: 2px solid $border-color;
		display: inline-block;
		.fa-stack{
		  line-height: 2.3em!important;
		  width: 2.2em;
		  height: 2.2em;
		}
		.fa-2x{
		  font-size: 1.6em;
		}
		.fa-1x{
		  font-size: 1.2em;
		  .fa-stack{
			 line-height: 2.3em!important;
			 width: 2.2em;
			 height: 2.2em;
		  }
		}
	 }
  }
  .i-border-theme{
	 border-color: $theme_color!important;
  }
  .i-border-black{
	 border-color: $color-black!important; 
  }
  .i-border-dark{
	 border-color: #f1f1f1!important;
  }
  .i-border-white{
	 border-color: $white!important; 
  }
  &:hover{
	 .highlight-icon .icon{
		animation: beat 1.5s ease 0s infinite;
	 }
  }
}