@media(min-width:992px)
{

	html, body, 
	.container {
		width: 100%;
		height: 100%;
	}

	body {
		overflow-y: scroll;
		background: #333;
	}

	.splitlayout {
		position: relative;
		min-height: 100%;
		width: 100%;
	}

	/* Intro sides */
	.side {
		position: fixed;
		top: 0;
		z-index: 100;
		width: 50%;
		height: 100%;
		text-align: center;
		-webkit-backface-visibility: hidden;
	}

	.open-left .side,
	.open-right .side {
		cursor: default;
	}

	.overlay {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 499;
		visibility: hidden;
		width: 100%;
		height: 100%;
		opacity: 0;
	}

	.side-left .overlay {
		background: rgba(0,0,0,0.7);
	}

	.side-right .overlay {
		background: rgba(0,0,0,0.3);
	}

	.side-left {
		left: 0;
		background: transparent;
		color: #fff;
		outline: 1px solid transparent; /* avoid gap */
	}

	/* Intro content, profile image and name, back button */
	.intro-content {
		position: absolute;
		top: 50%;
		left: 50%;
		padding: 0 1em;
		width: 50%;
		-webkit-transform: translateY(-50%) translateX(-50%);
		transform: translateY(-50%) translateX(-50%);
	}

	.back {
		position: fixed;
		top: 1.8em;
		z-index: 500;
		display: block;
		visibility: hidden;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		color: #47a3da;
		text-align: center;
		font-size: 22px;
		line-height: 44px;
		opacity: 0;
		pointer-events: none;
	}

	.mobile-layout .back { /* fixed positioning will make this not clickable after scrolling on some mobile devices */
		position: absolute;
	}

	.back-left {
		left: 12.5%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	.back-right {
		right: 12.5%;
		-webkit-transform: translateX(50%);
		transform: translateX(50%);
		color: #fff;
	}

	.open-right .back-left,
	.open-left .back-right {
		visibility: visible;
		opacity: 1;
		-webkit-transition-delay: 0.3s;
		transition-delay: 0.3s;
		pointer-events: auto;
	}

	.back:hover {
		color: #ddd;
	}

	/* Pages */
	.page {
		position: relative;
		top: 0;
		overflow: auto;
		min-height: 100%;
		width: 75%;
		height: auto;
		-webkit-backface-visibility: hidden;
	}

	.page-right {
		left: 25%;
		outline: 5px solid #ecf0f1; /* avoid rounding gaps */
		background: #ecf0f1;
		color: #97a8b2;
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}

	.splitlayout.open-right {
		background: #ecf0f1;
	}

	.page-left {
		left: 0;
		outline: 5px solid #34495e; /* avoid rounding gaps */
		background: #34495e;
		color: #fff;
		text-align: right;
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}

	.splitlayout.open-left {
		background: #34495e;
	}

	/* All transitions */
	.side,
	.page {
		-webkit-transition: -webkit-transform 0.6s;
		transition: transform 0.6s;
	}

	.overlay {
		-webkit-transition: opacity 0.6s, visibility 0.1s 0.6s;
		transition: opacity 0.6s, visibility 0.1s 0.6s;
	}

	.intro-content {
		-webkit-transition: -webkit-transform 0.6s, top 0.6s;
		transition: transform 0.6s, top 0.6s;
	}

	.intro-content h1,
	.back {
		-webkit-transition: opacity 0.3s;
		transition: opacity 0.3s;
	}

	/* Open and close */

	/* We need to set the position and overflow for the respective page scroll */
	.reset-layout .page,
	.splitlayout.open-right .page-left,
	.splitlayout.open-left .page-right,
	.splitlayout.close-right .page-left,
	.splitlayout.close-left .page-right {
		position: absolute;
		overflow: hidden;
		height: 100%;
	}

	.splitlayout.open-right .page-right,
	.splitlayout.open-left .page-left {
		position: relative;
		overflow: auto;
		height: auto;
	}

	.open-right .side-left .overlay,
	.open-left .side-right .overlay {
		visibility: visible;
		opacity: 1;
		-webkit-transition: opacity 0.6s;
		transition: opacity 0.6s;
	}

	/* Right side open */
	.open-right .side-left {
		-webkit-transform: translateX(-60%);
		transform: translateX(-60%);
	}

	.open-right .side-right {
		z-index: 200;
		-webkit-transform: translateX(-150%);
		transform: translateX(-150%);
	    box-shadow: 0 0 10px rgba(0,0,0,0.1);
	}

	.close-right .side-right {
		z-index: 200;
	}

	.open-right .side-right .intro-content {
		-webkit-transform: translateY(-50%) translateX(0%) scale(1);
		transform: translateY(-50%) translateX(0%) scale(1);
	}

	.open-right .page-right {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
	}

	/* Left side open */
	.open-left .side-right {
		-webkit-transform: translateX(60%);
		transform: translateX(60%);
	}

	.open-left .side-left {
		z-index: 200;
		-webkit-transform: translateX(150%);
		transform: translateX(150%);
	}

	.close-left .side-left {
		z-index: 200;
	}

	.open-left .side-left .intro-content {
		-webkit-transform: translateY(-50%) translateX(-100%) scale(0.6);
		transform: translateY(-50%) translateX(-100%) scale(0.6);
	}

	.open-left .codropsheader {
		opacity: 0;
		visibility: hidden;
		-webkit-transition: opacity 0.3s, visibility 0.1s 0.3s;
		transition: opacity 0.3s, visibility 0.1s 0.3s;
	}

	.open-left .page-left {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
	}

	.splitlayout .page-right{
	    position: absolute;
	    overflow: hidden;
	    height: 100%;
	}

	.splitlayout.open-right .page-right{
	    position: absolute;
	}

}

/* Media Queries */
@media screen and (max-width: 83em) {
	.intro-content { font-size: 60%; }
}

@media screen and (max-width: 58em) {
	body { font-size: 90%; }
}

.side-right {
	right: 0;
	background: #fff;
	color: #47a3da;
	outline: 1px solid #fff; /* avoid gap */
}

.profile {
	margin: 0 auto;
	width: 140px;
	height: 140px;
	border-radius: 50%;
}

.profile img {
	max-width: 100%;
	border-radius: 50%;
}

.intro-content h1 > span:first-child {
	font-weight: 500;
	font-size: 2em;
}

.intro-content h1 > span {
	display: block;
	white-space: nowrap;
}

.intro-content h1 > span:nth-child(2) {
	position: relative;
	padding: 0.8em;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 0.8em;
}