.year{padding:0px 30px;}
.timeline-start{width:320px;margin:0px auto;text-align: center;}
.timeline-year{background: #634AFC;
    border-radius: 50px;
    
    color: #fff;
    height: 72px;
    line-height: 72px;
    margin: 0 auto 30px;
    position: relative;
    text-align: center;
    width: 72px;
font-size:20px;}
.timeline-future{background: #634AFC;
    border-radius: 50px;
    
    color: #fff;
    height: 40px;
    line-height: 72px;
    margin: 0 auto 30px;
    position: relative;
    text-align: center;
    width: 40px;
font-size:20px;}

.timeline-container{position: relative;}
.timeline-container::before{content:'';position:absolute;top:0px;left:50%;margin-left:-1px;height:100%;width:2px;background:#5d6082;}

.timeline-block {position: relative;margin:0; padding:0px 0px 2em;}
.timeline-block:after{content:"";display:table;clear:both;}



.timeline-content{position:relative;margin-left:0;width:45%;}
.timeline-content::after{content:'';position:absolute;top:0;right:-69px;width:15px;height:15px;border-radius:50%;background:#634AFC;display: table;
    clear: both;}

.timeline-content::before{content:'';background:#634AFC;height:2px;top:7px;left:100%;position:absolute;width:60px;}
.timeline-block:nth-child(2n) .timeline-content{float:right}
.timeline-block:nth-child(2n) .timeline-content::after{left:-69px;}
.timeline-block:nth-child(2n) .timeline-content::before{left:-60px;}
.timeline-content .cd-date{position:absolute;width:100%;left:117%;top:4px;display:inline-block;font-size:13px;float:left;text-transform:uppercase;}
.timeline-block:nth-child(2n) .timeline-content .cd-date {
    left: auto;
    right: 122%;
    text-align: right;
  }


.timeline-begin {
    background: #634AFC;
    border-radius: 50%;
   
 
  clear:both;
 
    
    height: 30px;
  
    width: 30px;
    
    
    margin:0px auto;
  }
  .flipper{perspective: 200px;}

  
.timeline-card{cursor:pointer;height:120px;width:100%;margin-bottom:5px;transform-style: preserve-3d; transition: all 0.5s ease-out 0s;  transform: rotateX(0deg);transform-style: preserve-3d;}
.card-front{display:flex;align-items:center;background-color:#EBEEFF;height:120px;padding:10px 100px 10px 20px;backface-visibility: hidden;transform: rotateX(0deg);position:absolute;width:100%;}
.card-front h3{line-height: 30px;text-align: start;font-size:20px;}
.card-front span{position: absolute;height:60px;width:60px;border-radius:30px;background-color: #634AFC;display: block;top:20px;right:20px;
color:#ffffff;text-align:center;line-height:60px;background-size:36px;background-repeat:no-repeat;background-position: center;}
.card-back{background: #634AFC;height:120px;padding:10px 20px;backface-visibility: hidden;transform: rotateX(-180deg);position:absolute;width:100%;}
.card-back p{color:#fff}


.roadmap .card-front{background-color:#BCE0FF;}

.roadmap .timeline-content::before,.roadmap .timeline-content::after,.roadmap .card-back,.roadmap .card-front span{background-color: #006FD6;}
.development .card-front{background-color:#C2FBDC;}

.development .timeline-content::before,.development .timeline-content::after,.development .card-back,.development .card-front span{background-color: #27B480;}

.icn1{background-image: url('../images/pages/timeline/flow-chart.svg');background-size:100%;}
.icn2{background-image: url('../images/pages/timeline/contract.svg');background-size:100%;}
.icn3{background-image: url('../images/pages/timeline/padlock.svg');background-size:100%;}
.icn4{background-image: url('../images/pages/timeline/research.svg');background-size:100%;}
.icn5{background-image: url('../images/pages/timeline/pattern-lock.svg');background-size:100%;}
.icn6{background-image: url('../images/pages/timeline/computer.svg');background-size:100%;}
.icn7{background-image: url('../images/pages/timeline/organization-structure.svg');background-size:100%;}
.icn8{background-image: url('../images/pages/timeline/smartphone.svg');background-size:100%;}
.icn9{background-image: url('../images/pages/timeline/workflow.svg');background-size:100%;}
.icn10{background-image: url('../images/pages/timeline/location.svg');background-size:100%;}
.icn11{background-image: url('../images/pages/timeline/check-in.svg');background-size:100%;}
.icn12{background-image: url('../images/pages/timeline/monitor.svg');background-size:100%;}
.icn13{background-image: url('../images/pages/timeline/document.svg');background-size:100%;}
.icn14{background-image: url('../images/pages/timeline/prototype.svg');background-size:100%;}
.icn15{background-image: url('../images/pages/timeline/graphic-design.svg');background-size:100%;}
.icn16{background-image: url('../images/pages/timeline/task-list.svg');background-size:100%;}
.icn17{background-image: url('../images/pages/timeline/society.svg');background-size:100%;}
.icn18{background-image: url('../images/pages/timeline/messages.svg');background-size:100%;}
.icn19{background-image: url('../images/pages/timeline/analysis.svg');background-size:100%;}
.icn20{background-image: url('../images/pages/timeline/recruitment.svg');background-size:100%;}
.icn21{background-image: url('../images/pages/timeline/21.svg');background-size:100%;}
.icn22{background-image: url('../images/pages/timeline/22.svg');background-size:100%;}
.icn23{background-image: url('../images/pages/timeline/23.svg');background-size:100%;}
.icn24{background-image: url('../images/pages/timeline/24.svg');background-size:100%;}
.icn25{background-image: url('../images/pages/timeline/25.svg');background-size:100%;}
.icn26{background-image: url('../images/pages/timeline/slack.svg');background-size:100%;}
.icn27{background-image: url('../images/pages/timeline/27.svg');background-size:100%;}
.icn28{background-image: url('../images/pages/timeline/28.svg');background-size:100%;}
.icn29{background-image: url('../images/pages/timeline/29.svg');background-size:100%;}

@media only screen and (max-width: 1400px)
    {

        .timeline-content::after{right:-63px;}
        .timeline-block:nth-child(2n) .timeline-content::after{left:-63px;}
    }
@media only screen and (max-width: 1200px)
    {

        .timeline-content::after{right:-54px;}
        .timeline-block:nth-child(2n) .timeline-content::after{left:-54px;}
        .timeline-content::before{width:40px;}
        .timeline-block:nth-child(2n) .timeline-content::before{left:-40px;}
    }
    @media only screen and (max-width: 992px)
    {
        .timeline-year{margin:30px 0px}
        .timeline-future{margin:30px 15px}
        .timeline-container::before{left:36px;}
        .timeline-begin{margin:0px 20px;}
        .timeline-start{margin:0px 10px 0px 0px;text-align: start;}
        .timeline-start h2{text-align: start;}
        .timeline-content .cd-date{float:none;position:relative;
            right:0px;
            text-align: start;
        left:auto;}
        .timeline-content{width: calc(100% - 82px);float:right}
        .timeline-content::before{left:-40px}
        .timeline-content::after {
            left: -54px;
          }
        .timeline-block:nth-child(2n) .timeline-content .cd-date{
          
            right:0px;
            text-align: start;
        }
    } 
    @media only screen and (max-width: 576px)
    {
        .card-front h3,.card-back p{font-size:14px;}
        
    }