// SoSocial Progress Bars
.progress-bar {
    background-color: $sosocial-warm-light-gray;
    border-radius: $base-border-radius;
    height: 2em;
    margin: 2em auto;
    padding: 0;
    width: 100%;
    position: relative;
    > span.meter {
        @include animation(progress 0.7s linear infinite);
        @include box-sizing(border-box);
        background-color: $sosocial-facebook;
        @include background-image(linear-gradient(-45deg, rgba(255,255,255, 0.15) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255,255,255, 0.15) 50%,
            rgba(255,255,255, 0.15) 75%,
            transparent 75%));
        background-size: 40px 40px;
        background-repeat: repeat-x;
        border-radius: $base-border-radius;
        display: block;
        height: 100%;
        width: 50%;
    }
    p {
            line-height: 0.8em;
        width: 100%;
            height: 0.8em;
            font-size: 0.8em;
        float: left;
        margin: 1em 0;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-weight: 900;
            text-align: center;
        z-index: 100;
        top: 0px;
        }
  &.green-bar {
    > span.meter {
      background-color: $sosocial-green;
    }
  }
  &.red-bar {
    > span.meter {
      background-color: $sosocial-red;
    }
  }
}

@-webkit-keyframes progress {
    0% {
        background-position: 0px 0px;
    }
    100% {
        background-position: 40px 0px;
    }
}

@-moz-keyframes progress {
    0% {
        background-position: 0px 0px;
    }
    100% {
        background-position: 40px 0px;
    }
}

@-ms-keyframes progress {
    0% {
        background-position: 0px 0px;
    }
    100% {
        background-position: 40px 0px;
    }
}

@-o-keyframes progress {
    0% {
        background-position: 0px 0px;
    }
    100% {
        background-position: 40px 0px;
    }
}

@keyframes progress {
    0% {
        background-position: 0px 0px;
    }
    100% {
        background-position: 40px 0px;
    }
}