* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

.layout {
  position: relative;
  height: 100vh;
}

/* 62% split */
.white-side {
  position: absolute;
  left: 0;
  top: 0;
  width: 58%;
  height: 100%;
  background: url(../../5.gif) center left repeat #ffffff;
}

.white-overlay {
  position: absolute;
  right: 0;
  top: 0;
  width: 200px;
  height: 100%;
  background: url(../../5.gif) top right repeat;
}

.black-side {
  position: absolute;
  right: 0;
  top: 0;
  width: 42%;
  height: 100%;
  background: url(../../4.gif) center left repeat #000000;  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* Black content box centered vertically on the split */
.black-box {
  position: absolute;
  left: 62%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 270px;
  height: 400px;
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* Text anchored at 62% vertical line */
.center-text {
  position: absolute; width:100%;

  top: 50%;
  transform: translate(0, -50%);
  text-align: center;
  color: #000;
  z-index: 20;  color: #000;

  text-shadow:
    1px 0 0 white,
   -1px 0 0 white,
    0 1px 0 white,
    0 -1px 0 white;
}


h1 {
  font-size: 55px;
  margin-bottom: 10px;
}

h2 {
 text-indent:300px; font-size: 19px;
}