* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body, input, button {
    font-family: 'Muli', sans-serif;
}

#logo {
    width: 500px;
    display: block;
    margin: 50px auto;
}

#login-box {
    width: 500px;
    margin: 0 auto;
    padding: 50px;
    -webkit-box-shadow: 0 0 100px 10px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0 0 100px 10px rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 100px 10px rgba(0, 0, 0, 0.05);
}

#login-button {
    width: 100px;
    display: block;
    margin: 0 auto;
    color: #fff;
    background: linear-gradient(to bottom, #ec9d1e, #ee702d);
    background-size: 1px 88px;
    border: 1px solid #ee702d;
    transition: all 0.15s ease-in-out;
}

#login-button:hover {
    background-position: 44px;
}

.form-control, .input-group-text {
    border-color: #f1f1f1;
}

.input-group-text {
    background: #f1f1f1;
}

.input-group-text {
    transition: color 0.5s ease;
}

.input-group:hover .input-group-text {
    color: #ee702d;
}

@media (min-width: 0px) and (max-width: 510px) {
    #logo {
        width: 100%;
    }

    #login-box {
        width: 100%;
        padding: 25px 5px;
    }
}