.demo{ background-color: #e7e7e7; } .pricingTable{ font-family: 'Lato', sans-serif; text-align: center; position: relative; } .pricingTable .pricingTable-header{ color: #fff; padding: 60px 5px 30px; position: relative; z-index: 1; } .pricingTable .pricingTable-header:before{ content: ''; background: linear-gradient(45deg,#e58e26 59%,#fa983a 60%); height: 250px; width: 250px; border-radius: 50%; transform: translateX(-50%); position: absolute; left: 50%; top: 0; z-index: -1; } .pricingTable .title{ font-size: 30px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; margin: 0; } .pricingTable .pricing-content{ background-color: #fff; padding: 10px; border-radius: 15px; position: relative; z-index: 1; } .pricingTable .rating{ padding: 5px 0 15px; margin: 0 0 10px 0; border-bottom: 3px dashed #e7e7e7; list-style: none; } .pricingTable .rating li{ color: #e58e26; font-size: 25px; } .pricingTable .price-value{ color: #fff; background: #fa983a; padding: 5px 10px; margin: 0 0 10px; border-radius: 10px; } .pricingTable .amount{ font-size: 40px; font-weight: 700; line-height: 40px; margin-bottom: 3px; display: inline-block; } .pricingTable .amount-sm{ font-size: 20px; font-weight: 700; vertical-align: top; } .pricingTable .duration{ color: rgba(255,255,255,0.8); font-size: 14px; font-weight: 600; text-transform: uppercase; display: block; } .pricingTable .pricing-content .inner-content{ padding: 0; margin: 0; list-style: none; } .pricingTable .pricing-content .inner-content li{ color: #222; font-size: 17px; font-weight: 600; letter-spacing: 1px; line-height: 40px; text-transform: uppercase; border-top: 3px dashed #e7e7e7; } .pricingTable .pricingTable-signup a{ color: #fff; background: linear-gradient(14deg,#e58e26 49%,#fa983a 50%); font-size: 25px; font-weight: 700; line-height: 45px; text-transform: uppercase; width: 90%; padding: 8px 10px; margin: 0 auto; border-radius: 0 0 10px 10px; display: block; transition: all 0.3s; } .pricingTable .pricingTable-signup a:hover{ letter-spacing: 3px; text-shadow: -2px 2px 1px #000; } .pricingTable.pink .pricingTable-header:before{ background: linear-gradient(45deg,#d3213c 59%,#f53b57 60%); } .pricingTable.pink .rating li{ color: #d3213c; } .pricingTable.pink .price-value{ background-color: #f53b57; } .pricingTable.pink .pricingTable-signup a{ background:linear-gradient(14deg,#d3213c 49%,#f53b57 50%); } .pricingTable.blue .pricingTable-header:before{ background: linear-gradient(45deg,#25739d 59%,#3da5d9 60%); } .pricingTable.blue .rating li{ color: #25739d; } .pricingTable.blue .price-value{ background-color: #3da5d9; } .pricingTable.blue .pricingTable-signup a{ background: linear-gradient(14deg,#25739d 49%,#3da5d9 50%); } @media only screen and (max-width: 990px){ .pricingTable{ margin: 0 0 40px; } }