.main {
  /* height: 100%; */
  display: flex;
  background: #192e31;
}
.main.mabout {
  padding-top: 100px;
}
@media (max-width: 768px) {
  .main.mabout {
    padding-top: 10px;
  }
}
@media (max-width: 768px) {
  .main {
    display: block;
    padding-top: 200px;
    padding: 30px 15px 40px 15px;
  }
}
@media (max-width: 768px) {
  .incontrol {
    overflow: unset;
    height: unset;
    position: unset;  
  }
}
.phone {
  position: absolute;
  right: 0;
  margin-right: 135px;
  padding-top: 47px;
}
@media (max-width: 1440px) {
  .phone {
    margin-right: 6%;
    padding-top: 47px;
  }
}
@media (max-width: 1024px) {
  .phone {
    margin-right: 100px;
  }
}
@media (max-width: 900px) {
  .phone {
    margin-right: 80px;
  }
}
@media (max-width: 768px) {
  .phone {
    position: absolute;
    right: 0;
    margin-right: 100px;
    margin-top: -10px;
  }
}
@media (max-width: 500px) {
  .phone {
    position: absolute;
    right: 0;
    padding-top: 32px;
    margin-right: 70px;
  }
}
@media (max-width: 370px) {
  .phone {
    position: absolute;
    right: 0;
    padding-top: 32px;
    margin-right: 55px;
  }
}
.inblesk {
  display: none;
}
@media (max-width: 768px) {
  .inblesk {
    background: #3d3d3d;
    display: flex;
    flex-direction: column;
  }
}
.inblesk p {
  color: white;
  font-size: 10px;
  font-family: 'slab';
  right: 0;
  margin-left: 10px;
}
.inblesk a {
  color: white;
  font-size: 10px;
  font-family: 'slab';
  right: 0;
  position: absolute;
  margin-right: 20px;
  margin-top: 56px;
}
a.prapra {
  position: unset;
  right: unset;
  margin: 0;
  text-shadow: none;
  margin-left: 10px;
}
.main.name {
  background-image: url("../../images/name.jpg");
  background-size: cover;
  background-position: center;
  height: 100vh;
}
@media (max-width: 768px) {
  .main.name {
    background: linear-gradient(to right, rgba(25, 46, 49, 0.9) 50%, rgba(25, 46, 49, 0.4)), url("../../images/name.jpg");
    background-size: cover;
    background-position: 73%;
    height: unset;
  }
}
.main.name .inner__left {
  padding-top: 200px;
}
@media (max-width: 1024px) {
  .main.name .inner__left {
    padding-top: 110px;
  }
}
@media (max-width: 768px) {
  .main.name .inner__left {
    padding-top: 190px;
  }
}
@media (max-width: 768px) {
  .main.name {
    padding: 0 20px 40px 15px;
  }
}
.main.dart {
  background-image: url("../../images/art.jpg");
  background-size: cover;
  background-position: center;
  height: 100vh;
}
@media (max-width: 768px) {
  .main.dart {
    background: linear-gradient(to right, rgba(25, 46, 49, 0.9) 50%, rgba(25, 46, 49, 0.4)), url("../../images/art.jpg");
    background-size: cover;
    background-position: 70%;
    height: unset;
    display: block;
  }
}
.main.fetr {
  background-image: url("../../images/cont.jpg");
  background-size: cover;
  background-position: center;
  height: 100vh;
}
@media (max-width: 768px) {
  .main.fetr {
    background: linear-gradient(to right, rgba(25, 46, 49, 0.9) 50%, rgba(25, 46, 49, 0.4)), url("../../images/cont.jpg");
    background-size: cover;
    background-position: 73%;
    height: unset;
  }
}
.main.article {
  overflow: unset;
  -webkit-overflow-scrolling: touch;
  display: block;
  padding-bottom: 100px;
  padding-top: 100px;
}
@media (max-width: 1200px) {
  .main.article {
    padding: 0;
    padding-top: 100px;
  }
}
@media (max-width: 450px) {
  .main.article {
    padding-top: 0px;
  }
}
.main.article .table_order {
  margin: 0 auto;
  max-width: 720px;
}
.main.article .table_order .order {
  max-width: 400px;
  min-height: 408px;
  display: flex;
  flex-direction: column;
}
.main.article .table_order .order .dsself {
  display: none;
}
.main.article .table_order .order .dsself.active {
  display: block;
}
.main.article .table_order .order .dsself.active ~ .commmbi .combi__fate {
  display: none;
}
.main.article .table_order .order .dsself.active + .dsdeli {
  display: none;
}

