/* Section 5 */

#section-5 .section-wrapper {
   justify-content: left;
   overflow-x: auto;
   overflow-y: hidden;
   -webkit-overflow-scrolling: touch;
}

#section-5-text {
   position: absolute;
   width: 50%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}

#section-5 h2 {
   text-align: center;
}

#section-5 p {
   text-align: center;
   width: 75%;
   max-width: 560px;
   font-size: 18px;
   margin-top: 24px;
}

#section-5-timeline {
   position: absolute;
   left: 50%;
   height: 100%;
   display: flex;
   align-items: center;
   padding-right: 128px;
   margin-left: -80px;
   visibility: hidden;
}

#section-5-timeline h3 {
   width: 160px;
   height: 160px;
   background-color: #FFF;
   border-radius: 999px;
   transform: scale(0);
   transition: transform .3s ease-out;
}

#section-5-timeline h3 span {
   font-size: 24px;
   background-color: #000;
   border-radius: 999px;
   width: 80px;
   height: 80px;
   margin: 40px;
   line-height: 1;
   display: flex;
   justify-content: center;
   align-items: center;
   letter-spacing: normal;
}

h3#timeline-end span {
   font-size: 18px;
}

.timeline-line {
   height: 1px;
   width: 0px;
   background-color: #FFF;
   transition: width .15s linear;
}

timeline-event {
   width: 32px;
   height: 32px;
   transform: scale(0);
   background-color: #FFF;
   border-radius: 999px;
   transition: transform .25s ease-out;
}

.event-pupil {
   width: 16px;
   height: 16px;
   background-color: #000;
   border-radius: 999px;
   margin: 8px;
   position: absolute;
}

.event {
   position: absolute;
   margin-left: 16px;
   margin-top: 32px;
   opacity: 0;
   transition: opacity 0.25s ease-in, margin-top 0.25s ease-out;
}

.event-bottom {
   margin-top: 0px;
}

.event-line {
   position: absolute;
   width: 1px;
   height: 104px;
   background-color: #FFF;
   bottom: 0;
}

.event-bottom .event-line {
   bottom: auto;
   top: 0;
}

.event h4 {
   position: absolute;
   letter-spacing: normal;
   width: 260px;
   bottom: 32px;
   margin-left: -130px;
}

.event-bottom h4 {
   bottom: auto;
   top: 32px;
}

.event span.big-button {
   background-color: #000;
   color: #FFF;
   margin: auto;
}

@media (hover: hover) {
   .timeline-event-link span.big-button:hover {
      background-color: #669A41;
      cursor: pointer;
   }
}

.timeline-event-link span.big-button:active {
   background-color: #FFF !important;
   color: #000;
}

.event img {
   position: absolute;
   width: 240px;
   bottom: 104px;
   margin-left: -120px;
}

.event-bottom img {
   bottom: auto;
   top: 104px;
}

.timeline-event-link img {
   cursor: pointer;
}

#timeline-nav {
   position: absolute;
   bottom: 12px;
   left: 50%;
   margin-left: -72px;
}

#timeline-nav a {
   padding: 12px;
   display: inline-block;
   transition: opacity 0.15s linear;
}

#timeline-nav a span {
   width: 12px;
   height: 12px;
   background-color: #FFF;
   border-radius: 999px;
   display: block;
}

@media only screen and (max-width: 1366px) {
   .event img {
      width: 220px;
      margin-left: -110px;
   }
}

@media only screen and (max-width: 1194px) {
   #section-5 p {
      display: none;
   }

   .event-line {
      height: 76px;
   }

   .event h4 {
      bottom: 16px;
   }

   .event-bottom h4 {
      top: 16px;
   }

   .event img {
      bottom: 76px;
      width: 200px;
      margin-left: -100px;
   }

   .event-bottom img {
      top: 76px;
   }
}

@media only screen and (max-width: 926px) {
   #section-5 img.section-bg {
      width: auto;
      height: 640px;
   }

   #section-5 .section-wrapper {
      position: absolute;
   }

   #section-5-text {
      width: 75%;
   }

   #section-5-timeline {
      margin-left: 0px;
      left: 75%;
   }
}