﻿/* Add your custom CSS selectors here */

/* Import font-face for Roboto */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/* Set Roboto font */
html, span, div, button, input, select, textarea {
	font-family: Roboto, sans-serif;
}

html body, h1, h2, h3, h4, h5, h6 {
	font-family: Roboto, sans-serif;
}

/* Hide the "Change Branch" button on the cart page */
.btn-change-branch {
	display: none!important;
}

/* Custom styling for the Faceted Nav block */
.facetFilterHeading {
	text-transform: uppercase;
	font-size: 20px;
}

.facetFilterlHeader h3{
	font-size: 18px;
}

.filter-title h2{
	font-size: 20px;
}

/* Make the homepage slideshow have a fixed height */
.homeSlideShow {
	height: 380px;
}

/* Fix height of product listings to make them consistent, adjust Category headers */
.FlexProductSummaryText > div > div.pt-3.pr-5.pb-2.pl-5 > div {
	height: 300px;
	width: 300px;
}

.productListingImage, .FlexProductImage {
	max-width: 100%!important;
	max-height: 100%!important;
	margin: auto;
	display: block !important;
}

/* Fix margins for search results */
div.FlexProductSummaryText > div > div.productSearchImage > div {
	height: 200px!important;
	width: 200px!important;
}

.category-header h1{
	font-weight: 900;
	color: #800000;
}

.prodlstheader h2{
	font-size: 22px !important;
}

/* Make the Mega Menu have a transparent background and highlight */
.navbar-default {
	background-color: rgba(255, 255, 255, 0);
	border-bottom: none;
	margin-bottom: 0px;
}

.navbar-nav>.open>a {
	background-color: rgba(200, 200, 200, 0.4) !important;
}

/* Fix menu bar text to make it white */
.megaButtonText, .mmTitleText{
	color: #fff !important;
	font-weight: bold;
}

/* Make modal text black */
.modal-body{
	color: #000;
}

/* Custom styles for the menu bar */
div#menuBar {
	background-image: url("/file/menu-background.jpg");
	align-items: center;
}

.PoweredBy {
    display: none!important;
}

.searchbox {
    border: none!important;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
}


/* Fix spacing/coloring of Products navbar dropdown */
li.sublist-column-tsd >div.dropdown-menu {
	background-color: #ffffff!important;
}

div.catPanel > ul.list-unstyled {
    padding-left: 0;
    list-style: none;
}
.pagePanel > ul {
    margin-top: 0;
    margin-bottom: 10px;
	padding-left: 0;
    list-style: none;
}


/* Mobile logo */
img.logo-mobile {
    max-width: 33.33%;
}


/* Vertical align */
.align-items-center {
    display: flex;
    align-items: center;
}

.align-items-end {
    display: flex;
    align-items: flex-end;
}

@media ( max-width:767px) {
    .align-items-center-xs {
        display: flex;
        align-items: center;
    }
    .align-items-end-xs {
        display: flex;
        align-items: flex-end;
    }
    .navbar-form.searchbox {
        padding-right: 15px;
        padding-left: 15px;
    }
}

@media ( min-width:768px) {
    .align-items-center-sm {
        display: flex;
        align-items: center;
    }
    .align-items-end-sm {
        display: flex;
        align-items: flex-end;
    }
}

@media ( min-width: 992px) {
    .align-items-center-md {
        display: flex;
        align-items: center;
    }
    .align-items-end-md {
        display: flex;
        align-items: flex-end;
    }
}

@media ( min-width: 1200px) {
    .align-items-center-lg {
        display: flex;
        align-items: center;
    }
    .align-items-end-md {
        display: flex;
        align-items: flex-end;
    }
}


/* Login Menu */
@media ( max-width:767px) {
    .FlexLoginMenuList .fa,
    .FlexLogLinkIcon {
        font-size: 2em;
    }
    .FlexLogLinkIcon {
        padding-right: 0px;
    }
    .list-inline > li {
        display: inline-block;
        padding-right: 0px;
    }
    .my-account li:last-child {
        display: none!important;
    }
    .my-cart {
        padding-top: 5px!important;
    }
}


