/*
----------------------------------------
RESET
----------------------------------------
http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*
----------------------------------------
CUBES REVISITED STYLES
----------------------------------------
Global
------------------------------
*/

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

html {
  font-size: 100%;
}

@media screen and (min-width: 40em) {
  html {
    font-size: 112.5%; /* 18/16 */
  }
}

body {
  background: hsl(0,0%,15%);
  color: hsl(0,0%,70%);
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.5;
}

main {
  background: black;
  position: relative;
  z-index: 1;
}

a {
  border-bottom: 1px solid hsl(0,0%,60%);
  color: inherit;
  text-decoration: none;
}

a:focus,
a:hover {
  color: white;
  border-bottom: 1px solid hsl(0,0%,60%);
}

@media print {
  @page {
    margin-top: 1in;
    margin-bottom: 1in;
  }
  html {
    font-size: 10pt;
  }
  body {
    background: transparent;
    color: black;
  }
  main {
    background: transparent;
  }
  a {
    border-bottom: none;
    text-decoration: underline;
  }
  a[href^=http]:after {
    content: " (" attr(href) ")";
    overflow-wrap: break-word;
  }
}

em,
cite {
  font-style: italic;
}

.home cite,
footer cite {
  font-style: normal;
}

.home cite:before,
footer cite:before {
  content: "‘";
}

.home cite:after,
footer cite:after {
  content: "’";
}

img,
svg {
  display: block;
  width: 100%;
}

::-moz-selection {
  color: white;
  background-color: hsl(0,0%,70%);
}

::selection {
  color: white;
  background-color: hsl(0,0%,70%);
}

/*
------------------------------
Cubes
------------------------------
*/

#main {
  padding: 3px;
}

@media screen and (min-width: 400px) {
  #main {
    padding: 1em;
  }
}

@media print {
  #main {
    padding: 0;
  }
}

/*
------------------------------
Navigation
------------------------------
*/

/* Global Nav ------------- */

.site-nav {
  margin: 0 auto;
  max-width: 480px;
}

@media print {
  .site-nav {
    display: none;
  }
}

.v-subhead:hover {
  cursor: default;
}

.v-list {
  -moz-font-feature-settings:"tnum" 1; 
  -ms-font-feature-settings:"tnum" 1; 
  -o-font-feature-settings:"tnum" 1; 
  -webkit-font-feature-settings:"tnum" 1; 
  font-feature-settings:"tnum" 1;
  margin: 0 auto;
  padding: 0 3px;
}

.v-item {
  margin-bottom: 3px;
}

.v-link,
.v-link:focus,
.v-link:hover {
  align-items: center;
  border: none;
  display: flex;
}

.v-link._01 .amount,
.v-link._02 .amount,
.v-link._10 .amount,
.v-link._11 .amount {
  padding-left: 1ch;
}

.site-nav .icon-wrap {
  flex-grow: 1;
  margin-right: 5%;
}

.site-nav .icon {
  fill: none;
  margin: 0 0 0 auto;
  max-width: 3em;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.25px;
}

.site-nav .label {
  flex-grow: 1.5;
  padding-left: 1ch;
  text-align: left;
}

.v-item:nth-child(n+10) p {
  padding-left: 0;
}

