body {
  margin: 0;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: initial;
  font-weight: initial; }
  body #animation-navigation {
    text-align: center;
    border-style: dashed;
    border-width: 1px 0 0 1px;
    padding: 2em;
    min-width: 300px;
    max-width: 25%;
    max-height: 100%;
    overflow-y: auto;
    border-top-left-radius: 1em;
    margin-top: 2.5em;
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.4); }
    body #animation-navigation > div > h2 {
      margin-bottom: 0;
      padding-top: 0.3em;
      padding-bottom: 0.3em;
      border-top: 1px dashed;
      font-size: 1.5em;
      margin-left: calc(-1.5em + 4px);
      margin-right: calc(-1.5em + 4px);
      padding-left: 1.5em;
      padding-right: 1.5em; }
    body #animation-navigation > div:first-child > h2 {
      margin-top: -1em;
      border-top-width: 0; }
    body #animation-navigation .input-group {
      margin-right: 2em;
      width: 100%;
      margin-left: auto;
      margin-right: auto; }
      body #animation-navigation .input-group input.decrease, body #animation-navigation .input-group input.increase {
        width: 2em;
        height: 2em;
        margin: 0;
        font-weight: bolder;
        top: -0.5em;
        position: relative; }
        body #animation-navigation .input-group input.decrease.btn-is-error, body #animation-navigation .input-group input.increase.btn-is-error {
          background-color: #c80a0a;
          color: white; }
      body #animation-navigation .input-group input[type="range"] {
        width: calc(100% - 5em); }
      body #animation-navigation .input-group > span {
        width: 110px;
        display: inline-block; }
        body #animation-navigation .input-group > span + * + input[type="range"] {
          width: calc(100% - 5em - 114px); }
    body #animation-navigation #callback-message {
      text-align: center;
      color: #c80a0a; }
  body #animation-object {
    position: fixed;
    overflow: hidden;
    width: 100vw;
    margin-left: auto;
    margin-right: auto;
    height: 100vh;
    min-height: 300px; }
  body #three-canvas-loader {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    color: #EEEEEE;
    background-image: radial-gradient(rgba(75, 75, 75, 0.85) 0%, rgba(75, 75, 75, 0) 50%); }
    body #three-canvas-loader > div {
      position: absolute;
      top: 50%;
      margin: 0;
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      width: 100%;
      left: 0;
      right: 0; }
      body #three-canvas-loader > div .progress-bar {
        width: 50%;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
        background: #4b4b4b;
        margin-top: 1em;
        border-radius: 0.25em;
        height: 2em;
        position: relative; }
        body #three-canvas-loader > div .progress-bar > div {
          position: absolute;
          width: 0;
          text-align: left;
          padding-top: 0.5em;
          padding-bottom: 0.5em;
          line-height: 1em;
          background: #324b32;
          border-radius: 0.25em;
          color: white;
          font-weight: bolder; }
  body canvas {
    width: 100%;
    height: 100%; }