/* ----------------------------
1 - BASE ----------------------
2 - CONTAINER -----------------
3 - ROWS ----------------------
4 - COLUMNS -------------------
5 - MARGIN --------------------
  - 5.1 - Margin All
  - 5.2 - Margin Top
  - 5.3 - Margin Bottom
  - 5.4 - Margin Left
  - 5.5 - Margin Right
6 - PADDING -------------------
- 6.1 - Padding All
- 6.2 - Padding Top
- 6.3 - Padding Bottom
- 6.4 - Padding Left
- 6.5 - Padding Right
7 - DISPLAY -------------------
- 7.1 - Display
- 7.2 - Wrapping
8 - GAP -----------------------
- 8.1 - Columns gap
- 8.2 - Rows gap
9 - BORDER --------------------
10 - JUSTIFY ------------------
11 - ALIGN --------------------
12 - OFFSET -------------------
13 - FLOATING -----------------
14 - OVERFLOW -----------------
---------------------------- */

/* ----------------------------
1 - BASE ----------------------
---------------------------- */
[data-new-base] {
  --c-gap: var(--gap);
  --r-gap: var(--gap);
  --m: calc(var(--gap) / 2);
  --p: calc(var(--gap) / 2);
  --b-r-medium: calc(var(--radius) / 4);
  --b-r-small: calc(var(--radius) / 2);
  --b-r-normal: var(--radius);
  --b-r-large: calc(var(--radius) / 2 * 3);
  --b-r-round: calc(var(--radius) * 2);
}

