@font-face {
  font-family: 'HelveticaNeue';
  /*src: url('/fonts/helveticaneue-light-webfont.eot'); *//* IE 5-8 */
  src: local('☺'), /* sneakily trick IE */ url('/fonts/helveticaneue-light-webfont.woff') format('woff'), /* FF 3.6, Chrome 5, IE9 */ url('/fonts/helveticaneue-light-webfont.ttf') format('truetype'), /* Opera, Safari */ url('/fonts/helveticaneue-light-webfont.svg#font') format('svg'); /* iOS */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'HelveticaNeue';
  /*src: url('/fonts/helveticaneue-bold-webfont.eot'); *//* IE 5-8 */
  src: local('☺'), /* sneakily trick IE */ url('/fonts/helveticaneue-bold-webfont.woff') format('woff'), /* FF 3.6, Chrome 5, IE9 */ url('/fonts/helveticaneue-bold-webfont.ttf') format('truetype'), /* Opera, Safari */ url('/fonts/helveticaneue-bold-webfont.svg#font') format('svg'); /* iOS */
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'icomoon';
  src:url('/fonts/icomoon.eot');
  src:url('/fonts/icomoon.eot?#iefix') format('embedded-opentype'),
  url('/fonts/icomoon.woff') format('woff'),
  url('/fonts/icomoon.ttf') format('truetype'),
  url('/fonts/icomoon.svg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  min-height: 100%;
}

body {
}

h1, h2, h3 {
  font-family: 'HelveticaNeue', 'Helvetica Light', Helvetica, Arial, sans-serif;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  font-family: 'HelveticaNeue', 'Helvetica Light', Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;

  color: #707274;
  position: inherit;
  font-size: 16px;
  line-height: 24px;

}
p, li {
  font-weight: 300;
}
label {
  display: inline-block;
  font-weight: 700;
  max-width: 100%;
}
a {
  color: #e2231a;
  /*background-color: #fff;*/
  text-decoration: none;
}

a:hover, a:focus {
  color: #ffb819;
  /*background-color: #fff;*/
  text-decoration: underline;
}

a:focus, a:active, a:visited {
  outline: 0;
  /*text-decoration: none;*/
}
b, strong {

  font-weight: bold;

  color: #000;
  /*background-color: #fff;*/
}


.fg-:highlight: {
  color: #00b5cc !important;
}
.bg-:highlight: {
  background-color: #00b5cc !important;
}
.bg-colour-1257 {
  background-color: #00b5cc !important;
}
.fg-colour-1257 {
  color: #00b5cc !important;
}

.fg-:primary: {
  color: #e2231a !important;
}
.bg-:primary: {
  background-color: #e2231a !important;
}
.bg-colour-1255 {
  background-color: #e2231a !important;
}
.fg-colour-1255 {
  color: #e2231a !important;
}

.fg-:secondary: {
  color: #ffb819 !important;
}
.bg-:secondary: {
  background-color: #ffb819 !important;
}
.bg-colour-1256 {
  background-color: #ffb819 !important;
}
.fg-colour-1256 {
  color: #ffb819 !important;
}

.fg-background {
  color: #f1f1f1 !important;
}
.bg-background {
  background-color: #f1f1f1 !important;
}
.bg-colour-1179 {
  background-color: #f1f1f1 !important;
}
.fg-colour-1179 {
  color: #f1f1f1 !important;
}

.fg-bc-blue {
  color: #00b5cc !important;
}
.bg-bc-blue {
  background-color: #00b5cc !important;
}
.bg-colour-1178 {
  background-color: #00b5cc !important;
}
.fg-colour-1178 {
  color: #00b5cc !important;
}

.fg-bc-green {
  color: #c4d82f !important;
}
.bg-bc-green {
  background-color: #c4d82f !important;
}
.bg-colour-1176 {
  background-color: #c4d82f !important;
}
.fg-colour-1176 {
  color: #c4d82f !important;
}

.fg-bc-navy {
  color: #005387 !important;
}
.bg-bc-navy {
  background-color: #005387 !important;
}
.bg-colour-1181 {
  background-color: #005387 !important;
}
.fg-colour-1181 {
  color: #005387 !important;
}

.fg-bc-orange {
  color: #f58426 !important;
}
.bg-bc-orange {
  background-color: #f58426 !important;
}
.bg-colour-1180 {
  background-color: #f58426 !important;
}
.fg-colour-1180 {
  color: #f58426 !important;
}

.fg-bc-pink {
  color: #eb539e !important;
}
.bg-bc-pink {
  background-color: #eb539e !important;
}
.bg-colour-1177 {
  background-color: #eb539e !important;
}
.fg-colour-1177 {
  color: #eb539e !important;
}

.fg-black {
  color: #000 !important;
}
.bg-black {
  background-color: #000 !important;
}
.bg-colour-1175 {
  background-color: #000 !important;
}
.fg-colour-1175 {
  color: #000 !important;
}

.fg-dk-grey {
  color: #333 !important;
}
.bg-dk-grey {
  background-color: #333 !important;
}
.bg-colour-1174 {
  background-color: #333 !important;
}
.fg-colour-1174 {
  color: #333 !important;
}

.fg-green {
  color: #1CC424 !important;
}
.bg-green {
  background-color: #1CC424 !important;
}
.bg-colour-1431 {
  background-color: #1CC424 !important;
}
.fg-colour-1431 {
  color: #1CC424 !important;
}

.fg-lt-grey {
  color: #ccc !important;
}
.bg-lt-grey {
  background-color: #ccc !important;
}
.bg-colour-1172 {
  background-color: #ccc !important;
}
.fg-colour-1172 {
  color: #ccc !important;
}

.fg-red {
  color: #e2231a !important;
}
.bg-red {
  background-color: #e2231a !important;
}
.bg-colour-1170 {
  background-color: #e2231a !important;
}
.fg-colour-1170 {
  color: #e2231a !important;
}

.fg-white {
  color: #fff !important;
}
.bg-white {
  background-color: #fff !important;
}
.bg-colour-1171 {
  background-color: #fff !important;
}
.fg-colour-1171 {
  color: #fff !important;
}

.fg-yellow {
  color: #ffb819 !important;
}
.bg-yellow {
  background-color: #ffb819 !important;
}
.bg-colour-1173 {
  background-color: #ffb819 !important;
}
.fg-colour-1173 {
  color: #ffb819 !important;
}


.clear {
  clear: both;
}
.clear-left {
  clear: left;
}
.clear-right {
  clear: right;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  margin-bottom: .5rem;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.2;
  color: inherit;
}
h4 {
  font-size: 1rem;
}

h1 b {
  color: unset;
}
input[type="text"], textarea, input[type="password"], input[type="number"], input[type="email"] {
  border: 1px solid #ccc;
  font-size: 12pt;
  border-radius: 3px;
  color: #48f;
  font-family: Vag Rounded, Sans-Serif;
  line-height: 20pt;
  padding: 2px 10px;
}

textarea {
  line-height: 16pt;
  padding: 7px 10px;
}

input[type="text"]:focus {
  border: 1px solid #48f;
}
table {
  border-collapse: collapse;
}
.bg-image {

}

#container {
  background-color: white;
  min-height: 100%;
  max-width: 1400px;
  padding: 0 10px 0 0;
  margin: 12px auto 24px;
  display: grid;
  grid-template-columns: 250px auto;
  grid-template-areas:
      "header  header"
      "sidebar content"
      "footer  footer";
  grid-column-gap: 8px;
  
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  
}
#container.content-only {
  grid-template-columns: auto;
  grid-template-areas: "content";
}

.lSAction > a {
  z-index: 9;
}

/* -------------------------------------------------------------------------------------------------------- main page */
.page-body, .indent {
  padding: 0 50px;
}
h1 {
  font-size: 2.5rem;
  line-height: 4rem;
  font-weight: normal;
  text-align: center;
  margin: 0 0 20px 0;
}
#main-page h1 {
  /*margin: 0;*/
}
#product-page h1 {
  margin-bottom: 10px;
}
#main-page .indent h1, #main-page .indent h2, #main-page .indent h3, #main-page .indent h4 {
  margin: 0 -50px;
  padding: 0 50px;
  line-height: 1.75em;
}
#main-page .indent h1 {
  margin-bottom: 20px;
}
#main-page .indent h2 {
  color: #e2231a;
  background-color: #fff;
  font-size: 18pt;
  text-align: left;
  font-weight: bold;
}
#main-page .indent h3 {
  color: #ffb819;
  background-color: #fff;
  font-size: 16pt;
}
#main-page .indent h4 {
  color: #ffb819;
  background-color: #fff;
  font-size: 14pt;
}
#main-page .indent p {
  margin-top: 0;
}
#main-page .indent table {
  border-collapse: collapse;
  font-size: 11pt;
  margin-left: 60px;
  text-align: left;
}
#main-page .indent table td {
  padding: 0.25em 1em;
}
#main-page .indent table th {
  padding: 0.25em 1em;
  color: #e2231a;
  font-weight: bold;
}
#main-page .indent table tr:first-of-type td {
  padding: 0.25em 1em;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
  color: #e2231a;
}

#main-page .indent ul {
  /*font-weight: 300;*/
  font-size: 11pt;
  line-height: 24px;
  margin: 12px 0 12px 68px;
  list-style: none;
  padding: 0 0 0 24px;
}

#main-page .indent li {
  padding-left: 6px;
  text-indent: 0;
}

#main-page .indent li:before {
  font-family: "icomoon";
  content: "\e000";
  color: #c4d82f;
  display: inline-block;
  font-size: 12px;
  height: 20px;
  width: 24px;
  margin-left: -24px;
}
#main-page ul.contents-list {
  background-color: #f0f0f0;
  margin-left: 0;
  margin-top: 0;
  padding: 1em;
  width: 50%;
  min-width: 400px;
}
#main-page ul.contents-list li::before {
  content: none;
}

#main-page .indent ol li::before {
  content: none;
}

#main-page .description ul {
  /*font-weight: 300;*/
  font-size: 11pt;
  line-height: 24px;
  margin: 12px 0 12px 4px;
  list-style: none;
  padding: 0 0 0 24px;
}

#main-page .description li {
  padding-left: 6px;
  text-indent: 0;
}

#main-page .description li:before {
  font-family: "icomoon";
  content: "\e000";
  color: #c4d82f;
  display: inline-block;
  font-size: 12px;
  height: 20px;
  width: 24px;
  margin-left: -24px;
}
#main-page .indent img {
  max-width: 100%;
  margin: 10px;
}
#light-slider {
  /*width: 1400px;*/
}

#main-page {
  grid-area: content;
  min-height: 600px;
}

.page-header img.banner {
  width: 100%;
  display: block;
}
#main-page .page-header h2 {
  font-size: 16pt;
  font-weight: normal;
  margin: 0;
}
.preamble, .cat-desc {
  font-size: 12pt;
  margin: 36px auto 12px;
  text-align: left;
  padding: 0 36px;
  /*max-width: 700px;*/
}
.page-header p {
  font-size: 12pt;
  text-align: center;
  margin-top: 1em;
}
.right {
  float: right;
}
.left {
  float: left;
}
.centre {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* ----------------------------------------------------------------------------------------------------- product info */
#product-info {
  padding: 20px;
}
#product-page {
  /*display: grid;*/
  /*grid-template-columns: 1fr 1fr;*/
  position: relative;
}
/*.product-code {*/
  /*font-weight: 300;*/
  /*position: relative;*/
  /*top: -34px;*/
  /*float: right;*/
  /*right: 48px;*/
/*}*/
.product-code {
  display: block;
  text-align: right;
  height: 30px;
  margin: 0 10px -30px 0;
  font-weight: 300;
  color: #888;
  z-index: 1;
  position: relative;
}
#product-info {
  display: grid;
  grid-template-columns: auto 250px;
  grid-template-areas: "offer       offer"
      "add-to-cart add-to-cart"
      "copy        ask"
      "copy        rhs"
      "copy        copyx";
}
#product-info #product-offer {
  grid-area: offer;
  background-color: #ffffcc;
}
#product-info #add-to-cart {
  grid-area: add-to-cart;
}
#product-info #product-ask {
  grid-area: ask;
  z-index: 1;
  text-align: center;
  margin-top: 20px;
  padding: 0 10px;
}
#product-info #product-ask.style-bc {
  border: 2px solid #c4d82f;
  border-radius: 12px;
}
#product-ask p {
  font-size: 13px;
  margin: 0 10px 30px;
  line-height: 20px;
}
#product-ask h3 {
  margin: 20px 0;
}

#product-info #product-rhs {
  grid-area: rhs;
  /*background-color: #f2a988;*/
  /*height: 400px;*/
  z-index: 1;
  text-align: center;
}
#product-info #product-copy {
  grid-column: 1/-1;
  grid-row: 3/-1;
  /*background-color: #f288a9;*/
  min-height: 500px;
}
#product-info #rhs-blank {
  width: 350px;
  float: right;
  /*background-color: #f288a9;*/
  height: 100%;
  /*opacity: 0.5;*/
  margin-right: -50px;
}
#product-page .offer-instructions {
  font-size: 14pt;
  text-align: center;
  line-height: 4rem;
  border: 1px solid green;
  margin: 1rem 3rem;
  border-radius: 5px;
  color: navy;
  background-color: #dfd;
}
#main-page #product-info h4 {
  margin: 0.75em -20px 0 -20px;
  background-color: unset;
  padding: 0.25em 20px;
}
#main-page #product-info h4, #product-ask h3 {
  color: #ffb819;
  font-size: 16pt;
  background-color: unset;
  line-height: 1.25em;
}

#product-info #product-stock-levels {
  display: none;
}

.offer-banner {
  position: absolute;
  max-width: 50%;
  max-height: 50%;
}
.banner-top-left {
  top: 0;
  left: 0;
}
.banner-top-centre {
  top: 0;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}
.banner-top-right {
  top: 0;
  right: 0;
}
.banner-centre-left {
  left: 0;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
}
.banner-centre-right {
  right: 0;
  top: 0;
  bottom: 0;
  margin-top: auto;
  margin-bottom: auto;
}
.banner-bottom-left {
  bottom: 0;
  left: 0;
}
.banner-bottom-centre {
  bottom: 0;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}
