@charset "utf-8";
html,body{margin:0;padding:0; height: 100%;}
a:link,a:visited,a:active{text-decoration:none; color: #555; }
a:hover{text-decoration:none; color: #000;}
:active,:hover,:focus{outline:0;outline-offset:0;}

body{font-family: 'Roboto', sans-serif; background-color:#f1f1f1;}
/*body{font-family:eicons;}
@font-face{font-family:eicons;font-display:auto;src:local('Arial, Helvetica, sans-serif'), src:url(/tmp/fonts/eicons.woff2);} */

@font-face {/* Roboto-cyrillic-ext */font-family: 'Roboto';font-style: normal;font-weight: 300;font-display: swap;
  src: local('Roboto Light'), local('Roboto-Light'), url(/tmp/fonts/Roboto-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face {/* Roboto-cyrillic */font-family: 'Roboto';font-style: normal;font-weight: 300;font-display: swap;
  src: local('Roboto Light'), local('Roboto-Light'), url(/tmp/fonts/Roboto-cyrillic.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face {/* Roboto-greek-ext */font-family: 'Roboto';font-style: normal;font-weight: 300;font-display: swap;
  src: local('Roboto Light'), local('Roboto-Light'), url(/tmp/fonts/Roboto-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;}
@font-face {/* Roboto-greek */font-family: 'Roboto';font-style: normal;font-weight: 300;font-display: swap;
  src: local('Roboto Light'), local('Roboto-Light'), url(/tmp/fonts/Roboto-greek.woff2) format('woff2');
  unicode-range: U+0370-03FF;}
@font-face {/* Roboto-vietnamese */font-family: 'Roboto';font-style: normal;font-weight: 300;font-display: swap;
  src: local('Roboto Light'), local('Roboto-Light'), url(/tmp/fonts/Roboto-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;}
@font-face {/* Roboto-latin-ext */font-family: 'Roboto';font-style: normal;font-weight: 300;font-display: swap;
  src: local('Roboto Light'), local('Roboto-Light'), url(/tmp/fonts/Roboto-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {/* Roboto-latin */font-family: 'Roboto';font-style: normal;font-weight: 300;font-display: swap;
  src: local('Roboto Light'), local('Roboto-Light'), url(/tmp/fonts/Roboto-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
	
	#header{top: -46px;}
	header{ background-color:rgba(0,0,0,.9); background-image: url(/tmp/img/bg3.svg); background-size: 7px; border-bottom: 1px solid #000; box-shadow: 1px 0 4px #fff;  width: 100%; text-align:left; z-index: 2;}

	header .header{ min-height:70px; max-width:1200px; margin: 0 auto; color:#fff; text-align: center; position:sticky; }
	.header .logo img{float: left; margin: 10px 0 -30px 20px; width: 150px;}
	.header .content{ float: left; margin: 10px 0 0 50px; text-shadow: 1px 0px 1px #000;}
	.header .content p{font-size:17px;margin:10px 0;animation-duration: 1s; }
	.header .content b{font-size:22px;animation-duration: 1s; animation-name: slidein;}

	
	.header .tel{position: absolute; right: 0; top: 0; color:#fff;font-size:14px; text-shadow: 1px 0px 1px #000; font-weight: bold; display: block; margin: 5px 20px 0 0; 
	 background-image: url(/tmp/img/home.svg); background-repeat: no-repeat; background-size:18px; background-position: 0 50%; line-height: 20px; padding-left: 20px;
	}

	.header .tel:hover{text-decoration:none; color: #fff;}
	.header nav{position: absolute; right: 0; top: 45px;}
	.header nav a{color:#fff;font-size:18px; text-shadow: 1px 0px 1px #000; padding:0 20px 0 0;line-height: 17px;}
	.header nav a:hover{text-shadow: 1px 1px 2px #fff;text-decoration:none;}
	.header nav .a{color:#fff;text-shadow: 1px 1px 2px #fff;}
	
	@media screen and (max-width:1100px){
	.header .content {margin: 5px 0 0 20px;}
	.header .content span{display: block;}	

	.header .content { display: inherit; float: left; text-align: left;}
	.header .content p {margin:0;}
	}
	@media screen and (max-width:900px){
	.header .content p{font-size:15px;margin:0;}
	.header .content b{font-size:17px;}
	.header nav{ top: 50px;}
	}
	@media screen and (max-width:660px){
	.header .content{ display: none;}	
	/*.header nav{position:inherit; float: left;right:inherit; top:inherit;margin: 30px 0 0 5px;}
	.header .tel{top: 65px;}*/
	}	
	@media screen and (max-width:515px){
	.header .logo img{width: 100px}
	
	.header .tel{top:5px;font-size:10px; margin:0;}
	.header nav a{font-size:15px;}
	}
	@media screen and (max-width:500px){
	}
	@media screen and (max-width:400px){
	}
	@media screen and (max-width:360px){
	.header .content p{font-size:12px;margin:0;}
	.header .content b{font-size:14px;}
	.header nav{margin: 0px auto 5px auto;}
	.header nav a{font-size:14px;}
	}
	@media screen and (max-width:310px){
	.header .content p{font-size:11px;margin:0;}
	.header .content b{font-size:13px;}	
	.header .tel{font-size:11px;}

	}
	@media screen and (max-width:290px){
	.header .content b{display: block;}
	.header .tel{font-size:9px;overflow: hidden;width:0px; height: 18px; color:#000; }
	.header nav a{font-size:14px; margin: 5px; padding: 0 }	
	}	
	@media screen and (max-width:240px){
	.header {width: 240px;}
	}
	article {  min-height:calc(100% - 300px); background: url(/tmp/img/fon_article_l.png) no-repeat 0 -70px, #f1f1f1 url(/tmp/img/fon_article_r.png) no-repeat 100% -70px; width: 100%;}
	.article{max-width:1200px; margin:0 auto;}
/*---- article ----*/
	.krochki { text-align: left;font-size: 16px; padding:0 15px;}
	.krochki b{ font-size: 16px; }
	.win_pro { margin: 0 auto;  max-width:1200px; text-align: center; margin-bottom: 50px;}
	.win_pro h1{ font-size: 25px;color: #000;text-transform: uppercase; margin: 0 auto; padding: 30px 0 10px 0;}
	.win_pro .content{text-align: justify;font-size: 17px; padding:0 15px;}
	.div_pro a{ display: inline-block; vertical-align:middle; width: 370px; margin: 15px 12px; color: #000; background-color: rgba(255,255,255,.90);box-shadow: 0px 0px 1px 0px #000000;}
	.div_pro a:hover{  box-shadow: 5px 5px 10px -5px #000000;}
	/*.div_pro a img{width: 100%; filter: grayscale(62%);}
	.div_pro a:hover img{filter: grayscale(0%);} */
	.div_pro a b{display: block;  font-size: 18px;}
	.div_pro a i{display: block; font-size: 15px;}
	.div_pro a span{ display: block; font-size: 17px; margin: 20px 0;}
	@media screen and (max-width:450px){
	.win_pro h1{ font-size: 18px;}
	.div_pro a{ width:90%;  height:inherit;}
	.div_pro a b{ font-size: 16px;}
	.div_pro a i{font-size: 14px;}
	.div_pro a span{ font-size: 15px; margin: 10px 0;}
	.div_pro a{transition-duration: 0.3s; animation-name: slidein;}
	.div_pro a img{transition-duration: 1s; animation-name: slidein;}
	}
	.win_pro .div_pro_tov{border-top: 1px solid #ccc; padding: 20px 0; margin:20px 0; position: sticky; }
	.win_pro .div_pro_tov .content img{ position:absolute; top: 30px; left: 10px; width: 35%; }
	.win_pro .div_pro_tov .content{float: right; width: 60%; }
	.win_pro .div_pro_tov .content h2{ margin-top: 0px; padding-top: 0px; font-size: 23px;text-align: center;}
	@media screen and (max-width:500px){
	.win_pro .div_pro_tov .content h2{ font-size: 20px; }
	.win_pro .div_pro_tov .content img{ position:inherit; width: 92%;}
	.win_pro .div_pro_tov .content{float:inherit; width: 92%;}
	}
/*---- article ----*/
	footer {background-color: #e5e5e5; background-image: url(/tmp/img/bg2.svg); margin: 0 0 -5px 0; background-size:8px; width: 100%; color:#000;}
	footer .div_w{max-width:1200px; height:70px; margin:0px auto 0 auto; text-align: center;}
	footer .div_w .footer_logo{ display: inline-block; max-width:450px; margin-top: 20px;}
	footer .div_w .footer_logo p{ margin: 5px auto;}
	footer .div_w .nav{ float: left; text-align: left; margin: 30px 0 0 5px;}
	footer .div_w .nav a{display: block; color: #000; font-size: 20px; line-height: 40px;}
	footer .div_w .nav a:hover{text-shadow: 1px 1px 2px #000;text-decoration:none;}
	
	footer .div_w .nav .a{text-shadow: 1px 1px 2px #000;}
	footer .footer_fon{background-color: #111; background-image: url(/tmp/img/bg3.svg);background-size:8px; clear:both;}
	footer .footer_fon .div_w2{max-width:1200px; margin:120px auto 0 auto; text-align: center; font-size: 18px; color: #fff; line-height: 57px;}
	footer .contacts{float:right; text-align: left; margin: 40px 5px 0 0;}
	footer .contacts p{line-height: 25px; font-size: 20px; margin: 0 0 20px 0;}
	footer .contacts img{float: left; margin-right: 5px;}
	
	@media screen and (max-width:720px){
	footer .div_w .footer_logo{ display:block; margin: auto;}
	footer .div_w .nav{ float:inherit; display:block; margin: 30px 0 0 0; text-align: center;}
	footer .div_w .nav a{ display:inline-block; margin: 0 5px;}
	footer .contacts{ float:inherit; width: 200px; text-align: left; margin:20px auto;}

	}
/*--------------hone callback------------------*/
.hone_img {
	cursor: pointer;
	position:fixed;
    width: 60px;
    height: 60px;
	right: 30px;
	bottom: 30px;
	z-index: 4;
	
	
    border-radius: 100%;
    border: 2px solid transparent;
    opacity: .8;
    animation: hone_img-anim 1s infinite ease-in-out;
    transform-origin: 50% 50%;
}
@keyframes hone_img-anim{
	0%{transform:rotate(0) scale(1) skew(1deg);background:#333 url(/tmp/img/hone_2.svg) no-repeat center center;background-size: 80%;}
	10%{transform:rotate(-25deg) scale(1) skew(1deg)}
	20%{transform:rotate(25deg) scale(1) skew(1deg)}
	30%{transform:rotate(-25deg) scale(1) skew(1deg);background:#000 url(/tmp/img/hone_2.svg) no-repeat center center;background-size: 80%;}
	40%{transform:rotate(25deg) scale(1) skew(1deg)}
	50%{transform:rotate(0) scale(1) skew(1deg)}
	100%{transform:rotate(0) scale(1) skew(1deg);background:#333 url(/tmp/img/hone_2.svg) no-repeat center center;background-size: 80%;}
}

.hone_ph {
    width: 100px;
    height: 100px;
	right: 11px;
	bottom: 11px;
    position:fixed;
    background-color: transparent;
    border-radius: 100%;
	box-shadow: 0 0 0 2px #333;
    border: 1px solid #fff;
    opacity: .1;
    animation: hone_ph-anim 1.2s infinite ease-in-out;
    transition: all .5s;
    transform-origin: 50% 50%;
	z-index: 4;
}
@keyframes hone_ph-anim{
	0%{transform:rotate(0) kscale(.5) skew(1deg);opacity:.1}
	30%{transform:rotate(0) scale(.7) skew(1deg);opacity:.5}
	100%{transform:rotate(0) scale(1) skew(1deg);opacity:.1}
}