public/assets/css/pricing-table.css

   1 /***
   2 Pricing table
   3 ***/
   4 .pricing {
   5   position: relative;
   6   margin-bottom: 15px;
   7   border: 3px solid #eee;
   8 }
   9
  10 .pricing-active {
  11   border: 3px solid #36d7ac;
  12   margin-top: -10px;
  13   box-shadow: 7px 7px rgba(54, 215, 172, 0.2);
  14 }
  15
  16 .pricing:hover {
  17   border: 3px solid #36d7ac;
  18 }
  19
  20 .pricing:hover h4 {
  21   color: #36d7ac;
  22 }
  23
  24 .pricing-head {
  25   text-align: center;
  26 }
  27
  28 .pricing-head h3,
  29 .pricing-head h4 {
  30   margin: 0;
  31   line-height: normal;
  32 }
  33
  34 .pricing-head h3 span,
  35 .pricing-head h4 span {
  36   display: block;
  37   margin-top: 5px;
  38   font-size: 14px;
  39   font-style: italic;
  40 }
  41
  42 .pricing-head h3 {
  43   font-weight: 300;
  44   color: #fafafa;
  45   padding: 12px 0;
  46   font-size: 27px;
  47   background: #36d7ac;
  48   border-bottom: solid 1px #41b91c;
  49 }
  50
  51 .pricing-head h4 {
  52   color: #bac39f;
  53   padding: 5px 0;
  54   font-size: 54px;
  55   font-weight: 300;
  56   background: #fbfef2;
  57   border-bottom: solid 1px #f5f9e7;
  58 }
  59
  60 .pricing-head-active h4 {
  61   color: #36d7ac;
  62 }
  63
  64 .pricing-head h4 i {
  65   top: -8px;
  66   font-size: 28px;
  67   font-style: normal;
  68   position: relative;
  69 }
  70
  71 .pricing-head h4 span {
  72   top: -10px;
  73   font-size: 14px;
  74   font-style: normal;
  75   position: relative;
  76 }
  77
  78 /*Pricing Content*/
  79 .pricing-content li {
  80   color: #888;
  81   font-size: 12px;
  82   padding: 7px 15px;
  83   border-bottom: solid 1px #f5f9e7;
  84 }
  85
  86 .pricing-content li i {
  87   top: 2px;
  88   color: #36d7ac;
  89   font-size: 16px;
  90   margin-right: 5px;
  91   position: relative;
  92 }
  93
  94 /*Pricing Footer*/
  95 .pricing-footer {
  96   color: #777;
  97   font-size: 11px;
  98   line-height: 17px;
  99   text-align: center;
 100   padding: 0 20px 19px;
 101 }
 102
 103 /*Priceing Active*/
 104 .price-active,
 105 .pricing:hover {
 106   z-index: 9;
 107 }
 108
 109 .price-active h4 {
 110   color: #36d7ac;
 111 }
 112
 113 .no-space-pricing .pricing:hover {
 114   transition: box-shadow 0.2s ease-in-out;
 115 }
 116
 117 .no-space-pricing .price-active .pricing-head h4,
 118 .no-space-pricing .pricing:hover .pricing-head h4 {
 119   color: #36d7ac;
 120   padding: 15px 0;
 121   font-size: 80px;
 122   transition: color 0.5s ease-in-out;
 123 }