.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: 255px; 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, #e8f6fa, rgba(248, 248, 248, 0)); background-image: linear-gradient(to right, #e8f6fa, rgba(248, 248, 248, 0)); }
.cd-horizontal-timeline .events-wrapper::after { right: 0; background-image: -webkit-linear-gradient( right, #e8f6fa, rgba(248, 248, 248, 0)); background-image: linear-gradient(to left, #e8f6fa, rgba(248, 248, 248, 0)); }
.cd-horizontal-timeline .events { /* this is the grey line/timeline */
  position: absolute; z-index: 1; left: 0; top: 130px; 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: #00A2D2; -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 .filling-line-img { position: relative; transition: left 1s cubic-bezier(0, 0, 0.65, 1.01); -webkit-transition: left 1s cubic-bezier(0, 0, 0.65, 1.01); -moz-transition: left 1s cubic-bezier(0, 0, 0.65, 1.01); -o-transition: left 1s cubic-bezier(0, 0, 0.65, 1.01); margin-left: -42px; top:-120px;}
.cd-horizontal-timeline .events a { position: absolute; bottom: 0; z-index: 2; text-align: center; font-size: 1.3rem; 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: -6px; height: 12px; width: 12px; border-radius: 50%; border: 2px solid #737C80; background-color: #737c80; -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: #00A2D2; border-color: #00A2D2; }
.cd-horizontal-timeline .events a.selected { pointer-events: none; }
.cd-horizontal-timeline .events a.selected::after { background-color: #00A2D2; border-color: #00A2D2; }
.cd-horizontal-timeline .events a.older-event::after { /*border-color: #00A2D2;*/ }
@media only screen and (min-width: 1100px) {
	.cd-horizontal-timeline { margin: 0em 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: 17px; width: 13px; 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(img/carousel-left-arrow.png) no-repeat 0 0; }
.cd-timeline-navigation a.prev { left: 0; -webkit-transform: translateY(-50%) rotate(0deg); -moz-transform: translateY(-50%) rotate(0deg); -ms-transform: translateY(-50%) rotate(0deg); -o-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg); }
.cd-timeline-navigation a.next:after{ background: url(img/carousel-right-arrow.png) no-repeat 0 0; margin-left:3px;}
.cd-timeline-navigation a.next { right: 0; }
.no-touch .cd-timeline-navigation a:hover { border-color: #00A2D2; }
.cd-timeline-navigation a.inactive { cursor: not-allowed; }
.cd-timeline-navigation a.inactive::after { opacity:0.3; }
.no-touch .cd-timeline-navigation a.inactive:hover { border-color: #dfdfdf; }
.cd-horizontal-timeline .events-content { position: relative; width: 100%; margin: -65px 0 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: 90%; 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: 20px; color: #4d4d4f; text-align:center; }
.cd-horizontal-timeline .events-content em, .cd-horizontal-timeline .events-content p { line-height: 1.6; }

 @-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%);
	}
}