@supports (display: grid) {
  @media screen and (min-width: 30em) {
    .site-nav {
      max-width: 30em;
    }
    .v-list {
      display: grid;
      grid-gap: 3px;
      grid-template-columns: 1fr 1fr;
    }
    .v-item {
      margin: 0;
      min-width: auto;
    }
  }
  @media screen and (min-width: 45em) {
    .site-nav {
      max-width: 45em;
    }
    .v-list {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  @media screen and (min-width: 65em) {
    .site-nav {
      max-width: calc(60em + 6px);
    }
    .v-list {
      grid-template-columns: repeat(4, 1fr);
    }
  }
}


/* Header Nav ------------- */

/* Header container */

.site-header {
  background: hsl(0,0%,15%);
  line-height: 1;
  padding: 1em 1em 1.5em;
  position: relative;
  text-align: center;
  z-index: 2;
}

@media print {
  .site-header {
    display: none;
  }
}

@media screen and (min-width: 36em) {
  .site-header {
    padding: 1.5em;
  }
}

@media screen and (min-height: 33em) {
  .js-enabled .site-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }
}

@media print {
  .site-header {
    background: transparent;
  }
}

.site-header a {
  border: none;
}


/* Home link, nav container */

.skip {
  display: none;
}

.site-header .home {
  color: white;
  font-weight: bold;
  margin-bottom: 1em;
}

.js-enabled .site-header .home {
  margin-bottom: 1.5em;
}

.site-header .site-nav {
  margin: 0 auto;
  max-width: 65ch;
}

@media screen and (min-width: 36em) {
  .js-enabled .site-header .home {
    margin: 0;
  }
  .js-enabled .site-header .site-nav {
    display: flex;
    justify-content: space-between;
  }
}


/* Interior nav container, About link */

.site-header .interior-nav {
  margin: 0 auto;
  position: relative;
}

.js-enabled .site-header .interior-nav {
  display: inline-block;
  margin: 0;
  padding-right: 11.5em;
  text-align: right;
}

.site-header .about {
  margin-bottom: 1em;
}

.js-enabled .site-header .about {
  margin: 0;
}


/* Variations container */

.site-header .variations {
  border-radius: 0.25em;
  margin: 0 auto;
  overflow: hidden;
}

.js-enabled .site-header .variations {
  border: 1px solid hsl(0,0%,40%);
  position: absolute;
  right: 0;
  text-align: left;
  top: calc(-0.5em - 1px);
  width: 10em;
}

.js-enabled .site-header .variations:hover {
  border-color: white;
}


/* Variations subhead */

.site-header .v-subhead {
  background: hsl(0,0%,15%);
  margin-bottom: 1em;
  position: relative;
}

.js-enabled .site-header .v-subhead {
  margin: 0;
  padding: 0.5em;
}

.js-enabled .site-header .v-subhead span {
  display: none;
}

.js-enabled .site-header .v-subhead:hover {
  color: white;
}

.js-enabled .site-header .v-subhead:after,
.js-enabled .site-header .closed .current:after {
  background:
    url(sprites.svg)
    left 0 top -4.5em / 1em /* up arrow */
    no-repeat
    transparent;
  content: "";
  display: block;
  height: 1em;
  position: absolute;
  right: 0.5em;
  top: 0.5em;
  width: 1em;
}

.js-enabled .site-header .v-subhead:hover:after {
  background-position: left 0 top -6.5em; /* up arrow highlighted */
}

.js-enabled .site-header .closed .v-subhead:after,
.js-enabled .site-header .closed .current:after {
  background-position: left 0 top -0.5em; /* down arrow */
}

.js-enabled .site-header .closed .v-subhead:hover:after,
.js-enabled .site-header .closed .current:hover:after {
  background-position: left 0 top -2.5em; /* down arrow highlighted */
}


/* Variations list */

.site-header .v-list {
  border: 1px solid hsl(0,0%,40%);
  border-bottom: none;
  border-right: none;
  grid-gap: 0;
  padding: 0;
}

.js-enabled .site-header .v-list {
  border: none;
  display: block;
}


/* Variations list items and links */

.site-header .v-item {
  border: 1px solid hsl(0,0%,40%);
  border-left: none;
  border-top: none;
  margin: 0;
}

.js-enabled .site-header .v-item {
  border: none;
  border-top: 1px solid hsl(0,0%,40%);
}

.js-enabled .site-header .closed .v-item {
  border: none;
  position: absolute;
  top: 0;
  width: 100%;
}

.site-header .v-link {
  background: hsl(0,0%,15%);
  padding: 0.25em;
}

.site-header .v-link:focus,
.site-header .v-link:hover {
  background: hsl(0,0%,40%);
}

.site-header .v-link.current:focus,
.site-header .v-link.current:hover {
  background: hsl(0,0%,15%);
}

.about .about a,
.v-link.current,
._01 ._01,
._02 ._02,
._03 ._03,
._04 ._04,
._05 ._05,
._06 ._06,
._07 ._07,
._08 ._08,
._09 ._09,
._10 ._10,
._11 ._11 {
  color: white;
  cursor: default;
  position: relative;
}

.closed .v-link {
  display: block;
  padding: 0.5em;
  position: relative;
}

.closed .v-subhead,
.closed .current {
  z-index: 4;
}

.closed .v-link:focus {
  z-index: 5;
}

.closed .v-link .icon-wrap {
  display: none;
}

.js-enabled .site-header .icon {
  width: 1.75em;
}

.closed .v-link .label,
.closed .v-link .amount {
  padding: 0;
}


/* Home, About Nav -------- */

.about #main .v-subhead,
.home .v-subhead {
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-name: pulse;
  color: white;
  text-align: center;
}

@keyframes pulse {
  0% { opacity: 0.2; }
  50% { opacity: 0.4; }
  100% { opacity: 0.2; }
}

.about #main .v-subhead span,
.home .v-subhead span {
  background:
    url(sprites.svg)
    left 0 top -2.5em / 1em /* down arrow */
    no-repeat
    transparent;
  display: block;
  margin: 0 auto 1em auto;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  width: 1em;
}

.about #main .v-list,
.home .v-list {
  margin-bottom: 2em;
}

#main .v-link {
  border: 1px solid hsl(0,0%,15%);
  padding: 0.5em;
}

