body {
  width: 100%;
  font-family: 'David Libre', serif;
}

header {
  width: 80%;
  height: 350px;
  margin: auto;
  display: flex;
  justify-content: center;
  background-color: #2BCDC0;
}

h1 {
  color: #ffffff;
  font-size: 350%;
  align-self: center;
  padding: 0 15% 0 15%;
}

b {
  font-weight: bold;
}

.flex-box {
  width: 80%;
  height: 350px;
  margin: auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #000000;
}

h2 {
  text-align: center;
  color: #ffffff;
  font-size: 250%;
  padding: 10px 0 15px 0;
}

p {
  text-align: center;
  color: #ffffff;
  font-family: 'Droid Sans', sans-serif;
}

.box {
  width: 17%;
}

#border1 {
  border-top: 25px solid #33A8DD;
}

#border2 {
  border-top: 25px solid #F46731;
}

#border3 {
  border-top: 25px solid #2BCDC0;
}

@media (max-width: 767px) {

  header {
    background-color: #33A8DD;
  }

  .flex-box {
    height: auto;
    background-color: #F7F5F6;
    flex-direction: column;
  }

  .box {
    width: 30%;
    margin: 30px 0 30px 0;
  }

  h2 {
    color: #000000;
  }

  p {
    color: #000000;
  }

}