/* ----------------------------------------------------------------------
* 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: 120px;
  font-size: 120px;
  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: 40px;
  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: 50px;
  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: #fff;
  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: #fff;
  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: #fff;
  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-envelope, .hb-envelope:after, .hb-envelope:before {
  background: #da5700;
  border-color: #da5700;
  color: #fff
}
.hb-envelope-inv, .hb-envelope-inv:after, .hb-envelope-inv:before, .hb-envelope:hover, .hb-envelope:hover:after, .hb-envelope:hover:before {
  background: #fff;
  border-color: #da5700;
  color: #da5700
}
.hb-envelope-inv:hover, .hb-envelope-inv:hover:after, .hb-envelope-inv:hover:before {
  background: #da5700;
  border-color: #da5700;
  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: #fff;
  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-behance, .hb-behance:after, .hb-behance:before {
  background: #ff1981;
  border-color: #ff1981;
  color: #fff
}
.hb-behance-inv, .hb-behance-inv:after, .hb-behance-inv:before, .hb-behance:hover, .hb-behance:hover:after, .hb-behance:hover:before {
  background: #fff;
  border-color: #ff1981;
  color: #ff1981
}
.hb-behance-inv:hover, .hb-behance-inv:hover:after, .hb-behance-inv:hover:before {
  background: #ff1981;
  border-color: #ff1981;
  color: #fff
}
.hb-medium, .hb-medium:after, .hb-medium:before {
  background: #00AB6C;
  border-color: #00AB6C;
  color: #fff
}
.hb-medium-inv, .hb-medium-inv:after, .hb-medium-inv:before, .hb-medium:hover, .hb-medium:hover:after, .hb-medium:hover:before {
  background: #fff;
  border-color: #00AB6C;
  color: #00AB6C;
}
.hb-medium-inv:hover, .hb-medium-inv:hover:after, .hb-medium-inv:hover:before {
  background: #00AB6C;
  border-color: #00AB6C;
  color: #fff
}