/*================ Build Base Grid Classes ================*/
/* NEW GRID */
.self-center {
    align-self: center;
  }
  
  .self-end {
    align-self: end;
  }
  
  .self-start {
    align-self: start;
  }
  
  /* BD GRID SETUP */
  .bd-grid {
    display: grid;
    width: 100%;
  }
   
  .start-1 {
    grid-column-start: 1;
  }
  
  .start-2 {
    grid-column-start: 2;
  }
  
  .start-3 {
    grid-column-start: 3;
  }
  
  .start-4 {
    grid-column-start: 4;
  }
  
  .start-5 {
    grid-column-start: 5;
  }
  
  .start-6 {
    grid-column-start: 6;
  }
  
  .start-7 {
    grid-column-start: 7;
  }
  
  .start-8 {
    grid-column-start: 8;
  }
  
  .start-9 {
    grid-column-start: 9;
  }
  
  .start-10 {
    grid-column-start: 10;
  }
  
  .start-11 {
    grid-column-start: 11;
  }
  
  .start-12 {
    grid-column-start: 12;
  }
  
  .start-13 {
    grid-column-start: 13;
  }
  
  .end-1 {
    grid-column-end: 1;
  }
  
  .end-2 {
    grid-column-end: 2;
  }
  
  .end-3 {
    grid-column-end: 3;
  }
  
  .end-4 {
    grid-column-end: 4;
  }
  
  .end-5 {
    grid-column-end: 5;
  }
  
  .end-6 {
    grid-column-end: 6;
  }
  
  .end-7 {
    grid-column-end: 7;
  }
  
  .end-8 {
    grid-column-end: 8;
  }
  
  .end-9 {
    grid-column-end: 9;
  }
  
  .end-10 {
    grid-column-end: 10;
  }
  
  .end-11 {
    grid-column-end: 11;
  }
  
  .end-12 {
    grid-column-end: 12;
  }
  
  .end-13 {
    grid-column-end: 13;
  }
  
  .row-start-1 {
    grid-row-start: 1;
  }
  
  .row-start-2 {
    grid-row-start: 2;
  }
  
  .row-start-3 {
    grid-row-start: 3;
  }
  
  .row-start-4 {
    grid-row-start: 4;
  }
  
  .row-start-5 {
    grid-row-start: 5;
  }
  
  .row-start-6 {
    grid-row-start: 6;
  }
  
  .row-start-7 {
    grid-row-start: 7;
  }
  
  .row-start-8 {
    grid-row-start: 8;
  }
  
  .row-start-9 {
    grid-row-start: 9;
  }
  
  .row-start-10 {
    grid-row-start: 10;
  }
  
  .row-start-11 {
    grid-row-start: 11;
  }
  
  .row-start-12 {
    grid-row-start: 12;
  }
  
  .row-start-13 {
    grid-row-start: 13;
  }
  
  .row-end-1 {
    grid-row-end: 1;
  }
  
  .row-end-2 {
    grid-row-end: 2;
  }
  
  .row-end-3 {
    grid-row-end: 3;
  }
  
  .row-end-4 {
    grid-row-end: 4;
  }
  
  .row-end-5 {
    grid-row-end: 5;
  }
  
  .row-end-6 {
    grid-row-end: 6;
  }
  
  .row-end-7 {
    grid-row-end: 7;
  }
  
  .row-end-8 {
    grid-row-end: 8;
  }
  
  .row-end-9 {
    grid-row-end: 9;
  }
  
  .row-end-10 {
    grid-row-end: 10;
  }
  
  .row-end-11 {
    grid-row-end: 11;
  }
  
  .row-end-12 {
    grid-row-end: 12;
  }
  
  .row-end-13 {
    grid-row-end: 13;
  }
  
  .gap0 {
    gap: 0;
  }
  
  .gap025 {
    gap: calc(0.25 * var(--grid-gutter));
  }
  
  .gap05 {
    gap: calc(0.5 * var(--grid-gutter));
  }
  
  .gap1 {
    gap: var(--grid-gutter);
  }
  
  .gap2 {
    gap: calc(2 * var(--grid-gutter));
  }
  
  .gap3 {
    gap: calc(3 * var(--grid-gutter));
  }
  
  .gap4 {
    gap: calc(4 * var(--grid-gutter));
  }
  
  
  
  .row-gap0 {
    row-gap: 0;
  }
  
  .row-gap025 {
    row-gap: calc(0.25 * var(--grid-gutter));
  }
  
  .row-gap05 {
    row-gap: calc(0.5 * var(--grid-gutter));
  }
  
  .row-gap1 {
    row-gap: var(--grid-gutter);
  }
  
  .row-gap2 {
    row-gap: calc(2 * var(--grid-gutter));
  }
  
  .row-gap3 {
    row-gap: calc(3 * var(--grid-gutter));
  }
  
  .row-gap4 {
    row-gap: calc(4 * var(--grid-gutter));
  }
  
  .column-gap0 {
    column-gap: 0;
  }
  
  .column-gap025 {
    column-gap: calc(0.25 * var(--grid-gutter));
  }
  
  .column-gap05 {
    column-gap: calc(0.5 * var(--grid-gutter));
  }
  
  .column-gap1 {
    column-gap: var(--grid-gutter);
  }
  
  .column-gap2 {
    column-gap: calc(2 * var(--grid-gutter));
  }
  
  .column-gap3 {
    column-gap: calc(3 * var(--grid-gutter));
  }
  
  .column-gap4 {
    column-gap: calc(4 * var(--grid-gutter));
  }
  
  .grid-size-12 {
    grid-template-columns: repeat(12, 1fr);
  }
  
  .grid-size-11 {
    grid-template-columns: repeat(11, 1fr);
  }
  
  .grid-size-10 {
    grid-template-columns: repeat(10, 1fr);
  }
  
  .grid-size-9 {
    grid-template-columns: repeat(9, 1fr);
  }
  
  .grid-size-8 {
    grid-template-columns: repeat(8, 1fr);
  }
  
  .grid-size-7 {
    grid-template-columns: repeat(7, 1fr);
  }
  
  .grid-size-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  
  .grid-size-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  
  .grid-size-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .grid-size-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .grid-size-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid-size-1 {
    grid-template-columns: repeat(1, 1fr);
  }
  
  @media only screen and (max-width: 749px) {
    .small--grid-size-12 {
      grid-template-columns: repeat(12, 1fr);
    }
  
    .small--grid-size-11 {
      grid-template-columns: repeat(11, 1fr);
    }
  
    .small--grid-size-10 {
      grid-template-columns: repeat(10, 1fr);
    }
  
    .small--grid-size-9 {
      grid-template-columns: repeat(9, 1fr);
    }
  
    .small--grid-size-8 {
      grid-template-columns: repeat(8, 1fr);
    }
  
    .small--grid-size-7 {
      grid-template-columns: repeat(7, 1fr);
    }
  
    .small--grid-size-6 {
      grid-template-columns: repeat(6, 1fr);
    }
  
    .small--grid-size-5 {
      grid-template-columns: repeat(5, 1fr);
    }
  
    .small--grid-size-4 {
      grid-template-columns: repeat(4, 1fr);
    }
  
    .small--grid-size-3 {
      grid-template-columns: repeat(3, 1fr);
    }
  
    .small--grid-size-2 {
      grid-template-columns: repeat(2, 1fr);
    }
  
    .small--grid-size-1 {
      grid-template-columns: repeat(1, 1fr);
    }
  
    .small--start-1 {
      grid-column-start: 1;
    }
  
    .small--start-2 {
      grid-column-start: 2;
    }
  
    .small--start-3 {
      grid-column-start: 3;
    }
  
    .small--start-4 {
      grid-column-start: 4;
    }
  
    .small--start-5 {
      grid-column-start: 5;
    }
  
    .small--start-6 {
      grid-column-start: 6;
    }
  
    .small--start-7 {
      grid-column-start: 7;
    }
  
    .small--start-8 {
      grid-column-start: 8;
    }
  
    .small--start-9 {
      grid-column-start: 9;
    }
  
    .small--start-10 {
      grid-column-start: 10;
    }
  
    .small--start-11 {
      grid-column-start: 11;
    }
  
    .small--start-12 {
      grid-column-start: 12;
    }
  
    .small--start-13 {
      grid-column-start: 13;
    }
  
    .small--end-1 {
      grid-column-end: 1;
    }
  
    .small--end-2 {
      grid-column-end: 2;
    }
  
    .small--end-3 {
      grid-column-end: 3;
    }
  
    .small--end-4 {
      grid-column-end: 4;
    }
  
    .small--end-5 {
      grid-column-end: 5;
    }
  
    .small--end-6 {
      grid-column-end: 6;
    }
  
    .small--end-7 {
      grid-column-end: 7;
    }
  
    .small--end-8 {
      grid-column-end: 8;
    }
  
    .small--end-9 {
      grid-column-end: 9;
    }
  
    .small--end-10 {
      grid-column-end: 10;
    }
  
    .small--end-11 {
      grid-column-end: 11;
    }
  
    .small--end-12 {
      grid-column-end: 12;
    }
  
    .small--end-13 {
      grid-column-end: 13;
    }
  
    .small--row-start-1 {
      grid-row-start: 1;
    }
  
    .small--row-start-2 {
      grid-row-start: 2;
    }
  
    .small--row-start-3 {
      grid-row-start: 3;
    }
  
    .small--row-start-4 {
      grid-row-start: 4;
    }
  
    .small--row-start-5 {
      grid-row-start: 5;
    }
  
    .small--row-start-6 {
      grid-row-start: 6;
    }
  
    .small--row-start-7 {
      grid-row-start: 7;
    }
  
    .small--row-start-8 {
      grid-row-start: 8;
    }
  
    .small--row-start-9 {
      grid-row-start: 9;
    }
  
    .small--row-start-10 {
      grid-row-start: 10;
    }
  
    .small--row-start-11 {
      grid-row-start: 11;
    }
  
    .small--row-start-12 {
      grid-row-start: 12;
    }
  
    .small--row-start-13 {
      grid-row-start: 13;
    }
  
    .small--row-end-1 {
      grid-row-end: 1;
    }
  
    .small--row-end-2 {
      grid-row-end: 2;
    }
  
    .small--row-end-3 {
      grid-row-end: 3;
    }
  
    .small--row-end-4 {
      grid-row-end: 4;
    }
  
    .small--row-end-5 {
      grid-row-end: 5;
    }
  
    .small--row-end-6 {
      grid-row-end: 6;
    }
  
    .small--row-end-7 {
      grid-row-end: 7;
    }
  
    .small--row-end-8 {
      grid-row-end: 8;
    }
  
    .small--row-end-9 {
      grid-row-end: 9;
    }
  
    .small--row-end-10 {
      grid-row-end: 10;
    }
  
    .small--row-end-11 {
      grid-row-end: 11;
    }
  
    .small--row-end-12 {
      grid-row-end: 12;
    }
  
    .small--row-end-13 {
      grid-row-end: 13;
    }
  
    
  
  .small--row-gap0 {
    row-gap: 0;
  }
  
  .small--row-gap025 {
    row-gap: calc(0.25 * var(--grid-gutter));
  }
  
  .small--row-gap05 {
    row-gap: calc(0.5 * var(--grid-gutter));
  }
  
  .small--row-gap1 {
    row-gap: var(--grid-gutter);
  }
  
  .small--row-gap2 {
    row-gap: calc(2 * var(--grid-gutter));
  }
  
  .small--row-gap3 {
    row-gap: calc(3 * var(--grid-gutter));
  }
  
  .small--row-gap4 {
    row-gap: calc(4 * var(--grid-gutter));
  }
  
  .small--column-gap0 {
    column-gap: 0;
  }
  
  .small--column-gap025 {
    column-gap: calc(0.25 * var(--grid-gutter));
  }
  
  .small--column-gap05 {
    column-gap: calc(0.5 * var(--grid-gutter));
  }
  
  .small--column-gap1 {
    column-gap: var(--grid-gutter);
  }
  
  .small--column-gap2 {
    column-gap: calc(2 * var(--grid-gutter));
  }
  
  .small--column-gap3 {
    column-gap: calc(3 * var(--grid-gutter));
  }
  
  .small--column-gap4 {
    column-gap: calc(4 * var(--grid-gutter));
  }
  
  }
  
  
  
  
  @media only screen and (max-width:1024px) {
    .tablet-down--grid-size-12 {
      grid-template-columns: repeat(12, 1fr);
    }
  
    .tablet-down--grid-size-11 {
      grid-template-columns: repeat(11, 1fr);
    }
  
    .tablet-down--grid-size-10 {
      grid-template-columns: repeat(10, 1fr);
    }
  
    .tablet-down--grid-size-9 {
      grid-template-columns: repeat(9, 1fr);
    }
  
    .tablet-down--grid-size-8 {
      grid-template-columns: repeat(8, 1fr);
    }
  
    .tablet-down--grid-size-7 {
      grid-template-columns: repeat(7, 1fr);
    }
  
    .tablet-down--grid-size-6 {
      grid-template-columns: repeat(6, 1fr);
    }
  
    .tablet-down--grid-size-5 {
      grid-template-columns: repeat(5, 1fr);
    }
  
    .tablet-down--grid-size-4 {
      grid-template-columns: repeat(4, 1fr);
    }
  
    .tablet-down--grid-size-3 {
      grid-template-columns: repeat(3, 1fr);
    }
  
    .tablet-down--grid-size-2 {
      grid-template-columns: repeat(2, 1fr);
    }
  
    .tablet-down--grid-size-1 {
      grid-template-columns: repeat(1, 1fr);
    }
  
    .tablet-down--start-1 {
      grid-column-start: 1;
    }
  
    .tablet-down--start-2 {
      grid-column-start: 2;
    }
  
    .tablet-down--start-3 {
      grid-column-start: 3;
    }
  
    .tablet-down--start-4 {
      grid-column-start: 4;
    }
  
    .tablet-down--start-5 {
      grid-column-start: 5;
    }
  
    .tablet-down--start-6 {
      grid-column-start: 6;
    }
  
    .tablet-down--start-7 {
      grid-column-start: 7;
    }
  
    .tablet-down--start-8 {
      grid-column-start: 8;
    }
  
    .tablet-down--start-9 {
      grid-column-start: 9;
    }
  
    .tablet-down--start-10 {
      grid-column-start: 10;
    }
  
    .tablet-down--start-11 {
      grid-column-start: 11;
    }
  
    .tablet-down--start-12 {
      grid-column-start: 12;
    }
  
    .tablet-down--start-13 {
      grid-column-start: 13;
    }
  
    .tablet-down--end-1 {
      grid-column-end: 1;
    }
  
    .tablet-down--end-2 {
      grid-column-end: 2;
    }
  
    .tablet-down--end-3 {
      grid-column-end: 3;
    }
  
    .tablet-down--end-4 {
      grid-column-end: 4;
    }
  
    .tablet-down--end-5 {
      grid-column-end: 5;
    }
  
    .tablet-down--end-6 {
      grid-column-end: 6;
    }
  
    .tablet-down--end-7 {
      grid-column-end: 7;
    }
  
    .tablet-down--end-8 {
      grid-column-end: 8;
    }
  
    .tablet-down--end-9 {
      grid-column-end: 9;
    }
  
    .tablet-down--end-10 {
      grid-column-end: 10;
    }
  
    .tablet-down--end-11 {
      grid-column-end: 11;
    }
  
    .tablet-down--end-12 {
      grid-column-end: 12;
    }
  
    .tablet-down--end-13 {
      grid-column-end: 13;
    }
  
    .tablet-down--row-start-1 {
      grid-row-start: 1;
    }
  
    .tablet-down--row-start-2 {
      grid-row-start: 2;
    }
  
    .tablet-down--row-start-3 {
      grid-row-start: 3;
    }
  
    .tablet-down--row-start-4 {
      grid-row-start: 4;
    }
  
    .tablet-down--row-start-5 {
      grid-row-start: 5;
    }
  
    .tablet-down--row-start-6 {
      grid-row-start: 6;
    }
  
    .tablet-down--row-start-7 {
      grid-row-start: 7;
    }
  
    .tablet-down--row-start-8 {
      grid-row-start: 8;
    }
  
    .tablet-down--row-start-9 {
      grid-row-start: 9;
    }
  
    .tablet-down--row-start-10 {
      grid-row-start: 10;
    }
  
    .tablet-down--row-start-11 {
      grid-row-start: 11;
    }
  
    .tablet-down--row-start-12 {
      grid-row-start: 12;
    }
  
    .tablet-down--row-start-13 {
      grid-row-start: 13;
    }
  
    .tablet-down--row-end-1 {
      grid-row-end: 1;
    }
  
    .tablet-down--row-end-2 {
      grid-row-end: 2;
    }
  
    .tablet-down--row-end-3 {
      grid-row-end: 3;
    }
  
    .tablet-down--row-end-4 {
      grid-row-end: 4;
    }
  
    .tablet-down--row-end-5 {
      grid-row-end: 5;
    }
  
    .tablet-down--row-end-6 {
      grid-row-end: 6;
    }
  
    .tablet-down--row-end-7 {
      grid-row-end: 7;
    }
  
    .tablet-down--row-end-8 {
      grid-row-end: 8;
    }
  
    .tablet-down--row-end-9 {
      grid-row-end: 9;
    }
  
    .tablet-down--row-end-10 {
      grid-row-end: 10;
    }
  
    .tablet-down--row-end-11 {
      grid-row-end: 11;
    }
  
    .tablet-down--row-end-12 {
      grid-row-end: 12;
    }
  
    .tablet-down--row-end-13 {
      grid-row-end: 13;
    }
  
    
  
  .tablet-down--row-gap0 {
    row-gap: 0;
  }
  
  .tablet-down--row-gap025 {
    row-gap: calc(0.25 * var(--grid-gutter));
  }
  
  .tablet-down--row-gap05 {
    row-gap: calc(0.5 * var(--grid-gutter));
  }
  
  .tablet-down--row-gap1 {
    row-gap: var(--grid-gutter);
  }
  
  .tablet-down--row-gap2 {
    row-gap: calc(2 * var(--grid-gutter));
  }
  
  .tablet-down--row-gap3 {
    row-gap: calc(3 * var(--grid-gutter));
  }
  
  .tablet-down--row-gap4 {
    row-gap: calc(4 * var(--grid-gutter));
  }
  
  .tablet-down--column-gap0 {
    column-gap: 0;
  }
  
  .tablet-down--column-gap025 {
    column-gap: calc(0.25 * var(--grid-gutter));
  }
  
  .tablet-down--column-gap05 {
    column-gap: calc(0.5 * var(--grid-gutter));
  }
  
  .tablet-down--column-gap1 {
    column-gap: var(--grid-gutter);
  }
  
  .tablet-down--column-gap2 {
    column-gap: calc(2 * var(--grid-gutter));
  }
  
  .tablet-down--column-gap3 {
    column-gap: calc(3 * var(--grid-gutter));
  }
  
  .tablet-down--column-gap4 {
    column-gap: calc(4 * var(--grid-gutter));
  }
  
  }
  
  .columns-1 {
    columns: 1;
  }
  
  .columns-2 {
    columns: 2;
  }
  
  .columns-3 {
    columns: 3;
  }
  
  .columns-4 {
    columns: 4;
  }
  
  @media only screen and (max-width: 749px) {
    .small--columns-1 {
      columns: 1;
    }
  
    .small--columns-2 {
      columns: 2;
    }
  
    .small--columns-3 {
      columns: 3;
    }
  
    .small--columns-4 {
      columns: 4;
    }
  }
  