#main .v-link:hover {
  border-color: white;
}


/* Prev/Next Nav ---------- */

.site-nav.prev-next {
  margin: 1em 0 1.25em;
}

.site-nav.prev-next .v-list {
  max-width: calc(65ch + 2em);
  padding: 0;
}

.prev,
.next {
  margin: 0 1em;
  position: relative;
}

.prev:before,
.next:after {
  background:
    url(sprites.svg)
    left 0 top -8.5em / 1em /* left arrow */
    no-repeat
    transparent;
  content: "";
  display: block;
  height: 1em;
  position: absolute;
  width: 1em;
}

.prev:before {
  left: -1em;
}

.prev:hover:before,
.prev:focus:before {
  background-position: left 0 top -10.5em; /* left arrow highlighted */
}

.next:after {
  background-position: left 0 top -12.5em; /* right arrow */
  right: -1em;
}

.next:hover:after,
.next:focus:after {
  background-position: left 0 top -14.5em; /* left arrow highlighted */
}

@media screen and (min-width: 400px) {
  .site-nav.prev-next {
    margin: 2em 0 1.5em;
  }
}

@media screen and (min-width: 30em) {
  .site-nav.prev-next {
    margin: 2em 0 1.6em;
    max-width: 100%;
  }
  .site-nav.prev-next .v-list {
    grid-template-columns: 1fr 1fr;
  }
  @supports (display: grid) {
    .prev {
      margin-right: 0;
    }
    .next {
      margin-left: 0;
    }
  }
}


/*
------------------------------
Cubes
------------------------------
*/

.cubes {
  margin: 0 auto;
}

.cubes:after {
  content: "";
  display: table;
  clear: both;
}

._01 .cubes,
._11 .cubes {
  max-width: 619px;
}

.cubes div {
  border: 1px solid hsl(0,0%,15%);
  float: left;
  margin: 1.5px;
  position: relative;
  width: 100px;
}

@supports (display: grid) {
  .cubes {
    display: grid;
    grid-gap: 3px;
    grid-template-columns: repeat( auto-fit, minmax(100px, 1fr) );
  }
  ._01 .cubes,
  ._11 .cubes {
    max-width: 65ch;
  }
  .cubes div {
    margin: 0;
    width: auto;
  }
}

.d {
  fill: hsl(0,0%,33%);
}

.w {
  fill: hsl(0,0%,66%);
}

.t {
  fill: white;
}

.cubes p {
  bottom: 0.25em;
  color: hsl(0,0%,40%);
  font-size: 12px;
  line-height: 1;
  margin: 0;
  position: absolute;
  right: 0.25em;
}

@media screen and (min-width: 400px) {
  .cubes {
    grid-template-columns: repeat( auto-fit, minmax(105px, 1fr) );
  }
}

