.photoProdoBoss {
    margin: 0 auto 0 auto;
    width: 99%;}



.lineBoxBackground {
    background: var(--colorBackgroundBaseAdditional);}
.lineBox {
    height: 30px;
    color: #111;
    font-size: 14px;}


.photoProdoBackground {
    width: 100%;
    margin: 0 auto 0 auto;
    max-width: 1200px;}


@media screen and (max-width: 999px) {
    .photoProdoBoss {
        flex-wrap: wrap;}
    .photoProdoBackground {
        width: 98%;}}



.prodoPhotoAlone {
    transition: ease 0.4s;
    overflow: hidden;
    width: 900px;
    height: 510px;}

@media screen and (max-width: 1099px) {
    .prodoPhotoAlone {
        height: 485px;}}

@media screen and (max-width: 999px) {
    .prodoPhotoAlone {
        height: 520px;}}

@media screen and (max-width: 950px) {
    .prodoPhotoAlone {
        height: 500px;}}

@media screen and (max-width: 900px) {
    .prodoPhotoAlone {
        height: 470px;}}

@media screen and (max-width: 850px) {
    .prodoPhotoAlone {
        height: 450px;}}

@media screen and (max-width: 800px) {
    .prodoPhotoAlone {
        height: 420px;}}

@media screen and (max-width: 750px) {
    .prodoPhotoAlone {
        height: 400px;}}

@media screen and (max-width: 700px) {
    .prodoPhotoAlone {
        height: 350px;}}

@media screen and (max-width: 650px) {
    .prodoPhotoAlone {
        height: 320px;}}

@media screen and (max-width: 600px) {
    .prodoPhotoAlone {
        height: 290px;}}

@media screen and (max-width: 550px) {
    .prodoPhotoAlone {
        height: 250px;}}

@media screen and (max-width: 500px) {
    .prodoPhotoAlone {
        height: 230px;}}

@media screen and (max-width: 450px) {
    .prodoPhotoAlone {
        height: 200px;}}

@media screen and (max-width: 400px) {
    .prodoPhotoAlone {
        height: 170px;}}

@media screen and (max-width: 350px) {
    .prodoPhotoAlone {
        height: 150px;}}




.prodoPhotoAlone img {
    margin-top: -35px;
    width: 100%;}



.photoProdoIcon {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;}

@media screen and (max-width: 999px) {
    .photoProdoIcon {
        margin-top: 20px;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;}}


.photoProdoIcon img:nth-child(n+2){
    margin-top: 20px;}


@media screen and (max-width: 999px) {
    .photoProdoIcon img:nth-child(n+2){
        margin-top: 0;
        margin-left: 5%;}
    .photoProdoIcon img {
        width: 30%;
        height: auto;}}

.prodoPhoto {
    margin-right: 20px;
    transition: ease 0.4s;
    width: 700px;
    height: 400px;}

@media screen and (max-width: 1199px) {
    .prodoPhoto {
        width: 602px;
        height: 344px;}}

@media screen and (max-width: 1099px) {
    .prodoPhoto {
        width: 504px;
        height: 288px;}}

@media screen and (max-width: 999px) {
    .photoProdoBoxMobile {
        width: 100%;}

    .prodoPhoto {
        margin: 0 calc((100% - 896px) / 2) 0 calc((100% - 896px) / 2);
        width: 896px;
        height: 512px;}}

@media screen and (max-width: 899px) {
    .prodoPhoto {
        margin: 0 calc((100% - 798px) / 2) 0 calc((100% - 798px) / 2);
        width: 798px;
        height: 456px;}}

@media screen and (max-width: 799px) {
    .prodoPhoto {
        margin: 0 calc((100% - 693px) / 2) 0 calc((100% - 693px) / 2);
        width: 693px;
        height: 396px;}}

@media screen and (max-width: 699px) {
    .prodoPhoto {
        margin: 0 calc((100% - 595px) / 2) 0 calc((100% - 595px) / 2);
        width: 595px;
        height: 340px;}}

@media screen and (max-width: 599px) {
    .prodoPhoto {
        margin: 0 calc((100% - 490px) / 2) 0 calc((100% - 490px) / 2);
        width: 490px;
        height: 280px;}}

@media screen and (max-width: 499px) {
    .prodoPhoto {
        margin: 0 calc((100% - 399px) / 2) 0 calc((100% - 399px) / 2);
        width: 399px;
        height: 228px;}}

@media screen and (max-width: 399px) {
    .prodoPhoto {
        margin: 0 calc((100% - 301px) / 2) 0 calc((100% - 301px) / 2);
        width: 301px;
        height: 172px;}}

.prodoIcon {
    width: 210px;
    height: 120px;}

