.main-timeline{
    padding: 100px 0 0px;
}
.main-timeline:after{
    content: '';
    display: block;
    clear: both;
}
.main-timeline:before{
    content: '';
    background-color: #212528;
    height: 100%;
    width: 3px;
    transform: translateX(-50%);
    position: absolute;
    top: 0;
    left: 50%;
}
.main-timeline .timeline{
    width: 50%;
    padding: 0 150px 0 0;
    margin: 0 10px 20px 0;
    float: left;
    position: relative;
    z-index: 1;
}
.main-timeline .timeline:before{
    content: '';
    background-color: #18773A;
    height: 3px;
    width: 200px;
    position: absolute;
    right: 15px;
    top: 14px;
    z-index: -1;
}
.main-timeline .timeline-content{
    color: #555;
    text-align: center;
    padding: 0 0 10px;
    border-radius: 20px;
    display: block;
    margin-top:-85px;
    margin-right:-50px;
}
.main-timeline .timeline-content img{
    width:200px;
    height:200px;
    border-radius:50%;
    border:5px solid #18773A;
    clear:both;
    box-shadow: 0 5px 11px 0 rgba(0,0,0,.28), 0 4px 15px 0 rgba(0,0,0,.25);
}
.main-timeline .timeline-content .description{
    text-align:justify;
    line-height:1.5rem;
    font-size:0.9rem;
    margin-top:1rem;
}
.main-timeline .timeline-content .year{
    position:absolute; right:60px; top:-30px;
    color:#18773A;
    font-size:2rem; font-weight:600;
}


.main-timeline .timeline-content:hover{ text-decoration: none; }
.main-timeline .timeline-dot{
    color: #121365;
    background-color: #18773A;
    text-align: center;
    line-height: 100px;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    position: absolute;
    right: -15px;
    top: 0;
    z-index: 1;
}

.main-timeline .timeline-icon{
    color: #121365;
    font-size: 35px;
}


.main-timeline .timeline:nth-child(even){
    padding: 0 0 0 150px;
    margin: 0 0 20px 10px;
    float: right;
}
.main-timeline .timeline:nth-child(even):before{
    right: auto;
    left: 15px;
}
.main-timeline .timeline:nth-child(even) .timeline-dot{
    right: auto;
    left: -15px;
}
.main-timeline .timeline:nth-child(even) .timeline-icon{
    right: auto;
    left: 20px;
}

.main-timeline .timeline:nth-child(even) .timeline-content{
    margin-left:-50px;
}

.main-timeline .timeline:nth-child(even) .timeline-content .year{
    left:-180px;
}

@media screen and (max-width:991px){
  .main-timeline {padding-top:50px;}
  .main-timeline:before{
      left: 30px !important;
  }

  .main-timeline .timeline{
      float: left !important;
      width:85% !important;
      padding: 0 5% 0 10% !important;
      margin: 0 0 0px 0px !important;
  }
  .main-timeline .timeline:before{
        left: 15px !important;
        width: 80%;
  }
  .main-timeline .timeline .timeline-dot{
    left: 0px !important;
  }
  .main-timeline .timeline .timeline-icon{

  }
  .main-timeline .timeline .timeline-content{
    margin-left:15px !important;
  }
  .main-timeline .timeline .timeline-content img{
    width:120px;
    height:120px;
    float:right;
    margin-top:20px;
  }
  .main-timeline .timeline .timeline-content .year{
    left:10px !important;
  }

  .main-timeline .timeline .timeline-content .description{
    padding-top:170px;
    padding-bottom: 50px;
  }
}



/* timeline 2 */

.timeline-name {position:absolute; top:220px; width:220px; right:0px; text-align:center;}
.timeline-name h4 {color:#18773A; font-size:1.3rem; font-weight:bold; margin-bottom:0;}
.timeline-name p {font-size:0.8rem;}
.timeline-name strong {color:#18773A; font-weight:bold;}

.img-avatar-timeline {border-radius:50%; max-height:150px; border: 2px solid black; z-index:20; position:relative; margin-top:50px;}

.second-timeline {top:200px;position:relative;}

.second-timeline:before{
    content: '';
    background-color: #212528;
    height: calc(100% - 120px);
    width: 3px;
    transform: translateX(-50%);
    position: absolute;
    top: 100px;
    left: 50%;
    z-index:19;
}
.second-timeline .timeline{
    width: 50%;
    padding: 0 150px 0 0;
    margin: -100px 10px 20px 0;
    float: left;
    position: relative;
    z-index: 1;
}

.second-timeline .timeline:first-of-type{

    margin: 0px 10px 20px 0;

}

.second-timeline .timeline:before{
    content: '';
    background-color: #000;
    height: 3px;
    width: 80px;
    position: absolute;
    right: 0px;
    top: 50px;
    z-index: -1;
}
.second-timeline .timeline-content{
    color: #555;
    text-align: center;
    padding: 0 0 10px;
    border-radius: 20px;
    display: block;
    margin-top:0px;
    margin-right:-112px;
}
.second-timeline .timeline-content i{
    display:inline-block;
    width:100px;
    height:100px;
    border-radius:50%;
    font-size:30px;
    color: #000;
    padding-top:33px;
    border:2px solid #000;
    clear:both;
        position:relative; right:-11%;
        background-color:white;
}
.second-timeline .timeline-content .description{
    text-align:justify;
    line-height:1.5rem;
    font-size:0.9rem;
    margin-top:3.5rem;
}
.second-timeline .timeline-content .title{
    position:absolute; left:0px; top:110px;
    color:#18773A;
    font-size:1.5rem; font-weight:600;
}


.second-timeline .timeline-content:hover{ text-decoration: none; }

.second-timeline .timeline-icon{
    color: #121365;
    font-size: 35px;
}


.second-timeline .timeline:nth-child(even){
    padding: 0 100px 0 125px;
    margin: -100px 0 20px 0px;
    float: right;
}
.second-timeline .timeline:nth-child(even):before{
    right: auto;
    left: 0px;
}


.second-timeline .timeline:nth-child(even) .timeline-content i{
    position:relative; left:-16%;
}

.second-timeline .timeline:nth-child(even) .timeline-content{
    margin-left:-75px;
}

.second-timeline .timeline:nth-child(even) .timeline-content .title{
    left:50px;
}



@media (max-width: 991px) {

    .second-timeline .timeline:nth-child(even) .timeline-content {
        margin-left: -50px;
        padding-right:15px;
    }

    .second-timeline .timeline:nth-child(even) .timeline-content .title {
        left: 75px;
    }

    .second-timeline .timeline:nth-child(even):before {
        right: auto;
        left: 48px;
    }

    .second-timeline .timeline-content .title {
     
        font-size: 1rem;
    }


}