.dez-box .bg-primary{} 
.dez-box .service-head a{color:#fff} .dez-box .service-head a:hover{color:#000}
/* ----- sub  ------------ */
.sub-top-banner{display:block; background:#ddd; position:relative}
.sub-top-banner-inner{display:block; padding:20px 0; position:relative; }
.sub-top-banner-inner img{display:inline-block; vertical-align:middle; margin-right:10px; width:100px}
.sub-top-banner-inner h4{display:inline-block !important; vertical-align:middle;font-size:1.5em; color:#000; display:block;}
.sub-top-banner-inner:after{position:absolute;width:30%; height:100px;  bottom:-40px; left:0; background:#FC0; z-index:999999 !important} 
 
.sub-main{display:block; margin:30px 0}
.flex-box{display:flex; justify-content: space-between; -ms-text-justify: distribute-all-lines;  text-justify: distribute-all-lines; text-align:center;}
.two-box{display:inline-block; vertical-align:top; width:48%; text-align:left; position:relative;}
.two-box p{margin-bottom:10px;} .two-box big{display:block; margin-bottom:10px;}
.tank-tbl{display:block}
.tank-tbl table{width:100%; box-sizing:border-box; border-right:1px solid #ccc; text-align:center}
.tank-tbl td{border-left:1px solid #ccc; border-bottom:1px solid #ddd; border-top:1px solid #ddd; padding:5px; }
.tank-tbl table tr:first-child{background:#23527c; color:#fff; text-align:center; font-weight:bold; font-size:1.1em }
.tank-tbl tr:nth-of-type(2n){background:#eee}

.two-box ul{display:block; margin:0; padding:0}
.two-box ul li{display:block; font-size:1.4em; margin-bottom:30px;     margin-left:100px; border:1px dotted #000; padding:8px; position:relative; }
.two-box ul img{ display:block; height:90px ; width:95px; padding:5px;   position:absolute}
.two-box ul li::before{ background:#36C;font-family: FontAwesome; width:15px; position:absolute; left:0; top:1px; color:#06C}
.two-box .product-img-small{display:block; margin:50px 0; text-align:left}
.two-box .product-img-small img{display:inline-block; vertical-align:middle; margin:0 30px 30px 0}
.yes-sign{} .yes-sign:before{content: "\f00c" !important;;font-family: FontAwesome;}
.no-sign{} .no-sign:before{content: "\f00d" !important;;font-family: FontAwesome;} 

.product-viewer{display:block}

/* ------------ distribute ---------------- */

.distributors-sec{display:block; position:relative; text-align:left; width:99.5%}
.distri-click{display:block; margin:15px 0; border-bottom:1px solid #ccc; padding-bottom:20px;}
.distri-click i{display:inline-block; vertical-align:middle; margin:0 15px 0 0; color:#fff; font-size:1em; font-style:normal; background:#666; padding:5px 12px;}
.distri-click i:hover{cursor:pointer; background:#23527c}
.distri-act{background:#23527c !important; cursor:text !important; position:relative; text-align:center}
.distri-act:after{content: "\f107";font-family: FontAwesome; position:absolute; bottom:-15px; left:43%; color:#23527c;  z-index:999}
.distri-default{color:#fff;background:#666;}

.distributors-sec-tbl{display:block;  }
.distributors-sec-tbl big{display:block; margin:0 0 10px 0; font-size:1.1em; color:#F00; font-weight:bold}
.distributors-sec-tbl big:after{content: "\f13a";font-family: FontAwesome; margin-left:10px;}

#jhr{height:100%; opacity:1}
#bhr{height:0; opacity:0}
#wst{height:0; opacity:0}
#bengli{height:0; opacity:0}
.imgs{height:0; opacity:0}

.distributors-sec table{border-left:1px solid #ccc; width:100%;}
.distributors-sec th{border: 1px solid #ccc; padding:7px; background:#23527c; color:#fff; text-align:left }
.distributors-sec td{border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; padding:7px; vertical-align:top }
.distributors-sec tr:nth-of-type(2n){background:#eee}
.distributors-sec td:nth-of-type(1){font-weight:bold; font-style:normal}
.distributors-sec td:nth-of-type(1) i{font-weight:normal; font-size:0.9em; font-style:normal }
.distributors-sec td:nth-of-type(2){text-transform:capitalize}

.disti-bxes{display:flex; justify-content:flex-start; -ms-text-justify: distribute-all-lines;  text-justify: distribute-all-lines;flex; flex-direction:row; flex-wrap:wrap; align-items:flex-start;align-content:flex-start; }
.d-bx{ width:23.6%; display:inline-block; text-align:center; vertical-align:middle;  background:#fff;  margin:20px 7px; padding:20px 0 0 0; position:relative}
.d-bx .imgblock{display:block; background:#3e3c3c; min-height:150px; overflow:hidden; width:100%; padding:20px}
.d-bx img{transition:all 3s ease;-moz-transition:all 3s ease;-o-transition:all 3s ease;-webkit-transition:all 3s ease; opacity:1}
.d-bx:hover img{transform:scale(1.6);-moz-transform:scale(1.6);-o-transform:scale(1.6);-webkit-transform:scale(1.6);}
.d-bx h4{display:block; padding:7px; margin:10px 0 0 0; border-bottom:1px solid #ddd;border-top:1px solid #ddd;}
.d-bx h4:before{content:'City :'; margin-right:5px; color:#ccc}
.d-bx i{display:block; background:#f00; color:#fff; font-size:1em; padding:7px; margin:25px 0 0 0} .d-bx i:hover{background:#333; cursor:pointer}


.map-marker{display:block; width:100%; height:800px; padding:0px 10px}
.map-marker-inner{display:block; height:100%; width:100%; position:relative}
.map-marker-inner iframe{width:100%; height:800px; border:none; border-bottom:1px solid #666;}

.d-bx-over{position:absolute; width:100%; height:0; overflow:hidden;  display:block; background:rgba(0,0,0,0.8); color:#ddd; left:0; top:0;z-index:99999;transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;-webkit-transition:all 1s ease;}
.d-bx-over-inner{display:table; height:100%; width:100%; text-align:center}
.d-bx-over-inner-contnt{display:table-cell; vertical-align:middle; padding:10px;}
.d-bx-over-inner-contnt h4{color:#fff; display:block; margin-bottom:7px; font-size:1.2em; border-bottom:1px dotted #999;border-top:1px dotted #999; padding:5px 0;}
.d-bx-over-inner-contnt h4:before{content:''}
.d-bx-over-inner-contnt address{display:block; color:#fff; line-height:23px; font-size:1em; margin-bottom:7px;}
.d-bx-over-inner-contnt address:before{content:'Address'; display:block; margin-bottom:3px; color:#FC0; font-style:normal}
.d-bx-over-inner-contnt big{display:block; font-size:1em; color:#fff; margin-bottom:7px; font-weight:normal}
.d-bx-over-inner-contnt big:before{content:'Contact Person'; display:block; margin-bottom:3px; color:#FC0;}
.d-bx-over-inner-contnt big:after{content:' ';  }
.d-bx-over-inner-contnt small{display:block; font-size:1em; color:#fff; margin-bottom:7px;}
.d-bx-over-inner-contnt small:before{content:'Contact No.'; display:block; margin-bottom:3px; color:#FC0;}
.d-bx-over-inner-contnt .clss{display:block; color:#ff0; font-size:0.9em; margin:10px 0 0 0; animation:blnnk 1s infinite}
.d-bx-over-inner-contnt .clss:before{content:'X'; margin-right:5px;}
.d-bx-over-inner-contnt .clss:hover{color:#fff; cursor:pointer}
/*.d-bx:hover .d-bx-over{height:100%}*/

.page-content iframe{ width:100%; height:750px}


@keyframes blnnk{
0%{color:#ff0}
50%{color:#f00}
100%{color:#ff0}	
}
@-webkit-keyframes blnnk{
0%{color:#ff0}
50%{color:#ff0}
100%{color:#ff0}	
}

.sub-contact{width:48%; display:inline-block; vertical-align:top; text-align:left; padding:20px 0}
.sub-contact p{ display:block; margin-bottom:15px; line-height:20px;}
.sub-contact p big{display:block; font-size:1.1em;; margin-bottom:10px; font-weight:bold} 
.sub-contact p big span{display:inline-block; vertical-align:middle; margin-right:5px; color:#c03b51}
.sub-contact p big:before{ display:inline-block; vertical-align:middle; position:relative; width:15px; }
.sub-contact p small{display:block; font-size:1em; text-transform:uppercase } 
.sub-contact p a{display:inline-block; vertical-align:middle; margin:0 10px 7px 0; color:#f00; font-size:1em}
.sub-contact-iframe{display:block; margin:20px 0 30px 0} 
.sub-contact-iframe iframe{ max-height:200px; width:100%; border:2px solid #fff}

.map-mrk{}  .map-mrk:before{content: "\f275"; font-family: FontAwesome;  margin-right: 8px;}
.map-mrk1{}  .map-mrk1:before{content: "\f277"; font-family: FontAwesome;  margin-right: 8px;}
.env{}   .env:before{content: "\f0e0"; font-family: FontAwesome; margin-right: 8px;}
.mobi{}   .mobi:before{content: "\f098"; font-family: FontAwesome; margin-right: 8px;}
.career-r{width:48%; display:inline-block; vertical-align:top; text-align:left; margin:20px 0; }
.career-r p{display:block; margin-bottom:10px; font-size:1em} .career-r p:after{content:':'; margin-left:5px;}
.career-r input[type="text"]{display:block; width:99%; box-sizing:border-box; background:#fff; border:1px solid #ccc; padding:7px; margin-bottom:10px;}
.career-r select{display:block; width:200px; box-sizing:border-box; background:#fff;  border:1px solid #ccc;padding:7px; margin-bottom:10px;}
.career-r textarea{display:block; width:99%; box-sizing:border-box; background:#fff; border:1px solid #ccc; padding:7px; margin-bottom:10px;}
.career-r input[type="submit"]{width:auto; background:#23527c;border:1px solid #fff; color:#fff; padding:10px 15px; text-transform:uppercase; font-size:1.1em}
.career-r input[type="submit"]:hover{background:#666; cursor:pointer}

.contact-map{display:block; margin:20px 0}
.contact-map iframe{width:100%; min-height:150px; height:400px; margin:0 auto}

.client-list{display:block}
.client-list table{width:100%; box-sizing:border-box; border-left:1px solid #ccc}
.client-list td{padding:20px 10px 20px 60px; border-bottom:1px solid #ccc;border-right:1px solid #ccc;  position:relative}
.client-list td img{ display:inline-block; vertical-align:middle; width:40px; position:absolute; left:10px ; top:10px}
.client-list tr:first-child td{padding-left:20px;}
.client-list tr:nth-of-type(2n){background:#eee;}
.client-list tr:first-child{background:#23527c; color:#fff; padding:15px !important; padding-left:7px; font-weight:bold; font-size:1.3em}

.product-lnk-pg{display:block; margin:15px 0; text-align:right;}
.product-lnk-pg a{display:block; color:#f00; font-size:1.1em}
.product-lnk-pg a:hover{color:#000}

/*@media only screen and (max-width: 760px),	(min-device-width: 320px) and (max-device-width: 1024px)  {*/
	 
	/* Smartphones (portrait and landscape) ----------- */  
	/*@media only screen
	and (min-device-width : 320px)
	and (max-device-width : 480px) {
		/*body { 
			padding: 0; 
			margin: 0; 
			/*width: 320px;*/  
		/*}*/
		@media screen and (max-width: 1024px) {
		/*body { 
			width:99.5%; 
		}*/
		.d-bx{ width:30%; display:block; margin:10px auto; min-height:350px}	
	} 
	
	/* iPads (portrait and landscape) ----------- */
	@media screen and (max-width: 801px) {
		/*body { 
			width:99.5%; 
		}*/
		.d-bx{ width:48%; display:block; margin:10px auto}	
	} 

@media screen and (max-width:600px){
.flex-box{display:block; }
.two-box{display:block; width:99%; margin:0 auto 15px auto}
.career-r{display:block; width:99%; margin:0 auto 15px auto}
.sub-contact{width:99%; margin:30px auto;}
.client-list td{text-align:left}
.client-list td img{display:block;}

		/* Force table to not be like tables anymore */
		/*.distributors-sec table, thead, tbody, th, td, tr { 
			display: block; 
		}*/
		.distributors-sec thead { 
			display: block; 
		}
		.distributors-sec tbody { 
			display: block; 
		}
		.distributors-sec th { 
			display: block; 
		}
		.distributors-sec td { 
			display: block; 
		}
		.distributors-sec tr { 
			display: block; 
		}
		
		/* Hide table headers (but not display: none;, for accessibility) */
		.distributors-sec thead tr { 
			position: absolute;
			top: -9999px;
			left: -9999px;
		}
		
		.distributors-sec tr { border: 1px solid #ccc; }
		
		.distributors-sec td { 
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee; border-right: 1px solid #ccc; 
			position: relative;
			padding-left: 50%; 
		}
		
		.distributors-sec td:before { 
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 6px;
			left: 6px;
			width: 45%; 
			padding-right: 10px; 
			white-space: nowrap;
		}
		
		/*
		Label the data
		*/
		.distributors-sec td:nth-of-type(1):before { content: "Distributor Name"; }
		.distributors-sec td:nth-of-type(2):before { content: "Address"; }
		.distributors-sec td:nth-of-type(3):before { content: "Contact No."; }
		.distributors-sec td:nth-of-type(4):before { content: "Contact Person"; }
	.d-bx{ width:99%; display:block; margin:10px auto}	

}