.timeline{

  width:8px;
  height: 100%;
  min-height: 1200px;

  background-color: var(--timeline_colour);
  border-radius: 2px;
  z-index: 5;
  transition: all 500ms ease-in-out;
  transition-delay: 250ms;

  margin-left:165px;

}

.timeline_div{
  width:15em;
  min-width:240px;
}



.dot {

  --w:12px;
  --border_thickness: 6px;
  --gap: 5px;

  outline:0 solid var(--timeline_colour);
  outline-offset: 0;

  height: 12px;
  width: var(--w);
  background-color: var(--timeline_colour);
  border-radius: 50%;
  /*outline: 4px solid #ebd595;*/
  position: absolute;
  transition: all 250ms linear;
}


.dot:nth-child(1){
  margin-left:-2px;
  margin-top:-18.5px;
}



.timeline_segment{
  position: absolute;
  margin-left:-200px;
  width:190px;
  height: 50px;
  display:inline;
  margin-top: 60px;
  opacity: 0;
}

.timeline_segment a{
  font-weight:bold;
  padding-left: 5px;
  padding-right: 3px;
  border-width: 0 0 4px 0;
  border-color: #ffe6a7;
  border-style: solid;
  width:100%;
  border-radius: 5px 0 0 0px;
  transition: all 170ms linear;

}

.timeline_segment p{
  font-size:16px;
  padding-left: 5px;
  padding-right: 3px;
  opacity:0.7;
}

.timeline_segment a:nth-child(1):hover{
  background-color: #ffe6a7;
  color: #1c1c1c;
  padding-left: 5px;
}




.timeline_segment_animation{
  animation-name: timeline_segment_animate;
  animation-duration: 0.7s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;/*so when animation ends it stays where it is*/
}

.timeline_segment_animation:nth-child(3){
  animation-delay: 0.3s;
}
.timeline_segment_animation:nth-child(4){
  animation-delay: 0.5s;
}
.timeline_segment_animation:nth-child(5){
  animation-delay: 0.7s;
}
.timeline_segment_animation:nth-child(6){
  animation-delay: 0.9s;
}
.timeline_segment_animation:nth-child(7){
  animation-delay: 1.1s;
}
.timeline_segment_animation:nth-child(8){
  animation-delay: 1.3s;
}
.timeline_segment_animation:nth-child(9){
  animation-delay: 1.5s;
}
.timeline_segment_animation:nth-child(10){
  animation-delay: 1.7s;
}
.timeline_segment_animation:nth-child(11){
  animation-delay: 1.9s;
}
.timeline_segment_animation:nth-child(12){
  animation-delay: 2.1s;
}
.timeline_segment_animation:nth-child(13){
  animation-delay: 2.3s;
}
.timeline_segment_animation:nth-child(14){
  animation-delay: 2.5s;
}
.timeline_segment_animation:nth-child(15){
  animation-delay: 2.7s;
}
.timeline_segment_animation:nth-child(16){
  animation-delay: 2.9s;
}


@keyframes timeline_segment_animate{
  to {
    transform: translateX(11px);
    opacity: 1;

  }


}

.timeline_title{
  margin-left:-195px;
  width: 175px;
  font-weight: bold;
  position: absolute;
  padding-left: 5px;
  padding-right: 5px;
  margin-top:-25px;
  text-align: right;
  opacity: 0.1;
  transition: opacity 1s linear;
}


.timeline_section_title{

  border-style:solid;
  border-width: 0 0 4px 0;
  border-color: rgba(0, 0, 0, 0.7);
  transition: all 800ms ease-in-out;
}





























.HP_segment{
  width:85%;
  padding-bottom:30vh;

}

.HP_segment p{/*for first paragraph*/
  opacity: 0;
  transition: opacity 0.55s linear;

}

.HP_segment p:nth-child(1){/*for second paragraph*/
  transition-delay: 50ms;
}
.HP_segment p:nth-child(2){/*for third paragraph*/
  transition-delay: 140ms;

}
.HP_segment p:nth-child(3){/*for fourth paragraph*/
  transition-delay: 250ms;

}
.HP_segment p:nth-child(4){/*for fifth paragraph*/
  transition-delay: 360ms;

}

.HP_segment p:nth-child(5){/*for fifth paragraph*/
  transition-delay: 470ms;

}

.HP_segment p:nth-child(6){/*for sixth paragraph*/
  transition-delay: 580ms;

}
.HP_segment p:nth-child(7){/*for sixth paragraph*/
  transition-delay: 690ms;

}
.HP_segment p:nth-child(8){/*for sixth paragraph*/
  transition-delay: 700ms;

}
.HP_segment p:nth-child(9){/*for sixth paragraph*/
  transition-delay: 810ms;

}
.HP_segment p:nth-child(10){/*for sixth paragraph*/
  transition-delay: 920ms;

}

.HP_segment p:nth-child(11){/*for sixth paragraph*/
  transition-delay: 1030ms;

}

