@charset "utf-8";
/* CSS Document */
@media (max-width: 649px) {
    /*header .headerLogo{width:70%; margin: 0 auto 20px auto;}
    header .headerSocialHolder{position: relative; transform: none; text-align: center; top: auto; left: auto;}
    header .headerSocialHolder a{margin:0 10px;}
    .toggleMenu{position:fixed;}
    .mainBannerHolder{background-position: 0;}
    .mainBannerHolder .bannertextHolder{bottom: 20px; left: 20px; right: 20px;}
    .mainBannerHolder .bannertextHolder .small{font-size: 70px; line-height: 80px;}
    .mainBannerHolder .bannertextHolder .large{font-size: 80px; line-height: 90px;}
    #about .image{position: relative; width: 100%; top: auto; left: auto; right: auto; bottom: auto; height: 50vh;}
    #about .textHolder{position: relative; width: 100%; min-height: auto; height: auto;}
    #about .textHolder .inner{position: relative; transform: none; top: auto; padding: 30px;}
    #gallery{padding:50px 0;}
    #gallery h2.title{font-size: 60px; line-height: 60px; margin:0 0 50px 0;}
    #start .textHolder{position: relative; width: 100%; min-height: auto; height: auto;}
    #start .textHolder .inner{position: relative; transform: none; top: auto; padding: 30px;}
    #start .image{position: relative; width: 100%; top: auto; left: auto; right: auto; bottom: auto; height: 50vh; clear:both;}
    #offer h2.title{font-size: 60px; line-height: 60px; margin:0 0 50px 0;}
    #offer .item{width: 100%; margin: 0 0 20px 0;}
    #bodyMechanic .image{position: relative; width: 100%; top: auto; left: auto; right: auto; bottom: auto; height: 50vh;}
    #bodyMechanic .textHolder{position: relative; width: 100%; min-height: auto; height: auto;}
    #bodyMechanic .textHolder .inner{position: relative; transform: none; top: auto; padding: 30px;}
    #contact h2.title{font-size: 60px; line-height: 60px; margin:0 0 50px 0;}
    #contact form{width:80%;}
    #contact form input.half{width:100%; margin:0 0 10px 0;}
    footer{text-align:center;}
    footer .footerLogo{width:70%; margin: 0 auto 30px auto;}
    footer .footerSocialHolder{margin:30px 0;}*/
    
    /*
    .navbar .menu-button{width:auto;}
    #app-container .sidebar{padding-top: 80px; height: calc(100% - 80px);}
    #app-container .sidebar .main-menu{width:100px; height: calc(100% - 80px);}
    #app-container .sidebar .sub-menu{left:100px; height: calc(100% - 80px);}
    #app-container.menu-hidden .sub-menu, #app-container.menu-sub-hidden .sub-menu, #app-container.sub-hidden .sub-menu{transform: translateX(-330px);}
    #app-container .sidebar .main-menu ul li a{height:100px;}
    #app-container .sidebar .main-menu ul li i{font-size: 24px; line-height: 34px;}
    
    .navbar{height: 80px; padding: 15px;}
    .navbar .wfLogo{display:none;}
    .navbar .user .name{display:none;}
    .navbar .navbar-logo{width: 35px; height: 35px;}
    .navbar .navbar-logo .logo{width: 35px; background-position: 0; background-size: cover;}
    main{margin: 100px 15px 0 15px !important;}
    .card .card-body{padding: 1.25rem; -webkit-box-orient: vertical !important; -ms-flex-direction: column !important; flex-direction: column !important;}
    .card .card-body>p{width:100% !important;}
    .card .card-body>div{width:100% !important;}
    .card .card-body>div .badge{margin:20px 0 0 0; float: left;}
    .custom-control{font-size:18px;}
    .custom-control a{padding:10px;}
    .separator{clear:both;}
    .dropdown-menu{min-width: 7rem;}
    .dropdown-item{padding: .75rem;}
    */
    html, body{font-size: 4vw; line-height: 1.3;}
    .auth-card {flex-direction: column;}
    .auth-card .image-side{width:100%; padding: 35px 30px;}
    .auth-card .form-side{width:100%; padding: 35px 30px;}
    .card{display:block;}
    .sideMenuBar{width:70px;}
    .sideMenuBar .sideMenuHolder a{font-size:20px;}
    header{margin: 30px 20px 30px 90px;}
    main{margin: 30px 20px 30px 90px;}
    .searchForm input{width: 100%;font-size: 3.5vw;text-align: center;}
    .searchForm button{width: 100%;font-size: 3.5vw;}
    .clientInfoHolder{margin:0 0 20px 0;}
    .clientInfoHolder .infoHolder{width:100%; margin:0 0 20px 0;}
    .clientInfoHolder .informationsHolder{width:100%;}
    .clientInfoHolder .infoHolder .title, .clientInfoHolder .infoHolder .titleNoClick{font-size:4vw;}
    .clientInfoHolder .informationsHolder .title, .clientInfoHolder .informationsHolder .titleNoClick{font-size:4vw;}
    .clientInfoHolder .messagesHolder .title, .clientInfoHolder .messagesHolder .titleNoClick{font-size:4vw;}
    .allOrders{width:100%; text-align:center;}
    .clientInfoHolder .infoHolder .half{width:100%; margin:0; font-size:3.5vw;}
    .b2bInformationsHolder .b2bInformationHolder .text{font-size:3.5vw;}
    .b2bMessagesHolder .header{display:none;}
    .b2bMessagesHolder .b2bMessageHolder{width:100%; font-size: 3vw;}
    .b2bMessagesHolder .b2bMessageHolder .no{display:block; clear:both; width:100%; text-align:left; margin:0 0 5px 0;}
    .b2bMessagesHolder .b2bMessageHolder .status{display:block; clear:both; width:100%; text-align:left; margin:0 0 5px 0;}
    .b2bMessagesHolder .b2bMessageHolder .date{display:block; clear:both; width:100%; text-align:left; margin:0 0 5px 0;}
    .b2bMessagesHolder .b2bMessageHolder .document{display:block; clear:both; width:100%; text-align:left; margin:0 0 5px 0;}
    .b2bMessagesHolder .b2bMessageHolder .text{display:block; clear:both; width:100%; text-align:left; margin:0 0 5px 0;}
    .categoriesHolder .item{width:100%; font-size:3vw;}
    .sendrequest{line-height: 1.5; font-size: 4vw; text-align:center; padding:10px 20px;}
    .formHolder{width:100%;}
    .formHolder .title{font-size: 5vw; line-height: 1.2;}
    .form-check{width:100%;}
    .b2bOrdersHolder .header{display:none;}
    .b2bOrdersHolder .b2bOrderHolder .no{display:block; clear:both; width:100%; text-align:left; margin:0 0 5px 0;}
    .b2bOrdersHolder .b2bOrderHolder .total{display:block; clear:both; width:100%; text-align:left; margin:0 0 5px 0;}
    .b2bOrdersHolder .b2bOrderHolder .status{display:block; clear:both; width:100%; text-align:left; margin:0 0 5px 0;}
    .b2bOrdersHolder .b2bOrderHolder .date{display:block; clear:both; width:100%; text-align:left; margin:0 0 5px 0;}
    .sideCartBar{width:calc(100% - 60px); padding:0 0 0 70px;}
    .categoriesHolder.leftColumn{display:none;}
    .productsHolder{width:100%;}
    .productsHolder .item{padding:10px;}
    .productsHolder .item .thumb{width:100%; margin:0 0 10px 0;}
    .productsHolder .item .info{width:100%; text-align:center;}
    .productsHolder .item .info .title{margin:0 0 10px 0; font-size:4vw; line-height:1.2;}
    .productsHolder .item .info .pricesHolder{margin:0 0 10px 0;}
    .productsHolder .item .buyHolder{margin:0 0 10px 0;}
    .buyHolder #version{width:100%; margin:0 0 10px 0;}
    .buyHolder .addToCart{margin:0 0 10px 0; width:100%;}
    .buyHolder .quantity{margin:0; width:100%;}
    .productsHolder .item .buyHolder .title{display:none;}
    .sideCartBar .item .info .title{font-size: 3.2vw;}
    .totalHolder .totalHolder2{font-size: 3vw; width:100%;}
    .totalHolder .button{width:100%; max-width:none;}
    .clientInfoHolder .infoHolder.large{width:100%;}
    .deliveryInfoHolder{width:100%; margin:0;}
    .cartHolder{padding:20px;}
    .cartHolder .item{padding:20px 0;}
    .cartHolder .item .thumb{margin:0 0 10px 0; width:100%;}
    .cartHolder .item .info{width:100%;}
    .cartHolder .item .info textarea{width:100%;}
    .cartHolder .item .perItem, .cartHolder .item .quantity, .cartHolder .item .totalPerItem{width:100%; text-align:right; height:30px;}
    .totalHolder{padding:20px 0;}
    .totalHolder .total{width:100%;}
    footer{margin: 30px 20px 10px 90px;}
    .smallBanner{margin:0 0 20px 0;}
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
}