:root {
  --main-red-color: #cc0000;
  --main-active-red-color: #dd0909;
  --blue-links-color: #0857a6;
}
html {
  box-sizing: border-box;
  -ms-overflow-style: scrollbar;
  scroll-behavior: smooth;
}
* {
  margin: 0;
  padding: 0;
}
*,
::after,
::before {
  box-sizing: inherit;
}
a {
  color: #444;
  text-decoration: none;
}
a:hover {
  color: var(--main-active-red-color);
}
body {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: left;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: #444;
}
input,
select,
textarea,
button {
  font: 15px/1.55 Roboto, sans-serif;
  vertical-align: middle;
  color: #2f2f2f;
}
img {
  border: 0;
  vertical-align: top;
  max-width: 100%;
}
input.input-text,
select,
textarea {
  background: #fff;
  border: 1px solid #ccc;
}
.menu-bar {
  display: none;
}

/* bottom-nav --------------------------------------------------------------- */

.bottom-nav {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 5;
  display: grid;
  grid-auto-flow: column;
  justify-content: space-between;
  width: 100%;
  padding: 8px 22px;
  background: #fff;
  box-shadow: rgba(50, 50, 93, 0.25) 0px -2px 5px -1px,
    rgba(0, 0, 0, 0.3) 0px -1px 3px -1px;
}
.bottom-nav .btn_menu,
.bottom-nav .user-area-show {
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  transform: skewX(0deg);
  height: 40px;
}
.bottom-nav .btn_menu:hover,
.bottom-nav .user-area-show:hover {
  background-color: #fff;
}
.bottom-nav .btn_menu_icons {
  width: 36px;
  height: 22px;
}
.bottom-nav .nav-phone,
.bottom-nav .nav-cart {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 40px;
}
.nav-cart {
  position: relative;
  align-items: center;
  justify-content: center;
  width: 44px;
  background-color: #fff;
  border: none;
  cursor: pointer;
}
.site-header .nav-cart {
  height: 41px;
  border: 1px solid var(--main-red-color);
  box-shadow: 0 0 1px 0px var(--main-red-color);
  border-radius: 10px 2px 10px 2px;
  transform: skewX(-10deg);
}
.nav-cart img {
  height: 22px;
}
.items_count.cart_items {
  display: none;
}
.items_count.cart_items.show-counter {
  display: block;
}
.items_count {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  background-color: var(--main-red-color);
  border-radius: 50%;
  line-height: 20px;
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}
.site-header .items_count {
  top: -12px;
  right: -12px;
}
.nav-phone {
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 42px;
  background-color: #fff;
  border: none;
  cursor: pointer;
}
.site-header .nav-phone {
  border: 1px solid var(--main-red-color);
  box-shadow: 0 0 1px 0px var(--main-red-color);
  border-radius: 10px 2px 10px 2px;
  transform: skewX(-10deg);
}
.nav-phone img {
  height: 22px;
  transform: scale(-1, 1);
}
.nav-phone:hover img {
  animation: vibrate 2s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
}
.bottom-nav .btn_menu_text {
  display: block;
  height: 18px;
  color: #777;
  font-size: 12px;
  font-weight: bold;
}
/* breadcrumbs --------------------------------------------------------------- */

.breadcrumbs_wrap {
  width: 100%;
  margin: 24px 0;
}
._breadcrumbs {
  width: 100%;
  max-width: 1456px;
  margin: 0 auto;
  padding: 0 12px;
  box-sizing: border-box;
  color: #ccc;
}
._breadcrumbs li {
  display: inline;
}
._breadcrumbs a {
  padding: 0 4px 4px;
  border-bottom: 1px solid;
  border-color: transparent;
  line-height: 20px;
  color: #8b8b8b;
  text-decoration: none;
}
._breadcrumbs li:first-child a {
  padding: 0 4px 4px 0;
}
._breadcrumbs a:hover {
  color: #000;
  border-color: #000;
}

/* main --------------------------------------------------------------- */

main {
  width: 100%;
}

.limwdth {
  max-width: 1456px;
}

.mauto {
  margin: 0 auto;
}

.nowrap {
  white-space: nowrap;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Roboto, sans-serif !important;
}

h1 {
  font-size: 2em;
  font-weight: normal;
  font-weight: bold;
}

