.mainDiv {
	position: relative;
    opacity: 0;
    transition: all 1s ease 1s;
}

.year{
	width: 88px;
	height: 88px;
	margin-left: -44px;
	border-radius: 50%;
	background-color: #0a4b82;
	position: absolute;
	left: 50%;
}

.dot{
	width: 14px;
	height: 14px;
	margin-left: -7px;
	border-radius: 50%;
	background-color: #1872be;
	position: absolute;
	left: 50%;
}

.year h3 {
	position: absolute;
	width: inherit;
	text-align: center;
	margin-top: 32px;
}

.time{
	width: 4px;
	margin-left: -2px;
	left: 50%;
	position: absolute;
	background-color: #09416f;
}

.box0{
	width: 300px;
	min-height: 130px;
	border-radius: 5px;
	left: 50%;
	margin-left: -400px;
	position: absolute;
	background-color: rgba(9,65,111,0.7);
	box-sizing: border-box;
	padding: 10px;
}

.arrow0 {
	position: absolute; 
	left: 50%;
	margin-left: -100px;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 
	border-left: 10px solid rgba(9,65,111,0.7); 
}


.box1{
	width: 300px;
	min-height: 130px;
	border-radius: 5px;
	left: 50%;
	margin-left: 100px;
	position: absolute;
	background-color: rgba(9,65,111,0.7);
	box-sizing: border-box;
	padding: 10px;
}

.arrow1 {
	position: absolute; 
	left: 50%;
	margin-left: 90px;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 
	border-right: 10px solid rgba(9,65,111,0.7); 
}

.box0 table, .box1 table {
	width: 100%;
	padding: 5px;
}

.box0 td, .box1 td{
	padding: 5px;
}

.box0 tr:first-of-type td, .box1 tr:first-of-type td {
	border-bottom: 1px solid white;
}

.boxMilestone{
	background-color: rgba(11, 98, 171, 0.7);
}

.arrowMilestone0{
	position: absolute; 
	left: 50%;
	margin-left: -100px;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 
    border-left: 10px solid rgba(11, 98, 171, 0.7);
}

.arrowMilestone1{
	position: absolute; 
	left: 50%;
	margin-left: 90px;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent; 
    border-right: 10px solid rgba(11, 98, 171, 0.7);
}