@charset "utf-8";
/* CSS Document */
.main-timeline{
    font-family: 'Open Sans', sans-serif;
    padding: 20px 0; margin-top: 30px;
}
  .main-timeline:before{
    content: '';
    background-color: #333 !important;
    height: 100%;
    width: 10px;
    border-radius: 10px;
    transform: translateX(-50%);
    position: absolute;
    left: 50%;
   /* top: 0;*/
}   
.main-timeline:after{
    content: '';
    display: block;
    clear: both;
}
.main-timeline .timeline{
    width: 50%;
    padding: 0 20px 0 60px;
    margin: 0 0 10px 10px;
    float: right;
    position: relative;
}
/* .main-timeline .timeline:after{
    content: '';
    background-color: #0000ff;
    height: 100px;
    width: 10px;
    transform: translateY(-50%);
    position: absolute;
    right: 0;
    top: 50%;
} */
.main-timeline .timeline-content{
    color: #555;
    background-color: #fff;
    text-align: center;
    display: block;
    position: relative;
	box-shadow:0px 0px 4px #ccc; 
	border-radius:8px 8px 8px 8px;
	}


.main-timeline .timeline:after {
    background-color: #fff;
    height: 25px;
    width: 25px;
    border: none;
    border-radius: 0;
    transform: translateX(0) translateY(-50%) rotate(45deg);
    left: 50px;
}

.timeline:after {
    content: '';
    height: 25px;
    width: 25px;
    background-color: #fff;
    border-radius: 50%;
    border: 5px solid #FEC93F;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    left: 50%;
    top: 58%;
    z-index: -1;
}

 
 /*  .timeline-content:after{
	top: 15%;
	left: 0%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.timeline-content:after {
	border-color: rgba(136, 183, 213, 0);
	border-bottom-color: #88b7d5;
	border-width: 20px;
	margin-left: -20px;
}	 */
	 
	
	
.main-timeline .timeline-content:hover{ text-decoration: none; }
.main-timeline .timeline-icon{
    color: #fff;
    background:#71cde1;
    font-size: 25px;
    line-height: 60px;
    height: 60px;
    width: 60px;
	border-radius:100%;
   /*  border: 10px solid #fff; */
    border-right: none;
    /* box-shadow: 10px 0 0 #fff,0 0 0 10px #0000ff; */
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    left: -90px;
    z-index: 1;
}

.main-timeline .timeline-icon i{ font-style:normal;
}


.main-timeline .title{
    color: #fff; border-radius:8px 8px 0px 0px;
     background: #71cde1; 
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: none;
    padding: 10px 15px;
    margin: 0;
}
.main-timeline .inner-content{
    /* background-color: #e7e7e7; */
    padding: 10px 20px;
}

.main-timeline .inner-content p{ text-align:center;
}

