/*------------------timeline-sum------------------ */


.wrapper-time-summary {
  margin-bottom:  80px;
  margin-top: 10px;
  width: 100%;

}
.timesumheader h1 {
  text-align: center;
  color: #000;
  position: relative;
  top: -150px;
}



.wrapper-time-summary h1 {
 margin-bottom: 2em;
}




/* Timeline - Years */
.timelines-years-old {
  position: relative;
  top: 100px;
  padding: 0 0 0 0px;
  margin: 0;
  white-space: nowrap;
  list-style: none;
  /* Fix display: inline-block spacing issue */;
  font-size: 0;
}
.timelines-years-old li {
  position: relative;
  top: -20px; 
  display: inline-block;
  width: 6vw;
  color: #868686;
  font-size: 11px;
  line-height: 11px;
  text-indent: -12px;
}

.timelines-years {
  position: relative;
  top: 80px;
  padding: 0 0 0 0px;
  margin: 0;
  white-space: nowrap;
  border-top: 3px solid #282828;
  list-style: none;
  /* Fix display: inline-block spacing issue */;
  font-size: 0;
}
.timelines-years li {
  position: relative;
  top: -20px; 
  display: inline-block;
  width: 6vw;
  color: #868686;
  font-size: 14px;
  font-weight: bold;
  line-height: 11px;
  text-indent: -12px;
}
/* Display last year */
.timelines-years li:last-child {
  width: 1vw;
}





.timeline-events-primary-headline {
  position: relative;
  top: 100px;
  padding: 0 0 0 0px;
  margin: 0;
  white-space: nowrap;
  list-style: none;
  /* Fix display: inline-block spacing issue */;
  font-size: 0;
}
.timeline-events-primary-headline li {
  position: relative;
  top: -20px; 
  display: inline-block;
  width: 6vw;
  color: #868686;
  font-size: 11px;
  line-height: 11px;
  text-indent: -12px;
    position: absolute;
  left: 0;
  top: -50px;
  bottom: -36px;
  height: 8px;
  border-radius: 8px;
}

.timeline-events-secondary-headline {
  position: relative;
  top: 100px;
  padding: 0 0 0 0px;
  margin: 0;
  white-space: nowrap;
  list-style: none;
  /* Fix display: inline-block spacing issue */;
  font-size: 0;
}
.timeline-events-secondary-headline li {
  position: relative;
  top: -20px; 
  display: inline-block;
  width: 6vw;
  color: #868686;
  font-size: 11px;
  line-height: 11px;
  text-indent: -12px;
    position: absolute;
  left: 0;
  top: -225px;
  bottom: -36px;
  height: 8px;
  border-radius: 8px;
}


/* Timeline - Events */
.timeline-events {
  padding: 0;
  list-style: none;
  white-space: nowrap;
  /* Fix display: inline-block spacing issue */;
  font-size: 0;

}
.timeline-events h2,
.timeline-events h3,
.timeline-events h4 {
  margin: 0 0 1px 0;
  font-weight: normal;
  font-size: 11px;
}

.timeline-events h2 {
  color: #777;
  text-transform: uppercase;
}
.timeline-events  h4 {
  color: #000;
  font-style: italic;
  font-size: 12px;
}
.timeline-events  h3 {
  --color: #000;
  --font-style: italic;
  font-size: 12px;
}
.timeline-events li {
  position: relative;
  display: inline-block;
  left: -75px;
}
.timeline-events li:before {
  position: absolute;
  left: 0;
  bottom: -36px;
  height: 8px;
  border-radius: 8px;
  content: '';
}



.timeline-events-primary {
  padding: 0;
  list-style: none;
  white-space: nowrap;
  /* Fix display: inline-block spacing issue */;
  font-size: 0;
  left: -15px;
}


.timeline-events-secondary {
  padding: 0;
  list-style: none;
  white-space: nowrap;
  /* Fix display: inline-block spacing issue */;
  font-size: 0;
  left: -15px;
}
.timeline-events-secondary h2,
.timeline-events-secondary h3,
.timeline-events-secondary h4 {
  margin: 0 0 1px 0;
  font-weight: normal;
  font-size: 11px;
}

