.feature-item {
  background: #fff;
  border-radius: 7px;
  -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.2);
  text-align: center;
  margin: 1.5em auto;
  max-width: 510px;
  padding: 2em;
}
@media only screen and (min-width: 768px) {
  .feature-item {
    padding: 3.5em 4em 4em;
  }
}
@media only screen and (min-width: 992px) {
  .feature-item {
    padding: 2.5em 1.4em 2em;
  }
}
@media only screen and (min-width: 1400px) {
  .feature-item {
    padding: 3.5em 4em 4em;
  }
}
.feature-item h3 {
  color: #656263;
  font-size: 2.4rem;
  margin: .5em 0 .2em;
  text-align: center;
}
.feature-item h3 + p {
  font-size: 1.8rem;
  color: #656263;
  margin-bottom: .7em;
}
.feature-item .fa {
  font-size: 6rem;
}
.feature-item img {
  margin: 0px auto;
  display: block;
}
.feature-item p {
  font-size: 1.8rem;
}
.grey .feature-item {
  border: 10px solid #eeeff0;
}
.yellow .feature-item {
  border: 10px solid #f2ca04;
}
.yellow .feature-item .fa {
  color: #f2ca04;
}
.blue .feature-item {
  border: 10px solid #4fbfed;
}
.blue .feature-item .fa {
  color: #4fbfed;
}
@media only screen and (min-width: 1200px) {
  .large-grey .feature-item {
    border: 10px solid #eeeff0;
  }
}
@media only screen and (min-width: 1200px) {
  .large-yellow .feature-item {
    border: 10px solid #f2ca04;
  }
  .large-yellow .feature-item .fa {
    color: #f2ca04;
  }
}
@media only screen and (min-width: 1200px) {
  .large-blue .feature-item {
    border: 10px solid #4fbfed;
  }
  .large-blue .feature-item .fa {
    color: #4fbfed;
  }
}