@charset "utf-8";
/* CSS Document */


/* indexheader*/
.top .content {
	border-top: 5px solid #1e1e1e;
}

.top .logo {
	position: absolute;
	top: 30px;
	left: 5%;
	z-index: 1;
}

.top {
	background: #fff;
}

.top nav {
	background: #fff;
}

.top .nav li {
	float: left;
	width: 14.28%;
	padding: 20px 0;
	font-size: 19px;
	color: #1e1e1e;
}

.nav>li>a {
	padding: 0 !important;
}

.top .nav a:hover,
header .nav .on a {
	color: #e50012;
	background: none !important;
}

/*banner */
.slideBox {
	width: 100%;
	height: 457px;
	overflow: hidden;
	position: relative;
}

.slideBox .hd {
	height: 26px;
	overflow: hidden;
	position: absolute;
	bottom: 50px;
	z-index: 1;
	right: 14%;
}

.slideBox .hd ul {
	overflow: hidden;
	zoom: 1;
	float: left;
}

.slideBox .hd ul li {
	float: left;
	margin-right: 15px;
	width: 26px;
	height: 26px;
	border-radius: 13px;
	border: #1e1e1e 2px solid;
	cursor: pointer;
}

.slideBox .hd ul li.on {
	background: #1e1e1e;
}

.slideBox .bd {
	position: relative;
	height: 100%;
}

.slideBox .bd img {
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -952px;
	top: 0;
	max-width: none;
}

.slideBox .bd ul {
	margin-bottom: 0 !important;
	position: relative;
	height: 100%;
	width: 100%;
	overflow: hidden;
}

.slideBox .bd li {
	zoom: 1;
	vertical-align: middle;
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.slideBox .bd li a {
	display: block;
}

.slideBox .bd li a img {
	display: block;
	position: absolute;
	top: 340px;
	left: 88% !important;
	margin-left: 0 !important;
}


/*about*/
#about {
	color: #fff;
	padding: 3.5% 0;
	position: relative;
	overflows: hidden;
	box-shadow: 0 15px 25px #1e1e1e;
	color: #fff;
}

#about,
#contact,
#detail-page {
	background-image: url(../img/wood-bg.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: fixed;
}

#about h1 {
	font-size: 55px;
}

#about .title {
	color: #fff;
	font-weight: 300;
	width: 100%;
	float: left;
}

#about .title .highlight {
	background: #e50012;
	display: block;
	float: left;
	margin-left: -788px;
	text-align: right;
	width: 100%;
}

#about .title span {
	padding: 1%;
}

#about .title span span {
	padding: 0 10px;
	font-size: 35px;
	line-height: 35px;
}

#about .title .highlight+span {
	display: block;
	float: left;
	overflow: hidden;
}

#about .context {
	z-index: 1;
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	left: 0;
	margin-top: 20px;
}

#about .context p {
	color: #fff;
}

.more-news {
	margin-bottom: 20px;
	background: url("../img/right-arrow.svg") no-repeat scroll 95% center #e50012;
	color: #fff;
	display: block;
	float: left;
	overflow: hidden;
	padding: 10px 50px 10px 15px;
	position: relative;
	z-index: 2;
}

.more-news:hover {
	background-color: #1e1e1e;
}

.more-news a {
	font-size: 24px;
	color: #fff;
}

.certificates {
	width: 24%;
	text-align: center;
	position: absolute;
	right: 5%;
	top: 165px;
	z-index: 1;
}


/* products */
#products {
	position: relative;
	background-image: url("../img/products-gradient.svg");
	background-repeat: repeat-y;
	background-position: center top;
	background-size: cover;
}

#products .title {
	background: #1E1E1E;
	position: relative;
	z-index: 1;
	color: #FFFFFF;
	display: block;
	margin: 0 auto;
	overflow: hidden;
	padding: 10px;
	text-align: center;
	width: 500px;
}

#products>div {
	display: block;
	position: relative;
	float: left;
	width: 100%;
}

.all-prod {
	font-size: 21px;
	position: relative;
	z-index: 2;
	padding: 15px 50px 15px 15px;
	display: block;
	overflow: hidden;
	float: left;
	background: url("../img/right-arrow.svg") no-repeat 95% center #1E1E1E;
	color: #fff;
}

.all-prod:hover {
	background-color: #e50012;
	color: #fff;
	-moz-animation: moreRight .6s linear infinite;
	animation: moreRight .6s linear infinite;
	-webkit-animation: moreRight .6s linear infinite;
}

.highlight {
	background: #e50012;
	display: block;
	margin-top: 40px;
	padding: 10px 70px;
	color: #fff;
	margin-left: -290px;
	text-align: right;
	width: 50%;
}

h2 {
	font-size: 48px;
	line-height: 58px;
	margin-bottom: 15px;
}

.context p {
	font-size: 17px;
	color: #5a5a5a;
}

#products .display {
	position: relative;
}

#fruit .image01,
#fruit .image02 {
	position: absolute;
}

#fruit .image01 {
	top: 200px;
	right: 0;
}

#fruit .image02 {
	top: 355px;
	left: 0;
}

.c_f {
	width: 46%;
	padding: 30px 0 40px 40px;
}

.display img {
	display: block;
	max-width: 100%;
}


.right .highlight {
	float: right;
	text-align: left;
	margin-left: 531px;
}

