@import url("https://fonts.googleapis.com/css?family=Lato");.main{height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(to bottom right,#eee,#aaa)}.text{margin:40px 0 20px;font-family:Lato,sans-serif}.lock{border-radius:5px;width:55px;height:45px;background-color:#333;animation:dip 2s;animation-delay:1.5s;position:relative}.lock:after,.lock:before{content:"";position:absolute;border-left:5px solid #333;height:20px;width:15px;left:calc(50% - 12.5px)}.lock:before{top:-30px;border:5px solid;border-color:#333 #333 transparent;border-radius:15px 15px 0 0;height:30px;animation:lock 2s,spin 2s}.lock:after{top:-10px;border-right:5px solid transparent;animation:spin 2s}@keyframes lock{0%{top:-45px}65%{top:-45px}to{top:-30px}}@keyframes spin{0%{transform:scaleX(-1);left:calc(50% - 30px)}65%{transform:scaleX(1);left:calc(50% - 12.5px)}to{transform:scaleX(1);left:calc(50% - 12.5px)}}@keyframes dip{0%{transform:translateY(0)}50%{transform:translateY(10px)}to{transform:translateY(0)}}.text2{margin:40px 0 20px;font-size:24px}.error,.text2{font-family:Lato,sans-serif;color:#333}.error{display:flex;align-items:center;justify-content:center;font-size:80px;animation:fadeIn 2s ease-in-out;animation-delay:1.5s}.error .zero{position:relative;width:70px;height:100px;background-color:#333;border-radius:50%;margin:0 10px}.error .zero:after,.error .zero:before{content:"";position:absolute;border:10px solid #eee;border-radius:50%;width:60px;height:60px;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes fadeIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}