frontend.css 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. /**
  2. * Pricing Table Columns
  3. *
  4. * Column layouts for pricing table
  5. */
  6. .fl-pricing-table:before,
  7. .fl-pricing-table:after {
  8. display: table;
  9. content: " ";
  10. }
  11. .fl-pricing-table:after {
  12. clear: both;
  13. }
  14. .fl-pricing-table {
  15. margin-left: auto;
  16. margin-right: auto;
  17. zoom:1;
  18. }
  19. .fl-pricing-table [class^='fl-pricing-table-col-'] {
  20. float: left;
  21. position: relative;
  22. min-height: 1px;
  23. }
  24. .fl-pricing-table .fl-pricing-table-col-8 { width: 12.5%; }
  25. .fl-pricing-table .fl-pricing-table-col-7 { width: 14.28%; }
  26. .fl-pricing-table .fl-pricing-table-col-6 { width: 16.66%; }
  27. .fl-pricing-table .fl-pricing-table-col-5 { width: 20%; }
  28. .fl-pricing-table .fl-pricing-table-col-4 { width: 25%; }
  29. .fl-pricing-table .fl-pricing-table-col-3 { width: 33.33%; }
  30. .fl-pricing-table .fl-pricing-table-col-2 { width: 50%; }
  31. .fl-pricing-table .fl-pricing-table-col-1 { width: 100%; }
  32. /**
  33. * Pricing Box Spacing
  34. *
  35. * medium, large, and None
  36. */
  37. /*medium*/
  38. .fl-pricing-table.fl-pricing-table-spacing-tight,
  39. .fl-pricing-table.fl-pricing-table-spacing-medium {
  40. margin-left: -6px;
  41. margin-right: -6px;
  42. }
  43. .fl-pricing-table.fl-pricing-table-spacing-tight [class^='fl-pricing-table-col-'],
  44. .fl-pricing-table.fl-pricing-table-spacing-medium [class^='fl-pricing-table-col-'] {
  45. padding-right: 6px;
  46. padding-left: 6px;
  47. }
  48. /*large*/
  49. .fl-pricing-table.fl-pricing-table-spacing-wide,
  50. .fl-pricing-table.fl-pricing-table-spacing-large {
  51. margin-left: -12px;
  52. margin-right: -12px;
  53. }
  54. .fl-pricing-table.fl-pricing-table-spacing-wide [class^='fl-pricing-table-col-'],
  55. .fl-pricing-table.fl-pricing-table-spacing-large [class^='fl-pricing-table-col-'] {
  56. padding-right: 12px;
  57. padding-left: 12px;
  58. }
  59. /*None*/
  60. .fl-pricing-table.fl-pricing-table-spacing-none {
  61. margin-left: 0;
  62. margin-right: 0;
  63. }
  64. .fl-pricing-table.fl-pricing-table-spacing-none [class^='fl-pricing-table-col-'] {
  65. padding-right: 0;
  66. padding-left: 0;
  67. }
  68. /*Fix noneing borders*/
  69. .fl-pricing-table.fl-pricing-table-spacing-none.fl-pricing-table-border-large [class^='fl-pricing-table-col-'] .fl-pricing-table-column,
  70. .fl-pricing-table.fl-pricing-table-spacing-none.fl-pricing-table-border-medium [class^='fl-pricing-table-col-'] .fl-pricing-table-column {
  71. border-right-width: 0 !important;
  72. }
  73. .fl-pricing-table.fl-pricing-table-spacing-none.fl-pricing-table-border-large [class^='fl-pricing-table-col-']:last-child .fl-pricing-table-column,
  74. .fl-pricing-table.fl-pricing-table-spacing-none.fl-pricing-table-border-medium [class^='fl-pricing-table-col-']:last-child .fl-pricing-table-column {
  75. border-right-width: 1px !important;
  76. }
  77. .fl-pricing-table.fl-pricing-table-spacing-none.fl-pricing-table-border-small [class^='fl-pricing-table-col-'] .fl-pricing-table-inner-wrap {
  78. /*border-right-width: 0 !important;*/
  79. margin-right: -1px !important;
  80. }
  81. .fl-pricing-table.fl-pricing-table-spacing-none.fl-pricing-table-border-small [class^='fl-pricing-table-col-']:last-child .fl-pricing-table-inner-wrap {
  82. /*border-right-width: 1px !important;*/
  83. margin-right: 0 !important;
  84. }
  85. /**
  86. * Pricing Boxes
  87. *
  88. * The actual pricing boxes
  89. */
  90. .fl-pricing-table .fl-pricing-table-column {
  91. text-align: center;
  92. }
  93. .fl-pricing-table .fl-pricing-table-inner-wrap {
  94. border: 1px solid;
  95. }
  96. .fl-pricing-table .fl-pricing-table-column .fl-pricing-table-price {
  97. padding: 13px 0;
  98. position: relative;
  99. z-index: 2;
  100. letter-spacing: -2px;
  101. }
  102. .fl-pricing-table .fl-pricing-table-column h2 {
  103. margin: 0;
  104. padding: 20px;
  105. }
  106. .fl-pricing-table .fl-pricing-table-column .fl-pricing-table-duration {
  107. font-size: .44em;
  108. display: inline-block;
  109. position: relative;
  110. bottom: 4px;
  111. letter-spacing: 0px;
  112. opacity: 0.85;
  113. }
  114. .fl-pricing-table .fl-pricing-table-features {
  115. margin: 20px 15px;
  116. list-style-type: none;
  117. padding: 0;
  118. }
  119. .fl-pricing-table .fl-pricing-table-features li {
  120. border-bottom: 1px solid rgba(0,0,0,0.15);
  121. text-align: left;
  122. padding: 13px 4px;
  123. }
  124. .fl-pricing-table .fl-pricing-table-features li:last-child {
  125. border-bottom: 0;
  126. }
  127. .fl-pricing-table a.vamtam-button {
  128. margin: 0 15px;
  129. }
  130. .fl-pricing-table a.vamtam-button .vamtam-button-text {
  131. line-height: 18px;
  132. }
  133. /*Curvy Boxes*/
  134. .fl-pricing-table.fl-pricing-table-rounded .fl-pricing-table-column {
  135. border-radius: 6px;
  136. }
  137. .fl-pricing-table.fl-pricing-table-rounded .fl-pricing-table-inner-wrap {
  138. border-radius: 3px;
  139. }
  140. /**
  141. * Pricing Box Borders
  142. *
  143. * Large, Medium, Small
  144. */
  145. /*Large*/
  146. .fl-pricing-table.fl-pricing-table-border-large .fl-pricing-table-inner-wrap {
  147. border-width: 15px;
  148. }
  149. .fl-pricing-table.fl-pricing-table-border-large .fl-pricing-table-column .fl-pricing-table-price {
  150. margin: 0 -15px;
  151. }
  152. /*adjust for no spacing*/
  153. .fl-pricing-table.fl-pricing-table-border-large.fl-pricing-table-spacing-none .fl-pricing-table-column .fl-pricing-table-price {
  154. margin: 0 -14px;
  155. }
  156. /*Medium*/
  157. .fl-pricing-table.fl-pricing-table-border-medium .fl-pricing-table-inner-wrap {
  158. border-width: 10px;
  159. }
  160. .fl-pricing-table.fl-pricing-table-border-medium .fl-pricing-table-column .fl-pricing-table-price {
  161. margin: 0 -10px;
  162. }
  163. /*Small Border*/
  164. .fl-pricing-table.fl-pricing-table-border-small .fl-pricing-table-column {
  165. border: 0 !important;
  166. }
  167. .fl-pricing-table.fl-pricing-table-border-small .fl-pricing-table-inner-wrap {
  168. margin: 0px;
  169. }
  170. .fl-pricing-table.fl-pricing-table-border-small .fl-pricing-table-column .fl-pricing-table-price {
  171. margin: 0 -1px;
  172. }