.main-content h1:first-of-type {
    margin: 2% 0;
}

.dark, .main-content h2.dark, .main-content h3.dark {
    background-color:  #492365 !important;
    color: white !important; 
    padding: .5% 0 .5% 1%;
}

.accordion.dark, .accordion .accordion-title.dark {
    background-color:  #492365;
    color: white !important;
}

.accordion-item {
    border-bottom: 2px solid white;
}

.light, .main-content h2.light, .main-content h3.light, .grid.--card-list>.box-section>h2.light, .grid.--card-list>.box-section>h3.light  {
    background-color: transparent !important;
    color: #492365 !important;
}

.light-purple, .main-content h2.light-purple, .main-content h3.light-purple {
    background-color: rgba(163,145,177,.25) !important;
    color: #492365 !important;
}

.dark-teal {
    background-color: #005f71 !important;
    color: white !important;
}

.box-section {
    margin: 1% 2%;
    padding: 2%;
    border: none !important;
}

.grid.--card-list>.box-section>h2, .grid.--card-list>.box-section>h3 {
    background-color: transparent !important;
    padding: .5rem !important;
}

.grid.--card-list>.box-section>.card__content {
    background-color: transparent !important;
    flex-grow: 1;
}

.grid.--card-list>.box-section>.card__content>p.my-0 {
    margin: 0;
    padding: 1rem 0;
    line-height: 1;
    flex-grow: 0;
}

.grid.--card-list>.box-section>.card__content>ul {
    margin-left: 3%;
}

.grid.--sm-1.no-x-padding, .grid.--md-2.px-0 {
    padding: 1rem 0 !important;
}

.card, .--card-list > li {
    box-shadow: 4px 4px 6px #ccc !important;
}

.card.light-card {
    background-color: white;
}

.sat-list {
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    margin: 3% 0;
}

.sat-list .card {
    min-width: 300px;
    max-width: 304px;
    margin: 2%;
}

.sat-list .card .card__image img {
    max-width: 300px;
    max-height: 300px;
}

.content-top {
    flex-grow: 25;
}

.content-bottom {
    flex-shrink: 25;
}

.circle-row {
    width: 100% !important;
    margin: 1% 0 0 0 !important;
    padding: 0 3% 3% 3%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between !important;
}

.circle-row-left {
    justify-content: start !important;
}

.circle {
    width: 150px;
    height: 150px;
    background-color: rgba(163,145,177,.25);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #492365;
    font-weight: bold;
}

.circle-left {
    margin-right: 2%;
}

.labs-footer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.footer-center img {
    margin: 0;
}

@media screen and (max-width: 64em) {
    .circle-row {
        padding: 0;
        justify-content: center !important;
    }

    .circle {
        width: 150px;
        height: 150px;
        background-color: rgba(163,145,177,.25);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: #492365;
        font-weight: bold;
        margin: 0 2% 1% 2%;
    }
    .labs-footer {
        align-items: center;
        justify-content: center;
    }

    .footer-center {
        order: -1;
        min-width: 100%;
    }

    .footer-left {
        margin-right: 3%;
    }

    .footer-right {
        margin-left: 3%;
    }

    .footer-left p, .footer-right a {
        text-align: center !important;
    }

}

@media screen and (max-width: 40em) {
    .footer-right, .footer-center {
        padding: 0;
        margin: 2% auto 0 auto;
    }
}

.circle-list li {
    margin: 1.25rem 0;
}

.circle-list li span{
    padding: 1%;
    border-radius: 50%;
    margin-right: 1%;
    font-weight: bold;
}

.circle-list li span.info {
    color: #093335 !important;
    background-color: #25cad3;
}

.circle-list li span.warning {
    color: white !important;
    background-color: #f6b221;
}

.circle-list li span.danger {
    color: white !important;
    background-color: #a52428;
}

.circle-single-sm {
    padding-left: 1.75% !important;
    padding-right: 1.75% !important;
}

.circle-single-md {
    padding: .25% .75% .25% .75% !important;
    line-height: .5;
}