.climate-journey {
  .side-nav {
    position: fixed;
    top: #{$header-height + 10px};
    right: 60px;
    height: calc(100vh - #{$header-height + 20px});
    transition: opacity 250ms ease-out;
    opacity: 0;
    pointer-events: none;
  }
  .side-nav-shadow {
      position: fixed;
      top: #{$header-height + 10px};
      right: 46px;
      height: calc(100vh - #{$header-height + 20px});
      pointer-events: none;
      opacity: 0;
  }
  .side-nav-shadow svg {
      height: calc(100vh - #{$header-height + 20px});
  }
  ._current-section-1 .side-nav,
  ._current-section-2 .side-nav,
  ._current-section-3 .side-nav,
  ._current-section-4 .side-nav,
  ._current-section-5 .side-nav {
      opacity: 1;
      pointer-events: all;
  }
  ._current-section-1 .side-nav-shadow,
  ._current-section-2 .side-nav-shadow,
  ._current-section-3 .side-nav-shadow,
  ._current-section-4 .side-nav-shadow,
  ._current-section-5 .side-nav-shadow {
      opacity: 1;
  }
  .side-nav svg {
      height: calc(100vh - #{$header-height + 20px});
      width: auto;
  }
  .journey-path {
      transition: stroke-dashoffset 100ms linear;
  }
  #journey-base1 {
      transition: stroke-dashoffset 100ms linear 100ms;
  }
  #journey-base2 {
      transition: stroke-dashoffset 100ms linear 200ms;
  }
  #journey-base3 {
      transition: stroke-dashoffset 100ms linear 300ms;
  }
  #journey-base4 {
      transition: stroke-dashoffset 100ms linear 400ms;
  }
  #journey-base5 {
      transition: stroke-dashoffset 100ms linear 500ms;
  }
  #journey-path-1,
  #journey-base1 {
      stroke-dasharray: 154;
      stroke-dashoffset: 154;
  }
  #journey-path-2,
  #journey-base2 {
      stroke-dasharray: 140;
      stroke-dashoffset: 140;
  }
  #journey-path-3,
  #journey-base3 {
      stroke-dasharray: 145;
      stroke-dashoffset: 145;
  }
  #journey-path-4,
  #journey-base4 {
      stroke-dasharray: 140;
      stroke-dashoffset: 140;
  }
  #journey-path-5,
  #journey-base5 {
      stroke-dasharray: 150;
      stroke-dashoffset: 150;
  }
  ._current-section-1 #journey-path-1,
  ._current-section-2 #journey-path-2,
  ._current-section-3 #journey-path-3,
  ._current-section-4 #journey-path-4,
  ._current-section-5 #journey-path-5 {
      stroke-dashoffset: 0;
  }
  ._current-section-1 .journey-base-path,
  ._current-section-2 .journey-base-path,
  ._current-section-3 .journey-base-path,
  ._current-section-4 .journey-base-path,
  ._current-section-5 .journey-base-path {
      stroke-dashoffset: 0 !important;
      transition-delay: 0 !important;
  }
  ._current-section-2 #journey-path-1,
  ._current-section-3 #journey-path-1,
  ._current-section-4 #journey-path-1,
  ._current-section-5 #journey-path-1,
  ._current-section-6 #journey-path-1 {
      stroke-dashoffset: -154;
  }
  ._current-section-3 #journey-path-2,
  ._current-section-4 #journey-path-2,
  ._current-section-5 #journey-path-2,
  ._current-section-6 #journey-path-2 {
      stroke-dashoffset: -140;
  }
  ._current-section-4 #journey-path-3,
  ._current-section-5 #journey-path-3,
  ._current-section-6 #journey-path-3 {
      stroke-dashoffset: -145;
  }
  ._current-section-5 #journey-path-4,
  ._current-section-6 #journey-path-4 {
      stroke-dashoffset: -140;
  }
  ._current-section-6 #journey-path-5 {
      stroke-dashoffset: -150;
  }
  .nav-anchor {
      position: absolute;
      top: 0;
      left: 0;
      width: 32px;
      height: 32px;
      transform: translateX(-16px) translateY(-16px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }
  .nav-anchor:before {
      content: '';
      display: block;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      transition: all 0.2s linear;
      background-color: #fff;
      opacity: 0;
      transform: scale(0);
      transition: all 200ms ease-out;
  }
  .nav-anchor-1:before {
      transition-delay: 90ms;
  }
  .nav-anchor-2:before {
      transition-delay: 190ms;
  }
  .nav-anchor-3:before {
      transition-delay: 290ms;
  }
  .nav-anchor-4:before {
      transition-delay: 390ms;
  }
  .nav-anchor-5:before {
      transition-delay: 490ms;
  }
  .nav-anchor-6:before {
      transition-delay: 590ms;
  }
  ._current-section-1 .nav-anchor:before,
  ._current-section-2 .nav-anchor:before,
  ._current-section-3 .nav-anchor:before,
  ._current-section-4 .nav-anchor:before,
  ._current-section-5 .nav-anchor:before {
      opacity: 1;
      transform: scale(1);
  }
  ._current-section-0 .nav-anchor-0:before,
  ._current-section-1 .nav-anchor-1:before,
  ._current-section-2 .nav-anchor-2:before,
  ._current-section-3 .nav-anchor-3:before,
  ._current-section-4 .nav-anchor-4:before,
  ._current-section-5 .nav-anchor-5:before {
      width: 20px;
      height: 20px;
  }
  .nav-anchor:hover:before {
      width: 24px !important;
      height: 24px !important;
  }
  .nav-anchor-0 {
      top: 0%;
      left: 9%;
  }
  .nav-anchor-1 {
      top: 20.1%;
      left: 86%;
  }
  .nav-anchor-2 {
      top: 39.8%;
      left: 57%;
  }
  .nav-anchor-3 {
      top: 59.8%;
      left: 9%;
  }
  .nav-anchor-4 {
      top: 79.9%;
      left: 38%;
  }
  .nav-anchor-5 {
      top: 100%;
      left: 55%;
  }
  .nav-tooltip {
      display: block;
      position: absolute;
      right: 39px;
      top: 0px;
      color: #fff;
      font-size: 1rem;
      font-weight: bold;
      line-height: 2.2rem;
      padding: 5px 8px;
      background: rgba(0,0,0,0.45);
      border-radius: 8px;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transform: translateX(-20px);
      transition: all 0.2s ease-out;
  }
  .nav-anchor:hover .nav-tooltip {
      opacity: 1;
      transform: translateX(0);
  }
}