/* -------------------------------- Main Components -------------------------------- */ol,li {   list-style-type: none;}.cd-horizontal-timeline {  opacity: 0;  margin: 2em auto;  -webkit-transition: opacity 0.2s;  -moz-transition: opacity 0.2s;  transition: opacity 0.2s;}.cd-horizontal-timeline::before {  /* never visible - this is used in jQuery to check the current MQ */  content: 'mobile';  display: none;}.cd-horizontal-timeline.loaded {  /* show the timeline after events position has been set (using JavaScript) */  opacity: 1;}.cd-horizontal-timeline .timeline {  position: relative;  height: 100px;  width: 90%;  max-width: 800px;  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 {  /* these are used to create a shadow effect at the sides of the timeline */  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 {  /* this is the grey line/timeline */  position: absolute;  z-index: 1;  left: 0;  top: 49px;  height: 2px;  /* width will be set using JavaScript */  background: #dfdfdf;  -webkit-transition: -webkit-transform 0.4s;  -moz-transition: -moz-transform 0.4s;  transition: transform 0.4s;}.cd-horizontal-timeline .filling-line {  /* this is used to create the green line filling the timeline */  position: absolute;  z-index: 1;  left: 0;  top: 0;  height: 100%;  width: 100%;  background-color: #7b9d6f;  -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 0.3s;  -moz-transition: -moz-transform 0.3s;  transition: transform 0.3s;}.cd-horizontal-timeline .events a {  position: absolute;  bottom: 0;  z-index: 2;  text-align: center;  font-size: 1.0rem;  padding-bottom: 15px;  color: #383838;  /* fix bug on Safari - text flickering while timeline translates */  -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 {  /* this is used to create the event spot */  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 #dfdfdf;  background-color: #f8f8f8;  -webkit-transition: background-color 0.3s, border-color 0.3s;  -moz-transition: background-color 0.3s, border-color 0.3s;  transition: background-color 0.3s, border-color 0.3s;}.no-touch .cd-horizontal-timeline .events a:hover::after {  background-color: #7b9d6f;  border-color: #7b9d6f;}.cd-horizontal-timeline .events a.selected {  pointer-events: none;}.cd-horizontal-timeline .events a.selected::after {  background-color: #7b9d6f;  border-color: #7b9d6f;}.cd-horizontal-timeline .events a.older-event::after {  border-color: #7b9d6f;}@media only screen and (min-width: 1100px) {  .cd-horizontal-timeline {    margin: 6em auto;  }  .cd-horizontal-timeline::before {    /* never visible - this is used in jQuery to check the current MQ */    content: 'desktop';  }}.cd-timeline-navigation a {  /* these are the left/right arrows to navigate the timeline */  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 #dfdfdf;  /* replace text with an icon */  overflow: hidden;  color: transparent;  text-indent: 100%;  white-space: nowrap;  -webkit-transition: border-color 0.3s;  -moz-transition: border-color 0.3s;  transition: border-color 0.3s;}.cd-timeline-navigation a::after {  /* arrow icon */  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(../image/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: #7b9d6f;}.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: #dfdfdf;}.cd-horizontal-timeline .events-content {  position: relative;  width: 100%;  margin: 2em 0;  overflow: hidden;  -webkit-transition: height 0.4s;  -moz-transition: height 0.4s;  transition: height 0.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: 0.4s;  -moz-animation-duration: 0.4s;  animation-duration: 0.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 {  /* visible event content */  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-weight: bold;  font-size: 2.6rem;  font-family: "Playfair Display", serif;  font-weight: 700;  line-height: 1.2;}.cd-horizontal-timeline .events-content em {  display: block;  font-style: italic;  margin: 10px auto;}.cd-horizontal-timeline .events-content em::before {  content: '- ';}.cd-horizontal-timeline .events-content p {  font-size: 1.4rem;  color: #959595;}.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 h2 {    font-size: 3rem;  }  .cd-horizontal-timeline .events-content em {    font-size: 1rem;  }  .cd-horizontal-timeline .events-content p {    font-size: 1.0rem;  }}@-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%);  }}