:root {
    --primary-blue: #014D70;
    --lighter-blue: #028CCD;
    --accent-red: #C50C0C;
}

a.btn {
    background-color: var(--lighter-blue);
}

a.btn:hover {
    background-color: var(--primary-blue);
}

a {
    text-decoration: none;
    color: var(--primary-blue);
}

a:hover {
    color: var(--primary-blue);
    text-decoration: underline;
}

a.fn-item {
    color: var(--lighter-blue);
    opacity: 1.0;
}

a.fn-item:hover,
a.fn-item.active:hover {
    color: var(--accent-red)
}

a.fn-item.active {
    color: var(--lighter-blue)
}

#site-head {
    background: var(--primary-blue);
}

.post-holder.odd {
    background-color: var(--primary-blue);
}

.inner {
    margin-top: 3rem;
    max-width: 900px;
}

.blog-title {
    font-size: 3rem;
}

.vertical {
    vertical-align: top;
}

#site-head-content h3 {
    font-size: 2.2rem;
    padding-top: 4rem;
}

@media only screen and (max-width: 1130px) {
    .logo {
        width: 580px;
    }

    .blog-title {
        font-size: 2.5rem;
    }
}

@media only screen and (max-width: 650px) {
    .logo {
        width: 420px;
    }

    .blog-title {
        font-size: 2rem;
    }

    #site-head-content h3 {
        font-size: 1.8rem;
    }
}


@media only screen and (max-width: 500px) {
    .logo {
        width: 320px;
    }

    .blog-title,
    .blog-description {
        font-size: 1.8rem;
    }


    #site-head-content h3 {
        font-size: 1.6rem;
    }
}

.blog-description {
    font-style: italic;
}

a.btn {
    background-color: unset;
    border: 2px solid var(--lighter-blue);
}

a.btn.cta {
    background-color: var(--lighter-blue);
    color: white;
}

h2.post-title {
    padding-bottom: 2rem;
}

p.map img {
    margin-left: 0
}