/* The actual timeline (the vertical ruler) */
body{
  margin: 0px;
  padding: 0px;
  background-color:#2D2E2E ;
}


.main-timeline-2 {
   position: relative;
 }
 
 /* The actual timeline (the vertical ruler) */
 .main-timeline-2::after {
   content: "";
   position: absolute;
   width: 3px;
   background-color: hsl(359, 85%, 53%);
   top: 0;
   bottom: 0;
   left: 50%;
   margin-left: -3px;
 }
 
 /* Container around content */
 .timeline-2 {
   position: relative;
   background-color: inherit;
   width: 50%;
 }
 
 /* The circles on the timeline */
 .timeline-2::after {
   content: "";
   position: absolute;
   width: 25px;
   height: 25px;
   right: -11px;
   background-color: hsl(359, 85%, 53%);
   top: 15px;
   border-radius: 50%;
   z-index: 1;
 }

 /* The actual timeline (the vertical ruler) */
 .subtimeline-2::after {
   background-color: hsl(0, 0%, 48%);
 }
 
 
 /* The circles on the timeline */
 .subtimeline::after {
   background-color: hsl(0, 0%, 48%);
 }
 
 /* Place the container to the left */
 .left-2 {
   padding: 0px 40px 20px 0px;
   left: 0;
 }
 
 /* Place the container to the right */
 .right-2 {
   padding: 0px 0px 20px 40px;
   left: 50%;
 }
 
 /* Add arrows to the left container (pointing right) */
 .left-2::before {
   content: " ";
   position: absolute;
   top: 18px;
   z-index: 1;
   right: 30px;
   border: medium solid white;
   border-width: 10px 0 10px 10px;
   border-color: transparent transparent transparent white;
 }
 
 /* Add arrows to the right container (pointing left) */
 .right-2::before {
   content: " ";
   position: absolute;
   top: 18px;
   z-index: 1;
   left: 30px;
   border: medium solid white;
   border-width: 10px 10px 10px 0;
   border-color: transparent white transparent transparent;
 }
 
 /* Fix the circle for containers on the right side */
 .right-2::after {
   left: -14px;
 }
 
 /* Media queries - Responsive timeline on screens less than 600px wide */
 @media screen and (max-width: 600px) {
   /* Place the timelime to the left */
   .main-timeline-2::after {
     left: 31px;
   }
 
   /* Full-width containers */
   .timeline-2 {
     width: 100%;
     padding-left: 70px;
     padding-right: 25px;
   }
 
   /* Make sure that all arrows are pointing leftwards */
   .timeline-2::before {
     left: 60px;
     border: medium solid white;
     border-width: 10px 10px 10px 0;
     border-color: transparent white transparent transparent;
   }
 
   /* Make sure all circles are at the same spot */
   .left-2::after,
   .right-2::after {
     left: 18px;
   }
 
   .left-2::before {
     right: auto;
   }
 
   /* Make all right containers behave like the left ones */
   .right-2 {
     left: 0%;
   }
 }

 .timeline {
   background-color: 2D2E2E;
  }
 

 .dates {
   color: hsl(359, 85%, 53%);;
 }

 .incomplete {
   color: white;
 }
 
 .timeline a {
   text-decoration: underline;
 }

 .image_grow {
  position: relative;
 }

 .image_grow img{
  transition:  transform 0.3s ease-in-out;
 }

 .image_grow:hover img {
  transform: scale(1.1) rotate(0deg);
 }

 .image_shrink {
  position: relative;
 }

 .image_shrink img{
  transition:  transform 0.3s ease-in-out;
 }

 .image_shrink:hover img {
  transform: scale(0.9) rotate(0deg);
 }