.banner-bottom-right {
  bottom: 0;
  right: 0;
}


/* ---------------------------------------------------------------------------------------------------------- spinner */
#load-more-items {
  float: left;
  width: 100%;
  text-align: center;
  margin: 2em 0;
}
#load-more-items p {
  margin: 0;
}
#load-more-items button {
  margin-left: 1em;
}
#load-more-items .spinner-medium {
  margin-top: 24px;
}
.spinner {
  display: none;
}
.spinner-medium {
  animation: 2s linear 0s normal none infinite spinnerRotate;
  background-image: url("/images/brandconnect/spinner-medium-100.png");
  display: inline-block;
  height: 50px;
  width: 50px;
}

.spinner-small {
  animation: 2s linear 0s normal none infinite spinnerRotate;
  background-image: url("/images/brandconnect/spinner-small-100.png");
  display: inline-block;
  height: 32px;
  width: 32px;
  margin-bottom: -6px;
}

@keyframes spinnerRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ---------------------------------------------------------------------------------------------------- content pages */
#main-page .content-page h2 {
  margin-top: 1em;
}
#main-page .content-page h2:first-of-type {
  margin-top: 0;
}

#main-page .content-page img {
  /*border: 10px solid #ddd;*/
  /*padding: 2px;*/
  /*border-radius: 12px;*/
  /*background-color: white;*/
}
.lead-text {
  border: 1px solid #ccc;
  padding: 19px;
  margin-left: -20px;
  margin-right: -20px;
  font-size: 20px;
  line-height: 30px;
}
span.band {
  margin: 0 !important;
  padding: 0 8px;
  color: white;
  border-radius: 20px;
}

/* ------------------------------------------------------------------------------------------------------------- news */
.news-desc {
  color: #003876;
  line-height: 48px;
  font-size: 24px;
  text-align: center;
}
.news-desc strong {
  color: #eb539e
}
.news-line {
  border-bottom: 1px solid #003876;
  margin: 24px 72px;
}

.news-form {
  width: 460px;
}
.news-form .form-message-container {
  height: 124px;
}

.news-form form {
  width: 460px;
  padding: 48px 24px 22px;
  color: white;
  background-image: url(/images/brandconnect/news-form-bg.jpeg);
  background-position: bottom right;
}
.news-form .form-question {
  margin-bottom: 5px;
}
.news-form .form-question input {
  margin-left: 10px;
  width: 260px;
}

.news-form form label {
  width: 96px;
  text-align: right;
  font-weight: normal;
}

.news-form form input[type="submit"] {
  margin-left: 114px;
}
.news-form .fine-print {
  font-size: 12px;
  margin-left: 111px;
}
.x-form-with-bg {
  border-radius: 20px;
  transition: all 1s ease 0s;
}
.form-raised {
  background: none repeat scroll 0 0 #EEEEEE;
  /*border-radius: 24px 24px 24px 24px;*/
  box-shadow: 0 2px 25px 2px rgba(0, 0, 0, 0.5);
  /*margin: -12px;*/
  /*padding: 12px;*/
  position: relative;
}

.form-container, .form-container form {
  position: relative;
  top: 0;
}

.form-message-container {
  background-color: white;
  border: 1px solid white;
  height: 50%;
  margin-left: 10%;
  margin-top: 15%;
  position: absolute;
  text-align: center;
  top: 0;
  width: 80%;
  border-radius: 24px;
}

.form-message-title {
  font-size: 24px;
  margin-top: 1.5em;
  display: none;
}

.form-message-text {
  display: none;
}

.form-message-container.sent {
  border: 1px solid #c4d82f;
  background-color: #eefff0;
}

.form-message-container.sending {
  border: 1px solid #ffc425;
}

.form-message-container.error {
  border: 1px solid red;
  background-color: #ffeeee;
}

.form-message-container.sent .form-sent {
  display: inherit;
}

.form-message-container.sending .form-sending {
  display: inherit;
}

.form-message-container.error .form-error {
  display: inherit;
}

.auto-subtitle {
  display: none;
}


#products {
}

/* corners --------------------------------------------------------------------------- */
#container {
border-radius: 24px;
}
#header {
border-top-right-radius: 24px;
border-top-left-radius: 24px;
}
.info-nav a {
  /*border-radius: 40px;*/
}
#sidebar-cart {

}
.sb-section {
border-top-right-radius: 24px;

}
#sidebar h3 {
border-top-right-radius: 24px;

}
.sb-slideout-menu {
border-bottom-right-radius: 24px;
}
.sb-search input {
border-radius: 24px;
}
.sb-submenu {
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
}
.sb-bottom, #sidebar-categories {
border-bottom-right-radius: 24px;
}
#main-page h1 {
border-radius: 24px;
}
h3.band, h2.band {
border-radius: 12px;
}
.subcategory-card, .product-card {
border-radius: 12px;
}
.circle-link .circle-70 {
  border-radius: 70px 70px 70px 70px;
}
.lead-text {
border-radius: 24px;
}
.bc-footer {
border-bottom-right-radius: 24px;
border-bottom-left-radius: 24px;
}
#cart {
border-radius: 12px;
}
#cart h2 {
border-top-right-radius: 12px;
border-top-left-radius: 12px;
}
.sheet {
border-radius: 12px;
}
.sheet h2 {
border-top-right-radius: 12px;
border-top-left-radius: 12px;
}
#lightbox img {
border-radius: 24px;
}

/* ---------------------------------------------------------------------------------------------------- sidebar stuff */


#sidebar {
  color: white;
  font-size: 12pt;
  padding-bottom: 20px;
  grid-area: sidebar;
  margin-top: -2px;
}
#sidebar h3 {
  margin: 0;
  display: block;
  padding: 16px 0 14px 20px;
  font-size: 16pt;
  text-align: left;
  z-index: 10;
  position: relative;
}
#sidebar .sb-link {
  color: white;
  text-decoration: none !important;
  max-width: 248px;
  padding: 0 5px 0 20px;
  line-height: 35px;
  position: relative;
  z-index: 10;
}

.sb-section {
  margin-bottom: -20px;
  padding-bottom: 18px;
  border: 2px solid white;
  border-left: none;
  position: relative;
  z-index: 10;
  width: 250px;
}
#sidebar-user, #u1 {
  background-color: #ffb819;
}
#sidebar-user .b-border, #u1 .b-border {
  border-bottom: 1px solid #ffb819;
}
#sidebar-user .sb-link:hover {
  background-color: #e2231a;
  color: #fff;
}
#sidebar-user .sb-link.selected {
  background-color: #e2231a;
  color: #fff;
}

#sidebar-cart {
  background-color: #ffb819;
}
#sidebar-cart .b-border {
  border-bottom: 1px solid #ffb819;
}
#sidebar-cart .sb-link:hover {
  background-color: #e2231a;
  color: #fff;
}
#sidebar-cart .sb-link.selected {
  background-color: #e2231a;
  color: #fff;
}
#sidebar-cart .cart-item-count {
  font-style: italic;
}


#sidebar-slideout-1, #sidebar-slideout-1 .sb-slideout-menu, #c1, #c1 .sb-slideout-menu {
  background-color: #00b5cc;
}
#sidebar-slideout-1 .sb-submenu-link:hover, #sidebar-slideout-1 .sb-submenu-link:focus {
  background-color: #005387;
  color: #00b5cc;
}
#sidebar-slideout-2, #sidebar-slideout-2 .sb-slideout-menu, #c2, #c2 .sb-slideout-menu {
  background-color: #00b5cc;
}
#sidebar-slideout-2 .sb-submenu-link:hover, #sidebar-slideout-2 .sb-submenu-link:focus {
  background-color: #005387;
  color: #00b5cc;
}


#sidebar-categories,
#sidebar-categories h3,
#sidebar-categories .sb-search,
#sidebar-categories .sb-link,
#sidebar-categories .sb-category,
.sb-bottom {
  background-color: #e2231a;
}
#sidebar-categories {
  padding-bottom: 0;
}
#sidebar-categories .sb-link {
  border-bottom: 1px solid #e2231a;
}
#sidebar-categories .has-sidebar-submenu:hover .sb-link, #sidebar-categories .sb-link:hover {
  background-color: #ffb819;
  color: #e2231a;
}
#sidebar-categories .sb-link.selected {
  background-color: #ffb819;
  color: #e2231a;
}

.sb-category {
  position: relative;
}
.sb-submenu {
  background-color: #ffb819;
  width: 248px;
  position: absolute;
  right: 0px;
  padding: 24px 0;
  z-index: 3;
  border: 2px solid white;
  border-left: none;
}
.sb-submenu .sb-submenu-link {
  /*background-color: #e2231a;*/
  color: white;
  border-bottom: 1px solid #ffb819;
  text-decoration: none;
}
.sb-submenu .sb-submenu-link:hover {
  background-color: #e2231a;
  /*color: #f1f1f1;*/
}
.has-sidebar-submenu {
  transition: width 0.1s 0.5s linear;
  width: 248px;
}
.has-sidebar-submenu:hover, .has-sidebar-submenu.show-slideout {
  width: 496px;
}
.has-sidebar-submenu .sb-chevron {
  transition: opacity 0.5s linear;
  opacity: 1;
  padding-right: 5px;
  float: right;
}
.has-sidebar-submenu:hover .sb-chevron, .has-sidebar-submenu.show-slideout .sb-chevron {
  opacity: 0;
}
.has-sidebar-submenu:hover .sb-heading, .has-sidebar-submenu.show-slideout .sb-heading {
  padding-left: 100px;
}
.has-sidebar-submenu .link-text {
  transition: all 0.1s linear;
  padding-left: 0px;
}
.has-sidebar-submenu:hover .link-text, .has-sidebar-submenu.show-slideout .link-text {
  margin-left: -10px;
}
.sb-bottom {
  height: 80px;
  /*border-bottom-right-radius: 24px;*/
  position: relative;
  /*width: 248px;*/
  z-index: 10;
}

.sb-item {
  display: block;
  z-index: 10;
  position: relative;
  font-size: 12pt;
  margin: 0;
  padding: 0 5px 0 20px;
  line-height: 35px;
}


/*.sidebar .search h3 {*/
  /*border: none;*/
  /*padding-bottom: 2px;*/
/*}*/


/*form.sb-item {*/
  /*padding-left: 0;*/
/*}*/




/*.sb-link.selected {*/
  /*!*background-color: #e2231a;*!*/
  /*!*color: #fff;*!*/
/*}*/

.sb-submenu-link {
  text-decoration: none !important;
  line-height: 35px;
  padding: 0 5px 0 20px;
  color: white;
}
/*#sidebar .sb-chevron {*/
  /*float: right;*/
  /*padding-right: 5px;*/

/*}*/
/*.sb-link:hover, .sb-submenu-link:hover {*/
  /*!*background-color: #f58426;*!*/
  /*!*background-color: #00b5cc;*!*/
  /*!*color: #005387;*!*/
/*}*/
/*#sidebar-cart .sb-link:hover {*/
  /*background-color: #e2231a;*/
  /*color: #fff;*/
/*}*/

/*#sidebar-categories .sb-link:hover,*/
/*.has-sidebar-submenu:hover .sb-link,*/
/*.has-sidebar-submenu.active .sb-link,*/
/*.has-sidebar-submenu.selected .sb-link,*/
  /*!*#categories .sb-link.selected span,*!*/
/*.has-sidebar-submenu.show-slideout .sb-link {*/
  /*background-color: #e2231a !important;*/
  /*color: #fff;*/
/*}*/

.sb-slideout-menu p {
  color: white;
  margin: 1em;
}
.sb-slideout-menu {
  width: 248px;
  position: absolute;
  right: -2px;
  padding-bottom: 20px;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
}
.has-sidebar-slideout-menu {
  transition: width 0.1s 0.3s;
  width: 250px;
}
.has-sidebar-slideout-menu:hover {
  width: 498px;
  /*background-color: #ffb819;*/
}
/*#categories .selected {*/
  /*!*background-color: #e2231a;*!*/
/*}*/
.has-sidebar-slideout-menu .sb-chevron {
  transition: opacity 0.5s linear;
  opacity: 1;
  padding-right: 25px;
  float: right;
}
.has-sidebar-slideout-menu:hover .sb-chevron {
  opacity: 0;
}
.has-sidebar-slideout-menu h3 {
  transition: all 0.1s 0.3s;
  /*padding-left: 0;*/
}
.has-sidebar-slideout-menu:hover h3 {
  padding-left: 200px !important;
}

.sb-item.sb-search {
  padding: 0 20px 10px 20px;
}
.sb-search input {
  border-radius: 6px;
  border: none;
  line-height: 35px;
  font-size: 12pt;
  display: block;
  width: 208px;
  padding: 0 10px;
}

#header-nav .extra {
  display: none;
}
.sb-submenu-link strong {
  color: white;
}
/* -------------------------------------------------------------------------------------------- start submenu offsets */


.sb-submenu.menu-offset-0 {top: -26px;}

.sb-submenu.menu-offset-1 {top: -62px;}

.sb-submenu.menu-offset-2 {top: -98px;}

.sb-submenu.menu-offset-3 {top: -134px;}

.sb-submenu.menu-offset-4 {top: -170px;}

.sb-submenu.menu-offset-5 {top: -206px;}

.sb-submenu.menu-offset-6 {top: -242px;}

.sb-submenu.menu-offset-7 {top: -278px;}

.sb-submenu.menu-offset-8 {top: -314px;}

.sb-submenu.menu-offset-9 {top: -350px;}

.sb-submenu.menu-offset-10 {top: -386px;}

.sb-submenu.menu-offset-11 {top: -422px;}

.sb-submenu.menu-offset-12 {top: -458px;}

.sb-submenu.menu-offset-13 {top: -494px;}

.sb-submenu.menu-offset-14 {top: -530px;}

.sb-submenu.menu-offset-15 {top: -566px;}

.sb-submenu.menu-offset-16 {top: -602px;}

.sb-submenu.menu-offset-17 {top: -638px;}

.sb-submenu.menu-offset-18 {top: -674px;}

.sb-submenu.menu-offset-19 {top: -710px;}

.sb-submenu.menu-offset-20 {top: -746px;}



