/** CONTAINERS, ROW, COLUMN */
.container-fluid {
  /* Use the width defined for the project */
  max-width: 1440px;
  margin: auto;
}

.container {
  /* Add the width of the 12 columns to the gap between them. */
  max-width: calc(67px * 12 + 32px * 12);
  margin: auto;
}

/* Each row should be wrapped in a <div>. The number of columns inside a row should always add up to 12:
<div class="row">
    <div class="col-3">...</div> <!-- 25% -->
    <div class="col-9">...</div> <!-- 75% -->
</div> */

.row {
  display: flex;
  flex-wrap: wrap;
}

/* Use the padding defined for the project */
[class*="col-"],
.col {
  padding-right: 1rem;
  padding-left: 1rem;
}

/* Use .col when you don't have a fixed number of columns and you need the elements to be arranged next to each other. */
.col {
  width: fit-content;
}

/* ORDER */
.order-1 {
    -webkit-order: 1;
    -ms-order: 1;
    order: 1;
}
.order-2 {
    -webkit-order: 2;
    -ms-order: 2;
    order: 2;
}
.order-3 {
    -webkit-order: 3;
    -ms-order: 3;
    order: 3;
}
.order-4 {
    -webkit-order: 4;
    -ms-order: 4;
    order: 4;
}
.order-5 {
    -webkit-order: 5;
    -ms-order: 5;
    order: 5;
}
.order-6 {
    -webkit-order: 6;
    -ms-order: 6;
    order: 6;
}
.order-7 {
    -webkit-order: 7;
    -ms-order: 7;
    order: 7;
}
.order-8 {
    -webkit-order: 8;
    -ms-order: 8;
    order: 8;
}
.order-9 {
    -webkit-order: 9;
    -ms-order: 9;
    order: 9;
}
.order-10 {
    -webkit-order: 10;
    -ms-order: 10;
    order: 10;
}
.order-11 {
    -webkit-order: 11;
    -ms-order: 11;
    order: 11;
}
.order-12 {
    -webkit-order: 12;
    -ms-order: 12;
    order: 12;
}

/** RESPONSIVENESS **/

/* NOT MOBILE FIRST STYLES */

/* Extra small devices (phones, 576px and down) */
@media only screen and (max-width: 576px) {
    /* ---XS ZONE--- */
    .col-xs-none {
        width: 0;
    }

    .order-xs-reset {
        order: inherit;
    }

    .col-xs-1 {
        width: calc(8.33% * 1);
    }
    .col-xs-2 {
        width: calc(8.33% * 2);
    }
    .col-xs-3 {
        width: calc(8.33% * 3);
    }
    .col-xs-4 {
        width: calc(8.33% * 4);
    }
    .col-xs-5 {
        width: calc(8.33% * 5);
    }
    .col-xs-6 {
        width: calc(8.33% * 6);
    }
    .col-xs-7 {
        width: calc(8.33% * 7);
    }
    .col-xs-8 {
        width: calc(8.33% * 8);
    }
    .col-xs-9 {
        width: calc(8.33% * 9);
    }
    .col-xs-10 {
        width: calc(8.33% * 10);
    }
    .col-xs-11 {
        width: calc(8.33% * 11);
    }
    .col-xs-12 {
        width: calc(8.33% * 12);
    }

    .offset-xs-1 {
        margin-left: calc(8.33% * 1);
    }
    .offset-xs-2 {
        margin-left: calc(8.33% * 2);
    }
    .offset-xs-3 {
        margin-left: calc(8.33% * 3);
    }
    .offset-xs-4 {
        margin-left: calc(8.33% * 4);
    }
    .offset-xs-5 {
        margin-left: calc(8.33% * 5);
    }
    .offset-xs-6 {
        margin-left: calc(8.33% * 6);
    }
    .offset-xs-7 {
        margin-left: calc(8.33% * 7);
    }
    .offset-xs-8 {
        margin-left: calc(8.33% * 8);
    }
    .offset-xs-9 {
        margin-left: calc(8.33% * 9);
    }
    .offset-xs-10 {
        margin-left: calc(8.33% * 10);
    }
    .offset-xs-11 {
        margin-left: calc(8.33% * 11);
    }
    .offset-xs-12 {
        margin-left: calc(8.33% * 12);
    }
}

/* END NOT MOBILE FIRST STYLES */

