@import url(http://fonts.googleapis.com/css?family=Montserrat);
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
/* ################################  POULTRY PROCESSING EQUIPMENT .com - CSS styling ##############################
Site colours:

#A0A8AB - top row grey
#DC1F01 - dark orange
#EC2403 - lighter orange 

#EA2200 - nav orange
#CA1B00 - footer orange

*/ :root {
	--clr-red: #e40809;
	--clr-grey-lt: #ebebeb;
	--clr-accent: #FFF5C7;
	--clr-footer: #c00; /* was #CA1B00; */
	--clr-thin: rgba(200, 200, 200, 0.4);
	--clr-h-bg: #fefefe;
	--clr-hilite: rgba(255, 100, 100, .25);
	--box-sh: 0 0 2em rgba(0, 0, 0, .5);
	--tick-size: 29px;
	--tick-accent: #a00203;
	--tick-dtls: moving 30s linear infinite;
	--site-mw: 1280px; /* min width for site */
	--nav-brk: 600px; /* breakpoint for switching nav */
	--nav-bg: rgba(0, 0, 0, .05);
	--mg-ss: 16px; /* ss logo margin */
	--ff-main: "Open Sans", Verdana, Arial, Helvetica, sans-serif;
	--ff-hdg: Montserrat, Arial, Helvetica, sans-serif;
	--tbl-brk: 536px;
}
*, *::before, *::after { /* === resets === */
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	scroll-behavior: smooth;
}
body {
	font-family: var(--ff-main);
	font-size: 62.5%;
}
h1, h2, h4, h5 {
	font-family: "Franklin Gothic Bold", "Arial Black", "sans-serif";
	text-transform: uppercase;
}

h1 {
	font-size: 2.2em;
	font-weight: 800;
	text-wrap: balance;
}
h2 {
	font-size: 2em;
	color: var(--clr-red);
	padding-bottom: 8px;
}
h3 {
	margin-top: .75em;
	font-size: 1.8em;
	color: var(--clr-red);
	font-weight: 900;
}
h4 { /* used for tech data heading */
	text-align: left !important;
	font-size: 1.4em;
	clear: both;
	margin: 11px 0 6px 0;
	color: var(--clr-red);
}
h5 {
	font-size: 1.4em;
	margin-top: 1.3em;
}
a {
	color: var(--clr-red);
	text-decoration: none
}
a:hover, a:focus {
	color: #444;
	text-decoration: underline;
}
/* a:focus 
	/*outline: 2px solid var(--clr-red);*
	box-shadow: 0 0 0 2px white,
		0 0 0 4px var(--clr-red);
}
*/
p,
li{
	line-height: 175%;
	margin-top: 8px;
	hyphens: auto;
}
ul {
	margin-left: 2em;
}
li {
	font-size: 1.4em;
}
/*==============================================*/
#stage {
	width: 100%;
	max-width: var(--site-mw);
	margin: 0 auto;
}
/*====================      header section      ==========================*/
header {
	position: relative; /* to keep ppe logo within the ite boundary */
	background: #fff;
	font-size: 120%
}
header .always {
	position: fixed;
	top: 0;
	width: 100%;
	background: white;
	z-index: 200
}
.h-top {
	display: block;
	background: var(--clr-grey-lt);
	padding: 6px 0 8px;
	margin: 0 auto;
}
.h-top p {
	text-align: right;
	margin: 0 auto;
	padding-right: 1em;
}
.h-top span {
	margin-left: 2em;
}
header .h-bot {
	max-width: 1200px;
	margin: 0 auto;
	text-align: right;
	padding: 3px 1em 6px 0;
	background: white;
}
header .h-bot {
	margin-top: 2px;
}
.h-bot p {
	margin: 0 0 4px 0;
}
header .h-bot a {
	color: black;
	text-decoration: none
}
header .h-bot span {
	float: left;
}
header .h-bot span img {
	height: 90px
}
.icon { /* ---- flags? and phone/email icons --- */
	position: relative;
	top: 5px;
}
/*========    top horizontal nav bar    =================*/
nav {
	z-index: 200;
}
nav ul {
	display: flex;
	align-items: stretch;
	list-style: none;
}
nav ul li {
	position: relative;
	padding: 1em;
	margin: 0 2px;
	justify-content: center;
	font-family: Montserrat, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	transition: all .3s ease-in;
	border-top: 2px solid var(--nav-bg);
}
nav li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 3px;
	background: var(--clr-red);
	transform-origin: right;
	transform: scaleX(0);
	transition: transform .25s ease-in;
}
nav li:hover::before {
	transform: scaleX(1);
	transform-origin: left;
}
nav ul li a {
	color: black;
}
nav .selected {
	border-top: 3px solid var(--clr-red);
}
nav li:hover, nav li:focus {
	cursor: pointer;
	background: var(--nav-bg);
}
nav li:hover a {
	color: var(--clr-red);
	text-decoration: none;
}
/* --------------------------  button for dynamic nav    ------------------ */
#nav-toggle {
	display: none;
}
/* --------------------------  PPE logo   ------------------ */
.logo {
	position: absolute;
	top: 1em;
	left: 3em;
}
.logo img {
	width: 84px;
	height: auto;
}
/* --------------------------  home banner section ------------------ */
.top-banner {
	--viv-size: 14rem;
	position: relative;
	display: flex; /* use flex to position items within */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 250px;
	background: url("images/home/banner01.jpg");
	background-position: top right;
	color: #fff;
	font-size: clamp(2em, 4vw, 3em);
}
.viv {
	position: relative;
	max-width: var(--viv-size);
	max-width: 75%;
	top: .5rem;
	left: auto;
}
.viv img {
	width: 100%;
}
@media only screen and (min-width: 600px) {
	.viv {
		max-width: 480px;
	}
}
.top-banner p {
	text-align: center;
	font-size: 80%;
	line-height: 1;
	max-width: 60ch;
}
.top-banner h3 { /* --- need a drop shadow on this text if it stays red */
	margin-top: .25em;
	font-size: 90%;
	font-weight: 800;
	color:#ff4848;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.897);
}
.page__url {
	margin-bottom: 3em;
	width: 75vw;
	font-weight: 900;
	font-size: 1.8rem !important;
	line-height: 135% !important;
	text-transform: capitalize;
}
.ss-logo {
	position: absolute;
	top: var(--mg-ss);
	right: calc(var(--mg-ss)*3);
	opacity: .9;
}
.ss-logo img {
	width: 150px;
	height: auto;
}
.main-strap, .main-strap2 {
	font-family: Times, Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
}
.main-strap {
	margin-top: 2.5rem;
	text-transform: uppercase;
	font-size: 115% !important;
	font-weight: bold;
	text-align: center;
	letter-spacing: .0625em;
	color: var(--clr-accent);
	/*text-shadow: 2px 2px 1px rgba(255,255,255,.75);-- needed if text is red */
}
.main-strap2 {
	position: relative;
	text-transform: uppercase;
	font-size: 95% !important;
	font-weight: bold;
	padding-top: 12px;
}
.main-strap2 a {
	color: #FFE84D;
	transition: all .25s ease-in;
}
.main-strap2 a:hover {
	text-decoration: none;
	color: #FFF;
}
.main-strap2::before {
	content: '';
	position: absolute;
	bottom: 0;
	width: 100%;
	transform: scaleX(0);
	transform-origin: right;
	height: 2px;
	background: white;
	transition: transform .25s ease-in;
}
.main-strap2:hover::before {
	transform: scaleX(1);
	transform-origin: left;
}
/*-------------------------------*/
/*-----   hamburger icon   ------*/
/*-------------------------------*/
.nav-toggle { /* checkbox */
	display: none
}
.nav-toggle:checked ~ nav {
	display: block;
	transform: scale(1, 1);
}
.nav-toggle-label { /* hamburger */
	position: absolute;
	top: 1em;
	left: 0;
	margin-left: 1em;
}
.nav-toggle-label:hover {
	cursor: pointer;
}
.nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after {
	display: block;
	background: black;
	height: 3px;
	width: 2em;
	border-radius: 2px;
	position: relative;
}
.nav-toggle-label span::before, .nav-toggle-label span::after {
	content: '';
	position: absolute;
}
.nav-toggle-label span::before {
	bottom: 6px;
}
.nav-toggle-label span::after {
	top: 6px;
}
.nav-toggle-label:hover span {
	background: var(--clr-red);
}
.nav-toggle-label:hover span::before {
	background: var(--clr-red);
}
.nav-toggle-label:hover span::after {
	background: var(--clr-red);
}
/* -------------==================  moving CSS ticker   ==================--------- */
#tick {
	position: relative;
	margin: auto;
	color: #fff;
	text-transform: uppercase;
	overflow: hidden;
}
#tickhead {
	position: absolute;
	top: 0;
	text-align: center;
	font-size: 140%;
	font-weight: 800;
	padding: 6px 0 6px 12px;
	background: var(--tick-accent);
	z-index: 2;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}
