﻿.mainNav .mDD@charset "utf-8";
/* CSS Document */

/* HTML5 */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { display: block; }

/* RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, a, b, i, q, s, strong, em, big, small, 
strike, sub, sup, samp, ins, kbd, dl, dt, dd, tt, ol, ul, li, img, hr,
var, center, cite, code, del, dfn, abbr, acronym, address, blockquote, pre, 
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header,
hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 100%;
	vertical-align: baseline;
}

body { line-height: 1; }

a { text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus, a:hover, a:active { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
em { font-style: italic; }

ol, ul { list-style-type: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

td { vertical-align: top; }

small { font-size: 85%;  }
sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

img {
	border: 0;
	max-width: 100%;
}

input, select, textarea { font-size: 1em; box-sizing: border-box; vertical-align: baseline; }
textarea { overflow: auto; resize: vertical; vertical-align: top; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; }
button, input { line-height: normal; }

.clearfix:after,
ul.swatch:after {
	height: 0;
	clear: both;
	content: ".";
	display: block;
	line-height: 0;
	visibility: hidden;
}

.clearFloat {
	height: 0;
	clear: both;
	overflow: hidden;
}

/* -------------------------------------------------------------------------------------------------------------------- *\
													START MAIN STYLESHEET
\* -------------------------------------------------------------------------------------------------------------------- */

body {
	color: #444;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
	font: 0.8em/1.5em "MyriadWebProRegular", "Myriad Pro", Tahoma, Geneva, sans-serif;
}
	
/* ----------------- *\
	HEADINGS / TYPE
\* ----------------- */

@font-face {
    font-family: 'MyriadWebProRegular';
    src: url('../scripts/fonts/myriadwebpro.eot');
    src: url('../scripts/fonts/myriadwebpro.eot') format('embedded-opentype'),
         url('../scripts/fonts/myriadwebpro.woff') format('woff'),
         url('../scripts/fonts/myriadwebpro.ttf') format('truetype'),
         url('../scripts/fonts/myriadwebpro.svg#MyriadWebProRegular') format('svg');
}

@font-face {
    font-family: 'MyriadWebProBold';
    src: url('../scripts/fonts/myriadwebpro-bold.eot');
    src: url('../scripts/fonts/myriadwebpro-bold.eot') format('embedded-opentype'),
         url('../scripts/fonts/myriadwebpro-bold.woff') format('woff'),
         url('../scripts/fonts/myriadwebpro-bold.ttf') format('truetype'),
         url('../scripts/fonts/myriadwebpro-bold.svg#MyriadWebProBold') format('svg');
}

@font-face {
	font-style: normal;
	font-weight: normal;
    font-family: 'ardleyshand';
    src: url('../scripts/fonts/02469_ardley_h-webfont-.eot');
    src: url('../scripts/fonts/02469_ardley_h-webfont-d41d.eot?#iefix') format('embedded-opentype'),
         url('../scripts/fonts/02469_ardley_h-webfont-.woff') format('woff'),
         url('../scripts/fonts/02469_ardley_h-webfont-.ttf') format('truetype'),
         url('../scripts/fonts/02469_ardley_h-webfont-.svg#ardleyshandregular') format('svg');
}

h1 { font-size: 2.3em; }

h1, h2, h3, h4, h5, h6 {
	line-height: 1em;
	font-size: 1.95em;
	padding-bottom: .6em;
}

h3, h4, h5, h6 {
	font-size: 1.7em;
	line-height: 1.2em;
	padding-bottom: .7em;
}

h4, h5, h6 { font-size: 1.4em }

h5, h6 { font-size: 1.2em; }

p {
	line-height: 1.6em;
	padding-bottom: 1.2em;
}

p.small { font-size: .9em; font-weight: normal !important; }

strong { font-family: "MyriadWebProBold", "MyriadWebProRegular", "Myriad Pro", Tahoma, Geneva, sans-serif; }

p.ardleyshand, .ecloths {
	padding-bottom: .5em;
	font: 2em "ardleyshand";
}

/* ----------------- *\
	TYPE LINKS
\* ----------------- */

