├── assets
    ├── img
    │   └── cd-arrow.svg
    ├── js
    │   ├── swipe-content.js
    │   ├── util.js
    │   └── main.js
    └── css
    │   ├── style.scss
    │   └── style.css
├── README.md
└── index.html


/assets/img/cd-arrow.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="32px" viewBox="0 0 16 32"><g  transform="translate(0, 0)"><polygon fill="#7b9d6f" points="6,13.4 4.6,12 8.6,8 4.6,4 6,2.6 11.4,8 "/></g><g  transform="translate(0, 16)"><polygon fill="#dfdfdf" points="6,13.4 4.6,12 8.6,8 4.6,4 6,2.6 11.4,8 "/></g></svg>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Horizontal Timeline
 2 | 
 3 | An easy to customize, horizontal timeline powered by CSS and JavaScript.
 4 | 
 5 | [Article on CodyHouse](http://codyhouse.co/gem/horizontal-timeline)
 6 | 
 7 | [Demo](https://codyhouse.co/demo/horizontal-timeline)
 8 |  
 9 | [License](https://codyhouse.co/license)
10 | 
11 | ## Dependencies
12 | 
13 | This experiment is built upon the [CodyHouse Framework](https://github.com/CodyHouse/codyhouse-framework).
14 | 
15 | Make sure to include both the style.scss and util.js files of the framework.


--------------------------------------------------------------------------------
/assets/js/swipe-content.js:
--------------------------------------------------------------------------------
  1 | (function() {
  2 | 	// Swipe Content Plugin - by CodyHouse.co
  3 | 	// https://codyhouse.co/ds/components/info/swipe-content
  4 | 	var SwipeContent = function(element) {
  5 | 		this.element = element;
  6 | 		this.delta = [false, false];
  7 | 		this.dragging = false;
  8 | 		this.intervalId = false;
  9 | 		initSwipeContent(this);
 10 | 	};
 11 | 
 12 | 	function initSwipeContent(content) {
 13 | 		content.element.addEventListener('mousedown', handleEvent.bind(content));
 14 | 		content.element.addEventListener('touchstart', handleEvent.bind(content));
 15 | 	};
 16 | 
 17 | 	function initDragging(content) {
 18 | 		//add event listeners
 19 | 		content.element.addEventListener('mousemove', handleEvent.bind(content));
 20 | 		content.element.addEventListener('touchmove', handleEvent.bind(content));
 21 | 		content.element.addEventListener('mouseup', handleEvent.bind(content));
 22 | 		content.element.addEventListener('mouseleave', handleEvent.bind(content));
 23 | 		content.element.addEventListener('touchend', handleEvent.bind(content));
 24 | 	};
 25 | 
 26 | 	function cancelDragging(content) {
 27 | 		//remove event listeners
 28 | 		if(content.intervalId) {
 29 | 			(!window.requestAnimationFrame) ? clearInterval(content.intervalId) : window.cancelAnimationFrame(content.intervalId);
 30 | 			content.intervalId = false;
 31 | 		}
 32 | 		content.element.removeEventListener('mousemove', handleEvent.bind(content));
 33 | 		content.element.removeEventListener('touchmove', handleEvent.bind(content));
 34 | 		content.element.removeEventListener('mouseup', handleEvent.bind(content));
 35 | 		content.element.removeEventListener('mouseleave', handleEvent.bind(content));
 36 | 		content.element.removeEventListener('touchend', handleEvent.bind(content));
 37 | 	};
 38 | 
 39 | 	function handleEvent(event) {
 40 | 		switch(event.type) {
 41 | 			case 'mousedown':
 42 | 			case 'touchstart':
 43 | 				startDrag(this, event);
 44 | 				break;
 45 | 			case 'mousemove':
 46 | 			case 'touchmove':
 47 | 				drag(this, event);
 48 | 				break;
 49 | 			case 'mouseup':
 50 | 			case 'mouseleave':
 51 | 			case 'touchend':
 52 | 				endDrag(this, event);
 53 | 				break;
 54 | 		}
 55 | 	};
 56 | 
 57 | 	function startDrag(content, event) {
 58 | 		content.dragging = true;
 59 | 		// listen to drag movements
 60 | 		initDragging(content);
 61 | 		content.delta = [parseInt(unify(event).clientX), parseInt(unify(event).clientY)];
 62 | 		// emit drag start event
 63 | 		emitSwipeEvents(content, 'dragStart', content.delta);
 64 | 	};
 65 | 
 66 | 	function endDrag(content, event) {
 67 | 		cancelDragging(content);
 68 | 		// credits: https://css-tricks.com/simple-swipe-with-vanilla-javascript/
 69 | 		var dx = parseInt(unify(event).clientX), 
 70 | 	    dy = parseInt(unify(event).clientY);
 71 | 	  
 72 | 	  // check if there was a left/right swipe
 73 | 		if(content.delta && (content.delta[0] || content.delta[0] === 0)) {
 74 | 	    var s = Math.sign(dx - content.delta[0]);
 75 | 			
 76 | 			if(Math.abs(dx - content.delta[0]) > 30) {
 77 | 				(s < 0) ? emitSwipeEvents(content, 'swipeLeft', [dx, dy]) : emitSwipeEvents(content, 'swipeRight', [dx, dy]);	
 78 | 			}
 79 | 	    
 80 | 	    content.delta[0] = false;
 81 | 	  }
 82 | 		// check if there was a top/bottom swipe
 83 | 	  if(content.delta && (content.delta[1] || content.delta[1] === 0)) {
 84 | 	  	var y = Math.sign(dy - content.delta[1]);
 85 | 
 86 | 	  	if(Math.abs(dy - content.delta[1]) > 30) {
 87 | 	    	(y < 0) ? emitSwipeEvents(content, 'swipeUp', [dx, dy]) : emitSwipeEvents(content, 'swipeDown', [dx, dy]);
 88 | 	    }
 89 | 
 90 | 	    content.delta[1] = false;
 91 | 	  }
 92 | 		// emit drag end event
 93 | 	  emitSwipeEvents(content, 'dragEnd', [dx, dy]);
 94 | 	  content.dragging = false;
 95 | 	};
 96 | 
 97 | 	function drag(content, event) {
 98 | 		if(!content.dragging) return;
 99 | 		// emit dragging event with coordinates
100 | 		(!window.requestAnimationFrame) 
101 | 			? content.intervalId = setTimeout(function(){emitDrag.bind(content, event);}, 250) 
102 | 			: content.intervalId = window.requestAnimationFrame(emitDrag.bind(content, event));
103 | 	};
104 | 
105 | 	function emitDrag(event) {
106 | 		emitSwipeEvents(this, 'dragging', [parseInt(unify(event).clientX), parseInt(unify(event).clientY)]);
107 | 	};
108 | 
109 | 	function unify(event) { 
110 | 		// unify mouse and touch events
111 | 		return event.changedTouches ? event.changedTouches[0] : event; 
112 | 	};
113 | 
114 | 	function emitSwipeEvents(content, eventName, detail) {
115 | 		// emit event with coordinates
116 | 		var event = new CustomEvent(eventName, {detail: {x: detail[0], y: detail[1]}});
117 | 		content.element.dispatchEvent(event);
118 | 	};
119 | 
120 | 	window.SwipeContent = SwipeContent;
121 | 	
122 | 	//initialize the SwipeContent objects
123 | 	var swipe = document.getElementsByClassName('js-swipe-content');
124 | 	if( swipe.length > 0 ) {
125 | 		for( var i = 0; i < swipe.length; i++) {
126 | 			(function(i){new SwipeContent(swipe[i]);})(i);
127 | 		}
128 | 	}
129 | }());


--------------------------------------------------------------------------------
/assets/js/util.js:
--------------------------------------------------------------------------------
  1 | // Utility function
  2 | function Util () {};
  3 | 
  4 | /* 
  5 | 	class manipulation functions
  6 | */
  7 | Util.hasClass = function(el, className) {
  8 | 	if (el.classList) return el.classList.contains(className);
  9 | 	else return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
 10 | };
 11 | 
 12 | Util.addClass = function(el, className) {
 13 | 	var classList = className.split(' ');
 14 |  	if (el.classList) el.classList.add(classList[0]);
 15 |  	else if (!Util.hasClass(el, classList[0])) el.className += " " + classList[0];
 16 |  	if (classList.length > 1) Util.addClass(el, classList.slice(1).join(' '));
 17 | };
 18 | 
 19 | Util.removeClass = function(el, className) {
 20 | 	var classList = className.split(' ');
 21 | 	if (el.classList) el.classList.remove(classList[0]);	
 22 | 	else if(Util.hasClass(el, classList[0])) {
 23 | 		var reg = new RegExp('(\\s|^)' + classList[0] + '(\\s|$)');
 24 | 		el.className=el.className.replace(reg, ' ');
 25 | 	}
 26 | 	if (classList.length > 1) Util.removeClass(el, classList.slice(1).join(' '));
 27 | };
 28 | 
 29 | Util.toggleClass = function(el, className, bool) {
 30 | 	if(bool) Util.addClass(el, className);
 31 | 	else Util.removeClass(el, className);
 32 | };
 33 | 
 34 | Util.setAttributes = function(el, attrs) {
 35 |   for(var key in attrs) {
 36 |     el.setAttribute(key, attrs[key]);
 37 |   }
 38 | };
 39 | 
 40 | /* 
 41 |   DOM manipulation
 42 | */
 43 | Util.getChildrenByClassName = function(el, className) {
 44 |   var children = el.children,
 45 |     childrenByClass = [];
 46 |   for (var i = 0; i < el.children.length; i++) {
 47 |     if (Util.hasClass(el.children[i], className)) childrenByClass.push(el.children[i]);
 48 |   }
 49 |   return childrenByClass;
 50 | };
 51 | 
 52 | /* 
 53 | 	Animate height of an element
 54 | */
 55 | Util.setHeight = function(start, to, element, duration, cb) {
 56 | 	var change = to - start,
 57 | 	    currentTime = null;
 58 | 
 59 |   var animateHeight = function(timestamp){  
 60 |     if (!currentTime) currentTime = timestamp;         
 61 |     var progress = timestamp - currentTime;
 62 |     var val = parseInt((progress/duration)*change + start);
 63 |     element.setAttribute("style", "height:"+val+"px;");
 64 |     if(progress < duration) {
 65 |         window.requestAnimationFrame(animateHeight);
 66 |     } else {
 67 |     	cb();
 68 |     }
 69 |   };
 70 |   
 71 |   //set the height of the element before starting animation -> fix bug on Safari
 72 |   element.setAttribute("style", "height:"+start+"px;");
 73 |   window.requestAnimationFrame(animateHeight);
 74 | };
 75 | 
 76 | /* 
 77 | 	Smooth Scroll
 78 | */
 79 | 
 80 | Util.scrollTo = function(final, duration, cb) {
 81 |   var start = window.scrollY || document.documentElement.scrollTop,
 82 |       currentTime = null;
 83 |       
 84 |   var animateScroll = function(timestamp){
 85 |   	if (!currentTime) currentTime = timestamp;        
 86 |     var progress = timestamp - currentTime;
 87 |     if(progress > duration) progress = duration;
 88 |     var val = Math.easeInOutQuad(progress, start, final-start, duration);
 89 |     window.scrollTo(0, val);
 90 |     if(progress < duration) {
 91 |         window.requestAnimationFrame(animateScroll);
 92 |     } else {
 93 |       cb && cb();
 94 |     }
 95 |   };
 96 | 
 97 |   window.requestAnimationFrame(animateScroll);
 98 | };
 99 | 
100 | /* 
101 |   Focus utility classes
102 | */
103 | 
104 | //Move focus to an element
105 | Util.moveFocus = function (element) {
106 |   if( !element ) element = document.getElementsByTagName("body")[0];
107 |   element.focus();
108 |   if (document.activeElement !== element) {
109 |     element.setAttribute('tabindex','-1');
110 |     element.focus();
111 |   }
112 | };
113 | 
114 | /* 
115 |   Misc
116 | */
117 | 
118 | Util.getIndexInArray = function(array, el) {
119 |   return Array.prototype.indexOf.call(array, el);
120 | };
121 | 
122 | Util.cssSupports = function(property, value) {
123 |   if('CSS' in window) {
124 |     return CSS.supports(property, value);
125 |   } else {
126 |     var jsProperty = property.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase();});
127 |     return jsProperty in document.body.style;
128 |   }
129 | };
130 | 
131 | /* 
132 | 	Polyfills
133 | */
134 | //Closest() method
135 | if (!Element.prototype.matches) {
136 | 	Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
137 | }
138 | 
139 | if (!Element.prototype.closest) {
140 | 	Element.prototype.closest = function(s) {
141 | 		var el = this;
142 | 		if (!document.documentElement.contains(el)) return null;
143 | 		do {
144 | 			if (el.matches(s)) return el;
145 | 			el = el.parentElement || el.parentNode;
146 | 		} while (el !== null && el.nodeType === 1); 
147 | 		return null;
148 | 	};
149 | }
150 | 
151 | //Custom Event() constructor
152 | if ( typeof window.CustomEvent !== "function" ) {
153 | 
154 |   function CustomEvent ( event, params ) {
155 |     params = params || { bubbles: false, cancelable: false, detail: undefined };
156 |     var evt = document.createEvent( 'CustomEvent' );
157 |     evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
158 |     return evt;
159 |    }
160 | 
161 |   CustomEvent.prototype = window.Event.prototype;
162 | 
163 |   window.CustomEvent = CustomEvent;
164 | }
165 | 
166 | /* 
167 | 	Animation curves
168 | */
169 | Math.easeInOutQuad = function (t, b, c, d) {
170 | 	t /= d/2;
171 | 	if (t < 1) return c/2*t*t + b;
172 | 	t--;
173 | 	return -c/2 * (t*(t-2) - 1) + b;
174 | };


--------------------------------------------------------------------------------
/assets/css/style.scss:
--------------------------------------------------------------------------------
  1 | @import '../../../../codyhouse-framework/main/assets/css/style.scss'; // ⚠️ make sure to import the CodyHouse framework
  2 | @import url('https://fonts.googleapis.com/css?family=Playfair+Display:700,900|Fira+Sans:400,400italic'); // custom font
  3 | 
  4 | // --------------------------------
  5 | 
  6 | // Horizontal Timeline - by CodyHouse.co
  7 | 
  8 | // --------------------------------
  9 | 
 10 | :root {
 11 |   // colors
 12 |   @include defineColorHSL(--cd-color-1, 0, 0%, 22%);   // Mine Shaft
 13 |   @include defineColorHSL(--cd-color-2, 74, 93%, 32%); // Highland
 14 |   @include defineColorHSL(--cd-color-3, 0, 0%, 97%);   // Alabaster
 15 | 
 16 |   // font
 17 |   --font-primary: 'Fira Sans', sans-serif;
 18 |   --font-secondary: 'Playfair Display', serif;
 19 | }
 20 | 
 21 | body {
 22 |   color: var(--cd-color-1);
 23 |   background-color: var(--cd-color-3);
 24 | }
 25 | 
 26 | 
 27 | .js {
 28 |   .cd-h-timeline {
 29 |     opacity: 0;
 30 |     transition: opacity 0.2s;
 31 |   }
 32 | 
 33 |   .cd-h-timeline--loaded { // show the timeline after dates position has been set (using JavaScript)
 34 |     opacity: 1;
 35 |   }
 36 | 
 37 |   .cd-h-timeline__container {
 38 |     position: relative;
 39 |     height: 100px;
 40 |     max-width: 800px;
 41 |   }
 42 | 
 43 |   .cd-h-timeline__dates {
 44 |     position: relative;
 45 |     height: 100%;
 46 |     margin: 0 40px;
 47 |     overflow: hidden;
 48 | 
 49 |     &::after, &::before { // these are used to create a shadow effect at the sides of the timeline
 50 |       content: '';
 51 |       position: absolute;
 52 |       z-index: 2;
 53 |       top: 0;
 54 |       height: 100%;
 55 |       width: 20px;
 56 |     }
 57 | 
 58 |     &::before {
 59 |       left: 0;
 60 |       background: linear-gradient(to right, var(--cd-color-3), alpha(var(--cd-color-3), 0));
 61 |     }
 62 | 
 63 |     &::after {
 64 |       right: 0;
 65 |       background: linear-gradient(to left, var(--cd-color-3), alpha(var(--cd-color-3), 0));
 66 |     }
 67 |   }
 68 | 
 69 |   .cd-h-timeline__line { // grey line
 70 |     position: absolute;
 71 |     z-index: 1;
 72 |     left: 0;
 73 |     top: 49px;
 74 |     height: 2px; // width will be set using JavaScript
 75 |     background-color: lightness(var(--cd-color-3), 0.9);
 76 |     transition: transform 0.4s;
 77 |   }
 78 | 
 79 |   .cd-h-timeline__filling-line { // green filling line
 80 |     position: absolute;
 81 |     z-index: 1;
 82 |     left: 0;
 83 |     top: 0;
 84 |     height: 100%;
 85 |     width: 100%;
 86 |     background-color: var(--cd-color-2);
 87 |     transform: scaleX(0);
 88 |     transform-origin: left center;
 89 |     transition: transform 0.3s;
 90 |   }
 91 | 
 92 |   .cd-h-timeline__date {
 93 |     position: absolute;
 94 |     bottom: 0; // left position will be set using JavaScript
 95 |     z-index: 2;
 96 |     text-align: center;
 97 |     font-size: 0.8em;
 98 |     padding-bottom: var(--space-sm);
 99 |     color: var(--cd-color-1);
100 |     user-select: none; // improve swipe
101 |     text-decoration: none;
102 | 
103 |     &::after { // this is used to create the event spot
104 |       content: '';
105 |       position: absolute;
106 |       left: 50%;
107 |       transform: translateX(-50%);
108 |       bottom: -5px;
109 |       height: 12px;
110 |       width: 12px;
111 |       border-radius: 50%;
112 |       border-width: 2px;
113 |       border-style: solid;
114 |       border-color: lightness(var(--cd-color-3), 0.9);
115 |       background-color: var(--cd-color-3);
116 |       transition: background-color 0.3s, border-color .3s;
117 |     }
118 | 
119 |     &:hover::after {
120 |       background-color: var(--cd-color-2);
121 |       border-color: var(--cd-color-2);
122 |     }
123 | 
124 |     @include breakpoint(md) {
125 |       font-size: 0.7em;
126 |     }
127 |   }
128 | 
129 |   .cd-h-timeline__date--selected {
130 |     pointer-events: none;
131 | 
132 |     &::after {
133 |       background-color: var(--cd-color-2);
134 |       border-color: var(--cd-color-2);
135 |     }
136 |   }
137 | 
138 |   .cd-h-timeline__date--older-event::after {
139 |     border-color: var(--cd-color-2);
140 |   }
141 | 
142 |   .cd-h-timeline__navigation { // arrows to navigate the timeline
143 |     position: absolute;
144 |     z-index: 1;
145 |     top: 50%;
146 |     transform: translateY(-50%);
147 |     height: 34px;
148 |     width: 34px;
149 |     border-radius: 50%;
150 |     border-width: 2px;
151 |     border-style: solid;
152 |     border-color: lightness(var(--cd-color-3), 0.9);
153 |     transition: border-color 0.3s;
154 |     
155 |     &::after { // arrow icon
156 |       content: '';
157 |       position: absolute;
158 |       height: 16px;
159 |       width: 16px;
160 |       top: 50%;
161 |       left: 50%;
162 |       transform: translateX(-50%) translateY(-50%);
163 |       background: url(../img/cd-arrow.svg) no-repeat 0 0;
164 |     }
165 | 
166 |     &:hover {
167 |       border-color: var(--cd-color-2);
168 |     }
169 |   }
170 | 
171 |   .cd-h-timeline__navigation--prev {
172 |     left: 0;
173 |     transform: translateY(-50%) rotate(180deg);
174 |   }
175 | 
176 |   .cd-h-timeline__navigation--next {
177 |     right: 0;
178 |   }
179 | 
180 |   .cd-h-timeline__navigation--inactive {
181 |     cursor: not-allowed;
182 | 
183 |     &::after {
184 |       background-position: 0 -16px;
185 |     }
186 | 
187 |     &:hover {
188 |       border-color: lightness(var(--cd-color-3), 0.9);
189 |     }
190 |   }
191 | 
192 |   .cd-h-timeline__events { // container of events info
193 |     position: relative;
194 |     width: 100%;
195 |     overflow: hidden;
196 |     transition: height .4s;
197 |   }
198 | 
199 |   .cd-h-timeline__event { // single event info
200 |     position: absolute;
201 |     z-index: 1;
202 |     width: 100%;
203 |     left: 0;
204 |     top: 0;
205 |     transform: translateX(-100%);
206 |     padding: 1px 5%;
207 |     opacity: 0;
208 |     animation-duration: 0.4s;
209 |     animation-timing-function: ease-in-out;
210 |   }
211 | 
212 |   .cd-h-timeline__event--selected { // selected event info
213 |     position: relative;
214 |     z-index: 2;
215 |     opacity: 1;
216 |     transform: translateX(0);
217 |   }
218 | 
219 |   .cd-h-timeline__event--enter-right, 
220 |   .cd-h-timeline__event--leave-right { // animate event info
221 |     animation-name: cd-enter-right;
222 |   }
223 | 
224 |   .cd-h-timeline__event--enter-left,  
225 |   .cd-h-timeline__event--leave-left { // animate event info
226 |     animation-name: cd-enter-left;
227 |   }
228 | 
229 |   .cd-h-timeline__event--leave-right, 
230 |   .cd-h-timeline__event--leave-left {
231 |     animation-direction: reverse;
232 |   }
233 | 
234 |   .cd-h-timeline__event-content {
235 |     max-width: 800px;
236 |   }
237 | 
238 |   .cd-h-timeline__event-title {
239 |     color: var(--cd-color-1);
240 |     font-family: var(--font-secondary);
241 |     font-weight: 700;
242 |     font-size: var(--text-xxxl);
243 |   }
244 | 
245 |   .cd-h-timeline__event-date {
246 |     display: block;
247 |     font-style: italic;
248 |     margin: var(--space-xs) auto;
249 | 
250 |     &::before {
251 |       content: '- ';
252 |     }
253 |   }
254 | }
255 | 
256 | @keyframes cd-enter-right {
257 |   0% {
258 |     opacity: 0;
259 |     transform: translateX(100%);
260 |   }
261 | 
262 |   100% {
263 |     opacity: 1;
264 |     transform: translateX(0%);
265 |   }
266 | }
267 | 
268 | @keyframes cd-enter-left {
269 |   0% {
270 |     opacity: 0;
271 |     transform: translateX(-100%);
272 |   }
273 | 
274 |   100% {
275 |     opacity: 1;
276 |     transform: translateX(0%);
277 |   }
278 | }
279 | 
280 | html:not(.js) .cd-h-timeline__dates,
281 | html:not(.js) .cd-h-timeline__navigation { // hide timeline dates if js is disabled
282 |   display: none;
283 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1">
  6 |   <script>document.getElementsByTagName("html")[0].className += " js";</script>
  7 |   <link rel="stylesheet" href="assets/css/style.css">
  8 |   <title>Horizontal Timeline | CodyHouse</title>
  9 | </head>
 10 | <body>
 11 |   <section class="cd-h-timeline js-cd-h-timeline margin-bottom-md">
 12 |     <p class="text-center margin-top-md margin-bottom-xl">👈 <a class="text--inherit" href="https://codyhouse.co/gem/horizontal-timeline/">Article &amp; Download</a></p>
 13 | 
 14 |     <div class="cd-h-timeline__container container">
 15 |       <div class="cd-h-timeline__dates">
 16 |         <div class="cd-h-timeline__line">
 17 |           <ol>
 18 |             <li><a href="#0" data-date="16/01/2014" class="cd-h-timeline__date cd-h-timeline__date--selected">16 Jan</a></li>
 19 |             <li><a href="#0" data-date="28/02/2014" class="cd-h-timeline__date">28 Feb</a></li>
 20 |             <li><a href="#0" data-date="20/04/2014" class="cd-h-timeline__date">20 Mar</a></li>
 21 |             <li><a href="#0" data-date="20/05/2014" class="cd-h-timeline__date">20 May</a></li>
 22 |             <li><a href="#0" data-date="09/07/2014" class="cd-h-timeline__date">09 Jul</a></li>
 23 |             <li><a href="#0" data-date="30/08/2014" class="cd-h-timeline__date">30 Aug</a></li>
 24 |             <li><a href="#0" data-date="15/09/2014" class="cd-h-timeline__date">15 Sep</a></li>
 25 |             <li><a href="#0" data-date="01/11/2014" class="cd-h-timeline__date">01 Nov</a></li>
 26 |             <li><a href="#0" data-date="10/12/2014" class="cd-h-timeline__date">10 Dec</a></li>
 27 |             <li><a href="#0" data-date="19/01/2015" class="cd-h-timeline__date">29 Jan</a></li>
 28 |             <li><a href="#0" data-date="03/03/2015" class="cd-h-timeline__date">3 Mar</a></li>
 29 |           </ol>
 30 | 
 31 |           <span class="cd-h-timeline__filling-line" aria-hidden="true"></span>
 32 |         </div> <!-- .cd-h-timeline__line -->
 33 |       </div> <!-- .cd-h-timeline__dates -->
 34 |         
 35 |       <ul>
 36 |         <li><a href="#0" class="text-replace cd-h-timeline__navigation cd-h-timeline__navigation--prev cd-h-timeline__navigation--inactive">Prev</a></li>
 37 |         <li><a href="#0" class="text-replace cd-h-timeline__navigation cd-h-timeline__navigation--next">Next</a></li>
 38 |       </ul>
 39 |     </div> <!-- .cd-h-timeline__container -->
 40 | 
 41 |     <div class="cd-h-timeline__events">
 42 |       <ol>
 43 |         <li class="cd-h-timeline__event cd-h-timeline__event--selected text-component">
 44 |           <div class="cd-h-timeline__event-content container">
 45 |             <h2 class="cd-h-timeline__event-title">Horizontal Timeline</h2>
 46 |             <em class="cd-h-timeline__event-date">January 16th, 2014</em>
 47 |             <p class="cd-h-timeline__event-description color-contrast-medium"> 
 48 |               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 49 |             </p>
 50 |           </div>
 51 |         </li>
 52 | 
 53 |         <li class="cd-h-timeline__event text-component">
 54 |           <div class="cd-h-timeline__event-content container">
 55 |             <h2 class="cd-h-timeline__event-title">Event title here</h2>
 56 |             <em class="cd-h-timeline__event-date">February 28th, 2014</em>
 57 |             <p class="cd-h-timeline__event-description color-contrast-medium"> 
 58 |               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 59 |             </p>
 60 |           </div>
 61 |         </li>
 62 | 
 63 |         <li class="cd-h-timeline__event text-component">
 64 |           <div class="cd-h-timeline__event-content container">
 65 |             <h2 class="cd-h-timeline__event-title">Event title here</h2>
 66 |             <em class="cd-h-timeline__event-date">March 20th, 2014</em>
 67 |             <p class="cd-h-timeline__event-description color-contrast-medium"> 
 68 |               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 69 |             </p>
 70 |           </div>
 71 |         </li>
 72 | 
 73 |         <li class="cd-h-timeline__event text-component">
 74 |           <div class="cd-h-timeline__event-content container">
 75 |             <h2 class="cd-h-timeline__event-title">Event title here</h2>
 76 |             <em class="cd-h-timeline__event-date">May 20th, 2014</em>
 77 |             <p class="cd-h-timeline__event-description color-contrast-medium"> 
 78 |               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 79 |             </p>
 80 |           </div>
 81 |         </li>
 82 | 
 83 |         <li class="cd-h-timeline__event text-component">
 84 |           <div class="cd-h-timeline__event-content container">
 85 |             <h2 class="cd-h-timeline__event-title">Event title here</h2>
 86 |             <em class="cd-h-timeline__event-date">July 9th, 2014</em>
 87 |             <p class="cd-h-timeline__event-description color-contrast-medium"> 
 88 |               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 89 |             </p>
 90 |           </div>
 91 |         </li>
 92 | 
 93 |         <li class="cd-h-timeline__event text-component">
 94 |           <div class="cd-h-timeline__event-content container">
 95 |             <h2 class="cd-h-timeline__event-title">Event title here</h2>
 96 |             <em class="cd-h-timeline__event-date">August 30th, 2014</em>
 97 |             <p class="cd-h-timeline__event-description color-contrast-medium"> 
 98 |               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
 99 |             </p>
100 |           </div>
101 |         </li>
102 | 
103 |         <li class="cd-h-timeline__event text-component">
104 |           <div class="cd-h-timeline__event-content container">
105 |             <h2 class="cd-h-timeline__event-title">Event title here</h2>
106 |             <em class="cd-h-timeline__event-date">September 15th, 2014</em>
107 |             <p class="cd-h-timeline__event-description color-contrast-medium"> 
108 |               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
109 |             </p>
110 |           </div>
111 |         </li>
112 | 
113 |         <li class="cd-h-timeline__event text-component">
114 |           <div class="cd-h-timeline__event-content container">
115 |             <h2 class="cd-h-timeline__event-title">Event title here</h2>
116 |             <em class="cd-h-timeline__event-date">November 1st, 2014</em>
117 |             <p class="cd-h-timeline__event-description color-contrast-medium"> 
118 |               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
119 |             </p>
120 |           </div>
121 |         </li>
122 | 
123 |         <li class="cd-h-timeline__event text-component">
124 |           <div class="cd-h-timeline__event-content container">
125 |             <h2 class="cd-h-timeline__event-title">Event title here</h2>
126 |             <em class="cd-h-timeline__event-date">December 10th, 2014</em>
127 |             <p class="cd-h-timeline__event-description color-contrast-medium"> 
128 |               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
129 |             </p>
130 |           </div>
131 |         </li>
132 | 
133 |         <li class="cd-h-timeline__event text-component">
134 |           <div class="cd-h-timeline__event-content container">
135 |             <h2 class="cd-h-timeline__event-title">Event title here</h2>
136 |             <em class="cd-h-timeline__event-date">January 29th, 2015</em>
137 |             <p class="cd-h-timeline__event-description color-contrast-medium"> 
138 |               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
139 |             </p>
140 |           </div>
141 |         </li>
142 | 
143 |         <li class="cd-h-timeline__event text-component">
144 |           <div class="cd-h-timeline__event-content container">
145 |             <h2 class="cd-h-timeline__event-title">Event title here</h2>
146 |             <em class="cd-h-timeline__event-date">March 3rd, 2015</em>
147 |             <p class="cd-h-timeline__event-description color-contrast-medium"> 
148 |               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
149 |             </p>
150 |           </div>
151 |         </li>
152 |       </ol>
153 |     </div> <!-- .cd-h-timeline__events -->
154 |   </section>
155 |   <script src="assets/js/util.js"></script> <!-- util functions included in the CodyHouse framework -->
156 |   <script src="assets/js/swipe-content.js"></script> <!-- A Vanilla JavaScript plugin to detect touch interactions -->
157 |   <script src="assets/js/main.js"></script>
158 | </body>
159 | </html>


--------------------------------------------------------------------------------
/assets/js/main.js:
--------------------------------------------------------------------------------
  1 | (function() {
  2 |   // Horizontal Timeline - by CodyHouse.co
  3 |   var HorizontalTimeline = function(element) {
  4 | 		this.element = element;
  5 | 		this.datesContainer = this.element.getElementsByClassName('cd-h-timeline__dates')[0];
  6 | 		this.line = this.datesContainer.getElementsByClassName('cd-h-timeline__line')[0]; // grey line in the top timeline section
  7 | 		this.fillingLine = this.datesContainer.getElementsByClassName('cd-h-timeline__filling-line')[0]; // green filling line in the top timeline section  
  8 | 		this.date = this.line.getElementsByClassName('cd-h-timeline__date');
  9 | 		this.selectedDate = this.line.getElementsByClassName('cd-h-timeline__date--selected')[0];
 10 | 		this.dateValues = parseDate(this);
 11 | 		this.minLapse = calcMinLapse(this);
 12 | 		this.navigation = this.element.getElementsByClassName('cd-h-timeline__navigation');
 13 | 		this.contentWrapper = this.element.getElementsByClassName('cd-h-timeline__events')[0];
 14 | 		this.content = this.contentWrapper.getElementsByClassName('cd-h-timeline__event');
 15 | 		
 16 | 		this.eventsMinDistance = 60; // min distance between two consecutive events (in px)
 17 | 		this.eventsMaxDistance = 200; // max distance between two consecutive events (in px)
 18 | 		this.translate = 0; // this will be used to store the translate value of this.line
 19 | 		this.lineLength = 0; //total length of this.line
 20 | 		
 21 | 		// store index of selected and previous selected dates
 22 | 		this.oldDateIndex = Util.getIndexInArray(this.date, this.selectedDate);
 23 | 		this.newDateIndex = this.oldDateIndex;
 24 | 
 25 | 		initTimeline(this);
 26 | 		initEvents(this);
 27 |   };
 28 | 
 29 |   function initTimeline(timeline) {
 30 |   	// set dates left position
 31 |   	var left = 0;
 32 | 		for (var i = 0; i < timeline.dateValues.length; i++) { 
 33 | 			var j = (i == 0) ? 0 : i - 1;
 34 | 	    var distance = daydiff(timeline.dateValues[j], timeline.dateValues[i]),
 35 | 	    	distanceNorm = (Math.round(distance/timeline.minLapse) + 2)*timeline.eventsMinDistance;
 36 | 	
 37 | 	    if(distanceNorm < timeline.eventsMinDistance) {
 38 | 	    	distanceNorm = timeline.eventsMinDistance;
 39 | 	    } else if(distanceNorm > timeline.eventsMaxDistance) {
 40 | 	    	distanceNorm = timeline.eventsMaxDistance;
 41 | 	    }
 42 | 	    left = left + distanceNorm;
 43 | 	    timeline.date[i].setAttribute('style', 'left:' + left+'px');
 44 | 		}
 45 | 		
 46 | 		// set line/filling line dimensions
 47 |     timeline.line.style.width = (left + timeline.eventsMinDistance)+'px';
 48 | 		timeline.lineLength = left + timeline.eventsMinDistance;
 49 | 		// reveal timeline
 50 | 		Util.addClass(timeline.element, 'cd-h-timeline--loaded');
 51 | 		selectNewDate(timeline, timeline.selectedDate);
 52 | 		resetTimelinePosition(timeline, 'next');
 53 |   };
 54 | 
 55 |   function initEvents(timeline) {
 56 |   	var self = timeline;
 57 | 		// click on arrow navigation
 58 | 		self.navigation[0].addEventListener('click', function(event){
 59 | 			event.preventDefault();
 60 | 			translateTimeline(self, 'prev');
 61 | 		});
 62 | 		self.navigation[1].addEventListener('click', function(event){
 63 | 			event.preventDefault();
 64 | 			translateTimeline(self, 'next');
 65 | 		});
 66 | 
 67 | 		//swipe on timeline
 68 | 		new SwipeContent(self.datesContainer);
 69 | 		self.datesContainer.addEventListener('swipeLeft', function(event){
 70 | 			translateTimeline(self, 'next');
 71 | 		});
 72 | 		self.datesContainer.addEventListener('swipeRight', function(event){
 73 | 			translateTimeline(self, 'prev');
 74 | 		});
 75 | 
 76 | 		//select a new event
 77 | 		for(var i = 0; i < self.date.length; i++) {
 78 | 			(function(i){
 79 | 				self.date[i].addEventListener('click', function(event){
 80 | 					event.preventDefault();
 81 | 					selectNewDate(self, event.target);
 82 | 				});
 83 | 
 84 | 				self.content[i].addEventListener('animationend', function(event){
 85 | 					if( i == self.newDateIndex && self.newDateIndex != self.oldDateIndex) resetAnimation(self);
 86 | 				});
 87 | 			})(i);
 88 | 		}
 89 |   };
 90 | 
 91 |   function updateFilling(timeline) { // update fillingLine scale value
 92 | 		var dateStyle = window.getComputedStyle(timeline.selectedDate, null),
 93 | 			left = dateStyle.getPropertyValue("left"),
 94 | 			width = dateStyle.getPropertyValue("width");
 95 | 		
 96 | 		left = Number(left.replace('px', '')) + Number(width.replace('px', ''))/2;
 97 | 		timeline.fillingLine.style.transform = 'scaleX('+(left/timeline.lineLength)+')';
 98 | 	};
 99 | 
100 |   function translateTimeline(timeline, direction) { // translate timeline (and date elements)
101 |   	var containerWidth = timeline.datesContainer.offsetWidth;
102 |   	if(direction) {
103 |   		timeline.translate = (direction == 'next') ? timeline.translate - containerWidth + timeline.eventsMinDistance : timeline.translate + containerWidth - timeline.eventsMinDistance;
104 |   	}
105 |     if( 0 - timeline.translate > timeline.lineLength - containerWidth ) timeline.translate = containerWidth - timeline.lineLength;
106 |     if( timeline.translate > 0 ) timeline.translate = 0;
107 | 
108 |     timeline.line.style.transform = 'translateX('+timeline.translate+'px)';
109 |     // update the navigation items status (toggle inactive class)
110 | 		(timeline.translate == 0 ) ? Util.addClass(timeline.navigation[0], 'cd-h-timeline__navigation--inactive') : Util.removeClass(timeline.navigation[0], 'cd-h-timeline__navigation--inactive');
111 | 		(timeline.translate == containerWidth - timeline.lineLength ) ? Util.addClass(timeline.navigation[1], 'cd-h-timeline__navigation--inactive') : Util.removeClass(timeline.navigation[1], 'cd-h-timeline__navigation--inactive');
112 |   };
113 | 
114 | 	function selectNewDate(timeline, target) { // ned date has been selected -> update timeline
115 | 		timeline.newDateIndex = Util.getIndexInArray(timeline.date, target);
116 | 		timeline.oldDateIndex = Util.getIndexInArray(timeline.date, timeline.selectedDate);
117 | 		Util.removeClass(timeline.selectedDate, 'cd-h-timeline__date--selected');
118 | 		Util.addClass(timeline.date[timeline.newDateIndex], 'cd-h-timeline__date--selected');
119 | 		timeline.selectedDate = timeline.date[timeline.newDateIndex];
120 | 		updateOlderEvents(timeline);
121 | 		updateVisibleContent(timeline);
122 | 		updateFilling(timeline);
123 | 	};
124 | 
125 | 	function updateOlderEvents(timeline) { // update older events style
126 | 		for(var i = 0; i < timeline.date.length; i++) {
127 | 			(i < timeline.newDateIndex) ? Util.addClass(timeline.date[i], 'cd-h-timeline__date--older-event') : Util.removeClass(timeline.date[i], 'cd-h-timeline__date--older-event');
128 | 		}
129 | 	};
130 | 
131 | 	function updateVisibleContent(timeline) { // show content of new selected date
132 | 		if (timeline.newDateIndex > timeline.oldDateIndex) {
133 | 			var classEntering = 'cd-h-timeline__event--selected cd-h-timeline__event--enter-right',
134 | 				classLeaving = 'cd-h-timeline__event--leave-left';
135 | 		} else if(timeline.newDateIndex < timeline.oldDateIndex) {
136 | 			var classEntering = 'cd-h-timeline__event--selected cd-h-timeline__event--enter-left',
137 | 				classLeaving = 'cd-h-timeline__event--leave-right';
138 | 		} else {
139 | 			var classEntering = 'cd-h-timeline__event--selected',
140 | 				classLeaving = '';
141 | 		}
142 | 
143 | 		Util.addClass(timeline.content[timeline.newDateIndex], classEntering);
144 | 		if (timeline.newDateIndex != timeline.oldDateIndex) {
145 | 			Util.removeClass(timeline.content[timeline.oldDateIndex], 'cd-h-timeline__event--selected');
146 | 			Util.addClass(timeline.content[timeline.oldDateIndex], classLeaving);
147 | 			timeline.contentWrapper.style.height = timeline.content[timeline.newDateIndex].offsetHeight + 'px';
148 | 		}
149 | 	};
150 | 
151 | 	function resetAnimation(timeline) { // reset content classes when entering animation is over
152 | 		timeline.contentWrapper.style.height = null;
153 | 		Util.removeClass(timeline.content[timeline.newDateIndex], 'cd-h-timeline__event--enter-right cd-h-timeline__event--enter-left');
154 | 		Util.removeClass(timeline.content[timeline.oldDateIndex], 'cd-h-timeline__event--leave-right cd-h-timeline__event--leave-left');
155 | 	};
156 | 
157 | 	function keyNavigateTimeline(timeline, direction) { // navigate the timeline using the keyboard
158 | 		var newIndex = (direction == 'next') ? timeline.newDateIndex + 1 : timeline.newDateIndex - 1;
159 | 		if(newIndex < 0 || newIndex >= timeline.date.length) return;
160 | 		selectNewDate(timeline, timeline.date[newIndex]);
161 | 		resetTimelinePosition(timeline, direction);
162 | 	};
163 | 	
164 | 	function resetTimelinePosition(timeline, direction) { //translate timeline according to new selected event position
165 | 		var eventStyle = window.getComputedStyle(timeline.selectedDate, null),
166 | 			eventLeft = Number(eventStyle.getPropertyValue('left').replace('px', '')),
167 | 			timelineWidth = timeline.datesContainer.offsetWidth;
168 | 
169 |     if( (direction == 'next' && eventLeft >= timelineWidth - timeline.translate) || (direction == 'prev' && eventLeft <= - timeline.translate) ) {
170 |     	timeline.translate = timelineWidth/2 - eventLeft;
171 |     	translateTimeline(timeline, false);
172 |     }
173 |   };
174 | 
175 |   function parseDate(timeline) { // get timestamp value for each date
176 | 		var dateArrays = [];
177 | 		for(var i = 0; i < timeline.date.length; i++) {
178 | 			var singleDate = timeline.date[i].getAttribute('data-date'),
179 | 				dateComp = singleDate.split('T');
180 | 			
181 | 			if( dateComp.length > 1 ) { //both DD/MM/YEAR and time are provided
182 | 				var dayComp = dateComp[0].split('/'),
183 | 					timeComp = dateComp[1].split(':');
184 | 			} else if( dateComp[0].indexOf(':') >=0 ) { //only time is provide
185 | 				var dayComp = ["2000", "0", "0"],
186 | 					timeComp = dateComp[0].split(':');
187 | 			} else { //only DD/MM/YEAR
188 | 				var dayComp = dateComp[0].split('/'),
189 | 					timeComp = ["0", "0"];
190 | 			}
191 | 			var	newDate = new Date(dayComp[2], dayComp[1]-1, dayComp[0], timeComp[0], timeComp[1]);
192 | 			dateArrays.push(newDate);
193 | 		}
194 | 	  return dateArrays;
195 |   };
196 | 
197 |   function calcMinLapse(timeline) { // determine the minimum distance among events
198 | 		var dateDistances = [];
199 | 		for(var i = 1; i < timeline.dateValues.length; i++) { 
200 | 	    var distance = daydiff(timeline.dateValues[i-1], timeline.dateValues[i]);
201 | 	    if(distance > 0) dateDistances.push(distance);
202 | 		}
203 | 
204 | 		return (dateDistances.length > 0 ) ? Math.min.apply(null, dateDistances) : 86400000;
205 | 	};
206 | 
207 | 	function daydiff(first, second) { // time distance between events
208 | 		return Math.round((second-first));
209 | 	};
210 | 
211 |   window.HorizontalTimeline = HorizontalTimeline;
212 | 
213 |   var horizontalTimeline = document.getElementsByClassName('js-cd-h-timeline'),
214 |   	horizontalTimelineTimelineArray = [];
215 |   if(horizontalTimeline.length > 0) {
216 | 		for(var i = 0; i < horizontalTimeline.length; i++) {
217 | 			horizontalTimelineTimelineArray.push(new HorizontalTimeline(horizontalTimeline[i])); 
218 | 		}
219 | 		// navigate the timeline when inside the viewport using the keyboard
220 | 		document.addEventListener('keydown', function(event){
221 | 			if( (event.keyCode && event.keyCode == 39) || ( event.key && event.key.toLowerCase() == 'arrowright') ) {
222 | 				updateHorizontalTimeline('next'); // move to next event
223 | 			} else if((event.keyCode && event.keyCode == 37) || ( event.key && event.key.toLowerCase() == 'arrowleft')) {
224 | 				updateHorizontalTimeline('prev'); // move to prev event
225 | 			}
226 | 		});
227 |   };
228 | 
229 |   function updateHorizontalTimeline(direction) {
230 | 		for(var i = 0; i < horizontalTimelineTimelineArray.length; i++) {
231 | 			if(elementInViewport(horizontalTimeline[i])) keyNavigateTimeline(horizontalTimelineTimelineArray[i], direction);
232 | 		}
233 |   };
234 | 
235 |   /*
236 | 		How to tell if a DOM element is visible in the current viewport?
237 | 		http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
238 | 	*/
239 | 	function elementInViewport(el) {
240 | 		var top = el.offsetTop;
241 | 		var left = el.offsetLeft;
242 | 		var width = el.offsetWidth;
243 | 		var height = el.offsetHeight;
244 | 
245 | 		while(el.offsetParent) {
246 | 		    el = el.offsetParent;
247 | 		    top += el.offsetTop;
248 | 		    left += el.offsetLeft;
249 | 		}
250 | 
251 | 		return (
252 | 		    top < (window.pageYOffset + window.innerHeight) &&
253 | 		    left < (window.pageXOffset + window.innerWidth) &&
254 | 		    (top + height) > window.pageYOffset &&
255 | 		    (left + width) > window.pageXOffset
256 | 		);
257 | 	}
258 | }());


--------------------------------------------------------------------------------
/assets/css/style.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css?family=Playfair+Display:700,900|Fira+Sans:400,400italic");*,*::after,*::before{box-sizing:inherit}*{font:inherit}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,hr{margin:0;padding:0;border:0}html{box-sizing:border-box}body{background-color:hsl(0, 0%, 100%);background-color:var(--color-bg, white)}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main,form legend{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}button,input,textarea,select{margin:0}.btn,.form-control,.link,.reset{background-color:transparent;padding:0;border:0;border-radius:0;color:inherit;line-height:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none}select.form-control::-ms-expand{display:none}textarea{resize:vertical;overflow:auto;vertical-align:top}input::-ms-clear{display:none}table{border-collapse:collapse;border-spacing:0}img,video,svg{max-width:100%}[data-theme]{background-color:hsl(0, 0%, 100%);background-color:var(--color-bg, #fff);color:hsl(240, 4%, 20%);color:var(--color-contrast-high, #313135)}:root{--space-unit:  1em;--space-xxxxs: calc(0.125*var(--space-unit));--space-xxxs:  calc(0.25*var(--space-unit));--space-xxs:   calc(0.375*var(--space-unit));--space-xs:    calc(0.5*var(--space-unit));--space-sm:    calc(0.75*var(--space-unit));--space-md:    calc(1.25*var(--space-unit));--space-lg:    calc(2*var(--space-unit));--space-xl:    calc(3.25*var(--space-unit));--space-xxl:   calc(5.25*var(--space-unit));--space-xxxl:  calc(8.5*var(--space-unit));--space-xxxxl: calc(13.75*var(--space-unit));--component-padding: var(--space-md)}:root{--max-width-xxs: 32rem;--max-width-xs:  38rem;--max-width-sm:  48rem;--max-width-md:  64rem;--max-width-lg:  80rem;--max-width-xl:  90rem;--max-width-xxl: 120rem}.container{width:calc(100% - 1.25em);width:calc(100% - 2*var(--component-padding));margin-left:auto;margin-right:auto}.max-width-xxs{max-width:32rem;max-width:var(--max-width-xxs)}.max-width-xs{max-width:38rem;max-width:var(--max-width-xs)}.max-width-sm{max-width:48rem;max-width:var(--max-width-sm)}.max-width-md{max-width:64rem;max-width:var(--max-width-md)}.max-width-lg{max-width:80rem;max-width:var(--max-width-lg)}.max-width-xl{max-width:90rem;max-width:var(--max-width-xl)}.max-width-xxl{max-width:120rem;max-width:var(--max-width-xxl)}.max-width-adaptive-sm{max-width:38rem;max-width:var(--max-width-xs)}@media (min-width: 64rem){.max-width-adaptive-sm{max-width:48rem;max-width:var(--max-width-sm)}}.max-width-adaptive-md{max-width:38rem;max-width:var(--max-width-xs)}@media (min-width: 64rem){.max-width-adaptive-md{max-width:64rem;max-width:var(--max-width-md)}}.max-width-adaptive,.max-width-adaptive-lg{max-width:38rem;max-width:var(--max-width-xs)}@media (min-width: 64rem){.max-width-adaptive,.max-width-adaptive-lg{max-width:64rem;max-width:var(--max-width-md)}}@media (min-width: 90rem){.max-width-adaptive,.max-width-adaptive-lg{max-width:80rem;max-width:var(--max-width-lg)}}.max-width-adaptive-xl{max-width:38rem;max-width:var(--max-width-xs)}@media (min-width: 64rem){.max-width-adaptive-xl{max-width:64rem;max-width:var(--max-width-md)}}@media (min-width: 90rem){.max-width-adaptive-xl{max-width:90rem;max-width:var(--max-width-xl)}}.grid{--grid-gap: 0px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.grid>*{-ms-flex-preferred-size:100%;flex-basis:100%}[class*="grid-gap"]{margin-bottom:1em * -1;margin-bottom:calc(var(--grid-gap, 1em)*-1);margin-right:1em * -1;margin-right:calc(var(--grid-gap, 1em)*-1)}[class*="grid-gap"]>*{margin-bottom:1em;margin-bottom:var(--grid-gap, 1em);margin-right:1em;margin-right:var(--grid-gap, 1em)}.grid-gap-xxxxs{--grid-gap: var(--space-xxxxs)}.grid-gap-xxxs{--grid-gap: var(--space-xxxs)}.grid-gap-xxs{--grid-gap: var(--space-xxs)}.grid-gap-xs{--grid-gap: var(--space-xs)}.grid-gap-sm{--grid-gap: var(--space-sm)}.grid-gap-md{--grid-gap: var(--space-md)}.grid-gap-lg{--grid-gap: var(--space-lg)}.grid-gap-xl{--grid-gap: var(--space-xl)}.grid-gap-xxl{--grid-gap: var(--space-xxl)}.grid-gap-xxxl{--grid-gap: var(--space-xxxl)}.grid-gap-xxxxl{--grid-gap: var(--space-xxxxl)}.col{-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-1{-ms-flex-preferred-size:calc(8.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(8.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(8.33% - 0.01px - 1em);flex-basis:calc(8.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(8.33% - 0.01px - 1em);max-width:calc(8.33% - 0.01px - var(--grid-gap, 1em))}.col-2{-ms-flex-preferred-size:calc(16.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(16.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(16.66% - 0.01px - 1em);flex-basis:calc(16.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(16.66% - 0.01px - 1em);max-width:calc(16.66% - 0.01px - var(--grid-gap, 1em))}.col-3{-ms-flex-preferred-size:calc(25% - 0.01px - 1em);-ms-flex-preferred-size:calc(25% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(25% - 0.01px - 1em);flex-basis:calc(25% - 0.01px - var(--grid-gap, 1em));max-width:calc(25% - 0.01px - 1em);max-width:calc(25% - 0.01px - var(--grid-gap, 1em))}.col-4{-ms-flex-preferred-size:calc(33.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(33.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(33.33% - 0.01px - 1em);flex-basis:calc(33.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(33.33% - 0.01px - 1em);max-width:calc(33.33% - 0.01px - var(--grid-gap, 1em))}.col-5{-ms-flex-preferred-size:calc(41.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(41.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(41.66% - 0.01px - 1em);flex-basis:calc(41.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(41.66% - 0.01px - 1em);max-width:calc(41.66% - 0.01px - var(--grid-gap, 1em))}.col-6{-ms-flex-preferred-size:calc(50% - 0.01px - 1em);-ms-flex-preferred-size:calc(50% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(50% - 0.01px - 1em);flex-basis:calc(50% - 0.01px - var(--grid-gap, 1em));max-width:calc(50% - 0.01px - 1em);max-width:calc(50% - 0.01px - var(--grid-gap, 1em))}.col-7{-ms-flex-preferred-size:calc(58.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(58.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(58.33% - 0.01px - 1em);flex-basis:calc(58.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(58.33% - 0.01px - 1em);max-width:calc(58.33% - 0.01px - var(--grid-gap, 1em))}.col-8{-ms-flex-preferred-size:calc(66.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(66.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(66.66% - 0.01px - 1em);flex-basis:calc(66.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(66.66% - 0.01px - 1em);max-width:calc(66.66% - 0.01px - var(--grid-gap, 1em))}.col-9{-ms-flex-preferred-size:calc(75% - 0.01px - 1em);-ms-flex-preferred-size:calc(75% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(75% - 0.01px - 1em);flex-basis:calc(75% - 0.01px - var(--grid-gap, 1em));max-width:calc(75% - 0.01px - 1em);max-width:calc(75% - 0.01px - var(--grid-gap, 1em))}.col-10{-ms-flex-preferred-size:calc(83.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(83.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(83.33% - 0.01px - 1em);flex-basis:calc(83.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(83.33% - 0.01px - 1em);max-width:calc(83.33% - 0.01px - var(--grid-gap, 1em))}.col-11{-ms-flex-preferred-size:calc(91.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(91.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(91.66% - 0.01px - 1em);flex-basis:calc(91.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(91.66% - 0.01px - 1em);max-width:calc(91.66% - 0.01px - var(--grid-gap, 1em))}.col-12{-ms-flex-preferred-size:calc(100% - 0.01px - 1em);-ms-flex-preferred-size:calc(100% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(100% - 0.01px - 1em);flex-basis:calc(100% - 0.01px - var(--grid-gap, 1em));max-width:calc(100% - 0.01px - 1em);max-width:calc(100% - 0.01px - var(--grid-gap, 1em))}@media (min-width: 32rem){.col\@xs{-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-1\@xs{-ms-flex-preferred-size:calc(8.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(8.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(8.33% - 0.01px - 1em);flex-basis:calc(8.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(8.33% - 0.01px - 1em);max-width:calc(8.33% - 0.01px - var(--grid-gap, 1em))}.col-2\@xs{-ms-flex-preferred-size:calc(16.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(16.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(16.66% - 0.01px - 1em);flex-basis:calc(16.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(16.66% - 0.01px - 1em);max-width:calc(16.66% - 0.01px - var(--grid-gap, 1em))}.col-3\@xs{-ms-flex-preferred-size:calc(25% - 0.01px - 1em);-ms-flex-preferred-size:calc(25% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(25% - 0.01px - 1em);flex-basis:calc(25% - 0.01px - var(--grid-gap, 1em));max-width:calc(25% - 0.01px - 1em);max-width:calc(25% - 0.01px - var(--grid-gap, 1em))}.col-4\@xs{-ms-flex-preferred-size:calc(33.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(33.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(33.33% - 0.01px - 1em);flex-basis:calc(33.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(33.33% - 0.01px - 1em);max-width:calc(33.33% - 0.01px - var(--grid-gap, 1em))}.col-5\@xs{-ms-flex-preferred-size:calc(41.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(41.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(41.66% - 0.01px - 1em);flex-basis:calc(41.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(41.66% - 0.01px - 1em);max-width:calc(41.66% - 0.01px - var(--grid-gap, 1em))}.col-6\@xs{-ms-flex-preferred-size:calc(50% - 0.01px - 1em);-ms-flex-preferred-size:calc(50% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(50% - 0.01px - 1em);flex-basis:calc(50% - 0.01px - var(--grid-gap, 1em));max-width:calc(50% - 0.01px - 1em);max-width:calc(50% - 0.01px - var(--grid-gap, 1em))}.col-7\@xs{-ms-flex-preferred-size:calc(58.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(58.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(58.33% - 0.01px - 1em);flex-basis:calc(58.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(58.33% - 0.01px - 1em);max-width:calc(58.33% - 0.01px - var(--grid-gap, 1em))}.col-8\@xs{-ms-flex-preferred-size:calc(66.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(66.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(66.66% - 0.01px - 1em);flex-basis:calc(66.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(66.66% - 0.01px - 1em);max-width:calc(66.66% - 0.01px - var(--grid-gap, 1em))}.col-9\@xs{-ms-flex-preferred-size:calc(75% - 0.01px - 1em);-ms-flex-preferred-size:calc(75% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(75% - 0.01px - 1em);flex-basis:calc(75% - 0.01px - var(--grid-gap, 1em));max-width:calc(75% - 0.01px - 1em);max-width:calc(75% - 0.01px - var(--grid-gap, 1em))}.col-10\@xs{-ms-flex-preferred-size:calc(83.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(83.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(83.33% - 0.01px - 1em);flex-basis:calc(83.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(83.33% - 0.01px - 1em);max-width:calc(83.33% - 0.01px - var(--grid-gap, 1em))}.col-11\@xs{-ms-flex-preferred-size:calc(91.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(91.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(91.66% - 0.01px - 1em);flex-basis:calc(91.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(91.66% - 0.01px - 1em);max-width:calc(91.66% - 0.01px - var(--grid-gap, 1em))}.col-12\@xs{-ms-flex-preferred-size:calc(100% - 0.01px - 1em);-ms-flex-preferred-size:calc(100% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(100% - 0.01px - 1em);flex-basis:calc(100% - 0.01px - var(--grid-gap, 1em));max-width:calc(100% - 0.01px - 1em);max-width:calc(100% - 0.01px - var(--grid-gap, 1em))}}@media (min-width: 48rem){.col\@sm{-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-1\@sm{-ms-flex-preferred-size:calc(8.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(8.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(8.33% - 0.01px - 1em);flex-basis:calc(8.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(8.33% - 0.01px - 1em);max-width:calc(8.33% - 0.01px - var(--grid-gap, 1em))}.col-2\@sm{-ms-flex-preferred-size:calc(16.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(16.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(16.66% - 0.01px - 1em);flex-basis:calc(16.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(16.66% - 0.01px - 1em);max-width:calc(16.66% - 0.01px - var(--grid-gap, 1em))}.col-3\@sm{-ms-flex-preferred-size:calc(25% - 0.01px - 1em);-ms-flex-preferred-size:calc(25% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(25% - 0.01px - 1em);flex-basis:calc(25% - 0.01px - var(--grid-gap, 1em));max-width:calc(25% - 0.01px - 1em);max-width:calc(25% - 0.01px - var(--grid-gap, 1em))}.col-4\@sm{-ms-flex-preferred-size:calc(33.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(33.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(33.33% - 0.01px - 1em);flex-basis:calc(33.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(33.33% - 0.01px - 1em);max-width:calc(33.33% - 0.01px - var(--grid-gap, 1em))}.col-5\@sm{-ms-flex-preferred-size:calc(41.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(41.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(41.66% - 0.01px - 1em);flex-basis:calc(41.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(41.66% - 0.01px - 1em);max-width:calc(41.66% - 0.01px - var(--grid-gap, 1em))}.col-6\@sm{-ms-flex-preferred-size:calc(50% - 0.01px - 1em);-ms-flex-preferred-size:calc(50% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(50% - 0.01px - 1em);flex-basis:calc(50% - 0.01px - var(--grid-gap, 1em));max-width:calc(50% - 0.01px - 1em);max-width:calc(50% - 0.01px - var(--grid-gap, 1em))}.col-7\@sm{-ms-flex-preferred-size:calc(58.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(58.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(58.33% - 0.01px - 1em);flex-basis:calc(58.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(58.33% - 0.01px - 1em);max-width:calc(58.33% - 0.01px - var(--grid-gap, 1em))}.col-8\@sm{-ms-flex-preferred-size:calc(66.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(66.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(66.66% - 0.01px - 1em);flex-basis:calc(66.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(66.66% - 0.01px - 1em);max-width:calc(66.66% - 0.01px - var(--grid-gap, 1em))}.col-9\@sm{-ms-flex-preferred-size:calc(75% - 0.01px - 1em);-ms-flex-preferred-size:calc(75% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(75% - 0.01px - 1em);flex-basis:calc(75% - 0.01px - var(--grid-gap, 1em));max-width:calc(75% - 0.01px - 1em);max-width:calc(75% - 0.01px - var(--grid-gap, 1em))}.col-10\@sm{-ms-flex-preferred-size:calc(83.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(83.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(83.33% - 0.01px - 1em);flex-basis:calc(83.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(83.33% - 0.01px - 1em);max-width:calc(83.33% - 0.01px - var(--grid-gap, 1em))}.col-11\@sm{-ms-flex-preferred-size:calc(91.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(91.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(91.66% - 0.01px - 1em);flex-basis:calc(91.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(91.66% - 0.01px - 1em);max-width:calc(91.66% - 0.01px - var(--grid-gap, 1em))}.col-12\@sm{-ms-flex-preferred-size:calc(100% - 0.01px - 1em);-ms-flex-preferred-size:calc(100% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(100% - 0.01px - 1em);flex-basis:calc(100% - 0.01px - var(--grid-gap, 1em));max-width:calc(100% - 0.01px - 1em);max-width:calc(100% - 0.01px - var(--grid-gap, 1em))}}@media (min-width: 64rem){.col\@md{-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-1\@md{-ms-flex-preferred-size:calc(8.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(8.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(8.33% - 0.01px - 1em);flex-basis:calc(8.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(8.33% - 0.01px - 1em);max-width:calc(8.33% - 0.01px - var(--grid-gap, 1em))}.col-2\@md{-ms-flex-preferred-size:calc(16.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(16.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(16.66% - 0.01px - 1em);flex-basis:calc(16.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(16.66% - 0.01px - 1em);max-width:calc(16.66% - 0.01px - var(--grid-gap, 1em))}.col-3\@md{-ms-flex-preferred-size:calc(25% - 0.01px - 1em);-ms-flex-preferred-size:calc(25% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(25% - 0.01px - 1em);flex-basis:calc(25% - 0.01px - var(--grid-gap, 1em));max-width:calc(25% - 0.01px - 1em);max-width:calc(25% - 0.01px - var(--grid-gap, 1em))}.col-4\@md{-ms-flex-preferred-size:calc(33.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(33.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(33.33% - 0.01px - 1em);flex-basis:calc(33.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(33.33% - 0.01px - 1em);max-width:calc(33.33% - 0.01px - var(--grid-gap, 1em))}.col-5\@md{-ms-flex-preferred-size:calc(41.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(41.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(41.66% - 0.01px - 1em);flex-basis:calc(41.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(41.66% - 0.01px - 1em);max-width:calc(41.66% - 0.01px - var(--grid-gap, 1em))}.col-6\@md{-ms-flex-preferred-size:calc(50% - 0.01px - 1em);-ms-flex-preferred-size:calc(50% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(50% - 0.01px - 1em);flex-basis:calc(50% - 0.01px - var(--grid-gap, 1em));max-width:calc(50% - 0.01px - 1em);max-width:calc(50% - 0.01px - var(--grid-gap, 1em))}.col-7\@md{-ms-flex-preferred-size:calc(58.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(58.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(58.33% - 0.01px - 1em);flex-basis:calc(58.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(58.33% - 0.01px - 1em);max-width:calc(58.33% - 0.01px - var(--grid-gap, 1em))}.col-8\@md{-ms-flex-preferred-size:calc(66.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(66.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(66.66% - 0.01px - 1em);flex-basis:calc(66.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(66.66% - 0.01px - 1em);max-width:calc(66.66% - 0.01px - var(--grid-gap, 1em))}.col-9\@md{-ms-flex-preferred-size:calc(75% - 0.01px - 1em);-ms-flex-preferred-size:calc(75% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(75% - 0.01px - 1em);flex-basis:calc(75% - 0.01px - var(--grid-gap, 1em));max-width:calc(75% - 0.01px - 1em);max-width:calc(75% - 0.01px - var(--grid-gap, 1em))}.col-10\@md{-ms-flex-preferred-size:calc(83.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(83.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(83.33% - 0.01px - 1em);flex-basis:calc(83.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(83.33% - 0.01px - 1em);max-width:calc(83.33% - 0.01px - var(--grid-gap, 1em))}.col-11\@md{-ms-flex-preferred-size:calc(91.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(91.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(91.66% - 0.01px - 1em);flex-basis:calc(91.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(91.66% - 0.01px - 1em);max-width:calc(91.66% - 0.01px - var(--grid-gap, 1em))}.col-12\@md{-ms-flex-preferred-size:calc(100% - 0.01px - 1em);-ms-flex-preferred-size:calc(100% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(100% - 0.01px - 1em);flex-basis:calc(100% - 0.01px - var(--grid-gap, 1em));max-width:calc(100% - 0.01px - 1em);max-width:calc(100% - 0.01px - var(--grid-gap, 1em))}}@media (min-width: 80rem){.col\@lg{-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-1\@lg{-ms-flex-preferred-size:calc(8.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(8.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(8.33% - 0.01px - 1em);flex-basis:calc(8.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(8.33% - 0.01px - 1em);max-width:calc(8.33% - 0.01px - var(--grid-gap, 1em))}.col-2\@lg{-ms-flex-preferred-size:calc(16.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(16.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(16.66% - 0.01px - 1em);flex-basis:calc(16.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(16.66% - 0.01px - 1em);max-width:calc(16.66% - 0.01px - var(--grid-gap, 1em))}.col-3\@lg{-ms-flex-preferred-size:calc(25% - 0.01px - 1em);-ms-flex-preferred-size:calc(25% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(25% - 0.01px - 1em);flex-basis:calc(25% - 0.01px - var(--grid-gap, 1em));max-width:calc(25% - 0.01px - 1em);max-width:calc(25% - 0.01px - var(--grid-gap, 1em))}.col-4\@lg{-ms-flex-preferred-size:calc(33.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(33.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(33.33% - 0.01px - 1em);flex-basis:calc(33.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(33.33% - 0.01px - 1em);max-width:calc(33.33% - 0.01px - var(--grid-gap, 1em))}.col-5\@lg{-ms-flex-preferred-size:calc(41.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(41.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(41.66% - 0.01px - 1em);flex-basis:calc(41.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(41.66% - 0.01px - 1em);max-width:calc(41.66% - 0.01px - var(--grid-gap, 1em))}.col-6\@lg{-ms-flex-preferred-size:calc(50% - 0.01px - 1em);-ms-flex-preferred-size:calc(50% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(50% - 0.01px - 1em);flex-basis:calc(50% - 0.01px - var(--grid-gap, 1em));max-width:calc(50% - 0.01px - 1em);max-width:calc(50% - 0.01px - var(--grid-gap, 1em))}.col-7\@lg{-ms-flex-preferred-size:calc(58.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(58.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(58.33% - 0.01px - 1em);flex-basis:calc(58.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(58.33% - 0.01px - 1em);max-width:calc(58.33% - 0.01px - var(--grid-gap, 1em))}.col-8\@lg{-ms-flex-preferred-size:calc(66.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(66.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(66.66% - 0.01px - 1em);flex-basis:calc(66.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(66.66% - 0.01px - 1em);max-width:calc(66.66% - 0.01px - var(--grid-gap, 1em))}.col-9\@lg{-ms-flex-preferred-size:calc(75% - 0.01px - 1em);-ms-flex-preferred-size:calc(75% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(75% - 0.01px - 1em);flex-basis:calc(75% - 0.01px - var(--grid-gap, 1em));max-width:calc(75% - 0.01px - 1em);max-width:calc(75% - 0.01px - var(--grid-gap, 1em))}.col-10\@lg{-ms-flex-preferred-size:calc(83.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(83.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(83.33% - 0.01px - 1em);flex-basis:calc(83.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(83.33% - 0.01px - 1em);max-width:calc(83.33% - 0.01px - var(--grid-gap, 1em))}.col-11\@lg{-ms-flex-preferred-size:calc(91.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(91.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(91.66% - 0.01px - 1em);flex-basis:calc(91.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(91.66% - 0.01px - 1em);max-width:calc(91.66% - 0.01px - var(--grid-gap, 1em))}.col-12\@lg{-ms-flex-preferred-size:calc(100% - 0.01px - 1em);-ms-flex-preferred-size:calc(100% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(100% - 0.01px - 1em);flex-basis:calc(100% - 0.01px - var(--grid-gap, 1em));max-width:calc(100% - 0.01px - 1em);max-width:calc(100% - 0.01px - var(--grid-gap, 1em))}}@media (min-width: 90rem){.col\@xl{-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-1\@xl{-ms-flex-preferred-size:calc(8.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(8.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(8.33% - 0.01px - 1em);flex-basis:calc(8.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(8.33% - 0.01px - 1em);max-width:calc(8.33% - 0.01px - var(--grid-gap, 1em))}.col-2\@xl{-ms-flex-preferred-size:calc(16.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(16.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(16.66% - 0.01px - 1em);flex-basis:calc(16.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(16.66% - 0.01px - 1em);max-width:calc(16.66% - 0.01px - var(--grid-gap, 1em))}.col-3\@xl{-ms-flex-preferred-size:calc(25% - 0.01px - 1em);-ms-flex-preferred-size:calc(25% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(25% - 0.01px - 1em);flex-basis:calc(25% - 0.01px - var(--grid-gap, 1em));max-width:calc(25% - 0.01px - 1em);max-width:calc(25% - 0.01px - var(--grid-gap, 1em))}.col-4\@xl{-ms-flex-preferred-size:calc(33.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(33.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(33.33% - 0.01px - 1em);flex-basis:calc(33.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(33.33% - 0.01px - 1em);max-width:calc(33.33% - 0.01px - var(--grid-gap, 1em))}.col-5\@xl{-ms-flex-preferred-size:calc(41.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(41.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(41.66% - 0.01px - 1em);flex-basis:calc(41.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(41.66% - 0.01px - 1em);max-width:calc(41.66% - 0.01px - var(--grid-gap, 1em))}.col-6\@xl{-ms-flex-preferred-size:calc(50% - 0.01px - 1em);-ms-flex-preferred-size:calc(50% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(50% - 0.01px - 1em);flex-basis:calc(50% - 0.01px - var(--grid-gap, 1em));max-width:calc(50% - 0.01px - 1em);max-width:calc(50% - 0.01px - var(--grid-gap, 1em))}.col-7\@xl{-ms-flex-preferred-size:calc(58.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(58.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(58.33% - 0.01px - 1em);flex-basis:calc(58.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(58.33% - 0.01px - 1em);max-width:calc(58.33% - 0.01px - var(--grid-gap, 1em))}.col-8\@xl{-ms-flex-preferred-size:calc(66.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(66.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(66.66% - 0.01px - 1em);flex-basis:calc(66.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(66.66% - 0.01px - 1em);max-width:calc(66.66% - 0.01px - var(--grid-gap, 1em))}.col-9\@xl{-ms-flex-preferred-size:calc(75% - 0.01px - 1em);-ms-flex-preferred-size:calc(75% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(75% - 0.01px - 1em);flex-basis:calc(75% - 0.01px - var(--grid-gap, 1em));max-width:calc(75% - 0.01px - 1em);max-width:calc(75% - 0.01px - var(--grid-gap, 1em))}.col-10\@xl{-ms-flex-preferred-size:calc(83.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(83.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(83.33% - 0.01px - 1em);flex-basis:calc(83.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(83.33% - 0.01px - 1em);max-width:calc(83.33% - 0.01px - var(--grid-gap, 1em))}.col-11\@xl{-ms-flex-preferred-size:calc(91.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(91.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(91.66% - 0.01px - 1em);flex-basis:calc(91.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(91.66% - 0.01px - 1em);max-width:calc(91.66% - 0.01px - var(--grid-gap, 1em))}.col-12\@xl{-ms-flex-preferred-size:calc(100% - 0.01px - 1em);-ms-flex-preferred-size:calc(100% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(100% - 0.01px - 1em);flex-basis:calc(100% - 0.01px - var(--grid-gap, 1em));max-width:calc(100% - 0.01px - 1em);max-width:calc(100% - 0.01px - var(--grid-gap, 1em))}}:root{--radius-sm: calc(var(--radius, 0.25em)/2);--radius-md: var(--radius, 0.25em);--radius-lg: calc(var(--radius, 0.25em)*2);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .085), 0 1px 8px rgba(0, 0, 0, .1);--shadow-md: 0 1px 8px rgba(0, 0, 0, .1), 0 8px 24px rgba(0, 0, 0, .15);--shadow-lg: 0 1px 8px rgba(0, 0, 0, .1), 0 16px 48px rgba(0, 0, 0, .1), 0 24px 60px rgba(0, 0, 0, .1);--bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);--ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);--ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);--ease-out: cubic-bezier(0.215, 0.61, 0.355, 1)}:root{--body-line-height: 1.4;--heading-line-height: 1.2}body{font-size:1em;font-size:var(--text-base-size, 1em);font-family:'Fira Sans', sans-serif;font-family:var(--font-primary, sans-serif);color:hsl(240, 4%, 20%);color:var(--color-contrast-high, #313135)}h1,h2,h3,h4{color:hsl(240, 8%, 12%);color:var(--color-contrast-higher, #1c1c21);line-height:1.2;line-height:var(--heading-line-height, 1.2)}.text-xxxl{font-size:2.48832em;font-size:var(--text-xxxl, 2.488em)}h1,.text-xxl{font-size:2.0736em;font-size:var(--text-xxl, 2.074em)}h2,.text-xl{font-size:1.728em;font-size:var(--text-xl, 1.728em)}h3,.text-lg{font-size:1.44em;font-size:var(--text-lg, 1.44em)}h4,.text-md{font-size:1.2em;font-size:var(--text-md, 1.2em)}small,.text-sm{font-size:0.83333em;font-size:var(--text-sm, 0.833em)}.text-xs{font-size:0.69444em;font-size:var(--text-xs, 0.694em)}a,.link{color:hsl(220, 90%, 56%);color:var(--color-primary, #2a6df4);text-decoration:underline}strong,.text-bold{font-weight:bold}s{text-decoration:line-through}u,.text-underline{text-decoration:underline}.text-component{--component-body-line-height: calc(var(--body-line-height)*var(--line-height-multiplier, 1));--component-heading-line-height: calc(var(--heading-line-height)*var(--line-height-multiplier, 1))}.text-component h1,.text-component h2,.text-component h3,.text-component h4{line-height:1.2;line-height:var(--component-heading-line-height, 1.2);margin-bottom:0.25em;margin-bottom:calc(var(--space-xxxs)*var(--text-vspace-multiplier, 1))}.text-component h2,.text-component h3,.text-component h4{margin-top:0.75em;margin-top:calc(var(--space-sm)*var(--text-vspace-multiplier, 1))}.text-component p,.text-component blockquote,.text-component ul li,.text-component ol li{line-height:1.4;line-height:var(--component-body-line-height)}.text-component ul,.text-component ol,.text-component p,.text-component blockquote,.text-component .text-component__block{margin-bottom:0.75em;margin-bottom:calc(var(--space-sm)*var(--text-vspace-multiplier, 1))}.text-component ul,.text-component ol{padding-left:1em}.text-component ul{list-style-type:disc}.text-component ol{list-style-type:decimal}.text-component img{display:block;margin:0 auto}.text-component figcaption{text-align:center;margin-top:0.5em;margin-top:var(--space-xs)}.text-component em{font-style:italic}.text-component hr{margin-top:2em;margin-top:calc(var(--space-lg)*var(--text-vspace-multiplier, 1));margin-bottom:2em;margin-bottom:calc(var(--space-lg)*var(--text-vspace-multiplier, 1));margin-left:auto;margin-right:auto}.text-component>*:first-child{margin-top:0}.text-component>*:last-child{margin-bottom:0}.text-component__block--full-width{width:100vw;margin-left:calc(50% - 50vw)}@media (min-width: 48rem){.text-component__block--left,.text-component__block--right{width:45%}.text-component__block--left img,.text-component__block--right img{width:100%}.text-component__block--left{float:left;margin-right:0.75em;margin-right:calc(var(--space-sm)*var(--text-vspace-multiplier, 1))}.text-component__block--right{float:right;margin-left:0.75em;margin-left:calc(var(--space-sm)*var(--text-vspace-multiplier, 1))}}@media (min-width: 90rem){.text-component__block--outset{width:calc(100% + 10.5em);width:calc(100% + 2*var(--space-xxl))}.text-component__block--outset img{width:100%}.text-component__block--outset:not(.text-component__block--right){margin-left:-5.25em;margin-left:calc(-1*var(--space-xxl))}.text-component__block--left,.text-component__block--right{width:50%}.text-component__block--right.text-component__block--outset{margin-right:-5.25em;margin-right:calc(-1*var(--space-xxl))}}:root{--icon-xxs: 12px;--icon-xs:  16px;--icon-sm:  24px;--icon-md:  32px;--icon-lg:  48px;--icon-xl:  64px;--icon-xxl: 128px}.icon{display:inline-block;color:inherit;fill:currentColor;height:1em;width:1em;line-height:1;-ms-flex-negative:0;flex-shrink:0}.icon--xxs{font-size:12px;font-size:var(--icon-xxs)}.icon--xs{font-size:16px;font-size:var(--icon-xs)}.icon--sm{font-size:24px;font-size:var(--icon-sm)}.icon--md{font-size:32px;font-size:var(--icon-md)}.icon--lg{font-size:48px;font-size:var(--icon-lg)}.icon--xl{font-size:64px;font-size:var(--icon-xl)}.icon--xxl{font-size:128px;font-size:var(--icon-xxl)}.icon--is-spinning{-webkit-animation:icon-spin 1s infinite linear;animation:icon-spin 1s infinite linear}@-webkit-keyframes icon-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes icon-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.icon use{color:inherit;fill:currentColor}.btn{position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;white-space:nowrap;text-decoration:none;line-height:1;font-size:1em;font-size:var(--btn-font-size, 1em);padding-top:0.5em;padding-top:var(--btn-padding-y, 0.5em);padding-bottom:0.5em;padding-bottom:var(--btn-padding-y, 0.5em);padding-left:0.75em;padding-left:var(--btn-padding-x, 0.75em);padding-right:0.75em;padding-right:var(--btn-padding-x, 0.75em);border-radius:0.25em;border-radius:var(--btn-radius, 0.25em)}.btn--primary{background-color:hsl(220, 90%, 56%);background-color:var(--color-primary, #2a6df4);color:hsl(0, 0%, 100%);color:var(--color-white, #fff)}.btn--subtle{background-color:hsl(240, 1%, 83%);background-color:var(--color-contrast-low, #d3d3d4);color:hsl(240, 8%, 12%);color:var(--color-contrast-higher, #1c1c21)}.btn--accent{background-color:hsl(355, 90%, 61%);background-color:var(--color-accent, #f54251);color:hsl(0, 0%, 100%);color:var(--color-white, #fff)}.btn--disabled{cursor:not-allowed}.btn--sm{font-size:0.8em;font-size:var(--btn-font-size-sm, 0.8em)}.btn--md{font-size:1.2em;font-size:var(--btn-font-size-md, 1.2em)}.btn--lg{font-size:1.4em;font-size:var(--btn-font-size-lg, 1.4em)}.btn--icon{padding:0.5em;padding:var(--btn-padding-y, 0.5em)}.form-control{background-color:hsl(0, 0%, 100%);background-color:var(--color-bg, #f2f2f2);padding-top:0.5em;padding-top:var(--form-control-padding-y, 0.5em);padding-bottom:0.5em;padding-bottom:var(--form-control-padding-y, 0.5em);padding-left:0.75em;padding-left:var(--form-control-padding-x, 0.75em);padding-right:0.75em;padding-right:var(--form-control-padding-x, 0.75em);border-radius:0.25em;border-radius:var(--form-control-radius, 0.25em)}.form-control::-webkit-input-placeholder{color:hsl(240, 1%, 48%);color:var(--color-contrast-medium, #79797c)}.form-control::-moz-placeholder{opacity:1;color:hsl(240, 1%, 48%);color:var(--color-contrast-medium, #79797c)}.form-control:-ms-input-placeholder{color:hsl(240, 1%, 48%);color:var(--color-contrast-medium, #79797c)}.form-control:-moz-placeholder{color:hsl(240, 1%, 48%);color:var(--color-contrast-medium, #79797c)}.form-control[disabled],.form-control[readonly]{cursor:not-allowed}.form-legend{color:hsl(240, 8%, 12%);color:var(--color-contrast-higher, #1c1c21);line-height:1.2;font-size:1.2em;font-size:var(--text-md, 1.2em);margin-bottom:0.375em;margin-bottom:var(--space-xxs)}.form-label{display:inline-block}.form__msg-error{background-color:hsl(355, 90%, 61%);background-color:var(--color-error, #f54251);color:hsl(0, 0%, 100%);color:var(--color-white, #fff);font-size:0.83333em;font-size:var(--text-sm, 0.833em);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:0.5em;padding:var(--space-xs);margin-top:0.75em;margin-top:var(--space-sm);border-radius:0.25em;border-radius:var(--radius-md, 0.25em);position:absolute;clip:rect(1px, 1px, 1px, 1px)}.form__msg-error::before{content:'';position:absolute;left:0.75em;left:var(--space-sm);top:0;-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);width:0;height:0;border:8px solid transparent;border-bottom-color:hsl(355, 90%, 61%);border-bottom-color:var(--color-error)}.form__msg-error--is-visible{position:relative;clip:auto}.radio-list>*,.checkbox-list>*{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:baseline;align-items:baseline;margin-bottom:0.375em;margin-bottom:var(--space-xxs)}.radio-list>*:last-of-type,.checkbox-list>*:last-of-type{margin-bottom:0}.radio-list label,.checkbox-list label{line-height:1.4;line-height:var(--body-line-height);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.radio-list input,.checkbox-list input{vertical-align:top;margin-right:0.25em;margin-right:var(--space-xxxs);-ms-flex-negative:0;flex-shrink:0}:root{--zindex-header: 2;--zindex-popover: 5;--zindex-fixed-element: 10;--zindex-overlay: 15}@media not all and (min-width: 32rem){.display\@xs{display:none !important}}@media (min-width: 32rem){.hide\@xs{display:none !important}}@media not all and (min-width: 48rem){.display\@sm{display:none !important}}@media (min-width: 48rem){.hide\@sm{display:none !important}}@media not all and (min-width: 64rem){.display\@md{display:none !important}}@media (min-width: 64rem){.hide\@md{display:none !important}}@media not all and (min-width: 80rem){.display\@lg{display:none !important}}@media (min-width: 80rem){.hide\@lg{display:none !important}}@media not all and (min-width: 90rem){.display\@xl{display:none !important}}@media (min-width: 90rem){.hide\@xl{display:none !important}}:root{--display: block}.is-visible{display:block !important;display:var(--display) !important}.is-hidden{display:none !important}.sr-only{position:absolute;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;padding:0;border:0;white-space:nowrap}.flex{display:-ms-flexbox;display:flex}.inline-flex{display:-ms-inline-flexbox;display:inline-flex}.flex-wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-column{-ms-flex-direction:column;flex-direction:column}.flex-row{-ms-flex-direction:row;flex-direction:row}.flex-center{-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.justify-start{-ms-flex-pack:start;justify-content:flex-start}.justify-end{-ms-flex-pack:end;justify-content:flex-end}.justify-center{-ms-flex-pack:center;justify-content:center}.justify-between{-ms-flex-pack:justify;justify-content:space-between}.items-center{-ms-flex-align:center;align-items:center}.items-start{-ms-flex-align:start;align-items:flex-start}.items-end{-ms-flex-align:end;align-items:flex-end}@media (min-width: 32rem){.flex-wrap\@xs{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-column\@xs{-ms-flex-direction:column;flex-direction:column}.flex-row\@xs{-ms-flex-direction:row;flex-direction:row}.flex-center\@xs{-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.justify-start\@xs{-ms-flex-pack:start;justify-content:flex-start}.justify-end\@xs{-ms-flex-pack:end;justify-content:flex-end}.justify-center\@xs{-ms-flex-pack:center;justify-content:center}.justify-between\@xs{-ms-flex-pack:justify;justify-content:space-between}.items-center\@xs{-ms-flex-align:center;align-items:center}.items-start\@xs{-ms-flex-align:start;align-items:flex-start}.items-end\@xs{-ms-flex-align:end;align-items:flex-end}}@media (min-width: 48rem){.flex-wrap\@sm{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-column\@sm{-ms-flex-direction:column;flex-direction:column}.flex-row\@sm{-ms-flex-direction:row;flex-direction:row}.flex-center\@sm{-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.justify-start\@sm{-ms-flex-pack:start;justify-content:flex-start}.justify-end\@sm{-ms-flex-pack:end;justify-content:flex-end}.justify-center\@sm{-ms-flex-pack:center;justify-content:center}.justify-between\@sm{-ms-flex-pack:justify;justify-content:space-between}.items-center\@sm{-ms-flex-align:center;align-items:center}.items-start\@sm{-ms-flex-align:start;align-items:flex-start}.items-end\@sm{-ms-flex-align:end;align-items:flex-end}}@media (min-width: 64rem){.flex-wrap\@md{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-column\@md{-ms-flex-direction:column;flex-direction:column}.flex-row\@md{-ms-flex-direction:row;flex-direction:row}.flex-center\@md{-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.justify-start\@md{-ms-flex-pack:start;justify-content:flex-start}.justify-end\@md{-ms-flex-pack:end;justify-content:flex-end}.justify-center\@md{-ms-flex-pack:center;justify-content:center}.justify-between\@md{-ms-flex-pack:justify;justify-content:space-between}.items-center\@md{-ms-flex-align:center;align-items:center}.items-start\@md{-ms-flex-align:start;align-items:flex-start}.items-end\@md{-ms-flex-align:end;align-items:flex-end}}@media (min-width: 80rem){.flex-wrap\@lg{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-column\@lg{-ms-flex-direction:column;flex-direction:column}.flex-row\@lg{-ms-flex-direction:row;flex-direction:row}.flex-center\@lg{-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.justify-start\@lg{-ms-flex-pack:start;justify-content:flex-start}.justify-end\@lg{-ms-flex-pack:end;justify-content:flex-end}.justify-center\@lg{-ms-flex-pack:center;justify-content:center}.justify-between\@lg{-ms-flex-pack:justify;justify-content:space-between}.items-center\@lg{-ms-flex-align:center;align-items:center}.items-start\@lg{-ms-flex-align:start;align-items:flex-start}.items-end\@lg{-ms-flex-align:end;align-items:flex-end}}@media (min-width: 90rem){.flex-wrap\@xl{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-column\@xl{-ms-flex-direction:column;flex-direction:column}.flex-row\@xl{-ms-flex-direction:row;flex-direction:row}.flex-center\@xl{-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.justify-start\@xl{-ms-flex-pack:start;justify-content:flex-start}.justify-end\@xl{-ms-flex-pack:end;justify-content:flex-end}.justify-center\@xl{-ms-flex-pack:center;justify-content:center}.justify-between\@xl{-ms-flex-pack:justify;justify-content:space-between}.items-center\@xl{-ms-flex-align:center;align-items:center}.items-start\@xl{-ms-flex-align:start;align-items:flex-start}.items-end\@xl{-ms-flex-align:end;align-items:flex-end}}.flex-grow{-ms-flex-positive:1;flex-grow:1}.flex-shrink-0{-ms-flex-negative:0;flex-shrink:0}.flex-gap-xxxs{margin-bottom:-0.25em;margin-bottom:calc(-1*var(--space-xxxs));margin-right:-0.25em;margin-right:calc(-1*var(--space-xxxs))}.flex-gap-xxxs>*{margin-bottom:0.25em;margin-bottom:var(--space-xxxs);margin-right:0.25em;margin-right:var(--space-xxxs)}.flex-gap-xxs{margin-bottom:-0.375em;margin-bottom:calc(-1*var(--space-xxs));margin-right:-0.375em;margin-right:calc(-1*var(--space-xxs))}.flex-gap-xxs>*{margin-bottom:0.375em;margin-bottom:var(--space-xxs);margin-right:0.375em;margin-right:var(--space-xxs)}.flex-gap-xs{margin-bottom:-0.5em;margin-bottom:calc(-1*var(--space-xs));margin-right:-0.5em;margin-right:calc(-1*var(--space-xs))}.flex-gap-xs>*{margin-bottom:0.5em;margin-bottom:var(--space-xs);margin-right:0.5em;margin-right:var(--space-xs)}.flex-gap-sm{margin-bottom:-0.75em;margin-bottom:calc(-1*var(--space-sm));margin-right:-0.75em;margin-right:calc(-1*var(--space-sm))}.flex-gap-sm>*{margin-bottom:0.75em;margin-bottom:var(--space-sm);margin-right:0.75em;margin-right:var(--space-sm)}.flex-gap-md{margin-bottom:-1.25em;margin-bottom:calc(-1*var(--space-md));margin-right:-1.25em;margin-right:calc(-1*var(--space-md))}.flex-gap-md>*{margin-bottom:1.25em;margin-bottom:var(--space-md);margin-right:1.25em;margin-right:var(--space-md)}.flex-gap-lg{margin-bottom:-2em;margin-bottom:calc(-1*var(--space-lg));margin-right:-2em;margin-right:calc(-1*var(--space-lg))}.flex-gap-lg>*{margin-bottom:2em;margin-bottom:var(--space-lg);margin-right:2em;margin-right:var(--space-lg)}.flex-gap-xl{margin-bottom:-3.25em;margin-bottom:calc(-1*var(--space-xl));margin-right:-3.25em;margin-right:calc(-1*var(--space-xl))}.flex-gap-xl>*{margin-bottom:3.25em;margin-bottom:var(--space-xl);margin-right:3.25em;margin-right:var(--space-xl)}.flex-gap-xxl{margin-bottom:-5.25em;margin-bottom:calc(-1*var(--space-xxl));margin-right:-5.25em;margin-right:calc(-1*var(--space-xxl))}.flex-gap-xxl>*{margin-bottom:5.25em;margin-bottom:var(--space-xxl);margin-right:5.25em;margin-right:var(--space-xxl)}.margin-xxxxs{margin:0.125em;margin:var(--space-xxxxs)}.margin-xxxs{margin:0.25em;margin:var(--space-xxxs)}.margin-xxs{margin:0.375em;margin:var(--space-xxs)}.margin-xs{margin:0.5em;margin:var(--space-xs)}.margin-sm{margin:0.75em;margin:var(--space-sm)}.margin-md{margin:1.25em;margin:var(--space-md)}.margin-lg{margin:2em;margin:var(--space-lg)}.margin-xl{margin:3.25em;margin:var(--space-xl)}.margin-xxl{margin:5.25em;margin:var(--space-xxl)}.margin-xxxl{margin:8.5em;margin:var(--space-xxxl)}.margin-xxxxl{margin:13.75em;margin:var(--space-xxxxl)}.margin-auto{margin:auto}.margin-top-xxxxs{margin-top:0.125em;margin-top:var(--space-xxxxs)}.margin-top-xxxs{margin-top:0.25em;margin-top:var(--space-xxxs)}.margin-top-xxs{margin-top:0.375em;margin-top:var(--space-xxs)}.margin-top-xs{margin-top:0.5em;margin-top:var(--space-xs)}.margin-top-sm{margin-top:0.75em;margin-top:var(--space-sm)}.margin-top-md{margin-top:1.25em;margin-top:var(--space-md)}.margin-top-lg{margin-top:2em;margin-top:var(--space-lg)}.margin-top-xl{margin-top:3.25em;margin-top:var(--space-xl)}.margin-top-xxl{margin-top:5.25em;margin-top:var(--space-xxl)}.margin-top-xxxl{margin-top:8.5em;margin-top:var(--space-xxxl)}.margin-top-xxxxl{margin-top:13.75em;margin-top:var(--space-xxxxl)}.margin-top-auto{margin-top:auto}.margin-bottom-xxxxs{margin-bottom:0.125em;margin-bottom:var(--space-xxxxs)}.margin-bottom-xxxs{margin-bottom:0.25em;margin-bottom:var(--space-xxxs)}.margin-bottom-xxs{margin-bottom:0.375em;margin-bottom:var(--space-xxs)}.margin-bottom-xs{margin-bottom:0.5em;margin-bottom:var(--space-xs)}.margin-bottom-sm{margin-bottom:0.75em;margin-bottom:var(--space-sm)}.margin-bottom-md{margin-bottom:1.25em;margin-bottom:var(--space-md)}.margin-bottom-lg{margin-bottom:2em;margin-bottom:var(--space-lg)}.margin-bottom-xl{margin-bottom:3.25em;margin-bottom:var(--space-xl)}.margin-bottom-xxl{margin-bottom:5.25em;margin-bottom:var(--space-xxl)}.margin-bottom-xxxl{margin-bottom:8.5em;margin-bottom:var(--space-xxxl)}.margin-bottom-xxxxl{margin-bottom:13.75em;margin-bottom:var(--space-xxxxl)}.margin-bottom-auto{margin-bottom:auto}.margin-right-xxxxs{margin-right:0.125em;margin-right:var(--space-xxxxs)}.margin-right-xxxs{margin-right:0.25em;margin-right:var(--space-xxxs)}.margin-right-xxs{margin-right:0.375em;margin-right:var(--space-xxs)}.margin-right-xs{margin-right:0.5em;margin-right:var(--space-xs)}.margin-right-sm{margin-right:0.75em;margin-right:var(--space-sm)}.margin-right-md{margin-right:1.25em;margin-right:var(--space-md)}.margin-right-lg{margin-right:2em;margin-right:var(--space-lg)}.margin-right-xl{margin-right:3.25em;margin-right:var(--space-xl)}.margin-right-xxl{margin-right:5.25em;margin-right:var(--space-xxl)}.margin-right-xxxl{margin-right:8.5em;margin-right:var(--space-xxxl)}.margin-right-xxxxl{margin-right:13.75em;margin-right:var(--space-xxxxl)}.margin-right-auto{margin-right:auto}.margin-left-xxxxs{margin-left:0.125em;margin-left:var(--space-xxxxs)}.margin-left-xxxs{margin-left:0.25em;margin-left:var(--space-xxxs)}.margin-left-xxs{margin-left:0.375em;margin-left:var(--space-xxs)}.margin-left-xs{margin-left:0.5em;margin-left:var(--space-xs)}.margin-left-sm{margin-left:0.75em;margin-left:var(--space-sm)}.margin-left-md{margin-left:1.25em;margin-left:var(--space-md)}.margin-left-lg{margin-left:2em;margin-left:var(--space-lg)}.margin-left-xl{margin-left:3.25em;margin-left:var(--space-xl)}.margin-left-xxl{margin-left:5.25em;margin-left:var(--space-xxl)}.margin-left-xxxl{margin-left:8.5em;margin-left:var(--space-xxxl)}.margin-left-xxxxl{margin-left:13.75em;margin-left:var(--space-xxxxl)}.margin-left-auto{margin-left:auto}.margin-x-xxxxs{margin-left:0.125em;margin-left:var(--space-xxxxs);margin-right:0.125em;margin-right:var(--space-xxxxs)}.margin-x-xxxs{margin-left:0.25em;margin-left:var(--space-xxxs);margin-right:0.25em;margin-right:var(--space-xxxs)}.margin-x-xxs{margin-left:0.375em;margin-left:var(--space-xxs);margin-right:0.375em;margin-right:var(--space-xxs)}.margin-x-xs{margin-left:0.5em;margin-left:var(--space-xs);margin-right:0.5em;margin-right:var(--space-xs)}.margin-x-sm{margin-left:0.75em;margin-left:var(--space-sm);margin-right:0.75em;margin-right:var(--space-sm)}.margin-x-md{margin-left:1.25em;margin-left:var(--space-md);margin-right:1.25em;margin-right:var(--space-md)}.margin-x-lg{margin-left:2em;margin-left:var(--space-lg);margin-right:2em;margin-right:var(--space-lg)}.margin-x-xl{margin-left:3.25em;margin-left:var(--space-xl);margin-right:3.25em;margin-right:var(--space-xl)}.margin-x-xxl{margin-left:5.25em;margin-left:var(--space-xxl);margin-right:5.25em;margin-right:var(--space-xxl)}.margin-x-xxxl{margin-left:8.5em;margin-left:var(--space-xxxl);margin-right:8.5em;margin-right:var(--space-xxxl)}.margin-x-xxxxl{margin-left:13.75em;margin-left:var(--space-xxxxl);margin-right:13.75em;margin-right:var(--space-xxxxl)}.margin-x-auto{margin-left:auto;margin-right:auto}.margin-y-xxxxs{margin-top:0.125em;margin-top:var(--space-xxxxs);margin-bottom:0.125em;margin-bottom:var(--space-xxxxs)}.margin-y-xxxs{margin-top:0.25em;margin-top:var(--space-xxxs);margin-bottom:0.25em;margin-bottom:var(--space-xxxs)}.margin-y-xxs{margin-top:0.375em;margin-top:var(--space-xxs);margin-bottom:0.375em;margin-bottom:var(--space-xxs)}.margin-y-xs{margin-top:0.5em;margin-top:var(--space-xs);margin-bottom:0.5em;margin-bottom:var(--space-xs)}.margin-y-sm{margin-top:0.75em;margin-top:var(--space-sm);margin-bottom:0.75em;margin-bottom:var(--space-sm)}.margin-y-md{margin-top:1.25em;margin-top:var(--space-md);margin-bottom:1.25em;margin-bottom:var(--space-md)}.margin-y-lg{margin-top:2em;margin-top:var(--space-lg);margin-bottom:2em;margin-bottom:var(--space-lg)}.margin-y-xl{margin-top:3.25em;margin-top:var(--space-xl);margin-bottom:3.25em;margin-bottom:var(--space-xl)}.margin-y-xxl{margin-top:5.25em;margin-top:var(--space-xxl);margin-bottom:5.25em;margin-bottom:var(--space-xxl)}.margin-y-xxxl{margin-top:8.5em;margin-top:var(--space-xxxl);margin-bottom:8.5em;margin-bottom:var(--space-xxxl)}.margin-y-xxxxl{margin-top:13.75em;margin-top:var(--space-xxxxl);margin-bottom:13.75em;margin-bottom:var(--space-xxxxl)}.margin-y-auto{margin-top:auto;margin-bottom:auto}@media not all and (min-width: 32rem){.has-margin\@xs{margin:0 !important}}@media not all and (min-width: 48rem){.has-margin\@sm{margin:0 !important}}@media not all and (min-width: 64rem){.has-margin\@md{margin:0 !important}}@media not all and (min-width: 80rem){.has-margin\@lg{margin:0 !important}}@media not all and (min-width: 90rem){.has-margin\@xl{margin:0 !important}}.padding-md{padding:1.25em;padding:var(--space-md)}.padding-xxxxs{padding:0.125em;padding:var(--space-xxxxs)}.padding-xxxs{padding:0.25em;padding:var(--space-xxxs)}.padding-xxs{padding:0.375em;padding:var(--space-xxs)}.padding-xs{padding:0.5em;padding:var(--space-xs)}.padding-sm{padding:0.75em;padding:var(--space-sm)}.padding-lg{padding:2em;padding:var(--space-lg)}.padding-xl{padding:3.25em;padding:var(--space-xl)}.padding-xxl{padding:5.25em;padding:var(--space-xxl)}.padding-xxxl{padding:8.5em;padding:var(--space-xxxl)}.padding-xxxxl{padding:13.75em;padding:var(--space-xxxxl)}.padding-component{padding:1.25em;padding:var(--component-padding)}.padding-top-md{padding-top:1.25em;padding-top:var(--space-md)}.padding-top-xxxxs{padding-top:0.125em;padding-top:var(--space-xxxxs)}.padding-top-xxxs{padding-top:0.25em;padding-top:var(--space-xxxs)}.padding-top-xxs{padding-top:0.375em;padding-top:var(--space-xxs)}.padding-top-xs{padding-top:0.5em;padding-top:var(--space-xs)}.padding-top-sm{padding-top:0.75em;padding-top:var(--space-sm)}.padding-top-lg{padding-top:2em;padding-top:var(--space-lg)}.padding-top-xl{padding-top:3.25em;padding-top:var(--space-xl)}.padding-top-xxl{padding-top:5.25em;padding-top:var(--space-xxl)}.padding-top-xxxl{padding-top:8.5em;padding-top:var(--space-xxxl)}.padding-top-xxxxl{padding-top:13.75em;padding-top:var(--space-xxxxl)}.padding-top-component{padding-top:1.25em;padding-top:var(--component-padding)}.padding-bottom-md{padding-bottom:1.25em;padding-bottom:var(--space-md)}.padding-bottom-xxxxs{padding-bottom:0.125em;padding-bottom:var(--space-xxxxs)}.padding-bottom-xxxs{padding-bottom:0.25em;padding-bottom:var(--space-xxxs)}.padding-bottom-xxs{padding-bottom:0.375em;padding-bottom:var(--space-xxs)}.padding-bottom-xs{padding-bottom:0.5em;padding-bottom:var(--space-xs)}.padding-bottom-sm{padding-bottom:0.75em;padding-bottom:var(--space-sm)}.padding-bottom-lg{padding-bottom:2em;padding-bottom:var(--space-lg)}.padding-bottom-xl{padding-bottom:3.25em;padding-bottom:var(--space-xl)}.padding-bottom-xxl{padding-bottom:5.25em;padding-bottom:var(--space-xxl)}.padding-bottom-xxxl{padding-bottom:8.5em;padding-bottom:var(--space-xxxl)}.padding-bottom-xxxxl{padding-bottom:13.75em;padding-bottom:var(--space-xxxxl)}.padding-bottom-component{padding-bottom:1.25em;padding-bottom:var(--component-padding)}.padding-right-md{padding-right:1.25em;padding-right:var(--space-md)}.padding-right-xxxxs{padding-right:0.125em;padding-right:var(--space-xxxxs)}.padding-right-xxxs{padding-right:0.25em;padding-right:var(--space-xxxs)}.padding-right-xxs{padding-right:0.375em;padding-right:var(--space-xxs)}.padding-right-xs{padding-right:0.5em;padding-right:var(--space-xs)}.padding-right-sm{padding-right:0.75em;padding-right:var(--space-sm)}.padding-right-lg{padding-right:2em;padding-right:var(--space-lg)}.padding-right-xl{padding-right:3.25em;padding-right:var(--space-xl)}.padding-right-xxl{padding-right:5.25em;padding-right:var(--space-xxl)}.padding-right-xxxl{padding-right:8.5em;padding-right:var(--space-xxxl)}.padding-right-xxxxl{padding-right:13.75em;padding-right:var(--space-xxxxl)}.padding-right-component{padding-right:1.25em;padding-right:var(--component-padding)}.padding-left-md{padding-left:1.25em;padding-left:var(--space-md)}.padding-left-xxxxs{padding-left:0.125em;padding-left:var(--space-xxxxs)}.padding-left-xxxs{padding-left:0.25em;padding-left:var(--space-xxxs)}.padding-left-xxs{padding-left:0.375em;padding-left:var(--space-xxs)}.padding-left-xs{padding-left:0.5em;padding-left:var(--space-xs)}.padding-left-sm{padding-left:0.75em;padding-left:var(--space-sm)}.padding-left-lg{padding-left:2em;padding-left:var(--space-lg)}.padding-left-xl{padding-left:3.25em;padding-left:var(--space-xl)}.padding-left-xxl{padding-left:5.25em;padding-left:var(--space-xxl)}.padding-left-xxxl{padding-left:8.5em;padding-left:var(--space-xxxl)}.padding-left-xxxxl{padding-left:13.75em;padding-left:var(--space-xxxxl)}.padding-left-component{padding-left:1.25em;padding-left:var(--component-padding)}.padding-x-md{padding-left:1.25em;padding-left:var(--space-md);padding-right:1.25em;padding-right:var(--space-md)}.padding-x-xxxxs{padding-left:0.125em;padding-left:var(--space-xxxxs);padding-right:0.125em;padding-right:var(--space-xxxxs)}.padding-x-xxxs{padding-left:0.25em;padding-left:var(--space-xxxs);padding-right:0.25em;padding-right:var(--space-xxxs)}.padding-x-xxs{padding-left:0.375em;padding-left:var(--space-xxs);padding-right:0.375em;padding-right:var(--space-xxs)}.padding-x-xs{padding-left:0.5em;padding-left:var(--space-xs);padding-right:0.5em;padding-right:var(--space-xs)}.padding-x-sm{padding-left:0.75em;padding-left:var(--space-sm);padding-right:0.75em;padding-right:var(--space-sm)}.padding-x-lg{padding-left:2em;padding-left:var(--space-lg);padding-right:2em;padding-right:var(--space-lg)}.padding-x-xl{padding-left:3.25em;padding-left:var(--space-xl);padding-right:3.25em;padding-right:var(--space-xl)}.padding-x-xxl{padding-left:5.25em;padding-left:var(--space-xxl);padding-right:5.25em;padding-right:var(--space-xxl)}.padding-x-xxxl{padding-left:8.5em;padding-left:var(--space-xxxl);padding-right:8.5em;padding-right:var(--space-xxxl)}.padding-x-xxxxl{padding-left:13.75em;padding-left:var(--space-xxxxl);padding-right:13.75em;padding-right:var(--space-xxxxl)}.padding-x-component{padding-left:1.25em;padding-left:var(--component-padding);padding-right:1.25em;padding-right:var(--component-padding)}.padding-y-md{padding-top:1.25em;padding-top:var(--space-md);padding-bottom:1.25em;padding-bottom:var(--space-md)}.padding-y-xxxxs{padding-top:0.125em;padding-top:var(--space-xxxxs);padding-bottom:0.125em;padding-bottom:var(--space-xxxxs)}.padding-y-xxxs{padding-top:0.25em;padding-top:var(--space-xxxs);padding-bottom:0.25em;padding-bottom:var(--space-xxxs)}.padding-y-xxs{padding-top:0.375em;padding-top:var(--space-xxs);padding-bottom:0.375em;padding-bottom:var(--space-xxs)}.padding-y-xs{padding-top:0.5em;padding-top:var(--space-xs);padding-bottom:0.5em;padding-bottom:var(--space-xs)}.padding-y-sm{padding-top:0.75em;padding-top:var(--space-sm);padding-bottom:0.75em;padding-bottom:var(--space-sm)}.padding-y-lg{padding-top:2em;padding-top:var(--space-lg);padding-bottom:2em;padding-bottom:var(--space-lg)}.padding-y-xl{padding-top:3.25em;padding-top:var(--space-xl);padding-bottom:3.25em;padding-bottom:var(--space-xl)}.padding-y-xxl{padding-top:5.25em;padding-top:var(--space-xxl);padding-bottom:5.25em;padding-bottom:var(--space-xxl)}.padding-y-xxxl{padding-top:8.5em;padding-top:var(--space-xxxl);padding-bottom:8.5em;padding-bottom:var(--space-xxxl)}.padding-y-xxxxl{padding-top:13.75em;padding-top:var(--space-xxxxl);padding-bottom:13.75em;padding-bottom:var(--space-xxxxl)}.padding-y-component{padding-top:1.25em;padding-top:var(--component-padding);padding-bottom:1.25em;padding-bottom:var(--component-padding)}@media not all and (min-width: 32rem){.has-padding\@xs{padding:0 !important}}@media not all and (min-width: 48rem){.has-padding\@sm{padding:0 !important}}@media not all and (min-width: 64rem){.has-padding\@md{padding:0 !important}}@media not all and (min-width: 80rem){.has-padding\@lg{padding:0 !important}}@media not all and (min-width: 90rem){.has-padding\@xl{padding:0 !important}}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-replace{overflow:hidden;color:transparent;text-indent:100%;white-space:nowrap}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}@media (min-width: 32rem){.text-center\@xs{text-align:center}.text-left\@xs{text-align:left}.text-right\@xs{text-align:right}}@media (min-width: 48rem){.text-center\@sm{text-align:center}.text-left\@sm{text-align:left}.text-right\@sm{text-align:right}}@media (min-width: 64rem){.text-center\@md{text-align:center}.text-left\@md{text-align:left}.text-right\@md{text-align:right}}@media (min-width: 80rem){.text-center\@lg{text-align:center}.text-left\@lg{text-align:left}.text-right\@lg{text-align:right}}@media (min-width: 90rem){.text-center\@xl{text-align:center}.text-left\@xl{text-align:left}.text-right\@xl{text-align:right}}.color-inherit{color:inherit}.color-contrast-medium{color:hsl(240, 1%, 48%);color:var(--color-contrast-medium, #79797c)}.color-contrast-high{color:hsl(240, 4%, 20%);color:var(--color-contrast-high, #313135)}.color-contrast-higher{color:hsl(240, 8%, 12%);color:var(--color-contrast-higher, #1c1c21)}.color-primary{color:hsl(220, 90%, 56%);color:var(--color-primary, #2a6df4)}.color-accent{color:hsl(355, 90%, 61%);color:var(--color-accent, #f54251)}.color-success{color:hsl(94, 48%, 56%);color:var(--color-success, #88c559)}.color-warning{color:hsl(46, 100%, 61%);color:var(--color-warning, #ffd138)}.color-error{color:hsl(355, 90%, 61%);color:var(--color-error, #f54251)}.width-100\%{width:100%}.height-100\%{height:100%}.media-wrapper{position:relative;height:0;padding-bottom:56.25%}.media-wrapper iframe,.media-wrapper video,.media-wrapper img{position:absolute;top:0;left:0;width:100%;height:100%}.media-wrapper video,.media-wrapper img{-o-object-fit:cover;object-fit:cover}.media-wrapper--4\:3{padding-bottom:75%}:root,[data-theme="default"]{--color-primary-darker:hsl(220, 90%, 36%);--color-primary-darker-h:220;--color-primary-darker-s:90%;--color-primary-darker-l:36%;--color-primary-dark:hsl(220, 90%, 46%);--color-primary-dark-h:220;--color-primary-dark-s:90%;--color-primary-dark-l:46%;--color-primary:hsl(220, 90%, 56%);--color-primary-h:220;--color-primary-s:90%;--color-primary-l:56%;--color-primary-light:hsl(220, 90%, 66%);--color-primary-light-h:220;--color-primary-light-s:90%;--color-primary-light-l:66%;--color-primary-lighter:hsl(220, 90%, 76%);--color-primary-lighter-h:220;--color-primary-lighter-s:90%;--color-primary-lighter-l:76%;--color-accent-darker:hsl(355, 90%, 41%);--color-accent-darker-h:355;--color-accent-darker-s:90%;--color-accent-darker-l:41%;--color-accent-dark:hsl(355, 90%, 51%);--color-accent-dark-h:355;--color-accent-dark-s:90%;--color-accent-dark-l:51%;--color-accent:hsl(355, 90%, 61%);--color-accent-h:355;--color-accent-s:90%;--color-accent-l:61%;--color-accent-light:hsl(355, 90%, 71%);--color-accent-light-h:355;--color-accent-light-s:90%;--color-accent-light-l:71%;--color-accent-lighter:hsl(355, 90%, 81%);--color-accent-lighter-h:355;--color-accent-lighter-s:90%;--color-accent-lighter-l:81%;--color-black:hsl(240, 8%, 12%);--color-black-h:240;--color-black-s:8%;--color-black-l:12%;--color-white:hsl(0, 0%, 100%);--color-white-h:0;--color-white-s:0%;--color-white-l:100%;--color-success-darker:hsl(94, 48%, 36%);--color-success-darker-h:94;--color-success-darker-s:48%;--color-success-darker-l:36%;--color-success-dark:hsl(94, 48%, 46%);--color-success-dark-h:94;--color-success-dark-s:48%;--color-success-dark-l:46%;--color-success:hsl(94, 48%, 56%);--color-success-h:94;--color-success-s:48%;--color-success-l:56%;--color-success-light:hsl(94, 48%, 66%);--color-success-light-h:94;--color-success-light-s:48%;--color-success-light-l:66%;--color-success-lighter:hsl(94, 48%, 76%);--color-success-lighter-h:94;--color-success-lighter-s:48%;--color-success-lighter-l:76%;--color-error-darker:hsl(355, 90%, 41%);--color-error-darker-h:355;--color-error-darker-s:90%;--color-error-darker-l:41%;--color-error-dark:hsl(355, 90%, 51%);--color-error-dark-h:355;--color-error-dark-s:90%;--color-error-dark-l:51%;--color-error:hsl(355, 90%, 61%);--color-error-h:355;--color-error-s:90%;--color-error-l:61%;--color-error-light:hsl(355, 90%, 71%);--color-error-light-h:355;--color-error-light-s:90%;--color-error-light-l:71%;--color-error-lighter:hsl(355, 90%, 81%);--color-error-lighter-h:355;--color-error-lighter-s:90%;--color-error-lighter-l:81%;--color-warning-darker:hsl(46, 100%, 41%);--color-warning-darker-h:46;--color-warning-darker-s:100%;--color-warning-darker-l:41%;--color-warning-dark:hsl(46, 100%, 51%);--color-warning-dark-h:46;--color-warning-dark-s:100%;--color-warning-dark-l:51%;--color-warning:hsl(46, 100%, 61%);--color-warning-h:46;--color-warning-s:100%;--color-warning-l:61%;--color-warning-light:hsl(46, 100%, 71%);--color-warning-light-h:46;--color-warning-light-s:100%;--color-warning-light-l:71%;--color-warning-lighter:hsl(46, 100%, 81%);--color-warning-lighter-h:46;--color-warning-lighter-s:100%;--color-warning-lighter-l:81%;--color-bg:hsl(0, 0%, 100%);--color-bg-h:0;--color-bg-s:0%;--color-bg-l:100%;--color-contrast-lower:hsl(0, 0%, 95%);--color-contrast-lower-h:0;--color-contrast-lower-s:0%;--color-contrast-lower-l:95%;--color-contrast-low:hsl(240, 1%, 83%);--color-contrast-low-h:240;--color-contrast-low-s:1%;--color-contrast-low-l:83%;--color-contrast-medium:hsl(240, 1%, 48%);--color-contrast-medium-h:240;--color-contrast-medium-s:1%;--color-contrast-medium-l:48%;--color-contrast-high:hsl(240, 4%, 20%);--color-contrast-high-h:240;--color-contrast-high-s:4%;--color-contrast-high-l:20%;--color-contrast-higher:hsl(240, 8%, 12%);--color-contrast-higher-h:240;--color-contrast-higher-s:8%;--color-contrast-higher-l:12%}@supports (--css: variables){@media (min-width: 64rem){:root{--space-unit:  1.25em}}}:root{--radius: 0.25em}:root{--font-primary: sans-serif;--text-base-size: 1em;--text-scale-ratio: 1.2;--text-xs: calc(1em/var(--text-scale-ratio)/var(--text-scale-ratio));--text-sm: calc(var(--text-xs)*var(--text-scale-ratio));--text-md: calc(var(--text-sm)*var(--text-scale-ratio)*var(--text-scale-ratio));--text-lg: calc(var(--text-md)*var(--text-scale-ratio));--text-xl: calc(var(--text-lg)*var(--text-scale-ratio));--text-xxl: calc(var(--text-xl)*var(--text-scale-ratio));--text-xxxl: calc(var(--text-xxl)*var(--text-scale-ratio));--body-line-height: 1.4;--heading-line-height: 1.2;--font-primary-capital-letter: 1}@supports (--css: variables){@media (min-width: 64rem){:root{--text-base-size: 1.25em;--text-scale-ratio: 1.25}}}mark{background-color:hsla(355, 90%, 61%, 0.2);background-color:hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), 0.2);color:inherit}.text-component{--line-height-multiplier: 1;--text-vspace-multiplier: 1}.text-component blockquote{padding-left:1em;border-left:4px solid hsl(240, 1%, 83%);border-left:4px solid var(--color-contrast-low)}.text-component hr{background:hsl(240, 1%, 83%);background:var(--color-contrast-low);height:1px}.text-component figcaption{font-size:0.83333em;font-size:var(--text-sm);color:hsl(240, 1%, 48%);color:var(--color-contrast-medium)}.article.text-component{--line-height-multiplier: 1.13;--text-vspace-multiplier: 1.2}:root{--btn-font-size: 1em;--btn-font-size-sm: calc(var(--btn-font-size) - 0.2em);--btn-font-size-md: calc(var(--btn-font-size) + 0.2em);--btn-font-size-lg: calc(var(--btn-font-size) + 0.4em);--btn-radius: 0.25em;--btn-padding-x: var(--space-sm);--btn-padding-y: var(--space-xs)}.btn{--color-shadow: hsla(240, 8%, 12%, 0.15);--color-shadow: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.15);box-shadow:0 4px 16px hsla(240, 8%, 12%, 0.15);box-shadow:0 4px 16px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.15);cursor:pointer}.btn--primary{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.btn--accent{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.btn--disabled{opacity:0.6}:root{--form-control-padding-x: var(--space-sm);--form-control-padding-y: var(--space-xs);--form-control-radius: 0.25em}.form-control{border:2px solid hsl(240, 1%, 83%);border:2px solid var(--color-contrast-low)}.form-control:focus{outline:none;border-color:hsl(220, 90%, 56%);border-color:var(--color-primary);--color-shadow: hsla(220, 90%, 56%, 0.2);--color-shadow: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2);box-shadow:undefined;box-shadow:0 0 0 3px var(--color-shadow)}.form-control:focus:focus{box-shadow:0 0 0 3px hsla(220, 90%, 56%, 0.2);box-shadow:0 0 0 3px var(--color-shadow)}.form-control[aria-invalid="true"]{border-color:hsl(355, 90%, 61%);border-color:var(--color-error)}.form-control[aria-invalid="true"]:focus{--color-shadow: hsla(355, 90%, 61%, 0.2);--color-shadow: hsla(var(--color-error-h), var(--color-error-s), var(--color-error-l), 0.2);box-shadow:undefined;box-shadow:0 0 0 3px var(--color-shadow)}.form-control[aria-invalid="true"]:focus:focus{box-shadow:0 0 0 3px hsla(355, 90%, 61%, 0.2);box-shadow:0 0 0 3px var(--color-shadow)}.form-label{font-size:0.83333em;font-size:var(--text-sm)}:root{--cd-color-1:hsl(0, 0%, 22%);--cd-color-1-h:0;--cd-color-1-s:0%;--cd-color-1-l:22%;--cd-color-2:hsl(74, 93%, 32%);--cd-color-2-h:74;--cd-color-2-s:93%;--cd-color-2-l:32%;--cd-color-3:hsl(0, 0%, 97%);--cd-color-3-h:0;--cd-color-3-s:0%;--cd-color-3-l:97%;--font-primary: 'Fira Sans', sans-serif;--font-secondary: 'Playfair Display', serif}body{color:hsl(0, 0%, 22%);color:var(--cd-color-1);background-color:hsl(0, 0%, 97%);background-color:var(--cd-color-3)}.js .cd-h-timeline{opacity:0;transition:opacity 0.2s}.js .cd-h-timeline--loaded{opacity:1}.js .cd-h-timeline__container{position:relative;height:100px;max-width:800px}.js .cd-h-timeline__dates{position:relative;height:100%;margin:0 40px;overflow:hidden}.js .cd-h-timeline__dates::after,.js .cd-h-timeline__dates::before{content:'';position:absolute;z-index:2;top:0;height:100%;width:20px}.js .cd-h-timeline__dates::before{left:0;background:linear-gradient(to right, hsl(0, 0%, 97%), hsla(0, 0%, 97%, 0));background:linear-gradient(to right, var(--cd-color-3), hsla(var(--cd-color-3-h), var(--cd-color-3-s), var(--cd-color-3-l), 0))}.js .cd-h-timeline__dates::after{right:0;background:linear-gradient(to left, hsl(0, 0%, 97%), hsla(0, 0%, 97%, 0));background:linear-gradient(to left, var(--cd-color-3), hsla(var(--cd-color-3-h), var(--cd-color-3-s), var(--cd-color-3-l), 0))}.js .cd-h-timeline__line{position:absolute;z-index:1;left:0;top:49px;height:2px;background-color:hsl(0, 0%, 87.3%);background-color:hsl(var(--cd-color-3-h), var(--cd-color-3-s), calc(var(--cd-color-3-l)*0.9));transition:-webkit-transform 0.4s;transition:transform 0.4s;transition:transform 0.4s, -webkit-transform 0.4s}.js .cd-h-timeline__filling-line{position:absolute;z-index:1;left:0;top:0;height:100%;width:100%;background-color:hsl(74, 93%, 32%);background-color:var(--cd-color-2);-webkit-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:left center;-ms-transform-origin:left center;transform-origin:left center;transition:-webkit-transform 0.3s;transition:transform 0.3s;transition:transform 0.3s, -webkit-transform 0.3s}.js .cd-h-timeline__date{position:absolute;bottom:0;z-index:2;text-align:center;font-size:0.8em;padding-bottom:0.75em;padding-bottom:var(--space-sm);color:hsl(0, 0%, 22%);color:var(--cd-color-1);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none}.js .cd-h-timeline__date::after{content:'';position:absolute;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);bottom:-5px;height:12px;width:12px;border-radius:50%;border-width:2px;border-style:solid;border-color:hsl(0, 0%, 87.3%);border-color:hsl(var(--cd-color-3-h), var(--cd-color-3-s), calc(var(--cd-color-3-l)*0.9));background-color:hsl(0, 0%, 97%);background-color:var(--cd-color-3);transition:background-color 0.3s, border-color .3s}.js .cd-h-timeline__date:hover::after{background-color:hsl(74, 93%, 32%);background-color:var(--cd-color-2);border-color:hsl(74, 93%, 32%);border-color:var(--cd-color-2)}@media (min-width: 64rem){.js .cd-h-timeline__date{font-size:0.7em}}.js .cd-h-timeline__date--selected{pointer-events:none}.js .cd-h-timeline__date--selected::after{background-color:hsl(74, 93%, 32%);background-color:var(--cd-color-2);border-color:hsl(74, 93%, 32%);border-color:var(--cd-color-2)}.js .cd-h-timeline__date--older-event::after{border-color:hsl(74, 93%, 32%);border-color:var(--cd-color-2)}.js .cd-h-timeline__navigation{position:absolute;z-index:1;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);height:34px;width:34px;border-radius:50%;border-width:2px;border-style:solid;border-color:hsl(0, 0%, 87.3%);border-color:hsl(var(--cd-color-3-h), var(--cd-color-3-s), calc(var(--cd-color-3-l)*0.9));transition:border-color 0.3s}.js .cd-h-timeline__navigation::after{content:'';position:absolute;height:16px;width:16px;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);background:url(../img/cd-arrow.svg) no-repeat 0 0}.js .cd-h-timeline__navigation:hover{border-color:hsl(74, 93%, 32%);border-color:var(--cd-color-2)}.js .cd-h-timeline__navigation--prev{left:0;-webkit-transform:translateY(-50%) rotate(180deg);-ms-transform:translateY(-50%) rotate(180deg);transform:translateY(-50%) rotate(180deg)}.js .cd-h-timeline__navigation--next{right:0}.js .cd-h-timeline__navigation--inactive{cursor:not-allowed}.js .cd-h-timeline__navigation--inactive::after{background-position:0 -16px}.js .cd-h-timeline__navigation--inactive:hover{border-color:hsl(0, 0%, 87.3%);border-color:hsl(var(--cd-color-3-h), var(--cd-color-3-s), calc(var(--cd-color-3-l)*0.9))}.js .cd-h-timeline__events{position:relative;width:100%;overflow:hidden;transition:height .4s}.js .cd-h-timeline__event{position:absolute;z-index:1;width:100%;left:0;top:0;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);padding:1px 5%;opacity:0;-webkit-animation-duration:0.4s;animation-duration:0.4s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}.js .cd-h-timeline__event--selected{position:relative;z-index:2;opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.js .cd-h-timeline__event--enter-right,.js .cd-h-timeline__event--leave-right{-webkit-animation-name:cd-enter-right;animation-name:cd-enter-right}.js .cd-h-timeline__event--enter-left,.js .cd-h-timeline__event--leave-left{-webkit-animation-name:cd-enter-left;animation-name:cd-enter-left}.js .cd-h-timeline__event--leave-right,.js .cd-h-timeline__event--leave-left{animation-direction:reverse}.js .cd-h-timeline__event-content{max-width:800px}.js .cd-h-timeline__event-title{color:hsl(0, 0%, 22%);color:var(--cd-color-1);font-family:'Playfair Display', serif;font-family:var(--font-secondary);font-weight:700;font-size:2.48832em;font-size:var(--text-xxxl)}.js .cd-h-timeline__event-date{display:block;font-style:italic;margin:0.5em auto;margin:var(--space-xs) auto}.js .cd-h-timeline__event-date::before{content:'- '}@-webkit-keyframes cd-enter-right{0%{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}100%{opacity:1;-webkit-transform:translateX(0%);transform:translateX(0%)}}@keyframes cd-enter-right{0%{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}100%{opacity:1;-webkit-transform:translateX(0%);transform:translateX(0%)}}@-webkit-keyframes cd-enter-left{0%{opacity:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}100%{opacity:1;-webkit-transform:translateX(0%);transform:translateX(0%)}}@keyframes cd-enter-left{0%{opacity:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}100%{opacity:1;-webkit-transform:translateX(0%);transform:translateX(0%)}}html:not(.js) .cd-h-timeline__dates,html:not(.js) .cd-h-timeline__navigation{display:none}
2 | 


--------------------------------------------------------------------------------