@import url("../fontawesome/css/all.min.css");

@font-face {
  font-family: 'Big John Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Big John Regular'), url('../fonts/Big John.woff') format('woff');
}

/* open-sans-300 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/open-sans-v14-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Light'), local('OpenSans-Light'),
       url('../fonts/open-sans-v14-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v14-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v14-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v14-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v14-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/open-sans-v14-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('../fonts/open-sans-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v14-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-800 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/open-sans-v14-latin-800.eot'); /* IE9 Compat Modes */
  src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'),
       url('../fonts/open-sans-v14-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/open-sans-v14-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/open-sans-v14-latin-800.woff') format('woff'), /* Modern Browsers */
       url('../fonts/open-sans-v14-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/open-sans-v14-latin-800.svg#OpenSans') format('svg'); /* Legacy iOS */
}

body {
    font-family: Microsoft Yahei,Tahoma,Arial,Helvetica,sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 15px;
    line-height: 25px;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}   

h1 {
    font-size: 32px;
    font-family: Microsoft Yahei,Tahoma,Arial,Helvetica,sans-serif;
    color: #000;
    display: inline-block;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 15px;
}
h4 { font-weight: 700; }
h3 { font-weight: 700; margin-bottom: 30px; }
h5 { font-weight: 700; font-size: 16px; }