.main-timeline .description{
    font-size: 16px; line-height: 24px;
    margin: 0;
}
.main-timeline .timeline:nth-child(even){
    padding: 0 60px 0 20px;
    margin: 0 10px 10px 0;
    float: left;
}
.main-timeline .timeline:nth-child(even):after{
    left: auto;
    right:48px;
}
.main-timeline .timeline:nth-child(even) .timeline-icon{
   /*  border: 10px solid #fff; */
    border-left: none;
    /* box-shadow: -10px 0 0 #fff,0 0 0 10px #0985f9; */
    left: auto;
    right: -90px;
}
.main-timeline .timeline:nth-child(4n+2):after{ background-color: #fff; box-shadow:2px -2px 0px 1px #efefef; z-index:1; }
.main-timeline .timeline:nth-child(4n+2) .timeline-icon{
    background: #ec8e2c;
    /* box-shadow: -10px 0 0 #fff,0 0 0 10px #bf9000; */
}
.main-timeline .timeline:nth-child(4n+2) .title{ background-color: #ec8e2c; }
.main-timeline .timeline:nth-child(4n+3):after{ background-color: #fff; box-shadow:-2px 2px 0px 1px #efefef; z-index:1; }
.main-timeline .timeline:nth-child(4n+3) .timeline-icon{
    background: #ea502a;
    /* box-shadow: 10px 0 0 #fff,0 0 0 10px #ff0000; */
}
.main-timeline .timeline:nth-child(4n+3) .title{ background-color: #ea502a; }

.main-timeline .timeline:nth-child(4n+4):after{ background-color: #fff;  box-shadow:2px -2px 0px 1px #efefef; z-index:1;}
.main-timeline .timeline:nth-child(4n+4) .timeline-icon{
    background: #4982c3;
    /* box-shadow: -10px 0 0 #fff,0 0 0 10px #674ea7; */
}
.main-timeline .timeline:nth-child(4n+4) .title{ background-color: #4982c3; }

.main-timeline .timeline:first-child:after{ background-color: #fff;  box-shadow:-2px 2px 0px 1px #efefef; z-index:1; }


/*----------------------------- 5th-section----open------------------------- */
.main-timeline .timeline:nth-child(5n+5):after{ background-color: #fff;  box-shadow:-2px 2px 0px 1px #efefef; z-index:1; }
.main-timeline .timeline:nth-child(5n+5) .timeline-icon{
    background: #b80771;
   /*  box-shadow: 10px 0 0 #fff,0 0 0 10px #01f501; */
}
.main-timeline .timeline:nth-child(5n+5) .title{ background-color: #b80771; }
/*----------------------------- 5th-section-edn---------------------------- */


/*----------------------------- 6th-section-open---------------------------- */
.main-timeline .timeline:nth-child(6n+6):after{ background-color: #fff; }
.main-timeline .timeline:nth-child(6n+6) .timeline-icon{
    background: #07a49d;
    /* box-shadow: -10px 0 0 #fff,0 0 0 10px #ff00ff; */
}
.main-timeline .timeline:nth-child(6n+6) .title{ background-color: #07a49d; }
/*----------------------------- 6th-section-edn---------------------------- */





@media screen and (max-width:767px){ 
    .main-timeline .inner-content{
    padding: 5px 5px;
}
    .main-timeline{ padding: 40px 0; }

    .main-timeline .timeline,
    .main-timeline .timeline:nth-child(even){
        background-color: #fff;
        width: 100%;
        padding: 53px 0 20px 0;
        margin: 0 0 50px;
        float: none;
    }

    .main-timeline .timeline:last-child{ margin: 0; }

    .main-timeline .timeline:after,
    .main-timeline .timeline:nth-child(even):after{
        height: 10px;
        width: 100px;
        transform: translateY(0) translateX(-50%);
        top: auto;
        bottom: 0;
        left: 50%;
        right: auto;
    }

    .main-timeline .timeline-icon,
    .main-timeline .timeline:nth-child(even) .timeline-icon{
        /* border: 10px solid #fff; */
        border-bottom: none;
       /*  box-shadow: 0 10px 0 #fff,0 0 0 10px #0000ff; */
        transform: translateY(0) translateX(-50%);
        left: 50%;
        top: -110px;
    }

/*     .main-timeline .timeline:nth-child(4n+2) .timeline-icon{ box-shadow: 0 10px 0 #fff,0 0 0 10px #bf9000; }

    .main-timeline .timeline:nth-child(4n+3) .timeline-icon{ box-shadow: 0 10px 0 #fff,0 0 0 10px #ff0000; }

    .main-timeline .timeline:nth-child(4n+4) .timeline-icon{ box-shadow: 0 10px 0 #fff,0 0 0 10px #674ea7; }
	   .main-timeline .timeline:nth-child(5n+5) .timeline-icon{ box-shadow: 0 10px 0 #fff,0 0 0 10px #00ff00; }
	 .main-timeline .timeline:nth-child(6n+6) .timeline-icon{ box-shadow: 0 10px 0 #fff,0 0 0 10px #ff00ff; }
	 */
	
	
}
@media screen and (max-width:567px){
    .main-timeline .title{ font-size: 18px; }
}