/************ TEXT BLOCKS   *************/
.text-block .content {
  display: flex;
  flex-flow: column;
}
.block-icon svg {
	width: 100%;
	height: auto;
}
.text-block.text-center .media-container {
  margin: auto;
}
.block-slider .flickity-page-dots {
  position: absolute;
  top: calc(100% + var(--grid-gutter));
  margin: auto;
  left: 0;
  right: 0;
}
.button-text-container {
  margin: auto;
  width: fit-content;
}
.button-text-container .btn {
  width: 100%;
}
.background-link:empty {
	display: block;
	position: absolute;
	background: transparent;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0; 
	z-index: 1;
}
.with-background-image {
  display: flex;
  flex-flow: column;
	position: absolute;
	margin: auto;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}
@media only screen and (max-width: 749px) {
.mobile-horizontal-scroll {
	display: flex;
	overflow: auto;
}
.mobile-horizontal-scroll > * {
	flex-shrink: 0; 
}
}
/* FLICKITY */

  .flickity-page-dots .dot.is-selected {
    background: hsl(var(--orange));
    border: 1px;
  }
  .flickity-page-dots .dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 3px;
    background: hsl(var(--gray),0.33);
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid transparent;
    opacity: 1;
  }
  .flickity-button {
    background: transparent;
    height: 100%;
    border-radius: 0;
  }
  .flickity-button:hover {
    background: transparent; 
  }
  .flickity-button:hover .flickity-button-icon {
    fill: hsl(var(--orange)); 
  }
  .flickity-button svg.flickity-button-icon {
    width: 20px;
  }
  /********* FLEX STUFF ***********/
  .flex {
    display: flex;
    flex-flow: wrap
  }
  
  .inline-flex {
    display: inline-flex;
  }
  
  .flex-row {
    display: flex;
    flex-flow: row;
  }
  
  .flex-column {
    display: flex;
    flex-flow: column
  }
  
  .flex-center {
    align-self: center
  }
  
  .just-center {
    justify-content: center
  }
  
  .just-end {
    justify-content: flex-end
  }
  
  .align-center {
    align-items: center
  }
  
  .align-bottom {
    align-items: flex-end
  }
  
  .row-reverse {
    flex-flow: row-reverse wrap
  }
  
  .flex-bottom {
    align-self: baseline
  }
  
  .flex-grow {
    flex-grow: 1
  }
  
  .flex-end {
    align-items: flex-end
  }
  
  .spaced {
    justify-content: space-between;
  }
  
  @media only screen and (min-width: 750px) {
    .sticky {
      position: sticky;
      top: var(--header-height);
    }
  }
  
  .relative {
    position: relative;
  }
  
  .absolute {
    position: absolute;
  }
  
  @media only screen and (min-width:750px) {
    .desktop-order-1 {
      order: 1
    }
  
    .desktop-order-2 {
      order: 2
    }
  
    .desktop-order-3 {
      order: 3
    }
  
    .desktop-order-4 {
      order: 4
    }
  
    .desktop-order-5 {
      order: 5
    }
  
    .desktop-order-6 {
      order: 6
    }
  
    .desktop-order-7 {
      order: 7
    }
  
    .desktop-order-8 {
      order: 8
    }
  
    .desktop-order-9 {
      order: 9
    }
  
    .desktop-order-10 {
      order: 10
    }
  }
  
  @media only screen and (max-width: 749px) {
    .mobile-order-1 {
      order: 1;
    }
  
    .mobile-order-2 {
      order: 2;
    }
  
    .mobile-order-3 {
      order: 3;
    }
  
    .mobile-order-4 {
      order: 4;
    }
  
    .mobile-order-5 {
      order: 5;
    }
  
    .mobile-order-6 {
      order: 6;
    }
  
    .mobile-order-7 {
      order: 7;
    }
  
    .mobile-order-8 {
      order: 8;
    }
  
    .mobile-order-9 {
      order: 9;
    }
  
    .mobile-order-10 {
      order: 10;
    }
  }
  
  .columns-1 {
    columns: 1;
  }
  
  .columns-2 {
    columns: 2;
  }
  
  .columns-3 {
    columns: 3;
  }
  
  .columns-4 {
    columns: 4;
  }
  

  @media only screen and (max-width: 749px) {
    .small--columns-1 {
      columns: 1;
    }
  
    .small--columns-2 {
      columns: 2;
    }
  
    .small--columns-3 {
      columns: 3;
    }
  
    .small--columns-4 {
      columns: 4;
    }

    
  }
 [class*="columns"] > * {
    -webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
  }

  
  .underlined {
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }
  .rounded-corners  {
    border-radius: var(--border-radius);
  }
  /****************** BUTTONS *****************/
  .button,
  .btn {
    align-items: center;
    border-radius: var(--button-radius);
    border: none;
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: inherit;
    gap: 0.5em;
    justify-content: center;
    min-height: 2.5em;
    min-width: 8em;
    padding: 0 2em;
    text-decoration: none;
  }
  
  .btn:hover,
  .button:hover {
    filter: brightness(85%);
  }
  .with-icon {
    display: flex;
    gap: 0.5em;
    align-items: center;
  }
  .with-icon .icon {
    height: 1.33em;
    width: 1.33em;
  }
  .with-icon .icon svg {
    width: 100%;
    height: 100%;
  }

  .text-btn {
    align-items: center;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    display: inline;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    min-width: auto;
    padding: 0;
    position: relative;
    text-decoration: none;
    text-transform: inherit;
    width: max-content;
  }
  .text-btn:hover {
    color: inherit;
    opacity: 0.85;
  }
  .text-btn:after {
    border-bottom: 1px solid;
    bottom: -3px;
    content: "";
    height: 1px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    transition: width 0.5s ease-in-out;
    width: 100%;
  }
  
  .text-btn:hover:after,
  .text-btn.active:after {
    width: 0;
  }
  
  .tab-btn {
    align-items: center;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    min-width: auto;
    padding: 0.5em 1em;
    position: relative;
    text-decoration: none;
    text-transform: inherit;
  }
  
  .tab-btn:after {
    border-bottom: 1px solid;
    bottom: -3px;
    content: "";
    height: 1px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    transition: width 0.5s ease-in-out;
    width: 0;
  }
  
  .tab-btn:hover:after,
  .tab-btn.active:after {
    width: 100%;
  }
  
  .btn.slim {
    font-size: inherit;
    min-height: 2em;
    min-width: auto;
    padding: 0.15em 0.75em;
    text-transform: inherit;
  }
  
  .with-icon {
    align-items: center;
    display: inline-flex;
    line-height: 1;
  }
  
  .button-icon {
    height: 1em;
    margin-left: 1em;
    width: 1em;
  }
  
  .btn[disabled] {
    opacity: 0.5;
  }
  
  .btn.outline {
    border: 2px solid;
    background-color: transparent;
    transition: background-color 0.25s ease-in-out;
  }
  
  .btn.outline:hover, .btn.outline.active {
    background-color: hsla(hsl(var(--black)),0.1);
  }
  
   
  
  @media only screen and (max-width: 749px) {
  
    .button,
    .btn { 
      font-size: inherit;
      min-height: 2.5em;
      padding: 0.5em;
    }
  
    .btn.small--slim {
      font-size: inherit;
      min-height: 2.4em;
      min-width: auto;
      padding: 0.15em 0.5em;
      text-transform: inherit;
    }
  }
  
  button {
    cursor: pointer;
    font-weight: inherit; 
    appearance: none;
    background: inherit;
  }
  
  .btn .icon {
    line-height: 0;
  }
  
  /******************* HIDE ELEMENTS ************/
  .text-left {
    text-align: left;
  }
  
  .text-right {
    text-align: right;
  }
  
  .text-center {
    text-align: center;
  }
  
  @media only screen and (min-width:1025px) {
  .tablet-up--hide {
    display: none !important;
  }
  }
  @media only screen and (max-width:1024px) {
    .tablet-down--hide {
      display: none !important;
    }
    }
    
  @media only screen and (min-width:750px) {
    .medium-up--hide {
      display: none !important;
    }
  }
  
  @media only screen and (max-width:749px) {
    .small--hide {
      display: none !important;
    }
  
    .small--text-left {
      text-align: left !important;;
    }
  
    .small--text-right {
      text-align: right !important;;
    }
  
    .small--text-center {
      text-align: center !important;;
    }
  }
  
  
  
  
  /************ relative TEXT MARGINS ******************/
  .mt0 {
    margin-top: 0;
  }
  
  .mb0 {
    margin-bottom: 0;
  }
  
  .mr0 {
    margin-right: 0;
  }
  
  .ml0 {
    margin-left: 0;
  }
  
  .mt025 {
    margin-top: 0.25em;
  }
  
  .mb025 {
    margin-bottom: 0.25em;
  }
  
  .mr025 {
    margin-right: 0.25em;
  }
  
  .ml025 {
    margin-left: 0.25em;
  }
  
  .mt05 {
    margin-top: 0.25em;
  }
  
  .mb05 {
    margin-bottom: 0.5em;
  }
  
  .mr05 {
    margin-right: 0.5em;
  }
  
  .ml05 {
    margin-left: 0.5em;
  }
  
  .mt1 {
    margin-top: 1em;
  }
  
  .mb1 {
    margin-bottom: 1em;
  }
  
  .mr1 {
    margin-right: 1em;
  }
  
  .ml1 {
    margin-left: 1em;
  }
  
  .mt2 {
    margin-top: 2em;
  }
  
  .mb2 {
    margin-bottom: 2em;
  }
  
  .mr2 {
    margin-right: 2em;
  }
  
  .ml2 {
    margin-left: 2em;
  }
  
  /************ relative TEXT Paddings ******************/
  .pt0 {
    padding-top: 0;
  }
  
  .pb0 {
    padding-bottom: 0;
  }
  
  .pr0 {
    padding-right: 0;
  }
  
  .pl0 {
    padding-left: 0;
  }
  
  .pt05 {
    padding-top: 0.5em;
  }
  
  .pb05 {
    padding-bottom: 0.5em;
  }
  
  .pr05 {
    padding-right: 0.5em;
  }
  
  .pl05 {
    padding-left: 0.5em;
  }
  
  .pt1 {
    padding-top: 1em;
  }
  
  .pb1 {
    padding-bottom: 1em;
  }
  
  .pr1 {
    padding-right: 1em;
  }
  
  .pl1 {
    padding-left: 1em;
  }
  
  .pt2 {
    padding-top: 2em;
  }
  
  .pb2 {
    padding-bottom: 2em;
  }
  
  .pr2 {
    padding-right: 2em;
  }
  
  .pl2 {
    padding-left: 2em;
  }
  
  /********** SECTION PADDINGS *****************/
  .spt1 {
    padding-top: var(--section-spacing);
  }
  
  .spb1 {
    padding-bottom: var(--section-spacing);
  }
  
  .spr1 {
    padding-right: var(--section-spacing);
  }
  
  .spl1 {
    padding-left: var(--section-spacing);
  }
  
  .spt2 {
    padding-top: calc(2 * var(--section-spacing));
  }
  
  .spb2 {
    padding-bottom: calc(2 * var(--section-spacing));
  }
  
  .spr2 {
    padding-right: calc(2 * var(--section-spacing));
  }
  
  .spl2 {
    padding-left: calc(2 * var(--section-spacing));
  }
  
  .spt3 {
    padding-top: calc(3 * var(--section-spacing));
  }
  
  .spb3 {
    padding-bottom: calc(3 * var(--section-spacing));
  }
  
  .spr3 {
    padding-right: calc(3 * var(--section-spacing));
  }
  
  .spl3 {
    padding-left: calc(3 * var(--section-spacing));
  }
  
  .spt4 {
    padding-top: calc(3 * var(--section-spacing));
  }
  
  .spb4 {
    padding-bottom: calc(3 * var(--section-spacing));
  }
  
  .spr4 {
    padding-right: calc(3 * var(--section-spacing));
  }
  
  .spl4 {
    padding-left: calc(3 * var(--section-spacing));
  }
  
  .spa1 {
    padding: calc(1 * var(--section-spacing));
  }
  
  .spa2 {
    padding: calc(2 * var(--section-spacing));
  }
  
  .spa3 {
    padding: calc(3 * var(--section-spacing));
  }
  
  .spa4 {
    padding: calc(4 * var(--section-spacing));
  }
  
  /********** GRID PADDINGS *****************/
  .gpt025 {
    padding-top: calc(0.25 * var(--grid-gutter));
  }
  
  .gpb025 {
    padding-bottom: calc(0.25 * var(--grid-gutter));
  }
  
  .gpr025 {
    padding-right: calc(0.25 * var(--grid-gutter));
  }
  
  .gpl025 {
    padding-left: calc(0.25 * var(--grid-gutter));
  }
  
  .gpt05 {
    padding-top: calc(0.5 * var(--grid-gutter));
  }
  
  .gpb05 {
    padding-bottom: calc(0.5 * var(--grid-gutter));
  }
  
  .gpr05 {
    padding-right: calc(0.5 * var(--grid-gutter));
  }
  
  .gpl05 {
    padding-left: calc(0.5 * var(--grid-gutter));
  }
  
  .gpt1 {
    padding-top: var(--grid-gutter);
  }
  
  .gpb1 {
    padding-bottom: var(--grid-gutter);
  }
  
  .gpr1 {
    padding-right: var(--grid-gutter);
  }
  
  .gpl1 {
    padding-left: var(--grid-gutter);
  }
  
  .gpt2 {
    padding-top: calc(2 * var(--grid-gutter));
  }
  
  .gpb2 {
    padding-bottom: calc(2 * var(--grid-gutter));
  }
  
  .gpr2 {
    padding-right: calc(2 * var(--grid-gutter));
  }
  
  .gpl2 {
    padding-left: calc(2 * var(--grid-gutter));
  }
  
  .gpt3 {
    padding-top: calc(3 * var(--grid-gutter));
  }
  
  .gpb3 {
    padding-bottom: calc(3 * var(--grid-gutter));
  }
  
  .gpr3 {
    padding-right: calc(3 * var(--grid-gutter));
  }
  
  .gpl3 {
    padding-left: calc(3 * var(--grid-gutter));
  }
  
  .gpt4 {
    padding-top: calc(4 * var(--grid-gutter));
  }
  
  .gpb4 {
    padding-bottom: calc(4 * var(--grid-gutter));
  }
  
  .gpr4 {
    padding-right: calc(4 * var(--grid-gutter));
  }
  
  .gpl4 {
    padding-left: calc(4 * var(--grid-gutter));
  }
  
  .gpa025 {
    padding: calc(0.25 * var(--grid-gutter));
  }
  
  .gpa05 {
    padding: calc(0.5 * var(--grid-gutter));
  }
  
  .gpa1 {
    padding: calc(1 * var(--grid-gutter));
  }
  
  .gpa2 {
    padding: calc(2 * var(--grid-gutter));
  }
  
  .gpa3 {
    padding: calc(3 * var(--grid-gutter));
  }
  
  .gpa4 {
    padding: calc(4 * var(--grid-gutter));
  }
  
  /******** MOBILE ONLY PADDINGS ************/
  @media only screen and (max-width: 749px) {
    .small--spt0 {
      padding-top: 0;
    }
  
    .small--spb0 {
      padding-bottom: 0;
    }
  
    .small--spr0 {
      padding-right: 0;
    }
  
    .small--spl0 {
      padding-left: 0;
    }
  
    .small--spa0 {
      padding: 0;
    }
  
    .small--spt1 {
      padding-top: var(--section-spacing);
    }
  
    .small--spb1 {
      padding-bottom: var(--section-spacing);
    }
  
    .small--spr1 {
      padding-right: var(--section-spacing);
    }
  
    .small--spl1 {
      padding-left: var(--section-spacing);
    }
  
    .small--spt2 {
      padding-top: calc(2 * var(--section-spacing));
    }
  
    .small--spb2 {
      padding-bottom: calc(2 * var(--section-spacing));
    }
  
    .small--spr2 {
      padding-right: calc(2 * var(--section-spacing));
    }
  
    .small--spl2 {
      padding-left: calc(2 * var(--section-spacing));
    }
  
    .small--spt3 {
      padding-top: calc(3 * var(--section-spacing));
    }
  
    .small--spb3 {
      padding-bottom: calc(3 * var(--section-spacing));
    }
  
    .small--spr3 {
      padding-right: calc(3 * var(--section-spacing));
    }
  
    .small--spl3 {
      padding-left: calc(3 * var(--section-spacing));
    }
  
    .small--spt4 {
      padding-top: calc(3 * var(--section-spacing));
    }
  
    .small--spb4 {
      padding-bottom: calc(4 * var(--section-spacing));
    }
  
    .small--spr4 {
      padding-right: calc(4 * var(--section-spacing));
    }
  
    .small--spl4 {
      padding-left: calc(4 * var(--section-spacing));
    }
  
    .small--spa1 {
      padding: calc(1 * var(--section-spacing));
    }
  
    .small--spa2 {
      padding: calc(2 * var(--section-spacing));
    }
  
    .small--spa3 {
      padding: calc(3 * var(--section-spacing));
    }
  
    .small--spa4 {
      padding: calc(4 * var(--section-spacing));
    }
  
  
  
    .small--gpt0 {
      padding-top: 0;
    }
  
    .small--gpb0 {
      padding-bottom: 0;
    }
  
    .small--gpr0 {
      padding-right: 0;
    }
  
    .small--gpl0 {
      padding-left: 0;
    }
  
    .gpt025 {
      padding-top: calc(0.25 * var(--grid-gutter));
    }
  
    .small--gpb025 {
      padding-bottom: calc(0.small--25 * var(--grid-gutter));
    }
  
    .small--gpr025 {
      padding-right: calc(0.small--25 * var(--grid-gutter));
    }
  
    .small--gpl025 {
      padding-left: calc(0.small--25 * var(--grid-gutter));
    }
  
    .small--gpt05 {
      padding-top: calc(0.small--5 * var(--grid-gutter));
    }
  
    .small--gpb05 {
      padding-bottom: calc(0.small--5 * var(--grid-gutter));
    }
  
    .small--gpr05 {
      padding-right: calc(0.small--5 * var(--grid-gutter));
    }
  
    .small--gpl05 {
      padding-left: calc(0.small--5 * var(--grid-gutter));
    }
  
    .small--gpt1 {
      padding-top: var(--grid-gutter);
    }
  
    .small--gpb1 {
      padding-bottom: var(--grid-gutter);
    }
  
    .small--gpr1 {
      padding-right: var(--grid-gutter);
    }
  
    .small--gpl1 {
      padding-left: var(--grid-gutter);
    }
  
    .small--gpt2 {
      padding-top: calc(2 * var(--grid-gutter));
    }
  
    .small--gpb2 {
      padding-bottom: calc(2 * var(--grid-gutter));
    }
  
    .small--gpr2 {
      padding-right: calc(2 * var(--grid-gutter));
    }
  
    .small--gpl2 {
      padding-left: calc(2 * var(--grid-gutter));
    }
  
    .small--gpt3 {
      padding-top: calc(3 * var(--grid-gutter));
    }
  
    .small--gpb3 {
      padding-bottom: calc(3 * var(--grid-gutter));
    }
  
    .small--gpr3 {
      padding-right: calc(3 * var(--grid-gutter));
    }
  
    .small--gpl3 {
      padding-left: calc(3 * var(--grid-gutter));
    }
  
    .small--gpt4 {
      padding-top: calc(4 * var(--grid-gutter));
    }
  
    .small--gpb4 {
      padding-bottom: calc(4 * var(--grid-gutter));
    }
  
    .small--gpr4 {
      padding-right: calc(4 * var(--grid-gutter));
    }
  
    .small--gpl4 {
      padding-left: calc(4 * var(--grid-gutter));
    }
  
    .small--gpa025 {
      padding: calc(0.25 * var(--grid-gutter));
    }
  
    .small--gpa05 {
      padding: calc(0.5 * var(--grid-gutter));
    }
  
    .small--gpa1 {
      padding: calc(1 * var(--grid-gutter));
    }
  
    .small--gpa2 {
      padding: calc(2 * var(--grid-gutter));
    }
  
    .small--gpa3 {
      padding: calc(3 * var(--grid-gutter));
    }
  
    .small--gpa4 {
      padding: calc(4 * var(--grid-gutter));
    }
  }
  
  img {
	max-width: 100%;
	height: auto;
}
video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hidden, .hide {
    display: none !important;
}


