body { align-items: center; } h3 { width:100%; padding:20px; text-align:center; vertical-align:middle; color:#ffffff !important; font-size:18px !important; } .form-bkg-top { width:100%; max-width: 330px; background-color:#212529; color:#ffffff !important; text-align: center; } .form-signin { width: 100%; max-width: 330px; padding-top:0 !important; padding-left: 30px; padding-right: 30px; margin: auto; } .form-signin .checkbox { font-weight: 400; } .form-signin .form-control { position: relative; box-sizing: border-box; height: auto; padding: 10px; font-size: 16px; } .form-signin .form-control:focus { z-index: 2; } .form-signin input[type="email"] { margin-bottom: -1px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .form-signin input[type="password"] { margin-bottom: -3px; border-top-left-radius: 0; border-top-right-radius: 0; } .form-signin input[type="password_confirm"] { margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0; } .box-shadow { width: 100%; height:100%; max-width: 330px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); text-align: center; margin-top:-1px; margin-left:auto; margin-right:auto; } a.mt-5:hover { text-decoration:underline !important; } .flex-center { align-items: center; min-height: calc(100vh - 212px); padding-top: 40px; padding-bottom: 40px; } @media screen and (max-width: 992px){ .flex-center { padding-top: 20px; padding-bottom: 40px; } } @media screen and (max-width: 480px){ h3 { font-size:16px !important; } }