.hb {
	display: inline-block;
	position:relative;
	text-align: center; /*  Default text align center */
	z-index: 0;
}

.hb:before,
.hb:after {
	position: absolute;
	content: "";  
	left: -1px;
	top: 0;
	z-index: -1;
}

.hb:before {
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	-ms-transform: rotate(60deg);
	-o-transform: rotate(60deg);
	transform: rotate(60deg);
}

.hb:after {
	-webkit-transform: rotate(-60deg);
	-moz-transform: rotate(-60deg);
	-ms-transform: rotate(-60deg);
	-o-transform: rotate(-60deg);
	transform: rotate(-60deg);
}

.hb i {
	z-index: 9;
	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;
}


.hb,
.hb:before,
.hb:after { 
	 box-sizing: border-box;

	 /* default transition time is set .25s = 250 millisecond  
	 Uncomment following if you want to set transition on hexagon color change */ 

	 -webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;
}


.hb-xs {
	line-height: 18.5px;
	font-size: 18.5px;
	margin: 9.5px 0px; /* Original output, margin 0 of the button */ 
	/*margin: 33.5px 15px;*/ /* New output, margin 15px of the button,  9.5 + 15 = 24.5 */ 
}
.hb-xs ,
.hb-xs:before ,
.hb-xs:after {
	height:1.2rem;
	width:2rem; 
}

.hb-xs-margin {
	height: 38px;
	width: 32px;
}

.hb {
	margin-left: .4rem;
	margin-top: -1rem;
}

.hb:focus,
.hb:active {
	outline: none !important;
}

.hb,
.hb:before,
.hb:after {
	background-color: #2c3e50;  /*  Default background color  */ 
	border-left:1px solid #2c3e50;
	border-right:1px solid #2c3e50;
	color: #1E8BC3; /* Default font color */
}

.hb:hover,
.hb:hover:before,
.hb:hover:after {
	background: transparent;  
	border-left:1px solid #19B5FE;
	border-right:1px solid #19B5FE;  
	color: #19B5FE; /* Default hover font color */
}

.hb-custom,
.hb-custom:before,
.hb-custom:after {
	background: #f39c12 !important;  /*  Custom background color  */
	color: white!important; /* Custom font color */
	/*font-size:20px;*/ /* Custom font size */
	border-left:1px solid #f39c12 !important;;
	border-right:1px solid #f39c12 !important;; 
}

.hb-custom:hover,
.hb-custom:hover:before,
.hb-custom:hover:after {
	background: #f1c40f !important;  
	border-left:1px solid #f1c40f !important;;
	border-right:1px solid #f1c40f !important;; 
	color: black!important; /* Custom hover font color */
}