@charset "UTF-8";
/* CSS Document */
html {
	background-color: #414042;
	font-family: 'Raleway', sans-serif;
	font-weight:400;
	font-size: 14px;
	line-height:18px;
	color:#BBBBBB;
	text-align:left;
	}
* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
}
body{margin:0 auto;}
a {text-decoration:none; color: #CCCCCC;font-weight:600;}
a:hover{color:#FFFFFF;}
em{font-style:normal; color:#159fda; font-weight:800;}
p{display:inline;font-style:normal; font-size: 14px;color:#BBBBBB; font-weight:400;}
h2{display:inline;font-style:normal; font-size: 14px;color:#FFFFFF; font-weight:800;}
h1{font-style:normal; font-size: 22px;color:#FFFFFF; font-weight:800;}
h2{display:inline;font-style:normal; font-size: 14px;color:#FFFFFF; font-weight:800;}
h3{display:inline;font-style:normal; font-size: 14px;color:#FFFFFF; font-weight:800;}
h4{display:inline;font-style:normal; font-size: 14px;color:#FFFFFF; font-weight:800;}

#wrapper{
	width:100%;
	margin-left:auto;
	margin-right:auto;
	}
#centrewrapper{
	width:800px;
	margin-left: auto;
	margin-right: auto;
}
.pagewrapper{
		position:relative;
		width:100%;
		height:auto;	
		}
.pagewrapper2{
		position:relative;
		width:100%;
		height:auto;
		margin-top:-30px;
	}

.pagewrapperselect{
	position:absolute;
	width:800px;
	height:auto;
	top:260px;
	left:100px;	
	z-index: 100;
}
#content{
	z-index:40;
	position:relative;
	float: left;
	width:600px;
	height:auto;
	left:0px;
	margin-bottom: 40px;
}
.bluebar{
	position: relative;
	float: left;
	width: 100%;
	height: 30px;
	background-color: #159fda;
	margin-top: -10px;
	margin-bottom: 10px;
	padding-top: 6px;
	padding-left: 8px;
}
.halfcolumnl{
	position: relative;
	float: left;
	width: 280px;
	height: auto;
	margin-top: 20px;
	margin-bottom: 20PX;
}
.halfcolumnr{
	position: relative;
	float: right;
	width: 280px;
	height: auto;
	margin-top: 20px;
	margin-bottom: 20PX;
}
.thirdcolumn1{
	position: relative;
	float: left;
	width: 190px;
	height: auto;
	margin-bottom: 40PX;
	margin-right:15px;
}
.thirdcolumn2{
	position: relative;
	float: left;
	width: 190px;
	height: auto;
	margin-bottom: 40PX;
}
.thirdcolumn3{
	position: relative;
	float: right;
	width: 190px;
	height: auto;
	margin-bottom: 40PX;
}
.downloadbar{
	position: relative;
	float:left;
	width:100%;
	height:100px;
	background-color: rgba(255, 255, 255, 0.15);
	border-radius: 10px;
	padding-top: 0px;
	padding-left: 20px;
	margin-top: 10px;
	margin-bottom: 40px;
}
.downloadtext{
	position: relative;
	float: left;
	width: 440px;
	height: auto;
	margin-top: 20px;
	margin-bottom: 20PX;
}
.fabdownloadtext{
	position: relative;
	float: left;
	width: 440px;
	height: auto;
	margin-top: 10px;
	margin-bottom: 20PX;
}
.downloadbutton{
	position: relative;
	float: left;
	width: 100%;
	height: 30px;
	background-color: #159fda;
	margin-top: 15px;
	padding-top: 6px;
	padding-left: 8px;
	border-radius: 6px;
	color: white;
	text-align: center;
}
.downloadbutton:hover{
box-shadow:0 0 10px white;
}
.cover{
	position: absolute;
	margin-top: -50px;
	left: 440px;
}
#haccpcover{
	position: absolute;
	margin-top: -80px;
	left: 160px;
}
#customerlogos{
	position: relative;
	left: 0px;
	top: 0px;
}
	
	/*--------------------------header----------------------------*/
.header{
	z-index:1;
	position:relative;
	width: 100%;
	min-width:800px;
	height:200px;
	}
.header img{
	width:100%;
	height:100%;
	object-fit: cover;
	}
#headerlogo{
	z-index:20;
	position:absolute;
	width:350px;
	height:114px;
	top:50px;
	left:100px;
	background:url(pplinks/ppheadlogo2.png) no-repeat;
	background-size:100%;
}
#headercontacts{
	z-index:20;
	position:absolute;
	top:140px;
	right: 160px;
	font-size:13px;
	color:#FFFFFF;
}
#rulefade1{
	z-index:40;
	position:absolute;
	width:100%;
	height:28px;
	top:160px;
	background:url(pplinks/rulefade.png) no-repeat;
	background-size:100%;
}

#ppicon1{
	z-index:20;
	position:absolute;
	width:307px;
	height:431px;
	top:10px;
	right:0px;
	background:url(pplinks/ppicon1.png) no-repeat;
	background-size:100%;
	opacity:0.1;
}
#ppicon2{
	z-index:20;
	position:absolute;
	width:260px;
	height:332px;
	top:0px;
	left:0px;
	background:url(pplinks/ppicon2.png) no-repeat;
	background-size:100%;
	opacity:0.1;
}
/*--------------------------menus--------------------------*/
#menu1{
	z-index:20;
	position:absolute;
	width:auto;
	height:auto;
	top:260px;
	left:100px;
	line-height:22px;
	color:#FFFFFF;
} 
#menu2{
	z-index:20;
	float:left;
	position:absolute;
	left:100px;
	margin-top:-15%;
	line-height:22px;
	color:#FFFFFF;
}
#menu3{
	z-index:20;
	float:left;
	position:absolute;
	left:100px;
	margin-top:-25%;
	line-height:22px;
	color:#FFFFFF;
}
#menuwrapper700{
	position: relative;
	float:left;
	width: 200px;
	left:0px;
	height:800px;
}
#menuwrapper2000{
	position: relative;
	float:left;
	width: 200px;
	left:0px;
	height:2000px;
}
#menu4{
	position: -webkit-sticky;
	position: sticky;
	top: 30px;
	z-index:120;
	float:left;
	left:110px;
	line-height:22px;
	color:#FFFFFF;
}
#menu5{
	z-index:80;
	position: relative;
	left:0px;
	top: 0px;
	line-height:22px;
	color:#FFFFFF;
}
.icon{opacity:0.5; background: url(pplinks/ppicon.png) no-repeat left;}
.icon:hover{opacity:1;}
.iconon{font-weight:800;background: url(pplinks/ppiconon.png) no-repeat left;}
	