@media print {
  .cubes,
  ._01 .cubes,
  ._11 .cubes {
    grid-gap: 3pt;
    grid-template-columns: repeat( auto-fit, minmax(0.75in, 1fr) );
    max-width: 100%;
  }
  .cubes div {
    border: 0.5pt solid #ddd;
    page-break-inside: avoid;
  }
  .d {
    fill: #666;
  }
  .w {
    fill: #999;
  }
  .t {
    fill: #ccc;
  }
  .cubes p {
    color: #999;
    font-size: 8pt;
  }
}


/*
------------------------------
About
------------------------------
*/

.about #main {
  padding: 0 0 5vw 0;
}


/* Essay Text ------------- */

.essay {
  /*border-bottom: 1px solid hsl(0,0%,15%);*/
  margin: 0 auto;
  max-width: 68ch;
  padding: 3em 1.5ch;
}

@media screen and (min-width: 36em) {
  .essay {
    max-width: calc(65ch + 3em);
    padding: 4.5em 1.5em;
  }
}

@media print {
  .essay {
    border: none;
    margin: 4.5em auto;
    max-width: 35em;
    padding: 0;
  }
}

.essay h2,
.essay h3 {
  color: white;
}

@media print {
  .essay h2,
  .essay h3 {
    color: black;
  }
}

.essay h2 {
  font-weight: bold;
}

.essay h3 {
  margin-top: 3em;
}

.essay h2,
.essay h3,
.essay p {
  margin-bottom: 1.5em;
}

.essay ol {
  counter-reset: start-from 0; /* Initiate a counter */
}

.essay li h3:before {
  counter-increment: start-from; /* Increment the counter by 1 */
  content: counter(start-from) ". ";  /* Use the counter as content */
}

/*@media screen and (min-width: 65em) {
  .essay li h3 {
    position: relative;
  }
  .essay li h3:before {
    -moz-font-feature-settings:"tnum" 1; 
    -ms-font-feature-settings:"tnum" 1; 
    -o-font-feature-settings:"tnum" 1; 
    -webkit-font-feature-settings:"tnum" 1; 
    font-feature-settings:"tnum" 1;
    left: -3.5ch;
    position: absolute;
    text-align: right;
    width: 3ch;
  }
}*/

.essay ol + p {
  margin-top: 3em;
}

@media screen and (min-width: 36em) {
  .essay ol + p {
    margin-top: 4.5em;
  }
}


/* Essay Figures ---------- */

.essay figure {
  margin: 3em 0;
}

.essay .video {
  padding-top: 75%;
  position: relative;
}

