/* -----------------------------------------------------
STYLE GUIDE MANIFEST
----------------------------------------------------- */
/* -----------------------------------------------------
STRUCTURE
----------------------------------------------------- */
.content {
  width: 100%; }
  @media (min-width: 1025px) and (max-width: 1200px) {
    .content {
      width: 90%; } }
  @media (min-width: 1201px) {
    .content {
      width: 70%; } }

/* -----------------------------------------------------
COLOUR PALETTES
----------------------------------------------------- */
.palette {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: flex-start; }
  .palette .palette-colour {
    margin: 20px 1% 20px 0;
    min-width: 30%; }
    .palette .palette-colour .colour-chip {
      color: #ffffff;
      font-weight: bold;
      height: 50px;
      margin-bottom: 5px;
      padding: 10px;
      width: 100%; }
    .palette .palette-colour .colour-name {
      text-transform: uppercase;
      font-weight: 700; }
    .palette .palette-colour p {
      font-size: 14px;
      margin-bottom: 5px;
      padding: 0 10px; }

/* -----------------------------------------------------
TYPOGRAPHY
----------------------------------------------------- */
.typeface-sans {
  font-family: "Noto Sans", "Trebuchet MS", sans-serif; }

.typeblock {
  display: block;
  padding: 20px;
  margin-bottom: 40px;
  background-color: #C7FEF1;
  border-left: 5px solid #00C596; }
  .typeblock p, .typeblock span {
    color: black;
    margin-bottom: 0; }

h2, h3, h4 {
  margin: 10px 0; }

p {
  margin-bottom: 20px; }

.content ul {
  padding: 0 20px;
  margin-bottom: 40px; }
  .content ul li {
    list-style: disc; }

/* -----------------------------------------------------
DOCUMENTATION
----------------------------------------------------- */
.grid-examples {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start; }

.grid-examples img {
  height: auto;
  align-self: flex-start; }

/* -----------------------------------------------------
PANELS
----------------------------------------------------- */
.panel {
  background-color: rgba(20, 200, 225, 0.2);
  border: 2px solid rgba(20, 200, 225, 0.5);
  margin-bottom: 20px;
  padding: 10px 20px; }
  .panel h1 {
    border-bottom: 2px solid rgba(20, 200, 225, 0.5);
    font-size: 24px;
    font-weight: normal;
    line-height: 37px;
    margin-bottom: 10px;
    padding-bottom: 10px; }
  .panel :last-child {
    margin-bottom: 0; }

.version-tag {
  font-style: italic;
  font-weight: bold; }

/*# sourceMappingURL=styleguide.css.map */