/*--------------------------text--------------------------*/
.text{
	position:relative;
	float: left;
	width:100%;
	height:auto;
	min-height: 25px;
}

.mainpic{
	position:relative;
	float: left;
	width:700px;
	height:300px;
	margin-left: -50px;
	margin-bottom: -50px;
}
.vidpic{
	position:relative;
	float: left;
	width:700px;
	height:280px;
	margin-left: -50px;
	margin-bottom: 10px;
}
#mapmain{
	position:relative;
	float: left;
	width:700px;
	height:317px;
	margin-left: -50px;
	margin-top: 20px;
}
#frontagemain{
	position:relative;
	float: left;
	width:600px;
	height:350px;
	margin-left: 0px;
	margin-top: 20px;
}
#greybox1{
	z-index:18;
	position:absolute;
	width:810px;
	float:left;
	height:150px;
	top:234px;
	left:0px;
	background-color:#414143;
	opacity:0.6;
	-moz-box-shadow: 10px 10px 10px rgba(65,65,67,1);
-webkit-box-shadow: 10px 10px 10px rgba(65,65,67,1);
box-shadow: 10px 10px 10px rgba(65,65,67,1);
}
#text1{
	z-index:20;
	position:relative;
	float: left;
	width:500px;
	height:auto;
	left:300px;
}
#text2{
	z-index:20;
	position:absolute;
	width:500px;
	float: left;
	height:auto;
	margin-top:-15%;
	left:300px;
}
#greybox2{
	z-index:18;
	position:absolute;
	width:810px;
	float:left;
	height:300px;
	top:0px;
	left:0px;
	background-color:#414143;
	opacity:0.6;
	-moz-box-shadow: 10px 10px 10px rgba(65,65,67,1);
