.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; }
}
