.icon_timeline{
    width: 76px;
    height: 42px;
}
  
  .icon_timeline img{
    width: 100%;
    max-width: 79px;
  }
  
  .timeline {
    padding: 0 8%;
    
    ul {
        padding: 1em 0 0 2em;
        margin: 0;
        list-style: none;
        position: relative;
        width: 100%;
      
      &::before {
        content: ' ';
        height: 100%;
        width: 2px;
        background-color:var(--color1);
        position: absolute;
        top: 50px;
        left: 7.7em;
        z-index: -1;
        animation: lineaV 3s infinite;
        
      }
    }
    
    li div{
      display: inline-block;
      margin: 1em 0;
      vertical-align: top;
    }
    
    .bullet {
      width: 1.5em;
      height: 1.5em;
      box-sizing: border-box;
      border-radius: 50%;
      background: var(--color1);
      z-index: 1;
      margin-right: 1em;
    border: 2px solid var(--color1);
   
      
    }
    
    .time {
        width: 30%;
        font-size: calc(0.8rem + 0.5vh);
        padding-top: 0.0em;
        font-family: var(--font1);
        line-height: 2;
        text-transform: uppercase;
        color: var(--color1);
    }
    
    .desc {
        width: 70%;
        font-family: var(--font3);
        font-size: calc(1rem + 0.6vh);
        color: var(--color1);
        margin: 0;
        left: -10px;
        padding-top: 0.9rem !important;
        padding-bottom: 2rem;
        text-align: left;
        line-height: 1.5;
        padding-left: 122px;
    }
    
    
    .people img{
      width: 30px;
      height: 30px;
      border-radius: 50%;
    }
  
  
  }


@media screen AND (min-width:800px) {

    .timeline {
    
        ul {
            padding: 1em 0 0 2em;
            margin: 0;
            list-style: none;
            position: relative;  
            display: flex;
           justify-content: space-between;
            &::before {
                content: ' ';
                height: 4px;
                width: 95%;
                background-color: var(--color1);
                position: absolute;
                left: 20px;
                top: 8.7em;
                z-index: -1;
                animation: linea 3.0s infinite;
                
              }
        }

        .bullet{
            margin-top: 55px;
            margin-left: 20px;
        }

        li div{
            display: flex;
            flex-direction: column;
            width: 100%;
            align-content: center;
        }

        .time {
            width: 100%;
            font-size: 1.5em;
            padding-top: 0em;
            margin-top: 25px;
          }
          
          .desc {
            width: 80%;
            padding-top: 0px !important;
            line-height: 1;
            padding-left: 0px;
            padding-right: 20px;

          }
    }

    .icon_timeline img{
        width: 100%;
        max-width: 100px;
      }
      
      .icon_timeline{
    padding-bottom: 20px;
      }
    
}


@keyframes linea {

    0%{
        width: 0%;
    }

    20%{
        width: 20%;
    }

    40%{
        width: 40%;
    }

    60%{
        width: 60%;
    }

    80%{
        width: 80%;
    }

    100%{
        width: 95%;
    }
    
}

@keyframes lineaV {

    0%{
        height: 0%;
    }

    20%{
        height: 20%;
    }

    40%{
        height: 40%;
    }

    60%{
        height: 60%;
    }

    80%{
        height: 80%;
    }

    100%{
        height: 95%;
    }
    
}