@media all and (min-width: 961px) {
    nav.mobile { display: none; }
    section.mobile { display: none; }
}

@media all and (max-width: 960px) {
    nav.mobile {
        border-top: 1px solid #CCC;
        border-bottom: 1px solid #CCC;
        display: flex;
        justify-content: space-between;
    }

    nav.mobile a,
    nav.mobile a.mgOffers,
    nav.mobile div.mgBasket {
        background-position: center center;
        background-repeat: no-repeat;
        display: inline-block;
        width: 50px;
        height: 52px;
        vertical-align: top;
        border-left: 1px solid #FFF;
        border-right: 1px solid #FFF;
    }

    nav.mobile a span,
    nav.mobile a.mgOffers span,
    nav.mobile div.mgBasket span {
        display: block;
        width: 50px;
        height: 52px;
        background-color: #CCC;
    }

    nav.mobile a.active span,
    nav.mobile a.mgOffers.active span,
    nav.mobile div.mgBasket.active span {
        background-color: #008adb;
    }

    nav.mobile a.search span {
        -webkit-mask: url(../svg/search.svg) no-repeat 50% 50%;
        mask: url(../svg/search.svg) no-repeat 50% 50%;
    }

    nav.mobile a.autos span {
        -webkit-mask: url(../svg/car.svg) no-repeat 50% 50%;
        mask: url(../svg/car.svg) no-repeat 50% 50%;
    }

    nav.mobile a.parts span {
        -webkit-mask: url(../svg/parts.svg) no-repeat 50% 50%;
        mask: url(../svg/parts.svg) no-repeat 50% 50%;
    }

    nav.mobile a.user span {
        -webkit-mask: url(../svg/user.svg) no-repeat 50% 50%;
        mask: url(../svg/user.svg) no-repeat 50% 50%;
    }

    nav.mobile a.mgOffers span {
        -webkit-mask: url(../svg/offer.svg) no-repeat 50% 50%;
        mask: url(../svg/offer.svg) no-repeat 50% 50%;
    }

    nav.mobile div.mgBasket span {
        -webkit-mask: url(../svg/basket.svg) no-repeat 50% 50%;
        mask: url(../svg/basket.svg) no-repeat 50% 50%;
    }

    nav.mobile a.mgOffers,
    nav.mobile div.mgBasket {
        /*float: right;*/
        position: relative;
    }

    nav.mobile a.current,
    nav.mobile div.current {
        background-color: #f8f8f8;
        border-left: 1px solid #CCC;
        border-right: 1px solid #CCC;
        border-bottom: 1px solid #f8f8f8;
        margin-bottom: -1px;
    }

    nav.mobile a.current span,
    nav.mobile div.current span {
        background-color: #0b4887;
    }

    nav.mobile a.current:first-child {
        border-left: 1px solid #FFF;
    }

    nav.mobile div.current {
        border-right: 1px solid #FFF;
    }

    nav.mobile a.mgOffers em,
    nav.mobile div.mgBasket em {
        font-style: normal;
        background-color: #ff6600;
        border-radius: 9px;
        color: #fff;
        display: inline-block;
        font-size: 11px;
        height: 18px;
        line-height: 18px;
        text-align: center;
        width: 18px;
        position: absolute;
        top: 7px;
        right: 7px;
        pointer-events: none;
    }

    section.mobile.show {
        border-bottom: 2px solid #CCC;
    }

    section.mobile h3 {
        margin: 0;
        padding: 10px;
        background-color: #f8f8f8;
        color: #0b4887;
    }

    section.mobile .partsform form {
        padding: 10px;
    }

    section.mobile .history {
        padding: 10px;
    }

    section.mobile .history a {
        display: block;
        padding: 5px 0;
    }
}

}