$break-small: 764px; .ascribe-btn-login { padding: 1.5em; font-weight: 500; text-align: center; background-color: rgba(2, 182, 163, 1); color: white; font-size: 1.2em; border-radius: 0; width: 100%; border:none; &:hover { color: white; background-color: rgba(2, 182, 163, 0.8); border: none; } &:active, &:focus { color: white; background-color: rgba(2, 182, 163, 0.6); border: none; } } .ascribe-login-wrapper { width: 80%; margin: 0 auto; max-width: 600px; @media screen and (max-width: $break-small) { width: 100%; } } .ascribe-login-text { font-size: 1em; padding: 0 0 1em 0; margin-left: 0.4em; } .ascribe-login-header { font-size: 2em; padding: 0 0 0.5em 0; } .ascribe-form { hr { color: rgba(0, 0, 0, 0.2); border: none; height: 1px; background-color: rgba(0, 0, 0, 0.2); margin-top: 0; } } %vertical-align { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }