/* 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:#d76203; font-size:35px; font-weight:100; text-transform:uppercase; padding:0px; margin:35px 0px 25px 0px;}
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 0px 14px 0px; color:#f1f1f1; font-size:35px; font-family: 'straitregular'; text-transform:uppercase;}
h4{  font-family: 'straitregular'; font-size:16px;}
h3{ font-family: 'Jura', sans-serif; font-size:36px; color:#fff; font-weight:900; text-transform:none; margin:0px 0px 0px 0px; padding:50px 0px 0px 0px;}
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;}

header{ float:left; width:100%; min-height:130px; text-align:justify;}
.banner-title{ float:left; width:250px; height:168px; padding:0px 44px 0px 0px;}
.banner-right{ float:right; width:600px; height:85px; text-align:right; padding:40px 0px 0px 0px;}
nav{ float:left; width:100%; min-height:20px; padding:5px 0px 0px 0px; background:#002c5a;}

/*----HOME PAGE------------------------------------------------------------------------------------------------------------------------------------*/
#animation{ float:left; max-height:530px; text-align:justify; width: 100%; margin:0px 0px 15px 0px;}

#home-intro{ float:left; width:100%; min-height:100px; text-align:center; color:#333333; line-height:25px; margin:0px 0px 0px 0px; padding:35px 0px;}
#home-intro h1{ color:#002b58; text-transform:uppercase; font-size:30px; margin-bottom:15px;}
#home-intro a{ text-align:center; color:#CC6600;}

