@import "./fonts.css";

@import "./vars.css";

@import "./typography.css";


.logo-link:hover {
    text-decoration: none;
}

.nav-anchor {
    position: absolute;
    top: -65px;
}

.hero-row {
    background-color: var(--color-clover-green);
    color: white;
}

.hero-row strong {
    font-size: 1.3em;
    color: var(--color-ctc-aqua);
}

.hero-row h1 {
    /*font-size: 1.3em;*/
    color: var(--color-ctc-aqua);
}

.hero {
    background-image: url("/static/images/smiling_caregiver_wide.jpg");
    background-size: cover;
    background-position: right;
    width: 100%;
    height: 380px;
}

@media (max-width: 767px) {
    .hero {
        height: 300px;
        background-position: top;
    }
}

.alt-bg {
    background-color: var(--color-ctc-lightgray);
}

a.nav-link:hover {
    color: var(--color-clover-green);
}


.nav-link {
    color: var(--color-clover-darkergreen);
    font-weight: 500;
    padding-bottom: 0;
}

.nav-link.active {
    text-decoration: underline;
}

.nav-row .logo {
    font-size: 3em;
    color: var(--color-clover-green);
}

.footer-row {
    background-color: var(--color-clover-green);
    color: white;
}

.footer-row .logo {
    font-size: 1.5em;
    color: white;
}

.footer-row .nav-item {
    font-size: 1rem;
    display: block;
}

.footer-row .nav-item a {
    color: white;

}

.btn {
    font-weight: 500;
}

.btn-green {
    background-color: var(--color-clover-green);
    color: white;
}

.btn-green:hover {
    background-color: var(--color-clover-green);
    color: #eee;
}

.btn-aqua {
    background-color: var(--color-ctc-aqua);
    color: var(--color-clover-green);
}

.btn-aqua:hover {
    background-color: var(--color-ctc-aqua);
    color: black;
}


.add-shadow {
    filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.2));
}

.round-img-container {
    height: 340px;
    width: 340px;
    margin: 0 auto;
    clip-path: circle(170px at center);
    -webkit-clip-path: circle(170px at center);
    display: none;
}
@media (min-width: 768px) {
    .round-img-container {
        display: block;
    }
}

@media (max-width: 768px) {
    body {
        padding-left: 5px;
        padding-right: 5px;
    }
}

.round-img-container > img {
    width: 100%;
    height: 100%;
}


.cta-card {
    background-color: var(--color-clover-green);
}

.cta-card .cta-text {
    color: white;
}

.left-toc {
    padding: 20px 5px;
    border-right: 1px solid;
    border-right-color: var(--color-clover-gray);
}

.left-toc ul li {
    padding: 3px 0;
}

nav[data-toggle=toc] .nav>li>a {
    text-decoration: none;
    font-weight: 800;
    font-size: 0.8em;
}


nav[data-toggle=toc] .nav>li>a:hover {
    color: var(--color-clover-darkergreen);
    border-left: 2px solid;
    border-left-color: var(--color-clover-darkergreen);
}

nav[data-toggle=toc] .nav-link.active, nav[data-toggle=toc] .nav-link.active:hover {
    color: var(--color-clover-green);
    border-left: 2px solid;
    border-left-color: var(--color-clover-green);
}

.content-img {
    max-height: 450px;
    max-width: 450px;
}

.partner-logo img {
    max-width: 300px;
}