@charset "utf-8";
/* 0 - body, group, grid styles */
/* 1 - default button styles */
/* 1.1 - default form styles */
/* 1.2 - default typography styles */

/* 2 - >=1024px styles */
/* 2.1 - alt typographic styles */
/* 2.2 - alt buttons styles */
/* 2.3 - alt forms styles */
/* 2.3.1 - alt image styles */
/* 2.3.2 - alt forms - validation styles */

/* 2.4 - top navigation styles */
/* 2.4.1 - header side-menu styles (c) 2015 George Lieu licensed under MIT */

/* 3 - tinted divider straps styles */
/* 3.1 - category image block styles */
/* 3.2 - star rating styles */
/* 3.4 - infinite scroll styles */
/* 3.6 - legals ul */
/* 3.7 - about us profile */
/* 3.8 - shopping cart structure */
/* 3.9 - popup modal styles */
/* 4 - cart table styles */
/* 4.1 - YouTube embed styles */

/* 5 - login styles */
/* 7 - 2gdpr cookie consent */
/* 8 - footer styles */

/* 9.1 - mediaQueries 1024px styles */
/* 9.2 - mediaQueries 768px styles */
/* 9.3 - mediaQueries 420px styles */
/* 9.4 - mediaQueries 375px styles */
/* 9.5 - mediaQueries 320px styles */

/* 0 - body, group, grid styles */
body {
	background-color: #fff;
	font-family: 'Open Sans', Tahoma, Geneva, sans-serif;
	font-size: 0.8em;
	line-height: 1.4;
	font-weight: 300;
	color: #000000;
}
section.header, section.header_admin, section.main, section.article, section.header_home, section.intro, section.search, section.contact, section.footer {
 	float: left;
	clear: both;
	width: 100%;
	margin: 0;
	padding: 0;
}
section.header {
	background-color: #333;
	border-bottom-width: 1px;
	border-bottom-color: #666;
	border-bottom-style: solid;
}
section.main {
	background-color: #fff;
	min-height: 600px;
}
section.header_admin {
	background-color: #666;	
}
section.article {
	background-color: #fff;
}
section.header_home {
  background-image: url('http://www.themediaroom.co.uk/dsl/images/header/truck-driver-lockable-fuel-tank-cap.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  background-color: #fff;
  height: 50vh;
  overflow: hidden;
  margin: 0;
}
section.intro {
	margin: 0;
	padding: 15px 0;
	background-image: url('http://www.themediaroom.co.uk/dsl/images/content/bg-sand.png');
	background-size: auto auto;
	background-position: left top;
	background-color: #f5f5f5;
	border-bottom: 1px solid #fff;
}
section.search {
	background-color: #222;
}
section.contact {
	background-color: #f5f5f5;
}
section.footer {
	position: relative;
	border-top-width: 1px;
	border-top-color: #fff;
	border-top-style: solid;
	background-color: #333;
	padding: 10px 0 20px 0;
}
.container, .container-mb-fwidth {
	position: relative;
	width: 96.4843%;
	max-width: 988px;
	height: auto;
	margin: 0 auto;
	padding: 15px 0;
}
.group:before, .group:after { content: ""; display: table; } /* group (clearfix) - ie8> */
.group:after { clear: both; }
.group { *zoom: 1; }
.column, .column-mb {
	display: block;
	float: left;
	margin: 0 0 0 1.9531%;
 	box-sizing: border-box;
}
.column:first-child { margin-left: 0; }
.row {
	clear: both;
	padding: 0;
	margin: 0 0 15px 0;
}
.row_25 {
	clear: both;
	padding: 0;
	margin: 0 0 25px 0;
}
.row_zero {
	clear: both;
	padding: 0;
	margin: 0;
}
.row-bottom-rule {
	clear: both;
	margin: 0 0 15px 0;
	padding: 0 0 5px 0;
	border-bottom: 1px dotted #000;
}
.row-bottom-rule:last-child {
	clear: both;
	margin: 0 0 5px 0;
	padding: 0;
	border: none;
}
.span_1 {
	width: 6.4777%;	
}
.span_2, .span_2six, .span_2cart {
	width: 14.9797%;	
}
.span_3, .span_3six {
	width: 23.4817%;	
}
.span_4, .span_4three, .span_4pop, .span_4cart, .span_4align {
	width: 31.9838%;	
}
.span_5 {
	width: 40.4858%;	
}
.span_6, .span_6cart {
	width: 48.9878%;	
}
.span_7 {
	width: 57.4898%;	
}
.span_8, .span_8nine {
	width: 65.9919%;	
}
.span_9 {
	width: 74.4939%;	
}
.span_10 {
	width: 82.9959%;
}
.span_11 {
	width: 91.4979%;	
}
.span_12, .span_12m {
	width: 100%;	
}
.span_7intro {
	width: 58.8898%;	
}

/* 1 - default button styles */
.button, input[type="submit"], input[type="reset"], input[type="button"] {
	clear: both;
	display: block;
	float: left;
	height: 44px;
	border-radius: 3px;
	-moz-border-radius: 3px; 
	-webkit-border-radius: 3px;
	border: none;
	background-color: #4bb30c;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.2;
	text-align: center;
	color: #ffffff;
	box-sizing: border-box;
	cursor: pointer;
    -webkit-appearance: button;
	margin: 0 0 15px 0;
	padding: 0;
}
.button:hover, .button-inline:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .button:focus, .button-inline:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus {
	color: #fff;
	background-color: #333;
	box-sizing: border-box;
}

/* 1.1 - default form styles */
.label {
	clear: both;
	display: block;
	margin: 0 0 15px 0;
	padding: 0;
}
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], input[type="file"], textarea, select {
	display: block;
	float: left;
	height: 44px;
	padding-right: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
	padding-left: 10px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px;
	border: 1px solid #999;
	font-size: 13px;
	line-height: 1.4;
	box-shadow: none;
	box-sizing: border-box;
	background-color: #fff;
	color: #000;
 }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], input[type="file"], textarea {
	-webkit-appearance: none;
	 -moz-appearance: none;
		  appearance: none;
}
textarea {
	min-height: 120px;
	padding-top: 6px;
	padding-bottom: 6px;
 }
