.tile-list {
  display: flex;
  margin-bottom: 50px;
}

.tile-list .featured-product {
  padding: 0;
  display: flex;
}

.tile-list .featured-product.white-text {
  color: #fff;
}

.tile-list .featured-product.black-text {
  color: #000;
}

.tile-list .featured-product.red-text {
  color: #ff0000;
}

.tile-list .featured-product.orange-text {
  color: #ffa500;
}

.tile-list .featured-product.green-text {
  color: #008000;
}

.tile-list .featured-product.yellow-text {
  color: #ffff00;
}

.tile-list .featured-product.blue-text {
  color: #0000ff;
}

.tile-list .featured-product.col-1-3 {
  height: 300px;
  margin-right: 6px;
}

.tile-list .featured-product.col-1-4 {
  padding: 0;
  height: 255px;
  margin-right: 0;
}

.tile-list .featured-product:last-child {
  margin-right: 0;
}

/*TODO: setup for each color option*/
.tile-list .featured-product.colored.purple {
  display: none;
  background: #5D4876;
}

.tile-list .product-tile {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  width: 100%;
  padding: 20px;
  justify-content: flex-end;
}

/*do not show an image if this is a solid color tile*/
.tile-list .featured-product.colored img {
  display: none;
}

.tile-list img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
}

.tile-list .product-heading {
  display: flex;
  /*color: #FFF;*/
  font-size: 16pt;
  z-index: 2;
  margin-top: 0;
  font-weight: bold;
}

.tile-list .product-tile-info {
  display: flex;
  /*color: #FFF;*/
  padding-bottom: 10px;
  z-index: 2;
  font-weight: bold;
}

.tile-list .product-tile-info.black-text{
   color: black;
}

.tile-list .col-1-3 .product-tile-info,
.tile-list .col-1-4 .product-tile-info {
  font-size: 14px;
}

.tile-list .button {
  z-index: 2;
  color: white;
  background: #ed8b00;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tile-list .col-1-3 .button {
  font-size: 12pt;
  height: 33px;
  width: 161px;
  border-radius: 16.5px;
}

.tile-list .col-1-4 .button {
  font-size: 10pt;
  height: 25px;
  width: 124px;
  border-radius: 12.5px;
}

.tile-list .button:hover {
  color: #d76b02;
  border: 2px solid;
  background: transparent;
}

.tile-list .button.colored {
  background: transparent;
}

.tile-list .button.colored.white-text {
  color: #fff;
  border: 2px solid #fff;
}

.tile-list .button.colored.white-text:hover {
  background: #fff;
  color: #000;
  border: none;
}

.tile-list .button.colored.black-text {
  color: #000;
  border: 2px solid #000;
}

.tile-list .button.colored.black-text:hover {
  background: #000;
  color: #fff;
  border: none;
}

.tile-list .button.colored.red-text {
  color: #ff0000;
  border: 2px solid #ff0000;
}

.tile-list .button.colored.red-text:hover {
  background: #ff0000;
  color: #fff;
  border: none;
}

.tile-list .button.colored.orange-text {
  color: #ffa500;
  border: 2px solid #ffa500;
}

.tile-list .button.colored.orange-text:hover {
  background: #ffa500;
  color: #fff;
  border: none;
}

.tile-list .button.colored.green-text {
  color: #008000;
  border: 2px solid #008000;
}

.tile-list .button.colored.green-text:hover {
  background: #008000;
  color: #fff;
  border: none;
}

.tile-list .button.colored.yellow-text {
  color: #ffff00;
  border: 2px solid #ffff00;
}

.tile-list .button.colored.yellow-text:hover {
  background: #ffff00;
  color: #fff;
  border: none;
}

.tile-list .button.colored.blue-text {
  color: #0000ff;
  border: 2px solid #0000ff;
}

.tile-list .button.colored.blue-text:hover {
  background: #0000ff;
  color: #fff;
  border: none;
}

.tile-list .button.colored:hover {
  background: #FFF;
}

.tile-list .purple-bg-gradient.button.colored:hover {
  color: #584975;
}

