Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 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 | } |