:root {
  --pint-spacing: 2rem;
  --gap: var(--pint-spacing);
}
@media (min-width: 1024px) {
  :root {
    --pint-spacing: 4rem;
    --gap: var(--pint-spacing);
  }
}
@media (min-width: 1440px) {
  :root {
    --pint-spacing: 5rem;
    --gap: var(--pint-spacing);
  }
}


/* Flex System */

.flex { display: flex; }

.f-nw { flex-wrap: nowrap }
.f-w { flex-wrap: wrap }

.f-j-sb { justify-content: space-between }
.f-j-fs { justify-content: flex-start }
.f-j-fe { justify-content: flex-end }
.f-j-c { justify-content: center }

.f-a-ac { align-items: center }
.f-a-fs { align-items: flex-start }
.f-a-s { align-items: stretch }
.f-a-s > .col { align-self: stretch }

.f-as-c { align-self: center !important;}
.f-as-fs { align-self: flex-start !important; }

.f-d-col { flex-direction: column }
.f-d-row { flex-direction: row }
.f-d-r-r { flex-direction: row-reverse }

.f-gap-2 { gap: 2rem; }

.flex-end-self {
  align-self: flex-end !important;
}

.f-a-c-self {
  align-self: center !important;
}

.flex-dir_col-rev_mobile-only {
  flex-direction: column-reverse;
}

.flex-stretch {
  align-self: stretch !important;
}

/* Column System */
.col {
  flex-basis: 100%;
  width: 100%;
  align-self: flex-start;
}

.margin-bottom_mobile-only {
  margin-bottom: 2rem;
}

.margin-bottom-0 {
    margin-bottom: 0 !important;
}

.margin-bottom-2 {
  margin-bottom: 2rem;
}

.margin-center {
    margin: 0 auto;
}

.no-padding-bottom {
  padding-bottom: 0 !important;
}

.no-padding-top {
  padding-top: 0 !important;
}


/* .col:not(:first-of-type) { margin-top: 3rem; } */
[class*="col-m"] + [class*="col-m"]:not([class*="f-d-col-mo"]) { margin-left: 2rem }
[class*="col-m-1-2"]:nth-child(2) { margin-top: 0; }
[class*="col-m-1-2"]:nth-child(n+3) { margin-top: 2rem; }
[class*="col-m-1-2"]:nth-of-type(2n-1) { margin-left: 0; }

.col-m-1-2 { flex: 6; flex-basis: calc((100% / 2) - 2rem); max-width: calc((100% / 2) - 2rem) }
.col-m-1-3 { flex: 4; flex-basis: calc((100% / 3) - 2rem); max-width: calc((100% / 3) - 2rem) }
.col-m-2-3 { flex: 8; flex-basis: calc((200% / 3) - 2rem); max-width: calc((200% / 3) - 2rem) }
.col-m-1-4 { flex: 3; flex-basis: calc((100% / 4) - 2rem); max-width: calc((100% / 4) - 2rem) }
.col-m-3-4 { flex: 9; flex-basis: calc((300% / 4) - 2rem); max-width: calc((300% / 4) - 2rem) }

.overflow-x_hidden {
  overflow-x: hidden;
}