.essay .video iframe {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.essay figcaption {
  color: hsl(0,0%,40%);
  margin-top: 0.75em;
}

@supports (display: grid) {
  .about .cubes {
    grid-template-columns: 1fr 1fr;
  }
  @media screen and (min-width: 500px) {
    .about .cubes {
      grid-template-columns: repeat( 4, 1fr );
    }
  }
}

@media print {
  .essay figcaption {
    color: #ccc;
  }
  .about .cubes {
    grid-template-columns: repeat( 4, 1fr );
  }
}

.about .cubes text {
  display: none;
}

.rotated.cubes text {
  display: block;
}

.cubes text {
  fill: #fff;
  font-size: 36px;
  text-anchor: middle;
  transform: translateY(10px);
}

.sequence .guidecube { 
  fill: none;
  stroke: #333;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 6px;
}

.sequence .parts > * {
  animation-duration: 18s;
  animation-iteration-count: infinite;
  animation-name: part-sequence;
  opacity: 0;
}

.sequence .parts > .part01-alt,
.sequence .parts > .part02-alt,
.sequence .parts > .part03-alt,
.sequence .parts > .part05-alt,
.sequence .parts > .part09-alt {
  animation-name: none;
}

@media print {
  .cubes text {
    fill: black;
  }
  .sequence .guidecube {
    stroke: #ccc;
    stroke-width: 1pt;
  }
  .sequence .parts > * {
    animation-name: none;
    opacity: 1;
  }
  .sequence .parts > .part01,
  .sequence .parts > .part02,
  .sequence .parts > .part03,
  .sequence .parts > .part05,
  .sequence .parts > .part09 {
    opacity: 0;
  }
}

.sequence .part01 { animation-delay: 00.0s; }
.sequence .part02 { animation-delay: 01.5s; }
.sequence .part03 { animation-delay: 03.0s; }
.sequence .part04 { animation-delay: 04.5s; }
.sequence .part05 { animation-delay: 06.0s; }
.sequence .part06 { animation-delay: 07.5s; }
.sequence .part07 { animation-delay: 09.0s; }
.sequence .part08 { animation-delay: 10.5s; }
.sequence .part09 { animation-delay: 12.0s; }
.sequence .part10 { animation-delay: 13.5s; }
.sequence .part11 { animation-delay: 15.0s; }
.sequence .part12 { animation-delay: 16.5s; }

@keyframes part-sequence {
  0% { opacity: 0; }
  4.166666666666667% { opacity: 1; }   /* 0.5s */
  8.333333333333334% { opacity: 1; }   /* 1.0s */
  12.500000000000001% { opacity: 0; }  /* 1.5s */
}

/*.rotated.cubes .rotation text {
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-name: rotation;
  opacity: 0;
}*/

@keyframes rotation {
  0% { opacity: 0; }
  8.333333333333333% { opacity: 1; } /* 0.5s */
  50% { opacity: 1; } /* 3s */
  58.333333333333333% { opacity: 0; } /* 3.5s */
}


/*
------------------------------
Home
------------------------------
*/

.home #main {
  padding: 0 0 5vw 0;
}

@media print {
  padding: 0;
}

.home-wrap {
  text-align: center;
}

.home-wrap span {
  white-space: nowrap;
}


/* Intro ------------------ */

.intro {
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 3em);
  padding: 5vw;
}

.intro-title {
  color: white;
  font-size: 2em;
  line-height: 1.1;
  order: 2;
}

.intro-text {
  order: 3;
}

.intro-description {
  margin: 1em 0;
}

.intro-cube {
  order: 1;
  width: 15em;
}

@supports (display: grid) {

  .intro-title {
    font-size: 12vw;
  }
  .intro-cube {
    width: 35%;
  }

  @media screen and (min-width: 480px) {
    .intro {
      align-items: start;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      padding: 10vw 7vw;
      text-align: left;
    }
    .intro-title {
      align-self: end;
      font-size: 10vw;
      grid-column: 1 / span 2;
    }
    .intro-text {
      font-size: 3.5vw;
      grid-column: 1 / span 1;
      grid-row: 2;
    }
    .intro-cube {
      grid-column: 2 / span 1;
      grid-row: 2;
      margin-top: -30%;
      width: 100%;
    }
  }

  @media screen and (min-width: 720px) {
    .intro {
      grid-template-columns: 1fr 1fr;
      padding: 7vw;
    }
    .intro-title {
      font-size: 7vw;
      grid-column: 1 / span 1;
    }
    .intro-text {
      font-size: 2.5vw;
      grid-column: 1 / span 1;
    }
    .intro-cube {
      align-self: center;
      grid-column: 2 / span 1;
      grid-row: 1 / span 2;
      margin: 0;
    }
  }

  @media screen and (min-width: 1040px) {
    .intro {
      grid-template-columns: 1fr 2fr;
      padding: 4vw;
    }
    .intro-title {
      font-size: 5vw;
      grid-column: 2 / span 1;
    }
    .intro-text {
      font-size: 1.75vw;
      grid-column: 2 / span 1;
    }
    .intro-cube {
      grid-column: 1 / span 1;
      padding-right: 1vw;
    }
  }

}

@media print {
  .intro-title {
    color: black;
    font-size: 36pt;
  }
  .intro-about {
    display: none;
  }
}


/* Cube Animation --------- */