.tile-list .orange-bg-gradient.button.colored:hover {
  color: #f77f10;
}

.tile-list .blue-bg-gradient.button.colored:hover {
  color: #00416b;
}

.tile-list .blue-lt-bg-gradient.button.colored:hover {
  color: #0686c1;
}

.tile-list .blue-bg.button.colored:hover {
  color: #0686c1;
}

.tile-list .blue-radial-left-bg-gradient.button.colored:hover {
  color: #c4d7ee;
}

.tile-list .blue-radial-right-bg-gradient.button.colored:hover {
  color: #c4d7ee;
}

.tile-list .green-bg.button.colored:hover {
  color: #7a9a01;
}

.tile-list .green-bg-gradient.button.colored:hover {
  color: #729a40;
}

.tile-list .navy-bg.button.colored:hover {
  color: #00416b;
}

.tile-list .dark-orange-bg.button.colored:hover {
  color: #ff8d00;
}

.tile-list .purple-bg.button.colored:hover {
  color: #5d4777;
}

.tile-list .light-orange-bg.button.colored:hover {
  color: #f1b434;
}

.tile-list .off-white-bg.button.colored:hover {
  color: #f6f6f6;
}

/*MEDIA QUERY BREAKPOINTS*/
@media only screen and (min-width : 1025px) {
  .tile-list .col-1-3.featured-product {
    width: 376px;
  }

  .tile-list .col-1-4.featured-product {
    width: 285px;
  }
}

/*landscape tablet or laptop*/
@media only screen and (max-width : 1024px) {
  .tile-list .col-1-3.featured-product {
    height: 274px;
    margin-right: 0;
  }

  .tile-list .col-1-4.featured-product {
    height: 204px;
    margin-right: 0;
  }

  .tile-list .col-1-4 .product-heading {
    font-size: 14pt;
  }

  .tile-list .col-1-4 .product-tile-info {
    display: none;
  }
}

/*Tablet portrait styles*/
@media only screen and (max-width : 768px) {
  .tile-list {
    flex-wrap: wrap;
  }

  .tile-list .col-1-3.featured-product {
    margin-right: 0;
    height: 205px;
  }

  .tile-list .col-1-4.featured-product {
    width: 50%;
    height: 300px;
    margin-right: 0;
  }

  .tile-list .col-1-3 .product-heading {
    font-size: 12px;
  }

  .tile-list .col-1-4 .product-heading {
    font-size: 18pt;
  }

  .tile-list .col-1-3 .product-tile-info {
    display: none;
  }

  .tile-list .col-1-4 .product-tile-info {
    font-size: 12pt;
    display: flex;
  }

  .tile-list .col-1-3 .button {
    font-size: 10pt;
    height: 24px;
    width: 124px;
    border-radius: 12px;
  }

  .tile-list .col-1-4 .button {
    height: 33px;
    width: 161px;
    border-radius: 16.5px;
  }

  .tile-list .col-1-3 .product-heading {
    font-size: 14pt;
  }

  /*this is to remove padding on a grid wrapper*/
  .grid .tile-list {
    margin-right: -20px;
    margin-left: -20px;
  }
}

@media only screen and (max-width : 767px) {
  .tile-list .col-1-3.featured-product,
  .tile-list .col-1-4.featured-product {
    height: 300px;
  }

  .tile-list .col-1-3.featured-product {
    width: 50%;
  }
}

/*Large smartphone and down*/
@media only screen and (max-width : 425px) {
  .tile-list .col-1-3.featured-product,
  .tile-list .col-1-4.featured-product {
    width: 100%;
    margin-right: 0;
  }

  .tile-list .col-1-3 .product-heading,
  .tile-list .col-1-4 .product-heading {
    font-size: 18pt;
  }

  .tile-list .col-1-3 .product-tile-info,
  .tile-list .col-1-4 .product-tile-info {
    font-size: 12pt;
    display: flex;
  }

  .tile-list .col-1-3 .button,
  .tile-list .col-1-4 .button {
    height: 33px;
    width: 161px;
    border-radius: 16.5px;
  }
}