/* ---------------------------------------------------------------------- 

* ---------------------------------------------------------------------- */
.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;
    -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:after,.hb:before {
    box-sizing: border-box;
}

.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: 30px;
    width: 53px;
}

.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,.hb:after,.hb:before {
    background-color: #191919;
    border-left: 1px solid #3E3E3E;
    border-right: 1px solid #3E3E3E;
    color: #fff;
}

.hb:hover,.hb:hover:after,.hb:hover:before {
    background: 0 0;
    border-left: 1px solid #4DB848;
    border-right: 1px solid #4DB848;
    color: #4DB848;
}

.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:hover,.hb-facebook:hover:after,.hb-facebook:hover:before {
    background: 0 0;
    border-color: #3B5998;
    color: #3B5998;
}

.hb-facebook-inv,.hb-facebook-inv:after,.hb-facebook-inv:before {
    color: #3B5998;
    border-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;
}