.tl-container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    line-height: 1.4;
}


.tl-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}


.tl-col-date {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 0px;

    
    width: 120px;

    text-align: right;
}

.tl-col {
    position: relative;
    width: 100%;
    min-height: 1px;

    padding: 5px 15px;


    max-width: calc((100% - 120px) / 3);
    flex: 0 0 calc((100% - 120px) / 3);

    
}

.tl-year-row, .tl-month-row {
    position: relative;
}



.tl-year-row::before {
    position: absolute;
    border-top: 1px solid #e9e9e9;
    content: '';
    width: 100%;
    top: 34px;
} 

.tl-year-row .tl-col-date .tl-date {
    padding: 15px 5px 0px;
    
    background: #FFF;
    font-size: 28px;
}

.tl-month-row::before {
    position: absolute;
    border-top: 1px dashed #e9e9e9;
    content: '';
    width: 100%;
    top: 34px;
} 

.tl-month-row .tl-col-date .tl-date {
    padding: 20px 5px 0px;
    background: #FFF;
    font-size: 18px;
}



@media (max-width: 767px) {
    .tl-col {
        max-width: calc((100% - 80px) / 6);
        flex: 0 0 calc((100% - 80px) / 6);

        /* transition: all 300ms; */
       
    }

    .tl-col-date {
        
        width: 80px;
    }
      
    .tl-col.open {
        max-width: calc((100% - 80px) / 1.5);
        flex: 0 0 calc((100% - 80px) / 1.5);
    } 

    .tl-col.closed .tl-item::after {
        content: '';
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        background-image: url('../images/fade-to-white.png');
        background-repeat: repeat-y;
        background-position: 90% 0%;
        background-size: 150%;
        z-index: 10;
     } 
  

    .tl-col.closed .tl-header-label {
        display: none !important;
      
    }
  
}

.tl-col::before {
    content: '';
    position: absolute;
    height: 100%;
    left: -1px;
}

.tl-col.tl-cat-1::before {
    border-left: 1px solid #a0a0a0;
}

.tl-col.tl-cat-2::before {
    border-left: 1px solid #0fc373;
}


.tl-col.tl-cat-3::before {
    border-left: 1px solid #0082f0;
}

.tl-header {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 56px;
    z-index: 100;
}

.tl-header .tl-col-date {
    background-color: #f2f2f2;
}
.tl-header .tl-col {
    background-color: #f2f2f2;
    padding-top: 20px;
    padding-bottom: 20px;
}

.tl-header .tl-col::after {
    content : '';
    display: block;
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid #FFFFFF;
    left: -11px;
    top: 20px;
}

.tl-header .tl-col.tl-cat-1::after {
    background-color: #a0a0a0;
}
.tl-header .tl-col.tl-cat-2::after {
    background-color: #0fc373;
}
.tl-header .tl-col.tl-cat-3::after {
    background-color: #0082f0;
}


.tl-item {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.tl-col::after {
    content : '';
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #FFFFFF;
    left: -8px;
    top: 26px;

}

.tl-item .tl-item-inner {
    position: relative;
    top: 0px;
    left: 0px;
    border: 1px solid #e0e0e0;
    padding: 10px 8px 0px;

    height: 100%;
    background: #FFFFFF;
}

.tl-item.has-link .tl-item-inner {
    padding-bottom: 40px;
}

.tl-col.tl-cat-1::after {
    background-color: #a0a0a0;
}
.tl-col.tl-cat-2::after {
    background-color: #0fc373;
}
.tl-col.tl-cat-3::after {
    background-color: #0082f0;
}

.tl-col.empty::after {
    content : none;
}

.tl-item:last-child {
    margin-bottom: 0px;
}

.tl-item .tl-date {
    font-size: 12px;
    margin-bottom: 10px;
}

.tl-item .tl-title {
    font-size: 16px;
    margin-bottom: 10px;
    line-height: 1.4;
}

.tl-item img {
    width: 100%;
    
    display: block;
    margin-bottom: 10px;
}

.tl-item .tl-text {
    font-size: 16px;
    
}

.tl-item .tl-link {
    position: absolute;
    display: block;

    bottom: 10px;
    font-size: 16px;
    
}

@media (max-width: 767px) {
    .tl-item .tl-title {
        font-size: 14px;
    }

    .tl-item .tl-text {
        font-size: 14px;
        
    }
    
    .tl-item .tl-link {
        font-size: 14px;
        
    }

    .tl-col-date .tl-year {
       
        padding-top: 19px;
        font-size: 22px;
        
    }
    
    .tl-col-date .tl-month {
       
        padding-top: 24px;
        font-size: 15px;
    }
    
  
}