.input:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus,
input[type="password"]:focus, textarea:focus, input[type="file"]:focus, select:focus {
	border: 1px solid #FC8C01;
	outline: 0;
}

/* 1.2 - default typography styles */
h1 { font-size: 1.54em; line-height: 1.38; font-weight: 300;}
h2 { font-size: 2.4em; line-height: 1.2; font-weight: 300;}
h3 { font-size: 1.23em; line-height: 1.4; font-weight: 300;}
h4 { font-size: 1.23em; line-height: 1.4; font-weight: 300;}
h5 { font-size: 1.23em; line-height: 1.4; font-weight: 300;}
h6 { font-size: 1.23em; line-height: 1.4; font-weight: 300;}
p {	margin: 0 0 10px 0; padding: 0;}

a:link, a:visited {
    text-decoration: none;
	color: #000;
}
a:hover, a:active {
    text-decoration: none;
	color: #1f75f5;
}
img {
	margin: 0 0 10px 0;
	padding: 0;
	display: block;
}

/* 2 - >=1024px styles */
/* 2.1 - alt typographic styles */
.h1_header {
	margin: 0 0 10px 0;
	padding: 0;
	font-family: 'Fira Sans', Tahoma, Geneva, sans-serif; /* 400,700 */
	font-weight: 700;
	font-size: 5em;
	line-height: 1.1;
	color: #fff;
    text-transform: capitalize;
	text-align: center;
}
.h4_header {
	margin: 0;
	padding: 0;
	font-weight: 300;
	font-size: 1.6em;
	line-height: 1.4;
	color: #fff;
    text-transform: capitalize;
	text-align: center;
}
.h1-title {
	margin: 0 6px 4px 0;
	padding: 0;
	font-family: 'Fira Sans', Tahoma, Geneva, sans-serif; /* 400,700 */
	font-weight: 700;
	font-size: 1.8em;
	line-height: 1.1;
	color: #000;
    text-transform: capitalize;
}
.h1-product {
	margin: 0 0 6px 0;
	padding: 0;
	font-family: 'Fira Sans', Tahoma, Geneva, sans-serif; /* 400,700 */
	font-weight: 700;
	font-size: 2.4em;
	line-height: 1.1;
	color: #000;
    text-transform: capitalize;
}
.h2-title {
	margin: 0 0 6px 0;
	padding: 0;
	font-family: 'Fira Sans', Tahoma, Geneva, sans-serif; /* 400,700 */
	font-weight: 700;
	font-size: 1.8em;
	line-height: 1.1;
	color: #fff;
    text-transform: capitalize;
}
.h3-title {
	margin: 8px 0 6px 0;
	padding: 0;
	font-family: 'Fira Sans', Tahoma, Geneva, sans-serif; /* 400,700 */
	font-weight: 700;
	font-size: 1.8em;
	line-height: 1.2;
	color: #000;
    text-transform: capitalize;
}
.h3-title-highlite {
	margin: 8px 0 8px 0;
	padding: 0;
	font-family: 'Fira Sans', Tahoma, Geneva, sans-serif; /* 400,700 */
	font-weight: 700;
	font-size: 1.8em;
	line-height: 1.2;
	color: #1f75f5;
    text-transform: capitalize;
}
.h3-stacked {
	margin: 0 0 4px 0;
	padding: 0;
	font-family: 'Fira Sans', Tahoma, Geneva, sans-serif; /* 400,700 */
	font-weight: 700;
	font-size: 1.8em;
	line-height: 1.2;
	color: #000;
    text-transform: capitalize;
}
.h3-stacked-sml {
	margin: 0 0 4px 0;
	padding: 0;
	font-family: 'Fira Sans', Tahoma, Geneva, sans-serif; /* 400,700 */
	font-weight: 700;
	font-size: 1.8em;
	line-height: 1.2;
	color: #000;
    text-transform: capitalize;
}
.h3-stacked-title {
	margin: 0;
	padding: 0;
	font-family: 'Fira Sans', Tahoma, Geneva, sans-serif; /* 400,700 */
	font-weight: 700;
	font-size: 1.8em;
	line-height: 1.2;
	color: #000;
    text-transform: capitalize;
}
.h3-stacked-price {
	margin: 0 0 4px 0;
	padding: 0;
	font-family: 'Fira Sans', Tahoma, Geneva, sans-serif; /* 400,700 */
	font-weight: 700;
	font-size: 1.8em;
	line-height: 1.2;
	color: #000;
    text-transform: capitalize;
}
.h3-breadcrumb {
	margin: 0 0 10px 0;
	padding: 0;
	font-size: 1.2em;
	line-height: 1.2;
	color: #777;
    text-transform: capitalize;
	text-align: center;
}
.h3-breadcrumb span {
	color: #000;
	font-weight: 400;
}
.h3-title-popup {
	margin: 0 0 6px 0;
	padding: 0;
	font-family: 'Fira Sans', Tahoma, Geneva, sans-serif; /* 400,700 */
	font-weight: 700;
	font-size: 1.4em;
	line-height: 1.1;
	color: #fff;
    text-transform: capitalize;
}
.h3-four-block {
	margin: 0 0 4px 0;
	padding: 0;
	font-family: 'Fira Sans', Tahoma, Geneva, sans-serif; /* 400,700 */
	font-weight: 700;
	font-size: 1.5em;
	line-height: 1.1;
	color: #000;
    text-transform: capitalize;
}
.p-caption {
	margin: 0 0 6px 0;
	padding: 0;
	font-size: 0.9em;
	line-height: 1.3;
	color: #333;
    text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
}
.p-fawesome {
	margin: 0 0 12px 0;
	padding: 0;
	font-size: 1em;
	line-height: 1.2;
	color: #000;
    text-transform: capitalize;
	letter-spacing: 1px;
	font-weight: 400;
}
.h6-title-caption {
	margin: 0 10px 6px 0;
	padding: 0;
	font-size: 1.1em;
	line-height: 1.4;
	font-weight: 400;
	color: #333;
    text-transform: capitalize;
}
p span {
	font-weight: 400;	
}
a.underline:link, a.underline:visited {
    text-decoration: underline;
	font-weight: 400;
	color: #000;
}
a.underline:hover, a.underline:active {
    text-decoration: none;
	color: #ccc;
}
a.caption:link, a.caption:visited {
    text-decoration: none;
	color: #000;
}
a.caption:hover, a.caption:active {
    text-decoration: none;
	color: #ccc;
}
a.tel_link:link, a.tel_link:visited {
    text-decoration: none;
}
a.tel_link:hover, a.tel_link:active {
    text-decoration: none;
}
a.modal_link:link, a.modal_link:visited {
    text-decoration: underline;
	font-weight: 400;
	color: #F63;
}
a.modal_link:hover, a.modal_link:active {
    text-decoration: none;
	color: #ccc;
}
a.ext_link:link, a.ext_link:visited {
    text-decoration: none;
	color: #F63;
}
a.ext_link:hover, a.ext_link:active {
    text-decoration: none;
	color: #ccc;
}

