/**
 * Background colors
 */
.transparent-bg {
  background-color: #000;
  color: #fff;
}

.black-bg {
  background-color: #000;
  color: #fff;
}

.grey-bg {
  background-color: #ccc;
}

.light-grey-bg {
  background-color: #e2e2e2;
}

.lighter-grey-bg {
  background-color: #eaeaea;
}

.white-bg {
  background-color: #fff;
}

/**
 * Text colors
 */
.default-text {
  color: #333;
}

.grey-text {
  color: #999;
}
.light-grey-text {
  color: #ccc;
}

.white-text {
  color: #fff;
}

/** button colors */
.btn-fill,
.btn-stroke:hover {
  background: #333;
  color: white;
  border-color: #333;
}

.btn-stroke,
.btn-fill:hover{
  background-color: #fff;
  color: #333;
}





/**
 * 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) {

  .transparent-bg-sm {
    background-color: #000;
    color: #fff;
  }

  .black-bg-sm {
    background-color: #000;
    color: #fff;
  }

  .grey-bg-sm {
    background-color: #ccc;
  }

  .light-grey-bg-sm {
    background-color: #eaeaea;
  }

  .white-bg-sm {
    background-color: #fff;
  }
}

@media only screen and (min-width: 992px) {

  .transparent-bg-md {
    background-color: #000;
    color: #fff;
  }

  .black-bg-md {
    background-color: #000;
    color: #fff;
  }

  .grey-bg-md {
    background-color: #ccc;
  }

  .light-grey-bg-md {
    background-color: #eaeaea;
  }

  .white-bg-md {
    background-color: #fff;
  }
}

@media only screen and (min-width: 1200px) {

  .transparent-bg-lg {
    background-color: #000;
    color: #fff;
  }

  .black-bg-lg {
    background-color: #000;
    color: #fff;
  }

  .grey-bg-lg {
    background-color: #ccc;
  }

  .light-grey-bg-lg {
    background-color: #eaeaea;
  }

  .white-bg-lg {
    background-color: #fff;
  }
}

@media only screen and (max-width: 767px) {

  .transparent-bg-xs {
    background-color: #000;
    color: #fff;
  }

  .black-bg-xs {
    background-color: #000;
    color: #fff;
  }

  .grey-bg-xs {
    background-color: #ccc;
  }

  .light-grey-bg-xs {
    background-color: #eaeaea;
  }

  .white-bg-xs {
    background-color: #fff;
  }
}