body { margin:0; padding:0; font-size:12px; color:#000000; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:normal;}

img { margin:0; padding:0; border:none;}

.clear { clear:both;}

h1 { color:#0d519b; font-size:20px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:500;}

/************************   == wrapper-main ==  *************************/

.wrapper { width:100%; float:left;}

.main { width:1000px; margin:auto;}

/************************   == Header ==  *************************/
.header-main { width:100%; float:left; background:url(../images/header-bg.jpg) repeat-x -250px top;}
.header { width:1000px; float:left;}
.full-width, full-width-2, .half-width { width:1000px; float:left;}
.full-width-2 {width:980px; margin:0 10px;}
.half-width { width:60%; float:left;}

.logo-left, .logo-right { width:300px; float:left; margin-top:22px;}
.logo-right { float:right; margin-right:90px;}

.menu { width:1000px; float:right; margin-top:16px}

.banner, .banner-2 { width:1000px; float:left; height:330px; }
.banner-2 { margin-top:-5px; padding-bottom:0;}

.banner-saprator { width:100%; float:left; background:url(../images/banner-saprator-bg.jpg) no-repeat center top; height:60px;}

/************************   == Content=  *************************/

.welcome-content, .welcome-content-2 {width:1000px; float:left; font-family:Arial, Helvetica, sans-serif; font-size:14px;}
.welcome-content-2 { width:100%; }

h2 { background: url(../images/title-saprator.jpg) no-repeat left top; float:left; font-size:20px; color:#0d519b; font-weight:normal;
padding-left:13px;}
h2 span { font-size:16px;  padding-top:3px; margin:0; float:left;}
.pro-title {float:left !important; font-size:20px; color:#0d519b; font-weight:normal; padding-top:7px; width:100%;}
.cont-sub, cont-sub-2, .cont-sub-3, .cont-sub-4 { font-size:14px;  padding-top:3px; margin:0; float:left; width:50%; color:#0d519b; text-transform:uppercase;}
.cont-sub-2 { padding-left:10px;}
.cont-sub-3 { padding-top:15px; padding-bottom:5px;}
.cont-sub-4 {width:100%; float:left; padding-bottom:5px;}


.products-line-1 { width:1000px; float:left; margin-top:18px;}
.product-box,.product-box-2 { width:225px; float:left; margin-right:33px;

}
.product-box-2 { margin-right:0;}

.product-img { width:219px; float:left;

-moz-box-shadow: 0px 0px 10px #c2c3c4;
-webkit-box-shadow: 0px 0px 10px #c2c3c4;
box-shadow: 0px 0px 10px #c2c3c4;
/*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#NaN');
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#NaN')";
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background-image: -moz-linear-gradient(top, #ffffff, #NaN);
background-image: -ms-linear-gradient(top, #ffffff, #NaN);
background-image: -o-linear-gradient(top, #ffffff, #NaN);
background-image: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#NaN));
background-image: -webkit-linear-gradient(top, #ffffff, #NaN);
background-image: linear-gradient(top, #ffffff, #NaN);

-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 72);
filter: alpha(opacity = 72);}

h3 a { width:225px; float:left; font-size:16px; color:#0d519b; text-align:center; margin:0; padding-top:16px; font-weight:500; text-decoration:none;}
h3 span a {font-size:13px; text-decoration:none;}

.prod-saprator { width:100%; float:left; border-bottom:1px solid #dde6ee; margin:23px 0;}


/************************   == Footer ==  *************************/
.footer { width:100%; float:left; background:url(../images/footer-bg.jpg) repeat-x left top; margin-top:35px;}
.footer-mian {width:1000px; float:left; background:url(../images/footer-centere-bg.jpg) no-repeat center top; margin-top:-1px;}
.footer-left { width:190px; float:left; margin-top:10px;}
h4 { font-family:Arial, Helvetica, sans-serif; color:#59ca88; font-size:18px; width:100%; float:left;}

.footer-menu {  float:left; }
.footer-menu ul {margin:0; padding:0;}
.footer-menu li { list-style-type:none; padding:2px 0; }
.footer-menu a { font-size:14px; color:#98cbff; text-decoration:none; font-family:Arial, Helvetica, sans-serif; display:list-item;

}
.footer-menu a:hover {  color:#e5f0fb; font-weight:bold;}

.footer-midel { width:350px; float:left;}
.events-1 {width:100%; float:left;}
.event-img { width:110px; float:left;}
.event-content { width:230px; float:right; font-size:12px; color:#98cbff; font-family:Arial, Helvetica, sans-serif; line-height:18px;}
.event-content span {color:#59ca88; font-size:14px;}
.event-saprator { width:100%; float:left; border-bottom:1px solid #054383; margin:11px 0;}

.trust-seal-title { width:230px; float:left; font-size:13.3px; color:#59CA88; font-family:Arial, Helvetica, sans-serif; margin-top:7px; padding-bottom:5px; font-weight:bold}


.footer-right { width:295px; float:right;}
.address { width:284px; float:left; color:#98cbff; font-size:14px; font-family:Arial, Helvetica, sans-serif; margin-bottom:20px;} 
.contact-icon { width:59px; float:left; margin-top:}
.contact-number { width:208px; float:left; color:#fff; font-weight:bold;  text-shadow:1px 2px 2px #000; font-size:19px; margin-left:10px; padding-top:13px;}
.contact-number span a {color:#98cbff; font-size:13px; text-shadow:1px 1px 1px #000; margin-top:3px; float:left; text-decoration:none;
    -webkit-transition: all 0.4s ease-in-out; float:left; margin-bottom:20px;	
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;} 
.contact-number span a:hover {color:#fff;}

.social { width:100%; float:left; margin-top:5px;}
.social-icon { width:30px; float:left;}
.social-name  a {width:65px; float:left; margin-left:20px; font-size:14px; font-family:Arial, Helvetica, sans-serif;  color:#6bd1fd; text-shadow:2px 2px 0px #000; text-decoration:none; padding-top:6px;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.social-name  a:hover {color:#fff;}

.footer-bottom { width:100%; float:left; margin:17px 0 2px 0;}
.copyright { float:left; color:#fff; font-family:Arial, Helvetica, sans-serif; padding:5px 0;}
.webd-design-company { float:right; color:#fff; font-family:Arial, Helvetica, sans-serif; padding-top:5px;}
.webd-design-company span a {color:#fff; text-decoration:underline; float:left; margin-top:-2px; font-size:13px; padding-right:3px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;}
.webd-design-company span a:hover {color:#07488e; text-decoration:none;}

/************************   == About US ==  *************************/
.big-title { width:100%; float:left; background:#2fab4d; text-align:left}
.big-title span { float:left; text-align:left;}
.big-title { width:100%; float:left; padding:5px 0;} 



/************************   == Contact Us==  *********************/
h5 { float:left; font-size:30px; color:#fff; margin:0; padding:0;font-weight:normal; padding-top:15px; padding-bottom:15px;}

/************************   == Products page ==  *********************/

h6 { color:#0fac51; font-size:14px;  padding:0; margin:0; float:left;}
.product-details-left {width:60%; float:left;}
.product-details-right, product-details-right-2 {width:40%; float:right; margin-top:20px;}
.product-details-right-2 {width:585px; float:right; margin-top:-30px;}


.milestone-img { width:100%; float:right; margin-top:-300px; !important; margin-bottom:-20PX; overflow:visible !important; 
background:url(../images/milestone-img.png) no-repeat -10px top; height:600px; overflow:visible !important;} 

.product-contents { width:560px; float:left; font-size:13px;  margin-left:13px; font-family:Arial, Helvetica, sans-serif !important;}
.product-contents span { color:#333; font-size:13px; float:left; padding-top:5px;}

b {font-size:12px; font-weight:normal; color:#134373; font-weight:bold; font-family:Arial, Helvetica, sans-serif;}



/* products image Scripts*/
#mcts1 
{
    width:100%;
    height:200px;
    margin: 0 auto;
    padding:0px 0px;
    
    /* Do not alter the below settings */
    moz-box-shadow: 0px 0px 10px #c2c3c4;
-webkit-box-shadow: 0px 0px 10px #c2c3c4;
box-shadow: 0px 0px 10px #c2c3c4;
/*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#NaN');
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#NaN')";
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background-image: -moz-linear-gradient(top, #ffffff, #NaN);
background-image: -ms-linear-gradient(top, #ffffff, #NaN);
background-image: -o-linear-gradient(top, #ffffff, #NaN);
background-image: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#NaN));
background-image: -webkit-linear-gradient(top, #ffffff, #NaN);
background-image: linear-gradient(top, #ffffff, #NaN);

-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 72);
filter: alpha(opacity = 72);}
	
}
#mcts1>* {display:none;}
  
/*-------- div.item is each thumbnail's wrapper created by the javascript ------*/
#mcts1 div.item 
{
    padding:0;
    margin-right:0; /* this specifies the distance between each thumbnail */
    border:none;
    text-align:left;
    position:relative;
}

/*-------- style of user defined class ---------*/
#mcts1 div.each 
{
    color:#696F5B;
    white-space:normal;
    padding:20px;
    width:100%;
	margin-left:-25px;
    height:164px;
    background-color:White;
    border-radius:6px;
}

#mcts1 .each .content 
{
    float:left;
    padding-left:40px;
    padding-right:20px;
    font:normal 12px/14px Verdana;
    width:220px;
    height:164px;
    overflow:auto;
}
#mcts1 .each img 
{
    border:none;
    float:left;
}


/*---------navigation buttons-------*/
#mcts1 .navPrev, #mcts1 .navNext, #mcts1 .navPlay, #mcts1 .navPause 
{
    width:45px; height:45px; position:absolute;  
    background:url(http://npf.co.in/cssFile/navButtons.png); 
    background-repeat: no-repeat;
    display:inline-block; z-index:5; cursor:pointer;
    top:100px;
}
#mcts1 .navPrev {background-position:0 0;left:-24px;}
#mcts1 .navPrev:hover {background-position:0 -45px;}
#mcts1 .navPrevDisabled {background-position:0 -90px;cursor:default;}

#mcts1 .navNext {background-position:-45px 0px;right:-24px;} 
#mcts1 .navNext:hover {background-position:-45px -45px;} 
#mcts1 .navNextDisabled {background-position:-45px -90px; cursor:default;} 

#mcts1 .navPause, #mcts1 .navPlay {display:none;}

.navPrev, .navPlay, .navPause, .navNext 
{
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -o-user-select: none;
   user-select: none;
}

        
/*---------built-in navigation bullets--------*/

/* Note: the navBullets won't be available when the "scrollByEachThumb" option was set to false in the Javascript.*/
#mcts1 .navBullets
{
    /*display:none;*/ /*set it display:none when you don't need it*/
	display:block;
	cursor:pointer;
	/*Specify its position that is relative to the div#mcts1 */
	position:absolute;
	bottom:-46px;
	left:360px;
	width:80px;
	height:20px;
	z-index:5;
}
/* Below defines the style of each bullet*/
#mcts1 .navBullets a 
{
    display:inline-block;
    width:13px; height:13px;
    background:transparent url(http://npf.co.in/cssFile/bullet.png) no-repeat 0 0;
    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
    margin-right:6px;/*margin-right determines the distance between each bullets*/
}
#mcts1 .navBullets a:hover {background-position:0 -13px;}
#mcts1 .navBullets .active {background-position:0 -26px;}
#mcts1 .navBullets a.active:hover {background-position:0 -26px;}


/* --------- Others ------- */
#mcts1
{
	transform: translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}

#cssmenu{
	border:none;
	border:0px;
	float:right;
	margin-top:4px;
	padding:0px;
	font-size:12px;
	}
#cssmenu ul{
	height:40px;
	list-style:none;
	margin:0;
	padding:0;
	}
	#cssmenu li{
		color:#fff;
		float:left;
		padding:5px 0px;		}
	#cssmenu li a{ font-size:14px; color:#fff; text-decoration:none; 
    	-webkit-transition: all 0.2s ease-in-out;
    	-moz-transition: all 0.2s ease-in-out;
    	-o-transition: all 0.2s ease-in-out;
    	-ms-transition: all 0.4s ease-in-out;
    	transition: all 0.2s ease-in-out;
		opacity:1.0;
		line-height:30px;
		filter:alpha(opacity=100);
		padding:0 5px 0 25px;
		text-decoration:none;
		}
		#cssmenu li a:hover{
		color:#acd4ff;
		text-decoration:none;
			}
	#cssmenu li ul{
		background:#1d1ca6;
		border-left:2px solid #fff;
		border-right:2px solid #fff;
		border-bottom:2px solid #fff;
		display:none;
		height:auto;
		filter:alpha(opacity=95);
		position:absolute;
		margin-top:3px;
		width:190px;
		margin-left:4px;
		z-index:200;
		/*top:1em;
		/*left:0;*/
		}
	#cssmenu li:hover ul{
		display:block;
		}
	#cssmenu li li {
		display:block;
		float:none;
		padding:0px;
		width:225px;
		}
	#cssmenu li ul a{
		display:block;
		font-size:12px;
		font-style:normal;
		padding:0px 10px 0px 15px;
		text-align:left;
		}
		#cssmenu li ul a:hover{
		font-size:14px;

			}
	#cssmenu p{
		clear:left;
		}	
	#cssmenu .active > a{
	font-size:16px; color:#fff; text-decoration:none; 		}
	#cssmenu .active > a:hover {
	color:#acd4ff;
}
		

.content-list {width:100%;  float:left; margin:5px 0 0 18px; padding:0;}
.content-list ul {margin:0; padding:0; float:left;}
.content-list li { list-style-type:circle;  padding:2px 0; font-family:Arial, Helvetica, sans-serif; font-size:13px; display:list-item; list-style-image:url(../images/list-aerrow.png);}

.content-list-5 {width:100%;  float:left; margin:5px 0 0 18px; padding:0;}
.content-list-5 ul {margin:0; padding:0; float:left;}
.content-list-5 li { list-style-type:circle;  padding:4px 0; font-family:Arial, Helvetica, sans-serif; font-size:14px; display:list-item; list-style-image:url(../images/list-aerrow.png);}



.content-list-4 {width:32%; float:left; margin:5px 0 0 18px; padding:0;}
.content-list-4 ul {margin:0; padding:0; float:left;}
.content-list-4 li { padding:2px 0; font-family:Arial, Helvetica, sans-serif; font-size:13px; display:compact;list-style-type:square;}


.content-list2 {width:46.7%; float:left; margin:5px 0 0 18px; padding:0;}
.content-list2 ul {margin:0; padding:0; float:left;}
.content-list2 li { padding:2px 0; font-family:Arial, Helvetica, sans-serif; font-size:13px; display:compact;list-style-type:square;}

.content-list3 {width:100%; float:left; margin:5px 0 0 27px; padding:0;}
.content-list3 ul {margin:0; padding:0; float:left;}
.content-list3 li { padding:4px 0; font-family:Arial, Helvetica, sans-serif; font-size:13px; display:compact;list-style-type:square; }


.dairy-content-part, .vacum-content-part { width:100%; float:left;margin-top:310px; }
.vacum-content-part { margin-top:349px;}

.cont-midel-peregraph, .cont-midel-peregraph-2 {width:100%; float:left; padding-top:5px; font-family:Arial, Helvetica, sans-serif;}
.cont-midel-peregraph-2 { padding:0;}
 
.cont-midel-peregraph span { color:#000; font-weight:bold; float:left !important; padding:0; margin:0; text-align:inherit !important;}

.machine-img { width:90%; float:right; } 


/* --------- CONTACT US ------- */

.contact-us { width:50%; float:left; margin-left:15px;}
.input-main { width:100%; float:left; margin:5px 0;}  
.input-name { width:32%; float:left; font-size:13px;}  
.input, .input-2 { width:60%; padding:2px 0;
	border:1px solid #ccc;
	
    outline:none;
    transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;

-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;    -moz-transition: all 0.25s ease-in-out;
}
.input:focus {
    box-shadow: 0 0 3px rgba(#000);
    -webkit-box-shadow: 0 0 3px rgba(#000); 
    -moz-box-shadow: 0 0 3px rgba(#000); 
}
.input-2 { height:70px; -moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
}
.send-btn { float:right; margin-right:27px;}

.input-2:focus {
    box-shadow: 0 0 3px rgba(#000);
    -webkit-box-shadow: 0 0 3px rgba(#000); 
    -moz-box-shadow: 0 0 3px rgba(#000); 
}
.phn-icon { width:25px; float:left; padding:5px 5px 5px 0px; text-align:center;}
.address-name, .address-name-2 { width:90%; float:left; padding-top:9px;}
.address-name-2 { padding-top:5px;}
.address-name-3 a {float:left; color:#4D4D4D;  padding-top:5px; text-decoration:none;
    	-webkit-transition: all 0.2s ease-in-out;
    	-moz-transition: all 0.2s ease-in-out;
    	-o-transition: all 0.2s ease-in-out;
    	-ms-transition: all 0.4s ease-in-out;
    	transition: all 0.2s ease-in-out;
		opacity:1.0;

}



.address-name-3 a:hover { color:#0d519b; text-decoration:underline;}

.factory-address { width:100%;; float:left; font-size:14px; font-family:Arial, Helvetica, sans-serif; padding:3px 0;} 
.form-main {width:350px; float:right;  background-color:#e9edf2; padding:10px 20px; margin-left:20px;}
