.slide-social {display: inline-block;overflow: hidden;/*margin: 0 1em 1em 0;*/width: 9em;
 height: 2.3em;background: #F1F1F1;background: rgba(0,0,0,.05);position: relative;}
.slide-social .ss-button {position: absolute;top: 0.23em;left: 35%;}
.ss-icon {padding-top: 0.5em;width: 25%;height: 100%;text-align: center;}
.ss-icon i{border-right: 1px solid #FFF;border-right-color: rgba(255,255,255,.3);color: #FFF;display: block;
font-size: 1.2em;height: 1em;}
.ss-slide{position: absolute;top: 0;right: 0;width: 75%;height: 100%;color: #FFF;text-align: center;font-weight: 600;line-height: 3em; /* .slide-social{height} */cursor: pointer;}
.facebook-bg{background: #3b5998;}
.twitter-bg{background: #00acee;}
.linkedin-bg{background: #0e76a8;}
.pinterest-bg{background: #c8232c;}
.tumblr-bg{background: #35465c;}
.youtube-bg{background: #b31217;}

/* Slide Animation */
.slide-social:hover .ss-slide, 
.slide-social .ss-slide:hover{-webkit-transform: translate(101%, 0);-moz-transform: translate(101%, 0);-ms-transform: translate(101%, 0);-o-transform: translate(101%, 0);transform: translate(101%, 0);}
.slide-social:hover .ss-icon i{border-right-color: transparent;}

/* Transition */

.ss-slide {position: absolute;top: 0;right: 0;width: 75%;height: 100%;color: #FFF;font-size: 0.85em;
text-align: center;font-weight: 600;line-height: 3em;cursor: pointer;}
.follow-on{position: relative;top: -12px;font-size: 1.1em;font-weight: 900;display: inline-block;}
.slide-social:hover .ss-slide{-ms-transition-delay: 0s;}
.btn-pt{position: relative;
    top: -4px;
    left: -11px;}
/* Example Media Queries */

@media only screen and (max-width : 30em) { /* 480px/16px = 30em */
.slide-social{width: 100%;}
.slide-social .ss-button{left: 50%;}
}