/** Shopify CDN: Minification failed

Line 68:13 Expected identifier but found whitespace
Line 68:15 Unexpected "{"
Line 68:25 Expected ":"
Line 71:13 Expected identifier but found whitespace
Line 71:16 Unexpected "{"
Line 71:26 Expected ":"
Line 204:19 Expected identifier but found whitespace
Line 204:21 Unexpected "{"
Line 204:31 Expected ":"
Line 280:2 "pedding-left" is not a known CSS property
... and 3 more hidden warnings

**/
:root {
  
}


/* --------------------------------- */
/* CUSTOM FONTAWESOME CLASSES        */
/* --------------------------------- */
.fa-20px {
  height: 20px;
}



/* --------------------------------- */
/* SECTION SPACING					 */
/* Because Bootstrap's default space */
/* utilities sometimes are too small */
/* --------------------------------- */
.spaced {
  margin-top: 4rem;
  margin-bottom: 4rem;  
}

.spaced-top {
  margin-top: 4rem; 
}

.spaced-bottom {
  margin-bottom: 4rem; 
}




/* --------------------------------- */
/* SCROLLBARS                        */
/* Does not work in Safari           */
/* --------------------------------- */
* {
  scrollbar-width: thin;
}




/* --------------------------------- */
/* HIGHLIGHTS                        */
/* Needs additional theme settings:  */
/* - highlight_color                 */
/* --------------------------------- */
::selection {
  background: {{ settings.highlight_color }}; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background:  {{ settings.highlight_color }}; /* Gecko Browsers */
}



/* --------------------------------- */
/* FLEX UTILITIES                    */
/* --------------------------------- */
.break {
  flex-basis: 100%;
  height: 0;
}



/* -------------------- */
/* IMAGES               */
/* -------------------- */
img {
  transition: all 1s; 
}

img.contain {
  object-fit: contain;
}

img.cover {
  object-fit: cover;
}

img.bright {
  opacity: 0.9;
}
img.bright:hover {
  opacity: 1;
}

img.zoom {
  transform: scale(1);
}
img.zoom:hover {
  transform: scale(1.05); 
}

/* Lazy load images (requires lazysizes.js and a few plugins */
.blur-up {
  filter: blur(5px);
/*   transition: filter 1s; */
}

.blur-up.lazyloaded {
  filter: blur(0);
}

.ls-blur-up-is-loading,
.lazyload:not([src]) {
  visibility: hidden;
}

.ls-blur-up-img {
  filter: blur(10px);
  opacity: 1;
/*   transition: opacity 1000ms, filter 1500ms; */
}

.ls-blur-up-img.ls-inview.ls-original-loaded {
  opacity: 0;
  filter: blur(5px);
}



/* -------------- */
/* ADAPTABLE CARD */
/* -------------- */
/* A card that is shown as a normal card on desktop, */
/* but transforms to an overlay image card on mobile */

.card-adaptable {
  border-radius: 10px; 
}

.card-adaptable .card-title,
.card-adaptable .card-title * {
  color: #212529; 
}

.card-adaptable .card-text,
.card-adaptable .card-text * {
  color: #6c757d; 
}

.card-adaptable .card-body {
  padding: 1.5rem 1.75rem;  
}

.card-adaptable a {
  text-decoration: none; 
}

@media screen and (max-width: 767px) {
  .card-adaptable .card-img,
  .card-adaptable .card-img-top,
  .card-adaptable .card-img-bottom {
    filter: brightness(0.8); 
  }
  .card-adaptable .card-body {
    background-color: transparent;
    position: absolute;
    bottom: 0;
  }
  .card-adaptable .card-title,
  .card-adaptable .card-title *,
  .card-adaptable .card-text,
  .card-adaptable .card-text * {
    color: #fff;
  }
}



/* -------------- */
/* HEADER ACCENTS */
/* -------------- */
/* Small colored line under some elements, to highlight it */

.title-highlight-start:after,
.title-highlight-center:after,
.title-highlight-end:after {
  width: 80px;
  height: 2px;
  display: block;
  content: "";
  background-color: {{ settings.primary_site_color }};
}

.title-highlight-start:after { 
  margin: 7px 0 0; 
}

/* centered highlight */
.title-highlight-center:after { 
  margin: 7px auto 0;
}

/* right-aligned highlight */
.title-highlight-end:after {
  margin: 7px 0 0 auto; 
}

@media screen and (min-width: 768px) {
  .title-highlight-md-start:after { 
    margin: 7px 0 0 !important; 
  }
  
  /* centered highlight */
  .title-highlight-md-center:after { 
    margin: 7px auto 0 !important;
  }
  
  /* right-aligned highlight */
  .title-highlight-md-end:after {
    margin: 7px 0 0 auto !important; 
  }
}

@media screen and (min-width: 992px) {
  .title-highlight-lg-start:after { 
    margin: 7px 0 0 !important; 
  }
  
  /* centered highlight */
  .title-highlight-lg-center:after { 
    margin: 7px auto 0 !important;
  }
  
  /* right-aligned highlight */
  .title-highlight-lg-end:after {
    margin: 7px 0 0 auto !important; 
  }
}




/* ------------------------------------------- */
/* Animate on scroll (custom, not the AOS lib) */
/* ------------------------------------------- */

/* Animated elements */
[data-aos] {
  opacity: 0;
}



/* ---------------------- */
/* Product badges */
/* ---------------------- */
/* .new-badge {
  position: absolute;
  top: 2.5%;
  left: 5%;
  z-index: 2000;
} */

.product-card-badge-icon-container img {
  height: 50px;
  padding-top: 3px;
  pedding-left: 3px;
  z-index: 999;
}

.product-gallery-badge-icon-container img {
  height: 100px;
  z-index: 999;
}


/* ----------------------------- */
/* Fancy hover effects for links */
/* ----------------------------- */
a.fancy {
  position: relative;  
}

a.fancy,
a:hover {
  text-decoration: none !important;
}
a.fancy:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background: {{ settings.colors_accent_2 }};
  opacity: 0;
  border-radius: 5px;
  transform: scaleX(0);
  transition: 0.3s linear;
}
a.fancy.text-white:before,
a.fancy-white:before {
  background: #fff !important;
}
a.fancy:focus:before,
a.fancy:hover:before {
  opacity: 1;
  transform: scaleX(1);
}


/* ------------------------------------ */
/* STICKY: Make elements sticky to top, */
/* while maintaining allowance for      */
/* header height (--header-height)      */
/* ------------------------------------ */
.sticky {
  position: sticky !important;
  top: var(--header-height) !important;
}


@media screen and (min-width: 992px) {
  .sticky-lg {
    position: sticky !important;
    top: var(--header-height) !important;
  }
}



/* ------------------------------------ */
/* EMBEDDED VIDEOS                      */
/* Method to make iframe videos fluid   */
/* css-tricks.com/fluid-width-video/    */
/* ------------------------------------ */
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



/* ------------------------------------ */
/* TABLES                               */
/* ------------------------------------ */
table:not(.table) {
  width: 100%;
  margin-bottom: 1rem;
  color: var(--bs-body-color);
  vertical-align: top;
  border: 1px solid var(--bs-border-color);
  font-size: 1rem;
}
table:not(.table) th, 
table:not(.table) td {
  /* padding: 0.25rem 0.5rem; */
  padding: 0 0.2rem;
}
table:not(.table) tr:nth-of-type(odd) {
    /* background-color: rgb(0, 0, 0, 0.15); */
}
table:not(.table) td p {
  margin: 0 !important;
}