/* Responsive Breadcrumb */
@media ( max-width:767px) {
    .breadcrumb li {
        display: none;
    }
    .breadcrumb li:nth-last-child(2) {
        display: inline-block;
    }
    .breadcrumb li:nth-last-child(2)::before {
        content: "\f0d9";
        font: normal normal normal 14px/1 FontAwesome;
    }
}

.featured-header + p{
    border-bottom: 1px solid #ccc;
    line-height: 0.1em;
    margin: 20px 0 30px;
}

.featured-header + p span {
    background: #fff;
    padding: 0 10px;
}


/* Product Details */
.product-code:before {
    content: "SKU: ";
}

.discount-before:before {
    content: "Discount ";
}

.discount-after:after {
    content: " Discount";
}

@media ( max-width:767px) {
    .CategorySummaryBox h3 {
        min-height: 30px;
        max-height: 30px;
        display: flex;
        align-items: center;
        font-size: 16px;
    }
    .CategorySummaryBox h3 span {
        width: 100%;
        padding-right: 5px;
        padding-left: 5px;
    }


/* Hide faceted nav filters on mobile */
    .facetSidebar {
        display: none;
    }

	.product-thumbnails {
		margin-right: -5px;
		margin-left: -5px;
	}

	.product-thumbnails > .col-xs-3 {
		padding-right: 5px;
		padding-left: 5px;
	}

	.quantity-label {
		margin-bottom: 10px;
	}

	.quantity-label .control-label {
		margin-top: 0px!important;
	}

	.form-control {
		font-size: 16px;
	}

	.panel-heading h2 {
		font-size: 18px;
		text-transform: uppercase;
		margin-top: 10px;
	}

	.panel-heading i {
		margin-top: -10px;
	}

}

@media ( min-width:1024px) {
	.categoryProductList{
		margin-right: -5px;
		margin-left: -5px;
	}
    .categoryProductList > .col-md-4 {
        padding-right: 5px;
        padding-left: 5px;
    }
}

/* Edits to the shopping cart page */
/* Make the add to cart button green */
.prodSummary-btnAddToCart, .product-btnAddToCart {
    font-weight: 700;
	background-color:#28a745!important;
	border-color:#28a745!important;
	color:#FFFFFF!important;
}

.prodSummary-btnAddToCart:hover, .product-btnAddToCart:hover {
	background-color:#1e7e34!important;
	border-color:#1e7e34!important;
}

.add-to-cart input {
    width: 100%;
}
.add-to-cart .btnAddCart {
	display:inline-block!important;
}

.cart-collect{
	margin-top:4px;
	margin-bottom:0px;
}

.cart-small-device{
	font-size: 18px;
}

.cart-collect-caption{
	color: #555;
}

.cart-collect-caption:after{
	content: ' ';
}

.cart-collect-branch{
	font-weight: 700;
	padding-right:10px;
}

.cart-collect-buttons a{
	display: block;
	margin-bottom:4px;
}

.cart-collect-buttons a.btn-change-delivery, .cart-collect-buttons a.btn-change-collect {
	background-color: #800000 !important;
	width: 200px;
}	

.tablesaw-cell-content > p{
	display:none
}

.btn-group-checkout, .btn-group-maintain{
	margin-top:5px;
	margin-bottom:15px;
	display: block;
	width: auto!important;
}

.btn-group-checkout {
	padding-right: 0px;
}

.btn-group-maintain {
	padding-left: 4px;
}

.btn-group-checkout a.btn-checkout{
	display: none !important;
}

@media (max-width:767px){
	.cart-collect-caption{
		width:100%;
		float:left;
		margin-bottom:15px;
	}
	.cart-collect-branch{
		display:inline-block;
		padding-top:2px;
	}
	.cart-btnChangeBranch{
		min-width:40%;
		float:right;
	}
	.cart-btnChangeDelivery{
		width:100%;
		margin-top:10px;
	}
	.cart-btnChangeCollect{
		width:100%;
	}
}

	/* Fix the 'Save as Quote' and 'Save as Buying List' options not showing */
	.btn-group-checkout{
		width: 100%;
		display: inline-block !important;
	}
}

