body {
  background-color: black;
  color: white;
  margin: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  font-family: Roboto, sans-serif;
  font-weight: 300;
  letter-spacing: 0.2px; }

button {
  cursor: pointer;
  border: none;
  outline: none;
  padding: 0;
  color: inherit;
  background-color: transparent; }

a {
  color: inherit;
  text-decoration: none; }

h1,
h2,
h3 {
  font-weight: 300; }

#nav {
  position: fixed;
  z-index: 7;
  top: 5vh;
  right: calc(3.125vw + 20px); }
  #nav button {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 2px; }
    #nav button:after {
      content: '';
      display: block;
      background-color: white;
      height: 1px;
      width: calc(100% + 30px);
      margin-top: 10px;
      transform: scaleX(0);
      transition: 0.3s transform; }
    #nav button:hover:after {
      transform: scaleX(1); }

#intro {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  z-index: 3; }
  #intro .background {
    background-color: black;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center; }
  #intro .container {
    padding: 30px;
    text-align: center; }
  #intro .container {
    max-width: 360px; }
  #intro h1 {
    margin: 0;
    background: url("../../assets/intro-jewel.svg") no-repeat center 25px;
    background-size: 190px auto;
    text-transform: uppercase;
    font-size: 18px; }
    #intro h1 span {
      display: block; }
      #intro h1 span:nth-child(2) {
        margin-top: 42px;
        margin-bottom: 96px; }
  #intro h2 {
    margin: 50px 0;
    font-size: 14px;
    line-height: 22px; }
  #intro button {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 2px; }
    #intro button:after {
      content: '';
      display: block;
      background-color: white;
      height: 1px;
      width: calc(100% + 30px);
      margin-top: 10px;
      transform: scaleX(0);
      transition: 0.3s transform; }
    #intro button:hover:after {
      transform: scaleX(1); }

#tutorial {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  z-index: 1; }
  #tutorial .background {
    background-color: black;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center; }
  #tutorial .container {
    padding: 30px;
    text-align: center; }
  #tutorial .container {
    max-width: 360px; }
  #tutorial p {
    margin: 30px 0;
    font-size: 14px;
    line-height: 22px; }
  #tutorial img {
    height: 140px;
    width: auto; }

#info {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  z-index: 5;
  visibility: hidden;
  opacity: 0; }
  #info .background {
    background-color: black;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center; }
  #info .container {
    padding: 30px;
    text-align: center; }
  #info .container {
    padding-top: calc(2.5vw + 52px);
    max-width: 590px; }
  #info .text p {
    margin: 30px 0;
    font-size: 14px;
    line-height: 22px; }
  #info .text .jewel {
    width: 45px;
    height: auto; }
  #info .links {
    margin-top: 60px; }
    #info .links p {
      margin: 40px 0; }
    #info .links a {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      font-size: 13px;
      text-transform: uppercase;
      font-weight: bold;
      letter-spacing: 2px; }
      #info .links a:after {
        content: '';
        display: block;
        background-color: white;
        height: 1px;
        width: calc(100% + 30px);
        margin-top: 10px;
        transform: scaleX(0);
        transition: 0.3s transform; }
      #info .links a:hover:after {
        transform: scaleX(1); }
  #info .credits {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 2px;
    color: #808080;
    margin-top: 80px; }
    #info .credits a {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      transition: 0.3s color;
      font-weight: bold; }
      #info .credits a:after {
        content: '';
        display: block;
        background-color: white;
        height: 1px;
        width: calc(100% + 30px);
        margin-top: 10px;
        transform: scaleX(0);
        transition: 0.3s transform; }
      #info .credits a:hover:after {
        transform: scaleX(1); }
      #info .credits a:after {
        width: calc(100% + 0px);
        margin-top: 2px; }
      #info .credits a:hover {
        color: white; }

#info-jewel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  z-index: 9;
  visibility: hidden;
  opacity: 0; }
  #info-jewel .background {
    background-color: black;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center; }
  #info-jewel .container {
    padding: 30px;
    text-align: center; }
  #info-jewel .background {
    background-color: rgba(0, 0, 0, 0.8); }
  #info-jewel .container {
    position: relative;
    max-width: 480px;
    margin: 30px;
    padding: 30px 0 0; }
  #info-jewel .image img {
    max-height: 200px;
    width: 100%; }
  #info-jewel .slogan {
    font-size: 12px;
    color: #e98d20;
    font-weight: bold;
    text-transform: uppercase; }
  #info-jewel .name {
    font-size: 24px;
    font-weight: bold; }
  #info-jewel .value {
    font-size: 24px;
    color: #e98d20; }
  #info-jewel .description {
    margin: 30px 0;
    font-size: 14px;
    line-height: 22px; }
  #info-jewel .extra {
    font-size: 12px;
    font-weight: bold;
    color: #808080;
    text-transform: uppercase; }
  #info-jewel .fechar {
    position: absolute;
    top: 0;
    right: 0; }
    #info-jewel .fechar .outline {
      fill: none;
      stroke: white;
      stroke-width: 2px; }
    #info-jewel .fechar .fill {
      fill: white; }

