/* 1320 */
@media only screen and (max-width: 1320px) {

.head, .foot {padding: 0 25px; box-sizing: border-box}

.promo {height: auto; min-height: inherit}
.promo .wrap {padding-bottom: 50px}
.promo .link {display: none}
.promo .img { margin: 0 auto; max-width: 180px}
.promo .name {font-size: 50px; line-height: 60px}
.promo .title {padding-top: 20px; font-size: 80px; line-height: 100px}
.promo p {padding: 15px 0; font-size: 22px}

section {margin: 60px auto; padding: 0 25px; box-sizing: border-box}
section.v2 {padding: 60px 0}
section.v2 > div {padding: 0 25px; box-sizing: border-box}
section.v3 {padding: 0}

.construct .item {padding: 25px}
}

/* 1280 */
@media only screen and (max-width: 1280px) {

.wrp_tbl .item > div {min-width: 190px; max-width: 190px; font-size: 38px}

.our-bear-slider .swiper-slide {width: 400px}
.our-bear-slider .swiper-slide .item a {height: 250px}
}

/* 1200 */
@media only screen and (max-width: 1200px) {

.construct {margin: 40px -15px 0 -15px}
.construct > div {padding: 0 15px}

.materials-block {padding-left: 130px}
.materials-item > div:nth-child(1) {width: calc(100% - 350px)}
.materials-item > div:nth-child(2) {width: 350px}
.materials-num {left: -130px}

.wrp_tbl .item > div {min-width: 170px; max-width: 170px; font-size: 36px}
}

/* 1024 */
@media only screen and (max-width: 1024px) {

section {margin: 50px auto}

.construct {flex-wrap: wrap; margin: 30px 0 20px 0}
.construct > div {padding: 0 0 20px 0; width: 100%}

.two-photo {gap: 20px; margin-top: 20px}

.materials-block {padding-left: 100px}
.materials-item > div:nth-child(1) {padding: 20px; width: calc(100% - 300px)}
.materials-item > div:nth-child(2) {width: 300px}

.materials-num {left: -100px; width: 70px}
.materials-num-line {width: 3px; right: 11px; top: 30px}
.materials-number {font-size: 38px}
.materials-num .dotted {right: 2px; top: 20px}
.materials-num .dotted svg {width: 20px; height: 20px}

.wrp_tbl .item {flex-wrap: wrap; justify-content: center}
.wrp_tbl .item > div {margin-top: 25px; min-width: inherit; max-width: inherit; width: calc(100% / 4)}
.wrp_tbl .item > div:nth-child(1) {margin-top: 0; width: 85px}
.wrp_tbl .item > div:nth-child(2) {margin-top: 0; width: auto}
.wrp_tbl .item > div:nth-child(3) {display: block; margin-top: 0; width: 100%}
.wrp_tbl .item > div:nth-child(4) {border-left: none}
}

/* 900 */
@media only screen and (max-width: 900px) {

.head, .foot {padding: 0 15px}

header .logo {font-size: 30px}
footer .logo {font-size: 18px}

.promo .wrap {padding-bottom: 40px}
.promo .img {max-width: 150px}
.promo .name {font-size: 40px; line-height: 50px}
.promo .title {padding-top: 20px; font-size: 70px; line-height: 80px}
.promo p {font-size: 20px}

section {margin: 50px auto; padding: 0 15px}
section.v2 {padding: 50px 0}
section.v2 > div {padding: 0 15px}

.construct .item {padding: 20px}

.pocva {margin-top: 40px; gap: 25px}
.pocva > div {width: 40%}
.pocva > div:nth-child(2) {width: 60%}
.pocva .poligon > div {height: 220px}
.pocva .poligon > div:nth-child(1), .pocva .poligon > div:nth-child(3) {height: 160px}
.pocva .text p {padding: 20px 0; font-size: 24px}

.wrp_vidio {margin: 40px auto; gap: 20px}

.cont_block .name {padding-bottom: 10px; font-size: 20px}
.cont_block .txt {font-size: 24px; }
}

/* 800 */
@media only screen and (max-width: 800px) {

header .logo img {height: 65px}
header .logo > div, footer .logo > div {gap: 20px}
header .logo {font-size: 28px}

.top_cnt {gap: 30px; font-size: 18px}

.promo .name {font-size: 36px; line-height: 42px}
.promo .title {padding-top: 15px; font-size: 60px; line-height: 70px}
.promo .video_promo video {margin-left: 50vw; transform: translate(-50%)}

.materials-block {padding-left: 0}
.materials-num {display: none}
.materials-item p {font-size: 18px}

.vidio {box-sizing: border-box; padding-bottom: 52.6%}
.vidio iframe {width: 100%; height: 100%; position: absolute; top: 0; left: 0}
}

