/* ---------------------------------------------------------------------- 
* Product Name: CSS3 Hexagon Buttons
* Product URI: http://ollopage.com/html/hex-btn/
* Author: ollopage
* Author URI: http://ollopage.com/
* Description: CSS3 Hexagon Buttons created with pure css3 by olloPage
* Version: 1.0.1
* License: GNU General Public License v2 or later
* License URI: http://www.gnu.org/licenses/gpl-2.0.html
* Tags: CSS3 Hexagon Buttons, social buttons, buttons, ollopage
* ---------------------------------------------------------------------- */
.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:#fff
}
.hb-lg {
	line-height:150px;
	font-size:150px;
	margin:74px 0
}
.hb-lg, .hb-lg:after, .hb-lg:before {
	height:148px;
	width:256px
}
.hb-md {
	line-height:74px;
	font-size:74px;
	margin:37px 0
}
.hb-md, .hb-md:after, .hb-md:before {
	height:74px;
	width:128px
}
.hb-sm {
	line-height:37px;
	font-size:37px;
	margin:18.5px 0
}
.hb-sm, .hb-sm:after, .hb-sm:before {
	height:37px;
	width:64px
}
.hb-xs {
	line-height: 13.5px;
font-size: 14px;
margin: 9.5px 0;
}
.hb-xs, .hb-xs:after, .hb-xs:before {
	height: 14.5px;
width: 25px;
}
.hb-lg-margin, .hb-md-margin, .hb-sm-margin, .hb-xs-margin {
	margin:0;
	display:inline-block;
	overflow:hidden
}
.hb-lg-margin {
	height:296px;
	width:256px
}
.hb-md-margin {
	height:148px;
	width:128px
}
.hb-sm-margin {
	height:74px;
	width:64px
}
.hb-xs-margin {
    height: 31px;
    width: 34px;
}
.spin, .spin-icon i {
-webkit-transition:-webkid-transform .25s ease;
-moz-transition:-moz-transform .25s ease;
-ms-transition:-ms-transform .25s ease;
-o-transition:-o-transform .25s ease;
transition:transform .25s ease
}
.spin-icon:hover i, .spin:hover {
	-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-ms-transform:rotate(360deg);
	-o-transform:rotate(360deg);
	transform:rotate(360deg)
}
.hb:hover, .hb:hover:after, .hb:hover:before {
	background:0 0;
	border-left:1px solid #2ecc71;
	border-right:1px solid #2ecc71;
	color:#2ecc71
}
.hb-custom, .hb-custom:after, .hb-custom:before {
	background:#f39c12!important;
	color:#fff!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:#f1c40f!important;
	border-left:1px solid #f1c40f!important;
	border-right:1px solid #f1c40f!important;
	color:#000!important
}
.hb-facebook, .hb-facebook:after, .hb-facebook:before {
	background:#0077b5;
	border-color:#0077b5;
	color:#fff
}
.hb-facebook-inv, .hb-facebook-inv:after, .hb-facebook-inv:before, .hb-facebook:hover, .hb-facebook:hover:after, .hb-facebook:hover:before {
	border-color:#0077b5;
	color:#0077b5;
	background:0 0
}
.hb-facebook-inv:hover, .hb-facebook-inv:hover:after, .hb-facebook-inv:hover:before {
	background:#0077b5;
	border-color:#0077b5;
	color:#fff
}
.hb-twitter, .hb-twitter:after, .hb-twitter:before {
	background:#55ACEE;
	border-color:#55ACEE;
	color:#fff
}
.hb-twitter-inv, .hb-twitter-inv:after, .hb-twitter-inv:before, .hb-twitter:hover, .hb-twitter:hover:after, .hb-twitter:hover:before {
	background:0 0;
	border-color:#55ACEE;
	color:#55ACEE
}
.hb-twitter-inv:hover, .hb-twitter-inv:hover:after, .hb-twitter-inv:hover:before {
	background:#55ACEE;
	border-color:#55ACEE;
	color:#fff
}
.hb-google-plus, .hb-google-plus:after, .hb-google-plus:before {
	background:#db514f;
	border-color:#db514f;
	color:#fff
}
.hb-google-plus-inv, .hb-google-plus-inv:after, .hb-google-plus-inv:before, .hb-google-plus:hover, .hb-google-plus:hover:after, .hb-google-plus:hover:before {
	background:0 0;
	border-color:#db514f;
	color:#db514f
}
.hb-google-plus-inv:hover, .hb-google-plus-inv:hover:after, .hb-google-plus-inv:hover:before {
	background:#db514f;
	border-color:#db514f;
	color:#fff
}
.hb-youtube, .hb-youtube:after, .hb-youtube:before {
	background:#cc181e;
	border-color:#cc181e;
	color:#fff
}
.hb-youtube-inv, .hb-youtube-inv:after, .hb-youtube-inv:before, .hb-youtube:hover, .hb-youtube:hover:after, .hb-youtube:hover:before {
	background:0 0;
	border-color:#cc181e;
	color:#cc181e
}
.hb-youtube-inv:hover, .hb-youtube-inv:hover:after, .hb-youtube-inv:hover:before {
	background:#cc181e;
	border-color:#cc181e;
	color:#fff
}
.hb-linkedin, .hb-linkedin:after, .hb-linkedin:before {
	background:#0077b5;
	border-color:#0077b5;
	color:#fff
}
.hb-linkedin-inv, .hb-linkedin-inv:after, .hb-linkedin-inv:before, .hb-linkedin:hover, .hb-linkedin:hover:after, .hb-linkedin:hover:before {
	background:0 0;
	border-color:#0077b5;
	color:#0077b5
}
.hb-linkedin-inv:hover, .hb-linkedin-inv:hover:after, .hb-linkedin-inv:hover:before {
	background:#0077b5;
	border-color:#0077b5;
	color:#fff
}
.hb-tumblr, .hb-tumblr:after, .hb-tumblr:before {
	background:#2c4762;
	border-color:#2c4762;
	color:#fff
}
.hb-tumblr-inv, .hb-tumblr-inv:after, .hb-tumblr-inv:before, .hb-tumblr:hover, .hb-tumblr:hover:after, .hb-tumblr:hover:before {
	background:0 0;
	border-color:#2c4762;
	color:#2c4762
}
.hb-tumblr-inv:hover, .hb-tumblr-inv:hover:after, .hb-tumblr-inv:hover:before {
	background:#2c4762;
	border-color:#2c4762;
	color:#fff
}
.hb-rss, .hb-rss:after, .hb-rss:before {
	background:#da5700;
	border-color:#da5700;
	color:#fff
}
.hb-rss-inv, .hb-rss-inv:after, .hb-rss-inv:before, .hb-rss:hover, .hb-rss:hover:after, .hb-rss:hover:before {
	background:0 0;
	border-color:#da5700;
	color:#da5700
}
.hb-rss-inv:hover, .hb-rss-inv:hover:after, .hb-rss-inv:hover:before {
	background:#da5700;
	border-color:#da5700;
	color:#fff
}
.hb-pinterest, .hb-pinterest:after, .hb-pinterest:before {
	background:#da232a;
	border-color:#da232a;
	color:#fff
}
.hb-pinterest-inv, .hb-pinterest-inv:after, .hb-pinterest-inv:before, .hb-pinterest:hover, .hb-pinterest:hover:after, .hb-pinterest:hover:before {
	background:0 0;
	border-color:#da232a;
	color:#da232a
}
.hb-pinterest-inv:hover, .hb-pinterest-inv:hover:after, .hb-pinterest-inv:hover:before {
	background:#da232a;
	border-color:#da232a;
	color:#fff
}
.hb-vimeo, .hb-vimeo:after, .hb-vimeo:before {
	background:#20b9eb;
	border-color:#20b9eb;
	color:#fff
}
.hb-vimeo-inv, .hb-vimeo-inv:after, .hb-vimeo-inv:before, .hb-vimeo:hover, .hb-vimeo:hover:after, .hb-vimeo:hover:before {
	background:0 0;
	border-color:#20b9eb;
	color:#20b9eb
}
.hb-vimeo-inv:hover, .hb-vimeo-inv:hover:after, .hb-vimeo-inv:hover:before {
	background:#20b9eb;
	border-color:#20b9eb;
	color:#fff
}
.hb-github, .hb-github:after, .hb-github:before {
	background:#373a3c;
	border-color:#373a3c;
	color:#fff
}
.hb-github-inv, .hb-github-inv:after, .hb-github-inv:before, .hb-github:hover, .hb-github:hover:after, .hb-github:hover:before {
	background:0 0;
	border-color:#373a3c;
	color:#373a3c
}
.hb-github-inv:hover, .hb-github-inv:hover:after, .hb-github-inv:hover:before {
	background:#373a3c;
	border-color:#373a3c;
	color:#fff
}
.hb-flickr, .hb-flickr:after, .hb-flickr:before {
	background:#ff1981;
	border-color:#ff1981;
	color:#fff
}
.hb-flickr-inv, .hb-flickr-inv:after, .hb-flickr-inv:before, .hb-flickr:hover, .hb-flickr:hover:after, .hb-flickr:hover:before {
	background:0 0;
	border-color:#ff1981;
	color:#ff1981
}
.hb-flickr-inv:hover, .hb-flickr-inv:hover:after, .hb-flickr-inv:hover:before {
	background:#ff1981;
	border-color:#ff1981;
	color:#fff
}
.hb-dropbox, .hb-dropbox:after, .hb-dropbox:before {
	background:#007ee5;
	border-color:#007ee5;
	color:#fff
}
.hb-dropbox-inv, .hb-dropbox-inv:after, .hb-dropbox-inv:before, .hb-dropbox:hover, .hb-dropbox:hover:after, .hb-dropbox:hover:before {
	background:0 0;
	border-color:#007ee5;
	color:#007ee5
}
.hb-dropbox-inv:hover, .hb-dropbox-inv:hover:after, .hb-dropbox-inv:hover:before {
	background:#007ee5;
	border-color:#007ee5;
	color:#fff
}
.hb-xing, .hb-xing:after, .hb-xing:before {
	background:#006467;
	border-color:#006467;
	color:#fff
}
.hb-xing-inv, .hb-xing-inv:after, .hb-xing-inv:before, .hb-xing:hover, .hb-xing:hover:after, .hb-xing:hover:before {
	background:0 0;
	border-color:#006467;
	color:#006467
}
.hb-xing-inv:hover, .hb-xing-inv:hover:after, .hb-xing-inv:hover:before {
	background:#006467;
	border-color:#006467;
	color:#fff
}
.hb-skype, .hb-skype:after, .hb-skype:before {
	background:#00aceb;
	border-color:#00aceb;
	color:#fff
}
.hb-skype-inv, .hb-skype-inv:after, .hb-skype-inv:before, .hb-skype:hover, .hb-skype:hover:after, .hb-skype:hover:before {
	background:0 0;
	border-color:#00aceb;
	color:#00aceb
}
.hb-skype-inv:hover, .hb-skype-inv:hover:after, .hb-skype-inv:hover:before {
	background:#00aceb;
	border-color:#00aceb;
	color:#fff
}
.hb-dribbble, .hb-dribbble:after, .hb-dribbble:before {
	background:#ea4c89;
	border-color:#ea4c89;
	color:#fff
}
.hb-dribbble-inv, .hb-dribbble-inv:after, .hb-dribbble-inv:before, .hb-dribbble:hover, .hb-dribbble:hover:after, .hb-dribbble:hover:before {
	background:0 0;
	border-color:#ea4c89;
	color:#ea4c89
}
.hb-dribbble-inv:hover, .hb-dribbble-inv:hover:after, .hb-dribbble-inv:hover:before {
	background:#ea4c89;
	border-color:#ea4c89;
	color:#fff
}
.hb-tencent-weibo, .hb-tencent-weibo:after, .hb-tencent-weibo:before {
	background:#20B8E5;
	border-color:#20B8E5;
	color:#fff
}
.hb-tencent-weibo-inv, .hb-tencent-weibo-inv:after, .hb-tencent-weibo-inv:before, .hb-tencent-weibo:hover, .hb-tencent-weibo:hover:after, .hb-tencent-weibo:hover:before {
	background:0 0;
	border-color:#20B8E5;
	color:#20B8E5
}
.hb-tencent-weibo-inv:hover, .hb-tencent-weibo-inv:hover:after, .hb-tencent-weibo-inv:hover:before {
	background:#20B8E5;
	border-color:#20B8E5;
	color:#fff
}
.hb-instragram, .hb-instragram:after, .hb-instragram:before {
	background:#125688;
	border-color:#125688;
	color:#fff
}
.hb-instragram-inv, .hb-instragram-inv:after, .hb-instagram-inv:before, .hb-instragram:hover, .hb-instragram:hover:after, .hb-instragram:hover:before {
	background:0 0;
	border-color:#125688;
	color:#125688
}
.hb-instagram-inv:hover, .hb-instagram-inv:hover:after, .hb-instagram-inv:hover:before {
	background:#125688;
	border-color:#125688;
	color:#fff
}
.hb-instagram, .hb-instagram:after, .hb-instagram:before {
    background: #cf3400;
    border-color: #cf3400;
    color: #fff;
}