h1.jrn-banner{
  font-size:200px;
  font-weight:700;
  text-align:center;
  letter-spacing:-6px;
  line-height:100%;
  color:#000000;
}
.inner-banner {
  height: calc(100dvh - 60px);
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  padding-bottom:70px;
  position:relative;
}
a.timeline-arrow {
    position: absolute;
    bottom: 10px;
}
.timeline {
  width: 100%;
}
.year-section {
  position: relative;
  min-height:180vh;
  display: block;
  max-width:1195px;
  margin-left:auto;
  padding:130px 0px;
}
.year-section:last-child{
  min-height:auto;
  padding-bottom:100px;
}
.double-yr{min-height:calc(180vh + 820px);}
.year {
  position: sticky;
  top: 70px;
  font-size:200px;
  letter-spacing:-4.0px;
  font-weight: 600;
  color:#000000;
  z-index: 1;
  transition: color 5s ease;
  display: inline-block;
  width: 100%;
  max-width:806px;
  text-align:center;
  line-height:100%;
}
.content-wrapper {
  display: flex;
  gap:44px;
  position: relative;
  z-index: 2;
  align-items: flex-start;
  height: 100%;
  margin-top:50px;
  flex-wrap:wrap;
}
.image-box {
  padding-bottom:0;
  width:calc(100% - 389px);
}
.image-box img {
  width: 100%;
  border-radius:16px;
  height:auto;
}
.text-box {
  position: sticky;
  top:100px;
  padding-bottom: 0px;
  width:345px;
}
.timeframe{
  display:flex;
  align-items:flex-start;
}
.timeline-button {
    padding: 130px 0px;
    display: flex;
    flex-flow: column;
    position:sticky;
    top:-30px;
}
.timeline-button a{
  font-size:16px;
  color:#B1B1B1;
  font-weight:500;
  padding:18px 16px;
  line-height:100%;
  letter-spacing:-0.3px;
  text-decoration:none;
  transition:all 0.4s ease-in-out;
  position:relative;
}
.timeline-button a.active{
    color: #000000;
    padding-left: 24px;
}
.timeline-button a:hover{color:#000000;}
.timeline-button a.active:after{
  content:"";
  width:6px;
  height:1px;
  background:#000000;
  right:0px;
  top:50%;
  transform:translateY(-50%);
  position:absolute;
}

@media(max-width:1499px){
  .year-section{min-height:200vh;}
  .double-yr{min-height:calc(200vh + 820px);}
  .year-section{max-width:1080px;}
  .year{max-width:691px;font-size:150px;}
}
@media(max-width:1399px){
  .year-section{max-width:1024px;}
  .year{max-width:635px;font-size:140px;}
  h1.jrn-banner{font-size:160px;}
  .text-box{top:80px;}
  .timeline-button{padding:100px 0px;top:-30px;}
  .timeline-button a{padding:10px 12px;font-size:14px;}
  .timeline-button a.active{padding-left:16px;}
  /*.timeline-button a:hover{padding-left:14px;}*/
  .content-wrapper{margin-top:32px;}
  .year-section{padding:100px 0px;}
}
@media(max-width:1199px){
  .year-section{max-width:100%;}
  .year{max-width:519px;font-size:120px;}
  h1.jrn-banner{font-size:140px;}
  .year-section{min-height:140vh;padding:50px 0px;}
  .double-yr{min-height:calc(140vh + 528px);}
}
@media(max-width:991px){
  .content-wrapper{flex-flow:column;gap:0px;}
  .image-box, .year{width:100%;max-width:100%;position:relative;}
  .year{font-size:100px;top:0px;margin-bottom:0px;}
  .text-box{position:relative;width:100%;margin-top:24px;top:0;}
  .year-section{min-height:auto;padding:0px;margin-bottom:64px;padding-top:50px;}
  h1.jrn-banner{font-size:100px;}
}
@media(max-width:600px){
  h1.jrn-banner{font-size:80px;}
  .timeframe{flex-flow:column;padding:48px 0px;}
  .timeline-button{display:none;}
  .year-section{margin-bottom:48px;padding-top:0px;text-align:center;}
  .year{font-size:48px;}
  .content-wrapper{margin-top:24px;}
  .year-section:last-child{padding-bottom:0px;margin-bottom:0px;}
  .content-wrapper.mb-xl-25.mb-md-20.mb-16{margin-bottom:32px!important;}
}
@media(min-height:1300px) and (max-height:3000px){
  .year-section{min-height:100vh;}
  .double-yr{min-height:calc(100vh + 528px);}
}