/*

Certain combinations of cube parts need to use
alternate drawings to preserve the illusion of
dimensionality.

If part05 + part04, use part5a
If part01 + part04, use part1a
If part03 + part08, use part3a
If part01 + part05, use part1a
If part09 + part12, use part9a
If part02 + part06, use part2a

Intro cube parts animation matrix:

01 1a 02 2a 03 3a 04 05 5a 06 07 08 09 9a 10 11 12

01 -- -- -- -- -- -- -- -- -- -- 08 -- 9a -- -- 12
-- -- 02 -- -- 3a 04 -- -- -- 07 08 -- -- 10 11 --
-- -- -- -- -- -- 04 -- -- 06 -- -- -- -- -- -- --
-- 1a -- -- -- 3a 04 -- -- 06 07 08 -- 9a -- 11 12
-- 1a 02 -- -- -- 04 -- -- -- -- -- -- -- 10 11 --
-- 1a 02 -- 03 -- -- 05 -- -- 07 -- -- 9a 10 -- 12
-- -- -- -- 03 -- 04 -- -- 06 -- -- -- -- -- -- --
-- -- -- -- -- -- -- 05 -- 06 -- 08 09 -- 10 11 --
01 -- -- 2a -- 3a -- -- -- 06 -- 08 09 -- 10 11 --
01 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --

*/

.intro-cube .part01,
.intro-cube .part01-alt,
.intro-cube .part02,
.intro-cube .part02-alt,
.intro-cube .part03,
.intro-cube .part03-alt,
.intro-cube .part04,
.intro-cube .part05,
.intro-cube .part05-alt,
.intro-cube .part06,
.intro-cube .part07,
.intro-cube .part08,
.intro-cube .part09,
.intro-cube .part09-alt,
.intro-cube .part10,
.intro-cube .part11,
.intro-cube .part12 {
  animation-duration: 20s;
  animation-iteration-count: infinite;
  opacity: 0;
}

.intro-cube .part01     { animation-name: intro01; }
.intro-cube .part01-alt { animation-name: intro1a; }
.intro-cube .part02     { animation-name: intro02; }
.intro-cube .part02-alt { animation-name: intro2a; }
.intro-cube .part03     { animation-name: intro03; }
.intro-cube .part03-alt { animation-name: intro3a; }
.intro-cube .part04     { animation-name: intro04; }
.intro-cube .part05     { animation-name: intro05; }
.intro-cube .part05-alt { animation-name: intro5a; }
.intro-cube .part06     { animation-name: intro06; }
.intro-cube .part07     { animation-name: intro07; }
.intro-cube .part08     { animation-name: intro08; }
.intro-cube .part09     { animation-name: intro09; }
.intro-cube .part09-alt { animation-name: intro9a; }
.intro-cube .part10     { animation-name: intro10; }
.intro-cube .part11     { animation-name: intro11; }
.intro-cube .part12     { animation-name: intro12; }