#tickhead::after { /* the triangle on the title */
	content: '';
	width: 0;
	position: absolute;
	border-width: var(--tick-size);
	border-style: solid;
	top: 0;
	z-index: -1;
	border-color: var(--tick-accent) transparent transparent transparent;
	right: calc(var(--tick-size) * -1);
}
#tickhead::before {
	content: 'Recent Clients in:';
}
.inner { /* container for the scrolling text */
	position: relative;
	background: #e40809;
	padding: 1px 0;
	z-index: 1;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, .35);
}
.inner ul {
	padding: 2px 0;
	list-style: none;
	white-space: nowrap;
	zoom: 1;
	position: relative;
	z-index: 20;
}
.inner li {
	font-size: 160%;
	font-weight: bold;
	letter-spacing: 0.15em;
	margin: 0 1em;
	padding: 0 1em;
	border-right: 2px dotted rgb(255, 255, 255);
	text-shadow: 2px 1px 0 black;
	display: inline;
}
.trendscontent {
	position: absolute;
	width: 150%;
	margin: 0;
	transform: translateX(100%);
	animation: var(--tick-dtls);
}
@keyframes moving {
	0% {
		transform: translateX(100%);
	}
	100% {
		transform: translateX(-100%);
	}
}


/*#nav {
    padding: 4px
}
#nav h2 {
    margin-top: 8px;
    color: #d00
}
#nav ul {
    list-style: none;
    font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
    margin-top: 8px
}*/
/* =================    nav_bar   ================== */
/* ----------------  left-hand product nav ---------- */
/* ================= none home page layouts ====== */
/*==============================================*/

