@font-face {
  font-family: 'Header Font';
  src: url("/css/fonts/headerfont-regular-webfont.woff2") format("woff2"), url("/css/fonts/headerfont-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

*, *:before, *:after {
  box-sizing: border-box; }

main {
  min-height: 50vh;
  min-width: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
  flex-flow: column wrap; }
  @media (min-width: 45em) {
    main {
      min-height: 84vh; } }

html, body {
  -webkit-font-smoothing: antialiased;
  color: #5d5b5e;
  font-family: -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300; }

h1, h2, h3, h4, h5, h6 {
  font-family: "Header Font";
  font-weight: normal; }

a {
  text-decoration-skip: ink;
  /* color: #444; */
  text-decoration-color: #beb9c6;
  /* border-bottom: 3px solid #b4e7f8; */
  /* box-shadow: inset 0 -1rem 0 #b4e7f8; */
  color: inherit;
  /* -webkit-transition: background .15s cubic-bezier(.33,.66,.66,1); */
  transition: color 0.15s cubic-bezier(0.33, 0.66, 0.66, 1), text-decoration-color 0.15s cubic-bezier(0.33, 0.66, 0.66, 1); }
  a:hover {
    color: #ff6b61;
    text-decoration-color: #ff6b61; }

strong {
  font-weight: bold; }

.teaser {
  font-size: 1.75rem;
  line-height: 1.4;
  max-width: 100vw;
  width: 100%;
  text-align: left;
  font-family: "Header Font";
  margin-top: -10vh; }
  @media (min-width: 45em) {
    .teaser {
      max-width: 50vw;
      font-size: 3vw; } }

.stopper {
  margin-top: 10vh;
  transform: rotate(20deg) scale(1.3); }
  @media (min-width: 45em) {
    .stopper {
      position: absolute;
      right: 2vw;
      top: 16vh; }
      .stopper img {
        width: 80%; } }
  @media (min-width: 61.25em) {
    .stopper {
      position: absolute;
      right: 9vw;
      top: 16vh; }
      .stopper img {
        width: 100%; } }

.supporting {
  font-size: 1rem;
  margin-top: 2rem;
  text-align: right; }

.top-bar {
  padding: 2rem;
  text-align: center;
  height: 20rem;
  background-color: white; }
  .top-bar .menu {
    background-color: white; }
  @media (min-width: 45em) {
    .top-bar {
      height: 9rem; } }

.top-bar-right {
  float: right;
  display: flex;
  justify-content: center;
  left: 2rem;
  right: 2rem;
  top: 14rem;
  text-transform: uppercase;
  letter-spacing: .1rem;
  font-size: .8rem;
  font-weight: 500;
  width: 100%; }
  .top-bar-right a {
    text-decoration: none; }
  .top-bar-right ul {
    padding: 0; }
    .top-bar-right ul li {
      display: inline-block;
      list-style: none;
      padding: 1rem; }
  @media (min-width: 45em) {
    .top-bar-right {
      top: 2rem;
      justify-content: flex-end;
      width: calc(100% - 10rem); } }

h1 {
  font-family: "Header Font";
  text-transform: capitalize;
  font-weight: normal;
  font-size: 3rem; }

#tags h1 {
  text-transform: none; }

#logo {
  margin: 0 auto;
  z-index: 999; }
  #logo img {
    width: 50vw; }
  @media (min-width: 45em) {
    #logo {
      float: left;
      margin: 0;
      left: 2rem;
      top: 2rem; }
      #logo img {
        width: 10rem; } }

#content, .locations-list {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  padding: .75rem;
  max-width: 100vw; }
  #content img, .locations-list img {
    max-width: 100%; }
  #content pre, .locations-list pre {
    max-width: calc(100vw - 4rem);
    overflow: auto;
    background: #fdf6e3; }

.simple-page {
  width: 80%;
  display: block;
  margin: auto;
  text-align: left; }

.team {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row wrap;
  align-content: flex-start;
  align-items: flex-start; }
  @media (min-width: 45em) {
    .team {
      margin-top: 5vw; } }

.technologies {
  display: flex;
  flex-flow: column wrap; }

.team-member, .location {
  flex: 1 1 100%;
  padding: 1rem;
  display: flex;
  flex-flow: column wrap; }
  @media (min-width: 45em) {
    .team-member, .location {
      flex: 0 0 50%;
      padding: 2rem; } }
  @media (min-width: 61.25em) {
    .team-member, .location {
      flex: 0 0 33.33%; } }
  .team-member h3, .location h3 {
    font-size: 1.4rem;
    margin-bottom: .5rem;
    width: 100%;
    text-align: center; }
  .team-member .title, .location .title {
    margin-bottom: 1rem;
    color: #999;
    text-transform: uppercase;
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .1rem;
    text-align: center; }
  .team-member .description, .location .description {
    line-height: 1.4;
    margin-top: 0;
    margin-bottom: 1rem;
    text-align: left; }
  .team-member .email, .location .email {
    font-weight: 500; }

