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%}.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,.7)}.side-right .overlay{background:rgba(0,0,0,.3)}.side-left{left:0;background:#47a3da;color:#fff;outline:1px solid #47a3da}.side-right{right:0;background:#fff;color:#47a3da;outline:1px solid #fff}.intro-content{position:absolute;top:50%;left:50%;padding:0 1em;width:50%;cursor:pointer;-webkit-transform:translateY(-50%) translateX(-50%);transform:translateY(-50%) translateX(-50%)}.profile{margin:0 auto;width:140px;height:140px;border-radius:50%;background:#47a3da}.profile img{max-width:100%;border-radius:50%;opacity:.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:.5em;padding:.8em;text-transform:uppercase;letter-spacing:1px;font-size:.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:#47a3da}.back{position:fixed;top:2.6em;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{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:.3s;transition-delay:.3s;pointer-events:auto}.back:hover{color:#ddd}.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;background:#ecf0f1;color:#97a8b2;-webkit-transform:translateX(100%);transform:translateX(100%)}.page-left{left:0;outline:5px solid #34495e;background:#34495e;color:#fff;text-align:right;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.page-inner{padding:2em}.page-inner section{padding-bottom:1em}.page-inner h2{margin:0 0 1em;font-weight:300;font-size:2.4em}.page-inner p{font-weight:300;font-size:1.2em}.side,.page{-webkit-transition:-webkit-transform .5s ease-in-out;transition:transform .5s ease-in-out}.overlay{-webkit-transition:opacity .5s ease-in-out,visibility .1s .5s ease-in-out;transition:opacity .5s ease-in-out,visibility .1s .5s ease-in-out}.intro-content{-webkit-transition:-webkit-transform .5s ease-in-out,top .5s ease-in-out;transition:transform .5s ease-in-out,top .5s ease-in-out}.intro-content h1,.back{-webkit-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out}.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 .5s ease-in-out;transition:opacity .5s ease-in-out}.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(.6);transform:translateY(-50%) translateX(0%) scale(.6)}.open-right .page-right{-webkit-transform:translateX(0%);transform:translateX(0%)}.open-left .side-right{-webkit-transform:translateX(60%) scale(.5);transform:translateX(60%) scale(.5)}.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(.6);transform:translateY(-50%) translateX(-100%) scale(.6)}.open-left .codropsheader{opacity:0;visibility:hidden;-webkit-transition:opacity .3s,visibility .1s .3s;transition:opacity .3s,visibility .1s .3s}.open-left .page-left{-webkit-transform:translateX(0%);transform:translateX(0%)}@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(.5);transform:translateY(-150px) translateX(-12.5%) scale(.5)}.open-left .side-left .intro-content{top:100%;-webkit-transform:translateY(-150px) translateX(-87.5%) scale(.5);transform:translateY(-150px) translateX(-87.5%) scale(.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(-25%) translateX(-50%);transform:translateY(-25%) translateX(-50%)}}@media screen and (max-width:39.375em){.intro-content .profile{-webkit-transform:scale(.5);transform:scale(.5)}}@media screen and (max-width:320px){body{font-size:70%}}