.tl-wrapper {

  margin-top:80px;
  margin-bottom:20px;
  
}

.tl-wrapper .item {
    padding-bottom:80px;
    position: relative;
}

.tl-wrapper .item .year {
    background-color:#2E5C99;
    padding:11px 35px 11px 35px;
    color:#fff;
    border-radius:50px;
    font-size:20px;
    font-weight: 700;
    text-align:center;
    display:inline-block;
}

.tl-wrapper .item .content-wrap {
    margin-top:25px;
    
}

.tl-wrapper .item .content-wrap .img {
    width:100%;
    height:285px;
    background-size:cover;
    background-position: center center;
    border-radius:3px 3px 0 0;
    position: relative;
}

.tl-wrapper .item .content-wrap .infos {
    background-color:#2E5C990D;
    border-radius:0 0 3px 3px;
    padding:35px;
}

.tl-wrapper .item .content-wrap .box * {
    color:#fff;
}

.tl-wrapper .item .content-wrap .box {
    position: absolute;
    bottom:30px;
    left:30px;
    
}

.tl-wrapper .item {
    position: relative;
}

.tl-wrapper h2 {
    margin-bottom:0px !important;
    font-size:27px !important;
    line-height: 35px !important;
}

.tl-wrapper a.button {
    margin-top:20px;
}

.tl-wrapper ul {
    margin-top:0 !important;
    margin-bottom:0 !important;
}

.tl-wrapper ul li {
    padding-bottom:20px;
}

.tl-wrapper .item.last-year .year {
    background-color:#CBD6E5;
}

.tl-wrapper .v-line {
    position: absolute;
    height:100%;
    width:4px;
    background-color:#2E5C99;
    left:-60px;
    top:0;
}

.tl-wrapper .v-line .circle {
    content:'';
    width:25px;
    height:25px;
    position: absolute;
    top:14px;
    left:-10px;
   
    border-radius:50%;
    background-color:#fff;
    border:5px solid #2E5C99; 
}

.tl-wrapper .items .item:last-child .v-line {
     background-color:#CBD6E5;
}


.tl-wrapper .items .item:first-child .circle  {
    width:39px;
    height:39px;
    border:12px solid #2E5C99;
    left:-17px;
    top:5px;    
}

.tl-wrapper .items .item:first-child .circle:before, .tl-wrapper .items .item.real.last .v-line .circle:before {
    content:'';
    width:10px;
    height:30px;
    background-color:white;
    position: absolute;
    top:-42px;
    
}

.tl-wrapper .items .item.real.last .v-line .circle:before {
    width:4px;
    height:30px;    
    top:-33px;
    background-color:#2E5C99;
    left:5px;
}

.tl-wrapper .items .item.real.last .v-line  {
     background-color:#CBD6E5;
}

.tl-wrapper .items .item.last-year {
    padding-bottom:3px;
}

.tl-wrapper .items .item.last-year .v-line .circle:before, .tl-wrapper .items .item.dummy:not(.last-line) .circle:before {
    width:4px;
    height:39px;    
    top:20px;
    background-color:#fff;
    left:5px;
    content:'';
    position: absolute;
}


.tl-wrapper .items .item.last-year .circle, .tl-wrapper .items .item.dummy .circle {
     border-color:#CBD6E5;
}

.tl-wrapper .items .item.last-year .v-line {
    background-color:#CBD6E5;
}

.tl-wrapper .items .item.dummy:not(.last-line) .v-line {
   background-color:transparent; 
}

.tl-wrapper .items .item.dummy {
    padding-bottom:54px;
}

.tl-wrapper .items .item.dummy.last-line {
    padding-bottom:100px;
}

.tl-wrapper .items .item.dummy.last-line .v-line {
    height:calc(100% + 30px);
    background-color:#CBD6E5;
}

.tl-wrapper .items .item.dummy.last-line .circle:before {
    width:4px;
    height:20px;    
    top:-25px;
    background-color:#fff;
    left:5px;
    content:'';
    position: absolute;
}

.tl-wrapper .items .item.future .circle {
    background-color:#CBD6E5;
    width: 39px;
    height: 39px;
    left: -17px;
    top: 6px;
}

.tl-wrapper .items .item.future .circle:before {
    display:none;
}





@media (max-width: 767px) {
    
    
    .tl-wrapper .v-line {
   
      width: 3px;
      left: -29px;
    }
    
    .tl-wrapper .items .item:first-child .circle {
        width: 24px;
        height: 24px;
        
        left: -10px;
        top: 13px;
    }
   
    .item:first-child .circle:before, .tl-wrapper .items .item.real.last .v-line .circle:before {
      
        left: -2px;
    }
    
    .tl-wrapper .v-line .circle {
      
        width: 20px;
        height: 20px;
          
        top: 14px;
        left: -8px;
       
        border: 3px solid #2E5C99;
    }
    
    .tl-wrapper .items .item.real.last .v-line .circle:before {
        width:3px;
        left:5px;
    }
    
    .tl-wrapper .items .item.last-year .v-line .circle:before, .tl-wrapper .items .item.dummy:not(.last-line) .circle:before {
        width: 4px;
        height: 39px;
        top: 17px;
    }
    
    .tl-wrapper .items .item.future .circle {
  
        width: 25px;
        height: 25px;
        left: -11px;
        top: 13px;
    }
    
    .tl-wrapper .items .item.dummy.last-line .circle:before {
    
        top: -23px;
    }
    
    .tl-wrapper .item .content-wrap .box {
       
        bottom: 12px;
        left: 12px;
    }
    
    .tl-wrapper .item .content-wrap .infos {
        background-color: #2E5C990D;
        border-radius: 0 0 3px 3px;
        padding: 20px;
    }
    
    .tl-wrapper .item .content-wrap .infos ul li, .item .content-wrap .infos ol li {
      
        padding-left: 15px !important; 
    }
    
    .tl-wrapper .content-wrap *:not(.button):not(h2) {
        font-size:15px !important; 
        line-height: 25px !important; 
    }
    
    .tl-wrapper .content-wrap h2 {
        font-size:21px !important; 
        
    }
    
    .tl-wrapper .content-wrap a.button {
        font-size:16px;
        
    }
        
    .tl-wrapper .content-wrap ul li:before {
      top:7px;
    }
    
    .tl-wrapper a.button {
        margin-top: 13px;
        padding-left:20px;
        padding-right:20px;
    }
    
}