#searchform-3 { position: absolute; top: 0px; left: 0px; } #searchform-3 { display: inline-flex; top: 0; } #searchform-3:hover input { width: 100px; padding: 0 10px; } #searchform-3 input { border: none; background: none; outline: none; padding: 0; font-size: 18px; color: #fff; width: 0; transition: .4s; left: 50px; top: 0; } #searchform-3 button li { font-size: 15px; } #searchform-3 button { color: #00B7FF; border-radius: 50%; border: none; cursor: pointer; transition: .4s; top: 0; left: 50px; display: block; padding-left: 10px; padding-right: 10px; } #searchform-4 { position: relative; top: 7px; left: 0px; } #searchform-4:hover { width: 100%; } #searchform-4 { display: inline-flex; background: linear-gradient(45deg, #333, #5A5454); } #searchform-4:hover input { width: 100px; padding: 0 10px; } #searchform-4 input { border: none; background: none; outline: none; padding: 2px; font-size: 18px; color: #fff; width: 0; transition: .4s; left: 50px; top: 0; } #searchform-4 button li { font-size: 15px; } #searchform-4 button { color: #00B7FF; border-radius: 50%; border: none; background-color: #333; cursor: pointer; transition: .4s; top: 0; left: 50px; width: 26px; line-height: 50px; } #loginform { padding-bottom: 20px; } #loginform body { font-family: "Open Sans", Helvetica, Arial, sans-serif; background: #ededed; } #loginform input, #loginform button { border: none; outline: none; background: none; font-family: "Open Sans", Helvetica, Arial, sans-serif; } #loginform .form { position: relative; width: 640px; height: 100%; transition: transform 1.2s ease-in-out; padding: 50px 30px 0; } #loginform button { display: block; margin: 0 auto; width: 260px; height: 36px; border-radius: 30px; color: #fff; font-size: 15px; cursor: pointer; } #loginform #rememberme { overflow: hidden; z-index: 2; position: absolute; left: 97px; /* top: 0; */ /* width: 260px; */ height: 20px; } .login-submit { background-color: brown; } #loginform span { position: absolute; left: 0; top: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; transition: transform 1.2s; } #loginform h2 { width: 100%; font-size: 26px; text-align: center; } #loginform label { display: block; width: 260px; margin: 25px auto 0; text-align: center; } #loginform label span { font-size: 12px; color: #817a7a; text-transform: uppercase; } #loginform input { display: block; width: 100%; margin-top: 5px; padding-bottom: 5px; font-size: 16px; border-bottom: 1px solid rgba(0, 0, 0, 0.4); text-align: center; } #loginform .submit { margin-top: 40px; margin-bottom: 20px; background: #d4af7a; text-transform: uppercase; }