.page-split-wrap {
	width: 100vw;
	height: 100vh;
	z-index: 300;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #333;
}
.page-split-left,
.page-split-right {
	width: 50vw;
	height: 100vh;
	position: fixed;
	background-color: #FFF;
	top: 0;
	overflow: hidden;
	z-index: 400;
	box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
	-webkit-transition: all 500ms ease-in-out;
	-moz-transition: all 500ms ease-in-out;
	-o-transition: all 500ms ease-in-out;
	transition: all 500ms ease-in-out;
	transform: none;
}
@media screen and ( max-width: 800px ) {
	.page-split-left,
	.page-split-right {
		width: 10vw;
	}
}
.page-split-left {
	left: 0;
}
.page-split-right {
	right: 0;
}

.page-split-inside {
	position: absolute;
	top: 0;
	width: 100vw;
	height: 100%;
	overflow: hidden;
}

.page-split-middle {
	width: 50vw;
	height: 100%;
	overflow: auto;
	top: 0;
	left: 25vw;
	position: fixed;
	z-index: 350;
}
@media screen and ( max-width: 800px ) {
	.page-split-middle {
		width: 80vw;
		left: 10vw;
	}
}
.page-split-content {
	overflow: auto;
	max-height: 100vh;
}

.page-split-close {
	opacity: 0.3;
	width: 33px;
	height: 33px;
	position: absolute;
	top: 20px;
	right: 20px;
	color: #FFF;
	cursor: pointer;
	z-index: 375;
}
.page-split-close:hover {
	opacity: 1;
}
.page-split-close::before, .page-split-close::after {
	position: absolute;
	left: 15px;
	content: ' ';
	height: 33px;
	width: 2px;
	background-color: #EEE;
}
.page-split-close::before {
	transform: rotate(45deg);
}
.page-split-close::after {
	transform: rotate(-45deg);
}

.page-split-wrap.open .page-split-left {
	transform: translateX(-50%);
}
.page-split-wrap.open .page-split-right {
	transform: translateX(50%);
}