#container.has-sidebar .sb-category.active .item-count-1 {max-height: 36px;}

#container.has-sidebar .sb-category.active .item-count-2 {max-height: 72px;}

#container.has-sidebar .sb-category.active .item-count-3 {max-height: 108px;}

#container.has-sidebar .sb-category.active .item-count-4 {max-height: 144px;}

#container.has-sidebar .sb-category.active .item-count-5 {max-height: 180px;}

#container.has-sidebar .sb-category.active .item-count-6 {max-height: 216px;}

#container.has-sidebar .sb-category.active .item-count-7 {max-height: 252px;}

#container.has-sidebar .sb-category.active .item-count-8 {max-height: 288px;}

#container.has-sidebar .sb-category.active .item-count-9 {max-height: 324px;}

#container.has-sidebar .sb-category.active .item-count-10 {max-height: 360px;}

#container.has-sidebar .sb-category.active .item-count-11 {max-height: 396px;}

#container.has-sidebar .sb-category.active .item-count-12 {max-height: 432px;}

#container.has-sidebar .sb-category.active .item-count-13 {max-height: 468px;}

#container.has-sidebar .sb-category.active .item-count-14 {max-height: 504px;}

#container.has-sidebar .sb-category.active .item-count-15 {max-height: 540px;}

#container.has-sidebar .sb-category.active .item-count-16 {max-height: 576px;}

#container.has-sidebar .sb-category.active .item-count-17 {max-height: 612px;}

#container.has-sidebar .sb-category.active .item-count-18 {max-height: 648px;}

#container.has-sidebar .sb-category.active .item-count-19 {max-height: 684px;}

#container.has-sidebar .sb-category.active .item-count-20 {max-height: 720px;}

#container.has-sidebar .sb-category.active .item-count-21 {max-height: 756px;}

#container.has-sidebar .sb-category.active .item-count-22 {max-height: 792px;}

#container.has-sidebar .sb-category.active .item-count-23 {max-height: 828px;}

#container.has-sidebar .sb-category.active .item-count-24 {max-height: 864px;}

#container.has-sidebar .sb-category.active .item-count-25 {max-height: 900px;}

#container.has-sidebar .sb-category.active .item-count-26 {max-height: 936px;}

#container.has-sidebar .sb-category.active .item-count-27 {max-height: 972px;}

#container.has-sidebar .sb-category.active .item-count-28 {max-height: 1008px;}

#container.has-sidebar .sb-category.active .item-count-29 {max-height: 1044px;}

#container.has-sidebar .sb-category.active .item-count-30 {max-height: 1080px;}





#header {
  background-color: white;
  grid-area: header;
  height: 11vw;
  max-height: 180px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
      "logo circles rhs";
  overflow: hidden;

  margin-right: -10px;
}
#logo {
  background-image: url(/system/0030/6439/logo.png);
  grid-area: logo;
  background-size: contain;
  background-repeat: no-repeat;
  margin: 0 20px;
  background-position: left center;
  max-height: 145px;
  align-self: center;
  height: 90%;
}
#logo span {
  display: none;
}
#header-nav {
  grid-area: circles;
  justify-self: center;
  align-self: center;
}
#header-nav a {
  display: inline-block;
  font-size: 14px;
  font-weight: normal;
  height: 80px;
  line-height: 16px;
  margin: 0 6px;
  overflow: hidden;
  padding: 0;
  text-align: center;
  text-decoration: none;
  width: 80px;
  transition: all 0.2s;
  border-radius: 100px;
  background-color: darkorange;
  color: white;
}
#header-nav a:hover {
  background-color: #afca0a;
  color: white;
  transform: scale(1.1);
}
#header-nav a span {
  align-items: center;
  color: white;
  display: flex;
  height: 100%;
  justify-content: center;
  margin: 0 3px;
}
#header-nav a.account, #container.has-menu #header-nav a.account {
  display: none;
}

#header-menu-bar {
  grid-area: buttons;
  display: none;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1vw;
  margin: 1vw;
}
#header-menu-bar .header-btn {
  display: block;
  border: 2px solid #afca0a;
  border-radius: 24px;
  text-align: center;
  line-height: 25px;
  text-decoration: none;
  color: #333;
  font-size: 1rem;
  background-color: transparent;
  align-self: center;
  justify-self: center;
  width: 100%;
  height: 100%;
  /*max-width: 120px;*/
  max-height: 50px;
  padding: 0px 2vw;
}
#header-menu-bar .header-btn.active {
  background-color: #afca0a;
  color: white;
}
#header-btn-cart span {
  font-weight: bold;
}
#header-btn-cart:disabled {
  border: 2px solid #ccc !important;
  color: #ccc;
}
#header-btn-cart:disabled span {
  display: none;
}


#header-rhs {
  grid-area: rhs;
  justify-self: right;
  align-self: center;
  margin-right: 20px;
  text-align: right;
}
#header-rhs p {
  font-size: 20px;
  line-height: 1.25em;
  margin: 0;
  font-weight: normal;
}
#header-rhs .phone {
  font-size: 30px;
}
#header-menu-bar #header-btn-categories {
  border-color: #e2231a;
}
#header-menu-bar #header-btn-categories.active {
  background-color: #e2231a;
}
#header-menu-bar #header-btn-cart {

  border-color: #e2231a;
}
#header-menu-bar #header-btn-cart.active {
  background-color: #e2231a;
}

@media (max-width: 992px) {
  #logo {
    margin: 10px;
  }
  #header-nav a {
    width: 70px;
    height: 70px;
    margin: 0 3px;
  }
}
@media (max-width: 768px) {
  #header {
    grid-template-areas: "logo rhs buttons";
    background-image: none;
    grid-template-columns: 130px 230px 1fr;
  }
  #header-rhs {
    justify-self: center;
    align-self: center;
    margin-right: 0;
    text-align: center;
  }
}
@media (min-width: 768px) and (max-width: 900px) {
  #header-rhs {
    margin-right: 10px;
  }
  #header-rhs .phone {
    font-size: 22px;
  }
}
@media (min-width: 576px) and (max-width: 700px) {
  #header {
    grid-template-columns: 120px 150px 1fr;
  }
  #header-rhs .phone {
    font-size: 20px;
  }
}
@media (min-width: 1200px) {
  #header-rhs .phone {
    font-size: 40px;
  }
}
@media (max-width: 576px) {
  #header {
    grid-template-areas: "logo buttons";
    background-image: none;
    grid-template-columns: 1fr 2fr;
    height: 15vw;
  }
  #header-rhs {
    display: none;
  }
}

/* ------------------------------------------------------------------------------------------------------------- cart */
.cart-contents {
  margin: 10px 20px;
  text-align: right;
}
.cart-line {
  display: grid;
  grid-template-areas: "adjust image desc price qty total";
  grid-template-columns: 80px 75px auto 100px 75px 100px;
}
.cart-shipping, .cart-total, .cart-gst {
  grid-template-areas: "nothing summary total";
  grid-template-columns: auto 300px 100px;
  line-height: 2.5rem;
}
.cart-total .cart-col-summary, .cart-total .cart-col-total {
  border-bottom: 1px solid #888;
  font-weight: bold;
}
.cart-shipping {
  margin-top: 10px;
}
.cart-headers {
  color: #00b5cc;
  line-height: 2rem;
  border-bottom: 1px solid #bbb;
}
.cart-col {

}
.cart-item div {
  padding-top: 15px;
}
.cart-col-img {
  grid-area: image;
  text-align: center;
  overflow: hidden;
  padding-top: unset;
}
.cart-col-qty {
  grid-area: qty;

}
.cart-col-desc {
  grid-area: desc;
  text-align: left;
}
.cart-col-desc span {
  line-height: 20px;
  margin-left: 2em !important;
}

.cart-col-total {
  grid-area: total;

}
.cart-col-price {
  grid-area: price;

}
.cart-col-adjust {
  grid-area: adjust;
  text-align: center;
  justify-self: left;
}
.cart-col-error {
  grid-column-start: 1;
  grid-column-end: -1;
  text-align: center;
  background-color: #ffb;
  margin-bottom: -10px;
  padding: 0 !important;
  color: #e2231a;
  line-height: 2rem;
}
.cart-col-summary {
  grid-area: summary;
}
.cart-item {
  border-bottom: 1px solid #ddd;
  /*min-height: 60px;*/
  padding: 10px 0;
}

.cart-line div {
  align-self: center;
}
.cart-line.adjusting .cart-col-adjust-panel {
  display: block !important;
}
.cart-line.adjusting .adjust {
  /*display: none;*/
}
.cart-line .cancel {
  display: none;
}
.cart-line .remove {
  margin-right: 2em;
}
.cart-col-adjust-panel {
  grid-column-start: 1;
  grid-column-end: -1;
  text-align: right;
}
.cart-items input[type="number"] {
  width: 65px;
}
.promo-code-entry {

}
.promo-code-entry input[type="text"] {
  line-height: 20pt;
  padding: 2px 10px;
}
.promo-code-entry .checkout {
  margin-top: 10px;
}
.promo-code-message {
  margin: 10px 0;
  color: green;
  text-align: right !important;
}
.promo-code-message.invalid {
  color: red;
}
.promo-code-used span {
  border: 1px solid green;
  padding: 0 10px;
  line-height: 30px;
  display: inline-block;
  border-radius: 5px;
  margin: 0 15px 0 5px;
  color: green
}
.promo-code-used a {
  color: blue;
}
.freight-options label {
  display: block;
}
.freight-options {
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

/* ----------------------------------------------------------------------------------------------------- overlay cart */
#container.has-cart #cart {
  display: block !important;
  position: absolute;
  z-index: 101;
  box-shadow: 0 3px 6px rgba(0,0,0,0.4);
  background-color: white;
  left: 0;
  right: 0;
}
#container.has-cart #cart h2 {
  background-color: #1CC424;
  color: white;
  text-align: center;
  font-size: 2.5rem;
  line-height: 4rem;
  font-weight: normal;
  margin: 0;
}
#container.has-cart #cart.quote h2 {
  background-color: #eb539e;
}
#cart .cart-body {
  /*height: 300px;*/
}
#cart .cart-footer {
  margin: 20px 0;
  position: relative;
  /*height: 50px;*/
}
.cart-footer .button-action {
  position: absolute;
  right: 0;
  bottom: 0;
}
.cart-footer .action {
  display: inline-block;
  /*line-height: 2rem;*/
  position: absolute;
  left: 0;
  bottom: 0;
  /*background-color: yellow;*/
}

.cart-body .loading, .modal-body .loading, .modal-panel .loading {
  color: #ccc;
  font-size: 20pt;
  text-align: center;
  width: 100%;
  margin: 4em 0;
}


#overlay {
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: -100px;
  background-color: rgba(0,0,0,0.3);
  display: none;
}
#container.has-overlay #overlay {
  display: block !important;
}

/* -------------------------------------------------------------------------------------------------- overlay sidebar */
#container.has-sidebar .sb-submenu {
  display: block;
  overflow: hidden;
  max-height: 0;
  padding: 0;
  transition: all 0.2s linear;
  width: unset;
  position: unset;
  border-bottom-right-radius: unset;
  border-top-right-radius: unset;
  z-index: unset;
  border: none;
}
#container.has-sidebar .has-sidebar-slideout-menu {
  display: none;
}
#container.has-sidebar .sb-category.active .sb-submenu {
  /*width: unset;*/
  /*position: unset;*/
  /*border-bottom-right-radius: unset;*/
  /*border-top-right-radius: unset;*/
  /*z-index: unset;*/
  /*padding: unset;*/
}
#container.has-sidebar .sb-submenu-link {
  padding: 0 5px 0 40px;
  font-size: 14pt;
}
#container.has-sidebar #sidebar {
  display: block;
  position: absolute;
  width: 400px;
  z-index: 101;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  max-width: 100%;
}
#container.has-sidebar .sb-link {
  max-width: inherit;
  font-size: 14pt;
}
#container.has-sidebar .has-sidebar-submenu {
  transition: unset;
  width: unset;
}
#container.has-sidebar .has-sidebar-submenu:hover {
  width: inherit;
}
#container.has-sidebar #sidebar-user,
#container.has-sidebar #sidebar-cart {
  display: none;
}
#container.has-sidebar #sidebar input {
  width: 260px;
}

#container.has-sidebar .has-sidebar-slideout-menu {
  width: 100%;
}
#container.has-sidebar .sb-section {
  border: none;
  width: 100%;
  border-radius: 0;
}

#container.has-sidebar .sb-slideout-menu {
  width: 100%;
  right: 0;
  border: none;
}
#container.has-sidebar .sb-chevron {
  transform: rotate(90deg);
  transform-origin: left center;
  right: 0;
  margin-right: 0;
  display: block;
  width: 25px;
}
#container.has-sidebar .active {
  border-top: 1px solid white;
  border-bottom: 1px solid white;
}
#container.has-sidebar .active .sb-chevron {
  opacity: 0;
}
#container.has-sidebar .sb-link {
  text-align: left;

}
#container.has-sidebar .active .sb-link {
  font-size: 16pt;
  text-align: center;
  line-height: 2em;
}
#container.has-sidebar #sidebar-categories h3 {
  padding-left: 0;
  text-align: center;
}
/* ----------------------------------------------------------------------------------------------------- overlay menu */
#container.has-menu #header-nav {
  display: block;
  position: absolute;
  width: 400px;
  z-index: 101;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  background-color: #fff;
  left: 0;
  border-top: none;
  padding: 0;
  max-width: 100%;
}
#container.has-menu #header-nav a {
  display: block;
  line-height: 45px;
  width: unset;
  height: unset;
  margin: unset;
  font-size: 14pt;
  border-radius: 0;
  padding: 0 20px;
  text-align: left;
  background-color: unset !important;
}
.has-menu .sb-slideout-menu {
  width: 100%;
  border: none;
  border-radius: 0;
  right: 0;
  position: inherit;
  padding-bottom: 0;
}
.has-menu .has-sidebar-slideout-menu, #u1 {
  width: 100%;
  border: none;
}
.has-menu #header-nav .extra {
  display: block;
}
.has-menu #header-nav h3 {
  text-align: center;
  font-size: 16pt;
  padding: 16px 0 0;
  color: white;
  margin: 0;
  line-height: 35px;
}
.has-menu .has-sidebar-slideout-menu h3 {
  border-top: 1px solid white;
}
.has-menu .has-sidebar-slideout-menu .sb-chevron {
  display: none;
}
.has-menu #header-nav a:hover {
  transform: unset;
}
.has-menu .sb-section {
  border-radius: 0;
  margin-bottom: 0;
}
.has-menu #header-nav a span {
  justify-content: left;
  margin: 0;
}
.has-menu .original-header-links {
  background-color: #eb539e;
  padding-bottom: 18px;
  border-top: 1px solid white;
}



