/** Add your custom styles here **/




/** pagination block colours **/

.pagination ul li span {
  display: block;
  height: 30px;
  width: 30px;
  text-align: center;
  padding: 5px 0;
  color: #c91401;
  background: #ffffe7;
  border: 1px solid #cccccc;
}

.pagination ul li a:hover, .pagination ul li a:active {
  background: #c91401;
  color: white;
  border: 1px solid #c91401;
}

/** close pagination cols **/

/** category box colour hover **/

.category:hover .info,
.category:active .info {
  background: #E7322A;
  color: #ffffe7
}
.category:hover,.category:active {
  border-color: #E7322A;
}
.category .info {
  position: absolute;
  background: #e5e5e5;
  color: #ff6c00;
  padding: 20px 10px;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 0.80em;
  bottom: 0;
  left: 0;
  width: 100%;
  display: block;
  min-height: 80px;
}
.feature-categories ul li:hover a,
.feature-categories ul liactive a {
  color: #E7322A !important;
}

/** end category box colour hover **/

/** make tel no box bigger in contact us page **/
input [type="tel"] {
    border: 1px solid #ccc;
    padding: 6px 4px;
    outline: none;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #777;
    margin: 0;
    width: 310px;
    max-width: 100%;
    display: block;
    margin-bottom: 20px;
    background: #fff;
}
form input[type="tel"] {
    border-radius: 0px;
    border: 1px solid #e5e5e5;
    -webkit-border-radius: 0px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 35px;
    padding-left: 15px;
    padding-right: 15px;
}
/** END tel bigger **/
.search select.select,
.search input[type="text"].select {
  background-color: #f2f2f2;
  padding: 0 0px;
  padding-left: 20px;
}
.display form .form-group .numeric {
  width: 70px;
  padding-right: 0px;
}
form label .required {
  color: #ff0000;
  font-weight: bold;
  font-size: 1.2em;
}


/** banner styles **/
.banner .cycle-slideshow {
  background: url(/assets/file/img/bg-origcol.jpg) no-repeat;

  
}

.banner .cycle-slideshow .slide {
  padding: 0px 0px;
  width: 100%;
	height: 410px;
}
.banner .cycle-slideshow .slide .txt .title {
  color: #000000;
  text-transform: uppercase;
  display: block;
  margin-bottom: 20px;
  font-size: 1.9em;
  line-height: 1.2em;
  margin-top: 40px;
}
.banner .cycle-slideshow .slide .img {
  width: 45%;
  text-align: right;
  float: left;
}

{# .banner .cycle-slideshow .slide .img img {
  width: 90% !important;
height: 90% !important;
} #}





