* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

body {
  background: white;
  color: white;
  width: 100vw;
  height: 100vh; }

strong {
  font-weight: 700; }

.ng-cloak {
  display: none !important; }

.annotation-wrapper {
  -webkit-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s;
  opacity: 1; }
  .annotation-wrapper.ng-hide {
    opacity: 0; }
  .annotation-wrapper .annotation {
    pointer-events: none; }
    .annotation-wrapper .annotation.active {
      pointer-events: auto; }

.timeline-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; }

.timeline {
  display: block;
  position: relative; }
  .timeline.pristine .node.level-1:not(:last-child) .pristine-offset {
    height: 55px; }
  .timeline > .children {
    margin: 0px auto;
    position: relative; }
    .timeline > .children > .node {
      position: relative; }
  .timeline .connector {
    position: absolute;
    left: calc(50% - 8px);
    top: 0;
    height: calc(100% - 16px);
    width: 16px;
    background: rgba(0, 0, 0, 0.4); }
  .timeline .node {
    display: block; }
    .timeline .node > .header {
      padding-bottom: 15px;
      width: 512px;
      -webkit-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
      transform: translate(-50%, 0);
      position: relative;
      left: 50%;
      -webkit-transition: padding 0.5s;
      -o-transition: padding 0.5s;
      transition: padding 0.5s; }
      .timeline .node > .header h1 {
        margin: 0;
        height: 65px;
        line-height: 65px;
        border: 2px solid #00b4ff;
        text-align: center;
        border-radius: 16px;
        cursor: pointer;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center; }
        .timeline .node > .header h1:hover {
          border-color: #0090cc; }
        .timeline .node > .header h1 span {
          width: 100%;
          color: inherit; }
    .timeline .node .pristine-offset {
      -webkit-transition: height 0.5s;
      -o-transition: height 0.5s;
      transition: height 0.5s;
      height: 0; }
    .timeline .node > .children {
      -webkit-transition: height 0.5s;
      -o-transition: height 0.5s;
      transition: height 0.5s; }
    .timeline .node.level-1 > .header h1 {
      background: #00b4ff;
      color: white; }
      .timeline .node.level-1 > .header h1:hover {
        background: #0090cc; }
    .timeline .node.level-1 > .children {
      overflow-y: hidden;
      overflow-x: visible; }
    .timeline .node.level-2 > .header h1 {
      background: white;
      color: #00b4ff; }
      .timeline .node.level-2 > .header h1:hover {
        color: #0090cc; }
    .timeline .node.level-2 > .children {
      overflow-x: visible;
      overflow-y: hidden; }
  .timeline .leaf {
    display: block;
    width: 384px;
    position: relative;
    left: 50%; }
    .timeline .leaf.right {
      -webkit-transform: translate(32px, 0);
      -ms-transform: translate(32px, 0);
      transform: translate(32px, 0); }
      .timeline .leaf.right h3:after {
        left: -56px;
        top: 24px; }
    .timeline .leaf.left {
      -webkit-transform: translate(-416px, 0);
      -ms-transform: translate(-416px, 0);
      transform: translate(-416px, 0); }
      .timeline .leaf.left p, .timeline .leaf.left h3 {
        text-align: right; }
      .timeline .leaf.left h3:after {
        right: -56px;
        top: 24px; }
    .timeline .leaf .header h3 {
      color: #00b4ff;
      font-size: 41px;
      line-height: 50px;
      font-weight: bold;
      cursor: pointer;
      -webkit-transition: color 0.3s;
      -o-transition: color 0.3s;
      transition: color 0.3s;
      padding-bottom: 10px; }
      .timeline .leaf .header h3:after {
        display: block;
        content: "";
        position: absolute;
        width: 48px;
        height: 10px;
        background: #00b4ff;
        -webkit-transition: background 0.3s;
        -o-transition: background 0.3s;
        transition: background 0.3s; }
      .timeline .leaf .header h3:hover {
        color: #0090cc; }
        .timeline .leaf .header h3:hover:after {
          background: #0090cc; }
    .timeline .leaf .event {
      position: relative;
      overflow-y: hidden;
      -webkit-transition: height 0.5s;
      -o-transition: height 0.5s;
      transition: height 0.5s; }
      .timeline .leaf .event p {
        line-height: 28px;
        font-size: 21px;
        color: black;
        margin-bottom: 10px; }
      .timeline .leaf .event img {
        margin-bottom: 10px; }
    .timeline .leaf.expanded h3 {
      color: black; }
      .timeline .leaf.expanded h3:after {
        background: black; }