body {
	font-family: Arial, Helvetica, sans-serif /*{global | body-font-family}*/;
	font-size: 0.9 /*{global | body-font-size}*/;
	color: rgba(72, 86, 99, 1) /*{global | body-font-colour}*/;
	background-color: rgba(255, 255, 255, 1) /*{global | body-background-colour}*/;
}
a, .btn-link{
	color: rgba(0, 0, 0, 1) /*{global | link-text-colour}*/;
}
a:hover, a:active, a:focus, .btn-link:hover{
	color: rgba(89, 89, 89, 1) /*{global | link-text-hover-colour}*/;
}
.text-hover-primary:focus, .text-hover-primary:hover{
	color: rgba(89, 89, 89, 1) /*{global | link-text-hover-colour}*/ !important;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	font-family: Arial, Helvetica, sans-serif /*{global | headers-font-family}*/;
}
/* Dark button */
.btn-dark {
	color: rgba(255, 255, 255, 1) /*{buttons | btn-primary-text-colour}*/;
	background-color: rgba(48, 48, 48, 1) /*{buttons | btn-primary-background-colour}*/;
	border-color: rgba(48, 48, 48, 1) /*{buttons | btn-primary-background-colour}*/;
}
.btn-dark.focus,.btn-dark:focus,.btn-dark:hover {
	color: rgba(0, 0, 0, 1) /*{buttons | btn-primary-text-colour-hover}*/;
	background-color: rgba(71, 71, 71, 1) /*{buttons | btn-primary-background-colour-hover}*/;
	border-color: rgba(71, 71, 71, 1) /*{buttons | btn-primary-background-colour-hover}*/;
}
.btn-dark.disabled, .btn-dark:disabled {
	color: rgba(255, 255, 255, 1) /*{buttons | btn-primary-text-colour}*/;
	background-color: rgba(48, 48, 48, 1) /*{buttons | btn-primary-background-colour}*/;
	border-color: rgba(48, 48, 48, 1) /*{buttons | btn-primary-background-colour}*/;
}
.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active, .show > .btn-dark.dropdown-toggle {
	color: rgba(0, 0, 0, 1) /*{buttons | btn-primary-text-colour-hover}*/;
	background-color: rgba(71, 71, 71, 1) /*{buttons | btn-primary-background-colour-hover}*/;
	border-color: rgba(71, 71, 71, 1) /*{buttons | btn-primary-background-colour-hover}*/;
}
/* Primary button */
.btn-primary {
	color: rgba(41, 46, 51, 1) /*{buttons | btn-secondary-text-colour}*/;
	background-color: rgba(5, 5, 5, 0.68) /*{buttons | btn-secondary-background-colour}*/;
	border-color: rgba(5, 5, 5, 0.68) /*{buttons | btn-secondary-background-colour}*/;
}
.btn-primary.focus,.btn-primary:focus,.btn-primary:hover {
	color: #ffffff /*{buttons | btn-secondary-text-colour-hover}*/;
	background-color: rgba(12, 168, 20, 0.68) /*{buttons | btn-secondary-background-colour-hover}*/;
	border-color: rgba(12, 168, 20, 0.68) /*{buttons | btn-secondary-background-colour-hover}*/;
}
.btn-primary.disabled, .btn-primary:disabled {
	color: rgba(41, 46, 51, 1) /*{buttons | btn-secondary-text-colour}*/;
	background-color: rgba(5, 5, 5, 0.68) /*{buttons | btn-secondary-background-colour}*/;
	border-color: rgba(5, 5, 5, 0.68) /*{buttons | btn-secondary-background-colour}*/;
}
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
	color: #ffffff /*{buttons | btn-secondary-text-colour-hover}*/;
	background-color: rgba(12, 168, 20, 0.68) /*{buttons | btn-secondary-background-colour-hover}*/;
	border-color: rgba(12, 168, 20, 0.68) /*{buttons | btn-secondary-background-colour-hover}*/;
}
/* Success button */
.btn-success {
	color: rgba(255, 255, 255, 1) /*{buttons | btn-success-text-colour}*/;
	background-color: rgba(12, 168, 20, 0.68) /*{buttons | btn-success-background-colour}*/;
	border-color: rgba(12, 168, 20, 0.68) /*{buttons | btn-success-background-colour}*/;
}
.btn-success.focus,.btn-success:focus,.btn-success:hover {
	color: rgba(255, 255, 255, 1) /*{buttons | btn-success-text-colour-hover}*/;
	background-color: rgba(0, 0, 0, 0.68) /*{buttons | btn-success-background-colour-hover}*/;
	border-color: rgba(0, 0, 0, 0.68) /*{buttons | btn-success-background-colour-hover}*/;
}
.btn-success.disabled, .btn-success:disabled {
	color: rgba(255, 255, 255, 1) /*{buttons | btn-success-text-colour}*/;
	background-color: rgba(12, 168, 20, 0.68) /*{buttons | btn-success-background-colour}*/;
	border-color: rgba(12, 168, 20, 0.68) /*{buttons | btn-success-background-colour}*/;
}
.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active, .show > .btn-success.dropdown-toggle {
	color: rgba(255, 255, 255, 1) /*{buttons | btn-success-text-colour-hover}*/;
	background-color: rgba(0, 0, 0, 0.68) /*{buttons | btn-success-background-colour-hover}*/;
	border-color: rgba(0, 0, 0, 0.68) /*{buttons | btn-success-background-colour-hover}*/;
}
/* Header */
.top-bar, .top-bar a{
	color: rgba(255, 255, 255, 1) /*{header | top-bar-text-colour}*/;
    background-color: rgba(20, 20, 20, 0.64) /*{header | top-bar-background-colour}*/;
}
.navbar-fixed-light.fixed-top .navbar-nav .nav-link, .navbar-hover-light:hover .navbar-nav .nav-link, .navbar-light .navbar-nav .nav-link,
.navbar-fixed-light.fixed-top .navbar-icon-link, .navbar-hover-light:hover .navbar-icon-link, .navbar-light .navbar-icon-link,
.navbar-fixed-light.fixed-top .navbar-toggler, .navbar-hover-light:hover .navbar-toggler, .navbar-light .navbar-toggler{
	color: rgba(255, 255, 255, 0.65) /*{header | nav-links-fixed-colour}*/;
}
.navbar-dark .navbar-nav .nav-link, .navbar-dark .navbar-icon-link, .navbar-dark .navbar-toggler{
	color: #ffffff /*{header | nav-links-colour}*/;
}
header .navbar{
	background-color: rgba(79, 79, 79, 0.64) /*{header | navbar-top-background-colour}*/ !important;
}
.bg-hover-white:hover, .navbar.fixed-top.bg-fixed-white {
    background-color: rgba(79, 79, 79, 0.64) /*{header | navbar-scroll-background-colour}*/ !important;
}
/* Body */
.parallax-caption h1, .parallax-caption h5{
	color: rgba(224, 224, 224, 1) /*{home | banner-text-colour}*/;
}
.badge-primary {
    color: rgba(41, 46, 51, 1) /*{buttons | btn-secondary-text-colour}*/;
    background-color: rgba(5, 5, 5, 0.68) /*{buttons | btn-secondary-background-colour}*/;
}
.badge-success {
    color: rgba(255, 255, 255, 1) /*{buttons | btn-success-text-colour}*/;
    background-color: rgba(12, 168, 20, 0.68) /*{buttons | btn-success-background-colour}*/;
}
.ribbon-primary {
	background-color: rgba(252, 0, 0, 0.59) /*{thumbnail | ribbon-on-sale-colour}*/;
}
.ribbon-secondary {
    background-color: #868e96 /*{thumbnail | ribbon-sold-out-colour}*/;
}
.product-image:hover{
	border-color: rgba(250, 238, 82, 1) /*{thumbnail | product-thumbnail-border-hover-colour}*/;
}
.hero{
	background-color: rgba(92, 91, 90, 0.5) /*{global | page-hero-background-colour}*/;
}
.hero-heading{
	color: rgba(0, 0, 0, 1) /*{global | page-hero-heading-colour}*/;
}
.page-item.active .page-link{
	color: #ffffff /*{pagination | pagination-text-colour}*/;
    background-color: rgba(23, 17, 17, 1) /*{pagination | pagination-background-colour}*/;
    border-color: rgba(23, 17, 17, 1) /*{pagination | pagination-background-colour}*/
}
/* Footer */
.footer-usp-column h6, .footer-usp-column a{
	color: rgba(40, 41, 41, 1) /*{footer | footer-usps-title-colour}*/;
}
.footer-usp-column p{
	color: rgba(120, 121, 122, 1) /*{footer | footer-usps-text-colour}*/;
}
.component.selector {margin-top: 15px; margin-bottom: 35px;}
.component.selector .row {margin: 0;}
.component .well {margin: 0;padding: 15px 0px 0;}
.collapsible {background:none;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;color: rgba(72, 86, 99, 1);
}
.collapsible.active::after {content: "\f068";}
.collapsible::after {
  content: "\f067";
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
float: right;
font-family: "Font Awesome 5 Free"; /* Updated font family for FA 5 */
    font-weight: 900; /* Solid icon weight */
  font-size: 17px;
/*  position: absolute;  added to force to the right when loading, not sure it will work, problem seems to be on loading only */
}
.group-selected .collapsible {color:green;}
.group-selected .collapsible::before {content: "\f00c";
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-right: 5px;float: leftt;
font-family: "Font Awesome 5 Free"; /* Updated font family for FA 5 */
    font-weight: 900; /* Solid icon weight */
  font-size: 17px; right: 0;
/* position: absolute;  added to force to the right when loading, not sure why i put it on the before */
}
.component .content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.plsmns {  position: absolute;font-size: 30px;
  right: 33px;
  top: 33px;
  color: #ccc;
  cursor: pointer;}
