/home/blackyak/www/wordpress/wp-content/themes/travivu/assets/sass/template/elements/_pricing.scss
.gsc-pricing{
transition: all 0.35s;
&.style-1{
background: $white;
padding: 55px 35px 60px;
position: relative;
box-shadow: 0px 10px 30px 0px rgba(65, 80, 138, 0.1);
@include media-breakpoint-down(xl){
padding: 55px 20px 60px;
}
@include media-breakpoint-down(lg){
padding: 60px 15px 40px;
max-width: 500px;
margin: 0 auto;
}
@include media-breakpoint-down(md){
padding-left: 15px;
padding-right: 15px;
}
.content-inner{
max-width: 260px;
margin: 0 auto;
.sub-title{
font-size: 13px;
text-transform: uppercase;
padding: 0 16px;
line-height: 26px;
border-radius: 30px;
background: $theme-color;
display: inline-block;
color: $white;
font-weight: 500;
position: absolute;
top: 15px;
right: 15px;
letter-spacing: 1px;
}
.plan-price{
padding-bottom: 15px;
color: $black;
.plan-price-inner{
.currency{
font-size: 22px;
position: relative;
top: -20px;
}
.price{
line-height: 1;
margin-bottom: 10px;
font-weight: 400;
font-size: 60px;
@include media-breakpoint-down(lg){
font-size: 45px;
}
@include media-breakpoint-down(md){
font-size: 38px;
}
}
.interval{
font-size: 11px;
text-transform: uppercase;
font-weight: 500;
}
}
}
.title{
color: $theme-color;
font-size: 15px;
font-weight: 700;
margin: 0 0 18px;
letter-spacing: 5px;
text-transform: uppercase;
}
.desc{
font-size: 17px;
font-weight: 500;
line-height: 24px;
}
.plan-list{
list-style-type: none;
padding: 0;
margin: 25px 0 8px;
font-size: 17px;
@include media-breakpoint-down(lg){
font-size: 15px;
}
li{
position: relative;
padding: 10px 0 10px 30px;
line-height: 24px;
@include media-breakpoint-down(lg){
padding: 6px 0 6px 26px;
}
&:after{
content: '\f00c';
font-family: $font-icon-awesome;
position: absolute;
top: 8px;
left: 0;
font-size: 15px;
color: $theme-color;
z-index: 1;
font-weight: 900;
@include media-breakpoint-down(lg){
font-size: 13px;
}
}
&.no-active{
opacity: 0.38;
}
}
}
.pricing-action{
padding-top: 20px;
}
}
&:hover{
box-shadow: 0px 20px 20px 0px rgba(63, 56, 54, 0.04);
}
&.active-yes{
background: $theme-color;
.content-inner{
.sub-title{
color: $theme-color;
background: $white;
}
.title{
color: $white;
}
.plan-price{
color: $white;
}
.desc{
color: $white;
}
.plan-list{
li{
color: $white;
&:after{
color: $white;
}
&.no-active{
opacity: 0.5;
}
}
}
.pricing-action{
a{
background: $white;
color: $theme-color;
}
}
}
}
}
}