*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,Helvetica,sans-serif;background:#f6f5f7;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh}input{border:0;outline:0}h1{font-weight:bold;margin:0}p{font-size:14px;font-weight:100;line-height:20px;letter-spacing:.5px;margin:20px 0 30px}span{font-size:13px}a{color:#333;font-size:14px;text-decoration:none;margin:15px 0}.container{background:#fff;border-radius:10px;box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22);position:relative;overflow:hidden;width:768px;max-width:100%;min-height:560px}.form-container form{background-color:#fff;display:flex;flex-direction:column;padding:0 30px;height:100%;justify-content:center;align-items:center;text-align:center}.social-container{margin:10px 0}.social-container a{border:1px solid #ddd;border-radius:50%;display:inline-flex;justify-content:center;align-items:center;margin:0 5px;height:40px;width:40px}.form-container input{border:0;padding:12px 8px;margin:5px 0;width:100%;font-size:15px}button{border-radius:20px;border:1px solid #ff4b2b;background:#ff4b2b;color:#fff;font-size:12px;font-weight:bold;padding:12px 45px;letter-spacing:1px;transition:transform 80ms ease-in}button:active{transform:scale(0.95)}button:focus{outline:0}button.ghost{background:transparent;border-color:#fff}.form-container{position:absolute;top:0;height:100%;transition:all .6s ease-out}.sign-in-container{left:0;width:50%;z-index:2}.sign-up-container{left:0;width:50%;opacity:0;z-index:1}.overlay-container{position:absolute;top:0;left:50%;width:50%;height:100%;overflow:hidden;transition:transform .6s ease-in-out;z-index:100}.overlay{background:#ff416c;background:linear-gradient(to right,#ff4b2b,#ff416c) no-repeat 0 0/cover;color:#fff;height:100%;width:200%;position:relative;left:-100%;transform:translateX(0);transition:transform .6s ease-in-out}.overlay-panel{position:absolute;top:0;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:50%;padding:0 40px;text-align:center;transform:translateX(0);transition:transform .6s ease-in-out}.overlay-right{right:0;transform:translateX(0)}.overlay-left{transform:translateX(-20%)}.container.right-panel-active .sign-in-container{transform:translateX(100%)}.container.right-panel-active .overlay-container{transform:translateX(-100%)}.container.right-panel-active .sign-up-container{opacity:1;z-index:5;transform:translateX(100%)}.container.right-panel-active .overlay{transform:translateX(50%)}.container.right-panel-active .overlay-left{transform:translateX(0)}.container.right-panel-active .overlay-right{transform:translateX(20%)}.copyright{font-size:14px;display:block;position:absolute;bottom:5px;right:15px;width:100%;text-align:center}.validate-input{position:relative}.wrap-input100{width:100%;text-align:left;margin-top:10px;border-bottom:2px solid #d9d9d9;margin-bottom:5px}.label-input100{font-size:14px;color:#333;line-height:1.5;padding-left:7px}.notice-captcha{text-align:left;color:red;width:100%}.loginbtn{min-width:200px;margin-top:10px}.mobile h1{font-size:16px}.mobile span{font-size:10px}.mobile form{padding:0 5px}.focus-input100::after{content:attr(data-symbol);font-family:Material-Design-Iconic-Font;color:#adadad;font-size:22px;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:center;justify-content:center;position:absolute;height:calc(100% - 20px);bottom:0;left:0;padding-left:13px;padding-top:3px}.focus-input100::before{content:"";display:block;position:absolute;bottom:-2px;left:0;width:0;height:2px;background:#3a8bff;-webkit-transition:all .4s;-o-transition:all .4s;-moz-transition:all .4s;transition:all .4s}.input100:focus+.focus-input100::before{width:100%}.has-val.input100+.focus-input100::before{width:100%}.input100:focus+.focus-input100::after{color:#a64bf4}.has-val.input100+.focus-input100::after{color:#a64bf4}