.mobile-css{display: none}
.desktop-css{display: block;}
.full-width{width: 100%}
.width-30{width: 30%}

.width-50{width: 50%}
.width-70{width: 70%}
.margin-0{margin: 0px}
.margin-left-10{margin-left: 10px}
.margin-right-10{margin-right: 10px}
.margin-top-10{margin-top: 10px}
.margin-bottom-10{margin-bottom: 10px}
.padding-left-10{padding-left: 10px}
.padding-right-10{padding-right: 10px}
.padding-top-10{padding-top: 10px}
.padding-bottom-10{padding-bottom: 10px}
.padding-left-20{padding-left: 20px}
.padding-right-20{padding-right: 20px}
.padding-top-20{padding-top: 20px}
.padding-bottom-20{padding-bottom: 20px}
.text-align-left{text-align: left;}
.text-align-right{text-align: right;} 
#content-home a img{width: 100%!important; padding: 0px!important;height:780px !important} 
#hinhbantay { width:300px !important}   
#hinhquacau {width:500px !important}
#hinhxacnhan {width:400px !important}
.title_home {font-size:50px; text-align:center}
.image_our {width:200px !important; height:auto !important}

@media (max-width: 1250px){
.li_image { width:30% !important; padding:5px !important}	 
}

@media (max-width: 1100px){
	.image_our {width:100% !important; height:auto !important}
	.li_image { width:29% !important; padding:5px !important}
	.title_home {font-size:30px; text-align:center}
	h1{font-size: 24px}
	#content-home a img{width: 100%!important; padding: 0px!important; }
	#content-home {
		float: left;
		width: 100%;
		height: auto; 
		background: #fff;
		padding: 0px 0px 0px 0px; 
		line-height: 17px; 
		position: relative;
		display: inline;
	}
	
	#content{
		float: left;
		width: 68%;
		height: auto; 
		background: #fff;
		padding: 10px 0px 0px 0px; 
		line-height: 17px; 
		position: relative;
		display: inline;
	}
	.left-panel {
		float: left;
		width: 17%;
		height: auto;
		background: #41acbb url(../images/bg-left-panel.gif) no-repeat top right;
		position: relative;
		padding: 5px 83px 50px 20px;
		color: #fff;
		font-size: 13px;
		line-height: 17px;
	}
	.left-panel img{width: 100%}
	#home-links a#home{
		float: left;
		width: auto;
		overflow: hidden;
		margin: 0px 15px 15px 0px;
		display: block;
		font-family:Arial, Helvetica, sans-serif;
		font-size:18px;
		padding:10px;
		min-height: 135px
	}
	#home-links div{margin-bottom: 0px}
	#home-links a#home img{width: 100%}
	.what-we-do {
	    float: left;
	    width: 45%;
	    background: #fff;
	    margin: 0px 15px 20px 0px;
	    min-height: 105px;
	}
	
	.listCategory ul li{width: 45%}
	.listCategory ul li img{width: 100%}
	.listProduct ul{float: none}
	.listProduct ul li{width: 45%; padding-right: 20px}
	.listProduct ul li.last{padding-right: 20px}
	.listProduct ul li img{width: 100%}
	.detailProduct .imgProduct img{width: 100%}
	.right-panel, #map{width: 100%!important}
	#contact-form{width: 100%}
	#home-links .left, #home-links .right{width: 50%!important}
}
/* responsive */
@media (max-width: 900px) and (min-width: 500px){
	#hinhbantay { width:50% !important} 
	#hinhquacau {width:50% !important}
	#hinhxacnhan {width:70% !important}
	#content-home a img{width: 100%!important; padding: 0px!important; height: 600px} 
	.mobile-css{display: block}
	.desktop-css{display: none;}
	div.center{width: 100%!important; margin:0px!important;}
	.left-panel{display: none}
	.feature{width: 100%; top: 5px; height: 345px!important}
	.feature div img{width: 100%}
	.top{height: auto}
	.top .logo{height: 50px;    margin: 7px; margin-bottom: 0px; float: right; margin-right: 20px}
	p.feature-title{top: 160px; padding: 15px; left: 0px; font-size: 14px}
	#content, #content-home{    width: 96%;    padding: 2%;}
	h1{line-height: 30px;    font-size: 15px;    font-weight: bolder;}
	#home-links{width: 100%}
	#home-links .left, #home-links .right{width: 45%!important}
	#home-links a#home{width: 100%; height: 165px;}
	#home-links a#home img{width: 100%}

	.top-header{width: 70%; float: left; margin: 10px; background: #d9eaef}
	.top .mobile-css .top-header .full-width{background: #d9eaef}
	#cssmenu #menu-button{float: left !important; margin-left: 20px!important }
	h4#home-intro{    margin: 10px 0px;} 
	/*#content.detail p{text-align: center;}*/
	
	.listCategory ul{margin-top: 0px; margin-bottom: 0px}
	.listCategory ul li{width: 47%; padding-right: 5%}
	.listCategory ul li.last{float: right;}
	.listCategory ul li img{width: 100%}
	.listProduct ul{float: none}
	.listProduct ul li{width: 45%; padding:0% 2%}
	.listProduct ul li.last{padding-right: 2%}
	.listProduct ul li img{width: 100%; height: auto}
	.detailProduct .imgProduct img{width: 100%}
	.what-we-do{width: 100%; min-height: 60px; border-bottom: #ececec solid 1px}
	#home-links div{margin-bottom: 0px}
	.right-panel{width: 100%}
	#map{width: 100%!important}
	#contact-form{width: 100%}
	#contact-form label{width: 20%}
	#contact-form input, #contact-form textarea{width: 74%}
	#footer #sozo{top: 45px; width: 100%; right: 0px; text-align: center; position:static; margin-top: 5px}
}

@media (max-width: 768px) and (min-width: 500px){
	 #cssmenu #menu-button{float: right !important; margin-right: 20px!important }
	.logo_mobile { position:absolute; z-index:99999; margin-top:-3px; padding-right:0px !important}
	.top .logo { float:left !important; margin-left:20px}
	}
@media (max-width: 500px){
	.image_our {width:100% !important; height:auto !important}
	
	#hinhbantay { width:70% !important; text-align:center}  
	#hinhquacau {width:80% !important}
	#hinhxacnhan {width:70% !important}
	.mobile-css{display: block}
	.desktop-css{display: none;}
	div.center{width: 100%!important; margin:0px!important;}
	.left-panel{display: none}
	.fade{width: 100%; top: 5px; height:400px !important}  
	.fade img { width:100% !important; height:400px !important} 
	#content-home a img {width:100% !important; height:400px !important}
	/*.feature div img{width: 100%}*/
	.top{height: auto}
	.top .logo{    height: 50px;    margin: 8px;    margin-bottom: 2px;    float: left;    margin-left: 20px;}
	p.feature-title{top: 160px; padding: 15px; left: 0px; font-size: 14px}
	#content, #content-home{    width: 96%;    padding: 2%;}
	h1{line-height: 30px;    font-size: 15px;    font-weight: bolder;}
	#home-links .left, #home-links .right{width: 100%}
	.top-header{width: 70%; float: left; margin: 10px; background: #d9eaef}
	.top .mobile-css .top-header .full-width{background: #d9eaef}
	#cssmenu #menu-button{float: right !important; margin-right: 0px!important }
	h4#home-intro{    margin: 10px 0px;}
	.logo_mobile { position:absolute; z-index:99999; margin-top:-3px}
	#cssmenu ul { padding-top:10px !important; border:none !important}
	

	.listCategory ul{margin-bottom: 0px; margin-top: 0px}
	.listCategory ul li{width: 100%; padding-right: 0px}
	.listCategory ul li img{width: 100%; height: auto;}
	.listProduct ul{margin-top: 0px; margin-bottom: 0px}
	.listProduct ul li{width: 90%; padding: 5%; border: 1px solid #e9eaed;padding-bottom: 0px; margin-bottom: 5%}
	.listProduct ul li img{width: 100%; height: auto}
	.listProduct ul li.last{padding-right: 5%}
	.detailProduct .imgProduct{    width: 90%;    padding: 5%; border: 1px solid #e9eaed;}
	.detailProduct .imgProduct img{width: 100%}
	.detailProduct .contentProduct{    float: left;    width: 90%;    padding: 1% 5%;}
	.what-we-do{width: 100%}
	#home-links div{margin-bottom: 0px}
	#home-links a#home{    width: 94%;    margin: 0px;    padding: 3%;    height: auto;}
	#home-links a#home img{width: 100%}
	#footer #sozo{top: 45px; width: 100%; right: 0px; text-align: center; position:static; margin-top: 5px}
	.right-panel{width: 100%}
	#map{width: 100%!important}
	#contact-form{width: 100%}
	#contact-form label{width: 20%}
	#contact-form input, #contact-form textarea{width: 74%}
}