.banner .cycle-slideshow .slide .txt {
  float: right;
  width: 50%;
}
.bannersubhead {color: #000000; font-size: 1.1em; }
.bannerthirdline {color: #000000; font-size: 1.5em; }
.banner .pager {
  position: absolute;
  height: 50px;}

.banner .pager span:hover,
.banner .pager span:active,
.banner .pager span.cycle-pager-active {
  color: #E7322A;
}
.banner .pager span {
  color: #cccccc;
 }

/** mobile product styles **/
@media only screen and (max-width: 959px) and (min-width: 768px) {
  .product.full .title {
    font-size: 0.8em;
  }

  .product.full .price-area {
    width: 218px;
  }

  .product.full .price-area .block .price-wrap {
    float: none;
  }

  .product.full .price-area .block .quantity {
    width: 60px;
    margin-top: 25px;
  }
}

/** mobile accounts/invoices styles **/

.ref {
  text-transform: uppercase;
 font-size: 1.1em;
}
.ref strong {
  font-size: 1.2em;
}
.zrow .zprod-row{
  border-bottom: 1px solid #e5e5e5;
  padding: 7px 0; font-size: 1.1em;
}
.order-details {
	display: inline; 
}

.display-mobile {
	display: none;
}

@media only screen and (max-width: 767px) {
	.totals {
		width: 70% !important;
	}

	.totals.total-price {
		width: 30% !important;
	}

	.order-details {
		display: inline-block;
		width: 90px;
		margin-right: -4px;
	}

	.order-details input[type="text"] {
		display: inline-block;
		width: 80px;
	}

	.display-mobile {
    display: inline-block;
		width: 30px;
		margin-right: -4px;
		text-align: left;
  }
}

.text-right {
	text-align: right;
}
.totals {
	text-align: right;
  font-size: 1.3em;
  font-weight: bold;
}
.totals .smaller {
  font-weight: normal;
  font-size: 0.8em;
}

.total-value-right {text-align: right;}

@media only screen and (max-width: 767px) {
.total-value-right {text-align: left;}
}

.delivery-options input[type="text"], .delivery-options input[type="email"], .delivery-options textarea, .delivery-options select {
	display: block;  
	width: 300px;
}

@media (max-width: 767px) {
  .hide-mobile {
    display: none;
  }
} 

.code {
  font-size: 0.75em; margin-top: 0px;
  text-transform: uppercase;
  line-height: 1.5em;
  display: block;
}

@media only screen and (max-width: 767px)
{
	
/* Hide Classes */
	.hide-sm {
		display: none;
	}

 table.saved-basket-lines td:nth-of-type(1):before { content: "Code"; }
	table.saved-basket-lines td:nth-of-type(2):before { content: "Description"; }
	table.saved-basket-lines td:nth-of-type(3):before { content: "Price"; text-align: left; }
	table.saved-basket-lines td:nth-of-type(4):before { content: "Quantity"; text-align: left; }
	table.saved-basket-lines td:nth-of-type(5):before { content: "Line Price"; text-align: left; }

  table.my-products td:nth-of-type(1):before { content: "Description"; }
  table.my-products td:nth-of-type(2):before { content: "Invoice Reference"; }
  table.my-products td:nth-of-type(3):before { content: "Date"; text-align: left; }
  table.my-products td:nth-of-type(4):before { content: "Last Quantity"; text-align: left; }
  table.my-products td:nth-of-type(5):before { content: "Quanity Required"; text-align: left; }
  table.my-products td:nth-of-type(6):before { content: "Invoice Price"; }
  table.my-products td:nth-of-type(7):before { content: "Required"; }
  table.my-products td:nth-of-type(8):before { content: "z"; }

  table.transactions td:nth-of-type(1):before { content: "Our Ref"; }
  table.transactions td:nth-of-type(2):before { content: "Customer Ref"; }
  table.transactions td:nth-of-type(3):before { content: "Transaction Date"; }
  table.transactions td:nth-of-type(4):before { content: "Transaction Type"; }
  table.transactions td:nth-of-type(5):before { content: "Payment Date"; }
  table.transactions td:nth-of-type(6):before { content: "Amount"; text-align: left; }
  table.transactions td:nth-of-type(7):before { content: "Outstanding"; text-align: left; }

	
}



.basket-push {
  position: relative;
  z-index: 999;
  background: white;
  padding-top: 0px;
  padding-bottom: 20px;
  height: inherit;
  margin-bottom: 20px;
}
.head {
  margin: -10px 0 5px;
}
.breadcrumbs ul li a:hover {
  color: #c91401;
}
.checkout-procedure li.active {
  background: #c91401;
  position: relative;
}
.checkout-procedure li.active::after {
  content: '';
  position: absolute;
  top: 0;
  right: -25px;
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 25px solid #c91401;
  z-index: 2;
}
.md-device-menu.active ul li a {
		width: 100%;
		display: block;
		color: #c91401;
		padding-bottom: 10px;
		margin-bottom: 10px;
		border-bottom: 1px solid #f4f4f4;
		font-size: 1.2em;
	}
.md-close {
		width: 30px;
		height: 30px;
		background: #c91401;
		color: white;
		border-radius: 50%;
		-webkit-border-radius: 50%;
		float: right;
		border-color: transparent;
		font-size: 1.5em;
		padding: 0;
		line-height: 1;
		text-shadow: 0px 1px #ffffff;
	}
.md-close:hover, .md-close:active, .md-close:focus {
		background: #ffffe7; 	color: #c91401;
		border-color: #c91401; border-radius: 50%;
	}
.md-device-menu {color: #c91401;}
.md-device-menu active {color: #c91401;}

/*@media only screen and (max-width:959px)*/
.active.md-device-menu ul li a {
    width: 100%;
    display: block;
    color: #c91401;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #f4f4f4;
    font-size: 1.2em;
}
.btn.btn-head {
		color: #c91401;
		display: inline-block;
	}

.topper {
  background-color: #ffffe7;
  border-bottom: 1px solid #dddddd;
  padding: 10px 0 10px;
  position: fixed;
  width: 100%;
  margin: 0;
  top: 0;
  z-index: 9999;
}

.topper .account-menu li a,
.topper .account-menu li:visited {
  color: #c91401; font-weight:normal;
}
.topper .account-menu li a:hover,
.topper .account-menu li:visited:hover,
.topper .account-menu li a:active,
.topper .account-menu li:visited:active {
  color: #aa1101; text-decoration: none;
}

nav .row ul {
   font-size: 1.0em; 
}

 nav .row ul li:hover a,
nav .row ul li:active a { 
  background-color: #aa1101; 
  color: white;
text-decoration: none;
}
nav .row ul li:visited:hover {
  background-color: #eeeeee; padding: 0;
  color: white;}

nav .row .col-16 .wrap {
  background: #c91401; padding: 0;
  /* Old browsers */
  background: -moz-linear-gradient(top, #c91401 0%, #c91401 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c91401), 

color-stop(100%, #909ca3));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #c91401 0%, #c91401 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #c91401 0%, #c91401 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #c91401 0%, #c91401 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #c91401 0%, #c91401 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@colour1', 

endColorstr='darken(@colour2, 10%)', GradientType=0);
  /* IE6-9 */
  height: 50px; padding: 0;}

nav .row ul li .main-sub.active
{
  height: auto;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  border-left-width: 3px;
  border-left-style: solid;
  border-left-color: #c91401;
  border-right-width: 3px;
  border-right-style: solid;
  border-right-color: #c91401;
  border-bottom-width: 3px;
  border-bottom-style: solid;
  border-bottom-color: #c91401;
  border-top-width: 3px;
  border-top-style: solid;
  border-top-color: #c91401;
}

.feature-categories {
  border: 3px solid #c91401;
  height: 400px;
}
.feature-categories ul li {
  margin: 0;
  padding: 0;
  height: 12.5%;
  font-weight: bold;
  text-transform: uppercase;
  border-bottom: 1px solid #c91401;
  line-height: 2.1em;
 background-color: #ffffe7;
}

.feature-categories ul li.title {
  display: block;
  padding: 10px 15px;
  background-color: #c91401;
  color: white;
  font-size: 1.1em;
  line-height: 1.8em;
}


.newsletter {
  background-color: #c91401;
  color: white;
  overflow: auto;
  font-size: 1.3em;
}

.info {
  font-size: 1.1em;}

.primary {
  background: #c91401;
  color: white;
  font-weight: normal;
  text-transform: uppercase;
  border: 1px solid #c91401;
 -webkit-transition: background-color 0.1s linear 0.1s;
  -moz-transition: background-color 0.1s linear 0.1s;
  -ms-transition: background-color 0.1s linear 0.1s;
  -o-transition: background-color 0.1s linear 0.1s;
  transition: background-color 0.1s linear 0.1s;
  text-shadow: none;
  border-radius: 3px;
  padding: 7px 14px;
  display: inline-block;
  font-size: 12px;
}
.primary:hover,
.primary:active {
  background: #ffffe7;
  border: 1px solid #c91401;
  color: #c91401;
  -webkit-transition: background-color 0.1s linear 0.1s;
  -moz-transition: background-color 0.1s linear 0.1s;
  -ms-transition: background-color 0.1s linear 0.1s;
  -o-transition: background-color 0.1s linear 0.1s;
  transition: background-color 0.1s linear 0.1s;
}

.side-categories ul li.title, .side-filters ul li.title
{
  background-color: #c91401;
  border: 0px solid #96B6DF;
}

nav .row ul li .main-sub {
  width: 100%;
  height: 0;
  background: #ffffe7;
  right: 0;
  top: 47px;
  position: absolute;
  z-index: 200;
  overflow: hidden;
}


.search .search-button {
 font: normal normal normal 20px/1 FontAwesome; right: 15px;
  top: 2px;
  position: absolute;
 color: #c91401;
  border: none;
  background: none;
  margin: 0;
  padding: 0;
}

.multi-basket .multi-wrap .multi-content strong {
  color: #c91401;
  font-size: 1.2em;
}
.multi-basket .multi-wrap .primary:hover, .multi-basket .multi-wrap .primary:active {
  background: #ffffe7;
  border: 1px solid #c91401;
}

.multi-basket {
  visibility: visible;
  opacity: 1.0;
  position: fixed;
  z-index: 9999;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 15px 0;
  background-color:    rgba(255,255,231,0.7);   
  border-top: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  -webkit-transition: visibility .2s ease .0s, opacity .2s ease .2s;
  -moz-transition: visibility .2s ease .0s, opacity .2s ease .2s;
  -ms-transition: visibility .2s ease .0s, opacity .2s ease .2s;
  -o-transition: visibility .2s ease .0s, opacity .2s ease .2s;
  transition: visibility .2s ease .0s, opacity .2s ease .2s;
}
.fa-shopping-basket:before{content:"\f07a"}

/** Mega Menu **/

nav .row ul li .main-sub.active {
	padding-top: 0px !important;     
}	

nav .row ul li .main-sub ul {
	width: 100%;               
	margin: 0;      
}


nav .row ul li .main-sub ul li.title {
	width: 100%;
	font-size: 1.1em;
	color: #005eb8;
}

nav .row ul li .main-sub ul li.title a {
	color: #005eb8; 
}

nav .row ul li .main-sub ul li.title a:hover {
	color: #ff6c00;
}

nav .row ul li .main-sub ul li.sub {
	float: left;
 	width: 23%;
	margin-left: 0;
	margin-right: 2%;
	padding: 5px 0;
  border: none;
}

nav .row ul li .main-sub ul ul {
	padding: 5px 0;
}

@media (max-width: 1199px) {
	nav .row ul li .main-sub ul
		text-align: left;
		padding-top: 10px;
	}

	nav .row ul li .main-sub ul ul {
		text-align: left;
	}

	nav .row ul li .main-sub ul li.sub {
    float: none;
		display: inline-block;
		vertical-align: top;
    margin-left: 0;
    margin-right: -4px;
		padding: 1px 0;
  }
}



/** END Mega Menu **/

/* Style class used on pages with google maps */


#map {
  font-family:Verdana, Geneva, sans-serif;
  font-size:12px;
  width: 100%;
  height: 900px;
  margin-top:10px;
  margin-bottom:10px;
  margin-left:auto;
  margin-right:auto;
  border-top: 1px solid #999999;
  border-right: 1px solid #999999;
  border-bottom: 1px solid #999999;
  border-left: 1px solid #000033;
 
	}

.info_window {
  font-family: Calibri, Arial, Helvetica, sans-serif;
  font-size:14px;
  padding-left:5px;
  padding-top:3px;
  padding-bottom:3px;
  line-height:1.35;
  min-width:320px;
}


.infobox-wrapper {
  display:none;
}

#infobox {
  border:2px solid black;
  margin-top: 8px;
  background:#333;
  color:#FFF;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  padding: .5em 1em;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  text-shadow:0 -1px #000000;
  -webkit-box-shadow: 0 0  8px #000;
  box-shadow: 0 0 8px #000;
}

.shopping-list-order .product.list .price-area {
  height: 73px !important;
}

.upsell-title {
	min-height:50px;
}

/**
 * EasyZoom and thumbnails styles
 */


.easyzoom {
  position: relative;
	margin-left: -22px;

  /* 'Shrink-wrap' the element */
  display: inline-block;
  *display: inline;
  *zoom: 1;
   width: 280px;  
   height: 280px;
   

}

.easyzoom img {
    vertical-align: bottom;    
}

.easyzoom.is-loading img {
  cursor: progress;
}
  
.easyzoom.is-ready img {
  cursor: zoom-in;
}

.easyzoom.is-error  img {
  cursor: not-allowed;
}
  
  
  .easyzoom-flyout {
  position:absolute;
  z-index: 100;
  overflow: hidden;
  background: #FFF; 
  border: 1px solid #E7322A;
	width: 350px;
	height: 280px;
  
}

@media (min-width: 959px) {  
  .easyzoom--adjacent .easyzoom-flyout {
    top: 1px;
    left: 100%;
    width: 501px!important;
    height: 498px!important;
    margin-left: 20px;
  }
}

@media (max-width: 959px) {
  .easyzoom--overlay .easyzoom-flyout {
    top: 0;
    left: 0;
    width: 120%;
    height: 120%;
  }
}
  
.thumbnails{
   margin-top: 20px;
    text-align: center;
}
  
.thumbnails-image {  
    margin: 5px 5px;
    max-width: 40px;
    height: 40px;
} 
  
 .thumbnails li {
   display:inline-block;
    width: 55px;
    height: 55px;
    margin: 0 5px;   
    border: 3px solid white;
           
}  
 
 .thumbnails li:hover{
    border: 3px solid #ff6c00;
   
} 

.product.list .price-area .block .price.cross {
  font-size: 0.8em;
	line-height: 26px;
	
}

.img2 {
	margin-top: 10px;
	text-align:center;
	vertical-align:center;
	min-height:160px;
}

.product .info .title .stock.back-order {
    color: blue;
}