@import url("https://fonts.googleapis.com/css?family=Proxima Nova:400,800");

* { box-sizing: border-box;}
body {background: #f6f5f7; display: flex; justify-content: center; align-items: center; font-family: "Montserrat", sans-serif; height: 100vh;}

.login-head { font-size: 40px; font-weight: bold; margin: 0;}
.login-text { font-size: 16px; font-weight: 100; line-height: 20px; letter-spacing: 0.5px; margin: 20px 0 30px;}
.forgot-link { color: #333; font-size: 14px; text-decoration: none; margin: 15px 0;}

.btn-submit { border-radius: 20px; border: 1px solid #ff4b2b; background-color: #ff4b2b; color: #ffffff; font-size: 12px; font-weight: bold; padding: 12px 45px; letter-spacing: 1px; text-transform: uppercase; transition: 0.3s all;}
.btn-submit:hover { border: 1px solid #ff4b2b; background-color: #fff; color: #ff4b2b; }
.btn-submit:active { transform: scale(0.95);}
.btn-submit:focus { outline: none;}
.btn-submit.ghost { background-color: transparent; border-color: #ffffff;}
.btn-submit.ghost:hover { background-color: #fff; border-color: #ffffff;}

.login-form { background-color: #ffffff; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 0 50px; height: 100%; text-align: center;}
.login-input { background-color: #eee; border: none; padding: 12px 15px; margin: 8px 0; width: 100%;}
.login-container { 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: 550px;}
.form-container { position: absolute; top: 0; height: 100%; transition: all 0.6s ease-in-out;}
.sign-in-container { left: 0; width: 50%; z-index: 2;}
.login-container.right-panel-active .sign-in-container { transform: translateX(100%);}
.sign-up-container { left: 0; width: 50%; opacity: 0; z-index: 1;}
.login-container.right-panel-active .sign-up-container { transform: translateX(100%); opacity: 1; z-index: 5; animation: show 0.6s;}

@keyframes show {
    0%,
    49.99% {
        opacity: 0;
        z-index: 1;
    }

    50%,
    100% {
        opacity: 1;
        z-index: 5;
    }
}

.overlay-container { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; overflow: hidden; transition: transform 0.6s ease-in-out; z-index: 100;}
.container.right-panel-active .overlay-container {transform: translateX(-100%);}
.overlay { background: #ff416c; background: -webkit-linear-gradient(to right, #ff4b2b, #ff416c); background: linear-gradient(to right, #ff4b2b, #ff416c); background-repeat: no-repeat; background-size: cover; background-position: 0 0; color: #ffffff; position: relative; left: -100%; height: 100%; width: 200%; transform: translateX(0); transition: transform 0.6s ease-in-out;}
.login-container.right-panel-active .overlay {transform: translateX(50%);}
.overlay-panel { position: absolute; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 0 40px; text-align: center; top: 0; height: 100%; width: 50%; transform: translateX(0); transition: transform 0.6s ease-in-out;}
.overlay-left {transform: translateX(-20%);}
.login-container.right-panel-active .overlay-left {transform: translateX(0);}
.overlay-right {right: 0;transform: translateX(0);}
.login-container.right-panel-active .overlay-right {transform: translateX(20%);}