@media (min-width: 500px) {
.col-sm-6 {
    width: 50%;
  }
}
html, body {
  height: 100%;
}

.hlj1-side {
  background:#FFF;
}

.hlj2-side {
  background:#000;
}

.split-pane {
  padding-top: 1em;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  height: 50%;
  min-height: 9em;
  font-size: 2em;
  color: white;
  font-family: 'Open Sans', sans-serif;
	font-weight:300;
;
}
@media(min-width: 500px) {
  .split-pane {
    padding-top: 2em;
    height: 100%;
  }
}
.split-pane > div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
}

.split-pane > div img {
	-moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  width:50%;
  height:50%;
}

.hlj1-side.split-pane img:hover, .split-pane img:hover {
  width:55%;
  height:55%;
}
.hlj2-side.split-pane img:hover, .split-pane img:hover {
  width:55%;
  height:55%;
}