.timeline {
	display: flex;
	flex-direction: column;
	margin: 20px auto;
	position: relative;
  }
  .timeline__event {
	margin-bottom: 20px;
	position: relative;
	display: flex;
	margin: 20px 0;
	align-self: center;
	width: 80vw;
  }
  .timeline__event:nth-child(2n+1) {
	flex-direction: row-reverse;
  }
  
  .timeline__event:nth-child(2n+1) .timeline__event__icon:before {
	content: "";
	width: 2px;
	height: 100%;
	background: #000;
	position: absolute;
	top: 0%;
	left: 50%;
	right: auto;
	z-index: -1;
	transform: translateX(-50%);
	-webkit-animation: fillTop 5s forwards 4s ease-in-out;
			animation: fillTop 5s forwards 4s ease-in-out;
  }
  .timeline__event:nth-child(2n+1) .timeline__event__icon:after {
	content: "";
	width: 100%;
	height: 2px;
	background: #000;
	position: absolute;
	right: 0;
	z-index: -1;
	top: 50%;
	left: auto;
	transform: translateY(-50%);
	-webkit-animation: fillLeft 2s forwards 4s ease-in-out;
			animation: fillLeft 2s forwards 4s ease-in-out;
  }
  .timeline__event__title {
	font-size: 1.2rem;
	line-height: 1.4;
	text-transform: uppercase;
	font-weight: 600;
	color: #000;
	letter-spacing: 1.2
  px;
  }
  .timeline__event__content {
	padding: 20px;
	box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3), 0 -12px 36px -8px rgba(0, 0, 0, 0.025);
	background: #fff;
  }
  .timeline__event__date {
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
  }
  .timeline__event__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #000;
	padding: 20px;
	align-self: center;
	margin: 0 20px;
	background: #fff;
	/*border-radius: 100%;*/
	border: 0.5px solid #000;
	width: 40px;
	/*box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3), 0 -12px 36px -8px rgba(0, 0, 0, 0.025);*/
	padding: 40px;
	height: 40px;
	position: relative;
	transition: all 0.5s ease-in-out;
  }
  .timeline__event__icon:hover {
	
	color: #fff;
	background: #000;
	transition: all 0.5s ease-in-out;

  }
  .timeline__event__icon i {
	font-size: 32px;
  }
  .timeline__event__icon:before {
	content: "";
	width: 2px;
	height: 30vh;
	background: #000;
	position: absolute;
	top: 0%;
	z-index: -1;
	left: 50%;
	transform: translateX(-50%);
	-webkit-animation: fillTop 2s forwards 4s ease-in-out;
			animation: fillTop 2s forwards 4s ease-in-out;
  }
  .timeline__event__icon:after {
	content: "";
	width: 100%;
	height: 2px;
	background: #000;
	position: absolute;
	left: 0%;
	z-index: -1;
	top: 50%;
	transform: translateY(-50%);
	-webkit-animation: fillLeftOdd 2s forwards 4s ease-in-out;
			animation: fillLeftOdd 2s forwards 4s ease-in-out;
  }
  .timeline__event__description {
	flex-basis: 100%;
  }
  
  
  .timeline__event:last-child .timeline__event__icon:before {
	content: none;
  }
  
  @media (max-width: 786px) {
	.timeline__event {
	  flex-direction: column;
	  align-self: center;
	}
	.timeline__event__content {
	  width: 100%;
	}
	.timeline__event__icon {
	  margin: 0;
	  box-shadow: none;
	}
	.timeline__event__icon:before, .timeline__event__icon:after {
	  display: none;
	}
	.timeline__event__date {
	  padding: 20px;
	}
	.timeline__event:nth-child(2n+1) {
	  flex-direction: column;
	  align-self: center;
	}
	.timeline__event:nth-child(2n+1) .timeline__event__date {
	  padding: 20px;
	}
	.timeline__event:nth-child(2n+1) .timeline__event__icon {
	  margin: 0;
	}
  }
  @-webkit-keyframes fillLeft {
	100% {
	  right: 100%;
	}
  }
  @keyframes fillLeft {
	100% {
	  right: 100%;
	}
  }
  @-webkit-keyframes fillTop {
	100% {
	  top: 100%;
	  height: 250px;
	}
  }
  @keyframes fillTop {
	100% {
	  top: 100%;
	  height: 250px;
	}
  }
  @-webkit-keyframes fillLeftOdd {
	100% {
	  left: 100%;
	}
  }
  @keyframes fillLeftOdd {
	100% {
	  left: 100%;
	}
  }
  
  @media (max-width: 1000px) {
  .timeline__event{
	width: 95vW;
  }
  }