.mpopular-new .not-hidden {display: block;}
.mpopular-new__nav {font-size: .65em;display: grid;grid-template-columns: repeat(3,1fr);text-align: center;grid-gap: 5px;}
.mpopular-new__nav li {list-style: none;padding: 6px 10px;background-color: #efefef;-webkit-transition: .35s;-o-transition: .35s;transition: .35s;cursor: pointer;}
.mpopular-new__nav li:hover {color: #fff;background-color: #0b77cf;}
.mpopular-new__nav .active {color: #fff;background-color: #0b77cf;}
.mpopular-new__item {margin-top: 15px;padding: 15px 10px;background-color: #fbfbfb;-webkit-box-shadow: 4px 4px 15px rgba(0,0,0,.15);box-shadow: 4px 4px 15px rgba(0,0,0,.15);display: none;font-size: .75em;position: relative;}
.mpopular-new__item h3 {font-size: 1.375em;margin-top: 0;}
.mpopular-new__item h3 img {display: inline-block;width: 18px;}
.mpopular-new__grid {display: grid;grid-template-columns: none;grid-gap: 1rem;}
.mpopular-new__info {max-width: 100%;padding: 15px 0 0 0;position: relative;}
.mpopular-new__info .btn.btn-primary {
    font-size: 1rem;
}
.mpopular-new__info h3 {
    margin-bottom: 20px;
}
.mpopular-new__info .btn-default {
    border: 2px solid #FFD166;
    padding: 0.6rem 2rem;
    color: black;
}
.mpopular-new__info .btn-default:hover {
    background-color: #007bff;
    border-color: #007bff;
    color: white;;
}
.mpopular-new__info-text {
    margin-bottom: 10px;
}
.mpopular-new__info button {border: none;margin-top: 20px;}
.mpopular-new__info p span {color: #ff000f;text-decoration: line-through;}
.mpopular-new__info .mpopular-marks-mobile {position: absolute;bottom: -5px;right: 0;max-width: 50%;}
.mpopular-new__info .mpopular-marks-mobile div {border-radius: 2px;padding: 4px 8px;font-weight: 700;font-size: .8em;width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;margin: 0 0 5px auto;}
.mpopular-new__info .mpopular-marks-mobile .yellow-mark {background-color: #ffd232;}
.mpopular-new__info .mpopular-marks-mobile .red-mark {background-color: #ff3e3e;color: #fff;}
.mpopular-new .mpopular-marks {display: none;position: absolute;top: 10px;right: 0;}
.mpopular-new .mpopular-marks div {border-radius: 2px;padding: 4px 8px;font-weight: 700;font-size: .8em;width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;margin: 0 0 5px auto;}
.mpopular-new .mpopular-marks .yellow-mark {background-color: #ffd232;}
.mpopular-new .mpopular-marks .red-mark {background-color: #ff3e3e;color: #fff;}

@media (min-width: 1025px){
    .mpopular-new__nav li {flex: 1 1 auto;}
}

@media (max-width: 1024px){
    .mpopular-new__nav { flex-wrap: wrap; }
    .mpopular-new__nav li {
        flex: 1 1 30%;
        flex-wrap: wrap;}
}
@media (min-width: 992px){
    .mpopular-new .not-hidden {display: -webkit-box;display: -ms-flexbox;display: flex;}
    .mpopular-new__nav { display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;font-size: 1em;}
    .mpopular-new__nav li {padding: 6px 20px;}
    .mpopular-new__item {margin-top: 35px;padding: 30px 25px;font-size: 1em;}
    .mpopular-new__item h3 {font-size: 1.375em;margin-top: 0;}
    .mpopular-new__grid {grid-template-columns: none;grid-gap: 2rem;}
    .mpopular-new__info {max-width: 65%;padding: 25px 60px 0 0;padding-margin-top: 20px;}

}

@media (min-width: 768px){
    .mpopular-new .not-hidden {display: -webkit-box;display: -ms-flexbox;display: flex;}
    .mpopular-new__nav {font-size: 1em;}
    .mpopular-new__nav li {padding: 6px 20px;}
    .mpopular-new__item {margin-top: 35px;padding: 20px 15px;}
    .mpopular-new__item h3 {font-size: 1.375em;margin-top: 0;}
    .mpopular-new__item .mpopular-marks-mobile {display: none;}
    .mpopular-new__grid {grid-template-columns: none;grid-gap: 2rem; max-width: 50%;}
    .mpopular-new__info {max-width: 50%;padding: 15px 20px 0 20px;margin-top: 0;}
    .mpopular-new .mpopular-marks {display: block;position: absolute;top: 10px;right: 0;}
    .mpopular-new .mpopular-marks div {border-radius: 2px;padding: 4px 8px;font-weight: 700;font-size: .8em;width: -webkit-fit-content;width: -moz-fit-content;width: fit-content;margin: 0 0 5px auto;}
    .mpopular-new .mpopular-marks .yellow-mark {background-color: #ffd232;}
    .mpopular-new .mpopular-marks .red-mark {background-color: #ff3e3e;color: #fff;}
}
@media (max-width: 350px){
    .mpopular-new__nav { flex-wrap: wrap;
    grid-template-columns: repeat(2,1fr);}
    .mpopular-new__nav li {
        flex-wrap: wrap;
        
        
    }
}