@charset "utf-8";
/* CSS Document */
.menu-toggle{ display:none;}
@media only screen and (min-width: 1680px) and (max-width: 1800px) {

}

@media only screen and (min-width: 1366px) and (max-width: 1679px) {

}
@media only screen and (min-width: 1280px) and (max-width: 1365px) {

}
@media only screen and (min-width: 1024px) and (max-width: 1279px) {
.container{ width:100%; padding:0 15px;}
.top-navigation nav ul li{padding: 0 18px 15px;}
.container-main{ width:100%;}
.hp-detail .col4 .read-more{ left:15px;}
.container.footer-pad{padding: 15px 15px 0;}
.breadcrumb{ left:15px;}
.abt-col .col4 span{top:165px;}
.abt-col .col4 img{ padding-right:15px;}
.inner-cntr{ margin:35px 0;}
.vision-col .col4:nth-child(1){ width:30%;}
.vision-col .col4 span{top: 130px;width: 100%;}
.vision-col .col4{ padding-right:10px;}
.milestone-text{ width: 290px;}
.power-nav ul li a { padding: 0 10px;}
.hp-banner .carousel-caption{ bottom:100px;}
.grid-right{ margin: 10px 0 50px 30px;}
.grid-left{margin: 6px 30px 50px 0;}
.leader-sec .col4{margin-right: 55px;}
.leader-sec .col4 b span{ display:block;}
.leader-list li{margin-right: 70px}
.media-panel ul li{width: 48%;}
.red-bg2{height: 295px;}
li.red-bg2 .media-detail { top: 30px;}
.box-main .col6::after{ right: 25px;}
.dots-pink1::before, .dots-ornge1::before, .dots-yallow1::before{left: -34px;}
.dots-yallow::before, .dots-pink::before, .dots-ornge::before{right: -37px;}
.top-navigation nav ul li:hover .sub-menu{left: 300px;}
.top-navigation nav ul li:hover .sub-menu:after{left: 222px;}


}
@media only screen and (min-width: 980px) and (max-width: 1023px) {
blockquote{ font-size:20px;}
.container{ width:100%; padding:0 15px;}
.top-navigation nav ul li{padding: 0 18px 15px;}
.top-navigation nav ul li a{ font-size:16px;}
.container-main{ width:100%;}
.hp-detail .col4 .read-more{ left:15px;}
.logo{ width:60%;}
.hp-detail .col8 ul li{width: 31.9%;}
.hp-detail .col4 h1{ font-size:30px;}
.hp-banner .carousel-caption{left: 15px;bottom: 100px;}
.three-group ul li a{ font-size:15px;}
.container.footer-pad{padding: 15px 15px 0;}
.breadcrumb{ left:15px;}
.abt-col .col4 span{top:165px;}
.abt-col .col4 img{ padding-right:15px;}
.inner-cntr{ margin:35px 0;}
.abt-col .col4 > p{ padding-top:40px;}
.abt-col { margin: 25px 0 0;}
.vision-col .col4:nth-child(1){ width:30%;}
.vision-col .col4 span{top: 120px;width: 100%;}
.vision-col .col4{ padding-right:10px;}
.milestone-text{ width: 290px;}
.power-nav ul li a { padding: 0 10px;}
.hp-banner .carousel-caption{ bottom:100px;}
.grid-right{ margin: 10px 0 50px 30px;}
.grid-left{margin: 6px 30px 50px 0;}
.leader-sec .col4{margin-right: 55px;}
.leader-sec .col4 b span{ display:block;}
.leader-list li{margin-right: 70px}
.export-panel ul li{width: 21%;}
.media-panel ul li{width: 48%;}
.red-bg2, #newimg{height: 295px;}
li.red-bg2 .media-detail { top: 30px;}
.box-main .col6::after{ right: 25px;}
.dots-pink1::before, .dots-ornge1::before, .dots-yallow1::before{left: -34px;}
.dots-yallow::before, .dots-pink::before, .dots-ornge::before{right: -33px;}
.top-navigation nav ul li:hover .sub-menu{left: 250px;}
.top-navigation nav ul li:hover .sub-menu:after{left: 232px;}
.map-sec{ display:none;}
}