#container.has-menu #header-nav, #container.has-cart #cart, #container.has-sidebar #sidebar {
  margin-top: -1px;
}

#container.has-menu #header-nav a.menu-phone {
  font-size: 21pt;
  font-weight: bold;
  text-align: center;
}
.has-menu #header-nav a span.icon-phone {
  display: inline-block;
  margin: 0 20px;
}
.has-menu #header-nav a span.icon-phone:last-of-type {
  transform: scaleX(-1);
}

.home-page-copy {
  margin: 2em;
}

.home-page-copy .col-2-check-list td {
  color: #333;
}
.home-page-copy p {
  font-size: 20pt;
  line-height: 35pt;

  text-align: center;

  color: #333;
  margin: 0 2rem 1rem;
}

h3.band, h2.band {
  font-weight: normal;
  line-height: 36pt;
  font-size: 20pt;
  margin: 36px 0 10px;
  text-align: center;
}
.band a {

  color: white;

  background-color: transparent;
  width: 100%;
  display: inline-block;
}
.band a:hover {
  text-decoration: underline;
}




button, .button, input[type="button"], input[type="submit"] {
  line-height: 34px;
  border: 2px solid white;
  background-color: white;
  /*border-radius: 3px;*/
  padding: 0 1em;
  display: inline-block;
  text-decoration: none;
  font-size: 12pt;
  /*color: red;*/
  font-weight: normal;
  user-select: none;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
}
button:hover, .button:hover, input[type="button"]:hover, input[type="submit"]:hover,
button:focus, .button:focus, input[type="button"]:focus, input[type="submit"]:focus,
button:active, .button:active, input[type="button"]:active, input[type="submit"]:active {
  text-decoration: none;
}

.btn-size-huge {
  line-height: 58px;
}
.btn-size-lge, input[type="button"].btn-size-lge, input[type="submit"].btn-size-lge {
  line-height: 48px;
  font-size: 16pt;
}
.btn-size-med {
  line-height: 34px;
  font-size: 12pt;
}
.btn-size-sml {
  line-height: 26px;
  font-size: 11pt;
}
.btn-size-tiny {
  line-height: 20px;
  font-size: 10pt;
}
.btn-size-icon {
  border-radius: 50px;
  font-size: 16px;
  height: 50px;
  line-height: 21px;
  padding: 2px 10px 0 0;
  width: 160px;
}
.btn-size-icon .icon {
  border-radius: 50px;
  float: left;
  font-size: 48px;
  line-height: 48px;
  margin: -2px -5px 0 6px;
  vertical-align: middle;

}
.btn-size-icon.btn-type-question .icon, .btn-size-icon.btn-type-virtual-sample .icon {
  font-size: 41px;
  margin: -2px -5px 0 10px;
}