/*********** HTML *************/
* { 
  box-sizing: border-box;  
} 
body {
  color: hsl(var(--black));
  font-size: var(--base-size);
  font-family: var(--body-style);
  line-height: 1.5;
  margin: 0;
  padding: 0; 
  overflow-x: hidden;
  letter-spacing: -0.025em;
}
button {
	font-size: inherit;
	font-family: inherit;
	font-weight: inherit;
  color: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
 
p {
  margin-top: 0;
}
p:last-child {
  margin-bottom: 0;
}

img,
video,
svg,
iframe {
  height: auto;
  max-width: 100%;
  max-height: 100%;
  width: auto;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--header-style);
	font-weight: var(--header-weight);
	line-height: var(--header-line-height);
	margin: 0 0 .5em;
	letter-spacing: -0.025em;
}

h1,
.h1 {
  font-size: var(--h1);
  line-height: var(--header-line-height);
}

h2,
.h2 {
  font-size: var(--h2);
  line-height: var(--header-line-height);
}

h3,
.h3 {
  font-size: var(--h3);
  line-height: var(--header-line-height);
}

h4,
.h4 {
  font-size: var(--h4);
}

h5,
.h5 {
  font-size: var(--h5);
}

h6,
.h6 {
  font-size: var(--h6); 
  
}

