.progress {
  border: 2px solid $secondary;
  background: rgba($secondary, .5);
  position: relative;

  @include rem(margin, 40px 0);
  @include rem(min-height, 50px);
  @include rem(border-radius, 4px);

  &__content {
    position: relative;
    z-index:2;

    @include rem(padding, 8px 20px 7px);
  }

  &__bar {
    background: rgba($secondary, 1);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100% !important;
  }

  &__title {
    text-transform: uppercase;
    font-weight: $fw-semi;
    color: #fff;
    letter-spacing: 1.79px;

    @include rem(font-size, 18px);
    @include rem(line-height, 32px);
  }

  &__info {
    list-style: none;
    margin-bottom: 0;

    @include rem(padding, 5px 0 0);

    li {
      font-weight: $fw-semi;
      display: inline-block;
      vertical-align: baseline;
      margin-bottom: 0;
      color: #fff;

      @include rem(margin-left, 20px);
    }

    .icon {
      position: relative;
      top: -2px;

      @include rem(font-size, 16px);
    }
  }

  @include color-modifier-progress(border-color, .5, 'progress__bar', background);

  &--grey {
    border-color: rgb(185, 193, 200);
    background: rgba(185, 193, 200, .5);

    .progress__bar {
      background: rgba(185, 193, 200, 1);
    }
  }
}