@charset "utf-8";

/* CSS Document */

.timeline {

  white-space: nowrap;

  overflow-x: hidden;

}



.timeline ol {

  font-size: 0;

  width: 100vw;

  padding: 250px 0;

  transition: all 1s;

}



.timeline ol li {

  position: relative;

  display: inline-block;

  list-style-type: none;

  width: 160px;

  height: 3px;

  background: #fff;

}



.timeline ol li:last-child {

  width: 280px;

}



.timeline ol li:not(:first-child) {

  margin-left: 14px;

}



.timeline ol li:not(:last-child)::after {

  content: '';

  position: absolute;

  top: 50%;

  left: calc(100% + 1px);

  bottom: 0;

  width: 12px;

  height: 12px;

  transform: translateY(-50%);

  border-radius: 50%;

  background: #F45B69;

}



.timeline ol li div {    max-height: 189px;

  position: absolute;

  left: calc(100% + 7px);

  width: 280px;

  padding: 15px;

  font-size: 1.4rem;

  white-space: normal;

  color: black;

  background: white;

}



.timeline ol li div::before {

  content: '';

  position: absolute;

  top: 100%;

  left: 0;

  width: 0;

  height: 0;

  border-style: solid;

}



.timeline ol li:nth-child(odd) div {

    max-height: 160px;    

  top: -16px;

  transform: translateY(-100%);

}



.timeline ol li:nth-child(odd) div::before {

  top: 100%;

  border-width: 8px 8px 0 0;

  border-color: white transparent transparent transparent;

}



.timeline ol li:nth-child(even) div {

  top: calc(100% + 16px);

}



.timeline ol li:nth-child(even) div::before {

  top: -8px;

  border-width: 8px 0 0 8px;

  border-color: transparent transparent transparent white;

}



.timeline time {

  display: block;

  font-size: 1.5rem;

  font-weight: bold;

  margin-bottom: 8px;

    

}





/* TIMELINE ARROWS

–––––––––––––––––––––––––––––––––––––––––––––––––– */



.timeline .arrows {

  display: flex;

  justify-content: center;

  margin-bottom: 20px;margin-right: 20px;

    background: none;

    box-shadow: none;

    border: none;

}



.timeline .arrows .arrow__prev {margin-right: 20px;

    background: none;

    box-shadow: none;

    border: none;

  margin-right: 20px;

}

.arrow.arrow__next{margin-right: 20px;

    background: none;

    box-shadow: none;

    border: none;}

.timeline .disabled {	

  opacity: .5;

}



.timeline .arrows img {

  width: 45px;

  height: 45px;

}





/* GENERAL MEDIA QUERIES

–––––––––––––––––––––––––––––––––––––––––––––––––– */

@media screen and (max-width: 599px) {

  .timeline ol,

  .timeline ol li {

    width: auto; 

  }

  

  .timeline ol {

    padding: 0;

    transform: none !important;

  }

  

  .timeline ol li {

    display: block;

    height: auto;

    background: transparent;

  }

  

  .timeline ol li:first-child {

    margin-top: 25px;

  }

  

  .timeline ol li:not(:first-child) {

    margin-left: auto;

  }

  

  .timeline ol li div {

    width: 94%;

    height: auto !important;

    margin: 0 auto 25px;

  }

  

  .timeline ol li div {

    position: static;

  }

  

  .timeline ol li:nth-child(odd) div {

    transform: none;

  }

  

  .timeline ol li:nth-child(odd) div::before,

  .timeline ol li:nth-child(even) div::before {

    left: 50%;

    top: 100%;

    transform: translateX(-50%);

    border: none;

    border-left: 1px solid white;

    height: 25px;

  }

  

  .timeline ol li:last-child,

  .timeline ol li:nth-last-child(2) div::before,

  .timeline ol li:not(:last-child)::after,

  .timeline .arrows {

    display: none;

  }

}

/*.timeline {

  list-style: none;

  padding: 20px 0 20px;

  position: relative;

}



.timeline:before {

  top: 0;

  bottom: 0;

  position: absolute;

  content: " ";

  width: 3px;

  background-color: #eeeeee;

  left: 50%;

  margin-left: -1.5px;

}



.timeline > li {

  margin-bottom:40px;

  position: relative;

}



.timeline > li:before,

.timeline > li:after {

  content: " ";

  display: table;

}



.timeline > li:after {

  clear: both;

}



.timeline > li:before,

.timeline > li:after {

  content: " ";

  display: table;

}



.timeline > li:after {

  clear: both;

}



.timeline > li > .timeline-panel {

  width: 46%;

  float: left;

  border: 1px solid #0c0c0e;

  border-radius: 2px;

  padding: 20px;

  position: relative;

  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);

  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);

}



.timeline > li > .timeline-panel:before {

  position: absolute;

  top: 26px;

  right: -15px;

  display: inline-block;

  border-top: 15px solid transparent;

  border-left: 15px solid #0c0c0e;

  border-right: 0 solid #0c0c0e;

  border-bottom: 15px solid transparent;

  content: " ";

}



.timeline > li > .timeline-panel:after {

  position: absolute;

  top: 27px;

  right: -14px;

  display: inline-block;

  border-top: 14px solid transparent;

  border-left: 14px solid #fff;

  border-right: 0 solid #fff;

  border-bottom: 14px solid transparent;

  content: " ";

}



.timeline > li > .timeline-badge {

  color: #fff;

  width: 60px;

    height:60px;

    line-height:60px;

  font-size: 1.4em;

  text-align: center;

  position: absolute;

  top: 16px;

  left: 50%;

  margin-left: -30px;

  background-color: #999999;

  z-index: 100;

  border-top-right-radius: 50%;

  border-top-left-radius: 50%;

  border-bottom-right-radius: 50%;

  border-bottom-left-radius: 50%;

  font-size:17px;

}



.timeline > li.timeline-inverted > .timeline-panel {

  float: right;

}



.timeline > li.timeline-inverted > .timeline-panel:before {

  border-left-width: 0;

  border-right-width: 15px;

  left: -15px;

  right: auto;

}



.timeline > li.timeline-inverted > .timeline-panel:after {

  border-left-width: 0;

  border-right-width: 14px;

  left: -14px;

  right: auto;

}



.timeline-badge.primary {

  background-color: #2e6da4 !important;

}



.timeline-badge.success {

  background-color: #3f903f !important;

}



.timeline-badge.warning {

  background-color: #f0ad4e !important;

}



.timeline-badge.danger {

  background-color: #d9534f !important;

}



.timeline-badge.info {

  background-color: #5bc0de !important;

}



.timeline-title {

  margin-top: 0;

  color: inherit;

}



.timeline-body > p,

.timeline-body > ul {

  margin-bottom: 0;

}



.timeline-body > p + p {

  margin-top: 5px;

}



.timeline-last1 {background-color: #673AB7 !important;}

.timeline-last2 {background-color: #009688 !important;}

.timeline-top1{background-color: #607d8b !important;}*/



.timeline ol li {; }

.timeline ol li img {display:block; padding:15px 0px;}