.hero-size {
  font-size: var(--hero);
}

.hero-size2 {
  font-size: calc(var(--hero) * 2.75);
}

.fine-print {
  font-size: var(--fine-print);
}

.small-size,
.small-size {
  font-size: var(--small-size);
}

.body-size {
  font-size: var(--base-size);
}

.caps {
  text-transform: uppercase;
}

.strong {
  font-weight: 600;
}
 
.italics {
  font-style: italic;
}
.heavy {
  font-weight: 800;
}
.medium {
  font-weight: 500;
}

.normal {
  font-weight: 400;
}

.thin {
  font-weight: 300;
}

.body-style {
  font-family: var(--body-style);
}

.alt-style {
  font-family: var(--alt-style);
  letter-spacing: 0;
}

.header-style {
  font-family: var(--header-style);
}

.page-width {
  margin: 0 auto;
  max-width: calc(var(--grid-gutter-2x) + var(--width-site));
  padding-left: var(--grid-gutter);
  padding-right: var(--grid-gutter);
  width: 100%;
}

.wide-width {
    margin: 0 auto;
    max-width: calc(100% - var(--grid-gutter) * 2);
    width: 100%;
}
.extra-narrow-width {
  margin: 0 auto;
  max-width: calc(var(--grid-gutter) + var(--extra-narrow-width));
  padding-left: var(--grid-gutter);
  padding-right: var(--grid-gutter);
  width: 100%;
}
.narrow-width {
  margin: 0 auto;
  max-width: calc(var(--grid-gutter) + var(--narrow-width));
  padding-left: var(--grid-gutter);
  padding-right: var(--grid-gutter);
  width: 100%;
}
.edge-container {
  margin: 0 auto;
  width: calc(100% - (var(--grid-gutter-half)));
  max-width: 100%;
}

