<style type=text/css><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->*,<!-- [et_pb_line_break_holder] -->*::before,<!-- [et_pb_line_break_holder] -->*::after {<!-- [et_pb_line_break_holder] --> margin: 0;<!-- [et_pb_line_break_holder] --> padding: 0;<!-- [et_pb_line_break_holder] --> box-sizing: border-box;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->body {<!-- [et_pb_line_break_holder] --> font: normal 16px/1.5 "Helvetica Neue", sans-serif;<!-- [et_pb_line_break_holder] --> background: #456990;<!-- [et_pb_line_break_holder] --> color: #fff;<!-- [et_pb_line_break_holder] --> overflow-x: hidden;<!-- [et_pb_line_break_holder] --> padding-bottom: 50px;<!-- [et_pb_line_break_holder] -->} /* INTRO SECTION<!-- [et_pb_line_break_holder] -->–––––––––––––––––––––––––––––––––––––––––––––––––– */<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.intro {<!-- [et_pb_line_break_holder] --> background: #F45B69;<!-- [et_pb_line_break_holder] --> padding: 100px 0;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.container {<!-- [et_pb_line_break_holder] --> width: 90%;<!-- [et_pb_line_break_holder] --> max-width: 1200px;<!-- [et_pb_line_break_holder] --> margin: 0 auto;<!-- [et_pb_line_break_holder] --> text-align: center;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->h1 {<!-- [et_pb_line_break_holder] --> font-size: 2.5rem;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/* TIMELINE<!-- [et_pb_line_break_holder] -->–––––––––––––––––––––––––––––––––––––––––––––––––– */<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.timeline ul {<!-- [et_pb_line_break_holder] --> background: #456990;<!-- [et_pb_line_break_holder] --> padding: 50px 0;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.timeline ul li {<!-- [et_pb_line_break_holder] --> list-style-type: none;<!-- [et_pb_line_break_holder] --> position: relative;<!-- [et_pb_line_break_holder] --> width: 6px;<!-- [et_pb_line_break_holder] --> margin: 0 auto;<!-- [et_pb_line_break_holder] --> padding-top: 50px;<!-- [et_pb_line_break_holder] --> background: #fff;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.timeline ul li::after {<!-- [et_pb_line_break_holder] --> content: '';<!-- [et_pb_line_break_holder] --> position: absolute;<!-- [et_pb_line_break_holder] --> left: 50%;<!-- [et_pb_line_break_holder] --> bottom: 0;<!-- [et_pb_line_break_holder] --> transform: translateX(-50%);<!-- [et_pb_line_break_holder] --> width: 30px;<!-- [et_pb_line_break_holder] --> height: 30px;<!-- [et_pb_line_break_holder] --> border-radius: 50%;<!-- [et_pb_line_break_holder] --> background: inherit;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.timeline ul li div {<!-- [et_pb_line_break_holder] --> position: relative;<!-- [et_pb_line_break_holder] --> bottom: 0;<!-- [et_pb_line_break_holder] --> width: 400px;<!-- [et_pb_line_break_holder] --> padding: 15px;<!-- [et_pb_line_break_holder] --> background: #F45B69;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.timeline ul li div::before {<!-- [et_pb_line_break_holder] --> content: '';<!-- [et_pb_line_break_holder] --> position: absolute;<!-- [et_pb_line_break_holder] --> bottom: 7px;<!-- [et_pb_line_break_holder] --> width: 0;<!-- [et_pb_line_break_holder] --> height: 0;<!-- [et_pb_line_break_holder] --> border-style: solid;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.timeline ul li:nth-child(odd) div {<!-- [et_pb_line_break_holder] --> left: 45px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.timeline ul li:nth-child(odd) div::before {<!-- [et_pb_line_break_holder] --> left: -15px;<!-- [et_pb_line_break_holder] --> border-width: 8px 16px 8px 0;<!-- [et_pb_line_break_holder] --> border-color: transparent #F45B69 transparent transparent;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.timeline ul li:nth-child(even) div {<!-- [et_pb_line_break_holder] --> left: -439px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.timeline ul li:nth-child(even) div::before {<!-- [et_pb_line_break_holder] --> right: -15px;<!-- [et_pb_line_break_holder] --> border-width: 8px 0 8px 16px;<!-- [et_pb_line_break_holder] --> border-color: transparent transparent transparent #F45B69;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->time {<!-- [et_pb_line_break_holder] --> display: block;<!-- [et_pb_line_break_holder] --> font-size: 1.2rem;<!-- [et_pb_line_break_holder] --> font-weight: bold;<!-- [et_pb_line_break_holder] --> margin-bottom: 8px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/* EFFECTS<!-- [et_pb_line_break_holder] -->–––––––––––––––––––––––––––––––––––––––––––––––––– */<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.timeline ul li::after {<!-- [et_pb_line_break_holder] --> transition: background .5s ease-in-out;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.timeline ul li.in-view::after {<!-- [et_pb_line_break_holder] --> background: #F45B69;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.timeline ul li div {<!-- [et_pb_line_break_holder] --> visibility: hidden;<!-- [et_pb_line_break_holder] --> opacity: 0;<!-- [et_pb_line_break_holder] --> transition: all .5s ease-in-out;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.timeline ul li:nth-child(odd) div {<!-- [et_pb_line_break_holder] --> transform: translate3d(200px, 0, 0);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.timeline ul li:nth-child(even) div {<!-- [et_pb_line_break_holder] --> transform: translate3d(-200px, 0, 0);<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->.timeline ul li.in-view div {<!-- [et_pb_line_break_holder] --> transform: none;<!-- [et_pb_line_break_holder] --> visibility: visible;<!-- [et_pb_line_break_holder] --> opacity: 1;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->/* GENERAL MEDIA QUERIES<!-- [et_pb_line_break_holder] -->–––––––––––––––––––––––––––––––––––––––––––––––––– */<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->@media screen and (max-width: 900px) {<!-- [et_pb_line_break_holder] --> .timeline ul li div {<!-- [et_pb_line_break_holder] --> width: 250px;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> .timeline ul li:nth-child(even) div {<!-- [et_pb_line_break_holder] --> left: -289px;<!-- [et_pb_line_break_holder] --> /*250+45-6*/<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->@media screen and (max-width: 600px) {<!-- [et_pb_line_break_holder] --> .timeline ul li {<!-- [et_pb_line_break_holder] --> margin-left: 20px;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> .timeline ul li div {<!-- [et_pb_line_break_holder] --> width: calc(100vw - 91px);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> .timeline ul li:nth-child(even) div {<!-- [et_pb_line_break_holder] --> left: 45px;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> .timeline ul li:nth-child(even) div::before {<!-- [et_pb_line_break_holder] --> left: -15px;<!-- [et_pb_line_break_holder] --> border-width: 8px 16px 8px 0;<!-- [et_pb_line_break_holder] --> border-color: transparent #F45B69 transparent transparent;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --></style>
<script type="text/javascript"><!-- [et_pb_line_break_holder] -->jQuery(function($){<!-- [et_pb_line_break_holder] --> (function() {<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> 'use strict';<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // define variables<!-- [et_pb_line_break_holder] --> var items = document.querySelectorAll(".timeline li");<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // check if an element is in viewport<!-- [et_pb_line_break_holder] --> // https://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport<!-- [et_pb_line_break_holder] --> function isElementInViewport(el) {<!-- [et_pb_line_break_holder] --> var rect = el.getBoundingClientRect();<!-- [et_pb_line_break_holder] --> return (<!-- [et_pb_line_break_holder] --> rect.top >= 0 &&<!-- [et_pb_line_break_holder] --> rect.left >= 0 &&<!-- [et_pb_line_break_holder] --> rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&<!-- [et_pb_line_break_holder] --> rect.right <= (window.innerWidth || document.documentElement.clientWidth)<!-- [et_pb_line_break_holder] --> );<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> function callbackFunc() {<!-- [et_pb_line_break_holder] --> for (var i = 0; i < items.length; i++) {<!-- [et_pb_line_break_holder] --> if (isElementInViewport(items[i])) {<!-- [et_pb_line_break_holder] --> items[i].classList.add("in-view");<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // listen for events<!-- [et_pb_line_break_holder] --> window.addEventListener("load", callbackFunc);<!-- [et_pb_line_break_holder] --> window.addEventListener("resize", callbackFunc);<!-- [et_pb_line_break_holder] --> window.addEventListener("scroll", callbackFunc);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->})();<!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] --></script>
Vertical Timeline ↓
-
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
-
Proin quam velit, efficitur vel neque vitae, rhoncus commodo mi. Suspendisse finibus mauris et bibendum molestie. Aenean ex augue, varius et pulvinar in, pretium non nisi.
-
Proin iaculis, nibh eget efficitur varius, libero tellus porta dolor, at pulvinar tortor ex eget ligula. Integer eu dapibus arcu, sit amet sollicitudin eros.
-
In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
-
In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
-
In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
-
In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
-
Aenean condimentum odio a bibendum rhoncus. Ut mauris felis, volutpat eget porta faucibus, euismod quis ante.
-
Vestibulum porttitor lorem sed pharetra dignissim. Nulla maximus, dui a tristique iaculis, quam dolor convallis enim, non dignissim ligula ipsum a turpis.
-
In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
-
In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.
-
In mattis elit vitae odio posuere, nec maximus massa varius. Suspendisse varius volutpat mattis. Vestibulum id magna est.