@import url('vars.css?v.3.20');

@media only screen and (max-width: 990px) {

    body {
        font-size: 12pt;
    }

    .wrapper, footer {
        width: 100%;
        min-width: 100%;
    }

    .wrapper {
        min-height: 100vh;
    }

    header .welcome {
        padding: 0;
        display: flex;
        flex-direction: column;
    }

    header .welcome .phones, header .welcome .address {
        width: 100%;
        box-sizing: border-box;
        display: block;
    }

    header .welcome .phones {
        display: flex;
        padding: var(--xxs) var(--xs);
        gap: var(--m);
    }

    header .welcome .phones a.tel {
        margin-right: 0;
    }

    header .welcome .address {
        text-align: left;
        padding: 0 var(--xs) var(--xs) var(--xs);
    }

    header .second {
        width: 100%;
        box-sizing: border-box;
        display: grid;
        grid-template-areas: "logo logo" "btn social";
        grid-template-columns: 70% 30%;
        grid-template-rows: auto auto;
    }

    header .second > div {
        padding: 0;
        align-items: unset;
        display: block;
    }

    header .second .leftCell {
        grid-area: logo;
        display: flex;
        width: 100%;
        flex-direction: column;
        padding: var(--xs);
        box-sizing: border-box;
        text-align: left;
    }

    header .second .mobil1center img.logo {
        margin: 0;
    }

    header .second .services {
        border-left: none;
        padding: var(--xs) 0 0 0;
    }

    header .second .centerCell, header .second .rightCell {
        width: auto;
        padding: var(--2xs) var(--xs) var(--m) var(--xs);
        box-sizing: border-box;
        justify-content: unset;
        align-items: center;
        min-width: unset;
    }

    header .second .centerCell {
        grid-area: social;
        justify-content: end;
        padding-right: var(--xs);
    }

    header .second .rightCell {
        grid-area: btn;
    }

    nav.menu {
        position: fixed;
        right: calc(-1 * var(--mobile-menu-width));
        top: 0;
        width: var(--mobile-menu-width);
        border-radius: 0 0 0 4px;
        max-height: 100vh;
        box-shadow: 0 2px 4px #00000040;
        z-index: 40;

    }

    nav.menu.opened {
        right: 0;
    }

    nav.menu .toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        transform: translate(-99%, 0);
        width: 52px;
        height: 52px;
        border-radius: 2px 0 0 2px;
        background: #5e5e5e;
        color: white;
    }

    nav.menu .toggle:active .i {
        opacity: .6;
        margin: 1px 0 0 0;
    }

    nav.menu .toggle .i {
        width: 32px;
        height: 32px;
        margin: 0 0 1px 0;
        color: white;
        transition: all .1s;
    }

    nav.menu > ul {
        display: flex;
        flex-direction: column;
        max-height: 100%;
        overflow-y: scroll;
    }

    nav.menu ul > li[class^=l] {
        width: 100%;
        padding: 0;
        margin: 0;
        border-bottom: none;
        justify-items: left;
    }

    nav.menu ul > li[class^=l]>a {
        line-height: normal;
        padding: var(--xs) var(--m);
        box-sizing: border-box;
        display: flex;
        height: 52px;
        align-items: center;
    }

    nav.menu .popup {
        position: relative;
        left: unset;
        top: unset;
        margin: 0;
        padding: 0;
        display: none;
        background: #f1f1f1;
    }

    nav.menu .popup.show {
        display: block;
    }

    nav.menu .popup .in {
        padding: 0;
    }

    nav.menu .popup .in .close {
        display: none;
    }

    nav.menu .popup .row.grid > div:first-of-type {
        padding: 0;
    }

    nav.menu .popup .in .row.grid {
        flex-direction: column;
        gap: 1px;
        margin-bottom: 1px;
    }

    nav.menu .popup .in .row.grid .span4 {
        width: 100%;
        display: flex;
        align-items: center;
    }

    nav.menu .popup .in .mitsubishicar {
        display: none;
    }

    nav.menu .popup .in .row.grid .span4 strong.topic {
        width: 100%;
        margin: 0;
    }

    nav.menu .popup .in .row.grid .span4 strong.topic a {
        padding: var(--2xs) var(--m);
        display: block;
        vertical-align: top;
        color: #555;
    }

    nav.menu .popup .in .row.grid .span4 ul {
        display: none;
    }

    nav.menu .popup .row.grid > div {
        padding: 0;
        border-bottom: none;
        max-height: inherit;
    }


    h1 {
        font-size: 180%;
    }


    section.content {
        padding: var(--xs);
    }

    section.content>.row {
        flex-direction: column;
    }

    section.content>.row>.span8, section.content>.row>.left {
        width: 100%;
        padding: 0;
    }

    section.content>.row>.span4.cars, section.content>.row>.right {
        width: 100%;
        padding: 0;
    }

    .content>.row>.right .mitsubishicar {
        float: unset;
    }

    .fastOrder {
        margin: var(--s) 0;
    }

    .fastOrder > form {
        flex-direction: column;
        column-gap: 0;
        row-gap: var(--xs);
    }

    .fastOrder .phone, .fastOrder .auto, .fastOrder .btn.success {
        width: 100%;
    }

    .fastOrder .btn.success {
        justify-content: center;
    }

    .userCarSelect {
        margin: var(--s) 0;
        row-gap: var(--2xs);
        column-gap: 0;
        grid-template-rows: auto auto auto auto auto;
        grid-template-columns: 1fr;
    }

    .userCarSelect > span {
        display: flex;
        align-items: center;
        height: 31px;
    }

    footer>.in>.row {
        display: flex;
        flex-direction: column;
    }

    footer>.in>.row>.left {
        width:100%;
        padding: var(--xs) var(--xs);
    }

    footer .footerMenu {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: "c1 c1" "c2 c3";
        gap: var(--m);
    }

    footer>.in .left nav > ol {
        grid-area: c1;
        width: 100%;
    }

    footer>.in .footerMenu nav > ol li {
        line-height: normal;
        padding: var(--2xxs) 0;
    }

    footer>.in .left .footerMenu > ul:first-of-type {
        grid-area: c2;
        width: auto;
    }

    footer>.in .left .footerMenu > ul:last-of-type {
        grid-area: c3;
        width: auto;
    }

    footer>.in .right {
        width: 100%;
        padding: var(--xs);
        text-align: left;
    }

    footer>.in .right time {
        display: inline-flex;
        align-items: center;
    }

    footer .copyright>.in>.row {
        display: flex;
        flex-direction: column;
    }

    footer .copyright .rights {
        padding: var(--xs);
        width: 100%;
    }

    footer .copyright .mobil1service {
        padding: var(--xs);
        width: 100%;
    }

    footer .copyright .mobil1service .info {
        text-align: left;
    }

    .modal, .modal.callbackModal {
        max-width: 100%;
        max-height: 100vh;
    }

    .serviceCalc>.in>.row {
        display: flex;
        flex-direction: column;
    }

    .serviceCalc>.in>.row>.params {
        padding: var(--xs);
        width: 100%;
    }


    .serviceCalc>.in>.row>.result {
        padding: var(--xs);
        width: 100%;
    }

    .serviceCalc>.in>.row>.result>.row {
        display: flex;
        flex-direction: column;
    }

    .serviceCalc>.in>.row>.result .selectedParams, .serviceCalc>.in>.row>.result .carImage {
        width: 100%;
    }

    .serviceCalc>.in>.row>.result .selectedParams {
        text-align: left;
        padding: 0;
    }

    .serviceCalc>.in>.row>.result .carImage {
        display: flex;
        align-items: center;
    }

    .serviceCalc>.in>.row>.result .carImage .mitsubishicar {
        margin: var(--m) auto var(--xs) auto;
    }

    .serviceCalc .rule {
        margin: var(--xs) 0;
        padding: var(--s) var(--m);
    }

    .serviceCalc .rule .val:not(:nth-child(2n+1)) {
        display: none;
    }

    .serviceWorks {
        display: none;
    }

    .serviceResults.row {
        margin: 0;
        display: flex;
        flex-direction: column;
    }

    button.sendData strong {
        font-size: 120%;
    }

    .serviceResults.row .firstCol {
        width: 100%;
        padding: var(--xs) var(--xs) var(--xxs) var(--xs);
    }

    .serviceResults.row .secondCol {
        width: 100%;
        font-size: 110%;
        padding: var(--xxs) var(--xs) var(--xxs) var(--xs);
        text-align: left;
    }

    .listCars {
        margin: var(--xs) 0;
    }

    .map {
        height: 840px
    }


    .parent .contactInfo {
        position: absolute;
        left: var(--xs);
        top: var(--xs);
        width: calc(100% - (var(--xs) * 2));
        height: 310px;
        z-index: 10;
    }

    .systemRow {
        flex-direction: column;
    }

    .systemRow .textCell, .systemRow .systemInfo {
        width: 100%;
        padding: 0;
    }

    .systemRow .systemInfo {
        padding: var(--m);
    }


    .table .row.header {
        display: none;
    }

    .table .row .fieldName {
        display: block;
    }

    .table>.slide>.row:not(.header):not(.signatures):not(.subtopic)>div {
        padding: var(--2xs);
        box-sizing: border-box;
    }

    .carWorks.table .row.work, .workPrices.table .row.priceItem {
        display: grid;
        grid-template-areas: "id name name name" "parts parts work time";
        grid-template-columns: 10% 27% 37% 26%;
        grid-template-rows: auto auto;
        overflow: hidden;
    }

    .carWorks.table .row.work .num, .workPrices.table .row.priceItem .num {
        grid-area: id;
        width: auto;
    }

    .carWorks.table .row.work .workName, .workPrices.table .row.priceItem .model {
        grid-area: name;
        width: auto;
    }

    .carWorks.table .row.work .partsPrice, .workPrices.table .row.priceItem .partsPrice {
        grid-area: parts;
        width: auto;
    }

    .carWorks.table .row.work .workPrice, .workPrices.table .row.priceItem .workPrice {
        grid-area: work;
        width: auto;
    }

    .carWorks.table .row.work .workTime, .workPrices.table .row.priceItem .workTime {
        grid-area: time;
        width: auto;
        min-width: unset;
        text-align: left;
    }

}