#main { /* ##############---------------  main content flex area - #nav_bar & #content   --------------######## */
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	margin: 0 auto;
	max-width: var(--site-mw);
}
#content {
	flex: 1 1 72%;
	min-width: 45ch;
	padding: 1.5em 4em 1em 1em;
	border-left: 1px solid #fdd;
}
#nav_bar {
	flex: 1 1 25%;
}
/* ##############---------------  main content flex area - #nav_bar & #content   --------------######## */
#content h1 {
	margin: 4px 230px 1em 0;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: .5em 0;
}
#content p {
	font-size: 0.85rem;
	text-align: justify;
}
#content p img { /*  --- most images in main content - half width float right    ---- */
	float: right;
	margin-left: 12px;
	padding: 2em 0 0;
	width: 48%;
	height: auto;
	object-fit: cover;
}
#content .f-l { /*  --- specific images in main content - half width float LEFT    ---- */
	float: left;
	margin-right: 12px;
}
#content p img .f-w { /*  --- specific images in main content - half width float LEFT    ---- */
	float: none;
	width: 99%;
}
#content p img:before {
	content: url('images/overlay.png');
	float: right;
	z-index: 100;
	border: 1px solid red;
	position: relative;
}
#content img { /* images NOT in a paragraph */
	width: 100%;
}
#content .c-b { /* semi -headings */
	clear: both;
	text-transform: capitalize;
	font-weight: 800;
}
#content .f-w { /* full width */
	width: 100%;
}
#content li {
	font-size: 1.2em;
	list-style-position: inside;
}
#content em {
	font-size: 0.9em;
	text-align: center;
	line-height: 1.1;
}
.prod-op-list li {
	position: relative;
	margin: 7px 0 5px 3.5em;
	color: #333;
	text-align: left;
	list-style: none;
	/*list-style-image: url('/images/icons/tick_red.jpg');*/
}
.prod-op-list li::before {
	position: absolute;
	content: url('/images/icons/ppe_bullet_red.png');
	left: -2em;
	top: 2px;
}
#pop img {
	width: 100%;
}
/* used on the enquire page */
.lj {
	/* left justified content */
	text-align: left !important;
}
.poe {
	/* product of enquiry */
	color: var(--clr-red);
}
/*==============================================*/
/* ----------------  left-hand product nav ---------- */
.glossymenu {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	margin-right: 1px;
	padding: .25em;
	text-transform: uppercase;
	background: var(--clr-red);
}
.submenu ul li {
	position: relative;
}
.glossymenu .pnew {
	color: lightblue;
}
.glossymenu .pnew::after {
	content: 'NEW';
	position: absolute;
	top: 0;
	right: -1em;
	color: #fc0;
}
.glossymenu h3 {
	display: block;
	width: 100%;
	color: white;
	padding: 16px .25em;
}
.menuitem {
	flex: 1 1 240px;
	border-bottom: 1px solid rgba(0, 0, 0, .16);
}
.n-select {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	flex: 1 1 180px;
}
.glossymenu .menuitem a {
	transition: all .3s ease-in-out;
	font: normal 1.2em Montserrat, Arial, Helvetica, sans-serif;
	border-radius: 0 0 0 0;
	color: #fff;
	display: block;
	position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
	width: auto;
	text-decoration: none;
	padding: 8px 2px 8px 8px;
	margin-left: 30px;
}
.menuitem a::before, .submenu a::before {
	content: url(/images/icons/ppe_bullet_w.png);
	position: absolute;
	left: -25px;
	top: 4px;
	transition: all 1s ease-in-out;
	transform: rotateX(0deg);
}
.submenu a::before {
	top: 0;
	transition-duration: .75s;
	transform: rotate(0deg);
}
.menuitem a:hover::before { /* ----- make the cog rotate on hover ---  */
	transform: rotateX(180deg);
}
.submenu a:hover::before { /* ----- make the cog rotate on hover ---  */
	transform: rotate(180deg);
}
.glossymenu .menuitem:active {
	color: #5772B7;
}
.glossymenu .menuitem a {
	transition: all .3s ease-in-out;
}
.glossymenu .menuitem a:hover { /* ----- main hover state ---  */
	color: #fe8;
	background: rgba(0, 0, 0, .4);
}
.glossymenu div.submenu { /*DIV that contains each sub menu*/
	background: #E30001;
}
.glossymenu div.submenu ul { /*UL of each sub menu*/
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.glossymenu div.submenu ul li {
	padding-left: 36px;
}
.glossymenu div.submenu ul li span {
	display: block;
	margin: 0 1.5em 0 46px;
	padding: 6px 0 0;
	font-weight: bold;
	font-size: 110%;
	letter-spacing: 140%;
	color: antiquewhite;
	border-bottom: 1px solid antiquewhite;
}
.glossymenu div.submenu ul li a {
	display: block;
	font: normal 1.1em Montserrat, Arial, Helvetica, sans-serif;
	color: #eee;
	text-decoration: none;
	margin: 1px 1.5em 0 1em;
	padding: 4px 4px 4px 10px;
	background: rgba(80, 80, 80, .2);
	border-bottom: 1px solid rgba(0, 0, 0, .4);
	transition: all .3s ease-in-out;
}
.glossymenu div.submenu ul li a:hover { /* sub-section hover ---- */
	color: #Fd4;
	background: rgba(0, 0, 0, .3);
}
.glossymenu div.submenu ul li ul li a {
	padding-left: 15px;
	color: #fdd;
	font-size: 0.9em;
}
.glossymenu div.submenu ul li ul li:last-of-type {
	margin-bottom: 12px;
}
.submenu a:hover {
	color: #fff;
}
.m-icon {
	float: left;
	padding: 9px 6px 0 4px
}
/*==============================================*/
#h_main {
	margin: 0 auto;
	max-width: var(--site-mw);
}
.h-content { /* ---- home page content */
	display: flex;
	flex-wrap: wrap;
	gap: 1.5em;
	margin-bottom: 24px;
}
.h-content p,
.h_content li {
	font-size: 1.4em !important;
	text-align: justify
}
.h_container {
	width: 46%;
	padding: 1%;
	margin: 1%;
}
.h_item {
	background: rgba(0, 0, 0, .1);
	padding: 1em;
	flex: 350px;
}
.h_item h2 {
	text-align: center;
}
.h_item p {
	line-height: 140%;
	margin-top: 8px
}
.h_item .h_img { /* need to figure out why the image doesn't shrink into its container!!? */
	width: 100%;
	object-fit: cover;
}
#content p .img-ctr {
	width: 50%;
	float: left;
	margin: 0 auto;
}
.master {
	flex-shrink: 1;
	background: white;
}
.slave {
	flex-shrink: 4;
	background: white;
}