.timeline-events-secondary h2 {
  color: #777;
  text-transform: uppercase;
}
.timeline-events-secondary  h4 {
  color: #000;
  font-style: italic;
  font-size: 12px;
}
.timeline-events-secondary  h3 {
  --color: #000;
  --font-style: italic;
  font-size: 12px;
}
.timeline-events-secondary li {
  position: relative;
  display: inline-block;
}
.timeline-events-secondary li:before {
  position: absolute;
  left: 0;
  bottom: -36px;
  height: 8px;
  border-radius: 8px;
  content: '';
}
.timeline-events-secondary li:before {
  position: absolute;
  left: 0;
  top: -100px;
  bottom: -36px;
  height: 8px;
  border-radius: 8px;
  content: '';
}





.timeline-events-legends {
  padding: 0;
  list-style: none;
  white-space: nowrap;
  /* Fix display: inline-block spacing issue */;
  font-size: 0;

}
.timeline-events-legends h2,
.timeline-events-legends h3,
.timeline-events-legends h4 {
  margin: 0 0 1px 0;
  font-weight: normal;
  font-size: 11px;
}

.timeline-events-legends h2 {
  color: #777;
  text-transform: uppercase;
}
.timeline-events-legends  h4 {
  color: #000;
  font-style: italic;
  font-size: 12px;
}
.timeline-events-legends  h3 {
  --color: #000;
  --font-style: italic;
  font-size: 12px;
}
.timeline-events-legends li {
  position: relative;
  display: inline-block;
}
.timeline-events-legends li:before {
  position: absolute;
  left: 0;
  bottom: -36px;
  height: 8px;
  border-radius: 8px;
  content: '';
}
.timeline-events-legends li:before {
      margin-top: -20px;

  position: absolute;
  left: 0;
  top: -150px;
  bottom: -36px;
  height: 8px;
  border-radius: 8px;
  content: '';
}

/* Deltidsjobb */
/*
.timeline-events-legends li:nth-child(1):before {
    background: #FF9704;
    left: -18vw;
}
.timeline-events-legends li:nth-child(1) h3 {
    color: #FF9704;
}
.timeline-events-legends li:nth-child(1) h2, .timeline-events-legends li:nth-child(1) h3,.timeline-events-legends li:nth-child(1) h4 {
  left: -16vw;
  position: relative;
  top: -173px;
}*/

/* Utbildning */
.timeline-events-legends li:nth-child(1):before {
    background: #1abc9c;
    left: -9vw;
    top: -150px;
}
.timeline-events li:nth-child(1) h3 {
    color: #1abc9c;
}
.timeline-events-legends li:nth-child(1) h2, .timeline-events-legends li:nth-child(1) h3,.timeline-events-legends li:nth-child(1) h4 {
  left: -7vw;
  position: relative;
  top: -173px;

}

/* Jobb */
.timeline-events-legends li:nth-child(2):before {
    background: #3498db;
    left: 0vw;
    top: -150px;
}
.timeline-events-legends li:nth-child(2) h3 {
   color: #3498db;
}
.timeline-events-legends li:nth-child(2) h2, .timeline-events-legends li:nth-child(2) h3,.timeline-events-legends li:nth-child(2) h4 {
  left: 2vw;
  position: relative;
  top: -173px;
}

/* Kurser */
/*
.timeline-events-legends li:nth-child(4):before {
    background: #DD3D01;
    left: 10vw;
    top: -150px;
}
.timeline-events-legends li:nth-child(4) h3 {
    color: #DD3D01;
}
.timeline-events-legends li:nth-child(4) h2, .timeline-events-legends li:nth-child(4) h3,.timeline-events-legends li:nth-child(4) h4 {
  left: 12vw;
  position: relative;
  top: -173px;
  --display: none;
}


*/






/* Timeline - Events - Colours */

.timeline-events li:first-child {
  margin-left: 5vw;
}
.timeline-events-secondary li:first-child {
  margin-left: 5vw;
}


