.demo{padding: 25px 0;}
		.main-timeline{ font-family: 'Roboto', sans-serif; padding-top: 40px}
		.main-timeline:after{
		    content: '';
		    display: block;
		    clear: both;
		}
		.main-timeline:before{
		    content: '';
		    height: 100%;
		    width: 2px;
		    border: 3px solid #1A2354;
		    transform: translateX(-50%);
		    position: absolute;
		    left: 50%;
		    top: 0px;
		}
		.main-timeline .timeline{
		    width: 50%;
		    padding: 100px 70px 0 25px;
		    margin: 0 50px 0 0;
		    float: left;
		    position: relative;
			margin-top: 13px;
		}
		.main-timeline .timeline-content{
			/* height: 144px; */
		    padding: 15px 15px 15px 0px;
		    border: 2px solid #1A2354;
		    border-radius: 15px 0 15px 15px;
		    display: block;
		    position: relative;
		}
		.main-timeline .timeline-content:hover{ text-decoration: none; }
		.main-timeline .timeline-content:after{
		    content: '';
		    background-color: #1A2354;
		    height: 30px;
		    width: 30px;
		    position: absolute;
		    right: -30px;
		    top: 60px;
		    clip-path: polygon(0 100%,100% 50%,0 0);
				/* border: 2px solid black; */
		}
		.main-timeline .timeline-year{
		    color: #1A2354;
		    background-color: #FEF7F4;
		    font-size: 32px;
		    font-weight: 900;
		    text-align: center;
		    line-height: 60px;
		    height: 60px;
		    width: 60px;
		    border-radius: 50%;
				border: 2px solid #1A2354;
		    position: absolute;
		    left: -29px;
		    top:0px;
		}
		.main-timeline .timeline-year:after{
		    content: '';
		    height: 90px;
		    width: 90px;
		    border: 4px solid #1A2354;
		    border-left-color: transparent;
		    border-top-color: transparent;
		    border-radius: 50%;
		    transform: translateX(-50%) translateY(-50%) rotate(-45deg);
		    position: absolute;
		    left: 50%;
		    top: 50%;
		}
		.main-timeline .title{
		    color: #1A2354;
		    font-size: 20px;
		    font-weight: 900;
		    text-transform: uppercase;
		    letter-spacing: 1px;
		    margin: 0 0 7px 0;
		}
		.main-timeline .description{
			width: 460px;
		    color: black;
		    font-size: 18px;
		    letter-spacing: 1px;
		    text-align: justify;
		    margin: 0 0 5px;
		}
		.main-timeline .timeline:nth-child(even){
		    padding: 100px 25px 0 70px;
		    margin: 0 0 0 50px;
		    float: right;
		}
		.main-timeline .timeline:nth-child(even) .timeline-content{
		    padding: 15px 0px 15px 15px;
		    border-radius: 0 15px 15px 15px;
		}
		.main-timeline .timeline:nth-child(even) .timeline-content:after{
		    transform: rotateY(180deg);
		    right: auto;
		    left: -30px;
		}
        .main-timeline .timeline:nth-child(even) .timeline-year:after{
			border-left-color: transparent;
			border-top-color: transparent;
		    transform: translateX(-50%) translateY(-50%) rotate(-225deg);
		}
		.main-timeline .timeline:nth-child(even) .timeline-icon{
		    left: auto;
		    right: -25px;
		}
		.timeline:nth-child(4n+2) .timeline-content,
		.timeline:nth-child(4n+2) .timeline-year:after{
		    border-color: #1A2354;
		}
		.timeline:nth-child(4n+2) .timeline-year:after{ border-left-color: transparent; }
		.timeline:nth-child(4n+2) .timeline-icon,
		.timeline:nth-child(4n+2) .timeline-year{
		    background-color: #FEF7F4;
		}
		.timeline:nth-child(4n+3) .timeline-content,
		.timeline:nth-child(4n+3) .timeline-year:after{
		    border-color: #1A2354;
				border: 2px solid black;
		}
		.timeline:nth-child(4n+3) .timeline-year:after{ border-left-color: transparent; }
		.timeline:nth-child(4n+3) .timeline-content:after,
		.timeline:nth-child(4n+3) .timeline-icon,
		.timeline:nth-child(4n+3) .timeline-year{
		    background-color: #1A2354;
		}
		.timeline:nth-child(4n+4) .timeline-content,
		.timeline:nth-child(4n+4) .timeline-year:after{
		    border-color: #1A2354;
		}
		.timeline:nth-child(4n+4) .timeline-year:after{ border-left-color: transparent; }
		.timeline:nth-child(4n+4) .timeline-icon,
		.timeline:nth-child(4n+4) .timeline-year{
		    background-color: #FEF7F4;
		}
        ul{
            margin: 0rem;
            padding: 0rem;
            list-style: none;
           
        }
		.timeline{
			position: relative;
			/* display: flex; */
		}
		.timeline>.x1{
			position: absolute;
			top: -76px;
			right: 80px;
		}
		.timeline>.y1{
			position:absolute;
			top: -50px;
			left: 80px;
		}
        .x1 .y1{
            display: none;
        }
		.a2017{
			color: #1A2354;
		    background-color: #FEF7F4;
		    font-size: 32px;
		    font-weight: 900;
		    text-align: center;
		    line-height: 60px;
		    height: 60px;
		    width: 60px;
		    border-radius: 50%;
		    position: absolute;
				border: 2px solid #1A2354;
		    right: -28px;
		    top:-30px;
		} 
		.main-timeline .a2017:after{
		    content: '';
		    height: 90px;
		    width: 90px;
		    border: 4px solid #1A2354;
			border-left-color: transparent;
			border-top-color: transparent;
		    border-radius: 50%;
			transform: translateX(-50%) translateY(-50%) rotate(-45deg);
		    position: absolute;
		    left: 50%;
		    top: 50%;
		}
		.service-f .left{
			display: flex;
			color: white;
			display: none;
		}
		.service-f .left .left-f{
			margin-right: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100px;
			height: 100px;
			border: 1px solid red;
			border-radius: 50px;
		}
		.service-f1:hover{
       display: none;
		}
		.service-f1:hover .left{
			display: block;
		}