@import url("https://fonts.googleapis.com/css?family=Nunito:400,600,700");.login-wrapper{font-family:Nunito,sans-serif}.login-container{height:200vh;background-image:url(https://images.unsplash.com/photo-1538137524007-21e48fa42f3f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ac9fa0975bd2ebad7afd906c5a3a15ab&auto=format&fit=crop&w=1834&q=80);background-size:cover;background-position:50%;background-repeat:no-repeat}.login-modal{position:fixed;left:0;bottom:0;width:100%;height:60px;background:rgba(51,51,51,.5);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:.4s;z-index:1000}.login-modal.is-open{height:100%;background:rgba(51,51,51,.85)}.login-modal.is-open .modal-button{opacity:0}.login-modal.is-open .modal-container{opacity:1;transition-duration:.6s;pointer-events:auto;transform:translateY(0) scale(1)}.login-modal.is-open .modal-right img{transform:scale(1)}.login-modal.is-open .modal-left{transform:translateY(0);opacity:1;transition-delay:.1s}.modal-container{display:flex;max-width:720px;width:100%;border-radius:10px;overflow:hidden;position:absolute;opacity:0;pointer-events:none;transition-duration:.3s;background:#fff;transform:translateY(100px) scale(.4)}.modal-title{font-size:26px;margin:0;font-weight:400;color:#0582e0}.modal-desc{margin:6px 0 30px;color:rgba(0,0,0,.7)}.modal-left{padding:60px 30px 20px;background:#fff;flex:1.5;transition-duration:.5s;transform:translateY(80px);opacity:0}.modal-button{color:#52b4fc;font-family:Nunito,sans-serif;font-size:18px;cursor:pointer;border:0;outline:0;padding:10px 40px;border-radius:30px;background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.16);transition:.3s}.modal-button:hover{background:hsla(0,0%,100%,.8)}.modal-right{flex:2;font-size:0;transition:.3s;overflow:hidden}.modal-right img{width:100%;height:100%;transform:scale(2);object-fit:cover;transition-duration:1.2s}.modal-buttons{display:flex;justify-content:flex-end;align-items:center}.input-button{padding:8px 12px;outline:none;border:0;color:#fff;border-radius:4px;background:#52b4fc;font-family:Nunito,sans-serif;transition:.3s;cursor:pointer}.input-button:hover{background:#0582e0}.input-label{font-size:11px;text-transform:uppercase;font-family:Nunito,sans-serif;font-weight:600;letter-spacing:.7px;color:#52b4fc;transition:.3s}.input-block{display:flex;flex-direction:column;padding:10px 10px 8px;border:1px solid #ddd;border-radius:4px;margin-bottom:20px;transition:.3s;position:relative}.input-block input{outline:0;border:0;padding:4px 0 0;font-size:14px;font-family:Nunito,sans-serif}.input-block input::placeholder{color:#ccc;opacity:1}.input-block:focus-within{border-color:#52b4fc}.input-block:focus-within .input-label{color:rgba(82,180,252,.8)}.icon-button{outline:0;top:12px;width:32px;height:32px;border:0;background:0;padding:0}.icon-button,.password-toggle{position:absolute;right:10px;cursor:pointer}.password-toggle{top:50%;transform:translateY(-50%);background:none;border:none;padding:4px;display:flex;align-items:center;justify-content:center;color:#52b4fc;transition:.3s}.password-toggle:hover{color:#0582e0}.scroll-down{position:fixed;top:50%;left:50%;display:flex;flex-direction:column;align-items:center;text-align:center;color:#52b4fc;font-size:32px;font-weight:800;transform:translate(-50%,-50%);z-index:100;transition:opacity .3s;opacity:1}.scroll-down.hidden{opacity:0;pointer-events:none}.scroll-down svg{margin-top:16px;width:52px;fill:currentColor}@media (max-width:750px){.modal-container{width:90%}.modal-right{display:none}}