.hidden {display: none;}

#login-form-container {min-height: calc(100vh - 56px); display: flex; align-items: center;}
#login-form-slides {width: 100%; max-width: 320px; margin: 0 auto; padding: 0 10px;}

.site-name {font-size: 28px; margin: 20px 0; text-align: center;}
.site-name a {color: #fff; font-weight: 900; text-transform: uppercase; text-decoration: none; color: #fc0;}

.message {padding: 7px 12px; color: #fff; text-align: center; margin-bottom: 20px; font-weight: bold;}
.message-error {background-color: #ff5555;}
.message-success {background-color: #5cb85c;}

.field-row {display: flex; align-items: center; margin: 10px 0; flex-wrap: wrap;}
.field-row .name {font-weight: bold; margin-right: 5px; flex: 1 0 50px; padding-right: 10px;}
.field-row .input {flex: 3 0 100px;}
.field-row .input input {width: 100%; height: 40px; font-size: 15px; box-sizing: border-box;}

.centered-row {display: flex; justify-content: center;}
.centered-row input[type=checkbox] {margin: 0;}
.centered-row label {margin-left: 10px;}

.button-row {margin: 25px; text-align: center;}
.button-row button {box-sizing: border-box; padding: 5px 10px; font-size: 15px;}

.form-slide h2 {text-align: center; margin: 20px 0;}