/** Shopify CDN: Minification failed

Line 336:9 Expected ":"
Line 547:0 Unexpected "}"
Line 728:2 Unexpected "{"
Line 728:3 Expected identifier but found "%"
Line 737:2 Unexpected "{"
Line 737:3 Expected identifier but found "%"
Line 746:2 Unexpected "{"
Line 746:3 Expected identifier but found "%"

**/
:root { /* new styles 02/2025 */
  --hex-new-lightgrey: #F9F9F9;
  --hex-new-grey: #C6BCB8;
  --hex-new-black: #1E1E1E;
  --new-border-radius-lg: var(--desk-clamp20);
  --new-border-radius-sm: var(--desk-clamp10);
}
@media screen and (max-width: 749px) {
  :root {
    --new-border-radius-lg: var(--mob-clamp20);
    --new-border-radius-sm: var(--mob-clamp10);
  }
}
:root { 
  --font-primary: 'Neue Helvetica Pro', Tahoma, sans-serif !important;
  --font-extra-fancy: 'Neue Helvetica Pro Extended Bold', Arial, sans-serif !important;
  --font-sometype: 'Sometype Mono', Inter, Arial, monospace !important;
  
  --hex-black: #282A2A;
  --hex-grey: #C0C0C0;
  --hex-darkgrey: #8B8B8B;
  --hex-darkergrey: #464747;
  --hex-lightgrey: #F1F1F1;
  --hex-white: #F0F0F0;
  --hex-red: #C61C1C;
  
  --gradient-lightgrey: #F3F3F3;
  --gradient-midgrey: #F0F0F0;
  --gradient-grey: #DCDCDC;

  --linear-gradient: linear-gradient(var(--gradient-lightgrey), var(--gradient-midgrey) 30%, var(--gradient-grey));
  
  --gradient-lightgrey-hsl: 0, 0%, 95%;
  --gradient-midgrey-hsl: 0, 0%, 94%;
  --gradient-grey-hsl: 0, 0%, 86%;

  --bracket-color: var(--hex-grey);
}

*:not(span) {
  font-family: 'Neue Helvetica Pro', Helvetica;
  line-height: 1.1;
}

h1 { font-size: var(--font-h1); font-weight: 600; letter-spacing: -.02em;}
h2 { font-size: var(--font-h2); font-weight: 600; letter-spacing: -.02em;}
h3 { font-size: var(--font-h3); font-weight: 500; letter-spacing: -.02em;}
h4 { font-size: var(--font-h4);}
h5 { font-size: var(--font-h5); font-weight: 500; letter-spacing: -.01em;}
h6 { font-size: var(--font-h6);}
p { font-size: var(--body-size); font-weight: 400; letter-spacing: 0; }
button { font-size: var(--button-text-size); }
a { text-decoration: none; color: var(--hex-darkgrey);}
footer a { font-size: var(--font-link-footer); } 
.header__menu-item span, nav a { font-size: 1rem; } 
input { padding-top: .5%; }
h1, h2, h3, h4, h5, h6, p, a, ul, li, button, label { margin-block-end: 0; margin-block-start: 0; line-height: 1.1;}

.custom-button, .custom-button > span,
a, button, a > span, button > span {
  cursor: crosshair;
  pointer-events: auto;
}
strong { font-weight: 600; }
a:hover, button:hover, a > span:hover, button > span:hover {
  cursor: crosshair;
  pointer-events: auto;
}
/* New card update overrides */
.suggested-product-card .foreground-content > img,
.product-card .foreground-content > img {
  display: none!important;
}
.pill, 
.pill * {
  font-family: 'Barlow'!important;
  font-weight: 500;
}
/* .pill em {
  color: var(--hex-red)!important;
  font-style: normal;
} */

.pill > div {
  padding: 7px 21px 7px 21px!important;
}




