.prodoBackground {background: var(--colorBackgroundBase);}

.prodoBoss{
   flex-wrap: wrap;}

@media screen and (max-width: 1199px) {
.prodoBoss{
   width: 98%;}}

/* каждый третий начиная со второго (2,5,8 и т.д) и каждый третий с третьего - отступы */
.prodoBoss a:nth-child(3n+2), .prodoBoss a:nth-child(3n+3) {
    margin-left: 30px;}

@media screen and (max-width: 1220px) {
.prodoBoss a:nth-child(3n+2), .prodoBoss a:nth-child(3n+3) {
    margin-left: 25px;}}

@media screen and (max-width: 1210px) {
.prodoBoss a:nth-child(3n+2), .prodoBoss a:nth-child(3n+3) {
    margin-left: 15px;}}
@media screen and (max-width: 1199px) {
.prodoBoss a:nth-child(3n+2), .prodoBoss a:nth-child(3n+3) {
    margin-left: 5%;}}

@media screen and (max-width: 760px) {
.prodoBoss a:nth-child(3n+2), .prodoBoss a:nth-child(3n+3) {
    margin-left: 0;}

.prodoBoss a:nth-child(even){
    margin-left: 5%;}

.prodoBoss a:nth-child(odd){
    margin-left: 2.5%;}
}

@media screen and (max-width: 540px) {

.prodoBoss a:nth-child(even){
    margin-left: 5%;}

.prodoBoss a:nth-child(odd){
    margin-left: 5%;}
}



.prodoBoss a:nth-child(n+4) {
    margin-top: 30px;}

@media screen and (max-width: 760px) {
.prodoBoss a:nth-child(n+4) {
    margin-top: 0;}

.prodoBoss a:nth-child(n+3) {
    margin-top: 20px;}

}

@media screen and (max-width: 540px) {

.prodoBoss a:nth-child(n+3) {
    margin-top: 0;}

.prodoBoss a:nth-child(n+1) {
    margin-top: 20px;}

}

.prodoBox {
    cursor: default;
    width: 380px;
    flex-direction: column;
    align-items: center;
    transition: ease 0.5s;
    box-shadow: 3px 3px 10px rgba(10,10,10,0.2), -3px -3px 10px rgba(10,10,10,0.2);
    justify-content: space-between;}

@media screen and (max-width: 1210px) {
.prodoBox {
    cursor: default;
    width: 370px;}}

@media screen and (max-width: 1199px) {
.prodoBox {
    width: 30%;}}

@media screen and (max-width: 760px) {
.prodoBox {
    width: 45%;}}

@media screen and (max-width: 540px) {
.prodoBox {
    width: 90%;}}

.prodoBox:hover {
  background:#ddd;
  box-shadow: 3px 3px 10px rgba(10,10,10,0.4), -3px -3px 10px rgba(10,10,10,0.4);}

.prodoBox img {
    width: 380px; height: 217px;}

@media screen and (max-width: 1210px) {
.prodoBox img {
    width: 370px;}}

@media screen and (max-width: 1199px) {
.prodoBox img {
    height: auto;
    width: 100%;}}

.prodoBoxTitle {
    width: 95%;
    height: 25px;
    margin-top: 5px;
    color: #111;
    font-size: 16px;
    align-items: center;}

@media screen and (max-width: 1000px) {
.prodoBoxTitle {
    font-size: 14px;}
}

@media screen and (max-width: 540px) {
.prodoBoxTitle {
    font-size: 20px;}
}

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

@media screen and (max-width: 360px) {
.prodoBoxTitle {
    font-size: 16px;}
}


.prodoBoxSpan {
    width: 95%;
    height: 30px;
    margin-top: 5px;
    color: #111;
    font-size: 12px;
    text-indent: 5px;
    text-align: justify;
    align-items: center;}

@media screen and (max-width: 1199px) {
    .prodoBoxSpan {
        width: 95%;
        height: 50px;
        align-items: flex-start;
        font-size: 12px;}
}

@media screen and (max-width: 1000px) {
    .prodoBoxSpan {
        width: 95%;
        height: 50px;
        font-size: 10px;}
}

@media screen and (max-width: 540px) {
    .prodoBoxSpan {
        height: 70px;
        font-size: 16px;}
}

