.milestonesbox {
    margin-bottom: 60px;
}

.milestonesbox .timeline{
    font-weight:400;
    list-style:none;
    padding:0 0px;
    position:relative;
}
.milestonesbox .timeline::before{
    background-color:#DDDDDD;
    bottom:0px;
    content:" ";
    left:calc(50% - 4px);
	margin-bottom:20px;
    margin-left:-1.5px;
    position:absolute;
    top:0px;
    width:12px;
}
.milestonesbox .timeline > .item{
    clear:right;
    display:none;
    float:right;
    margin-bottom:20px;
    position:relative;
    width:50%;
}
.milestonesbox .timeline > .item > .indicator{
    font-size:18px;
    height:1em;
    left:-13px;
    line-height:50px;
    position:absolute;
    text-align:center;
    top:78px;
    width:25px;
    z-index:1;
}
.milestonesbox .timeline > .item > .indicator.year-title{
    line-height:1.5;
    top:0px;
    left: -37px;


}

.milestonesbox .timeline > .item > .indicator > .svg-inline--fa{
	display:block;
	margin:0 auto 0 0;
}
.milestonesbox .timeline > .item > .indicator > i{
    color:#1f539f;
    font-size: 28px;
}
.milestonesbox .timeline > .item > .panelbox{
    background-color:#eeeeee;
    -webkit-border-radius:0;
    -moz-border-radius:0;
    border-radius:0;
    float:right;
    padding:30px;
    position:relative;
    width:calc(100% - 50px);
    width:-moz-calc(100% - 50px);
    width:-webkit-calc(100% - 50px);
    margin-top: 30px;
}

.milestonesbox .timeline > .item > .panelbox::before{
    border-bottom:15px solid transparent;
    border-left:0px solid #EEEEEE;
    border-right:15px solid #EEEEEE;
    border-top:15px solid transparent;
    content:" ";
    display:inline-block;
    position:absolute;
    left:-15px;
    right:auto;
    top:26px;
}
.milestonesbox .timeline > .item > .panelbox::after{
    border-bottom:14px solid transparent;
    border-left:0px solid #eeeeee;
    border-right:14px solid #eeeeee;
    border-top:14px solid transparent;
    content:" ";
    display:inline-block;
    position:absolute;
    left:-14px;
    right:auto;
    top:27px;
}
.milestonesbox .timeline > .item > .panelbox > .content{
    padding:0px;
}
.milestonesbox .timeline > .item > .panelbox > .content > ul.listing{
    font-size:16px;
    font-weight:400;
    margin-top:5px;
    list-style-type:none;
    padding-left:0px;
}
.milestonesbox .timeline > .item > .panelbox > .content > ul.listing > li{
    border-bottom:1px solid #BBBBBB;
    margin-top:20px;
    padding-bottom:0px;
}
.milestonesbox .timeline > .item > .panelbox > .content > ul.listing > li:last-child{
    border-bottom:none;
}

/* specific milestone box */
/*.milestonesbox .timeline > .item:nth-child(2){
    margin-top:150px;
}
.milestonesbox .timeline > .item:nth-child(4){
    margin-top:-90px;
}
.milestonesbox .timeline > .item:nth-child(6){
    margin-top:-60px;
} */
.milestonesbox .timeline > .item.left{
    clear:left;
    float:left;
}
.milestonesbox .timeline > .item.left > .indicator{
	left:auto;
    right:-12px;
}
.milestonesbox .timeline > .item.left > .indicator.year-title{
	left:auto;
    right:13px !important;
}


.milestonesbox .timeline > .item.left > .indicator > .svg-inline--fa{
	display:block;
	margin:0 0 0 auto;
}
.milestonesbox .timeline > .item.left > .panelbox{
    float:left;
}
.milestonesbox .timeline > .item.left > .panelbox::before{
    border-left-width:15px;
    border-right-width:0;
	left:auto;
    right:-15px;
}
.milestonesbox .timeline > .item.left > .panelbox::after{
    border-left-width:14px;
    border-right-width:0;
	left:auto;
    right:-14px;
}

@media (max-width:767px){
	.milestonesbox .timeline::before{
		left:1px;
	}
	.milestonesbox .timeline > .item{
		clear:right;
		float:right;
		width:100%;
	}
	.milestonesbox .timeline > .item:nth-child(n){
		margin-top:0;
	}
	.milestonesbox .timeline > .item > .indicator,
	.milestonesbox .timeline > .item.left > .indicator{
		left:-8px;
		right:auto;
		width:18px;
    }
    
	.milestonesbox .timeline > .item > .indicator > .svg-inline--fa{
		display:block;
		margin:0 auto 0 0;
	}
	.milestonesbox .timeline > .item.left > .panelbox{
		float:right;
	}
	.milestonesbox .timeline > .item.left > .panelbox::before{
		border-left-width:0;
		border-right-width:15px;
		left:-15px;
		right:auto;
	}
	.milestonesbox .timeline > .item.left > .panelbox::after{
		border-left-width:0;
		border-right-width:14px;
		left:-14px;
		right:auto;
	}
}

.year {
    
    width: 80px;
    height: 45px;
    color: white;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#847ccc+0,44b0d0+100 */
background: rgb(132,124,204); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(132,124,204,1) 0%, rgba(68,176,208,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(132,124,204,1) 0%,rgba(68,176,208,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(132,124,204,1) 0%,rgba(68,176,208,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#847ccc', endColorstr='#44b0d0',GradientType=1 ); /* IE6-9 */

}

.year-subtitle {
    width: 70px;
    color: white;
    margin-bottom:15px;
    background: rgb(132,124,204); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(132,124,204,1) 0%, rgba(68,176,208,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(132,124,204,1) 0%,rgba(68,176,208,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(132,124,204,1) 0%,rgba(68,176,208,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#847ccc', endColorstr='#44b0d0',GradientType=1 ); /* IE6-9 */
}

.year p, .year-subtitle p{
    font-size: 22px !important;
    font-weight: bold;
    padding: 6px 0px;
    margin: 0px;
    text-align: center;
}

.year-subtitle p {
    font-size: 18px !important;
}
.heading h3 {
    margin-bottom: 30px;
    font-weight: normal;
}
.listing, .listing ul {
    margin-bottom: 0px !important;
}

.listing ul.mb-3 {
    margin-bottom: 30px !important;
}

.load {
    padding-top: 30px;
}

@media all and (max-width: 991px) {
    #milestones .container {
        max-width: 100%;
    }
}

@media all and (max-width: 757px) {
    .milestonesbox {
        margin-bottom: 0px;
    }
    .year, .milestonesbox .timeline > .item.left > .indicator.year-title, .milestonesbox .timeline > .item > .indicator.year-title {
        width: 100% !important;
        left: unset !important;
        right: unset !important;
        height: auto;
        top: 0px;
        
    }
    .year p {
        padding: 15px;font-size: 22px !important;
    }
    .year-subtitle p {
        font-size: 16px !important;
    }
    .load {
        padding-top: 0px;
        padding-bottom: 30px;
    }
    .milestonesbox .timeline > .item > .panelbox {
        margin-top: 0px;
        margin-bottom: 15px;
        padding: 15px;
    }
    .milestonesbox .timeline > .item > .indicator {
        top: 20px;
    }
    .start-year .panelbox {
        margin-top: 100px !important;
    }

    .milestonesbox .timeline > .item > .start-year.indicator {
        top: 118px !important;
    }
    .heading h3 {
        margin-bottom: 15px;
    }
}