﻿/* Timeline */
.timeline {
  position: relative;  
  margin: 0 auto; 
  }

.right {
   transform: revert !important;
  -webkit-transform: revert !important;
}

.container {
  max-width: 1000px !important;
}
  
.timeline::after {
  content: ''; 
  position: absolute; 
  width: 6px; 
  background-color: #009bbd; 
  top: 0; 
  bottom: 0; 
  left: 50%; 
  margin-left: -3px; 
  }

.timeline .container {
  padding: 10px 40px; 
  position: relative; 
  width: 50%; 
  margin-left: initial !important;
  }

.timeline .container::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -12px;
  background-color: white;
  border: 4px solid #18194f;
  top: 17px; 
  border-radius: 50%; 
  z-index: 1; 
  }

.timeline .left { 
  left: 0; 
  }

.timeline .right { 
  left: 50%; 
  }

.timeline .left::before { 
  content: " "; 
  height: 0; 
  position: absolute; 
  top: 22px; 
  width: 0; 
  z-index: 1; 
  right: 30px; 
  border: medium solid #eee; 
  border-width: 10px 0 10px 10px; 
  border-color: transparent transparent transparent #eee; 
  }

.timeline .right::before { 
  content: " "; 
  height: 0; 
  position: absolute; 
  top: 22px; 
  width: 0; 
  z-index: 1; 
  left: 30px; 
  border: medium solid #eee; 
  border-width: 10px 10px 10px 0; 
  border-color: transparent #eee transparent transparent; 
  }

.timeline .right::after { 
  left: -12px; 
  }

.timeline .content { 
  padding: 10px; 
  background-color: #eee; 
  position: relative; 
  border-radius: 6px; 
  }

.timeline h2 { 
  font-size: 1.1em; 
  margin-top: 0; 
  }

@media screen and (max-width: 800px) {
  /* Place the timelime to the left */
 .timeline::after { 
   left: 31px; 
   }
 .timeline .container { 
   width: 100%; 
   padding-left: 70px; 
   padding-right: 25px; 
   }
 .timeline .container::before { 
   left: 60px; 
   border: medium solid white; 
   border-width: 10px 10px 10px 0; 
   border-color: transparent white transparent transparent; 
   }
 .timeline .left::after, .timeline .right::after { 
   left: 18px; 
   }
 .timeline .right { 
   left: 0%; 
   }

}