*,
*::after,
*::before {
  box-sizing: border-box
}

html {
  font-size: 62.5%
}

body {
  font-size       : 1.6rem;
  font-family     : fira sans, sans-serif;
  color           : #383838;
  background-color: #f8f8f8
}

a {
  color          : #d80e3e;
  text-decoration: none
}

.cd-horizontal-timeline {
  opacity           : 0;
  margin            : 2em auto;
  -webkit-transition: opacity .2s;
  -moz-transition   : opacity .2s;
  transition        : opacity .2s
}

.cd-horizontal-timeline::before {
  content: 'mobile';
  display: none
}

.cd-horizontal-timeline.loaded {
  opacity: 1
}

.cd-horizontal-timeline .timeline {
  position: relative;
  height  : 100px;
  width   : 90%;
  margin  : 0 auto
}

.cd-horizontal-timeline .events-wrapper {
  position: relative;
  height  : 100%;
  margin  : 0 40px;
  overflow: hidden
}

/* .cd-horizontal-timeline .events-wrapper::after,
.cd-horizontal-timeline .events-wrapper::before {
  content : '';
  position: absolute;
  z-index : 2;
  top     : 0;
  height  : 100%;
  width   : 20px
} */

.cd-horizontal-timeline .events-wrapper::before {
  left            : 0;
  background-image: -webkit-linear-gradient(left, #f8f8f8, rgba(248, 248, 248, 0));
  background-image: linear-gradient(to right, #f8f8f8, rgba(248, 248, 248, 0))
}

.cd-horizontal-timeline .events-wrapper::after {
  right           : 0;
  background-image: -webkit-linear-gradient(right, #f8f8f8, rgba(248, 248, 248, 0));
  background-image: linear-gradient(to left, #f8f8f8, rgba(248, 248, 248, 0))
}

.cd-horizontal-timeline .events {
  position          : absolute;
  z-index           : 1;
  left              : 0;
  top               : 49px;
  height            : 2px;
  background        : #757575;
  -webkit-transition: -webkit-transform .4s;
  -moz-transition   : -moz-transform .4s;
  transition        : transform .4s
}

.cd-horizontal-timeline .filling-line {
  position                : absolute;
  z-index                 : 1;
  left                    : 0;
  top                     : 0;
  height                  : 100%;
  width                   : 100%;
  background-color        : #d80e3e;
  -webkit-transform       : scaleX(0);
  -moz-transform          : scaleX(0);
  -ms-transform           : scaleX(0);
  -o-transform            : scaleX(0);
  transform               : scaleX(0);
  -webkit-transform-origin: left center;
  -moz-transform-origin   : left center;
  -ms-transform-origin    : left center;
  -o-transform-origin     : left center;
  transform-origin        : left center;
  -webkit-transition      : -webkit-transform .3s;
  -moz-transition         : -moz-transform .3s;
  transition              : transform .3s
}

.cd-horizontal-timeline .events a {
  position         : absolute;
  bottom           : 0;
  z-index          : 2;
  text-align       : center;
  font-size        : 1.6rem;
  padding-bottom   : 15px;
  color            : #383838;
  -webkit-transform: translateZ(0);
  -moz-transform   : translateZ(0);
  -ms-transform    : translateZ(0);
  -o-transform     : translateZ(0);
  transform        : translateZ(0)
}

.cd-horizontal-timeline .events a::after {
  content           : '';
  position          : absolute;
  left              : 50%;
  right             : auto;
  -webkit-transform : translateX(-50%);
  -moz-transform    : translateX(-50%);
  -ms-transform     : translateX(-50%);
  -o-transform      : translateX(-50%);
  transform         : translateX(-50%);
  bottom            : -5px;
  height            : 12px;
  width             : 12px;
  border-radius     : 50%;
  border            : 2px solid #757575;
  background-color  : #f8f8f8;
  -webkit-transition: background-color .3s, border-color .3s;
  -moz-transition   : background-color .3s, border-color .3s;
  transition        : background-color .3s, border-color .3s
}

.no-touch .cd-horizontal-timeline .events a:hover::after {
  background-color: #d80e3e;
  border-color    : #d80e3e
}

.cd-horizontal-timeline .events a.selected {
  pointer-events: none
}

.cd-horizontal-timeline .events a.selected::after {
  background-color: #d80e3e;
  border-color    : #d80e3e
}

.cd-horizontal-timeline .events a.older-event::after {
  border-color: #d80e3e
}

@media only screen and (min-width:1100px) {
  .cd-horizontal-timeline {
    margin: 6em auto
  }

  .cd-horizontal-timeline::before {
    content: 'desktop'
  }
}

.cd-timeline-navigation a {
  position          : absolute;
  z-index           : 1;
  top               : 50%;
  bottom            : auto;
  -webkit-transform : translateY(-50%);
  -moz-transform    : translateY(-50%);
  -ms-transform     : translateY(-50%);
  -o-transform      : translateY(-50%);
  transform         : translateY(-50%);
  height            : 34px;
  width             : 34px;
  border-radius     : 50%;
  border            : 2px solid #757575;
  overflow          : hidden;
  color             : transparent;
  text-indent       : 100%;
  white-space       : nowrap;
  -webkit-transition: border-color .3s;
  -moz-transition   : border-color .3s;
  transition        : border-color .3s
}

.cd-timeline-navigation a::after {
  content          : '';
  position         : absolute;
  height           : 16px;
  width            : 16px;
  left             : 50%;
  top              : 50%;
  bottom           : auto;
  right            : auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform   : translateX(-50%) translateY(-50%);
  -ms-transform    : translateX(-50%) translateY(-50%);
  -o-transform     : translateX(-50%) translateY(-50%);
  transform        : translateX(-50%) translateY(-50%);
  background       : url(../images/cd-arrow.svg) no-repeat 0 0;
}

.cd-timeline-navigation a.prev {
  left             : 0;
  -webkit-transform: translateY(-50%) rotate(180deg);
  -moz-transform   : translateY(-50%) rotate(180deg);
  -ms-transform    : translateY(-50%) rotate(180deg);
  -o-transform     : translateY(-50%) rotate(180deg);
  transform        : translateY(-50%) rotate(180deg)
}

.cd-timeline-navigation a.next {
  right: 0
}

.no-touch .cd-timeline-navigation a:hover {
  border-color: #d80e3e
}

.cd-timeline-navigation a.inactive {
  cursor: not-allowed
}

.cd-timeline-navigation a.inactive::after {
  background-position: 0 -16px
}

.no-touch .cd-timeline-navigation a.inactive:hover {
  border-color: #757575
}

.cd-horizontal-timeline .events-content {
  position          : relative;
  width             : 100%;
  margin            : 2em 0;
  overflow          : hidden;
  -webkit-transition: height .4s;
  -moz-transition   : height .4s;
  transition        : height .4s
}

.cd-horizontal-timeline .events-content li {
  position                         : absolute;
  z-index                          : 1;
  width                            : 100%;
  left                             : 0;
  top                              : 0;
  -webkit-transform                : translateX(-100%);
  -moz-transform                   : translateX(-100%);
  -ms-transform                    : translateX(-100%);
  -o-transform                     : translateX(-100%);
  transform                        : translateX(-100%);
  padding                          : 0 5%;
  opacity                          : 0;
  -webkit-animation-duration       : .4s;
  -moz-animation-duration          : .4s;
  animation-duration               : .4s;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function   : ease-in-out;
  animation-timing-function        : ease-in-out
}

.cd-horizontal-timeline .events-content li.selected {
  position         : relative;
  z-index          : 2;
  opacity          : 1;
  -webkit-transform: translateX(0);
  -moz-transform   : translateX(0);
  -ms-transform    : translateX(0);
  -o-transform     : translateX(0);
  transform        : translateX(0)
}

.cd-horizontal-timeline .events-content li.enter-right,
.cd-horizontal-timeline .events-content li.leave-right {
  -webkit-animation-name: cd-enter-right;
  -moz-animation-name   : cd-enter-right;
  animation-name        : cd-enter-right
}

.cd-horizontal-timeline .events-content li.enter-left,
.cd-horizontal-timeline .events-content li.leave-left {
  -webkit-animation-name: cd-enter-left;
  -moz-animation-name   : cd-enter-left;
  animation-name        : cd-enter-left
}

.cd-horizontal-timeline .events-content li.leave-right,
.cd-horizontal-timeline .events-content li.leave-left {
  -webkit-animation-direction: reverse;
  -moz-animation-direction   : reverse;
  animation-direction        : reverse
}

.cd-horizontal-timeline .events-content li>* {
  max-width: 800px;
  margin   : 0 auto
}

.cd-horizontal-timeline .events-content h2 {
  font-size    : 24px;
  margin-bottom: 25px;
}

.cd-horizontal-timeline .events-content em {
  display  : block;
  font-size: 16px;
  color    : #666666;
}

.cd-horizontal-timeline .events-content p {
  font-size: 16px;
  color    : #666666;
}

.cd-horizontal-timeline .events-content em,
.cd-horizontal-timeline .events-content p {
  line-height: 1.6
}

@media only screen and (min-width:768px) {

  .cd-horizontal-timeline .events-content em {
    font-size: 2rem
  }

  .cd-horizontal-timeline .events-content p {
    font-size: 1.8rem
  }
}

@-webkit-keyframes cd-enter-right {
  0% {
    opacity          : 0;
    -webkit-transform: translateX(100%)
  }

  100% {
    opacity          : 1;
    -webkit-transform: translateX(0%)
  }
}

@-moz-keyframes cd-enter-right {
  0% {
    opacity       : 0;
    -moz-transform: translateX(100%)
  }

  100% {
    opacity       : 1;
    -moz-transform: translateX(0%)
  }
}

@keyframes cd-enter-right {
  0% {
    opacity          : 0;
    -webkit-transform: translateX(100%);
    -moz-transform   : translateX(100%);
    -ms-transform    : translateX(100%);
    -o-transform     : translateX(100%);
    transform        : translateX(100%)
  }

  100% {
    opacity          : 1;
    -webkit-transform: translateX(0%);
    -moz-transform   : translateX(0%);
    -ms-transform    : translateX(0%);
    -o-transform     : translateX(0%);
    transform        : translateX(0%)
  }
}

@-webkit-keyframes cd-enter-left {
  0% {
    opacity          : 0;
    -webkit-transform: translateX(-100%)
  }

  100% {
    opacity          : 1;
    -webkit-transform: translateX(0%)
  }
}

@-moz-keyframes cd-enter-left {
  0% {
    opacity       : 0;
    -moz-transform: translateX(-100%)
  }

  100% {
    opacity       : 1;
    -moz-transform: translateX(0%)
  }
}

@keyframes cd-enter-left {
  0% {
    opacity          : 0;
    -webkit-transform: translateX(-100%);
    -moz-transform   : translateX(-100%);
    -ms-transform    : translateX(-100%);
    -o-transform     : translateX(-100%);
    transform        : translateX(-100%)
  }

  100% {
    opacity          : 1;
    -webkit-transform: translateX(0%);
    -moz-transform   : translateX(0%);
    -ms-transform    : translateX(0%);
    -o-transform     : translateX(0%);
    transform        : translateX(0%)
  }
}