:root {
  --width-container: 1170px;
  --gutter: 15px;
}

/*
.box-container
.box-row
.box-col
.box-small-X
.box-medium-X
.box-large-X 
*/
/* TEXT-ALIGN */
.text-center {
  text-align: center;
}

.text-center img {
  margin: 0 auto;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-right img {
  margin: 0 auto;
  margin-right: 0;
}

.text-justify {
  text-align: justify;
}

/* /TEXT-ALIGN */
/* IMG */
img {
  margin: 0;
  padding: 0;
  display: block;
  max-width: 100%;
}

img.cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

img.contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* /IMG */
.box-container {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  max-width: var(--width-container);
}

.box-container.box-full-width {
  max-width: 100%;
}

.box-row {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.box-col {
  position: relative;
  margin: 0;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.box-col.box-no-padding {
  padding-left: 0;
  padding-right: 0;
}

/* ALIGN */
.align-middle {
  align-items: center;
}

.align-stretch {
  align-items: stretch;
}

/* /ALIGN */
/* [BEGIN] SMALL */
@media screen and (max-width: 770px) {
  .flex-reverse {
    flex-direction: column-reverse;
  }

  .box-small-1 {
    min-width: calc(100% / 12 * 1);
    max-width: calc(100% / 12 * 1);
  }

  .box-small-2 {
    min-width: calc(100% / 12 * 2);
    max-width: calc(100% / 12 * 2);
  }

  .box-small-3 {
    min-width: calc(100% / 12 * 3);
    max-width: calc(100% / 12 * 3);
  }

  .box-small-4 {
    min-width: calc(100% / 12 * 4);
    max-width: calc(100% / 12 * 4);
  }

  .box-small-5 {
    min-width: calc(100% / 12 * 5);
    max-width: calc(100% / 12 * 5);
  }

  .box-small-6 {
    min-width: calc(100% / 12 * 6);
    max-width: calc(100% / 12 * 6);
  }

  .box-small-7 {
    min-width: calc(100% / 12 * 7);
    max-width: calc(100% / 12 * 7);
  }

  .box-small-8 {
    min-width: calc(100% / 12 * 8);
    max-width: calc(100% / 12 * 8);
  }

  .box-small-9 {
    min-width: calc(100% / 12 * 9);
    max-width: calc(100% / 12 * 9);
  }

  .box-small-10 {
    min-width: calc(100% / 12 * 10);
    max-width: calc(100% / 12 * 10);
  }

  .box-small-11 {
    min-width: calc(100% / 12 * 11);
    max-width: calc(100% / 12 * 11);
  }

  .box-small-12 {
    min-width: calc(100% / 12 * 12);
    max-width: calc(100% / 12 * 12);
  }

  .box-col.box-small-1 {
    min-width: calc(100% / 12 * 1 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 1 - (var(--gutter) * 2 ));
  }

  .box-col.box-small-2 {
    min-width: calc(100% / 12 * 2 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 2 - (var(--gutter) * 2 ));
  }

  .box-col.box-small-3 {
    min-width: calc(100% / 12 * 3 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 3 - (var(--gutter) * 2 ));
  }

  .box-col.box-small-4 {
    min-width: calc(100% / 12 * 4 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 4 - (var(--gutter) * 2 ));
  }

  .box-col.box-small-5 {
    min-width: calc(100% / 12 * 5 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 5 - (var(--gutter) * 2 ));
  }

  .box-col.box-small-6 {
    min-width: calc(100% / 12 * 6 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 6 - (var(--gutter) * 2 ));
  }

  .box-col.box-small-7 {
    min-width: calc(100% / 12 * 7 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 7 - (var(--gutter) * 2 ));
  }

  .box-col.box-small-8 {
    min-width: calc(100% / 12 * 8 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 8 - (var(--gutter) * 2 ));
  }

  .box-col.box-small-9 {
    min-width: calc(100% / 12 * 9 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 9 - (var(--gutter) * 2 ));
  }

  .box-col.box-small-10 {
    min-width: calc(100% / 12 * 10 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 10 - (var(--gutter) * 2 ));
  }

  .box-col.box-small-11 {
    min-width: calc(100% / 12 * 11 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 11 - (var(--gutter) * 2 ));
  }

  .box-col.box-small-12 {
    min-width: calc(100% / 12 * 12 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 12 - (var(--gutter) * 2 ));
  }
}
/* [END] SMALL */
/* [BEGIN] MEDIUM + LARGE */
@media screen and (min-width: 771px) {
  .box-medium-1 {
    min-width: calc(100% / 12 * 1);
    max-width: calc(100% / 12 * 1);
  }

  .box-medium-2 {
    min-width: calc(100% / 12 * 2);
    max-width: calc(100% / 12 * 2);
  }

  .box-medium-3 {
    min-width: calc(100% / 12 * 3);
    max-width: calc(100% / 12 * 3);
  }

  .box-medium-4 {
    min-width: calc(100% / 12 * 4);
    max-width: calc(100% / 12 * 4);
  }

  .box-medium-5 {
    min-width: calc(100% / 12 * 5);
    max-width: calc(100% / 12 * 5);
  }

  .box-medium-6 {
    min-width: calc(100% / 12 * 6);
    max-width: calc(100% / 12 * 6);
  }

  .box-medium-7 {
    min-width: calc(100% / 12 * 7);
    max-width: calc(100% / 12 * 7);
  }

  .box-medium-8 {
    min-width: calc(100% / 12 * 8);
    max-width: calc(100% / 12 * 8);
  }

  .box-medium-9 {
    min-width: calc(100% / 12 * 9);
    max-width: calc(100% / 12 * 9);
  }

  .box-medium-10 {
    min-width: calc(100% / 12 * 10);
    max-width: calc(100% / 12 * 10);
  }

  .box-medium-11 {
    min-width: calc(100% / 12 * 11);
    max-width: calc(100% / 12 * 11);
  }

  .box-medium-12 {
    min-width: calc(100% / 12 * 12);
    max-width: calc(100% / 12 * 12);
  }

  .box-col.box-medium-1 {
    min-width: calc(100% / 12 * 1 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 1 - (var(--gutter) * 2 ));
  }

  .box-col.box-medium-2 {
    min-width: calc(100% / 12 * 2 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 2 - (var(--gutter) * 2 ));
  }

  .box-col.box-medium-3 {
    min-width: calc(100% / 12 * 3 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 3 - (var(--gutter) * 2 ));
  }

  .box-col.box-medium-4 {
    min-width: calc(100% / 12 * 4 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 4 - (var(--gutter) * 2 ));
  }

  .box-col.box-medium-5 {
    min-width: calc(100% / 12 * 5 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 5 - (var(--gutter) * 2 ));
  }

  .box-col.box-medium-6 {
    min-width: calc(100% / 12 * 6 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 6 - (var(--gutter) * 2 ));
  }

  .box-col.box-medium-7 {
    min-width: calc(100% / 12 * 7 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 7 - (var(--gutter) * 2 ));
  }

  .box-col.box-medium-8 {
    min-width: calc(100% / 12 * 8 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 8 - (var(--gutter) * 2 ));
  }

  .box-col.box-medium-9 {
    min-width: calc(100% / 12 * 9 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 9 - (var(--gutter) * 2 ));
  }

  .box-col.box-medium-10 {
    min-width: calc(100% / 12 * 10 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 10 - (var(--gutter) * 2 ));
  }

  .box-col.box-medium-11 {
    min-width: calc(100% / 12 * 11 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 11 - (var(--gutter) * 2 ));
  }

  .box-col.box-medium-12 {
    min-width: calc(100% / 12 * 12 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 12 - (var(--gutter) * 2 ));
  }
}
/* [END] MEDIUM + LARGE */
/* [BEGIN] MEDIUM */
@media screen and (min-width: 771px) and (max-width: 1000px) {
  .box-medium-1 {
    min-width: calc(100% / 12 * 1);
    max-width: calc(100% / 12 * 1);
  }

  .box-medium-2 {
    min-width: calc(100% / 12 * 2);
    max-width: calc(100% / 12 * 2);
  }

  .box-medium-3 {
    min-width: calc(100% / 12 * 3);
    max-width: calc(100% / 12 * 3);
  }

  .box-medium-4 {
    min-width: calc(100% / 12 * 4);
    max-width: calc(100% / 12 * 4);
  }

  .box-medium-5 {
    min-width: calc(100% / 12 * 5);
    max-width: calc(100% / 12 * 5);
  }

  .box-medium-6 {
    min-width: calc(100% / 12 * 6);
    max-width: calc(100% / 12 * 6);
  }

  .box-medium-7 {
    min-width: calc(100% / 12 * 7);
    max-width: calc(100% / 12 * 7);
  }

  .box-medium-8 {
    min-width: calc(100% / 12 * 8);
    max-width: calc(100% / 12 * 8);
  }

  .box-medium-9 {
    min-width: calc(100% / 12 * 9);
    max-width: calc(100% / 12 * 9);
  }

  .box-medium-10 {
    min-width: calc(100% / 12 * 10);
    max-width: calc(100% / 12 * 10);
  }

  .box-medium-11 {
    min-width: calc(100% / 12 * 11);
    max-width: calc(100% / 12 * 11);
  }

  .box-medium-12 {
    min-width: calc(100% / 12 * 12);
    max-width: calc(100% / 12 * 12);
  }

  .box-col.box-medium-1 {
    min-width: calc(100% / 12 * 1 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 1 - (var(--gutter) * 2 ));
  }

  .box-col.box-medium-2 {
    min-width: calc(100% / 12 * 2 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 2 - (var(--gutter) * 2 ));
  }

  .box-col.box-medium-3 {
    min-width: calc(100% / 12 * 3 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 3 - (var(--gutter) * 2 ));
  }

  .box-col.box-medium-4 {
    min-width: calc(100% / 12 * 4 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 4 - (var(--gutter) * 2 ));
  }

  .box-col.box-medium-5 {
    min-width: calc(100% / 12 * 5 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 5 - (var(--gutter) * 2 ));
  }

  .box-col.box-medium-6 {
    min-width: calc(100% / 12 * 6 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 6 - (var(--gutter) * 2 ));
  }

  .box-col.box-medium-7 {
    min-width: calc(100% / 12 * 7 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 7 - (var(--gutter) * 2 ));
  }

  .box-col.box-medium-8 {
    min-width: calc(100% / 12 * 8 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 8 - (var(--gutter) * 2 ));
  }

  .box-col.box-medium-9 {
    min-width: calc(100% / 12 * 9 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 9 - (var(--gutter) * 2 ));
  }

  .box-col.box-medium-10 {
    min-width: calc(100% / 12 * 10 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 10 - (var(--gutter) * 2 ));
  }

  .box-col.box-medium-11 {
    min-width: calc(100% / 12 * 11 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 11 - (var(--gutter) * 2 ));
  }

  .box-col.box-medium-12 {
    min-width: calc(100% / 12 * 12 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 12 - (var(--gutter) * 2 ));
  }
}
/* [END] MEDIUM */
/* [BEGIN] LARGE */
@media screen and (min-width: 1001px) {
  .box-large-1 {
    min-width: calc(100% / 12 * 1);
    max-width: calc(100% / 12 * 1);
  }

  .box-large-2 {
    min-width: calc(100% / 12 * 2);
    max-width: calc(100% / 12 * 2);
  }

  .box-large-3 {
    min-width: calc(100% / 12 * 3);
    max-width: calc(100% / 12 * 3);
  }

  .box-large-4 {
    min-width: calc(100% / 12 * 4);
    max-width: calc(100% / 12 * 4);
  }

  .box-large-5 {
    min-width: calc(100% / 12 * 5);
    max-width: calc(100% / 12 * 5);
  }

  .box-large-6 {
    min-width: calc(100% / 12 * 6);
    max-width: calc(100% / 12 * 6);
  }

  .box-large-7 {
    min-width: calc(100% / 12 * 7);
    max-width: calc(100% / 12 * 7);
  }

  .box-large-8 {
    min-width: calc(100% / 12 * 8);
    max-width: calc(100% / 12 * 8);
  }

  .box-large-9 {
    min-width: calc(100% / 12 * 9);
    max-width: calc(100% / 12 * 9);
  }

  .box-large-10 {
    min-width: calc(100% / 12 * 10);
    max-width: calc(100% / 12 * 10);
  }

  .box-large-11 {
    min-width: calc(100% / 12 * 11);
    max-width: calc(100% / 12 * 11);
  }

  .box-large-12 {
    min-width: calc(100% / 12 * 12);
    max-width: calc(100% / 12 * 12);
  }

  .box-col.box-large-1 {
    min-width: calc(100% / 12 * 1 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 1 - (var(--gutter) * 2 ));
  }

  .box-col.box-large-2 {
    min-width: calc(100% / 12 * 2 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 2 - (var(--gutter) * 2 ));
  }

  .box-col.box-large-3 {
    min-width: calc(100% / 12 * 3 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 3 - (var(--gutter) * 2 ));
  }

  .box-col.box-large-4 {
    min-width: calc(100% / 12 * 4 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 4 - (var(--gutter) * 2 ));
  }

  .box-col.box-large-5 {
    min-width: calc(100% / 12 * 5 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 5 - (var(--gutter) * 2 ));
  }

  .box-col.box-large-6 {
    min-width: calc(100% / 12 * 6 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 6 - (var(--gutter) * 2 ));
  }

  .box-col.box-large-7 {
    min-width: calc(100% / 12 * 7 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 7 - (var(--gutter) * 2 ));
  }

  .box-col.box-large-8 {
    min-width: calc(100% / 12 * 8 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 8 - (var(--gutter) * 2 ));
  }

  .box-col.box-large-9 {
    min-width: calc(100% / 12 * 9 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 9 - (var(--gutter) * 2 ));
  }

  .box-col.box-large-10 {
    min-width: calc(100% / 12 * 10 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 10 - (var(--gutter) * 2 ));
  }

  .box-col.box-large-11 {
    min-width: calc(100% / 12 * 11 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 11 - (var(--gutter) * 2 ));
  }

  .box-col.box-large-12 {
    min-width: calc(100% / 12 * 12 - (var(--gutter) * 2 ));
    max-width: calc(100% / 12 * 12 - (var(--gutter) * 2 ));
  }
}
/* [END] LARGE */