:root {
    /* Custom Colors*/
    --crayola: #a1b3c7;
    --dandelion: #ebe726;
    --android-green: #afc346;
    --smashed-pumpkin: #ff6e2e;
    --medium-purple: #8884e3;
    --grape: #6a22c4;
}

/* Grape */
html .btn-grape {
    background-color: var(--grape);
    border: 2px solid var(--grape);
    color: #fff;
}

html .btn-grape:hover,
html .btn-grape.hover {
    border-color: var(--grape);
    color: var(--grape);
}

html .btn-grape:focus {
    border: 4px solid #b4b4b4;
    color: #fff !important;
    box-shadow: 0 0 0 3px rgba(84, 1, 188, 0.5);
}

html .btn-grape:active,
html .btn-grape.active {
    border-color: var(--grape) !important;
}

html .btn-outline.btn-grape {
    color: var(--grape);
    background-color: transparent;
    background-image: none;
    border-color: var(--grape);
}

html .btn-outline.btn-grape:hover,
html .btn-outline.btn-grape.hover {
    color: #fff;
    background-color: var(--grape);
    border-color: var(--grape);
}

html .btn-outline.btn-grape:focus {
    border: 4px solid #b4b4b4;
    box-shadow: 0 0 0 3px rgba(84, 1, 188, 0.5);
}

html .btn-outline.btn-grape:active,
html .btn-outline.btn-grape.active {
    color: #fff !important;
    background-color: var(--grape) !important;
    border-color: var(--grape) !important;
}

/* Medium Purple */
html .btn-medium-purple {
    background-color: var(--medium-purple);
    border: 2px solid var(--medium-purple);
    color: #000;
}

html .btn-medium-purple:hover,
html .btn-medium-purple.hover {
    border-color: var(--medium-purple);
    color: var(--medium-purple);
}

html .btn-medium-purple:focus {
    border: 4px solid #b4b4b4;
    color: #000 !important;
    box-shadow: 0 0 0 3px rgba(9, 1, 189, 0.5);
}

html .btn-medium-purple:active,
html .btn-medium-purple.active {
    border-color: var(--medium-purple) !important;
}

html .btn-outline.btn-medium-purple {
    color: var(--medium-purple);
    background-color: transparent;
    background-image: none;
    border-color: var(--medium-purple);
}

html .btn-outline.btn-medium-purple:hover,
html .btn-outline.btn-medium-purple.hover {
    color: #000;
    background-color: var(--medium-purple);
    border-color: var(--medium-purple);
}

html .btn-outline.btn-medium-purple:focus {
    border: 4px solid #b4b4b4;
    box-shadow: 0 0 0 3px rgba(9, 1, 189, 0.5);
}

html .btn-outline.btn-medium-purple:active,
html .btn-outline.btn-medium-purple.active {
    color: #000 !important;
    background-color: var(--medium-purple) !important;
    border-color: var(--medium-purple) !important;
}

/* Smashed Pumpkin */
html .btn-smashed-pumpkin {
    background-color: var(--smashed-pumpkin);
    border: 2px solid var(--smashed-pumpkin);
    color: #000;
}

html .btn-smashed-pumpkin:hover,
html .btn-smashed-pumpkin.hover {
    border-color: var(--smashed-pumpkin);
    color: var(--smashed-pumpkin);
}

html .btn-smashed-pumpkin:focus {
    border: 4px solid #b4b4b4;
    color: #000 !important;
    box-shadow: 0 0 0 3px rgb(197, 62, 2, 0.5);
}

html .btn-smashed-pumpkin:active,
html .btn-smashed-pumpkin.active {
    border-color: var(--smashed-pumpkin) !important;
}

html .btn-outline.btn-smashed-pumpkin {
    color: var(--smashed-pumpkin);
    background-color: transparent;
    background-image: none;
    border-color: var(--smashed-pumpkin);
}

html .btn-outline.btn-smashed-pumpkin:hover,
html .btn-outline.btn-smashed-pumpkin.hover {
    color: #000;
    background-color: var(--smashed-pumpkin);
    border-color: var(--smashed-pumpkin);
}

html .btn-outline.btn-smashed-pumpkin:focus {
    border: 4px solid #b4b4b4;
    box-shadow: 0 0 0 3px rgb(197, 62, 2, 0.5);
}

html .btn-outline.btn-smashed-pumpkin:active,
html .btn-outline.btn-smashed-pumpkin.active {
    color: #000 !important;
    background-color: var(--smashed-pumpkin) !important;
    border-color: var(--smashed-pumpkin) !important;
}

