@charset "utf-8";

/*=========== POWERED BY MERIDIAN SOLUTIONS INC ============*/

/*************** DEFAULT CSS ***************/
body{
 	font-family: 'Poppins', sans-serif;
	font-size:14px;
	font-style: normal;
	line-height: normal;
	font-weight:400;
	color:#424242;
	text-decoration: none;
	margin:0px;
	-webkit-font-smoothing: antialiased;
	padding:0;
	
}
html{ scroll-behavior: smooth;}
* {
    -webkit-box-sizing: border-box;
    -mox-box-sizing: border-box;
    box-sizing: border-box;
}
::selection {
    background: #fff; /* Safari */
	color:#000;
        }
::-moz-selection {
    background: #fff; /* Firefox */
	color:#000;
}
a {
	color:#20C7F5;
	text-decoration: none;
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
	}
	a:hover {
	color: #103FA8;
    }
p {
	margin:0 0 30px 0;
	clear:left;
	padding:0;
	}
h1, h2, h3, h4, h5, h6 {
	margin:0 0 20px 0;
	padding:0;
	font-weight:normal;
	}
	h3 {
		/* color: #fff; */
		float: left;
		width: 100%;
		position: relative;
		z-index: 1;
		color: #fff;
		font-weight: 700;
		font-size: 20px;
		line-height: 58px;
	}	
hr {
	margin:40px  0 60px 0;
	height:1px;
	border:0;
	border-top:1px solid #c1c1c1;
	border-bottom:1px solid #c1c1c1;
	float:left;
	width:100%;
	position:relative;
}
img{
	border:0;
}	
a img {
	border: 0;
	}

/*************** PRELOADER ***************/
#preloader {
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#fff; /* change if the mask should have another color then white */
	z-index:999999; /* makes sure it stays on top */
}
#status {
	width:141px;
	height:79px;
	position:absolute;
	left:50%; /* centers the loading animation horizontally one the screen */
	top:50%; /* centers the loading animation vertically one the screen */
	background-image:url(../images/loader.png); /* path to your loading animation */
	background-repeat:no-repeat;
	background-position:center;
	margin:-39.5px 0 0 -70.5px; /* is width and height divided by two */
}




.whtsapp-link{position:fixed;right:20px;bottom:109px;z-index:11;}
.whtsapp-link h5{float:left;width:165px;position:absolute;right:-11px;opacity:0;color:#6d6d6d;font-size:13px;font-weight:500;margin:10px 0 0 0;background-color:#e8e8e8;padding:10px;border-radius:5px;line-height:18px;z-index:0;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;}
.whatsapp-icon{width:56px;height:56px;background:#2db742;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;box-shadow:0px 6px 8px 2px rgba(0,0,0,0.14);-webkit-box-shadow:0px 6px 8px 2px rgba(0,0,0,0.14);-moz-box-shadow:0px 6px 8px 2px rgba(0,0,0,0.14);text-align:center;line-height:78px;float:right;margin-left:0;z-index:1;position:relative;}
.whatsapp-icon img{width:32px;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;}
.whtsapp-link:hover h5{right:52px;opacity:1}
.whtsapp-link:hover .whatsapp-icon img{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);}

/*************** BACK TO TOP ***************/
#fixed-bar {
   
    z-index: 100;
	width:40px;
	height:40px;
	position:absolute;
	bottom:80px;
	right:20px;
	margin-bottom:5px;
	background: rgb(4, 141, 211);
border-radius:50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
}
#fixed-bar a {
	width:40px;
	height:40px;
	float:right;
	display:block;
	background-image: url(../images/top.png);
	background-repeat: no-repeat;
	background-position: center center;
	/*border:2px solid #5b5a57;
	-moz-border-radius:5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;*/
	text-indent:-9999px;
}
#fixed-bar a:hover {}		
	
/*************** COLUMS AND ROWS ***************/
main{
    position:relative;
	}