@media only screen and (min-width: 768px) and (max-width: 979px) {
blockquote{ font-size:20px;}
.container{ width:100%; padding:0 15px;}
.top-navigation nav ul li{padding:0 7px 15px;}
.top-navigation nav ul li a{ font-size:14px;}
.container-main{ width:100%;}
.hp-detail .col4 .read-more{ left:15px;}
.logo{ width:60%;}
.hp-detail .col8 ul li{width: 31.9%;}
.hp-detail .col4 h1{ font-size:28px;}
.hp-banner .carousel-caption{left: 15px;bottom: 60px;}
.hp-banner .carousel-caption h4{ font-size:60px;}
.three-group ul li a{ font-size:13px;}
.container.footer-pad{padding: 15px 15px 0;}
.investor-relation{padding: 15px 0;}
.investor-relation h3{ font-size:21px;}
.breadcrumb{ left:15px;}
.abt-col .col4 span{top:100px; font-size: 15px;}
.abt-col .col4 img{ padding-right:12px;}
.inner-cntr{ margin:35px 0;}
.abt-col .col4 > p{ padding-top:20px;}
.abt-col { margin: 25px 0 0;}
.huil-aboutCntr .col3{ padding-left:20px;}
.vision-col .col4:nth-child(1){ width:30%;}
.vision-col .col4 span{top: 55px;width: 100%;}
.vision-col .col4{ padding-right:10px;width: 32.33%;}
.vision-col .col4:nth-child(1) p{padding: 0 15px 17px;}
.vision-col .col4:nth-child(1) span{padding: 10px 15px; font-size: 25px;}
.milestone-text{ width: 290px;}
#milestones-slide .owl-item .item{ padding:0 5px;}
.box-main .col6::after{right: 18px; height: 2000px;}
.dots-pink::before, .dots-yallow::before, .dots-ornge::before{right: -30px;}
.dots-ornge1::before, .dots-pink1::before, .dots-yallow1::before{left: -28px;}
.power-nav ul li a { padding: 0 10px;}
.hp-banner .carousel-caption{ bottom:60px;}
.power-nav ul li a {padding: 0 2px;font-size: 13px;}
.power-nav ul li:last-of-type a{ padding-right:0;}
.hp-detail.power .col8 ul li{width: 48.7%;}
.grid-right {margin: 10px 0 30px 0px;width: 100%;}
.grid-left {margin: 6px 0px 30px 0; width: 100%;}
.grid-left img, .grid-right img{ width:100%; height:auto;}
.leader-sec .col4{margin-right: 40px;}
.leader-sec .col4 b span{ display:block;}
.leader-list li{margin-right: 50px}
.media-panel ul li{width:47%;}
.red-bg2, #newimg{height: 350px;}
li.red-bg2 .media-detail { top: 30px;}
.heading-box h3{ font-size:33px;}
.di-table td{ padding:5px;}
.top-navigation nav ul li:hover .sub-menu{left: 24px;}
.top-navigation nav ul li:hover .sub-menu:after{left: 370px;}
.map-sec{ display:none;}
}

@media only screen and (min-width: 768px) {
	
	.mm-toggle-wrap { display:none;}
	
	}