@media screen and (max-width: 440px) {
    .prodoBoxSpan {
        height: 70px;
        font-size: 14px;}
}

@media screen and (max-width: 360px) {
    .prodoBoxSpan {
        height: 60px;
        font-size: 12px;}
}

.prodoButtonBox{
    width: 95%;
    justify-content: flex-end;
    margin: 20px 0 10px 0;}

.prodoButton{
    cursor: pointer;
    background: #EE9911;
    color: #fff;
    width: 130px;
    height: 30px;
    font-size: 14px;
    border-radius: 5px;
    transition: ease 0.4s;}


@media screen and (max-width: 1000px) {
.prodoButton{
    width: 115px;
    height: 25px;
    font-size: 12px;}
}

@media screen and (max-width: 540px) {
.prodoButton{
    width: 130px;
    height: 30px;
    font-size: 14px;}
}


/*  если продуктов нет */
.prodoNo {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 300px;}

.prodoNo span {
    font-size: 25px;
    color: #666;}



.prodoCatBackground {
    padding: 20px 0 10px 0;
    background: var(--colorBackgroundBaseAdditional);}

.prodoCatBoss {
    justify-content: space-between;
    align-items: center;}

@media screen and (max-width: 770px) {
    .prodoCatBoss {
        justify-content: center;
        flex-wrap: wrap;}
}

.prodoCatBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    width: 150px;
    height: 140px;}

@media screen and (max-width: 1140px) {
    .prodoCatBox {
        width: 140px;
        height: 130px;}}
@media screen and (max-width: 1040px) {
    .prodoCatBox {
        width: 130px;
        height: 125px;}}
@media screen and (max-width: 970px) {
    .prodoCatBox {
        width: 120px;
        height: 115px;}}
@media screen and (max-width: 895px) {
    .prodoCatBox {
        width: 110px;
        height: 100px;}}

@media screen and (max-width: 770px) {
    .prodoCatBox {
        margin-bottom: 20px;
        width: 170px;
        height: 140px;}}

@media screen and (max-width: 705px) {
    .prodoCatBox {
        width: 150px;
        height: 130px;}}

@media screen and (max-width: 620px) {
    .prodoCatBox {
        width: 130px;
        height: 110px;}}
@media screen and (max-width: 555px) {
    .prodoCatBox {
        width: 110px;
        height: 90px;}}

@media screen and (max-width: 510px) {
    .prodoCatBox {
        width: 100px;
        height: 80px;}}

@media screen and (max-width: 460px) {
    .prodoCatBox {
        width: 90px;
        height: 70px;}}

@media screen and (max-width: 415px) {
    .prodoCatBox {
        width: 80px;
        height: 60px;}}
@media screen and (max-width: 380px) {
    .prodoCatBox {
        width: 70px;
        height: 60px;}}

@media screen and (max-width: 330px) {
    .prodoCatBox {
        width: 65px;
        height: 60px;}}

.prodoCatBox div:hover {
    transform: scale(0.95) translateZ(0);}

.prodoCatBox div {
    background-position: center;
    transition: ease 0.4s;
    display: block;
    width: 100%;
    height: 100%;}

.prodoCatBox span {
    transition: ease 0.7s;
    color: #111;
    font-size: 14px;}

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

@media screen and (max-width: 415px) {
.prodoCatBox span {
    font-size: 10px;}}

@media screen and (max-width: 380px) {
.prodoCatBox span {
    font-size: 9px;}}

.prodoCatBox span:hover {
    color: var(--colorBaseActive);}


.prodoCatBedroom {
    background: url('../img/catalog/bedroom.svg') no-repeat;}
.prodoCatChildrenRoom {
    background: url('../img/catalog/children-room.svg') no-repeat;}
.prodoCatKitchen {
    background: url('../img/catalog/kitchen.svg') no-repeat;}
.prodoCatLivingRoom {
    background: url('../img/catalog/living-room.svg') no-repeat;}
.prodoCatHallway {
    background: url('../img/catalog/hallway.svg') no-repeat;}
.prodoCatCupboard {
    background: url('../img/catalog/cupboard.svg') no-repeat;}
.prodoOther {
    background: url('../img/catalog/other.svg') no-repeat;}


@media screen and (max-width: 480px) {}