* { margin: 0; padding: 0; outline: none; box-sizing: border-box; }
img {border:0;}
html {height:100%;}
body {height: auto !important; min-height: 100%; position: relative; background:#fff; font:12px 'Montserrat', Arial, Helvetica, sans-serif; color:#000;}
.container { width:90%; margin:0 auto; padding:0 10px; position:relative;}
ul {list-style:none;}
a {}



header {height:80px; z-index:2; position:relative;}

.logo {position:absolute; top:0;}
.logo img {width: 80px; height: 80px}
header ul {left:230px; top:30px; position:absolute;}
nav ul li {float:left; margin-right:20px;}
nav ul li a {color:#8D8D8D; font-size:13px; text-decoration:none;}
nav ul li a:hover {text-decoration:underline;}
.main-bg {background: url(../images/main-bg.jpg) no-repeat center; min-height:650px; background-size:cover; text-align:center; padding:130px 0 0 0; margin-bottom:70px;}
.callback {position:absolute; right:10px; top:30px; font-weight: 500; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; display:inline-block; padding:0 0 0 24px; background:url(../images/dots.png) no-repeat left; text-decoration:none; color:#000;}
.callback:hover {text-decoration:underline;}
.tel {right:200px; top:23px; position:absolute; color:#000; text-decoration:none; font-size:22px;}
.main-bg h1 {color:#fff; font-weight: 800; font-size: 52px; margin-bottom:30px;}
.main-bg p {margin-bottom:50px; font-size:30px; color:#fff;}
.button-1, .button-2 {width:280px; height:60px; line-height:60px; text-decoration:none; font-weight:bold; text-align:center; display:inline-block; vertical-align:top; letter-spacing: 0.1em; text-transform: uppercase;}
.button-1 {background: #EB6852; color:#fff;}
.button-2 {background:#fff; color:#000;}
.button-1:hover, .button-2:hover, .button-3:hover {opacity:.8;}
.main-bg .button-1, .main-bg .button-2 {margin:5px;}

h2 {font-weight: 800; font-size: 52px; margin-bottom:50px; text-align:center;}
.about-wrap {margin-bottom:100px;}
.about-1 {width:686px; float:left;}
.about-2 {width:484px; float:left;}

.about-1 p {display:block; color: #8D8D8D; font-size:16px; line-height: 22px; margin-bottom: 10px}
.about-1 span {font-size:30px;}
.about-1 div {margin-bottom:30px;}
.about-1 a {margin-top:20px;}
.about-2 img {width:100%; height:auto;}

.products {margin:0 -10px 70px -10px;}
.product {width:33.33%; float:left; padding:10px; position: relative}
.product-in {border: 2px solid #E5E5E5; padding:30px 10px; text-align:center;}
.product-in h6 {font-weight: 500; font-size: 21px; margin-bottom:30px; min-height: 50px}
.product-in a {display:block; margin:0 auto; width: 100%; height:60px; text-decoration:none; line-height:56px; text-align: center; font-weight: bold; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase;}
.product-in a:hover {text-decoration:underline;}
.product-img {min-height:290px;}
.product-img img {max-width:100%; width:auto; height:auto;}
.fd {max-width:200px; margin:0 auto 30px; text-align:left; color: #8D8D8D; font-size:13px; font-weight:500; line-height:22px;}
.fd p {position:relative;}
.fd p span {position:absolute; right:0; top:0;}

.icons {font-size:0; margin-bottom:70px; text-align: center;}
.icons li {width:20%; display:inline-block; vertical-align:top; font-weight: 500; font-size: 16px; line-height: 25px; color: #8D8D8D; padding:0 15px 30px 15px;}
.icons li img {width: 80px; height: 80px;}

.use-product {font-size: 16px; line-height: 22px; margin-bottom: 70px; color: #8D8D8D;}
.use-product h4 {text-align: center; font-size: 22px; line-height: 35px; color: #000}
.use-product p {margin-bottom: 10px;}
.use-product p span {color: #000}
.use-product a {margin: 20px auto 0; display: block}
.use-product ul {list-style: disc; margin-left: 20px; margin-bottom: 20px}

.docs {margin-bottom: 70px; min-height: 420px}
.doc-img {width: 300px; height: auto; float: left}
.doc-img img {width: 100%}
.doc-text {max-width: 680px; line-height: 24px; font-size: 18px; float: left; padding-left: 50px; color: #8D8D8D;}
.doc-text p {margin-bottom: 15px}

.photos {margin:0 -7.5px 100px -7.5px;}
.photo-col {width:33.33%; float:left; padding:0 7.5px;}
.photo {position:relative;}
.photo img {display:block; width:100%; height:auto; margin-bottom:18px;}
.photo div {position:absolute; left:0; top:0; right:0; bottom:0;}
.photo div span {display:table; width:100%; height:100%;}
.photo div span i {display:table-cell; width:100%; height:100%; text-align:center; vertical-align:middle; color:#fff; font-size:28px; font-style:normal;}

.slider-wrap { position:relative; margin: 0 auto 50px}
.slider-wrap h2 {position:absolute; color:#fff; left:35px; top:45px; z-index:2;}
.slider-wrap .owl-carousel {z-index:1;}
.slider-wrap .owl-carousel .owl-item img {height:auto;}
.slider-wrap .owl-nav {height:0; position:absolute; left:10px; right:10px; top:50%; margin-top:-25px;}
.slider-wrap .owl-nav span {display:none;}
.slider-wrap .owl-prev {background: url(../images/sl-arr.png) !important; width:50px; height:50px; font-size:0; display:block; border:0; position:absolute; left:0;}
.slider-wrap .owl-next {background:url(../images/sl-arr.png) !important; width:50px; height:50px; transform:rotate(180deg); position:absolute; top:0; right:0; font-size:0; display:block; border:0;}
.owl-nav .disabled {opacity:.6; cursor: default !important}
.owl-dots {text-align:center; margin-top:20px;}
.owl-dot {width:15px; height:15px; border-radius:50%; background:#577084 !important; display:inline-block; vertical-align:middle; margin:0 3px;}
.owl-dot.active {background:#ed731d !important;}
.owl-dot span {display:none;}

.cont-box {background:#F3F3F3; width:350px; padding:70px 10px; text-align:center;}
.cont-box p {font-weight: 500; font-size: 16px; line-height: 27px; margin-bottom:50px;}
.cont-box div {font-size:22px; margin-bottom:25px;}
.button-3 {width:230px; height:60px; line-height:60px; text-decoration:none; font-weight:bold; text-align:center; display:inline-block; vertical-align:top; letter-spacing: 0.1em; text-transform: uppercase; background: #EB6852; color:#fff; margin:0 auto;}
.button-3:before {display:inline-block; background:url(../images/dots2.png); width:17px; height:3px; content:''; vertical-align: middle; margin-right:10px;}
.button-3 * {vertical-align: middle; display:inline-block}

#map {height:600px;}
.cont-wrap {padding: 30px 0 0 280px; position:relative; margin-bottom:50px;}
.cont-box {position:absolute; left:0; top:-50px; z-index:2}
.footer-logo {position:absolute; left:50px; bottom: 0;}
.footer-logo img {width: 80px; height: 80px}

.soc img {width: 30px; height: auto; vertical-align: middle}
.soc a { vertical-align: middle; text-decoration: none; color: #000;}

.wrap {position:fixed; left:0; top:0; right:0; bottom:0; z-index: 10; text-align:center; color:#fff; display:none; background: rgba(100,100,100,0.6); justify-content:center; align-items:center; overflow:auto;}
.feedback-form {background:#fff; width:480px; color:#000; padding:60px; position:relative; display:none;}
.feedback-form p {font-size:16px; margin-bottom:30px;}
.feedback-form h3 {font-size:24px; margin:0 0 20px 0; font-weight:bold;}
.feedback-form input, .feedback-form textarea {height:40px; margin-top:15px; width:100%; display:block; text-align:center; border:1px solid #c2c2c2; text-transform: uppercase; letter-spacing: 0.1em}
.feedback-form textarea {height: 60px; padding: 10px; margin-bottom: 15px}
.feedback-form input:focus::placeholder {color: transparent;}
.feedback-form textarea:focus::placeholder {color: transparent;}
.form-button { display:block; width:100%; height:60px;border: 0;transition:all .15s ease-out; cursor:pointer; background:#EB6852; font-size: 12px; color: #fff; text-transform: uppercase; letter-spacing: 0.1em; font-weight: bold}
.feedback-form button:hover {opacity:.8;}
.close {background:url(../images/close.png) no-repeat; width:22px; height:22px; cursor:pointer; position:absolute; right:30px; top:30px;}
.success-modal {background:#fff; width:400px; color:#000; padding:30px; position:fixed; display:none; z-index: 20; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.success-modal h3 {font-size:24px; margin:0 0 20px 0; font-weight:bold; text-align: center}
.success-modal p {font-size:16px; margin-bottom:30px; text-align: center}

.error {color: red;}

/*Clear & Animation*/
.clear, .products:after, .photos:after, .about-wrap:after {clear:both; line-height:0; height:0; overflow:hidden; font-size:0; content:''; display:block;}
a, button {transition:all 0.2s ease-in-out;}

/*Responsive*/
@media (max-width: 1210px) {
    .container {width:1000px;}
    .about-1 { width:680px;}
    .about-2 { width:300px;}
    .ham {position:absolute; left:10px; top:23px; cursor:pointer; background:url(../images/ham.png) no-repeat center; background-size:cover; width:40px; height:40px;}
    .logo {left:60px;}
    nav {background:#fff; position:absolute; left:0; right:0; top:100px; display:none;}
    nav ul {position:static; padding:10px 0;}
    nav ul li {float:none; margin:0; padding:5px 10px;}
    nav ul li a { font-size:20px;}
    nav.ext {display:block;}
    .photo div span i {font-size:25px;}
    .product-in h6 {min-height: 75px}
}

@media (max-width: 999px) {
    .container {width:768px;}
    h2 {font-size:45px;}
    .icons li {width:33.33%;}
    .product {padding: 0 30px}
    .product-in {padding:20px 10px;}
    .product-in h6 {min-height: 50px}
    .product {width: 50%; margin: 10px 0}
    .photo div span i {font-size:20px;}
    .doc-img {width: 200px; margin: 10px auto; float: none}
    .doc-text {width: 100%; float: none; padding-left: 0}
    .about-1 a { display: block; margin: 0 auto}
    .about-1 { width:100%;}
    .about-2 {display: none}
    .cont-box {position:static; width:100%;}
    .cont-wrap {padding:0; margin-bottom:20px;}
    .footer-logo {text-align:center; position: static; padding-top:30px;}
}

@media (max-width: 767px) {
    .container {width:auto;}
    h2 {font-size:40px; margin-bottom: 30px}
    header {height:80px;}
    nav {top:70px;}
    .logo {top:0;}
    .ham {top:17px;}
    .tel {right:10px; top:10px;}
    .callback {top: 40px}
    .main-bg  {min-height:1px; padding:50px 0;}
    .main-bg p {font-size:20px;}
    .main-bg h1 {font-size:30px;}
    .main-bg .button-1, .main-bg .button-2 {display:block; margin:0 auto 10px auto;}
    .icons {margin-bottom: 30px}
    .product {padding: 0 10px}
    .product-in h6 {min-height: 75px}
    .photos {margin:0 -2px 70px -2px;}
    .photo-col {padding:0 2px; }
    .photo img {margin-bottom:4px;}
    .about-wrap {margin-bottom: 70px}
    .about-1 a {width:200px;}
    .slider-wrap {margin-bottom:70px;}
}

@media (max-width: 576px) {
    .icons li {width:50%; font-size: 13px; line-height: 20px;}
    .photo-col {width:100%;}
    .about-1 { width:100%;}
    .about-1 a {width:100%; margin:20px 0 50px 0;}
}

@media (max-width: 480px) {
    .tel {font-size: 20px}
    .about-1, .doc-text {text-align: justify}
    .product { width: 100%}
    .product-in h6 {min-height: 50px}
    .success-modal {width: 300px; padding: 30px}
    .sale {right: 0; top: -50px}
    .logo {overflow:hidden;}
    h2 {font-size:35px;}
}