/* =============================================
----------------- Responsive  ------------------
==============================================*/

@media (max-width: 1280px) {
	.container{ width: 100%;}
	span.bg-show img{ margin-left: -40%;}
	.main-Ecatalog-list ul li{margin-left: 8%;}
	.ecatalog-list ul li{ margin: 0 0.5% 40px 3.5%;}
	ul.product-nav-sub li{ width: 22%; min-width: 210px; margin: 0 0 20px 2%;}
}

@media (max-width: 1200px) {
	.ecatalog-list ul li{ width: 250px; min-height: 250px; margin: 0 0 40px 8%;}
}

@media (max-width: 1100px) {
	span.bg-show img{ margin-left: -50%;}
	.main-Ecatalog-list ul li{margin-left: 6%;}
	.contact h2, .inquiry h2{ margin-left: 2%;}
	.contact .map{ width: 90%;}
	.contact ul{ width: 100%;}
	.form-info{ width: 95%;}
	.ecatalog-list ul li{ margin: 0 0 40px 6%;}
	.product-nav-main ul li a img{ margin: 0 15% 0 10%;}
	ul.product-nav-sub li{ margin: 0 0 20px 1%;}
	.products-list-info, .product-list ul.item li ul{ width: 80%;}
	.product-recommend{ width: 95%;}
	.product-recommend ul li{ margin: 0 2%;}
}
/*===========================================================================================================*/
@media (max-width:1000px) {
	nav{ margin: 0;}
	.footer-menu{ padding: 60px 10px 0;}
	.main-Ecatalog-list ul li:first-of-type, .ecatalog-list ul li:first-of-type{ margin-left: 3%;}
	ul.product-nav-sub li{ width: 30%; margin: 0 0 20px 2%;}
	.product-info{ width: 90%; padding: 0 10px;}
	.product-info-left .product-pic{ width: 100%; float: none;}

}

@media only screen and (max-width:950px) {
	nav#menu > ul > li > a{ padding: 32px 20px;}
	.footer-follow{ width: 20%; float: none; margin: 0 auto;}
	.footer-menu{ width: 70%; padding: 60px 20px 0; margin-bottom: 20px;}
	.main-Ecatalog-list ul{ display: flex;}
	.main-Ecatalog-list ul li{ width: 33%; height: auto; margin-left: 5%;}
	.main-Ecatalog-list ul li:first-of-type{ margin-left: 0;}
	.main-Ecatalog-list ul li span.control a{ padding: 10px 8px;}
	.ecatalog-list ul li{ width: 28%; height: auto; margin: 0 0 40px 5%;}
	.ecatalog-list ul li span.control a{ padding: 10px 6px;}
	.product-nav-main{ padding: 0 20px;}
	.product-nav-main ul li a img{ margin: 0 10% 0 10%;}
}

@media only screen and (max-width:865px) {
	nav#menu > ul > li > a{ padding: 32px 12px;}
	.main-Ecatalog-list ul li span.control a{ padding: 10px 5px;}
	.ecatalog-list ul li span.control a{ display: block; margin-bottom: 10px;}
	.ecatalog-list ul li span.control a:last-of-type{ margin-left: 0;}
	.product-nav-main ul li a img{ margin: 0 5% 0 10%;}
}

@media only screen and (max-width:799px) {
	.footer-company{ float: none; display: table; margin: 0 auto;}
	.footer-company .info{ display: none;}
	.footer-menu{ width: 100%; float: none; padding: 20px 20px 0;}
	.main-product-list{ height: 250px;}
	span.show-bigger{ width: 100%; float: none;}
	.show-small{ display: none;}
	span.bg-show img{ margin-left: -40%;}
	.main-product-list h1{ font-size: 30px; top: -250px; padding: 20px 60px;}
	.main-Ecatalog-list ul li span.control a{ display: block; margin-bottom: 10px;}
	.main-Ecatalog-list ul li span.control a:last-of-type{ margin-left: 0;}

	.content-pic{ width: 90%; display: table; margin: 0 auto;}
	.content-info{ width: 100%; display: table; margin: 20px auto 0; padding: 0 20px;}
	.content-pic img.all-full{ width: 100%; height: auto; position: initial;}
	.product-nav-main ul li a img{ margin: 0 4% 0 8%;}

	.product-list{ padding: 0 20px;}
	.product-list > ul.item{ display: flex; flex-wrap: wrap;}
	.product-list > ul.item > li{ width: 48%;}

	.product-info{ width: 100%;}
	.product-info-left, .product-info-right{ width: 90%; float: none; display: table; margin: 0 auto;}
	.product-btn{ margin: 20px auto 60px;}
}

