.hero {
  width: 100%;
  background: url(https://s3.amazonaws.com/codebarbarian-images/laptops.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.hero a {
  color: black;
}

.hero .copy {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.85);
  padding-bottom: 50px;
}

.hero .intro {
  margin-left: auto;
  margin-right: auto;
  font-size: 3.5em;
  color: #0A5257;
  text-align: center;
  padding-top: 80px;
}

.hero .cta {
  margin-top: 50px;
  color: #232323;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.5em;
  text-align: center;
}

.hero .button {
  margin-top: 50px;
  width: 250px;
  margin-left: auto;
  margin-right: auto;
  font-size: 2em;
  background-color: #F0DB4F;
  text-align: center;
  border-radius: 4px;
  padding: 0.25em;
}

.pill {
  display: inline-block;
  width: 280px;
  background-color: #F0DB4F;
  margin-bottom: 1em;
  text-align: center;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  font-size: 2em;
  border-radius: 8px;
  margin-left: 60px;
}

.pill a {
  color: #232323;
}

.pill-axios {
  background-image: url("/assets/http-transparent.svg");
}

.pill-mongoose {
  background-image: url("/assets/mongoose-transparent.svg");
}

.pill-express {
  background-image: url("/assets/express-transparent.svg");
}

.pill-vue {
  background-image: url("/assets/vue-transparent.svg");
  background-size: 50% !important;
  background-repeat: no-repeat;
}

.pill-webpack {
  background-image: url("/assets/webpack-transparent.svg");
  background-size: 50% !important;
  background-repeat: no-repeat;
}

.pill-node {
  background-image: url("/assets/node-transparent.svg");
  background-size: 50% !important;
  background-repeat: no-repeat;
}

.pill-eslint {
  background-image: url("/assets/eslint-transparent.svg");
  background-size: 50% !important;
  background-repeat: no-repeat;
}

.pill-mocha {
  background-image: url("/assets/mocha-transparent.svg");
  background-size: 50% !important;
  background-repeat: no-repeat;
}

.pill-dark {
  background-color: #ddd;
  background-position: center;
  background-size: cover;
}

.row {
  width: 100%;
}

.row::after {
  content: '';
  clear: both;
  display: table;
}

.row .col-lg-4 {
  float: left;
  text-align: left;
  width: 33.3333333333%;
  margin-top: 20px;
}

.row img {
  width: auto;
}

@media (max-width: 1000px) {
  .pill {
    width: 49%;
    margin-left: 0px;
    font-size: 1.25em;
  }
}