@import url(https://fonts.googleapis.com/css?family=Comfortaa);*{-webkit-box-sizing:border-box;box-sizing:border-box}body,html{margin:0;padding:0;height:100%;overflow:hidden}.container{z-index:1;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);text-align:center;padding:10px;min-width:300px}.container div{display:inline-block}.container .lock{opacity:1}.container h1{font-family:Comfortaa,cursive;font-size:100px;text-align:center;color:#9f9797;font-weight:100;margin:0}.container p{color:#9f9797}.lock{-webkit-transition:.5s ease;transition:.5s ease;position:relative;overflow:hidden;opacity:0}.lock.generated{-webkit-transform:scale(.5);transform:scale(.5);position:absolute;-webkit-animation:move 2s linear;animation:move 2s linear;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.lock :after{content:"";background:#a74006;opacity:.3;display:block;position:absolute;height:100%;width:50%;top:0;left:0}.lock .bottom{background:#d68910;height:40px;width:60px}.lock .bottom,.lock .top{display:block;position:relative;margin:0 auto}.lock .top{height:60px;width:50px;border-radius:50%;border:10px solid #fff;top:30px}.lock .top:after{padding:10px;border-radius:50%}@-webkit-keyframes move{to{top:100%}}@keyframes move{to{top:100%}}@media (max-width:420px){.container{-webkit-transform:translate(-50%,-50%) scale(.8);transform:translate(-50%,-50%) scale(.8)}.lock.generated{-webkit-transform:scale(.3);transform:scale(.3)}}