row{
	width:100%;
	display:block;
	float:left;
	margin:0 0 30px 0;
	padding:0;
}
clearfix{
	width:100%;
	height:100px;
	float:left;
	margin:0;
	padding:0;
	display:block;
}
.container{
	width:1180px;
	margin:0 auto;
}
.fullwidth{
	width:100%;
	display:block;
}
clearfix{
	width:100%;
	height:100px;
	float:left;
	margin:0;
	padding:0;
	display:block;
}
.two-col{
	width: 46%;
    float: left;
    margin-right: 8%;
}
.three-col{
	width:30%;
	float:left;
	margin-right:5%;
}
.four-col{
	width:22%;
	float:left;
	margin-right:4%;
}
.last{
	margin-right:0;
}
section {
	width: 100%;
	float: left;
	position: relative;
}
aside {
    width: 25%;
    float: left;
    margin: 0;
    padding: 0;
}
summary {
    width: 75%;
    float: right;
    margin: 0;
    padding: 0;
}
.text-center{ text-align:center;}

/*************** HOME PAGE CSS ***************/
header{ float:left; width:100%; background-color:#fff; top:-200px; -webkit-transition: all 600ms ease-in-out;-moz-transition: all 600ms ease-in-out;transition: all 600ms ease-in-out;}
.top-head{ float:left; width:100%; padding-top: 15px;}
.logo{ float:left; margin-right:4%;}
.call, .mail{float:left;margin-right:2%;background-image:url(../images/icons/call.png);background-repeat:no-repeat;background-position: left top 6px;padding: 0 0 0 42px;color:#9a9a9a;font-size:14px; margin-top: 30px;}
.mail{ background-image:url(../images/icons/mail.png);}
.call a, .mail a{ font-weight:600; color:#000;}
social{ float:right; margin-top: 24px;}
social a{float:left;width:44px;height:44px;text-align:center;border:1px solid #9ba6c1;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;color:#048dd3;line-height: 45px;font-size: 18px;margin: 0 1px;}
social a:hover{ background-color:#048dd3; color:#fff;}
.menu-wrap{float:left;width:100%;background-color: #048dd3;margin-top: 20px; position:relative; z-index:2;}
.menu{float:left;padding: 14px 20px;}
.get-quote{float: right;background-color:#203975;background-image:url(../images/icons/icon1.png);background-position: right 35px center;background-repeat:no-repeat;padding: 22px 60px 19px 20px;color: #fff;font-weight: 600;text-transform: uppercase;}
.get-quote:hover{ background-color: #000; color:#fff;}
.heading{ float:left; width:100%; font-size:38px; color:#203975; line-height:48px; font-weight:700; margin-bottom:30px;}
.head-cap{float:left;width:100%;color:#424242;text-transform:uppercase;font-weight:600;margin-bottom: 20px;position: relative;padding-top:70px;}
.head-cap:after{ position:absolute; content:''; width:6px; height:40px; background-color:#048dd3; left:50%; top:0px; }
.font-16{ font-size:16px;}
.read-more{}
.read-more a{font-size:14px;font-weight:600;color:#fff;padding: 10px 70px 10px 30px;background-color:#048dd3;border-radius:30px;-webkit-border-radius:30px;-moz-border-radius:30px; position:relative; overflow:hidden;}
.read-more a:after{ position:absolute; width:42px; height:100%; content:''; right:0px; top:0px; background-color:#203975; color:#fff; border-radius:0 30px 30px 0;-webkit-border-radius:0 30px 30px 0;-moz-border-radius:0 30px 30px 0; background-image:url(../images/icons/icon1.png); background-position:center; background-repeat:no-repeat; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;}
.read-more a:hover{ background-color:#203975;}
.read-more a:hover:after{ background-color:#048dd3;}
.intro{ padding:60px 0px;}
.hm-logo{ float:left; width:100%; margin:0px 0 25px; padding:0px;}
.hm-logo li{ display:inline-block; margin:4%;}
.hm-logo li img{ max-width:100%;}
.product-bg{ float:left; width:100%; height:600px; background-image:url(../images/pro-bg.jpg); background-position:center; background-repeat:no-repeat; position:relative;}
.product-bg:after{ position:absolute; content:''; width:100%; height:100%; left:0px; top:0px; background-color:#111f4b85; z-index:0}
.product-bg:before{content: '';position: absolute;bottom:-1px;left: 0;right: 0;width: 100%;height: 200px;background-color: #ffffff;-webkit-clip-path: polygon(100% 70%, 0% 100%, 100% 100%);clip-path: polygon(0 0%, 0 100%, 100% 100%);z-index: 1;}
.product .heading, .product .head-cap{ color:#fff;}	
.hm-pro-wrap{ position:relative; float:left; width:100%; z-index:2; margin-top:-500px; text-align:center;}
.pro-box{float:left;width: 25%;padding: 0 10px;text-align:center;margin-bottom: 40px;}
.pro-img{float:left;width:100%;line-height: 0px; overflow:hidden;}	
.pro-img img{max-width:100%; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;}	
.pro-box h3{display:inline-block;padding: 9px 20px;font-size:16px;font-weight:500;color:#fff;background-color:#048dd3;margin-bottom: 0px;width: 80%;margin-top: -24px;
vertical-align: top; position:relative; z-index:1;  -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; 
transition: all 300ms ease-in-out; line-height: 22px;min-height: 85px; display: inline-flex; justify-content: center; align-items: center;}		
.pro-box:hover .pro-img img{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1);}
.pro-box:hover h3 { background-color: #000000;}
.m-b-60{ margin-bottom:60px;}
.product{ padding:0 0 60px;}
.spare-parts{padding: 60px 0px 0;}
.spare-left { float: left; width: 60%; margin-right: 3%;}	
.spare-right{ float:left; width:37%;}
.spare-parts .hm-logo li { margin: 4% 1%;}	
footer{ float:left; width:100%; position:relative; padding:260px 0px 0px; background-image:url(../images/footer.jpg); background-position:center; background-repeat:no-repeat; color:#fff;}
footer:before{content: '';position: absolute;top: -1px;left: 0;right: 0;width: 100%;height:200px;background-color: #ffffff;-webkit-clip-path: polygon(100% 32%, 100% 0%, 0% 0%);clip-path: polygon(100% 100%, 100% 0%, 0% 0%);z-index: 1;}
.ftr-left{ float:left; width: 56%; margin-right:12%;}
.ftr-left h2{ float:left; width:100%; font-size:38px; font-weight:700; line-height:42px;}
.ftr-right {float: left;width:32%;position:relative;padding-top: 190px;margin-top: -190px;z-index: 1;}
.ftr-icon{ position:absolute; width:116px; height:116px; left:0px; top:0px; background-color:#048dd3; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; text-align:center; display: flex; justify-content: center; align-items: center;}
.ftr-right h3{ float:left; width:100%; font-size:22px; font-weight:700;}
.ftr-cnt{ float:left; width:100%; position:relative; margin-bottom:30px; padding-left: 60px;}
.ftr-cnt i{ position:absolute; left:0px; top:0px; width:32px; height:32px; background-color:#048dd3; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; text-align:center; line-height:32px; -webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}
.ftr-cnt:hover i{ background-color:#000;}
.ftr-cnt a{ color:#fff;}
.ftr-cnt p{ margin-bottom:0px;}
.copy-right{ float:left; width:100%; background-color:#101d3c; padding:40px 0px; margin-top:70px; text-align:center;}
.ftr-link{ margin-bottom:10px;}
.ftr-link a{ display:inline-block; padding:0 10px; color:#fff; font-size:12px;}
.ftr-link a:hover{ color:#a0a7b9;}
.copy{ font-size:12px; margin-bottom:0px;}
.copy a{ color:#fff;}
.copy a:hover{ color:#a0a7b9;}
.pro-slide{ padding: 80px 0px; text-align: center; background-color: #f0f4f7; }
.owl-demo1 .pro-img{ padding: 10px; }


/*************** INNER PAGE CSS ***************/
.pad{ padding:80px 0px;}
.p-l-100{ padding-left:70px;}
.sub-heading{float:left;width:100%;position:relative;font-size: 30px;font-weight: 700;color: #203975;padding-top:20px;margin-bottom: 60px;border-bottom: 1px solid #e2e2e2;padding-bottom: 10px; text-transform:uppercase;}
.sub-heading:before{position:absolute;content:'';width:50px;height:2px;background-color: #048dd3;left:0px;top:0px;}
.list1{ float:left; width:100%; padding:0px; margin:0px;}
.list1 li{float:left;width:100%;margin:0px;padding: 0 10px 8px 21px;list-style:none;position:relative;}
.list1 li:after{position:absolute;content:'';width: 6px;height: 6px;border: 2px solid #048dd3;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;left:0px;top: 6px;}
.list1 li a{font-weight:400;color: #656565;} 
.list1 li a:hover{ color: #1f3975;}
.left-panel{float:left;width:100%;padding: 70px 30px 30px;background-color: #f1f1f1; position:relative; margin-bottom:25px;}
.left-panel:after{content: '';position: absolute;top: -1px;left: 0;right: 0;width: 100%;height: 50px;background-color: #ffffff;-webkit-clip-path: polygon(100% 100%, 100% 0%, 0% 0%);clip-path: polygon(100% 100%, 100% 0%, 0% 0%);z-index: 1;}
.left-panel h3{float:left;width:100%;font-size: 18px;color: #1f3975;font-weight: 700;margin-bottom: 15px;text-transform: uppercase;}
.cap{ font-weight:700; color: #1f3975; font-size: 16px;}
.left-box{float:left;width:100%;position:relative;padding: 20px 20px;box-shadow: 0px 3px 22px #00000021;margin-bottom: 25px;border-radius: 10px;}
.left-box a{margin-bottom:0px;position:relative;padding:15px 20px 13px 62px;width:100%;float:left;color: #1f3975;font-size:16px;text-transform: uppercase;font-weight: 700;}
.left-box i{position:absolute;left: 0px;top: 2px;color: #048dd3;width: 50px;height: 50px;border: 2px solid #048dd3;font-size: 20px;border-radius: 50%;text-align: center;line-height: 46px; -webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}
.left-box:hover i{ background-color:#048dd3; color:#fff;}
.left-box a:hover{ padding-left:66px;}
.table{ border-collapse: collapse; width: 100%; margin-bottom:25px;}
.table td, .table th { border: 1px solid #ddd; padding: 8px;}
.table tr:nth-child(even){background-color: #f2f2f2;}
.table tr:hover {background-color: #ddd;}
.table th { padding-top: 12px; padding-bottom: 12px; text-align: left; background-color: #4CAF50; color: white;}
.cnt-wrap{float:left;width:100%;padding: 10px;background-color:#f1f1f1; margin-bottom:50px;}
.three-box{float:left;width: 31.33333333333333%;padding: 30px 10px;background-color: #fff;margin: 1%;text-align: center;min-height: 422px;}
.three-box h3{float: left;width: 100%;font-size: 20px;text-transform: uppercase;color: #1f3975;font-weight: 700;margin-bottom: 10px;}
.three-box h6{float: left;width: 100%;font-size: 13px;margin-bottom: 10px;min-height: 105px;line-height: 22px;}
.three-box a{ color: #424242;}
.three-box img{ max-width:100%; -webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}
.three-box:hover img{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1);}

/*************** INNER BANNER ***************/
.bredcrump{float:left;width:100%;margin-bottom:0px;position:relative;z-index:1;color: #c3c3c3;text-transform: uppercase;}
.bredcrump a{color: #c3c3c3;}
.bredcrump a:hover{color: #fff; }
.bredcrump .spacer{display: inline-block;width: 10px;height: 10px;border: 2px solid #048dd3;margin: 0 15px;border-radius: 50px;} 
.banner{float:left;width:100%;position:relative;display: table;background-position:top center;background-repeat:no-repeat;height: 400px; margin-top: -32px;}
.banner:after{position:absolute;content:'';width:100%;height:100%;top:0px;left:0px;background-color:#000000a6;}
.banner-cap{display: table-cell;vertical-align: middle;text-align: center;}
.banner-cap h2{float: left;width: 100%;position: relative;z-index: 1;color: #fff;font-weight: 700;font-size:40px; line-height: 58px;}
.banner1{ background-image:url(../images/banner1.jpg);}
.banner2{ background-image:url(../images/banner2.jpg);}
.banner3{ background-image:url(../images/banner3.jpg);}
.banner4{ background-image:url(../images/banner4.jpg);}
.banner5{ background-image:url(../images/banner5.jpg);}
.banner6{ background-image:url(../images/banner6.jpg);}
.banner7{ background-image:url(../images/banner7.jpg);}

/*************** HOVER ZOOM OUT ***************/
.zoom-out-effect, .zoom-in-effect{ float:left; width:100%; overflow:hidden; position:relative}
.zoom-out-effect img, .zoom-in-effect img{ float:left; max-width:100%; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;}
.zoom-out-effect:hover img{ -webkit-transform: scale(.9); -moz-transform: scale(.9); -o-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9);}
.zoom-in-effect:hover img{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1);}
.zoom-in-effect:before{ content: ''; position: absolute; top: -1px; left: 0; right: 0; width: 100%; height: 50px; background-color: #ffffff; -webkit-clip-path: polygon(100% 100%, 100% 0%, 0% 0%);    clip-path: polygon(100% 100%, 100% 0%, 0% 0%); z-index: 1;}

/*************** FIXED HEADER ***************/
header.smaller{ position: fixed; -webkit-transition: all 600ms ease-in-out;-moz-transition: all 600ms ease-in-out;transition: all 600ms ease-in-out; top: 0; z-index:9; background-color: #048dd3;}
header.smaller .top-head{ display:none;}
header.smaller .menu-wrap { margin-top:0px;}

/*************** PARALLAX ***************/
.jarallax {
	position: relative;
	background-repeat: no-repeat;
	background-position: center center;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
	
/**********forms**************/
form{
	margin:0;
	padding:0;
}
*:focus {  
	outline: none;
}
.fieldset{
	width:100%;
	height:auto;
	padding: 14px 0px;
	background-color:none;
	background-color:transparent;
	display:block;
	border:none;
	border-bottom:2px solid #fff;
	margin:0 0 10px 0;
	color:#fff;
	font-size:12px;
	float:left;
}
.sendbutton{
	width:auto;
	height:auto;
	border:0;
	outline:0;
	margin:0 5px 0 0;
	float:left;
	color:#fff;
	font-size:20px;
	cursor:pointer;
	vertical-align:top;
	padding:10px 20px;
	text-align:center;
	background-color:transparent;
	text-transform:uppercase;
	}
.sendbutton:hover{
	background-color:#1442A2;
	color:#fff;
	}
.ftr-form .fieldset{ font-size:12px;} 
.ftr-form .fieldset1{ height:100px; margin-bottom:20px;}
.ftr-form .sendbutton{font-size:22px;font-weight:700;color:#fff;display:inline-block;padding: 14px 32px;border: 2px solid #fff;border-radius: 50px; -webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;}
.ftr-form .sendbutton:hover{ background-color:#048dd3;}
.contact-form .form-group{ position:relative; float:left; width:100%; margin-bottom:15px;}
.contact-form span:after{position:absolute;content:'';bottom:0px;left:0px;width: 50px;height:1px;background-image: linear-gradient(to left, #6C0A77, #920F57 );}
.contact-form .form-group i{position:absolute;left: 16px;top: 19px;color:#048dd3;font-size: 15px; z-index: 1;}
.contact-form .form-group span{ float:left; width:100%;}
.contact-form .fieldset {padding: 18px 20px 18px 50px;border:none;border-bottom: 1px solid rgba(0, 0, 0, 0.12);font-size: 13px;margin-bottom:0px; color:#2F2F2F;}
.contact-form .sendbutton { font-size: 15px; padding: 13px 38px 11px; color: #048dd3; border: 2px solid #048dd3; border-radius: 50px;  -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; font-weight:700;}
.contact-form .sendbutton:hover{ color:#fff; background-color:#048dd3;}
.contact-form .fieldset1{ padding: 15px 20px 18px 50px; height: 125px; max-width:100%; min-width:100%;}
.contact-form select.fieldset { padding: 18px 20px 18px 50px !important;}
.ftr-form ::-webkit-input-placeholder {
   color: #fff !important;
}
.ftr-form :-moz-placeholder { /* Firefox 18- */
   color: #fff !important;
}
.ftr-form ::-moz-placeholder {  /* Firefox 19+ */
   color: #fff !important;
}
.ftr-form :-ms-input-placeholder {  
   color: #fff !important;
}
.contact-form::-webkit-input-placeholder {
   color: #2F2F2F !important;
}
.contact-form:-moz-placeholder { /* Firefox 18- */
   color: #2F2F2F !important;
}
.contact-form::-moz-placeholder {  /* Firefox 19+ */
   color: #2F2F2F !important;
}
.contact-form:-ms-input-placeholder {  
   color: #2F2F2F !important;
}
/************************************* 1180px *************************************/
@media only screen and (max-width: 1180px) {
.container{ width:96%;}
.logo { margin-right: 2%;}
.call, .mail { margin-right: 1%;}
footer:before { height: 150px;}
footer { padding: 230px 0px 0px;}
.product-bg:before { height: 150px;}
}

/************************************* 1024px *************************************/
@media only screen and (max-width: 1024px) {
.container{ width:90%;}
.logo{ width:100%; text-align:center; margin: 0px 0 20px;}
.call, .mail { margin:0 3% 0 0;}
.menu{ width:100%; padding:0px;}
social{ margin-top:0px;}
.get-quote { background-position: right 22px center; padding: 14px 50px 13px 20px; position: absolute; right: 0px; top: 0px;}
}

/************************************* 800px *************************************/
@media only screen and (max-width: 800px) {
}

/************************************* 767px *************************************/
@media only screen and (max-width: 768px) {
header .container{ width:100%;}
header .top-head{ padding:15px 20px 0}
.two-col, .three-col, .four-col, aside, summary, .spare-left, .spare-right, .ftr-left, .ftr-right{ width:100%; margin:0 0 25px 0; }
.pro-box { width: 50%;}
.ftr-right{ margin-top: 30px; padding-top: 140px;}
.copy-right { margin-top: 10px;}
.spare-parts { padding: 0;}
footer:before { height: 85px;}
footer { padding: 100px 0px 0px;}
.p-l-100 { padding-left: 0px;}
}

/************************************* 640px *************************************/
@media only screen and (max-width: 640px) {
.top-head{ text-align:center;}
.logo img { width: 370px;}
.logo { margin: 0px 0 14px;}
.call, .mail { margin: 0 2% 0 0; float:none; display:inline-block; text-align:left;}
.mail{ margin-right:0px;}
social { width: 100%; text-align: center; margin-top:15px;}
social a{ float:none; display:inline-block;}
.intro { padding: 30px 0px;}
.hm-pro-wrap { margin-top: -365px;}
.product-bg { height: 430px;}
.pro-box h3 { font-size: 14px; }
.banner-cap h2 { font-size: 26px; line-height: 36px;}
.banner{ margin-top:0px;}
.banner { height: 220px; background-size: 1055px;}
.three-box { width: 100%; margin: 0px 0 12px;min-height: inherit;}
.three-box h6 { min-height: inherit;}
.owl-demo1 .pro-img { padding: 10px 3px;}
}

/************************************* 480px *************************************/
@media only screen and (max-width: 480px) {
.container{ width:80%; }
.logo img { width: 308px;}
.call, .mail{ display:none;}
social{ margin-top:0px;}
.banner-cap h2 { font-size: 20px; line-height: 27px;}
.banner { height: 178px; background-size: 852px;}
.table td, .table th { display: block;}
.pro-box { width: 100%;}
.pro-img img{ width: 100%;}
}

/************************************* 360px *************************************/
@media only screen and (max-width: 360px) {
.pro-box { width: 100%; padding: 0px; margin-bottom:30px;}
.banner-cap h2 { font-size: 16px; line-height: 25px; margin-bottom: 10px;}
.banner { height: 148px; background-size: 710px;}
}

/************************************* 320px *************************************/
@media only screen and (max-width: 320px) {
.container{width:90%;}
}