.centre_text {
	text-align: center;	
}
.centre_text_mobile {
	text-align: center;	
}
.title_green {
	color: #4bb30c;
}
.title_orange {
	color: #F63;
}
.title_grey {
	color: #a2a2a2;
}
.title_dark_grey {
	color: #222;
}
.all_bmargin {
	margin-bottom: 10px;	
}

/* 2.2 - alt buttons styles */
.btn_inline {
	margin: 0;
	padding: 0;
	clear: none;	
}
.btn_centred {
	float: none;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
	padding: 0;	
}
.btn_vertical {
/* vertical centre in parent */
	margin: 0;
	padding: 0;
	top: 35%;
	-webkit-transform: translateY(35%);
	-ms-transform: translateY(35%);
	transform: translateY(35%);	
}
.btn_blue {
	background-color: #1f75f5;
}
.btn_dark_grey {
	background-color: #333;
	color: #fff;
}
.btn_light_grey {
	background-color: #e1e1e1;
	color: #333;
}
.btn_outline {
	margin: 0;
	padding: 0;	
	border: 1px solid #fff;
	background-color: #1f75f5;
}
.btn_product_list {
	margin: 0 0 10px 0;
	padding: 0;	
	border: 1px solid #ccc;
	background-color: #fff;
	color: #999;
}
a.btn_outline:link, a.btn_outline:visited {
    text-decoration: none;
	font-weight: 400;
	color: #1f75f5;
}
a.btn_outline:hover, a.btn_outline:active {
    text-decoration: none;
	color: #ccc;
}
.btn_outline_white {
	border: 1px solid #AAA;
	background-color: #fff;
	color: #000;
}

/* 2.3 - alt forms styles */
.label-inline {
	clear: none;
	display: block;
	margin: 0;
	padding: 0;
}
.label-inline-mleft {
	clear: none;
	display: block;
	margin: 0 0 0 10px;
	padding: 0;
}
input[type="text"].text-search {
	border: 1px solid #ccc;
	background-color: #fff;
}
select.search_form {
	background-color: #464646;
	color: #fff;	
}
.form-message {
	clear: both;
	margin: 0;
	padding: 10px;
	background-color: #FC8C01;
	color: #203840;
	font-size: 1.23em;
	line-height: 1.4;
	font-weight: 300;
	text-align: center;
}
.gdpr_email {
	margin: 10px 0 15px 0;
	padding: 0;
	font-size: 1em;
	line-height: 1.4;
}

/* 2.3.1 - alt image styles */
.img_inline {
	margin: 0 0 10px 0;
	padding: 0;
}
.img_border {
	margin: 0 0 10px 0;
	padding: 0;
}

/* 2.3.2 - alt forms - validation styles */
label.error {
	clear: both;
	display: block;
	margin: 0;
	padding: 6px 0 0 0;
	font-size: 12px;
	line-height: 130%;
	color: #000;
}
input.error {
	background-color: #FFC;
}
select.error {
	background-color: #FFC;
}