.btn-style-1 {
border-radius: 6px;
}
.btn-style-2.btn-size-lge, .btn-style-2.btn-size-med {
border-radius: 6px;
}
.btn-style-2.btn-size-sml, .btn-style-2.btn-size-tiny {
border-radius: 6px;
}



  
  .btn-style-2.btn-type-sample {
    border-color: #eb655f;
    color: #e2231a;
  }
  .btn-style-2.btn-type-sample:hover {
    border-color: #e2231a;
    background-color: #fce9e8;
  }
  .btn-style-2.btn-type-sample.active, .btn-style-2.btn-type-sample:active {
    border-color: #b41c15;
    background-color: #e2231a;
    color: white;
  }

  

  .btn-style-1.btn-type-sample {
    background-color: #e2231a;
    border: 1px solid #9d1812;
    background-image: -moz-linear-gradient(center top, #ef3027, #b41c15);
    background-image: -webkit-linear-gradient(top, #ef3027, #b41c15);
    background-image: -ms-linear-gradient(center top, #ef3027, #b41c15);
    background-image: linear-gradient(center top, #ef3027, #b41c15);
  }
  .btn-style-1.btn-type-sample:hover {
    background-image: -moz-linear-gradient(center top, #fc3d34, #cb1f17);
    background-image: -webkit-linear-gradient(top, #fc3d34, #cb1f17);
    background-image: -ms-linear-gradient(center top, #fc3d34, #cb1f17);
    background-image: linear-gradient(center top, #fc3d34, #cb1f17);
    color: white;
  }

  .btn-style-1.btn-type-sample:active, .btn-style-1.btn-type-sample.active,
  .btn-style-1.btn-type-sample:focus, .btn-style-1.btn-type-sample.focus{
    
    background-image: -moz-linear-gradient(center top, #b41c15, #ef3027);
    background-image: -webkit-linear-gradient(top, #b41c15, #ef3027);
    background-image: -ms-linear-gradient(center top, #b41c15, #ef3027);
    background-image: linear-gradient(center top, #b41c15, #ef3027);
    color: white;
  }



  
  .btn-style-2.btn-type-wishlist {
    border-color: #eb655f;
    color: #e2231a;
  }
  .btn-style-2.btn-type-wishlist:hover {
    border-color: #e2231a;
    background-color: #fce9e8;
  }
  .btn-style-2.btn-type-wishlist.active, .btn-style-2.btn-type-wishlist:active {
    border-color: #b41c15;
    background-color: #e2231a;
    color: white;
  }

  

  .btn-style-1.btn-type-wishlist {
    background-color: #e2231a;
    border: 1px solid #9d1812;
    background-image: -moz-linear-gradient(center top, #ef3027, #b41c15);
    background-image: -webkit-linear-gradient(top, #ef3027, #b41c15);
    background-image: -ms-linear-gradient(center top, #ef3027, #b41c15);
    background-image: linear-gradient(center top, #ef3027, #b41c15);
  }
  .btn-style-1.btn-type-wishlist:hover {
    background-image: -moz-linear-gradient(center top, #fc3d34, #cb1f17);
    background-image: -webkit-linear-gradient(top, #fc3d34, #cb1f17);
    background-image: -ms-linear-gradient(center top, #fc3d34, #cb1f17);
    background-image: linear-gradient(center top, #fc3d34, #cb1f17);
    color: white;
  }

  .btn-style-1.btn-type-wishlist:active, .btn-style-1.btn-type-wishlist.active,
  .btn-style-1.btn-type-wishlist:focus, .btn-style-1.btn-type-wishlist.focus{
    
    background-image: -moz-linear-gradient(center top, #b41c15, #ef3027);
    background-image: -webkit-linear-gradient(top, #b41c15, #ef3027);
    background-image: -ms-linear-gradient(center top, #b41c15, #ef3027);
    background-image: linear-gradient(center top, #b41c15, #ef3027);
    color: white;
  }



  
  .btn-style-2.btn-type-question {
    border-color: #f8a967;
    color: #f58426;
  }
  .btn-style-2.btn-type-question:hover {
    border-color: #f58426;
    background-color: #fef3e9;
  }
  .btn-style-2.btn-type-question.active, .btn-style-2.btn-type-question:active {
    border-color: #de6a0a;
    background-color: #f58426;
    color: white;
  }

  

  .btn-style-1.btn-type-question {
    background-color: #f58426;
    border: 1px solid #c55f09;
    background-image: -moz-linear-gradient(center top, #ff9133, #de6a0a);
    background-image: -webkit-linear-gradient(top, #ff9133, #de6a0a);
    background-image: -ms-linear-gradient(center top, #ff9133, #de6a0a);
    background-image: linear-gradient(center top, #ff9133, #de6a0a);
  }
  .btn-style-1.btn-type-question:hover {
    background-image: -moz-linear-gradient(center top, #ff9e40, #f4760e);
    background-image: -webkit-linear-gradient(top, #ff9e40, #f4760e);
    background-image: -ms-linear-gradient(center top, #ff9e40, #f4760e);
    background-image: linear-gradient(center top, #ff9e40, #f4760e);
    color: white;
  }

  .btn-style-1.btn-type-question:active, .btn-style-1.btn-type-question.active,
  .btn-style-1.btn-type-question:focus, .btn-style-1.btn-type-question.focus{
    
    background-image: -moz-linear-gradient(center top, #de6a0a, #ff9133);
    background-image: -webkit-linear-gradient(top, #de6a0a, #ff9133);
    background-image: -ms-linear-gradient(center top, #de6a0a, #ff9133);
    background-image: linear-gradient(center top, #de6a0a, #ff9133);
    color: white;
  }



  
  .btn-style-2.btn-type-virtual-sample {
    border-color: #ffcd5e;
    color: #ffb819;
  }
  .btn-style-2.btn-type-virtual-sample:hover {
    border-color: #ffb819;
    background-color: #fff8e8;
  }
  .btn-style-2.btn-type-virtual-sample.active, .btn-style-2.btn-type-virtual-sample:active {
    border-color: #e59e00;
    background-color: #ffb819;
    color: white;
  }

  

  .btn-style-1.btn-type-virtual-sample {
    background-color: #ffb819;
    border: 1px solid #cc8d00;
    background-image: -moz-linear-gradient(center top, #ffc526, #e59e00);
    background-image: -webkit-linear-gradient(top, #ffc526, #e59e00);
    background-image: -ms-linear-gradient(center top, #ffc526, #e59e00);
    background-image: linear-gradient(center top, #ffc526, #e59e00);
  }
  .btn-style-1.btn-type-virtual-sample:hover {
    background-image: -moz-linear-gradient(center top, #ffd233, #ffb000);
    background-image: -webkit-linear-gradient(top, #ffd233, #ffb000);
    background-image: -ms-linear-gradient(center top, #ffd233, #ffb000);
    background-image: linear-gradient(center top, #ffd233, #ffb000);
    color: white;
  }

  .btn-style-1.btn-type-virtual-sample:active, .btn-style-1.btn-type-virtual-sample.active,
  .btn-style-1.btn-type-virtual-sample:focus, .btn-style-1.btn-type-virtual-sample.focus{
    
    background-image: -moz-linear-gradient(center top, #e59e00, #ffc526);
    background-image: -webkit-linear-gradient(top, #e59e00, #ffc526);
    background-image: -ms-linear-gradient(center top, #e59e00, #ffc526);
    background-image: linear-gradient(center top, #e59e00, #ffc526);
    color: white;
  }



  
  .btn-style-2.btn-type-quote {
    border-color: #f187bb;
    color: #eb539e;
  }
  .btn-style-2.btn-type-quote:hover {
    border-color: #eb539e;
    background-color: #fdeef5;
  }
  .btn-style-2.btn-type-quote.active, .btn-style-2.btn-type-quote:active {
    border-color: #e62584;
    background-color: #eb539e;
    color: white;
  }

  

  .btn-style-1.btn-type-quote {
    background-color: #eb539e;
    border: 1px solid #d81977;
    background-image: -moz-linear-gradient(center top, #f860ab, #e62584);
    background-image: -webkit-linear-gradient(top, #f860ab, #e62584);
    background-image: -ms-linear-gradient(center top, #f860ab, #e62584);
    background-image: linear-gradient(center top, #f860ab, #e62584);
  }
  .btn-style-1.btn-type-quote:hover {
    background-image: -moz-linear-gradient(center top, #ff6db8, #e83c91);
    background-image: -webkit-linear-gradient(top, #ff6db8, #e83c91);
    background-image: -ms-linear-gradient(center top, #ff6db8, #e83c91);
    background-image: linear-gradient(center top, #ff6db8, #e83c91);
    color: white;
  }

  .btn-style-1.btn-type-quote:active, .btn-style-1.btn-type-quote.active,
  .btn-style-1.btn-type-quote:focus, .btn-style-1.btn-type-quote.focus{
    
    background-image: -moz-linear-gradient(center top, #e62584, #f860ab);
    background-image: -webkit-linear-gradient(top, #e62584, #f860ab);
    background-image: -ms-linear-gradient(center top, #e62584, #f860ab);
    background-image: linear-gradient(center top, #e62584, #f860ab);
    color: white;
  }



  
  .btn-style-2.btn-type-checkout {
    border-color: #60d666;
    color: #1CC424;
  }
  .btn-style-2.btn-type-checkout:hover {
    border-color: #1CC424;
    background-color: #e8f9e9;
  }
  .btn-style-2.btn-type-checkout.active, .btn-style-2.btn-type-checkout:active {
    border-color: #16971c;
    background-color: #1CC424;
    color: white;
  }

  

  .btn-style-1.btn-type-checkout {
    background-color: #1CC424;
    border: 1px solid #128118;
    background-image: -moz-linear-gradient(center top, #29d131, #16971c);
    background-image: -webkit-linear-gradient(top, #29d131, #16971c);
    background-image: -ms-linear-gradient(center top, #29d131, #16971c);
    background-image: linear-gradient(center top, #29d131, #16971c);
  }
  .btn-style-1.btn-type-checkout:hover {
    background-image: -moz-linear-gradient(center top, #36de3e, #19ae20);
    background-image: -webkit-linear-gradient(top, #36de3e, #19ae20);
    background-image: -ms-linear-gradient(center top, #36de3e, #19ae20);
    background-image: linear-gradient(center top, #36de3e, #19ae20);
    color: white;
  }

  .btn-style-1.btn-type-checkout:active, .btn-style-1.btn-type-checkout.active,
  .btn-style-1.btn-type-checkout:focus, .btn-style-1.btn-type-checkout.focus{
    
    background-image: -moz-linear-gradient(center top, #16971c, #29d131);
    background-image: -webkit-linear-gradient(top, #16971c, #29d131);
    background-image: -ms-linear-gradient(center top, #16971c, #29d131);
    background-image: linear-gradient(center top, #16971c, #29d131);
    color: white;
  }



  
  .btn-style-2.btn-type-confirm {
    border-color: #60d666;
    color: #1CC424;
  }
  .btn-style-2.btn-type-confirm:hover {
    border-color: #1CC424;
    background-color: #e8f9e9;
  }
  .btn-style-2.btn-type-confirm.active, .btn-style-2.btn-type-confirm:active {
    border-color: #16971c;
    background-color: #1CC424;
    color: white;
  }

  

  .btn-style-1.btn-type-confirm {
    background-color: #1CC424;
    border: 1px solid #128118;
    background-image: -moz-linear-gradient(center top, #29d131, #16971c);
    background-image: -webkit-linear-gradient(top, #29d131, #16971c);
    background-image: -ms-linear-gradient(center top, #29d131, #16971c);
    background-image: linear-gradient(center top, #29d131, #16971c);
  }
  .btn-style-1.btn-type-confirm:hover {
    background-image: -moz-linear-gradient(center top, #36de3e, #19ae20);
    background-image: -webkit-linear-gradient(top, #36de3e, #19ae20);
    background-image: -ms-linear-gradient(center top, #36de3e, #19ae20);
    background-image: linear-gradient(center top, #36de3e, #19ae20);
    color: white;
  }

  .btn-style-1.btn-type-confirm:active, .btn-style-1.btn-type-confirm.active,
  .btn-style-1.btn-type-confirm:focus, .btn-style-1.btn-type-confirm.focus{
    
    background-image: -moz-linear-gradient(center top, #16971c, #29d131);
    background-image: -webkit-linear-gradient(top, #16971c, #29d131);
    background-image: -ms-linear-gradient(center top, #16971c, #29d131);
    background-image: linear-gradient(center top, #16971c, #29d131);
    color: white;
  }



  
  .btn-style-2.btn-type-cancel {
    border-color: #f8a967;
    color: #f58426;
  }
  .btn-style-2.btn-type-cancel:hover {
    border-color: #f58426;
    background-color: #fef3e9;
  }
  .btn-style-2.btn-type-cancel.active, .btn-style-2.btn-type-cancel:active {
    border-color: #de6a0a;
    background-color: #f58426;
    color: white;
  }

  

  .btn-style-1.btn-type-cancel {
    background-color: #f58426;
    border: 1px solid #c55f09;
    background-image: -moz-linear-gradient(center top, #ff9133, #de6a0a);
    background-image: -webkit-linear-gradient(top, #ff9133, #de6a0a);
    background-image: -ms-linear-gradient(center top, #ff9133, #de6a0a);
    background-image: linear-gradient(center top, #ff9133, #de6a0a);
  }
  .btn-style-1.btn-type-cancel:hover {
    background-image: -moz-linear-gradient(center top, #ff9e40, #f4760e);
    background-image: -webkit-linear-gradient(top, #ff9e40, #f4760e);
    background-image: -ms-linear-gradient(center top, #ff9e40, #f4760e);
    background-image: linear-gradient(center top, #ff9e40, #f4760e);
    color: white;
  }

  .btn-style-1.btn-type-cancel:active, .btn-style-1.btn-type-cancel.active,
  .btn-style-1.btn-type-cancel:focus, .btn-style-1.btn-type-cancel.focus{
    
    background-image: -moz-linear-gradient(center top, #de6a0a, #ff9133);
    background-image: -webkit-linear-gradient(top, #de6a0a, #ff9133);
    background-image: -ms-linear-gradient(center top, #de6a0a, #ff9133);
    background-image: linear-gradient(center top, #de6a0a, #ff9133);
    color: white;
  }



  
  .btn-style-2.btn-type-delete {
    border-color: #eb655f;
    color: #e2231a;
  }
  .btn-style-2.btn-type-delete:hover {
    border-color: #e2231a;
    background-color: #fce9e8;
  }
  .btn-style-2.btn-type-delete.active, .btn-style-2.btn-type-delete:active {
    border-color: #b41c15;
    background-color: #e2231a;
    color: white;
  }

  

  .btn-style-1.btn-type-delete {
    background-color: #e2231a;
    border: 1px solid #9d1812;
    background-image: -moz-linear-gradient(center top, #ef3027, #b41c15);
    background-image: -webkit-linear-gradient(top, #ef3027, #b41c15);
    background-image: -ms-linear-gradient(center top, #ef3027, #b41c15);
    background-image: linear-gradient(center top, #ef3027, #b41c15);
  }
  .btn-style-1.btn-type-delete:hover {
    background-image: -moz-linear-gradient(center top, #fc3d34, #cb1f17);
    background-image: -webkit-linear-gradient(top, #fc3d34, #cb1f17);
    background-image: -ms-linear-gradient(center top, #fc3d34, #cb1f17);
    background-image: linear-gradient(center top, #fc3d34, #cb1f17);
    color: white;
  }

  .btn-style-1.btn-type-delete:active, .btn-style-1.btn-type-delete.active,
  .btn-style-1.btn-type-delete:focus, .btn-style-1.btn-type-delete.focus{
    
    background-image: -moz-linear-gradient(center top, #b41c15, #ef3027);
    background-image: -webkit-linear-gradient(top, #b41c15, #ef3027);
    background-image: -ms-linear-gradient(center top, #b41c15, #ef3027);
    background-image: linear-gradient(center top, #b41c15, #ef3027);
    color: white;
  }



  
  .btn-style-2.btn-type-neutral {
    border-color: #4dcbdb;
    color: #00b5cc;
  }
  .btn-style-2.btn-type-neutral:hover {
    border-color: #00b5cc;
    background-color: #e6f8fa;
  }
  .btn-style-2.btn-type-neutral.active, .btn-style-2.btn-type-neutral:active {
    border-color: #008899;
    background-color: #00b5cc;
    color: white;
  }

  

  .btn-style-1.btn-type-neutral {
    background-color: #00b5cc;
    border: 1px solid #007180;
    background-image: -moz-linear-gradient(center top, #0dc2d9, #008899);
    background-image: -webkit-linear-gradient(top, #0dc2d9, #008899);
    background-image: -ms-linear-gradient(center top, #0dc2d9, #008899);
    background-image: linear-gradient(center top, #0dc2d9, #008899);
  }
  .btn-style-1.btn-type-neutral:hover {
    background-image: -moz-linear-gradient(center top, #1acfe6, #009eb3);
    background-image: -webkit-linear-gradient(top, #1acfe6, #009eb3);
    background-image: -ms-linear-gradient(center top, #1acfe6, #009eb3);
    background-image: linear-gradient(center top, #1acfe6, #009eb3);
    color: white;
  }

  .btn-style-1.btn-type-neutral:active, .btn-style-1.btn-type-neutral.active,
  .btn-style-1.btn-type-neutral:focus, .btn-style-1.btn-type-neutral.focus{
    
    background-image: -moz-linear-gradient(center top, #008899, #0dc2d9);
    background-image: -webkit-linear-gradient(top, #008899, #0dc2d9);
    background-image: -ms-linear-gradient(center top, #008899, #0dc2d9);
    background-image: linear-gradient(center top, #008899, #0dc2d9);
    color: white;
  }



.btn-style-1 {
  color: white;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.3) inset;
}

.btn-2-line {
  padding: 4px 32px 6px;
  line-height: 28px;
  font-size: 18px;
}
.btn-2-line span {
  display: block;
  font-size: 14px;
  line-height: 20px;
}
.btn-style-2:disabled {
  border: 2px solid #ddd !important;
  color: #888 !important;
  background-color: white !important;
}


.btn-style-1:disabled {
  background-color: #ccc !important;
  border: 1px solid #a6a6a6 !important;
  background-image: -moz-linear-gradient(center top, #d9d9d9, #b3b3b3) !important;
  background-image: -webkit-linear-gradient(top, #d9d9d9, #b3b3b3) !important;
  background-image: -ms-linear-gradient(center top, #d9d9d9, #b3b3b3) !important;
  background-image: linear-gradient(center top, #d9d9d9, #b3b3b3) !important;
}
.btn-shape-circle {
  border-radius: 100px !important;
  width: 38px;
  padding: 0;
  text-align: center;
}


#products, .homepage-category .cards {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  background-color: #fff;
  color: #444;
}

.product-card, .subcategory-card {
  background-color: white;
  color: #666;
  font-size: 10pt;
  text-decoration: none;
  border: 1px solid #eee;
  position: relative;
  overflow: hidden;
}

.product-image-container {
  height: 200px;
}
.product-card .product-image, .subcategory-card .product-image {
  height: 200px;
  /*background-size: cover;*/
  background-size: contain;
  background-repeat: no-repeat;
  /*background-color: #9bddfd;*/
  background-position: center center;
  position: relative;
}

.product-card h4, .subcategory-card h4 {
  font-size: 13pt;
  color: #005387;
  margin: -10px -10px 5px -10px;
  text-align: center;
}
.subcategory-card h4 {
  color: #00b5cc;
}

.card-body {
  padding: 0.5rem 0.75rem 1rem 0.75rem;
  margin-bottom: 1.5rem;
}
.card-body p {
  margin: 0;
  font-size: 9pt;
  line-height: 1.5em;
}
.card-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: 7px;
}
.product-price {
  font-size: 1.0rem;
  text-align: right;
  padding-right: 1rem;
  color: #ccc;
}
.product-card .quick-look-trigger {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  /* height: 52px; */
  /*background-color: rgba(128,255,245,0.5);*/
}
.product-card .quick-look-trigger button {
  margin: 10px 0 7px 7px;
  padding: 0 7px;
}

.product-card .product-price.use-prefix::before {
  content: "from";
  position: relative;
  bottom: 0;
}
.product-card .dollars {
  font-size: 20pt;
}
.subcategory-card .card-body {
  margin-bottom: 0;
  padding: 0.5rem 0.75rem;
}
.card-container {
}

/* hover styles */
.product-card:hover .product-price {
  color: #e2231a;
}
.product-card:hover {
  border: 1px solid #e2231a !important;
  text-decoration: none;
}
.subcategory-card:hover {
  border: 1px solid #ffb819 !important;
  text-decoration: none;
}

.product-card:hover h4 {
  color: #e2231a;
}
.subcategory-card:hover h4 {
  color: #ffb819;
}

.product-card:hover p {
  color: #666;
}
.subcategory-card:hover p {
  color: #666;
}


#load-more-items {
  grid-column: 1/-1;
  justify-self: center;
}

.product-card .badges {
  position: absolute;
  right: 5px;
  top: 5px;
  font-size: 40px;
}
.product-card .badges .icon {
  float: right;
  margin-left: 3px;
  background-color: white;
  border-radius: 50px;
}

.product-card .badges .icon-rush-o {
  color: #c4d82f;
}
.product-card .badges .icon-sale-o {
  color: #00b5cc;
}
.product-card .badges .icon-clearance-o {
  color: #ffc425;
}
.product-card .badges .icon-hot-o {
  color: #f58426;
}
.product-card .badges .icon-quote-o {
  color: #eb539e;
}
#products, .homepage-category .card-slides {
}
.card-slides {
  height: 352px;
  position: relative;
  overflow: hidden;
}
.card-slide {
  display: grid;
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
  position: absolute;
  transition: all 0.5s;
}
.homepage-category {
  /*width: 1132px;*/
}
.card-slides .product-card, .card-slides .subcategory-card {
  /*width: 219px;*/
  /*height: 350px;*/
  /*margin-right: 10px;*/
  /*float: left;*/

}

#main-page.home-page {
  position: relative;
}
.card-slide-nav button:first-of-type {
  float: left;
}
.card-slide-nav button:last-of-type {
  float: right;
}
.card-slide-nav {
  text-align: center;
  margin: 10px 10px 0 10px;
}
.page-dots {
  /* position: relative; */
  margin: -10px 0 10px 0;
  display: none;
}
.page-dots span {
  display: inline-block;
  background-color: red;
  width: 8px;
  height: 8px;
  margin: 0 5px;
  border-radius: 10px;
}
.card-slide.inactive .product-card:nth-of-type(n+9) .product-image {
  display: none !important;
}

#product-images {
  height: 400px;
  /*background-color: #a988f2;*/
  /*grid-column: 1;*/
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
}
.image-thumbs {
  margin-top: 420px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.thumb-container {
  width: 12vw;
  height: 12vw;
  min-width: 50px;
  min-height: 50px;
  max-width: 70px;
  max-height: 70px;
  margin: -1px -1px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ddd;
  overflow: hidden;
  color: white;
}
.thumb-container img {
  max-height: 100%;
  max-width: 100%;
}
.lslide {
  margin-left: -1px;
}
.image-container {
  max-width:600px;
  height:400px;
  /*background-color: #0b5f33;*/
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.image-container img {
  max-width: 100%;
  max-height: 100%;
}
#lightbox img {
  max-height: 90%;
  box-shadow: 0 3px 6px rgba(0,0,0,0.4);
  max-width: 90%;
  border: 12px solid #f1f1f1;
}
#lightbox {
  position: fixed;
  z-index: 1000;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  vertical-align: middle;
  text-align: center;
  justify-content: center;
  align-items: center;
  background-color: rgba(0,0,0,0.3);
}


#sheet-overlay {
  display: none;
}

#container.has-modal .sheet.visible {
  display: block !important;
}

.sheet {
  min-height: 300px;
  width: 700px;
  display: none;
  z-index: 101;
  position: absolute;

  max-width: 800px;
  margin: auto;
  top: 150px;
  /*width: 80%;*/

  box-shadow: 0 3px 6px rgba(0,0,0,0.4);
  background-color: white;
  left: 0;
  right: 0;
  overflow: hidden;
}

.sheet .sheet-title {
  color: white;
  background-color: #e2231a;
  text-align: center;
  font-size: 2.5rem;
  line-height: 4rem;
  font-weight: normal;
  margin: 0;
}

#sheet-enquiry .sheet-title {
  background-color: #f58426;
}

#sheet-sample .sheet-title {
  background-color: #e2231a;
}

#sheet-wishlist .sheet-title {
  background-color: #e2231a;
}

.sheet .sheet-content {
  margin: 10px 20px 20px;
  font-size: 12pt;
  padding: 0;
}

.sheet .notes {
  background-color: #FFFFDD;
  padding: 12px 24px;
  text-align: center;
  margin: -12px -24px 12px;
}

.sheet .notes h3 {
  font-size: 20px;
  line-height: 24px;
  margin-top: 0;
}

.sheet label {
  width: 300px;
}

.sheet .form-fields {
  margin-top: -28px;
}

.sheet textarea {
  width: 602px;
  margin-left: 50px;
}

.sheet h4 {
  margin-top: 16px;
  color: #00b5cc;
  font-weight: normal;
}

.sheet .button-row {
  margin: 10px 0;
  text-align: right;
  position: relative;
}
.sheet .button-row a {
  position: absolute;
  bottom: 0;
  left: 0;
}

.sheet .button-row:after {
  /*clear: both;*/
  /*content: "";*/
  /*display: block;*/
  /*height: 24px;*/
}

.sheet .button-row input, .sheet .button-row a {
  /*float: right;*/
}

.sheet a.cancel, .sheet td.remove a {
  color: #CC0000;
}

.sheet a.cancel:hover, .sheet td.remove a:hover {
  color: #ff0000;
}

.sheet .product-list {
  width: 100%;
  margin-left: 20px;
}

.sheet .product-list td {
  vertical-align: middle;
}

.sheet td .qty {
  width: 50px;
}

.sheet .desc span {
  display: none;
}

.sheet .new-item {
  background-color: #ffd;
  /*display: none;*/
}

.sheet tr.ignore {
  display: none !important;
}


.form-fields input[type="text"].w100 {
  width: 100px;
}

.form-fields input[type="text"].w150 {
  width: 150px;
}

.form-fields input[type="text"].w200 {
  width: 200px;
}

.form-fields input[type="text"].w250 {
  width: 250px;
}

.form-fields input[type="text"].w300 {
  width: 300px;
}

.form-fields input[type="text"].w350 {
  width: 350px;
}

.form-fields input[type="text"].w400 {
  width: 400px;
}


.form-fields label {
  display: inline-block;
  line-height: 34px;
  margin: 3px 2px 0 0;
  text-align: right;
  vertical-align: top;
  width: 280px;
  color: #888;
  font-weight: normal;
  font-size: 11pt;
}

.sheet-content div {
  margin-bottom: 5px;
}

.buy-it-now {
  background-color: #f6f6f6;
  border-radius: 12px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fill, 450px);
  grid-gap: 20px;
  justify-content: center;
}
.bin-options {
}

.bin-totals {
}
.bin-buttons {
}
.bin-image {
  display: flex;
  align-items: end;
  /*background-color: aquamarine;*/
}

.buy-it-now label {
  color: #ffb819;
  font-size: 14pt;
  display: block;
  font-weight: normal;
}
.bin-decoration {
  margin: 1em 0;
}
.bin-decoration select {
  margin-left: 23px;
}
.bin-qty .slider-container {
  display: inline-block;
  margin-left: 30px;
  width: 300px;
}
.bin-qty input {
  width: 75px;
  float: left;
  padding: 3px 2px 3px 6px;
  font-size: 12pt;
  margin-top: -6px;
  margin-left: 22px;
}
.bin-qty label {
  margin-bottom: 15px;
}
.bin-mask {
  background-color: #f6f6f6;
  border-radius: 10px;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}
.bin-totals table {
  width: 300px;
  text-align: right;
  font-size: 12pt;
  line-height: 28px;
  margin: 0 auto;
  font-weight: 300;
  color: #bbb;

}
.bin-totals td {
  /*padding-left: 2em;*/
  color: #707274;
}
.bin-totals .dollar-sign, .bin-totals .point {
  /*color: #bbb;*/
}
.bin-totals .point, .bin-totals .cents {
  font-size: 8pt;
}
.bin-totals .totals-line td {
  color: #707274;
  font-weight: normal;
  border-top: 1px solid #ffb819;
  /*font-size: 16pt;*/
}
#bin-total-cost {
  color: #ffb819;
}
#bin-line-cost {
  color: #ffb819;
}
.buy-it-now .btn-container {
  display: inline-block;
  margin: 10px 0px 0 10px;
  width: 200px;
}
.buy-it-now .btn-container:first-of-type {
  margin-left: 22px;
}
#product-page .btn-container p {
  font-size: 14px;
  line-height: normal;
  text-align: center;
  padding: 5px;
  margin: 0;
}
.buy-it-now button {
  width: 100%;
}
.buy-it-now img {
  vertical-align: top;
  margin: 0 auto;
  display: block;
  max-width: 100%;
}


/* ----------------------------------------------------------------------------------------------------------- footer */
.bc-footer {
  background-color: #fff;
  grid-area: footer;
  text-align: right;
  padding: 10px;
  border-top: 1px solid #ddd;
  margin-top: 10px;
}


.bc-footer .sn-icon {
  width: 64px;
  height: 64px;
  display: inline-block;
  overflow: hidden;
  margin: 0 10px 0 0;
  float: left;
}
.sn-icon img {
  height: 64px;
}
.sn-icon.sn-icon-gplus img {
  margin-left: 0px;
}
.sn-icon.sn-icon-facebook img {
  margin-left: -64px;
}
.sn-icon.sn-icon-twitter img {
  margin-left: -128px;
}
.sn-icon.sn-icon-instagram img {
  margin-left: -192px;
}
.sn-icon.sn-icon-pinterest img {
  margin-left: -256px;
}
.sn-icon.sn-icon-linkedin img {
  margin-left: -320px;
}
.sn-icon.sn-icon-youtube img {
  margin-left: -384px;
}
.bc-footer a {
  /*margin-left: 3em;*/
  /* text-decoration: none; */
  color: #333;
  display: block;
}
.copyright-msg {
  clear: both;
  text-align: center;
}


.form-question {
  margin-bottom: 5px;
}

.form-question label {
  font-weight: inherit;
  width: 150px;
  /*background-color: #ffc;*/
  text-align: right;
  vertical-align: top;
  line-height: 33px;
  font-size: 11pt;
  margin-right: 5px;
}

.form-subtext {
  color: #888;
  margin-left: 1em;
  display: none;
}

.form-question input {
  /*margin-left: 2em;*/
}

.form-question br {
  display: none;
}

.autoform input[type="submit"] {
  margin: 30px auto 0 auto;
  display: block;
}

.autoform {
  border: 1px solid #ccc;
  border-radius: 20px;
  padding: 30px;
  width: 800px;
  margin: 0 auto;
  background-color: #f0f0f0;
}

#main-page .autoform h2 {
  background-color: transparent !important;
  text-align: center;
  margin: 0 0 20px 0;
}
form img {
  border: none !important;
  max-width: 100%;
  background-color: unset !important;
}
.form-error input {
  border-color: red;
}
.form-error label {
  color: red;
}
.form-fields .data {
  line-height: 34px;
  font-size: 11pt;
  margin: 3px 0 0 10px;
  vertical-align: top;
  display: inline-block;
  color: #48f;
}

/* ------------------------------------------------------------------------------------------------------------ flash */
#flash {
  border: 1px solid #e9621a;
  background-color: #ffc;
  padding: 10px;
  margin: 10px;
  text-align: center;

}
.login #flash {
  box-shadow: none;
  font-size: 12pt;
  margin: 10px 0;
}

#flash h1 {
  display: none;
}

#flash a {
  display: none;
}

#flash p {
  margin: 0.25em 0;
  text-align: center;
  font-size: 14pt;
  color: #e9621a;
}
.login #flash p {
  font-size: 12pt;
}

#flash.success {
  background-color: #efe;
  border: unset;
}
#flash.success p {
  color: #3a3;
}

/* ----------------------------------------------------------------------------------------------------- profile edit */
.profile-edit label {
  width: 150px;
  text-align: right;
  padding-right: 10px;
}



/* --------------------------------------------------------------------------------------------------------- checkout */
table.checkout .has-input {
  display: block;
  margin-top: 10px;
}

.page_checkout {
  margin-bottom: 2em;
}

.page_checkout form {
  max-width: 700px;
  margin: auto;
  font-size: 11pt;
}

.page_checkout .checkout {
  margin-top: 2em;
}

.checkout-blurb {
  background-color: #ffd;
  padding: 1em 1em 5px 1em;
  font-size: 12pt;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.order-submit-button {
  margin-top: 10px;
}

.order-submit-button .action-button {
  margin: 30px auto;
  width: 230px;
  display: block;
}

input.error, textarea.error {
  border: 1px solid red;
}

#eway-payment-button {
  width: 300px;
  height: 50px;
}

#eway-payment-button {
  width: 300px;
  height: 50px;
}

#eway-results {
  margin: -25px 0 25px 0;
  text-align: center;
}

#eway-results.error {
  color: red;
}

.order-status {
  padding: 20px;
  color: #1D1F55;
  background-color: #ffb;
  text-align: center;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.just-submitted .order-status {
  font-size: 12pt;
  margin-top: 1em;
  padding-bottom: 10px;
}

.cjd-checkout {
  font-size: 11pt;
  border-collapse: collapse;
}

.cjd-checkout td {
  vertical-align: top;
  padding-top: 1em;
}

.cjd-checkout .name {
  margin: 0;
  text-align: right;
  padding-right: 0.25em;
  font-size: 11pt;
  color: #1D1F55;
}

.order-summary .name {
  width: 150px;
  padding-right: 1em;
}

.cjd-checkout tr.first-of-section td {
  border-top: 1px solid #ccc;
}

.order-submit-progress {
  height: 7px;
  background-color: #eee;
  margin: -20px 0 20px
}

.order-submit-progress span {
  background-color: #ffb819;
  display: block;
  width: 0;
  height: 100%;
}

.order-submit-progress.hiddenx {
  background-color: white;
}

.order-submit-progress.hiddenx span {
  background-color: white;
}



/*---------------------------------------------------------------------------------------------------------------------- card styling ---*/




.checkout-style-bc .checkout {
  margin-top: 0;
}

.checkout-style-bc form, .checkout-style-bc .checkout-blurb {
  max-width: unset;
}

.checkout-card {
  border: 2px solid#00b5cc;
  margin: 0 0 10px 0;
  border-radius: 12px;
  overflow: hidden;
}

.co-card-title {
  background-color: #00b5cc;
  color: white;
  padding: 10px 20px;
  font-size: 16pt;
  line-height: 2em;
  cursor: pointer;
}

.checkout-card.active .co-card-title, .checkout-card.locked .co-card-title {
  cursor: unset;
}

.co-number {
  border: 2px solid white;
  border-radius: 30px;
  display: inline-block;
  height: 2em;
  width: 2em;
  text-align: center;
  margin-right: 1em;
}

.co-card-body {
  display: none;
  padding: 20px;
}

.checkout-card.active .co-card-body {
  display: block;
}

.checkout-card.locked {
  border-color: #ccc;
}

.checkout-card.locked .co-card-title {
  background-color: #ccc;
}

.checkout-card.active {
  border-color: #eb539e;
}

.checkout-card.active .co-card-title {
  background-color: #eb539e;
}

.card-buttons {
  overflow: hidden;
}

.card-buttons button {
  float: right;
  padding: 0 3em;
}

.co-card-title .icon {
  float: right;
  line-height: 2em;
  display: none;
}

.checkout-card.completed .co-card-title .icon {
  display: block;
}

.co-artwork {
  margin-left: 20%;
}

.co-artwork label {
  display: block;
  font-weight: normal;
  line-height: 2.25em;
  font-weight: 300;
}

.co-artwork input {
  margin-right: 1em;
}

#artwork-upload {
  margin-top: 20px;
  font-size: 12pt;
}

.checkout-card .checkout-blurb {
  margin: -20px -20px 0 -20px;
  padding: 20px 40px;
}

.checkout-card .checkout-blurb p {
  padding: 0;
  margin: 0;
}

.page_checkout .checkout .name, .page_credit_cards .name {
  text-align: right;
  padding-right: 0.5em;
  line-height: 30px;
  margin-top: 0;
}

.page_checkout .checkout td, .page_credit_cards td {
  vertical-align: top;
  padding-bottom: 3px;
}

.table-input-separator {
  height: 20px;
}

.page_checkout #card-2 label.name {
  font-weight: normal;
  display: inline-block;
  vertical-align: top;
  width: 390px;
}

.table-input-separator {
  height: 20px;
}

#card-2 table {
  width: 100%;
  margin-bottom: 20px;
}

.order-summary p {
  padding: 0 0 0 20px;
  margin: 0px 0 1em 20%;
}

.order-summary h4 {
  color: #00b5cc;
  margin: 0 0 0 20%;
  padding: 0;
}

.order-summary a {
  margin-left: 10px;
}

.order-submit-button {
  text-align: center;
}

#card-1 input[type="file"].file-good {
  background-color: #dfd;
  color: green;
}

#card-1 input[type="file"].file-ok {
  background-color: #fff0e0;
  color: #f84;
}

#card-1 input[type="file"].file-bad {
  background-color: #fdd;
  color: red;
}

#card-1 .file-upload-msg {
  margin-top: 3px;
  padding: 5px 20px;
}

#card-1 #file-upload-warn {
  background-color: white;
  color: #f84;
  border: 1px solid #f84;
}

#file-upload-error {
  background-color: #ffd;
  border: 1px solid red;
  color: red;
  display: inline-block;
  padding: 5px 20px;
}

.card-buttons a {
  line-height: 36px;
  display: inline-block;
  font-size: 12pt;
}




.banner img {
  max-width: 100%;
}

/* ------------------------------------------------------------------------------------------------------------ login */
#main-page.page_login h1, #main-page.page_login h2, #main-page.page_store h2 {
  color: #eb539e;
  background-color: #c4d82f;
  text-align: center;
}
#main-page.page_login .login h2 {
  color: #00b5cc;
  background-color: inherit;
  margin: 0;
  text-align: center;
}
.page_login h1, .page_home h1, .page_store h1 {
  /*margin: -24px 0 0 0;*/
  padding: 10px 0 0 0;
}
.page_store h1 {
  margin: 0;
}
.page_login h2, .page_home h2, .page_store h2 {
  /*margin: 0;*/
  padding: 0 0 10px 0;
}
.page_login h1 {
  margin: -7px 0 0 0;
}
.page_login {
  background-color: #c4d82f;
}
.login {
  font-size: 12pt;
  background-color: #005387;
  border: 1px solid #f58426;
  margin: 10px auto 40px;
  padding: 36px 24px 12px 24px;
  max-width: 600px;
  border-radius: 12px;
  color: #eb539e;
}
.login .switch-panel {
  text-align: right;
  display: block;
  color: #eb539e;
  text-decoration: underline;
  margin: 1em;
}
.login table {
  padding: 0;
  border-spacing: 0;
  margin: 0 60px;
  text-align: left;
}

.login [name="user_email"] {
  text-align: right;
}
.login tr td:first-child {
  text-align: right;
}

.login input[name="user[email]"] {
  text-align: right;
}
.login input[type="text"], .login input[type="password"] {
  width: 120px;
  font-family: 'HelveticaNeue', 'Helvetica Light', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}
.login input[type="text"].long {
  width: 300px;
  text-align: left;
}
.login input[type="text"].medium {
  width: 200px;
  text-align: left;
}
.login tr td:first-child {
  padding-right: 10px;
}

.login table label {
  width: 100px;
  display: inline-block;
  font-weight: normal;
  margin: 0;
  color: #eb539e;
}
.login td {
  padding-bottom: 3px;
}
.plain-indent {
  margin: 0 10px;
}
.page_login .preamble {
  text-align: center;
}

/* colours --------------------------------------------------------------------------- */
#main-page h1 {
color: white;
background-color: #e2231a;
}
#main-page .home-page h1 {
color: white;
background-color: #e2231a;
}
#main-page .home-page h2, #main-page .home-page h2 {
color: #ffb819;
background-color: white;
}
#main-page .home-page h3 {
color: #e2231a;
background-color: white;
}
#main-page .home-page h2.band, #main-page .home-page h2.band {
color: white;
background-color: #ffb819;
}
#main-page .home-page h3.band {
color: white;
background-color: #e2231a;
}


  
    #main-page .page-lcp-contact h1 {
      color: white;
background-color: #e2231a;
    }
    #main-page .page-lcp-contact h3 {
      color: #e2231a;
background-color: white;
    }
    #main-page .page-lcp-contact h3.band {
      color: white;
background-color: #e2231a;
    }
    #main-page .page-lcp-contact img {
      border-color: #f9d3d1
    }
  

  
    #main-page .page-lcp-contact h2, #main-page .page-lcp-contact h4 {
      color: #ffb819;
background-color: white;
    }
    #main-page .page-lcp-contact h2.band, #main-page .page-lcp-contact h4.band {
      color: white;
background-color: #ffb819;
    }
  

  
    #main-page .page-lcp-faq h1 {
      color: white;
background-color: #e2231a;
    }
    #main-page .page-lcp-faq h3 {
      color: #e2231a;
background-color: white;
    }
    #main-page .page-lcp-faq h3.band {
      color: white;
background-color: #e2231a;
    }
    #main-page .page-lcp-faq img {
      border-color: #f9d3d1
    }
  

  
    #main-page .page-lcp-faq h2, #main-page .page-lcp-faq h4 {
      color: #ffb819;
background-color: white;
    }
    #main-page .page-lcp-faq h2.band, #main-page .page-lcp-faq h4.band {
      color: white;
background-color: #ffb819;
    }
  

  
    #main-page .page-artwork h1 {
      color: white;
background-color: #e2231a;
    }
    #main-page .page-artwork h3 {
      color: #e2231a;
background-color: white;
    }
    #main-page .page-artwork h3.band {
      color: white;
background-color: #e2231a;
    }
    #main-page .page-artwork img {
      border-color: #f9d3d1
    }
  

  
    #main-page .page-artwork h2, #main-page .page-artwork h4 {
      color: #ffb819;
background-color: white;
    }
    #main-page .page-artwork h2.band, #main-page .page-artwork h4.band {
      color: white;
background-color: #ffb819;
    }
  

  
    #main-page .page-shipping h1 {
      color: white;
background-color: #e2231a;
    }
    #main-page .page-shipping h3 {
      color: #e2231a;
background-color: white;
    }
    #main-page .page-shipping h3.band {
      color: white;
background-color: #e2231a;
    }
    #main-page .page-shipping img {
      border-color: #f9d3d1
    }
  

  
    #main-page .page-shipping h2, #main-page .page-shipping h4 {
      color: #ffb819;
background-color: white;
    }
    #main-page .page-shipping h2.band, #main-page .page-shipping h4.band {
      color: white;
background-color: #ffb819;
    }
  

  
    #main-page .page-pp h1 {
      color: white;
background-color: #e2231a;
    }
    #main-page .page-pp h3 {
      color: #e2231a;
background-color: white;
    }
    #main-page .page-pp h3.band {
      color: white;
background-color: #e2231a;
    }
    #main-page .page-pp img {
      border-color: #f9d3d1
    }
  

  
    #main-page .page-pp h2, #main-page .page-pp h4 {
      color: #ffb819;
background-color: white;
    }
    #main-page .page-pp h2.band, #main-page .page-pp h4.band {
      color: white;
background-color: #ffb819;
    }
  

  
    #main-page .page-sp h1 {
      color: white;
background-color: #e2231a;
    }
    #main-page .page-sp h3 {
      color: #e2231a;
background-color: white;
    }
    #main-page .page-sp h3.band {
      color: white;
background-color: #e2231a;
    }
    #main-page .page-sp img {
      border-color: #f9d3d1
    }
  

  
    #main-page .page-sp h2, #main-page .page-sp h4 {
      color: #ffb819;
background-color: white;
    }
    #main-page .page-sp h2.band, #main-page .page-sp h4.band {
      color: white;
background-color: #ffb819;
    }
  

  
    #main-page .page-sample h1 {
      color: white;
background-color: #e2231a;
    }
    #main-page .page-sample h3 {
      color: #e2231a;
background-color: white;
    }
    #main-page .page-sample h3.band {
      color: white;
background-color: #e2231a;
    }
    #main-page .page-sample img {
      border-color: #f9d3d1
    }
  

  
    #main-page .page-sample h2, #main-page .page-sample h4 {
      color: #ffb819;
background-color: white;
    }
    #main-page .page-sample h2.band, #main-page .page-sample h4.band {
      color: white;
background-color: #ffb819;
    }
  


#main-page .homepage-category h2.product-band {
color: white;
background-color: #e2231a;
}
#main-page .homepage-category h2.subcategory-band {
color: white;
background-color: #ffb819;
}


.gallery-item {
  border: 1px solid #ccc;
  display: block;
  overflow: hidden;
}
.gallery-item:hover {
  cursor: pointer;
  border: 1px solid #f1f1f1;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.gallery-image-container {
  /*width: 398px;*/
  height: 398px;
  background-size: cover;
  background-position: center;
}
.gallery-image-container img {
  max-width: 398px;
  max-height: 398px;
}
.gallery-images {
  margin: 20px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}
.gallery-item-content {
  padding: 0 20px;
}
.gallery-item-title {
  display: block;
  text-align: center;
  font-size: 16pt;
  line-height: 40px;
}
.gallery-item.full-width {
  height: 400px;
  grid-column: 1/-1;
}
.gallery-item.full-width .gallery-image-container {
  display: block;
  float: left;
  width: 400px;
  height: 400px;
}
.gallery-item.full-width .gallery-item-content {
  display: block;
  width: 400px;
  margin-left: 410px;
  vertical-align: top;
}
.gallery-item.full-width .gallery-item-title {
  display: block;
  /* vertical-align: top; */
}
.gallery-item-heading {
  display: block;
  text-align: center;
  font-size: 36px;
  line-height: 1.5em;
}
.winner .gallery-item-heading {
  background-color: #afca0a;
  color: white;
}
.commended .gallery-item-heading {
  background-color: #522875;
  color: white;
}
.blog-page-preview h2 {
  text-align: center;
  margin: 10px !important;
  background-color: white !important;
}
.blog-page-preview {
  height: 300px;
  border: 1px solid #ddd;
  margin: 10px 0;
  overflow: hidden;
  position: relative;
}
.blog-preview-img-container {
  width: 250px;
  text-align: center;
}
.blog-preview-img-container img {
  max-width: 100%;
}
.blog-preview-content {
  margin: 10px;
}
.blog-preview-content a {
  position: absolute;
  bottom: 0px;
  right: 0;
  left: 250px;
  padding: 50px 10px 10px 10px;
  background: linear-gradient(0deg, white, white 40%, rgba(0,0,0,0));
}
.blog-page-preview td {
  vertical-align: top !important;
}

.modal-overlay {
  background-color: rgba(0,0,0,0.3);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.gi-slideshow-image {
  display: flex;
  align-items: center;
  justify-content: center;
}
.gi-slideshow-image img {
  max-width: 80vw;
  max-height: 70vh;
}
.gi-slideshow {
  position: relative;
  background-color: white;
  /*max-height: 80%;*/
  max-width: 80vw;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5);
  border: 10px solid white;
}
.gi-slideshow-rhs {
  padding: 10px 10px 50px 10px;
}
.gi-slideshow-title, .gi-slideshow-heading {
  text-align: center;
  font-size: 24pt;
  margin: 0;
}
.gi-slideshow-nav {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 12pt;
}
.gi-slideshow-nav span {
  margin-left: 2em;
}
.gi-slideshow .action {
  color: blue;
}
.gi-slideshow .action:hover {
  text-decoration: underline;
  cursor: pointer;
}
.gi-slideshow-copy {
  font-size: 12pt;
}
.gi-slideshow-close {
  position: absolute;
  top: 0;
  right: 0;
  background-color: white;
  padding: 5px 20px;
  color: red !important;
}
.gi-slideshow-nav .button {
  width: 110px;
}

#main-page #logo-select, #white-removal, .modal-panel #logo-select, #white-removal {
  border-collapse: separate !important;
}

#main-page #logo-select td, #main-page #white-removal td, .modal-panel #logo-select td, .modal-panel #white-removal td {
  /*width: 200px;*/
  /*height: 230px;*/
  text-align: center;
  vertical-align: middle;
  /*background-image: url('/images/brandconnect/white-fabric.jpeg');*/
  border: 5px solid white;
  position: relative;
  padding: 0;
}
#main-page #logo-select td:hover, #main-page #white-removal td:hover, .modal-panel #logo-select td:hover, .modal-panel #white-removal td:hover {
  /*border: 1px solid ;*/
  border: 5px solid #ffffcc;
  /*border: none;*/
}
#main-page #logo-select td.selected, #main-page #white-removal td.selected, .modal-panel #logo-select td.selected, .modal-panel #white-removal td.selected {
  border: 5px solid #00b5cc;
}
#main-page #logo-select img, #main-page #white-removal img, .modal-panel #logo-select img, .modal-panel #white-removal img {
  max-width: 200px;
  max-height: 200px;
  margin-bottom: 20px;
}
#logo-select span, #white-removal span {
  background-color: white;
  bottom: 0;
  font-weight: normal;
  left: 0;
  position: absolute;
  right: 0;
  color: #646464;
}
#logo-select td.selected span, #white-removal td.selected span {
  color: #00b5cc;
}
#file-preview {
  max-width: 400px;
  max-height: 300px;
}
#file-upload-error {
  background-color: #ffd;
  border: 1px solid red;
  color: red;
  display: inline-block;
  padding: 5px 20px;
}
#main-page.page_virtual_samples h1, #sheet-virtual-samples h1 {
  background-color: #ffb819;
}
#main-page.page_virtual_samples h2, #sheet-virtual-samples h2 {
  color: #e2231a;
  font-size: 18pt;
  text-align: left;
  font-weight: bold;
}

/* --------------------- modal */
#sheet-virtual-samples {
  width: 1000px;
  /*max-width: 1000px;*/
  max-width: 738px;
  text-align: center;
  padding-bottom: 20px;
}
#sheet-virtual-samples #logo-select {
  text-align: center;
}
#vs-save-changes {
  margin-top: 20px;
  text-align: right;
}
#user-info {
  text-align: left;
}
.modal-panel .indent h1 {
  margin: 0 -50px 10px;
  color: white;
}
#sheet-virtual-samples .vs-preview {
  max-width: 95%;
}
.modal-panel #logo-select img, .modal-panel #white-removal img {
  /*width: 100%;*/
  width: 27vw;
}

#sheet-quick-look {
  max-width: 1200px;
  width: 80%;
}
h1 .icon-close {
  float: right;
  font-size: 20px;
  display: block;
  margin: 13px;
  padding: 10px;
}
h1 .icon-close:hover {
  border: 2px solid white;
  border-radius: 50px;
  padding: 8px;
}
#sheet-quick-look h1 {
  color: white;
background-color: #ffb819;
  margin-bottom: 0;
}
#sheet-quick-look p {
  margin: 0 0.5em;
}
#sheet-quick-look .price-table {
  border-collapse: collapse;
  margin: 10px;
}
#sheet-quick-look .price-table td {
  border-right: 1px solid #ddd;
  text-align: right;
  padding: 0 15px;
}
#sheet-quick-look .price-table tr td:last-of-type {
  border-right: none;
}
#sheet-quick-look p {
  margin: 0 0 1em 0;
  /*text-align: center;*/
}
#sheet-quick-look .price-qty {
  color: #ccc;
}
#sheet-quick-look .price-price, #sheet-quick-look .product-price {
  color: #ffb819;
}
#sheet-quick-look .add-to-cart {
  background-color: #eee;
  width: 100%;
  padding: 10px;
  border-radius: 10px;
}
#sheet-quick-look .add-to-cart td {
  text-align: left;
}
#sheet-quick-look .add-to-cart .name {
  text-align: right;
  padding-right: 1em;
}
#sheet-quick-look .price-qty td:last-of-type::after {
  content: '+';
  margin-right: -8px;
}
#sheet-quick-look h4 {
  font-size: 12pt;
  margin: 16px 0 0 0;
  padding: 0;
}
#sheet-quick-look h5 {
  font-size: 12pt;
  margin: 0 0 0 -10px;
  padding: 0;
}
.decoration-list {
  margin-left: 10px;
}
.decoration-list h5 {
  margin-left: -10px;
}
#sheet-quick-look .sheet-content {
  display: grid;
  grid-template-areas:
      "images details";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 500px;
  grid-gap: 10px;
}
#sheet-quick-look .ql-images {
  grid-area: images;
  display: flex;
}
#sheet-quick-look .ql-images .image-container {
  max-width: unset;
  width: 100%;
}
#sheet-quick-look .ql-details {
  grid-area: details;
}
#sheet-quick-look .button-row {
  height: 100px;
  background-image: linear-gradient(rgba(255,255,255,0.1),white);
  margin: 0;
  border-bottom: 20px solid white;
}
#sheet-quick-look .button-row a {
  left: 20px;
}
#sheet-quick-look .button-row .button {
  width: 200px;
  font-size: 16pt;
  right: 20px;
  left: unset;
}


