/***
 * The Main file, Main.css, contains all the core setup of your web page.
 * This includes CSS Reset or other basic configurations that will never need to be changed for your website.
 **/
.flex-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}
.flex-row > * {
  max-width: 100%;
  flex: 0 0 auto;
}

.row.row-thin,
.flex-row.row-thin {
  margin-left: -8px;
  margin-right: -8px;
}
.row.row-thin > *[class*="col-xs"],
.row.row-thin > *[class*="col-sm"],
.row.row-thin > *[class*="col-md"],
.row.row-thin > *[class*="col-lg"],
.flex-row.row-thin > *[class*="col-xs"],
.flex-row.row-thin > *[class*="col-sm"],
.flex-row.row-thin > *[class*="col-md"],
.flex-row.row-thin > *[class*="col-lg"] {
  padding-left: 8px;
  padding-right: 8px;
}

/**
 * Media Queries
 *
 * The order of media queries should go in the following order.
 *
 * MIN_WIDTH
 *  - Should go from smallest to largest pixel value.
 *  - ex. 768, 992, 1200, 1500
 *
 * MAX_WIDTH
 *  - Should go from largest to smallest pixel value.
 *  - ex. 1499, 1199, 991, 767
 *
 * MIN_WIDTH and MAX_WIDTH
 *  - Should go from smallest to largest pixel value in min range followed by largest max value.
 *  - 768 and 1199, 768 and 991, 992 and 1499, 992 and 1199
 */
@media only screen and (min-width: 768px) {
  .container {
    width: 100%;
    max-width: 1540px;
  }
}