core/skin/p007.yurecnt.ru/scss/_pricing.scss

// 
//  peicing
// 

/*------ App pricing ------*/
.app-pricing {
  .gym-pricing-box {
    border: 1px solid rgba($muted, 0.1);
    border-radius: 6px 6px 0px 0px;
    .gym-pricing-title {
      border-bottom: 1px solid rgba($muted, 0.1);
      h4 {
        font-weight: 600;
        letter-spacing: 2px;
      }
    }
    .gym-month-lebal {
      p {
        background-color: $gray-200;
        display: inline-block;
        padding: 5px 30px;
        border-radius: 3px;
        font-size: 12px;
        text-transform: uppercase;
        font-weight: 600;
        position: relative;
        bottom: 16px;
      }
    }
  }
  .gym-pricing-box-active {
    border: 1px solid rgba($muted, 0.1);
    border-radius: 6px 6px 0px 0px;
    .gym-pricing-title-active {
      border-radius: 6px 6px 0px 0px;
      border-bottom: 1px solid $primary;
      font-weight: 600;
      letter-spacing: 2px;
    }
    .gym-pricing-plan {
      span {
        position: relative;
        bottom: 20px;
      }
    }
    .gym-month-lebal {
      p {
        background-color: $gray-200;
        display: inline-block;
        padding: 5px 30px;
        border-radius: 3px;
        font-size: 12px;
        text-transform: uppercase;
        font-weight: 600;
        position: relative;
        bottom: 16px;
      }
    }
  }
}




/*------ BOOK PRICING ------*/

.book-pricing {
  .book-pricing-box {
    border: 1px solid $gray-200;
    .book-pricing-title {
      font-size: 18px;
    }
    .book-pricing-price {
      font-size: 30px;
      sup {
        position: relative;
        top: -20px;
      }
    }
  }
  .book-pricing-features {
    p {
      border-bottom: 1px solid $gray-200;
      padding: 20px;
    }
  }
}

/*------ BUSINESS PRICING ------*/

.business-pricing {
  .business-pricing-box {
    border: 1px solid $gray-200;
    border-radius: 6px;
    position: relative;
    .business-pricing-icon  {
      i {
        font-size: 40px;
      }
    }
    .business-pricing-title {
      font-size: 20px;
    }
    .business-pricing-features {
      p {
        border-bottom: 1px solid $gray-200;
        padding: 14px 14px;
      }
      p:last-child {
        border-bottom: none;
      }
    }
  }
  .business-pricing-box-active {
    border: 1px solid $primary;
    border-radius: 6px;
    position: relative;
    .business-pricing-lable {
      position: absolute;
      display: block;
      top: 0;
      right: 0px;
      .business-lable-name {
        position: relative;
        background-color: $primary;
        color: $white;
        font-size: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 40px;
        width: 100px;
        top: 22px;
        &:after {
          content: "";
          border-top: 20px solid $primary;
          border-bottom: 20px solid $primary;
          border-right: 11px solid transparent;
          border-left: 11px solid transparent;
          position: absolute;
          left: -11px;
          top: 0;
        }
      }
    }
  }
}

/*------ CONSTRUCTION-PRICING ------*/

.construction-pricing-box {
  border: 1px solid $gray-200;
  border-radius: 6px;
  .construction-pricing-standard {
    border-top: 4px double $gray-200;
    border-bottom: 4px double $gray-200;
  }
  .construction-pricing-standard-active {
    border-top: 4px double $primary;
    border-bottom: 4px double $primary;
  }
  .construction-pricing-img {
    img {
      width: 140px;
      height: 140px;
    }
  }
}

/*------ PHOTOGRAPHER PRICING ------*/

.photographer-pricing {
  .photographer-pricing-box {
    border: 1px solid $gray-200;
    .pricing-plan {
      position: relative;

      &:after {
        content: '';
        width: 30px;
        position: absolute;
        left: -45px;
        bottom: 10px;
        display: block;
        border-bottom: 2px solid $primary;
      }
    }
  }
  .photographer-pricing-box-active {
    border: 1px solid $primary;
  }
  .photographer-pricing-icon {
    i {
      font-size: 35px;
    }
  }
  .photographer-desc {
    max-width: 700px;
    margin: 0 auto;
  }
}

/*------ SOFTWERE-PRICING ------*/

.softwere-pricing {
  .softwere-pricing-box {
    border: 1px solid $gray-200;
    .softwere-pricing-plan {
      h3 {
        font-size: 40px;
        sup {
          position: relative;
          top: -20px;
          font-size: 18px;
        }
        span {
          font-size: 15px;
        }
      }
    }
  }
}