/* ---------------------------------------------------------------------------------------------------- size specific */

@media (hover: none) {
  pointer-events: none !important;
}

/* --------------------------------------------------------------------------------------------------------------------- mobile below 768 */
/* "mobile" view */
@media (max-width: 768px) {
  #container {
    grid-template-columns: auto;
    grid-template-areas:
        "header"
        "content"
        "footer";
  }
  #sidebar {
    display: none;
  }
  #header {
    background-image: none;
    margin: 0 -10px;
  }
  #logo {
    margin: 1vw;
  }
  #header-nav {
    display: none;
  }
  #header-menu-bar {
    display: grid;
  }
  #container {
    padding: 0 10px;
  }
  #container.has-overlay #header {
    z-index: 102;
    overflow: unset;
  }
  #main-page .indent table {
    margin-left: 0;
    display: block;
    overflow-x: scroll;
  }
  #main-page ul.contents-list {
    width: unset;
    min-width: unset;
  }
  #cart, .modal-panel {
    border-radius: 0;
  }
  #cart h2, .modal-panel h2 {
    border-radius: 0;
  }
  #product-info {
    padding: 0 10px;
  }
  .modal-panel, #sheet-virtual-samples {
    width: unset;
  }

  .page-body, .indent {
    padding: 0 20px;
  }
  #main-page .indent h1, #main-page .indent h2, #main-page .indent h3, #main-page .indent h4 {
    margin: 0 -20px;
    padding: 0 20px;
  }
  .modal-panel .indent h1 {
    margin-left: -20px;
    margin-right: -20px;
  }
  #product-info #rhs-blank {
    margin-right: -20px;
  }
  .home-page-copy p {
    font-size: 16pt;
    line-height: 26pt;
    margin: 1em;
  }
  .modal-panel h4 {
    font-size: 14pt;

  }
  .modal-panel .form-fields {
    margin-top: 0;
  }
  .modal-panel .form-fields td {
    display: inline-block;
  }
  .modal-panel .form-fields label {
    /*text-align: left;*/
    margin: 5px 0 -5px 0;
    padding: 0;
    width: 30vw;
  }
  .modal-panel.sheet textarea {
    margin-left: 0;
    width: 100%;
  }
  .modal-panel .button-row a {
    max-width: 45%;
    text-align: left;
  }
  .card-slides {
    /*overflow-x: scroll;*/
  }
  #sheet-quick-look {
    width: unset;
  }


}