@keyframes intro01 {
  00% { opacity: 1; }
  05% { opacity: 1; }
  10% { opacity: 0; }
  75% { opacity: 0; }
  80% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes intro1a {
  25% { opacity: 0; }
  30% { opacity: 1; }
  55% { opacity: 1; }
  60% { opacity: 0; }
}
@keyframes intro02 {
  05% { opacity: 0; }
  10% { opacity: 1; }
  15% { opacity: 1; }
  20% { opacity: 0; }
  35% { opacity: 0; }
  40% { opacity: 1; }
  55% { opacity: 1; }
  60% { opacity: 0; }
}
@keyframes intro2a {
  75% { opacity: 0; }
  80% { opacity: 1; }
  85% { opacity: 1; }
  90% { opacity: 0; }
}
@keyframes intro03 {
  45% { opacity: 0; }
  50% { opacity: 1; }
  65% { opacity: 1; }
  70% { opacity: 0; }
}
@keyframes intro3a {
  05% { opacity: 0; }
  10% { opacity: 1; }
  15% { opacity: 1; }
  20% { opacity: 0; }
  25% { opacity: 0; }
  30% { opacity: 1; }
  35% { opacity: 1; }
  40% { opacity: 0; }
  75% { opacity: 0; }
  80% { opacity: 1; }
  85% { opacity: 1; }
  90% { opacity: 0; }
}
@keyframes intro04 {
  05% { opacity: 0; }
  10% { opacity: 1; }
  45% { opacity: 1; }
  50% { opacity: 0; }
  55% { opacity: 0; }
  60% { opacity: 1; }
  65% { opacity: 1; }
  70% { opacity: 0; }
}
@keyframes intro05 {
  45% { opacity: 0; }
  50% { opacity: 1; }
  55% { opacity: 1; }
  60% { opacity: 0; }
  65% { opacity: 0; }
  70% { opacity: 1; }
  75% { opacity: 1; }
  80% { opacity: 0; }
}
@keyframes intro06 {
  15% { opacity: 0; }
  20% { opacity: 1; }
  35% { opacity: 1; }
  40% { opacity: 0; }
  55% { opacity: 0; }
  60% { opacity: 1; }
  85% { opacity: 1; }
  90% { opacity: 0; }
}
@keyframes intro07 {
  05% { opacity: 0; }
  10% { opacity: 1; }
  15% { opacity: 1; }
  20% { opacity: 0; }
  25% { opacity: 0; }
  30% { opacity: 1; }
  35% { opacity: 1; }
  40% { opacity: 0; }
  45% { opacity: 0; }
  50% { opacity: 1; }
  55% { opacity: 1; }
  60% { opacity: 0; }
}
@keyframes intro08 {
  00% { opacity: 1; }
  15% { opacity: 1; }
  20% { opacity: 0; }
  25% { opacity: 0; }
  30% { opacity: 1; }
  35% { opacity: 1; }
  40% { opacity: 0; }
  65% { opacity: 0; }
  70% { opacity: 1; }
  85% { opacity: 1; }
  90% { opacity: 0; }
  95% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes intro09 {
  65% { opacity: 0; }
  70% { opacity: 1; }
  85% { opacity: 1; }
  90% { opacity: 0; }
}
@keyframes intro9a {
  00% { opacity: 1; }
  05% { opacity: 1; }
  10% { opacity: 0; }
  25% { opacity: 0; }
  30% { opacity: 1; }
  35% { opacity: 1; }
  40% { opacity: 0; }
  45% { opacity: 0; }
  50% { opacity: 1; }
  55% { opacity: 1; }
  60% { opacity: 0; }
  95% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes intro10 {
  05% { opacity: 0; }
  10% { opacity: 1; }
  15% { opacity: 1; }
  20% { opacity: 0; }
  35% { opacity: 0; }
  40% { opacity: 1; }
  55% { opacity: 1; }
  60% { opacity: 0; }
  65% { opacity: 0; }
  70% { opacity: 1; }
  85% { opacity: 1; }
  90% { opacity: 0; }
}
@keyframes intro11 {
  05% { opacity: 0; }
  10% { opacity: 1; }
  15% { opacity: 1; }
  20% { opacity: 0; }
  25% { opacity: 0; }
  30% { opacity: 1; }
  45% { opacity: 1; }
  50% { opacity: 0; }
  65% { opacity: 0; }
  70% { opacity: 1; }
  85% { opacity: 1; }
  90% { opacity: 0; }
}
@keyframes intro12 {
  00% { opacity: 1; }
  05% { opacity: 1; }
  10% { opacity: 0; }
  25% { opacity: 0; }
  30% { opacity: 1; }
  35% { opacity: 1; }
  40% { opacity: 0; }
  45% { opacity: 0; }
  50% { opacity: 1; }
  55% { opacity: 1; }
  60% { opacity: 0; }
  95% { opacity: 0; }
  100% { opacity: 1; }
}


/*
------------------------------
Footer
------------------------------
*/

footer {
  background: hsl(0,0%,15%);
  padding: 1.5em 1em 3em 1em;
  text-align: center;
}

@media screen and (min-width: 40em) {
  footer {
    padding: 2em 1.5em 4em 1.5em;
  }
}

@media print {
  footer {
    border-top: 0.5pt solid #ddd;
    margin-top: 0.5in;
    padding: 1em 0 0 0;
  }
}

footer span,
footer cite {
  white-space: nowrap;
}