@charset "UTF-8";
/* Base Styles */
body {
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  letter-spacing: 0.02em;
  font-weight: 300;
  margin: 0 auto;
  position: relative; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  font-size: 1.4em; }

.page-title,
.body-subtitle {
  font-family: Constantia, Palatino, Georgia, serif; }

.page-title {
  text-align: center; }

.text-separator {
  border: 0; }

.paneview-ui {
  position: fixed;
  z-index: 2; }

.paneview-ui select {
  outline: none;
  font-size: 1.4em; }

.page-copy-small .page-content {
  font-size: 0.8em;
  line-height: 1.4em; }

.page-copy-big .page-content {
  font-size: 1.15em;
  line-height: 1.4em; }

/* Static */
.page-grid-static {
  padding: 20px;
  width: 940px;
  font-size: 18px;
  line-height: 1.4em; }
  .page-grid-static .page-title {
    font-size: 120px;
    line-height: 1.1em;
    text-align: center; }
  .page-grid-static .body-subtitle {
    font-size: 32px;
    line-height: 1.2em;
    margin-left: -80px; }
  .page-grid-static .page-body {
    margin: 0 120px;
    padding-bottom: 120px; }

/* Responsive */
.page-grid-rel {
  font-size: 14.4px;
  line-height: 1.4em;
  padding: 4.6875%;
  max-width: 1024px; }
  @media (min-width: 480px) {
    .page-grid-rel {
      font-size: 18px;
      padding: 1.5625%;
      width: 73.4375%; } }
  @media (min-width: 1400px) {
    .page-grid-rel {
      font-size: 20.7px;
      padding: 1.5625%;
      width: 73.4375%; } }
  .page-grid-rel .page-title {
    line-height: 1.1em;
    text-align: center;
    font-size: 3.55556em; }
    @media (min-width: 480px) {
      .page-grid-rel .page-title {
        font-size: 3.33333em; } }
    @media (min-width: 640px) {
      .page-grid-rel .page-title {
        font-size: 5em; } }
    @media (min-width: 820px) {
      .page-grid-rel .page-title {
        font-size: 6.66667em; } }
  .page-grid-rel .body-subtitle {
    font-size: 32px;
    line-height: 1.2em; }
    @media (min-width: 480px) {
      .page-grid-rel .body-subtitle {
        margin-left: -6.25%; } }
  @media (min-width: 480px) {
    .page-grid-rel .page-body {
      margin: 0% 12.76596%;
      padding-bottom: 120px; } }

/* Sprites  */
.sprite:before {
  content: '';
  display: block;
  background-image: url("../img/sprite-elements.svg"); }

.spritemap2 .sprite:before {
  background-image: url("../img/sprite-elements-lores.png"); }

.spritemap3 .sprite:before {
  background-image: url("../img/sprite-elements-colors.jpg"); }

.page-sprites-static {
  /* TODO: animate */ }
  .page-sprites-static .sprite-world:before {
    /* 150x150 */
    width: 450px;
    height: 400px;
    position: relative;
    top: 0;
    left: 50%;
    margin-left: -225px;
    /* x:120 y:850 */
    background-position: -450px -1210px; }
  .page-sprites-static .sprite-rider:before {
    /* 150x150 */
    width: 150px;
    height: 150px;
    position: relative;
    top: 0;
    left: 50%;
    margin-left: -75px; }
  .page-sprites-static .sprite-rider-blue:before {
    /* x:120 y:850 */
    background-position: -120px -850px; }
  .page-sprites-static .sprite-reverse:before {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1); }
  .page-sprites-static .sprite-rider-red:before {
    /* x:420 y:850 */
    background-position: -420px -850px; }

/* Sprites – rem */
.page-sprites-rem .sprite:before {
  background-size: 71.11111em 113.77778em;
  /* 1280x2048 */
  position: relative; }
.page-sprites-rem .sprite-world:before {
  font-size: 0.15em;
  /* 450x400 */
  width: 25em;
  height: 22.22222em;
  top: 0;
  left: 50%;
  margin-left: -12.5em;
  background-position: -25em -67.22222em;
  /* 450 1210 */ }
.page-sprites-rem .sprite-rider:before {
  /* 150x150 */
  width: 8.33333em;
  height: 8.33333em;
  top: 0;
  left: 50%;
  margin-left: -4.16667em; }
.page-sprites-rem .sprite-rider-blue:before {
  /* x:120 y:850 */
  background-position: -6.66667em -47.22222em; }
.page-sprites-rem .sprite-reverse:before {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1); }
.page-sprites-rem .sprite-rider-red:before {
  /* x:420 y:850 */
  background-position: -23.33333em -47.22222em; }

/* Sprites – rel */
.page-sprites-rel .sprite {
  /* 1280 x 2048 */ }
.page-sprites-rel .sprite-world:before {
  /* 450x400 */
  width: 47.87234%;
  height: 0;
  padding-top: 42.55319%;
  position: relative;
  top: 0;
  left: 50%;
  margin-left: -23.93617%;
  /* spritemap size ÷ sprite size × 100% */
  background-size: 284.44444% 512%;
  /*(sprite offset) ÷ (spritemap size - sprite size) × 100% */
  background-position: 54.21687% 73.42233%; }
.page-sprites-rel .sprite-rider:before {
  /* 150x150 */
  width: 15.95745%;
  height: 0;
  padding-top: 15.95745%;
  position: relative;
  top: 0;
  left: 50%;
  margin-left: -7.97872%;
  background-size: 853.33333% 1365.33333%; }
.page-sprites-rel .sprite-rider-blue:before {
  /* x:120 y:850 */
  background-position: 10.61947% 44.78398%; }
.page-sprites-rel .sprite-reverse:before {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1); }
.page-sprites-rel .sprite-rider-red:before {
  /* x:420 y:850 */
  background-position: 37.16814% 44.78398%; }