*{box-sizing:border-box;margin:0;padding:0}body{flex-direction:column;justify-content:center;align-items:center;min-height:100vh;font-family:Montserrat,sans-serif;display:flex}header,footer{flex:none}main{flex:1 0 auto;justify-content:center;align-items:center;display:flex}h1{text-transform:uppercase;font-weight:700}p{letter-spacing:.5px;text-align:center;margin:20px 0 30px;font-size:14px;font-weight:400;line-height:20px}button{color:#fff;letter-spacing:1px;text-transform:uppercase;cursor:pointer;background-color:#e9058b;border:1px solid #91f1ff;border-radius:20px;padding:12px 45px;font-size:12px;font-weight:700;transition:transform 80ms ease-in}button:active{transform:scale(.95)}button:focus{outline:none}button.ghost{background-color:#0000;border-color:#fff}.container{background-color:#050115;border-radius:10px;width:900px;max-width:100%;min-height:480px;position:relative;overflow:hidden;box-shadow:0 14px 28px #00000040,0 10px 10px #00000038}.form-container{text-align:center;background-color:#070340;flex-direction:column;justify-content:center;align-items:center;width:50%;height:100%;padding:0 50px;transition:all .6s ease-in-out;display:flex;position:absolute;top:0}.sign-in-container{z-index:2;left:0}.sign-up-container{opacity:0;z-index:1;left:0}.container.right-panel-active .sign-in-container{transform:translate(100%)}.container.right-panel-active .sign-up-container{opacity:1;z-index:5;animation:.6s show;transform:translate(100%)}@keyframes show{0%,49.99%{opacity:0;z-index:1}50%,to{opacity:1;z-index:5}}input{color:#fff;background-color:#190764;border:none;border-radius:5px;width:100%;margin:8px 0;padding:12px 15px}input::placeholder{color:#fff}.input-wrapper{width:100%;position:relative}.input-wrapper input{box-sizing:border-box;width:100%;padding-right:40px}.input-wrapper .toggle-password{cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:flex;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.password-wrapper{align-items:center;display:flex}.password-wrapper input{flex:1}.toggle-password{cursor:pointer;background:0 0;border:none;margin-left:10px;font-size:18px}.overlay-container{z-index:100;width:50%;height:100%;transition:transform .6s ease-in-out;position:absolute;top:0;left:50%;overflow:hidden}.container.right-panel-active .overlay-container{transform:translate(-100%)}.overlay{color:#fff;background-color:#050115;width:200%;height:100%;transition:transform .6s ease-in-out;display:flex;position:relative;left:-100%;transform:translate(0)}.container.right-panel-active .overlay{transform:translate(50%)}.overlay-panel{text-align:center;flex-direction:column;justify-content:center;align-items:center;width:50%;height:100%;padding:0 40px;transition:transform .6s ease-in-out;display:flex;position:absolute;top:0}.overlay-left{transform:translate(-20%)}.container.right-panel-active .overlay-left{transform:translate(0)}.overlay-right{right:0;transform:translate(0)}.container.right-panel-active .overlay-right{transform:translate(20%)}.login-error{color:red;margin:5px 0;font-size:12px}.login-image-container{position:absolute;bottom:20px;right:20px}@media (max-width:768px){main{padding:10px}.container{width:90%;min-height:600px}.form-container,.overlay-container{width:100%;left:0}.container.right-panel-active .sign-in-container,.container.right-panel-active .sign-up-container{transform:translate(0)}.overlay{display:none}.login-image-container{margin:20px auto;position:static}}