.split-container {
	width: 100%; height: 100%; position: relative;
}
.splitlayout {
	width: 100%; height: 100%; overflow: hidden; position: relative;
}
.side {
	top: 0px; width: 50%; height: 100%; text-align: center; overflow: hidden; position: absolute; z-index: 100; -webkit-backface-visibility: hidden;
}
.open-left .side {
	cursor: default;
}
.open-right .side {
	cursor: default;
}
.split-container .overlay {
	left: 0px; top: 0px; width: 100%; height: 100%; visibility: hidden; position: absolute; z-index: 499; opacity: 0;
}
.side-left .overlay {
	background: rgba(0, 0, 0, 0.7);
}
.side-right .overlay {
	background: rgba(0, 0, 0, 0.3);
}
.side-left {
	background: url("../images/pentagons.png") rgb(116, 37, 105); left: 0px; color: rgb(255, 255, 255);
}
.side-right {
	background: url("../images/pentagons.png") rgb(255, 255, 255); outline: rgb(255, 255, 255) solid 1px; right: 0px; color: rgb(51, 51, 51);
}
.intro-content {
	padding: 0px 1em; left: 50%; top: 50%; position: absolute; cursor: pointer; min-width: 50%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%);
}
.profile {
	margin: 10px -40px; height: 128px;
}
.profile img {
	max-width: 100%;
}
.intro-content h1 > span {
	display: block;
}
.intro-content h1 > span:first-child {
	font-weight: 300;
}
.intro-content h1 > span:nth-child(2) {
	padding: 0.8em; text-transform: uppercase; letter-spacing: 1px; font-size: 0.8em; margin-top: 0.5em; position: relative;
}
.intro-content h1 > span:nth-child(2)::before {
	background: rgb(255, 255, 255); left: 25%; top: 0px; width: 50%; height: 2px; position: absolute; content: "";
}
.side-right .intro-content h1 > span:nth-child(2)::before {
	background: rgb(51, 51, 51);
}
.back {
	border-radius: 50%; top: 2.6em; width: 50px; height: 50px; text-align: center; color: rgb(71, 163, 218); line-height: 44px; font-family: "Lato",sans-serif; font-size: 30px; display: block; visibility: hidden; position: absolute; z-index: 500; opacity: 0; pointer-events: none;
}
.mobile-layout .back {
	position: absolute;
}
.back-left {
	left: 12.5%; transform: translateX(-50%); -webkit-transform: translateX(-50%);
}
.back-right {
	right: 12.5%; color: rgb(255, 255, 255); transform: translateX(50%); -webkit-transform: translateX(50%);
}
.open-right .back-left {
	visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0.3s; -webkit-transition-delay: 0.3s;
}
.open-left .back-right {
	visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0.3s; -webkit-transition-delay: 0.3s;
}
.back:hover {
	color: rgb(221, 221, 221);
}
.page {
	top: 0px; width: 75% !important; height: auto !important; overflow: hidden; font-size: 1.4em; position: relative; min-height: 100%; -webkit-backface-visibility: hidden;
}
.page-right {
	background: rgb(236, 240, 241); outline: rgb(236, 240, 241) solid 5px; left: 25%; color: rgb(151, 168, 178); transform: translateX(100%); -webkit-transform: translateX(100%);
}
.open-right.splitlayout {
	background: rgb(236, 240, 241);
}
.page-left {
	background: rgb(34, 34, 34); outline: rgb(34, 34, 34) solid 5px; left: 0px; text-align: right; color: rgb(255, 255, 255); transform: translateX(-100%); -webkit-transform: translateX(-100%);
}
.open-left.splitlayout {
	background: rgb(51, 51, 51);
}
.page-inner {
	width: 100% !important; height: 100%; position: absolute;
}
.page-inner section {
	
}
.page-inner h2 {
	margin: 0px 0px 1em; font-size: 2.4em; font-weight: 300;
}
.page-inner p {
	font-size: 1.2em; font-weight: 300;
}
.side {
	transition:0.6s; -webkit-transition: all 0.6s;
}
.page {
	transition:0.6s; -webkit-transition: all 0.6s;
}
.split-container .overlay {
	transition:opacity 0.6s, visibility 0.1s 0.6s; -webkit-transition: opacity 0.6s, visibility 0.1s 0.6s;
}
.intro-content {
	transition:0.6s, top 0.6s; -webkit-transition: all 0.6s, top 0.6s;
}
.intro-content h1 {
	transition:opacity 0.3s; -webkit-transition: opacity 0.3s;
}
.back {
	transition:opacity 0.3s; -webkit-transition: opacity 0.3s;
}
.reset-layout .page {
	height: 100%; overflow: hidden; position: absolute;
}
.open-right.splitlayout .page-left {
	height: 100%; overflow: hidden; position: absolute;
}
.open-left.splitlayout .page-right {
	height: 100%; overflow: hidden; position: absolute;
}
.close-right.splitlayout .page-left {
	height: 100%; overflow: hidden; position: absolute;
}
.close-left.splitlayout .page-right {
	height: 100%; overflow: hidden; position: absolute;
}
.open-right.splitlayout .page-right {
	height: 100%; position: absolute;
}
.open-left.splitlayout .page-left {
	height: 100%; position: absolute;
}
.open-right .side-left .overlay {
	transition:opacity 0.6s; visibility: visible; opacity: 1; -webkit-transition: opacity 0.6s;
}
.open-left .side-right .overlay {
	transition:opacity 0.6s; visibility: visible; opacity: 1; -webkit-transition: opacity 0.6s;
}
.open-right .side-left {
	transform: translateX(-60%); -webkit-transform: translateX(-60%);
}
.open-right .side-right {
	z-index: 200; transform: translateX(-150%); -webkit-transform: translateX(-150%);
}
.close-right .side-right {
	z-index: 200;
}
.open-right .side-right .intro-content {
	transform: translateY(-50%) translateX(0%) scale(0.6); -webkit-transform: translateY(-50%) translateX(0%) scale(0.6);
}
.open-right .page-right {
	transform: translateX(0%); -webkit-transform: translateX(0%);
}
.open-left .side-right {
	transform: translateX(60%); -webkit-transform: translateX(60%);
}
.open-left .side-left {
	z-index: 200; transform: translateX(150%); -webkit-transform: translateX(150%);
}
.close-left .side-left {
	z-index: 200;
}
.open-left .side-left .intro-content {
	transform: translateY(-50%) translateX(-100%) scale(0.6); -webkit-transform: translateY(-50%) translateX(-100%) scale(0.6);
}
.open-left .codropsheader {
	transition:opacity 0.3s, visibility 0.1s 0.3s; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.3s, visibility 0.1s 0.3s;
}
.open-left .page-left {
	transform: translateX(0%); -webkit-transform: translateX(0%);
}
@media screen and (max-width:58em)
{
.intro-content .section-title {
	font-size: 30px;
}
.intro-content .double-title span {
	font-size: 15px;
}
}
@media screen and (max-width:49.43em)
{
.open-right .side-right {
	transform: translateX(-175%); -webkit-transform: translateX(-175%);
}
.open-right .side-left {
	transform: translateX(-100%); -webkit-transform: translateX(-100%);
}
.open-left .side-right {
	transform: translateX(100%); -webkit-transform: translateX(100%);
}
.open-left .side-left {
	transform: translateX(175%); -webkit-transform: translateX(175%);
}
.page {
	width: 88% !important;
}
.page-right {
	left: 0px; margin-left: 12%;
}
.page-left {
	
}
.intro-content {
	
}
.open-right .side-right .intro-content {
	top: 100%; opacity: 0; transform: translateY(-190px) translateX(-12.5%) scale(0.5); -webkit-transform: translateY(-150px) translateX(-12.5%) scale(0.5);
}
.open-left .side-left .intro-content {
	top: 100%; opacity: 0; transform: translateY(-190px) translateX(-87.5%) scale(0.5); -webkit-transform: translateY(-150px) translateX(-87.5%) scale(0.5);
}
.open-right .intro-content h1 {
	opacity: 0;
}
.open-left .intro-content h1 {
	opacity: 0;
}
.back-left {
	left: 6.25%;
}
.back-right {
	right: 6.25%;
}
}
@media screen and (max-height:41.12em)
{
.intro-content {
	transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%);
}
}
@media screen and (max-width:39.37em)
{
.intro-content .profile {
	width: auto; transform: scale(0.5); -webkit-transform: scale(0.5);
}
}