@import "base/variables.less";
@import "base/mixins.less";

/* ---------------- No FeelBetter ------------------ */

.stress-content {
  .fz0;

  .stress-item {
    float: left;
    width: 17.5%;
    background: url(../images/features-bg.jpg) 0 -278px repeat;
    background-size: 278px auto;
    text-align: center;
    display: block;
    font-size: 16px;
    color: #2D2D2D;
    text-decoration: none;
    padding: 30px 3%;
    margin-right: 2%;
    margin-bottom: 1em;

    @media @tablet {
      width: 43%;
      margin-bottom: 30px;
    }

    @media @mobile {
      width: 94%;
      margin: 30px 0;
    }

    &:hover {

      .button {
        opacity: 0.6;
      }

    }

    &-title {
      display: block;
      text-transform: uppercase;
      font-size: 20px;
      font-family: @second-font;
      line-height: 26px;
      font-weight: 800;
    }

    &-price {
      display: block;
      font-size: 20px;
      font-family: @second-font;
      line-height: 26px;
      margin-bottom: 10px;
      font-weight: 800;
    }

    &-paragraph, &-paragraph p {
      margin: 20px 0;
      font-size: 16px;
      display: block;
      min-height: 240px;
      text-align: center;

      @media @mobile {
        min-height: 0;
      }

    }

    &:nth-child(4) {
      margin-right: 0;
    }

    &:nth-child(2) {

      @media @tablet {
        margin-right: 0;
      }

    }

    .smaller {
      background-size: 600px auto;
      background-position: -40px -300px;
      width: 166px;
      height: 50px;
      line-height: 50px;
      font-size: 20px;
      text-transform: uppercase;
      font-family: @second-font;
      font-weight: 800;
      color: @colored;

      &:hover {
        color: @colored;
      }
    }

  }

}