@media (max-width: 767px){
	nav{ margin: 0 !important;}
	nav#menu > ul{ display: none;}
	nav#menu #responsive-nav{ display:block;}
	footer{ padding: 30px 0 50px;}
	.footer-follow{ display: none;}
	.footer-menu.mobile{ padding: 0;}
	.mobile .main-nav, .mobile .sub-nav{ width: 100%; margin: 0;}
	.mobile .main-nav h4{  display: block;}
	.mobile .sub-nav h4 a, .mobile .main-nav h4 a{ font-size: 22px; line-height: 46px; padding-left: 20px; display: block; cursor: pointer;}
	.mobile h4{ border-top: 1px #ddd solid;}
	.mobile .sub-nav:last-of-type h4{ border-bottom: 1px #ddd solid;}
	.mobile .sub-nav h4 a i, .mobile .main-nav h4 i{ display: block;}
	.mobile ul{ width: 100%; background: #4a4a4a; display: none;}
	.mobile .main-nav ul li, .mobile ul li{ font-size: 18px; line-height: 42px; font-weight: normal; padding-left: 40px; border-top: 1px solid #555;}
	.mobile ul li a{ color: #ddd;}
	ul.product-nav-sub li{ margin: 0 0 20px 1%;}
}

@media only screen and (max-width:750px) {
	.contact ul li span{ font-size: 14px;}
	.product-nav-main ul{ display: block;}
	.product-nav-main ul li{ width: 100%; text-align: center; margin-left: 0; margin-bottom: 15px;}
	.product-nav-main ul li a img{ margin: 0 5% 0 10%;}
	ul.product-nav-sub li{ width: 45%; margin: 0 0 20px 4%;}
}

@media only screen and (max-width:700px) {
	.form-group{ width: 100%;}
	.form-row .form-group:nth-of-type(2){ margin-left: 0; margin-top: 15px;}
}

@media only screen and (max-width:644px) {
	.contact ul li{ width: 100%; text-align: left; margin-left: 5%;}
	.contact ul li i, .contact ul li b, .contact ul li span{ display: inline-block; margin-right: 10px;}
	.product-recommend ul{ display: block;}
	.product-recommend ul li{ width: 90%; max-width: 350px; display: table; margin: 0 auto 60px;}
}

@media only screen and (max-width: 600px) {
	span.bg-show img{ margin-left: -80%;}
	.main-Ecatalog-list ul{ display: block;}
	.main-Ecatalog-list ul li, .main-Ecatalog-list ul li:first-of-type{ width: 80%; display: table; margin: 0 auto 80px;}
	.crumbs{ width: 100%; padding: 0 20px;}

	.ecatalog-list ul{ display: block;}
	.ecatalog-list ul li, .ecatalog-list ul li:first-of-type{ width: 80%; display: table; margin: 0 auto 80px;}
	.product-list{ padding: 0 10px;}
	.product-list > ul.item > li{ width: 100%; margin: 0 0 50px 0;}
	.products-list-info, .product-list ul.item li ul{ width: 95%;}
}

@media only screen and (max-width: 525px) {
	ul.product-nav-sub{ width: 98%;}
	ul.product-nav-sub li{ font-size: 15px; min-width: inherit; margin: 0 0 20px 2%;}
	.product-crumbs ul li.title{ width: 100%; float: none; display: block; margin-bottom: 40px;}
}

@media only screen and (max-width: 425px) {
	.product-nav-main ul li a{ font-size: 34px; letter-spacing: 1px;}
	ul.product-nav-sub li{ width: 100%; margin: 0 0 5px 0;}
	ul.product-nav-sub li a{ padding: 8px 0; text-align: left;}
	ul.product-nav-sub li img{ margin-left: 5%; margin-right: 5px;}
}

@media only screen and (max-width: 400px) {
	span.bg-show img{ margin-left: -100%;}
	.main-product-list h1{ font-size: 24px; padding: 15px 30px;}
	.content-info p{ font-size: 14px; line-height: 28px;}
	.content-info p span{ font-size: 18px;}
	.crumbs{ padding: 0;}
	.product-nav-main ul li{ height: 60px;}
	.product-nav-main ul li a{ line-height: 60px;}
	.product-nav-main ul li a img{ max-height: 60px; margin: 0 0 0 5%;}

}

@media only screen and (max-width: 375px) {
	span.bg-show img{ margin-left: -170%;}
	.main-Ecatalog-list ul li, .main-Ecatalog-list ul li:first-of-type{ width: 100%;}
	.ecatalog-list ul li, .ecatalog-list ul li:first-of-type{ width: 100%;}
	.contact ul li b{ font-size: 20px; letter-spacing: 0px;}
}


@media only screen and (max-width: 330px) {
	span.bg-show img{ margin-left: -200%;}
	.contact ul li b{ display: none;}
	.product-nav-main ul li a{ font-size: 24px;}
}