/*------  home page product categories  -----------*/
.prod-cats {
	display: flex;
	flex-wrap: wrap;
	gap: .75em;
	margin-top: 12px;
	/*justify-content: space-around;*/
}
.prod-cats a {
	font-weight: bold;
}
.prod_li {
	flex: 1 1 180px;
	background: rgba(0, 0, 0, .1);
	padding: .5em;
	font-family: Montserrat, Srial, sans-serif;
	text-align: center;
	font-size: 1.25em;
	text-transform: uppercase;
	list-style: none;
}
.prod_li a {
	margin-top: 8px;
}
.h-lower-section {
	clear: both;
}
.h-thumb { /* prod cat imgs 
    width: 130px; */
	border-radius: .75em;
	width: 100%;
	object-fit: cover;
}
#index, #sub-index {
	list-style: none;
	text-align: center;
}
#index a {
	text-wrap: balance;
}
.h-ul { /*  sub sections on the home page */
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	gap: 1em;
	margin-top: 18px;
	list-style: none;
}
.h-ul li {
	flex: 1 1 150px;
	align-content: space-between;
	font-family: Montserrat, Srial, sans-serif;
	font-size: 1.2em;
	letter-spacing: .5px;
	text-transform: uppercase;
	text-align: center;
	
	background: rgba(0, 0, 0, .1);
	border-radius: .5em;
	width: 100%;
	padding: .5em;
	transition: all .4s ease-in-out;
}
.h-ul li:hover {
	transform: translate(.3em, -.3em);
}
.h-ul li:hover a {
	color: #333;
}
/*===========================      MAIN PRODUCT LIST SECTION - our_products/default.asp         ==============================*/
.product-list ul {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
	gap: 1em;
}
.product-list li {
	position: relative;
	flex-basis: 200px;
	flex-grow: 1;
	display: block;
	list-style: none !important;
	margin: 0 !important;
	padding: 1em;
	border-radius: 1em;
	transition: all 0.25s ease-in-out;
	background: var(--clr-thin);
	z-index: 1;
}
.product-list li::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0%;
	border-radius: 1em;
	background: var(--clr-hilite);
	transition: all 0.3s ease-in-out;
	z-index: -1;
}
.product-list li:hover::before {
	height: 100%;
}
.product-list a {
	font-size: 1.15em;
	font-family: Montserrat, Arial, sans-serif;
	color: #444;
	text-decoration: none;
	text-transform: uppercase;
}
.product-list a:hover, .product-list li:hover a {
	color: #000;
	text-decoration: underline;
}
.product-list li:hover {
	cursor: pointer;
	/* background: var(--clr-red); */
}
.prod-item {
	text-align: center;
}
.prod-item img {
	width: 100%;
	object-fit: cover;
	margin-bottom: 8px;
}
/*========================            PRODUCT LIST SECTION on main cat home pages        ===========================*/
#index { /* on the ul */
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	gap: .75em;
	margin-top: 2em;
}
.indexbox {
	flex: 1 1 180px;
	position: relative;
	text-align: center !important;
	border: 1px solid #ccc;
	border-radius: 1em;
	margin-bottom: 1em;
	padding: 14px 6px 0;
	overflow: hidden;
	background: rgba(199, 199, 199, .15);
}
.indexbox:hover {
	border-color: var(--clr-red);
	background: rgba(250, 99, 99, .1);
}
.indexbox a {
	font-family: Montserrat, Arial, sans-serif;
	text-transform: uppercase;
	color: #444;
	text-decoration: none;
	font-size: 1.15em;
	margin: 12px auto;
}
.indexbox a img {
	/* ------------- grey out images - until mouseover   -------- */
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
	filter: gray; /* IE6-9 */
	-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
	filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
	/* and make it fade  */
	transform-origin: top;
	transition: all 0.4s ease-in-out 0s;
	margin-top: 12px;
	border-radius: .5em;
	max-width: 350px;
}
/* Disable grayscale on hover */
.indexbox a img:hover {
	-webkit-filter: grayscale(0);
	filter: grayscale(0); /* Microsoft Edge and Firefox 35+ */
	filter: none;
	transform: scale(1.2);
}
.indexbox a:hover {
	color: var(--clr-red);
}
/*.indexbox a img:hover {
    border: 2px solid #d11;
}*/
.indexbox img {
	width: 100%;
	object-fit: cover;
}
ul #index:nth-child(even) li { /* ---- what's this ?? ----*/
	margin-right: 0;
	background: #ddd;
}
.inew { /* ############  ANYTHING NEW ON A CATEGORY PAGE ########   */
	border: 2px solid red;
	/*background: #e7ffFF;*/
}
.inew::after {
	content: 'NEW!';
	position: absolute;
	font-family: Arial, Sans-serif;
	font-size: 3em;
	font-weight: bold;
	color: red;
	text-shadow: 1px 1px 0 black;
	top: 70%;
	left: 30%;
}
#sub-index {
	display: flex;
	flex-wrap: wrap;
}
.indexbox2 {
	flex: 1 1 160px;
	margin: 10px .5% 10px 0;
	padding: 6px .5%;
	font-size: 1.2em;
	line-height: 1;
	color: #666;
	text-align: center !important;
	border-radius: .75em;
	transition: all 0.25s ease-in-out 0s;
}
.indexbox2 a {
	font-weight: bold;
	color: var(--clr-red);
	text-align: center !important;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 110%;
	margin: 0 auto;
}
.indexbox2 a img {
	border: 2px solid #fff;
	border-radius: 1em;
	filter: gray; /* IE6-9 */
	filter: grey; /* IE6-9 */
	-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
	filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
	transition: all 0.5s ease-in-out 0s;
}
/* Disable grayscale on hover */
.indexbox2 a img:hover {
	-webkit-filter: grayscale(0);
	filter: none;
}
.indexbox2:hover {
	background: #d8d8d8;
}
.indexbox2 a:hover {
	color: #111
}
.indexbox2 a img:hover {
	border: 2px solid #d11;
}
.indexbox2 img {
	width: 100%
}
.img-wd100 {
	width: 99%;
	float: none
}
.carousel p {
	padding: .5em;
}
.carousel p:nth-of-type(even) { /* =====================   AUTO CAROUSEL CUT-UP   =============================== */
	/*background: #eee;*/
}
/* tech. spec. lists  ---- */
.ts-list {
	margin-left: 3em;
}
.ts-list p {
	padding: 0 1em 0 1.5em;
	width: 40ch;
}
.ts-list p:nth-last-of-type(odd) {
	background: #eee;
	border-left: 1px solid var(--clr-red);
}
.ts-list span {
	float: right;
}
/* -----=================   tables used for figures/ tech. data    ====================== ---  */
table { /* usually last thing in content */
	display: block;
	width: 99%;
	margin: 10px 0;
	background: rgb(233, 233, 233);
	border: 1px solid #999;
	border-radius: .5em;
}
tbody {
	width: 100%;
	display: table;
}
tr {}
tr:nth-of-type(odd) {
	background: #e8e8e8;
}
th, td {
	padding: 4px;
	font-size: 1.1em;
}
th {
	background: #eee;
	color: var(--clr-red);
	border-bottom: 1px solid #bbb;
}
th:nth-of-type(odd) {
	background: #d8d8d8;
	border-bottom: 1px dotted #999;
}
tr:nth-of-type(odd) {
	background: #ddd;
	border-bottom: 1px dotted #999;
}
/* NOW TO 'TRY TO' MAKE THE TABLES WORK ON SMALLER SCREENS 

@media only screen and (max-width: 738px) {
	table, thead, tbody, th, tr, td {
		display: block;
	}
	table {
		width: 99%;
	}
	tr {
		position: absolute;
	}
	td {
		position: relative;
		
	}
	td::before {
		position: absolute;
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
	}
}
*/
/*===============================================================================
==========================         FOOTER          ==============================
=================================================================================
*/
footer {
	width: 100%;
	clear: both;
	text-align: center;
	color: #fff;
	font-size: 1.4em;
	background: var(--clr-footer);
}
footer h4 {
	color: white;
}
.footer-container {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	width: 100%;
	font-size: 80%;
	padding: 0
}
.foot_note {
	font-size: 14px
}
.footer-nav { /* ----------- footer link list -----------*/
	flex-grow: 1;
	flex-basis: 45em;
	padding: 0 1%;
}
.footer-nav .links {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	justify-content: space-around;
	padding-bottom: 16px;
}
.footer-nav a {
	position: relative;
	z-index: 1;
	flex: 1 1 160px;
	text-decoration: none;
	color: #fff;
	padding: 7px;
	text-align: left;
	border-radius: 0 1.5em 1.5em 0;
	background: rgba(0, 0, 0, .2);
	transition: all 300ms ease-in-out;
}
.footer-nav a:visited, .footer-nav a {
	color: #eee;
}
.footer-nav a:hover {
	color: #fd5;
	text-decoration: underline;
}
.footer-nav a::after { /* ---- fancy, subtle mouseover for footer links ----- */
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 0%;
	height: 100%;
	border-radius: 0 1.5em 1.5em 0;
	background: rgba(0, 0, 0, .2);
	z-index: -1;
	transition: width .3s ease;
}
.footer-nav a:hover::after {
	width: 100%;
}
/* this dont work??? ---.footer-nav a:before {content: "» ";} */
.footer-addr { /* ------------  footer contact address  ---------- */
	flex-grow: 0; /* ========= breaks at 800px  ===== */
	flex-basis: 25em;
	padding: 0 .75em;
	text-align: left;
	background: rgba(0, 0, 0, .4);
}
.footer-copy {
	clear: both;
	font-size: 85%;
	padding: 6px 0 10px 0;
	background: black;
	margin: 0;
}
.caddr1 {
	font-size: 80%;
	display: block;
	width: 56%;
	margin: .5%;
	float: left
}
.caddr2 {
	display: block;
	width: 40%;
	margin: .5%;
	float: right;
	text-align: left;
}
/* ============== contact form   ================= */
#cfrm fieldset, #cfrm legend {
	border: 1px solid #bbb;
}
#cfrm fieldset {
	padding: 8px;
	margin-top: 12px;
	background: #f5f5f5;
}
#cfrm legend {
	padding: 6px 24px;
	margin-left: 10px;
	font-size: 1.2em;
	font-weight: bold;
	background: #eee;
}
#cfrm label {
	float: left;
	width: 28%
}
#cfrm input, #cfrm textarea, #cfrm select, #cfrm submit {
	font-family: var(--ff-main);
	font-size: 1.1em;
	float: left;
	width: 58%;
	padding: 7px 2px
}
#cfrm p {
	clear: both;
	line-height: 250%
}
input[type=text], textarea {
	transition: all 0.30s ease-in-out;
	outline: none;
	padding: 3px 0px 3px 3px;
	margin: 5px 1px 3px 0px;
	border: 1px solid #DDDDDD;
}
input[type=text]:focus, select:focus, textarea:focus {
	box-shadow: 0 0 5px rgba(255, 12, 12, 1);
	padding: 3px 0px 3px 3px;
	margin: 5px 1px 3px 0px;
	border: 1px solid rgba(255, 0, 0, 1);
}
.m-add {
	margin-top: 3em;
	padding: 1em;
	background: #efefef;
}
/* ============================== MISC STYLINGS    =========================== */
/*#blow_up {position:fixed;top:50px;left:10px}*/
.MagicZoomPup {
	border: 2px solid #669;
	/*background: #f2f2f2;*/
	cursor: move;
}
#pop {
	position: relative;
	top: 0;
	left: 0;
	z-index: 10
}
#pop_img {
	position: relative;
	top: 0;
	left: 0;
	z-index: 100;
	border: 1px dotted #ddd
}
.fleft {
	float: left
}
.clearboth {
	clear: both
}
.w100 {
	width: 100% !important;
}
.g-recaptcha {
	margin-left: 28%
}
/*------   highlight for the download link   ------*/
.hilite {
	font-size: 120%;
	border: 1px solid #778;
	padding: 24px 18px;
	margin: 10px;
	border-radius: .4em;
	background: #CDDFED
}
.fb-like {
	float: right;
	text-align: right;
	max-width: 250px;
	overflow: hidden;
}
#more-link {
	margin: 2px auto;
	font-size: 2.2em !important;
	text-transform: uppercase;
	text-align: center
}
/*==================================================*/
/*===========      CATALOGUE styles    =============*/
/*==================================================*/
#catalogue li {
	width: 31%;
	margin: .5%;
	list-style: none;
	float: left;
	padding: .5%;
	border: 1px solid #787E98;
	min-height: 3.5em;
	text-align: center;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	background: #D9DBEF
}
#catalogue li a {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	color: #22538E
}
#catalogue li em {
	color: #334666
}
.cat_no {
	font-size: 75%;
	color: #515151
}
.cat_li:hover {
	cursor: pointer;
	background: #91a4c9 !important
}
.cat_li:hover a {
	color: black !important;
	text-decoration: none !important;
	font-weight: bold
}
.cat_a a {
	padding: 5px 12px;
	border: 1px solid #3C4967;
	margin: 0 13px;
	background: #DEE7F1;
	text-align: center;
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;
}
.cat_a a:hover {
	cursor: pointer;
	background: #B5BDD4;
	text-decoration: none;
	color: black
}
.pdet h1 {
	margin-top: 1.5em
}
.pdet h1 span {
	color: #c9cBdF;
	font-size: 85%;
	font-weight: normal
}
.pdet h1 small {
	color: #939393;
	font-size: 50%
}
.pdet h3 {
	margin-top: 2em
}
.pdet p {
	line-height: 200%
}
.diagram {
	max-width: 50%;
	float: right;
	margin-left: 10px;
	padding-top: 4.5em
}
.zimg {
	transition: all 0.5s ease-in-out 0s;
}
.cat-req {
	margin: 24px .75em 18px;
	padding: .75em;
	border: 1px solid #ccc;
	border-radius: .73em;
	background: #000;
	font-size: 1.2em;
	text-align: center
}
.cat-req a {
	font-size: 120%;
	color: white;
	text-transform: capitalize;
	text-decoration: none
}
.cat-req div {
	width: 100%;
	overflow: hidden
}
.cat-req img {
	width: 100%
}
.cat-req:hover {
	background: var(--clr-red);
	cursor: pointer
}
.cat-req:hover a {
	color: #fd6
}
.cat-req:hover .zimg {
	transform: scale(1.02);
	transform-origin: top;
}
.img-left {
	float: none !important;
	margin-left: 12px
}
.img-50 {
	max-width: 46% !important
}
/* ----------------     ENQUIRY BUTTON    -----------------------  */
#enq-btn {
	position: relative;
	float: right;
	margin: 6px 10px 0 10px;
	width: min(180px, 50vw);
	border-radius: .4em;
	border: 1px solid #BC1012;
	background: #F80409;
	font-family: Montserrat, Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-align: center;
	font-size: 120%;
	padding: 8px 12px;
	box-shadow: 0 0 .4em rgba(0, 0, 0, .4);
	overflow: hidden;
	transition: 1s all ease-in-out;
	z-index: 1;
}
#enq-btn a {
	color: white;
	text-decoration: none;
	font-weight: bold;
}
#enq-btn::before {
	content: '';
	position: absolute;
	background: #222;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 0;
	z-index: -1;
	transform: translate(-50%, -50%) rotate(-45deg);
	transition: .45s all ease;
}
#enq-btn:hover::before {
	height: 420%;
}
#enq-btn:hover a {
	color: #FFFEC0;
}
.img-holder {
	float: right;
}
.img-caption {
	font-size: .85em;
	font-style: italic;
	float: right;
}
.product-list li img {
	height: 156px;
	max-width: 96% !important
}
/*==================================================*/
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
/*##############################################################*/
/*##############################################################*/
/*##############################################################*/
/*#################     EXPERIMENT         #####################*/
/*##############################################################*/
/*##############################################################*/
/*##############################################################*/
.mouseoverBox li {
	position: relative;
	z-index: 1;
}
.mouseoverBox li::before {
	/* will drop down hilite */
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: var(--clr-hilite);
	border-radius: .5em;
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform .25s ease;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, .25);
	z-index: -1;
}
.mouseoverBox li:hover::before {
	transform: scaleY(1);
	transform-origin: top;
}
/*##############################################################*/
/*##############################################################*/
/*##############################################################*/
/*=============    ##################    video tags    ################    ==================*/
video {
	position: relative;
	margin-top: 10px;
	width: 100%;
	height: auto;
}
video:hover .mp4::after { /* hide the message after its been 'seen'   */
	display: none;
	opacity: 0;
}
.mp4 { /*   add this tag above all videos ?   */
	position: relative;
}
.mp4::after { /* add a prompt - don't know how to make it go away tho??  */
	position: absolute;
	content: "Click or tap to play Video";
	display: block;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	color: white;
	font-size: 1.4em;
	font-weight: 300;
	width: 100%;
	height: auto;
	top: 14px;
	left: .3em;
	z-index: 20;
}
#contvid > * {
	z-index: 10;
	position: relative;
}
/*==================================================*/
/*==================================================*/
/*==================================================*/
/*==================================================*/
@media only screen and (max-width: 830px) {
	/* ---------------- contact page - breaks at 830px   ---------- */
	.footer-addr { /* ------------  footer contact address  ---------- */
		flex-grow: 1;
	}
	.caddr1, .caddr2 {
		width: 100%;
	}
	#cfrm label, #cfrm input, #cfrm textarea, #cfrm select, #cfrm p {
		width: 100%;
		float: none;
		text-align: left !important;
	}
	#cfrm input, #cfrm select {
		padding: .5em;
	}
	.g-recaptcha {
		margin-left: .25em;
	}
}
/* -----------  mobile nav  ----------  @ more than 600 px -----------*/
@media only screen and (min-width: 600px) {
	.nav-toggle-label {
		display: none
	}
	nav {
		display: block;
	}
}
/* -----------  mobile nav  ---------- */
@media only screen and (max-width: 600px) {
	#tickhead::before {
		content: 'Clients in:';
	}
	#content { /* drop the right padding from 4em cos the FB/Twit bar is gone */
		padding-right: 1em;
	}
	nav {
		position: relative;
		display: none;
	}
	nav ul {
		position: absolute;
		top: -7em;
		left: .25em;
		background: white;
		flex-wrap: wrap;
		border: 2px solid red;
		box-shadow: 0 0 2em rgba(0, 0, 0, .4);
	}
	nav li {
		width: 100%;
		padding: .75em 0 !important;
	}
	nav .selected {
		border: none;
		background: rgba(255, 0, 0, 0.25);
	}
	.ss-logo {
		top: auto;
		bottom: var(--mg-ss);
		right: var(--mg-ss);
		margin-right: 2em;
	}
	.top-banner .page__url {
		justify-content: flex-start;
		align-content: flex-start;
	}
	.glossymenu h3 {
		font-size: 1.3em;
	}
	.product-list li {
		width: 100%;
		height: auto;
		float: none;
	}
	.product-list li img {
		margin-top: .25em;
		width: 98%;
		height: auto;
	}
	#content p img {
		float: none;
		margin-left: 0;
		width: 100%;
	}
	.submenu ul {
		display: flex;
		flex-wrap: wrap;
	}
	.submenu ul li {
		flex: 1 1 50%;
		font-size: 90%;
	}
	.n-select li a::before { /* make sub menus smaller on mob.  */
		content: url(/images/icons/ppe_bullet_ws.png);
		height: 12px !important;
		width: 12px !important;
		left: -15px;
		top: 6px;
	}
}
/* image wrap section 
===================== */
.recep-img { /* on auto-reception system */
	float: left !important;
	shape-outside: polygon(0px 0px, 6px 95.28%, 59.85% 94.12%, 60.29% 70.15%, 101.17% 69.13%, 100.95% 30.93%, 59.32% 30.95%, 59.35% 4px);
	margin-right: 3rem;
}
.caption {
	text-align: center !important;
	margin-top: 0;
}
.hilite strong {
	color: red !important;
}

