/* CSS Document */
@font-face {
    font-family: 'straitregular';
    src: url('strait-regular-webfont.eot');
    src: url('strait-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('strait-regular-webfont.woff2') format('woff2'),
         url('strait-regular-webfont.woff') format('woff'),
         url('strait-regular-webfont.ttf') format('truetype'),
         url('strait-regular-webfont.svg#straitregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
body{ margin:0px; padding:0px; text-align:justify; font-family:Geneva, Arial, Helvetica, sans-serif; color:#333333; font-size:12px; line-height:25px; background:#fff;}

h1{ font-family: 'straitregular'; color:#df4b30; font-size:28px; font-weight:100;}
h2{ color:#ce6a11; font-weight:100; font-stretch:narrower; margin:0px 0px 5px 0px; padding:0px; font-size:29px; text-transform:uppercase; line-height:45px; font-family: 'straitregular';}
h3{ padding:0px; margin:0px;}
h4{  font-family: 'straitregular'; font-size:16px;}
a{ text-decoration:none;}
#center { width:1000px; height:auto; margin:0px auto !important; padding:0px 0px;}
#center:after {content: ".";display: block;clear: both; visibility: hidden; line-height: 0;height: 0;}

#top{ float:left; width:100%; height:6px; padding:3px 0px 3px 0px; background:#222222;}
header{ float:left; width:100%; height:120px; text-align:justify;}
.banner-title{ float:left; width:300px; height:100px; padding:15px 10px 0px 10px;}
nav{ float:left; width:620px; height:50px; text-align:right; margin:40px 30px 0px 30px;}

.nav ul{ margin:0px; padding:0px; list-style:none;}
.nav ul li{ float:left; text-align:justify; margin:0px 25px 0px 25px; font-family: 'straitregular'; color:#CCCCCC; display:inline; font-size:14px;}

/*----HOME PAGE------------------------------------------------------------------------------------------------------------------------------------*/
#animation{ float:left; height:460px; text-align:justify; padding:27px 0px 27px 0px; background:url(../images/aniback.jpg); width: 100%;
  background-repeat: no-repeat; background-size: 100% auto;}
.animation-left{ float:left; width:725px; height:405px; text-align:justify; margin:30px 0px 15px 0px;}
.animation-right{ float:left; width:250px; height:405px; text-align:justify; margin:18px 0px 15px 10px;}
.animation-right-img{ width:250px; height:160px; margin:12px 0px 17px 0px;}

#anibot{ float:left; width:100%; height:auto; text-align:justify; background:#fff; padding:0px 0px 20px 0px; color:#282639; margin:40px 0px 0px 0px;}
.anibot{ float:left; width:230px; text-align:justify; margin:20px 10px 20px 10px; font-size:13px; color:#282639; text-align:center; color:#787676; height:100%;}
.anibot img{ border-radius:50%; padding:5px; border:#333333 thin solid;}
#anibot a{ color:#d76203;}
.bottom-box{ float:left; width:225px; min-height:224px; margin:30px 24px 100px 0px;}

#group{ float:left; width:100%; min-height:540px; padding:25px 0px 15px 0px; margin:10px 0px 30px 0px; background:url(../images/group-company-back.jpg);}
.group{ float:left; width:440px; height:210px;}
.group1{ float:left; background:url(../images/group1.jpg); width:442px; height:275px; margin:0px 33px 20px 0px; border:#FFF thin solid;}
.group2{ float:left; background:url(../images/group2.jpg); width:442px; height:275px; margin:0px 0px 20px 33px; border:#FFF thin solid;}
.group3{ float:left; background:url(../images/group3.jpg); width:442px; height:275px; margin:0px 33px 20px 0px; border:#FFF thin solid;}
.group4{ float:left; background:url(../images/group4.jpg); width:442px; height:275px; margin:0px 0px 20px 33px; border:#FFF thin solid;}
.group-in{background: -moz-linear-gradient(-45deg,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.65) 42%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(42%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 42%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 42%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 42%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(135deg,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.65) 42%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

 width:380px; height:105px; padding:170px 30px 0px 30px;  }
 .group-in-title{border-bottom:#CCC thin solid; color:#CCC; font-weight:bold; font-size:25px; font-family: 'straitregular'; padding:0px 0px 15px 0px; text-transform:capitalize;}
.group-in:hover{ background:none; color:#000000;}
#inner{ float:left; width:100%; height:15px; background:#df4b30; text-align:justify;}
.about-dehydrated-onion{ float:left; width:280px; padding:10px 30px 0px 20px; text-align:justify; margin:20px 0px 0px 0px;}
.about-dehydrated-onion h2{ font-size:14px; text-align:justify; padding:0px 0px 0px 10px; margin:0px 0px 15px 0px; background:#C30; color:#FFFFFF; width:235px; border-radius:5px; height:40px;}
.about-dehydrated-onion h3{color:#262726; font-size:18px; text-align:center; font-weight:100; padding:0px; margin:0px;}
.dehydrated-onion-kibbled{ float:left; width:300px; margin:20px 20px 20px 0px; padding:0px; height:auto;}
.dehydrated-onion-kibbled h2{ color:#262726; font-size:17px; text-align:center;}
.dehydrated-onion-specification{ float:left; width:100%; text-align:justify; height:auto;}
.dehydrated-onion-specification table{ width:100%; text-align:justify; height:auto; border:none;}
.dehydrated-onion-specification table th{ background:#df2b0a; text-align:justify; color:#FFF; border:none; border-bottom:#F90 medium solid; padding:5px 0px 5px 25px; margin-bottom:8px;}
.dehydrated-onion-specification table td{ background:#FC6; text-align:justify; border:none; border-bottom:#df2b0a thin solid; padding:3px 0px 3px 25px;}
/*----INNER PAGES------------------------------------------------------------------------------------------------------------------------------------*/

/*----ENQUIRY FORM-----------------------------------------------------------------------------------------------------------------------------------*/
.enquiry{ width:550px; height:auto; float:left;}
.enquiry ul{ margin:0px; padding:0px; text-align:justify; list-style:none;}
.enquiry ul li{ float:left; width:250px; margin:5px 0px 0px 0px;}
/*----ENQUIRY FORM-----------------------------------------------------------------------------------------------------------------------------------*/

#bottom{ float:left; width:100%; height:auto; text-align:justify; background:#fff;}  
.bottom-box{ float:left; width:201px; height:224px; margin:30px 24px 0px 24px;}
#social{ float:left; width:100%; height:48px; padding:10px 0px 10px 0px; background:#e3dfdf; margin:25px 0px 0px 0px;}
.social{ width:1003px; text-align:justify; height:48px;}
footer{ float:left; width:100%; min-height:160px; text-align:justify; background:#121010; padding:50px 0px 30px 0px;}
.footer-box{ float:left; width:230px; margin:0px 20px 0px 0px; color:#fff; text-align:left; font-size:13px;}
.footer-box h3{ color:#e3e3df; font-weight:100;}
.footer-box a{ color:#f5f5f5; text-decoration:none;}
.footer-box ul{ margin:0px; padding:0px; text-align:justify; list-style:none;}
.footer-box ul li{ margin:5px 0px 5px 0px; text-align:justify;}
.footer-box ul li a{ color:#f5f5f5; text-decoration:none;}

.generalWidth {
	width:1003px;
	margin: 50px 0px 0px 0px;
	padding:0px;
}

.float-block {
	float:left;
	display:block;
}

.display_inline {
	display:inline;
}
#relativeNonIE {
	position:relative;
}
#page-wrap {
	float:left;
	width:100%;
	/*margin: 0 auto;*/
	background:url(../images/aniback.jpg);
	height:400px;
}
.clearBoth {
	clear:both;
	margin:0;
	padding:0;
}


/*PIC*/
.pic {
  height: 230px;
  width: 230px;
  overflow: hidden;
  margin: 20px 20px 20px 0px;
 

  float: left;
}

.pic:hover {
  cursor: pointer;
}

/*SHRINK*/
.shrink img {
  height: 400px;
  width: 400px;
 
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
 
.shrink img:hover {
  width: 300px;
  height: 300px;
}



@media only screen and ( min-width: 768px) and ( max-width: 980px ) {
	
	#center { width:768px; height:auto; margin:0px auto !important; padding:0px 0px;}
	#center:after {content:".";display: block;clear: both; visibility: hidden; line-height: 0;height: 0;}
	.footer-left{ float:left; width:360px; text-align:justify; margin:13px 0px 0px 0px;}
    .footer-right{ float:left; width:360px; text-align:right; margin:13px 0px 0px 0px;}

}

/* Landscape phone to portrait tablet */
@media only screen and ( min-width: 600px) and ( max-width: 767px ) {
	
	#center { width:600px; height:auto; margin:0px auto !important; padding:0px 0px;}
	#center:after {content: ".";display: block;clear: both; visibility: hidden; line-height: 0px;height: 0px;}
	.footer-left{ float:left; width:300px; text-align:justify; margin:13px 0px 0px 0px;}
    .footer-right{ float:left; width:300px; text-align:right; margin:13px 0px 0px 0px;}
}

/* Mobile landscape (480x320) */
@media only screen and ( min-width:480px) and ( max-width:599px ) { 
	
	#center { width:480px; height:auto; margin:0px auto !important; padding:0px 0px;}
	#center:after {content: ".";display: block;clear: both; visibility: hidden; line-height: 0px;height: 0px;}
	.footer-left{ float:left; width:240px; text-align:justify; margin:13px 0px 0px 0px;}
    .footer-right{ float:left; width:240px; text-align:right; margin:13px 0px 0px 0px;}
	.dehydrated-onion-specification table{ max-width:480px; text-align:justify; height:auto; border:none;}
	.dehydrated-onion-specification table th{ background:#df2b0a; text-align:justify; color:#FFF; border:none; border-bottom:#F90 medium solid; padding:5px 0px 5px 5px; margin-bottom:8px;}
.dehydrated-onion-specification table td{ background:#FC6; text-align:justify; border:none; border-bottom:#df2b0a thin solid; padding:3px 0px 3px 5px;}
}


/* Mobile portrait (320x480) */
@media only screen and ( min-width: 320px) and ( max-width: 480px ) {
		
		#center { width:320px; height:auto; margin:0px auto !important; padding:0px 0px;}
		#center:after {content: ".";display: block;clear: both; visibility: hidden; line-height: 0px;height: 0px;}
		
		.banner-title{ float:left; width:320px; height:100px; padding:15px 0px 0px 0px;}
		.banner-right{ display:none;}
		.menu{ float:left; width:320px; min-height:35px; padding:10px 0px 10px 0px; background:#ffb817;}
	/*----HOME PAGE----*/
		
		.anibot-left{ float:left; width:300px; padding:0px 0px 0px 0px; margin:45px 0px 0px 20px; color:#FFFFFF;}
		.anibot-right{ float:left; width:300px; padding:0px 0px 0px 20px; margin:45px 0px 0px 0px; color:#FFFFFF;}
		.bottom-box{ float:left; width:272px; height:224px; margin:30px 24px 0px 24px; text-align:center;}
    /*----HOME PAGE----*/
	.dehydrated-onion-specification table{ display:none;}
	/*----FOOTER-------*/
		.footer-box{ float:left; width:280px; margin:0px 20px 0px 20px; color:#f5f5f5;}
	/*----FOOTER-------*/
}