$minWidth: 315px;

/* greens */
$colorTurquoise: #1abc9c;
$colorGreenSea: #16a085;

/* blues */
$colorPeterRiver: #3498db;
$colorBelizeHole: #2980b9;

/* violets */
$colorAmethyst: #9b59b6;
$colorWisteria: #8e44ad;

/* blacks / dark blues */
$colorWetAsphalt: #34495e;
$colorMidnightBlue: #2c3e50;

/* yellows */
$colorSunFlower: #f1c40f;
$colorOrange: #f39c12;

/* oranges */
$colorCarrot: #e67e22;
$colorPumpkin: #d35400;

/* reds */
$colorAlizarin: #e74c3c;
$colorPomegranate: #c0392b;

/* whites */
$colorClouds: #ecf0f1;
$colorSilver: #bdc3c7;
$colorWhite: #fefefe;

/* grays */
$colorConcrete: #95a5a6;
$colorAsbestos: #7f8c8d;

/* -- */

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

html,
body {
  background: $colorWhite;
  color: $colorWhite;
  font: normal 16px/1em 'Lato';
  margin: 0;
  min-width: $minWidth;
  padding: 0;
}

.u-text-center {
  text-align: center;
}

.u-light-bg {
  background: $colorTurquoise;
}

.u-dark-bg {
  background: #17a689;
}

.u-alt-bg {
  background: #148f77;
}

.u-block {
  min-height: 80px;
  line-height: 1.25em;
  padding: 10px;
}

@media only screen and (min-width: 331px) and (max-width: 500px) {
  .u-block {
    font-size: .85em;
    padding: 5px;
    word-wrap: break-word;
  }
}

@media only screen and (max-width: 330px) {
  .u-block {
    font-size: 0;
    padding: 0;
  }
}

.u-buffer-bottom {
  padding-bottom: 20px;
}

.outer-container {
  @neat-outer-container;
}

header,
footer {
  background: $colorTurquoise;
  padding: 20px;
  width: 100%;

  h1 {
    cursor: default;
    font-size: 1.5em;
    font-weight: normal;
    line-height: 1.25em;
    margin: 0;
    padding: 0;
  }
}

.global-wrapper {
  @neat-outer-container;
  @neat-show-grid; /* defaults to 1 12 */
  padding-bottom: 40px;
  position: relative;
}

.section-block {
  position: relative;
  z-index: 1;
}

.outer-container__heading {
  color: $colorWetAsphalt;
  cursor: default;
  font-size: 1.15em;
  font-weight: bold;
  margin: 0;
  padding: 40px 0 20px;
}

.outer-container__top-label {
  font-size: 1.05em;
  padding-bottom: 20px;
}

/* -- */
.basic__outer {
  @neat-outer-container;
  padding: 20px 0;
}

.basic__outer__col {
  @neat-span-columns 6;
}

/* -- */
.multiple-rows__outer {
  @neat-outer-container;
  padding: 20px 0 0;

  .u-block {
    margin-bottom: 20px;
  }
}

.multiple-rows__1 {
  @neat-span-columns 1;
}

.multiple-rows__11 {
  @neat-span-columns 11;
  @neat-omega;
}

.multiple-rows__2 {
  @neat-span-columns 2;
}

.multiple-rows__10 {
  @neat-span-columns 10;
  @neat-omega;
}

.multiple-rows__3 {
  @neat-span-columns 3;
}

.multiple-rows__9 {
  @neat-span-columns 9;
  @neat-omega;
}

.multiple-rows__4 {
  @neat-span-columns 4;
}

.multiple-rows__8 {
  @neat-span-columns 8;
  @neat-omega;
}

.multiple-rows__5 {
  @neat-span-columns 5;
}

.multiple-rows__7 {
  @neat-span-columns 7;
  @neat-omega;
}

.multiple-rows__6 {
  @neat-span-columns 6;
}

/* -- */
.nesting-columns__outer {
  @neat-outer-container;
  padding: 20px 0;
}

.nesting-columns__4 {
  @neat-span-columns 4;
}

.nesting-columns__8 {
  @neat-span-columns 8;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

.multiple-rows__48 {
  @neat-span-columns 4 8;
}

/* -- */
.table__outer {
  @neat-outer-container;
  padding: 20px 0 0;
}

.table__row {
  @neat-fill-parent;
  @neat-row table;
}

.table__cell--4 {
  @neat-span-columns 4 12 table;
  @neat-pad;

  /* just a visual thing */
  border-right: 1px solid #17a689;
}

/* this is also visual thing */
@media only screen and (max-width: 330px) {
  .table__cell--4 {
    padding-bottom: 40px;
  }
}

.table__cell--8 {
  @neat-span-columns 8 12 table;
  @neat-pad;
}

/* -- */
.shift__outer {
  @neat-outer-container;
  padding: 20px 0;
}

.shift__nested {
  @neat-span-columns 6;
  @neat-shift 3;
}

/* -- */
.auto-rows__outer {
  padding: 20px 0 0;
}

.auto-rows__list {
  @neat-outer-container;
}

.auto-rows__list__item {
  @neat-span-columns 3;
  @neat-omega 4n;
  margin-bottom: 20px;
  min-height: 140px;
}

/* -- */
.mixed__outer {
  @neat-outer-container;
  padding: 20px 0;
}

.mixed__list {
  @neat-outer-container;
}

.mixed__list__item {
  @neat-span-columns 3;
  @neat-omega 3n;
  margin-bottom: 20px;
  min-height: 180px;

  &:nth-child(4) {
    @neat-shift 3;
  }
}

/* -- */
.media__outer {
  @neat-outer-container;
  padding: 20px 0;
}

.media__4 {
  @neat-span-columns 4;
}

@media (max-width: 500px) {
  .media__4 {
    @neat-span-columns 6;
  }
}

.media__8 {
  @neat-span-columns 8;
}

@media (max-width: 500px) {
  .media__8 {
    @neat-span-columns 6;
  }
}