.HP_segment p:nth-child(12){/*for sixth paragraph*/
  transition-delay: 1140ms;

}

.HP_segment p:nth-child(odd){/*related to paragraph_segment_animation_left*/
  transform: translateX(5px);
}

.HP_segment p:nth-child(even){/*related to paragraph_segment_animation_right*/
  transform: translateX(-5px);
}

.HP_segment h1{
  margin-bottom:10px;
  font-size: 64px;
  opacity: 0.1;
  transition: opacity 0.5s linear;
}


.paragraph_segment_animation_right{
  animation-name: paragraph_segment_animation_right;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;/*so when animation ends it stays where it is*/

}


@keyframes paragraph_segment_animation_right{
  to {
    transform: translateX(0);

  }


}


.paragraph_segment_animation_left{/*related to odd paragraph translations*/
  animation-name: paragraph_segment_animation_left;
  animation-duration: 0.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;/*so when animation ends it stays where it is*/

}


@keyframes paragraph_segment_animation_left{/*related to even paragraph translations*/
  to {
    transform: translateX(0);
  }


}


.HP_image{
  opacity: 0;
  transition: opacity 1100ms ease-out;
}





.thumbnail_image{

  object-fit:cover;
  margin-inline:12px;
  border-radius: 3px;
  outline:3px solid transparent;
  opacity: 0.5;
  transition: outline 180ms ease-out, opacity 180ms ease-out;
  cursor: pointer;
}

.thumbnail_image:hover{
  outline:3px solid #ffe6a7;
  opacity: 1;
}


.thumbnail_currentlyOn{
  outline:3px solid #ffe6a7;
  opacity: 1;
}

.carousel_figcap{
  font-size: small;
}


.carousel-slider{
  width: 100%;
  min-height: 600px;
  height:50vw;
  overflow: hidden;
  transition: opacity 1100ms ease-out;
  opacity: 0;
  position: relative;
  margin-top: 40px;



}

.carousel-slides, .carousel-slides2{
  width: 1000%;
  height:37vw;
  display: flex;
}
.carousel-slides2{
  width: 400%;
}

.carousel-slides input, .carousel-slides2 input{
  display: none;/*to hide the buttons*/
}

.carousel-slide, .carousel-slide2{
  width:10%;
  transition: 2.4s;
}

.carousel-slide2{
  width: 25%;
}

.carousel-slide img, .carousel-slide2 img{
  width: 100%;
  height:37vw;

}

.carousel-thumbnails, .carousel-thumbnails2{
  display: inline-block;
  width:fit-content;

}

.navigation-mannual{
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 90px;
  background-color: var(--grey_lightDark_transition);
  padding-top: 8px;
  border-radius: 10px;

}



#radio0:checked ~ .first-in-carousel{
  margin-left:0;
}

#radio1:checked ~ .first-in-carousel{
  margin-left:-10%;
}

#radio2:checked ~ .first-in-carousel{
  margin-left:-20%;
}

#radio3:checked ~ .first-in-carousel{
  margin-left:-30%;
}
#radio4:checked ~ .first-in-carousel{
  margin-left:-40%;
}
#radio5:checked ~ .first-in-carousel{
  margin-left:-50%;
}
#radio6:checked ~ .first-in-carousel{
  margin-left:-60%;
}
#radio7:checked ~ .first-in-carousel{
  margin-left:-70%;
}
#radio8:checked ~ .first-in-carousel{
  margin-left:-80%;
}
#radio9:checked ~ .first-in-carousel{
  margin-left:-90%;
}


#radio0_2:checked ~ .first-in-carousel2{
  margin-left:0;
}
#radio1_2:checked ~ .first-in-carousel2{
  margin-left:-25%;
}
#radio2_2:checked ~ .first-in-carousel2{
  margin-left:-50%;
}
#radio3_2:checked ~ .first-in-carousel2{
  margin-left:-75%;
}


















.wave-graphic_HP{
  width: calc(100% + 6em);
  margin-left: -2em;
  margin-right: -4em;

  margin-top:150px;
  
}


@media (max-width: 870px) {/*So when the width of screen is 870px or less: change the following classes. USEFUL FOR MOBILE-VIEW*/
  .timeline_segment{
    display: none;
  }

  .timeline_title{
    display:none;
  }

  .timeline_div{
    width:2em;
    min-width:0;

  }

  .timeline{
    margin-left:12px;
  }

  .HP_segment h1{
    font-size: 29px;
  }

  #segment_0 h1{
    font-size: 24px;
  }

  #segment_1 h1{
    font-size: 24px;
  }

  #segment_2 h1{
    font-size: 24px;
  }

  #segment_3 h1{
    font-size: 24px;
  }

  .carousel-slider{
    min-height: 480px;
  }

  .wave-graphic_HP{
    width: calc(100% + 2em + 12px);
    padding-right: -12px;
    
  }
  

  .carousel_figcap{
    font-size: 6px;
  }

}