.page-width-right {
  padding-right: var(--half-page-offset);
}
.page-width-left {
  padding-left: var(--half-page-offset);
}

.page-width-half {
  width: 100%;
  max-width: calc(0.5 * var(--width-site));
  margin: auto;
}

.overflow-hidden {
    height: 100%;
    overflow: hidden;
}



@media only screen and (max-width: 749px) {
  .wide-width {
    max-width: calc(100% - (1 * var(--grid-gutter)));
  }
 
  .extra-narrow-width { 
    max-width: calc(100% - (1 * var(--grid-gutter)));
  }
  .mobile-gutter {
    margin: auto;
    padding: 0 var(--grid-gutter);
    width: 100%;
  }

  .small--h1 {
    font-size: var(--h1);
  }

  .small--h2 {
    font-size: var(--h2);
  }

  .small--h3 {
    font-size: var(--h3);
  }

  .small--h4 {
    font-size: var(--h4);
  }

  .small--h5 {
    font-size: var(--h5);
  }

  .small--h6 {
    font-size: var(--h6);
  }
}

legend {
  padding: 0;
}

.rounded-corners {
  border-radius: var(--border-radius);
  overflow: hidden;
  display: grid;
}
.underlined {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/********** RICH TEXT FOMATTING **********/
.rte a:not(.btn) {
  text-decoration: underline;
}
.rte p + ul {
  margin-top: 0;
}
.rte ul {
  list-style: none;
  margin: 1em 0;
  padding: 0;
  text-align: left;
}

.rte ul li {
  position: relative;
  padding-left: 1em;
}

.rte ul li::before {
	content: '\2022  ';
	position: absolute;
	left: 0;
}
.text-center {
  text-align: center;
}


.rte h2:not(:first-child), .rte h3:not(:first-child) {
    margin-top: 1em;
}

.hide {
  display: none;
}

[name='plus']:focus {
  border-radius: 0 var(--button-radius) var(--button-radius) 0;
}

[name='minus']:focus {
  border-radius: var(--button-radius) 0 0 var(--button-radius);
}

/********* GENERAL SLIDER **********/
/************ SLIDER ************/
.bd-slider {
  width: 100%;
}

.bd-slider > div:not(:first-child) {
  display: none;
}

.bd-slider:after {
  content: 'flickity';
  display: none;
}

.arrow {
  cursor: pointer;
}

@media screen and (min-width: 750px) {
  .mobile-only-slider > div:not(:first-child) {
    display: inherit;
  }

  .mobile-only-slider:after {
    content: '';
  }
}

/****** MARQUEE ANIMATION **********/
.marquee {
  display: flex;
  flex-wrap: nowrap;
  min-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.marquee-container {
	align-items: center;
	animation-delay: 0s;
	animation-direction: normal;
	animation-fill-mode: none;
	animation-iteration-count: infinite;
	animation-name: marquee;
	animation-play-state: running;
	animation-timing-function: linear;
	display: flex;
	flex-shrink: 0;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

.vert-marquee {
  display: flex;
  flex-flow: column;
  overflow: hidden;
  user-select: none;
  -webkit-mask-image: linear-gradient(
    to bottom,
    hsl(0 0% 0% / 0) 0%,
    hsl(0 0% 0% / 1) 40%,
    hsl(0 0% 0% / 1) 60%,
    hsl(0 0% 0% / 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    hsl(0 0% 0% / 0) 0%,
    hsl(0 0% 0% / 1) 40%,
    hsl(0 0% 0% / 1) 60%,
    hsl(0 0% 0% / 0) 100%
  );
}

.marquee-group {
  flex-shrink: 0;
  display: flex;
  min-width: 100%;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: scroll-x;
}

.vert-marquee .marquee-group.vertical {
  flex-flow: column;
}

.vert-marquee .marquee-group {
  animation-name: scroll-y;
}

.vert-marquee-container {
  align-items: center;
  animation-delay: 0s;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-iteration-count: infinite;
  animation-name: vertmarquee;
  animation-play-state: running;
  animation-timing-function: linear;
  animation-duration: 15s;
}

@media only screen and (max-width: 749px) {
  .vert-marquee {
    width: 100%;
  }
}

@keyframes scroll-y {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-100%);
  }
}

@keyframes vertmarquee {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-100%);
  }
}

