.pricingTable{ font-family: 'Lato', sans-serif; text-align: center; margin: 0 25px; } .pricingTable .pricingTable-header{ color: #fff; } .pricingTable .price-value{ background-color: #fff; font-size: 45px; line-height: 40px; padding: 60px 20px 5px; position: relative; clip-path: polygon(50% 0%, 100% 45%, 100% 100%, 0 100%, 0 45%); } .pricingTable .price-value:before{ content: ''; background: linear-gradient(to right,#fe8c00,#f83600); height: 100%; width: 100%; transform: scale(0.92,0.91); transform-origin: bottom center; position: absolute; left: 0; bottom: 0; z-index: -1; clip-path: polygon(50% 1%, 100% 47%, 100% 100%, 0 100%, 0 47%); } .pricingTable .duration{ font-size: 16px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; display: block; } .pricingTable .title{ background: linear-gradient(to bottom right,#fe8c00 0%,#f83600 100%); font-size: 40px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; padding: 7px; margin: 0 -25px; box-shadow: 0 0 10px rgba(0,0,0,0.2) inset; clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%); } .pricingTable .pricing-content{ background-color: #fff; padding: 25px 10px; border-radius: 0 0 30px 30px; } .pricingTable .pricing-content .inner-content{ color: #444; font-size: 17px; font-weight: 600; line-height: 40px; letter-spacing: 1px; padding: 0; margin: 0 0 15px 0; list-style: none; } .pricingTable .pricing-content .inner-content li{ background-color: #E1E1E1; } .pricingTable .pricing-content .inner-content li:nth-child(even){ background-color: transparent; } .pricingTable .pricingTable-signup a{ color: #fff; background: linear-gradient(to bottom right,#fe8c00 0%,#f83600 100%); font-size: 23px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; width: 150px; padding: 5px 5px; margin: 0 auto; display: block; clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%); transition: all 0.3s; } .pricingTable .pricingTable-signup a:hover{ text-shadow: 3px 3px 0 rgba(0,0,0,0.7); } .pricingTable.blue .price-value:before{ background: linear-gradient(to bottom right,#10e0fe,#0f13c4); } .pricingTable.blue .title, .pricingTable.blue .pricingTable-signup a{ background: linear-gradient(to right,#10e0fe,#0f13c4); } .pricingTable.purple .price-value:before{ background: linear-gradient(to bottom right,#d923bd 0%,#5023d9 100%); } .pricingTable.purple .title, .pricingTable.purple .pricingTable-signup a{ background: linear-gradient(to right,#d923bd 0%,#5023d9 100%); } @media only screen and (max-width: 990px){ .pricingTable{ margin: 0 25px 40px; } }