html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
nav ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: none; }
a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

ins { background-color: #ff9; color: #000; text-decoration: none; }

mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }

table { border-collapse: collapse; border-spacing: 0; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

input, select { vertical-align: middle; }

body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; height: 100%; width: 100%; -webkit-user-select: none; -moz-user-select: none; user-select: none; }

#play { position: fixed; top: 75px; left: 0; right: 0; bottom: 0; z-index: 5; }
#play:before { content: ""; display: block; position: fixed; top: 75px; left: 0; right: 0; bottom: 0; background: url(../images/cats-splash.svg) center center no-repeat; transition: all .3s ease-in-out; opacity: 1; }
#play.active:before, #play.on:before { opacity: .1; }
#play.cursor1 { cursor: url(../images/laser.gif), auto; }
#play.cursor2 { cursor: url(../images/mouse.gif), auto; }
#play.cursor3 { cursor: url(../images/yarn.gif), auto; }
#play.cursor4 { cursor: url(../images/goldfish.gif), auto; }

.auto-content { list-style: none; opacity: 0; }
.auto-content.moving { opacity: 1; }

.auto-content li { position: fixed; }

p.credit { z-index: 500; position: fixed; bottom: 10px; right: 0; left: 0; text-align: center; font-size: 10px; }
p.credit a { text-decoration: none; color: #F5CFE7; }
p.credit a:hover { text-decoration: underline; }

nav { position: relative; z-index: 10; background: #FFFAFD; }

nav ul { display: flex; align-items: center; justify-content: center; }

nav ul li { /* ----------- iPad 1 and 2 ----------- */ /* Portrait and Landscape */ }
nav ul li a { display: inline-block; text-align: center; text-decoration: none; transition: transform .2s linear; padding: 15px; transform: scale(0.7); }
nav ul li a img { width: 50%; }
nav ul li a.cursor { opacity: .6; }
nav ul li a.cursor:hover { transform: scale(1.1); }
nav ul li a.active { opacity: 1; transform: scale(1.1); }
nav ul li a.active.on, nav ul li a.active.off { border-bottom: 2px solid #000; }
nav ul li a.auto-toggle { top: 5px; display: inline-block; background: url(../images/toggle-bg.svg) 0 0 no-repeat; margin-left: 15px; position: relative; width: 43px; }
nav ul li a.auto-toggle .dot { display: inline-block; background: url(../images/toggle-dot.svg) 0 0 no-repeat; width: 16px; height: 17px; position: absolute; top: 1px; left: 3px; transition: left .3s ease-in-out; }
nav ul li a.auto-toggle.on .dot { top: 4px; right: 32px; left: auto; }
@media screen and (max-width: 767px) { nav ul li { padding-top: 15px; padding-bottom: 5px; }
  nav ul li:first-child, nav ul li:nth-child(2), nav ul li:nth-child(3), nav ul li:nth-child(4), nav ul li:nth-child(5) { display: none; } }
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) { nav ul li:first-child, nav ul li:nth-child(2), nav ul li:nth-child(3), nav ul li:nth-child(4), nav ul li:nth-child(5) { display: none; } }