.heading {  
  font-size: var(--heading-h2);
  padding-bottom: var(--box-padding);
  text-align: center;
}
.heading.small-heading {
  padding-bottom: var(--mob-clamp12);
}
@media screen and (min-width: 750px) {
  .heading.small-heading {
    padding-bottom: var(--desk-clamp22);
  }
}

.tag { 
  --tag: var(--mob-clamp8);
  --tag-lg: var(--mob-clamp10);
  font-size: var(--tag); 
  color: var(--hex-darkgrey); 
  font-weight: 500;
}
.tag.light-tag {
  color: var(--hex-lightgrey); 
}
.tag.large-tag {
  font-size: var(--tag-lg); 
  color: var(--hex-grey); 
}
@media screen and (min-width: 750px) {
  .tag {
    --tag: var(--desk-clamp14);
    --tag-lg: var(--desk-clamp16);
    font-weight: 300;
  }
  .tag.large-tag {
    font-weight: 500; 
  }
}

/* adjust to center text within container */
button > span,
.button > span, 
.custom-button > span,
.intro > span,
.pill > span {
  margin-bottom: -.3em;
}

form input.custom-button {
  padding-top: .35em;
}

/* Repeatables */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.image-cover, 
.image-contain {
  height: 100%;
  width: 100%;
}
.image-cover {
  object-fit: cover;
}
.image-contain {
  object-fit: contain;
  object-position: bottom;
}

/* NEED TO SPLIT BUTTON STYLES INTO LARGE AND SMALL
Border Radius: (desktop stays the same)
LARGE:  desk 10, mobile 6
SMALL:  desk 10, mobile: 4
*/
.custom-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height:  var(--mob-clamp36);
  min-width: 160px;
  max-width: 100%;
  padding-inline: 2%;
  border-radius: var(--border-radius-lg);
  border: none;
  background-color: var(--hex-black, black);
  
  color: #FFF;
  font-size: var(--button-text-size);
  font-weight: 500;
  text-decoration: none;

  cursor: crosshair;
  transition: box-shadow var(--duration-short) ease;
}

@media only screen and (min-width: 750px) {
  .custom-button {
    height:  var(--desk-clamp54);
  }
}

a.custom-button:hover {
  color: #fff;
}
.custom-button:hover {
  cursor: crosshair;
}
a.custom-button.invert-button-color:hover {
  color: var(--hex-black);
}
.custom-button:disabled,
.custom-button[disabled] {
  cursor: not-allowed;
}

/* when clicked, acts like 3d button going down with shadow change */
.custom-button.down-button {
  box-shadow: 0 1px 1px 0px rgba(0,0,0,0);
  transform: translate(0px, 0px);
  transition: .2s linear;
}
.custom-button.down-button:hover {
  box-shadow: 0 1px 3px 0px rgba(0,0,0,.5);
}
.custom-button.down-button:active {
  box-shadow: 0 1px 1px 0px rgba(0,0,0,.75);
  transform: translate(0px, 1px);
}

.custom-button.highlight-button {
  box-shadow: 0 0px 0px 0px rgba(0,0,0,0);
  transition: .3s linear;
}
.custom-button.highlight-button:hover {
  background-color: var(--hex-darkgrey);
}
.custom-button.highlight-button:active {
  background-color: var(--hex-white);
}

.custom-button.highlight-button.invert-button-color {
  box-shadow: 0 0px 0px 0px rgba(0,0,0,0);
  transition: .3s linear;
}
.custom-button.highlight-button.invert-button-color:hover {
  color: var(--hex-darkgrey);
  border: .5px solid var(--hex-darkgrey);
  background-color: transparent;
}
.custom-button.highlight-button.invert-button-color:active {
  background-color: var(--hex-white);
  border: .5px solid var(--hex-darkgrey);
  color: var(--hex-darkgrey);
}


.glint-button {
  position: relative;
  z-index: 10;
  overflow: hidden;
}
.glint-button::after {
  position: absolute;
  top: 0;
  z-index: -10;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  left: -100%;
  clip-path: polygon(10% 0, 70% 0, 90% 100%, 30% 100%);
  background-color: rgba(150, 150, 150, 0.25);
  transition: all 300ms ease;
}