/** RATIO IMAGES **/
.ratio-image {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.ratio-image img,
.ratio-image video {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.ratio-image svg {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.circle-image.cover img,
.ratio-image.cover img,
.ratio-image.cover video {
  object-fit: cover;
}

.three-four-image {
  aspect-ratio: 3/4;
}

.four-three-image {
  aspect-ratio: 4/3;
}

.two-three-image {
  aspect-ratio: 2/3;
}

.three-two-image {
  aspect-ratio: 3/2;
}

.two-one-image {
  aspect-ratio: 2/1;
}

.one-two-image {
  aspect-ratio: 1/2;
}

.square-image {
  aspect-ratio: 1;
}

.circle-image {
  border-radius: 100%;
  overflow: hidden;
  aspect-ratio: 1;
}
/************* COLORS *************************/

.white {
  color: hsl(var(--white));
}

.white-back {
  background-color: hsl(var(--white));
}

.white-light1 {
  color: hsl(var(--white-light1));
}

.white-light2 {
  color: hsl(var(--white-light2));
}

.white-light1-back {
  background-color: hsl(var(--white-light1));
}

.white-light2-back {
  background-color: hsl(var(--white-light2));
}

.white-dark1 {
  color: hsl(var(--white-dark1));
}

.white-dark2 {
  color: hsl(var(--white-dark2));
}

.white-dark1-back {
  background-color: hsl(var(--white-dark1));
}

.white-dark2-back {
  background-color: hsl(var(--white-dark2));
}

.black {
  color: hsl(var(--black));
}

.black-back {
  background-color: hsl(var(--black));
}

.black-light1 {
  color: hsl(var(--black-light1));
}

.black-light2 {
  color: hsl(var(--black-light2));
}

.black-light1-back {
  background-color: hsl(var(--black-light1));
}

.black-light2-back {
  background-color: hsl(var(--black-light2));
}

.black-dark1 {
  color: hsl(var(--black-dark1));
}

.black-dark2 {
  color: hsl(var(--black-dark2));
}

.black-dark1-back {
  background-color: hsl(var(--black-dark1));
}

.black-dark2-back {
  background-color: hsl(var(--black-dark2));
}

.gray {
  color: hsl(var(--gray));
}

.gray-back {
  background-color: hsl(var(--gray));
}

.gray-light1 {
  color: hsl(var(--gray-light1));
}

.gray-light2 {
  color: hsl(var(--gray-light2));
}

.gray-light1-back {
  background-color: hsl(var(--gray-light1));
}

.gray-light2-back {
  background-color: hsl(var(--gray-light2));
}

.gray-dark1 {
  color: hsl(var(--gray-dark1));
}

.gray-dark2 {
  color: hsl(var(--gray-dark2));
}

.gray-dark1-back {
  background-color: hsl(var(--gray-dark1));
}

.gray-dark2-back {
  background-color: hsl(var(--gray-dark2));
}

.red {
  color: hsl(var(--red));
}

.red-back {
  background-color: hsl(var(--red));
}

.red-light1 {
  color: hsl(var(--red-light1));
}

.red-light2 {
  color: hsl(var(--red-light2));
}
 
.red-light1-back {
  background-color: hsl(var(--red-light1));
}

.red-light2-back {
  background-color: hsl(var(--red-light2));
}

.red-dark1 {
  color: hsl(var(--red-dark1));
}

.red-dark2 {
  color: hsl(var(--red-dark2));
}

.red-dark1-back {
  background-color: hsl(var(--red-dark1));
}

.red-dark2-back {
  background-color: hsl(var(--red-dark2));
}

.brown {
  color: hsl(var(--brown));
}

.brown-back {
  background-color: hsl(var(--brown));
}

.brown-light1 {
  color: hsl(var(--brown-light1));
}

.brown-light2 {
  color: hsl(var(--brown-light2));
}

.brown-light1-back {
  background-color: hsl(var(--brown-light1));
}

.brown-light2-back {
  background-color: hsl(var(--brown-light2));
}

.brown-dark1 {
  color: hsl(var(--brown-dark1));
}

.brown-dark2 {
  color: hsl(var(--brown-dark2));
}

.brown-dark1-back {
  background-color: hsl(var(--brown-dark1));
}

.brown-dark2-back {
  background-color: hsl(var(--brown-dark2));
} 

.tan {
  color: hsl(var(--tan));
}

.tan-back {
  background-color: hsl(var(--tan));
}

.tan-light1 {
  color: hsl(var(--tan-light1));
}

.tan-light2 {
  color: hsl(var(--tan-light2));
}

.tan-light1-back {
  background-color: hsl(var(--tan-light1));
}

.tan-light2-back {
  background-color: hsl(var(--tan-light2));
}

.tan-dark1 {
  color: hsl(var(--tan-dark1));
}

.tan-dark2 {
  color: hsl(var(--tan-dark2));
}

.tan-dark1-back {
  background-color: hsl(var(--tan-dark1));
}

.tan-dark2-back {
  background-color: hsl(var(--tan-dark2));
}

.green {
  color: hsl(var(--green));
}

.green-back {
  background-color: hsl(var(--green));
}

.green-light1 {
  color: hsl(var(--green-light1));
}

.green-light2 {
  color: hsl(var(--green-light2));
}

.green-light1-back {
  background-color: hsl(var(--green-light1));
}

.green-light2-back {
  background-color: hsl(var(--green-light2));
}

.green-dark1 {
  color: hsl(var(--green-dark1));
}

.green-dark2 {
  color: hsl(var(--green-dark2));
}

.green-dark1-back {
  background-color: hsl(var(--green-dark1));
}

.green-dark2-back {
  background-color: hsl(var(--green-dark2));
}

.yellow {
  color: hsl(var(--yellow));
}

.yellow-back {
  background-color: hsl(var(--yellow));
}

.yellow-light1 {
  color: hsl(var(--yellow-light1));
}

.yellow-light2 {
  color: hsl(var(--yellow-light2));
}

.yellow-light1-back {
  background-color: hsl(var(--yellow-light1));
}

.yellow-light2-back {
  background-color: hsl(var(--yellow-light2));
}

.yellow-dark1 {
  color: hsl(var(--yellow-dark1));
}

.yellow-dark2 {
  color: hsl(var(--yellow-dark2));
}

.yellow-dark1-back {
  background-color: hsl(var(--yellow-dark1));
}

.yellow-dark2-back {
  background-color: hsl(var(--yellow-dark2));
}
.blue {
  color: hsl(var(--blue));
}

.blue-back {
  background-color: hsl(var(--blue));
}

.blue-light1 {
  color: hsl(var(--blue-light1));
}

.blue-light2 {
  color: hsl(var(--blue-light2));
}

.blue-light1-back {
  background-color: hsl(var(--blue-light1));
}

.blue-light2-back {
  background-color: hsl(var(--blue-light2));
}

.blue-dark1 {
  color: hsl(var(--blue-dark1));
}

.blue-dark2 {
  color: hsl(var(--blue-dark2));
}

.blue-dark1-back {
  background-color: hsl(var(--blue-dark1));
}

.blue-dark2-back {
  background-color: hsl(var(--blue-dark2));
}

.orange {
  color: hsl(var(--orange));
}

.orange-back {
  background-color: hsl(var(--orange));
}

.orange-light1 {
  color: hsl(var(--orange-light1));
}

.orange-light2 {
  color: hsl(var(--orange-light2));
}

.orange-light1-back {
  background-color: hsl(var(--orange-light1));
}

.orange-light2-back {
  background-color: hsl(var(--orange-light2));
}

.orange-dark1 {
  color: hsl(var(--orange-dark1));
}

.orange-dark2 {
  color: hsl(var(--orange-dark2));
}

.orange-dark1-back {
  background-color: hsl(var(--orange-dark1));
}

.orange-dark2-back {
  background-color: hsl(var(--orange-dark2));
} 




.purple {
  color: hsl(var(--purple));
}

.purple-back {
  background-color: hsl(var(--purple));
}

.purple-light1 {
  color: hsl(var(--purple-light1));
}

.purple-light2 {
  color: hsl(var(--purple-light2));
}

.purple-light1-back {
  background-color: hsl(var(--purple-light1));
}

.purple-light2-back {
  background-color: hsl(var(--purple-light2));
}

.purple-dark1 {
  color: hsl(var(--purple-dark1));
}

.purple-dark2 {
  color: hsl(var(--purple-dark2));
}

.purple-dark1-back {
  background-color: hsl(var(--purple-dark1));
}

.purple-dark2-back {
  background-color: hsl(var(--purple-dark2));
} 
/* BACKGROUND IMAGES ***/
.media-container {
	display: flex;
	flex-flow: column;
}
.media-container video,
.media-container img {
  width: 100%;
}
 
.media-container video {
	height: 100%;
	width: 100%;
	object-fit: cover;
}
.with-shadow {
	box-shadow: 1px 1px 5px hsl(var(--black),0.25);
}
.background-video-container,
.background-image {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.background-video video,
.background-image img {
  height: 100%;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

/**** RESPONSIVE TABLES ***********/
@media only screen and (max-width: 749px) {
  responsive-table__row::after,
  responsive-table__row:first-child {
    margin-top: calc(var(--grid-gutter) * 0.25);
    padding-top: var(--grid-gutter);
    position: relative;
  }

  td::before {
    content: attr(data-label);
    float: left;
    font-size: var(--base-size);
    font-weight: normal;
    padding-right: 10px;
    text-align: center;
  }

  th::before,
  .responsive-table thead {
    display: none;
  }

  .responsive-table th,
  .responsive-table td {
    border: 0;
    clear: left;
    float: left;
    margin: 0;
    padding: calc(var(--grid-gutter) * 0.5);
    text-align: right;
    width: 100%;
  }

  .responsive-table
    .responsive-table
    .responsive-table__row
    + .responsive-table__row,
  tfoot
    > .responsive-table__row
    + tfoot
    > .responsive-table__row:first-child::after {
    border-bottom: 1px solid var(--color-border);
    content: '';
    display: block;
    left: calc(var(--grid-gutter) * 0.5);
    position: absolute;
    right: calc(var(--grid-gutter) * 0.5);
    top: 0;
  }
}

 
/* LOADING SPINNER */
.predictive-search {
  display: none;
	color: hsl(var(--black));
}
.hidden {
  display: none !important;
}
 .spinner {
 
  width: 1.5rem;
  height: 1.5rem;
  line-height: 0;
 
}
.loading-overlay {
  position: absolute;
  z-index: 1;
  width: 1.8rem;
}

@media screen and (max-width: 749px) {
  .loading-overlay {
    top: 0;
    right: 0;
  }
}

@media screen and (min-width: 750px) {
  .loading-overlay {
    left: 0;
  }
}

.loading-overlay__spinner {
  width: 1.8rem;
  display: inline-block;
}

.spinner {
  animation: rotator 1.4s linear infinite;
}

@keyframes rotator {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(270deg);
  }
}

.path {
  stroke-dasharray: 280;
  stroke-dashoffset: 0;
  transform-origin: center;
  stroke: currentColor;
  animation: dash 1.4s ease-in-out infinite;
}

@media screen and (forced-colors: active) {
  .path{
    stroke: CanvasText;
  }
}

@keyframes dash {
  0% {
    stroke-dashoffset: 280;
  }
  50% {
    stroke-dashoffset: 75;
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 280;
    transform: rotate(450deg);
  }
}

.loading-overlay:not(.hidden) + .cart-item__price-wrapper,
.loading-overlay:not(.hidden) ~ cart-remove-button {
  opacity: 50%;
}

.loading-overlay:not(.hidden) ~ cart-remove-button {
  pointer-events: none;
  cursor: default;
}


@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0.01;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}


/******* BORDER LAYOUT ***********/
.border-top {
	border-top: var(--border-width) solid; 
}
.border-bottom { 
	border-bottom: var(--border-width) solid;
}
.with-border > * {
	border-right: var(--border-width) solid;
	border-bottom: var(--border-width) solid;
}
.with-border {
	border-top: var(--border-width) solid;
	border-left: var(--border-width) solid;
	position: relative;
}
.with-border::after {
	content: "";
	height: var(--border-width);
	width: 100%;
	background: currentColor;
	position: absolute;
	bottom: 0;
}


/* FORMS */
select, input, button, textarea {
	font-size: inherit;
	font-family: inherit;
}
 
.select .icon-caret, .customer select + svg {
	height: 0.75em;
	pointer-events: none;
	position: absolute;
	top: calc(50% - 0.25em);
	right: calc(var(--inputs-border-width) + 1.5rem);
}
/* component-form */
.field.btn-style:before {
  border-radius: var(--button-radius); 
} 
.field.btn-style:after {
  border-radius: var(--button-radius); 
} 

.field.btn-style input {
  border-radius: var(--button-radius); 
} 
.field.btn-style:hover {
  border-radius: var(--button-radius); 
}
.field.btn-style:hover.field:after {
  border-radius: var(--button-radius); 
}


.field:before,
.select:before,
.customer .field:before,
.customer select:before,
.localization-form__select:before {
  pointer-events: none;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--input-radius);
  box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
    var(--inputs-shadow-blur-radius) hsla(var(--black), var(--inputs-shadow-opacity));
  z-index: -1;
}

.field:after,
.select:after,
.customer .field:after,
.customer select:after,
.localization-form__select:after {
  pointer-events: none;
  content: '';
  position: absolute;
  top: var(--inputs-border-width);
  right: var(--inputs-border-width);
  bottom: var(--inputs-border-width);
  left: var(--inputs-border-width);
  border: 0.1rem solid transparent;
  border-radius: var(--input-radius);
  box-shadow: 0 0 0 var(--inputs-border-width) hsla(var(--black), var(--inputs-border-opacity));
  transition: box-shadow var(--duration-short) ease;
  z-index: 1;
}
 


.field:hover.field:after,
.select:hover.select:after,
.select__select:hover.select__select:after,
.customer .field:hover.field:after,
.customer select:hover.select:after,
.localization-form__select:hover.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width))
    hsla(var(--black), var(--inputs-border-opacity));
  outline: 0;
  border-radius: var(--input-radius);
}