.technology, .project {
  flex: 1 1 100%;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-flow: column nowrap; }
  @media (min-width: 45em) {
    .technology, .project {
      flex: 0 0 50%;
      padding: 2rem; } }
  .technology .description, .project .description {
    text-align: left; }

.services .button {
  margin: 2rem 0; }

.locations-list {
  display: flex;
  flex-flow: row wrap;
  padding: 0;
  max-width: 70rem;
  justify-content: center; }
  @media (min-width: 81.25em) {
    .locations-list {
      max-width: 80rem; } }
  .locations-list li {
    list-style: none;
    padding: 2rem;
    flex: 1 1 100%;
    line-height: 1.4; }
    @media (min-width: 45em) {
      .locations-list li {
        flex: 1 1 50%; } }
    @media (min-width: 61.25em) {
      .locations-list li {
        flex: 0 1 50%; } }
    @media (min-width: 81.25em) {
      .locations-list li {
        flex: 0 1 50%; } }

.services-list {
  display: flex;
  flex-flow: row wrap;
  padding: 0;
  max-width: 70rem;
  justify-content: center; }
  @media (min-width: 81.25em) {
    .services-list {
      max-width: 80rem; } }
  .services-list li {
    list-style: none;
    padding: 2rem;
    flex: 1 1 100%;
    line-height: 1.4; }
    @media (min-width: 45em) {
      .services-list li {
        flex: 1 1 50%; } }
    @media (min-width: 61.25em) {
      .services-list li {
        flex: 0 1 33.33%; } }
    @media (min-width: 81.25em) {
      .services-list li {
        flex: 0 1 33.33%; } }
    .services-list li a {
      display: flex;
      flex-flow: column wrap;
      min-height: 6rem;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 4rem;
      text-decoration: none;
      color: rgba(93, 91, 94, 0.5); }
    .services-list li .description {
      line-height: 1.4; }
  .services-list .services-thumb {
    width: 4rem; }

.technologies-list, .projects-list {
  display: flex;
  flex-flow: row wrap;
  padding: 0;
  max-width: 70rem; }
  @media (min-width: 81.25em) {
    .technologies-list, .projects-list {
      max-width: 80rem; } }
  .technologies-list li, .projects-list li {
    list-style: none;
    padding: 2rem;
    flex: 1 1 100%;
    /* Nick planned to have the names and lines under the images
           which would be nice. But only if the images have the same
           height which they don't right now. Putting the line above
           the name is a hack and probably doesn't even look too good.
           It's a temporary measure. */ }
    @media (min-width: 45em) {
      .technologies-list li, .projects-list li {
        flex: 1 1 50%; } }
    @media (min-width: 61.25em) {
      .technologies-list li, .projects-list li {
        flex: 1 1 25%; } }
    @media (min-width: 81.25em) {
      .technologies-list li, .projects-list li {
        flex: 1 1 20%; } }
    .technologies-list li .header, .projects-list li .header {
      display: flex;
      flex-flow: column wrap;
      min-height: 6rem;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 4rem;
      text-decoration: none;
      color: rgba(93, 91, 94, 0.5); }
  .technologies-list .tech-thumb, .projects-list .tech-thumb {
    width: 4rem; }
  .technologies-list .project-thumb, .projects-list .project-thumb {
    max-width: 100%;
    max-height: 8.5em; }

.opensourced-list {
  display: flex;
  flex-flow: row wrap;
  padding: 0;
  max-width: 70rem;
  justify-content: center; }
  @media (min-width: 81.25em) {
    .opensourced-list {
      max-width: 80rem; } }
  .opensourced-list li {
    list-style: none;
    padding: 2rem;
    flex: 1 1 100%;
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between; }
    @media (min-width: 45em) {
      .opensourced-list li {
        flex: 1 1 100%; } }
    @media (min-width: 61.25em) {
      .opensourced-list li {
        flex: 0 1 50%; } }
    @media (min-width: 81.25em) {
      .opensourced-list li {
        flex: 0 1 33.33%; } }
    .opensourced-list li h3 {
      font-family: -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
      font-weight: 700; }
    .opensourced-list li a {
      display: flex;
      flex-flow: column wrap;
      min-height: 6rem;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 4rem;
      text-decoration: none;
      color: rgba(93, 91, 94, 0.5); }
    .opensourced-list li:after {
      content: "";
      position: relative;
      border-top: 1px solid rgba(93, 91, 94, 0.2);
      width: 50%;
      padding-top: 2rem;
      /* background: green; */
      display: block;
      margin: 0 auto;
      margin-top: 2rem; }
  .opensourced-list .tech-thumb {
    width: 4rem; }

