/******************* Timeline *****************/

main-timeline4 .title {
    font-size: 20px;
    font-weight: 600;
    color: #f54957;
    text-transform: uppercase;
    margin: 0 0 5px;
}

.timeline2 {
    width: 58%;
    position: relative;
    left: 339px;
    bottom: 80px;
}

.timeline3 {
    width: 58%;
    position: relative;
    left: 562px;
    bottom: 378px;
}

.main-timeline4{    
    overflow: hidden;
    position: relative;
    padding: 191px 728px 58px 0px;
}

.main-timeline4:before{   
    content: "";
    width: 5px;
    height: 72%;
    background: #717070;
    position: absolute;
    top: 32px;
    left: 5%;
    transform: translateX(-50%);
}
.main-timeline4 .timeline-content:before,.main-timeline4 .timeline:before{top:40%;transform:translateY(-50%);content:""}
.main-timeline4 .timeline{width:50%;padding-left:100px;float:right;position:relative}
.main-timeline4 .timeline:before{width:20px;height:20px;border-radius:50%;background:#fff;border:5px solid #717070;position:absolute;left:16px}
.main-timeline4 .timeline-content{
    display: block;
    padding-left: 42px;
    position: relative;
}

.padclass { 
    padding: 60px 20px 20px 20px; 
}

.main-timeline4 .timeline-content::after{width:90px;height:10px;border-top:7px dotted #333;position:absolute;left:-92px}
.main-timeline4 .year{
    display: inline-block;
    width: 266px;
    height: 145px;
    /* line-height: 84px; */
    border-radius: 22%;
    border: 10px solid #f54957;
    font-size: 25px;
    color: #f54957;
    text-align: center;
    box-shadow: 0 0 10px rgba(0,0,0,.4);
    position: absolute;
    top: 0;
    left: 0;
    padding-right: 136px;

}
.main-timeline4 .year2{
    display: inline-block;
    width: 266px;
    height: 145px;
     
    border-radius: 22%;
    border: 10px solid #63c3da;
    font-size: 25px;
    color: #63c3da;
    text-align: center;
    box-shadow: 0 0 10px rgba(0,0,0,.4);
    position: absolute;
    top: 0;
    left: 0;
    padding-right: 104px;

}
.main-timeline4 .year3{
display: inline-block;
width: 266px;
height: 145px;
border-radius: 22%;
border: 10px solid #40841f;
font-size: 25px;
color: #40841f;
text-align: center;
box-shadow: 0 0 10px rgba(0,0,0,.4);
position: absolute;
top: 0;
left: 0;
padding-right: 108px;
}
.main-timeline4 .year {     
    content: ""; 
    position: absolute;
    bottom: 0px;
    right: 0; 
}

.main-timeline4 .year2 {     
    content: ""; 
    position: absolute;
    bottom: 0px;
    right: 0; 
}
 

.main-timeline4 .inner-content{
    padding:20px 0
}

.main-timeline4 .title  {   
    font-size:20px;
    font-weight:600;color:#f54957;
    text-transform:uppercase;
    margin: 21px 0 5px;
}
.main-timeline4 .title2  {   
    font-size: 20px;
    font-weight: 600;
    color: #63c3da;
    text-transform: uppercase; 
    position: relative;
    bottom: 84px;
    left: 4px;
}

.main-timeline4 .title3  {  
    font-size: 20px;
    font-weight: 600;
    color: #40841f;
    text-transform: uppercase;
    position: relative;
    bottom: 36px;
    left: 54px;
}

.main-timeline4 .title3  {   
    font-size:20px;
    font-weight:600;color:#40841f;
    text-transform:uppercase;
    margin: 53px 0 0px;
}
.main-timeline4 .inner-content2{
    padding:20px 0
}

.btn-2 {
    border: 1px solid #63c3da;
    margin-left: 40px;position: relative; bottom: 80px; left: 12px;
}
.btn-3 {
    border: 1px solid #40841f;
    margin-left: 40px;
    position: relative;
    bottom: 30px;
    left: 16px;
}


 .title2 {margin-left : 48px!important}
 .dotted {    
    position: relative;
    width: 59px;
    right: 104px;
    top: 49px;
    border-bottom: 10px dotted #a7a5a5;
}

  

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

        .content-wrapper {max-width: 100%!important; height: auto;}
         
        .main-timeline4 {
            overflow: hidden;
			position: relative; 
			width: 100%;
			margin: 0;
			padding: 8% 89% 100% 11%;

        }

        .main-timeline4 .year {
        content: "";
        position: absolute;
        bottom: 3px;
        right: 0;
        left: 20px;
        }

    .main-timeline4 .year2 {
        content: "";
        position: absolute;
        bottom: 13px;
        left: -316px;
        top: 260px;
    }

    .main-timeline4 .year3 {
        content: "";
        position: absolute;
        /* bottom: 13px; */
        left: -539px;
        top: 635px;

    }

    .main-timeline4 .title {
 
        font-size: 20px;
        font-weight: 600;
        color: #f54957;
        text-transform: uppercase;
        position: relative;
     
    }


    .main-timeline4 .title2 {
 
        font-size: 20px;
        font-weight: 600;
        color: #63c3da;
        text-transform: uppercase;
        position: relative;
        top: 280px;
        left: -318px;
    }

    .main-timeline4 .title3 {
 
        position: relative;
        bottom: 0;
        left: -488px;
        top: 591px;
    }
    .dotted {
        position: relative;
        width: 25px;
        right: 49px;
        top: 59px;
        border-bottom: 10px dotted #a79696;
    }
    .dotted2 {      
        position: relative;
        width: 25px;
        right: 345px;
        top: 333px;
        border-bottom: 10px dotted #a79696;
    
     }
    .dotted3 {        
        position: relative;
        width: 25px;
        right: 566px;
        top: 699px;
        border-bottom: 10px dotted #a79696;
    } 
          
    .btn-2 {
        border: 1px solid #63c3da;
        margin-left: 40px;
        position: relative;
        top: 268px;
        left: -311px;
    }

    .btn-3 {
        border: 1px solid #40841f;
        margin-left: 40px;
        position: relative;
        top: 582px;
        left: -536px;
    }
}
 @media only screen and ( max-width:1024px) {
    .content-wrapper {max-width: 100%!important; height: auto;}

 
        .main-timeline4:before{   
            content: "";
            width: 5px;
            height: 90%;
            background: #717070;
            position: absolute;
            top: 32px;
            left: 5%;
            transform: translateX(-50%);
        }
 
}