.wrap {
  width: 90%;
  max-width: 1920px;
  margin: 0 auto;
}

.col-12 {
  width: calc(100% / 12 * 12);
  padding: 0 0.5rem;
  box-sizing: border-box;
}
.col-11 {
  width: calc(100% / 12 * 11);
  padding: 0 0.5rem;
  box-sizing: border-box;
}
.col-10 {
  width: calc(100% / 12 * 10);
  padding: 0 0.5rem;
  box-sizing: border-box;
}
.col-9 {
  width: calc(100% / 12 * 9);
  padding: 0 0.5rem;
  box-sizing: border-box;
}
.col-8 {
  width: calc(100% / 12 * 8);
  padding: 0 0.5rem;
  box-sizing: border-box;
}
.col-7 {
  width: calc(100% / 12 * 7);
  padding: 0 0.5rem;
  box-sizing: border-box;
}
.col-6 {
  width: calc(100% / 12 * 6);
  padding: 0 0.5rem;
  box-sizing: border-box;
}
.col-5 {
  width: calc(100% / 12 * 5);
  padding: 0 0.5rem;
  box-sizing: border-box;
}
.col-4 {
  width: calc(100% / 12 * 4);
  padding: 0 0.5rem;
  box-sizing: border-box;
}
.col-3 {
  width: calc(100% / 12 * 3);
  padding: 0 0.5rem;
  box-sizing: border-box;
}
.col-2 {
  width: calc(100% / 12 * 2);
  padding: 0 0.5rem;
  box-sizing: border-box;
}
.col-1 {
  width: calc(100% / 12 * 1);
  padding: 0 0.5rem;
  box-sizing: border-box;
}

.order-1{
  order: 1;
}
.order-2{
  order:2;
}
.order-3{
  order:3;
}

.order-4{
  order:4;
}


.row {
  display: flex;
}

.d-flex {
  display: flex !important;
}
.flex-wrap {
  flex-wrap: wrap;
}
.justify-content-center {
  justify-content: center !important;
}
.justify-content-between {
  justify-content: space-between !important;
}
.justify-content-start {
  justify-content: flex-start !important;
}
.justify-content-end {
  justify-content: flex-end !important;
}
.justify-content-around {
  justify-content: space-around !important;
}
.align-items-center {
  align-items: center !important;
}
.align-items-start {
  align-items: start !important;
}
.align-self-end {
  align-self: flex-end;
}
.align-items-end {
  align-items: flex-end;
}

.flex-column {
  flex-direction: column;
}

.flex-column-reverse{
  flex-direction: column-reverse;
}
.relative{
  position: relative !important;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 667px) {
  .flex-sm-column-reverse{
    flex-direction: column-reverse;
  }
}


@media only screen and (min-device-width: 668px) and (max-device-width: 1200px) {
  .flex-md-column-reverse{
    flex-direction: column-reverse;
  }
}