main a { color: #000; text-decoration: underline; cursor: pointer; }
main a:hover { color: #ce0000; text-decoration: underline; cursor: pointer; }

main[role="main"] {
    flex: 1 0 auto;
}

strong { font-weight: 700; }

.container-xxl, .navbar .container { max-width: 1440px !important; }
.align-super { vertical-align: super; }
.font-green { color: #06d013 !important; }
.bg-grey { background: #f8f9fa; }
.bg-yellow { background: #ce0000 !important; }
.bg-light { background: #fff !important; }
.bg-blue { background: #2c2e2f; color: #fff; }
.bg-blue a { color: #fff; }
.py-60 { padding: 60px 0; }
.pb-60 { padding-bottom: 60px; }
.pt-210 { padding-top: 210px; }
.py-30 { padding: 30px 0; }
.help-block { color: #dc3545; }
.-mt-2 { margin-top: -7px; }
.overflow-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

#temporary {
    height: 100%;
    background-color: #2c2e2f !important;
    color: #fff;
    text-align: center;
    padding: 90px;
}
#temporary h1, #temporary a { color: #fff; } 
#temporary a { text-decoration: underline; } 


/*
// Buttons
*/

.bg-yellow a:hover { color: #000; }


/*
// Buttons
*/

.btn {
    font-family: 'Open Sans';
    border: 0;
    padding: 7px 30px;
    border-radius: 0;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s;
    border-radius: 5px; 
}
.btn-sm { padding: 5px 10px; width: 100%; border: 0; }
.btn:hover { transform: scale(.98); color: #002554; }
.btn:focus { transform: scale(.96); }
.btn-primary {
    background: linear-gradient(0deg,rgba(206, 0, 0, 1) 0%, rgba(191, 19, 16, 1) 100%);
    color: #fff;
    text-decoration: none;
    box-shadow: 0px 4px 0px 0px rgb(178 20 15);
}
.btn-primary:hover { background: #fff; color: rgba(191, 19, 16, 1) !important; box-shadow: 0px 4px 0px 0px rgb(222 222 222); }
.btn-back {
    text-decoration: underline;
    margin-bottom: 30px;
    color: #000;
    display: block;
}
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle { background: #ce0000; }
.btn-secondary:hover { color: #fff; }

.btn-cart {
    float: right;
    position: relative;
    padding: 7px 13px 20px 30px;
    background: none;
    border-left: 1px solid #f4f4f4;
    color: #000;
}
.btn-cart i { font-size: 18px; }
.btn-cart i:before { position: relative; bottom: -5px; }
.btn-cart-count {
    border-radius: 100%;
    color: #fff;
    padding: 1px 6px;
    position: absolute;
    background: #ce0000;
    font-size: 12px;
    top: 0px;
    right: 0px;
}
.btn-logout { background: none; border: 0; margin: 7px; }


/*
// Header
*/

.nav-select { margin: 5px 0; }
.nav-select select { padding: 3px 10px; height: 33px; }

.nav-tel { position: absolute; z-index: 9999; padding-top: 7px; }
.nav-tel a { font-weight: 700; color: #000; }
.navbar { float: right; }
.nav-cart {
    float: right;
    color: #fff !important;
    margin: 7px 0 0 0 !important;
    display: inline-block;
    font-weight: 700;
}

.nav-cart-mob a {
    display: none;
    background: #000;
    color: #fff;
    padding: 5px 10px;
    position: absolute;
    top: 5px;
    right: 5px;
}
.navbar-light .navbar-nav .nav-link { color: #000; }

.nav-big {
    margin: 0;
    padding: 0;
    list-style: none;
    float: right;
}
.nav-big li { display: inline-block; margin: 22px 0 0 30px; }
.nav-big a { color: #000; font-weight: 700; }

.navbar-brand { width: 130px; margin: 5px 0; cursor: pointer; }
.navbar-brand-mob { display: none; width: 50px; margin: 5px 0; }
.navbar-toggler {
    padding: 2px 5px;
    margin-top: 10px;
    color: #000 !important;
    border: 0;
}

.label-new {
    background: #000;
    font-size: 9px;
    position: absolute;
    margin: -7px 0 0 -30px;
    padding: 2px 4px 0;
    border-radius: 3px;
    transform: rotate(14deg);
}

.breadcrumb { background: none; padding: 0; margin-top: 30px; }
.breadcrumb a { color: #2c2e2f; text-decoration: underline; }

.header { box-shadow: 0 0 3px rgba(0,0,0,0.5); z-index: 1; }

.header-front {
    background: #000 url(../images/header.jpg) no-repeat;
    background-position: center;
    background-size: cover;
    height: 90vh;
}
.header-front h1 {
    font-family: 'Open Sans';
    font-size: 32px;
    color: #000;
    font-weight: 700;
}

.header-short { color: #fff; margin-top: 30px; }
.header-short span { display: block; font-weight: 700; font-size: 16px; }
.header-short .header-short-item { background: rgb(44 46 47 / 80%); border-radius: 5px; padding: 15px; }
.header-short .header-short-item:hover { background: rgba(200 10 33 / 80%); }
.header-short .header-short-item a { color: #fff; text-decoration: none; }
.header-front i {
    float: left;
    height: 40px;
    font-size: 20px;
    margin: 6px 10px 0 15px;
}

.page-head-sub { margin-top: 30px; }


/*
// Filter
*/

.filter-block-container {
    border: 1px solid #f4f4f4;
    margin-top: 30px;
    border-radius: 5px;
}
.filter-block ul, .item-view-list { list-style: none; padding: 0; }
.filter-block input { margin-right: 5px; }
.filter-block h5 {
    border-top: 1px solid #ebeff3;
    margin-top: 15px;
    padding-top: 15px;
    text-transform: uppercase;
}
.filter-block:first-child h5 { border: 0; padding: 0; }

.filter-block-search {
    font-weight: 700;
    background: #fff;
    border: 1px solid #f4f4f4;
    border-radius: 5px;
}
.filter-block-search select { border: 0; }
.filter-block-search .custom-control-label {
    font-size: 12px;
    line-height: 24px;
    font-weight: 300;
    text-transform: none;
}
.filter-block-search .form-control { padding: 5px; border-radius: 5px; }
.header-front .filter-block-search img { width: 70px; }
.header-front .filter-block-search .field-tyresearchform-fixedsize label { display: none; }
.field-tyresearchform-filtermainbrand img { width: 40px; margin-left: 10px; }

.form-control { background: #f4f4f4; padding: 5px !important; }
.field-tyresearchform-filtermainbrand .col-sm-4 { padding-right: 0; }
.filter-block-search .custom-control-input[type=radio] { opacity: 1; }
.filter-block-search .custom-radio img { margin-top: -5px; }
.multi-collapse.collapse:not(.show) { overflow: hidden; display: block; }
.page-overview label { display: block; font-weight: 700; }
.label-count { color: #ddd; margin-left: 0 !important; }
.summary { display: none; }

.custom-control-label::before { border-radius: 0 !important; }
.custom-control-label::after { border-radius: 3px; }

input[type="checkbox"] {
  appearance: none;
  background-color: #fff;
  margin: 0 8px -3px 0;
  font: inherit;
  color: currentColor;
  width: 16px;
  height: 16px;
  border: 1px solid #adb5bd;
  border-radius: 0;
  transform: translateY(-0.075em);
}

input[type="checkbox"] { place-content: center; }
input[type="checkbox"]::before {
  content: "";
  width: 12px;
  height: 12px;
  float: left;
  margin-left: 1px;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  background: #64b621;
}

input[type="checkbox"]:checked::before { transform: scale(1); }


/*
// Box
*/

.box { border: 1px solid #ebeff3; border-radius: 5px; }
.box-cart {
    background: #2c2e2f;
    color: #fff;
    box-shadow: 2px 3px 10px -6px #333;
    border-radius: 5px;
}
.box-grey { background: #efefef; border-radius: 5px; }

.box-cart .border-right, .box-cart .border-top { border-color: #000 !important; }
.box-cart .item-stock span { background: #ce0000; color: #fff; font-size: 9px; }
.box-cart-count input {
    border-radius: 5px;
    float: right;
    margin-top: 4px;
    border: 0;
    padding-left: 5px;
    min-width: 50px;
} 
.box-cart-count input[type=number]::-webkit-inner-spin-button, 
.box-cart-count input[type=number]::-webkit-outer-spin-button {  
   opacity: 1;
}

.box-action {
    padding: 120px 15px;
    background: #f1f1f1 url(../images/bg-action.png) no-repeat center top;
    background-size: cover;
    color: #000;
    border-radius: 5px; 
}
.box-action a { color: #ce0000; }

.box-image {
    width: 100%;
    text-align: center !important;
    border-radius: 5px;
    border: 1px solid #efefef;
    padding: 15px 15px 0;
}

.box-image img { width: 100% !important; height: 166px !important; object-fit: contain; }


/*
// Blocks
*/

.bubble {
    height: 90px;
    width: 90px;
    display: inline-block;
    margin-bottom: 15px;
}

.block-over {
    color: #000;
    background: #eaf0f4;
    border-radius: 5px;
    margin-bottom: 30px;
}

.block-usp {
    background: #2c2e2f;
    color: #fff;
    text-align: center;
    padding: 5px 0;
}
.block-usp i { font-size: 18px; margin-right: 10px; }
.block-usp span { margin-top: -3px; }

.block-over-layer { padding: 30px 90px; background: rgba(0,0,0,0.6); }
.block-over-usp .bb { border-bottom: 1px solid #f4f4f4; padding: 15px 0 15px; margin-bottom: 15px; }

.column-2 { columns: 2; }

.block-over-usp iframe {
    width: 100%;
    max-width: 560px;
    aspect-ratio: 16 / 9;
    height: auto;
}


/*
// Table
*/

.table-striped tbody tr:nth-of-type(odd) { background: #f8f9fa; }
.table-striped .label { font-size: 9px; margin-right: 0; padding: 2px 5px; }
.table-striped .label-1:after,
.table-striped .label-a:after, 
.table-striped .label-2:after, 
.table-striped .label-b:after, 
.table-striped .label-3:after, 
.table-striped .label-c:after, 
.table-striped .label-C:after, 
.table-striped .label-4:after, 
.table-striped .label-D:after, 
.table-striped .label-5:after, 
.table-striped .label-e:after, 
.table-striped .label-E:after, 
.table-striped .label-6:after, 
.table-striped .label-F:after, 
.table-striped .label-7:after, 
.table-striped .label-G:after,
.table-striped .label-noise-1:after, 
.table-striped .label-noise-2:after, 
.table-striped .label-noise-3:after {
    border-width: 9px !important;
    margin: -2px 0 0 5px !important;
}

.table-striped tbody tr td { font-size: 13px; }
.table-striped tbody .not-set { display: none; }
.table-striped .form-small, .table-striped .btn-sm { width: 38px; float: left; }
.table-striped .btn-sm { margin-left: 5px; }
.table-striped form { width: 82px; }
.table-striped .item-stock span { font-size: 9px !important; }

.table th, .table td { padding: 9px 5px 4px; }

.table-bordered, .table-bordered th, .table-bordered td { border: 0; vertical-align: middle; }
.table-bordered thead th, .table-bordered thead td { font-size: 14px; }
.table-bordered tr td:first-child { font-size: 13px; }
.table-bordered tr td:nth-child(11) { padding: 0; }

.block-account .detail-view th { width: 50%; }

.form-small {
    padding: 5px !important;
    border: 1px solid #dee2e6;
    margin-bottom: 5px;
    border-radius: 5px;
    width: 100%;
}

.not-set { font-size: 13px; }


/*
// Item
*/

.item { border-bottom: 1px solid #efefef; border-radius: 5px; }
.news-index { background: #f5f5f5; }
.news-index .item, .tyre-index .item {
    border: 1px solid #efefef;
    box-shadow: 2px 3px 10px -6px #ddd;
    margin: 15px 0;
    background: #fff;
    padding: 30px;
}
.news-index .item:hover, .tyre-index .item:hover { box-shadow: 2px 3px 10px -6px #111; }
.item a { text-decoration: none; }
.item a:hover { color: #000; text-decoration: none; }
.item h4 { margin: 0; }
.item .btn i, .box-cart .btn i { margin-left: 20px; }
.item-price { font-size: 16px; font-weight: 700; }
.item-price span { font-size: 16px; }
.item-btw {
    color: #cdcdcd;
    font-size: 13px;
    vertical-align: super;
    display: block;
    margin-bottom: 29px;
}
.item-icon-img { margin-top: -5px; width: 24px; }
.item-type { display: block; }
.item-season { display: inline-block; font-size: 24px; color: #d8d8d8; }
.item-axle { font-size: 12px; }
.item-axle img { width: 130px; margin-top: 20px; }
.item-stock { padding: 1px 0; display: inline-block; }
.item-stock span {
    font-weight: 700;
    color: #fff;
    background: #0e228a;
    position: unset;
    text-align: center;
    font-size: 9px;
    line-height: 23px;
    height: 24px;
    width: 24px;
    display: inline-block;
    border-radius: 100%;
}
.item-stock small { display: inline-block; margin-left: 5px; font-size: 12px; font-weight: 300; }
.item-order button { width: 100%; }

.item-view-list li { padding: 5px; }
.item-view-list li:nth-child(even), .product-row:nth-child(odd) { background: #f8f9fa; border-radius: 5px; }
.item-view-list span { width: 30%; display: inline-block; }

/* Nieuws */

.news-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
    margin-bottom: 15px;
}

.news-title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.news-intro {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}
.news-index time { margin-top: 15px; display: block; }
.news-index .item a.btn:hover { color: #fff; }

/* Labels */
.labels { padding: 0; margin: 7px 0 0; }
.labels li { display: inline-block; margin-right: 15px; }
.labels img { width: 27px; }

.label i { margin-right: 5px; }
.label-title { display: block; font-size: 12px; clear: both; }
.label {
    padding: 0 5px;
    margin-right: 12px;
    color: #FFF;
    font-size: 14px;
    display: inline-block;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    font-weight: 700;
}
.label .label-span { width: auto; }

.label-1:after,
.label-a:after,
.label-2:after,
.label-b:after,
.label-3:after,
.label-c:after,
.label-C:after,
.label-4:after,
.label-D:after,
.label-5:after,
.label-e:after,
.label-E:after,
.label-6:after,
.label-F:after,
.label-7:after,
.label-G:after,
.label-noise-1:after,
.label-noise-2:after,
.label-noise-3:after {
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-width: 12px;
    margin: 0px 0 0 5px;
}

.label-1, .label-a { background: #009036; }
.label-1:after, .label-a:after { border-left-color: #009036; }
.label-2, .label-b { background: #55ab26; }
.label-2:after, .label-b:after { border-left-color: #55ab26; }
.label-3, .label-c, .label-c1 { background: #c8d200; }
.label-3:after, .label-c:after, .label-c1:after { border-left-color: #c8d200; }
.label-3, .label-C, .label-C1 { background: #c8d200; }
.label-3:after, .label-C:after, .label-C1:after { border-left-color: #c8d200; }
.label-4, .label-D { background: #ffed00; }
.label-4:after, .label-D:after { border-left-color: #ffed00; }
.label-4, .label-d { background: #ffed00; }
.label-4:after, .label-d:after { border-left-color: #ffed00; }
.label-5, .label-e { background: #fbba00; }
.label-5:after, .label-e:after { border-left-color: #fbba00; }
.label-5, .label-E { background: #fbba00; }
.label-5:after, .label-E:after { border-left-color: #fbba00; }
.label-6, .label-F { background: #eb6909; }
.label-6:after, .label-F:after { border-left-color: #eb6909; }
.label-7, .label-G { background: #e2001a; }
.label-7:after, .label-G:after { border-left-color: #e2001a; }

.label-noise-1 { background: #000; }
.label-noise-1:after { border-left-color: #000; }
.label-noise-2 { background: #000; }
.label-noise-2:after { border-left-color: #000; }
.label-noise-3 { background: #000; }
.label-noise-3:after { border-left-color: #000; }

.list-usp {
    list-style: none;
    margin: 15px 0 0;
    padding: 15px 0;
    font-weight: 700;
    border-top: 1px dotted #000;
    border-bottom:  1px dotted #000;
}
.list-usp i { color: #28a745; margin: 0 5px; }

.view-labels { padding: 0; margin: 0 0 35px; }
.view-labels li { display: inline-block; margin-right: 15px; }
.view-labels img { width: 38px; }


/*
// Cart
*/

.cart-container {
    border-radius: 5px;
    border: 1px solid #ebeff3;
    padding-bottom: 15px;
    margin-bottom: 30px;
}
.cart-usp { list-style: none; margin: 30px 0 0; padding: 0; }
.cart-usp li:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f061";
  float: left;
  margin: 0 10px;
}

.product-row { padding: 5px 0; margin: 0; }

.desc-row { padding: 15px; }

.pagination li { border: 1px solid #e7e7e7; border-radius: 5px; margin: 15px 1px 1px; }
.pagination .active { background: #ce0000; }
.pagination li span { padding: 5px 10px; display: inline-block; }
.pagination li:hover { background: #ce0000; }
.pagination li a {
    color: #000;
    text-decoration: none;
    padding: 5px 10px;
    display: inline-block;
}

/*
// Popup 
*/

.modal {
    max-width: 700px;
    width: 34%;
    position: fixed;
    top: 50vh;
    height: auto;
    background: #2c2e2f;
    left: 50%;
    box-shadow: -2px 2px 10px 8px rgba(0,0,0,0.26);
    -webkit-box-shadow: -2px 2px 10px 8px rgba(0,0,0,0.26);
    -moz-box-shadow: -2px 2px 10px 8px rgba(0,0,0,0.26);
    transform: translate(-50%, -50%);
    border-radius: 5px;
    color: #fff;
    padding: 30px;
}
.modal h1 { color: #fff; }

.modal.show { display: block }

#close {
    cursor: pointer;
    color: #fff;
    position: absolute;
    top: 0;
    font-size: 25px;
    right: 0;
    padding: 1rem;
    margin-right: 10px;
}

/****styling modal on smaller screen******/

@media only screen and (min-width: 768px) {
    .modal__container {
        flex-direction: row;
    }
}

/*
// Footer 
*/

.footer { background: #ce0000; color: #fff; flex-shrink: 0; margin: 0; }
.footer a { color: #fff; text-decoration: underline; }
.footer .navbar-brand { margin-top: 0 !important; }

@media (max-width:321px) {
    .navbar-brand-mob { width: 30px; margin: 13px 0 -5px !important; }
}
@media (max-width:767px) {
    body {
        font-size: 14px;
        line-height: 22px;
    }

    h1 {
        display: block;
        font-size: 26px;
        line-height: 1.2;
    }

    h3 { margin-bottom: 20px; }

    .py-60 { padding: 40px 0; }
    .pb-60 { padding-bottom: 40px; }
    .pt-210 { padding-top: 170px; }

    .header {
        padding-bottom: 0;
        position: relative;
    }

    header {
        text-align: left;
    }

    header .container {
        position: relative;
    }

    header .form-inline {
        display: block;
        width: 100%;
    }

    header li { margin: 0; }

    #filter { display: none; }
    #filter.show,
    #filter.collapsing {
        display: block !important;
        position: fixed;
        background: #fff;
        left: 0;
        right: 0;
        width: 100%;
        top: 80px;
        bottom: 0;
        z-index: 1050;
        overflow-y: auto;
        padding: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,.18);
    }

    #filter.collapsing {
        height: auto !important;
        transition: none;
    }

    #filter .filter-block-search .row > .col-4 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 10px;
    }

    #filter .filter-block-search .row > .col-4:last-child {
        margin-bottom: 0;
    }

    .filter-close {
        color: #000;
        display: block;
        font-weight: 700;
        margin: 0 0 15px;
        text-align: right;
        text-decoration: none;
    }

    .filter-close:hover {
        color: #000;
        text-decoration: none;
    }

    .bubble {
        height: 58px;
        width: 58px;
    }

    .bubble img {
        max-width: 58px;
        height: auto;
    }

    .header-front h1 { font-size: 23px; }

    .navbar-brand {
        width: 110px;
        max-width: calc(100vw - 145px);
        float: none;
        margin: 15px 0 12px;
    }

    .navbar {
        float: none;
        position: absolute;
        top: 18px;
        right: 72px;
        z-index: 1100;
        padding: 0;
    }

    .navbar-toggler {
        margin: 0;
        padding: 3px 7px;
        background: #fff;
    }

    .navbar-collapse.show,
    .navbar-collapse.collapsing {
        position: fixed;
        top: 78px;
        left: 0;
        right: 0;
        width: 100%;
        background: #fff;
        padding: 12px 24px 18px;
        box-shadow: 0 10px 30px rgba(0,0,0,.14);
        z-index: 1040;
    }

    .navbar-collapse.collapsing {
        height: auto !important;
        transition: none;
    }

    .navbar-nav .nav-link,
    .btn-logout {
        display: block;
        width: 100%;
        padding: 8px 0;
        text-align: center;
        font-size: 16px;
    }

    .nav-tel { position: absolute; margin: 7px 0 0 17%; font-size: 13px; }

    .nav-big { margin-top: 18px; }
    .nav-big a { font-size: 10px; }
    .nav-big li { margin: 0 7px 15px !important; }
    .nav-big li:first-child { margin-left: 0 !important; }
    .nav-big .font-green img { display: none; }
    .nav-big .nav-cart { display: none; }

    .btn-cart { padding: 0; background: none; }
    .btn-cart i { color: #ce0000; }
    .btn-cart-count { font-size: 9px; }
    .nav-cart-mob a {
        align-items: center;
        justify-content: center;
        display: flex !important;
        width: 48px;
        height: 40px;
        padding: 0;
        top: 13px;
        right: 15px;
        border-radius: 4px;
        text-decoration: none;
        z-index: 1100;
    }
    .nav-cart-mob .badge {
        color: #fff;
        margin-left: 5px;
        padding: 0;
    }
    .navbar-brand-mob { display: block !important; }
    .nav-cart { display: none; }

    .block-usp {
        padding: 8px 0;
    }

    .block-usp .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 18px;
    }

    .block-usp .d-inline {
        display: flex !important;
        align-items: center;
        margin: 0 !important;
    }

    .block-usp i {
        width: 18px;
        margin-right: 8px;
        text-align: center;
    }

    .header-front {
        height: auto;
        min-height: calc(100vh - 80px);
        background-position: center top;
    }

    .header-front .filter-block-search {
        padding: 24px !important;
    }

    .filter-block-search .form-control,
    .form-control {
        font-size: 16px;
    }

    .header-short {
        margin-top: 25px;
    }

    .header-short .col-lg-6 + .col-lg-6 {
        margin-top: 15px;
    }

    .header-short .header-short-item {
        display: flex;
        align-items: center;
        padding: 18px;
    }

    .header-front i {
        flex: 0 0 46px;
        float: none;
        height: auto;
        margin: 0 15px 0 0;
        text-align: center;
    }

    .block-over-layer { padding: 30px; }

    .container-xxl > .overflow-hidden.mb-3 {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 10px 16px;
    }

    .container-xxl > .overflow-hidden.mb-3 .float-left,
    .container-xxl > .overflow-hidden.mb-3 .float-right {
        float: none !important;
    }

    .container-xxl > .overflow-hidden.mb-3 h1 {
        margin-bottom: 0;
    }

    .news-index .item,
    .tyre-index .item {
        padding: 18px;
    }

    .tyre-index .item > .row > [class*="col-"] + [class*="col-"] {
        margin-top: 18px;
    }

    .labels li,
    .view-labels li {
        margin: 0 10px 10px 0;
    }

    .item-view-list span {
        width: 45%;
    }

    .item-btw { margin-bottom: 0; }

    .filter-block-search .custom-radio img { width: 60px; }

    .overflow-scroll .grid-view,
    .overflow-scroll table {
        min-width: 720px;
    }

    .modal {
        width: calc(100% - 30px);
        max-height: calc(100vh - 30px);
        overflow-y: auto;
        padding: 20px;
    }

    .footer {
        text-align: left;
    }

    .footer .col-lg-3 {
        margin-bottom: 20px;
    }
}

@media (max-width:380px) {
    .navbar-brand {
        width: 190px;
    }

    .navbar {
        right: 66px;
    }

    .nav-cart-mob a {
        right: 10px;
        width: 44px;
    }

    .filter-block-search {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}