@import url(https://fonts.googleapis.com/css?family=Lato:400,700);

body {
  font-family: "Lato", Helvetica, Arial, sans-serif;
}

.main {
  padding-top: 5em;
  padding-bottom: 5em;
  background-image: linear-gradient(
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 0.5)
    ), url('hero.jpg');
  background-origin: padding-box;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

.contact {
  padding-top: 2em;
  padding-bottom: 5em;
}

.wrapper {
  display: table;
  height: 100%;
  width: 100%;
}

.contents {
  display: table-cell;
  vertical-align: middle;
}

.main > .wrapper > .contents > h1 {
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
}

.main > .wrapper > .contents > h4 {
  color: #ffffff;
  font-weight: 400;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .main {
    height: 50vh;
  }
}