/* --------------------------------------------------------------------------------------------------------------------- desktop over 768 */
/* "desktop" view */
@media (min-width: 769px) {
  #cart {
    max-width: 800px;
  }
  #cart, .modal-panel {
    margin: auto;
    top: 100px !important;
    /*width: 80%;*/
    box-shadow: 0 1px 9px rgba(0,0,0,0.3);
  }
  #main-page .indent table {
    width: auto !important;
  }
}

/* --------------------------------------------------------------------------------------------------------------------- below 576 */
/*Really small devices (portrait phones, under 576px)*/
@media (max-width: 576px) {

   .cart-contents {
  margin: 10px;
}
 .cart-line {
  display: grid;
  grid-template-areas:
      "image desc desc  total"
      "image qty  price adjust";
  grid-template-columns: 55px auto 80px 90px;
  padding-bottom: 5px;
}
 .cart-col-adjust {
  justify-self: right;
}
 .cart-col-qty {
  grid-area: qty;
  text-align: right !important;
  padding-right: 5px;
  color: #aaa;
}
 .cart-col-qty:after {
  content: "@";
}
 .cart-col-price {
  text-align: left !important;
  color: #aaa;
}
 .cart-col-desc {
  line-height:2rem;
  /*text-align: center;*/
}
 .cart-shipping,  .cart-total,  .cart-gst {
  grid-template-areas: "summary total";
  grid-template-columns: auto 100px;
  line-height: 1.75rem;
}
 .cart-col-desc span {
  margin-left: 1em !important;
  line-height: 20px;
}
 .cart-headers .cart-col {
  display: none;
}
 .cart-headers .cart-col-desc,  .cart-headers .cart-col-total {
  display: block;
}
 .cart-headers .cart-col-desc {
  grid-column: 1;
}


  #main-page h1, #main-page h2, #main-page .page-header h1, #main-page .page-header h2 {
    font-size: 1.5rem;
    line-height: 2rem;
    padding: 5px 0;
  }
  .home-page-copy {
    margin: 0;
  }
  #products, .homepage-category .cards {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr) ) ;
  }
  .product-card .product-image {
    height: 160px;
  }
  .card-body p {
    display: none;
  }

  .image-container {
    height: 250px;
    max-width:375px;
  }
  #product-images {
    height: 250px;
  }
  .image-thumbs {
    margin-top: 260px;
  }
  #product-info #rhs-blank {
    display: none;
  }
  #product-info {
    display: grid;
    grid-template-columns: auto;
    grid-template-areas:
        "offer"
        "add-to-cart"
        "ask"
        "copy"
        "rhs"
        "stock";
  }
  #product-info #product-copy {
    grid-column: unset;
    grid-row: unset;
    grid-area: copy;
    /*background-color: #f288a9;*/
    min-height: 1000px;
  }
  #main-page .indent ul {
    margin-left: 0;
  }
  #main-page .indent img {
    display: block;
  }

  .bc-footer .sn-icon {
    width: 32px;
    height: 32px;
    display: inline-block;
    overflow: hidden;
    margin: 0 4px 0 4px;
    float: none;
  }
  .sn-icon img {
    height: 32px;
  }
  .sn-icon.sn-icon-gplus img {
    margin-left: 0px;
  }
  .sn-icon.sn-icon-facebook img {
    margin-left: -32px;
  }
  .sn-icon.sn-icon-twitter img {
    margin-left: -64px;
  }
  .sn-icon.sn-icon-instagram img {
    margin-left: -96px;
  }
  .sn-icon.sn-icon-pinterest img {
    margin-left: -128px;
  }
  .sn-icon.sn-icon-linkedin img {
    margin-left: -160px;
  }
  .sn-icon.sn-icon-youtube img {
    margin-left: -192px;
  }
  .order-submit-button input {
    width: 100%;
  }
  .social-icons {
    text-align: center;
  }
  .other-links {
    clear: both;
    text-align: center;
  }
  .bc-footer a {
    margin-left: 0.5em;
    margin-right: 0.5em;
    display: inline-block;
  }
  .buy-it-now {
    margin: 0 -10px;
    border-radius: 0;
    padding: 20px 10px;
  }
  #product-info #product-ask.style-bc {
    text-align: left;
    border: none;
    margin: 0 20px;
    padding: 0;
  }

  #product-info #product-ask.style-bc p {
    margin: 8px 0 0 0;
  }
  #product-info #product-ask.style-bc .btn-size-icon{
    float: left;
    margin-right: 10px;
    /*width: 159px;*/
  }
  #product-info #product-ask.style-bc h3 {
    margin: 20px 0 10px 0;
  }
  #product-info #product-ask.style-bc .action-container {
    overflow: hidden;
    margin-bottom: 10px;
  }
  .cart-line .remove {
    margin-right: 1em;
  }
  
    #sidebar, #cart h2, #header-nav, h1 {
      text-shadow: 0px 0px 3px rgba(0,0,0,0.4);
    }
  
  /*.home-page-copy p {*/
    /*font-size: 14em;*/
    /*line-height: 22em;*/
  /*}*/
  .modal-panel .form-fields label {
    text-align: left;
    width: 80vw;
  }
  .profile-edit label {
    width: unset;
    text-align: left;
    display: block;
  }
  .promo-code-entry td {
    display: inline-block;
  }
  h1, .band {
    border-radius: 0 !important;
  }
  #sheet-quick-look .sheet-content {
    grid-template-areas: "images" "details";
    grid-template-columns: 1fr;
    grid-template-rows: 250px 500px;
  }
  #sheet-quick-look .button-row {
    height: 150px;
    background-image: linear-gradient(0deg, white, white 50%, rgba(255,255,255,0))
  }
  #sheet-quick-look .button-row a:first-of-type {
    display: none;
  }
  #sheet-quick-look .button-row .button {
    width: unset;
    left: 20px;
    max-width: unset;
    text-align: center;
    display: block;
  }
}

