/* Pen-specific styles */
* {
  box-sizing: border-box;
}

html, body, div {
  height: 100%;
  font-family: 'Helvetica', 'Arial', sans-serif;
}


article {
  position: relative;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -80%);
}

/* Pattern styles */
div {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  height: 50%;
  padding: 1rem;
  
}

.left-half {
  background: #fafaf8;
  background-image: url('../img/holding-page/bg.jpg');
  background-size: 80%;
  background-repeat: no-repeat;
}

.right-half {
  background: #fcfcfa;
  background-image: url('../img/holding-page/bg-right.jpg');
  background-size: 100%;
  background-repeat: no-repeat;
  border-top: 1px solid #e5e5e5;
}

.left-half img, .right-half img {
  width:80%;
  max-width: 400px;
  display: block;
  margin:0px auto;

}

.left-half a {
  background: #294bac;
  padding: 18px 26px;
    display: inline-block;
    margin-top: 40px;
    color: #fff;
    text-decoration: none;
}

.right-half a {
  background: #fb633f;
  padding: 18px 26px;
    display: inline-block;
    margin-top: 40px;
    color: #fff;
    text-decoration: none;
    transition: .3s;
}
.right-half a:hover {
  background: #ea3f16;
  transition: .3s;
}

.left-half a:hover {
  background: #0e2f8e;
  transition: .3s;
}


@media only screen and (min-width: 800px) {

  div {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    height: 100%;
    padding: 1rem;
  }

  .right-half {
  
  border-left: 1px solid #e5e5e5;
}
}