* {
    box-sizing: border-box;
}

body {
    background-color: #ffffff;
    color: #312f2b;
    image-rendering: optimizespeed;
    font-family: Barlow, Source Sans Pro, Open Sans, Lucida Grande, Lucida Sans Unicode, Geneva, Verdana, sans-serif;
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.6666666667;
    margin: 0 auto;
    padding: 0;
    width: 100%;
}

/* Header */
.header {
    text-align: center;
    margin: auto;
    width: 100%;
    padding: 2rem;
}

.header .logo-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 1rem;
}

.header .logo {
  width: 100%;
  max-width: 60%;
  height: auto;
  display: block;
}

.header .topnav a {
    color: #312f2b;
    float: center;
    text-decoration: none;
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .085em;
    padding-left: .625rem;
    padding-right: .625rem;
    text-transform: uppercase;
}

.header .topnav a:hover {
    text-decoration: underline;
}

.article-container {
    margin: auto;
    width: 95%;
    padding: 10px;
}

.article-container .article-header .sidebar-banner {
    float: left;
    width: 20%;
    padding: 10px;
}

.article-container .article-header .sidebar-banner a {
    display: block;
    padding-bottom: 83.0769230769%;
    position: relative;
    width: 100%;
}

.article-container .article-header .sidebar-banner a img {
    height: 100%;
    position: absolute;
    width: 100%;
}

.article-container .article-header .article-header-content {
    float: left;
    width: 80%;
    padding: 10px;
}

.article-container .article-header .article-header-content h4 {
    margin:0 0 .25rem;
    font-size: 1.125rem;
    font-weight: 300;
    letter-spacing: .085em;
    line-height: 1.6666666667;
    text-transform: uppercase;
}

.article-container .article-header .article-header-content a {
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .07rem;
    position: relative;
    text-transform: uppercase;
    color: #cf8a0c;
    text-decoration: none;
}

.article-container .article-header .article-header-content a:hover {
    text-decoration: underline;
}

.article-container .article-header .article-header-content .article-title {
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: -.01em;
    line-height: 1.2083333333;
}

.article-container .article-header .article-header-content .author {
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .07rem;
    text-transform: uppercase;
}

.article-container .article-header .article-header-content .date {
    font-size: .8125rem;
    font-weight: 400;
    margin-top: .125rem;
}

.article-container .article-content p {
    margin: 0 auto;
    max-width: 90%;
    padding: 40px 100px;
}

.article-container .article-content img {
    display: block;
    margin: auto;
    width: 100%;
    padding: 4px;
}

.article-container .article-content .row > .column {
    padding: 0 8px;
}

.article-container .article-content .row:after {
    content: "";
    display: table;
    clear: both;
}
.article-container .article-content .column {
    float: left;
    width: 33%;
}

/* Footer */
.footer {
    background-color: #dfd4bf;
    text-align: center;
    margin: auto;
    width: 100%;
    padding: 4rem;
}

.footer .nav-featured nav ul {
    list-style-type: none;
}

.footer .nav-featured li {
    display: inline-block;
    font-weight: 900;
    padding-left: .625rem;
    padding-right: .625rem;
    text-transform: uppercase;
}

.footer .nav-featured li a {
    font-size: 1.875rem;
    color: #312f2b;
    text-decoration: none;
}

.footer .nav-featured li a:hover {
    text-decoration: underline;
}

.footer .nav-featured li a.highlight {
    color: #cf8a0c;
}

.footer .outro {
    margin: 0 auto;
    max-width: 43.75rem;
    padding-top: 2rem;
}

.footer .nav-main {
    margin: 0 auto;
    max-width: 47.5rem;
    padding-top: 2rem;
}

.footer .nav-main nav ul {
    list-style-type: none;
}

.footer .nav-main li {
    display: inline-block;
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .085em;
    padding-left: .625rem;
    padding-right: .625rem;
    text-transform: uppercase;
}

.footer .nav-main li a {
    color: #312f2b;
    text-decoration: none;
}

.footer .nav-main li a:hover {
    text-decoration: underline;
}

.footer .nav-social {
    margin: 0 auto;
    padding-top: 2rem;
    width: 12.5rem;
}

.footer .nav-social ul {
    display: flex;
    justify-content: space-between;
    width: 100%;
    list-style-type: none;
}

.footer .nav-social a {
    display: block;
    height: 1.625rem;
    width: 1.625rem;
}

.footer .colophon {
    padding-top: 2rem;
}

.footer .colophon p {
    margin: 0 auto;
}

/* Medium devices (tablets, 768px and down) */
@media (max-width: 768px) {
    .header .logo {
        width: 100%;
        max-width: 100%;
        height: auto;
        display: block;
    }

    .article-container {
        width: 100%;
        padding: 0px;
    }

    .article-container .article-header .sidebar-banner {
        width: 30%;
        padding: 5px;
    }

    .article-container .article-header .article-header-content {
        width: 70%;
        padding: 5px;
    }

    .article-container .article-header .article-header-content h4 {
        font-size: 1rem;
        font-weight: 300;
        letter-spacing: 0.085em;
        line-height: 1;
    }

    .article-container .article-header .article-header-content a {
        font-size: 0.875rem;
        letter-spacing: .02rem;
    }

    .article-container .article-header .article-header-content .article-title {
        font-size: 2.5rem;
        letter-spacing: -.01em;
        line-height: 1;
    }

    .article-container .article-header .article-header-content .author {
        font-size: 0.875rem;
        letter-spacing: .02rem;
    }

    .article-container .article-content p {
        padding: 10px;
    }
}

/* Small devices (phones, 600px and down) */
@media (max-width: 600px) {
}

/* Extra small devices (≤ 400px) */
@media (max-width: 400px) {
}