.row {
  margin: 0 auto;
  max-width: 1500px;
  position: relative;
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;

  /* extra styles*/
  /* end */
}

.col {
  box-sizing: border-box;
  float: left;
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
  flex: 0 0 auto;
  flex-basis: 100%;

}

@media (min-width: 540px) {
  .row {
    max-width: "540px";

  }
}
@media (min-width: 768px) {
  .row {
    max-width: "768px";
  }
}
@media (min-width: 992px) {
  .row {
    max-width: "992px";
   
  }
}
@media (min-width: 1200px) {
  .row {
    max-width: "1200px";
  }
}


@media (max-width: 540px) {
  .small-1 {
    width: calc(100% * (1 / 12));
    flex-basis: calc(100% * (1 / 12));
  }
}

@media (max-width: 540px) {
  .small-2 {
    width: calc(100% * (2 / 12));
    flex-basis: calc(100% * (2 / 12));
  }
}

@media (max-width: 540px) {
  .small-3 {
    width: calc(100% * (3 / 12));
    flex-basis: calc(100% * (3 / 12));
  }
}

@media (max-width: 540px) {
  .small-4 {
    width: calc(100% * (4 / 12));
    flex-basis: calc(100% * (4 / 12));
  }
}

@media (max-width: 540px) {
  .small-5 {
    width: calc(100% * (5 / 12));
    flex-basis: calc(100% * (5 / 12));
  }
}

@media (max-width: 540px) {
  .small-6 {
    width: calc(100% * (6 / 12));
    /* flex-basis: calc(100% * (6 / 12));*/
  }
}

@media (max-width: 540px) {
  .small-7 {
    width: calc(100% * (7 / 12));
    flex-basis: calc(100% * (7 / 12));
  }
}

@media (max-width: 540px) {
  .small-8 {
    width: calc(100% * (8 / 12));
    flex-basis: calc(100% * (8 / 12));
  }
}

@media (max-width: 540px) {
  .small-9 {
    width: calc(100% * (9 / 12));
    flex-basis: calc(100% * (9 / 12));
  }
}

@media (max-width: 540px) {
  .small-10 {
    width: calc(100% * (10 / 12));
    flex-basis: calc(100% * (10 / 12));
  }
}

@media (max-width: 540px) {
  .small-11 {
    width: calc(100% * (11 / 12));
    flex-basis: calc(100% * (11 / 12));
  }
}

@media (max-width: 540px) {
  .small-12 {
    width: calc(100% * (12 / 12));
    flex-basis: calc(100% * (12 / 12));
  }
}




@media (min-width: 540px) {
  .small-1 {
    width: calc(100% * (1 / 12));
    flex-basis: calc(100% * (1 / 12));
  }
}

@media (min-width: 540px) {
  .small-2 {
    width: calc(100% * (2 / 12));
    flex-basis: calc(100% * (2 / 12));
  }
}

@media (min-width: 540px) {
  .small-3 {
    width: calc(100% * (3 / 12));
    flex-basis: calc(100% * (3 / 12));
  }
}

@media (min-width: 540px) {
  .small-4 {
    width: calc(100% * (4 / 12));
  flex-basis: calc(100% * (4 / 12));
  }
}

@media (min-width: 540px) {
  .small-5 {
    width: calc(100% * (5 / 12));
    flex-basis: calc(100% * (5 / 12));
  }
}

@media (min-width: 540px) {
  .small-6 {
    width: calc(100% * (6 / 12));
   /* flex-basis: calc(100% * (6 / 12));*/
  }
}

@media (min-width: 540px) {
  .small-7 {
    width: calc(100% * (7 / 12));
    flex-basis: calc(100% * (7 / 12));
  }
}

@media (min-width: 540px) {
  .small-8 {
    width: calc(100% * (8 / 12));
    flex-basis: calc(100% * (8 / 12));
  }
}

@media (min-width: 540px) {
  .small-9 {
    width: calc(100% * (9 / 12));
    flex-basis: calc(100% * (9 / 12));
  }
}

@media (min-width: 540px) {
  .small-10 {
    width: calc(100% * (10 / 12));
    flex-basis: calc(100% * (10 / 12));
  }
}

@media (min-width: 540px) {
  .small-11 {
    width: calc(100% * (11 / 12));
    flex-basis: calc(100% * (11 / 12));
  }
}

@media (min-width: 540px) {
  .small-12 {
    width: calc(100% * (12 / 12));
    flex-basis: calc(100% * (12 / 12));
  }
}

@media (min-width: 768px) {
  .medium-1 {
    width: calc(100% * (1 / 12));
    flex-basis: calc(100% * (1 / 12));
  }
}

@media (min-width: 768px) {
  .medium-2 {
    width: calc(100% * (2 / 12));
    flex-basis: calc(100% * (2 / 12));
  }
}

@media (min-width: 768px) {
  .medium-3 {
    width: calc(100% * (3 / 12));
    flex-basis: calc(100% * (3 / 12));
  }
}

@media (min-width: 768px) {
  .medium-4 {
    width: calc(100% * (4 / 12));
    flex-basis: calc(100% * (4 / 12));
  }
}

