.hb{
	display:inline-block;
	position:relative;
	text-align:center;
	z-index:0;
	}
	
.hb:after,
.hb:before{
	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;
	transition:all .25s ease
	}
	
.hb,
.hb i,
.hb:after,
.hb:before{
	-webkit-transition:all .25s ease;
	-moz-transition:all .25s ease;
	-ms-transition:all .25s ease;
	-o-transition:all .25s ease
	}
	
.hb,
.hb:after,
.hb:before{
	box-sizing:border-box;
	transition:all .25s ease;
	background-color:#2c3e50;
	border-left:2px solid #2c3e50;
	border-right:2px solid #2c3e50;
	color:#2ecc71;
	}

.hb-md{
	line-height:54px;
	font-size:54px;
	margin:37px 0;
	}
	
.hb-md,
.hb-md:after,
.hb-md:before{
	height:55px;
	width:96px;
	}

.hb:hover,
.hb:hover:after,
.hb:hover:before{
	background:0 0;
	border-left:2px solid #2ecc71;
	border-right:2px solid #2ecc71;
	color:#2ecc71;
	cursor: pointer;
	cursor: hand;
	}

.hb-custom,
.hb-custom:after,
.hb-custom:before{
	background:rgba(243,156,18,0);!important;
	color:#f39c12!important;
	border-left:2px solid #f39c12!important;
	border-right:2px solid #f39c12!important
	}
	
.hb-custom:hover,
.hb-custom:hover:after,
.hb-custom:hover:before{
	background:orange!important;
	border-left:2px solid orange!important;
	border-right:2px solid orange!important;
	color:#000!important;
	cursor: pointer;
	cursor: hand;
}

@media screen and (max-width: 500px) { 
  div{width:100%;} 
  
.hb{
	display:inline-block;
	position:relative;
	text-align:center;
	z-index:0;
	}
	
.hb:after,
.hb:before{
	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;
	transition:all .25s ease
	}
	
.hb,
.hb i,
.hb:after,
.hb:before{
	-webkit-transition:all .25s ease;
	-moz-transition:all .25s ease;
	-ms-transition:all .25s ease;
	-o-transition:all .25s ease
	}
	
.hb,
.hb:after,
.hb:before{
	box-sizing:border-box;
	transition:all .25s ease;
	background-color:#2c3e50;
	border-left:1px solid #2c3e50;
	border-right:1px solid #2c3e50;
	color:#2ecc71;
	}

.hb-md{
	line-height:18px;
	font-size:18px;
	margin:5px 0;
	}
	
.hb-md,
.hb-md:after,
.hb-md:before{
	height:18.5px;
	width:32px;
	}

.hb:hover,
.hb:hover:after,
.hb:hover:before{
	background:0 0;
	border-left:1px solid #2ecc71;
	border-right:1px solid #2ecc71;
	color:#2ecc71;
	cursor: pointer;
	cursor: hand;
	}

.hb-custom,
.hb-custom:after,
.hb-custom:before{
	background:rgba(243,156,18,0);!important;
	color:#f39c12!important;
	border-left:1px solid #f39c12!important;
	border-right:1px solid #f39c12!important
	}
	
.hb-custom:hover,
.hb-custom:hover:after,
.hb-custom:hover:before{
	background:orange!important;
	border-left:1px solid orange!important;
	border-right:1px solid orange!important;
	color:#000!important;
	cursor: pointer;
	cursor: hand;
}
  
}