body {
    background-color: #c3ab8a;
    font: 100%/1.7 oxygen, inconsolata, monospace, sans-serif;
    color: #222;
    padding: 0px;
    margin: 0px;
}

body a:link, a:visited {
    font-weight: normal;
}

body a:link, a:hover {
    font-weight: bold;
    text-decoration: underline;
}

#content-main {
    margin-top: -17px;    
    padding: 0px 43px 0px;
}
@media (max-width: 768px) {
    #content-main {
        margin-top: -17px;
        padding: 0px 13px 0px;
    }
}

div {
    overflow: auto;
    margin-bottom: 20px;
}

img {
    float: left;
    margin-right: 30px;
}

@charset "UTF-8";
body {
  font-family: Lato, Arial, sans-serif; }

h1.title, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: Lato, Arial, sans-serif; }

button, .button {
  font-family: Lato, Arial, sans-serif; }

h1, h2, h3, h4, h5, h6 {
  color: #222; }

#top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding-top: 10px;
    padding-bottom: 10px;
}

#logo {
    display: inline-block;
    width: 34%;
    height: 124px;
    background-image: url("/static/images/untwelve-logo-ffe.png");
    background-repeat: no-repeat;
    background-position-y: 14px;
    border-bottom: 2px solid black;
    margin-right: -5px;
    background-color: #ffe;
    margin-top: -18px;  
}
@media (max-width: 768px) {
    #logo {
        display: block;
        width: 100%;
    }
}

#navigation {
    display: inline-block;
    vertical-align: top;
    width: 66%;
    background-color: firebrick;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    height: 126px;
    margin-top: -20px;
}
@media (max-width: 768px) {
    #navigation {
        display: block;
        width: 100%;
        height: 100px;
        margin-top: -20px;
        margin-bottom: 20px;
        border-left: 0px;
    }
}

#navigation li {
    display: inline-block;
    vertical-align: top;
    margin-top: 34px;
    padding: 17px 5% 0px 8%;
}
@media (max-width: 768px) {
    #navigation li {
        padding: 17px 1% 0px 5%;
        padding-top: 0px;
    }
}

#navigation a {
    color: #222;
}

#action-buttons {
  margin-bottom: 64px;
  text-align: center; }
  #action-buttons button,
  #action-buttons .button {
    margin: 0 4px; }
  #action-buttons p {
    margin: 0;
    margin-top: 20px;
    font-size: 13px;
    line-height: 20px;
    color: rgba(0, 0, 0, 0.5); }

.content {
  max-width: 840px;
  margin: auto; }

#footer {
  display: flex;
  border-top: 1px solid #eee;
  margin: 104px 0;
  padding: 0 28px;
  padding-top: 24px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.5); }
  #footer p {
    order: 1; }
  #footer nav {
    order: 2;
    margin-left: auto; }
  #footer nav ul {
    display: flex; }
  #footer nav ul li {
    margin-left: 20px; }
  #footer nav ul li span {
    color: rgba(0, 0, 0, 0.3); }
  #footer nav ul li a {
    color: rgba(0, 0, 0, 0.65);
    text-decoration: none; }
  #footer nav ul li a:hover {
    color: #000;
    text-decoration: underline; }

#copyright {
    font-size: 10px;
    text-align: right;
    }

ul.share-buttons{
  list-style: none;
  padding: 0;
}

ul.share-buttons li{
  display: inline;
}

ul.share-buttons .sr-only {
  position: absolute;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}