/**
 * @see https://teamtreehouse.com/community/shake-effect-with-javascript-only
 */
 
@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}

.apply-shake {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
}

/**
 * Based on a snippet made by Mutiullah Samim.
 *
 * @see https://bootsnipp.com/snippets/vl4R7
 */

html, body {

    background-image: url('../images/login-background.jpg');
    background-size: cover;
    background-repeat: no-repeat;

    height: 100%;

}

.alert {

    max-width: 290px;
    margin: 15px auto;

}

.card {

    margin-top: auto;
    margin-bottom: auto;

    background-color: rgba(255, 255, 255, 0.7);

}


.input-group-prepend span {

    width: 40px;

    background-color: #13aa52;
    color: white;

    border: 0 !important;

}

input:focus {

    outline: 0 0 0 0 !important;
    box-shadow: 0 0 0 0 !important;
    
}