/* 2.4 - top navigation styles */
.navigation {
	float: left;
	width: 100%;
	background-color: #222;
	border-bottom: 1px solid #444;	
}
.navigation-top {
	float: left;
	width: 100%;
	background-color: #4bb30c;
}
.navigation .container-nav, .navigation-top .container-nav, .navigation-top .container-nav-logo {
	position: relative;
	width: 96.4843%;
	max-width: 988px;
	height: auto;
	margin: 0 auto;
	padding: 15px 0 0 0;
}
.navigation .container-nav {
	padding: 5px 0 0 0;
}
.container-nav-logo {
	padding: 0;
	background-color: #222;
}
.ul-show-menu {
	margin: 0 0 15px 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
}
.navigation-top .container-nav .ul-show-menu {
	margin: 0 0 15px 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
}
.ul-show-menu li {
	display: inline;
}
.ul-show-menu li.side-menu  {
	display: none;
}
.ul-show-menu li a {
	margin: 0 12px 0 0;
	color: #fff;
	text-decoration: none;
	font-size: 1.2em;
	line-height: 1.2;
	font-weight: 300;
}
.ul-show-menu li a.first {
	color: #fff;
}
.ul-show-menu li a.basket {
	color: #FC8C01;
}
.ul-show-menu li a:hover, .ul-show-menu li a:active {
    text-decoration: none;
	color: #FC8C01;
}
.navigation-top .ul-show-menu li a {
	margin: 0 12px 0 0;
	color: #fff;
	text-decoration: none;
	font-size: 1em;
	line-height: 1.2;
	font-weight: 400;
	text-transform: uppercase;
}
.navigation-top .ul-show-menu li a.first {
	color: #fff;
}
.navigation-top .ul-show-menu li a:hover, .navigation-top .ul-show-menu li a:active {
    text-decoration: none;
	color: #ccc;
}
.inline-logo {
	display: inline-block;
	margin: 0;
	padding: 0;
	width: 120px;
	height: auto;
	-webkit-transform: translateY(30%);
	-ms-transform: translateY(30%);
	transform: translateY(30%);
}

/* 2.4 - top navigation hamburger */
.burger-wrapper {
	display: inline-block;
	margin: 0 15px 0 0;
	padding: 3px 5px;
	border: 1px solid #fff;
 	box-sizing: border-box;
	width: 27px;
	cursor: pointer;
	-webkit-transform: translateY(30%);
	-ms-transform: translateY(30%);
	transform: translateY(30%);
}
.burger {
    height: 2px;
    background-color: #fff;
    margin: 3px 0;
}

/* 2.4.1 - header side-menu styles (c) 2015 George Lieu licensed under MIT */
html {
	overflow-x: hidden;
}
#page {
	position: relative;
	left: 0;
}
.overlay {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	min-height: 100%;
	width: 100%;
	z-index: 20;
	background: black;
	opacity: 0.5;
	filter: alpha(opacity=50);
}
.mmPushBody {
	width: 100%;
	height: 100%;
	overflow-x: hidden;
}

/* pushbar menu styles */
#mobile-menu {
	position: absolute;
	top: 0;
	background: #333;
	z-index: 99999;
	-webkit-box-shadow: 0 1px 8px #555555;
	-moz-box-shadow: 0 1px 8px #555555;
	-o-box-shadow: 0 1px 8px #555555;
	box-shadow: 0 1px 8px #555555;
	display: none;
	font-family: 'Open Sans';
	font-size: 1em;
	line-height: 1.4;
	font-weight: 300;
	border-right: 1px solid #333;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	-o-box-sizing: content-box;
	box-sizing: content-box;
}
.mobile-menu {
	list-style-type: none;
	margin: 0;
	width: 100%;
	float: left;
	margin-left: 0;
	padding-left: 0;
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}
.mobile-menu ul {
	margin-left: 0;
	padding-left: 0;
}
.mobile-menu ul .expand {
	background: #eeeeee;
}
.mobile-menu .home {
	background-color: #1f75f5;
	color: #fff;
	height: 43px;
	overflow: hidden;
}
.mobile-menu .home i {
	padding-right: 5px;
}
.mobile-menu .home a.active {
	color: #fff !important;
}
.mobile-menu .expand {
	right: 0;
	position: absolute;
	border-left: 1px solid #333;
	padding: 0 10px;
	color: #1f75f5;
	margin-left: 100px;
}
.mobile-menu .expand:hover {
	cursor: pointer;
}
.mobile-menu li {
	display: block;
	border-top: 1px solid #333;
	width: 100%;
	float: left;
	margin-left: 0;
	padding-left: 0;
	position: relative;
}
.mobile-menu li a, .mobile-menu li span, .mobile-menu li .cat_without {
	display: block;
	overflow: hidden;
	white-space: normal;
	color: #fff;
	text-decoration: none;
	padding: 10px;
	padding-left: 15px;
}
.mobile-menu li a.active {
	color: #da3287;
}
.mobile-menu li li {
	background: #666;
}
.mobile-menu li li a {
	padding-left: 25px;
}
.mobile-menu input.simple:focus {
	border: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-o-box-shadow: none;
	box-shadow: none;
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
	transition: none;
}
.mobile-menu [class^="icon-"]:before {
	margin-right: 0;
	margin-left: 0;
}
.mobile-menu [class*=" icon-"]:before {
	margin-right: 0;
	margin-left: 0;
}