#overlays {
  position: fixed;
  width: 100vw;
  height: 100vh;
  perspective: 100px; }
  #overlays .jewel {
    position: absolute;
    left: 50vw;
    top: calc(50vh - 100px); }
    #overlays .jewel img {
      position: absolute;
      left: 50%;
      top: 50%;
      height: 20px;
      margin-top: 2px;
      transform: translate(-50%, -50%) scale(0);
      opacity: 0;
      pointer-events: none;
      transition: 0.3s opacity, 0.3s transform; }
    #overlays .jewel button {
      width: 50px;
      height: 50px;
      border-radius: 9999px;
      position: relative;
      border: 2px solid transparent;
      transition: 0.3s background-color, 0.3s border-color;
      animation: pulse 2s alternate infinite; }

@keyframes pulse {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(0.5); } }
      #overlays .jewel button:before {
        content: '';
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        border-radius: 9999px;
        background-color: white;
        width: 50px;
        height: 50px;
        margin: -25px;
        transform: scale(0.12);
        transition: 0.3s background-color, 0.3s transform; }
      #overlays .jewel button.active, #overlays .jewel button:hover {
        animation: none;
        border: 2px solid white;
        background-color: black; }
        #overlays .jewel button.active img, #overlays .jewel button:hover img {
          opacity: 1;
          transform: translate(-50%, -50%) scale(1); }
      #overlays .jewel button:hover:before {
        transform: scale(1); }
    #overlays .jewel:nth-child(even) button {
      animation-delay: 1s; }
    #overlays .jewel:nth-child(1) {
      transform: translate(calc(2.45vw + 16.66px), calc(4.3125vw + 69px)); }
    #overlays .jewel:nth-child(2) {
      transform: translate(calc(-10.1vw + -68.68px), calc(3.4375vw + 55px)); }
    #overlays .jewel:nth-child(3) {
      transform: translate(calc(-0.5vw + -3.4px), calc(0.75vw + 12px)); }
    #overlays .jewel:nth-child(4) {
      transform: translate(calc(-7vw + -47.6px), calc(-0.625vw + -10px)); }
    #overlays .jewel:nth-child(5) {
      transform: translate(calc(2.95vw + 20.06px), calc(-0.84375vw + -13.5px)); }
    #overlays .jewel:nth-child(6) {
      transform: translate(calc(8vw + 54.4px), calc(2.25vw + 36px)); }
    #overlays .jewel:nth-child(7) {
      transform: translate(calc(3.3vw + 22.44px), calc(-4.78125vw + -76.5px)); }
    #overlays .jewel:nth-child(8) {
      transform: translate(calc(-0.5vw + -3.4px), calc(-2.65625vw + -42.5px)); }
    #overlays .jewel:nth-child(9) {
      transform: translate(calc(-4.85vw + -32.98px), calc(-1.15625vw + -18.5px)); }
    #overlays .jewel:nth-child(10) {
      transform: translate(calc(-2.05vw + -13.94px), calc(1.8125vw + 29px)); }

