$mainblue: #152935;
$maingrey: #F5F5F5;
$brighterblue: #3D70B2;
$accentgrey: #dadada;
$tableblue-odd: #182336;
$palegrey: #e6e6e6;
$tableblue-even: #1F2F4E;
$orange: #ff9800;

main.logos ol,
main.logos p,
main.logos ul {
  max-width: 40rem;
  margin: 1rem auto;
  width: 80%;
  line-height: 1.8rem;
}

.logo {
  background-image: linear-gradient(45deg, #e6e6e6 25%, transparent 25%), linear-gradient(-45deg, #e6e6e6 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e6e6e6 75%), linear-gradient(-45deg, white 75%, #e6e6e6 75%);
  background-size: 1em 1em;
  background-position: 0 0, 0 0.5em, 0.5em -0.5em, -0.5em 0;
  height: 5em;
  margin: 1em;
  padding: 0.5em;
}

.guidelines {
  text-align: left;
}

.logo-white {
  background: #152935;
}

.banner {
  height: 14em;
}

.table {
  display: table;
  background-image: linear-gradient(45deg, #e6e6e6 25%, transparent 25%), linear-gradient(-45deg, #e6e6e6 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e6e6e6 75%), linear-gradient(-45deg, white 75%, #e6e6e6 75%);
  background-size: 1em 1em;
  background-position: 0 0, 0 0.5em, 0.5em -0.5em, -0.5em 0;
  border-collapse: separate;
  border-spacing: 1em;
  margin: 0 auto;
}

.row {
  display: table-row;
}

.square {
  width: 5em;
  height: 5em;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.mainblue {
  background-color: $mainblue;
  color: white;
}

.brighterblue {
  background-color: $brighterblue;
  color: white;
}

.tableblue-odd {
  background-color: $tableblue-odd;
  color: white;
}

.tableblue-even {
  background-color: $tableblue-even;
  color: white;
}

.maingrey {
  background-color: $maingrey;
  color: black;
}

.accentgrey {
  background-color: $accentgrey;
  color: black;
}

.palegrey {
  background-color: $palegrey;
  color: black;
}

.orange {
  background-color: $orange;
  color: black;
}
