/* ---------------------------------------------------------------------- 
* 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: #2ecc71
}
.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: 18.5px;
	font-size: 18.5px;
	margin: 9.5px 0
}
.hb-xs, .hb-xs:after, .hb-xs:before {
	height: 18.5px;
	width: 32px
}
.hb-lg-margin, .hb-md-margin, .hb-sm-margin, .hb-xs-margin {
	margin: 15px;
	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: 38px;
	width: 32px
}
.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: #3B5998;
	border-color: #3B5998;
	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: #3B5998;
	color: #3B5998;
	background: 0 0
}
.hb-facebook-inv:hover, .hb-facebook-inv:hover:after, .hb-facebook-inv:hover:before {
	background: #3B5998;
	border-color: #3B5998;
	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-instragram-inv:before, .hb-instragram:hover, .hb-instragram:hover:after, .hb-instragram:hover:before {
	background: 0 0;
	border-color: #125688;
	color: #125688
}
.hb-instragram-inv:hover, .hb-instragram-inv:hover:after, .hb-instragram-inv:hover:before {
	background: #125688;
	border-color: #125688;
	color: #fff
}