.corkboard-need,
.btn-label.corkboard-need,
.corkboard-icon.corkboard-need {
  background: $brand-primary;
}

.corkboard-event,
.btn-label.corkboard-event,
.corkboard-icon.corkboard-event {
  background: $brand-info;
}

.corkboard-job,
.btn-label.corkboard-job,
.corkboard-icon.corkboard-job {
  background: $brand-success;
}

.corkboard-item,
.btn-label.corkboard-item,
.corkboard-icon.corkboard-item {
  background: $brand-secondary;
}


.btn-labeled {
  &:hover {
    .btn-label {
      &.corkboard-need {
        background: darken($brand-primary, 5%);
      }

      &.corkboard-event {
        background: darken($brand-info, 5%);
      }

      &.corkboard-job {
        background: darken($brand-success, 5%);
      }

      &.corkboard-item {
        background: darken($brand-secondary, 5%);
      }
    }
  }
}

.corkboard-icon {
  position: relative;
  max-width: 89%;
  overflow: hidden;
  border-radius: 50%;
  margin: 0 auto;
  @extend .brand-font;
  letter-spacing: 0px;

  &:before{
    content: "";
    display: block;
    padding-top: 100%;
  }

  .square-content{
      position:  absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      color: white;

      > div {
       display: table;
       width: 100%;
       height: 100%;
     }

     span {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
      color: white
    }

    .icon {
      min-width: 45%;
      height: auto;
      display: block;
      margin: 0 auto;
      max-height: 50px;
    }
  }
}

.corkboard-header {
  //position: relative;
  .page-header {
    //padding-right: 50px;
  }
  .card-img {
    //position: absolute;
    //top: 0px;
    //right: 0px;
    width: 80px;
  }
}
.corkboard-actions {
  .btn {
    display: block;
    margin-top: 5px;
    @media (min-width: $screen-sm-min) {
      display: inline-block;
    }
  }
}
.corkboard-sharing {
  text-align: center;
    @media (min-width: $screen-sm-min) {
      text-align: left;
    }
}

.corkboard-summary {
  padding-right: 20px;
}

.corkboard-description {
  white-space: pre-wrap;
}