h2 {
  font-size: 1.5em;
  line-height: 1.25;
  margin-bottom: 0.45em;
}

h3 {
  font-size: 1.35em;
  line-height: 1.25;
  margin-bottom: 0.45em;
}

h4 {
  font-size: 1.05em;
  line-height: 1.35;
  margin-bottom: 0.45em;
}

#move_up {
  position: fixed;
  display: none;
  right: 10px;
  bottom: 100px;
  width: 52px;
  height: 52px;
  padding: 7px 10px;
  color: #0d0d0d;
  font-size: 36px;
  line-height: 45px;
  z-index: 999999;
}

/* Yandex Search ************************************************ */

.product_card_side {
  display: flex;
  justify-content: space-between;
  overflow-x: auto;
  width: 100%;
  margin: 0;
  padding: 16px 14px 32px 3px;
  list-style-type: none;
  -ms-scroll-snap-type: x mandatory;
  scroll-snap-type: x mandatory;
}

.product_card_side_item {
  width: 100%;
  margin: 0 8px 16px;
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 80vw;
  margin: 0 24px 3px 0;
  padding: 0 0 0;
  background-color: #fff;
  box-shadow: rgb(50 50 93 / 25%) 0px 2px 5px -1px,
    rgb(0 0 0 / 30%) 0px 1px 3px -1px;
  border-radius: 8px;
  scroll-snap-align: start;
}

.product_card_side_item_text {
  margin-top: 16px;
}

.slidercontrol {
  max-width: 1456px;
  margin: 0 auto;
  float: none;
  padding: 16px 24px;
}

.slidercontrol a {
  display: inline-block;
  margin: 0 4px 4px 0;
  float: none;
  width: auto;
}

/* ************************************************************** */
.car-brands {
  padding: 14px;
}
.car-brands-list {
  display: flex;
  flex-flow: column wrap;
  align-content: space-around;
  width: 100%;
  margin: 16px 0;
  list-style-type: none;
}
.car-brands-list li {
  position: relative;
  height: 40px;
  padding: 0 4px;
}
.car-brands-list .letter {
  position: absolute;
  top: 0;
  left: -16px;
  font-weight: bold;
}
/* ************************************************************** */

.byauto {
  margin-top: 0;
}

/* ************************************************************** */

.bottom_banner {
  margin-top: 32px;
  display: none;
}

.site_footer {
  width: 100%;
  /* margin-top: 32px; */
  margin-bottom: 68px;
  background-color: #fafafa;
}

.footer_top,
.footer_middle,
.footer_bottom_inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  max-width: 1456px;
  margin: 0 auto;
  padding: 0 14px;
}

.footer_top {
  padding: 32px 12px;
  border-bottom: 2px solid var(--main-red-color);
}

.social_icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  list-style-type: none;
  font-size: 27px;
}

.social_icons a:hover i.fa-youtube {
  color: #ff0000;
}

.social_icons a:hover i.fa-instagram {
  color: #e4405f;
}

.social_icons a:hover i.fa-google-plus-g {
  color: #dd4b39;
}

.social_icons a:hover i.fa-facebook {
  color: rgb(58, 88, 158);
}

.social_icons a:hover i.fa-twitter {
  color: #55acee;
}

.social_icons a:hover i.fa-vk {
  color: #4c75a3;
}

.social_icons a:hover i.fa-odnoklassniki {
  color: #ee8208;
}

.footer_phone {
  width: 100%;
  margin-top: 32px;
  text-align: center;
}

.footer_phone a {
  font-size: 27px;
  font-weight: bold;
  color: #070707;
}

.footer_phone a:hover {
  text-decoration: none;
}

.footer_phone span {
  color: var(--blue-links-color);
}

.footer_middle {
  margin-top: 64px;
}

.footer_middle nav {
  width: 100%;
  width: calc(50% - 7px);
}

.footer_middle ul a {
  display: block;
  padding: 4px 0;
  color: var(--blue-links-color);
}

.footer_middle ul a:hover {
  color: var(--main-active-red-color);
}

.footer_middle ul {
  list-style-type: none;
}

.footer_middle h5 {
  position: relative;
  width: 100%;
  padding: 0 0 8px 0;
  font-size: 1.25em;
  line-height: 1.25;
  margin-bottom: 0.45em;
}