@media only screen and (min-width: 768px) {
  .flex-t { display: flex; }

  .mobile-only { display: none }

  .margin-bottom_mobile-only { margin-bottom: 0; }

  /* Rows */
  .f-w-t { flex-wrap: wrap }
  .f-nw-t    { flex-wrap: nowrap }
  .f-d-col-t { flex-direction: column }
  .f-d-col-sd { flex-direction: column }
  .f-b-100-t { flex-basis: 100%; }
  .f-j-fe-t { justify-content: flex-end }
  .f-a-ac-t { align-items: center; }

  .flex-dir_col-rev_mobile-only {
    flex-direction: row;
  }

  .margin-bottom-sep {
    margin-bottom: 3rem;
  }

  .margin-0-t {
      margin: 0;
  }

  /* Columns */

  .col[class*="col-t-"] {
    margin-top: 0;
  }
  [class*="col-t-1-2"]:nth-child(n+3) {
      margin-top: 2rem;
  }

  [class*="col-t"] + [class*="col-t"] {margin-left: 2rem;}
  [class*="col-m-1-2"]:nth-of-type(2n-1) { margin-left: 0; }

  .col-t-1-2 { flex: 6; flex-basis: calc((100% / 2) - 2rem); max-width: calc((100% / 2) - 2rem) }
  .col-t-1-3 { flex: 4; flex-basis: calc((100% / 3) - 2rem); max-width: calc((100% / 3) - 2rem) }
  .col-t-2-3 { flex: 8; flex-basis: calc((200% / 3) - 2rem); max-width: calc((200% / 3) - 2rem) }
  .col-t-1-4 { flex: 3; flex-basis: calc((100% / 4) - 2rem); max-width: calc((100% / 4) - 2rem) }
  .col-t-3-4 { flex: 9; flex-basis: calc((300% / 4) - 2rem); max-width: calc((300% / 4) - 2rem) }

  .col-t-1-3:nth-of-type(4):not(.blog-card),
  .col-t-1-3:nth-of-type(7):not(.blog-card) {margin-left: 0 !important;}
  .col-t-1-3:nth-of-type(n+4),
  .col-t-1-3:nth-of-type(n+7) {margin-top: 2rem;}

  .tablet-min-hide {
    display: none !important;
  }
}

.col.col-t-1-2.flex-end{
  align-self: flex-end;
}

@media only screen and (min-width: 1024px) {
  .margin-bottom-sep {
    margin-bottom: 3rem;
  }

   .w-80-d {
    width: 80%;
  }

  .desktop-hide { display: none }
  /* Rows */
  .flex-d { display: flex; }
  .f-nw-sd    { flex-wrap: nowrap }
  .f-d-col-sd { flex-direction: column }
  .f-d-row-sd { flex-direction: row }
  .f-j-fe-d { justify-content: flex-end }

  /* Columns */


  [class*="col-t-1-2"]:nth-child(n+3) {
      margin-top: 4rem;
  }
  .col[class*="col-d-"] {
    margin-top: 0;
  }

  [class*="col-"] + [class*="col-"] { margin-left: 4rem }
  [class*="col-m-1-2"]:nth-of-type(2n-1) { margin-left: 0; }

  [class*="t-1-2"] { flex: 6; flex-basis: calc((100% / 2) - 1rem); max-width: calc((100% / 2) - 1rem) }
  .landing-simple [class*="t-1-2"] { flex: 6; flex-basis: calc((100% / 2) - 4rem); max-width: calc((100% / 2) - 1rem) }
  [class*="t-1-3"] { flex: 4; flex-basis: calc((100% / 3) - 4rem); max-width: calc((100% / 3) - 2.5rem) }
  [class*="t-2-3"] { flex: 8; flex-basis: calc((200% / 3) - 4rem); max-width: calc((200% / 3) - 2.5rem) }
  [class*="t-1-4"] { flex: 3; flex-basis: calc((100% / 4) - 4rem); max-width: calc((100% / 4) - 2.5rem) }
  [class*="t-3-4"] { flex: 9; flex-basis: calc((300% / 4) - 4rem); max-width: calc((300% / 4) - 2.5rem) }

  .col-d-1-2 { flex: 6; flex-basis: calc((100% / 2) - 4rem); max-width: calc((100% / 2) - 2.5rem) }
  .col-d-1-3 { flex: 4; flex-basis: calc((100% / 3) - 4rem); max-width: calc((100% / 3) - 2.5rem) }
  .col-d-2-3 { flex: 8; flex-basis: calc((200% / 3) - 4rem); max-width: calc((200% / 3) - 2.5rem) }
  .col-d-1-4 { flex: 3; flex-basis: calc((100% / 4) - 4rem); max-width: calc((100% / 4) - 2.5rem) }
  .col-d-3-4 { flex: 9; flex-basis: calc((300% / 4) - 4rem); max-width: calc((300% / 4) - 2.5rem) }

  .col-d-1-3:nth-of-type(4) {margin-left: 0 !important;}
  .col-d-1-3:nth-of-type(n+4), .col-t-1-3:not([class*='col-d']):nth-of-type(n+4) {margin-top: 4rem;}

  .f-w > .col-d-1-2:nth-child(2n + 3) {
    margin-left: 0;
  }

  .f-w > .col-d-1-2:nth-child(n+3) {
    margin-top: 4rem;
  }
}

