@media screen and (max-width: 1300px) {
.cp-title-pic, .cp-cont-county{ width: 220px; }
.cp-title-pic{ background-size: 179px 100px; }
.cp-cont-county{background-size:120px 56px; }
.cp-cont-county h4{margin-top:26px; font-size:22px; line-height:22px;
}


@media screen and (max-width: 1024px) {
.catalog-page { width: 98%;  margin: 0 1% 80px 1%;   }
.cp-cont-city ul li { width: 25%; margin-top: 12px; margin-right:0px; }
ul.cp-content-list > li {  padding: 9px 3px 28px 0px;}


}

@media screen and (max-width: 850px) {
.cp-cont-city ul li { width: 33%; }
}



@media screen and (max-width: 700px) {
.cp-title-pic, .cp-cont-county{ width: 180px; }
.cp-title-pic{ background-size: 160px 89px; }
.cp-cont-county h4{margin-top:29px; font-size:20px; line-height:20px;}


}



@media screen and (max-width: 600px) {
.cp-content { margin-top: 20px;}
.cp-title-wrapper{ flex-direction:column; margin-top: 18px;}
.cp-title-pic{ width: 100%; min-height: 128px; background-position: center; background-size: 185px 103px; }
.cp-title-block{padding-right: 0px;}
.cp-title-block h1{ text-align:center; }
.cp-title-block p{ text-align:justify; padding:0 10px 0 10px; font-size:14px; line-height:19px; }
ul.cp-content-list > li{ flex-direction:column; }
.cp-cont-county { padding-left: 12px; background-position: top 4px left 10px; min-height: 54px; background-size: 100px 47px;}
.cp-cont-city {  padding: 0 10px 0 10px;}
ul.cp-content-list > li {  padding: 9px 0px 28px 0px; }
 .cp-cont-county h4 { margin-top: 16px;}




}


@media screen and (max-width: 450px) {
.cp-cont-city ul li { width: 50%; margin-top: 12px;}
}