/* Small devices (portrait tablets and large phones, 576px and up) */
@media only screen and (min-width: 576px) {
    /* ---S ZONE--- */
    .col-s-none {
        width: 0;
    }

    .order-s-reset {
        order: inherit;
    }

    .col-s-1 {
        width: calc(8.33% * 1);
    }
    .col-s-2 {
        width: calc(8.33% * 2);
    }
    .col-s-3 {
        width: calc(8.33% * 3);
    }
    .col-s-4 {
        width: calc(8.33% * 4);
    }
    .col-s-5 {
        width: calc(8.33% * 5);
    }
    .col-s-6 {
        width: calc(8.33% * 6);
    }
    .col-s-7 {
        width: calc(8.33% * 7);
    }
    .col-s-8 {
        width: calc(8.33% * 8);
    }
    .col-s-9 {
        width: calc(8.33% * 9);
    }
    .col-s-10 {
        width: calc(8.33% * 10);
    }
    .col-s-11 {
        width: calc(8.33% * 11);
    }
    .col-s-12 {
        width: calc(8.33% * 12);
    }

    .offset-s-1 {
        margin-left: calc(8.33% * 1);
    }
    .offset-s-2 {
        margin-left: calc(8.33% * 2);
    }
    .offset-s-3 {
        margin-left: calc(8.33% * 3);
    }
    .offset-s-4 {
        margin-left: calc(8.33% * 4);
    }
    .offset-s-5 {
        margin-left: calc(8.33% * 5);
    }
    .offset-s-6 {
        margin-left: calc(8.33% * 6);
    }
    .offset-s-7 {
        margin-left: calc(8.33% * 7);
    }
    .offset-s-8 {
        margin-left: calc(8.33% * 8);
    }
    .offset-s-9 {
        margin-left: calc(8.33% * 9);
    }
    .offset-s-10 {
        margin-left: calc(8.33% * 10);
    }
    .offset-s-11 {
        margin-left: calc(8.33% * 11);
    }
    .offset-s-12 {
        margin-left: calc(8.33% * 12);
    }

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    /* ---M ZONE--- */
    .col-m-none {
        width: 0;
    }

    .order-m-reset {
        order: inherit;
    }

    .col-m-1 {
        width: calc(8.33% * 1);
    }
    .col-m-2 {
        width: calc(8.33% * 2);
    }
    .col-m-3 {
        width: calc(8.33% * 3);
    }
    .col-m-4 {
        width: calc(8.33% * 4);
    }
    .col-m-5 {
        width: calc(8.33% * 5);
    }
    .col-m-6 {
        width: calc(8.33% * 6);
    }
    .col-m-7 {
        width: calc(8.33% * 7);
    }
    .col-m-8 {
        width: calc(8.33% * 8);
    }
    .col-m-9 {
        width: calc(8.33% * 9);
    }
    .col-m-10 {
        width: calc(8.33% * 10);
    }
    .col-m-11 {
        width: calc(8.33% * 11);
    }
    .col-m-12 {
        width: calc(8.33% * 12);
    }

    .offset-m-1 {
        margin-left: calc(8.33% * 1);
    }
    .offset-m-2 {
        margin-left: calc(8.33% * 2);
    }
    .offset-m-3 {
        margin-left: calc(8.33% * 3);
    }
    .offset-m-4 {
        margin-left: calc(8.33% * 4);
    }
    .offset-m-5 {
        margin-left: calc(8.33% * 5);
    }
    .offset-m-6 {
        margin-left: calc(8.33% * 6);
    }
    .offset-m-7 {
        margin-left: calc(8.33% * 7);
    }
    .offset-m-8 {
        margin-left: calc(8.33% * 8);
    }
    .offset-m-9 {
        margin-left: calc(8.33% * 9);
    }
    .offset-m-10 {
        margin-left: calc(8.33% * 10);
    }
    .offset-m-11 {
        margin-left: calc(8.33% * 11);
    }
    .offset-m-12 {
        margin-left: calc(8.33% * 12);
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    /* ---L ZONE--- */
    .col-none {
        width: 0;
    }

    .order-reset {
        order: inherit;
    }

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

    .offset-l-1 {
        margin-left: calc(8.33% * 1);
    }
    .offset-l-2 {
        margin-left: calc(8.33% * 2);
    }
    .offset-l-3 {
        margin-left: calc(8.33% * 3);
    }
    .offset-l-4 {
        margin-left: calc(8.33% * 4);
    }
    .offset-l-5 {
        margin-left: calc(8.33% * 5);
    }
    .offset-l-6 {
        margin-left: calc(8.33% * 6);
    }
    .offset-l-7 {
        margin-left: calc(8.33% * 7);
    }
    .offset-l-8 {
        margin-left: calc(8.33% * 8);
    }
    .offset-l-9 {
        margin-left: calc(8.33% * 9);
    }
    .offset-l-10 {
        margin-left: calc(8.33% * 10);
    }
    .offset-l-11 {
        margin-left: calc(8.33% * 11);
    }
    .offset-l-12 {
        margin-left: calc(8.33% * 12);
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    /* ---XL ZONE--- */
    .col-xl-none {
        width: 0;
    }

    .order-xl-reset {
        order: inherit;
    }

    .col-xl-1 {
        width: calc(8.33% * 1);
    }
    .col-xl-2 {
        width: calc(8.33% * 2);
    }
    .col-xl-3 {
        width: calc(8.33% * 3);
    }
    .col-xl-4 {
        width: calc(8.33% * 4);
    }
    .col-xl-5 {
        width: calc(8.33% * 5);
    }
    .col-xl-6 {
        width: calc(8.33% * 6);
    }
    .col-xl-7 {
        width: calc(8.33% * 7);
    }
    .col-xl-8 {
        width: calc(8.33% * 8);
    }
    .col-xl-9 {
        width: calc(8.33% * 9);
    }
    .col-xl-10 {
        width: calc(8.33% * 10);
    }
    .col-xl-11 {
        width: calc(8.33% * 11);
    }
    .col-xl-12 {
        width: calc(8.33% * 12);
    }

    .offset-xl-1 {
        margin-left: calc(8.33% * 1);
    }
    .offset-xl-2 {
        margin-left: calc(8.33% * 2);
    }
    .offset-xl-3 {
        margin-left: calc(8.33% * 3);
    }
    .offset-xl-4 {
        margin-left: calc(8.33% * 4);
    }
    .offset-xl-5 {
        margin-left: calc(8.33% * 5);
    }
    .offset-xl-6 {
        margin-left: calc(8.33% * 6);
    }
    .offset-xl-7 {
        margin-left: calc(8.33% * 7);
    }
    .offset-xl-8 {
        margin-left: calc(8.33% * 8);
    }
    .offset-xl-9 {
        margin-left: calc(8.33% * 9);
    }
    .offset-xl-10 {
        margin-left: calc(8.33% * 10);
    }
    .offset-xl-11 {
        margin-left: calc(8.33% * 11);
    }
    .offset-xl-12 {
        margin-left: calc(8.33% * 12);
    }
}

/* Orientation: Portrait / Landscape */
@media only screen and (orientation: landscape) {
  /* empty */
}