.projects-list li a {
  min-height: 3rem;
  color: rgba(93, 91, 94, 0.7); }

.clients-list {
  display: flex;
  flex-flow: row wrap;
  padding: 0;
  max-width: 70rem; }
  @media (min-width: 81.25em) {
    .clients-list {
      max-width: 80rem; } }
  .clients-list li {
    list-style: none;
    padding: 2rem;
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center; }
    @media (min-width: 45em) {
      .clients-list li {
        flex: 1 1 33.33%; } }
    @media (min-width: 61.25em) {
      .clients-list li {
        flex: 1 1 25%; } }
    .clients-list li a {
      display: flex;
      flex-flow: column wrap;
      min-height: 6rem;
      align-items: center;
      justify-content: center;
      margin-bottom: 4rem;
      text-decoration: none;
      color: rgba(93, 91, 94, 0.5);
      max-width: 12rem;
      filter: grayscale(10%);
      opacity: .5;
      transition: .2s filter ease, .2s opacity ease; }
      .clients-list li a:hover {
        opacity: 1;
        filter: none; }
      .clients-list li a img {
        max-width: 100%;
        width: 12rem; }
  .clients-list .tech-thumb {
    width: 4rem; }

.team-picture {
  text-align: center;
  margin-bottom: 1rem; }
  .team-picture img {
    max-width: 30vw;
    margin: 0 auto; }
  @media (min-width: 45em) {
    .team-picture img {
      max-width: 8vw; } }

.team-member {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1em; }

pre code {
  margin-bottom: 1em; }

/* BEGIN: Styling Author Section
 * If there are two authors, show them in the same line with comma separation */
section.author + section.category {
  clear: left; }

section.author + section.author:before {
  content: ", "; }

#atom-feed {
  background: url(/img/rss.svg);
  background-size: 1em;
  background-repeat: no-repeat;
  padding: 0 1em; }

.technology-wrapper, .project-wrapper {
  flex-flow: column wrap;
  justify-content: flex-start; }

.technology, .project {
  max-width: 40rem; }
  .technology h1, .project h1 {
    margin-bottom: 1rem; }
  .technology p, .project p {
    font-size: 1.2rem;
    text-align: left;
    line-height: 1.4; }
  .technology img, .project img {
    max-width: 10rem; }
  .technology .tech, .project .tech {
    padding-right: 1em; }
  .technology ul, .project ul {
    text-align: left; }

.project img {
  max-width: 100%; }

.project .project-technologies {
  display: flex;
  flex-direction: column; }
  .project .project-technologies .tech {
    margin-bottom: 0.5em; }

.back-tech {
  margin-bottom: 10vh;
  color: #5d5b5e;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: baseline; }
  .back-tech svg {
    fill: currentColor;
    width: 2rem;
    height: 2rem;
    margin-right: 1rem; }

footer {
  background: #ecebf2;
  color: #5d5b5e;
  display: flex;
  flex-flow: column nowrap;
  text-align: center;
  align-items: center;
  padding: 2rem; }
  footer p {
    line-height: 1.4; }
  footer .name {
    font-weight: 700; }
  footer div {
    margin-bottom: .5rem; }

#projects .card img {
  padding: 50px;
  max-height: 250px; }

.button {
  padding: 1rem 2rem;
  border-radius: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: .2s background-color ease, .2s color ease; }
  .button.primary {
    background-color: #32b67a;
    color: white; }
  .button.secondary {
    background-color: #cdffcc; }
    .button.secondary:hover {
      background-color: #32b67a;
      color: white; }

#errors h1, #errors h2, #errors h3 {
  flex: 100%; }

#errors #text {
  flex: 1;
  margin-right: 3em; }

#errors #image {
  flex: 1; }

#blog .top-bar, #errors .top-bar {
  height: 10rem; }

#blog main, #errors main {
  max-width: 80rem;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  max-width: 70rem;
  margin: 0 auto;
  justify-content: space-between;
  align-items: stretch;
  text-align: left;
  padding: 2rem;
  flex-flow: row wrap;
  padding: 2rem 1rem; }

#blog #content, #errors #content {
  width: 100%; }
  @media (min-width: 45em) {
    #blog #content, #errors #content {
      width: 80%; } }

