@charset "utf-8";
.page,.side {
 top:0;
 -webkit-backface-visibility:hidden
}
.container,
body,
html {
 position:relative;
 height:100%
}
body {
 overflow-y:scroll;
 background:#FFF
}
.splitlayout {
 position:relative;
 overflow-x:hidden;
 min-height:100%;
 width:100%
}
.side {
 position:fixed;
 z-index:100;
 width:50%;
 height:100%;
 text-align:center
}
.close-left .side-left,
.close-right .side-right,
.open-left .side-left {
 z-index:200
}
.side-left {
 left:0;
 background:#47a3da;
 color:#fff
}
.side-right {
 right:0;
 background:#000;
 color:#47a3da
}
.page {
 position:relative;
 overflow:auto;
 min-height:100%;
 width:93%;
 height:auto;
 font-size:1.4em
}
.page-right {
 left:7%;
 -webkit-transform:translateX(100%);
 -ms-transform:translateX(100%);
 transform:translateX(100%)
}
.page-left {
 left:0;
 color:#000;
 text-align:right;
 -webkit-transform:translateX(-100%);
 -ms-transform:translateX(-100%);
 transform:translateX(-100%)
}
.page,
.side {
 -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
}
.main {
 -webkit-transition:all .5s ease 0s;
 transition:all .5s ease 0s
}
.back,
.main h1 {
 -webkit-transition:opacity .3s ease-in-out;
 transition:opacity .3s ease-in-out
}
.reset-layout .page,
.splitlayout.close-left .page-right,
.splitlayout.close-right .page-left,
.splitlayout.open-left .page-right,
.splitlayout.open-right .page-left {
 position:absolute;
 overflow:hidden;
 height:100%
}
.splitlayout.open-left .page-left,
.splitlayout.open-right .page-right {
 position:relative;
 overflow:auto;
 height:auto
}
.open-left .side-right .overlay,
.open-right .side-left .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(-61%) scale(.5);
 -ms-transform:translateX(-61%) scale(.5);
 transform:translateX(-61%) scale(.5)
}
.open-right .side-right {
 z-index:200;
 -webkit-transform:translateX(-186%);
 -ms-transform:translateX(-186%);
 transform:translateX(-186%)
}
.open-right .side-right .main {
 -webkit-transform:translateY(-50%) translateX(-80%) scale(.6);
 -ms-transform:translateY(-50%) translateX(-80%) scale(.6);
 transform:translateY(-50%) translateX(-80%) scale(.6);
 opacity:0;
 visibility:hidden
}
.open-right .page-right {
 -webkit-transform:translateX(0);
 -ms-transform:translateX(0);
 transform:translateX(0)
}
.open-left .side-right {
 -webkit-transform:translateX(61%) scale(.5);
 -ms-transform:translateX(61%) scale(.5);
 transform:translateX(61%) scale(.5)
}
.open-left .side-left {
 -webkit-transform:translateX(186%);
 -ms-transform:translateX(186%);
 transform:translateX(186%)
}
.open-left .side-left .main {
 -webkit-transform:translateY(-50%) translateX(80%) scale(.6);
 -ms-transform:translateY(-50%) translateX(80%) scale(.6);
 transform:translateY(-50%) translateX(80%) scale(.6);
 opacity:0;
 visibility:hidden
}
.open-left .page-left {
 -webkit-transform:translateX(0);
 -ms-transform:translateX(0);
 transform:translateX(0)
}
.main .section {
 height:0;
 visibility:hidden;
 width:100%;
 position:relative
}
.main .section.active {
 height:100%;
 visibility:visible
}
.typed-cursor {
 opacity:1;
 -webkit-animation:blink .7s infinite;
 -moz-animation:blink .7s infinite;
 animation:blink .7s infinite
}
@keyframes blink {
 0%,
 100% {
  opacity:1
 }
 50% {
  opacity:0
 }
}
@-webkit-keyframes blink {
 0%,
 100% {
  opacity:1
 }
 50% {
  opacity:0
 }
}
@-moz-keyframes blink {
 0%,
 100% {
  opacity:1
 }
 50% {
  opacity:0
 }
}