/* --------------------------------------------------------------------------------------------------------------------- 576 - 768 */
/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 768px) {
  #main-page h1, #main-page h2 {
    font-size: 1.5rem;
    line-height: 2rem;
    padding: 5px 0;
  }
  .image-container {
    height: 300px;
    max-width: 450px;
  }
  #product-images {
    height: 300px;
  }
  .image-thumbs {
    margin-top: 310px;
  }
  #main-page .indent ul {
    margin-left: 0;
  }

  .bc-footer .sn-icon {
    width: 48px;
    height: 48px;
    display: inline-block;
    overflow: hidden;
    margin: 0 10px 0 0;
    float: left;
  }
  .sn-icon img {
    height: 48px;
  }
  .sn-icon.sn-icon-gplus img {
    margin-left: 0px;
  }
  .sn-icon.sn-icon-facebook img {
    margin-left: -48px;
  }
  .sn-icon.sn-icon-twitter img {
    margin-left: -96px;
  }
  .sn-icon.sn-icon-instagram img {
    margin-left: -144px;
  }
  .sn-icon.sn-icon-pinterest img {
    margin-left: -192px;
  }
  .sn-icon.sn-icon-linkedin img {
    margin-left: -240px;
  }
}

/* --------------------------------------------------------------------------------------------------------------------- 768 - 992 */
/*Medium devices (tablets portrait, 768px and up)*/
@media (min-width: 768px) and (max-width: 992px) {
  #main-page h1, #main-page h2 {
    font-size: 2rem;
    line-height: 2.5rem;
    padding: 10px 0;
  }
  .page-body {
    padding: 0;
  }
}

/* --------------------------------------------------------------------------------------------------------------------- 992 - 1200 */
/*Large devices (tablets landscape, 992px and up)*/
@media (min-width: 992px) and (max-width: 1200px) {
  #main-page h1, #main-page h2 {
    font-size: 2rem;
    line-height: 2.5rem;
    padding: 10px 0;
  }
}

/* --------------------------------------------------------------------------------------------------------------------- 1200 and up */
/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
  #products, .homepage-category .cards {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr) ) ;
  }
}
/* --------------------------------------------------------------------------------------------------------------------- 1400 and up */
@media (max-width: 1400px) {
  .bg-image {
    display: none;
  }
  #container {
    width: 100%;
    margin: 0;
    box-shadow: unset;
    border-radius: 0;
  }
  #header, #footer, #container {
    border-radius: 0;
  }
}


/* --------------------------------------------------------------------------------------------------------------------- tiny below 480 */
@media (max-width: 480px) {
  .buy-it-now {
    grid-template-columns: 1fr;
    grid-gap: 0;
  }
  .bin-qty .slider-container {
    display: none;
  }
  .bin-qty input {
    float: none;
  }
  .bin-totals {
    margin-bottom: 20px;
  }
  .bin-totals table {
    max-width: 100%;
    margin: 0 22px;
    width: 300px;
    line-height: 24px;
  }
  .buy-it-now .btn-container {
    width: unset;
    margin: 10px 22px;
  }
  #container {
    padding: 0;
  }
  #header {
    margin: 0;
  }
  .modal-panel .button-row button {
    width: 100%;
    display: block;
  }
  .modal-panel .button-row a {
    display: none;
  }

}

/* --------------------------------------------------------------------------------------------------------------------- size checkout cart correctly */
@media (max-width: 740px), (min-width: 769px) and (max-width: 950px) {
  .co-card-body .cart-contents {
  margin: 10px;
}
.co-card-body .cart-line {
  display: grid;
  grid-template-areas:
      "image desc desc  total"
      "image qty  price adjust";
  grid-template-columns: 55px auto 80px 90px;
  padding-bottom: 5px;
}
.co-card-body .cart-col-adjust {
  justify-self: right;
}
.co-card-body .cart-col-qty {
  grid-area: qty;
  text-align: right !important;
  padding-right: 5px;
  color: #aaa;
}
.co-card-body .cart-col-qty:after {
  content: "@";
}
.co-card-body .cart-col-price {
  text-align: left !important;
  color: #aaa;
}
.co-card-body .cart-col-desc {
  line-height:2rem;
  /*text-align: center;*/
}
.co-card-body .cart-shipping, .co-card-body .cart-total, .co-card-body .cart-gst {
  grid-template-areas: "summary total";
  grid-template-columns: auto 100px;
  line-height: 1.75rem;
}
.co-card-body .cart-col-desc span {
  margin-left: 1em !important;
  line-height: 20px;
}
.co-card-body .cart-headers .cart-col {
  display: none;
}
.co-card-body .cart-headers .cart-col-desc, .co-card-body .cart-headers .cart-col-total {
  display: block;
}
.co-card-body .cart-headers .cart-col-desc {
  grid-column: 1;
}

}

/* --------------------------------------------------------------------------------------------------------------------- login panel */
@media (max-width: 640px), (min-width: 769px) and (max-width: 850px) {
  #login-panel, #reset-panel {
    padding: 10px;
    text-align: center;
  }

  #login-panel input[type="submit"], #reset-panel input[type="submit"] {
    margin: 0 !important;
  }

  #login-panel table, #reset-panel table {
    margin: 0;
  }

  #login-panel table td, #reset-panel table td {
    padding: 5px !important;
  }

  .login .switch-panel {
    text-align: center;
    margin: 1em 0 10px 0;
  }
}

#sidebar, #cart h2, #header-nav, h1 {
  text-shadow: 0px 0px 1px rgba(0,0,0,0.2);
}