hummingbird-me/hummingbird

.apps-header {
  background: url(apps-bg.jpg);
  min-height: 300px;
  background-size: cover;
  color: #fff;
  padding-top: 50px;
  h1 {
    font-size: 50px;
    margin-bottom: 30px;
  }
  p {
    font-size: 20px;
    margin-bottom: 20px;
  }
  a {
    color: #ebab67;
  }
  &.condensed {
    min-height: 0;
    height: 140px;
    padding-top: 20px;
  }
  .btn {
    transform: translateY(50%);
  }
}
.apps-page {
  @extend .container;
  padding-top: 20px;

  hr {
    margin-top: 40px;
    margin-bottom: 30px;
    border-top: 1px solid #D5D5D5;
  }

  .apps-page-title {
    margin-top: 0;
  }

  .apps-page-desc {
    text-align: justify;
  }

  .app-card {
    @extend .clearfix;
    background: #fff;
    border-radius: 3px;
    border: 1px solid #ddd;
  }

  .app-card-new {
    .app-card-new-form-container {
      position: relative;
      input {
        padding-right: 80px;
      }
      .btn {
        position: absolute;
        right: 0;
        top: 0;
        background: #e67e22;
        color: #fff;
        transition: .2s ease-in;
        &:hover {
          background: darken(#e67e22,10);
        }
      }
    }
  }

  .app-image {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    width: 100%;
  }

  .app-inner {
    padding: 20px;
    hr {
      margin-top: 15px;
      margin-bottom: 15px;
    }
    .app-title {
      margin-top: 0;
      margin-bottom: 3px;
      padding: 0;
      font-weight: normal;

      .app-type {
        display: inline-block;
        font-size: 0.5em;
        font-weight: normal;
        color: #818080;
        border: 1px solid;
        padding: 5px 10px;
        position: relative;
        top: -4px;
        margin-left: 5px;
        border-radius: 3px;
      }
    }

    .app-author {
      font-size: 16px;
      display: block;
      margin-bottom: 10px;
    }

    .app-desc {
      font-size: 18px;
    }

    .app-link {
      display: block;
      margin-top: 20px;
      a {
        display: inline-block;
        background: #acacac;
        color: #fff;
        margin-top: 5px;
        margin-bottom: 5px;
        padding: 10px 30px;
        border-radius: 3px;
        &:hover {
          background: darken(#acacac,10);
        }
        &:first-child {
            margin-top: 0;
        }
        &:last-child {
          margin-bottom: 0;
          background: #e67e22;
          &:hover {
            background: darken(#e67e22,10);
          }
        }
      }
    }
    .app-token {
      font-family: monospace;
      &:before,
      &:after {
        content: '"';
      }
    }
    .app-screens {
      margin-top: 30px;
      div {
        width: 100%;
        @media (min-width: $screen-sm-min) {
            width: 50%;
        }
      }
      img {
        width: 100%;
        max-width: 100%;
        border-radius: 5px;
      }
    }
  }
}