.field__input:focus-visible,
.select__select:focus-visible,
.customer .field input:focus-visible,
.customer select:focus-visible,
.localization-form__select:focus-visible.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) hsla(var(--black));
  outline: 0;
  border-radius: var(--input-radius);
}

.field__input:focus,
.select__select:focus,
.customer .field input:focus,
.customer select:focus,
.localization-form__select:focus.localization-form__select:after {
  box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) hsla(var(--black));
  outline: 0;
  border-radius: var(--input-radius);
}

.localization-form__select:focus {
  outline: 0;
  box-shadow: none;
}

.textarea,
.select {
  display: flex;
  position: relative;
  width: 100%;
}

/* Select */
.select {
	align-items: center;
	gap: 0.5em;
}

.select .icon-caret,
.customer select + svg {
  height: 0.6rem;
  pointer-events: none;
  position: absolute;
  top: calc(50% - 0.2rem);
  right: calc(var(--inputs-border-width) + 1.5rem);
}

.select__select, .customer select {
	cursor: pointer;
	padding: 0.5em;
	margin: var(--inputs-border-width);
	width: 100%;
	appearance: none;
	border: none;
}

/* Field */

.field {
  position: relative;
  width: 100%;
  display: grid;
  transition: box-shadow var(--duration-short) ease;
}
.file-field {
    display: grid;
}
.customer .field {
  display: flex;
}

