/* Timeline */

.timeline {
    border-left: 4px solid #f74824;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    font-family: 'Raleway', sans-serif;  
    background: #ffffff;
    margin: 50px auto;  
    letter-spacing: 0.5px;   
    position: relative;
    line-height: 1.4em;
    padding: 50px;   
    list-style: none;
    text-align: left;  
    font-weight: 100; 
    min-width: 500px; 
    max-width: 50%; 
  }
    
  .timeline h1 {
      font-family: 'Roboto Slab',serif;
      letter-spacing: 1.5px;
      font-weight: 100;
  }
  
  .timeline h2, .timeline h3 {
      font-family: 'Roboto Slab',serif;
      letter-spacing: 1.5px;
      font-weight: 400;
  }
    
   .timeline .event {
      border-bottom: 1px dashed #f74824;
      padding-bottom: calc((50px * 0.5));
      margin-bottom: 50px;  
      position: relative;
   }
  
   .timeline .event:last-of-type { 
      padding-bottom: 0;
      margin-bottom: 0; 
      border: none;      
  }
  
  .timeline .event:before, .timeline .event:after {
      position: absolute;
      display: block;
      top: 0;
  }
  
  .timeline .event:before {
      left: calc((((160px * 0.6) + 50px + 4px + 11px + (4px * 2)) * 1.5) * -1);
      content: attr(data-date);
      text-align: right;
      font-weight: 100;
      min-width: 160px;
      font-family: 'Roboto Slab',serif;
  }
  
  .timeline .event:after {
      box-shadow: 0 0 0 4px #f74824;
      left: calc((50px + 4px + (11px * 0.35)) * -1);        
      background: #eff0f0;
      border-radius: 50%;  
      height: 11px;
      width: 11px;
      content: "";
      top: 5px;
  }
  
  @media screen and (max-width: 850px) {
      .timeline {
          max-width: 100%;
          min-width: 100%;
      }
  
      .timeline .event {
          padding-top: 50px;
      }
  
      .timeline .event:before {
          left: 0;
          color: #f74824;
          text-align: left;
      }
  }