/*============================================================================ Social Icon Buttons v1.0 Author: Carson Shold | @cshold http://www.carsonshold.com MIT License ==============================================================================*/ @font-face { font-family: 'icons'; src: url("fonts/icons.eot?social"); src: url("fonts/icons.eot?#iefixsocial") format("embedded-opentype"), url("fonts/icons.woff?social") format("woff"), url("fonts/icons.ttf?social") format("truetype"), url("fonts/icons.svg?social#icons") format("svg"); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { font-family: 'icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-fancy:before { content: "\46"; } .icon-twitter:before { content: "\54"; } .icon-facebook:before { content: "\66"; } .icon-google:before { content: "\67"; } .icon-pinterest:before { content: "\70"; } /*================ Social share buttons ================*/ .social-sharing { font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; /*================ Large Buttons ================*/ } .social-sharing * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .social-sharing a { display: inline-block; color: #fff; border-radius: 2px; margin: 0 10px 10px 0; height: 22px; line-height: 22px; text-decoration: none; font-weight: normal; } .social-sharing a:hover { color: #fff; } .social-sharing span { display: inline-block; vertical-align: top; height: 22px; line-height: 22px; font-size: 12px; } .social-sharing .icon { padding: 0 5px 0 10px; } .social-sharing .icon:before { line-height: 22px; } .social-sharing.is-large a { height: 44px; line-height: 44px; } .social-sharing.is-large a span { height: 44px; line-height: 44px; font-size: 18px; } .social-sharing.is-large a .icon { padding: 0 10px 0 18px; } .social-sharing.is-large a .icon:before { line-height: 44px; } .share-title { font-weight: 900; font-size: 12px; padding-right: 10px; } .is-large .share-title { padding-right: 16px; } .share-facebook { background-color: #3b5998; } .share-facebook:hover { background-color: #2d4373; } .share-twitter { background-color: #00aced; } .share-twitter:hover { background-color: #0087ba; } .share-pinterest { background-color: #cb2027; } .share-pinterest:hover { background-color: #9f191f; } .share-fancy { background-color: #4999dc; } .share-fancy:hover { background-color: #2780cb; } .share-google { background-color: #dd4b39; } .share-google:hover { background-color: #c23321; } .share-count { position: relative; background-color: white; padding: 0 8px; margin-right: -2px; font-size: 14px; line-height: 20px; color: #333; border-radius: 0 2px 2px 0; border: 1px solid #ececec; opacity: 0; -webkit-transition: opacity 0.2s ease-in; -moz-transition: opacity 0.2s ease-in; -o-transition: opacity 0.2s ease-in; transition: opacity 0.2s ease-in; } .share-count.is-loaded { opacity: 1; } .share-count:before, .share-count:after { content: ''; display: block; position: absolute; top: 50%; margin-top: -6px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 6px solid; } .share-count:before { left: -6px; border-right-color: #ececec; } .share-count:after { left: -5px; border-right-color: white; } a:hover .share-count { background-color: whitesmoke; } a:hover .share-count:after { border-right-color: whitesmoke; } .is-large .share-count { font-size: 18px; padding: 0 14px; } /*================ Clean Buttons ================*/ .social-sharing.is-clean a { background-color: #fff; border: 1px solid #ececec; color: #333; height: 30px; line-height: 30px; } .social-sharing.is-clean a span { height: 30px; line-height: 30px; font-size: 13px; } .social-sharing.is-clean a:hover { background-color: #ececec; } .social-sharing.is-clean a:hover .share-count { background-color: white; } .social-sharing.is-clean a:hover .share-count:after { border-right-color: white; } .social-sharing.is-clean a .share-title { font-weight: normal; } .social-sharing.is-clean .share-count { top: -1px; } .social-sharing.is-clean .icon-facebook { color: #3b5998; } .social-sharing.is-clean .icon-twitter { color: #00aced; } .social-sharing.is-clean .icon-pinterest { color: #cb2027; } .social-sharing.is-clean .icon-fancy { color: #4999dc; } .social-sharing.is-clean .icon-google { color: #dd4b39; }