html, body, .container { position: relative; width: 100%; height: 100%; }
body { overflow-y: scroll; background: #333; }
.splitlayout { position: relative; overflow-x: hidden; 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: #3f3f3d; color: #c2e5e1; }
.side-right { right: 0; background: #85ccc4; color: #3f3f3d; }
/* Intro content, profile image and name, back button */
.intro-content { position: absolute; top: 0; bottom: 0; left: 0; padding: 0; width: 100%; height: 100%; display: table; cursor: pointer; -webkit-transform: translateY(0) translateX(0); transform: translateY(0) translateX(0); }
.profile { margin: 0 auto; width: 140px; height: 140px; border-radius: 50%; background: #3f3f3d; }
.profile img { max-width: 100%; border-radius: 50%; opacity: 0.6; }
.intro-content h1 > span { display: block; white-space: nowrap; }
.intro-content h1 > span:first-child { font-weight: 300; font-size: 2em; }
.intro-content h1 > span:nth-child(2) { position: relative; margin-top: 0.5em; padding: 0.8em; text-transform: uppercase; letter-spacing: 1px; font-size: 0.8em; }
.intro-content h1 > span:nth-child(2):before { position: absolute; top: 0; left: 25%; width: 50%; height: 2px; background: #fff; content: ''; }
.side-right .intro-content h1 > span:nth-child(2):before { background: #3f3f3d; }
.back { position: fixed; top: 2.6em; z-index: 500; display: block; visibility: hidden; width: 50px; height: 50px; border-radius: 50%; color: #3f3f3d; 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; text-decoration: none; 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; font-size: 1.4em; -webkit-backface-visibility: hidden; }
.page-right { left: 25%; outline: 5px solid #ecf0f1; /* avoid rounding gaps */
background: #ecf0f1 url('../img/bg-right.gif') no-repeat 100% 100%; color: #4e5252; -webkit-transform: translateX(100%); transform: translateX(100%); }
.page-left { left: 0; outline: 5px solid #85ccc4; /* avoid rounding gaps */
background: #85ccc4 url('../img/bg-left.gif') no-repeat 0 100%; color: #222; text-shadow: 1px 1px 0 rgba(255,255,255,.2); text-align: right; -webkit-transform: translateX(-100%); transform: translateX(-100%); }
/* Inner page content */
.page-inner { padding: 2em; }
.page-inner section { padding-bottom: 1em; }
.page-inner h2 { margin: 0 0 1em 0; font-weight: 300; font-size: 2.4em; }
.page-inner p { font-weight: 300; font-size: 1.2em; }
/* table-clients */
/* table-clients */
.table-clients { text-align: left; }
.table-clients table { width: 100%; border: 2px solid #77b7b0; border-width: 2px 0; border-collapse: collapse; background-color: rgba(255,255,255,.1); }
.table-clients tr { }
.table-clients tr > td { padding: 8px 3px; border-bottom: 1px solid #77b7b0; }
.table-clients tr > td >i::before { font-family: 'assyrea'; font-size: 18px; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; content: "\e078"; margin-right: .3em; vertical-align: baseline; color: #222; }
/* All transitions */
.side, .page { -webkit-transition: -webkit-transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out; }
.overlay { -webkit-transition: opacity 0.5s ease-in-out, visibility 0.1s 0.5s ease-in-out; transition: opacity 0.5s ease-in-out, visibility 0.1s 0.5s ease-in-out; }
.intro-content { -webkit-transition: -webkit-transform 0.5s ease-in-out, top 0.5s ease-in-out; transition: transform 0.5s ease-in-out, top 0.5s ease-in-out; }
.intro-content h1, .back { -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; font-size: 3.8em; }
.intro-content h1 { display: table-cell; vertical-align: middle; }
.back { font-size: 3em; }
/* 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: fixed; z-index: 119; top: 0; bottom: 0; }
.open-right .side-left .overlay, .open-left .side-right .overlay { visibility: visible; opacity: 1; -webkit-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; }
/* Right side open */
.open-right .side-left { -webkit-transform: translateX(-60%) scale(.5); transform: translateX(-60%) scale(.5); }
.open-right .side-right { z-index: 200; -webkit-transform: translateX(-150%); transform: translateX(-150%); }
.close-right .side-right { z-index: 200; }
.open-right .side-right .intro-content { -webkit-transform: translateY(-50%) translateX(0%) scale(0); transform: translateY(-50%) translateX(0%) scale(0); }
.open-right .page-right { -webkit-transform: translateX(0%) scale(1); transform: translateX(0%) scale(1); }
.open-right .page-right ul > li { padding: 8px 0; }
/* Left side open */
.open-left .side-right { -webkit-transform: translateX(60%) scale(.0); transform: translateX(60%) scale(.0); }
.open-left .side-left { z-index: 200; -webkit-transform: translateX(150%) scale(.0); transform: translateX(150%) scale(.0); }
.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 .page-left { -webkit-transform: translateX(0%); transform: translateX(0%); }
/* Media Queries */
@media screen and (max-width:83em) {
	.intro-content { font-size: 60%; }
}
@media screen and (max-width:58em) {
	body { font-size: 90%; }
}
@media screen and (max-width:49.4375em) {
	.open-right .side-right { -webkit-transform: translateX(-175%); transform: translateX(-175%); }
	.open-right .side-left { -webkit-transform: translateX(-100%) scale(.7); transform: translateX(-100%) scale(.7); }
	.open-left .side-right { -webkit-transform: translateX(100%) scale(.7); transform: translateX(100%) scale(.7); }
	.open-left .side-left { -webkit-transform: translateX(175%); transform: translateX(175%); }
	.page { width: 100%; }
	.page-right { left: 0; padding-left: 15%; }
	.page-left { padding-right: 15%; }
	.intro-content { width: 100%; }
	.open-right .side-right .intro-content { top: 100%; -webkit-transform: translateY(-150px) translateX(-12.5%) scale(0.5); transform: translateY(-150px) translateX(-12.5%) scale(0.5); }
	.open-left .side-left .intro-content { top: 100%; -webkit-transform: translateY(-150px) translateX(-87.5%) scale(0.5); transform: translateY(-150px) translateX(-87.5%) scale(0.5); }
	.open-right .intro-content h1, .open-left .intro-content h1 { opacity: 0; }
	.back-left { left: 6.25%; }
	.back-right { right: 6.25%; }
}
@media screen and (max-width:42.5em) {
	body { font-size: 80%; }
	.intro-content { font-size: 50%; }
}
@media screen and (max-height:41.125em) {
	.intro-content { -webkit-transform: translateY(0) translateX(0); transform: translateY(0) translateX(0); }
}
@media screen and (max-width:39.375em) {
	.intro-content .profile { -webkit-transform: scale(0.5); transform: scale(0.5); }
}
@media screen and (max-width:320px) {
	body { font-size: 70%; }
}
@media (max-width:767px) {
	/* contents */
	.page-left { background-size: 75%; background-position: -100% 100%; }
	.page-right { background-size: 75%; background-position: 100% 100%; }
	.page-inner h2 { font-size: 1.8em; }
	.page-inner p { font-size: 1em; }
	.page-inner ul { padding: 0 0 0 1.5em; }
}