.field--with-error {
  flex-wrap: wrap;
}

.field__input,
.customer .field input { 
  transition: box-shadow var(--duration-short) ease;
}

.field label {
	left: 1em;
	top: 50%;
	margin-bottom: 0;
	pointer-events: none;
	position: absolute;
	transition: top var(--duration-short) ease, font-size var(--duration-short) ease;
 
	transform: translateY(-50%);
  color: hsl(var(--black));
}



.field__input:focus ~ .field__label, .field__input:not(:placeholder-shown) ~ .field__label, .field__input:autofill ~ .field__label, .customer .field input:focus ~ label, .customer .field input:not(:placeholder-shown) ~ label, .customer .field input:autofill ~ label {
	top: calc(var(--inputs-border-width) + 0.25em);
	left: calc(var(--inputs-border-width) + 1em);
	letter-spacing: 0.05em;
  transform: translateY(0);
	font-size: 0.66em;
}


.field:focus-within label, .field:has(input:not(:placeholder-shown)) label {
	top: calc(var(--inputs-border-width) + 0.25em);
	left: calc(var(--inputs-border-width) + 1em); 
  transform: translateY(0);
	font-size: 0.66em;
}
textarea + .field__label {
	top: 0.5em;
	transform: translateY(0);
}

.field__input::-webkit-search-cancel-button,
.customer .field input::-webkit-search-cancel-button {
  display: none;
}

.field__input::placeholder,
.customer .field input::placeholder {
  opacity: 0;
}

.field__button {
	align-items: center;
	background-color: transparent;
	border: 0;
	color: currentColor;
	cursor: pointer;
	display: flex;
	height: 100%;
	justify-content: center;
	overflow: hidden;
	padding: 0.5em;
	position: absolute;
	right: 0;
	top: 0;
	width: max-content;
	min-width: var(--min-height);
}

.field__button > svg {
  height: 1em;
  width: 1em;
}

.field__input:-webkit-autofill ~ .field__button,
.field__input:-webkit-autofill ~ .field__label,
.customer .field input:-webkit-autofill ~ label {
  color: rgb(0, 0, 0);
}

/* Text area */

.textarea {
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: var(--font-body-weight);
  min-height: 10rem;
  resize: none;
}

input[type='checkbox'] {
  display: inline-block;
  width: auto;
  margin-right: 0.5rem;
}

.checkbox .fill {
	fill: hsl(var(--white));
}
.checkbox .check {
	fill: none;
}

 input:checked + .icon .checkbox .check {
  fill: hsl(var(--white));
}
 input:checked + .icon .checkbox .fill {
  fill: hsl(var(--red));
}

/* Form global */

.form-label {
	display: block;
	margin-bottom: 0.5em;
}
.form__message {
  align-items: center;
  display: flex;
 
  line-height: 1;
  margin-top: 1rem;
}

 
 
.form__message .icon,
.customer .form__message svg {
  flex-shrink: 0;
  height: 1.3rem;
  margin-right: 0.5rem;
  width: 1.3rem;
}

.form__message--large .icon,
.customer .form__message svg {
  height: 1.5rem;
  width: 1.5rem;
  margin-right: 1rem;
}

.customer .field .form__message svg {
  align-self: start;
}

.form-status {
  margin: 0;
 
}

.form-status-list {
  padding: 0;
  margin: 2rem 0 4rem;
}

.form-status-list li {
  list-style-position: inside;
}

.form-status-list .link::first-letter {
  text-transform: capitalize;
}


/* FORM AND INPUTS */

input[type="checkbox"], input[type="radio"] {
	box-sizing: border-box;
	padding: 0;
	appearance: checkbox;
	height: 1em;
	width: 1em;
}

.field input, .field textarea, .field select {
	border: 1px solid hsl(var(--gray));
	border-radius: var(--input-radius);
	background-color: hsla(var(--white));
	width: 100%;
	min-height: var(--min-height);
	padding: 1em 0.75em 0.10em;
}

.field input[type="date"] {
  padding: 0.55em 0.75em;
}

.field input::placeholder, .field textarea::placeholder {
  opacity: 0;
}


.field input[type="checkbox"], .field input[type="radio"]  {
	height: 1em;
	width: 1em;
}



.field .check-box {
	display: flex;
	align-items: center;
	gap: 0.5em;
}
 
  .field label { 
    display: block; 
  }

  .field .check-box label {
    font-weight: 400;
  }

  .field {  
    align-self: flex-end;
  }

  .field textarea {
    height: 5em;
  }

.file-field input[type="file"] {
  width: 100%;
    padding: 0.35em 0.75em;
    border-radius: var(--input-radius);
}