* { -o-box-sizing: border-box; box-sizing: border-box; }
html,body{ width:100%; height:100%; margin:0; padding:0;}
body{ color:rgba(255,255,255,0.5);font-family: 'Poppins', sans-serif; }
#ScrollPane{ position:relative; width:100%; height:100%; }
.scr,.pane{ position:relative; width:100%; height:100%;font-size:30px;}
b{font-size:80px; display:block; color:#ffffff; text-shadow:1px 1px 0 #bbbbbb,2px 2px 0 #cccccc,3px 3px 0 #cccccc,4px 4px 0 #cccccc,5px 5px 0 #cccccc,5px 5px 10px rgba(0,0,0,0.3); }



span{ display:block; text-align:center;}
.horiz { position:relative; width:100%; height:100%; }
.horiz .spane{ overflow:hidden; font-size:0; position:relative; width:100%; height:100%; white-space:nowrap;} 
.horiz .pane{ display:inline-block; width:100%; }
.ct{  position:absolute; top:0; left:0; width:100%; height:100%; display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}
 .an .ct{transform:translate3D(0,20px,0) rotateX(90deg) scale(0.5); opacity:0; transition:all 0.5s cubic-bezier(0.175, 0.885, 0.380, 1.470);}
.left,.right{ overflow:hidden; display:block; position:absolute; height:100%; width:50%; top:0; }
.right{ left:50%;}
.scrollup{ position:absolute; width:200px; top:10px; left:50%; margin-left:-100px; z-index:3000; font-size:20px; text-align:center;}
.scrolldown{ position:absolute; width:200px; bottom:10px; left:50%; margin-left:-100px; z-index:3000; font-size:20px; text-align:center;}
.an.visible .ct{ transform:translate3D(0,0,0) scale(1); opacity:1; }
#Helper{ position:fixed; background:#ffffff; bottom:0; left:0; padding:5px; z-index:3000; font-size:12px; color:#1e1e1e;}