@media only screen and (max-width: 767px) {
body{ margin-top:25px;}
blockquote{ font-size:20px;}
header .container {padding: 0;}
h3{ margin-bottom:15px;} 
.container{ width:100%; padding:0 15px;}
.top-navigation nav ul li{padding:0 7px 15px;}
.top-navigation nav ul li a{ font-size:14px;}
.container-main{ width:100%;}
.hp-detail .col4 .read-more {left: 0;position: relative;margin-bottom: 15px;}
.logo {width: 100%;text-align: center;}
.hp-detail .col8 ul li{width:49%;}
.hp-detail .col4 h1{ font-size:28px;}
.hp-banner .carousel-caption{left: 15px;bottom: 50px;}
.hp-banner .carousel-caption h4{ font-size:60px;}
.three-group ul li a{ font-size:13px;}
.container.footer-pad{padding: 15px 15px 0;}
.investor-relation{padding: 15px 0;}
.investor-relation h3{ font-size:21px;}
.menu-toggle {display:block; background:#f3704a; padding:10px 15px;}
.menu-toggle > small{ font-size:13px; color:#fff; font-weight:bold;}
.menu-toggle span{ width:28px; border-bottom:solid 2px #fff; float:right; clear:right; margin-bottom:9px; margin-top:-2px;}
.toggle{display: inline;}
.main-menu{ display:none; background: #fff;}
.top-navigation nav ul li { padding: 10px;width: 100%;}
.top-navigation nav ul li:nth-child(1){ padding-left:10px;}
.top-link { float: none; margin-top: 10px; width: 100%;text-align: center;display: inline-block;}
.hp-banner{top:0; float: left;}
.news-update #news{ width:100%; margin-top:20px;}
.top-navigation{ margin:20px 0 0;}
.hp-detail {margin: 35px 0;display: inline-block;}
.col4, .col8{ width:100%;}
.news-update .read-more{ top:0;}
.hp-detail .col8{ padding-left:0;}
.investor-relation{margin: 15px 0 0;}
.footer-pad, .investor-relation{ text-align:center;}
.pad-left, .pad-right{ float:none;}
.investor-relation h3{ padding-right:0; display:block; padding-bottom:10px; margin-right: 0;}
.hp-panel { margin-bottom: 15px;}
.three-group ul li{ margin:10px 0;}
.three-group ul {float: none;width: 100%;text-align: center;}
.container.clearfix.right-menu { padding: 0;}
.news-update{ margin-top:25px;}
.breadcrumb{ position:static; margin-top:20px;}
.abt-col .col4 span{top:115px; font-size: 15px;}
.abt-col .col4 img{ padding-right:12px;}
.inner-cntr{ margin:35px 0;}
.abt-col .col4 > p{ padding-top:20px;}
.abt-col { margin: 25px 0 0;}
.huil-aboutCntr .col3{ padding-left:0;  margin-bottom: 20px;}
.col9, .col3{ width:100%;}
.huil-aboutCntr h2{ margin-bottom:20px;}
.abt-col .col4{width: 33.33%;}
.vision-col .col4:nth-child(1){ width:30%;}
.vision-col .col4 span{top: 70px;width: 100%;}
.vision-col .col4{ padding-right:10px;width: 32.33%;}
.vision-col .col4:nth-child(1) p{padding: 0 15px 17px;}
.vision-col .col4:nth-child(1) span{padding: 10px 15px; font-size: 25px;}
.milestone-text{ width: 290px;}
.col6{ width:100%;}
.box-main .col6::after, .dots-pink::before, .dots-yallow::before, .dots-ornge::before, .dots-ornge1::before, .dots-pink1::before, .dots-yallow1::before, .dots-ornge:after, .dots-pink:after, .dots-yallow:after, .dots-pink1:after, .dots-yallow1:after, .dots-ornge1:after{ display:none;}
.boxes{ width:100%; margin-bottom:10px;}
.dots-yallow1, .clr-ornge{margin-top: 0;}
.heading-box{ height: 50px;}
.heading-box h3{padding: 5px 25px 15px;font-size: 30px;}
.box-main .col6:last-of-type{ margin-bottom:20px;}
.power-nav ul li a { padding: 0 10px;}
.hp-banner .carousel-caption{ bottom:100px;}
.power-nav ul li a {padding: 0 3px;font-size: 13px;}
.power-nav ul li:last-of-type a{ padding-right:0;}
.hp-detail.power .col8 ul li{width: 48.7%;}
.power-nav{ width:100%;}
.power-nav ul li a{ padding: 0 10px;}
.hp-detail.power .col8{ padding-left:0;}
.hp-banner .carousel-caption{bottom: 60px;}
.container.nav-level2.clearfix {padding: 0;}
.grid-right {margin: 10px 0 30px 0px;width: 100%;}
.grid-left {margin: 6px 0px 30px 0; width: 100%;}
.grid-left img, .grid-right img{ width:100%; height:auto;}
.leader-sec .col4{margin-right: 40px;}
.leader-sec .col4 b span{ display:block;}
.leader-list li{margin-right: 50px}
.container.power-breadcrum{margin: 25px auto 0;}
.export-panel ul li{width:21.5%; margin-right: 23px;}
.export-panel ul li:nth-child(4n+4) { margin-right: 0;}
.media-panel ul li{width:47%;}
.red-bg2, #newimg{height: 350px;}
li.red-bg2 .media-detail { top: 30px;}
.certificate-sec > li{ width:100%; margin-right:0;}
.certificate-sec > li img{ width:100%;}
.top-navigation nav ul li a{padding-bottom: 0;}
.huil-aboutCntr .col3 ul li{ padding:10px 0;}
.portfolio-contant ul li img{ height:auto;}
.tabs-menu li a{ font-size:26px;}
.portfolio-contant ul li{ min-height:inherit;}
.enquiry-btn {font-size: 13px;padding: 9px 12px; height: 40px;width: 147px;}
.download-panel ul li:nth-child(3n) { margin-right: 18px;}
.download-panel ul li:nth-child(2n) {margin-right:0px;}
.download-panel ul li { width: 48%;}
.countries-list ul li{min-width: 25%;}
.address-sec{ width:100%;}
.query input[type='text'], .query input[type='password'], .query input[type='show'], .query input[type='number'], .query textarea, .Form-query .col12 input[type="text"]{ width:100%; padding:10px; margin-bottom: 10px;}
.file-btn{ margin-top:0;}
.di-table td{ padding:5px; font-size:14px;}
.menu-toggle{ display:none;}

.map-sec{ display:none;}

.mm-toggle-wrap { background:none!important;}

.mm-toggle-wrap { position:absolute; top: 10px;
    width: 14%;
    z-index: 99999;}
	
	.logo {float: none;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    text-align: center;
    width: 74%; }

}

@media only screen and (max-width: 639px) {
blockquote{ font-size:18px;}
.hp-banner .carousel-caption h4{ font-size:30px; text-align:left; margin-top:10px;}
.hp-banner .carousel-caption{ bottom:40px;}
.hp-detail .col4 h1{ font-size:23px;}
.hp-detail .col8 ul li { width: 100%; margin-top:20px;}
.category_item_bkg {width: 100%;height: auto;}
.hp-detail .col4 .read-more{ position:relative; left:0;}
.logo img {height: auto;width: 90%;}
.huil-aboutCntr h2{ font-size:26px;}
.abt-col .col4{ width:100%;} 
.abt-col .col4 span{ width:100%; top:0;}
.abt-col .col4 img { padding-right: 0; width: 100%;}
.huil-aboutCntr .col3{ margin-bottom:20px; margin-top:30px;}
.vision-col .col4 img{ width:100%; padding:0;}
.vision-col .col4:nth-child(1), .vision-col .col4{ width:100%; padding-right: 0px;}
.vision-col .col4 span{ top:0;}
#milestones-slide .owl-item .item{ padding:0 5px;}
.milestone-text { width: 220px;}
.milestone-text p{font-size: 18px; line-height: 21px;}
.hedding-text p, .last-text p{ font-size:16px;}
.hp-detail.power .col8 ul li{ width:100%;}
.hp-detail.power .col8 ul li img{ width:100%;}
.power-nav ul li a{padding: 0 5px 0 0; font-size: 12px;}
.leader-sec .col4 b span{ font-size:55px;}
.leader-sec .col4 b{ font-size:24px;}
.leader-sec .col4 p{ font-size:16px;}
.leader-sec .col4{margin-right: 35px;}
.leader-list li {margin-right: 40px;}
.export-panel ul li { width:29.5%;}
.export-panel ul li:nth-child(3n+3) { margin-right: 0;}
.media-panel ul li{ width:100%; margin-right:0;}
.red-bg2{ height:auto; min-height:220px;}
#newimg{ height:auto; width:100%;}
.media-panel ul li .media-detail{ bottom:auto; top:25px; padding:10px;}
.hp-detail .col8 ul li p{padding:0px 0px 15px 0;}
.container .container {padding: 0;}
.tabs-menu{ margin: 15px 0 15px;}
h4{ font-size:18px;}
.box-main {margin-top: 10px;}
.portfolio-contant ul li{ width:100%; margin-right:0;}
.portfolio-contant ul li img{ width:100%;}
.enquiery-sec {margin: 0px 0 50px;}
.download-panel ul li img{ width:100%;}

.top-link a{padding: 0 8px;}

}

@media only screen and (max-width: 479px) {
blockquote{ font-size:14px;}
.hp-banner .carousel-caption{ bottom:0;}
.logo img {height: auto;width: 95%;}
.fixed{ padding-top:10px;}
.inner-cntr{margin: 20px 0;}
.huil-aboutCntr .col3 ul li a{ font-size:14px;}
.huil-aboutCntr .col3 ul li{padding: 10px 0;}
.huil-aboutCntr h2{ font-size:23px;}
#milestones-slide .owl-item .item{ padding:0;}
#milestones-slide .owl-item .item img{ width:100%;}
.milestone-text {width: 100%;}
.power-nav ul h2{ width:100%; background:none; margin-bottom:5px;}
.power-nav ul li a{ font-size:11px;}
.breadcrumb a { padding: 0 1px;font-size: 12px;}
.leader-sec .col4 {margin-right: 0;width: 100%;}
.leader-list li { margin-right: 0; width: 100%;}
.export-panel ul li {width: 43%;}
.red-bg2{min-height: 240px;}
#client .owl-item img{ padding:15px;}
.tabs-menu li a {font-size: 22px;}
.download-panel ul li p{ line-height:18px;}
.download-panel ul li{ width:100%; margin-right:0;}
.download-panel ul li:nth-child(3n){ margin-right:0;}
.map-text{ position:relative; width:100%;}
.countries-list ul li {min-width: 48%;}
.address-sec li address{ width:85%;}
.address-sec li a{ display:inline-block;}
.query input.button{font-size: 13px;line-height: 20px;padding: 5px 12px;}
.query input.button{ margin:0px 10px 0 0;}
.di-table td{ padding:3px; font-size:13px;}


}
@media only screen and (max-width: 359px) {
.hp-banner .carousel-caption h4 {font-size: 26px;margin-top: 5px;}
.hp-banner .carousel-caption h1{ font-size:14px;}
.top-navigation nav ul li a{ font-size:13px;}
.hp-detail{margin: 0px 0;}
.power-nav ul li{ margin-top:10px;}
.breadcrumb a{ margin-top:5px;}
.export-panel ul li {width: 42%;}
.red-bg2{min-height: 280px;}
#newimg { height: 290px;}
.di-table td{ padding:2px; font-size:12px;}
.top-link a{ font-size:12px;}
.mm-toggle{ height: 35px;padding: 8px 5px 10px 5px;}
}







/* Force table to not be like tables anymore */






@media 
	only screen and (max-width: 760px),
	(min-device-width: 768px) and (max-device-width: 1024px)  {
	
		/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr { 
			display: block; 
		}
		
		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr { 
			position: absolute;
			top: -9999px;
			left: -9999px;
		}
		
		tr { border: 1px solid #ccc; }
		
		td { 
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee; 
			position: relative;
			padding-left: 50%; 
		}
		
		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
		*/
		td:nth-of-type(1):before { content: "System"; }
		td:nth-of-type(2):before { content: "Description"; }
		td:nth-of-type(3):before { content: "Mix Ratio"; }
	    .producttble table td:nth-of-type(4):before { content: "Pot life (In Minutes)"; }
		.producttble2 table td:nth-of-type(4):before { content: "Mix Viscosity (cPs)"; }
	   
		td:nth-of-type(5):before { content: "Applications"; }
		td:nth-of-type(6):before { content: "Key Advantages"; }
		
	}
	
	/* Smartphones (portrait and landscape) ----------- */
	@media only screen
	and (min-device-width : 320px)
	and (max-device-width : 480px) {
		body { 
			padding: 0; 
			margin: 0; 
			}
		}
	
	/* iPads (portrait and landscape) ----------- */
	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
		body { width: 100%; }
		.top-navigation nav ul li a { text-transform:none;}
		
	}