* {margin: 0; padding: 0;}

html, body {height: 100%;}
body {font-family: 'Roboto', sans-serif, Arial, calibri; font-size: 16px; line-height: 1.5; color: #444; overflow-x:hidden;}

img {max-width: 100%;}

section {padding: 60px 0 70px 0;}

h1, h2, h3, h4, h5 {font-weight: 300; letter-spacing: -1px; line-height: 1.3; text-transform: none; color: #111;}
h1 {font-size: 40px;}
h2 {font-size: 32px;}
h3 {font-size: 26px;}
h4 {font-size: 24px;}
h5 {font-size: 20px;}

.content h1, .content h2, .content h3, .content h4, .content h5, .content p, .content ul, .content ol, .content img, .content table {margin-bottom: 20px;}
.content a {color: #f7c51e;}
.content a:hover, .content a:focus {color:inherit;}


a {text-decoration: none; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s;}
ul,ol {list-style-position:inside;}

/******************************************************MAIN***************************************************************/
.top-header {padding-top:10px; background-color: #434752;}
.top-header .btn {display: none;}
.logo {display: block; background-color:white; text-align: center; line-height: 0; padding:10px 0px;  margin-left: -15px; margin-right: -15px;}
.logo img {max-width:200px;}
.text-logo p {font-size: 12px;}
.header-right-block {padding-bottom: 10px; text-align: center;}
.header-info {display: block; color: #fff; padding-bottom: 5px; font-size:14px;}
.header-info a {color: #fff; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s;}
.header-info a:hover, .header-info a:focus {color: #f7c51e;}

/***menu***/
nav {background-color: #1d1d1d;}
.showmenu.fa, .btn-callback.fa {font-size: 30px; padding: 10px; background-color: transparent; border: 0; color: #666; outline:0;}
.showmenu.active, .showmenu:hover, .btn-callback:hover, .showmenu:focus, .btn-callback:focus {color:#fff;}
.btn-callback {float:right;}
.menu {display: none; list-style:none;}
.menu li {position: relative; border-bottom: 1px solid #4a4a4a;}
.menu a {position: relative; display: block; color: rgba(255,255,255,.7); text-transform: uppercase; padding:20px 7px; font-size:14px; padding-right: 40px;}
.menu > li> a:hover, .menu> li> a:focus {color:#fff;}
.menu ul {display: none;  background-color:#fff; -webkit-box-shadow: 0 1px 7px -3px rgba(0,0,0,.7); -moz-box-shadow: 0 1px 7px -3px rgba(0,0,0,.7); box-shadow: 0 1px 7px -3px rgba(0,0,0,.7);}
.menu li ul li {display: block;}
.menu li ul a {color: #333; border-bottom:1px solid #eee; padding:10px 15px; font-size:14px; text-transform: none;}
.menu li ul a:hover, .menu li ul a:focus {background-color:  #f7c51e;}
.li-with-ul .fa {position: absolute; top:10px; right:10px; font-size:36px; color: #bcbcbc; cursor:pointer;}
li .li-with-ul .fa {top:0;}
.fixed-nav {display: none; visibility: hidden; -webkit-transition: all .7s; -moz-transition: all .7s; -ms-transition: all .7s; -o-transition: all .7s; transition: all .7s;}

@media (min-width: 768px) {
   .header-info {color:#fff; display: inline-block; padding:0px 10px;}
}
@media (min-width:768px) and (max-width: 991px) {
    .top-header .container {width: 100%;}
}
@media (max-width:991px) {
    .showMenu > ul {display: block;}
    .menu > li  .showMenu {background: #f7c51e; padding-left: 20px;}
    .menu ul ul {margin-bottom: 40px;}
}
@media (min-width: 992px) {
    .top-header {background-color: transparent; padding-bottom: 10px; padding-top:10px;}
    .top-header .btn {display: inline-block;}
    .logo {max-width:200px; padding: 0; margin: 0;}
    .header-right-block {position: relative; float:right; height: 100px; padding: 0; text-align: left;}
    .header-right-block:before {content:""; display: inline-block; vertical-align: middle; height: 100%;}
    .header-info {border-left:1px solid #eee; color: #444; padding: 6px; padding-bottom: 0;}
    .header-info p {color: #444; padding: 6px; padding-bottom: 0; text-transform: uppercase; font-size: 12px; font-weight: 600;}
    .header-info a {color: #444;}
    nav {position: relative; background-color:transparent; margin-bottom: -30px; z-index: 9;}
    .block-main-menu {position: static; /*background-color:transparent;*/ background-color: #1d1d1d;}
    .showmenu.fa, .btn-callback.fa {display: none;}
    .menu {display: block!important;}
    .menu a {padding: 20px;}
    
    .menu li {display: inline-block; border:0;}
    .menu > li >a:before {content:""; position: absolute; bottom:25%; right:-1px; width: 1px; height: 50%; background-color:#4a4a4a;}
    /*.menu .active a:before {display: none;}*/
    .menu > li > a:after {content:""; position: absolute; bottom:0; left:0; width: 0; height: 3px; background-color: #ffc815;
        -webkit-transition: all .5s cubic-bezier(0.125,.75,.415,1) 0s; -moz-transition: all .5s cubic-bezier(0.125,.75,.415,1) 0s; -ms-transition: all .5s cubic-bezier(0.125,.75,.415,1) 0s;
        -o-transition: all .5s cubic-bezier(0.125,.75,.415,1) 0s; transition: all .5s cubic-bezier(0.125,.75,.415,1) 0s;
    }
    .menu > li > a:hover:after, .menu > li > a:focus:after  {width: 100%;}
    .menu .active {background-color: #f7c51e;}
    .menu .active> a {color:#111;}
    .menu li ul {position: absolute; top:100%; left:0; width:200px; z-index:999;}
    .menu li:hover > ul {display: block;}
    .menu ul ul {left:100%; top:0;}
    .li-with-ul:after {position: absolute; right: 7px; top: 40%;  margin-left: -6px; content: '\f0d7'; font: 400 12px/12px 'FontAwesome'; color:#777777;}
    li .li-with-ul:after {content:"\f0da";}
    .li-with-ul .fa {display: none;}
}
@media (min-width: 1200px) {
    .fixed-nav {display: block; position: fixed; top:0; left:0; right:0; width:100%; z-index:9999; background-color: white; padding: 10px; opacity: 0;
        -webkit-box-shadow: 2px 2px 9px 1px rgb(0,0,0,0.3); -moz-box-shadow: 2px 2px 9px 1px rgb(0,0,0,0.3); box-shadow: 2px 2px 9px 1px rgb(0,0,0,0.3);
    }
    .fixed-nav.active {visibility: visible; opacity: 1;}
    .logo-name {float: left; font-size: 26px; font-weight: bold; padding-top: 10px;}
    .logo-name a {color: #333}
    .menu-r {float:right;}
    ul.menu.menu-r * {color: #333!important; font-size:12px;}
}

/***footer***/
footer {background-color: #222; padding-top:130px; font-size:15px;}
footer .content {color:white;}
footer .col {margin-bottom: 40px;}
footer .content h3 {position: relative; color:#fff; text-transform: none;  font-size: 19px; padding-bottom: 15px; font-weight:400;}
footer h3:after {content:""; position: absolute; bottom: 0; left: 0; height: 1px; width:40px; background-color: #f7c51e;}
footer a {color:white;}
footer a:hover, footer a:focus {color:#f7c51e;}
footer .fa {position: absolute; left:0; top:0; font-size:24px;}
.block-with-icon {position: relative; border-bottom: 1px solid #333; margin-bottom: 12px; padding-left: 35px;}
.block-with-icon p {margin-bottom: 12px;}
.createdby {padding-bottom:30px; font-size:16px;}
.createdby a, .createdby img {display:inline-block;vertical-align:middle; margin-right:10px; margin-bottom:10px;}

/***home_content***/
.about-us, .advantage, .home-products, .home-news {font-size:17px;}
.home-news,.advantage {border-bottom: 1px solid #eee;}

.home-products {background-color: #f7f7f7;}
.home-products ul {list-style:none; margin-bottom: 30px;}
.home-products li {border-bottom:1px solid #d4d4d4; padding:10px;}
.home-products a {color:#444;}
.home-products .fa {margin-right: 10px;}
.advantage h3 {margin-bottom: 40px;}
.advantage .fa {color:#f7c51e; font-size:60px; margin-bottom: 30px;}
.advantage h4 {font-size:26px; text-transform: none; color: #333; font-weight: 300;}
.adv {margin-bottom: 30px;}
.home-news-item {margin-bottom: 30px; border-bottom: 1px solid #eee;}
.home-news-item h4 {font-size:26px; text-transform: none; color: #333; font-weight: 400;}
.callback-block {position: relative; padding:0; margin-bottom: -60px; z-index:9;}
.callback {background: #f7c51e url(/assets/images/main/texture_dots.png); background-repeat: no-repeat; background-position: 100% 50%; background-size: 350px; padding:40px 20px; font-size:20px; overflow: hidden;}
.callback-text {float: left; margin-bottom: 10px;}
.callback .fa {font-size:34px; margin-right: 10px;}
.callback a {color:#444; white-space:nowrap;}
.callback .btn {float: right; margin-left: 15px;}

/***************************************************************************************************************************/


/***************************************************FORM*********************************************************************/
label {display: block; margin-bottom: 5px;}
input {width:100%; padding:14px; font-size:16px; outline:0; border:0; margin-bottom: 20px;}
textarea {width: 100%; resize:none; outline:0; margin-bottom: 20px; padding:10px; font-family: 'Roboto', sans-serif, Arial, calibri; font-size: 16px; line-height: 1.5;}
.field {overflow:hidden; margin-bottom: 15px;}

.sibscribe input {border-top-left-radius: 2px; border-bottom-left-radius: 2px; width:60%; float:left; height: 50px;}
.sibscribe input[type="checkbox"] {height: 20px; width:20px; float:left; margin-right: 10px;}
.sibscribe .btn {width:40%; padding:14px 0px; border-top-right-radius: 2px; border-bottom-right-radius: 2px;}

.form-contact input {border:1px solid  #ddd; border-radius:2px;}
.form-contact textarea {border:1px solid #ddd; border-radius:2px;}
.form-contact .btn {max-width:200px; border:0;}

.form-overlay {visibility: hidden; position: fixed;top:0;bottom:0;left:0;right:0;background-color:rgba(0,0,0,0.7);z-index:99999;overflow-y: auto; opacity: 0;
    -webkit-transition: all .7s; -moz-transition: all .7s; -ms-transition: all .7s; -o-transition: all .7s; transition: all .7s;
}
.form-callback {max-width:350px; margin: 100px auto 530px auto; padding:0px 15px;}
.form-title {color:white; text-align: center; margin-bottom:20px}
.form-overlay.active {visibility: visible; opacity: 1;}
.form-close.fa {position: absolute; top: 5px; right: 20px; color: red; font-size: 40px; cursor:pointer;}

.message {display: none; position:fixed; top:10px; left:10px; max-width:300px; padding:20px 10px; z-index:99999; color:white;
    -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.7); -moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.7); box-shadow: 1px 1px 4px rgba(0,0,0,0.7);
}
.message.active {display: block;}

.has-error {border:2px solid red!important;}
/***************************************************************************************************************************/


/***************************************************CONTENT*****************************************************************/

.image-head {position: relative; background-size:cover; background-position: center; background-repeat: no-repeat; height: 310px; padding-top:130px; padding-bottom: 70px;}
.image-head:before {content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,0.4);}
.image-head h1 {position: relative; color:white; margin-bottom: 5px;}
.image-head p {position: relative; color:white;}

.block-breadcrumbs {background-color: #f2f2f2; padding:20px 0px; font-size:14px;}
.breadcrumb {list-style:none;}
.breadcrumb li {display:inline-block;}
.breadcrumb .active {color:#777}
.breadcrumb a {color:#444;}
.breadcrumb a:after {content:"\f105"; font-family:FontAwesome; font-weight:none; margin:0px 5px; vertical-align:middle;}

.map {height: 350px;}
@media (min-width: 768px) {
    .map {height: 470px;}
}

.news {padding: 30px 20px; border: 1px solid #eee; margin-bottom: 30px;}
.news a {color: #333}
.pagination {list-style:none;}
.pagination li {display:inline-block; margin:0px 3px; margin-bottom: 5px; font-size:14px;}
.pagination a {color:#444; padding:2px;}
.pagination .active a {color: #f7c51e;}

.block-category-nav {position: static;}
.category-nav {margin-bottom: 30px; font-size:14px;}
.submenu, .submenu ul {border-top:1px solid #eee;  background-color:white;}
.submenu li {list-style:none; position: relative;}
.submenu a {display: block; padding: 10px; padding-right: 20px; border: 1px solid #eee; color:#343434;}
.submenu li+li a {margin-top: -1px;}
.submenu a:hover, .submenu a:focus{background-color: #f7f7f7;}
.submenu li ul {display: none; }
.submenu .active {background-color:#f7c51e;}
.submenu .with-ul:after {content:""; position: absolute; right: 3px; top: 12px; font: 400 12px/12px 'FontAwesome'; color:#777777;}
.submenu .fa {display: block; position: absolute; right:5px; font-size:28px; top:6px;}

@media (max-width: 767px) {
    .submenu .showMenu {background-color: #f7c51e;}
    .submenu .showMenu > ul {display: block; padding-left:15px; margin-bottom: 0;}    
}
@media (min-width: 768px) {
    .submenu a {padding: 7px 7px 7px 10px;}
    .submenu .fa {display: none;}
    .submenu .with-ul:after {content:"\f0da";}
    .submenu li ul {position: absolute; top:-1px; left:100%;  z-index:99999; width:200px;}
    .submenu li:hover > ul {display: block;}
}


.list-product {display: -webkit-box;  display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.product {margin-bottom: 30px;}
.product h3 {font-size:17px; font-weight:300;}
.product img {border: 2px solid transparent;}
.product a:hover img, .product a:focus img  {border: 2px solid #f7c51e;  -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s;}

.block-product .btn {font-size:16px; padding:12px 50px;}
.product-main-image {display: none; border:1px solid #eee; margin-bottom: 10px; text-align: center; outline:0;}
.product-main-image.active {display: block;}
.product-main-image img {margin-bottom: 0;}
.gallery {position: relative; padding:0px 15px;}
.gallery .swiper-container {position: static;}
.gal-item {float: left; padding: 3px; border: 1px solid #d4d4d4; margin: 4px; opacity: 0.8; line-height: 0;}
.gal-item:hover {opacity: 1.0;}
.gal-item img {margin-bottom: 0;}
.gal-item a {display: block;}


.up {position: fixed;  bottom:20px; right:20px; z-index:999; background-color: #808080; opacity: 0.5; width: 40px; height:40px; border-radius:5px; color:white; text-align: center; padding-top: 7px; cursor: pointer;
    -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s;
}
.up:hover, .up:focus {opacity: 1;}

@media (min-width: 768px) {
    .block-list-product {min-height:400px;}
    .fixed-category-nav {position: fixed; z-index:9999;}
}
/***************************************************************************************************************************/

/***support***/
.js-open-form {overflow:hidden;}
.btn {display: inline-block; background-color: #f7c51e; color:#444; padding:12px; border:0px; outline:0; cursor:pointer; border:3px solid #f7c51e; outline:0;
     -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s;
}
.btn:hover, .btn:focus {color:#fff; background-color:#1d1d1d;}
.btn-more {background-color:transparent; padding:12px 25px; border: 2px solid #bbb; color:#fff; font-size: 18px;}
.btn-more:hover, .btn-more:focus {opacity: .8; background-color:transparent;}
.btn-white {background: #fff; padding: 17px 30px; text-transform: uppercase;}
.btn-gray {background-color:#f2f2f2; border:0;}
.btn-dark {border:0; background-color:#333; color:white;}
.btn-dark:hover, .btn-dark:focus  {background-color:#444;}

.f-right {float:right}
.date {color: #777; font-size:14px;}
.more {display: inline-block; color:#444!important; border-bottom:3px solid #f7c51e; padding-bottom:5px;}
.center {text-align: center;}

.table-response {max-width: 100%; overflow-x: scroll; margin-bottom: 20px;}
.table-response table {margin-bottom: 0px;}
td {font-size:14px;}