.nav.nav-pills {
  position: relative;
  text-align: center;
  padding-bottom: 20px;
  margin-bottom: 30px;
  border-bottom: 1px solid $list-group-border;

  li {
    float: none;
    display: inline-block;
    vertical-align: top;
    text-align: left;
    margin: 0 6px 2px;

    a {
      position: relative;
      color: $brand-primary;
      display: inline-block;
      opacity: .7;
      background: #fff;
      -webkit-font-smoothing: subpixel-antialiased;
      @include transition(opacity ease .3s);

      &:hover {
        opacity: 1;
        background: #fff;
      }

      &:focus,
      &:active,
      &.active {
        outline: none;
        opacity: 1;
        color: $gray-dark;
        box-shadow: 0 0 0 1px rgba($gray-darker, .10), 0 1px 2px rgba(#000, .05);
        border-radius: 3px;
        background: #fff;
      }

      small {
        color: $gray;
        display: block;
        padding-top: 2px;

        &.connected {
          font-weight: bold;
        }
      }
    }

    &.deploy-tab {

      &.tab-heroku-git a {
        color: $brand-primary;
      }

      &.tab-github a {
        color: $color-github;
      }

      &.tab-dropbox a {
        color: $color-dropbox;
      }

      a {
        padding: 10px 18px 10px 60px;
      }

      .label {
        position: relative;
        top: -2px;
        margin-left: 4px;
        text-transform: uppercase;
        font-size: 9px;
        padding: 2px 4px 1px 4px;
      }

      .label-github {
        background: #3F3F44;
      }

      .label-dropbox {
        background: #007EE5;
      }

      .icon {

        &.tab-icon {
          position: absolute;
          left: 16px;
          top: 50%;
          margin-top: -17px;
        }

        &.icon-success-alt {
          position: relative;
          top: -1px;
          margin-left: 4px;
        }
      }

      @media (max-width: 520px) {

        margin-left: 0;
        margin-right: 0;
        text-align: center;

        .service {
          display: block;
          padding-top: 4px;
        }

        small {
          display: none;
        }

        a {
          padding: 8px 10px;
          font-size: 13px;
        }

        .icon {

          &.tab-icon {
            position: relative;
            top: 0;
            left: 0;
            margin: 0 auto;
          }

          &.icon-success-alt {
            position: absolute;
            top: 8px;
            right: 10px;
            background-color: #fff;
            border-radius: 50%;
          }
        }
      }
    }
  }
}