.footer_middle h5::after {
  content: "";
  position: absolute;
  bottom: 0;
  display: block;
  width: 83%;
  height: 2px;
  background-color: #999;
}
.footer-address {
  width: 100%;
  margin-top: 32px;
}
.footer-address h5 {
  margin-bottom: 16px;
}
.footer-address h5::after {
  width: 100%;
}

.footer_info_avtonovosti {
  margin-top: 32px;
}

.footer-schedule {
  width: calc(50% - 7px);
  margin-top: 32px;
}

.footer-schedule li {
  display: flex;
  justify-content: space-between;
  padding: 4px 8px;
}

.footer-schedule sup {
  color: #555;
}

.footer-address p {
  margin-top: 7px;
}

.footer-address-map {
  display: block;
  margin-top: 14px;
}

.footer-address-map img {
  width: 100%;
}

.footer_map {
  height: 350px;
  margin-top: 64px;
}

.footer_bottom {
  margin-top: 14px;
  padding: 16px 0;
  background-color: #dadada;
}

.footer-logo img {
  height: 29px;
}

.footer-bottom-text {
  margin: 14px 0 0;
}

.pay_systems {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.pay_systems p {
  width: 100%;
}

.pay_systems img {
  width: 50px;
  height: 50px;
  margin: 14px 14px 0;
  box-shadow: rgb(50 50 93 / 25%) 0px 2px 5px -1px,
    rgb(0 0 0 / 30%) 0px 1px 3px -1px;
  border-radius: 8px;
  overflow: hidden;
}

.news_sidebar {
  display: none;
}

.social_widget.vk_comments {
  width: 100%;
  margin-bottom: 24px;
  padding: 0 14px;
}

#banner40 {
  margin-top: 36px;
  background-image: url(//top-tuning.ru/img/special-discount-top-tuning1200.jpg);
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: 100%;
  display: block;
  width: 100%;
  max-width: 1456px;
  height: 192px;
  margin: 0 auto;
  clear: both;
}

.light-btn {
  position: relative;
  display: flex;
  align-content: center;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  padding: 10px 0;
  font-family: Roboto, sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #212121;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  background-color: #fafafa;
  border: none;
  border: 2px solid var(--main-red-color);
  appearance: none;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

.light-btn::before {
  content: "";
  display: block;
  position: absolute;
  width: 44px;
  height: 100%;
  left: -4%;
  top: 0;
  background: rgba(255, 255, 255, 0.89);
  opacity: 0.9;
  filter: blur(8px);
  transform: skewX(-35deg);
  animation: light-btn__before 7s linear infinite;
}

.light-btn::after {
  content: "";
  display: block;
  position: absolute;
  width: 16px;
  height: 100%;
  left: -2%;
  top: 0;
  background: rgba(255, 255, 255, 0.99);
  opacity: 0.99;
  filter: blur(8px);
  transform: skewX(-35deg);
  animation: light-btn__after 7s linear infinite;
}

.light-btn:hover {
  border-color: #8e8e93;
  color: #6b6b6b;
  box-shadow: 0px 0px 8px #999;
}

.filter-pag {
  position: relative;
  width: 100%;
}

.get_next {
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 1392px;
  margin: 0 0 0 16px;
}

.get_next span {
  z-index: 1;
}

.get_next.hidden {
  visibility: hidden;
}

.filter-pag .light-btn {
  position: relative;
  bottom: auto;
  left: auto;
  transform: none;
  width: 100%;
  margin: 32px 0 0;
}

@keyframes light-btn__before {
  0% {
    opacity: 0.99;
  }
  100% {
    left: 104%;
    opacity: 0.99;
  }
}

@keyframes light-btn__after {
  0% {
    opacity: 0.99;
  }
  100% {
    left: 106%;
    opacity: 0.99;
  }
}

.autotext,
.category-description {
  max-width: 870px;
  max-width: 100%;
  margin: 128px auto 32px;
  overflow: hidden;
}

@media screen and (min-width: 440px) {
  .social_icons li:first-child {
    width: auto;
  }
  .footer_middle nav {
    width: calc(50% - 8px);
    padding: 0 24px 0 0;
  }
  .footer_info_about {
    margin-top: 0;
  }
  .footer-schedule li {
    align-items: flex-end;
    justify-content: flex-start;
  }
  .footer-schedule span {
    padding: 0 0 0 14px;
  }
  .footer-bottom-text {
    margin: -4px 0 0;
  }
}

@media screen and (min-width: 524px) {
  .product_card_side_item {
    width: calc(1 / 2 * 100% - 16px);
    margin: 0 8px 16px;
  }
}

@media screen and (min-width: 640px) {
  .social_icons {
    width: auto;
  }
  .social_icons li {
    margin-right: 8px;
  }
  .footer_phone {
    width: auto;
    margin-top: 0;
  }
  .footer_middle nav {
    width: calc((100% - 32px) / 3);
  }
  .footer_info_avtonovosti {
    margin-top: 0;
  }
  .footer-address {
    width: calc(50% - 7px);
  }
}

@media screen and (min-width: 720px) {
  .social_icons li {
    margin-right: 16px;
  }
  .news_sidebar {
    display: block;
  }
  .showcase {
    padding: 0 32px;
  }
  #vk_comments {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .site-header .nav-cart {
    width: 36px;
    height: 36px;
  }
  .site-header .btn_menu_icons {
    width: 36px;
    height: 36px;
  }
  .nav-cart img {
    height: 18px;
  }
  .site-header .nav-phone {
    width: 36px;
    height: 36px;
  }
  .nav-phone img {
    height: 20px;
  }
  .bottom-nav {
    display: none;
  }
  ._breadcrumbs {
    padding: 0 24px;
  }
  .showcase {
    padding: 0 24px;
  }
  .site_footer {
    margin-bottom: 0;
  }
  .footer_top,
  .footer_middle,
  .footer_bottom_inner {
    padding: 0 14px;
  }
  .footer_top {
    padding: 32px 14px;
  }
  .footer_bottom_inner {
    align-items: center;
    justify-content: flex-start;
  }
  .footer-bottom-text {
    display: flex;
    margin: 0;
  }
  .footer-bottom-text p {
    padding-left: 14px;
  }
}

@media screen and (min-width: 920px) {
  .product_card_side_item {
    width: calc(1 / 3 * 100% - 16px);
    margin: 0 8px 16px;
    margin: 0 0 16px;
  }
}

@media screen and (min-width: 960px) {
  .social_icons li {
    margin-right: 24px;
  }
  .footer_middle nav {
    width: calc(25% - 8px);
  }
  .footer_info {
    width: calc(25% - 8px);
    margin-top: 0;
  }
  .footer_info ul {
    width: 100%;
  }
  .footer_info_addr {
    margin-top: 32px;
  }
}
@media screen and (max-height: 767px) and (min-width: 1024px) {
  .breadcrumbs_wrap {
    margin: 16px 0;
  }
}
@media screen and (min-width: 1024px) {
  body {
    padding-top: 0;
  }
  .site-header .btn_menu_icons {
    width: 44px;
    height: 44px;
  }
  .nav-cart {
    width: 44px;
  }
  .site-header .nav-cart {
    width: 44px;
    height: 41px;
    margin: 0 auto;
  }
  .nav-cart img {
    height: 22px;
  }
  .nav-phone {
    width: 44px;
    height: 42px;
  }
  .nav-phone img {
    height: 22px;
  }
  ._breadcrumbs {
    padding: 0 24px;
  }
  .car-brands {
    padding: 24px;
  }
  .showcase {
    padding: 0 24px;
  }
  .autotext,
  .category-description {
    column-count: 2;
    column-gap: 44px;
    overflow: hidden;
    transition: height 0.2s ease-in-out;
  }
  .footer_top,
  .footer_middle,
  .footer_bottom_inner {
    padding: 0 24px;
  }
  .footer_top {
    padding: 32px 24px;
  }
  .footer_middle {
    padding-bottom: 32px;
  }
  .footer_middle nav {
    width: calc(20% - 7px);
  }
  .footer-schedule,
  .footer-address {
    width: calc(20% - 7px);
    margin-top: 0;
  }
}

@media screen and (min-width: 1200px) {
  .product_card_side_item {
    width: calc(1 / 4 * 100% - 16px);
  }
}

@media screen and (min-width: 1456px) {
  .car-brands {
    padding: 0 calc((100% - 1456px + 48px) / 2);
  }
  .showcase {
    padding: 0 7%;
  }
  .filter-pag .light-btn {
    margin: 44px auto 0;
  }
  .footer_middle nav {
    width: 20%;
  }
  .footer_info_addr {
    margin-top: 0;
  }
  .footer-bottom-text p {
    padding-left: 24px;
  }
}

/* temp ******************************** temp ******************************* temp */

.showcase {
  margin-bottom: 80px;
  padding: 0 12px;
}

.pop-up {
  display: none;
  position: fixed;
  padding: 15px;
  max-width: 1000px;
  width: auto;
  margin: 0 auto;
  margin-top: 0px;
  height: 80%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: left;
  margin-top: 30px;
  margin-bottom: 150px;
  background: #fff;
  z-index: 101;
  border: 1px solid #be0101;
  overflow: hidden;
}

.pop-up {
  -webkit-box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 0px 9999px rgba(0, 0, 0, 0.5);
}

.pop-up .close-popup {
  position: fixed;
  top: 5px;
  right: 7px;
  padding: 5px;
}

.pop-up .pop-up-wrapp {
  position: relative;
  width: 100%;
  height: 90%;
  padding-bottom: 50px;
  margin-bottom: 20px;
  overflow: scroll;
}

.text-center {
  text-align: center;
}

.js.pagination,
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  list-style-type: none;
  width: 100%;
  margin: 44px auto 0;
  color: #ddd;
  font-size: 16px;
}