/* Android Green */
html .btn-android-green {
    background-color: var(--android-green);
    border: 2px solid var(--android-green);
    color: #000;
}

html .btn-android-green:hover,
html .btn-android-green.hover {
    border-color: var(--android-green);
    color: var(--android-green);
}

html .btn-android-green:focus {
    border: 4px solid #b4b4b4;
    color: #000 !important;
    box-shadow: 0 0 0 3px rgb(169, 201, 2, 0.5);
}

html .btn-android-green:active,
html .btn-android-green.active {
    border-color: var(--android-green) !important;
}

html .btn-outline.btn-android-green {
    color: var(--android-green);
    background-color: transparent;
    background-image: none;
    border-color: var(--android-green);
}

html .btn-outline.btn-android-green:hover,
html .btn-outline.btn-android-green.hover {
    color: #000;
    background-color: var(--android-green);
    border-color: var(--android-green);
}

html .btn-outline.btn-android-green:focus {
    border: 4px solid #b4b4b4;
    box-shadow: 0 0 0 3px rgb(169, 201, 2, 0.5);
}

html .btn-outline.btn-android-green:active,
html .btn-outline.btn-android-green.active {
    color: #000 !important;
    background-color: var(--android-green) !important;
    border-color: var(--android-green) !important;
}

/* Dandelion */
html .btn-dandelion {
    background-color: var(--dandelion);
    border: 2px solid var(--dandelion);
    color: #000;
}

html .btn-dandelion:hover,
html .btn-dandelion.hover {
    border-color: var(--dandelion);
    color: var(--dandelion);
}

html .btn-dandelion:focus {
    border: 4px solid #b4b4b4;
    color: #000 !important;
    box-shadow: 0 0 0 3px rgba(202, 198, 1, 0.5);
}

html .btn-dandelion:active,
html .btn-dandelion.active {
    border-color: var(--dandelion) !important;
}

html .btn-outline.btn-dandelion {
    color: var(--dandelion);
    background-color: transparent;
    background-image: none;
    border-color: var(--dandelion);
}

html .btn-outline.btn-dandelion:hover,
html .btn-outline.btn-dandelion.hover {
    color: #000;
    background-color: var(--dandelion);
    border-color: var(--dandelion);
}

html .btn-outline.btn-dandelion:focus {
    border: 4px solid #b4b4b4;
    box-shadow: 0 0 0 3px rgba(202, 198, 1, 0.5);
}

html .btn-outline.btn-dandelion:active,
html .btn-outline.btn-dandelion.active {
    color: #000 !important;
    background-color: var(--dandelion) !important;
    border-color: var(--dandelion) !important;
}

/* Crayola */
html .btn-crayola {
    background-color: var(--crayola);
    border: 2px solid var(--crayola);
    color: #000;
}

html .btn-crayola:hover,
html .btn-crayola.hover {
    border-color: var(--crayola);
    color: var(--crayola);
}

html .btn-crayola:focus {
    border: 4px solid #b4b4b4;
    color: #000 !important;
    box-shadow: 0 0 0 3px rgba(43, 106, 177, 0.5);
}

html .btn-crayola:active,
html .btn-crayola.active {
    border-color: var(--crayola) !important;
}

html .btn-outline.btn-crayola {
    color: var(--crayola);
    background-color: transparent;
    background-image: none;
    border-color: var(--crayola);
}

html .btn-outline.btn-crayola:hover,
html .btn-outline.btn-crayola.hover {
    color: #000;
    background-color: var(--crayola);
    border-color: var(--crayola);
}

html .btn-outline.btn-crayola:focus {
    border: 4px solid #b4b4b4;
    box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.5);
}

html .btn-outline.btn-crayola:active,
html .btn-outline.btn-crayola.active {
    color: #000 !important;
    background-color: var(--crayola) !important;
    border-color: var(--crayola) !important;
}

/* Card Custom Accent */
.card-custom-accent-android-green:hover .card-title,
.card-custom-accent-android-green:hover i {
    color: var(--android-green) !important;
}

.card-custom-accent-medium-purple:hover .card-title,
.card-custom-accent-medium-purple:hover i {
    color: var(--medium-purple) !important;
}

.card-custom-accent-smashed-pumpkin:hover .card-title,
.card-custom-accent-smashed-pumpkin:hover i {
    color: var(--smashed-pumpkin) !important;
}

.tribe-events-event-image img{
    max-width:100%;
    height: auto;
}