Subversion-Projekte lars-tiefland.ci

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
776 lars 1
/* Cubic Bezier Transition */
2
/***
3
Pricing Table 1
4
***/
5
.pricing-content-1 {
6
  background-color: #fff; }
7
  .pricing-content-1:before, .pricing-content-1:after {
8
    content: " ";
9
    display: table; }
10
  .pricing-content-1:after {
11
    clear: both; }
12
  .pricing-content-1 .arrow-down {
13
    width: 0;
14
    height: 0;
15
    border-left: 15px solid transparent;
16
    border-right: 15px solid transparent;
17
    border-top: 15px solid;
18
    margin: auto; }
19
    .pricing-content-1 .arrow-down.arrow-blue {
20
      border-top-color: #3598DC; }
21
    .pricing-content-1 .arrow-down.arrow-green {
22
      border-top-color: #32C5D2; }
23
    .pricing-content-1 .arrow-down.arrow-dark {
24
      border-top-color: #2F353B; }
25
    .pricing-content-1 .arrow-down.arrow-grey {
26
      border-top-color: #f7f9fb; }
27
  .pricing-content-1 .price-ribbon {
28
    position: absolute;
29
    top: 75px;
30
    right: -4px;
31
    width: 90px;
32
    font-size: 14px;
33
    text-transform: uppercase;
34
    font-weight: 300;
35
    padding: 6px 20px 6px 15px;
36
    color: #fff;
37
    background-color: #D91E18;
38
    text-shadow: 0px 1px 2px #bbb;
39
    -webkit-box-shadow: 0px 2px 4px #888;
40
    -moz-box-shadow: 0px 2px 4px #888;
41
    box-shadow: 0px 2px 4px #888; }
42
    .pricing-content-1 .price-ribbon:after {
43
      content: ' ';
44
      position: absolute;
45
      width: 0;
46
      height: 0;
47
      right: 0px;
48
      top: 100%;
49
      border-width: 5px 10px;
50
      border-style: solid;
51
      border-color: #64120f transparent transparent #64120f; }
52
  .pricing-content-1 .pricing-title {
53
    border-bottom: 1px solid;
54
    border-color: #fff; }
55
    .pricing-content-1 .pricing-title > h1 {
56
      margin: 20px 0; }
57
  .pricing-content-1 .price-column-container {
58
    text-align: center;
59
    margin: 0;
60
    background-color: #fff; }
61
    .pricing-content-1 .price-column-container.border-active {
62
      border: 1px solid #e5e9ee; }
63
    .pricing-content-1 .price-column-container:first-child {
64
      margin-left: 0; }
65
    .pricing-content-1 .price-column-container:last-child {
66
      margin-right: 0; }
67
  .pricing-content-1 .price-table-head {
68
    color: #fff;
69
    padding: 20px 0; }
70
    .pricing-content-1 .price-table-head h2 {
71
      font-size: 26px; }
72
    .pricing-content-1 .price-table-head.price-1 {
73
      background-color: #3598DC; }
74
    .pricing-content-1 .price-table-head.price-2 {
75
      background-color: #32C5D2; }
76
    .pricing-content-1 .price-table-head.price-3 {
77
      background-color: #2F353B; }
78
  .pricing-content-1 .price-table-pricing > h3 {
79
    font-size: 60px;
80
    position: relative; }
81
    .pricing-content-1 .price-table-pricing > h3 > .price-sign {
82
      font-size: 24px;
83
      position: absolute;
84
      margin-left: -15px; }
85
  .pricing-content-1 .price-table-pricing > p {
86
    margin-top: 0; }
87
  .pricing-content-1 .price-table-content {
88
    background-color: #f7f9fb;
89
    color: #5c6d7e;
90
    font-weight: 600;
91
    font-size: 16px; }
92
    .pricing-content-1 .price-table-content .row {
93
      padding-top: 10px;
94
      padding-bottom: 10px; }
95
      .pricing-content-1 .price-table-content .row i {
96
        color: #6cade6; }
97
      .pricing-content-1 .price-table-content .row:first-child {
98
        padding-top: 20px; }
99
      .pricing-content-1 .price-table-content .row:last-child {
100
        padding-bottom: 20px; }
101
  .pricing-content-1 .price-table-footer {
102
    padding: 20px 0; }
103
    .pricing-content-1 .price-table-footer > .price-button {
104
      font-weight: bold;
105
      padding: 10px 20px; }
106
 
107
@media (max-width: 1024px) {
108
  .pricing-content-1 .mobile-padding {
109
    padding: 0;
110
    margin: 0; }
111
    .pricing-content-1 .mobile-padding > i {
112
      margin-right: 5px; }
113
  .pricing-content-1 .price-table-content {
114
    padding-left: 10px;
115
    padding-right: 10px; } }
116
 
117
@media (max-width: 1024px) {
118
  .pricing-content-1 .mobile-padding {
119
    padding: 0 15px;
120
    margin: 0 -15px; }
121
    .pricing-content-1 .mobile-padding > i {
122
      margin-right: 20px; }
123
  .pricing-content-1 .price-table-content {
124
    padding-left: 15px;
125
    padding-right: 15px; } }
126
 
127
/***
128
Pricing Table 2
129
***/
130
.pricing-content-2 {
131
  background-color: #fff; }
132
  .pricing-content-2 .no-padding {
133
    padding: 0; }
134
  .pricing-content-2 .text-left {
135
    text-align: left; }
136
  .pricing-content-2 .text-right {
137
    text-align: right; }
138
  .pricing-content-2.pricing-bg-dark {
139
    background-color: #2F353B; }
140
  .pricing-content-2 .pricing-title {
141
    border-color: #444; }
142
    .pricing-content-2 .pricing-title > h1 {
143
      color: #fff; }
144
  .pricing-content-2 .pricing-table-container {
145
    padding-top: 40px;
146
    padding-bottom: 40px; }
147
    .pricing-content-2 .pricing-table-container .padding-fix {
148
      padding-left: 15px;
149
      padding-right: 15px; }
150
    .pricing-content-2 .pricing-table-container .price-column-container {
151
      background-color: #fff;
152
      margin: 30px 0;
153
      padding: 60px 0;
154
      text-align: center;
155
      border-bottom: 4px solid #ccc; }
156
      .pricing-content-2 .pricing-table-container .price-column-container.border-right {
157
        border-right: 1px solid #ccc; }
158
      .pricing-content-2 .pricing-table-container .price-column-container.border-left {
159
        border-left: 1px solid #ccc; }
160
      .pricing-content-2 .pricing-table-container .price-column-container.border-top {
161
        border-top: 1px solid #ccc; }
162
      .pricing-content-2 .pricing-table-container .price-column-container.featured-price {
163
        margin: 0;
164
        padding: 89px 0;
165
        border: 1px solid;
166
        border-bottom: 4px solid;
167
        border-color: #ccc; }
168
        .pricing-content-2 .pricing-table-container .price-column-container.featured-price > .price-feature-label {
169
          position: absolute;
170
          top: 0;
171
          left: 50%;
172
          display: inline-block;
173
          width: 110px;
174
          margin: 0 0 0 -60px;
175
          padding: 7px 15px;
176
          color: #fff;
177
          font-weight: 300; }
178
      .pricing-content-2 .pricing-table-container .price-column-container > .price-table-head > h2 {
179
        letter-spacing: 1px;
180
        font-weight: 600;
181
        font-size: 18px;
182
        color: #ACB5C3; }
183
        .pricing-content-2 .pricing-table-container .price-column-container > .price-table-head > h2.opt-pricing-5 {
184
          padding: 7px 15px;
185
          display: inline;
186
          margin: 0 auto 20px auto;
187
          font-size: 16px; }
188
      .pricing-content-2 .pricing-table-container .price-column-container > .price-table-pricing > h3 {
189
        font-size: 60px;
190
        position: relative;
191
        font-weight: 600; }
192
        .pricing-content-2 .pricing-table-container .price-column-container > .price-table-pricing > h3 > .price-sign {
193
          font-size: 24px;
194
          position: absolute;
195
          margin-left: -15px; }
196
      .pricing-content-2 .pricing-table-container .price-column-container > .price-table-pricing > p {
197
        margin-top: 0; }
198
      .pricing-content-2 .pricing-table-container .price-column-container > .price-table-content {
199
        color: #333;
200
        font-weight: 300;
201
        font-size: 16px; }
202
        .pricing-content-2 .pricing-table-container .price-column-container > .price-table-content .row {
203
          padding-top: 20px;
204
          padding-bottom: 20px;
205
          border-bottom: 1px solid;
206
          border-color: #eee; }
207
          .pricing-content-2 .pricing-table-container .price-column-container > .price-table-content .row:first-child {
208
            border-top: 1px solid;
209
            border-color: #eee; }
210
      .pricing-content-2 .pricing-table-container .price-column-container > .price-table-footer {
211
        padding: 40px 0 0 0; }
212
        .pricing-content-2 .pricing-table-container .price-column-container > .price-table-footer > .featured-price {
213
          font-size: 20px;
214
          font-weight: 300;
215
          border-bottom: 3px solid #3FABA4; }
216
 
217
@media (max-width: 991px) {
218
  .pricing-content-2 .price-column-container {
219
    border-left: 1px solid;
220
    border-right: 1px solid;
221
    border-color: #ccc; } }