@media (min-width:1024px){
	.btn-change-delivery {
		margin-left:10px;
	}
}

@media (min-width:1200px){
	
}


/* Featured Categories, brands, and products */
@media (max-width:767px){
	.featured-categories > .col-xs-6:nth-child(odd){
		padding-right:5px;
		clear:both;
	}
	.featured-categories > .col-xs-6:nth-child(even){
		padding-left:5px;
	}
	.featured-categories h3{
		min-height:30px;
		max-height:30px;
		display: flex;
        align-items: center;
	}
	.featured-categories h3 a{
		width:100%;
	}
	.featured-brands  > .col-xs-6:nth-ch
	.featured-brands  > .col-xs-6:nth-child(odd){
		padding-right: 20px;
		padding-left: 30px;
	}
	.featured-brands  > .col-xs-6:nth-child(even){
		padding-right: 30px;
		padding-left: 20px;
	}
	
	.productList > .row{
		margin-right: -5px;
		margin-left: -5px;
	}
	.productList .col-xs-6 .col-sm-12{
		padding-right: 5px;
		padding-left: 5px;
	}
}


div.groupHeader {font-size: 36px; margin-top: 10px; margin-bottom: 0px; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; }
div.articleTitle > div {font-size: 24px; margin-top: 5px; margin-bottom: 0px; font-family: inherit; font-weight: 500; line-height: 1.1; }
div.articleInfo {display: none; }



/*! Tablesaw - v2.0.3 - 2016-06-03
* https://github.com/filamentgroup/tablesaw
* Copyright (c) 2016 Filament Group; Licensed MIT */

table.tablesaw {
  empty-cells: show;
  max-width: 100%;
  width: 100%;
}

.tablesaw {
  border-collapse: collapse;
  width: 100%;
}


/* Structure */
.tablesaw {
  border: 0;
  padding: 0;
}

.tablesaw th,
.tablesaw td {
  box-sizing: border-box;
  padding: .5em .7em;
}

.tablesaw thead tr:first-child th {
  padding-top: .9em;
  padding-bottom: .7em;
}


/* Table rows have a gray bottom stroke by default */
.tablesaw-stack tbody tr {
  border-bottom: 1px solid %Border Color%;
}

.tablesaw-stack td .tablesaw-cell-label,
.tablesaw-stack th .tablesaw-cell-label {
  display: none;
}


/* Mobile first styles: Begin with the stacked presentation at narrow widths */
@media (max-width : 767px) {
  .tablesaw-stack td,
  .tablesaw-stack th {
    text-align: left;
  }
}
@media only all {
  /* Show the table cells as a block level element */

  .tablesaw-stack td,
  .tablesaw-stack th {
    display: block;
  }

  .tablesaw-stack tr {
    clear: both;
    display: table-row;
  }

  /* Make the label elements a percentage width */
  .tablesaw-stack td .tablesaw-cell-label,
  .tablesaw-stack th .tablesaw-cell-label {
    display: block;
    padding: 0 .6em 0 0;
    width: 30%;
    display: inline-block;
  }

  /* For grouped headers, have a different style to visually separate the levels by classing the first label in each col group */
  .tablesaw-stack th .tablesaw-cell-label-top,
  .tablesaw-stack td .tablesaw-cell-label-top {
    display: block;
    padding: .4em 0;
    margin: .4em 0;

    border-style:solid;
    background-color: %Background Color%;
    border-color:%Border Color%;;
  }

  .tablesaw-cell-label {
    display: block;
  }

  /* Avoid double strokes when stacked */
  .tablesaw-stack tbody th.group {
    margin-top: -1px;
  }

  /* Avoid double strokes when stacked */
  .tablesaw-stack th.group b.tablesaw-cell-label {
    display: none !important;
  }
}

