#intro .sprite-sheet-wrapper
{
   left: 33.35%;
   top: 31.9%;
   --width: 32.5%;
}

#intro > .slide:not(.flyleaf)
{
   background-color: transparent;
}

#intro > .slide > div:nth-child(-n+3)
{
   text-transform: uppercase;
   transform: translateX(-50%);
}

/* 'sign icons' */
#intro > .slide > div:nth-child(1)
{
   font-size: .7em;
   letter-spacing: .75em;
   left: 55% !important;
   top: 17.5%;
}

/* 2nd 'i' in 'sign icons' */
#intro > .slide > div:nth-child(1) > span
{
   font-family: gillsans-semibold;
}

/* 'gebareniconen' */
#intro > .slide > div:nth-child(2)
{
   font-family: gillsans-semibold;
   font-size: 3.75em;
   letter-spacing: .325em;
   left: 50.5% !important;
   top: 29%;
}

/* 'gebareniconen' in stages 2 thru 8 */
#intro > .slide > div.gray:nth-child(2)
{
   color: var(--gray2);
}

/* 'i' in 'gebareniconen' */
#intro > .slide > div:nth-child(2) > span
{
   color: #000;
}

#intro > .slide > div:nth-child(2) > span.gray
{
   color: var(--gray2);
}

/* 'sign icons' and 'gebareniconen'
 * are hidden in last intro slide...
 */
#intro > .slide > div.hidden:nth-child(1),
#intro > .slide > div.hidden:nth-child(2)
{
   color: #fff;
}

/* ...but the 'i' in 'gebareniconen'
 * still needs to be visible
 */
#intro > .slide > div.hidden:nth-child(2) > span
{
   color: #000;
}

/* 'i' in 'gebareniconen' extension */
#intro > .slide > div:nth-child(3)
{
   border-left: .55em solid #000;
   left: 54.25% !important;
   top: 42.5%;
   height: 31%;
}

#intro > .slide > div.gray:nth-child(3)
{
   border-color: var(--gray2);
}

/* red text */
#intro > .slide > div:nth-child(n+4):nth-child(-n+10)
{
   color: var(--red);
   font-size: .8em;
   letter-spacing: .075em;
   white-space: pre;
}

#intro > .slide:nth-child(5) > div:nth-child(4),
#intro > .slide:nth-child(6) > div:nth-child(4),
#intro > .slide:nth-child(7) > div:nth-child(4)
{
   line-height: 0.75;
}

#intro > .slide:nth-child(6) > div:nth-child(4),
#intro > .slide:nth-child(7) > div:nth-child(4)
{
   text-align: right;
}

#intro > .slide > div:nth-child(10)
{
   white-space: normal !important;
}

/* text next to sign icons */
#intro > .slide:nth-child(2) > div:nth-child(4) { left: 56%;    top: 64.5%; }
#intro > .slide:nth-child(3) > div:nth-child(4) { left: 57.7%;  top: 48.7%; }
#intro > .slide:nth-child(4) > div:nth-child(4) { left: 33%;    top: 50.75%; }
#intro > .slide:nth-child(5) > div:nth-child(4) { left: 61.5%;  top: 43.6%; }
#intro > .slide:nth-child(6) > div:nth-child(4) { left: 14.5%;  top: 46.1%; }
#intro > .slide:nth-child(7) > div:nth-child(4) { left: 10%;    top: 43.55%; }
#intro > .slide:nth-child(8) > div:nth-child(4) { left: 39%;    top: 58.75%; }

#intro > .slide:nth-child(8) > div:nth-child(4) > div
{
   transform: translateX(-50%);
   left: 50%;
}

#intro > .slide:nth-child(8) > div:nth-child(4) > div:nth-child(1)
{
   border-left: .0625em solid var(--red);
   transform: translate(-50%, -5.25em);
   height: 6.25em;
}

/* numbers below sign icons */
#intro > div:nth-child(n+10):nth-child(-n+12)
{
   display: none;
   font-family: "myriadpro";
   font-size: 1.75em;
}

#intro > div.active:nth-child(n+10):nth-child(-n+12)
{
   display: block;
}

/* left to right */
#intro > div:nth-child(10) { left: 35%;    top: 54.75%; }
#intro > div:nth-child(11) { left: 45.72%; top: 59.7%; }
#intro > div:nth-child(12) { left: 62.5%;  top: 60.3%; }

/* last slide is special: all text is hidden except
 * 'i' in 'gebareniconen' and 'i' extension
 */

/* 'i' in 'gebareniconen' */
#intro > .slide:nth-child(9) > div:nth-child(2)
{
   color: #fff;
   font-family: "gillsans-semibold";
   font-size: 3.75em;
   letter-spacing: .325em;
   left: 50.5% !important;
   top: 29%;
}

#intro > .slide:nth-child(9) > div:nth-child(2) > span
{
   color: #000;
   font-family: inherit;
}

/* 'i' extension */
#intro > .slide:nth-child(9) > div:nth-child(3)
{
   border-left: .55em solid #000;
   font-size: 1em;
   left: 54.25% !important;
   top: 42.5%;
   height: 31%;
}