@media only screen and (min-width: 1480px) {
  .f-nw-hd    { flex-wrap: nowrap }
  .f-d-col-hd { flex-direction: column }
  .f-d-row-hd { flex-direction: row }

  .sd-only    { display: none; }
  .hd-hide    { display: none; }

  .margin-bottom-sep {
    margin-bottom: 5rem;
  }

  /* Columns */

  [class*="col-t-1-2"]:nth-child(n+3) {
      margin-top: 5rem;
  }

  .col[class*="col-d-"] {
    margin-top: 0;
  }

  [class*="col-"] + [class*="col-"] { margin-left: 5rem }
  [class*="col-m-1-2"]:nth-of-type(2n-1) { margin-left: 0; }

  [class*="-1-2"] { flex: 6; flex-basis: calc((100% / 2) - 3rem); max-width: calc((100% / 2) - 3rem) }
  .nano-landing [class*="-1-2"] { flex: 6; flex-basis: calc((100% / 2) - 3rem); max-width: calc((100% / 2) + 9rem); }
  [class*="-1-3"] { flex: 4; flex-basis: calc((100% / 3) - 5rem); max-width: calc((100% / 3) - 3rem) }
  [class*="-2-3"] { flex: 8; flex-basis: calc((200% / 3) - 5rem); max-width: calc((200% / 3) - 3rem) }
  [class*="-1-4"] { flex: 3; flex-basis: calc((100% / 4) - 5rem); max-width: calc((100% / 4) - 3rem) }
  [class*="-3-4"] { flex: 9; flex-basis: calc((300% / 4) - 5rem); max-width: calc((300% / 4) - 3rem) }

  .col-d-1-2 { flex: 6; flex-basis: calc((100% / 2) - 5rem); max-width: calc((100% / 2) - 3rem) }
  .col-d-1-3, .col-hd-1-3 { flex: 4; flex-basis: calc((100% / 3) - 5rem); max-width: calc((100% / 3) - 3rem) }
  .col-d-2-3, .col-hd-2-3 { flex: 8; flex-basis: calc((200% / 3) - 5rem); max-width: calc((200% / 3) - 3rem) }
  .col-d-1-4 { flex: 3; flex-basis: calc((100% / 4) - 5rem); max-width: calc((100% / 4) - 3rem) }
  .col-d-3-4 { flex: 9; flex-basis: calc((300% / 4) - 5rem); max-width: calc((300% / 4) - 3rem) }

  
  .col-hd-1-4 { flex: 3; flex-basis: calc((100% / 4) - 5rem); max-width: calc((100% / 4) - 3rem) }

  .col-d-1-3:nth-of-type(n+4), .col-t-1-3:not([class*='col-d']):nth-of-type(n+4) {margin-top: 5rem;}

  .f-w > .col-d-1-2:nth-child(n+3) {
    margin-top: 5rem;
  }

  .f-w > .col-hd-1-4:nth-child(n+3) {
    margin-top: 0;
  }
}

@media only screen and (max-width: 1479px) {
  .hd-only { display: none }
}

@media only screen and (max-width: 1023px) {
  .sd-only     { display: none; }
  .tablet-hide { display: none !important}
  .f-w-to      { flex-wrap: wrap }
  .f-nw-to     { flex-wrap: nowrap }
  .f-d-col-to  { flex-direction: column }
  .f-a-fs-to   { align-items: flex-start }
}

@media only screen and (max-width: 767px) {
  .mobile-hide { display: none; }
  .margin-bottom-3-mobile { margin-bottom: 3rem; }
  .margin-top-4-mobile { margin-top: 4rem; }
  .no-padding-top-m { padding-top: 0 !important; }


  .f-w-mo     { flex-wrap: wrap }
  .f-nw-mo    { flex-wrap: nowrap }
  .f-d-col-mo { flex-direction: column }
  .f-a-fs-mo  { align-items: flex-start }

  .f-d-cr-mob-only {
    flex-direction: column-reverse;
  }

  .f-d-col-r-mo, .f-d-cr-mob-only {
    flex-direction: column-reverse;
  }

  .f-o-2-mo {
    order: 2;
  }

}
