@charset "UTF-8";

header.navigation {
  z-index: 2;
}

.timeline-page {
  overflow-x: hidden;
}

.timeline.stick li a:hover, .timeline.stick li a:focus, .timeline.stick li a.selected {
  color: #f1f1f2;
}

@media all and (max-width: 550px) {
  .timeline.stick {
    font-size: 4.5vw;
  }
}

@media all and (max-width: 400px) {
  .timeline.stick {
    font-size: 5vw;
    letter-spacing: 1px;
  }
}

.stuck {
  padding-top: 307px !important;
  margin-top: -307px !important;
}

@media all and (max-width: 800px) {
  .stuck {
    padding-top: 257px !important;
    margin-top: -257px !important;
  }
}

.stuck-fixed {
  padding-top: 250px !important;
  margin-top: -250px !important;
}

@media all and (max-width: 800px) {
  .stuck-fixed {
    padding-top: 200px !important;
    margin-top: -200px !important;
  }
}

.timeline-header {
  background-image: url('../images/timeline/2021-KZ-RV-Exterior-Product-Lineup.jpg');
  background-position: center 85%;
  background-size: contain !important;
  background-repeat: no-repeat;
}

@media all and (max-width: 1400px) {
  .timeline-header {
    background-position: center 93%;
  }
}

@media all and (max-width: 1300px) {
  .timeline-header {
    background-position: center 100%;
  }
}

.timeline-header h1 {
  background-color: #89813d !important;
}

.timeline-navigation {
  margin-top: 0 !important;
  border-top: 1px solid #fff;
}

.timeline.stick li {
  padding-left: 0;
  padding-right: 0;
}

.timeline.stick li:first-of-type {
  padding-left: 0;
}

.timeline.stick li:last-of-type {
  padding-right: 0;
}

.timeline.stick li:first-of-type a {
  margin-left: 0;
}

.timeline.stick li:last-of-type a {
  margin-right: 0;
}

.timeline {
  border: none;
  text-align: center;
  margin: auto;
  padding-top: 0;
  padding: 0 5% 5px 5%;
  max-width: 100%;
  width: 98.5%;
  margin-left: -5%;
}

@media all and (max-width: 1000px) {
  .timeline {
    width: 97%;
  }
}

@media all and (max-width: 450px) {
  .timeline {
    width: 95%;
  }
}

.timeline li {
  width: 16.66%;
}

.timeline li a {
  margin: 0;
  color: #fff;
  width: 100%;
  display: block;
  height: 52px;
  line-height: 52px;
}

.timeline a:before,
.timeline a:after {
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 1;
  display: block;
  width: 0;
  height: 0;
  border-top: 26px solid transparent;
  border-bottom: 26px solid transparent;
  border-left: 13px solid transparent;
}

.timeline li a span {
  margin-right: -8%;
}

@media all and (max-width: 1000px) {
  .timeline li a span {
    margin-right: -15%;
  }
}

@media all and (max-width: 650px) {
  .timeline li a span {
    margin-right: -25%;
  }
}

@media all and (max-width: 450px) {
  .timeline li a span {
    margin-right: -35%;
  }
}

@media all and (max-width: 400px) {
  .timeline li a span {
    margin-right: -40%;
  }
}

a.year1970 {
  background-color: #002b49;
}

.timeline a.year1970:before {
  border-left-color: #002b49;
}

.timeline a.year1970:after {
  border-left-color: #002b49;
}

a.year1980 {
  background-color: #00859b;
}

.timeline a.year1980:before {
  border-left-color: #00859b;
}

.timeline a.year1980:after {
  border-left-color: #00859b;
}

a.year1990 {
  background-color: #5e7d40;
}

.timeline a.year1990:before {
  border-left-color: #5e7d40;
}

.timeline a.year1990:after {
  border-left-color: #5e7d40;
}

a.year2000 {
  background-color: #cb6015;
}

.timeline a.year2000:before {
  border-left-color: #cb6015;
}

.timeline a.year2000:after {
  border-left-color: #cb6015;
}

a.year2010 {
  background-color: #9e2a2b;
}

.timeline a.year2010:before {
  border-left-color: #9e2a2b;
}

.timeline a.year2010:after {
  border-left-color: #9e2a2b;
}

a.year2020 {
  background-color: #572d2d;
}

.timeline a.year2020:before {
  border-left-color: #572d2d;
}

.timeline a.year2020:after {
  border-left-color: #572d2d;
}

.timeline a {
  position: relative;
  padding-right: 0 !important;
}

.year-detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.year-detail h3 {
  font-size: 2.7rem;
  width: 140px;
}

.year-detail p {
  width: calc(100% - 140px);
}

.timeline-image {
  -ms-flex-preferred-size: calc(100% - 140px) !important;
      flex-basis: calc(100% - 140px) !important;
  margin-top: 3%;
}

@media all and (max-width: 650px) {
  .year-detail h3 {
    width: 100px;
  }

  .year-detail p {
    width: calc(100% - 100px);
  }

  .timeline-image {
    -ms-flex-preferred-size: calc(100% - 100px) !important;
        flex-basis: calc(100% - 100px) !important;
  }
}

@media all and (max-width: 400px) {
  .year-detail {
    display: block;
  }

  .year-detail h3 {
    width: 100%;
  }

  .timeline-image {
    margin-top: 8%;
  }
}

.timeline-image p {
  width: 100%;
  margin-top: 10px;
}

.timeline-images {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 15px;
}

@media all and (max-width: 600px) {
  .timeline-images {
    display: block;
    width: 90%;
    margin: 0 auto;
  }

  .timeline-images img {
    border-top: 5px solid #fff;
  }
}

.timeline-copy h2 {
  text-transform: none;
}

.contain.info-panel-contain.timeline-copy {
  max-width: 900px;
}

.timeline-image div div.flex:nth-of-type(2), .timeline-image div div.flex:nth-of-type(3), .border-top-5 {
  border-top: 5px solid #fff;
}

.timeline-image .flex div:nth-of-type(1) {
  border-right: 5px solid #fff;
}

.timeline-image .flex div {
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
}

.year-header {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  text-align: center;
  color: #fff;
  line-height: 190px;
  font-size: 4rem;
  margin-bottom: 2%;
}

.year-header1970 {
  background-color: #002b49;
}

.year-detail1970 {
  color: #002b49;
}

.year-header1980 {
  background-color: #00859b;
}

.year-detail1980 {
  color: #00859b;
}

.year-header1990 {
  background-color: #5e7d40;
}

.year-detail1990 {
  color: #5e7d40;
}

.year-header2000 {
  background-color: #cb6015;
}

.year-detail2000 {
  color: #cb6015;
}

.year-header2010 {
  background-color: #9e2a2b;
}

.year-detail2010 {
  color: #9e2a2b;
}

.year-header2020 {
  background-color: #572d2d;
}

.year-detail2020 {
  color: #572d2d;
}

.timeline-header-border {
  height: 3px;
  background: -webkit-gradient(linear, left top, right top, from(#002b49), color-stop(#00859b), color-stop(#5e7d40), color-stop(#cb6015), color-stop(#9e2a2b), to(#572d2d));
  background: -o-linear-gradient(left, #002b49, #00859b, #5e7d40, #cb6015, #9e2a2b, #572d2d);
  background: linear-gradient(to right, #002b49, #00859b, #5e7d40, #cb6015, #9e2a2b, #572d2d);
  display: block;
  width: calc(100% - 180px);
  margin-bottom: -100px;
  margin-left: 180px;
  margin-top: 100px;
}

.pb5 {
  padding-bottom: 5px;
}

.pt5 {
  padding-top: 5px;
}