html, body		{	min-width: 600px;	overflow-x: hidden;	}

/* --- Timeline --- */
ol			{	position: relative;
				display: block;
				margin: 80px;
				margin-top: 160px;
				height: 4px;
				background: #8300E1;
			}
ol::before,ol::after	{	content: "";
				position: absolute;
				top: -5px;
				display: block;
				width: 0;
				height: 0;
				border-radius: 10px;
				border: 10px solid #8300E1;
			}
ol::before		{	left: -5px;	}
ol::after		{	right: -10px;
				border: 10px solid transparent;
				border-right: 0;
				border-left: 20px solid #8300E1;
  				border-radius: 3px;
			}

/* --- Timeline elements --- */
li			{	position: relative;
				top: -90px;
				display: inline-block;
				float: left;
				width: 140px;
				transform: rotate(-55deg);
				font: bold 10pt verdana;
			}
li::before		{	content: "";
				position: absolute;
				top: 3px;
				left: -29px;
				display: block;
				width: 6px;
				height: 6px;
				border: 4px solid #8300E1;
				border-radius: 10px;
				background: #EEEEEE;
			}

/* --- Details --- */
.details		{	display: none;
				position: absolute;
				left: -85px;
				top: 110px;
				padding: 10px;
				border-radius: 3px;
				border-right: 2px solid rgba(0,0,0,.1);
				border-bottom: 2px solid rgba(0,0,0,.1);
				transform: rotate(55deg);
				font: 10pt verdana;
				background: #FFFFFF;
			}
.details::before	{	content: "";
				position: absolute;
				left: 5px;
				top: -9px;
				display: block;
				width: 0;
				height: 0;
				border: 10px solid transparent;
				border-bottom-color: #FFFFFF;
				border-top: 0;
			}

/* --- Hover effects --- */
li:hover 		{	cursor: pointer;
				color: #FFFFFF;
			}
li:hover::before	{	top: 1px;
				left: -31px;
				width: 8px;
				height: 8px;
				border-width: 5px;
				border-color: #FFFFFF;
			}
li:hover .details	{	display: block;
				color: #000000;
			}