.planHead2{ font-size: 40px; font-weight: 400; text-align: center; float: left; margin-top: 60px; width:100%; }
.planHead2 strong{ font-weight: 700;}
.planHead2 span{display: block; font-size: 36px; background: url("https://images.livemint.com/img/static/mainTxtSeparator.svg") no-repeat 0 0; margin-top: 10px; padding-top: 10px;}
.festive{ float: left; margin: 10px 40px 0 0;}
.planArea { text-align: center;}
.planBox{ position: relative;}
.planBox a{width: 140px;}
.planBox .duration{ font-size: 20px; background: none; padding: 0; margin: 0;}
.planBox .discount{ margin-bottom: 11px;}
.planBox .offerPrice{color: #757575; text-decoration: line-through; font-size: 16px;}
.planBox .offerPrice:before{ display: none;}
.planBox .price{line-height: 100%; padding: 10px 0 0;}
.planBox.best .discount{ color: #af272d;}
.planBox .discount.discount2{ width: 55px; height: 55px; margin: 15px auto; padding-top: 10px;    box-sizing: border-box;    line-height: 120%; text-align: center; background: #af272d; border-radius: 50%; color: #fff;}
.planBox .discount.discount2 span strong{ display: block; }
.planBox .deal{display: none;}   
.planBox.best{ margin-top: 10px;}
.planBox.best .deal{display: block; position: absolute; top: -45px; left: 75px; color: #fff; line-height: 28px; font-size: 14px; border-radius: 6px; font-weight: 700; background: #180000; width: 86px; height: 29px;}
.planBox.active{border: solid 1px #180000;}     
@media (max-width:1166px) and (min-width: 1024px){
    .spltxt{padding: 0;}
    .festive{width: 160px; margin:20px 20px 0 0;}
    .planHead2{ margin-top: 20px;}
}
@media (max-width:999px) and (min-width: 768px)  {
    .festive{width: 130px; margin:5px 20px 0 0;}
    .planHead2{width: calc(100% - 150px); font-size: 32px; margin: 10px 0 0;}
    .planHead2 span{font-size: 28px;}
}
@media (max-width: 767px){
    .festive{width: 110px; margin:0 20px 0 0;}
    .planHead2{width: 100%; font-size: 20px; margin: 0; padding: 20px 0; text-align:center;}
    .planHead2 span{font-size: 18px;}
    .planBox .discount{top:38px}
    .planBox .discount.discount2{left:unset; right: 0; top: unset;}
    .planBox .price{top: 4px; right: 75px;}
    .planBox .offerPrice{font-size: 14px; right: 75px;}
    .planBox .discount.discount2{width: 44px; height: 44px; padding-top: 7px; right: 15px; top: -7px;}
    .planBox.best .deal{width: 70px; height: 20px; top: -9px; left: 17px; font-size: 12px; line-height: 20px;}
    a.subsBtn{font-weight: 700;}
}
@media (max-width: 424px){
    .festive{width: 110px; margin:20px 20px 0 0;}
    .planHead2{ margin-top: 30px;}
}
@media (max-width: 375px){
    .festive{width: 110px; margin:0 20px 0 0;}
    .planHead2{ margin-top: 40px; width:100%; text-align:center;}
}
@media (max-width: 360px){
    .festive{width: 110px; margin:0 20px 0 0;}
    .planHead2{ margin-top: 0;}
    .planHead2 span{margin-top: 6px; padding-top: 6px;}
}
@media (max-width: 320px){
    .festive{width: 100px; margin:0 10px 0 0;}
    .planHead2{ margin-top: 0; font-size: 16px;}
    .planHead2 span{margin-top: 6px; padding-top: 6px; font-size: 14px;}
}