/* 720 */
@media only screen and (max-width: 720px) {

header .logo, footer .logo {padding-right: 0}

.head, .foot {padding: 7px 15px; flex-wrap: wrap; justify-content: center; height: auto}
.foot {padding: 5px 15px}

.head > div:nth-child(2), .foot > div:nth-child(2) {margin-top: -10px; width: 100%}

.top_cnt {justify-content: center; box-sizing: border-box}
.promo .img {max-width: 120px}

.materials-item {flex-direction: column-reverse; flex-wrap: wrap}
.materials-item > div:nth-child(1) {padding: 20px; width: 100%}
.materials-item > div:nth-child(2) {width: 100%; height: 290px}

.pocva {flex-wrap: wrap; gap: 0}
.pocva > div {width: 100% !important}
.pocva .poligon { display: flex; clip-path: polygon(0 0, 50% 10%, 100% 0, 100% 90%, 53% 100%, 0 90%)}
.pocva .poligon > div {height: 200px; border: none; box-sizing: border-box}
.pocva .poligon > div:nth-child(1) {width: 32%; height: 200px; border-right: 4px solid #fff} 
.pocva .poligon > div:nth-child(3) {width: 32%; height: 200px; border-left: 4px solid #fff}
.pocva .text p {padding: 20px 0; font-size: 18px; text-align: center}

.wrp_tbl .item {padding: 20px}
.wrp_tbl .item > div {font-size: 28px}
.wrp_tbl .item > div:nth-child(1) {min-width: 75px; max-width: 75px}
.wrp_tbl .item > div:nth-child(2) {font-size: 20px}

.our-bear-slider .swiper-slide {width: 340px}
.our-bear-slider .swiper-slide .item a {height: 200px}

.wrp_vidio {flex-wrap: wrap; margin: 30px auto; gap: 20px}
.wrp_vidio > div {width: 100%}
}

/* 500 */
@media only screen and (max-width: 500px) {

.promo .name {font-size: 30px; line-height: 36px}
.promo .title {font-size: 56px; line-height: 60px}
.promo p {font-size: 18px}

.construct .item .name {padding: 0 0 10px 0; font-size: 20px}

.materials-item > div:nth-child(2) {height: 200px}

.wrp_tbl .item > div {font-size: 22px}

.our-bear-slider-wrap {margin-top: 30px}
}

/* 414 */
@media only screen and (max-width: 414px) {

header .logo > div, footer .logo > div {gap: 15px}
header .logo {font-size: 24px}
footer .logo {font-size: 16px}
header .logo img {height: 60px}
footer .logo img {height: 50px}

.top_cnt {gap: 15px; font-size: 17px}
footer .top_cnt {font-size: 15px}

.promo {box-sizing: border-box; padding: 0 15px}
.promo .name {font-size: 26px; line-height: 30px}
.promo .title {font-size: 50px; line-height: 60px}
.promo p {font-size: 16px}
.promo br {display: none}

section {margin: 30px auto}

.two-photo {flex-wrap: wrap; gap: 20px; margin-top: 20px}
.two-photo > div {padding: 5px; width: 100%}

.materials-item p {font-size: 16px}
.materials-item > div:nth-child(1) {padding: 15px}

.wrp_tbl .item {padding: 12px}
.wrp_tbl .item > div {font-size: 20px}

.our-bear-slider .swiper-slide {width: 270px}
.our-bear-slider .swiper-slide .item a {height: 150px}

.cont_block {margin-top: 20px}
.cont_block .name {padding-bottom: 8px; font-size: 18px}
.cont_block .txt {font-size: 20px}
}

/* 360 */
@media only screen and (max-width: 360px) {

.head, .foot {padding: 7px 10px}
header .logo {font-size: 22px}
footer .logo {font-size: 15px}

section {padding: 0 10px}
section.v2 > div {padding: 0 10px}

.wrp_tbl .item > div {font-size: 17px}
.wrp_tbl .item > div:nth-child(1) {min-width: 40px; max-width: 40px}
.wrp_tbl .item > div:nth-child(2) {padding-left: 15px; font-size: 16px}

.our-bear-slider .swiper-slide {width: 250px}
.our-bear-slider .swiper-slide .item a {height: 130px}

.cont_block .txt {font-size: 17px}
}