a { color: #888; }
a:hover { color: #888; text-decoration: underline; }

/* ----------------- *\
	LISTS
\* ----------------- */

ol, ul { padding: 0 0 0 1em; }

ol {
	padding-left: 1.5em;
	list-style-type: decimal;
}

ol li, 
ul li {}

ul {
	padding-left: 0;
	list-style-type: none;
}

ul li {}

dl {
	clear: both;
	width: 100%;
	overflow: hidden;
	padding: 0 0 1em;
}

dl dt {
	width: 48%;
	float: left;
	clear: left;
	padding-right: 2%;
}

dl dd {
	width: 48%;
	float: right;
	text-align: right;
}

/* ----------------- *\
	FORM
	INPUT/TEXTAREA
\* ----------------- */

input, select, textarea {
	width: 100%;
	color: #535353;
	padding: 0.4em;
	font-size: 0.9em;
	background: #fff;
	border-radius: 0;
	border: 1px solid #d7d7d7;
	font: 1em "MyriadWebProRegular", "Myriad Pro", Tahoma, Geneva, sans-serif;
}

textarea { height: 128px; }
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], select, textarea { appearance: none; }
select { background: url(../images/ddl.png) no-repeat center right #fff; }
.-webkit- select { padding-right: 1.8em; }

	input:focus, select:focus, textarea:focus {
		border: 1px solid #81AB26;
		transition: 1s all linear;
	}

input[type="radio"], 
input[type="checkbox"] {
	border: 0;
	padding: 0;
	min-width: 0;
	vertical-align: sub;
	width: auto !important;
}

label {
	display: block;
	padding-bottom: 0.2em;
}

.hidden 
{
    display: none;
}

/* ----------------- *\
	IMAGES & IFRAMES
\* ----------------- */

img.left {
	float: left;
	margin-left: 0;
	margin-right: 0.5em;
}

img.right {
	float: left;
	margin-right: 0;
	margin-left: 0.5em;
}

img[src*="feefo"] { width: auto !important; }
#feefologohere img { height: auto; max-height: none !important; } 

.player, .animation {
	height: 0;
	overflow: hidden;
	position: relative;
	padding: 0 0 56.25%;
	border: 4px solid #fff !important;
}

.animation {
	padding: 0 0 57.25%;
	border: 0 !important;
}

.player iframe,
.player object,
.player embed,
.animation iframe,
.animation object,
.animation embed {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
}

iframe[name=google_conversion_frame] 
{
    display: none !important;
}

/* ----------------- *\
	MISC
\* ----------------- */

::-moz-selection { background: #81AB26; color: #fff; text-shadow: none; }
::selection { background: #81AB26; color: #fff; text-shadow: none; }

.quote ::-moz-selection { background: #fff; color: #81ab26; }
.quote ::selection { background: #fff; color: #81ab26; }

hr {
	height: 1px;
	clear: both;
	margin: 1em 0;
	display: block;
	overflow: hidden;
	border-top: 1px solid #e2e2e2; 
}

.notes { font-style: italic; }
.notes p:first-child { font-weight: bold; }

.form hr { margin: .5em 0 1.2em; }
.btn + hr { margin-top: 3.5em; }

.address { padding-bottom: 1em; }
.address p { padding-bottom: 0; }

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
	40% { transform: translateY(-30px); }
	60% { transform: translateY(-15px); }
}

.bounce { animation-name: bounce; }

@keyframes pulse {
    0% { transform: scale(1); }	
	50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.pulse { animation-name: pulse; }

.mHide { display: block; }
.mShow { display: none; }

/* -------------------------------- *\
	BEFOREs / AFTERs
\* -------------------------------- */

.languages .active:after,
.btn:after, .btn i:after, .prev:after, .next:after {
	top: 0;
	right: 2em;
	content: "";
	height: 100%;
	position: absolute;
	border-left: 1px solid #d7d7d7;
}

/* -------------------------------- *\
	GROUPED STYLES
\* -------------------------------- */

.hgroup > div, .btn, .prev, .next,
._3column > article > i, ._3column article .catalogue-product-list > i,
.discount, .total,
[class="+-"], .steps > div {
	padding: 0.4em 1em;
	border: 1px solid #d7d7d7;
	box-shadow: 0 0 0 1px #fff inset;
	background: #f1f0f0;
	background: linear-gradient(top, #fff, #f1f0f0);
	background: linear-gradient(to bottom, #fff, #f1f0f0);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f1f0f0',GradientType=0);
}

.hgroup .languages ul ul, 
nav.products ul ul {
	left: auto;
	width: 100%;
	display: none;
	z-index: 9999;
	font-size: .9em;
	position: absolute;
	box-sizing: border-box;
}

nav.products ul li:hover > ul,
.hgroup .languages ul li:hover > ul { display: block; transition: all 1s ease 1s; }

html[xmlns] nav.products ul, html[xmlns] .languages > ul, html[xmlns] .subNav.dd .msliding { display: block; }
* html nav.products ul, * html .languages > ul, * html .subNav.dd .msliding { height: 1%; }

/* -------------------------------- *\
	MAIN CONTAINER
\* -------------------------------- */

.uber {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
}

header[role="banner"],
.outerWrapper, .wrap, nav.products ul {
	margin: 0 auto;
	padding: 0 .8em;
	max-width: 1002px;
}

/* -------------------------------- *\
	HEADER
\* -------------------------------- */

header[role="banner"] {
	padding: .5em .8em;
	position: relative;
}

.logo {
	float: left;
}

	.logo img { display: block; }

	.logo a[title*="Pet"], .logo a[title*="E-Body"], .logo a[title*="E-Auto"] { display: none; }

.hgroup {
	width: auto;
	float: right;
	padding-bottom: 0.8em;
}

/*-- LANGUAGES --*/

.hgroup .languages {
	clear: both;
	width: 194px;
	float: right;
	padding: 0 .5em;
	position: relative;
	margin: -.7em 0 1.2em;
	text-transform: uppercase;
	font: 0.8em Arial, Helvetica, sans-serif;
}

	.languages .active:after { right: 2.8em; }

	.languages a:hover { text-decoration: none; }

	.hgroup .languages > ul li {
		display: block;
		position: relative;
		background: url(../images/arrowSprite.png) no-repeat right -40.5em;
	}
	
	.hgroup .languages > ul li a {
		color: #444;
		display: block;
		padding: .5em .8em;
	}
	
	.hgroup .languages ul li a {
		padding: .7em 3em .9em 3.4em;
		background: url(../images/flags/UnitedKingdom.png) no-repeat .4em 0;
	}
	
	.languages ul li a[title*="Kingdom"] { background: url(../images/flags/UnitedKingdom.png) no-repeat 0 0; }
	.languages ul li a[title*="States"] { background: url(../images/flags/UnitedStates.html) no-repeat 0 0; }
	.languages ul li a[title*="Canada"] { background: url(../images/flags/Canada.html) no-repeat 0 0; }
	.languages ul li a[title*="Zealand"] { background: url(../images/flags/NewZealand.html) no-repeat 0 0; }
	.languages ul li a[title*="Australia"] { background: url(../images/flags/Australia.html) no-repeat 0 0; }
	.languages ul li a[title*="Africa"] { background: url(../images/flags/SouthAfrica.html) no-repeat 0 0; }
	.languages ul li a[title*="Kong"] { background: url(../images/flags/HongKong.png) no-repeat 0 0; }
	.languages ul li a[title*="Austria"] { background: url(../images/flags/Austria.png) no-repeat 0 0; }
	.languages ul li a[title*="Iceland"] { background: url(../images/flags/Iceland.png) no-repeat 0 0; }
	.languages ul li a[title*="Chile"] { background: url(../images/flags/Chile.png) no-repeat 0 0; }

	.hgroup .languages ul ul {
		padding: 0;
		background: #fff;
		border: 1px solid #d7d7d7;
		box-shadow: 0 0 0 1px #fff inset;
		background: #f1f0f0;
		background: linear-gradient(top, #f1f0f0, #fff);
		background: linear-gradient(to bottom, #f1f0f0, #fff);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f0f0', endColorstr='#ffffff',GradientType=0 );
	}
	
	.hgroup .languages ul ul li { padding: 0; }
	
	.hgroup .languages ul ul li a {
		padding: .65em .8em;
		background: none !important;
	}
	
	.hgroup .languages ul ul li a:hover {
		color: #fff;
		background: #2f6081 !important;
	}

.hgroup .search {
	padding: 0;
	float: left;
	clear: right;
	width: 250px;
	overflow: hidden;
	margin-right: 1em;
}

	.search input, .search a {
		 border: 0;
		 float: left;
		 padding: .6em .5em;
	}

	.search input[type="text"] {
		width: 85%;
		padding: .65em .5em .65em 2em;
		border-right: 1px solid #d7d7d7;
		background: url(../images/searchIcon.png) no-repeat 0.5em center #fff;
	}
	
	.search input[type="submit"], .search a {
	    display:block; 
		width: 15%;
		height: 32px;
		padding: 0px;
		cursor: pointer;
		background: url(../images/btnArrow.png) no-repeat center;
	}
	
	.ie8 .search input[type="submit"], .ie8 .search a { height: 32px; }
	
.hgroup .basket {
	padding: 0;
	float: right;
}
	
.hgroup .basket > div a {
	display: block;
	padding: 0.5em 1em;
}

.hgroup .basket > div:first-child { float: left; }

.hgroup .basket > div:first-child a {
	color: #323232;
	padding-left: 2.6em;
	background: url(../images/basketIcon.png) no-repeat 0.6em center;
}

.basket .checkout {
	float: right;
	box-shadow: 1px 0 0 #fff inset;
	border-left: 1px solid #d7d7d7;
}

.hgroup .basket .checkout a {
	color: #bcbcbc;
	padding-right: 2em;
	background: url(../images/btnArrow.png) no-repeat center right;
}

.mobBar { display: none; }

.menuIcon {
	float: right;
	display: none;
	cursor: pointer;
	background: #316386;
	border: 1px solid #1b405a;
	box-shadow: 0 0 0 1px #fff inset;
}

	.menuIcon a {
		width: 50px;
		height: 25px;
		display: block;
		padding: .5em 1em;
		text-indent: -999em;
		background: url(../images/menuIcon.png) no-repeat center;
	}

.mainNav {
	float: right;
	color: #909090;
	text-align: right;
	padding-bottom: 0.2em;
	font: .9em Arial, Helvetica, sans-serif;
}

	.mainNav li {
		padding-left: 1em;
		display: inline-block;
	}

	.mainNav li a { color: #909090; }
	
/* -------------------------------- *\
	HOMEPAGE TOP SECTION / BANNER
\* -------------------------------- */

nav.products {
	top: 0;
	color: #fff;
	clear: both;
	width: 100%;
	z-index: 1000;
	/*position: relative;*/
	margin: -2.2em 0 0;
	text-align: center;
	text-transform: uppercase;
}

#homepage nav.products {
	margin: 0;
	position: absolute;
}

nav.products ul {
	z-index: 3;
	position: relative;
}

nav.products li,
.subNav.dd header,
nav.products .header {
	background: #d34b4b;
	background: linear-gradient(top, #d34b4b, #ac2524);
	background: linear-gradient(to bottom, #d34b4b, #ac2524);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d34b4b', endColorstr='#ac2524',GradientType=0);
}

nav.products li {
	float: left;
	display: none;
	min-width: 12%;
}

#homepage nav.products > ul > li, nav.products li.why { display: block; }

nav.products li.why {
	float: right;
	margin-right: 7.5%;
	padding: .35em .5em;
}

nav.products .header {
	display: none;
	font-size: 1.5em;
}

	nav.products .header a {
		color: #fff;
		display: block;
		padding: .5em .6em;
		background: url(../images/openClose.png) no-repeat right 0.5em;
	}
	
	nav.products .header a:hover { text-decoration: none; }

	nav.products > ul > li.buyNow a {
		/*cursor: default;*/
		font-size: 1.3em;
		text-align: left;
		padding: .5em 1.5em .5em .5em;
		background: url(../images/arrowRight.png) no-repeat 92% center;
	}

	nav.products li a {
		color: #fff;
		display: block;
		padding: .35em .5em;
		transition: linear all .2s;
	}
	
	nav.products > ul > li > a:hover { padding: .65em .5em; }
	nav.products ul > li.why > a:hover { padding: .35em .5em; }
	nav.products li.buyNow a:hover { padding: .8em 1.5em .5em .8em; }
	
	nav.products li a[title*="Household"],
	nav.products > ul > li:nth-child(2) a,
	.subNav ul li.household a {
		background: #91be62;
		background: linear-gradient(top, #91be62, #7aa354);
		background: linear-gradient(to bottom, #91be62, #7aa354);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#91be62', endColorstr='#7aa354',GradientType=0);
	}
	
	nav.products li a[title*="Screen &"], nav.products li a[title*="Screen and"],
	nav.products > ul > li:nth-child(3) a,
	.subNav ul li.screen a {
		background: #7c30c1;
		background: linear-gradient(top, #aa53ed, #7c30c1);
		background: linear-gradient(to bottom, #aa53ed, #7c30c1);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa53ed', endColorstr='#7c30c1',GradientType=0);
	}
	
	nav.products li a[title*="Car,"],
	nav.products > ul > li:nth-child(4) a,
	.subNav ul li.car a {
		background: #565656;
		background: linear-gradient(top, #565656, #313131);
		background: linear-gradient(to bottom, #565656, #313131);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#565656', endColorstr='#313131',GradientType=0);
	}
	
	nav.products li a[title*="Pet"],
	nav.products > ul > li:nth-child(5) a,
	.subNav ul li.pet a {
		background: #d8552d;
		background: linear-gradient(top, #f88059, #d8552d);
		background: linear-gradient(to bottom, #f88059, #d8552d);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88059', endColorstr='#d8552d',GradientType=0);
	}
	
	nav.products li a[title*="eBody"],
	nav.products li a[title*="Ebody"],
	nav.products > ul > li:nth-child(6) a,
	.subNav ul li.ebody a {
		background: #85bee5;
		background: linear-gradient(top, #8fc3e7, #7098b5);
		background: linear-gradient(to bottom, #8fc3e7, #7098b5);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fc3e7', endColorstr='#7098b5',GradientType=0);
	}
	
	.subNav ul li a[title*="Exclusives"],
	.subNav ul li.exclusives a {
		background: #d34b4b;
		background: linear-gradient(top, #d34b4b, #ac2524);
		background: linear-gradient(to bottom, #d34b4b, #ac2524);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d34b4b', endColorstr='#ac2524',GradientType=0);
	}
	
	nav.products li.why,
	nav.products li a[title*="Why"],
	.subNav ul li.whole a,
	nav.products > ul > li:not(.why):nth-child(7) a {
		background: #b5b7b8;
		background: linear-gradient(top, #b5b7b8, #848587);
		background: linear-gradient(to bottom, #b5b7b8, #848587);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b5b7b8', endColorstr='#848587',GradientType=0);
	}
	
	nav.products li.why li { background: none; filter: none; }
	
	nav.products li a:hover {
		text-decoration: none;
		text-shadow: 0 0 2px #323232;
	}

/* --------------------- *\
	DROP DOWN PRODUCTS
\* --------------------- */

nav.products ul .current a, nav.products ul li:hover > a {
	color: #fff;
	text-shadow: 0 0 2px #323232;
}

nav.products ul li:hover li a, nav.products ul ul li:hover a {
	border: none;
	text-shadow: none;
}

/* level 2 list */
nav.products ul ul {
    width: auto;
	padding: 0 .8em;
	margin: .4em 0 0 -.5em;
	box-shadow: 0 3px 3px -2px #323232;
	border-top: 1px solid #bcbcbc;
	background: #b5b7b8;
	background: linear-gradient(top, #848587, #b5b7b8);
	background: linear-gradient(to bottom, #848587, #b5b7b8);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#848587', endColorstr='#b5b7b8',GradientType=0);
}

nav.products ul ul > li {
	padding: 0;
	float: none;
	display: block;
	box-shadow: none;
	text-align: left;
	background: transparent;
	border-top: 1px solid #bcbcbc;
}

nav.products ul ul > li:first-child { border: 0; }

	nav.products ul ul li a {
		display: block;
		padding: .4em 0;
	}

/* level 3+ list */
nav.products ul ul ul {
	top: 0;
	left: 211px;
	font-size: 12px;
}

/* -------------------------------- *\
	BANNER / TOP SECTION
\* -------------------------------- */

.container {
	width: 100%;
	position: absolute;
}

#homepage .container { position: static; }

.container .wrap {
	padding: 0;
	position: relative;
}

.gradBg {
	left: 0;
	top: auto;
	width: 100%;
	min-height: 65px;
	position: relative;
	padding-top: 2.2em;
	background: #0a6cbd;	
	background: linear-gradient(to top, #0055b7 0%,#0a6cbd 30%,#1561b9 30%,#58c3f2 100%); 
	background: linear-gradient(to bottom, #0055b7 0%,#0a6cbd 30%,#1561b9 30%,#58c3f2 100%);
}

/* FOR SHOP PAGES */
body.shop .gradBg {
	min-height: 120px;
	background: linear-gradient(to top, #0055b7 0%,#0a6cbd 19%,#1561b9 19%,#58c3f2 100%); 
	background: linear-gradient(to bottom, #0055b7 0%,#0a6cbd 19%,#1561b9 19%,#58c3f2 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0055b7', endColorstr='#58c3f2',GradientType=0);
}

body.shop.curve .gradBg, 
body.shop.preview .gradBg {
	background: linear-gradient(to top, #0055b7 0%,#0a6cbd 16%,#1561b9 16%,#58c3f2 100%); 
	background: linear-gradient(to bottom, #0055b7 0%,#0a6cbd 16%,#1561b9 16%,#58c3f2 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0055b7', endColorstr='#58c3f2',GradientType=0);
}

#homepage .gradBg {
	overflow: hidden;
	background: linear-gradient(to top, #0055b7 0%,#0a6cbd 5.5%,#1561b9 5.5%,#58c3f2 100%); 
	background: linear-gradient(to bottom, #0055b7 0%,#0a6cbd 5.5%,#1561b9 5.5%,#58c3f2 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0055b7', endColorstr='#58c3f2',GradientType=0);	
}

body.curve .gradBg, body.preview .gradBg, #ebody .gradBg { min-height: 150px; }
body.curve .whiteBg { background: transparent; }

	.gradBg > i:first-child {
		width: 100%;
		height: 100%;
		display: none;
		position: absolute;
		background: url(../images/clouds.png) repeat-x center 0 / contain;
	}

	body.shop .gradBg > i:first-child, #homepage .gradBg > i:first-child { display: block; }
	#homepage .gradBg > i:first-child { background-size: auto; }

.icon {
	top: 0;
	right: 0;
	width: 98px;
	height: 90px;
	display: none;
	position: absolute;
	text-indent: -999em;
	background: url(../images/FreeDelivery.png) no-repeat 0 0;
}

body.shop .icon { display: block; }

.banner {
	z-index: 1;
	width: 100%;
	padding: 5em 0 0;
	position: relative;
	overflow: hidden;
}

	.banner img.text {
		left: 0;
		bottom: 0;
		z-index: 4;
		position: absolute;
	}

	.banner .hidden { display: none; }
	.movable { width: 100% !important; }
	.banner .movable section { position: relative; }
	
	.banner .movable section > a > img {
		width: 100%;
		max-width: 1002px;
	}
	
	.banner section > img {
		width: 100%;
		display: block;
	}

	.banner article {
		right: 0;
		bottom: 2em;
		width: 162px;
		background: #fff;
		position: absolute;
	}
	
		.banner article a:hover { text-decoration: none; }
	
	.banner article h4 {
		color: #737476;
		padding-bottom: 0.2em;
		font: 1.1em "MyriadWebProBold", "MyriadWebProRegular", Tahoma, Geneva, sans-serif;
	}
	
	.banner article .btn {
		float: none;
		min-width: 0;
		margin-top: .2em;
		box-sizing: border-box;
	}

.container .video {
	left: 0;
	width: 36%;
	bottom: 6em;
	position: absolute;
	padding-top: 10.5em;
}

	.video img { display: block; }

	.video .click {
		top: 0;
		z-index: 999;
		cursor: pointer;
		position: absolute;
	}
	
	.video .click img { transition: linear all .4s; }

		.video .click:hover img {
			transform: rotate(-5deg);
		}

	.video .click p {
		position: absolute;
		text-indent: -999em;
	}
	
.whiteBg {
	display: none;
	padding-top: 1em;
	position: relative;
	margin-bottom: 2em;
	background: #f1f0f0;
	background: linear-gradient(top, #fcfcfc, #f1f0f0);
	background: linear-gradient(to bottom, #fcfcfc, #f1f0f0);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc', endColorstr='#f1f0f0',GradientType=0);
}

.whiteBg .wrap { padding: 0 1em; }

#homepage .whiteBg { box-shadow: 0 -3px 10px -8px #323232 inset; }

#homepage .whiteBg, body.preview .whiteBg { display: block; }

	.whiteBg b, .container > b {
		z-index: 0;
		top: -2.7em;
		width: 100%;
		height: 48px;
		display: block;
		position: absolute;
		background: url(../images/greyGradient.png) no-repeat center 0;
	}
	
	#homepage .whiteBg b {
		top: -7.7em;
		height: 110px;
	}
	
	.container > b {
		top: auto;
		bottom: 0;
		height: 35px;
	}
	
/* -------------------------------- *\
	PAGE BACKGROUND TYPES
\* -------------------------------- */

/* CURVED WITH WHITE TO GREY */
body.preview .whiteBg { height: 270px; }
body.preview .whiteBg > b { height: 105px; }

body.curve .whiteBg, #ebody .whiteBg { display: block; }

/* -------------------------------- *\
	PAGE BRANDING STYLES
\* -------------------------------- */

#pet .logo, #auto .logo, #ebody .logo { padding: 0 1em .1em 0; }
#pet .logo a[title*="Pet's"], #auto .logo a[title*="E-Auto"], #ebody .logo a[title*="E-Body"] { display: block; }
#pet .logo a[title*="E-Cloth"], #auto .logo a[title*="E-Cloth"], #ebody .logo a[title*="E-Cloth"] { display: none; }
#pet nav.products, #pet .gradBg > i:first-child, #auto nav.products, #ebody nav.products { display: none; }

/* -------------------------------- *\
	GROUPED BRANDING STYLES
\* -------------------------------- */

#pet.preview .whiteBg, #auto.preview .whiteBg { height: 298px; }
#pet.preview .whiteBg > b, #auto.preview .whiteBg > b { display: none; }

#pet .container .gradBg,
#auto .container .gradBg {
	height: 120px;
	min-height: 0;
}

#pet .icon, #auto .icon, #ebody .icon { z-index: 1; }

/* -------------- *\
	PETS
\* -------------- */

#pet .gradBg {
	background: #c3532f;
	background: linear-gradient(to top, #c3532f 0%,#f36c41 19%,#c3532f 19%,#f36c41 100%); 
	background: linear-gradient(to bottom, #c3532f 0%,#f36c41 19%,#c3532f 19%,#f36c41 65%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c3532f', endColorstr='#f36c41',GradientType=0 );
}

#pet .icon {
	top: -2.5em;
	width: 177px;
	height: 159px;
	background: url(../images/petIcon.png) no-repeat 0 0;
}

#pet .subNav, #pet .subNav header {
	background: #c3532f;
	background: linear-gradient(top, #f36c41, #c3532f);
	background: linear-gradient(to bottom, #f36c41, #c3532f);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3532f', endColorstr='#f36c41',GradientType=0 );
}

#pet .bgTxt { padding-right: 14em; }

/* -------------- *\
	AUTO
\* -------------- */

#auto .gradBg {
	background: #000;
	background: linear-gradient(to top, #000 0%,#303030 19%,#000 19%,#303030 100%); 
	background: linear-gradient(to bottom, #000 0%,#303030 19%,#000 19%,#303030 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#303030',GradientType=0 );
}

#auto .gradBg > i:first-child {
	height: 120px;
	background: url(../images/autoBg.png) repeat center 0;
}

#auto .icon {
	top: 0;
	right: -30em;
	width: 660px;
	height: 120px;
	background: url(../images/autoIcon.png) no-repeat 0 0;
}

#auto .subNav, #auto .subNav header {
	background: #000;
	background: linear-gradient(top, #303030, #000);
	background: linear-gradient(to bottom, #303030, #000);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#303030', endColorstr='#000000',GradientType=0 );
}

#auto .bgTxt { padding-right: 20em; }

/* -------------- *\
	EBODY
\* -------------- */

#ebody .gradBg {
	background: #69C8C8;	
	background: linear-gradient(to top, #69c8c8 0%,#69c8c8 16%,#cceaea 16%,#cceaea 100%); 
	background: linear-gradient(to bottom, #69c8c8 0%,#69c8c8 16%,#cceaea 16%,#cceaea 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#69C8C8', endColorstr='#CCEAEA',GradientType=0 );
}

#ebody .icon {
	top: -.6em;
	right: -3em;
	width: 266px;
	height: 128px;
	background: url(../images/ebodyIcon.png) no-repeat 0 0;
}

#ebody .gradBg > i:first-child {
	height: 148px;
	background: url(../images/ebodyBg.png) repeat 0 0;
}

#ebody .whiteBg {
	min-height: 148px;
	margin-top: -.5em;
	border-top: 5px solid #414142;
	background: linear-gradient(top, #d8efef, #fff);
	background: linear-gradient(to bottom, #d8efef, #fff);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8efef', endColorstr='#ffffff',GradientType=0 );
}

#ebody .whiteBg b {
	height: 35px;
	background: url(../images/greenGradient.png) no-repeat center 0;
}

#ebody .subNav, #ebody .subNav header {
	background: #cceaea;
	background: linear-gradient(top, #A3DBDC, #69C8C8);
	background: linear-gradient(to bottom, #A3DBDC, #69C8C8);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#A3DBDC', endColorstr='#69C8C8',GradientType=0 );
}

#ebody .mainContent .bgTxt {
	color: #000;
	padding-right: 12em;
	/*text-shadow: 0 1px 1px #fff;*/
}

/* -------------- *\
	SCREEN & LENS
\* -------------- */

#screen .subNav, #screen .subNav header {
	background: #921CEE;
	background: linear-gradient(top, #921CEE, #6001B8);
	background: linear-gradient(to bottom, #921CEE, #6001B8);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#921CEE', endColorstr='#6001B8',GradientType=0 );
}

/* -------------------------------- *\
	MAINCONTAINER
\* -------------------------------- */

.mainContainer { position: relative; }

/* -------------------------------- *\
	ASIDE
\* -------------------------------- */

aside {
	width: 19%;
	float: left;
	margin-right: 2%;
}

	aside h3 {
		font-size: 1.2em;
		padding-bottom: .5em;
	}

	aside > article {
		width: 100%;
		background: #fff;
		margin-bottom: 1.5em;
	}
	
	aside article img { margin-bottom: .5em; }
	
	aside article h2:last-child, aside article h3:last-child, aside article h4:last-child { padding: 0; }

.subNav, .dd .msliding {
	background: #83AC28;
	background: linear-gradient(top, #5e902e, #7db542);
	background: linear-gradient(to bottom, #7db542, #5e902e);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db542', endColorstr='#5e902e',GradientType=0);
}

.subNav {
	color: #fff;
	position: relative;
	margin-bottom: 5.8em;
	padding: .8em .8em 0;
	text-transform: uppercase;
}

	.subNav a { color: #fff; }
	
	.subNav h2 {
		font-size: 1.3em;
		margin-bottom: 0.2em;
	}
	
	.subNav h2 a { display: block; }
	
	.subNav h2 a:hover {
		text-decoration: none;
		text-shadow: 0 0 2px #323232;
	}

	.subNav header {
		color: #fff;
		position: relative;
		padding: 0.8em 0.8em 0;
		margin: -0.8em -0.8em 0;
		background: #5e902e;
		background: linear-gradient(top, #7db542, #5e902e);
		background: linear-gradient(to bottom, #7db542, #5e902e);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db542', endColorstr='#5e902e',GradientType=0);
	}
	
	.mopen:after, .mclose:after {
		top: 12%;
		right: 0;
		content: "";
		height: 78%;
		width: 3.4em;
		display: none;
		position: absolute;
		box-shadow: -1px 0 0 #9cb97e;
		border-left: 1px solid #5e922f;
		background: url(../images/openClose.png) no-repeat right 0.4em;
	}
	
	.mclose:after { background-position: right -9.2em; }
	
	.subNav.dd h2:after {
		border: 0;
		width: 2.55em;
		display: block;
		box-shadow: none;
		background-position: right .25em;
	}
	
	h2.mclose:after { background-position: right -7em; }
	.subNav header h2 { margin: 0; }
	.subNav a:hover, .subNav header h2 a:hover { text-decoration: none; }
	
	.subNav ul { line-height: 1.3em; }
	
	.subNav ul li.active a, .subNav ul li a:hover {
		text-decoration: none;
		background: url(../images/activeArrow.png) no-repeat right center;
	}
	
	.subNav ul li a {
		display: block;
		margin: 0 -.8em;
		padding: .6em .8em;
	}
	
	.subNav ul li:first-child a { border: 0; }
	
	.subNav ul li.subCat a {
		margin: 0;
		display: block;
		padding: 0.61em .8em 0.6em 0;
		border-top: 1px solid rgba(237, 237, 237, 0.5);
		border-top: 1px solid #dbddd9;
	}
	
	.subNav ul li.topCat a:hover {
		background: #498fbb;
		background: linear-gradient(top, #2f6486, #498fbb);
		background: linear-gradient(to bottom, #498fbb, #2f6486);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#498fbb', endColorstr='#2f6486',GradientType=0);
	}
	
/* ---------------- *\
	SUBNAV DROPDOWN
\* ---------------- */
	
.subNav.dd {
	margin-bottom: 1.8em;
	filter: none;
	background: transparent;
}

	.subNav.dd header h2 {
		z-index: 9999;
		padding: .6em;
		cursor: default;
		position: relative;
		margin: -.6em -.6em 0;
	}
	

.subNav.dd .extend { min-height: 70px; }
.subNav.dd ul > li { border-top: 0; }

/* SHOW DIV ON HOVER */

.subNav.dd .msliding {
	width: 100%;
	z-index: 999;
	display: none;
	margin: 0 -.8em;
	padding: 0 .8em;
	position: absolute;
	box-sizing: border-box;
}

.subNav.dd header:hover > .msliding { display: block; }

/* -------------------------------- *\
	MAINCONTENT
\* -------------------------------- */

.mainContent {
	width: 79%;
	float: right;
	padding-bottom: 1.2em;
}

	.mainContent h2,
	.quote section h2, .quote section h3, .box h2, .box h3 {
		padding-bottom: .2em;
		font: 2.35em/1.45em "ardleyshand", Tahoma, Geneva, sans-serif;
	}

	/* CANCEL BG BRING BACK ON MOBILE */
	.mainContent .gradBg,
	body.shop .mainContent .gradBg,
	#pet .mainContent .gradBg,
	#auto .mainContent .gradBg,
	#ebody .mainContent .gradBg,
	body.curve .mainContent .gradBg, 
	body.preview .mainContent .gradBg {
		padding: 0;
		z-index: 0;
		min-height: 0;
		background: none;
		filter: none;
	}
	
	.mainContent > img {
		float: right;
		margin: 0 0 .5em .5em;
	}
	
	.mainContent .gradBg + img {
		margin-top: -2.5em;
		position: relative;
	}
	
	.mainContent ul, .mainContent ol {
		padding-left: 1.2em;
		padding-bottom: .2em;
	}
	
	.mainContent ol { padding-left: 2.5em; }
	
	.mainContent ul li, .mainContent ol li { padding: 0 0 .6em 1.2em; }
	.mainContent ol li { padding: 0 0 1em 0; }
	.mainContent ul li{ background: url(../images/bullet.png) no-repeat 0 0.47em; }
	
.mainContent > .box .form {
	border: 0;
	box-shadow: none;
}

.bread {
	width: 74%;
	z-index: 9999;
	color: #e0e0e0;
	padding: .4em 0;
	margin-bottom: 1em;
	position: relative;
}

.bread a { color: #e0e0e0; }
.bread ul { padding: 0; }

.bread ul li {
	display: inline;
	padding-left: 1.2em;
	background: url(../images/arrowSprite.png) no-repeat -.4em -16.4em;
}

.bread ul li:first-child {
	padding: 0;
	background: none;
}

.mainContent .bgTxt {
	color: #fff;
	height: 51px;
	padding: 0 8em 1.5em 0;
	/*text-shadow: 0 1px 1px #323232;*/
}

body.shop .mainContent .bgTxt, body.preview .mainContent .bgTxt { height: 106px; }

	.bgTxt a { cursor: pointer; color: #fff; }

	.bgTxt h1 {
		font-size: 2.4em;
		padding-bottom: .5em;
	}

	.mainContent .bgTxt p {
		padding-bottom: .5em;
		font: 1.65em/1.15em "ardleyshand", Tahoma, Geneva, sans-serif;
	}
		
/* -------------------- *\
	PRODUCTS
\* -------------------- */

._3column.categories article img { padding-bottom: .8em !important; }

.categories h2 {
	color: #444;
	text-align: center;
}

.prodWrap {
	clear: both;
	padding: .5em 0;
}

.gradBg + .prodWrap { padding-top: 0; }

._3column, ._4column { margin-left: -2%; }

.player,
.mainContainer aside > article,
.mainContainer ._3column > article, ._3column.logos > img,
.mainContainer ._4column > article, ._4column.logos > img,
.form, .mainContent .box, .mainContent table, .table {
	border: 0;
	position: relative;
	margin-bottom: 1.5em;
	box-sizing: border-box;
	border-style: solid;
	border-color: #e2e2e2;
	border-width: 0 1px 1px;
	box-shadow: 0 2px 4px -2px #c1c1c1;
}

._3column > article, ._3column > div, ._3column.logos > img,
._4column > article, ._4column > div, ._4column.logos > img {
	float: left;
	width: 31.3%;
	margin-left: 2%;
}

._3column > article .feefo {
	float: right;
	padding-bottom: .5em;
}

._3column > article:nth-child(3n+1) { clear: left; }
.prodWrap ._3column > article:nth-child(3n+1) { clear: none; }

._4column > article, ._4column > div, ._4column.logos > img { width: 23%; }

	._3column > article p { padding-bottom: 0.8em; }
	._3column > article h3 { font-size: 1.2em; padding-bottom: .8em; font-weight: bold; }
	._3column > article h3 + ul { margin-top: -0.5em; }
	
	._3column > article .btn { clear: both; }
	
	/*   The a:not(.anchrColour) filter is needed for colour swatches  */
	._3column > article a:not(.anchrColour) img,
	._4column > article a:not(.anchrColour) img {
		width: 85%;
		display: block;
		margin: 0 auto;
		padding-bottom: 1em;
	}
	
	._3column > article > i,
	._3column article .catalogue-product-list > i {
		float: left;
		font-size: 1.2em;
		margin-right: .5em;
		padding: .3em .4em .18em;
	}
	
	._3column article ul.catalogue-product-list {
		padding: 0;
		font-size: 1em;
	}
	
	._3column > article a h3, ._3column > article a p { color: #444; }
	._3column > article a:hover { text-decoration: none; }
	._3column > article > a:hover { text-decoration: none; }
	._3column > article a:hover .thumbnail > img { animation: pulse 1s linear; }
	._3column > article img:only-child, ._3column > article img:last-child { padding-bottom: 0; }

	._3column.logos > article, ._4column.logos > article { padding: 0; }
	._3column.logos > article img, ._4column.logos > article img { width: 100%; }
	.logos article img { max-width: 252px; }
		
/* -- // -- */

.close, .quickView {
	top: 0;
	left: 0;
	z-index: 1;
	color: #fff;
	display: block;
	cursor: pointer;
	overflow: hidden;
	position: absolute;
	font: 1.2em "ardleyshand", Tahoma, Geneva, sans-serif;
}

.quickView {
	height: 21px;
	padding: .3em 1.5em 0 .5em;
	background: url(../images/quickView.png) no-repeat right center #b0b0b0;
}
	
	.quickView:hover {
		text-decoration: none;
		text-shadow: 0 0 2px #323232;
	}
	
.close {
	right: 0;
	left: auto;
	width: 29px;
	height: 29px;
	background: url(../images/close.png) no-repeat center #b0b0b0
}

._3column > article .front { display: block; clear: both; }
._3column > article .back { display: none; }
._3column > article .back h3 { padding-right: 1.5em; font-weight: bold; }

.anchrColour img { display: block; }

article .divul {
	padding: 0;
	color: #888b8d;
}

article .divul span {
	width: 100%;
	display: block;
	padding: 0 0 0 .8em;
	background: url(../images/arrowSprite.png) no-repeat -.8em .5em;
}
		
._3column article .swatch {
	margin-top: 1.2em; 
	padding-bottom: 0;
	position: relative; 
	box-sizing: border-box;
}
	
.mainContent .swatch li {
	float: left;
	color: #000;
	background: none;
	padding: 0 .1em 0 0;
	vertical-align: middle;
	font: 1.2em "ardleyshand";
}

._3column article .swatch li.select {
	right: 26%;
	top: -1.2em;
	padding: 0;
	position: absolute;
}

	.swatch li a {
		margin: 1px;
		width: 13px;
		height: 13px;
		display: block;
		text-indent: -999em;
	}
	
	.swatch li.active:before {
		top: 0;
		left: auto;
		width: 7px;
		height: 4px;
		content: "";
		display: block;
		margin-left: .25em;
		position: absolute;
		background: url(../images/colourArrow.png) no-repeat 0 0;
	}

	.swatch li.active a,
	.swatch li a:hover {
		margin: 0;
		border: 1px solid #000;
	}

	.swatch li a[title*="Red"] { background: #c00000; }
	.swatch li a[title*="Coral"] { background: #f95f6c; }
	.swatch li a[title*="Blue"] { background: #4e8cb0; }
	.swatch li a[title*="Cornflower"] { background: #2ea0f1; }
	.swatch li a[title*="Green"] { background: #5b8c5f; }
	.swatch li a[title*="Lime"] { background: #b4bg56; }
	.swatch li a[title*="Mint"] { background: #7bddca; }
	.swatch li a[title*="Yellow"] { background: #e4ea37; }
	.swatch li a[title*="Gold"] { background: #e5cc3a; }
	.swatch li a[title*="Violet"] { background: #c04cbe; }
	.swatch li a[title*="Blue/Red"] {  }
	.swatch li a[title*="Green/Red"] {  }
	
/* -------------------- *\
	PRODUCT PAGE
\* -------------------- */
	
.productInfo {
	height: 295px;
	margin-bottom: 1.5em;
}

.productInfo > img, 
.productInfo > div {
	width: 52%;
	box-sizing: border-box;
}

.productInfo > img {
	width: 44%;
	float: left;
	padding-right: 1em;
}

.productInfo .feefo { padding-bottom: .5em; }

.productInfo > img { max-width: 356px; max-height: 290px; }
.productInfo > div { float: right; padding-top: 1em; }
.productInfo > div > div { padding-bottom: 0.5em; }
.productInfo #feefologohere { float: right; }

.productInfo section {
	clear: both;
	margin-top: 1em;
	overflow: hidden;
	padding: 0.8em 0;
	border-style: solid;
	border-width: 1px 0;
	border-color: #d7d7d7;
}

.productInfo .swatch {
	float: left;
	padding: .5em 0;
	position: relative;
}

.productInfo .swatch + img, .productInfo .swatch + .feefo { float: right; }

.productInfo .brands { padding: 0.5em 0; }
.productInfo .brands span { font-size: 0.85em; }
.productInfo .brands img { width: 19.5%; margin-left: 2%; }

.productInfo .btn, .qty { box-sizing: border-box; }

.mainContent .productInfo .btn { float: right; }

.productInfo .qty, .qty input[type="text"], .qty [class="+-"] { float: left; }
.productInfo .qty { width: 22%; }

.qty input[type="text"] {
	width: 68%;
	padding-top: 0.5em;
}

.qty [class="+-"] {
	padding: 0;
	width: 30%;
	margin-left: -1px;
	border: 1px solid #d7d7d7;
}

[class="+-"] span {
	height: 1.05em;
	display: block;
	cursor: pointer;
	text-indent: -999em;
	background: url(../images/arrowSprite.png) no-repeat center -41.1em;
}

[class="+-"] span + span { background-position: center -33em; }

	[class="+-"] span:hover { background-position: center -41.1em; background-color: #ccc; }
	[class="+-"] span + span:hover { background-position: center -33em; background-color: #ccc; }

.productInfo section > span {
	float: left;
	color: #7da722;
	display: block;
	min-width: 3.5em;
	font-size: 1.8em;
	font-weight: bold;
	padding: .25em 1em 0 0;
	vertical-align: middle;
}

.contains/*,
.packContents h2, .packContents h3*/ {
	padding-bottom: 0.2em;
	font: 2.4em/1.2em "ardleyshand", Tahoma, Geneva, sans-serif;
}

.packContents { clear: both; }

.packContents > div {
	overflow: hidden;
	padding-bottom: 1.4em;
}

.mainContent .packContents img {
	max-width: 215px;
	margin-right: 1em;
	margin: 0 0 .5em 1em;
	border: 1px solid #d7d7d7;
}

.mainContent .packContents img:first-of-type { margin-left: 0; }

.contains {
	font-size: 1.1em;
	line-height: 1.5em;
	padding-bottom: .5em;
}

.accredidations { float: left; }
.accredidations + .share { float: right; }

/*  Image Compare handle  */
.image-compare-tool{margin:0 auto 1.5em 0;max-width:100%;width:100%}
.image-compare-images, .image-compare-bottom { overflow: hidden; }
.image-compare-images{font-size:0;position:relative;-ms-touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none}
.image-compare-images:hover{cursor:col-resize}
.image-compare-images img{height:auto !important;width:100% !important;max-width:100% !important;}
.image-compare-top{background-size:cover;height:100%;left:0;position:absolute;top:0;width:50%}
.image-compare-top:after{background-color:#fff;content:'';height:50px;left:100%;left:calc(100% - 5px);top:50%;top:calc(50% - 25px);position:absolute;width:10px;z-index:2}
.image-compare-top img{display:none}
.image-compare-top:after{background-color:#fff;content:"";height:50px;left:100%;left:calc(100% - 5px);top:50%;top:calc(50% - 25px);position:absolute;width:10px;z-index:2;}

/* -------------------- *\
	SLIDER/SCROLLER
\* -------------------- */

.slider {
	clear: both;
	overflow: hidden;
	position: relative;
	padding: 1.5em 0 1em;
}

.slider { user-select: none; }

#homepage .slider { padding-top: 0; }

	.slider h4 {
		padding: 0 0 .5em;
		text-align: center;
		position: relative;
		font: 1.6em "ardleyshand", Tahoma, Geneva, sans-serif; 
	}
	
	.slider h4:before {
		left: 0;
		top: .5em;
		width: 100%;
		content: "";
		height: 4px;
		background: #4a4a4a;
		position: absolute;
		box-shadow: 250px 0 20px -8px #fff inset, -250px 0 20px -8px #fff inset;
	}
	
	.ie8 .slider h4:before { background: #d7d7d7; }
	
	.slider h4 span {
		padding: 0 1.2em;
		background: #fff;
		position: relative;
	}
	
	#homepage .slider h4:before { box-shadow: 250px 0 20px -8px #fbfbfb inset, -250px 0 20px -8px #fbfbfb inset; }
	#homepage .slider h4 span { background: #fbfbfb; }

.slider .scroll {
	width: auto;
	margin: 0 2.4em;
	overflow: hidden;
	padding: 0 0 1.5em;
	box-shadow: 0 10px 5px 0 #fff inset, 0 0 13px -8px #9f9f9f inset;
}

#homepage .slider .scroll { box-shadow: 0 10px 5px 0 #fafafa inset, 0 0 10px -3px #787878 inset; }
	
.slider .movable {
	padding: 0 .5em;
	overflow: hidden;
}

.slider .wrap {
	padding: 0;
	width: 10000px;
	max-width:  none;
	overflow: hidden;
}

.slider .wrap article {
	border: 0;
	float: left;
	width: 160px;
	margin: 0 1em;
	min-height: 262px;
	position: relative;
	padding-bottom: 6.5em;
	box-sizing: border-box;
}
	.slider article a:hover { text-decoration: none; }
	
	.slider article h3 {
		font-size: 1.2em;
		padding-bottom: 0.2em;
	}
	
	.slider article a h3 { color: #444; }
	.slider article a:hover h3 { color: #81ab26; }

	.slider article img {
		display: block;
		margin: 0 auto .6em;
	}
	
	.slider article img[src*="feefo"] {
		display: inline;
		margin: .5em 0 0;
	}
	
	.slider article .btn {
		width: 100%;
		margin-top: 0.5em;
	}
	
	.slider .absolute { /* positioning feefo and btn at bottom */
		bottom: 0;
		width: 100%;
		position: absolute;
	}
	
	.slider .movable, .slider .wrap { position: relative; }
	
	.slider article ul { padding: 0; }
	
	.slider article ul,
	.mainContent article ul {
		color: #727577;
		padding-left: 0;
		font-size: 0.9em;
		padding-bottom: 0.5em;
	}
	
	.slider article ul li,
	.mainContent article ul li, .link {
		padding: 0 0 0 .8em;
		background: url(../images/arrowSprite.png) no-repeat -0.8em 0.5em;
		font: Arial, Helvetica, sans-serif
	}
	
	.link, article p.link {
		color: #888;
		padding: 0 1.6em .5em 0;
		display: inline-block !important;
		background-position: right .6em;
	}
	
	article p.link a, article a p.link { color: #888; }
	

.slider .al, .slider .ar {
	left: 0;
	top: 50%;
	width: 31px;
	height: 60px;
	display: block;
	cursor: pointer;
	margin-top: -10px;
	position: absolute;
	background: url(../images/galleryArrows.png) no-repeat 0 0;
}

.slider .ar {
	right: 0;
	left: auto;
	background-position: right 0;
}
	
/* -------------------- *\
	SAVINGS
\* -------------------- */

.savings {
	overflow: hidden;
	padding: 0 0 1.8em 7.5em;
	background: url(../images/piggyBank.jpg) no-repeat 0 0;
}

	.savings h4 { font-size: 1.2em; }
	.savings h5 { font-size: 1.1em; }

	.mainContent .savings {
		padding-left: 0;
		background: none;
	}

	.savings fieldset {
		float: left;
		width: 23.6%;
		padding-right: 3%;
	}
	
	.savings label { font-weight: bold; }
	
	.savings .btn {
		width: 20%;
		float: left;
		margin-top: 1.8em;
		box-sizing: border-box;
	}
	
.savingsCalc > p {
	font-size: 2em;
	padding-bottom: 0;
}

.calculations {
	padding: .5em 0;
	margin-bottom: 1em;
	border-top: 1px solid #98bc73;
	border-bottom: 1px solid #98bc73;
}

.calculations.triple > div {
	width: 29.9%;
	margin-left: 5%;
	position: relative;
	box-sizing: border-box;
}

.calculations.triple > div:after {
	right: -.8em;
	bottom: .4em;
	font-size: 3em;
	position: absolute;
}

.calculations.triple > div:first-child:after { content: " – "; right: -.73em; }
.calculations.triple > div:first-child + div:after { content: " = "; }
	
	.calculations .equals p {
		font-size: 2.2em;
		line-height: 1em;
		text-align: center;
		padding-bottom: .5em;
	}

	.calculations i {
		padding: 0.5em;
		display: block;
		font-size: 2.2em;
		text-align: center;
		background: #A8C568;	
	}

	.calculations .equals i {
		color: #7DA722;
		background: #fff;
	}

/* -------------------- *\
	BRANDS
\* -------------------- */
	
.mainContainer > .brands { padding: .5em 0 0; }
	
.brands {
	clear: both;
	color: #737476;
	padding: 1em 0;
	overflow: hidden;
	font: 1.3em "ardleyshand", Tahoma, Geneva, sans-serif; 
}
	
	.brands img {
		max-width: 105px;
		margin-left: 1.3%;
		display: inline-block;
		vertical-align: middle;
		box-sizing: border-box;
	}
	
	.brands img { width: 10.45%; }

/* -------------------- *\
	ARTICLES/SECTIONS
\* -------------------- */

.banner article,
.mainContainer article {
	padding: 0.8em;
	border: 1px solid #d7d7d7;
}

.mainContent section img {
	float: left;
	max-width: 150px;
	margin: 0 .8em .5em 0;
}

.mainContent section .btn {
	float: left;
}

/* -------------------- *\
	QUOTES BOXES / FAQS
\* -------------------- */

.quote section, .box, .savingsCalc {
	color: #fff;
	padding: 1em;
	position: relative;
	margin-bottom: 1.2em;
	background: #83AC28;
}

	.quote section a, .box a, .savingsCalc a { color: #fff; }

	.quote section:before, .quote section:after {
		content: "";
		display: block;
		position: absolute;
	}
	
	.quote section:before {
		top: .5em;
		left: .5em;
		width: 48px;
		height: 44px;
		background: url(../images/openQuote.png) no-repeat 0 0;
	}

	.quote section:after {
		right: 0;
		bottom: 0;
		width: 38px;
		height: 42px;
		background: url(../images/closeQuote.png) no-repeat right bottom;
	}
	
	.quote section { padding-left: 3.4em; padding-right: 3.4em; }
	.quote section h2, .quote section h3 { padding-bottom: .35em; }
	.quote section p, .box p { padding-bottom: 1em; }
	.box p { font-size: 1.2em; }
	.quote section p:last-child, .box p:last-child { padding: 0; }
	
	.quote section ul {
		padding-left: 2em;
		list-style-type: disc;
	}
	
	.quote section ul li {
		background: none;
		padding-left: 0;
	}
	
.pdf {
	float: left;
	clear: both;
	font-size: .9em;
	font-weight: bold;
	line-height: 1.3em;
	padding: .3em 0 1em 3.2em;
	background: url(../images/document.png) no-repeat 0 0;
}

	.pdf span {
		display: block;
		font-size: .9em;
		font-weight: normal;
	}
	
	.pdf a {
		display: block;
		padding-right: 2.2em;
		background: url(../images/arrowRight.png) no-repeat right center;
	}
	
.faqs section {
	padding-top: 1em;
	border-top: 1px solid #d7d7d7;
}

.faqs section:first-child {
	border: 0;
	padding-top: 0;
}

.faqs section + h2 {
	padding-top: .6em;
	border-top: 1px solid #d7d7d7;
}
	
/* -------------------- *\
	NEWS
\* -------------------- */

.news {
	overflow: hidden;
	margin-bottom: 1.2em;
	border-bottom: 1px solid #d7d7d7;
}

.news section, .table section {
	padding: 1em 0;
	overflow: hidden;
	border-top: 1px solid #d7d7d7;
}

	.news section h4, .table section h4 { padding-bottom: .5em; }

	.news section h4 span.date {
		display: inline;
		font-size: 0.6em;
	}
	
	.news section > a {
		display: block;
		padding: 1em 0;
		margin: -1em 0;
		overflow: hidden;
		transition: linear all .5s;
	}
	
	.news section > a:hover {
		text-decoration: none;
		background: rgba(125, 167, 34, 0.01);
		box-shadow: 18px 0 15px -10px #fff inset, -18px 0 15px -10px #fff inset, 0 -8px 7px -10px #d7d7d7 inset, 0 8px 7px -10px #d7d7d7 inset;
	}

	.news section a h4, .news section a p {
		color: #444;
		transition: linear all .5s;
	}
	
	.news section a:hover h4 { color: #7da722; }

.news:last-child { border: 0; }

	.news section p { padding: 0; }
	.news section .btn { margin-top: 1.2em; }


	h2 + span.date, h3 + span.date { display: inline; }
	
	span.date {
		display: block;
		color: #7da722;
		font-size: .9em;
	}

.news section i {
	float: left;
	width: 122px;
	overflow: hidden;
	margin: .2em 1em .5em 0;
	border: 1px solid #d7d7d7;
}

	.news section i img {
		max-width: 222px;
		margin: -3em -6.5em -4em;
	}
	
.posted, .posted + p { box-sizing: border-box; }

.posted {
	color: #7da722;
	font-weight: bold;
}
	
.news .posted {
	width: 11%;
	float: left;
	display: inline-block;
}

.news .posted + p {
	width: 89%;
	float: right;
	padding: 0 0 0 1%;
	display: inline-block;
	border-left: 1px solid #d7d7d7;
}

.mainContent.article h2 { font-size: 2em; line-height: 1.35em; }

.mainContent.article .bgTxt + img {
	z-index: 2;
	width: 100%;
	min-width: 160px;
	max-width: 350px;
	max-height: 283px;
	margin-top: -3em;
	position: relative;
}

.related {
	padding: 1.2em 0;
	border-top: 1px solid #d7d7d7;
}

.related a { color: #444; }
.related a:hover { color: #7da722; }

/* -------------------- *\
	COLUMNS
\* -------------------- */

.double, .triple {
	clear: both;
	overflow: hidden;
}

.double > div, .double > article,
.triple > div, .triple > article {
	margin-bottom: 1.2em;
	box-sizing: border-box;
}

.double > div, .double > article {
	width: 49%;
	float: right;
}

.double > div:first-child, .double > article:first-child { float: left; }

.triple > div, .triple > article {
	float: left;
	width: 32%;
	margin-left: 2%;
}

.triple > div:first-child, .triple > article:first-child { margin-left: 0; }

/* -------------------- *\
	ADBOXES
\* -------------------- */

.adBox > div img,
.adBox > article img {
	float: left;
	margin: 0 .8em .5em 0;
}

.adBox > article .btn { clear: both; }

/* -------------------- *\
	BUTTONS / PAGING
\* -------------------- */

.btn, .btn.left, .btn.right, .prev, .next,
._3column > article > i, ._3column article .catalogue-product-list > i {
	color: #7da722;
	position: relative;
	font-family: "MyriadWebProBold", "MyriadWebProRegular", Tahoma, Geneva, sans-serif;
}

.mainContent .btn.left { float: left; }
.mainContent .btn.right { float: right; }

input.btn {
	width: auto;
	float: left;
	font-size: 1.2em;
	text-align: left;
	padding: .32em .5em;
	margin-bottom: 1.2em;
}

.btn, .prev, .next {
	padding: 0;
	overflow: hidden;
	font-size: .95em;
}

.prev, .next { min-width: 150px; }

.prev {
	float: left;
	margin-right: .5em;
}

.next {
	float: right;
	margin-left: .5em;
}

	.btn a, .prev a, .next a,
	a .btn {
		color: #7da722;
		display: block;
		padding: .35em 2.6em .28em .5em;
		background: url(../images/btnArrow.png) no-repeat right center;
	}
	
	.btn a.disabled, a.disabled .btn {
		color: #fff;
		cursor: default;
		box-shadow: none;
		padding-right: .5em;
		background: #d7d7d7;
	}
	
	a.disabled .btn:after { display: none; }
	
	.btn a.disabled:hover, .btn a:hover.disabled i, a.disabled:hover .btn, a.disabled:hover .btn i { color: #fff; }
	
	.btn a.disabled i, a.disabled .btn i {
		margin: 0;
		color: #fff;
	}
		
	.prev a {
		padding-left: 2.6em;
		padding-right: .5em;
		background: url(../images/btnArrowLeft.png) no-repeat 0 center;
	}
	
	.prev:after { left: 2em; right: auto; }
	
	.update.btn a { background: url(../images/refresh.png) no-repeat right center; }
	.delete.btn a { background: url(../images/delete.png) no-repeat right center; }
	
	a .btn {
		background: url(../images/btnArrow.png) no-repeat right center #f1f0f0;
		background: url(../images/btnArrow.png) no-repeat right center, linear-gradient(top, #fff, #f1f0f0);
		background: url(../images/btnArrow.png) no-repeat right center, linear-gradient(to bottom, #fff, #f1f0f0);
	}
	
	.btn i {
		float: left;
		color: #7da722;
		font-size: 1.35em;
		margin-right: .4em;
		margin-bottom: .2em;
		padding-right: .4em;
		position: relative;
	}
	
	.btn i + a { text-align: right; }
	
	.btn i:after {
		right: 0;
		border-right-color: #d7d7d7;
	}
	
	.btn > i { float: left; }
	
	.btn a:hover, .btn a:hover i, a:hover .btn {
		color: #306386;
		text-decoration: none;
		transition: all linear 0.8s;
	}
	
.mainContent > .btn, 
.form .btn, section .btn {
	float: right;
	min-width: 160px;
}

.paging {
	clear: both;
	padding: 1em 0;
	overflow: hidden;
	border-top: 1px solid #d7d7d7;
}

.buttons {
	clear: both;
	overflow: hidden;
	padding: 0 0 1em;
	margin-bottom: .5em;
}

.buttons .btn {
	float: right;
	margin-left: 1em;
}

/* -------------------------------- *\
	BASKET / CHECKOUT
\* -------------------------------- */

.steps {
	clear: both;
	font-size: .88em;
	overflow: hidden;
	padding-bottom: 1.2em;
	margin-bottom: 1.2em;
	border-bottom: 1px solid #d7d7d7;
}

.steps > div {
	width: 19%;
	float: left;
	margin-right: 1%;
	padding: .5em .6em;
	box-sizing: border-box;
	border: 1px solid #d7d7d7;
	text-transform: uppercase;
}

	.steps > div.active {
		color: #7da722;
		border-color: #7da722;
	}

	.steps > div i {
		color: #fff;
		width: 20px;
		float: left;
		display: block;
		margin-right: .5em;
		text-align: center;
		background: #848587;
		border-radius: 100em;
	}
	
	.steps > div.active i { background: #7da722; }
	
	.steps > div a {
		display: block;
		color: #c3c3c3;
		padding: .4em .6em;
		margin: -.4em -.6em;
	}
	
	.steps > div a i { background: #c3c3c3; }		

.basket {}

.total, .discount {
	width: 49%;
	float: left;
	box-sizing: border-box;
}

.total {
	float: right;
	background: none;
	padding-top: 1em;
	margin-bottom: 1.2em;
}

.total select {
	width: auto;
	max-width: 100%;
	margin-bottom: .5em;
}

.total .delivery {
	padding: 1em 0;
	border-top: 1px solid #d7d7d7;
	border-bottom: 1px solid #d7d7d7;
}

	.total .delivery p { padding-bottom: .2em; }
	.total dt { font-weight: bold; }
	
	.total dl span {
		color: #7da722;
		font-weight: bold;
	}

dl.Total {
	font-size: 1.2em;
	font-weight: bold;
	padding: 1em 0 .6em;
}

.discount {
	overflow: hidden;
	padding-top: .8em;
	padding-bottom: .8em;
	margin-bottom: 1.4em;
}

	.discount header {
		margin-bottom: .8em;
		padding-bottom: .5em;
		border-bottom: 1px solid #d7d7d7;
	}

.discount input[type="text"], .discount .btn { box-sizing: border-box; }

.discount input[type="text"] {
	width: 62%;
	float: left;
	padding-bottom: .5em;
}

.discount .btn {
	width: 35%;
	min-width: 0;
	float: right !important;
}

/* -------------------------------- *\
	TABLES
\* -------------------------------- */

table {
	width: 100%;
	padding: 0 1em;
	text-align: left;
	border-collapse: separate;
}

table th {
	font-weight: bold;
	border-bottom: 1px solid #d7d7d7;
}

table th, table td {
	padding: .6em .5em .5em;
	vertical-align: middle;
}

table td { border-top: 1px dashed #eee; }
table th:first-child, table td:first-child { padding-left: 0; }
table th:last-child, table td:last-child { padding-right: 0; }
table tr:first-child + tr td { border: 0; }

.basket table .quantity { width: 85px; }

.basket table a[title*="Remove"] {
	width: 17px;
	height: 21px;
	margin: auto;
	display: block;
	text-indent: -999em;
	background: url(../images/trash.png) no-repeat 0 0;
}

.table { padding: .5em 1em 0; }

.table a { color: #444444; }
.table section { border-top: 1px dashed #eee; }
.table section:first-child { border: 0; padding-top: 0; }
.table section p:last-child { padding: 0; }

p.type {
	font-size: .9em;
	padding-bottom: .8em;
}

p.type a { color: #7da722; }

/*  RECEIPT ON CHECKOUT  */
.mainContent table.receipt {
    border: 0;
	position: relative;
	margin-bottom: 1em;
	box-sizing: border-box;
	border: 0px none;
	box-shadow: none;
}

.mainContent table.receipt th, 
.mainContent table.receipt td {
    border: 0px none;
    padding: .5em;
    line-height: 1.5em;
    vertical-align: middle;
}

/* SEARCH */

/*.searchtable td { border-bottom: 1px solid black; }
.searchtable .noborder { border-bottom: 0 none; }

.searchtable .col1 {
	width: 20%;
	min-width: 20%;
	font-weight: bold;
}

.searchtable .col2 {
	width: 25%;
	min-width: 25%;
}

.searchtable .col3 {
	width: 55%;
	min-width: 55%;
}*/
	
/* -------------------------------- *\
	FORMS
\* -------------------------------- */

.form {
	overflow: hidden;
	padding: .8em 1.2em 1em;
}

fieldset { padding-bottom: 1em; }

.double > fieldset {
	width: 100%;
	/*float: right;*/
}

/*.double > fieldset:first-child { float: left; }*/

.form label span, .required {
	color: #e05755;
	display: inline-block;
	font: 1.2em/.8em "ardleyshand", Tahoma, Geneva, sans-serif;
}

label + input[type="radio"], 
label + input[type="checkbox"],
fieldset input[type="radio"], 
fieldset input[type="checkbox"] {
	float: left;
	margin: .15em .5em 0 0;
}

.error {
	color: #fff;
	margin-bottom: 1em;
	padding: .8em 1em;
	background: #e05755;
}

.error ul {
	padding-left: 1.2em;
	list-style-type: disc;
}

	.error ul li {
		padding-left: 0;
		background: none;
	}

.error p:last-child { padding: 0; }

/* -------------------------------- *\
	FOOTER
\* -------------------------------- */

footer {
	clear: both;
	overflow: hidden;
	margin-top: 1.8em;
	background: #1C2125;
}

	footer ul li {
		padding: 0;
		background: none;
	}
	
	footer .btn { margin: 1em 0; }
	footer .btn a { color: #7DA722; }
	
	footer a:hover {
		text-decoration: none;
		color: #7DA722 !important;
	}
	
/* -------------- SOCIAL -------------- */

footer .social, footer .main,
footer .info, footer .logos {
	padding: 1em 0;
	overflow: hidden;
}

footer .social {
	color: #888888;
	background: #F6F6F6;
	padding-bottom: .8em;
	box-shadow: 0 5px 12px -12px #323232 inset;
}

	footer .social a { color: #888888; }

	footer .social h5 {
		font-weight: bold;
		padding: 1.1em 0 0;
	}
	
	footer .social span { font-size: 0.9em; }
	
	footer .social img {
		float: left;
		margin-right: .8em;
	}
	
footer .social article {
	width: 24.5%;
	float: left;
	margin-left: 2%;
	padding-left: 2%;
	overflow: hidden;
	box-sizing: border-box;
	border-left: 1px solid #D7D7D7;
}

footer article:first-child, 
footer .main .wrap > article:first-child {
	border: 0;
	margin-left: 0;
	padding-left: 0;
}

footer .social article.last-child { width: 20.5%; }

/* -------------- LINKS -------------- */

footer .main h5, 
footer .info pre {
	color: #fff;
	text-transform: lowercase;
}

	footer .main, footer .main a { color: #ababab; }
	footer .main ul { font-size: 0.9em; }
	
footer .main article, footer .main section, footer .main section > article { box-sizing: border-box; }
	
footer .main article {
	float: left;
	padding: 0 1.5em;
	box-sizing: border-box;
}

footer .main .msliding > article { width: 26.6%; }
footer .main .msliding > article:first-child { width: 8%; padding-left: 0; }
footer .main .msliding > article.awards { width: 20%; padding-right: 0; }

article.awards img {
	max-width: 80px;
	padding-bottom: 0.5em;
	vertical-align: middle;
}

footer article .feefo img {
	max-width: 178px;
	width: 100% !important;
}

footer .main section {
	width: 45.3%;
	float: left;
	padding: 0 1.5em;
	overflow: hidden;
	border-style: solid;
	border-width: 0 1px;
	border-color: #3b3b3b;
}

footer .main section > article {
	width: 34%;
	padding: 0 0 0 1em;
}

footer .main section > article:first-child { padding: 0; }
footer .main section > article:first-child + article { width: 32%; }

footer .newsletter { border-right: 1px solid #3b3b3b; }

footer .newsletter p {
	font-size: 0.9em;
	line-height: 1.4em;
}

footer .share {
	padding-top: 1em;
	border-top: 1px solid #3b3b3b;
}

footer .share ul li {
	padding-right: 0.5em;
	display: inline-block;
}

	footer .share ul li a {
		width: 30px;
		height: 31px;
		display: block;
		text-indent: -999em;
		background: url(../images/shareSprite.png) no-repeat 0 0;
	}
	
	footer .share ul li a[title*="Facebook"] { background-position: 0 -3.6em; }
	footer .share ul li a[title*="Google"] { background-position: 0 -7.15em; } 
	footer .share ul li a[title*="Pinterest"] { background-position: 0 -10.7em; }
	
/* -------------- INFO -------------- */

footer .info {
	overflow: hidden;
	background: #11181C;
}

footer .info a { color: #4A4A4A; }

footer .info pre {
	float: left;
	padding-right: 2em;
}

footer .info span, 
footer .info ul { font-size: 0.9em; }

footer .info ul li { display: inline-block; }
footer .info ul li:first-child:after { content: " | "; }

footer .info section:first-child { float: left; }
footer .info section { float: right; }

footer .cards {
	float: right;
	width: 190px;
}

footer .cards img {
	float: left;
	padding: 0 .15em;
}

footer .agency {
	clear: both;
	display: block;
	padding-top: .5em;
	text-align: right;
}

/* -------------- LOGOS -------------- */
	
footer .logos { background: #fff; }
footer .logos .wrap { padding: 0; }

footer .logos .wrap > div {
	height: 0;
	width: 5.1%;
	float: left;
	margin: 0 1%;
	display: block;
	max-width: 52px;
	padding-bottom: 3%;
	text-indent: -999em;
	background-size: 200%;
	background-position: 0 0;
	background-repeat: no-repeat;
}

	footer .logos a {
		width: 100%;
		height: 100%;
		display: block;
		text-indent: -999em;
	}

.logos .AEG { background-image: url(../images/brands/AEG_sprite.jpg); }
.logos .AGA { background-image: url(../images/brands/AGA_sprite.jpg); }
.logos .Aqualisa { background-image: url(../images/brands/Aqualisa_sprite.jpg); }
.logos .Bosch { background-image: url(../images/brands/Bosch_sprite.jpg); }
.logos .Dietrich { background-image: url(../images/brands/DeDietrich_sprite.jpg); }
.logos .Deva { background-image: url(../images/brands/DEVA_sprite.jpg); }
.logos .Franke { background-image: url(../images/brands/Franke_sprite.jpg); }
.logos .Gaggia { background-image: url(../images/brands/Gaggia_sprite.jpg); }
.logos .Baumatic { background-image: url(../images/brands/Baumatic_sprite.jpg); }
.logos .Ideal { background-image: url(../images/brands/Ideal_sprite.jpg); }
.logos .Magimix { background-image: url(../images/brands/Magimix_sprite.jpg); }
.logos .Miele { background-image: url(../images/brands/Miele_sprite.jpg); }
.logos .Neff { background-image: url(../images/brands/NEFF_sprite.jpg); }
.logos .Smeg { background-image: url(../images/brands/Smeg_sprite.jpg); }


footer .logos .wrap > div:hover {
	cursor: pointer;
	background-position: 100% 0;
}

/* -------------------------------- *\
	ADBOX POPUP STYLES
\* -------------------------------- */

#basic-modal-content { display: none; }

/* Overlay */
#simplemodal-overlay { background-color: #000; cursor: wait; }

/* Container */
#simplemodal-container { height: 360px; width: 600px; color: #bbb; background-color: #fff; border: 4px solid #fff; padding: 0;}
#simplemodal-container .simplemodal-data { padding: 0;}
#simplemodal-container code { background: #141414; border-left: 3px solid #65B43D; color: #bbb; display: block; font-size: 12px; margin-bottom: 12px; padding: 4px 6px 6px;}
#simplemodal-container a { color: #ddd;}
#simplemodal-container a.modalCloseImg { background: url(../images/closeBtn.png) no-repeat; width: 32px; height: 32px; display: inline; z-index: 3200; position: absolute; top: -1.4em; right: -1.4em; cursor: pointer;}
#simplemodal-container h3 { color: #84b8d9;}
#simplemodal-container .player { border: 0; margin: 0; box-shadow: none; }

#basic-modal { position: relative; }

.playBtn {
	top: 24%;
	left: 50%;
	width: 50px;
	height: 50px;
	margin-left: -25px;
	position: absolute;
	text-indent: -999em;
}

.playBtn a {
	width: 50px;
	height: 50px;
	display: block;
	background: url(../images/playBtn.png) no-repeat 0 0;
}

.playBtn a:hover {
    background-position:0 -50px;
}

/* ---------------------------------------------------------------- *\
	COUNTRY/MULTILINGUAL CHANGES
\* ---------------------------------------------------------------- */

.united-kingdom ._3column article .swatch { margin-top: .6em; }
.united-kingdom ._3column article .swatch li.select { position: static; margin: -.3em 0 0 .2em; transform: rotate(-8deg); }	

.united-kingdom .swatch li.select:before {
	left: .2em;
	top: -.8em;
	width: 21px;
	height: 11px;
	content: " ";
	position: absolute;
	background: url(../images/selectArrow.png) no-repeat 0 0;
}

.hong-kong .brands img { width: 10%; margin-left: 1%; }

/* ---------------------------------------------------------------- *\
	MEDIA QUERIES
\* ---------------------------------------------------------------- */
@media screen and (min-width: 650px) and (max-width: 1024px), screen and (max-width: 565px) and (min-width: 455px), screen and (max-width: 290px) {
	article .swatch li.select { display: none; }
}

@media screen and (min-width: 1002px) {
	.banner { height: 423px; }
}

@media screen and (max-width: 1002px) 
{
    .mainContent.article img, .icon, .container .video, .video .click { transition: linear all .3s; }
	/*header[role="banner"] *, .mainContent.article img, .icon, .container .video, .video .click { transition: linear all .3s; }   --  The transition that messed up the main menu in responsive*/
	.brands img { width: 10.9%; margin-left: 0.3%; }
}

@media screen and (min-width: 650px) and (max-width: 920px) {
	footer .social img { width: 50px; margin-right: .4em; }
	footer .social  h5 { padding-top: .4em; }
}

@media screen and (max-width: 902px) {
	.icon { background: url(../images/FreeDelivery_sm.png) no-repeat 0 0; width: 62px; height: 57px; }
	.gradBg > i:first-child { background: url(../images/clouds.png) repeat-x -78em 0; }
	
	nav.products > ul > li:last-child { margin: 0; }
	.mainContent .bgTxt { padding-right: 0; }
	.productInfo > img { width: 40%; }
	.productInfo > div { width: 58.5%; }
	.mainContent .productInfo .btn { min-width: 0; }
	.steps > div i { margin: 0 auto; float: none; }
	.steps > div { text-align: center; }
}

@media screen and (max-width: 840px) {
	.news .posted, .news .posted + p { display: block; float: none; width: auto; }
	.news .posted + p { padding: 0; border: 0; }
	footer .main article.joinUs { display: none; }
	footer .main section { width: 49%; border-left: 0; padding-left: 0; }
	footer .main article.newsletter { width: 30.6%; }
	.brands.all span { display: block; text-align: center; margin-bottom: .5em; }
	.brands img { width: 13%; margin-left: .3%; }
	.productInfo .brands span { display: block; }
	.productInfo .brands img { width: 25%; }
}

@media screen and (max-width: 815px) {
	.logo { width: 147px; padding-bottom: .6em; }
	#pet .logo, #auto .logo, #ebody .logo { width: 135px; }
	
	.hgroup .search { width: 180px; }
	.mainNav { clear: both; float: none; width: 100%; padding-top: .8em; margin-top: 1.4em; font-size: .9em; text-align: center; border-top: 1px solid #d7d7d7; }
	.mainNav li { padding-bottom: .2em; }
}

@media screen and (max-width: 800px) {
	aside { width: 24%; }
	.mainContent { width: 74%; }
	._3column > article { width: 46.3%; margin-left: 3%; }
	._3column > article:nth-child(3n+1) { clear: none; }
	._3column > article:nth-child(2n+1) { clear: none; }
	.mainContent.article img { width: 35%; }
	#auto .mainContent .bgTxt { padding-right: 13em; }
	#auto .icon { right: -35em; }
	#ebody .icon { right: -10em; }
	#ebody .mainContent .bgTxt { padding-right: 4em; }
	.calculations.triple > div:after { font-size: 2em; bottom: .6em; }
}

	@media screen and (min-width: 650px) and (max-width: 800px) {
		body.preview .mainContent .bgTxt { height: 106px; }
	}

	@media screen and (min-width: 650px) and (max-width: 800px), screen and (max-width: 500px) {
		.double > div, .double > article, .double > fieldset, .total, .discount { float: none; width: 100%; clear: both; }
	}

@media screen and (max-width: 795px) {
	#homepage nav.products { font-size: .9em; }
	nav.products ul { padding: 0; }
	nav.products li { min-width: 0; }	
	nav.products ul ul { right: 0; font-size: 1em; }
}

@media screen and (max-width: 780px) {
	.mainNav li { padding: 0 0.3em; }
	.steps > div span { display: none; }
	#homepage .container .wrap { margin: 0 .8em; }
	.banner article { display: none; }
	.banner img.text, .banner section img { width: 113% !important; max-width: 1002px; }
}

	@media screen and (min-width: 650px) and (max-width: 775px) {
		footer .social img { margin-right: .8em; }
		footer .social span { display: none; }
		footer .social h5 { padding-top: 1.1em; }
	}
	
	@media screen and (min-width: 430px) and (max-width: 485px) {
		.steps { font-size: .8em; }
	}
	
	@media screen and (max-width: 758px) {
		.productInfo { height: auto; }
		.productInfo > img:first-child, .productInfo > div { width: 100%; float: none; }
		.productInfo > img { padding: 0; max-width: 350px; display: block; margin: 0 auto 1em; }
		.productInfo .brands { display: none; }
	}
	
	@media screen and (max-width: 650px) and (max-width: 750px) {
		.productInfo > img { margin: -.5em auto 2em; }
	}

@media screen and (max-width: 705px) {
	.logo { width: 140px; padding-top: 1em; }
	#pet .logo, #auto .logo, #ebody .logo { width: 130px; }
	.hgroup .search { width: 150px; }
	.hgroup .search, .hgroup .basket { font-size: .9em; }
}

@media screen and (max-width: 650px) {
	.outerWrapper { padding: 0; margin: 0; }
	#homepage .outerWrapper { padding: 0 .8em; }
	.mShow { display: block; }
	.msliding { display: none; }
	.discount .msliding { display: block; }
	
	#homepage .gradBg { overflow: visible; }
	#homepage .whiteBg b { top: -7em; }
	
	.logo { width: 152px; padding: .5em .5em .5em 0; }
	#pet .logo, #auto .logo, #ebody .logo { width: 125px; }
	
	.hgroup { overflow: hidden; }
	.hgroup .search { float: right; margin: 0 0 .8em; }
	.search input { padding: .43em .5em; }
	.search input[type="text"] { padding: .5em .5em .5em 2em; }
	.search input[type="submit"] { padding: .4em 0; }
	.hgroup .basket { clear: right; }
	.hgroup .basket > div a { padding-top: .3em; padding-bottom: .3em; }

	.mainNav { margin: 0; padding: 0; border: 0; }
	.mainNav .mDD { left: 0; color: #fff; font-size: 1.4em; font-weight: bold; margin-top: .3em; padding: 0.5em; width: 100%; display: none; position: absolute; z-index: 10000; background: #316386; box-sizing: border-box; box-shadow: 0 3px 3px -2px #323232; }
	.mDD li { display: block; width: 100%; padding: 0.2em 0; }
	.mDD li a { color: #fff; display: block; padding: .3em 0; }
	.mDD li a:hover { color: #7DA722; text-decoration: none; }
	
	.hgroup .languages { display: none; }
	.mobBar, .menuIcon { display: block; }
	.whiteBg { margin-bottom: 1em; }
	
	.brands.all { padding: .5em 0; }
	.brands.all span { margin-bottom: 0; }
	
	#auto .menuIcon, #auto .mainNav .mDD { background: #303030; }
	#pet .menuIcon, #pet .mainNav .mDD { background: #F36C41; border-color: #C3532F; }
	
	#ebody .menuIcon, #ebody .mainNav .mDD { background: #A3DBDC; border-color: #69C8C8; }
	
	.mobBar { padding: .8em 0 0.3em; overflow: hidden; border-top: 1px solid #d7d7d7; }
	.mobBar .languages ul li { display: block; float: left; box-sizing: border-box; padding-right: 0.8em; }
	.mobBar .languages ul li a { display: block; background: none; }
	.mobBar .languages img { display: block; max-width: 39px; }
	.mobBar select { float: left; width: 70%; margin-top: .45em; }
	
	.container, nav.products, #homepage nav.products > ul > li.buyNow, .bread { display: none; }
	#homepage nav.products, #homepage .container { display: block; }
		
	aside, .mainContent { float: none; width: 100%; box-sizing: border-box; }
	aside > article { display: none !important; }
	aside header, .subNav header, nav.products .header, .mopen, .mclose { cursor: pointer; position: relative; }
	aside .subNav header:after, .mainContent header:after { display: block; }
	.subNav { margin-bottom: 0; }
	.subNav.dd { margin-bottom: 0; }
	.subNav.dd .extend { min-height: 0; }
	.subNav.dd header h2 { cursor: pointer; }
	.subNav.dd header h2:after { border-left: 1px solid #9b1413; box-shadow: -1px 0 0 #D34B4B; }
	.subNav.dd .msliding, .subNav.dd header:hover > .msliding { position: relative; display: none; box-sizing: content-box; }
	#auto .subNav, #auto .subNav header { background: #303030; background: linear-gradient(top, #000, #303030); background: linear-gradient(to bottom, #000, #303030); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#303030', endColorstr='#000000',GradientType=0 ); }
	#auto .subNav header:after { border-color: #5D5D5D; box-shadow: -1px 0 0 #000; }
	
	#pet .subNav header:after { border-color: #E68F74; box-shadow: -1px 0 0 #C3532F; }
	#ebody .subNav header:after { border-color: #45adad; box-shadow: -1px 0 0 #c9f5f6; }
	#screen .subNav header:after { border-color: #9b65cd; box-shadow: -1px 0 0 #4e0196; }
	
	.mainContent { padding: 0 .8em; overflow: hidden; position: relative; }
	 body.curve .gradBg, body.preview .gradBg, #ebody .gradBg { min-height: 0; }
	
	.mainContent .gradBg, body.shop .mainContent .gradBg, body.curve .mainContent .gradBg, body.preview .mainContent .gradBg, #pet .mainContent .gradBg, #auto .mainContent .gradBg, #ebody .mainContent .gradBg { position: relative; padding: 1em 0.8em 0; margin: 0 -.8em 1em; }
	.mainContent .gradBg, body.shop .mainContent .gradBg, body.curve .mainContent .gradBg, body.preview .mainContent .gradBg { background: #0055b7; background: linear-gradient(to bottom, #0055b7, #58c3f2); background: linear-gradient(top, #0055b7, #58c3f2); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0055b7', endColorstr='#58c3f2',GradientType=0); }
	
	#auto .mainContent .gradBg { background: url(../images/autoBg.png) repeat 0 0 #303030; }
	#pet .mainContent .gradBg { background: #c3532f; background: linear-gradient(to bottom, #F36C41, #C3532F); background: linear-gradient(top, #F36C41, #C3532F); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F36C41', endColorstr='#C3532F',GradientType=0); }
	#ebody .mainContent .gradBg { background: url(../images/ebodyBg.png) repeat 0 0 #a3dbdc; }
	
	body.shop .mainContent .bgTxt, body.curve .mainContent .bgTxt body.preview .mainContent .bgTxt { height: auto; }
	body.curve .mainContent .gradBg, body.preview .mainContent .gradBg, #ebody .mainContent .gradBg { margin-bottom: 0; padding-bottom: 2.2em; }
	/* gradient and curve */ body.curve .mainContent .gradBg:after, body.preview .mainContent .gradBg:after,  #ebody .mainContent .gradBg:after { left: 0; bottom: 0; content: ""; width: 100%; height: 23px; position: absolute; background: url(../images/mobileCurve.png) no-repeat center 0; }
	/* ebody mobile curve */ #ebody .mainContent .gradBg:after { background-image: url(../images/mobileCurve2.png); }
	/* ebody bg gradient */ #ebody .mainContent:after { z-index: -1; left: 0; top: 9em; height: 25%; content: ""; width: 100%; position: absolute; background: linear-gradient(top, #d5eeee, #fff); background: linear-gradient(to bottom, #d8efef, #fff); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8efef', endColorstr='#ffffff',GradientType=0 ); }
	/* disable curve on branding */ #pet.preview .mainContent .gradBg:after, #auto.preview .mainContent .gradBg:after { display: none; }
	
	.mainContent > img { width: 50%; }
	.mainContent .bgTxt, #pet .bgTxt, #auto .mainContent .bgTxt { padding: 0; height: auto; }
	.mainContent .bgTxt p { padding-bottom: .8em; }
	.mainContent.article img, .mainContent .gradBg + img { margin-top: -2em; }
	
	.mainContent > header { color: #fff; position: relative; margin: 0; padding: .5em .8em; background: #5e902e; background: linear-gradient(top, #7db542, #5e902e); background: linear-gradient(to bottom, #7db542, #5e902e); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db542', endColorstr='#5e902e',GradientType=0); }
	.mainContent header h2, .mainContent header h3 { margin: 0; padding: 0; }
	
	.form { padding: .8em 1em 1em; }
	.productInfo { margin: -1em -.8em 1.5em; padding: 1em .8em 0; position: relative; background: linear-gradient(top, #fff, #f1f0f0); background: linear-gradient(to bottom, #fff, #f1f0f0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f1f0f0',GradientType=0); }
	#ebody .productInfo { background: none; margin-bottom: 0; }
	
	.productInfo > div { padding-top: 1em; border-top: 1px solid #d7d7d7; }
	.productInfo > img { margin-bottom: 1em; margin-top: -2.5em; }
	#pet .productInfo > img, #auto .productInfo > img { margin-top: -1.6em; }
	.productInfo .brands { display: block; }
	.productInfo .brands img { margin-left: 2%; }
	 section.packContents img { max-width: 215px; }
	.accredidations, .accredidations + .share { float: none; width: 100%; padding: 1em 0; }
	.accredidations { border-top: 1px solid #d7d7d7; }
	
	.slider { display: none; }
	.mainContent .share { padding: .5em 0 1em; border-bottom: 1px solid #d7d7d7; }
	.video .click { width: 130%; }
	.discount header:after { display: none; }
	
	.savings { background: none; padding-left: 0; }	
	.savings label { font-size: 0.9em; }
	.double.adBox > article { float: none; width: 100%; }
	
	.news section i { width: 120px; }
	.news section i img { width: 230px; }
	.news section .btn { clear: both; float: none; }
	
	footer .social .wrap { display: table; width: 100%; padding: 0; }
	footer .social article { float: none; width: 20%; display: table-cell; margin: 0; padding: 0; font-size: 0.95em; text-indent: -999em; text-align: center; }
	footer .social article h5 { display: none; }
	footer .social article img { float: none; margin: 0; display: block; margin: 0 auto; }
	footer .main > article, footer .main section { width: 100%; float: none; border: 0; padding: 0; }
	footer .main section { padding: 1em 0; margin: 1em 0; border-width: 1px 0; border-style: solid; border-color: #3b3b3b; }
	footer .main .msliding > article.awards { width: 45%; }
	footer .main .msliding > article { width: 55%; }
	footer .header { cursor: pointer; }
	footer .header:after { border-right: 1px solid #3b3b3b; }
	footer .header h3 { padding: 0 2em 0 0; font: 1.5em "MyriadWebProBold", "MyriadWebProRegular", "Myriad Pro", Tahoma, Geneva, sans-serif; }
	footer .mopen, footer .mclose { background: url(../images/openClose.png) no-repeat right 0.15em; }
	footer .mclose { background-position: right -9.3em; }
	footer .info section, footer .cards { float: left; width: 100%; }
	footer .agency { text-align: left; }
	footer .info section:first-child { padding-bottom: .5em; margin-bottom: .8em; border-bottom: 1px solid #3b3b3b; }
	footer .logos { padding: .5em; }
	footer .logos .wrap > div { width: 8%; margin: 0 1.55%; padding-bottom: 3.8%; }
}

@media screen and (max-width: 550px) {
	#homepage .gradBg { padding-top: 0; }
	#homepage .whiteBg { background: #fcfcfc; }
	#homepage .gradBg > i:first-child { margin-top: 3em; background-size: 320% 35%; }
	nav.products, #homepage nav.products { position: relative; }
	#homepage nav.products .header { display: block; }
	nav ul.pDD { position: absolute; display: none; width: 100%; }
	nav .pDD li, nav.products .pDD li.why { display: block; float: none; }
	nav.products .pDD li.why > ul { display: none; }
	nav.products .pDD li a , nav.products .pDD li a:hover{ padding: .5em .5em; }
	 .brands.all img { width: 12.6%; }
	#homepage .whiteBg { padding-top: 0; }
	.container .video { bottom: 3.5em; }
	#homepage .whiteBg b { top: -4.5em; }
}

@media screen and (max-width: 525px) {
	.savings { padding-bottom: .8em; margin-bottom: .8em; border-bottom: 1px solid #d7d7d7; }
	.savings h4 { font-size: 1.1em; }
	.savings fieldset { width: 31.3%; padding: 0 0 1em 3%; }
	.savings fieldset:first-of-type { padding-left: 0; }
	.savings .btn { margin: 0; width: auto; clear: both; float: none; }
	.brands img { margin: 0; }
}

@media screen and (max-width: 500px) {
	.logo { padding-bottom: .8em; }
	.mainNav { margin: 0; }	
	.hgroup { float: none; position: relative; }
	.hgroup .basket > div:first-child a span { display: none; }
	.form { padding-left: 1em; padding-right: 1em; }
	
	.basket table .number, table .code { display: none; }
	.basket table .desc { width: 45%; }
	.basket table .quantity { width: 60px; }
	.basket table th:first-child + th + th, table td:first-child + td + td { padding-left: 0; }
	
	.discount header:after { border-color: #fff; box-shadow: -1px 0 0 #d7d7d7; background-image: url(../images/openCloseDark.png); background-position: right 0; }
	.discount header { padding: 0 4em 0 0; border: 0; margin: 0; }
	.discount header:after { display: block; }
	.discount .msliding { display: none; margin-top: .5em; padding-top: .8em; border-top: 1px solid #d7d7d7; }
	
	.calculations.triple > div p { padding-bottom: .5em; height: auto !important; }
	.calculations.triple > div { width: 100%; float: none; clear: both; margin: 0; padding-bottom: 1.2em; }
	.calculations.triple > div:after { font-size: 4em; position: relative; margin-left: 48%; right: auto; bottom: -.3em; }
	.calculations.triple > div:first-child + div:after, .calculations.triple > div:first-child:after { right: auto; margin-left: 47%; }
}

@media screen and (max-width: 485px) {
	section.packContents img { width: 47%; }
}

/* iPhone landscape */
@media screen and (max-width: 480px) {
	.banner .movable { display: none; }
	.banner .hidden { display: block; }
	.banner .hidden img { width: 120%; max-width: 1002px; }
	.banner img.text { display: none; }
	.container .video { padding-top: 7.5em; bottom: 4em; }
	.slider .wrap article { width: 194px; }
	/*footer .logos .wrap > div { width: 15%; margin: 0 2.6%; }*/
}

@media screen and (max-width: 465px) {
	footer .info pre { float: none; width: 100%; padding-right: 0; }
	footer pre { white-space: normal; }
	footer pre br { display: none; }
}

@media screen and (max-width: 455px) {
	.mainContent .logos img { width: 48%; }
	._3column { margin: 0; }
	._3column.logos { margin-left: -2%; }
	._3column > article { float: none; width: 100%; clear: both; box-sizing: border-box; margin-left: 0; }
	
	footer .social article span { display: none; }
	footer .social article img { width: 65%; }
	footer .logos .wrap > div { width: 11.2%; margin: 0 1.5%; padding-bottom: 5.2%; }
}

@media screen and (max-width: 440px) {
	.steps { font-size: 1em; }
	.steps > div b { display: none; }
}

@media screen and (max-width: 420px) {
	.brands img { width: 22%; }
}

@media screen and (max-width: 415px) {
	.logo { width: 130px; padding-top: .6em; padding-bottom: 0; }
	.mobBar .languages ul li { width: 12%; padding-right: .6em; }
	.mobBar .languages img { width: 100%; }
	.mainContent .gradBg + img, .mainContent.article img { display: block; float: none; width: 100%; margin-left: auto; margin-right: auto; max-width: 200px; }
	.news section i { display: none; }
	.brands.all { padding-bottom: 0; }
	.brands.all span { font-size: .9em; }
	.brands.all img { width: 12.4%; margin: 0; }
}

	@media screen and (min-width: 330px) and (max-width: 415px) {
		#pet .logo, #auto .logo, #ebody .logo { width: 115px; }
		.hgroup { padding-bottom: .5em; }
		.hgroup .basket > div:first-child a, .hgroup .basket .checkout a { background: none; padding: .3em .5em; }
		.hgroup .search { width: 149px; margin-bottom: .5em; } 
	}

@media screen and (max-width: 395px) {
	.adBox > div img, .adBox > article img { display: none; }
	.savings fieldset { float: none; width: 100%; padding-left: 0; }
	.productInfo section .btn { min-width: 0; }
	footer .main .msliding > article, footer .main .msliding > article.awards { float: none; width: 100%; padding: 0; border-right: 0; }
	footer .main .msliding > article.awards { border-top: 1px solid #3b3b3b; }
	footer .share { padding-bottom: 1em; }
	footer .share h5 { display: none; }
}

@media screen and (max-width: 385px) {
	.productInfo .brands img { margin: 0; float: right; }
	
	.basket table { padding: 0; }
	.basket table tr { padding: .2em 0; }
	.basket table tr:nth-child(odd) { background: #eee; }
	.basket table th { display: none; }
	.basket table .code { display: block; }
	.basket table .desc, table td { width: auto; overflow: hidden; }
	.basket table .quantity { width: 80px; }
	.basket table a[title*="Remove"] { margin: 0; }
	.basket table td, table td:first-child + td + td { border: 0; padding: .35em 0 .35em 32%; display: block; position: relative; }
	.basket table td:before { left: .5em; width: 32%; position: absolute; white-space: nowrap; font-weight: bold; }
	
	.basket td:nth-of-type(1):before { content: "No:"; }
	.basket td:nth-of-type(2):before { content: "Code:"; }
	.basket td:nth-of-type(3):before { content: "Item:"; }
	.basket td:nth-of-type(4):before { content: "Price:"; }
	.basket td:nth-of-type(5):before { content: "Qty:"; }
	.basket td:nth-of-type(6):before { content: "Total:"; }
	.basket td:nth-of-type(7):before { content: "Remove:"; }
}

@media screen and (max-width: 350px) {
	.mainContent .packContents img, footer .main section > article, footer .main section > article:first-child + article { width: 100%; float: none; margin-left: 0; }
	.productInfo > div > div { padding: 0; }
	.productInfo .feefo { padding: 0; clear: both; float: none !important; }
	footer .main section { padding: 0; }
	footer .main section > article, footer .main section > article:first-child { padding: .6em 0; text-align: center; border-top: 1px solid #3b3b3b; }
	footer .main section > article:first-child { border: 0; }
	footer .main section > article a { display: block; }
	.paging .prev, .paging .next, .paging .btn, .buttons .btn { float: none; clear: both; width: 100%; margin: 0; box-sizing: border-box; }
	.paging .next, .paging .btn + .btn, .buttons .btn + .btn { margin-top: .5em; }
}

@media screen and (max-width: 330px) {
	.logo, #pet .logo, #auto .logo, #ebody .logo { float: none; width: 100%; padding: 0; }
	.logo img { margin: 0 auto; width: 152px; }
	#pet .logo img, #auto .logo img, #ebody .logo img { width: 107px; }
	
	header[role="banner"] { padding: .5em .8em; margin: 0; }
	.hgroup { padding: .8em 0 .6em; position: static; }
	.hgroup .basket { overflow: hidden; }
	.hgroup, .hgroup .search, .hgroup .basket { float: none; width: 100%; box-sizing: border-box; }
	.hgroup .basket > div:first-child a { padding-left: 3em; }
	.hgroup .search { margin-bottom: .5em; }
	.mobBar select { width: 62%; }
	
	.discount input[type="text"], .discount .btn { clear: both; width: 100%; float: none; }
	.discount .btn { margin-top: .5em; }
}

@media screen and (max-width: 320px) {
	.productInfo .swatch, .productInfo .feefo { width: 100%; float: none; }
	.productInfo .feefo { margin-top: .5em; }
}

@media screen and (max-width: 310px) {
	#homepage .whiteBg { background: #fff; }
	#homepage .whiteBg b { height: 65px; }
	.productInfo .qty { width: 40%; float: right; }
	.productInfo section > span { width: 50%; min-width: 0; font-size: 2.2em; padding-top: 0.2em; }
	.productInfo section .btn { width: 100%; display: block; margin-top: 1em; box-sizing: border-box; }
	.brands.all { display: none; }
}

@media screen and (max-width: 300px) {
	._3column.logos { margin: 0; }
	.productInfo .brands span { display: none; }
	.productInfo .brands img { float: none; margin-left: 5%; width: 26%; }
	.mainContent .logos img { width: 100%; float: none; margin: 0 0 .5em; }
}

@media screen and (max-width: 280px) {
	.menuIcon a { padding: .5em .55em; }
	.hgroup .basket > div:first-child a { padding-right: .5em; padding-left: 2.5em; background-position: .3em center; }
	.hgroup .basket .checkout a { padding-right: 1.5em; padding-left: .5em; background-position: 104% center; }
}

@media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 1.5dppx) {
	select { background-image: url(../images/ddl_x2.png); background-size: 27px 27px; }
	.gradBg > i:first-child { background-image: url(../images/clouds_x2.png); background-size: 1800px 140px; }
	.icon { background-image: url(../images/FreeDelivery.png); background-size: 62px; 57px; }
	.menuIcon a { background-image: url(../images/menuIcon_x2.png); background-size: 51px 25px; }
	.hgroup .basket > div:first-child a { background-image: url(../images/basketIcon_x2.png); background-size: 19px 18px; }
	.search input[type="text"] { background-image: url(../images/searchIcon_x2.png); background-size: 12px 13px; }
	.search input[type="submit"], .hgroup .basket .checkout a, .btn a, .prev a, .next a, a .btn { background-image: url(../images/btnArrow_x2.png); background-size: 24px 7px; }
	.prev a { background-image: url(../images/btnArrowLeft_x2.png); background-size: 24px 7px; }
	.update.btn a { background-image: url(../images/refresh_x2.png); background-size: 25px 21px; }
	.delete.btn a { background-image: url(../images/delete_x2.png); background-size: 25px 21px; }
	.quote section:after { background-image: url(../images/closeQuote_x2.png); background-size: 42px 38px; }
	.hgroup .languages > ul li, .bread ul li, [class="+-"] span, .slider article ul li, .mainContent article ul li, .link { background-image: url(../images/arrowSprite_x2.png); background-size: 24px 536px; }
	table a[title*="Remove"] { background-image: url(../images/trash_x2.png); background-size: 34px 42px; }
	.subNav ul li.active a, .subNav ul li a:hover { background-image: url(../images/activeArrow.png); background-size: 8px 27px; }
	.mopen:after, .mclose:after, nav.products .header a { background-image: url(../images/openClose_x2.png); background-size: 44px 141px; }
	.discount header:after { background-image: url(../images/openCloseDark_x2.png); background-size: 44px 141px; }
}