/* scss/settings/_breakpoints.scss */ /* scss/utilities/_functions.scss */
/*
    .cssClass {
        font-size: fluid-type(rem-calc(360), rem-calc(1280), rem-calc(20), rem-calc(50));
        margin-bottom: fluid-type(rem-calc(360), rem-calc(1280), rem-calc(10), rem-calc(20));
    }

*/
/* scss/utilities/_mixins.scss */ /* xsmall = 10 (1 - 11)
small = 13 - (12-14)
default = 16 (15-18)
medium = 20 (18-26)
large = 32 (26-36)
xlarge = 40 (36 <) */
/* ---------- headers ---------- */
/* ---------- medium fonts: 20 (18-26) ---------- */
/* ---------- default fonts: 16 (15-18) ---------- */
/* ---------- small fonts: 13 - (12-14) ---------- */
.a-tag span {
  font-size: 0.8125rem;
  line-height: 1.4;
  font-weight: 400;
}

/* ---------- xsmall fonts: 10 (1 - 11) ---------- */
/* ---------- button fonts ---------- */
.frame {
  margin-bottom: 6.25rem;
}

.seoText {
  margin-top: 6.25rem;
}

.frame-space-after-none {
  margin-bottom: 0;
}

.frame-space-after-small {
  margin-bottom: 3.125rem;
}

.frame-space-after-medium {
  margin-bottom: 6.25rem;
}

.frame-space-after-large {
  margin-bottom: 9.375rem;
}

body {
  scroll-behavior: smooth;
}

.no-transitions,
.no-transitions * {
  transition: none !important;
  animation: none !important;
}

/* scss/utilities/_functions.scss */
/*
    .cssClass {
        font-size: fluid-type(rem-calc(360), rem-calc(1280), rem-calc(20), rem-calc(50));
        margin-bottom: fluid-type(rem-calc(360), rem-calc(1280), rem-calc(10), rem-calc(20));
    }

*/
/* scss/utilities/_mixins.scss */ /* xsmall = 10 (1 - 11)
small = 13 - (12-14)
default = 16 (15-18)
medium = 20 (18-26)
large = 32 (26-36)
xlarge = 40 (36 <) */
/* ---------- headers ---------- */
/* ---------- medium fonts: 20 (18-26) ---------- */
/* ---------- default fonts: 16 (15-18) ---------- */
/* ---------- small fonts: 13 - (12-14) ---------- */
.a-tag span {
  font-size: 0.8125rem;
  line-height: 1.4;
  font-weight: 400;
}

/* ---------- xsmall fonts: 10 (1 - 11) ---------- */
/* ---------- button fonts ---------- */
@keyframes transformToTag {
  0% {
    opacity: 0;
    min-width: 250px;
    background-color: #C5BEB9;
    border: 1.5px solid #C5BEB9;
    border-radius: 0;
    transform: translate(var(--xPos), var(--yPos));
  }
  50% {
    opacity: 1;
    background-color: #C5BEB9;
    border: 1.5px solid #C5BEB9;
    border-radius: 0;
  }
  100% {
    opacity: 1;
    min-width: 0;
    transform: translate(0, 0);
  }
}
@keyframes removeTag {
  100% {
    opacity: 0;
    transform: scale(1.4);
  }
}
.a-tag {
  --xPos: 0;
  --yPos: 0;
  opacity: 1;
  position: relative;
  border: 1.5px solid var(--color-primary);
  display: inline-flex;
  justify-content: space-between;
  border-radius: 1.375rem;
  transition: all 150ms ease-out;
  transform: translate(0, 0);
  /*    &.-tx-black {
          color: $body-font-color;
      }

      &.-tx-red {
          color: $primary-color;
      }

      &.-tx-white {
          color: $white;
      }*/
}
.a-tag.-fly {
  animation: transformToTag 250ms ease-out forwards;
}
.a-tag.-remove {
  animation: none;
  opacity: 0;
  transform: translate(0, 0) scale(1.6);
}
.a-tag span {
  text-transform: uppercase;
  padding: 0.5rem 0 0.5rem 1.0625rem;
  transition: padding 1500ms ease-in-out;
}
.a-tag i {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--color-primary);
  cursor: pointer;
  margin-right: 0.5rem;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  transition: transform 250ms ease-out, color 350ms ease-in-out;
}
.a-tag i:hover {
  transform: rotate(180deg);
}
.a-tag.-big {
  padding: 0.9375rem 2.6875rem;
  border-radius: 2rem;
}
.a-tag.-big span {
  font-size: 1.25rem;
  line-height: 1.625rem;
  font-weight: 400;
  color: #FFF;
}
.a-tag:hover {
  color: #FFF !important;
  background: var(--color-primary);
}
.a-tag:hover i {
  color: #FFF;
}

/*# sourceMappingURL=tag.css.map */