:root {
    --sr-white: #FFFFFF;
    --sr-bg-grey: #F7F8F9;
    --sr-primary: #6EB400;
    --sr-black: #282828;
}

body {
    background-color: var(--sr-bg-grey);
}

#login {
    width: 80%;
    max-width: 400px;
    background-color: var(--sr-white);
    border: 1px solid #CCCCCC;
    margin: 200px auto auto;
    padding: 20px;
}

.btn.btn-success {
    border: var(--sr-primary) solid var(--sr-primary);
    background-color: var(--sr-primary);
}

.btn.btn-success:focus {
    border-color: var(--sr-primary);
    box-shadow: var(--sr-primary), var(--sr-primary);
    border: var(--sr-primary) solid var(--sr-primary);
    background-color: var(--sr-primary);
}

header {
    background: var(--sr-primary);
}

@media (max-width: 991px) {
    header #header-dropdown {
        max-width: 150px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--sr-black);
}

footer img{
    max-height: 1.5rem;
}

.card {
    border-radius: 3px;
}

.card + .card {
    margin-top: 1rem;
}

.card.shop-card {
    text-decoration: none;
    color: var(--sr-black);
    box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
    transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
    cursor: pointer;
    margin: 0.75rem 0.5rem;
    min-width: 280px;
}

.card.shop-card:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
    border-color: var(--sr-primary);
    background-color: var(--sr-primary);
    color: var(--sr-white)
}