.component .well {border: none;border-bottom: 1px solid #eee;}
/* #main-image.component-var-thumb {min-width:200px;min-height:200px;} 
.component .thumbnail .caption {min-width:200px;} removed these restrictions as doesn't fit on page on this template */
.component .thumbnail .caption .input-group {max-width: 90%;margin: 0 auto;}
.tabcontent img {max-width:100%;}
    .component .btn, .component .optional-button {
        /* Default button styles */
        color: white;
        border: none;
        padding: 10px 20px;
        cursor: pointer;
        /* min-width: 180px !important; */ border-radius: 5px !important;
margin: 0 auto; width: 80%;
    }
.component .optional-button {
text-transform: uppercase;
font-weight: 500;
letter-spacing: 1px;
transition: all .3s ease;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
font-size: 14px;
line-height: 1.42857143;
user-select: none;
}
   .component .btn.selected, .component .optional-button.optional-selected {
        /* Styles for selected button */
        background-color: #28a745; /* Green color for selected */
        color: white;
        border: none;
    }
      .component .btn:hover, .component  .btn-primary:focus, .component .btn-primary:hover, .component .optional-button:hover, .component .optional-button:focus {
        /* Hover effect for the button */
        background-color: #28a745;
        border: none!important;outline:none;
    }
.kitincsel {margin: 0 auto;}
    .kitincsel .btn {width: 100%;}
    .kitincsel .btn:hover {
    background-color: #28a745;
    }
.component .caption h4.title {margin-bottom: 0;height: 4.3em;}
   .component .product-availability {text-align:center;margin-bottom: 6px;}
.kitoptnl .component .btn.selected {background-color: #ff0000;}
.kitoptnl .component .btn.selected:focus {background-color: #000;}
.product-availability svg {
  width: 15px;
  vertical-align: sub;
  margin-right: 2px;
  height: 15px;
}
.wrapper-components-thumbnail {float: left;}
.component .caption h4.title {
  font-size: 12px;text-align: center;
}
.component .panel-body {
  padding: 10px 5px 0;
  margin: 0 -15px;
}
.component .thumbnail {
  background: #fff;
  padding: 10px;
}
  @media (min-width: 768px) and (max-width: 991px) {
.hidden-sm {
  display: none !important;
}
.order-2 {
  order: 0;
}
}
  @media (max-width: 767px) {
.hidden-xs {
  display: none !important;
}
.order-2 {
  order: 0;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important;}
  }
@media (min-width: 992px) {
  .navbar-nav .dropdown-menu .pl-lg-5 {padding-left:3rem!important;}
}
.collapsible, .collapsible.active, .collapsible:hover, .collapsible.active:hover, .collapsible:active, .collapsible.active:active, .collapsible:focus, .collapsible.active:focus  {outline:none!important;border:none!important;border-image:none!important;}
.megamenu {max-height: calc(100vh - 220px); /* leaves room for header/footer; may need adjusting */
  overflow-y: auto;
  overscroll-behavior: contain;      /* stops scroll chaining to the body */
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
  z-index: 9999;                     /* keep it above page content */
}