/* The actual timeline (the vertical ruler) */
.timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
    
}



.maincontent p{
    font-size: 16px;
    margin-bottom: 0px;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: #00aad4;
  top: 55px;
  bottom: 0;
  left: 0;
  margin-left: 0px;
}

/* timeContainer around content */
.timeContainer {
    clear: both;
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 100%;
}

/* The circles on the timeline */
.timeContainer::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  left: -7px;
  background-color: white;
  border: 4px solid #00aad4;
  top: 33px;
  border-radius: 50%;
  z-index: 1;
}


.timeContainer.robust::before{
    top: 45px;
}
.timeContainer.robustImg::before{
    top: 43px;
}

/* Place the timeContainer to the left */
.left {
  left: 0;
}

/* Place the timeContainer to the right */
.right {
  left: 50%;
}

.left img, .right img{
    display: block;
    margin: 0px auto 25px;
}

/* Add arrows to the left timeContainer (pointing right) */
.left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 27px;
  border: thin solid #00aad4;
  border-width: 13px 0 13px 13px;
  border-color: transparent transparent transparent #00aad4;
}

/* Add arrows to the right timeContainer (pointing left) */
.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 27px;
  border: medium solid #00aad4;
  border-width: 13px 13px 13px 0;
  border-color: transparent #00aad4 transparent transparent;
}

/* Fix the circle for timeContainers on the right side */
.right::after {
  left: -12px;
    top: 20px;
}

/* Fix the circle for timeContainers on the right side */
.left::after {
  right: -12px;
    top: 20px;
}

/* The actual content */
.timeContainer.robust .content,
.timeContainer.robustImg .content{
  padding: 20px 15px 10px 30px;
  position: relative;
  border-radius: 6px;
    background-color: #f0f2f4;
/*    -webkit-box-shadow: 0 3px 0 #d7e4ed;
box-shadow: 0 3px 0 #d7e4ed;*/
}

.timeContainer.robust h2,
.timeContainer.robustImg h2{
    display: block;
    margin-top: 12px;
    margin-bottom: 0px;
    color: #fff;
    padding-left: 30px;
} 


.timeContainer.robustImg span{
    display: block;
    
}
.timeContainer.robustImg img{
    display: block;
} 




.timeContainer .content{
      padding: 20px 15px 10px 30px;
    overflow: hidden;
}

.eventInfo h2,
.eventInfoImg h2{
    display: inline;
    margin-right: 5px;
}

.eventInfo p,
.eventInfoImg p{
    display: inline;
}

.eventInfo,
.eventInfoImg{
}

.eventInfoImg img{
}

.eventInfoGraphic{
    max-width: 100px;
    margin: auto;
}


.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}


@media screen and (min-width: 600px) {
    .timeline{
        margin-left: 30px;
    }
}
@media screen and (min-width: 992px) {
    .timeline{
        margin-left: auto;
    }
}
@media screen and (max-width: 992px) {
    .timeContainer.robustImg img,
    .eventInfoGraphic{
        margin: 15px auto auto auto;
    }
}

@media screen and (max-width: 1200px) {
    .timeContainer img,
    .eventInfoGraphic{
        margin: 0px auto auto auto;
    }
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
/* Place the timelime to the left */
  .timeline::after {
    left: 31px;
  }

/* Full-width timeContainers */
  .timeContainer {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }

/* Make sure that all arrows are pointing leftwards */
  .timeContainer::before {
    left: 22px;
  }

/* Make sure all circles are at the same spot */
  .left::after, .right::after {
    left: 18px;
  }

/* Make all right timeContainers behave like the left ones */
  .right {
    left: 0%;
  }
}