@font-face {
    font-family: 'robotoregular';
    src: url('../font/roboto-regular.eot');
    src: url('../font/roboto-regular.eot?#iefix') format('embedded-opentype'),
         url('../font/roboto-regular.woff2') format('woff2'),
         url('../font/roboto-regular.woff') format('woff'),
         url('../font/roboto-regular.ttf') format('truetype'),
         url('../font/roboto-regular.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'robotoitalic';
    src: url('../font/roboto-italic.eot');
    src: url('../font/roboto-italic.eot?#iefix') format('embedded-opentype'),
         url('../font/roboto-italic.woff2') format('woff2'),
         url('../font/roboto-italic.woff') format('woff'),
         url('../font/roboto-italic.ttf') format('truetype'),
         url('../font/roboto-italic.svg#robotoitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'robotobold';
    src: url('../font/roboto-bold.eot');
    src: url('../font/roboto-bold.eot?#iefix') format('embedded-opentype'),
         url('../font/roboto-bold.woff2') format('woff2'),
         url('../font/roboto-bold.woff') format('woff'),
         url('../font/roboto-bold.ttf') format('truetype'),
         url('../font/roboto-bold.svg#robotobold') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'robotomedium';
    src: url('../font/roboto-medium.eot');
    src: url('../font/roboto-medium.eot?#iefix') format('embedded-opentype'),
         url('../font/roboto-medium.woff2') format('woff2'),
         url('../font/roboto-medium.woff') format('woff'),
         url('../font/roboto-medium.ttf') format('truetype'),
         url('../font/roboto-medium.svg#robotomedium') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'robotomedium_italic';
    src: url('../font/roboto-mediumitalic.eot');
    src: url('../font/roboto-mediumitalic.eot?#iefix') format('embedded-opentype'),
         url('../font/roboto-mediumitalic.woff2') format('woff2'),
         url('../font/roboto-mediumitalic.woff') format('woff'),
         url('../font/roboto-mediumitalic.ttf') format('truetype'),
         url('../font/roboto-mediumitalic.svg#robotomedium_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}
* {
	margin:0;
	padding:0;
	border-collapse:collapse;
	text-align: left; 
	font-size: 16px;
	font-family: 'robotoregular', sans-serif;
	color:#1d1d1d;	
	background-color:transparent;  
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 	
}
*::before,
*::after {box-sizing: border-box;}
html, body {height: 100%;}
body {word-wrap: break-word; font-size: 100%;}
td {vertical-align: top;}
table {width: 100%;}
article, aside, figure, footer, header, nav, section, details, summary {display: block;}
img, embed, object, video {max-width:100%; height: auto; }
a img {border: none;}

a {}
a:hover, a:hover span {
 -webkit-transition: all 1.5s ease;
  -moz-transition: all 1.5s ease;
  -o-transition: all 1.5s ease;
  transition: all 1.5s ease;
}
a.btn {display: inline-block; padding: 15px 35px; margin: 30px 0; font-family: 'robotobold'; text-decoration: none; border: solid 1px #393939; border-radius: 4px; background: #393939; color: #fff;}
a.btn:hover {background: #fff; color: #393939;}
h1,h2,h3,h4,h5,h6 {font-weight: normal; font-family: 'robotobold';}
b,strong {font-weight: normal; font-family: 'robotomedium';}
em, i {font-style: normal; font-family: 'robotoitalic';}
b em, b i, strong em, strong i, em b, i b, em strong, i strong {font-style: normal; font-family: 'robotomedium_italic';}
hr {background: transparent url(../images/line.png) no-repeat 45% center; border: none; height: 3px; margin-top: 30px; margin-bottom: 30px;}

.right_text {text-align: right;}
.a_center {text-align: center;}
.a_right {float: right;}
.a_left {float: left;}
.clearfix:after {content: ''; display: block; clear: both;}
.menu li, .nav li, .breadcrumb li {list-style-type: none;}
.round {border-radius: 50%;}

input[type=text], input[type=tel], input[type=email], textarea {display: block; border: solid 1px #ccc; width: 300px; padding: 2px; margin-bottom: 7px; font-size: 15px;}
input[type=submit], input[type=button], button[type=submit] {border: none; background: #fad881; padding: 15px 30px; height: 50px; cursor: pointer; text-transform: uppercase; font-size: 14px;}
input[type=text]:focus, input[type=tel]:focus, input[type=email]:focus, textarea:focus {border-color: #ffba00; outline: none;}
input[type=submit]:hover, input[type=button]:hover, button[type=submit]:hover {background: #ffba00;}


/**global**/
#container {width: 100%; position: relative;}
.inner {max-width: 1000px; margin-left: auto; margin-right: auto; padding-left: 10px; padding-right: 10px;}
#content {width: 100%; min-height: 400px;}


/**header**/
#topbar {position: fixed; top: 0; right: 0; left: 0;  background: rgba(68,68,68,.8); z-index: 50000;}
#topbar .inner {padding-top: 10px; 
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
   -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
}
#header {padding-top: 70px; background: #000 url(../images/footer.png) no-repeat center top fixed;}
#header > .inner {padding-top: 10px; background: url(../images/hea der.png) no-repeat right center; 
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
   -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
}
#header > .inner > div {width: 50%;}
#header * {color: #fff;}
#header .phone {padding-top: 32px;}
#header .phone * {font-size: 14px; font-family: 'robotomedium'; text-align: right; text-transform: uppercase;}
#header .phone strong {font-size: 25px;}

#header .dj-megamenu {padding-top: 8px !important;}
.dj-megamenu li {position: relative;}
.dj-megamenu li:before {content: '\276F'; font-size: 12px; position: absolute; left: 5px; top: 0.8em;}
.dj-megamenu li:hover:before,
.dj-megamenu li.active:before  {color: #f7c84c;}
#header .dj-megamenu li a {display: block;  font-size: 14px; height: auto; padding: 0 15px;}
#header .dj-megamenu li a:hover span {color: #f7c84c; text-decoration: none;}
#header .dj-megamenu li.active a span {color: #f7c84c;}
#header .dj-megamenu li.active a:hover {text-decoration: none;}
#header .dj-megamenu li a.dj-up_a span {height: auto; line-height: 2.5em; font-size: 14px;}

ul.dj-mobile-dark li.dj-mobileitem > a {display: block;}
ul.dj-mobile-dark li.dj-mobileitem > a span {color: #fff;}
ul.dj-mobile-dark li.dj-mobileitem.current > a span {color: #f7c84c;}
ul.dj-mobile-dark li.dj-mobileitem > a:hover span,
ul.dj-mobile-dark li.dj-mobileitem.active > a span {color: #f7c84c;}

.social_menu li {display: inline-block; width: 20px; margin: 10px 5px;}
.social_menu li img:hover {    
-webkit-filter: sepia(1) hue-rotate(303deg) saturate(100);
filter: sepia(1) hue-rotate(303deg) saturate(100);
}


/**vitrina**/
#vitrina1 {padding: 50px 0; background: #e6e6e6;}
#vitrina2 {padding: 60px 0; background: #747474;}
#vitrina2 h2 {color: #fff;}
.products ul {list-style-type: none;margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
}
.products * {text-align: center;}
.products ul img {display: block; border-radius: 50%; margin: auto auto 10px;}
.products.services ul img {border-radius: 0;}
.products li {position: relative; z-index: 3; margin: 20px 0;}
#vitrina1 .products li:before {content: ''; display: block; width: 12px; height: 12px; border-radius: 50%; background: #faac36; position: absolute; bottom: -10px; left: calc(50% - 6px); z-index: 5;}
#vitrina2 .products li:after {content: ''; display: block; height: 2px; position: absolute; bottom: -5px; left: 25%; right: 25%; z-index: 4;
background: #fad881;
background: -moz-linear-gradient(left,  #fad881 0%, #ffffff 100%);
background: -webkit-linear-gradient(left,  #fad881 0%,#ffffff 100%);
background: linear-gradient(to right,  #fad881 0%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fad881', endColorstr='#ffffff',GradientType=1 );
}
#vitrina2 img:hover {
  -webkit-transform: rotateZ(360deg);
  -ms-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
  -webkit-transition: all 1.5s ease;
  -moz-transition: all 1.5s ease;
  -o-transition: all 1.5s ease;
  transition: all 1.5s ease;
}



/**main**/
#main {padding: 50px 0 70px;}

.mainleft {
-webkit-flex: 2.9;
-ms-flex: 2.9;
flex: 2.9;
} 
.mainright {
margin-left: 55px;
-webkit-flex: 2.1;
-ms-flex: 2.1;
flex: 2.1;
}

/**breadcrumb**/

#content .breadcrumb {padding: 10px 0; margin: 0;}
.breadcrumb li {display: inline-block;}
.breadcrumb li * {color: #858585; font-size: 14px;}
.breadcrumb li a span {color: #1d1d1d;}
.breadcrumb li.active span {color: #858585;}

/**pagination**/

#content .pagination-list {padding: 20px 0; margin: 0; list-style-type: none; text-align: center;}
.pagination-list li {display: inline-block; padding: 10px;}
.pagination-list li * {font-size: 18px;}
.pagination-list li a {color: #1d1d1d;}
.pagination-list li.active a {color: #ccc;}

/**about**/
.about ol {margin: 0;
list-style-type: none; 
counter-reset: num;
display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.about ol li {position: relative; padding: 33px; margin-top: 20px; width: 22%; background: #eee;}
.about ol li:before {
content: counter(num); 
counter-increment: num;
display: inline-block;	
position: absolute;
top: 17px;
left: -33px;
width: 62px;
height: 62px;    
color: #fff;
font-size: 50px;
font-family: 'robotobold';
border-radius: 50%; 
background: #faac36;
border: solid 6px #fff;
}


/**footer**/
#footer {background: #000 url(../images/footer.png) no-repeat center fixed; clear: both;}
#footer > .inner { padding-top: 60px; padding-bottom: 60px;
display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
#footer * {color: #fff; font-size: 14px;}
#footer .logo {max-width: 130px;}
#footer .logo img {margin-bottom: 10px;}
#footer .logo p {font-size: 13px; line-height: 1.9em; text-align: center; text-transform: uppercase; color: #ececec;}
#bottom_menu {display: inline-block; vertical-align: top; padding-right: 10px; padding-bottom: 30px;}
#bottom_menu li {padding-left: 15px; position: relative;}
#bottom_menu li:before {content: '\276F'; font-size: 10px; position: absolute; left: 0; top: 1em;}
#bottom_menu li:hover:before,
#bottom_menu li.active:before  {color: #f7c84c;}
#bottom_menu li > a {display: block; padding-top: 8px;}
#bottom_menu li a:hover {color: #f7c84c; text-decoration: none;}
#bottom_menu li.active > a {color: #f7c84c; text-decoration: none;}
#bottom_menu li.active a:hover {text-decoration: none;}

#footer .phone * {text-align: left; vertical-align: middle;}
#footer .phone p {margin-top: 5px; margin-bottom: 5px;}
#footer .phone img {margin-right: 10px; margin-bottom: 5px;}

/**copy**/
#copy {background: rgba(75, 75, 75, 0.48); padding: 30px 0;}
#copy * {font-size: 13px; color: #fff; text-align: center;}
#copy .elevator {width: 60px; position: fixed; right: 30px; bottom: 60px;}
#copy .elevator svg {width: 60px; height: 60px;}

#mxcpr {position: absolute; bottom: 5px; right: 10px;}
#mxcpr a {color: #424242;}



/**content**/
.page-header {text-align: center;}
h1 {margin: 30px 0; color: #ffba00; font-size: 30px;  line-height: 1em; text-transform: uppercase; text-align: center;}
.mainpage h1 {font-size: 25px; margin-bottom: 20px;}
h2 {font-size: 25px; text-transform: uppercase; color: #878787; line-height: 1em; margin: 20px 0 10px; clear: both;}
.mainpage h2 {text-align: center;}
h3 {font-size: 20px; margin-bottom: 20px; line-height: 1em;}
h4 {font-size: 30px; color: #ffba00; margin-bottom: 20px; line-height: 1em;}
#content table {margin: 3px 0 10px;}
#content p {margin: 3px 0 10px;}
#content table p {margin: 0;}
ul, ol {margin: 3px 0 10px 20px;}

.items-leading h2 {text-transform: none;}
.items-leading h2 a {font-size: 20px; font-family: 'robotomedium'; text-decoration: none; padding: 20px 15px; position: relative;}
.items-leading h2 a:before {
    content: '\276F';
    font-size: 20px;
    position: absolute;
    left: 0;
    top: 1.1em;
}
.items-leading h2 a:hover {color: #ffba00;}
.pull-left {padding-right: 20px; padding-bottom: 20px;}
.pull-left img {border-radius: 4px;}

.kolonki {margin: 0; list-style-type: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
}

.yamap {float: right; width: 45%; margin-left: 20px; margin-bottom: 30px;}
.qf3form.default {padding: 0;}
.qf3form.default form {
 display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: space-between;
}
.qf3form.default .qf3 {width: 49%; margin: 0;}
.qf3form.default .qf3.qftextarea {width: 100%;}
.qf3form.default .qf3label {display: none;}
.qf3form.default .qf3txt input, .qf3form.default textarea {width: 100%;}
.qf3form.default .qffile input {max-width: 100%;}
.qf3form.default .qfcapt {margin-top: 50px;}

.alert-success {padding: 30px; border: solid 1px green;}



@media screen and  (max-width: 1064px) {
   .about ol li {padding: 35px 15px 15px; margin-bottom: 35px; width: 48%; text-align: center;}
   .about ol li:before {
   top: -31px;
   left: calc(50% - 31px);
   }	
}
@media screen and (min-width: 721px) and (max-width: 999px) {
   .products ul img {max-width: 200px;}
}
@media screen and (max-width: 720px) {
    * {font-size: 15px;}
	body {-webkit-overflow-scrolling: touch; padding-top: 0;}   
   #header .logo img {max-width: 150px;}
   #header .phone {padding-top: 20px;}
   #header .phone * {font-size: 13px;}
   #header .phone strong {font-size: 21px;}
   .products ul {
   -webkit-box-pack: justify;
   -ms-flex-pack: justify;
   justify-content: center;
   }
   .products li {padding-left: 15px; padding-right: 15px;}
   .products ul img {max-width: 150px;}   
   #footer .logo {max-width: 120px;}
   #footer * {font-size: 13px;}
   #bottom_menu li > a {padding-top: 0;}
   #bottom_menu li:before {top: 3px;}
}
@media screen and (max-width: 589px) {
.table-responsive {width:100%; overflow:auto;}
h1 {font-size: 25px;}
.mainpage h1 {font-size: 20px;}
h2 {font-size: 20px; text-transform: uppercase; text-align: center; color: #878787; margin-bottom: 20px; clear: both;}
h3 {font-size: 17px; margin-bottom: 10px;}
h4 {font-size: 15px; margin-bottom: 10px;}
#header .phone {padding-top: 10px;}
#header .phone strong {font-size: 18px;}
.qf3form.default .qf3 {width: 100%;}
.yamap {float: none; width: 100%; margin-left: 0;}
}


::-webkit-scrollbar {
    -webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
    width: 10px;
}
::-webkit-scrollbar:horizontal {
    height: 10px;
}
::-webkit-scrollbar-thumb {
    background-color: #eee;
    border-radius: 10px;
	cursor:pointer;
}
::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, .1);
}