/* Minimal Bootstrap-like Grid
   - container / container-fluid
   - row
   - cols 1..12
   - auto cols
   - offsets
   - order
   - row-cols
   - responsive breakpoints: sm, md, lg, xl, xxl
*/

:root {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  --bs-columns: 12;
  --bs-breakpoint-sm: 576px;
  --bs-breakpoint-md: 768px;
  --bs-breakpoint-lg: 992px;
  --bs-breakpoint-xl: 1200px;
  --bs-breakpoint-xxl: 1400px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.container,
.container-fluid {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
}

.container {
  max-width: 70%;
}

.container-fluid{
   max-width: 70%;
}

@media (min-width: 576px) {
  .container { max-width: 540px; }
}

@media (min-width: 768px) {
  .container { max-width: 720px; }
}

@media (min-width: 992px) {
  .container { max-width: 960px; }
}

@media (min-width: 1200px) {
  .container { max-width: 1140px; }
}

@media (min-width: 1400px) {
  .container { max-width: 1320px; }
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y) * -1);
  margin-right: calc(var(--bs-gutter-x) * -0.5);
  margin-left: calc(var(--bs-gutter-x) * -0.5);
}

.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}

/* Basic columns */
.col {
  flex: 1 0 0%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
}

.col-1  { flex: 0 0 auto; width: 8.33333333%; }
.col-2  { flex: 0 0 auto; width: 16.66666667%; }
.col-3  { flex: 0 0 auto; width: 25%; }
.col-4  { flex: 0 0 auto; width: 33.33333333%; }
.col-5  { flex: 0 0 auto; width: 41.66666667%; }
.col-6  { flex: 0 0 auto; width: 50%; }
.col-7  { flex: 0 0 auto; width: 58.33333333%; }
.col-8  { flex: 0 0 auto; width: 66.66666667%; }
.col-9  { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

/* Row columns */
.row-cols-1 > * { flex: 0 0 auto; width: 100%; }
.row-cols-2 > * { flex: 0 0 auto; width: 50%; }
.row-cols-3 > * { flex: 0 0 auto; width: 33.33333333%; }
.row-cols-4 > * { flex: 0 0 auto; width: 25%; }
.row-cols-5 > * { flex: 0 0 auto; width: 20%; }
.row-cols-6 > * { flex: 0 0 auto; width: 16.66666667%; }

/* Auto width helpers */
.w-auto { width: auto !important; }
.w-100 { width: 100% !important; }

/* Offsets */
.offset-1  { margin-left: 8.33333333%; }
.offset-2  { margin-left: 16.66666667%; }
.offset-3  { margin-left: 25%; }
.offset-4  { margin-left: 33.33333333%; }
.offset-5  { margin-left: 41.66666667%; }
.offset-6  { margin-left: 50%; }
.offset-7  { margin-left: 58.33333333%; }
.offset-8  { margin-left: 66.66666667%; }
.offset-9  { margin-left: 75%; }
.offset-10 { margin-left: 83.33333333%; }
.offset-11 { margin-left: 91.66666667%; }

/* Order */
.order-first { order: -1 !important; }
.order-last  { order: 13 !important; }
.order-0     { order: 0 !important; }
.order-1     { order: 1 !important; }
.order-2     { order: 2 !important; }
.order-3     { order: 3 !important; }
.order-4     { order: 4 !important; }
.order-5     { order: 5 !important; }
.order-6     { order: 6 !important; }
.order-7     { order: 7 !important; }
.order-8     { order: 8 !important; }
.order-9     { order: 9 !important; }
.order-10    { order: 10 !important; }
.order-11    { order: 11 !important; }
.order-12    { order: 12 !important; }

/* Alignment helpers */
.justify-start   { justify-content: flex-start !important; }
.justify-end     { justify-content: flex-end !important; }
.justify-center  { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-around  { justify-content: space-around !important; }
.justify-evenly  { justify-content: space-evenly !important; }

.items-start   { align-items: flex-start !important; }
.items-end     { align-items: flex-end !important; }
.items-center  { align-items: center !important; }
.items-baseline { align-items: baseline !important; }
.items-stretch { align-items: stretch !important; }

.self-start   { align-self: flex-start !important; }
.self-end     { align-self: flex-end !important; }
.self-center  { align-self: center !important; }
.self-stretch { align-self: stretch !important; }

/* Gutters */
.g-0  { --bs-gutter-x: 0; --bs-gutter-y: 0; }
.gx-0 { --bs-gutter-x: 0; }
.gy-0 { --bs-gutter-y: 0; }

.g-1  { --bs-gutter-x: 0.25rem; --bs-gutter-y: 0.25rem; }
.gx-1 { --bs-gutter-x: 0.25rem; }
.gy-1 { --bs-gutter-y: 0.25rem; }

.g-2  { --bs-gutter-x: 0.5rem; --bs-gutter-y: 0.5rem; }
.gx-2 { --bs-gutter-x: 0.5rem; }
.gy-2 { --bs-gutter-y: 0.5rem; }

.g-3  { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
.gx-3 { --bs-gutter-x: 1rem; }
.gy-3 { --bs-gutter-y: 1rem; }

.g-4  { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }
.gx-4 { --bs-gutter-x: 1.5rem; }
.gy-4 { --bs-gutter-y: 1.5rem; }

.g-5  { --bs-gutter-x: 3rem; --bs-gutter-y: 3rem; }
.gx-5 { --bs-gutter-x: 3rem; }
.gy-5 { --bs-gutter-y: 3rem; }

/* Responsive variants */
@media (min-width: 576px) {
  .container-sm { max-width: 540px; }

  .col-sm        { flex: 1 0 0%; }
  .col-sm-auto   { flex: 0 0 auto; width: auto; }
  .col-sm-1      { flex: 0 0 auto; width: 8.33333333%; }
  .col-sm-2      { flex: 0 0 auto; width: 16.66666667%; }
  .col-sm-3      { flex: 0 0 auto; width: 25%; }
  .col-sm-4      { flex: 0 0 auto; width: 33.33333333%; }
  .col-sm-5      { flex: 0 0 auto; width: 41.66666667%; }
  .col-sm-6      { flex: 0 0 auto; width: 50%; }
  .col-sm-7      { flex: 0 0 auto; width: 58.33333333%; }
  .col-sm-8      { flex: 0 0 auto; width: 66.66666667%; }
  .col-sm-9      { flex: 0 0 auto; width: 75%; }
  .col-sm-10     { flex: 0 0 auto; width: 83.33333333%; }
  .col-sm-11     { flex: 0 0 auto; width: 91.66666667%; }
  .col-sm-12     { flex: 0 0 auto; width: 100%; }

  .row-cols-sm-1 > * { flex: 0 0 auto; width: 100%; }
  .row-cols-sm-2 > * { flex: 0 0 auto; width: 50%; }
  .row-cols-sm-3 > * { flex: 0 0 auto; width: 33.33333333%; }
  .row-cols-sm-4 > * { flex: 0 0 auto; width: 25%; }
  .row-cols-sm-5 > * { flex: 0 0 auto; width: 20%; }
  .row-cols-sm-6 > * { flex: 0 0 auto; width: 16.66666667%; }

  .offset-sm-0  { margin-left: 0; }
  .offset-sm-1  { margin-left: 8.33333333%; }
  .offset-sm-2  { margin-left: 16.66666667%; }
  .offset-sm-3  { margin-left: 25%; }
  .offset-sm-4  { margin-left: 33.33333333%; }
  .offset-sm-5  { margin-left: 41.66666667%; }
  .offset-sm-6  { margin-left: 50%; }
  .offset-sm-7  { margin-left: 58.33333333%; }
  .offset-sm-8  { margin-left: 66.66666667%; }
  .offset-sm-9  { margin-left: 75%; }
  .offset-sm-10 { margin-left: 83.33333333%; }
  .offset-sm-11 { margin-left: 91.66666667%; }

  .order-sm-first { order: -1 !important; }
  .order-sm-last  { order: 13 !important; }
  .order-sm-0     { order: 0 !important; }
  .order-sm-1     { order: 1 !important; }
  .order-sm-2     { order: 2 !important; }
  .order-sm-3     { order: 3 !important; }
  .order-sm-4     { order: 4 !important; }
  .order-sm-5     { order: 5 !important; }
  .order-sm-6     { order: 6 !important; }
  .order-sm-7     { order: 7 !important; }
  .order-sm-8     { order: 8 !important; }
  .order-sm-9     { order: 9 !important; }
  .order-sm-10    { order: 10 !important; }
  .order-sm-11    { order: 11 !important; }
  .order-sm-12    { order: 12 !important; }
}

@media (min-width: 768px) {
  .container-md { max-width: 720px; }

  .col-md        { flex: 1 0 0%; }
  .col-md-auto   { flex: 0 0 auto; width: auto; }
  .col-md-1      { flex: 0 0 auto; width: 8.33333333%; }
  .col-md-2      { flex: 0 0 auto; width: 16.66666667%; }
  .col-md-3      { flex: 0 0 auto; width: 25%; }
  .col-md-4      { flex: 0 0 auto; width: 33.33333333%; }
  .col-md-5      { flex: 0 0 auto; width: 41.66666667%; }
  .col-md-6      { flex: 0 0 auto; width: 50%; }
  .col-md-7      { flex: 0 0 auto; width: 58.33333333%; }
  .col-md-8      { flex: 0 0 auto; width: 66.66666667%; }
  .col-md-9      { flex: 0 0 auto; width: 75%; }
  .col-md-10     { flex: 0 0 auto; width: 83.33333333%; }
  .col-md-11     { flex: 0 0 auto; width: 91.66666667%; }
  .col-md-12     { flex: 0 0 auto; width: 100%; }

  .row-cols-md-1 > * { flex: 0 0 auto; width: 100%; }
  .row-cols-md-2 > * { flex: 0 0 auto; width: 50%; }
  .row-cols-md-3 > * { flex: 0 0 auto; width: 33.33333333%; }
  .row-cols-md-4 > * { flex: 0 0 auto; width: 25%; }
  .row-cols-md-5 > * { flex: 0 0 auto; width: 20%; }
  .row-cols-md-6 > * { flex: 0 0 auto; width: 16.66666667%; }

  .offset-md-0  { margin-left: 0; }
  .offset-md-1  { margin-left: 8.33333333%; }
  .offset-md-2  { margin-left: 16.66666667%; }
  .offset-md-3  { margin-left: 25%; }
  .offset-md-4  { margin-left: 33.33333333%; }
  .offset-md-5  { margin-left: 41.66666667%; }
  .offset-md-6  { margin-left: 50%; }
  .offset-md-7  { margin-left: 58.33333333%; }
  .offset-md-8  { margin-left: 66.66666667%; }
  .offset-md-9  { margin-left: 75%; }
  .offset-md-10 { margin-left: 83.33333333%; }
  .offset-md-11 { margin-left: 91.66666667%; }

  .order-md-first { order: -1 !important; }
  .order-md-last  { order: 13 !important; }
  .order-md-0     { order: 0 !important; }
  .order-md-1     { order: 1 !important; }
  .order-md-2     { order: 2 !important; }
  .order-md-3     { order: 3 !important; }
  .order-md-4     { order: 4 !important; }
  .order-md-5     { order: 5 !important; }
  .order-md-6     { order: 6 !important; }
  .order-md-7     { order: 7 !important; }
  .order-md-8     { order: 8 !important; }
  .order-md-9     { order: 9 !important; }
  .order-md-10    { order: 10 !important; }
  .order-md-11    { order: 11 !important; }
  .order-md-12    { order: 12 !important; }
}

@media (min-width: 992px) {
  .container-lg { max-width: 960px; }

  .col-lg        { flex: 1 0 0%; }
  .col-lg-auto   { flex: 0 0 auto; width: auto; }
  .col-lg-1      { flex: 0 0 auto; width: 8.33333333%; }
  .col-lg-2      { flex: 0 0 auto; width: 16.66666667%; }
  .col-lg-3      { flex: 0 0 auto; width: 25%; }
  .col-lg-4      { flex: 0 0 auto; width: 33.33333333%; }
  .col-lg-5      { flex: 0 0 auto; width: 41.66666667%; }
  .col-lg-6      { flex: 0 0 auto; width: 50%; }
  .col-lg-7      { flex: 0 0 auto; width: 58.33333333%; }
  .col-lg-8      { flex: 0 0 auto; width: 66.66666667%; }
  .col-lg-9      { flex: 0 0 auto; width: 75%; }
  .col-lg-10     { flex: 0 0 auto; width: 83.33333333%; }
  .col-lg-11     { flex: 0 0 auto; width: 91.66666667%; }
  .col-lg-12     { flex: 0 0 auto; width: 100%; }

  .row-cols-lg-1 > * { flex: 0 0 auto; width: 100%; }
  .row-cols-lg-2 > * { flex: 0 0 auto; width: 50%; }
  .row-cols-lg-3 > * { flex: 0 0 auto; width: 33.33333333%; }
  .row-cols-lg-4 > * { flex: 0 0 auto; width: 25%; }
  .row-cols-lg-5 > * { flex: 0 0 auto; width: 20%; }
  .row-cols-lg-6 > * { flex: 0 0 auto; width: 16.66666667%; }

  .offset-lg-0  { margin-left: 0; }
  .offset-lg-1  { margin-left: 8.33333333%; }
  .offset-lg-2  { margin-left: 16.66666667%; }
  .offset-lg-3  { margin-left: 25%; }
  .offset-lg-4  { margin-left: 33.33333333%; }
  .offset-lg-5  { margin-left: 41.66666667%; }
  .offset-lg-6  { margin-left: 50%; }
  .offset-lg-7  { margin-left: 58.33333333%; }
  .offset-lg-8  { margin-left: 66.66666667%; }
  .offset-lg-9  { margin-left: 75%; }
  .offset-lg-10 { margin-left: 83.33333333%; }
  .offset-lg-11 { margin-left: 91.66666667%; }

  .order-lg-first { order: -1 !important; }
  .order-lg-last  { order: 13 !important; }
  .order-lg-0     { order: 0 !important; }
  .order-lg-1     { order: 1 !important; }
  .order-lg-2     { order: 2 !important; }
  .order-lg-3     { order: 3 !important; }
  .order-lg-4     { order: 4 !important; }
  .order-lg-5     { order: 5 !important; }
  .order-lg-6     { order: 6 !important; }
  .order-lg-7     { order: 7 !important; }
  .order-lg-8     { order: 8 !important; }
  .order-lg-9     { order: 9 !important; }
  .order-lg-10    { order: 10 !important; }
  .order-lg-11    { order: 11 !important; }
  .order-lg-12    { order: 12 !important; }
}

@media (min-width: 1200px) {
  .container-xl { max-width: 1140px; }

  .col-xl        { flex: 1 0 0%; }
  .col-xl-auto   { flex: 0 0 auto; width: auto; }
  .col-xl-1      { flex: 0 0 auto; width: 8.33333333%; }
  .col-xl-2      { flex: 0 0 auto; width: 16.66666667%; }
  .col-xl-3      { flex: 0 0 auto; width: 25%; }
  .col-xl-4      { flex: 0 0 auto; width: 33.33333333%; }
  .col-xl-5      { flex: 0 0 auto; width: 41.66666667%; }
  .col-xl-6      { flex: 0 0 auto; width: 50%; }
  .col-xl-7      { flex: 0 0 auto; width: 58.33333333%; }
  .col-xl-8      { flex: 0 0 auto; width: 66.66666667%; }
  .col-xl-9      { flex: 0 0 auto; width: 75%; }
  .col-xl-10     { flex: 0 0 auto; width: 83.33333333%; }
  .col-xl-11     { flex: 0 0 auto; width: 91.66666667%; }
  .col-xl-12     { flex: 0 0 auto; width: 100%; }

  .row-cols-xl-1 > * { flex: 0 0 auto; width: 100%; }
  .row-cols-xl-2 > * { flex: 0 0 auto; width: 50%; }
  .row-cols-xl-3 > * { flex: 0 0 auto; width: 33.33333333%; }
  .row-cols-xl-4 > * { flex: 0 0 auto; width: 25%; }
  .row-cols-xl-5 > * { flex: 0 0 auto; width: 20%; }
  .row-cols-xl-6 > * { flex: 0 0 auto; width: 16.66666667%; }

  .offset-xl-0  { margin-left: 0; }
  .offset-xl-1  { margin-left: 8.33333333%; }
  .offset-xl-2  { margin-left: 16.66666667%; }
  .offset-xl-3  { margin-left: 25%; }
  .offset-xl-4  { margin-left: 33.33333333%; }
  .offset-xl-5  { margin-left: 41.66666667%; }
  .offset-xl-6  { margin-left: 50%; }
  .offset-xl-7  { margin-left: 58.33333333%; }
  .offset-xl-8  { margin-left: 66.66666667%; }
  .offset-xl-9  { margin-left: 75%; }
  .offset-xl-10 { margin-left: 83.33333333%; }
  .offset-xl-11 { margin-left: 91.66666667%; }

  .order-xl-first { order: -1 !important; }
  .order-xl-last  { order: 13 !important; }
  .order-xl-0     { order: 0 !important; }
  .order-xl-1     { order: 1 !important; }
  .order-xl-2     { order: 2 !important; }
  .order-xl-3     { order: 3 !important; }
  .order-xl-4     { order: 4 !important; }
  .order-xl-5     { order: 5 !important; }
  .order-xl-6     { order: 6 !important; }
  .order-xl-7     { order: 7 !important; }
  .order-xl-8     { order: 8 !important; }
  .order-xl-9     { order: 9 !important; }
  .order-xl-10    { order: 10 !important; }
  .order-xl-11    { order: 11 !important; }
  .order-xl-12    { order: 12 !important; }
}

@media (min-width: 1400px) {
  .container-xxl { max-width: 1320px; }

  .col-xxl        { flex: 1 0 0%; }
  .col-xxl-auto   { flex: 0 0 auto; width: auto; }
  .col-xxl-1      { flex: 0 0 auto; width: 8.33333333%; }
  .col-xxl-2      { flex: 0 0 auto; width: 16.66666667%; }
  .col-xxl-3      { flex: 0 0 auto; width: 25%; }
  .col-xxl-4      { flex: 0 0 auto; width: 33.33333333%; }
  .col-xxl-5      { flex: 0 0 auto; width: 41.66666667%; }
  .col-xxl-6      { flex: 0 0 auto; width: 50%; }
  .col-xxl-7      { flex: 0 0 auto; width: 58.33333333%; }
  .col-xxl-8      { flex: 0 0 auto; width: 66.66666667%; }
  .col-xxl-9      { flex: 0 0 auto; width: 75%; }
  .col-xxl-10     { flex: 0 0 auto; width: 83.33333333%; }
  .col-xxl-11     { flex: 0 0 auto; width: 91.66666667%; }
  .col-xxl-12     { flex: 0 0 auto; width: 100%; }

  .row-cols-xxl-1 > * { flex: 0 0 auto; width: 100%; }
  .row-cols-xxl-2 > * { flex: 0 0 auto; width: 50%; }
  .row-cols-xxl-3 > * { flex: 0 0 auto; width: 33.33333333%; }
  .row-cols-xxl-4 > * { flex: 0 0 auto; width: 25%; }
  .row-cols-xxl-5 > * { flex: 0 0 auto; width: 20%; }
  .row-cols-xxl-6 > * { flex: 0 0 auto; width: 16.66666667%; }

  .offset-xxl-0  { margin-left: 0; }
  .offset-xxl-1  { margin-left: 8.33333333%; }
  .offset-xxl-2  { margin-left: 16.66666667%; }
  .offset-xxl-3  { margin-left: 25%; }
  .offset-xxl-4  { margin-left: 33.33333333%; }
  .offset-xxl-5  { margin-left: 41.66666667%; }
  .offset-xxl-6  { margin-left: 50%; }
  .offset-xxl-7  { margin-left: 58.33333333%; }
  .offset-xxl-8  { margin-left: 66.66666667%; }
  .offset-xxl-9  { margin-left: 75%; }
  .offset-xxl-10 { margin-left: 83.33333333%; }
  .offset-xxl-11 { margin-left: 91.66666667%; }

  .order-xxl-first { order: -1 !important; }
  .order-xxl-last  { order: 13 !important; }
  .order-xxl-0     { order: 0 !important; }
  .order-xxl-1     { order: 1 !important; }
  .order-xxl-2     { order: 2 !important; }
  .order-xxl-3     { order: 3 !important; }
  .order-xxl-4     { order: 4 !important; }
  .order-xxl-5     { order: 5 !important; }
  .order-xxl-6     { order: 6 !important; }
  .order-xxl-7     { order: 7 !important; }
  .order-xxl-8     { order: 8 !important; }
  .order-xxl-9     { order: 9 !important; }
  .order-xxl-10    { order: 10 !important; }
  .order-xxl-11    { order: 11 !important; }
  .order-xxl-12    { order: 12 !important; }
}