#blog .team #content, #errors .team #content {
  width: 100%; }

#blog #pagination, #errors #pagination {
  width: 100%;
  text-align: center;
  white-space: nowrap;
  font-size: 1.5em;
  border: 3px solid rgba(93, 91, 94, 0.1);
  padding: 6px;
  background: rgba(93, 91, 94, 0.25);
  border-radius: 1em; }
  #blog #pagination .pager:not(:last-child), #errors #pagination .pager:not(:last-child) {
    margin-right: 1em; }
  #blog #pagination #current-page, #errors #pagination #current-page {
    font-weight: bold; }

#blog .sidebar .categories, #errors .sidebar .categories {
  font-size: 1.25rem; }

#blog .sidebar ul, #errors .sidebar ul {
  padding: 0; }
  #blog .sidebar ul li, #errors .sidebar ul li {
    list-style: none;
    margin-bottom: .75rem; }
    #blog .sidebar ul li a, #errors .sidebar ul li a {
      text-decoration: none;
      font-weight: 500;
      display: flex;
      align-items: center; }
      #blog .sidebar ul li a .badge, #errors .sidebar ul li a .badge {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 1.5rem;
        height: 1.5rem;
        margin: auto;
        margin-left: .5rem;
        background: rgba(93, 91, 94, 0.2);
        border-radius: .75rem;
        font-size: .75rem; }
      #blog .sidebar ul li a:hover .badge, #errors .sidebar ul li a:hover .badge {
        background: #ff6b61;
        color: white; }

#blog .sidebar code, #errors .sidebar code {
  background-color: white !important;
  border: none; }

.author-icon, .tag-icon {
  width: 1rem;
  float: left;
  opacity: .5;
  margin-right: .375rem; }

.single-post .tags {
  margin-top: 3rem; }

.single-post #content {
  margin: 0 auto; }

.blog-post {
  margin-bottom: 3rem;
  width: 100%; }
  .blog-post .byline {
    display: inline-block; }
  .blog-post .tags {
    list-style: none; }
    .blog-post .tags ul {
      padding-left: .375rem; }
    .blog-post .tags li {
      margin-bottom: .375rem; }
      .blog-post .tags li.tag a {
        text-decoration: none; }
    .blog-post .tags .tag, .blog-post .tags .category a {
      display: inline-block;
      background: rgba(93, 91, 94, 0.1);
      padding: .375rem .5rem;
      border-radius: 1rem;
      margin-right: .375rem;
      font-size: .75rem;
      font-weight: 500; }
    .blog-post .tags .category {
      display: inline-block; }
    .blog-post .tags .category a {
      background: rgba(93, 91, 94, 0.25);
      text-decoration: none; }
      .blog-post .tags .category a:hover {
        background: #ff6b61;
        color: white; }
  .blog-post .article-body, .blog-post .article-section {
    line-height: 1.4;
    color: #777478;
    font-weight: 300; }
  .blog-post .read-more {
    font-weight: 700; }

.author {
  font-weight: 500; }

.headline {
  font-size: 2rem;
  margin: 1rem 0; }
  .headline a {
    text-decoration: none; }

.post-meta {
  color: rgba(93, 91, 94, 0.3);
  font-size: .8rem;
  text-transform: uppercase; }

#ie-fallback {
  padding: 5%; }
  #ie-fallback .logo {
    width: 30%;
    margin: 0 auto; }
  #ie-fallback .content {
    text-align: center; }
  #ie-fallback footer {
    margin-top: 4em;
    color: #5d5b5e;
    text-align: center;
    background: #ecebf2; }
  #ie-fallback .download {
    font-size: 2em; }
  #ie-fallback .download img {
    max-height: 2em; }

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px; }
  blockquote p {
    margin: 0; }

img.center {
  display: block;
  margin-left: auto;
  margin-right: auto; }

#blog-index #content .blog-post {
  display: flex;
  flex-direction: row;
  flex-basis: auto;
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.1);
  padding: 1em; }
  #blog-index #content .blog-post .keywords {
    /* Pad the size of tag.svg, so that hanging lines are aligned. */
    padding-left: 28px; }
  #blog-index #content .blog-post .headline {
    font-size: 1.7rem;
    margin: 0 0 1em; }
  #blog-index #content .blog-post .metadata {
    width: 80%;
    margin-right: 1em; }
  #blog-index #content .blog-post .description {
    width: 100%; }
    #blog-index #content .blog-post .description img {
      max-height: 15em;
      margin: auto;
      display: block;
      margin-bottom: 2em; }

.logo-combo {
  display: flex;
  font-size: 500%;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  width: 80%; }