body { margin: 0;}

ul li {list-style: none;}

#hp-container {
  display: block;
  position: relative;
  margin: 50px auto;
  width: 100%;
}

#hp-container img.header {
  display: block;
  max-width: 365px;
  margin: 0 auto;
}

#hp-container .hp-content {
  width: 1228px;
  margin: 80px auto 50px auto;
  overflow: hidden;
  position: relative;
}

#hp-container .hp-content h1 {
  color: #000;
  text-align: center;
  font-family: "Rufina", Helvetica, Arial, sans-serif;
  font-size: 50px;
  letter-spacing: 0.5px;
  line-height: 1.3;
  margin: 10px 0;
}

#hp-container .hp-content p {
  font-family: "WorkSans", Helvetica, Arial, sans-serif;
  text-align: center;
}

#hp-container .hp-content .flex-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 100px 0 0 0;
}

#hp-container .hp-content .flex-container .flex-item {
  padding: 0;
  position: relative;
  line-height: 1;
}

#hp-container .hp-content .flex-container .col-4 {
  width: 33.2%;
}

#hp-container .hp-content .flex-container .col-4 img {
  display: block;
  width: 90%;
  margin: 0 auto;
}

.footer {
  display: block;
  width: 100%;
  margin: 0 auto 60px auto;
}

@media only screen and (max-width:1228px){
  #hp-container .hp-content {
      width: 100%;
  }
}

@media only screen and (max-width:740px){
  #hp-container {
    margin: 20px auto;
  }

  #hp-container .hp-content {
      margin: 40px auto;
  }

  #hp-container .hp-content .flex-container {
     margin: 50px auto 0 auto;
 }
}

@media only screen and (max-width:480px){
  #hp-container .hp-content .flex-container .col-4 {
    width: 100%;
  }

  #hp-container .hp-content .flex-container .col-4 img {
    margin: 10px auto;
  }
}