.icon {
	@include icon-shape ($size-icon, $padding-icon, $border-radius-icon);
	@include icon-gradient ($icon-default-color-top, $icon-default-color-bottom);

// padding suprascris pentru iconite 7s si fa, test!
    padding: 8px;
    
	[class^="icon-"]{
		height: $height-icon-message;
		width:  $width-icon-message;
		background-repeat: no-repeat;
		background-size: 100%;
	}	

	&.icon-sm {
		@include icon-shape ($size-icon-sm, $padding-icon-sm, $border-radius-icon-sm);

		[class^="icon-"]{
			height: $height-icon-message-sm;
			width:  $width-icon-message-sm;
							
		}
		
		[class*="pe-7s-"]{
        	width: 25px;
        	height: 25px;
        	line-height: 25px;
        	font-size: 25px;
        	text-align: center;
        	color: #FFFFFF;
    	}
    	[class*="fa-"]{
        	width: 25px;
        	height: 25px;
        	line-height: 25px;
        	font-size: 19px;
        	text-align: center;
        	color: #FFFFFF;
    	}
	}

	[class*="pe-7s-"]{
    	width: 50px;
    	height: 50px;
    	line-height: 50px;
    	font-size: 46px;
    	text-align: center;
    	color: #FFFFFF;
	}
	[class*="fa-"]{
    	width: 50px;
    	height: 50px;
    	line-height: 50px;
    	font-size: 36px;
    	text-align: center;
    	color: #FFFFFF;
	}

 }

.icon-blue {
	@include icon-gradient ($icon-blue-color-top, $icon-blue-color-bottom);
}

.icon-azure {
	@include icon-gradient ($icon-azure-color-top, $icon-azure-color-bottom);
}

.icon-green {
	@include icon-gradient ($icon-green-color-top, $icon-green-color-bottom);
}

.icon-orange {
	@include icon-gradient ($icon-orange-color-top, $icon-orange-color-bottom);
}

.icon-red {
	@include icon-gradient ($icon-red-color-top, $icon-red-color-bottom);
}

.icon-purple {
	@include icon-gradient ($icon-purple-color-top, $icon-purple-color-bottom);
}

.icon-pink {
	@include icon-gradient ($icon-pink-color-top, $icon-pink-color-bottom);
}

.icon-black {
	@include icon-gradient ($icon-black-color-top, $icon-black-color-bottom);
}

.info{
    margin-top: 20px;
    margin-bottom: 30px;
    text-align: center;
    .icon{
        margin-top: 0;
    }
    h4,
    .h4{
        margin-top: 20px;
        margin-bottom: 5px;   
    }
}

.info-horizontal{
    text-align: left;
    margin-top: 0;
    .icon{
        float: left;
        margin-top: 20px;
        margin-right: 20px;
    }
    .description{
        overflow: hidden;
    }
}