@media screen and (max-width: 1199px) {
    .prodoIcon {
        width: 180px;
        height: 101px;}}

@media screen and (max-width: 1099px) {
    .prodoIcon {
        width: 148px;
        height: 82px;}}

.photoProdoDop{
    margin-left: 30px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;}


.photoProdoDop div:nth-child(n+2){
    margin-top: 20px;}

@media screen and (max-width: 999px) {
    .photoProdoDop{
        width: 100%;
        margin-left: 0;
        margin-top: 20px;
        margin-bottom: 10px;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;}

    .photoProdoDop div:nth-child(n+2){margin-top: 0;}
    .photoProdoDop div {margin-top: 0;}
    .photoProdoDopBox{width: 40%;}}


.photoProdoDopBox{
    align-items: center;}

.photoProdoDop span{
    font-size: 12px;}

.photoProdoDopBox img {
    align-items: center;
    margin-right: 10px;
    width: 35px;
    height: 35px;}

@media screen and (max-width: 670px) {
    .photoProdoDop{
        flex-direction: row;
        flex-wrap: wrap;}

    .photoProdoDop span{
        font-size: 16px;}

    .photoProdoDopBox img {
        width: 55px;
        height: 55px;}

    .photoProdoDopBox{width: 48%; margin-bottom: 20px;}}


@media screen and (max-width: 590px) {
    .photoProdoDop span{
        font-size: 14px;}
    .photoProdoDopBox img {
        width: 50px;
        height: 50px;}}

@media screen and (max-width: 520px) {
    .photoProdoDop span{
        font-size: 12px;}}

@media screen and (max-width: 475px) {
    .photoProdoDop span{
        font-size: 20px;}}

@media screen and (max-width: 440px) {
    .photoProdoDop span{
        font-size: 18px;}}

@media screen and (max-width: 390px) {
    .photoProdoDop span{
        font-size: 16px;}}

@media screen and (max-width: 350px) {
    .photoProdoDop span{
        font-size: 15px;}}

@media screen and (max-width: 330px) {
    .photoProdoDop span{
        font-size: 14px;}}

.prodoButtonBox {
    width: 100%;
    justify-content: flex-end;}

@media screen and (max-width: 999px) {
    .prodoButtonBox {
        width: 95%;
        margin-left: 5%;
        justify-content: flex-start;}}

.prodoButtonBl {
    margin-top: 20px;
    background: var(--colorBase);
    align-items: center;
    color: #eee;
    border-radius: 2px;
    justify-content: center;
    width: 160px;
    height: 35px;}

/* описание    =======>>>>>>>> */

@media screen and (max-width: 899px) {
.descriptionBoss{flex-wrap: wrap;}}

.descriptionSpanOne {
    align-items: center;
    justify-content: center;
    width: 95%;}

.descriptionSpanOne span {
    width: 95%;
    text-indent: 20px;
    text-align: justify;}


.descriptionSpan {
    align-items: center;
    justify-content: center;
    width: 580px;}

@media screen and (max-width: 899px) {
    .descriptionSpan {
        margin-bottom: 15px;
        width: 95%;}}

.descriptionSpan span {
    width: 95%;
    margin-top: 10px;
    text-indent: 20px;
    text-align: justify;}

.descriptionTable {
    width: 600px;}

@media screen and (max-width: 1099px) {
    .descriptionTable {
        width: 500px;}}

@media screen and (max-width: 1099px) {
    .descriptionTable {
        width: 400px;}}

@media screen and (max-width: 899px) {
    .descriptionTable {
        width: 95%;}}




/* */
.catParamBoss {
    display: flex;
    flex-wrap: wrap;
    width: 98%;

}
.catParamBoss div:nth-child(n+2) {margin-top: 10px;}

@media screen and (max-width: 999px) {
    .catParamBoss div:nth-child(n+2) {margin-top: 0;}}


.catParamSpan {
    width: 140px;
}

@media screen and (max-width: 999px) {
    .catParamSpan {margin-bottom: 10px;}}

.catParamBox{
    margin-left: 20px;
    width: calc(100% / 7);
    height: 50px;
    border-radius: 5px;
    transition: ease 0.4s;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.15),-2px -2px 2px rgba(0,0,0,0.15);
}

@media screen and (max-width: 999px) {
    .catParamBox{
        margin-bottom: 10px;
        width: 90%;}}


.catParamBox:hover{
    box-shadow: 3px 3px 6px rgba(0,0,0,0.25),-3px -3px 6px rgba(0,0,0,0.25);
}

.catParamBox span {
    margin-left: 8px;
    color: #333;
    font-size: 10px;
}



.catParam {
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;}

