@charset "utf-8";
html {width:100%}
body {margin:0; padding:0; background: rgb(246, 246, 246)}

.wrapper {margin: 0 auto; width: 100%; max-width: 1920px; overflow: hidden; position: relative}

.ns-fx {display: flex}
.ns-fx > div, .ns-fx > li, .ns-fx > a {display: block; box-sizing: border-box; position: relative}

header, footer {width: 100%; background: #E53424}
header a, footer a {color: #fff}
header a:hover, footer a:hover {color: #fff; opacity: .7}
.head, .foot {align-items: center; justify-content: space-between; margin: 0 auto; max-width: 1280px; height: 100px}
.foot { padding: 15px 0; box-sizing: border-box; height: auto}
header .logo, footer .logo {padding-right: 40px; color: #fff; font-size: 36px; font-weight: 700}
footer .logo {font-size: 20px}
header .logo > div, footer .logo > div {align-items: center; gap: 30px}
header .logo .img {line-height: 0}
header .logo img {height: 75px}
footer .logo img {height: 65px}

.top_cnt {align-items: center; gap: 40px; font-size: 20px}
.phones > div {padding: 5px 0; font-weight: 700}
.phones > div:nth-child(2) {padding-top: 6px; border-top: 1px solid rgba(255,255,255, .5)}

.promo {width: 100%; min-height: calc(100vh - 100px); background-position: center center; background-repeat: no-repeat; background-size: cover; color: #fff; position: relative; z-index: 1}
.promo .video_promo {display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2; overflow: hidden}
.promo .video_promo video {min-width: 100%; min-height: 100%}
.promo .promo_bg {display: block; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(3, 28, 75, 0.37), rgba(3, 28, 75, 0.37)), linear-gradient(180deg, rgba(3, 28, 75, 0) 15%, #E53424 73.17%); position: absolute; top: 0; left: 0; z-index: 3; opacity: .8}
.promo .wrap {justify-content: center; align-items: center; flex-wrap: wrap; margin: 0 auto; padding-bottom: 200px; max-width: 1280px; height: 100%; box-sizing: border-box; position: relative; z-index: 4; }
.promo .wrap > div {width: 100%; text-align: center}
.promo .name {padding-top: 40px; font: 700 56px/82px "Roboto", sans-serif; text-transform: uppercase}
.promo .title {padding-top: 25px; font: 700 86px/112px "Roboto", sans-serif}
.promo p {padding: 20px 0 15px 0; font-size: 24px}
.promo .img {line-height: 0}
.promo a {color: #fff}
.promo a:hover {color: #fff; opacity: .7}
.promo .link {justify-content: center; align-items: center; width: 100%; font: 300 33px "Roboto Condensed", sans-serif; line-height: 33px; position: absolute; bottom: 40px; z-index: 15 }
.promo .link .arrow {margin: 0 auto; padding-top: 10px; width: 30px; height: 16px; line-height: 16px}

section {margin: 70px auto; max-width: 1280px}
section.v2 {padding: 70px 0; width: 100%; max-width: inherit; background-position: center center; background-size: cover; background-repeat: no-repeat}
section.v3 {width: 100%; max-width: inherit}
section.v2 > div { margin: 0 auto; max-width: 1280px}
section.v2 h2 {color: #fff}
section.v3 h2 {color: #000}
section.last {margin-bottom: 0}
 
.construct {margin: 40px -20px 0 -20px}
.construct > div {padding: 0 20px; width: calc(100% / 3)}
.construct .item {padding: 30px 60px 30px 30px; width: 100%; height: 100%; background: #fff; border-radius: 10px; box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.1); transition: all .2s ease; box-sizing: border-box}
.construct .item .name {padding: 20px 0 10px 0; /* padding: 30px 0 10px 0; */ font-size: 22px; font-weight: 700; /*color: #E53424*/}
.construct .item:hover {box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.3)}
.construct .icon {width: 60px; height: 60px; border-radius: 5px; line-height: 0; overflow: hidden}

.two-photo {gap: 30px; margin-top: 40px}
.two-photo > div {padding: 7px; width: 50%; background: #fff; border-radius: 5px; border: 1px solid #ccc; box-sizing: border-box; line-height: 0}

.materials {margin-top: 50px}
.materials-block {flex-direction: column; gap: 30px; padding-left: 150px}
.materials-block__elem {display: flex !important; height: auto; background: #fff; position: relative}
.materials-item {width: 100%}
.materials-item > div:nth-child(1) {padding: 30px; width: calc(100% - 400px)}
.materials-item > div:nth-child(2) {width: 400px; line-height: 0}
.materials-item img {width: 100%; height: 100%; object-fit: cover}
.materials-item h4 {padding-bottom: 15px; font-size: 30px; font-weight: 700; color: #E53424}
.materials-item p {font-size: 20px; line-height: 150%}
.materials-num {position: absolute; left: -150px; width: fit-content; display: flex; gap: 30px;  width: 90px; height: 100%}
.materials-num-line {width: 5px; height: calc(100% + 30px); background: #E53424; position: absolute;  right: 11px; top: 30px}
.materials-number {font-size: 42px; font-weight: 700; color: #E53424}
.materials-num .dotted {position: absolute; right: 0; top: 1rem}

.pocva {margin-top: 50px; align-items: center; gap: 30px}
.pocva > div {width: 50%}
.pocva .poligon {clip-path: polygon(90% 0, 100% 50%, 90% 100%, 0% 100%, 10% 51%, 0% 0%)}
.pocva .poligon > div {height: 250px; border-top: 5px solid #fff; border-bottom: 5px solid #fff; overflow: hidden; line-height: 0}
.pocva .poligon > div:nth-child(1), .pocva .poligon > div:nth-child(3) {height: 180px; border: none}
.pocva .poligon > div img {width: 100%; height: 100%; object-fit: cover}
.pocva .text p {display: block; padding: 22px 0; font-size: 28px; font-weight: 700; position: relative}
.pocva .text p:after {content: ''; display: block; width: 100%; height: 0; border-bottom: 1px dotted #E53424; position: absolute; left: 0; bottom: 0}
.pocva .text p:last-child:after {display: none}

.wrp_tbl {margin-top: 30px}
.wrp_tbl .item {align-items: center; margin: 10px 0; padding: 30px; background: #fff; border-radius: 4px}
.wrp_tbl .item > div {min-width: 210px; max-width: 210px; text-align: center; border-left: 2px solid #ccc; font-size: 40px; font-weight: 700; overflow: hidden}
.wrp_tbl .item > div:nth-child(1) {min-width: 85px; max-width: 85px; max-width: inherit; font-size: 24px; text-align: left; border-left: none; line-height: 0}
.wrp_tbl .item > div:nth-child(2) {padding-left: 30px; width: 100%; max-width: inherit; font-size: 24px; text-align: left; border-left: none}
.wrp_tbl .item > div:nth-child(3) {display: none; border-left: none}
.wrp_tbl .item > div img {display: block; margin: 0 auto}

.our-bear-slider-wrap {margin-top: 50px; max-width: inherit}
.our-bear-slider .swiper-slide {width: 450px; height: auto}
.our-bear-slider .swiper-slide .item {padding: 10px; background: #fff; border-radius: 5px; border: 1px solid #ccc}
.our-bear-slider .swiper-slide .item a {width: 100%; height: 300px; border-radius: 5px; line-height: 0; overflow: hidden}
.our-bear-slider .swiper-slide .item img {width: 100%; height: 100%; object-fit: cover}

.vidio {margin: 50px auto 0 auto; padding: 10px; max-width: 873px; max-height: 500px; background: #fff; border-radius: 5px; border: 1px solid #ccc;  box-sizing: border-box; position: relative}

.wrp_vidio {flex-wrap: wrap; justify-content: center; margin: 50px auto; max-width: 1280px; gap: 30px; overflow: hidden}
.wrp_vidio > div {width: calc(50% - 15px); padding: 10px; border-radius: 5px; border: 1px solid #ccc; position: relative; overflow: hidden}
.wrp_vidio .wrp {padding-bottom: 63.5%; width: 100%; box-sizing: border-box; position: relative}
.wrp_vidio .wrp video {position: absolute; width: 100%; height: 100%}

.cont_block {margin-top: 40px; color: #fff; text-align: center}
.cont_block a {color: #fff}
.cont_block a:hover {color: #fff; opacity: .7}
.cont_block .name {padding-bottom: 10px; font-size: 24px; font-weight: 700; opacity: .8}
.cont_block .txt {font-size: 30px; line-height: 150%}