/*
    --bs-breakpoint-xs: 0;
    --bs-breakpoint-sm: 576px;
    --bs-breakpoint-md: 768px;
    --bs-breakpoint-lg: 992px;
    --bs-breakpoint-xl: 1200px;
    --bs-breakpoint-xxl: 1400px;
 */


#lead-in h1, #lead-in h2, #lead-in p, #lead-in .specialist-in-items .badge {
}


@media (max-width: 767px) {
    #hero-image-container {
        background-position-y: 20%;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    #hero-image-container {
    }


}

@media (min-width: 768px) {
    #top {
        min-height: 60px;
    }

    #hero-image-container {
        position: relative;
        top: -60px;
    }
}

@media (min-width: 992px) {
    #we-do-things-differently .callout p {
        font-size: 90%;
    }
}

#lead-in h1, #lead-in h2, #lead-in p, #lead-in .specialist-in-items {
    transition: margin-top 100ms, margin-bottom 100ms, font-size 100ms;
}

#lead-in h1, #lead-in h2, #lead-in p, #lead-in .specialist-in-items {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

#lead-in p.lead {
    font-size: 1.5rem;
}

@media (min-width: 768px) and (max-width: 1200px) {
    #lead-in h1, #lead-in h2, #lead-in p, #lead-in .specialist-in-items {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    #lead-in p.lead {
        font-size: 1.125rem;
    }

    .specialist-in-items .badge {
        font-size: .75rem;
    }
}


@media (max-width: 767px) {
    #hero-image-container {
        height: 340px;
        overflow: hidden;
    }

    #hero-image-container > img {
        margin-top: -90px;
    }

    .press-logos {
        row-gap: 2rem;
    }

    .press-logos img {
        height: 20px;
    }


    #work-together > div.row > div.col-md-3 img {
    }

    #work-together > div.row > div.col-md-3 {
        margin-bottom: 3rem;
    }

    #work-together h3 {
        font-size: 2rem;
        margin-top: 1rem;
        margin-bottom: 1rem;
        min-height: unset;
    }
}



@media (max-width: 991px) {
    html {
        font-size: 14px;
    }

    .responsive-image-container {
        overflow: hidden;
        height: 300px;
    }

    .responsive-image-container > img {
        position: relative;
        top: -200px;
    }

    footer .row {
        row-gap: 2rem;
    }
}