@media screen and (max-width: 999px) {
    .catParam {
        width: 45%;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        text-align: center;}}

@media screen and (max-width: 590px) {
    .catParam {
        width: 99%;}}

.catParamCircle {
    margin-left: 10px;
    border-radius: 50px;
    overflow: hidden;
    width: 32px;
    min-width: 32px;
    height: 32px;
    transition: ease 0.4s;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.35),-2px -2px 4px rgba(0,0,0,0.35);
}

.catParamCircle:hover {
    transform: scale(0.9) translateZ(0);
    box-shadow: 1px 1px 4px rgba(0,0,0,0.45),-1px -1px 4px rgba(0,0,0,0.45);
}

.catParamCircle img {
    height: 32px;
    width: auto;
}





.modulesProdoBoss {
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;}

.modulesProdoBoss div.modulesProdo:nth-child(even){
    margin-left: 40px;}

@media screen and (max-width: 1020px) {
    .modulesProdoBoss div.modulesProdo:nth-child(even){
        margin-left: 0;}}

.modulesProdoBoss div.modulesProdo:nth-child(n+3){
    margin-top: 40px;}

@media screen and (max-width: 1020px) {
    .modulesProdoBoss div.modulesProdo:nth-child(n+3){
        margin-top: 0;}}



.modulesProdo {
    width: 48%;
    justify-content: center;
    align-items: center;}

@media screen and (max-width: 1020px) {
    .modulesProdo {
        margin-bottom: 20px;
        width: 95%;}}

.modulesProdo img {
    width: 170px;
    height: 170px;}


.modulesProdoBox {
    flex-direction: column;
    align-items: center;}

.modulesProdoTable {
    margin-left: 20px;}

@media screen and (max-width: 1020px) {
    .modulesProdoTable {
        width: calc(100% - 190px);}
    .modulesProdoBox span {margin-left: 40px;}
    .modulesProdoBox {
        align-items: flex-start;
        width: calc(100% - 190px);}}

@media screen and (max-width: 535px) {
    .modulesProdo img {margin: 0 calc((100% - 170px) / 2) 0 calc((100% - 170px) / 2);}
    .modulesProdo {
        flex-direction: column;
        align-items: flex-start;}
    .modulesProdoTable {
        width: 100%;}
    .modulesProdoBox {
        width: 100%;}
}

.zakazBubleForm {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 50%;
  margin-left: -190px;
  width: 380px;
  border-radius: 2px;
  background-color: #eee;
  z-index: 9999;
  overflow: hidden;
  transition: ease 0.4s;
}

.blackFonZakaz {
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background: #000;
  z-index: 9998;
  transition: ease 0.4s;
}

/* -------------------------=========>>>>>>>>>>>>>>>> */


.zakazBublForms {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}



.zakazBubleTitle{ /* --- Заголовок --- */
  margin-top: 10px;
  margin-bottom: 30px;
  font-size: 16px;
  text-align: center;
}

.zakazBubleInput {
  margin-bottom: 20px;
  width: 305px;
  height: 40px;
  border: none;
  font-size: 14px;
  border-radius: 2px;
  padding: 0 0 0 10px;
  box-shadow: -3px 4px 5px rgba(0,0,0,0.1), 3px 4px 5px rgba(0,0,0,0.1);}

.zakazBubleButton {
    border: none;
    cursor: pointer;
    width: 305px;
    height: 40px;
    background: var(--colorBase);
    font-size: 12px;
    color: #fff;
    transition: ease 0.6s;
    border-radius: 2px;
    user-select: none;}


.zakazBubleButton:hover {
    transform: translateZ(0);
    background: var(--colorBaseHover);
    color: #fff;
    box-shadow: 2px 2px 8px rgba(10,10,10,0.3), -2px -2px 8px rgba(10,10,10,0.3);}

.zakazBubleButton:active {
    transform: translateZ(0);
    background: var(--colorBaseActive);}

.zakazBubleSpanLittle { /* --- Надпись в конце --- */
  font-size: 12px;
  width: 290px;
  margin-top: 20px;
  font-weight: 200;
  text-align: justify;
  color: #222;}



.messageZakazBubl {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 260px;
  background: #fff;
  position: fixed;
  left: 50%;
  border-radius: 3px;
  margin-left: -130px;
  box-shadow: 2px 6px 10px rgba(0,0,0,0.3), -2px 6px 10px rgba(0,0,0,0.3);
  overflow: hidden;
  transition: ease 0.5s;
  z-index: 10001;}

span.innerZakazAjax{
  text-align: center;
  font-family: 'OS';
  font-size: 16px;
  font-weight: 200;
  line-height: 1.5;
}