#anibot{ float:left; width:100%; min-height:270px; text-align:justify; background:#fff; padding:50px 0px 50px 0px; color:#282639;}
.anibot{ float:left; width:440px; text-align:justify; margin:0px 35px 0px 0px; font-size:13px; color:#282639;}
.anibot h1{ margin-bottom:25px;}
.anibot img{ width:100%; height:auto; margin:0px 0px 20px 0px; text-align:justify;}
#anibot a{ color:#d76203;}

article{ float:left; width:100%; padding:30px 0px;}

article p{ margin:20px 0px; text-align:justify; font-size:13px; font-weight:inherit;}

#product-ani{ float:left; width:100%; min-height:250px; margin:20px 0px 0px 0px;}
#product-ani h2{ color:#f5f5f5; font-size:18px; text-align:left; margin:8px 0px 0px 0px; padding:0px 0px 0px 0px; line-height:20px;}
#product-ani img{ border:#CCC thin solid;}

#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:125px; padding:150px 30px 0px 30px; color:#CCC; font-weight:bold; font-size:14px;}
.group-in:hover{
background: -moz-linear-gradient(-45deg,  rgba(181,49,16,1) 27%, rgba(181,49,16,0.44) 68%, rgba(126,170,232,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(27%,rgba(181,49,16,1)), color-stop(68%,rgba(181,49,16,0.44)), color-stop(100%,rgba(126,170,232,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  rgba(181,49,16,1) 27%,rgba(181,49,16,0.44) 68%,rgba(126,170,232,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  rgba(181,49,16,1) 27%,rgba(181,49,16,0.44) 68%,rgba(126,170,232,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(181,49,16,1) 27%,rgba(181,49,16,0.44) 68%,rgba(126,170,232,0) 100%); /* IE10+ */
background: linear-gradient(135deg,  rgba(181,49,16,1) 27%,rgba(181,49,16,0.44) 68%,rgba(126,170,232,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b53110', endColorstr='#007eaae8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
 width:380; height:125px; padding:150px 30px 0px 30px; color:#CCC;}
/*----HOME PAGE------------------------------------------------------------------------------------------------------------------------------------*/

/*--PRODUCT--*/
.product{ float:left; width:180px; margin:5px 20px 5px 0px; padding:0px 0px; background:#fff; height:180px;}
.product h3{ color:#003348; font-size:13px; font-family: 'straitregular'; text-align:center; font-weight:100; min-height:20px; margin:0px; padding:3px 10px 3px 10px; background:#a3dbf6; border-radius:4px; width:170px;}
.galleryimg{ width:170px; height:auto; background:#FFFFFF;}
.galleryimg img{ max-width:170px; height:143px; border-radius:6px; border:#008bd2 thin solid; padding:5px 5px; }
/*--PRODUCT--*/


/*----INNER-----------------------------------------------------------------------------------------------------------------------------------*/
#inner{ float:left; width:100%; min-height:200x;}
/*----INNER-----------------------------------------------------------------------------------------------------------------------------------*/


/*--	PRODUCT PAGE      --*/
.product-range{ float:left; width:100%;}
.product-display{ float:left; width:630px; margin:0px 20px 0px 0px;}
.product-display-img{ float:left; width:180px; margin:15px 14px 15px 0px; padding:3px; border:#002c5a thin solid; border-radius:3px;}
.product-display-img h3{ font-size:14px; font-family: 'straitregular'; color:#0066CC; margin:0px; padding:0px;}
.product-display-img img{ width:180px; height:150px;}
.product-make{ float:left; width:350px; margin:15px 0px 0px 0px;}
.product-make h5{ font-family: 'straitregular'; font-size:14px; background:#002b58; color:#f5f5f5; font-weight:100; text-transform:none; margin:0px 0px 0px 0px; width:92%; padding:10px 5%; border-top-left-radius:7px;}
.product-make-div{ float:left; width:92%; padding:10px 5%; border-bottom-right-radius:7px; font-size:11px; -webkit-box-shadow: 4px 6px 5px 0px rgba(179,172,179,0.68);
-moz-box-shadow: 4px 6px 5px 0px rgba(179,172,179,0.68);
box-shadow: 4px 6px 5px 0px rgba(179,172,179,0.68); background:#a3dbf6; border-left:#82b9d7 medium solid; border-top:#82b9d7 thin solid;}
/*--	PRODUCT PAGE      --*/



/*--MODIFIED PRODUCT--*/
.product-form{ float:left; width:80%; padding:35px 10%; background:#133366; margin:20px 0 0 0;}
.product-form ul{ margin:0px; padding:0px; list-style:none;}
.product-form ul li{ float:left; width:250px; margin:15px 50px 15px 0px; font-weight:bold; color:#FFFFFF; min-height:25px;}
.product-form ul li h5{ min-width:180px; font-family: 'straitregular'; text-align:center; font-size:16px; font-weight:100; color:#f5f5f5; border-radius:5px; float:left; padding:10px 10px; margin:10px 0px 10px 0px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7abcff+0,60abf8+44,4096ee+100;Blue+3D+%2314 */
background: #7abcff; /* Old browsers */
background: -moz-linear-gradient(top,  #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
}

.panel-menu{ float:left; width:100%; min-height:30px; padding:5px 0px; background:#f5f5f5; margin-bottom:20px;}
.panel-menu ul{ margin:0px; padding:0px; list-style:none;}
.panel-menu ul li{ float:left; margin:0px 20px 0px 20px; font-size:13px;}
.panel-menu ul li a{ color:#cc3300; font-weight:bold; text-decoration:underline;}
.product-update{ float:left; width:280px; height:auto; background:#59c7e2; color:#FFF; font-weight:100; font-family: 'straitregular'; font-size:16px; padding:15px 10px; margin:15px 15px;}
.product-update-col{ float:left; width:110px; margin:10px 15px 10px 0px;}
.product-update-col img{ width:150px; height:150px;}
.product-update-col a{ color:#FF9; text-decoration:underline;}


.product-form1{ float:left; width:90%; padding:35px 5%; background:#ebebeb; margin:20px 0 0 0;}
.product-form1 ul{ margin:0px; padding:0px; list-style:none;}
.product-form1 ul li{ float:left; min-width:300px; margin:15px 50px 15px 0px; font-weight:bold; color:#333; min-height:25px;}
.product-form1 ul li h5{ min-width:180px; font-family: 'straitregular'; text-align:center; font-size:16px; font-weight:100; color:#f5f5f5; border-radius:5px; float:left; padding:10px 10px; margin:10px 0px 10px 0px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7abcff+0,60abf8+44,4096ee+100;Blue+3D+%2314 */
background: #7abcff; /* Old browsers */
background: -moz-linear-gradient(top,  #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
}
/*--MODIFIED PRODUCT--*/

/*----CONTACT PAGE-----------------*/
.contact{ float:left; width:400px; margin:0px 100px 0px 0px;}
.contact h2{font-family: 'Jura', sans-serif; font-size:23px; color:#002b59; text-align:left;}
.contact p{ line-height:25px;}
.contact ul{ margin:0px; padding:0px; list-style:none;}
.contact ul li{ padding:5px 0px 5px 45px; margin:5px 0px; font-size:12px;}
.phone{background:url(../images/phone-icon.jpg) no-repeat;}
.fax{background:url(../images/fax.jpg) no-repeat; }
.mobile{ background:url(../images/mobile.jpg) no-repeat; }
.mail{ background:url(../images/mail-icon.jpg) no-repeat; }
.contact-img{ float:left; width:450px; margin:0px 0px 0px 50px;}
/*----CONTACT PAGE-----------------*/

/*----ENQUIRY FORM-----------------------------------------------------------------------------------------------------------------------------------*/
.enquiry-form{ width:100%; height:auto; float:left; margin:15px 0 0 0;}
.enquiry-li{ float:left; width:350px; margin:3px 50px 3px 0px; min-height:75px; font-family:Arial, Helvetica, sans-serif; font-size:12px;}
.enquiry-label{ float:left; width:230px; margin:0px 0px 0px 0px;}
.enquiry-text{ float:left; width:330px; margin:0px 0px 0px 0px;}
.enquiry-button{ float:left; width:100%; text-align:center;}
input[type=text] {
    width: 100%;
    padding: 10px 15px;
   border: 1px solid #bbb;
	border-radius: .3em;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	background: #f3f3f3; /* Old browsers */
	background: #fff -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
	background: #fff -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
	background: #fff -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
	background: #fff -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
	background: #fff -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
	background: #fff linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
	color:#666666;
}
.styled select {
  background: transparent;
  width: 150px;
  font-size: 16px;
  padding: 7px 20px;
  border: 1px solid #ccc;
  height: 34px;
}
select{
    width: 100%;
    padding: 7px 20px;
    margin: 5px 0;
    box-sizing: border-box;
	border-radius:4px;
	color:#666666;
}
input[type=password] {
    width: 100%;
    padding: 7px 20px;
    margin: 5px 0;
    box-sizing: border-box;
	border-radius:4px;
	color:#666666;
}
.textarea1 {
   
    padding: 7px 0px;
   border: 1px solid #bbb;
	border-radius: .3em;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	background: #f3f3f3; /* Old browsers */
	background: #fff -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
	background: #fff -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
	background: #fff -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
	background: #fff -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
	background: #fff -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
	background: #fff linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */
	color:#666666;
	
}
.button {
    background-color: #4b6ba6; /* Green */
    border: none;
    color: white;
    padding: 10px 60px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

.sample ul li{ color:#333;}
/*----ENQUIRY FORM-----------------------------------------------------------------------------------------------------------------------------------*/

#bottom{ float:left; width:100%; height:auto; text-align:justify; background:#fff;}  
.bottom-box{ float:left; width:201px; min-height:154px; margin:50px 24px 0px 24px; text-align:left; line-height:20px;}
.bottom-box a{ color:#CCCCCC;}
.bottom-box img{ border-radius:6px;}
.style1{ font-family: 'straitregular'; line-height:20px; font-size:18px; margin:10px 0px 0px 0px;}
.style1 a{ margin:15px 0 0 0; font-size:14px;}
#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; padding:100px 0px 50px 0px; background:#1a2027;}
.footer{ float:left; width:300px; margin:0px 33px 0 0;}
.footer ul{ margin:0px; padding:0px; list-style:none;}
.footer ul li{ margin:7px 0px; color:#5c626b;}
.footer ul li a{ color:#5c626b; text-decoration:underline;}
.footer img{ border-radius:6px; opacity:0.5;}
.footer-box{ float:left; width:270px; margin:7px 16px 15px 17px; text-align:center; padding:10px 10px; border:#292f37 thin solid; font-size:20px; font-family: 'straitregular'; color:#5f666f; border-radius:5px;}
.footer-box-phone{ background:url(../images/phone.png) no-repeat; padding:4px 0px 9px 50px; text-align:justify;}
.footer-box-mobile{ background:url(../images/mobile.png) no-repeat; padding:4px 0px 9px 50px; text-align:justify;}
.footer-box-mail{ background:url(../images/mail.png) no-repeat; padding:4px 0px 9px 50px; text-align:justify;}
.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;}
.footer-map{ float:right; width:100%; height:150px;;}
.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;
}



@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-------*/
}