@charset "utf-8";
/* CSS Document */

/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline {
  white-space: nowrap;
  overflow-x: hidden;
}

.timeline ol {
  font-size: 0;
  width: 100vw;
  padding: 80px 0 200px;
  transition: all 1s;
}

.timeline ol li {
  position: relative;
  display: inline-block;
  list-style-type: none;
   width: 230px;
   top: 20px;
  height: 2px;
  background: #189935;
}

.timeline ol li .time-cont::before { content:""; width:13px; background: #ffffff; height:13px; top:-5px; left: 0px; position: absolute; border: 2px solid #189935; border-radius: 50%; z-index: 1;}
/* .timeline ol li .time-cont::after { background: #ffffff; content:""; width:13px; height:13px; top:-5px; left: 0px; position: absolute; border-radius: 50%; z-index: -1} */

.timeline ol li:not(:first-child) {
  /*margin-left: 14px;*/
  margin-left: 0px;
}


.timeline ol li div.time-cont {
  position: absolute;
  left: calc(100% - 50%);
  width: 230px;
  padding:30px 0px 0px 0px;
  font-size: 1rem;
  white-space: normal;
  top: 0;
}

.timeline time {
  display: block;
  font-size:25px;
  font-family: 'Graphik-Medium';
  margin-bottom: 0px;
  color:#333333;
  position:absolute;
  top: -50px;
  left: 0;
  letter-spacing: -0.2px;
}

/* TIMELINE ARROWS
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline .arrows {
  /*display: flex;
  justify-content: center;*/
  margin-bottom: 0px;
  position: absolute;
  top: 98px;
  width: 100%;
}
.timeline .arrows .arrow{
  border: none;
  background: none;
  cursor:pointer;
  padding:0px;
}

.timeline .arrows .arrow__prev {
  margin: 0px;
  left:25px;
  position: absolute;
}
.timeline .arrows .arrow__next{
  margin:0px;
  right:50px;
  position: absolute;
}

.timeline .disabled {
  opacity: .5;
}


/* GENERAL MEDIA QUERIES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 767px) {
.timeline ol { float: left; width: 100%; }
.timeline ol li { float: left; width: 50%; }
.timeline ol li .time-cont::before {top: 5px; left: -6px;}
.timeline ol li:nth-child(2n+2) .time-cont::before { right: -6px; left: auto;}
.timeline ol li .time-cont::after {content: none;}
.timeline ol { padding: 0 15px; transform: none !important; float: left; width: 100%; position: relative;}
.timeline ol:after { position: absolute; content: ""; left: 0; right: 0; background: #189935; width: 2px; height: 100%; margin: 0 auto;}
.timeline time { float: left; width: 100%; font-size: 18px; line-height: 24px; position: relative; top: 0; margin-bottom: 5px;}
.timeline .time-txt h3 {font-size: 15px; line-height: 20px;}
.timeline ol li:nth-child(1n+1) div.time-cont { text-align: left;}
.timeline ol li:nth-child(2n+2) div.time-cont { text-align: right; padding: 0 30px 0 0;}
.timeline ol li div.time-cont {float: left; width: 100%; position: relative; left: 0;  right: 0; margin: 0 auto; padding: 0 0px 0 30px; }
.timeline ol li:first-child div.time-cont {margin-top: 20px;} 
.timeline ol li:last-child div.time-cont {margin-bottom: 20px;} 
.timeline ol li:nth-child(2n+2) { margin-top: 75px;}
.timeline .time-txt { padding-right: 0; margin: 0;}
.timeline ol li {float: right; display: block; height: auto; background: transparent; top: 0;}
.timeline ol li div { width: 94%; height: auto !important; margin: 0 auto 25px; }
.timeline ol li div { position: static;}
.timeline .arrows { display: none; }
}
@media screen and (max-width:479px) {
.timeline time {font-size: 16px; line-height: 22px;}
.timeline .time-txt p {font-size: 13px; line-height: 18px;}
.timeline ol li div.time-cont {padding: 0 0px 0 20px;}
.timeline ol li:nth-child(2n+2) div.time-cont { padding: 0 20px 0 0;}
.timeline .time-txt h3 { font-size: 14px;}

}
@media screen and (max-width:359px) {
.timeline .time-txt p { font-size: 12px;}
}