/*******************
  BIG HERO
*******************/

.big-hero {
  position: relative;
  padding: calc(var(--gutter) * 4) 0;
  color: #fff;
}
.big-hero .ill::after {
  content: '';
  z-index: 5;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: 1s 1s;
}
.reveal .big-hero .ill::after {
  opacity: 0.75;
}

  .big-hero .ill.purple::after { background: var(--purple); }
  .big-hero .ill.mauve::after { background: var(--mauve); }
  .big-hero .ill.blue::after { background: var(--blue); }
  .big-hero .ill.orange::after { background: var(--orange); }
  .big-hero .ill.yellow::after { background: var(--yellow); }

.big-hero .content {
  z-index: 6;
  position: relative;
}