/**
 * WEBSITE: https://themefisher.com
 * TWITTER: https://twitter.com/themefisher
 * FACEBOOK: https://www.facebook.com/themefisher
 * GITHUB: https://github.com/themefisher/
 */

 .demo {
  padding: 30px 0
}

a {
  text-decoration: none;
}

.pricingTable {
  padding: 25px 10px 70px;
  margin: 0 15px;
  text-align: center;
  z-index: 1;
  position: relative
}

.pricingTable:after,
.pricingTable:before {
  content: "";
  position: absolute;
  left: 0
}

.pricingTable .price-value .amount {
  display: inline-block;
  font-size: 50px;
  font-weight: 700
}

.pricingTable .price-value .month {
  display: block;
  font-size: 20px;
  font-weight: 500;
  line-height: 10px;
  text-transform: uppercase
}

.pricingTable:before {
  width: 100%;
  height: 100%;
  background: #fff;
  top: 0;
  z-index: -1;
  -webkit-clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0 85%, 0 0);
  clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0 85%, 0 0)
}

.pricingTable:after {
  width: 70px;
  height: 30px;
  background: #d86e00;
  margin: 0 auto;
  top: 70px;
  right: 0;
  -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
  clip-path: polygon(50% 100%, 0 0, 100% 0)
}

.pricingTable .title {
  padding: 15px 0;
  margin: 0 -25px 30px;
  background: #d86e00;
  font-size: 25px;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  position: relative
}

.pricingTable .title:after,
.pricingTable .title:before {
  border-top: 15px solid #cd6a03;
  border-bottom: 15px solid transparent;
  position: absolute;
  bottom: -30px;
  content: ""
}

.pricingTable .title:before {
  border-left: 15px solid transparent;
  left: 0
}

.pricingTable .title:after {
  border-right: 15px solid transparent;
  right: 0
}

.pricingTable .price-value {
  margin-bottom: 25px;
  color: #d86e00
}

.pricingTable .currency {
  display: inline-block;
  font-size: 30px;
  vertical-align: top;
  margin-top: 8px
}

.price-value .amount {
  display: inline-block;
  font-size: 50px;
  font-weight: 700
}

.price-value .month {
  display: block;
  font-size: 20px;
  font-weight: 500;
  line-height: 10px;
  text-transform: uppercase
}

.pricingTable .pricing-content {
  padding: 0;
  margin: 0 0 25px;
  list-style: none;
  border-top: 1px solid #8f8f8f;
  border-bottom: 1px solid #8f8f8f
}

.pricingTable .pricing-content li {
  font-size: 17px;
  color: #8f8f8f;
  line-height: 55px
}

.pricingTable .pricingTable-signup {
  display: inline-block;
  padding: 10px 30px;
  background: #d86e00;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  position: relative;
  transition: all .7s ease 0s
}

.pricingTable .pricingTable-signup:before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translate(0, 100%);
  transition: all .6s ease-in-out 0s
}

.pricingTable .pricingTable-signup:hover:before {
  opacity: 1;
  transform: translate(0, -100%)
}

.pricingTable.blue .pricingTable-signup,
.pricingTable.blue .title,
.pricingTable.blue:after {
  background: #e6d601
}

.pricingTable.blue .title:after,
.pricingTable.blue .title:before {
  border-top: 15px solid #b6aa05
}

.pricingTable.blue .price-value {
  color: #e6d601
}

.pricingTable.pink .pricingTable-signup,
.pricingTable.pink .title,
.pricingTable.pink:after {
  background: #b8b8b8
}

.pricingTable.pink .price-value {
  color: #b8b8b8
}

.pricingTable.pink .title:after,
.pricingTable.pink .title:before {
  border-top: 15px solid #949493
}

@media only screen and (max-width:990px) {
  .pricingTable {
      margin-bottom: 30px
  }
}