.split-panes 
{
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  position: absolute;
}

.split-panes > .split-handler 
{
  background-color: transparent;
  position: absolute;
  z-index: 999;
}

/* Horizontal */ 

.split-panes.horizontal > .split-handler
{
  width: 24px;
  margin-left: -10px;
  top: 0px; 
  left: 50%;
  bottom: 0px;
  cursor: ew-resize;
  background-image: url("../images/horizontal-resize.png");
}

.split-panes.horizontal > .split-pane1,
.split-panes.horizontal > .split-pane2
{
  position: absolute;
  height: 100%;
}

.split-panes.horizontal > .split-pane1
{
  width: 50%; 
}

.split-panes.horizontal > .split-pane2
{
  left: 50%;
  right: 0px;
  border-left: 4px solid #424242;
}


/* Vertical */

.split-panes.vertical > .split-handler
{
  height: 24px;
  margin-top: -10px;
  top: 50%; 
  left: 0px;
  right: 0px;
  cursor: ns-resize;
  background-image: url("../images/vertical-resize.png");
}

.split-panes.vertical > .split-pane1,
.split-panes.vertical > .split-pane2
{
  position: absolute;
  width: 100%;
}

.split-panes.vertical > .split-pane1
{
  height: 50%; 
}

.split-panes.vertical > .split-pane2
{
  top: 50%;
  bottom: 0px;
  border-top: 4px solid #424242;
}

.split-handler {
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

.box-container {
  border: 4px solid #424242;
  overflow: hidden;
  position: relative;
  height: 400px;
  width: 100%;
}

.cover-image {
        background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
}


.full-height {
    height: 100%;
}

.clear {
  margin-top: 30px;
}