/*#####################################################################################*/
/*  ==== CSS OVERRIDES to address the Constant Contact design issues that we have ==== */
/*#####################################################################################*/

.ctct-form-footer-img { /* reset the Const Contact logo */
	margin: 0 !important;
	padding: 4px 10px !important;
	float: none !important;
	width: 108px !important;
}
.ctct-flyout-inner {    /* change the form's width  */
	max-width: 420px !important;
}
/*  make the form fields more compact vertically  */
.ctct-form-label {
	margin-bottom: 3px !important;
/*	font-weight: 500 !important;*/
	font-size: 12.5px !important;
}
.ctct-form-element { /* input boxes */
	padding: 3px 10px !important;
	height: 32px !important;
}
/*  highlight the disabled product name field  */
.ctct-form-element:disabled {
  background: #eee !important;
	color: indianred !important;
}
.ctct-form-header {
	margin-bottom: 0 !important;
	line-height: 1.1 !important;
}
.ctct-form-header span {
	font-size: 80%;
	color: var(--clr-red);
}
.ctct-form-text {
	margin-bottom: 6px !important;
}
div.ctct-form-field {
	margin-bottom: 10px !important;
}
/*--- this doesn't work ?? ---*/
.ctct-form-container,
.form_4 .ctct-flyout-content,
.ctct-flyout-wrapper .ctct-flyout-is-visible .ctct-flyout-content {
	fill: hsla(0,21%,84%,0.82) !important;
	background: hsla(0,21%,84%,0.82) !important;
}
.ctct-form-text {
	font-size: 85% !important;
}