/* BODY */
body { font: 100%/1.71 Tahoma,sans-serif; color: #525252; padding: 0; margin: 0; }

/* HEADINGS */
h1, h2, h3, h4, h5 { font-weight: 400; line-height: 1; }
h1 { color: #00308f; font-size: 2.875rem; }
h3 { font-size: 1.5rem; line-height: 1.0833333; color: #2175d9; }

/* HELPER CLASSES */
.clearfix:after, .clearfix:before { content:""; display:table; }
.clearfix:after { clear: both; }

/* CONTENT */
.content { max-width: 1230px; margin: 30px auto 0; padding: 0 20px; box-sizing: border-box; }
.content.top-image { text-align: center; }
.content.top-image img { max-width: 300px; height: auto; }

/* TOP-IMAGE */
.top-image-holder { background: #f5f5f5; margin-top: 20px; }

/* FOOTER */
.footer { background: #525252; color: #fff; padding: 30px 0; }

/* LOGO */
.logo { max-width: 100px; }
.logo img { width: 100%; height: auto; }

/* BOXES */
.box-holder { margin-left: -20px; margin-right: -20px; padding-bottom: 40px; }
.box { box-sizing: border-box; }

@media(min-width: 768px)  {
    /* BOXES */
    .box { width: 50%; float: left; padding-left: 20px; padding-right: 20px; }
}

@media(max-width: 767px) {
    h1 { margin: 0; }

    /* BOXES */
    .box-holder { margin: 0; }

    /* CONTENT */
    .content { padding: 15px; }
    .content.top-image { padding: 0; }

    /* FOOTER */
    .footer { padding: 20px 0; }
    .footer .content { margin: 0; }
}