#horizontal {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 180px; }
  #horizontal:before {
    content: '';
    background-color: rgba(0, 0, 0, 0.85);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 180px;
    width: 9999px; }
  #horizontal .background {
    position: absolute;
    right: 0;
    background-color: #2a2a2a;
    height: 100%;
    width: 100vw; }
  #horizontal .years {
    position: absolute;
    top: 13px;
    left: 86px; }
    #horizontal .years .year {
      font-size: 9px;
      line-height: 12px;
      letter-spacing: 1px;
      text-transform: uppercase;
      font-weight: bold;
      color: #808080;
      position: absolute; }
      #horizontal .years .year:before {
        content: '';
        display: block;
        width: 1px;
        height: 150px;
        background-color: #808080;
        position: absolute;
        top: 15px;
        left: 13px; }
  #horizontal .bullets {
    position: absolute;
    display: flex;
    top: 40px;
    left: 90px; }
    #horizontal .bullets .jewel {
      position: absolute;
      bottom: 60px;
      color: white;
      transform: translate(-50%, 20px);
      opacity: 0;
      transition: 0.5s transform, 0.5s opacity;
      pointer-events: none; }
      #horizontal .bullets .jewel img {
        height: 20px; }
      #horizontal .bullets .jewel:after {
        content: '';
        display: block;
        width: 2px;
        height: 20px;
        background-color: #2a2a2a;
        margin: 10px auto 0;
        transform: translateX(-1px); }
    #horizontal .bullets button {
      width: 20px;
      height: 20px;
      position: absolute; }
      #horizontal .bullets button:before, #horizontal .bullets button:after {
        content: '';
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        border-radius: 9999px;
        background-color: #7f7f7f;
        width: 6px;
        height: 6px;
        margin: -3px; }
      #horizontal .bullets button:after {
        background-color: white;
        transform: scale(0);
        transition: 0.3s background-color, 0.3s transform; }
      #horizontal .bullets button.big {
        z-index: 1; }
        #horizontal .bullets button.big:before {
          background-color: black;
          border: 2px solid #7f7f7f;
          width: 12px;
          height: 12px;
          margin: -8px; }
        #horizontal .bullets button.big:after {
          background-color: #e98d20;
          width: 16px;
          height: 16px;
          margin: -8px;
          transform: scale(0.25); }
      #horizontal .bullets button:hover, #horizontal .bullets button.active {
        z-index: 2; }
        #horizontal .bullets button:hover:after, #horizontal .bullets button.active:after {
          transform: scale(1); }
        #horizontal .bullets button:hover.big:after, #horizontal .bullets button.active.big:after {
          background-color: white; }
      #horizontal .bullets button.active .jewel {
        transform: translate(-50%, 0);
        opacity: 1;
        cursor: pointer;
        pointer-events: auto; }
  #horizontal .info {
    position: absolute;
    top: 60px;
    left: 0;
    padding: 10px;
    color: white;
    font-size: 14px;
    line-height: 20px;
    width: 50vw;
    box-sizing: border-box;
    text-shadow: 0 1px 0 #2a2a2a; }
    #horizontal .info .value {
      color: #e98d20;
      margin-bottom: 10px; }
    #horizontal .info .date,
    #horizontal .info .extra {
      font-size: 9px;
      line-height: 12px;
      letter-spacing: 1px;
      text-transform: uppercase;
      font-weight: bold; }
    #horizontal .info .extra {
      color: #808080; }
    #horizontal .info.after-middle {
      transform: translateX(-100%);
      text-align: right; }

#vertical {
  position: fixed;
  top: 100px;
  left: 99px;
  height: calc(100vh - 280px);
  border-left: 1px solid #2a2a2a;
  pointer-events: none; }
  @media (min-width: 960px) {
    #vertical {
      pointer-events: inherit; } }
  #vertical .label {
    font-size: 14px;
    color: #808080;
    padding-left: 15px;
    visibility: hidden; }
    @media (min-width: 960px) {
      #vertical .label {
        visibility: inherit; } }
  #vertical .info {
    position: relative;
    height: calc(100% - 100px);
    margin: 50px 0; }
    #vertical .info .text {
      position: absolute;
      bottom: 0;
      padding-left: 15px;
      width: 200px;
      color: white;
      font-size: 14px;
      line-height: 20px;
      transform: translateY(50%);
      background-color: black; }
      @media (min-width: 960px) {
        #vertical .info .text {
          background-color: transparent; } }
      #vertical .info .text:before {
        content: '';
        display: block;
        width: 10px;
        height: 10px;
        border: 2px solid #e98d20;
        border-radius: 9999px;
        position: absolute;
        left: -7px;
        top: 3px; }
      #vertical .info .text:after {
        content: '';
        display: block;
        width: 4px;
        height: 4px;
        background-color: white;
        border-radius: 9999px;
        position: absolute;
        left: -2px;
        top: 8px; }
    #vertical .info .value {
      font-size: 14px;
      color: #e98d20; }

#controls {
  position: fixed;
  top: 50px;
  left: 78px; }
  #controls svg,
  #controls img {
    height: 35px;
    width: auto; }
  #controls svg .stroke {
    fill: none;
    stroke: #fff;
    stroke-miterlimit: 10;
    stroke-width: 2px; }
  #controls svg .fill {
    fill: #fff; }
  #controls button {
    opacity: 0.75;
    transition: 0.3s opacity; }
    #controls button:hover {
      opacity: 1; }
  #controls .rewind {
    margin-left: 35px;
    visibility: hidden; }
    @media (min-width: 960px) {
      #controls .rewind {
        visibility: inherit; } }
  #controls .play {
    display: none; }

#container {
  position: fixed;
  top: 0;
  left: 0; }

#picture-image {
  position: fixed;
  top: -9999px;
  left: -9999px; }

/*# sourceMappingURL=style.css.map */