section{position:relative;min-height:100vh;display:flex;justify-content:center;align-items:center;padding:20px}section .container{position:relative;width:800px;height:590px;background:#fff;box-shadow:0 15px 50px rgba(0,0,0,.1);overflow:hidden}section .container .user{position:absolute;top:0;left:0;width:100%;height:100%;display:flex}section .container .user .imgBx{position:relative;width:50%;height:100%;background:#d2ae6d;transition:.5s}section .container .user .imgBx img{width:85%;position:sticky;top:50%;transform:translate(22px,-50%)}section .container .user .formBx{position:relative;width:50%;height:100%;background:#fff;display:flex;justify-content:center;align-items:center;padding:40px;transition:.5s}section .container .user .formBx form .signup{position:relative;margin-top:20px;margin-bottom:20px;font-size:12px;letter-spacing:1px;color:#555;text-transform:capitalize;font-weight:400}section .container .signupBx{pointer-events:none}section .container.active .signupBx{pointer-events:initial}section .container .signupBx .formBx{left:100%}section .container.active .signupBx .formBx{left:0}section .container .signupBx .imgBx{left:-100%}section .container.active .signupBx .imgBx{left:0}section .container .signinBx .formBx{left:0}section .container.active .signinBx .formBx{left:100%}section .container .signinBx .imgBx{left:0}section .container.active .signinBx .imgBx{left:-100%}@media (max-width:991px){section .container{max-width:400px}section .container .imgBx{display:none}section .container .user .formBx{width:100%}}