/* 2.5 - home_header with tint */
.container_tint {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.dark_tint_horiz {
  background-image: -webkit-linear-gradient(90deg, rgba(21, 25, 37, 1) 0%, rgba(21, 25, 37, 0.7) 55%, rgba(21, 25, 37, 0) 100%);
  background-image: -moz-linear-gradient(90deg, rgba(21, 25, 37, 1) 0%, rgba(21, 25, 37, 0.7) 55%, rgba(21, 25, 37, 0) 100%);
  background-image: linear-gradient(90deg, rgba(21, 25, 37, 1) 0%, rgba(21, 25, 37, 0.7) 55%, rgba(21, 25, 37, 0) 100%);
}
.header_box {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: perspective(1px) translate(-50%, -50%);
  -ms-transform: perspective(1px) translate(-50%, -50%);
  transform: perspective(1px) translate(-50%, -50%);
  width: 96.4843%;
  max-width: 1400px;
}

/* 3 - tinted divider straps styles */
.title-strap {
	margin: 0 0 12px 0;
	padding: 10px 8px 10px 0;
	border-bottom: 1px dashed #b4b4b4;
}
.h1-strap, .h2-strap {
	margin: 0;
	padding: 0;
	font-size: 1.3em;
	line-height: 1.2;
	font-weight: 400;
	color: #000;
    text-transform: capitalize;
	letter-spacing: 1px;
}

/* 3.1 - category image block styles */
.cat-image-alloy, .cat-image-adbluecaps, .cat-image-plant, .cat-image-agri, .cat-image-wholesale, .cat-image-motorhome {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	height: 210px;
 	box-sizing: border-box;
	clear: both;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	background-color: #333;
}
.cat-image-alloy {
	background-image: url('http://www.themediaroom.co.uk/dsl/images/content/adblue-filler-neck-range.jpg');
}
.cat-image-adbluecaps {
	background-image: url('http://www.themediaroom.co.uk/dsl/images/content/lockable-adblue-cap-with-keys.jpg');
}
.cat-image-plant {
	background-image: url('http://www.themediaroom.co.uk/dsl/images/content/plant-heavy-machinery-fitted-with-lockable-cap.jpg');	
}
.cat-image-agri {
	background-image: url('http://www.themediaroom.co.uk/dsl/images/content/plant-agricultural-farm-tractor.jpg');
}
.cat-image-wholesale {
	background-image: url('http://www.themediaroom.co.uk/dsl/images/content/palette-of-fuelcaps-filler-necks-in-boxes.jpg');	
}
.cat-image-motorhome {
	background-image: url('http://www.themediaroom.co.uk/dsl/images/content/motorhome-parked-by-mountain.jpg');
}
.cat-titlebox {
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 0;
	padding: 15px 10px 10px 20px;
	background-color: rgba(255, 255, 255, 0.70);
 	box-sizing: border-box;
/*	height: 100%;*/
}

/* 3.2 - star rating styles */
.trustp_stars {
	margin: 0 0 10px 0;
	padding: 0;
}
.star_reviews {
	margin: 0;
	padding: 0;
	width: 160px;
	height: auto;
}
.cust_reviews {
	margin: 0 6px 0 0;
	padding: 0;
	color: #4bb30c;
}

/* 3.7 - about us profile */
.profile_image {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	border: 6px solid #ccc;
	height: auto;
	-webkit-border-radius: 50%; 
	-moz-border-radius: 50%; 
	border-radius: 50%;	
}

/* 3.8 - shopping cart structure */
.tint_box {
	margin: 0 0 15px 0;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #eeeeee;
	-webkit-border-radius: 5px; 
	-moz-border-radius: 5px; 
	border-radius: 5px;
	background-color: #F7F7F7;
}
.form-message {
	margin: 0;
	padding: 10px 0;
	background-color: #F63;
	color: #fff;
	font-size: 1.2em;
	line-height: 1.4;
	font-weight: 300;
	text-align: center;
}

/* 3.9 - popup modal styles */
.pop-hide {
	display: none;
}
.pop-overlay {
	display: block;
	margin: 0;
	padding: 20px;
	border-radius: 5px;
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	box-sizing: border-box;
	background-color: #333;
	color: #fff;
}
.modal-button {
	clear: both;
	display: block;
	float: left;
	height: 44px;
	margin: 0 0 10px 0;
	padding: 0;
	border-radius: 3px;
	-moz-border-radius: 3px; 
	-webkit-border-radius: 3px;
	border: none;
	background-color: #F63;
	font-size: 13px;
	font-weight: 300;
	line-height: 1.4;
	text-align: center;
	color: #fff;
	box-sizing: border-box;
	cursor: pointer;
    -webkit-appearance: button;
 }
.my_popup_close:hover, .my_popup_close:focus {
	color: #fff;
	background-color: #333;
	box-sizing: border-box;
}

/* 4 - cart table styles */
table.results {
	border: 0;
}
table.results thead {
	display: none;
}
table.results tr {
	margin-bottom: 10px;
	display: block;
}
table.results tr:after {
	content: "";
	display: table;
	clear: both;
}
table.results tr:before {
	display: block;
	border-bottom: 2px solid #ddd;
}
table.results td {
	box-sizing: border-box;
	display: block;
	padding: 6px 0;
	float: left;
	clear: left;
	width: 100%;
	text-align: right;
	font-size: 13px;
	border-bottom: 1px dotted #ccc;
}
table.results td:last-child {
	border-bottom: 0;
}
table.results td:before {
	content: attr(data-label);
	float: left;
	text-transform: uppercase;
	font-weight: 400;
}

/* 4.1 - YouTube embed styles */
.video-container {
	position: relative;
	margin-bottom: 10px;
	padding-bottom: 58%;
	height: 0; 
	overflow: hidden;
	max-width: 100%; 
}
.video-container iframe, .video-container object, .video-container embed {
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%;
}

/* 4.2 - trustpilot carousel styles */
.badge_wrapper {
	margin: 0;
	padding: 0;
	position: relative;
}
.trustp_stars {
	margin: 0 0 10px 0;
	padding: 0;
}
.trustp_stars_colour {
	margin: 0 6px 0 0;
	padding: 0;
	color: #4bb30c;
}
.carousel_title {
	margin: 0;
	padding: 0;
	font-family: 'Fira Sans', Tahoma, Geneva, sans-serif; /* 400,700 */
	font-weight: 700;
	font-size: 1.8em;
	line-height: 1.2;
	color: #000;
    text-transform: capitalize;
}
.carousel_title_plus {
	margin: 0 0 5px 0;
}
.carousel_subheader {
	margin: 6px 0;
	padding: 0;
	font-size: 1.1em;
	line-height: 1.2;
	font-weight: 400;
	color: #222;
    text-transform: uppercase;	
}
.carousel_copy {
	margin: 0;
	padding: 0;
	font-size: 1em;
	line-height: 1.4;
}

/* 5 - login styles */
.login-watermark {
	background-image: url('http://www.themediaroom.co.uk/dsl/images/admin/header-bngd-watermark.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	background-color: #fff;
	height: 800px;
	overflow: hidden;
}
.container_tint {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}
.orange_tint {
	background: #FC8C01;
	background-color: rgba(252, 140, 1, 0.8);
}
.loginWrapper {
	margin: 0 auto 0 auto;
	padding: 0;
	-webkit-transform: translateY(35%);
	-ms-transform: translateY(35%);
	transform: translateY(35%);	
}
.h2_title_login {
	margin: 0 0 18px 0;
	padding: 0;
	font-family: 'Fira Sans', Tahoma, Geneva, sans-serif;
	font-size: 2.5em;
	line-height: 1.1;
	font-weight: 700;
	color: #fff;	
	text-align: center;
}
.mouse_login {
	margin: 0 0 18px 0;
	padding: 0;
	font-size: 1em;
	line-height: 1.3;
	text-align: center;
	color: #fff;
}
.loginWrapper .btn_outline {
	margin: 0 0 10px 0;
	padding: 0;	
	border: 1px solid #fff;
	background-color: transparent;
}

/* 7 - 2gdpr cookie consent */
.cc-window{opacity:1;-webkit-transition:opacity 1s ease;transition:opacity 1s ease}.cc-window.cc-invisible{opacity:0}.cc-animate.cc-revoke{-webkit-transition:transform 1s ease;-webkit-transition:-webkit-transform 1s ease;transition:-webkit-transform 1s ease;transition:transform 1s ease;transition:transform 1s ease,-webkit-transform 1s ease}.cc-animate.cc-revoke.cc-top{-webkit-transform:translateY(-2em);transform:translateY(-2em)}.cc-animate.cc-revoke.cc-bottom{-webkit-transform:translateY(2em);transform:translateY(2em)}.cc-animate.cc-revoke.cc-active.cc-top{-webkit-transform:translateY(0);transform:translateY(0)}.cc-animate.cc-revoke.cc-active.cc-bottom{-webkit-transform:translateY(0);transform:translateY(0)}.cc-revoke:hover{-webkit-transform:translateY(0);transform:translateY(0)}.cc-grower{max-height:0;overflow:hidden;-webkit-transition:max-height 1s;transition:max-height 1s}
.cc-revoke,.cc-window {position:fixed;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;
	font-size: 1.2em; line-height: 1.4em; background-color: rgba(0,0,0,0.8); color: #fff;
	display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;z-index:9999}
.cc-window.cc-static{position:static}.cc-window.cc-floating{padding:2em;max-width:24em;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.cc-window.cc-banner{padding:1em 1.8em;width:100%;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.cc-revoke{padding:.5em}.cc-revoke:hover{text-decoration:underline}.cc-header{font-size:18px;font-weight:300}.cc-btn,.cc-close,.cc-link,.cc-revoke{cursor:pointer}
a.cc-link{
	display: inline-block; text-decoration: underline; color:#ccc; font-weight: 300;
}
a.cc-link:hover{opacity:1; text-decoration:none; color:#fff;}
a.cc-link:active,a.cc-link:visited{text-decoration:none; color:#fff;}
.cc-btn{
	display: block; padding: .8em .8em;
	font-size: 1em; font-weight: 300; color: #fff;
	text-align: center;white-space: nowrap;
	background-color: #4bb30c;
}
a.cc-allow:hover, a.cc-deny:hover {opacity:1; text-decoration:none; color:#fff;}
a.cc-allow:active,a.cc-allow:visited, a.cc-deny:active,a.cc-deny:visited {text-decoration:none; color:#fff;}

.cc-highlight .cc-btn:first-child{background-color:transparent;border-color:transparent}.cc-highlight .cc-btn:first-child:focus,.cc-highlight .cc-btn:first-child:hover{background-color:transparent;text-decoration:underline}.cc-close{display:block;position:absolute;top:.5em;right:.5em;font-size:1.6em;opacity:.9;line-height:.75}.cc-close:focus,.cc-close:hover{opacity:1}
.cc-revoke.cc-top{top:0;left:3em;border-bottom-left-radius:.5em;border-bottom-right-radius:.5em}.cc-revoke.cc-bottom{bottom:0;left:3em;border-top-left-radius:.5em;border-top-right-radius:.5em}.cc-revoke.cc-left{left:3em;right:unset}.cc-revoke.cc-right{right:3em;left:unset}.cc-top{top:1em}.cc-left{left:1em}.cc-right{right:1em}.cc-bottom{bottom:1em}.cc-floating>.cc-link{margin-bottom:1em}
.cc-floating .cc-message{
	display: block; margin-bottom: 1em; color: #fff;
}
.cc-window.cc-floating .cc-compliance{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto}.cc-window.cc-banner{-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.cc-banner.cc-top{left:0;right:0;top:0}
.cc-banner.cc-bottom{left:0;right:0;bottom:0}.cc-banner .cc-message{display:block;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;max-width:100%;margin-right:1em}.cc-compliance{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:justify;align-content:space-between}.cc-floating .cc-compliance>.cc-btn{-webkit-box-flex:1;-ms-flex:1;flex:1}.cc-btn+.cc-btn{margin-left:.5em}
.cc-revoke{display:none;}

@media print{.cc-revoke,.cc-window{display:none}}@media screen and (max-width:900px){.cc-btn{white-space:normal;}}@media screen and (max-width:414px) and (orientation:portrait),screen and (max-width:736px) and (orientation:landscape){.cc-window.cc-top{top:0}.cc-window.cc-bottom{bottom:0}.cc-window.cc-banner,.cc-window.cc-floating,.cc-window.cc-left,.cc-window.cc-right{left:0;right:0}.cc-window.cc-banner{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.cc-window.cc-banner .cc-compliance{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.cc-window.cc-floating{max-width:none}.cc-window .cc-message{margin-bottom:1em}.cc-window.cc-banner{-webkit-box-align:unset;-ms-flex-align:unset;align-items:unset}.cc-window.cc-banner .cc-message{margin-right:0}}
.cc-floating.cc-theme-classic{
	padding: 1.2em; background: #000; background: rgba(0,0,0,0.8);
}
.cc-floating.cc-type-info.cc-theme-classic .cc-compliance{text-align:center;display:inline;-webkit-box-flex:0;-ms-flex:none;flex:none}
.cc-theme-classic .cc-btn{
	border-radius:5px;
}
.cc-theme-classic .cc-btn:last-child{min-width:140px}.cc-floating.cc-type-info.cc-theme-classic .cc-btn{display:inline-block}
.cc-theme-edgeless.cc-window{padding:0}.cc-floating.cc-theme-edgeless .cc-message{margin:2em;margin-bottom:1.5em}.cc-banner.cc-theme-edgeless .cc-btn{margin:0;padding:.8em 1.8em;height:100%}.cc-banner.cc-theme-edgeless .cc-message{margin-left:1em}.cc-floating.cc-theme-edgeless .cc-btn+.cc-btn{margin-left:0}

/* 8 - footer styles */
.footer {
	margin: 0;
	padding: 8px 0 0 0;
}
.footer_sub {
	clear: both;
	margin: 0;
	padding: 8px 0 0 0;
	border-top: 1px solid #666;
}
.footer .h6-footer {
	margin: 0 0 8px 0;
	padding: 0;
	color: #fff;
	font-size: 1.2em;
	line-height: 1.4;
	font-weight: 300;
}
.footer .h6-footer span {
	color: #ccc;
}
.footer .mouse-grey {
	margin: 0 0 8px 0;
	font-size: 1em;
	line-height: 1.4;
	color: #ccc;
}
.footer a:link, .footer a:visited {
    text-decoration: underline;
	color: #fff;
}
.footer a:hover, .footer a:active {
    text-decoration: none;
	color: #ccc;
}
.footer a.tel_link:link, .footer a.tel_link:visited {
    text-decoration: none;
	color: #fff;
}
.footer a.tel_link:hover, .footer a.tel_link:active {
    text-decoration: none;
	color: #ddd;
}

/* 9.1 - mediaQueries 996px styles */
@media(max-width: 996px) {
section.header_home {
  background-size: cover;
  background-position: top center;
  height: 40vh;
}
.ul-show-menu li.top-menu {
	display: none;
}
.ul-show-menu li.side-menu {
	display: inline;
}
.ul-show-menu li a.first {
	color: #fff;
	margin: 0;
}
.ul-show-menu li a.first:hover, .ul-show-menu li a.first:active {
    text-decoration: none;
	color: #fff;
}
.cc-cookies a.cc-cookie-accept, .cc-cookies a.cc-cookie-decline, .cc-cookies a.cc-cookie-reset {
	display: block; margin: 1em 0;
}
.navigation_top .container-nav .ul-show-menu {
	text-align: center;
}
.h1_header {
	margin: 0 0 10px 0;
	padding: 0;
	font-size: 4em;
	line-height: 1.1;
}
.h4_header {
	margin: 0;
	padding: 0;
	font-size: 1.5em;
	line-height: 1.4;
}
.h6-title-caption {
	font-size: 1em;
	line-height: 1.4;
}
.h3-four-block {
	margin: 0 0 4px 0;
	padding: 0;
	font-size: 1.7em;
	line-height: 1.2;
}
.h2-title {
	margin: 0 0 6px 0;
	padding: 0;
	font-size: 1.5em;
	line-height: 1.1;
}
.h3-title {
	margin: 8px 0 6px 0;
	padding: 0;
	font-size: 1.5em;
	line-height: 1.2;
}
.h3-stacked-sml {
	margin: 0 0 6px 0;
	padding: 0;
	font-size: 1.4em;
}	
} /* end 996px */

/* 9.3 - mediaQueries 420px styles */
@media(max-width: 420px) {
section.main {
	min-height: 200px;
}
.container {
	float: left;
	width: 92%;
	margin: 0 0 0 4%;
	padding: 10px 0;
}
.column {
	margin: 0 0 0 0;
}
.column:first-child { margin-left: 0; }
.span_1 {
	width: 100%;	
}
.span_2 {
	width: 100%;	
}
.span_3  {
	width: 100%;	
}
.span_4, .span_4pop {
	width: 100%;	
}
.span_5 {
	width: 100%;	
}
.span_6 {
	width: 100%;	
}
.span_7, .span_7intro {
	width: 100%;	
}
.span_8 {
	width: 100%;	
}
.span_9 {
	width: 100%;	
}
.span_10 {
	width: 100%;
}
.span_11 {
	width: 100%;	
}
.span_12 {
	width: 100%;	
}
.bp_label {
	clear: both;
	display: block;
	margin: 0 0 15px 0;
	padding: 0;
}
.bp_label:last-child { margin-bottom: 0; }
.cc-cookies {
	position: relative; float: left;
}

/* alt mobile column styles */
.container-mb-fwidth {
	float: left;
	width: 100%;
	margin: 0;
	padding: 10px 0;	
}
.cat-image-alloy, .cat-image-adbluecaps, .cat-image-plant, .cat-image-agri, .cat-image-wholesale, .cat-image-motorhome {
	margin: 0 0 10px 0;
	padding: 0;
}
.h1_header {
	margin: 0 0 10px 0;
	padding: 0;
	font-size: 2.6em;
	line-height: 1.1;
}
.h4_header {
	margin: 0;
	padding: 0;
	font-size: 1.1em;
	line-height: 1.4;
}
.mb-tmargin {
	margin-top: 10px;	
}
.mb-bmargin {
	margin-bottom: 10px;	
}
.cat-titlebox {
	padding: 15px 0 10px 10px;
}
.column-catLeft, .column-splitLeft {
	margin: 0 0 2px 0;
	height: 200px;
}
.cat-split-alloy {
	height: 200px;
}
.h1-product {
	margin: 0 0 6px 0;
	padding: 0;
	font-size: 2em;
}
.h3-stacked {
	margin: 8px 0 6px 0;
	font-size: 1.8em;
}
.h3-stacked-sml {
	margin: 0 0 6px 0;
	padding: 0;
	font-size: 1.4em;
}
.h3-breadcrumb {
	font-size: 1.1em;
	line-height: 1.2;
}
.footer .h6-footer {
	font-size: 1em;
	line-height: 1.4;
}
.label-inline {
	margin: 0 0 10px 0;
	padding: 0;
}
.mb-img-spacer {
	margin: 0 0 0 2%;	
}
.span_2six {
	width: 60%;
}
.span_4three {
	width: 36%;	
}
.span_4align {
	width: 32%;
	margin-right: 2%;
}
.span_8nine {
	width: 60%;	
}
.span_4pop {
	width: 98%;	
}
.span_6cart {
	width: 46%;
}
.span_3six {
	width: 60%;
	margin-left: auto;
	margin-right: auto;
}
.span_4cart {
	width: 25%;
}
.span_2cart {
	width: 25%;
}
.row-bottom-rule {
	margin: 0 0 5px 0;
	padding: 0 0 5px 0;
}
.label-inline {
	margin: 0 0 10px 0;
	padding: 0;
}
.inline-logo {
	-webkit-transform: translateY(20%);
	-ms-transform: translateY(20%);
	transform: translateY(20%);
}
.burger-wrapper {
	-webkit-transform: translateY(30%);
	-ms-transform: translateY(30%);
	transform: translateY(30%);
}
.rem_mobile {
	display: none;	
}
.btn_vertical {
	margin: 0;
	padding: 0;
	top: 0%;
	-webkit-transform: translateY(0%);
	-ms-transform: translateY(0%);
	transform: translateY(0%);	
}
.centre_text {
	text-align: left;	
}
.container-nav-logo {
	padding: 5px 0 0 0;
}
.top_margin_img {
	margin-top: 10px;	
}

/* 5 login styles */
.login-watermark {
	height: 500px;
}
.loginWrapper {
	-webkit-transform: translateY(13%);
	-ms-transform: translateY(13%);
	transform: translateY(13%);	
}
} /* end 420px */

/* 9.4 - mediaQueries 375px styles */
@media(max-width: 375px) {

} /* end 375px */

/* 9.5 - mediaQueries 320px styles */
@media(max-width: 320px) {


} /* end 320px */