@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,600,700);

.alert-heading, .alert-text {
    font-family: "Titillium Web",HelveticaNeue,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif
}

.alert {
    background-color: #f1f1f1;
    /*background-position: 1rem 2rem;*/
    background-repeat: no-repeat;
    background-size: 3.2rem;
    background-position-y: center;
    background-position-x: left;
    padding: 1em;
    margin-left: auto;
    margin-right:auto
}

    .alert ul {
        margin-top: 1em
    }

.alert-icon {
    display: table-cell;
    padding-right: 1rem
}

.alert-body {
    display: table-cell;
    padding-left: 3.5rem;
    vertical-align: top
}

.alert-heading {
    margin-bottom: .3rem;
    margin-top: 0
}

@media screen and (min-width:750px) {
    .alert {
        background-size: 3.2rem
    }

    .alert-body {
        padding-left: 3.5rem
    }

    .alert-heading {
        margin-top: .3rem
    }
}

.alert-text {
    font-weight: 400;
    margin-bottom: 0;
    margin-top: 0
}

.alert-success {
    background-color: #e7f4e4;
    background-image: url(../res/success.svg)
}

.alert-warning {
    background-color: #fff1d2;
    background-image: url(../res/warning.svg)
}

.alert-error {
    background-color: #f9dede;
    background-image: url(../res/error.svg)
}

.alert-info {
    background-color: #e1f3f8;
    background-image: url(../res/info.svg)
}

.alert-no_icon {
    background-image: none
}