*[data-new-base] *,
*[data-new-base] *::after,
*[data-new-base] *::before {
    box-sizing: border-box;
}
.f-container-100 {
  display: block;
  position: relative;
  width: 100%;
  padding: 0 var(--gap);
  box-sizing: border-box;
}
svg {
  width: 100%;
}
.row {
  margin-left: calc(-1 * (var(--c-gap) / 2));
  margin-right: calc(-1 * (var(--c-gap) / 2));
  margin-top: calc(-1 * (var(--r-gap) / 2));
  margin-bottom: calc(-1 * (var(--r-gap) / 2));
  display: flex;
  flex-wrap: wrap;
}
.row>* {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-left: calc(var(--c-gap) * .5);
  padding-right: calc(var(--c-gap) * .5);
  padding-top: calc(var(--r-gap) * .5);
  padding-bottom: calc(var(--r-gap) * .5);
}
.col {
  flex: 1 0 0%;
}
[class*="row-cols-"]>*,
[class*="col"] {
  flex: 0 0 auto;
}
.clearfix::after {
  display: block;
  clear: both;
  content: '';
}
.bg-wrapper {
  overflow: hidden;
  position: relative;
}
.bg-wrapper>* {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.cover {
  object-position: center;
  object-fit: cover;
  left: 0;
  top: 0;
}
.contain {
  object-position: center;
  object-fit: contain;
}
.ratio>* {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.ratio-1x1 {
  padding-top: 100%;
}
.ratio-4x3 {
  padding-top: calc(3 / 4 * 100%);
}
.ratio-16x9 {
  padding-top: calc(9 / 16 * 100%);
}
.ratio-21x9 {
  padding-top: calc(9 / 21 * 100%);
}
.ratio-9x16 {
  padding-top: calc(16 / 9 * 100%);
}
.w-100 {
  width: 100%;
}
.h-100 {
  height: 100%;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
/* ----------------------------
2 - CONTAINER -----------------
---------------------------- */
/* .container {
  width: 100%;
  max-width: var(--container);
  padding: 0 var(--container-padding);
  margin: 0 auto;
}
.container-100 {
  width: 100%;
  padding: 0 var(--container-padding);
  margin: 0 auto;
} */
/* @media screen and (min-width: 1520px) {
  .container {
    max-width: var(--container-xl);
  }
} */
/* ----------------------------
3 - ROWS ----------------------
---------------------------- */
.row-cols-auto>* {
  width: auto;
}
.row-cols-1>* {
  width: 100%;
}
.row-cols-2>* {
  width: calc(100% / 2);
}
.row-cols-3>* {
  width: calc(100% / 3);
}
.row-cols-4>* {
  width: calc(100% / 4);
}
.row-cols-5>* {
  width: calc(100% / 5);
}
.row-cols-6>* {
  width: calc(100% / 6);
}
.row-cols-7>* {
  width: calc(100% / 7);
}
.row-cols-8>* {
  width: calc(100% / 8);
}
.row-cols-9>* {
  width: calc(100% / 9);
}
.row-cols-10>* {
  width: calc(100% / 10);
}
.row-cols-11>* {
  width: calc(100% / 11);
}
.row-cols-12>* {
  width: calc(100% / 12);
}

/* ----------------------------
4 - COLUMNS -------------------
---------------------------- */
.f-col-auto {
  width: auto;
}
.f-col-1 {
  width: calc(100% / 12);
}
.f-col-2 {
  width: calc(100% / 12 * 2);
}
.f-col-3 {
  width: calc(100% / 12 * 3);
}
.f-col-4 {
  width: calc(100% / 12 * 4);
}
.f-col-5 {
  width: calc(100% / 12 * 5);
}
.f-col-6 {
  width: calc(100% / 12 * 6);
}
.f-col-7 {
  width: calc(100% / 12 * 7);
}
.f-col-8 {
  width: calc(100% / 12 * 8);
}
.f-col-9 {
  width: calc(100% / 12 * 9);
}
.f-col-10 {
  width: calc(100% / 12 * 10);
}
.f-col-11 {
  width: calc(100% / 12 * 11);
}
.f-col-12 {
  width: 100%;
}

/* ----------------------------
5 - MARGIN --------------------
---------------------------- */
/* 5.1 - Margin All */
.m-0 {
  margin: 0;
}
.m-small {
  margin: calc(var(--m) / 4);
}
.m-medium {
  margin: calc(var(--m) / 2);
}
.m-normal {
  margin: var(--m);
}
.m-large {
  margin: calc(var(--m) / 2 * 3);
}
.m-x2 {
  margin: calc(var(--m) * 2);
}
.m-x3 {
  margin: calc(var(--m) * 3);
}
.m-x4 {
  margin: calc(var(--m) * 4);
}
/* 5.2 - Margin Top */
.m-t-0 {
  margin-top: 0;
}
.m-t-small {
  margin-top: calc(var(--m) / 4);
}
.m-t-medium {
  margin-top: calc(var(--m) / 2);
}
.m-t-normal {
  margin-top: var(--m);
}
.m-t-large {
  margin-top: calc(var(--m) / 2 * 3);
}
.m-t-x2 {
  margin-top: calc(var(--m) * 2);
}
.m-t-x3 {
  margin-top: calc(var(--m) * 3);
}
.m-t-x4 {
  margin-top: calc(var(--m) * 4);
}
/* 5.3 - Margin Bottom */
.m-b-0 {
  margin-bottom: 0;
}
.m-b-small {
  margin-bottom: calc(var(--m) / 4);
}
.m-b-medium {
  margin-bottom: calc(var(--m) / 2);
}
.m-b-normal {
  margin-bottom: var(--m);
}
.m-b-large {
  margin-bottom: calc(var(--m) / 2 * 3);
}
.m-b-x2 {
  margin-bottom: calc(var(--m) * 2);
}
.m-b-x3 {
  margin-bottom: calc(var(--m) * 3);
}
.m-b-x4 {
  margin-bottom: calc(var(--m) * 4);
}
/* 5.4 - Margin Left */
.m-l-0 {
  margin-left: 0;
}
.m-l-small {
  margin-left: calc(var(--m) / 4);
}
.m-l-medium {
  margin-left: calc(var(--m) / 2);
}
.m-l-normal {
  margin-left: var(--m);
}
.m-l-large {
  margin-left: calc(var(--m) / 2 * 3);
}
.m-l-x2 {
  margin-left: calc(var(--m) * 2);
}
.m-l-x3 {
  margin-left: calc(var(--m) * 3);
}
.m-l-x4 {
  margin-left: calc(var(--m) * 4);
}
/* 5.5 - Margin Right */
.m-r-0 {
  margin-right: 0;
}
.m-r-small {
  margin-right: calc(var(--m) / 4);
}
.m-r-medium {
  margin-right: calc(var(--m) / 2);
}
.m-r-normal {
  margin-right: var(--m);
}
.m-r-large {
  margin-right: calc(var(--m) / 2 * 3);
}
.m-r-x2 {
  margin-right: calc(var(--m) * 2);
}
.m-r-x3 {
  margin-right: calc(var(--m) * 3);
}
.m-r-x4 {
  margin-right: calc(var(--m) * 4);
}

/* ----------------------------
6 - PADDING -------------------
---------------------------- */
/* 6.1 - Padding All */
.p-0 {
  padding: 0;
}
.p-small {
  padding: calc(var(--p) / 4);
}
.p-medium {
  padding: calc(var(--p) / 2);
}
.p-normal {
  padding: var(--p);
}
.p-large {
  padding: calc(var(--p) / 2 * 3);
}
.p-x1 {
  padding: var(--p);
}
.p-x2 {
  padding: calc(var(--p) * 2);
}
.p-x3 {
  padding: calc(var(--p) * 3);
}
.p-x4 {
  padding: calc(var(--p) * 4);
}
/* 6.2 - Padding Top */
.p-t-0 {
  padding-top: 0;
}
.p-t-small {
  padding-top: calc(var(--p) / 4);
}
.p-t-medium {
  padding-top: calc(var(--p) / 2);
}
.p-t-normal {
  padding-top: var(--p);
}
.p-t-large {
  padding-top: calc(var(--p) / 2 * 3);
}
.p-t-x2 {
  padding-top: calc(var(--p) * 2);
}
.p-t-x3 {
  padding-top: calc(var(--p) * 3);
}
.p-t-x4 {
  padding-top: calc(var(--p) * 4);
}
/* 6.3 - Padding Bottom */
.p-b-0 {
  padding-bottom: 0;
}
.p-b-small {
  padding-bottom: calc(var(--p) / 4);
}
.p-b-medium {
  padding-bottom: calc(var(--p) / 2);
}
.p-b-normal {
  padding-bottom: var(--p);
}
.p-b-large {
  padding-bottom: calc(var(--p) / 2 * 3);
}
.p-b-x2 {
  padding-bottom: calc(var(--p) * 2);
}
.p-b-x3 {
  padding-bottom: calc(var(--p) * 3);
}
.p-b-x4 {
  padding-bottom: calc(var(--p) * 4);
}
/* 6.4 - Padding Left */
.p-l-0 {
  padding-left: 0;
}
.p-l-small {
  padding-left: calc(var(--p) / 4);
}
.p-l-medium {
  padding-left: calc(var(--p) / 2);
}
.p-l-normal {
  padding-left: var(--p);
}
.p-l-large {
  padding-left: calc(var(--p) / 2 * 3);
}
.p-l-x2 {
  padding-left: calc(var(--p) * 2);
}
.p-l-x3 {
  padding-left: calc(var(--p) * 3);
}
.p-l-x4 {
  padding-left: calc(var(--p) * 4);
}
/* 6.5 - Padding Right */
.p-r-0 {
  padding-right: 0;
}
.p-r-small {
  padding-right: calc(var(--p) / 4);
}
.p-r-medium {
  padding-right: calc(var(--p) / 2);
}
.p-r-normal {
  padding-right: var(--p);
}
.p-r-large {
  padding-right: calc(var(--p) / 2 * 3);
}
.p-r-x2 {
  padding-right: calc(var(--p) * 2);
}
.p-r-x3 {
  padding-right: calc(var(--p) * 3);
}
.p-r-x4 {
  padding-right: calc(var(--p) * 4);
}

/* ----------------------------
7 - DISPLAY -------------------
---------------------------- */
/* 7.1 - Display */
.d-none {
  display: none;
}
.d-block {
  display: block;
}
.d-flex {
  display: flex;
}
/* 7.2 - Wrapping */
.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
/* ----------------------------
8 - GAP ----------------------
---------------------------- */
/* - 8.1 - Columns gap */
.gap-0 {
  --c-gap: 0;
}
.gap-small {
  --c-gap: calc(var(--gap) / 4);
}
.gap-medium {
  --c-gap: calc(var(--gap) / 2);
}
.gap-normal {
  --c-gap: var(--gap);
}
.gap-large {
  --c-gap: calc(var(--gap) / 2 * 3);
}
.gap-x2 {
  --c-gap: calc(var(--gap) * 2);
}
.gap-x3 {
  --c-gap: calc(var(--gap) * 3);
}
.gap-x4 {
  --c-gap: calc(var(--gap) * 4);
}
/* - 8.2 - Rows gap */
.gap-row-0 {
  --r-gap: 0;
}
.gap-row-small {
  --r-gap: calc(var(--gap) / 4);
}
.gap-row-medium {
  --r-gap: calc(var(--gap) / 2);
}
.gap-row-normal {
  --r-gap: var(--gap);
}
.gap-row-large {
  --r-gap: calc(var(--gap) / 2 * 3);
}
.gap-row-x2 {
  --r-gap: calc(var(--gap) * 2);
}
.gap-row-x3 {
  --r-gap: calc(var(--gap) * 3);
}
.gap-row-x4 {
  --r-gap: calc(var(--gap) * 4);
}
/* ----------------------------
9 - BORDER --------------------
---------------------------- */
.b-r-0 {
  border-radius: 0;
}
.b-r-small {
  border-radius: var(--b-r-small)
}
.b-r-medium {
  border-radius: var(--b-r-medium);
}
.b-r-normal {
  border-radius: var(--b-r-normal);
}
.b-r-large {
  border-radius: var(--b-r-large);
}
.b-r-round {
  border-radius: var(--b-r-round);
}
.b-r-circule {
  border-radius: 50%;
}
/* ----------------------------
10 - JUSTIFY ------------------
---------------------------- */
.j-c-center {
  justify-content: center;
}
.j-c-start {
  justify-content: flex-start;
}
.j-c-end {
  justify-content: flex-end;
}
.j-c-around {
  justify-content: space-around;
}
.j-c-between {
  justify-content: space-between;
}
.j-c-evenly {
  justify-content: space-evenly;
}
/* ----------------------------
11 - ALIGN --------------------
---------------------------- */
.a-i-center {
  align-items: center;
}
.a-i-start {
  align-items: flex-start;
}
.a-i-end {
  align-items: flex-end;
}
.a-i-stretch {
  align-items: stretch;
}
.a-s-center {
  align-self: center;
}
.a-s-start {
  align-self: flex-start;
}
.a-s-end {
  align-self: flex-end;
}
/* ----------------------------
12 - OFFSET -------------------
---------------------------- */
.offset-auto {
  margin-left: auto;
}
.offset-0 {
  margin-left: 0;
}
.offset-1 {
  margin-left: calc(100% / 12);
}
.offset-2 {
  margin-left: calc(100% / 12 * 2);
}
.offset-3 {
  margin-left: calc(100% / 12 * 3);
}
.offset-4 {
  margin-left: calc(100% / 12 * 4);
}
.offset-5 {
  margin-left: calc(100% / 12 * 5);
}
.offset-6 {
  margin-left: calc(100% / 12 * 6);
}
.offset-7 {
  margin-left: calc(100% / 12 * 7);
}
.offset-8 {
  margin-left: calc(100% / 12 * 8);
}
.offset-9 {
  margin-left: calc(100% / 12 * 9);
}
.offset-10 {
  margin-left: calc(100% / 12 * 10);
}
.offset-11 {
  margin-left: calc(100% / 12 * 11);
}
.offset-12 {
  margin-left: calc(100% / 12 * 12);
}
/* ----------------------------
13 - FLOATING -----------------
---------------------------- */
.f-left {
  float: left;
}
.f-right {
  float: right;
}
.f-none {
  float: none;
}
/* ----------------------------
14 - OVERFLOW -----------------
---------------------------- */
.o-hidden {
  overflow: hidden;
}
.o-visible {
  overflow: visible;
}
.o-auto {
  overflow: auto;
}
.o-scroll {
  overflow: scroll;
}

.o-x-hidden {
  overflow-x: hidden;
}
.o-x-visible {
  overflow-x: visible;
}
.o-x-auto {
  overflow-x: auto;
}
.o-x-scroll {
  overflow-x: scroll;
}

.o-y-hidden {
  overflow-y: hidden;
}
.o-y-visible {
  overflow-y: visible;
}
.o-y-auto {
  overflow-y: auto;
}
.o-y-scroll {
  overflow-y: scroll;
}
/* ----------------------------
15 - SPACE -----------------
---------------------------- */
[class=*".space-"] {
  width: 100%;
  display: block;
}
.space-0 {
  height: 0;
}
.space-small {
  height: calc(var(--gap) / 4);
}
.space-medium {
  height: calc(var(--gap) / 2);
}
.space-normal {
  height: var(--gap);
}
.space-large {
  height: calc(var(--gap) / 2 * 3);
}
.space-x2 {
  height: calc(var(--gap) * 2);
}
.space-x3 {
  height: calc(var(--gap) * 3);
}
.space-x4 {
  height: calc(var(--gap) * 4);
}
/* ----------------------------
16 - ORDER -----------------
---------------------------- */
.order-1 {
  order: 1;
}
.order-2 {
  order: 2;
}
.order-3 {
  order: 3;
}
.order-4 {
  order: 4;
}
.order-5 {
  order: 5;
}
.order-6 {
  order: 6;
}
.order-7 {
  order: 7;
}
.order-8 {
  order: 8;
}
.order-9 {
  order: 9;
}
.order-10 {
  order: 10;
}
.order-11 {
  order: 11;
}
.order-12 {
  order: 12;
}