/* kandidat */
.timeline-events li:nth-child(1):before {
    background: #1abc9c;
    background-image: linear-gradient(to right, #ffffff , #1abc9c, #1abc9c);
    border-radius: 0 6px 6px 0;
}
.timeline-events li:nth-child(1) h3 {
    color: #1abc9c;
    left: 85vw;
}
.timeline-events li:nth-child(1) h2, .timeline-events li:nth-child(1) h3,.timeline-events li:nth-child(1) h4 {
  position: relative;
  left: 8vw;
}


/* master */
.timeline-events li:nth-child(2):before {
    background: #1abc9c;
    --left: -7.3vw;
  --top: 50px;
  --left: -1vw;
}
.timeline-events li:nth-child(2) h3 {
   color: #1abc9c;
}
.timeline-events li:nth-child(2) h2, .timeline-events li:nth-child(2) h3,.timeline-events li:nth-child(2) h4 {
  position: relative;
   --left: -7.3vw;
}



/* volvo cars */
.timeline-events li:nth-child(3):before {
    background: #3498db;
    top: 32px;
    --left: -10.2vw;
}
.timeline-events li:nth-child(3) h3 {
    color: #3498db;
}
.timeline-events li:nth-child(3) h2, .timeline-events li:nth-child(3) h3,.timeline-events li:nth-child(3) h4 {
  --margin-left: -50px;
  display: none;
}

/* affecto */
.timeline-events li:nth-child(4):before {
    background: #3498db;
    top: 32px;
    --left: -10.1vw;
}
.timeline-events li:nth-child(4) h3 {
    color: #3498db;
    
}
.timeline-events li:nth-child(4) h2, .timeline-events li:nth-child(4) h3,.timeline-events li:nth-child(4) h4 {
  --margin-left: -50px;
  --position: relative;
  --top: -50px;
  display: none;
}

/* cgi */
.timeline-events li:nth-child(5):before {
    background: #3498db;
    --left: -10vw;
}
.timeline-events li:nth-child(5) h3 {
    color: #3498db;
}
.timeline-events li:nth-child(5) h2, .timeline-events li:nth-child(5) h3,.timeline-events li:nth-child(5) h4 {
  left: -0.4vw;
   position: relative;
  --top: -20px;
}

/* vcrs */
.timeline-events li:nth-child(6):before {
    background: #3498db;
    background-image: linear-gradient(to left, #ffffff , #3498db, #3498db);
    border-radius: 6px 0 0 6px; 
    --left: -9.9vw;
}
.timeline-events li:nth-child(6) h3 {
    color: #3498db;
    margin-left: 50px;
}
.timeline-events li:nth-child(6) h2, .timeline-events li:nth-child(6) h3,.timeline-events li:nth-child(6) h4 {
  left: 1vw;
  position: relative;
  margin-left: 50px;

}


/* SECONDARY */

/*
.timeline-events-secondary li:nth-child(1):before {
    background: #FF9704;
    display: none;
}
.timeline-events-secondary li:nth-child(1) h3 {
    color: #FF9704;
    display: none;
}
.timeline-events-secondary li:nth-child(1) h2, .timeline-events-secondary li:nth-child(1) h3,.timeline-events-secondary li:nth-child(1) h4 {
  position: relative;
  top: -160px;
  display: none;
}

.timeline-events-secondary li:nth-child(2):before {
    background: #FF9704;
    left: 0vw;
    display: none;
}
.timeline-events-secondary li:nth-child(2) h3 {
    color: #FF9704;
    display: none;
}
.timeline-events-secondary li:nth-child(2) h2, .timeline-events-secondary li:nth-child(2) h3,.timeline-events-secondary li:nth-child(2) h4 {
  left: 0vw;;
  position: relative;
  top: -160px;
  display: none;
}

.timeline-events-secondary li:nth-child(3):before {
    background: #FF9704;
    left: 5vw;
  --top: 50px;
  --left: -1vw;
  display: none;
}
.timeline-events-secondary li:nth-child(3) h3 {
   color: #FF9704;
}
.timeline-events-secondary li:nth-child(3) h2, .timeline-events-secondary li:nth-child(3) h3,.timeline-events-secondary li:nth-child(3) h4 {
  position: relative;
  top: -160px;
   left: 5vw;;
   display: none;
}*/

/* sommarjobb4 */
.timeline-events-secondary li:nth-child(1):before {
    background: #3498db;
    left: 3vw;
    --top: 32px;
    --left: -10.2vw;
}
.timeline-events-secondary li:nth-child(1) h3 {
    color: #3498db;
}
.timeline-events-secondary li:nth-child(1) h2, .timeline-events-secondary li:nth-child(1) h3,.timeline-events-secondary li:nth-child(1) h4 {
  left: 3vw;
  --display: none;
  position: relative;
  top: -160px;
}

/* sommarjobb5 */
.timeline-events-secondary li:nth-child(2):before {
    background: #3498db;
    left: 9vw;
}
.timeline-events-secondary li:nth-child(2) h3 {
    color: #3498db;
    
}
.timeline-events-secondary li:nth-child(2) h2, .timeline-events-secondary li:nth-child(2) h3,.timeline-events-secondary li:nth-child(2) h4 {
  left: 9vw;
  position: relative;
  top: -160px;
  --display: none;
}

/* sommarjobb6 */
.timeline-events-secondary li:nth-child(3):before {
    background: #3498db;
    left: 16vw;
}
.timeline-events-secondary li:nth-child(3) h3 {
    color: #3498db;
}
.timeline-events-secondary li:nth-child(3) h2, .timeline-events-secondary li:nth-child(3) h3,.timeline-events-secondary li:nth-child(3) h4 {
  left: 16vw;
   position: relative;
  top: -160px;
}

/* sommarjobb7 */
.timeline-events-secondary li:nth-child(4):before {
    background: #3498db;
    left: 23vw;
}
.timeline-events-secondary li:nth-child(4) h3 {
    color: #3498db;
}
.timeline-events-secondary li:nth-child(4) h2, .timeline-events-secondary li:nth-child(4) h3,.timeline-events-secondary li:nth-child(4) h4 {
  left: 23vw;
   position: relative;
  top: -160px;
}



/* sql cert */
.timeline-events-secondary li:nth-child(5):before {
    background: #1abc9c;
    left: 35vw;
    top: -127px;
}
.timeline-events-secondary li:nth-child(5) h3 {
    color: #1abc9c;
}
.timeline-events-secondary li:nth-child(5) h2, .timeline-events-secondary li:nth-child(5) h3,.timeline-events-secondary li:nth-child(5) h4 {
  left: 35vw;
  position: relative;
  top: -160px;
  display: none;
}

/* cgi talent prog */
.timeline-events-secondary li:nth-child(6):before {
    background: #1abc9c;
    left: 35.5vw;
}
.timeline-events-secondary li:nth-child(6) h3 {
    color: #1abc9c;
}
.timeline-events-secondary li:nth-child(6) h2, .timeline-events-secondary li:nth-child(6) h3,.timeline-events-secondary li:nth-child(6) h4 {
  left: 35.5vw;
  position: relative;
  top: -160px;
}

/* powerbi */
.timeline-events-secondary li:nth-child(7):before {
    background: #1abc9c;
    left: 36vw;
    top: -127px;
}
.timeline-events-secondary li:nth-child(7) h3 {
    color: #1abc9c;
}
.timeline-events-secondary li:nth-child(7) h2, .timeline-events-secondary li:nth-child(7) h3,.timeline-events-secondary li:nth-child(7) h4 {
  left: 36vw;
  position: relative;
  top: -160px;
  display: none;
}

/* projektledning */
.timeline-events-secondary li:nth-child(8):before {
    background: #1abc9c;
    left: 36.5vw;
    top: -127px;
}
.timeline-events-secondary li:nth-child(8) h3 {
    color: #1abc9c;
}
.timeline-events-secondary li:nth-child(8) h2, .timeline-events-secondary li:nth-child(8) h3,.timeline-events-secondary li:nth-child(8) h4 {
  left: 36.5vw;
  position: relative;
  top: -160px;
  display: none;
}

/* agil grund */
.timeline-events-secondary li:nth-child(9):before {
    background: #1abc9c;
    left: 37vw;
    top: -127px;
}
.timeline-events-secondary li:nth-child(9) h3 {
    color: #1abc9c;
}
.timeline-events-secondary li:nth-child(9) h2, .timeline-events-secondary li:nth-child(9) h3,.timeline-events-secondary li:nth-child(9) h4 {
  left: 37vw;
  position: relative;
  top: -160px;
  display: none;
}

/* ai */
.timeline-events-secondary li:nth-child(10):before {
    background: #1abc9c;
    left: 38vw;
}
.timeline-events-secondary li:nth-child(10) h3 {
    color: #1abc9c;
}
.timeline-events-secondary li:nth-child(10) h2, .timeline-events-secondary li:nth-child(10) h3,.timeline-events-secondary li:nth-child(10) h4 {
  left: 38vw;
  position: relative;
  top: -160px;
}

/* SM */
.timeline-events-secondary li:nth-child(11):before {
    background: #1abc9c;
    left: 39vw;
    top: -127px;
}
.timeline-events-secondary li:nth-child(11) h3 {
    color: #1abc9c;
}
.timeline-events-secondary li:nth-child(11) h2, .timeline-events-secondary li:nth-child(11) h3,.timeline-events-secondary li:nth-child(11) h4 {
  left: 39vw;
  position: relative;
  top: -160px;
  display: none;
}

/* AL */
.timeline-events-secondary li:nth-child(12):before {
    background: #1abc9c;
    left: 39.5vw;
    top: -127px;
}
.timeline-events-secondary li:nth-child(12) h3 {
    color: #1abc9c;
}
.timeline-events-secondary li:nth-child(12) h2, .timeline-events-secondary li:nth-child(12) h3,.timeline-events-secondary li:nth-child(12) h4 {
  left: 39.5vw;
  position: relative;
  top: -160px;
  display: none;
}

/* Math */
.timeline-events-secondary li:nth-child(13):before {
    background: #1abc9c;
    left: 40.5vw;
    top: -127px;
}
.timeline-events-secondary li:nth-child(13) h3 {
    color: #1abc9c;
}
.timeline-events-secondary li:nth-child(13) h2, .timeline-events-secondary li:nth-child(13) h3,.timeline-events-secondary li:nth-child(13) h4 {
  left: 40.5vw;
  position: relative;
  top: -160px;
  display: none;
}

/* ML */
.timeline-events-secondary li:nth-child(14):before {
    background: #1abc9c;
    left: 43vw;
    top: -100px;
}
.timeline-events-secondary li:nth-child(14) h3 {
    color: #1abc9c;
}
.timeline-events-secondary li:nth-child(14) h2, .timeline-events-secondary li:nth-child(14) h3,.timeline-events-secondary li:nth-child(14) h4 {
  left: 43vw;
  position: relative;
  top: -160px;

}





/* Timeline - Events - Grid */
.timeline-event-years-01,
    .timeline-event-years-01:before {
        width: 0.5vw;
    }
.timeline-event-years-025,
    .timeline-event-years-025:before {
        width: 1.5vw;
    }
.timeline-event-years-05,
    .timeline-event-years-05:before {
        width: 2.5vw;
    }
.timeline-event-years-075,
    .timeline-event-years-075:before {
        width: 3.5vw;
    }
.timeline-event-years-1, 
    .timeline-event-years-1:before {
        width: 5vw;
    }
    .timeline-event-years-125, 
    .timeline-event-years-125:before {
        width: 10vw;
    }
    .timeline-event-years-15, 
    .timeline-event-years-15:before {
        width: 12vw;
    }
.timeline-event-years-2,
    .timeline-event-years-2:before {
        width: 16vw;
    }
.timeline-event-years-25,
    .timeline-event-years-25:before {
        width: 20vw;
    }
.timeline-event-years-3,
    .timeline-event-years-3:before {
        width: 24vw;
    }
.timeline-event-years-4,
    .timeline-event-years-4:before {
        width: 32vw;
    }
.timeline-event-years-5,
    .timeline-event-years-5:before {
        width: 40vw;
    }
.timeline-event-years-6,
    .timeline-event-years-6:before {
        width: 48vw;
    }
.timeline-event-years-7,
    .timeline-event-years-7:before {
        width: 56vw;
    }
.timeline-event-years-8,
    .timeline-event-years-8:before {
        width: 64vw;
    }
.timeline-event-years-9,
    .timeline-event-years-9:before {
        width: 72vw;
    }
.timeline-event-years-10,
    .timeline-event-years-10:before {
        width: 80vw;
    }





.timelines-years li {
    padding-right: 8vw;
}

.timelines-years-old li {
    padding-right: 8vw;
}
.timesum {
    margin-left: 2vw;
}




/* Timeline - Legend */
.timeline-event-legend {
  position: relative;
}
.timeline-event-legend span {
  position: absolute;
  left: 150px;
}
.timeline-event-legend h2,
.timeline-event-legend h3,
.timeline-event-legend h4 {
  display: inline;
  margin-right: 10px;
}
.timeline-event-legend i {
  position: absolute;
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-bottom-color: #fff;
}
.timeline-event-legend i:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-top-color: #fff;
}
.timeline-event-legend > i {
  bottom: -32px;
  right: -12px;
}
.timeline-event-legend > i:after {
  left: -4px;
  bottom: -12px;
}
.timeline-event-legend span > i {
  top: -1px;
  left: -14px;
}
.timeline-event-legend span > i:after {
  left: -4px;
  bottom: -12px;
}