.right .context {
	float: right;
	text-align: right;
}

.right .all-prod {
	float: right;
	padding: 15px 15px 15px 50px;
	background: url("../img/left-arrow.svg") no-repeat 5% center #1E1E1E;
}

.right .all-prod:hover {
	background-color: #e50012;
	color: #fff;
	-moz-animation: moreLeft .6s linear infinite;
	animation: moreLeft .6s linear infinite;
	-webkit-animation: moreLeft .6s linear infinite;
}

#vegetable {
	margin-top: 395px;
}

.c_v {
	width: 66%;
	padding: 30px 0 40px 40px;
}

#vegetable .image04 {
	position: absolute;
	top: 265px;
	right: 45px;
}

#vegetable .image03 {
	position: absolute;
	top: 35px;
	left: 0;
}

#beverages {
	margin-top: 30px;
}

#beverages .highlight {
	margin-left: -155px;
}

.c_m {
	width: 55%;
	padding: 30px 0 40px 40px;
}

#beverages .image05 {
	position: absolute;
	top: 20px;
	right: 0;
}

#beverages .image06 {
	position: absolute;
	top: 308px;
	left: 80px;
}

#egg {
	margin-top: 160px;
	margin-bottom: 0;
}

.c_e {
	width: 60%;
	padding: 30px 0 40px 40px;
}

#egg .highlight {
	margin-left: 531px;
	margin-bottom: 20px;
}

#egg .image08 {
	position: absolute;
	top: 300px;
	right: 0;
}

#egg .image07 {
	position: absolute;
	top: 65px;
	left: 150px;
}

#egg.chinese {
	margin-bottom: 200px;
}


@media (max-width: 1800px) {

	.c_e,
	.c_m {
		width: 50%;
	}
	#beverages .image05 {
		top: 100px;
		right: 0;
		width: 50%;
	}
	
	#egg .image07 {
		top: 165px;
		left: 0;
		width: 50%;
	}
}

@media (max-width: 1280px) {
	.certificates {
		display: none;
	}

	.twothird {
		width: 100%;
	}

	#fruit .image01 {
		top: 280px;
		right: 0;
		width: 55%;
	}

	#fruit .image02 {
		top: 355px;
		left: 0;
		width: 40%;
	}

	#vegetable {
		margin-top: 300px;
	}

	#vegetable .image04 {
		top: 250px;
		right: 80px;
		width: 40%;
	}

	#vegetable .image03 {
		top: 120px;
		left: 0;
		width: 50%;
	}

	#beverages {
		margin-top: 50px;
	}

	#beverages .image05 {
		top: 100px;
		right: 0;
		width: 50%;
	}

	#beverages .image06 {
		top: 350px;
		left: 80px;
		width: 30%
	}

	#egg {
		margin-top: 50px;
	}

	#egg .image08 {
		top: 300px;
		right: 0;
		width: 35%;
	}

	#egg .image07 {
		top: 165px;
		left: 0;
		width: 50%;
	}

}


@media (max-width: 1024px) {
	.top .nav li {
		width: 100%;
		background: none;
		text-align: center;
	}

	#about .title .highlight {
		margin-left: -500px;
	}


}

@media (max-width: 950px) {
	#about .title .highlight {
		margin-left: -490px;
	}

	.highlight {
		margin-left: -170px;
	}

	#vegetable {
		margin-top: 240px;
	}

	#beverages {
		margin-top: 150px;
	}

	#egg {
		margin-top: 90px;
		margin-bottom: 180px;
	}
}

@media (max-width: 768px) {

	.container {
		max-width: 100% !important;
		width: 100% !important;
	}

	#about .title .highlight {
		margin-left: -400px;
	}

	.c_f,
	.c_v,
	.c_m,
	.c_e {
		width: 100%;
		padding: 30px 40px 40px 40px;
	}

	h2 {
		font-size: 28px;
	}

	.highlight {
		margin-left: 0;
		padding: 10px 20px;
	}

	#vegetable {
		margin-top: 165px;
	}

	#vegetable .image03 {
		top: 255px;
	}

	#vegetable .image04 {
		top: 330px;
		right: 45px;
	}

	#beverages .highlight {
		margin-left: 0;
	}

	#beverages .image05 {
		top: 235px;
	}

	#egg {
		margin-top: 140px;
	}

	#egg .image07 {
		top: 245px;
	}

	#egg .image08 {
		top: 345px;
	}

}

@media (max-width:600px) {
	#about .title .highlight {
		margin-left: -250px;
	}

	#vegetable {
		margin-top: 100px;
	}

	#vegetable .image03 {
		top: 255px;
	}

	#vegetable .image04 {
		top: 330px;
		right: 45px;
	}

	#beverages {
		margin-top: 60px;
	}

	#beverages .image05 {
		top: 280px;
	}

	#beverages .image06 {
		left: 50px;
	}

	#egg {
		margin-top: 100px;
		margin-bottom: 114px;
	}

	#egg .image07 {
		top: 330px;
	}

	#egg .image08 {
		top: 375px;
	}

}

@media (max-width:500px) {
	#about .title .highlight {
		margin-left: -250px;
	}

	#products .title {
		width: 95%;
	}

	#fruit .image01 {
		top: 318px;
	}

	#beverages {
		margin-top: 10px;
	}
}