.js.pagination li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 16px 16px 0;
  cursor: pointer;
  transition: color 0.1s, border-color 0.9s ease-in;
}
.js.pagination > li {
  display: none;
}
.js.pagination li.visible,
.js.pagination li.first-page,
.js.pagination li.last-page {
  display: list-item;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
}

.js.pagination li.first-page.more {
  margin-right: 40px;
}

.js.pagination li.last-page.more {
  margin-left: 24px;
}

.js.pagination li.active {
  border: 1px solid;
  border-radius: 16px 8px;
  border-radius: 3px;
  color: var(--main-red-color);
  font-weight: bold;
}
.js.pagination li:hover {
  border: 1px solid;
  border-radius: 16px 8px;
  border-radius: 3px;
  color: var(--main-active-red-color);
}
.js.pagination .first-page.more::after,
.js.pagination .last-page.more::before {
  content: "...";
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  color: #000;
}

.js.pagination .first-page.more::after {
  right: calc(-100% - 8px);
}

.js.pagination .last-page.more::before {
  left: calc(-100% - 8px);
}

.left-pag-arrow,
.right-pag-arrow {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' fill='%23999' d='M15.483 9.297l-3.9 3.9-3.9-3.9a.99.99 0 00-1.4 1.4l4.593 4.593a1 1 0 001.414 0l4.593-4.593a.99.99 0 10-1.4-1.4z'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(125, 125, 125, 0.05);
}

