@media (min-width: 220px) and (max-width: 599px) {
    .header-content {
        text-align: center;

        h1 {
            font-size: 1.45em;
            margin: 1em auto 0;
            padding: 0;
            font-weight: 400;
        }
        h2 {
            font-size: 1.25em;
            font-weight: 300;
            text-align: center;
            margin: 0 auto;
            padding: 0 2.5em;
            color: #496fb5;   
        }
    }
}

@media (min-width: 600px) and (max-width:992px) {
    .header-content {
        text-align: center;

           h1 {
            font-size: 2em;
            margin: 1em auto 0;
            padding: 0;
            font-weight: 400;
        }
        h2 {
            font-size: 1.75em;
            font-weight: 300;
            text-align: center;
            margin: 0 auto;
            padding: 0;
            color: #496fb5;   
        }
        
        .large-text {
            font-size: 1.25em;
            padding: .5em 1em;
        }
    }
}

 @media (min-width: 993px) {

    .header-content {
        text-align: center;

        h1 {
            font-size: 3em;
            margin: 1em auto 0;
            padding: 0;
            font-weight: 400;
        }
        h2 {
            font-size: 2em;
            font-weight: 300;
            text-align: center;
            margin: 0 auto;
            padding: 0;
            color: #496fb5;
        }
        .large-text {
            font-size: 1.25em;
            padding: .5em 1em;
        }
    }
}