@charset "utf-8";
html {width:100%;}
body {margin:0; padding:0; height:100%;}

.clear {clear: both;}

.wrapper {margin: 0; width: 100%;}
.page {margin: 0 auto; padding: 0 15px; width: 100%; max-width: 1200px; box-sizing: border-box;}

.main {display: flex; margin: 0 auto; width: 100%; max-width: 1170px; min-height: 688px; height: 100vh; justify-content: center; align-items: center;}
.main > div {display: block;}
.main > div .logo {display: block; text-align: center; line-height: 0;}
.main > div .direction {display: flex; margin-top: 50px; width: 100%; justify-content: center; align-items: center;}
.main > div .direction > div {display: block; padding: 13px; width: 50%; box-sizing: border-box;}
.main > div .direction > div a {display: block; width: 100%; height: 370px; text-align: center; border: none; box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.1); position: relative;}
.main > div .direction > div a:hover {box-shadow: 0px 0px 10px 2px rgba(0,0,0, .3); -moz-transition: all 0.7s linear; -o-transition: all 0.7s linear; -webkit-transition: all 0.7s linear; transition: all 0.7s linear;}
.main > div .direction > div a .img {display: block; width: 100%; height: 100%; line-height: 0; background-position: center center; background-size: cover; background-repeat: no-repeat; overflow: hidden;}
.main > div .direction > div a .img span {display: none;}
.main > div .direction > div a .name {display: flex; justify-content: center; align-items: center; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.main > div .direction > div a .name div {display: table; width: 100%; height: 110px; font-size: 22px; font-weight: 700; color: #171717; text-align: center; text-transform: uppercase; background: rgba(254,254,254, .8); 
-moz-transition: all 0.7s linear; -o-transition: all 0.7s linear; -webkit-transition: all 0.7s linear; transition: all 0.7s linear;}
.main > div .direction > div a .name div span {display: table-cell; padding: 0 20px; width: 100%; height: 110px; vertical-align: middle; box-sizing: border-box;}
.main > div .direction > div a:hover .name div {height: 100%; background: rgba(0,0,0, .7); color: #fff;}

.nav {display: block; width: 100%; height: 72px;}
.nav .m_button {display: none;}
.nav .menu {display: block; width: 100%; text-align: right;}
.nav .menu ul {margin: 0; padding: 0; list-style: none;}
.nav .menu ul li {display: inline-block; padding-left: 30px; font-size: 12px; font-weight: 700; line-height: 72px;}
.nav .menu ul li:before {content: '';}
.nav .menu ul li a {color: #9f9797; border-bottom: none;}
.nav .menu ul li a:hover, .nav .menu ul li a.active {color: #9b0506; border-bottom: none;}

.head {display: flex; padding: 20px 0; width: 100%; flex-direction: row; justify-content: space-between; align-items: center;}
.head > div:nth-child(2) {padding-left: 45px; min-height: 38px; background: url(images/phone.png) left center no-repeat;}
.head a {border-bottom: none;}
.head span {display: block; height: 16px; color: #9b0506; font-size: 16px; font-weight: 700; line-height: 16px; letter-spacing: 1px; font-stretch: ultra-condensed}

.footer_wrap {display: block; width: 100%; background: #000; color: #f9f9f9;}
.footer {display: flex; margin: 0 auto; padding: 50px 15px 25px 15px; width: 100%; max-width: 1200px; flex-direction: row; justify-content: space-between; align-items: flex-start; box-sizing: border-box;}
.footer > div {display: block;}
.footer > div a {text-decoration: none; border-bottom: none; color: #f9f9f9;}
.footer > div a:hover {color: #fff; border-bottom: 1px dotted #f9f9f9;}
.footer > div ul {margin: 0; padding: 0; list-style: none;}
.footer > div ul li {padding: 0;}
.footer > div ul li:before {content: '';}

.footer > div .icon {display: inline-block; width: 30px; height: 30px; vertical-align: top; background: url(images/sprite_bottom.png) 0 center no-repeat;}
.footer > div span {display: inline-block; padding-left: 20px; vertical-align: top; box-sizing: border-box; line-height: 19px;}

.footer > div:nth-child(1) a:hover {border-bottom: none;}
.footer > div:nth-child(2) li {font-size: 14px; font-weight: 700; line-height: 30px;}
.footer > div:nth-child(3) > div {display: block; padding-bottom: 20px;}
.footer > div:nth-child(3) > div:nth-child(1) .icon {background-position: -60px top;}
.footer > div:nth-child(3) > div:nth-child(2) .icon {background-position: -30px top;}
.footer > div:nth-child(4) {font-size: 16px; font-weight: 700; line-height: 16px;}
.footer > div:nth-child(4) .icon { margin-top: 4px}
.footer > div:nth-child(4) span { padding-left: 10px;}

.footer .social {display: block; margin-top: 40px; text-align: right;}
.footer .social li {display: inline-block; width: 30px; height: 30px; vertical-align: top; text-align: left;} 
.footer .social li a {display: block; width: 30px; height: 30px; background: url(images/sprite_bottom.png) 0 center no-repeat;  text-indent: -9999px;}
.footer .social li a:hover {border-bottom: none;}
.footer .social li a.face {background-position: -90px 0;}
.footer .social li a.vk {background-position: -120px 0;}
.footer .social li a.inst { background-position: -150px 0;}

.copyright {display: block; margin: 0 auto; padding: 0 15px 25px 15px; width: 100%; max-width: 1200px; font-size: 12px; color: #c0c0c0; box-sizing: border-box;}
.copyright a {display: inline-block; margin-top: 5px; text-decoration: none; border-bottom: none; font-size: 10px; color: #c0c0c0;}
.copyright a:hover { color: #fff; border-bottom: 1px dotted #c0c0c0;}

.content {display: block; margin: 35px 0; width: 100%;/* -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);*/}

.category_list {display: flex; width: 100%; justify-content: center; align-items: center; flex-wrap: wrap;}
.category_list > div {display: block; padding: 0 0 28px 0; width: 50%; box-sizing: border-box;}
.category_list > div:nth-child(1) {padding-right: 14px;}
.category_list > div:nth-child(2) {padding-left: 14px;}
.category_list > div:nth-child(3) {padding-right: 14px; width: 33%}
.category_list > div:nth-child(4) {padding-left: 14px; padding-right: 14px; width: 34%;}
.category_list > div:nth-child(5) {padding-left: 14px; width: 33%}
.category_list > div:nth-child(6) {padding-right: 14px;}
.category_list > div:nth-child(7) {padding-left: 14px;}

.category_list > div a {display: block; width: 100%; height: 370px; text-align: center; border: none; box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.1); position: relative;}
.category_list > div a:hover {box-shadow: 0px 0px 10px 2px rgba(0,0,0, .3); -moz-transition: all 0.7s linear; -o-transition: all 0.7s linear; -webkit-transition: all 0.7s linear; transition: all 0.7s linear;}
.category_list > div a .img {display: block; width: 100%; height: 100%; line-height: 0; background-position: center center; background-size: cover; background-repeat: no-repeat; overflow: hidden;}
.category_list > div .img span {display: none;}
.category_list > div a .name {display: flex; justify-content: center; align-items: center; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.category_list > div a .name > div {display: table; width: 100%; height: 110px; font-size: 22px; font-weight: 700; color: #171717; text-align: center; text-transform: uppercase; background: rgba(254,254,254, .8); 
-moz-transition: all 0.7s linear; -o-transition: all 0.7s linear; -webkit-transition: all 0.7s linear; transition: all 0.7s linear;}

.category_list > div a .name > div span {display: table-cell; padding: 0 20px; width: 100%; height: 110px; vertical-align: middle; box-sizing: border-box; line-height: 24px;}
.category_list > div a:hover .name > div { height: 100%; background: rgba(0,0,0, .7); color: #fff;
/* firfox bag */
min-height: 0; -moz-transform: rotate(0.01deg);}

.good_list {display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; margin-top: 55px; width: 100%;}
.good_list > div {display: block; min-width: 270px; width: 270px; max-width: 270px; box-sizing: border-box;}
.good_list > div:nth-child(2) {padding-left: 30px; width: 100%; max-width: none;}

.good_list > div .category {display: block;} 
.good_list > div .category ul {display: block; margin: 0 0 40px 0; padding: 0; width: 100%; list-style: none;}
.good_list > div .category ul li {display: table; margin: 0 0 14px 0; padding: 0; width: 100%; font-size: 12px; font-weight: 700;}
.good_list > div .category ul li:before {content: '';}
.good_list > div .category ul li a {display: table-cell; padding: 0 20px; width: 100%; height: 70px; color: #fff; vertical-align: middle; text-align: center; background: #000; border-bottom: none; box-sizing: border-box;}
.good_list > div .category ul li a:hover, .good_list > div .category ul li a.active {color: #c8c6c6; background: #9b0506; border-bottom: none;}

.goods {display: flex; width: 100%; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
.goods > div {display: block; padding: 0 0 28px 0; width: 31%; box-sizing: border-box;}
.goods > div:nth-child(3n+2) {padding: 0 3.5% 28px 3.5%; width: 38%;}
.goods > div a {display: block; width: 100%; height: 270px; text-align: center; border-bottom: none; text-decoration: none; box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.1); position: relative;}
.goods > div a:hover {box-shadow: 0px 0px 7px 2px rgba(0,0,0, .3); -moz-transition: all 0.7s linear; -o-transition: all 0.7s linear; -webkit-transition: all 0.7s linear; transition: all 0.7s linear;}
.goods > div a .img {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; line-height: 0; overflow: hidden;}
.goods > div a .img img {display: block; line-height: 0;}

.goods > div a .name {display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden;}
.goods > div a .name > div {padding: 0 10px; width: 100%; box-sizing: border-box; position: relative;}
.goods > div a .name > div:nth-child(1) {height: 75%; overflow: hidden;}
.goods > div a .name > div:nth-child(2) {height: 25%; text-transform: uppercase; color: #171717; font-size: 14px; font-weight: 700; background: rgba(255,255,255, .8); -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; -webkit-transition: all 0.3s linear; transition: all 0.3s linear;}
.goods > div a:hover .name > div:nth-child(2) {background: none; color: #fff;}

.goods > div a .name > div:nth-child(1):before, .goods > div a .name > div:nth-child(2):before {content: ""; display: inline-block; height: 100%; vertical-align: middle;}
.goods > div a .name > div span {display: inline-block; vertical-align: middle;}
.goods > div a .name > div:nth-child(1) span {display: none; font-size: 12px; color: #fff;}
.goods > div a:hover .name > div:nth-child(1) span {display: inline-block;}

.goods > div a .bg {display: block; width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; background: none;  -moz-transition: all 0.7s linear; -o-transition: all 0.7s linear; -webkit-transition: all 0.7s linear; transition: all 0.7s linear;}
.goods > div a:hover .bg {background: rgba(0,0,0, .7);}

/* плавное изменение фона снизу в вверх
.goods > div a .bg {display: block; width: 100%; height: 0; position: absolute; bottom: 0; left: 0; background: rgba(0,0,0, .7);  -moz-transition: 0.7s; -o-transition: 0.7s; -webkit-transition: 0.7s; transition: 0.7s;}
.goods > div a:hover .bg {height: 100%; transform-origin: 75% 25%;}*/

.broadcrumb {display: block; margin: 0 auto; padding: 10px 0 40px 0; width: 100%; font-size: 12px; line-height: 12px;}
.broadcrumb span, .broadcrumb a {display: inline-block; margin: 0 2px; vertical-align: top;}
.broadcrumb a {text-decoration: none; color: #838383; border-bottom: none;}
.broadcrumb a:hover {text-decoration: none; color: #000; border-bottom: none;}

.good_wrap {display: flex; margin: 40px 0; width: 100%; flex-direction: row; justify-content: flex-start; align-items: stretch;}
.good_wrap > div {display: block; box-sizing: border-box;}
.good_wrap > div:nth-child(1) {width: 60%; max-width: 60%; overflow: hidden;}
.good_wrap > div:nth-child(2) {padding-left: 60px; width: 40%;}

.good_wrap > div.v2:nth-child(1) {width: 55%; max-width: 55%;}
.good_wrap > div.v2:nth-child(2) {padding-left: 0; width: 45%;}

.good_wrap > div .carusel_flex {display: flex; width: 100%; flex-direction: row; justify-content: flex-start; align-items: stretch;}
.good_wrap > div .carusel_flex > div {display: block; box-sizing: border-box; overflow: hidden;}
.good_wrap > div .carusel_flex > div:nth-child(1) {min-width: 150px; width: 150px; max-width: 150px; max-height: 500px}
.good_wrap > div .carusel_flex > div:nth-child(2) {width: 100%;}

.good_wrap > div .carusel_flex.v2 {flex-direction: row-reverse;}
.good_wrap > div .carusel_flex.v2 > div:nth-child(1) {min-width: 100px; width: 100px; max-width: 100px;}

.good_wrap > div .carusel_flex > div .owl-vertical {display: block; margin-top: 20px; width: 150px;}
.good_wrap > div .carusel_flex > div .owl-vertical .owl-stage-outer {z-index: 5;}
.good_wrap > div .carusel_flex > div .owl-vertical .owl-stage {margin-top: 10px; max-height: 450px;}
.good_wrap > div .carusel_flex > div .owl-vertical .owl-stage .owl-item {padding: 10px; box-sizing: border-box; height: 460px;}
.good_wrap > div .carusel_flex > div .owl-vertical .owl-stage .item {}
.good_wrap > div .carusel_flex > div .owl-vertical .owl-stage .item div {display: block; margin-bottom: 20px; width: 130px; height: 130px; box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.1); cursor: pointer;}
.good_wrap > div .carusel_flex > div .owl-vertical .owl-stage .item div:last-child { margin-bottom: 0;}
.good_wrap > div .carusel_flex > div .owl-vertical .owl-stage .item div.video {background: #000 url(images/owl.video.play.png) center center no-repeat; background-size: 50px 50px;}

.good_wrap > div .carusel_flex > div .owl-horizontal .owl-item {padding: 10px; box-sizing: border-box;}
.good_wrap > div .carusel_flex > div .owl-horizontal .item {display: block; width: 100%; height: 495px; box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.1);}
.good_wrap > div .carusel_flex > div .owl-horizontal .item > div {height: 100%; overflow: hidden;}
.owl-video-wrapper iframe {max-height: 100% !important;}

.good_wrap > div .primenenie {display: block; padding: 30px 0 0 0; width: 100%; box-sizing: border-box;}
.good_wrap > div .primenenie .grey {opacity:0.7; -moz-opacity:0.7; filter:alpha(opacity=70);}
.good_wrap > div .primenenie .sect {display: flex; width: 100%; flex-direction: row; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; padding-bottom: 15px;}
.good_wrap > div .primenenie .sect > div {display: block; margin: 0 20px 10px 0; width: auto; height: 55px; white-space: nowrap; line-height: 55px;}
.good_wrap > div .primenenie .sect > div img {display: inline-block; padding-right: 15px; height: 55px; vertical-align: top;}

.material_list {display: block; margin: 40px 0}
.material_list .group_name {display: block; margin-bottom: 30px; padding: 30px 10px; width: 100%; font-size: 22px; text-align: center; color: #fff; background: #900; box-sizing: border-box}

.material {display: flex; width: 100%; flex-wrap: wrap;}
.material > div {display: block; margin: 0 28px 28px 0; width: calc(100% / 4 - 21px); height: 250px; box-sizing: border-box;}
.material > div:nth-child(4n) {margin: 0 0 28px 0;}

.material > div a {display: block; width: 100%; height: 100%; text-align: center; border-bottom: none; text-decoration: none; box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.1); background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative;}
.material > div:hover {box-shadow: 0px 0px 7px 2px rgba(0,0,0, .3); -moz-transition: all 0.7s linear; -o-transition: all 0.7s linear; -webkit-transition: all 0.7s linear; transition: all 0.7s linear;}

.material > div a .bg {position: absolute; top:0; right:0; width: 100%; height:100%; z-index: 2; transition: all 0.7s linear;}
.material > div a .name {display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; position: relative; width: 100%; height: 100%; z-index: 3;}
.material > div a .name > div {display: block; padding: 10px 20px; width: 100%; font-size: 20px; font-weight: 700; color: #171717; text-align: center; text-transform: uppercase; background: rgba(254,254,254, .8); box-sizing: border-box; transition: all 0.5s linear;}

.material > div a:hover .bg {background: rgba(0,0,0, .4);}
.material > div a:hover .name > div {background: rgba(0,0,0, .7); color: #fff;}






/* popUp */
#loader {width:100%; height:100%; position:fixed; top:0px; left:0px; display:none; background: rgba(255,255,255, 0.7) url(images/loader.png) center center no-repeat; z-index: 6100;}

.popUp {display: block; position: fixed; z-index:90002; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255,255,255, 0.7); white-space: nowrap; text-align: center; overflow: auto;}
.popUp:after {display: inline-block; vertical-align: middle; width: 0; height: 100%; content: '';}
.popUp .form {position: relative;  display: inline-block; vertical-align: middle;  padding: 35px 20px 0 20px; width: 490px; height: auto; background: #fff; border: 1px solid #eee; box-sizing: border-box; box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.1);}
.popUp .form .exit_button {position:absolute; top: 35px; right: 20px; width:20px; height:20px; background: url(images/close.png) 0 0 no-repeat; cursor: pointer;}
.popUp .form .exit_button:hover {background-position: 0 -20px;}
.popUp .form .title {display: block; margin: 0 0 40px 0; padding-right: 25px; color: #9b0506; font-size: 24px; text-align: left; white-space: normal; line-height: 20px; box-sizing: border-box; overflow: hidden;}
.popUp .form .pole {display: block; padding-bottom: 15px;}
.popUp .form p {padding: 0 0 15px 0; text-align: left; white-space: normal;}  
.popUp .form .button {width: 100%;}
.popUp .form input.error {border: 1px solid #ff0000;}