@media (max-width: 768px) {
  .main.article .table_order .order {
    margin: 0 auto;
    min-width: 400px;
  }
}
@media (max-width: 450px) {
  .main.article .table_order .order {
    margin: 0 auto;
    min-width: unset;
  }
}
.main.article .table_order .order .chek_tit__ortit {
  margin: 0 auto;
}
.main.article .table_order .order .chek_tit p {
  font-family: slab;
  color: white;
  font-size: 18px;
  text-align: center;
}
.main.article .table_order .order .chek_tit .odrer {
  font-family: slab;
  color: white;
  font-size: 14px;
  text-align: center;
  padding: 5px;
  display: flex;
  justify-content: center;
}
.main.article .table_order .order .chek_tit.desetit {
  display: none;
}
.main.article .table_order .order .chek_tit.desetit.active{
  display: block;
}
.main.article .table_order .order .chek_tit.desetit.active ~ .desert {
  display: none;
}
.main.article .table_order .order .combi_date {
  margin: 0 auto;
  padding: 8px 0;
  width: 100%;
  justify-content: center;
  display: flex;
}
.main.article .table_order .order .combi_date__nate {
  display: flex;
  flex-direction: column;
}
.main.article .table_order .order .combi_date .combi {
  padding-right: 10px;
  margin-left: 10px;
}
.main.article .table_order .order .combi_date .combi__fate {
  margin: 0;
}
@media (max-width: 768px) {
  .main.article .table_order .order .combi_date .combi__fate {
    margin: 0 auto;
  }
}
.main.article .table_order .order .combi_date .combi .dated {
  color: #192e31;
  font-family: roboto;
  font-size: 16px;
  padding: 8px;
  font-style: italic;
  width: 190px;
  border-radius: 4px;
  border: 1px solid #dadce1;
  background: #fff6f6;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .main.article .table_order .order .combi_date .combi .dated {
    width: 150px;
  }
}
.main.article .table_order .order .combi_date .combi .dated__comment {
  width: 400px;
}
@media (max-width: 768px) {
  .main.article .table_order .order .combi_date .combi .dated__comment {
    width: 350px;
  }
}
@media (max-width: 450px) {
  .main.article .table_order .order .combi_date .combi .dated__comment {
    width: 300px;
  }
}
.main.article .table_order .order .combi_date .combi .dated__era {
  width: 400px;
  margin-bottom: 10px;
}
@media (max-width: 768px) {
  .main.article .table_order .order .combi_date .combi .dated__era {
    width: 350px;
  }
}
@media (max-width: 450px) {
  .main.article .table_order .order .combi_date .combi .dated__era {
    width: 300px;
  }
}
.main.article .table_order .order .delivery {
  margin: 0 auto;
  padding: 8px 0;
  width: 100%;
  display: flex;
}
@media (max-width: 450px) {
  .main.article .table_order .order .delivery {
    width: 80%;
  }
}
.main.article .table_order .order .delivery__ordev {
  width: 500px;
  margin-top: 40px;
}
@media (max-width: 768px) {
  .main.article .table_order .order .delivery__ordev {
    width: 350px;
  }
}
@media (max-width: 400px) {
  .main.article .table_order .order .delivery__ordev {
    width: 250px;
  }
}
.main.article .table_order .order .delivery .self {
  flex: 1;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 8px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  box-sizing: border-box;
  border-left: 1px solid white;
  border: 2px solid #f3b258;
  text-align: center;
  font-family: roboto;
  color: white;
  font-size: 16px;
  cursor: pointer;
}
.main.article .table_order .order .delivery .self.hidden {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-right: 1px solid white;
  border: 1px solid white;
  border-right: none;
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
}
.main.article .table_order .order .delivery .self .self_but {
  font-family: roboto;
  color: white;
  font-size: 16px;
}
.main.article .table_order .order .delivery .deli {
  flex: 1;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 8px;
  box-sizing: border-box;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-right: 1px solid white;
  border: 1px solid white;
  border-left: none;
  text-align: center;
  font-family: roboto;
  color: white;
  font-size: 16px;
  cursor: pointer;
}
.main.article .table_order .order .delivery .self.hidden ~ .deli {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-left: 1px solid white;
  border: 2px solid #f3b258;
}
.main.article .table_order .order .delivery .deli .deli_but {
  font-family: roboto;
  color: white;
  font-size: 16px;
}
.main.article .table_order .total {
  max-width: 320px;
  display: flex;
  flex-direction: column;
  padding: 16px 16px 0;
  min-height: 500px;
}
@media (max-width: 768px) {
  .main.article .table_order .total {
    min-height: 50px;
  }
}
.main.article .table_order .total__crash {
  margin-left: 100px;
}
@media (max-width: 1024px) {
  .main.article .table_order .total__crash {
    margin-left: 0px;
  }
}
@media (max-width: 768px) {
  .main.article .table_order .total__crash {
    margin: 0 auto;
    padding-bottom: 100px;
  }
}
@media (max-width: 768px) {
  .main.article .total__crash {
    margin: 0 auto;
    padding-bottom: 100px;
  }
}
@media (max-width: 450px) {
  .main.article .table_order .total__crash {
    padding-bottom: 20px;
  }
}
.main.article .table_order__finnal {
  display: flex;
}
.main.article .table_order__orfinnal {
  display: block;
}
@media (max-width: 1024px) {
  .main.article .table_order__finnal {
    flex-wrap: wrap;
    justify-content: center;
  }
}
.main.article .table_order__orfinnal .order {
  max-width: 720px;
}
.main.article .tabel {
  margin: 0 auto;
  max-width: 720px;
}
.main.article .tabel__orffin {
  max-width: 500px;
}
@media (max-width: 768px) {
  .main.article .tabel__orffin {
    margin: 0;
  }
}
.main.article .tabel__ajain {
  max-width: 320px;
}
.main.article .tabel .tabel_headers {
  height: 48px;
  background: #10363b;
  padding: 0 16px;
  margin: 0 -16px;
}
.main.article .tabel .tabel_headers__tabheador {
  padding-bottom: 20px;
}
@media (max-width: 400px) {
  .main.article .tabel .tabel_headers__tabheador {
    height: 60px;
    padding: 0;
    margin: 0;
  }
}
.main.article .tabel .tabel_headers .tabel_desc {
  display: flex;
  position: relative;
  align-items: stretch;
  justify-content: flex-start;
  border-bottom: 0.5px solid transparent;
}
.main.article .tabel .tabel_headers .tabel_desc .desc {
  display: flex;
  min-height: 48px;
  flex: 1;
  align-items: center;
}
.main.article .tabel .tabel_headers .tabel_desc .desc__ortotal {
  flex-wrap: wrap;
}
.main.article .tabel .tabel_headers .tabel_desc .desc .de_name {
  color: white;
  font-family: slab;
  font-size: 14px;
}
.main.article .tabel .tabel_headers .tabel_desc .desc .de_name__carnt {
  font-size: 13px;
  font-style: italic;
  text-align: end;
}
.main.article .tabel .tabel_headers .tabel_desc .desc__disc {
  min-width: 160px;
}
@media (max-width: 1024px) {
  .main.article .tabel .tabel_headers .tabel_desc .desc__disc {
    min-width: 90px;
  }
}
.main.article .tabel .tabel_headers .tabel_desc .desc__name {
  flex: 1;
  min-width: 340px;
  justify-content: center;
}
.main.article .tabel .tabel_headers .tabel_desc .desc__name__orr {
  flex: 1;
  min-width: 340px;
}
@media (max-width: 1024px) {
  .main.article .tabel .tabel_headers .tabel_desc .desc__name__orr {
    flex: 1;
    min-width: 200px;
  }
}
@media (max-width: 768px) {
  .main.article .tabel .tabel_headers .tabel_desc .desc__name__orr {
    flex: 1;
    min-width: 100px;
  }
}
@media (max-width: 1024px) {
  .main.article .tabel .tabel_headers .tabel_desc .desc__name {
    min-width: 200px;
  }
}
@media (max-width: 400px) {
  .main.article .tabel .tabel_headers .tabel_desc .desc__name {
    min-width: 120px;
    text-align: center;
    margin-right: 10px;
  }
}
.main.article .tabel .tabel_headers .tabel_desc .desc__spec {
  min-width: 125px;
  justify-content: center;
}
@media (max-width: 1024px) {
  .main.article .tabel .tabel_headers .tabel_desc .desc__spec {
    min-width: 65px;
  }
}
.main.article .tabel .tabel_headers .tabel_desc .desc__cost {
  min-width: 125px;
  justify-content: center;
}
@media (max-width: 1024px) {
  .main.article .tabel .tabel_headers .tabel_desc .desc__cost {
    display: none;
  }
}
.main.article .tabel .tabel_headers .tabel_desc .desc__quan {
  min-width: 125px;
  justify-content: center;
}
@media (max-width: 1024px) {
  .main.article .tabel .tabel_headers .tabel_desc .desc__quan {
    min-width: 65px;
  }
}
.main.article .tabel .tabel_headers .tabel_desc .desc__total {
  min-width: 125px;
  justify-content: flex-end;
}
@media (max-width: 1024px) {
  .main.article .tabel .tabel_headers .tabel_desc .desc__total {
    min-width: 65px;
  }
}
.main.article .tabel .tabel_insert {
  padding: 0;
  margin: 0;
  font: inherit;
  box-sizing: border-box;
}
.main.article .tabel .tabel_insert .inserted {
  display: flex;
  position: relative;
  align-items: stretch;
  justify-content: flex-start;
  border-bottom: 0.5px solid #133e44;
}
.main.article .tabel .tabel_insert .inserted .itemin {
  display: flex;
  min-height: 48px;
  flex: 1;
  align-items: center;
}
.main.article .tabel .tabel_insert .inserted .itemin .de_name {
  color: white;
  font-family: roboto;
  font-size: 14px;
}
.main.article .tabel .tabel_insert .inserted .itemin .de_dena {
  color: white;
  font-family: roboto;
  font-size: 12px;
  text-align: center;
}
.main.article .tabel .tabel_insert .inserted .itemin .deleteItemLocalStorage {
  color: rgba(243, 178, 88, 0.8);
  font-family: roboto;
  font-size: 12px;
  border-bottom: 1px dashed;
  margin-left: 10px;
  cursor: pointer;
}
.main.article .tabel .tabel_insert .inserted .itemin .deleteItemLocalStorage:hover {
  color: rgba(243, 178, 88, 0.8);
  font-family: roboto;
  font-size: 12px;
  border-bottom: 1px dashed white;
  margin-left: 10px;
  cursor: pointer;
}
.main.article .tabel .tabel_insert .inserted .itemin__disc {
  min-width: 160px;
}
@media (max-width: 1024px) {
  .main.article .tabel .tabel_insert .inserted .itemin__disc {
    min-width: 90px;
  }
}
.main.article .tabel .tabel_insert .inserted .itemin__nam {
  min-width: 340px;
}
@media (max-width: 1024px) {
  .main.article .tabel .tabel_insert .inserted .itemin__nam {
    min-width: 200px;
  }
}
.main.article .tabel .tabel_insert .inserted .itemin__spe {
  min-width: 125px;
  justify-content: center;
}
@media (max-width: 1024px) {
  .main.article .tabel .tabel_insert .inserted .itemin__spe {
    min-width: 65px;
    justify-content: center;
  }
}
.main.article .tabel .tabel_insert .inserted .itemin__cos {
  min-width: 125px;
  justify-content: center;
}
@media (max-width: 1024px) {
  .main.article .tabel .tabel_insert .inserted .itemin__cos {
    display: none;
  }
}
.main.article .tabel .tabel_insert .inserted .itemin__qua {
  min-width: 125px;
  justify-content: center;
}
@media (max-width: 1024px) {
  .main.article .tabel .tabel_insert .inserted .itemin__qua {
    min-width: 65px;
    justify-content: center;
  }
}
.main.article .tabel .tabel_insert .inserted .itemin__quall {
  min-width: 60px;
  justify-content: center;
}
.main.article .tabel .tabel_insert .inserted .itemin__tot {
  min-width: 125px;
  justify-content: flex-end;
}
@media (max-width: 1024px) {
  .main.article .tabel .tabel_insert .inserted .itemin__tot {
    min-width: 65px;
    justify-content: flex-end;
  }
}
.main.article .tabel .tabel_insert .inserted .itemin__totre {
  min-width: 80px;
  justify-content: flex-end;
}
.main.article .tabel .tabel_insert .inserted .itemin .in_prod img {
  width: 80px;
  margin-top: 5px;
}
.main.article .tabel .tabel_insert .inserted .itemin .in_prod .im_tos {
  width: 50px;
}
.main.article .tabel .tabel_insert .inserted .itemin .in_text {
  margin-left: 10px;
  min-width: 130px;
}
.main.article .tabel .tabel_insert .inserted .itemin .in_text__tose {
  font-size: 8px;
}
.main.article .tabel .tabel_insert .inserted .itemin .in_text .text__tose {
  font-size: 12px;
}
.main.article .tabel .tabel_insert .inserted .itemin .in_text p {
  font-size: 14px;
  font-weight: bold;
  text-shadow: none;
}
.main.article .tabel .tabel_insert .inserted .itemin .in_text .ruble {
  font-weight: 100;
}
.main.article .onshop {
  display: flex;
  position: relative;
  width: 1300px;
  box-sizing: border-box;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .main.article .onshop {
    width: unset;
  }
}
.main.article .onshop .onmenu {
  width: 245px;
  margin-top: 100px;
}
@media (max-width: 1024px) {
  .main.article .onshop .onmenu {
    display: none;
  }
}
.main.article .onshop .onmenu .card {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 30px;
}
@media (max-width: 768px) {
  .main.article .onshop .onmenu .card {
    margin-left: -90px;
  }
}
.main.article .onshop .onmenu .card.tt {
  margin-bottom: 10px;
}
.main.article .onshop .onmenu .card.tt a {
  font-family: roboto;
  text-shadow: none;
}
.main.article .onshop .onmenu .card.tt a:hover {
  text-shadow: 1px 1px 2px red;
}
.main.article .onshop .shop {
  width: 935px;
  position: relative;
  margin-left: 40px;
  padding-top: 14px;
}
@media (max-width: 1024px) {
  .main.article .onshop .shop {
    width: 100vw;
    margin: 10px auto;
  }
}
.main.article .onshop .shop .mpr {
  margin: 25px;
  display: flex;
  flex-wrap: wrap;
}
@media (max-width: 1024px) {
  .main.article .onshop .shop .mpr {
    justify-content: center;
    margin: 7px;
  }
}
.main.article .onshop .shop .mpr .product {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.main.article .onshop .shop .mpr .product a {
  text-shadow: none;
  padding: 10px 0px 0px 10px;
}
@media (max-width: 768px) {
  .main.article .onshop .shop .mpr .product a {
    text-shadow: none;
    padding: unset;
  }
}
.main.article .onshop .shop .mpr .product a:hover {
  text-shadow: 1px 1px 2px red;
}
.main.article .onshop .shop .mpr .product .pprod {
  margin-bottom: 30px;
  padding: 10px;
}
@media (max-width: 768px) {
  .main.article .onshop .shop .mpr .product .pprod {
    margin-bottom: 17px;
    padding: 8px;
  }
}
.main.article .onshop .shop .mpr .product .pprod img {
  height: 250px;
  box-shadow: 0px 0px 5px black;
}
@media (max-width: 450px) {
  .main.article .onshop .shop .mpr .product .pprod img {
    height: 160px;
  }
}
@media (max-width: 379px) {
  .main.article .onshop .shop .mpr .product .pprod img {
    height: 150px;
  }
}
@media (max-width: 360px) {
  .main.article .onshop .shop .mpr .product .pprod img {
    height: 140px;
  }
}
@media (max-width: 350px) {
  .main.article .onshop .shop .mpr .product .pprod img {
    height: 133px;
  }
}
.main.article .onshop .shop .mpr .product .pprod img:hover {
  box-shadow: 0px 0px 5px #f3b258;
}
.main.article .onshop .shop .mpr .product .pprod .card-text {
  text-align: center;
  max-width: 230px;
}
@media (max-width: 768px) {
  .main.article .onshop .shop .mpr .product .pprod .card-text {
    text-align: center;
    max-width: 230px;
  }
}
@media (max-width: 500px) {
  .main.article .onshop .shop .mpr .product .pprod .card-text {
    text-align: center;
    max-width: 140px;
  }
}
.main.article .onshop .shop .mpr .product .pprod .card-text .ruble {
  font-family: slab;
  margin: 0;
  padding: 0;
  margin-top: -15px;
  font-size: 12px;
}
@media (max-width: 760px) {
  .main.article .onshop .shop .mpr .product .pprod .card-text .ruble {
    font-size: 10px;
  }
}

.main.article .onshop .shop p.valname {
  font-size: 18px;
}
@media (max-width: 768px) {
  .main.article .onshop .shop p.valname {
    font-size: 12px;
    margin-bottom: 15px;
  }
}
@media (max-width: 330px) {
  .main.article .onshop .shop p {
    font-size: 11px;
  }
}
.main.article .onshop .shop tr {
  font-size: 18px;
}
@media (max-width: 768px) {
  .main.article .onshop .shop tr {
    font-size: 16px;
  }
}
@media (max-width: 330px) {
  .main.article .onshop .shop tr {
    font-size: 11px;
  }
}
.main.article .onshop .shop td {
  padding-bottom: 10px;
}
.main.article .onshop .shop .mprprod .breew {
  width: 120px;
}
.main.article .onshop .shop .mprprod .breew:hover {
  cursor: pointer;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
}
@media (max-width: 450px) {
  .main.article .onshop .shop .mprprod .breew {
    width: 80px;
  }
}
.main.article .onshop .shop .mprprod img {
  width: 750px;
}
.fonwwb {
  width: 750px;
}
.main.article .onshop .shop .mprprod .zoomable {
  width: 600px;
  cursor: zoom-in;
  transition: transform 0.3s ease;
}
.main.article .onshop .shop .mprprod .wbb {
  cursor: zoom-in;
  transition: transform 0.3s ease;
}
.main.raddd .journal {
  scroll-margin-top: 110px; 
}
.fonwbrad {
  max-height: 73vh;
  max-width: 1100px;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
}

.image-container {
  position: relative;
  width: 40%;
  text-align: center;
  text-align: -webkit-center;
}
@media (max-width: 768px) {
  .image-container {
    position: relative;
    width: 90%;
    text-align: center;
    text-align: -webkit-center;
  }
}

.image-container a {
  text-shadow: unset;
}

.image-container img {
  width: 100%;
  display: block;
  max-height: unset;
}
.hotspot {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 2px solid rgb(88, 88, 88);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  text-align: center;
  line-height: 40px;
  font-weight: bold;
  text-decoration: none;
  color: black;
  /* Центрирование метки относительно указанной точки */
  transform: translate(-50%, -50%);
}
@media (max-width: 768px) {
  .hotspot {
    width: 23px;
    height: 23px;
    line-height: 23px;
  }
}

.hotspotty {
  text-shadow: unset;
}

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.overlay-img {
  cursor: grab;
  user-select: none;
  /* Без ограничений по размеру – управление масштабом и перемещением через transform */
  max-width: none;
  max-height: none;
}

@media (max-width: 450px) {
  .main.article .onshop .shop .mprprod img {
    width: 98%;
  }
}
.main.article .journal {
  max-width: 720px;
  margin: 20px auto;
}
@media (max-width: 768px) {
  .main.article .journal {
    margin: 20px auto;
    padding: 0 10px;
  }
}
@media (max-width: 768px) {
  .main.article .journal__footer {
    margin: 20px auto;
    padding: 0 10px;
    padding-bottom: 30px;
  }
}
.main.article .journal .wbb {
  display: none;
}
.main.article .journal .active {
  display: block;
}
.main.article .journal.foto {
  max-width: 1100px;
  text-align: center;
  text-align: -webkit-center;
}
.main .news {
  max-width: 400px;
  display: flex;
}
@media (max-width: 768px) {
  .main .news {
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.main .news .newsbb {
  object-fit: cover;
  width: 200px;
  margin: 10px;
}
.main .news .newsbb.nebb {
  object-fit: cover;
  width: 180px;
  margin: 10px;
}
@media (max-width: 768px) {
  .main .news .newsbb.nebb {
    object-fit: cover;
    width: 140px;
    margin: 10px;
  }
}
.main .right {
  display: flex;
  flex-direction: column;
}
@media (max-width: 768px) {
  .main .right {
    display: flex;
    flex-direction: row;
  }
}
.main.article .obcrov {
  width: 65vw;
  margin: 0 auto;
  text-align: center;
  text-align: -webkit-center;
}
@media (max-width: 768px) {
  .main.article .obcrov {
    width: 100vw;
  }
}
@media (max-width: 768px) {
  .main.article .journal.foto {
    padding: 0;
  }
}
.main.article .journal.foto .fonwb {
  max-height: 83vh;
}
.main.article .journal.foto img {
  max-width: 1100px;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
}
@media (max-width: 1024px) {
  .main.article .journal.foto img {
    max-width: 100vw;
  }
}

.ttooon {
  display: flex;
  list-style: none;
  justify-content: center;
  padding-left: 20px;
  flex-wrap: wrap;
}


@media (max-width: 768px) {
  .ttooon  {
    padding-left: 0px;
  }
}
.main.article .obcrov img.fonnn {
  width: 100%;
  max-width: unset;
  object-fit: cover;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
}
.main.article .journal.foto img.fonnn {
  width: 99vw;
  max-width: unset;
  height: 80vh;
  object-fit: cover;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
}
@media (max-width: 768px) {
  .main.article .journal.foto img {
    width: 90vw;
    border: unset;
  }
}
.main.article .journal.foto__ind {
  max-width: 100vw;
}
@media (max-width: 768px) {
  .main.article .journal.foto__ind {
    width: 100vw;
    padding: 0;
  }
}
.main.article .journal.foto__ind img {
  max-height: 80vh;
  width: 85%;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}
.main.article .journal.foto_sm {
  max-width: 1000px;
  display: flex;
}
@media (max-width: 768px) {
  .main.article .journal.foto_sm {
    max-width: 1000px;
    display: flex;
  }
}
@media (max-width: 500px) {
  .main.article .journal.foto_sm {
    display: flex;
    flex-direction: column;
  }
}
.main.article .journal.foto_sm picture {
  padding-left: 20px;
  padding-right: 20px;
  margin-bottom: 5px;
}

@media (max-width: 360px) {
  .main.article .journal.foto_sm picture {
    width: 38%;
    padding-left: 10px;
  }
}
.main.article .journal.foto_sm picture img {
  max-width: 500px;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
}
.main.article .journal.foto_sm picture .pliqis {
  max-width: 104%;
}
@media (max-width: 500px) {
  .main.article .journal.foto_sm picture .pliqis {
    max-width: 85vw;
  }
}
@media (max-width: 500px) {
  .main.article .journal.foto_sm picture img {
    max-width: 85vw;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  }
}
.main.article .journal .ttoon {
  display: flex;
  list-style: none;
  justify-content: center;
  padding-left: 20px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .main.article .journal .ttoon {
      display: none;
      flex-wrap: wrap;
      padding-left: 0;
  }
  .indicator {
      display: flex;
      gap: 5px;
      justify-content: center;
      margin-top: -25%;
      margin-bottom: 14%;
  }
  .indicator .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #f3b258;
    border: 1px solid #13454d;
  }
  .indicator .dot.active {
      background-color: rgb(146, 146, 146);
  }
}

@media (max-width: 320px) {
  .indicator {
    display: flex;
    gap: 5px;
    justify-content: center;
    margin-top: -35%;
    margin-bottom: 14%;
  }
}

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  padding-top: 60px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
}
.modal-content {
  max-width: none;
  height: 90vh;
}


.main.article .journal .ttoon .deebi {
  margin: 0px 7px 10px 5px;
}
.main.article .journal .ttoon a {
  text-shadow: none;
}
.main.article .journal .ttoon li {
  margin: 15px;
}
@media (max-width: 450px) {
  .main.article .journal .ttoon li {
    margin: 5px;
  }
}
.main.article .journal .ttoon .card-text {
  text-align: center;
  max-width: 150px;
}
.main.article .journal .ttoon .card-text .text {
  font-family: slab;
  color: white;
  font-size: 18px;
  margin-top: 15px;
}
@media (max-width: 768px) {
  .main.article .journal .ttoon .card-text .text {
    width: 160px;
  }
}
@media (max-width: 450px) {
  .main.article .journal .ttoon .card-text .text {
    width: 100px;
    font-size: 13px;
  }
}
.main.article .journal .ttoon img {
  width: 150px;
}
.main.article .journal .ttoon img:hover {
  -webkit-filter: drop-shadow(0px 0px 2px #f3b258);
  filter: drop-shadow(0px 0px 2px #f3b258);
}
@media (max-width: 450px) {
  .main.article .journal .ttoon img {
    width: 100px;
  }
}

.main.article .journal .ttooon .deebi {
  margin: 0px 7px 10px 5px;
}
.main.article .journal .ttooon a {
  text-shadow: none;
}
.main.article .journal .ttooon li {
  margin: 15px;
}
@media (max-width: 450px) {
  .main.article .journal .ttooon li {
    margin-top: 0px;
    margin-right: 4px;
    margin-left: 4px;
    margin-bottom: 0px;
  }
}
.main.article .journal .ttooon .card-text {
  text-align: center;
  max-width: 150px;
}
.main.article .journal .ttooon .card-text .text {
  font-family: slab;
  color: white;
  font-size: 18px;
  margin-top: 15px;
}
@media (max-width: 768px) {
  .main.article .journal .ttooon .card-text .text {
    width: 160px;
  }
}
@media (max-width: 450px) {
  .main.article .journal .ttooon .card-text .text {
    width: 100px;
    font-size: 13px;
  }
}
.main.article .journal .ttooon img {
  width: 150px;
}
.main.article .journal .ttooon img:hover {
  -webkit-filter: drop-shadow(0px 0px 2px #f3b258);
  filter: drop-shadow(0px 0px 2px #f3b258);
}
@media (max-width: 450px) {
  .main.article .journal .ttooon img {
    width: 100px;
  }
}


.main.article .journal .buus {
  list-style: none;
  display: flex;
  justify-content: center;
  padding: 0;
  margin-bottom: 30px;
}
.main.article .journal .buus li {
  margin-right: 30px;
}
.main.article .journal .buus li .buto {
  font-family: slab;
  font-size: 16px;
}
@media (max-width: 330px) {
  .main.article .journal .buus li .buto {
    font-size: 12px;
  }
}
.main.article .journal .buus li .butto {
  font-family: slab;
  font-weight: bold;
  font-size: 16px;
  color: #192e31;
}
@media (max-width: 330px) {
  .main.article .journal .buus li .butto {
    font-size: 12px;
  }
}
.main.article .journal .buus .pokup {
  background-color: #e6e6e6;
  padding-left: 10px;
  padding-right: 10px;
}
.main.article .journal .buus .pokup a {
  text-shadow: none;
}
.main.article .journal .buus .pokup:hover {
  cursor: pointer;
  background-color: black;
}
.main.article .journal .buus .pokup:hover > .butto {
  color: white;
}
.main .inner.history {
  overflow: unset;
}
.main .inner.history .text p {
  vertical-align: middle;
}
.main .inner.history img {
  float: left;
}
.main .inner__left {
  padding: 50px 70px 0px 150px;
}
.main .inner__left .mob_sec.sun {
  max-width: 800px;
}
@media (max-width: 700px) {
  .main .inner__left .mob_sec.mount {
    height: unset;
  }
}
@media (max-width: 1024px) {
  .main .inner__left .mob_sec {
    height: calc(100vh - 200px);
    display: flex;
    align-content: center;
    flex-flow: column;
    justify-content: center;
    text-shadow: 0px 0px 10px black;
  }
}
@media (max-width: 768px) {
  .article .main.article {
    margin: 10px;
    padding-bottom: 50px;
  }
}
@media (max-width: 768px) {
  .main.article .mob_sec {
    margin: auto 0;
    width: unset;
  }
}
.main .inner__left .exppp {
  padding-bottom: 100px;
}
@media (max-width: 1024px) {
  .main .inner__left .exppp {
    padding-left: 70px;
  }
}
@media (max-width: 1500px) {
  .main .inner__left {
    padding: 50px 70px 100px 120px;
  }
}
@media (max-width: 1024px) {
  .main .inner__left {
    padding: 80px 60px 100px 50px;
  }
}
@media (max-width: 768px) {
  .main .inner__left {
    padding: 50px 15px 0px 10px;
  }
}
.hearde .emerge {
  position: absolute;
  display: none;
  right: 0;
  margin-top: 100px;
  margin-right: 10px;
  text-align: center;
  box-shadow: 0px 0px 16px black;
  border-radius: 10px;
  min-width: 170px;
}
@media (max-width: 768px) {
  .hearde .emerge {
    position: fixed;
    background-color: rgb(71, 63, 63);
    display: none;
    margin-top: 100px;
    margin-right: 20%;
    text-align: center;
    box-shadow: 0px 0px 16px black;
    border-radius: 10px;
    min-width: 170px;
  }
}
.hearde .emerge.active {
  display: unset;
}
.main .inner__left .xicon {
  max-width: 30%;
  position: absolute;
  right: 5%;
  top: 20%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.main.expo {
  overflow: unset;
}
.main.expo .infoto {
  max-width: 700px;
  margin-left: 40px;
  margin-top: 40px;
}
.main.expo .infoto img {
  border: 20px solid silver;
  max-width: 700px;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);
}
.main .spread-container {
  max-width: 800px;
  margin: 0 auto;
}
.arrow {
  position: absolute;
  left: 2%;
  top: 50%;
}
.arrow .leff {
  -webkit-filter: drop-shadow(1px 1px 1px black);
  filter: drop-shadow(1px 1px 1px black);
}
@media (max-width: 768px) {
  .arrow .leff {
    width: 40px;
  }
}
.arrow .leff:hover {
  cursor: pointer;
  -webkit-filter: drop-shadow(1px 4px 4px black);
  filter: drop-shadow(1px 4px 4px black);
  stroke: #f3b258;
}
.arriwa {
  position: absolute;
  right: 2%;
  top: 50%;
}
.arriwa .rigg {
  -webkit-filter: drop-shadow(1px 1px 1px black);
  filter: drop-shadow(1px 1px 1px black);
}
@media (max-width: 768px) {
  .arriwa .rigg {
    width: 40px;
  }
}
.arriwa .rigg:hover {
  cursor: pointer;
  -webkit-filter: drop-shadow(1px 4px 4px black);
  filter: drop-shadow(1px 4px 4px black);
  stroke: #f3b258;
}
.hidden-text {
  display: block;
}
.hitidden {
  display: none;
}
.toggle-btn {
  cursor: pointer;
  color: white;
  display: block;
  text-align: center;
  font-style: italic;
  position: relative;
  margin-top: -7px;
  border-radius: 10px;
  margin-bottom: 27px;
  opacity: 0.8;
  background-color: #7c3c3c38;
}
.faded {
  background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgba(0, 0, 0, 0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: opacity 0.3s ease-in-out;
}

.faded.full-opacity {
  background: none; /* Убираем градиент */
  color: white;   /* Восстанавливаем обычный цвет текста */
}

.icon_journal {
  background: unset;
  border-left: unset;
  width: 25%;
  padding: 100px 180px 0px 50px;
}
.about_car {
  list-style: none;
  padding: 0;
  margin-top: 40px;
  margin-bottom: 10px;
}
@media (max-width: 1024px) {
  .about_car {
    margin-left: 0px;
  }
}
@media (max-width: 768px) {
  .about_car {
    margin-left: 0px;
  }
}
@media (max-width: 768px) {
  .about_car {
    margin-bottom: 50px;
  }
}
.about_car.hist {
  padding-bottom: 100px;
}
@media (max-width: 1440px) {
  .about_car.hist {
    max-width: 700px;
    margin-left: 40px;
  }
}
@media (max-width: 768px) {
  .about_car.hist {
    max-width: 95vh;
  }
}
@media (max-width: 450px) {
  .about_car.hist {
    max-width: 95vh;
    margin-left: 10px;
  }
}
.about_car .card {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 30px;
}
@media (max-width: 768px) {
  .about_car .card {
    margin-left: 0px;
  }
}
.about_car .card .card-text {
  font-size: 18px;
  margin-left: 30px;
}
.about_car .card .card-text.wwsstarfold {
  margin-left: 28px;
}
.about_car .card .card-text.wwsstarfold.dres {
    margin-left: 9px;
    display: flex;
    justify-content: center;
    width: 50vw;
}
@media (max-width: 768px) {
  .about_car .card .card-text.wwsstarfold.dres {
    width: 100vw;
}
}
@media (max-width: 768px) {
  .about_car .card .card-text.wwsstarfold {
    font-size: 18px;
    margin-left: 18px;
  }
}
.about_car .card .card-text .starfold {
  font-size: 22px;
  margin-bottom: -20px;
  font-family: slab;
}
.about_car .card .card-text .starfold.dresden {
  font-size: 15px;
  margin-bottom: -20px;
  font-family: slab;
  color: #f3b258;
}
@media (max-width: 768px) {
  .about_car .card .card-text .starfold {
    font-size: 22px;
    margin-bottom: -20px;
    font-family: slab;
  }
}
.about_car .card .card-text h3 {
  margin-bottom: -15px;
  margin-top: 0;
}
.about_car .card .card-text p {
  font-family: roboto;
  margin: 0;
}
.about_car .card img {
  width: 100px;
}
@media (max-width: 1024px) {
  .about_car .card img {
    width: 85px;
  }
}
@media (max-width: 768px) {
  .about_car .card img {
    width: 80px;
  }
}
@media (max-width: 320px) {
  .about_car .card img {
    width: 70px;
  }
}
.cards {
  list-style: none;
  position: relative;
  padding: 0;
  margin: 0;
}
.cards a {
  text-decoration: none;
  color: white;
}
.cards .card {
  display: flex;
  align-items: center;
}
.cards .card .card-text {
  font-size: 18px;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  z-index: 1;
}
.cards .card .card-text p {
  font-family: roboto;
  margin: 0;
  text-align: center;
  text-shadow: 0px 1px 2px black;
}
.cards .card .card-text:hover ~ .card-fonb {
  opacity: 1;
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  -o-filter: none;
  filter: none;
}
.cards .card .card-fonb {
  opacity: 0.4;
  width: 35vw;
  height: 20vh;
  overflow: hidden;
  text-align: center;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}
.cards .card .card-fonb img:hover {
  -webkit-filter: drop-shadow(0px 0px 7px #000);
  filter: drop-shadow(0px 0px 7px #000);
}
@media (max-width: 1024px) {
  .cards .card .card-fonb {
    width: 35vw;
    height: 10vh;
  }
}
@media (max-width: 768px) {
  .cards .card .card-fonb {
    width: 100vw;
  }
}
.cards .card .card-fonb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cards .card .card-fonb:hover {
  opacity: 1;
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  -o-filter: none;
  filter: none;
}
.cards.jeic .card-fonb {
  height: 30vh;
}
@media (max-width: 1440px) {
  .cards.jeic .card-fonb {
    height: 25vh;
  }
}
@media (max-width: 1024px) {
  .cards.jeic .card-fonb {
    height: 22vh;
  }
}
table {
  margin-top: 20px;
}
table a {
  text-decoration: none;
  color: #f3b258;
  text-shadow: 1px 1px 2px red;
}
table a:hover {
  color: white;
}
table td {
  min-width: 110px;
  padding-bottom: 20px;
  padding-right: 10px;
  vertical-align: baseline;
}
@media (max-width: 768px) {
  table td {
    min-width: unset;
    padding: 0;
    padding-right: 5px;
    padding-bottom: 7px;
  }
}
.foaer {
  margin-left: 35%;
}
@media (max-width: 1024px) {
  .foaer {
    margin-left: 10%;
  }
}
@media (max-width: 768px) {
  .foaer {
    margin-left: 20%;
  }
}
@media (max-width: 500px) {
  .foaer {
    margin-left: 20px;
  }
}
.figapivan {
  margin-top: 3px;
  font-family: ibm;
  font-weight: 100;
  font-style: italic;
  color: #dfdfdf;
  font-size: 17px;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 30px;
}
@media (max-width: 500px) {
  .figapivan {
    max-width: unset;
    width: 85vw;
  }
}

.ttett {
  display: flex;
  flex-direction: column;
  align-items: center;
}


.journal h2 {
  color: #f3b258;
    font-family: roboto;
    font-weight: 400;
    font-size: 22px;
}
.pozaprosu {
  font-family: slab;
  font-weight: bold;
  font-size: 16px;
  color: #192e31;
  font-style: italic;
  background-color: #e6e6e6;
  padding: 10px;
  border-radius: 10px;
}


figcaption {
  margin-top: 3px;
  font-family: ibm;
  font-weight: 100;
  font-style: italic;
  color: #dfdfdf;
  font-size: 17px;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 30px;
}
@media (max-width: 768px) {
  figcaption {
    padding-bottom: 1px;
    font-size: 15px;
  }
}
@media (max-width: 500px) {
  figcaption {
    padding-bottom: 1px;
    font-size: 15px;
    width: 85vw;
  }
}
.melna:before {
  content: "";
  background: url("../../images/line.svg");
  position: absolute;
  margin: 1px 0 0 -30px;
  width: 25px;
  height: 30px;
  background-size: contain;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  .melna:before {
    margin: 0px 0 0 -19px;
    width: 20px;
  }
}
@media (max-width: 768px) {
  .communicat1 {
    margin-top: 10px;
    display: flex;
  }
}
.communicat1 .inst {
  fill: #ffffff;
  will-change: transition;
  transition: all ease-in-out 250ms;
  position: absolute; 
  margin-top: 15px; 
  margin-left: 15px;
}
.communicat1 .inst:hover {
  fill: url(#rg);
  cursor: pointer;
  will-change: transform;
  transform: translate(-1px, -1px);
  filter: url(#dropShadow);
  -webkit-filter: drop-shadow(3px 3px 3px black);
  filter: drop-shadow(3px 3px 3px black);
}
@media (max-width: 768px) {
  .communicat1 .inst {
    margin-top: -5px;
    margin-left: -20px;
  }
}
.communicat2 .inst {
  fill: #ffffff;
  will-change: transition;
  transition: all ease-in-out 250ms;
  position: absolute;  
  margin-top: 15px; 
  margin-left: 60px;
}
.communicat2 .inst:hover {
  fill: url(#rg);
  cursor: pointer;
  will-change: transform;
  transform: translate(-1px, -1px);
  filter: url(#dropShadow);
  -webkit-filter: drop-shadow(3px 3px 3px black);
  filter: drop-shadow(3px 3px 3px black);
}
.podzag {
  color: gray;
  font-size: 20px;
  margin-top: -30px;
}
@media (max-width: 768px) {
  .podzag {
    font-size: 14px;
    margin-top: 0px;
  }
}
@media (max-width: 768px) {
  .communicat2 {
    margin-top: -30px;
    display: flex;
    padding-bottom: 50px;
  }
}
@media (max-width: 768px) {
  .communicat2 .inst {
    margin-left: 45px;
  }
}
.less {
  width: 60%;
}
@media (max-width: 768px) {
  .less {
    width: unset;
  }
}
.endless {
  width: 40%;
}
@media (max-width: 768px) {
  .endless {
    width: unset;
  }
}
.form_radio {
	margin-bottom: 10px;
  display: flex;
}
.form_radio label {
	display: inline-block;
	cursor: pointer;
	position: relative;
	padding-left: 25px;
	margin-right: 0;
	line-height: 18px;
  font-size: 12px;
  font-style: italic;
}
.form_radio input {
	margin: auto 0;
  min-width: 20px;
}
.poyasnenie {
  display: none;
}
@media (max-width: 768px) {
  .poyasnenie {
    display: block;
  }
}
.main.article .onshop .shop .poyasnenie {
  font-family: ibm;
  font-weight: 100;
  font-style: italic;
  color: #dfdfdf;
  font-size: 13px;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 30px;
}