/* Global settings */
html {
  font-family: 'Poppins', sans-serif;
}
.wrapper {
  padding:0 68px;
}
.half {
  width: 50%;
  display: inline-block;
  vertical-align: top;
}
::selection {
  background:rgb(252,21,81);
  color:#fff;
}
@keyframes arrow {
  from {
    translate:0;
  }
  to {
    translate:5px 0 0;
  }
}
/* Header */
header {
  height: 100vh;
  background:url('../images/hero.jpg') center/cover;
}
header img {
  height: 60px;
  position: absolute;
  top:30px;
  left:30px;
}
hgroup {
  position: absolute;
  bottom:68px;
  color:#fff;
}
h1 {
  font-size: 80px;
  font-weight: 600;
}
.button {
  border:2px solid #fff;
  padding:15px 25px;
  display: inline-block;
  text-transform: uppercase;
  text-decoration: none;
  color:inherit;
  letter-spacing: 1px;
}
.button::before {
  content:'';
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 3.5px 6px 3.5px;
  border-color: transparent transparent #FFFFFF transparent;
  transform: rotate(90deg);
  display:inline-block;
  position: relative;
  top: -2px;
  left: -6px;
  animation: arrow ease-in-out 1s infinite alternate ;
}

/* Life change */
h2 {
  height: 380px;
  font-size: 35px;
  margin: 0;
  display: table-cell;
  vertical-align: middle;
}
.frame {
  background:#6bd3cc;
  height: 300px;
}
.frame::before, .module::before {
  content:'';
  width: 34px;
  height: 59px;
  display: block;
  margin: 50px 0 25px 0;
}
.frame::before {
  background:url('../images/illy1.png') center/cover;
}
.module {
  background:#ff4f42;
  height: 300px;
}
.module::before {
  background:url('../images/illy2.png') center/cover;
}
.life-change p {
  margin:0 0 50px 0;
  line-height: 30px;
}
.life-change > div:nth-of-type(2) {
  height: 680px;
  background:url('../images/phone3.jpg') center/cover;
}
/* Mini sections */
.mix-match .pic, .built-last .pic {
  height: 380px;
}
.mix-match .pic {
  background:url('../images/2.jpg') top/cover;
}
.built-last .pic {
  background:url('../images/03.jpg') center/cover;
}
h3 {
  margin-top: 100px;
  font-size: 26px;
}
.mix-match p, .built-last p {
  line-height: 30px;
  font-size: 14px;
  font-weight: lighter;
  width: 70%;
}

/* Footer */
footer {
  background:#000;
  padding:50px 30px;
}
footer > a {
  display: inline-block;
  width: 20%;
  vertical-align: middle;
  text-decoration: none;
  color:#fff;
}
footer > a img {
  width: 120px;
  display: inline-block;
  vertical-align: middle;
}
footer > div {
  width: 80%;
  text-align: right;
  display: inline-block;
  vertical-align: middle;
}
footer div a {
  text-decoration: none;
  text-transform: uppercase;
  color:#fff;
  font-size: 14px;
  letter-spacing: 1px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 20px;
}