.glint-button:hover::after {
  left: 100%;
  transition: all 400ms ease;
}
.glint-button:active::after {
  left: 0%;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: all 100ms ease;
}


/* LINK STYLES */
.grow-link {
  transform: scale(1);
  transition: transform 100ms linear;
}
@media only screen and (min-width: 750px) {
  .grow-link:hover {
    transform: scale(1.02);
  }
}
@media only screen and (max-width: 749px) {
  .grow-link:hover {
    transform: scale(1.02);
  }
  .grow-link:active {
    transform: scale(.98);
    transition: transform 100ms ease-out;
  }
}
.underline-link {
  display: block;
  position: relative;
  padding: 0.2em 0;
}
.underline-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.09em;
  border-radius: 10px;
  background-color: var(--hex-darkgrey);
  opacity: 0;
  transition: opacity 300ms, transform 300ms;
}
.header__active-menu-item {
  text-decoration: none!important;
}

.underline-link {
  overflow: hidden;
}

.underline-link::after {
  opacity 1;
  transform: translate3d(-100%, 0, 0);
}
[aria-current]:not([aria-current="false"])::after,
.underline-link:hover::after,
.underline-link:focus::after{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
[aria-current]:not([aria-current="false"])::after {
  background-color: var(--hex-grey);
}
.custom-nav-link {
  margin: 0 1.2rem!important;
  font-weight: 500;
  color: var(--hex-black);
}
.custom-nav-link > span {
  font-weight: 500;
  color: var(--hex-black);
}
.custom-nav-link:hover > span {
  font-weight: 500;
  color: var(--hex-black);
}

.list-menu--inline {
  align-items: center;
}

@media only screen and (max-width: 749px) {
  /* 31ko - turns custom-button style from button to link style */
  .a-link {
      border: none;
      text-decoration: underline;
      font-size: var(--mob-clamp12);
      width: 100%;
      height: auto;
      margin-block: 3%;
      text-align: center;
      background: transparent!important;
      color: var(--hex-darkgrey)!important;
      font-weight: 300;
      text-transform: lowercase;
  }
  .a-link span {
    color: var(--hex-darkgrey)!important;
    background: transparent!important;
  }
}
.invert-button-color {
  background-color: white;
  border: .5px solid var(--hex-black, black);
  color: var(--hex-black, black);
}
.transparent-button {
  background: transparent;
  border: 1px solid white;
}
/*=== DESKTOP / MOBILE TOGGLE ===*/
  @media only screen and (min-width: 750px) {
    .desktop-inline {
      display: inline-block!important;
    }
    .desktop-block {
      display: block!important;
    }
    .mobile-only,
    .mobile-inline,
    .mobile-block {
      display: none!important;
    }
  }
  @media only screen and (max-width: 749px) {
    .desktop-only,
    .desktop-block,
    .desktop-inline {
      display: none!important;
    }
    .mobile-inline {
      display: inline-block!important;
    }
    .mobile-block {
      display: block!important;
    }
  }



/**** OVERRIDES ****/
  .page-width {
    padding-inline: 10px;
  }
  @media screen and (min-width: 750px) {
    .page-width {
      max-width: 1600px;
      margin: 0 auto;
      padding-inline: var(--desk-clamp60, 60px);
    }
  }


/* HEADER OVERRIDES */
.header:not(.drawer-menu).page-width {
  margin: 0;
  height: 65px;
  width: 100%!important;
  max-width: 100%!important;
  padding: 0 var(--desk-clamp60, 60px)!important;
}
body:is(.app-page) .header:not(.drawer-menu).page-width {
  padding-inline: var(--desk-clamp26, 26px) var(--desk-clamp22, 22px)!important;
  height: calc(84rem/16);
}
@media (max-width: 749px){
  body:is(.app-page) .header:not(.drawer-menu).page-width {
    height: var(--mob-clamp44);
    border-radius: var(--mob-clamp10);
  }
}

.link {
  font-size: 16px;
  font-weight: 500;
}
.header:not(.drawer-menu).page-width {
  background: linear-gradient(rgba(243,243,243,1) 0%, rgba(220,220,220,1) 100%);
}
:is(.home-page) .header:not(.drawer-menu).page-width {
  margin: 0 0 -65px 0;
  background: linear-gradient(rgba(0,0,0,.16) 0%, rgba(40,42,42,0.056) 100%);
}

.background-blur {
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}

body:is(.home-page,.app-page) .header-wrapper.gradient {
  -webkit-backdrop-filter: blur(1px);

  backdrop-filter: blur(1px);
  background: transparent!important;
  background-color: transparent!important;
}
 body:is(.app-page) .header__icon--cart {
   display: none;
 }
  body:is(.app-page) .header__icons {
    padding-right: 0;
  }
  body:is(.home-page,.app-page) .header__heading-logo-wrapper {
    display: flex;
  }
@media (max-width: 749px){
  :is(.home-page) .header .header__icon {
      color: white;
  }

  body:is(.home-page) .header__heading-logo-wrapper img {
    filter: invert(1);
  }

  body:is(.app-page) .header__heading-logo {
    width: var(--mob-clamp150);
  }
    body:is(.app-page) .header-wrapper.gradient header {
      max-width: calc(100vw - var(--mob-clamp20)*2) !important;
  }
}

header details[open]>.header__submenu {
  background-color: #fff;
}
@media (min-width: 750px){
    body:is(.home-page,.app-page) .header *:not(.menu-drawer__menu > li > a, .menu-drawer__close-button, summary) {
    color: var(--hex-black, #000);
  }
  body:is(.home-page,.app-page) .custom-nav-link > span,
  body:is(.home-page,.app-page) .custom-nav-link:hover > span {
    color: var(--hex-black, #000);
  }
  .header__icon.header__icon--cart {
    filter: invert(1);
  }
  body:is(.home-page,.app-page) .header__icon.header__icon--cart {
    /* filter: invert(0); */
  }
  body:is(.home-page,.app-page) .header-wrapper.gradient header {
    background-image: linear-gradient(#ffffff, #e3e3e3) !important;
    position: absolute;
  }
  body:is(.home-page) .header-wrapper.gradient header {
    max-width: calc(100vw - 7.5rem) !important;
    left: 3.75rem;
  }
    }
  body:is(.app-page) .header-wrapper.gradient header {
    max-width: calc(100vw - 80rem / 16) !important;
    position: absolute;
    left: calc(40rem / 16);
  }

  body:is(.home-page) .header-wrapper.gradient header {
    border-radius: var(--border-radius-lg);
    top: 1.5rem;
  }
  body:is(.app-page) .header-wrapper.gradient header {
    border-radius: var(--new-border-radius-lg);
    top: var(--desk-clamp40);
  }
}
.header__submenu.list-menu {
  background: #fff;
}
.header__submenu .header__menu-item {
    color: black;
}
@media (min-width: 990px){
summary.list-menu__item {
  margin-left: 1.2rem;
}
}
details[open]>.header__menu-item,
.header__menu-item:hover > span {
  text-decoration: none;
}


.shopify-payment-button__button--unbranded {
  background-color: #F0F0F0!important;
}

.shopify-payment-button__button--unbranded,
.shopify-payment-button__button--unbranded:after {
  color: var(--hex-black)!important;
  border-radius: var(--border-radius-lg);
  height: var(--desk-clamp54);
  min-height: var(--desk-clamp54)!important;
  padding: .3em 0 0!important;
  text-transform: uppercase;
}



/* OLD WEBSITE CODE */
:root {
  --font-size--8px: 6px, .66vw, 8px;
  --font-size--12px: 8px, 1vw, 12px;
  --font-size--15px: 9px, 1.25vw, 15px;
  --font-size--16px: 10px, 1.33vw, 16px;
  --font-size--18px: 11px, 1.5vw, 18px;
  --font-size--21px: 13px, 1.75vw, 21px;
  --font-size--24px: 15px, 2vw, 24px;
  --font-size--28px: 18px, 2.34vw, 28px;
  --font-size--32px: 20px, 2.66vw, 32px;
  --font-size--36px: 22px, 3vw, 36px;
  --font-size--42px: 28px, 3.66vw, 42px;
  --font-size--48px: 30px, 4vw, 48px;
  --font-size--56px: 35px, 4.66vw, 56px;  
  --font-size--72px: 45px, 6vw, 72px;
  --font-size--84px: 52px, 7vw, 84px;
}
@media only screen and (max-width: 749px) { 
/*********** font-size to 450px width */
   :root {
    --font-size--8px: 6px, 1.25vw, 8px;
    --font-size--12px: 8px, 2.5vw, 12px;
    --font-size--15px: 10px, 3.125vw, 15px;
    --font-size--16px: 11px, 3.33vw, 16px;
    --font-size--18px: 12px, 3.75vw, 18px;
    --font-size--21px: 14px, 4.375vw, 21px;
    --font-size--24px: 16px, 5vw, 24px;
    --font-size--28px: 20px, 6.225vw, 28px;
    --font-size--32px: 21px, 6.66vw, 32px;
    --font-size--36px: 24px, 7.5vw, 36px;
    --font-size--42px: 28px, 9.66vw, 42px;
    --font-size--48px: 32px, 10vw, 48px;
    --font-size--56px: 38px, 11.66vw, 56px;
   }
}
/*********** Letter-Spacing ***********/
:root {
  --letter-spacing-3px: 0px, .25vw, 3px;
  --letter-spacing-6px: 0px, .5vw, 6px;
  --letter-spacing-12px: 0px, 1vw, 12px;
  --letter-spacing-18px: 0px, 1.5vw, 18px;
}
@media only screen and (max-width: 749px) { 
  :root {
    --letter-spacing-3px: 0px, .625vw, 3px;
    --letter-spacing-6px: 0px, 1.25vw, 6px;
    --letter-spacing-12px: 0px, 2.5vw, 12px;
    --letter-spacing-18px: 0px, 3.75vw, 18px;
  }
}
.icon-circle {
  background-color: rgba( 0 0 0 / 100% );
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  transition: .3s ease;
  -webkit-box-shadow: var(--text-shadow-icon-up); 
  -moz-box-shadow: var(--text-shadow-icon-up); 
  box-shadow: var(--text-shadow-icon-up);
}
.icon-circle > svg { 
  color: rgba(255 255 255 / 100%); 
  width: 36px;
}
.icon-circle:hover {
  background-color: rgba(87 87 87 / 100%);
}

.icon-circle:active {
  transform: translateY(2px);
  -webkit-box-shadow: var(--text-shadow-icon-down); 
  -moz-box-shadow: var(--text-shadow-icon-down); 
  box-shadow: var(--text-shadow-icon-down);
}

/*********** THREE COLUMNS CONTAINER ***********/
.three-columns-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.three-columns-container .grid-container {
  display: grid;
  gap: 20px;
  padding: 20px;
  grid-template-columns: 1fr 1fr 1fr;
  width: 100%;
}
.three-columns-container .grid-container .column > div {
  padding: 20px;
  width: 100%;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 4px 8px 12px 5px rgba(0, 0, 0, 0.25);
  justify-content: start;
}

.three-columns-container .image {
  border-radius: 16px;
  width: 100%;
}
.three-columns-container .top {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  font-size: 0;
  margin-bottom: 16px;
}
.three-columns-container .top img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.three-columns-container .bottom {
}
@media only screen and (max-width:749px) {
  .three-columns-container .grid-container {
    grid-template-columns: 1fr;
  }
}


/* 3 column container  */
  .three-columns-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }
  .three-columns-container .grid-container {
    display: grid;
    gap: 20px;
    padding: 20px;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
  }
  .three-columns-container .grid-container .column > div {
    padding: 20px;
    width: 100%;
    border-radius: 16px;
    background: #FFFFFF;
    box-shadow: 4px 8px 12px 5px rgba(0, 0, 0, 0.25);
    justify-content: start;
  }
  {% if section.settings.same_height_columns %}
    .three-columns-container .grid-container .column > div {
      height: 100%;
    }
    @media only screen and (max-width:749px) {
      .three-columns-container .grid-container {
        grid-template-rows: 1fr 1fr 1fr;
      }
    }
  {% else %}
    .three-columns-container .grid-container .column > div {
      height: auto;
    }
    @media only screen and (max-width:749px) {
      .three-columns-container .grid-container {
        grid-template-rows: auto auto auto;
      }
    }
  {% endif %}
  
  .three-columns-container .image {
    border-radius: 16px;
    width: 100%;
  }
  .three-columns-container .top {
    width: 100%;
  }
  .three-columns-container .bottom {
  }
  @media only screen and (max-width:749px) {
    .three-columns-container .grid-container {
      grid-template-columns: 1fr;
    }
  }

.nav-arrow {
  --arrow-link-text: var(--mob-clamp16);
  --arrow-link-size: var(--mob-clamp18);
}
@media screen and (min-width: 750px) {
  .nav-arrow {
    --arrow-link-text: var(--desk-clamp22);
    --arrow-link-size: var(--desk-clamp24);
  }
}
.nav-arrow {
    text-decoration: none;
    color: var(--hex-black);
    font-size: var(--arrow-link-text);
    background-color: transparent;
    justify-content: start;
    align-items: end;
    font-weight: 300;
  }
  .nav-arrow svg {
    fill: var(--hex-black);
    height: var(--arrow-link-size);
    width: var(--arrow-link-size);
    transition: .3s linear;
  }
  
  @media screen and (max-width: 749px) {
    .nav-arrow {
      justify-content: center;
      background-color: transparent !important;
      font-weight: 300;
    }
  }

.whiten-img {
  filter: brightness(0) invert(1);
}

body:not(.app-page) .app-page-free-trial {
  display: none;
}
@media screen and (max-width: 749px) {
  body:is(.app-page) .app-page-free-trial {
    display: none;
  }
}
body:is(.app-page) .app-page-free-trial .custom-button {
  height: calc(44rem/16);
  width: calc(240rem/16);
  text-align: center;
  font-size: var(--desk-clamp18);
}
body:is(.app-page) .app-page-free-trial .custom-button span {
  color: #fff!important;
}

body:is(.app-page) .shopify-section-group-footer-group .email-signup {
  display: none;
}

/* Fileflare Download page customizations */

.dda-orders {
    --dda-orders-width: 53.75em; /* Width of the box on the page */
    --dda-order-radius-lg: 16px; /* Border radius of the main box */
    --dda-order-radius-md: 12px; /* Border radius of the inside box */
    --dda-order-radius-sm: 8px; /* Border radius of the hover box */
    --dda-order-radius-xs: 4px; /* Only displays in Legacy Customer Accounts download page - sorting list box radius */
    --dda-order-radius-full: 50px; /* Order number bubble corner radius */
    --dda-order-spacing: 2em; /* Spacing between main and inside box */
    --dda-color-000: #FFFFFF; /* Background of the inside box */
    --dda-color-100: #F1F1F1; /* Background main box */
    --dda-color-200: #FFFFFF; /* Order number bubble background */
    --dda-color-300: #EDF0F7; /* Horizontal border line below product title & hover background */
    --dda-color-400: #F1F1F1; /* The main border line */
    --dda-color-500: #717D96; /* File type/size text */
    --dda-color-600: #2D3648; /* Main file title text colour */
}

/* Hide sort section */

.dda-order__sort-form {
display: none !important;
}

/* Product Name */

.dda-order__item-name {
  text-transform: uppercase;
}