.login-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: stretch; justify-content: center; overflow: hidden; }
.login-form { flex-grow: 1; border-radius: 0.4rem; background: white; display: flex; align-items: center; justify-content: center; }
.login-form .login-box { width: 400px; max-width: 400px; }
.login-box .title { padding-bottom: 40px; text-align: left; }
.login-box .title h1 { font-size: 4em; }
.login-box .title p { font-size: 2em; margin: 0; color: #ccc; }

.login-box button { width: 100%; height: 56px; justify-content: center; border-radius: var(--borderRadius); }
#password-recovery { margin: 0 0 20px; display: inline-block; color: black; font-size: 0.85em; }

.right { background: var(--navyblue); height: 100%; width: 56%; display: flex; align-items: center; justify-content: center; }
.right img { width: 200px; position: relative; transition: 0.4s; }

@media (max-width: 1024px) {
.login-wrapper { flex-direction: column; align-items: center; background: var(--navyblue); }
.login-form { width: calc(100% - 30px); flex-grow: initial; }
.login-box .title { padding-bottom: 20px; }
.login-box .title h1 { font-size: 2em; }
.login-box .title p { font-size: 1.2em; }

.login-form { width: calc(100% - 60px); padding: 30px 20px; }

.right { height: initial; width: initial; padding-top: 60px; }
.right img { width: 120px; }
}