* {

  margin: 0;

  padding: 0;

}



.columns {

  padding: 0;

}



.timestep {

  height: auto;

  width: 100%;

  padding: 0 20px;

}

.timestep h4, .timestep p, .timestep div {

  font-family: 'Open Sans', sans-serif;

}

.timestep .dotted-lines {

  margin: 0 auto;

  width: 100%;

  transform: scaleY(0);

  transform-origin: top;

  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkViZW5lXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzQgMzQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDM0IDM0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0ZGRkZGRjt9LnN0MXtmaWxsOiM1NTU1NTU7fTwvc3R5bGU+PGcgaWQ9IkViZW5lXzFfS29waWUiPjx0aXRsZT5kb3Q8L3RpdGxlPjxnIGlkPSJFYmVuZV8yXzJfIj48ZyBpZD0iRWJlbmVfMS0yXzFfIj48Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIxNyIgY3k9IjE3IiByPSIxNyIvPjwvZz48L2c+PC9nPjxnIGlkPSJFYmVuZV8xXzFfIj48dGl0bGU+ZG90PC90aXRsZT48ZyBpZD0iRWJlbmVfMl8xXyI+PGcgaWQ9IkViZW5lXzEtMiI+PGNpcmNsZSBjbGFzcz0ic3QxIiBjeD0iMTciIGN5PSIxNyIgcj0iOC41Ii8+PC9nPjwvZz48L2c+PC9zdmc+);

  background-size: 7px;

  background-repeat: repeat-y;

  background-position: top center;

}

.timestep .left {

  margin: 0 auto;

  max-width: 920px;

}

.timestep .left .content--inner {

  display: flex;

  flex-direction: row;

}

.timestep .left .content--inner .left-half {

  width: 90%;

  opacity: 0;

}

.timestep .left .content--inner .left-half img {

  image-rendering: -webkit-optimize-contrast;

  margin: 0 0 15px 0;

}

.timestep .left .content--inner .left-half h4 {

  text-align: justify;

  font-size: 20px;

  font-weight: bold;

  margin: 0 0 15px 0;

}

.timestep .left .content--inner .left-half p {

  margin-bottom: 0;

  text-align: justify;

  font-size: 15px;

}

.timestep .left .content--inner .right-half {

  position: relative;

  margin: 0 0 0 15px;

  width: 10%;

}

.timestep .left .content--inner .right-half .line-horizontal {

  position: absolute;

  top: 0;

  width: 100%;

  transform: scaleX(0);

  height: 3px;

  background-color: #ef7800;

  transform-origin: right;

}

.timestep .left .content--inner .right-half .line-vertical {

  position: absolute;

  left: 0;

  height: 100%;

  width: 3px;

  transform: scaleY(0);

  background-color: #ef7800;

  transform-origin: top;

}

.timestep .left .content--timeline .year {

  display: flex;

  justify-content: center;

  align-items: center;

  opacity: 0;

  margin: 0 auto;

  max-width: 6em;

  max-height: 6em;

  border: 4px solid white;

  border-radius: 100%;

  background-color: #ef7800;

}

.timestep .left .content--timeline .year h4 {

  margin: 0;

  padding: 0;

  font-size: auto;

  font-weight: bold;

  color: #fff;

}

.timestep .right {

  margin: 0 auto;

  max-width: 920px;

}

.timestep .right .content--inner {

  display: flex;

  flex-direction: row;

}

.timestep .right .content--inner .left-half {

  width: 90%;

  opacity: 0;

}

.timestep .right .content--inner .left-half img {

  image-rendering: -webkit-optimize-contrast;

  margin: 0 0 15px 0;

}

.timestep .right .content--inner .left-half h4 {

  text-align: justify;

  font-size: 20px;

  font-weight: bold;

  margin: 0 0 15px 0;

}

.timestep .right .content--inner .left-half p {

  margin-bottom: 0;

  text-align: justify;

  font-size: 15px;

}

.timestep .right .content--inner .right-half {

  position: relative;

  margin: 0 15px 0 0;

  width: 10%;

}

.timestep .right .content--inner .right-half .line-horizontal {

  position: absolute;

  top: 0;

  width: 100%;

  transform: scaleX(0);

  height: 3px;

  background-color: #ef7800;

  transform-origin: left;

}

.timestep .right .content--inner .right-half .line-vertical {

  position: absolute;

  right: 0;

  height: 100%;

  width: 3px;

  transform: scaleY(0);

  background-color: #ef7800;

  transform-origin: top;

}

.timestep .right .content--timeline .year {

  display: flex;

  justify-content: center;

  align-items: center;

  opacity: 0;

  margin: 0 auto;

  max-width: 6em;

  max-height: 6em;

  border: 4px solid white;

  border-radius: 100%;

  background-color: #ef7800;

}

.timestep .right .content--timeline .year h4 {

  margin: 0;

  padding: 0;

  font-size: auto;

  font-weight: bold;

  color: #fff;

}



.animate-1 {

  animation-name: popup;

  animation-duration: 400ms;

  animation-delay: 500ms;

  animation-fill-mode: forwards;

}



.animate-2-left {

  animation-name: animateToLeft;

  animation-duration: 1000ms;

  animation-delay: 400ms;

  animation-fill-mode: forwards;

}



.animate-2-right {

  animation-name: animateToRight;

  animation-duration: 1000ms;

  animation-delay: 400ms;

  animation-fill-mode: forwards;

}



.animate-3 {

  animation-name: animateToBottom;

  animation-duration: 1000ms;

  animation-delay: 1400ms;

  animation-fill-mode: forwards;

}



.animate-4-left {

  animation-name: fadeInToLeft;

  animation-duration: 500ms;

  animation-delay: 2400ms;

  animation-fill-mode: forwards;

}



.animate-4-right {

  animation-name: fadeInToRight;

  animation-duration: 500ms;

  animation-delay: 2400ms;

  animation-fill-mode: forwards;

}



@keyframes animateToLeft {

  from {

    transform: scaleX(0);

  }

  to {

    transform: scaleX(1);

  }

}

@keyframes animateToRight {

  from {

    transform: scaleX(0);

  }

  to {

    transform: scaleX(1);

  }

}

@keyframes animateToBottom {

  from {

    transform: scaleY(0);

  }

  to {

    transform: scaleY(1);

  }

}

@keyframes popup {

  0% {

    opacity: 0;

    transform: scale(0.7);

  }

  90% {

    opacity: 1;

    transform: scale(1.05);

  }

  100% {

    opacity: 1;

    transform: scale(1);

  }

}

@keyframes fadeInToLeft {

  from {

    transform: translateX(20px);

    opacity: 0;

  }

  to {

    transform: translateX(0);

    opacity: 1;

  }

}

@keyframes fadeInToRight {

  from {

    transform: translateX(-20px);

    opacity: 0;

  }

  to {

    transform: translateX(0);

    opacity: 1;

  }

}

@media screen and (max-width: 39.9375em) {

  .right .content--inner .right-half {

    margin: 0 0 0 15px !important;

    order: 2;

  }

  .right .content--inner .right-half .line-vertical {

    left: 0;

  }

  .right .content--inner .right-half .line-horizontal {

    transform-origin: right !important;

  }

  .right .content--inner .left-half {

    order: 1;

  }

  .right .content--inner .left-half h4 {

    text-align: right !important;

  }

  .right .content--inner .left-half p {

    text-align: right !important;

  }

}