body,html{margin:0;padding:0;position:relative;top:0;left:0;width:100%;height:100%}.wrapper{position:relative;top:0;width:100vw;height:100vh;max-width:100%;max-height:100%;background:#00bfff;overflow:hidden}.panel{position:absolute;width:100%;height:100%;top:0;left:0;bottom:0;right:0;margin:auto}.panel._active{z-index:10}.section,.trans-layer{position:absolute;width:100%;height:100%;top:36px;left:0;bottom:0;right:0}.trans-layer{background:#000;-webkit-transform:translateY(-100%) skew(0) rotate(0) scale(2);transform:translateY(-100%) skew(0) rotate(0) scale(2);border-radius:50%;transition:all .5s ease-in-out;transition-delay:.5s}._active .trans-layer{-webkit-transform:translateY(0) skew(0) rotate(0) scale(2);transform:translateY(0) skew(0) rotate(0) scale(2);transition-delay:0s}.section{-webkit-transform:translateY(100%);transform:translateY(100%);transition:all .5s ease-in-out;transition-delay:0s;background:#343434}._active .section{-webkit-transform:translateY(0);transform:translateY(0);transition-delay:.5s}.nav-dots{position:absolute;top:50%;right:10px;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:20;width:40px}.nav-dot{width:10px;height:10px;margin:20px auto;border-radius:50%;background:#fff;cursor:pointer;transition:all .3s ease-out}.nav-dot.active{background:red}.next-btn,.prev-btn{width:30px;height:30px;position:absolute;z-index:20;border:1px solid #fff;color:#fff;line-height:30px;text-align:center;font-size:24px;cursor:pointer}.next-btn{bottom:10px;right:14px}.prev-btn{top:10px;right:14px}