-webkit-box-shadow: 10px 10px 10px rgba(65,65,67,1);
box-shadow: 10px 10px 10px rgba(65,65,67,1);
}
#text3{
	z-index:20;
	position:absolute;
	width:400px;
	height:100px;
	margin-top:-25%;
	left:300px;
}

.insetpic{
	z-index:20;
	position: absolute;
	width:200px;
	height:200px;
	margin-top:-20%;
	right:10%;
}
#mappic{
	z-index:20;
	position: absolute;
	width:441px;
	height:290px;
	margin-top:-20%;
	right:2%;
}

/*--------------------------pic slider--------------------------*/
.picsliderwrapper1{
	z-index:0;
	position:relative;
	overflow:hidden;
	width:100%;
	min-width:800px;
	height:auto;
	margin-bottom:-30px;
	}
.picsliderwrapper2{
	z-index:0;
	position:relative;
	overflow:hidden;
	width:100%;
	min-width:800px;
	height:auto;
	}
.picsliderwrapper3{
	z-index:0;
	position:relative;
	overflow:hidden;
	width:100%;
	min-width:800px;
	height:auto;
	margin-bottom:-30px;
	}
.picslider{
	width: 700%;
	height:100%;
	}
.picslider2{
	width: 700%;
	height:auto;
	}
.picslider3{
	width: 700%;
	height:auto;
	}
.pic{
	float:left;
	width: 14.2857%;
	height:100%;
		}
.pic img{
	width:100%;
	height:100%;
	}

#picbuttons{
	z-index:10;
	position: relative;
	width: 200px;
	height:20px;
	margin-left:auto;
	margin-right:auto;
	top:-60px;
}
.picbutton{
	float:left;
	cursor:pointer;
	width:50px;
	height:20px;
	margin-left:0px;
	margin-right:0px;
	background:url(pplinks/picbutton.png) no-repeat center;
	opacity:0.6;
	}
.picbuttonon{
	float:left;
	cursor:pointer;
	width:50px;
	height:20px;
	margin-left:0px;
	margin-right:0px;
	background:url(pplinks/picbutton.png) no-repeat center;
	opacity:1;
	}
.picbutton:hover {opacity:1 !important;}
.picbuttonon:hover {opacity:1 !important;}

#footer{
	z-index:30;
	position:absolute;
	width:80%;
	left:100px;
	top:0px;
}
#footer2{
	z-index:30;
	position:relative;
	width:80%;
	left:100px;
	height: 600px;
}
#rulefadefooter{
	z-index:20;
	position:relative;
	float: left;
	width:100%;
	height:28px;
	background:url(pplinks/rulefade.png) no-repeat;
	background-size:100%;
}
#footerpic{
	position:relative;
	width: 160px;
	float:left;
	opacity:0.4;
}
#footertext{
	position:relative;
	width:800px;
	left: 40px;
	float:left;
	font-size:11px;
	top:10px;
}
#maplink{
	z-index:40;
	position:absolute;
	left:800px;
	top:320px;
	font-size:12px;
	color:#AAAAAA;
	width:100px;
	height:20px;
}
#maplink a{
	color:#AAAAAA;
}
#maplink a:hover{
	color:#FFFFFF;}

/*------------ iPhone 6 portrait and landscape -------------------*/
	@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
	
	}
	
/*------------ iPhone 6 portrait -------------------*/
	@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)  {
	.header img{width:200%;height:200%;}
	.header {overflow:hidden;}
	.pic img{width:150%;height:150%;}
	#text2{margin-top:-30%;}
	#text3{margin-top:-23%;}
	#menu2{margin-top:-30%;}
	#menu3{margin-top:-23%;}
	#mapheader img{width:100%;height:100%;}
	#customerlogos{
	position: relative;
	left: 0px;
	top: 0px;
}
	
	}
	
/*------------ iPhone 6 landscape -------------------*/
	@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape)  {
	.header img{width:200%;height:200%;}
	.header {overflow:hidden;}
	.pic img{width:130%;height:130%;}
	#text2{margin-top:-30%;}
	#text3{margin-top:-23%;}
	#menu2{margin-top:-30%;}
	#menu3{margin-top:-23%;}
	#mapheader img{width:100%;height:100%;}
	}