@media (min-width: 768px) {
  .medium-5 {
    width: calc(100% * (5 / 12));
    flex-basis: calc(100% * (5 / 12));
  }
}

@media (min-width: 768px) {
  .medium-6 {
    width: calc(80% * (6 / 12));
    flex-basis: calc(80% * (6 / 12));
  }
}

@media (min-width: 768px) {
  .medium-7 {
    width: calc(100% * (7 / 12));
    flex-basis: calc(100% * (7 / 12));
  }
}

@media (min-width: 768px) {
  .medium-8 {
    width: calc(100% * (8 / 12));
    flex-basis: calc(100% * (8 / 12));
  }
}

@media (min-width: 768px) {
  .medium-9 {
    width: calc(100% * (9 / 12));
    flex-basis: calc(100% * (9 / 12));
  }
}

@media (min-width: 768px) {
  .medium-10 {
    width: calc(100% * (10 / 12));
    flex-basis: calc(100% * (10 / 12));
  }
}

@media (min-width: 768px) {
  .medium-11 {
    width: calc(100% * (11 / 12));
    flex-basis: calc(100% * (11 / 12));
  }
}

@media (min-width: 768px) {
  .medium-12 {
    width: calc(100% * (12 / 12));
    flex-basis: calc(100% * (12 / 12));
  }
}

@media (min-width: 992px) {
  .large-1 {
    width: calc(100% * (1 / 12));
    flex-basis: calc(100% * (1 / 12));
  }
}

@media (min-width: 992px) {
  .large-2 {
    width: calc(100% * (2 / 12));
    flex-basis: calc(100% * (2 / 12));
  }
}

@media (min-width: 992px) {
  .large-3 {
    width: calc(100% * (3 / 12));
    flex-basis: calc(100% * (3 / 12));
  }
}

@media (min-width: 992px) {
  .large-4 {
    width: calc(100% * (4 / 12));
    flex-basis: calc(100% * (4 / 12));
  }
}

@media (min-width: 992px) {
  .large-5 {
    width: calc(100% * (5 / 12));
    flex-basis: calc(100% * (5 / 12));
  }
}

@media (min-width: 992px) {
  .large-6 {
    width: calc(100% * (6 / 12));
    flex-basis: calc(100% * (6 / 12));
  }
}

@media (min-width: 992px) {
  .large-7 {
    width: calc(100% * (7 / 12));
    flex-basis: calc(100% * (7 / 12));
  }
}

@media (min-width: 992px) {
  .large-8 {
    width: calc(100% * (8 / 12));
    flex-basis: calc(100% * (8 / 12));
  }
}

@media (min-width: 992px) {
  .large-9 {
    width: calc(100% * (9 / 12));
    flex-basis: calc(100% * (9 / 12));
  }
}

@media (min-width: 992px) {
  .large-10 {
    width: calc(100% * (10 / 12));
    flex-basis: calc(100% * (10 / 12));
  }
}

@media (min-width: 992px) {
  .large-11 {
    width: calc(100% * (11 / 12));
    flex-basis: calc(100% * (11 / 12));
  }
}

@media (min-width: 992px) {
  .large-12 {
    width: calc(100% * (12 / 12));
    flex-basis: calc(100% * (12 / 12));
  }
}

@media (min-width: 1200px) {
  .giant-1 {
    width: calc(100% * (1 / 12));
    flex-basis: calc(100% * (1 / 12));
  }
}

@media (min-width: 1200px) {
  .giant-2 {
    width: calc(100% * (2 / 12));
    flex-basis: calc(100% * (2 / 12));
  }
}

@media (min-width: 1200px) {
  .giant-3 {
    width: calc(100% * (3 / 12));
    flex-basis: calc(100% * (3 / 12));
  }
}

@media (min-width: 1200px) {
  .giant-4 {
    width: calc(100% * (4 / 12));
    flex-basis: calc(100% * (4 / 12));
  }
}

@media (min-width: 1200px) {
  .giant-5 {
    width: calc(100% * (5 / 12));
    flex-basis: calc(100% * (5 / 12));
  }
}

@media (min-width: 1200px) {
  .giant-6 {
    width: calc(100% * (6 / 12));
    flex-basis: calc(100% * (6 / 12));
  }
}

@media (min-width: 1200px) {
  .giant-7 {
    width: calc(100% * (7 / 12));
    flex-basis: calc(100% * (7 / 12));
  }
}

@media (min-width: 1200px) {
  .giant-8 {
    width: calc(100% * (8 / 12));
    flex-basis: calc(100% * (8 / 12));
  }
}

@media (min-width: 1200px) {
  .giant-9 {
    width: calc(100% * (9 / 12));
    flex-basis: calc(100% * (9 / 12));
  }
}

@media (min-width: 1200px) {
  .giant-10 {
    width: calc(100% * (10 / 12));
    flex-basis: calc(100% * (10 / 12));
  }
}

@media (min-width: 1200px) {
  .giant-11 {
    width: calc(100% * (11 / 12));
    flex-basis: calc(100% * (11 / 12));
  }
}

@media (min-width: 1200px) {
  .giant-12 {
    width: calc(100% * (12 / 12));
    flex-basis: calc(100% * (12 / 12));
  }
}/*# sourceMappingURL=styles.css.map */