.timeline {
  list-style: none;
  padding: 20px 0 120px;
  position: relative;
}
  .timeline:before {
    top: 2px;
    bottom: 15px;
    position: absolute;
    content: " ";
    width: 3px;
    background-color: #dadada;
    left: 50%;
    margin-left: -1.5px;
  }
    .arrowhead{
      width: 0;
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: -15px;
      
      border-top: 0 solid transparent;
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 15px solid #eeeeee;
    }
  .timeline > li {
    width: 50%;
    padding-left: 42px;
    padding-right: 42px;    
    margin-bottom: 30px;    
    position: relative;
    clear: both;
  }

/*Panel*/
  .timeline > li > .timeline-panel {
    width: 92%;
    float: left;
    border: 2px solid #d4d4d4;
    /*border-radius: 2px;*/
    /*padding: 20px;*/
    position: relative;
    padding: 25px;
  }
    .timeline > li > .timeline-panel:before {
      position: absolute;
      top: 26px;
      right: -15px;
      display: inline-block;
      border-top: 15px solid transparent;
      border-left: 15px solid #ccc;
      border-right: 0 solid #ccc;
      border-bottom: 15px solid transparent;
      content: " ";
      display: none;
    }
    .timeline > li > .timeline-panel:after {
      position: absolute;
      top: 27px;
      right: -14px;
      display: inline-block;
      border-top: 14px solid transparent;
      border-left: 14px solid #fff;
      border-right: 0 solid #fff;
      border-bottom: 14px solid transparent;
      content: " ";  
      display: none; 
    }

    .timeline-panel img {
      width: 100%;
      padding: 10px 10px 0 10px;
    }


/*Inverted panel*/
  .timeline > li.timeline-inverted > .timeline-panel {
    float: right;
  }
    .timeline > li.timeline-inverted > .timeline-panel:before {
      border-left-width: 0;
      border-right-width: 15px;
      left: -15px;
      right: auto;
    }
    .timeline > li.timeline-inverted > .timeline-panel:after {
      border-left-width: 0;
      border-right-width: 14px;
      left: -14px;
      right: auto;
    }

  .timeline > li.timeline-inverted{
    margin-top: 0px;
    margin-bottom: 30px;
  }
    .timeline > li:nth-child(3) {
    }


  /*Last panel*/
  @media (min-width: 850px) {
    .timeline .last{
      margin-top: -40px;
    }
      .timeline .last .timeline-panel{
          margin-top: 75px;
          left: calc(50% + 60px);
      }
      .timeline .last .timeline-panel:before{
        top: -15px;
        right: calc(50% - 7px);
        border-top: 0 solid transparent;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 15px solid #ccc;
      }
      .timeline .last .timeline-panel:after{
        top: -14px;
        right: calc(50% - 6.5px);
        border-top: 0 solid transparent;
        border-left: 14px solid transparent;
        border-right: 14px solid transparent;
        border-bottom: 14px solid #fff;
      }
  }


/*Badge*/
  .timeline > li > .timeline-badge {   
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 1.2em;
    text-align: center;
    position: absolute;
    top: 16px;
    right: 5px;
    z-index: 100; 
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%; 
    cursor: default;
  }
    .timeline > li.timeline-inverted > .timeline-badge{
      left: 5px;
    }

  .timeline > li > .timeline-badge:before{
    position: absolute;
    top: 58%;
    right: -11px;
    content: ' ';
    display: block;
    width: 12px;
    height: 12px;
    margin-top: -10px;
    background: #fff;
    border-radius: 10px;
    border: 4px solid rgb(255,80,80);
    z-index: 10;
  }
    .timeline > li.timeline-inverted > .timeline-badge:before{
      left: -11px;
    }




/*Content*/
  .timeline-title {
    margin-top: 0;
    padding: 20px 20px 0px 20px;
    color: inherit;
  }
  .timeline-body > ul {
    padding:0 20px 20px 20px;
    margin-bottom: 0;
  }
    .timeline-body > p + p {
      margin-top: 5px;
    }

  .timeline-footer{
    background-color:#f4f4f4;
    padding: 10px;
    text-align: center;   
  }
    .timeline-footer > a{
      padding:20px;
      cursor: pointer;
      text-decoration: none;
    }

/*Placement small devices*/
@media (max-width: 850px) {
     ul.timeline:before { 
        bottom: -15px;
  }
    ul.timeline:before, .arrowhead {
        left: 10px;    
    }
  
    ul.timeline > li {
    min-height: 50px;
      margin-bottom: 20px;
      padding-right: 5px;
      position: relative;
      width:100%;
      float: left;
      clear: left;
    }
    ul.timeline > li > .timeline-panel {
        width: calc(100% - 40px);
        width: -moz-calc(100% - 40px);
        width: -webkit-calc(100% - 40px);
    }


    ul.timeline > li > .timeline-panel {
        float: right;
    }

        ul.timeline > li > .timeline-panel:before {
            border-left-width: 0;
            border-right-width: 15px;
            left: -15px;
            right: auto;
        }

        ul.timeline > li > .timeline-panel:after {
            border-left-width: 0;
            border-right-width: 14px;
            left: -14px;
            right: auto;
        }
    
  .timeline > li.timeline-inverted{
    float: left; 
    clear: left;
    margin-top: 0;
    margin-bottom: 20px;
  }

  ul.timeline > li > .timeline-badge, ul.timeline > li.timeline-inverted > .timeline-badge{
    left: 15.5px;
  }   
  ul.timeline > li > .timeline-badge:before, ul.timeline > li.timeline-inverted > .timeline-badge:before{
    left: -11.5px;
  }
}

.timeline li:nth-child(2n+0) { margin-left: 50%; }

.timeline li .timeline-panel { border-color: #008dc4; border-radius: 10px; background: #008dc4;}  
.timeline li:nth-child(1) .timeline-panel { border-color: #008dc4; background: #008dc4;} 
.timeline li:nth-child(2) .timeline-panel { border-color: #e2880b; background: #e2880b;} 
.timeline li:nth-child(3) .timeline-panel { border-color: #118037; background: #118037;}
.timeline li:nth-child(4) .timeline-panel { border-color: #008dc4; background: #008dc4;} 
.timeline li:nth-child(5) .timeline-panel { border-color: #e2880b; background: #e2880b;} 
.timeline li:nth-child(6) .timeline-panel { border-color: #118037; background: #118037;}
.timeline li:nth-child(7) .timeline-panel { border-color: #008dc4; background: #008dc4;} 
.timeline li:nth-child(8) .timeline-panel { border-color: #e2880b; background: #e2880b;} 
.timeline li:nth-child(9) .timeline-panel { border-color: #118037; background: #118037;}
.timeline li:nth-child(10) .timeline-panel { border-color: #008dc4; background: #008dc4;} 
.timeline li:nth-child(11) .timeline-panel { border-color: #e2880b; background: #e2880b;} 
.timeline li:nth-child(12) .timeline-panel { border-color: #118037; background: #118037;}

.timeline li:nth-child(2n+0) .timeline-badge { left: 5px; }
.timeline li:nth-child(2n+0) .timeline-panel { float: right; }
.timeline li:nth-child(2n+0) .timeline-badge::before { left: -11px;}

/*
.timeline li .timeline-badge::before { border: 4px solid #008dc4; }
.timeline li:nth-child(2n+0) .timeline-badge::before { border: 4px solid #e2880b; }
.timeline li:nth-child(3n+0) .timeline-badge::before { border: 4px solid #118037; }*/