/* Use Bootstrap xs breakpoint */
@media (max-width: 767px) {
  .tablesaw-stack thead td,
  .tablesaw-stack thead th {
    display: none;
  }

  .tablesaw-stack tbody td,
  .tablesaw-stack tbody th {
    clear: left;
    float: left;
    width: 100%;
  }

  .tablesaw-cell-label {
    vertical-align: top;
  }

  .tablesaw-cell-content {
    max-width: 67%;
    display: inline-block;
  }

  .tablesaw-stack td:empty,
  .tablesaw-stack th:empty {
    display: none;
  }
}

/* Media query to show as a standard table at 560px (35em x 16px) or wider */
/* Use Bootstrap xs breakpoint */
@media (min-width: 768px) {
  .tablesaw-stack tr {
    display: table-row;
  }

  /* Show the table header rows */
  .tablesaw-stack td,
  .tablesaw-stack th,
  .tablesaw-stack thead td,
  .tablesaw-stack thead th {
    display: table-cell;
    margin: 0;
  }

  /* Hide the labels in each cell */
  .tablesaw-stack td .tablesaw-cell-label,
  .tablesaw-stack th .tablesaw-cell-label {
    display: none !important;
  }
}


.followUsItems
{
    list-style-type: none;
    margin: 0;
    padding:0;
}
.followUsItems li
{
    display: inline;
}
.followUsItems a
{
    display: inline-block;
}

.followUsItems.DefaultTheme li a
{
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
}

/* Tipso Bubble Styles */
.tipso_bubble , .tipso_bubble > .tipso_arrow {
	-webkit-box-sizing: border-box;
	-moz-box-sizing:    border-box;
	box-sizing:         border-box;
}
.tipso_bubble {
    position: absolute;
	text-align: center;
	border-radius: 6px;
	z-index: 9999;
}
.tipso_style {
	cursor: help;
	border-bottom: 1px dotted;
}
.tipso_title {
	border-radius: 6px 6px 0 0;
}
.tipso_content {
  	word-wrap: break-word;
	padding: 0.5em;
}

/* Tipso Bubble size classes - Similar to Foundation's syntax*/
.tipso_bubble.tiny {
	font-size: 0.6rem;
}
.tipso_bubble.small  {
	font-size: 0.8rem;
}
.tipso_bubble.default {
	font-size: 1rem;
}
.tipso_bubble.large  {
	font-size: 1.2rem;
	width: 100%;
}

/* Tipso Bubble Div */
.tipso_bubble > .tipso_arrow {
	position: absolute;
	width: 0; height: 0;
	border: 8px solid;
	pointer-events: none;
}
.tipso_bubble.top > .tipso_arrow  {
	border-top-color: #000;
	border-right-color: transparent;
	border-left-color: transparent;
	border-bottom-color: transparent;
	top: 100%;
	left: 50%;
	margin-left: -8px;
}
.tipso_bubble.bottom > .tipso_arrow {
	border-bottom-color: #000;
	border-right-color: transparent;
	border-left-color: transparent;
	border-top-color: transparent;
	bottom: 100%;
	left: 50%;
	margin-left: -8px;
}
.tipso_bubble.left > .tipso_arrow {
	border-left-color: #000;
	border-top-color: transparent;
	border-bottom-color: transparent;
	border-right-color: transparent;
	top: 50%;
	left: 100%;
	margin-top: -8px;
}
.tipso_bubble.right > .tipso_arrow {
	border-right-color: #000;
	border-top-color: transparent;
	border-bottom-color: transparent;
	border-left-color: transparent;
	top: 50%;
	right: 100%;
	margin-top: -8px;
}

.tipso_bubble .top_right_corner,
.tipso_bubble.top_right_corner {
	border-bottom-left-radius: 0;
}

.tipso_bubble .bottom_right_corner ,
.tipso_bubble.bottom_right_corner {
	border-top-left-radius: 0;
}

.tipso_bubble .top_left_corner,
.tipso_bubble.top_left_corner {
	border-bottom-right-radius: 0;
}

.tipso_bubble .bottom_left_corner,
.tipso_bubble.bottom_left_corner {
	border-top-right-radius: 0;
}
a.back-to-top {
    display:none;
	position:fixed;
    bottom: 20px;
    right: 20px;
}
