.color__container {
  display: flex;
  flex-flow: row wrap;
}

.color {
  width: 33%;
  min-height: 100px;
  margin-bottom: 30px;
}

.color-name {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
}

.color-square {
  display: block;
  width: 100%;
  height: 60px;
}

.color__black {
  background: black;
}

.color__white {
  background: white;
}

.color__translucent {
  background: rgba(255, 255, 255, 0.7);
}

.color__grey {
  background: #71767a;
}

.color__grey--light {
  background: #a5a9ac;
}

.color__grey--lightest {
  background: whitesmoke;
}

.color__grey--dark {
  background: #404345;
}

.color__page-background-color {
  background: #f5f5f5;
}

.color__primary-color {
  background: #005ea2;
}

.color__primary-color--light {
  background: #0998ff;
}

.color__primary-color--dark {
  background: #00233c;
}

.color__secondary-color {
  background: #707070;
}

.color__secondary-color--light {
  background: #a3a3a3;
}

.color__secondary-color--dark {
  background: white;
}

.color__tertiary-color {
  background: #04c585;
}

.color__tertiary-color--light {
  background: #34fbb9;
}

.color__tertiary-color--dark {
  background: #026142;
}

.styleguide__container {
  width: 80%;
  margin: 40px auto 0;
}

.styleguide {
  margin-bottom: 40px;
  padding: 20px;
  border: 2px solid #a0a0a0;
  border-radius: 2px;
  background: #fff;
}

.styleguide h2 {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: normal;
}

.styleguide__header {
  margin-bottom: 0;
}

.styleguide .small {
  font-size: 90%;
  line-height: 1.6;
}

code {
  color: #808080;
  font-family: monospace;
  font-size: 120%;
  font-weight: bold;
}
/*# sourceMappingURL=styleguide.css.map */