/**
 * Settings
**/
/**
 * Sass
**/
.timeliny {
  position: relative;
  display: block;
  margin: 0 auto 4rem;
  padding: 10rem 0;
  width: 100%;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  font: normal normal 400 1rem/1 Arial, sans-serif;
  text-rendering: optimizeLegibility;
  color: #ddd;
  opacity: 0;
  overflow: hidden;
  cursor: move; }
  .timeliny.loaded {
    opacity: 1; }
  .timeliny::before {
    content: '';
    position: absolute;
    background-color: #e5e5e5;
    width: 100%;
    height: 1px;
    top: 50%;
    left: 0; }
  .timeliny .timeliny-wrapper {
    display: block;
    margin: auto;
    width: 100%;
    max-width: 1024px; }
  .timeliny .timeliny-dot {
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -0.6rem;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    border: 1px solid #ddd;
    background-color: #fff; }
    .timeliny .timeliny-dot::before {
      -webkit-transition: all 0.35s ease-in-out;
      -moz-transition: all 0.35s ease-in-out;
      transition: all 0.35s ease-in-out;
      content: attr(data-year);
      display: block;
      position: absolute;
      top: -5rem;
      left: 1.25rem;
      color: #000; }
    .timeliny .timeliny-dot::after {
      -webkit-transition: all 0.35s ease-in-out;
      -moz-transition: all 0.35s ease-in-out;
      transition: all 0.35s ease-in-out;
      -ms-transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
      content: attr(data-text);
      display: block;
      position: absolute;
      width: 256px;
      top: 5.6rem;
      left: 1.25rem;
      color: #ddd;
      opacity: 0;
      font-size: 0.9em; }
      @media (min-width: 768px) {
        .timeliny .timeliny-dot::after {
          width: 341.33333px; } }
  .timeliny .timeliny-timeline {
    position: absolute;
    top: 50%;
    left: 0;
    display: table;
    width: 100%;
    z-index: 5; }
    .timeliny .timeliny-timeline .timeliny-timeblock {
      display: table-cell;
      position: relative; }
      .timeliny .timeliny-timeline .timeliny-timeblock.active .timeliny-dot {
        border-color: #37404A;
        background-color: #37404A;
        -webkit-box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.33);
        -moz-box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.33);
        box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.33); }
        .timeliny .timeliny-timeline .timeliny-timeblock.active .timeliny-dot::before {
          color: #37404A; }
        .timeliny .timeliny-timeline .timeliny-timeblock.active .timeliny-dot::after {
          color: #000;
          opacity: 1; }
      .timeliny .timeliny-timeline .timeliny-timeblock.inactive .timeliny-dot {
        cursor: move; }
        .timeliny .timeliny-timeline .timeliny-timeblock.inactive .timeliny-dot::before {
          color: #ddd; }
      .timeliny .timeliny-timeline .timeliny-timeblock:not(.inactive):not(.active) .timeliny-dot:hover {
        border-color: #ddd;
        background-color: #ddd; }
        .timeliny .timeliny-timeline .timeliny-timeblock:not(.inactive):not(.active) .timeliny-dot:hover::before {
          color: #000; }
      .timeliny .timeliny-timeline .timeliny-timeblock .timeliny-dot:hover::after {
        color: #000;
        opacity: 1; }
  .timeliny .timeliny-vertical-line {
    position: absolute;
    display: block;
    z-index: 1;
    left: 16%;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: #ddd; }
    @media (min-width: 768px) {
      .timeliny .timeliny-vertical-line {
        left: 32%; } }
    .timeliny .timeliny-vertical-line::before {
      content: '';
      position: absolute;
      top: 0;
      left: -7px;
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-top: 8px solid #ddd; }
    .timeliny .timeliny-vertical-line::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: -7px;
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 8px solid #ddd; }