html.timeline {
  height: 100%;
  scroll-behavior: initial;
  overscroll-behavior-y: none;
  overscroll-behavior-x: none; }

body.timeline {
  height: 100vh;
  width: 100%;
  scroll-behavior: initial;
  background-image: url("../gfx/timeline/timeline_main_bg.png");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed; }
  body.timeline main {
    scroll-behavior: initial;
    overflow-x: scroll;
    overflow-y: hidden; }
    body.timeline main:focus {
      outline: none; }
  body.timeline #loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var( --slate-grey);
    background: linear-gradient(135deg, #07272D 3.3%, #031012 115.64%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 900; }
    body.timeline #loader-wrapper div.progress-bar-container {
      width: 100%;
      height: 5px;
      margin-top: -8px;
      padding-left: 15.5%;
      padding-right: 16%;
      background-color: transparent; }
      @media (min-width: 768px) {
        body.timeline #loader-wrapper div.progress-bar-container {
          padding-left: 90px;
          padding-right: 94px;
          margin-top: -12px; } }
      @media (min-width: 992px) {
        body.timeline #loader-wrapper div.progress-bar-container {
          padding-left: 72px;
          padding-right: 76px; } }
      @media (min-width: 1200px) {
        body.timeline #loader-wrapper div.progress-bar-container {
          padding-left: 86px;
          padding-right: 90px; } }
      @media (min-width: 1400px) {
        body.timeline #loader-wrapper div.progress-bar-container {
          padding-left: 100px;
          padding-right: 104px; } }
      body.timeline #loader-wrapper div.progress-bar-container div.progress-bar-inner {
        width: 0%;
        height: 100%;
        background-color: var(--warm-orange); }
  body.timeline section.timeline-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }
    body.timeline section.timeline-container .container {
      height: 50vh; }
      body.timeline section.timeline-container .container h2.timeline-header {
        position: fixed;
        transform: translate3d(10px, -20px, 0px);
        font-family: var(--secondary-font);
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
        letter-spacing: -0.32px;
        color: #fff; }
        @media (min-width: 992px) {
          body.timeline section.timeline-container .container h2.timeline-header {
            font-size: 38px;
            line-height: 38px; } }
      body.timeline section.timeline-container .container svg {
        height: 100%; }
        body.timeline section.timeline-container .container svg g.building {
          opacity: 0; }
        body.timeline section.timeline-container .container svg circle.circle {
          opacity: 0; }
        body.timeline section.timeline-container .container svg g.arrow-head {
          opacity: 0; }
        body.timeline section.timeline-container .container svg line.line {
          stroke-dasharray: 250;
          stroke-dashoffset: 250; }
      body.timeline section.timeline-container .container img.swipe-icon {
        position: absolute;
        left: 50%;
        transform: translate3d(-50%, 0px, 0px);
        width: 50px; }
        @media (min-width: 992px) {
          body.timeline section.timeline-container .container img.swipe-icon {
            display: none; } }
  body.timeline section.progress-bar-main-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 75%;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate3d(-50%, -40px, 0px); }
    @media (min-width: 992px) {
      body.timeline section.progress-bar-main-container {
        width: 65%;
        transform: translate3d(-50%, -80px, 0px); } }
    @media (min-width: 1450px) {
      body.timeline section.progress-bar-main-container {
        width: 50%; } }
    body.timeline section.progress-bar-main-container div.progress-bar-flex-container {
      width: 80%;
      margin-left: 20px;
      margin-right: 20px; }
    body.timeline section.progress-bar-main-container p {
      font-family: var(--secondary-font);
      font-size: 32px;
      font-style: normal;
      font-weight: 400;
      line-height: 120%; /* 38.4px */
      letter-spacing: 1px;
      color: #fff; }
      @media (min-width: 992px) {
        body.timeline section.progress-bar-main-container p {
          font-size: 32px;
          line-height: 32px; } }
    body.timeline section.progress-bar-main-container section.progress-bar-container {
      width: 100%;
      height: 5px;
      margin-top: -12px;
      background-color: transparent; }
      body.timeline section.progress-bar-main-container section.progress-bar-container div.progress-bar-inner {
        width: 0%;
        height: 100%;
        background-color: var(--warm-orange); }