.w-pricing {
display: flex;
flex-wrap: wrap;
position: relative;
}
.w-pricing-item {
flex: 1 1 10px;
text-align: center;
}
.w-pricing-item-h {
display: flex;
flex-direction: column;
height: 100%;
background: var(--color-content-bg-grad);
border-color: var(--color-content-border);
}
.w-pricing-item-header {
padding: 2.5em 1.5em;
}
.w-pricing-item-title {
font-size: 1.2em;
font-weight: 600;
line-height: 1;
margin-bottom: 1em;
}
.w-pricing-item-price {
font-size: 3.5em;
line-height: 1;
font-weight: 300;
}
.w-pricing-item-price small {
display: block;
font-size: 0.9rem;
line-height: 1.5;
font-weight: normal;
margin-top: 0.4em;
}
.w-pricing-item-features {
flex-grow: 1;
list-style-type: none;
padding: 1.5em;
margin: 0;
}
.w-pricing-item-footer {
flex-shrink: 0;
padding-bottom: 2.5em;
}
.l-section.color_primary .w-pricing-item-h,
.l-section.color_secondary .w-pricing-item-h {
border-color: rgba(255,255,255,0.33);
} .w-pricing.style_simple {
padding: 1em 0;
}
.w-pricing.style_simple .w-pricing-item:not(:first-child) {
margin-left: -1px;
}
.w-pricing.style_simple .w-pricing-item-h {
overflow: hidden;
border-width: 1px;
border-style: solid;
}
.w-pricing.style_simple .w-pricing-item:first-child .w-pricing-item-h {
border-top-left-radius: 0.6em;
border-bottom-left-radius: 0.6em;
}
.w-pricing.style_simple .w-pricing-item:last-child .w-pricing-item-h {
border-top-right-radius: 0.6em;
border-bottom-right-radius: 0.6em;
}
.w-pricing.style_simple .w-pricing-item-header {
background: var(--color-content-bg-alt-grad);
}
.l-section.color_primary .w-pricing.style_simple .w-pricing-item-header,
.l-section.color_secondary .w-pricing.style_simple .w-pricing-item-header {
background: rgba(255,255,255,0.15);
}
.w-pricing.style_simple .type_featured {
position: relative;
}
.w-pricing.style_simple .type_featured .w-pricing-item-h {
margin: -1em 0;
height: auto;
border-width: 0;
border-radius: 0.6em;
box-shadow: var(--box-shadow);
}
.w-pricing.style_simple .type_featured .w-pricing-item-header {
padding-top: 3.5em;
background: var(--color-content-primary-grad);
color: #fff;
}
.w-pricing.style_simple .type_featured .w-pricing-item-footer {
padding-bottom: 3.5em;
} .w-pricing.style_cards .w-pricing-item-h {
margin: 4px;
border-radius: 0.2rem;
overflow: hidden;
transition: box-shadow 0.3s;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
}
.no-touch .w-pricing.style_cards .w-pricing-item-h:hover {
box-shadow: var(--box-shadow);
}
.w-pricing.style_cards .w-pricing-item-header {
background: var(--color-content-bg-alt-grad);
}
.w-pricing.style_cards .type_featured .w-pricing-item-header {
background: var(--color-content-primary-grad);
color: #fff;
} .w-pricing.style_flat .w-pricing-item-h {
margin: 1px;
border-radius: 0.6em;
background: var(--color-content-bg-alt-grad);
}
.w-pricing.style_flat .type_featured .w-pricing-item-h {
background: var(--color-content-primary-grad);
color: #fff;
}
.w-pricing.style_flat .w-pricing-item-header {
padding-bottom: 0;
} .color_alternate .w-pricing-item-h {
background: var(--color-alt-content-bg-grad);
border-color: var(--color-alt-content-border);
}
.color_alternate .w-pricing.style_simple .w-pricing-item-header,
.color_alternate .w-pricing.style_cards .w-pricing-item-header,
.color_alternate .w-pricing.style_flat .w-pricing-item-h {
background: var(--color-alt-content-bg-alt-grad);
}
.color_alternate .w-pricing.style_simple .type_featured .w-pricing-item-header,
.color_alternate .w-pricing.style_cards .type_featured .w-pricing-item-header,
.color_alternate .w-pricing.style_flat .type_featured .w-pricing-item-h {
background: var(--color-alt-content-primary-grad);
}
.color_footer-top .w-pricing-item-h {
border-color: var(--color-subfooter-border);
}
.color_footer-bottom .w-pricing-item-h {
border-color: var(--color-footer-border);
} .rounded_none .w-pricing-item-h {
border-radius: 0 !important;
} @media (max-width: 1199px) {
.w-pricing.items_6 .w-pricing-item,
.w-pricing.items_7 .w-pricing-item {
flex: 0 1 33.3333%;
}
}
@media (max-width: 1024px) {
.w-pricing.items_4 .w-pricing-item,
.w-pricing.items_5 .w-pricing-item,
.w-pricing.items_8 .w-pricing-item {
flex: 0 1 50%;
}
}
@media screen and (max-width: 767px) {
.w-pricing {
display: block;
}
.w-pricing-item-h {
margin: 0 0 0.5em !important;
}
.w-pricing.style_simple .w-pricing-item-h {
border-width: 1px !important;
border-radius: 0.6em;
}
}