.left-pag-arrow {
  transform: rotate(90deg);
}

.right-pag-arrow {
  margin-right: 0;
  transform: rotate(-90deg);
}

@keyframes rotation {
  0% {
    transform: rotate(0deg) scaleX(1);
  }
  50% {
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    transform: rotate(360deg) scaleX(1);
  }
}

@keyframes rotationbefore {
  0% {
    transform: rotate(10deg) scaleX(1);
  }
  50% {
    transform: rotate(190deg) scale(0.8);
  }
  100% {
    transform: rotate(370deg) scaleX(1);
  }
}

.user-cars a {
  color: #0857a6;
  border-bottom: 1px solid;
}

body::after {
  /* content: ""; */
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-image: repeating-linear-gradient(
    to right,
    rgba(32, 64, 128, 0.05) 5vw,
    rgba(32, 64, 128, 0.05) 10vw,
    transparent 10vw,
    transparent 15vw
  );
}

#app {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 999999;
  transform: translate(-50%, 0%);
  padding: 8px 16px;
  background: #ddd;
  border: 4px solid #fff;
  box-shadow: 4px 4px #333, -4px -4px #333, 4px -4px #333, -4px 4px #333;
}

/*.product_page_description_wrapper iframe[src*="vkvideo.ru"] {*/
/*  width: 100%;*/
/*  max-width: 100%;*/
/*  height: auto;*/
/*  aspect-ratio: 16 / 9;*/
/*  display: block;*/
/*  border: 0;*/
/*}*/

.vk-video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}

.vk-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}